:root{
    --brand-blue: #1a4f8b;
    --brand-blue-2: #2a6fb8;
    --brand-blue-3: #0f3868;
    --brand-green: #2faa5a;
    --brand-green-2: #1f8a45;
    --ink: #0e2240;
    --muted: #6b7785;
    --paper: #ffffff;
    --soft: #f6f8fb;
    --line: #e6ebf2;
    --line-2: #d6dde7;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;height:100%; background: #061427}
  body{
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: hidden;
  }
  #root{min-height:100vh; position:relative}

  /* ============ Stage ============ */
  .stage{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(1200px 800px at 50% 20%, #143c6e 0%, #0a2a52 35%, #061427 75%);
  }

  /* moving aurora layers */
  .aurora{
    position:absolute; inset:-20%; pointer-events:none; z-index:0;
    filter: blur(40px); opacity: .55;
  }
  .aurora .blob{
    position:absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
    mix-blend-mode: screen;
  }
  .aurora .b1{
    background: radial-gradient(circle at 30% 30%, rgba(47,170,90,.55), transparent 60%);
    top: -20%; left: -10%;
    animation: float1 22s ease-in-out infinite alternate;
  }
  .aurora .b2{
    background: radial-gradient(circle at 60% 50%, rgba(42,111,184,.65), transparent 60%);
    top: 10%; right: -20%;
    animation: float2 26s ease-in-out infinite alternate;
  }
  .aurora .b3{
    background: radial-gradient(circle at 50% 50%, rgba(120,200,255,.35), transparent 60%);
    bottom: -25%; left: 20%;
    animation: float3 30s ease-in-out infinite alternate;
  }
  @keyframes float1{ 0%{transform: translate(0,0)} 100%{transform: translate(8vw, 6vh)} }
  @keyframes float2{ 0%{transform: translate(0,0)} 100%{transform: translate(-10vw, 8vh)} }
  @keyframes float3{ 0%{transform: translate(0,0)} 100%{transform: translate(6vw, -10vh)} }

  /* grid mesh */
  .mesh{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
  }

  /* dotted noise */
  .dots{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.5px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 50% 45% at 50% 45%, transparent 35%, #000 80%);
    -webkit-mask-image: radial-gradient(ellipse 50% 45% at 50% 45%, transparent 35%, #000 80%);
    opacity: .5;
  }

  /* particles */
  .particle{
    position:absolute; z-index:1;
    width:4px; height:4px; border-radius:50%;
    background: rgba(180,220,255,.7);
    box-shadow: 0 0 10px rgba(160,210,255,.6);
    animation: rise linear infinite;
  }
  @keyframes rise{
    0%{ transform: translateY(0) translateX(0); opacity:0 }
    10%{opacity:1}
    90%{opacity:1}
    100%{ transform: translateY(-110vh) translateX(40px); opacity:0 }
  }

  /* orbiting plane path */
  .orbit{
    position:absolute; left:50%; top: 32%; width: 540px; height: 540px;
    transform: translate(-50%,-50%);
    z-index: 2; pointer-events:none;
    animation: spin 38s linear infinite;
  }
  .orbit svg{ width:100%; height:100% }
  @keyframes spin{ to{ transform: translate(-50%,-50%) rotate(360deg) } }
  .orbit .ring{
    position:absolute; inset:0; border-radius:50%;
    border: 1px dashed rgba(255,255,255,.08);
  }
  .orbit .plane{
    position:absolute; top: -10px; left: 50%;
    transform: translate(-50%,-50%) rotate(90deg);
    color: #cfe6ff; font-size: 22px;
    filter: drop-shadow(0 0 10px rgba(180,220,255,.6));
  }

  /* ============ content ============ */
  .content{
    position:relative; z-index: 5;
    min-height:100vh;
    display:grid; grid-template-rows: auto 1fr auto;
  }
  .topbar{
    padding: 22px 36px;
    display:flex; justify-content:space-between; align-items:center;
    color: rgba(220,232,250,.72); font-size: 11px; letter-spacing:.22em; text-transform: uppercase;
  }
  /* Theme toggle */
  .themeToggle{
    appearance:none; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
    padding: 4px; border-radius: 999px; cursor: pointer;
    color: inherit; line-height: 0;
    transition: background .25s ease, border-color .25s ease, transform .2s ease;
  }
  .themeToggle:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px) }
  .tt-track{
    position: relative; display:flex; align-items:center; justify-content: space-between;
    width: 56px; height: 28px; border-radius: 999px; padding: 0 6px;
  }
  .tt-icon{
    width: 16px; height:16px; display:inline-flex; align-items:center; justify-content:center;
    z-index: 1; transition: color .3s ease, opacity .3s ease;
  }
  .tt-icon.sun{ color: #f6c46b }
  .tt-icon.moon{ color: #cfe6ff }
  .tt-knob{
    position:absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(140deg, #ffffff, #d8e4f4);
    box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 -1px 2px rgba(0,0,0,.08);
    transition: transform .35s cubic-bezier(.4,1.4,.5,1);
    z-index: 0;
  }
  body.light .tt-knob{ transform: translateX(0); background: linear-gradient(140deg, #fff5d8, #f6c46b) }
  body:not(.light) .tt-knob{ transform: translateX(28px); background: linear-gradient(140deg, #1e3a66, #0a2a52) }
  body.light .themeToggle{ background: rgba(26,79,139,.06); border-color: rgba(26,79,139,.18) }
  body.light .themeToggle:hover{ background: rgba(26,79,139,.10) }
  @keyframes pulse{
    0%{box-shadow: 0 0 0 0 rgba(94,230,154,.6)}
    70%{box-shadow: 0 0 0 10px rgba(94,230,154,0)}
    100%{box-shadow: 0 0 0 0 rgba(94,230,154,0)}
  }

  .center{
    display:flex; align-items:center; justify-content:center;
    padding: 16px 24px 40px;
  }
  .card{
    width:100%; max-width: 640px; text-align:center;
  }

  /* logo presentation */
  .logoWrap{
    position:relative; display:inline-block; margin: 0 auto 18px;
    animation: floaty 6s ease-in-out infinite;
  }
  @keyframes floaty{
    0%,100%{ transform: translateY(0) }
    50%{ transform: translateY(-6px) }
  }
  .logoWrap::before{
    content:""; position:absolute; inset:-30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120,200,255,.35), transparent 60%);
    filter: blur(20px); z-index:-1;
    animation: glow 5s ease-in-out infinite alternate;
  }
  @keyframes glow{
    0%{ opacity: .5; transform: scale(.9) }
    100%{ opacity: .9; transform: scale(1.1) }
  }
  .logo{
    width: 240px; height:auto; display:block;
    filter:
      drop-shadow(0 0 18px rgba(180,220,255,.55))
      drop-shadow(0 0 40px rgba(120,200,255,.35))
      drop-shadow(0 8px 20px rgba(0,0,0,.35));
  }
  body.light .logo{
    filter: drop-shadow(0 12px 30px rgba(0,30,80,.25));
  }
  .ringFx{
    position:absolute; inset:-18px;
    border-radius:50%;
    border: 1px solid rgba(255,255,255,.08);
  }
  .ringFx.r2{ inset:-44px; border-color: rgba(255,255,255,.05) }
  .ringFx.r3{ inset:-72px; border-color: rgba(255,255,255,.03) }

  .welcome{
    font-size: 11px; letter-spacing:.34em; text-transform: uppercase;
    color: rgba(220,232,250,.6);
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin: 24px 0 14px;
  }
  .welcome .bar{ width:28px; height:1px; background: rgba(220,232,250,.25) }

  /* word-by-word reveal */
  h1{
    font-weight: 300; font-size: clamp(22px, 2.4vw, 30px); line-height:1.4;
    color: #f1f6ff; margin: 0 0 32px; letter-spacing:.005em;
  }
  h1 strong{ font-weight: 600; color: #cfe6ff; }
  h1 .w{
    display:inline-block; opacity:0; transform: translateY(10px);
    animation: word .7s cubic-bezier(.2,.7,.2,1) forwards;
  }
  @keyframes word{ to{ opacity:1; transform:none } }

  /* lang grid */
  .langs{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px; text-align:left;
  }
  .lang{
    --i: 0;
    position:relative;
    display:flex; flex-direction:column; gap: 18px;
    padding: 22px 22px 20px;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    text-decoration:none; color: #f1f6ff; cursor:pointer;
    transition: transform .35s cubic-bezier(.2,.7,.2,1),
                border-color .35s ease,
                background .35s ease,
                box-shadow .35s ease;
    overflow: hidden;
    opacity: 0; transform: translateY(14px);
    animation: cardIn .7s cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay: calc(var(--i) * .12s + .9s);
  }
  @keyframes cardIn{ to{ opacity:1; transform:none } }
  .lang::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(47,170,90,.0), rgba(47,170,90,.18));
    opacity:0; transition: opacity .4s ease;
    pointer-events:none;
  }
  .lang::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    background: linear-gradient(90deg, var(--brand-blue-2), var(--brand-green));
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .lang:hover{
    transform: translateY(-6px);
    border-color: rgba(180,220,255,.5);
    background: rgba(255,255,255,.10);
    box-shadow: 0 18px 40px rgba(0,20,60,.45);
  }
  .lang:hover::before{ opacity:1 }
  .lang:hover::after{ transform: scaleX(1) }
  .lang:hover .arr{ transform: translateX(4px); color: #fff }
  .lang:hover .flag{ transform: scale(1.04) }

  .lang .row1{
    display:flex; justify-content:space-between; align-items:center;
  }
  .lang .flag{
    width: 44px; height: 30px; display:block; border-radius: 3px; overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    transition: transform .35s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
  }
  .lang .code{
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px; letter-spacing:.18em; color: rgba(220,232,250,.55);
    text-transform: uppercase;
  }
  .lang .label{
    font-size: 22px; font-weight: 500; letter-spacing:-.005em;
    line-height: 1.05;
  }
  .lang .sub{
    font-size: 12px; color: rgba(220,232,250,.6); margin-top: 4px;
    line-height: 1.4;
  }
  .lang .foot{
    display:flex; justify-content:space-between; align-items:center;
    font-size: 11px; letter-spacing:.18em; text-transform: uppercase;
    color: rgba(220,232,250,.55);
  }
  .lang .arr{
    display:inline-block; transition: transform .3s ease, color .3s ease;
    color: rgba(220,232,250,.7); font-size: 16px;
  }

  .footbar{
    padding: 20px 36px;
    display:flex; justify-content:space-between; align-items:center;
    color: rgba(220,232,250,.55); font-size: 11px; letter-spacing:.18em; text-transform: uppercase;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .footbar .acc{ display:flex; gap:22px; align-items:center }
  .footbar a{ color: inherit; text-decoration:none; transition: color .25s ease }
  .footbar a:hover{ color: #fff }
  .ch{display:inline-flex; align-items:center; gap:8px}
  .ch .sq{width:10px; height:10px; border:1px solid rgba(220,232,250,.35); display:inline-block}

  /* light variant */
  body.light .stage{ background: radial-gradient(1100px 800px at 50% 20%, #ffffff, #eef3fa 55%, #dde6f1 100%) }
  body.light .aurora{ opacity: .35 }
  body.light .mesh{ background-image:
      linear-gradient(rgba(26,79,139,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(26,79,139,.07) 1px, transparent 1px); }
  body.light .dots{ background-image: radial-gradient(rgba(26,79,139,.18) 1px, transparent 1.5px); opacity:.6 }
  body.light .topbar, body.light .footbar{ color: var(--muted) }
  body.light .footbar{ border-top-color: var(--line) }
  body.light h1{ color: var(--ink) }
  body.light h1 strong{ color: var(--brand-blue) }
  body.light .welcome{ color: var(--muted) }
  body.light .welcome .bar{ background: var(--line-2) }
  body.light .lang{
    background: rgba(255,255,255,.85);
    border-color: var(--line);
    color: var(--ink);
    backdrop-filter: blur(8px);
  }
  body.light .lang:hover{
    background: #fff; border-color: var(--brand-blue);
    box-shadow: 0 18px 40px rgba(26,79,139,.15);
  }
  body.light .lang .code, body.light .lang .sub, body.light .lang .foot, body.light .lang .arr{ color: var(--muted) }
  body.light .lang:hover .arr{ color: var(--brand-blue) }
  body.light .ch .sq{ border-color: var(--line-2) }
  body.light .ringFx{ border-color: rgba(26,79,139,.10) }
  body.light .ringFx.r2{ border-color: rgba(26,79,139,.07) }
  body.light .ringFx.r3{ border-color: rgba(26,79,139,.04) }
  body.light .logoWrap::before{ background: radial-gradient(circle, rgba(47,170,90,.18), transparent 60%) }

  /* responsive: tablet */
  @media (max-width: 900px){
    .langs{ grid-template-columns: 1fr; gap: 10px }
    .lang{ 
      flex-direction:row; align-items:center; gap: 16px;
      padding: 16px 18px;
    }
    .lang .row1{ flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 6px }
    .lang > div:nth-child(2){ flex: 1; min-width: 0 }
    .lang .foot{ flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 4px }
    .lang .label{ font-size: 18px }
    .topbar{ padding: 16px 20px }
    .footbar{ padding: 14px 20px }
    .orbit{ width: 360px; height: 360px; top: 28% }
    .logo{ width: 200px }
    h1{ font-size: 18px; margin-bottom: 24px }
    .welcome{ font-size: 10px; letter-spacing: .26em }
  }
  /* responsive: mobile */
  @media (max-width: 560px){
    .topbar{ padding: 14px 16px; font-size: 10px; letter-spacing: .14em }
    .topbar > span:first-child{ max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
    .footbar{ padding: 14px 16px; font-size: 10px; flex-direction: row; gap: 10px }
    .center{ padding: 8px 16px 24px }
    .card{ max-width: 100% }
    .logo{ width: 170px }
    .logoWrap{ margin-bottom: 10px }
    h1{ font-size: 16px; line-height: 1.5; margin-bottom: 22px; padding: 0 6px }
    .welcome{ font-size: 10px; gap: 8px; margin: 18px 0 12px }
    .welcome .bar{ width: 16px }
    .lang{ padding: 14px 16px; gap: 12px; border-radius: 10px }
    .lang .flag{ width: 36px; height: 24px }
    .lang .label{ font-size: 16px }
    .lang .sub{ font-size: 11px }
    .lang .code{ font-size: 9px }
    .lang .foot{ font-size: 10px; letter-spacing: .14em }
    .orbit{ display: none }
    .ringFx{ display: none }
    .tt-track{ width: 48px; height: 24px }
    .tt-knob{ width: 18px; height: 18px }
    body:not(.light) .tt-knob{ transform: translateX(24px) }
  }
  /* very small */
  @media (max-width: 380px){
    .topbar > span:first-child{ font-size: 9px }
    .footbar{ font-size: 9px }
    .lang .row1{ display: none }
    .lang{ padding: 14px }
  }
  /* short viewport (landscape phones) */
  @media (max-height: 640px) and (orientation: landscape){
    .logo{ width: 130px }
    .logoWrap{ margin-bottom: 6px }
    .welcome{ margin: 10px 0 8px }
    h1{ margin-bottom: 16px; font-size: 16px }
    .center{ padding: 10px 24px 20px }
    .ringFx, .orbit{ display:none }
  }

/* ============ SEO / AI / Accessibility helpers ============ */
.seo-ai-context{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:normal!important;
  border:0!important;
}
.noscript-seo{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:9999;
  max-width:920px;
  margin:auto;
  padding:14px 18px;
  border-radius:14px;
  background:rgba(255,255,255,.94);
  color:#0e2240;
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.noscript-seo a{color:#1a4f8b;font-weight:700;text-decoration:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}