/* Existing AISEC hero and brand foundation. Homepage composition is in homepage.css. */
  :root{
    --bg:#000000; --panel:#0b0d0b; --panel-2:#111411; --nav:#212525;
    --ink:#e6f6f9; --ink-2:rgba(230,246,249,.72); --ink-3:rgba(230,246,249,.5); --ink-4:rgba(230,246,249,.34);
    --accent:#9ccfd8; --accent-dim:#5f939e; --accent-glow:#c4e5ea; --core:#e2f7fb;
    --accent-2:#c4a7e7; --accent-2-dim:#8f77b0; /* iris — soft neon purple, secondary/atmospheric */
    --line:rgba(230,246,249,.12); --line-2:rgba(230,246,249,.2);
    --love:#eb6f92; --gold:#f6c177; /* severity accents — Rose Pine */
    --light-bg:#eef4f5; --light-ink:#0e1518; --light-ink-2:#3a464a;
    --s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;--s32:128px;
    --ease:cubic-bezier(.2,.8,.2,1);
    --maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{overflow-x:clip}
  html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font-family:"Inter",system-ui,sans-serif;font-size:16px;line-height:1.55}
  a{color:inherit;text-decoration:none}
  .mono{font-family:"JetBrains Mono",monospace}
  h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.0;overflow-wrap:anywhere;min-width:0}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s6)}

  /* ── nav (floating dark pill) ── */
  .navbar{position:sticky;top:0;z-index:50;padding:var(--s4) var(--s6) 0}
  .nav{max-width:var(--maxw);margin:0 auto;background:var(--nav);border:1px solid var(--line);
       border-radius:999px;display:flex;align-items:center;justify-content:space-between;
       padding:10px 12px 10px 20px;gap:var(--s6)}
  .nav .brand{display:inline-flex;align-items:center;color:var(--ink)}
  .nav .brand .wm{height:19px;width:auto;display:block}
  .nav .links{display:flex;gap:var(--s6);font-size:14px;color:var(--ink-2)}
  .nav .links a{transition:color .18s}
  .nav .links a:hover{color:var(--ink)}
  .nav .right{display:flex;align-items:center;gap:var(--s4)}
  .nav .login{font-size:14px;color:var(--ink-2);transition:color .18s}
  .nav .login:hover{color:var(--ink)}
  @media(max-width:860px){.nav .links{display:none}}

  /* pill buttons */
  .pill{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;
        padding:10px 18px;border-radius:999px;white-space:nowrap;transition:transform .18s var(--ease),background .18s,border-color .18s,color .18s}
  .pill-accent{background:var(--accent);color:#04181c}
  .pill-accent:hover{background:var(--accent-glow);transform:translateY(-1px)}
  .pill-ghost{color:var(--ink);border:1px solid var(--line-2)}
  .pill-ghost:hover{border-color:var(--ink-3)}
  .pill-lg{font-size:15px;padding:13px 24px}
  .pill .ic{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;background:#04181c;color:var(--accent)}
  .pill-accent .ic{background:rgba(0,0,0,.18);color:#04181c}
  .arrow{transition:transform .22s var(--ease)}
  .pill:hover .arrow{transform:translate(2px,-2px)}

  /* ── hero — object as full-bleed background, text overlaid ── */
  .hero{position:relative;text-align:center;padding:var(--s16) 0;overflow:hidden;
    min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  .hero-glowbg{position:absolute;inset:-10% 0 auto;height:900px;z-index:0;pointer-events:none;
    background:
      radial-gradient(38% 40% at 38% 58%, rgba(196,167,231,.16) 0%, transparent 62%),
      radial-gradient(50% 46% at 56% 64%, rgba(156,207,216,.22) 0%, rgba(156,207,216,.06) 40%, transparent 70%);}
  /* honeycomb brand grid (inline SVG so sparks trace real edges) */
  .hero-grid{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;
    -webkit-mask-image:radial-gradient(115% 95% at 50% 58%, #000 32%, transparent 82%);
            mask-image:radial-gradient(115% 95% at 50% 58%, #000 32%, transparent 82%)}
  /* sparks live on their own compositor layer so the big grid isn't re-rasterised each frame */
  .hero-sparks{will-change:transform;transform:translateZ(0)}
  .hx-edges{fill:none;stroke:var(--accent);stroke-width:1;stroke-opacity:.13}
  /* fast light beam that shoots along the honeycomb edges, flares on arrival */
  .hx-spark{fill:none;stroke:var(--accent-glow);stroke-width:1.5;stroke-opacity:.95;stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 0 4px var(--accent)) drop-shadow(0 0 12px rgba(156,207,216,.9)) drop-shadow(0 0 22px rgba(156,207,216,.6));
    will-change:stroke-dashoffset,opacity;
    stroke-dasharray:var(--lit,72) 9999;animation:hxSpark var(--dur,.6s) linear forwards}
  @keyframes hxSpark{0%{stroke-dashoffset:0;opacity:0}12%{opacity:1}80%{stroke-dashoffset:var(--off);opacity:1}100%{stroke-dashoffset:var(--off);opacity:0}}
  .hx-flare{fill:var(--accent);transform-box:fill-box;transform-origin:center;opacity:0;
    filter:drop-shadow(0 0 9px var(--accent));animation:hxFlare var(--dur,.6s) ease-out forwards}
  @keyframes hxFlare{0%,78%{opacity:0;transform:scale(.3)}90%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(2.2)}}
  .hx-iris .hx-spark{stroke:#ddd0f2;filter:drop-shadow(0 0 4px var(--accent-2)) drop-shadow(0 0 12px rgba(196,167,231,.9)) drop-shadow(0 0 22px rgba(196,167,231,.6))}
  .hx-iris .hx-flare{fill:var(--accent-2);filter:drop-shadow(0 0 9px var(--accent-2))}
  @media(prefers-reduced-motion:reduce){.hero-grid .hx-sparks{display:none}}
  /* scrim: darken the top so the headline stays crisp over the object */
  .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.22) 24%, transparent 46%)}
  .hero .inner{position:relative;z-index:2;max-width:920px;margin:0 auto;padding:0 var(--s6);transform:translateY(-7vh)}
  .hero h1{font-size:clamp(42px,6.6vw,74px);letter-spacing:-.035em;margin-bottom:var(--s6)}
  .hero h1 .g{color:var(--accent)}
  .hero .lede{max-width:60ch;margin:0 auto var(--s8);color:var(--ink-2);font-size:clamp(16px,1.5vw,19px);line-height:1.5}
  .hero .cta{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}

  /* footer */
  footer{border-top:1px solid var(--line);padding:var(--s16) 0 var(--s24)}
  .foot{display:flex;justify-content:space-between;gap:var(--s12);flex-wrap:wrap}
  .foot .wm{height:22px;color:var(--ink)}
  .foot .tag{color:var(--ink-3);font-size:13px;margin-top:var(--s4);max-width:32ch}
  .foot .cols{display:flex;gap:var(--s16);flex-wrap:wrap}
  .foot h2{font-family:"JetBrains Mono";font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:var(--s4)}
  .foot a{display:block;color:var(--ink-2);font-size:14px;padding:4px 0;transition:color .18s}
  .foot a:hover{color:var(--ink)}
  .foot-b{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s16);
          padding-top:var(--s6);border-top:1px solid var(--line);font-family:"JetBrains Mono";font-size:12px;color:var(--ink-4)}

  .io{opacity:1;transform:none}
  .io.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.io{opacity:1!important;transform:none!important;transition:none!important}
    .cube{animation:none!important}html{scroll-behavior:auto}}