/* Basic layout and typography */
:root {
	  --bg-color: #0f172a;
	    --bg-elevated: #111827;
	      --accent: #3b82f6;
	        --accent-soft: rgba(59, 130, 246, 0.12);
		  --text-main: #e5e7eb;
		    --text-muted: #9ca3af;
		      --border-subtle: #1f2933;
		        --radius-xl: 1.25rem;
			  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.4);
			    --content-width: 900px;
			      --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		      }

		      *,
		      *::before,
		      *::after {
			        box-sizing: border-box;
			}

			html {
				  scroll-behavior: smooth;
			  }

			  body {
				    margin: 0;
				      padding: 0;
				        font-family: var(--font-main);
					  background: radial-gradient(circle at top, #111827 0, #020617 48%, #000 100%);
					    color: var(--text-main);
					      min-height: 100vh;
					        display: flex;
						  flex-direction: column;
					  }

					  /* Main layout */
					  .page-shell {
						    flex: 1;
						      display: flex;
						        flex-direction: column;
						}

						.page-header {
							  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
							    backdrop-filter: blur(18px);
							      background: linear-gradient(to right, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
							        position: sticky;
								  top: 0;
								    z-index: 10;
							    }

							    .page-header-inner {
								      max-width: var(--content-width);
								        margin: 0 auto;
									  padding: 0.9rem 1.25rem;
									    display: flex;
									      align-items: center;
									        justify-content: space-between;
									}

									.brand {
										  display: flex;
										    align-items: center;
										      gap: 0.65rem;
									      }

									      .brand-logo {
										        width: 34px;
											  height: 34px;
											    border-radius: 999px;
											      background: radial-gradient(circle at 30% 0, #60a5fa 0, #3b82f6 25%, #1d4ed8 65%, #0f172a 100%);
											        box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25), 0 18px 40px rgba(15, 23, 42, 0.9);
											}

											.brand-text-title {
												  font-weight: 600;
												    letter-spacing: 0.04em;
												      font-size: 0.95rem;
												        text-transform: uppercase;
													  color: #e5e7eb;
												  }

												  .brand-text-sub {
													    font-size: 0.75rem;
													      color: var(--text-muted);
												      }

												      .nav-links {
													        display: flex;
														  gap: 0.6rem;
														    flex-wrap: wrap;
													    }

													    .nav-link {
														      font-size: 0.78rem;
														        padding: 0.35rem 0.7rem;
															  border-radius: 999px;
															    border: 1px solid rgba(148, 163, 184, 0.35);
															      color: var(--text-muted);
															        text-decoration: none;
																  background: rgba(15, 23, 42, 0.9);
																    display: inline-flex;
																      align-items: center;
																        gap: 0.3rem;
																}

																.nav-link span.dot {
																	  width: 6px;
																	    height: 6px;
																	      border-radius: 999px;
																	        background: var(--accent);
																	}

																	.nav-link:hover {
																		  color: #f9fafb;
																		    border-color: var(--accent);
																		      background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.25), rgba(15, 23, 42, 0.98));
																	      }

																	      /* Main content */
																	      .page-main {
																		        flex: 1;
																			  display: flex;
																			    justify-content: center;
																			      padding: 2.25rem 1.25rem 3rem;
																		      }

																		      .page-main-inner {
																			        max-width: var(--content-width);
																				  width: 100%;
																			  }

																			  .card {
																				    background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.14), rgba(15, 23, 42, 0.98));
																				      border-radius: var(--radius-xl);
																				        padding: 2.25rem 2.1rem;
																					  box-shadow: var(--shadow-soft);
																					    border: 1px solid rgba(148, 163, 184, 0.24);
																					      position: relative;
																					        overflow: hidden;
																					}

																					.card::before {
																						  content: "";
																						    position: absolute;
																						      inset: 0;
																						        background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 55%);
																							  opacity: 0.9;
																							    pointer-events: none;
																						    }

																						    .card-content {
																							      position: relative;
																							        z-index: 1;
																							}

																							/* Titles */
																							.page-kicker {
																								  font-size: 0.78rem;
																								    text-transform: uppercase;
																								      letter-spacing: 0.14em;
																								        color: #93c5fd;
																									  margin-bottom: 0.7rem;
																								  }

																								  .page-title {
																									    font-size: 2rem;
																									      line-height: 1.25;
																									        margin: 0 0 0.6rem;
																										  color: #f9fafb;
																									  }

																									  .page-subtitle {
																										    margin: 0 0 1.8rem;
																										      color: var(--text-muted);
																										        font-size: 0.95rem;
																										}

																										.badge-row {
																											  display: flex;
																											    flex-wrap: wrap;
																											      gap: 0.45rem;
																											        margin-bottom: 1.5rem;
																											}

																											.badge {
																												  font-size: 0.7rem;
																												    padding: 0.25rem 0.6rem;
																												      border-radius: 999px;
																												        border: 1px solid rgba(148, 163, 184, 0.35);
																													  background: rgba(15, 23, 42, 0.8);
																													    color: var(--text-muted);
																												    }

																												    /* Content */
																												    .section {
																													      margin-bottom: 1.9rem;
																												      }

																												      .section:last-of-type {
																													        margin-bottom: 0;
																													}

																													.section-title {
																														  font-size: 1.05rem;
																														    margin-bottom: 0.55rem;
																														      color: #e5e7eb;
																													      }

																													      .section-subtitle {
																														        font-size: 0.86rem;
																															  color: var(--text-muted);
																															    margin-bottom: 0.35rem;
																														    }

																														    .section p {
																															      font-size: 0.9rem;
																															        line-height: 1.6;
																																  margin: 0.2rem 0 0.75rem;
																																    color: #e5e7eb;
																															    }

																															    .section ul {
																																      margin: 0.35rem 0 0.7rem 1.2rem;
																																        padding: 0;
																																}

																																.section li {
																																	  font-size: 0.9rem;
																																	    line-height: 1.6;
																																	      color: #e5e7eb;
																																      }

																																      /* Language layout */
																																      .lang-grid {
																																	        display: grid;
																																		  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
																																		    gap: 1.8rem;
																																	    }

																																	    .lang-chip-row {
																																		      display: flex;
																																		        gap: 0.4rem;
																																			  flex-wrap: wrap;
																																			    margin-bottom: 1rem;
																																		    }

																																		    .lang-chip {
																																			      font-size: 0.75rem;
																																			        padding: 0.2rem 0.55rem;
																																				  border-radius: 999px;
																																				    border: 1px solid rgba(148, 163, 184, 0.4);
																																				      color: var(--text-muted);
																																			      }

																																			      /* Footer */
																																			      .page-footer {
																																				        border-top: 1px solid rgba(31, 41, 55, 0.9);
																																					  padding: 1rem 1.25rem 1.6rem;
																																					    background: #020617;
																																				    }

																																				    .page-footer-inner {
																																					      max-width: var(--content-width);
																																					        margin: 0 auto;
																																						  display: flex;
																																						    flex-wrap: wrap;
																																						      gap: 0.5rem;
																																						        justify-content: space-between;
																																							  align-items: center;
																																							    font-size: 0.78rem;
																																							      color: var(--text-muted);
																																						      }

																																						      .footer-links {
																																							        display: flex;
																																								  gap: 0.8rem;
																																								    flex-wrap: wrap;
																																							    }

																																							    .footer-links a {
																																								      color: var(--text-muted);
																																								        text-decoration: none;
																																								}

																																								.footer-links a:hover {
																																									  color: #e5e7eb;
																																								  }

																																								  /* Responsive tweaks */
																																								  @media (max-width: 640px) {
																																									    .page-header-inner {
																																										        flex-direction: column;
																																											    align-items: flex-start;
																																											        gap: 0.4rem;
																																												  }

																																												    .card {
																																													        padding: 1.6rem 1.4rem;
																																														    border-radius: 1rem;
																																														      }

																																														        .page-title {
																																																    font-size: 1.6rem;
																																																      }
																																															      }