:root{
    --bg:#05070a; --bg2:#0a0e14; --card:rgba(255,255,255,.025); --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
    --ink:#eef2f6; --dim:#97a3b3; --faint:#5d6878; --cyan:#5bd6ff; --violet:#9b8cff; --warm:#ffb547;
    --serif:"Instrument Serif",Georgia,serif; --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden}
  a{color:inherit; text-decoration:none}
  img{display:block; max-width:100%; height:auto}
  .wrap{max-width:1160px; margin:0 auto; padding-left:24px; padding-right:24px}
  .mono{font-family:var(--mono)}
  em.s{font-family:var(--serif); font-style:italic; font-weight:400}

  /* backdrop */
  .sky{position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(1100px 620px at 50% -12%, rgba(91,214,255,.16), transparent 62%),
      radial-gradient(700px 500px at 88% 18%, rgba(155,140,255,.10), transparent 60%),
      radial-gradient(600px 420px at 6% 46%, rgba(91,214,255,.06), transparent 60%)}
  .sky::after{content:""; position:absolute; inset:0;
    background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:72px 72px; opacity:.35;
    -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 30%, transparent 75%)}

  /* nav */
  nav{position:sticky; top:0; z-index:20; backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
    background:rgba(5,7,10,.62); border-bottom:1px solid var(--line)}
  nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
  .brand{display:flex; align-items:center; gap:11px; font-weight:600; letter-spacing:-.01em}
  .orbmark{width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #dff7ff, var(--cyan) 55%, #1a6c8c);
    box-shadow:0 0 0 4px rgba(91,214,255,.12), 0 0 22px rgba(91,214,255,.55)}
  .links{display:flex; gap:30px; font-size:14px; color:var(--dim)}
  .links a:hover{color:var(--ink)}
  .navr{display:flex; align-items:center; gap:10px}
  .lang{display:flex; border:1px solid var(--line2); border-radius:99px; padding:3px; font:12px var(--mono)}
  .lang a{padding:4px 10px; border-radius:99px; color:var(--dim)}
  .lang a.on{background:rgba(255,255,255,.1); color:var(--ink)}
  .navcta{font-size:14px; padding:8px 16px; border-radius:99px; border:1px solid var(--line2); color:var(--ink); transition:.2s}
  .navcta:hover{border-color:var(--cyan); box-shadow:0 0 20px rgba(91,214,255,.25)}

  /* hero */
  .hero{text-align:center; padding:104px 0 40px}
  .eyebrow{display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 8px; border-radius:99px; border:1px solid var(--line2);
    background:rgba(255,255,255,.03); font-size:13px; color:var(--dim)}
  .eyebrow b{font-weight:500; color:#04131a; background:var(--cyan); border-radius:99px; padding:2px 9px; font-size:12px}
  h1{font-size:clamp(44px,8vw,96px); line-height:1.02; letter-spacing:-.035em; font-weight:600; margin:28px auto 0; max-width:980px}
  h1 em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em;
    background:linear-gradient(100deg,#e9fbff 10%,var(--cyan) 45%,var(--violet) 95%); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em}
  .sub{max-width:640px; margin:26px auto 0; color:var(--dim); font-size:clamp(17px,2.1vw,19.5px)}
  .ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:38px}
  .btn{display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 22px; border-radius:12px; font-weight:500; font-size:15px; transition:.2s}
  .btn.pri{background:var(--ink); color:#05070a}
  .btn.pri:hover{background:#fff; box-shadow:0 8px 40px rgba(91,214,255,.35)}
  .btn.ghost{border:1px solid var(--line2); color:var(--ink); background:rgba(255,255,255,.02)}
  .btn.ghost:hover{border-color:rgba(91,214,255,.6)}
  .btn svg{width:16px; height:16px}

  /* product shot */
  .shot{position:relative; margin:72px auto 0; max-width:1080px}
  .shot::before{content:""; position:absolute; inset:8% 10% -6%; background:radial-gradient(closest-side, rgba(91,214,255,.35), transparent); filter:blur(40px); z-index:-1}
  .frame{border-radius:18px; padding:1px; background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 40%, rgba(91,214,255,.25));
    box-shadow:0 40px 120px -20px rgba(0,0,0,.8)}
  .frame-in{border-radius:17px; overflow:hidden; background:#06090d}
  .bar{display:flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}
  .bar i{width:10px; height:10px; border-radius:50%; background:#2a3039}
  .bar span{margin-left:12px; font:12px var(--mono); color:var(--faint)}
  .caption{margin-top:16px; text-align:center; font:12px var(--mono); color:var(--faint); letter-spacing:.02em}

  /* stack strip */
  .stack{padding:64px 0 24px; text-align:center}
  .stack p{font:12px var(--mono); color:var(--faint); letter-spacing:.14em; text-transform:uppercase; margin:0 0 22px}
  .stack ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 34px; color:#7d8898; font-size:15px; font-weight:500}

  /* sections */
  section{padding-top:110px}
  .kick{font:12px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--cyan)}
  h2{font-size:clamp(32px,4.6vw,54px); line-height:1.08; letter-spacing:-.03em; font-weight:600; margin:16px 0 0; max-width:820px}
  h2 em{font-family:var(--serif); font-style:italic; font-weight:400; color:#cfeefa}
  .lede{color:var(--dim); max-width:640px; margin:20px 0 0; font-size:17.5px}

  /* demo video */
  .demo video{display:block; width:100%; height:auto; background:#05070a}
  .demo .frame{margin-top:44px}
  /* flow */
  .flow{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:56px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--card)}
  .step{padding:28px 26px 30px; position:relative}
  .step + .step{border-left:1px solid var(--line)}
  .step .n{font:12px var(--mono); color:var(--faint)}
  .step h3{margin:18px 0 8px; font-size:19px; font-weight:600; letter-spacing:-.01em}
  .step p{margin:0; color:var(--dim); font-size:14.5px}
  .step .dot{position:absolute; top:28px; right:26px; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan)}

  /* bento */
  .bento{display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:56px}
  .tile{position:relative; border:1px solid var(--line); border-radius:20px; padding:30px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    overflow:hidden; transition:border-color .3s, transform .3s}
  .tile:hover{border-color:var(--line2); transform:translateY(-2px)}
  .tile::after{content:""; position:absolute; inset:-1px; border-radius:20px; pointer-events:none; opacity:0; transition:.4s;
    background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%), rgba(91,214,255,.10), transparent 70%)}
  .tile:hover::after{opacity:1}
  .t4{grid-column:span 4} .t2{grid-column:span 2} .t3{grid-column:span 3}
  .tile .tag{font:11.5px var(--mono); color:var(--faint); letter-spacing:.08em; text-transform:uppercase}
  .tile h3{font-size:23px; letter-spacing:-.02em; margin:14px 0 10px; font-weight:600; line-height:1.2}
  .tile p{color:var(--dim); margin:0; font-size:15px}
  .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
  .chip{font:12px var(--mono); color:#b9c6d4; border:1px solid var(--line); border-radius:99px; padding:5px 11px; background:rgba(255,255,255,.02)}
  .quote{margin-top:22px; display:grid; gap:10px}
  .q{display:flex; gap:12px; align-items:baseline; font-size:14.5px}
  .q .who{font:11px var(--mono); color:var(--faint); width:52px; flex:none; text-transform:uppercase; letter-spacing:.1em}
  .q .you{color:var(--ink)} .q .jv{color:#a9e9ff}
  .pipe{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:22px; font:12px var(--mono); color:#b9c6d4}
  .pipe span{border:1px solid var(--line); border-radius:8px; padding:6px 10px; background:rgba(255,255,255,.02)}
  .pipe b{color:var(--faint); font-weight:400}
  .pipe .ok{border-color:rgba(91,214,255,.4); color:#bff0ff}
  .pipe .rb{border-color:rgba(255,181,71,.35); color:#ffd59a}
  .wave{display:flex; align-items:center; gap:3px; height:44px; margin-top:24px}
  .wave i{flex:1; max-width:5px; border-radius:3px; background:linear-gradient(180deg,var(--cyan),var(--violet)); opacity:.85; animation:w 1.6s ease-in-out infinite}
  @keyframes w{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}

  /* gallery */
  .gallery{display:grid; grid-template-columns:1fr 1fr; gap:28px 20px; margin-top:56px; align-items:start}
  .gallery .g-wide{grid-column:1 / -1}
  .gallery .g-tall .frame-in{max-height:760px}
  .gallery .g-tall img{width:100%; object-fit:cover; object-position:top}
  .gallery figure{margin:0}
  .gallery .frame-in img{width:100%}
  .gallery figcaption{margin-top:14px; color:var(--dim); font-size:14.5px}
  .gallery figcaption b{color:var(--ink); font-weight:600}

  /* claude */
  .claude{display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:start; margin-top:0}
  .rows{border-top:1px solid var(--line); margin-top:8px}
  .row{display:grid; grid-template-columns:48px 1fr; gap:6px 18px; padding:26px 0; border-bottom:1px solid var(--line)}
  .row .i{font-family:var(--serif); font-style:italic; font-size:30px; color:var(--cyan); line-height:1}
  .row h3{margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em}
  .row p{grid-column:2; margin:0; color:var(--dim); font-size:15px}

  /* numbers */
  .nums{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:56px}
  .num{border:1px solid var(--line); border-radius:20px; padding:28px; background:var(--card)}
  .num b{display:block; font-size:clamp(40px,5vw,56px); letter-spacing:-.04em; font-weight:600; line-height:1;
    background:linear-gradient(180deg,#fff,#9fb3c4); -webkit-background-clip:text; background-clip:text; color:transparent}
  .num span{display:block; margin-top:12px; color:var(--dim); font-size:14px}

  /* principles */
  .duo{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px}
  .panel{border:1px solid var(--line); border-radius:20px; padding:32px; background:var(--card)}
  .panel h3{margin:0 0 16px; font-size:15px; font:12px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
  .panel ul{list-style:none; margin:0; padding:0}
  .panel li{display:flex; gap:14px; padding:13px 0; border-top:1px solid var(--line); color:#cdd6e0; font-size:15.5px}
  .panel li:first-child{border-top:0}
  .panel li svg{flex:none; width:18px; height:18px; margin-top:3px}

  /* cta */
  .cta{margin:120px 0 0; text-align:center; border:1px solid var(--line); border-radius:28px; padding:84px 24px;
    background:radial-gradient(600px 260px at 50% 0%, rgba(91,214,255,.16), transparent 70%), var(--bg2); position:relative; overflow:hidden}
  .cta h2{margin:16px auto 0; max-width:700px}
  .cta p{color:var(--dim); margin:18px auto 0; max-width:520px}
  .mail{display:inline-block; margin-top:30px; font-family:var(--serif); font-style:italic; font-size:clamp(24px,3.4vw,36px); color:#d9f6ff;
    border-bottom:1px solid rgba(91,214,255,.35); padding-bottom:4px; transition:.2s}
  .mail:hover{color:#fff; border-color:var(--cyan)}

  footer{margin-top:90px; border-top:1px solid var(--line); padding:34px 0 48px; color:var(--faint); font-size:13.5px}
  footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}

  /* reveal */
  .rv{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
  .rv.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} .wave i{animation:none} html{scroll-behavior:auto} }

  @media (max-width:960px){
    .t4,.t2,.t3{grid-column:span 6}
    .flow{grid-template-columns:1fr 1fr} .step:nth-child(3){border-left:0} .step:nth-child(n+3){border-top:1px solid var(--line)}
    .claude{grid-template-columns:1fr; gap:24px}
    .nums{grid-template-columns:1fr 1fr}
  }
  @media (max-width:680px){
    .wrap{padding-left:16px; padding-right:16px}
    .links{display:none}
    .hero{padding:72px 0 24px}
    section{padding-top:84px}
    .flow{grid-template-columns:1fr} .step + .step{border-left:0; border-top:1px solid var(--line)}
    .gallery,.duo{grid-template-columns:1fr}
    .tile,.panel{padding:24px}
    .cta{padding:60px 20px}
  }

  /* status badges */
  .st{display:inline-flex; align-items:center; gap:6px; font:11px var(--mono); letter-spacing:.04em; padding:3px 9px; border-radius:99px; border:1px solid; margin-left:8px; vertical-align:middle; white-space:nowrap}
  .st::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
  .st.done{color:#7ee2b8; border-color:rgba(126,226,184,.35)}
  .st.proto{color:#ffd28a; border-color:rgba(255,181,71,.35)}
  .st.plan{color:#a9b4c2; border-color:rgba(169,180,194,.3)}
  .tile .tag{display:flex; align-items:center; justify-content:space-between}
  .legend{display:flex; flex-wrap:wrap; gap:8px 4px; margin-top:22px}
  .legend .st{margin-left:0}

  /* examples */
  .ex{margin-top:48px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--card)}
  .ex-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:24px; padding:20px 26px; border-top:1px solid var(--line); align-items:center}
  .ex-row:first-child{border-top:0}
  .ex-say{font-size:17px; color:var(--ink)}
  .ex-say::before{content:"“"; color:var(--cyan); margin-right:2px}
  .ex-say::after{content:"”"; color:var(--cyan); margin-left:2px}
  .ex-do{color:var(--dim); font-size:14.5px}
  .ex-note{margin-top:14px; font:12px var(--mono); color:var(--faint)}

  /* claude roles */
  .row .meta{grid-column:2; margin-top:8px}

  /* founder + status */
  .founder{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; border:1px solid var(--line); border-radius:20px; padding:28px; background:var(--card); margin-top:48px}
  .avatar{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:22px; color:#04131a;
    background:radial-gradient(circle at 35% 30%, #e6fbff, var(--cyan) 60%, #1a6c8c)}
  .founder h3{margin:0; font-size:20px; letter-spacing:-.01em}
  .founder p{margin:6px 0 0; color:var(--dim); font-size:15px}
  .trio{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}
  .trio .panel h3{display:flex; align-items:center; gap:10px}
  .trio .panel li{font-size:14.5px}
  .contact-note{display:inline-block; margin-top:28px; font:13px var(--mono); color:var(--dim); border:1px dashed var(--line2); border-radius:12px; padding:12px 16px}

  @media (max-width:960px){ .trio{grid-template-columns:1fr} }
  @media (max-width:680px){ .ex-row{grid-template-columns:1fr; gap:6px; padding:18px 20px} .founder{grid-template-columns:1fr; padding:24px} }