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

  /* ---------- theme tokens ---------- */
  :root{
    --bg:#fbfcfe; --panel:#ffffff;
    --fg:#0b1220; --muted:#54627a; --dim:#7b8798;
    --line:rgba(15,23,42,.10); --line-strong:rgba(15,23,42,.16);
    --cyan:#0891b2; --blue:#2563eb; --purple:#7c3aed;
    --grad:linear-gradient(100deg,#0891b2,#2563eb 45%,#7c3aed);
    --glass:linear-gradient(160deg,rgba(37,99,235,.055),rgba(124,58,237,.028));
    --glow-a:rgba(37,99,235,.22); --glow-b:rgba(124,58,237,.18);
    --chip:rgba(15,23,42,.035);
    --on-grad:#ffffff;
    --code-bg:#0d1424; --code-fg:#dbe4f4;
    --grid-op:.6; --aurora-op:.9; --shadow:0 18px 50px rgba(15,23,42,.09);
    --max:1140px;
  }
  :root[data-theme="dark"]{
    --bg:#05070f; --panel:#0a0f1c;
    --fg:#dde5f2; --muted:#93a0b8; --dim:#6d7889;
    --line:rgba(148,163,184,.15); --line-strong:rgba(148,163,184,.26);
    --cyan:#22d3ee; --blue:#3b82f6; --purple:#a855f7;
    --grad:linear-gradient(100deg,#22d3ee,#3b82f6 45%,#a855f7);
    --glass:linear-gradient(160deg,rgba(148,163,184,.08),rgba(148,163,184,.02));
    --glow-a:rgba(59,130,246,.5); --glow-b:rgba(168,85,247,.4);
    --chip:rgba(148,163,184,.06);
    --on-grad:#04070e;
    --code-bg:#070c17; --code-fg:#cfdcf0;
    --grid-op:.5; --aurora-op:.55; --shadow:0 18px 50px rgba(0,0,0,.5);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme]){
      --bg:#05070f; --panel:#0a0f1c;
      --fg:#dde5f2; --muted:#93a0b8; --dim:#6d7889;
      --line:rgba(148,163,184,.15); --line-strong:rgba(148,163,184,.26);
      --cyan:#22d3ee; --blue:#3b82f6; --purple:#a855f7;
      --grad:linear-gradient(100deg,#22d3ee,#3b82f6 45%,#a855f7);
      --glass:linear-gradient(160deg,rgba(148,163,184,.08),rgba(148,163,184,.02));
      --glow-a:rgba(59,130,246,.5); --glow-b:rgba(168,85,247,.4);
      --chip:rgba(148,163,184,.06);
      --on-grad:#04070e;
      --code-bg:#070c17; --code-fg:#cfdcf0;
      --grid-op:.5; --aurora-op:.55; --shadow:0 18px 50px rgba(0,0,0,.5);
    }
  }

  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--fg); overflow-x:hidden;
    font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,sans-serif;
    -webkit-font-smoothing:antialiased; transition:background .35s ease, color .35s ease;
  }
  a{color:inherit; text-decoration:none}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 24px; position:relative}

  /* ---------- ambient ---------- */
  .aurora{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
  .orb{position:absolute; border-radius:50%; filter:blur(120px); opacity:var(--aurora-op)}
  .orb.a{width:840px;height:840px; top:-400px; left:50%; transform:translateX(-55%);
    background:radial-gradient(circle,var(--glow-a),transparent 62%); animation:drift1 22s ease-in-out infinite}
  .orb.b{width:660px;height:660px; top:-160px; right:-230px;
    background:radial-gradient(circle,var(--glow-b),transparent 62%); animation:drift2 26s ease-in-out infinite}
  .orb.c{width:520px;height:520px; top:52%; left:-200px;
    background:radial-gradient(circle,var(--glow-a),transparent 65%); opacity:calc(var(--aurora-op)*.6);
    animation:drift1 30s ease-in-out infinite reverse}
  @keyframes drift1{0%,100%{transform:translateX(-55%) translateY(0)}50%{transform:translateX(-48%) translateY(38px)}}
  @keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}
  .grid-bg{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),
                     linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:58px 58px;
    mask-image:radial-gradient(ellipse 92% 58% at 50% 0%,#000 28%,transparent 76%);
    -webkit-mask-image:radial-gradient(ellipse 92% 58% at 50% 0%,#000 28%,transparent 76%);
    opacity:var(--grid-op);
  }
  main,header,footer{position:relative; z-index:1}

  /* ---------- nav ---------- */
  header{position:sticky; top:0; z-index:30; border-bottom:1px solid var(--line);
    background:color-mix(in srgb, var(--bg) 76%, transparent);
    backdrop-filter:blur(16px) saturate(170%)}
  .nav{display:flex; align-items:center; justify-content:space-between; height:68px; gap:18px}
  .brand{display:flex; align-items:center; gap:11px; font-weight:660; letter-spacing:-.015em; font-size:16.5px}
  .mark{width:31px;height:31px; border-radius:9px; background:var(--grad); display:grid; place-items:center;
    color:var(--on-grad); font-size:15px; font-weight:850; box-shadow:0 0 22px var(--glow-a)}
  .nav-links{display:flex; gap:30px; font-size:14.5px}
  .nav-links a{color:var(--muted); transition:color .18s; position:relative}
  .nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1.5px;
    background:var(--grad); transition:right .28s ease}
  .nav-links a:hover{color:var(--fg)}
  .nav-links a:hover::after{right:0}
  .nav-right{display:flex; align-items:center; gap:12px}
  .icon-btn{width:36px;height:36px; border-radius:9px; border:1px solid var(--line); background:var(--chip);
    display:grid; place-items:center; cursor:pointer; color:var(--fg); font-size:15px; line-height:1;
    transition:border-color .2s, transform .2s}
  .icon-btn:hover{border-color:var(--line-strong); transform:translateY(-1px)}
  .nav-cta{border:1px solid var(--line); padding:9px 17px; border-radius:9px; font-size:14px; font-weight:550;
    transition:border-color .2s, background .2s, transform .2s}
  .nav-cta:hover{border-color:var(--blue); background:var(--chip); transform:translateY(-1px)}
  .nav-links a.active{color:var(--fg)}
  .nav-links a.active::after{right:0}

  /* mobile menu */
  #menu-btn{display:none}
  #mobile-nav{display:none; border-top:1px solid var(--line);
    background:color-mix(in srgb, var(--bg) 96%, transparent)}
  #mobile-nav a{display:block; padding:15px 24px; color:var(--muted);
    border-bottom:1px solid var(--line); font-size:15.5px}
  #mobile-nav a:last-child{border-bottom:0}
  #mobile-nav.open{display:block}
  @media(max-width:860px){
    .nav-links{display:none}
    #menu-btn{display:grid}
    .nav-cta{display:none}
  }

  /* ---------- reveal ---------- */
  .rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
  .rv.in{opacity:1; transform:none}

  /* ---------- hero ---------- */
  .hero{padding:104px 0 40px; text-align:center}
  .pill{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:550;
    color:var(--muted); padding:7px 16px; border-radius:100px;
    border:1px solid var(--line); background:var(--chip); margin-bottom:28px}
  .dot{width:6px;height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan);
    animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
  h1{font-size:clamp(2.35rem,6.2vw,4.25rem); line-height:1.06; letter-spacing:-.035em; margin:0 0 22px; font-weight:700}
  .grad{background:var(--grad); -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent}
  .lede{font-size:clamp(1.03rem,2.1vw,1.2rem); color:var(--muted); max-width:62ch; margin:0 auto 36px}
  .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
  .btn{display:inline-block; padding:13px 27px; border-radius:10px; font-weight:600; font-size:15px;
    border:1px solid transparent; cursor:pointer;
    transition:transform .2s, box-shadow .24s, border-color .2s}
  .btn-primary{background:var(--grad); color:var(--on-grad); box-shadow:0 10px 32px var(--glow-a)}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 44px var(--glow-a)}
  .btn-ghost{border-color:var(--line-strong); color:var(--fg); background:var(--chip)}
  .btn-ghost:hover{border-color:var(--blue); transform:translateY(-2px)}

  /* ---------- terminal ---------- */
  .term-wrap{max-width:800px; margin:64px auto 0; position:relative}
  .term-wrap::before{content:""; position:absolute; inset:-1px; border-radius:15px; background:var(--grad);
    opacity:.45; filter:blur(22px); z-index:-1}
  .term{border:1px solid var(--line-strong); border-radius:14px; overflow:hidden;
    background:var(--code-bg); box-shadow:var(--shadow); text-align:left}
  .term-bar{display:flex; align-items:center; gap:8px; padding:12px 15px;
    border-bottom:1px solid rgba(148,163,184,.14); background:rgba(148,163,184,.05)}
  .tdot{width:11px;height:11px;border-radius:50%}
  .tdot:nth-child(1){background:#ff5f57}.tdot:nth-child(2){background:#febc2e}.tdot:nth-child(3){background:#28c840}
  .term-title{margin-left:8px; font-size:12.5px; color:#8b98ae; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .term-body{padding:20px 20px 24px; font:13.5px/1.85 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    color:var(--code-fg); min-height:186px; white-space:pre-wrap; word-break:break-word}
  .term-body .p{color:#22d3ee}
  .term-body .ok{color:#4ade80}
  .term-body .dimc{color:#6b7689}
  .cursor{display:inline-block; width:8px; height:15px; background:#22d3ee; vertical-align:-2px;
    animation:blink 1.05s steps(2,start) infinite}
  @keyframes blink{to{visibility:hidden}}

  /* ---------- sections ---------- */
  section{padding:92px 0}
  .sec-head{text-align:center; margin-bottom:52px}
  .kicker{font-size:12.5px; font-weight:650; letter-spacing:.14em; text-transform:uppercase;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-text-fill-color:transparent; display:block; margin-bottom:13px}
  h2{font-size:clamp(1.7rem,3.5vw,2.4rem); letter-spacing:-.028em; margin:0 0 15px; font-weight:680}
  .sub{color:var(--muted); max-width:60ch; margin:0 auto; font-size:16.5px}

  .grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
  .card{position:relative; border:1px solid var(--line); border-radius:15px; padding:30px;
    background:var(--glass); backdrop-filter:blur(8px); overflow:hidden;
    transition:transform .26s, box-shadow .26s}
  .card::after{content:""; position:absolute; inset:0; border-radius:15px; padding:1px;
    background:var(--grad); opacity:0; transition:opacity .26s;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
  .card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
  .card:hover::after{opacity:.7}
  .ico{width:44px;height:44px; border-radius:12px; display:grid; place-items:center; font-size:19px;
    margin-bottom:18px; color:var(--on-grad); background:var(--grad); box-shadow:0 6px 20px var(--glow-a)}
  .card h3{margin:0 0 10px; font-size:1.08rem; font-weight:640; letter-spacing:-.012em}
  .card p{margin:0; color:var(--muted); font-size:14.9px; line-height:1.62}

  .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:20px;
    border:1px solid var(--line); border-radius:17px; padding:38px 30px;
    background:var(--glass); text-align:center}
  .stat b{display:block; font-size:clamp(1.4rem,3.2vw,1.95rem); font-weight:700; letter-spacing:-.03em;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-text-fill-color:transparent; margin-bottom:6px}
  .stat span{font-size:14px; color:var(--dim)}

  /* layered stack */
  .layers{list-style:none; margin:0; padding:0; display:grid; gap:14px; max-width:880px; margin-inline:auto}
  .layer{position:relative; display:flex; gap:22px; align-items:flex-start;
    border:1px solid var(--line); border-radius:14px; padding:24px 26px;
    background:var(--glass); backdrop-filter:blur(8px);
    transition:transform .24s, border-color .24s, box-shadow .24s}
  .layer::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px;
    background:var(--grad); opacity:.55; transition:opacity .24s}
  .layer:hover{transform:translateX(6px); box-shadow:var(--shadow)}
  .layer:hover::before{opacity:1}
  .lnum{flex:0 0 auto; font:650 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
    letter-spacing:.06em; padding-top:5px;
    background:var(--grad); -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent}
  .layer h3{margin:0 0 7px; font-size:1.06rem; font-weight:640; letter-spacing:-.012em}
  .layer p{margin:0; color:var(--muted); font-size:14.9px; line-height:1.62}
  @media(max-width:560px){ .layer{flex-direction:column; gap:10px; padding:22px} }

  .chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
  .chip{font-size:13.5px; color:var(--muted); border:1px solid var(--line);
    padding:8px 17px; border-radius:100px; background:var(--chip);
    transition:border-color .2s, color .2s, transform .2s}
  .chip:hover{border-color:var(--cyan); color:var(--fg); transform:translateY(-2px)}

  .contact-box{border:1px solid var(--line); border-radius:19px; padding:58px 34px; text-align:center;
    background:var(--glass); position:relative; overflow:hidden}
  .mail{display:inline-block; margin-top:4px; font-size:clamp(1.05rem,2.6vw,1.5rem); font-weight:650;
    letter-spacing:-.02em; background:var(--grad); -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent}
  .loc{color:var(--dim); font-size:14.5px; margin-top:13px}

  footer{border-top:1px solid var(--line); padding:38px 0; color:var(--dim); font-size:14px}
  .foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center}
  .foot a:hover{color:var(--fg)}

  /* skip link */
  .skip{position:absolute; left:-9999px; top:8px; background:var(--panel); color:var(--fg);
    padding:10px 16px; border-radius:8px; border:1px solid var(--line-strong); z-index:60}
  .skip:focus{left:24px}
  :focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px}

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