/* THEME TOKENS */
:root{
    --bg:#0b1b30; --bg-2:#0f233f; --ink:#e6e9ee; --muted:#a9b3c3;
    --accent:#6ad1ff; --accent-2:#9be7ff; --card:#102742; --border:rgba(255,255,255,0.08);
    --glow-1:#113057; --glow-2:#8ed9ff; /* background glow tints */
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --radius-xl:22px; --radius-md:14px; --max:1200px;
}
/* AURORA (teal × violet) */
[data-theme="aurora"]{
    --bg:#0d1420; --bg-2:#141d2b; --ink:#e9f3f0; --muted:#a8b7c6;
    --accent:#50e3c2; --accent-2:#a0f0e0; --card:#0f2230; --border:rgba(255,255,255,0.10);
    --glow-1:#1a3a46; --glow-2:#6ef3d6;
}
/* SAKURA (plum × coral) */
[data-theme="sakura"]{
    --bg:#150f1f; --bg-2:#1f1530; --ink:#f4ecf1; --muted:#cdbfd0;
    --accent:#ff71a5; --accent-2:#ffc4dd; --card:#201a2d; --border:rgba(255,255,255,0.10);
    --glow-1:#2b1b3b; --glow-2:#ff9fc5;
}
/* JADE (deep green) */
[data-theme="jade"]{
    --bg:#0a1a17; --bg-2:#0f2520; --ink:#e7efe9; --muted:#b4c6bd;
    --accent:#34d399; --accent-2:#6ee7b7; --card:#0f2b22; --border:rgba(255,255,255,0.10);
    --glow-1:#163c33; --glow-2:#6fe7bf;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans"; color:var(--ink);
    background:radial-gradient(1200px 800px at 80% -20%, var(--glow-1) 0%, transparent 60%), var(--bg);
    line-height:1.6; transition:background .35s ease, color .2s ease, border-color .2s ease}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-2)}
.container{max-width:var(--max); margin:0 auto; padding:0 24px}
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(12px);
    background:linear-gradient(180deg, color-mix(in oklab, var(--bg) 88%, black 0%), color-mix(in oklab, var(--bg) 65%, black 0%));
    border-bottom:1px solid var(--border); transition:background .35s ease}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:#0b1b30;
    background:linear-gradient(135deg, var(--accent), var(--accent-2)); font-weight:900; box-shadow:var(--shadow)}
.brand h1{font-size:18px; margin:0}
.menu{display:flex; gap:20px}
.menu a{color:var(--ink); opacity:.85; font-weight:600}
.menu a:hover{opacity:1}
.nav-cta{display:flex; gap:12px}
.btn{padding:10px 16px; border-radius:999px; border:1px solid var(--border); color:var(--ink); background:color-mix(in oklab, var(--bg) 88%, black 0%); transition:background .2s, border-color .2s}
.btn:hover{border-color:rgba(255,255,255,.18)}
.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b1b30; border:none; font-weight:800}
.hamburger{display:none; width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:color-mix(in oklab, var(--bg) 88%, black 0%); color:var(--ink)}
@media (max-width: 900px){.menu,.nav-cta{display:none}.hamburger{display:grid; place-items:center}}

.hero{position:relative; padding:96px 0 64px; overflow:hidden}
.hero .grid{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
.eyebrow{display:inline-block; padding:8px 12px; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:13px; letter-spacing:.4px}
.title{font-size:44px; line-height:1.2; margin:14px 0 16px; font-weight:900}
.subtitle{color:var(--muted); font-size:18px; max-width:680px}
.hero-ctas{display:flex; gap:12px; margin-top:22px}
.hero-visual{position:relative; height:420px; border-radius:var(--radius-xl);
    background:radial-gradient(600px 300px at 60% 0%, color-mix(in oklab, var(--glow-2) 30%, transparent), transparent 60%), linear-gradient(180deg, var(--card), var(--bg));
    border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; transition:background .35s ease}
.orb{position:absolute; width:140px; height:140px; border-radius:50%; filter:blur(18px); opacity:.6}
.orb.one{background:var(--accent); top:40px; right:60px}
.orb.two{background:var(--accent-2); bottom:40px; left:60px}
@media (max-width: 900px){.hero{padding:72px 0 40px}.hero .grid{grid-template-columns:1fr; gap:28px}.title{font-size:34px}.hero-visual{height:300px}}

section{padding:72px 0; border-top:1px solid var(--border)}
section.alt{background:linear-gradient(180deg, var(--bg-2), transparent)}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px}
.section-head h2{margin:0; font-size:26px; letter-spacing:.5px}
.kicker{color:var(--muted)}

.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
@media (min-width: 1024px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 700px){.cards{grid-template-columns:1fr}}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:24px; box-shadow:var(--shadow); position:relative; overflow:hidden; transition:background .35s ease, border-color .2s ease}
.card h3{margin:8px 0 8px; font-size:22px}
.card p{margin:0; color:var(--muted)}
.badge{display:inline-block; font-size:12px; color:#0b1b30; background:linear-gradient(135deg, var(--accent), var(--accent-2)); padding:6px 10px; border-radius:999px; font-weight:800; letter-spacing:.4px}
.tag{display:inline-block; font-size:12px; color:var(--muted); border:1px solid var(--border); padding:6px 10px; border-radius:999px; margin-right:6px; margin-top:12px}

/* Social icons (for Division cards) */
.social-row{display:flex; gap:10px; margin-top:12px}
.icon-btn{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:999px; border:1px solid var(--border); background:color-mix(in oklab, var(--bg) 88%, black 0%); color:var(--ink); opacity:.92; transition:opacity .15s,border-color .15s,transform .06s}
.icon-btn:hover{opacity:1; border-color:rgba(255,255,255,.18)}
.icon-btn:active{transform:translateY(1px)}
.icon{width:18px; height:18px}

.banner{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:24px; box-shadow:var(--shadow)}
.panel h3{margin:0 0 8px}
.panel p{margin:0; color:var(--muted)}
@media (max-width: 900px){.banner{grid-template-columns:1fr}}

footer{border-top:1px solid var(--border); padding:22px 0 60px; color:var(--muted)}
.footgrid{display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:center}
.policy{font-size:12px}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.to-top{position:fixed; right:18px; bottom:18px; width:46px; height:46px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--border); background:color-mix(in oklab, var(--bg) 88%, black 0%); color:var(--ink); opacity:0; transform:translateY(8px); pointer-events:none; transition:all .2s}
.to-top.show{opacity:1; transform:none; pointer-events:auto}


/* Accessibility & anchor offset */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn:focus-visible,.icon-btn:focus-visible,.menu a:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent); outline:none}
section{scroll-margin-top:84px}
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth } }

/* Social list in Contact */
.links{list-style:none; padding-left:0; margin:8px 0 0}
.links li{margin:6px 0}
.links a{color:var(--ink)}
.links a:hover{color:var(--accent-2)}
.contact-banner{grid-template-columns:1fr}