:root{
    --bg:#0a0a0f;
    --bg-2:#12111a;
    --surface:#15151f;
    --surface-line:rgba(255,255,255,0.09);
    --ink:#eef2f2;
    --ink-dim:#a7b0bd;
    --ink-faint:#7b8494;
    --accent:#2fe6c6;
    --accent-soft:#9af6e4;
    --accent-wash:rgba(47,230,198,0.14);
    --accent-ink:#062622;
    --warm:#ffb545;
    --warm-soft:#ffd699;
    --warm-ink:#2b1704;
    --deep:#8b7aff;
    --font-display:'Unbounded', 'Arial Narrow', sans-serif;
    --font-body:'Hanken Grotesk', 'Segoe UI', sans-serif;
    --font-mono:'IBM Plex Mono', 'Courier New', monospace;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:auto;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--accent); color:#100b06;}

  a{color:inherit;}
  h1,h2,h3{font-family:var(--font-display); font-weight:700; text-wrap:balance; margin:0;}
  p{margin:0;}

  .mono{font-family:var(--font-mono); letter-spacing:0.04em;}
  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent-soft);
    display:flex;
    align-items:center;
    gap:0.6em;
  }
  .eyebrow::before{
    content:'';
    width:6px; height:6px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 8px 1px var(--accent);
    flex:none;
  }
  .eyebrow .dim{color:var(--ink-faint); font-weight:400;}

  /* ---------- fixed background layers ---------- */
  #void{
    position:fixed; inset:0; z-index:-3;
    background:
      radial-gradient(60% 50% at 18% 12%, rgba(47,230,198,0.09), transparent 60%),
      radial-gradient(50% 40% at 85% 78%, rgba(122,101,255,0.09), transparent 60%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 55%, var(--bg) 100%);
  }
  #grain{
    position:fixed; inset:0; z-index:-1;
    opacity:0.05; mix-blend-mode:overlay; pointer-events:none;
  }
  #bg-canvas{ position:fixed; inset:0; z-index:-3; display:block; }
  #scrim{
    position:fixed; inset:0; z-index:-2; pointer-events:none;
    background:
      radial-gradient(120% 85% at 50% 38%, transparent 0%, rgba(6,7,11,0.82) 76%),
      rgba(6,7,11,0.4);
    opacity:0;
    transition:opacity 0.9s cubic-bezier(.32,.72,0,1);
    will-change:opacity;
  }

  /* ---------- layout shell ---------- */
  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding-inline:24px;
  }
  @media(min-width:640px){ .wrap{padding-inline:40px;} }

  .spine{
    position:relative;
  }
  .spine::before{
    content:'';
    position:absolute;
    left:24px; top:0; bottom:0;
    width:1px;
    background:linear-gradient(180deg, transparent, var(--surface-line) 8%, var(--surface-line) 92%, transparent);
    z-index:0;
  }
  @media(min-width:640px){ .spine::before{left:40px;} }

  /* ---------- nav ---------- */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    padding:14px 20px;
  }
  @media(min-width:640px){ nav{padding:18px 40px;} }
  .nav-links{
    display:none;
    align-items:center;
    gap:28px;
    font-family:var(--font-mono);
    font-size:0.76rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }
  @media(min-width:860px){ .nav-links{ display:flex; } }
  .nav-links a{
    color:var(--ink-dim, var(--ink));
    text-decoration:none;
    opacity:0.72;
    transition:opacity 0.2s ease, color 0.2s ease;
    white-space:nowrap;
  }
  .nav-links a:hover,
  .nav-links a:focus-visible{
    opacity:1;
    color:var(--accent);
  }
  .nav-links a:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:4px; border-radius:2px; }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.08em;
    text-decoration:none;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(20,19,26,0.55);
    border:1px solid var(--surface-line);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
  }
  .brand-mark{
    width:9px; height:9px; border-radius:2px;
    background:var(--accent);
    box-shadow:0 0 10px 1px var(--accent);
    flex:none;
  }
  .cta-pill{
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.05em;
    color:var(--accent-ink);
    background:linear-gradient(135deg, var(--accent-soft), var(--accent));
    padding:11px 20px;
    border-radius:999px;
    border:none;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    box-shadow:0 6px 24px -6px rgba(47,230,198,0.5);
    transition:transform 0.25s cubic-bezier(.32,.72,0,1), box-shadow 0.25s cubic-bezier(.32,.72,0,1);
    white-space:nowrap;
  }
  .cta-pill:hover, .cta-pill:focus-visible{ transform:translateY(-2px); box-shadow:0 10px 30px -6px rgba(47,230,198,0.65); }
  .cta-pill:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:3px; }
  .cta-ghost{
    font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.05em;
    color:var(--ink); background:transparent; border:1px solid var(--surface-line);
    padding:10px 18px; border-radius:999px; cursor:pointer; text-decoration:none; display:inline-flex;
    transition:border-color 0.25s cubic-bezier(.32,.72,0,1), background 0.25s cubic-bezier(.32,.72,0,1);
  }
  .cta-ghost:hover, .cta-ghost:focus-visible{ border-color:var(--accent-soft); background:var(--accent-wash); }
  .cta-ghost:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:3px; }

  /* ---------- glass block ---------- */
  .glass{
    background:rgba(12,13,19,0.74);
    border:1px solid var(--surface-line);
    border-radius:20px;
    backdrop-filter:blur(26px) saturate(140%);
    -webkit-backdrop-filter:blur(26px) saturate(140%);
    box-shadow:0 1px 0 0 rgba(255,255,255,0.05) inset, 0 20px 60px -30px rgba(0,0,0,0.75);
  }
  .glass-light{
    background:rgba(14,15,21,0.5);
    backdrop-filter:blur(14px) saturate(120%);
    -webkit-backdrop-filter:blur(14px) saturate(120%);
    box-shadow:0 1px 0 0 rgba(255,255,255,0.03) inset, 0 12px 34px -22px rgba(0,0,0,0.55);
  }
  .glass-strong{
    background:rgba(10,11,16,0.86);
    backdrop-filter:blur(32px) saturate(150%);
    -webkit-backdrop-filter:blur(32px) saturate(150%);
    box-shadow:0 1px 0 0 rgba(255,255,255,0.06) inset, 0 28px 80px -30px rgba(0,0,0,0.85);
  }

  /* ---------- hero ---------- */
  #hero{
    min-height:100svh;
    display:flex; flex-direction:column; justify-content:center;
    padding-top:110px; padding-bottom:60px;
    position:relative;
  }
  .hero-grid{
    display:grid; gap:28px;
  }
  .hero-head{ font-size:clamp(2.4rem, 6.4vw, 5.2rem); line-height:1.02; letter-spacing:-0.01em; filter:drop-shadow(0 6px 26px rgba(4,5,8,0.65)); }
  .hero-head .accent-line{
    background:linear-gradient(90deg, var(--ink), var(--accent-soft) 55%, var(--accent));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero-sub{ max-width:520px; color:var(--ink-dim); font-size:1.08rem; }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
  .stat-row{
    display:flex; flex-wrap:wrap; gap:10px;
    margin-top:8px;
  }
  .stat-chip{
    font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.05em;
    padding:9px 14px; border-radius:10px;
    border:1px solid var(--surface-line);
    background:rgba(255,255,255,0.02);
    color:var(--ink-dim);
    white-space:nowrap;
  }
  .stat-chip b{ color:var(--ink); font-weight:500; }
  .scroll-cue{
    position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.16em; color:var(--ink-faint);
  }
  .scroll-cue .line{ width:1px; height:34px; background:linear-gradient(180deg, var(--accent-soft), transparent); animation:pulse-line 2.2s ease-in-out infinite; }
  @keyframes pulse-line{ 0%,100%{opacity:0.3;} 50%{opacity:1;} }

  /* ---------- section scaffolding ---------- */
  section{ position:relative; padding-block:120px; }
  .section-head{ margin-bottom:44px; max-width:680px; }
  .section-title{ font-size:clamp(1.7rem, 3.6vw, 2.6rem); margin-top:14px; }
  .section-lede{ color:var(--ink-dim); margin-top:14px; font-size:1.02rem; max-width:520px; }

  /* pinned turn section */
  #turn{ min-height:100svh; display:flex; align-items:center; }
  .turn-inner{ width:100%; text-align:center; }
  .turn-glyphs{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:20px; color:var(--ink-faint); }
  .turn-glyphs svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .turn-glyphs .arrow{ width:20px; height:14px; opacity:0.6; }
  .turn-glyphs .to{ color:var(--accent-soft); }
  .turn-pre{ font-family:var(--font-mono); font-size:0.9rem; color:var(--ink-faint); letter-spacing:0.05em; min-height:1.6em; margin-bottom:22px;}
  .turn-tagline{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(1.9rem, 5.4vw, 4.2rem);
    line-height:1.12; text-wrap:balance; max-width:920px; margin-inline:auto;
  }
  .turn-tagline .w{ color:var(--ink-faint); text-shadow:0 4px 18px rgba(4,5,8,0.7); transition:color 0.4s ease, text-shadow 0.4s ease; }
  .turn-tagline .w.lit{ color:var(--ink); text-shadow:0 4px 18px rgba(4,5,8,0.75), 0 0 22px rgba(154,246,228,0.4); }
  .turn-tagline .w.accent{ color:var(--accent); }

  /* process */
  .proc-row{
    display:grid; gap:18px; margin-left:0; padding-left:56px; position:relative;
  }
  @media(min-width:640px){ .proc-row{ padding-left:76px; } }
  .proc-card{
    padding:22px 24px; position:relative;
  }
  .proc-card::before{
    content:attr(data-n);
    position:absolute; left:-56px; top:22px;
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:0.72rem; color:var(--bg);
    background:var(--accent-soft);
    box-shadow:0 0 0 5px var(--bg), 0 0 16px 0 rgba(47,230,198,0.5);
  }
  @media(min-width:640px){ .proc-card::before{ left:-76px; } }
  .proc-icon{ width:26px; height:26px; color:var(--accent-soft); margin-bottom:10px; }
  .proc-icon svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .proc-card h3{ font-size:1.18rem; }
  .proc-out{ margin-top:10px; font-family:var(--font-mono); font-size:0.76rem; color:var(--accent-soft); letter-spacing:0.03em; }
  .proc-desc{ margin-top:8px; color:var(--ink-dim); font-size:0.95rem; }

  /* proof */
  .proof-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  .proof-card{ padding:28px 24px 26px; display:flex; flex-direction:column; gap:14px; border-top:3px solid var(--warm); background:rgba(16,14,15,0.74); }
  .proof-metric{ font-family:var(--font-display); font-size:2.6rem; color:var(--warm); line-height:1; }
  .proof-tag{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; color:var(--ink-faint); text-transform:uppercase; }
  .proof-name{ font-size:1.15rem; font-weight:700; font-family:var(--font-display); }
  .proof-desc{ color:var(--ink-dim); font-size:0.92rem; }
  .proof-quote{ font-size:0.88rem; color:var(--ink); font-style:normal; border-left:2px solid var(--warm); padding-left:12px; margin-top:auto; }
  .proof-note{ font-size:0.82rem; color:var(--ink-faint); }
  .proof-mock{ width:100%; height:auto; color:var(--warm-soft); border-radius:10px; overflow:hidden; }
  .proof-mock svg{ display:block; width:100%; height:auto; }

  /* ---------- expanded case studies (case-studies.html) ---------- */
  .case-grid{ display:grid; gap:28px; }
  .case-block{
    display:grid; gap:32px;
    grid-template-columns:1.5fr 1fr;
    padding:36px;
    border-top:3px solid var(--warm);
    background:rgba(16,14,15,0.74);
  }
  @media(max-width:820px){ .case-block{ grid-template-columns:1fr; } }
  .case-num{ font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-faint); letter-spacing:0.1em; }
  .case-tag{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; color:var(--ink-faint); text-transform:uppercase; margin-top:8px; }
  .case-name{ font-family:var(--font-display); font-size:1.5rem; margin-top:10px; }
  .case-flow{ display:flex; align-items:center; gap:10px; margin-top:16px; font-size:0.92rem; color:var(--ink-dim); flex-wrap:wrap; }
  .case-flow .arrow{ color:var(--accent-soft); }
  .case-flow .after{ color:var(--ink); font-weight:500; }
  .case-desc{ color:var(--ink-dim); font-size:0.96rem; margin-top:16px; max-width:52ch; }
  .case-quote{ font-size:0.95rem; color:var(--ink); border-left:2px solid var(--warm); padding-left:14px; margin-top:20px; max-width:52ch; }
  .case-quote cite{ display:block; margin-top:8px; font-style:normal; font-family:var(--font-mono); font-size:0.76rem; color:var(--ink-faint); }
  .case-link{ display:inline-flex; align-items:center; gap:6px; margin-top:20px; font-family:var(--font-mono); font-size:0.8rem; color:var(--accent-soft); text-decoration:none; }
  .case-link:hover, .case-link:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
  .case-metric-panel{
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    gap:8px; padding:24px; border-radius:12px;
    background:rgba(255,255,255,0.02); border:1px solid var(--surface-line);
  }
  .case-metric{ font-family:var(--font-display); font-size:3.2rem; color:var(--warm); line-height:1; }
  .case-metric-label{ color:var(--ink-dim); font-size:0.92rem; max-width:24ch; }

  /* ---------- FAQ (pricing.html) ---------- */
  .faq-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
  .faq-card{ padding:24px; }
  .faq-card h3{ font-size:1.05rem; }
  .faq-card p{ margin-top:8px; color:var(--ink-dim); font-size:0.92rem; }

  /* ---------- Blog ---------- */
  .blog-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
  .blog-card{ padding:26px; display:flex; flex-direction:column; gap:10px; text-decoration:none; transition:border-color 0.25s ease; }
  .blog-card:hover, .blog-card:focus-visible{ border-color:var(--accent-soft); }
  .blog-date{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; color:var(--ink-faint); text-transform:uppercase; }
  .blog-title{ font-family:var(--font-display); font-size:1.3rem; color:var(--ink); }
  .blog-excerpt{ color:var(--ink-dim); font-size:0.92rem; }
  .blog-readmore{ margin-top:auto; font-family:var(--font-mono); font-size:0.78rem; color:var(--accent-soft); }
  .post-meta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-family:var(--font-mono); font-size:0.76rem; color:var(--ink-faint); margin-top:14px; }
  .post-body{ max-width:68ch; margin-top:40px; color:var(--ink-dim); font-size:1.02rem; line-height:1.75; display:grid; gap:22px; }
  .post-body h2{ color:var(--ink); font-family:var(--font-display); font-size:1.5rem; margin-top:14px; }
  .post-body strong{ color:var(--ink); font-weight:600; }
  .post-body ul{ padding-left:22px; display:grid; gap:8px; }
  .post-back{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.78rem; color:var(--accent-soft); text-decoration:none; margin-bottom:22px; }
  .post-back:hover, .post-back:focus-visible{ text-decoration:underline; text-underline-offset:3px; }

  /* range */
  .tag-grid{ display:flex; flex-wrap:wrap; gap:10px; }
  .tag-chip{
    padding:10px 16px 10px 12px; border-radius:12px; font-size:0.88rem;
    border:1px solid var(--surface-line); background:rgba(255,255,255,0.02); color:var(--ink);
    display:inline-flex; align-items:center; gap:9px;
  }
  .tag-icon{ width:17px; height:17px; color:var(--accent-soft); flex:none; }
  .tag-icon svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .build-line{ margin-top:26px; font-family:var(--font-mono); font-size:0.85rem; color:var(--ink-dim); }
  .build-line b{ color:var(--accent-soft); font-weight:500; }

  /* pricing */
  .price-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); align-items:stretch; }
  .price-card{ padding:28px 24px; display:flex; flex-direction:column; gap:16px; position:relative; transition:transform 0.4s cubic-bezier(.32,.72,0,1); }
  .price-card.hot{ border-color:rgba(255,181,69,0.4); box-shadow:0 1px 0 0 rgba(255,255,255,0.05) inset, 0 0 0 1px rgba(255,181,69,0.3), 0 26px 70px -24px rgba(255,181,69,0.4); transform:scale(1.045); z-index:2; }
  @media(min-width:900px){ .price-card.hot{ transform:scale(1.06); } }
  .price-flag{ position:absolute; top:-12px; left:24px; font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.1em; background:var(--warm); color:var(--warm-ink); padding:5px 10px; border-radius:6px; }
  .price-name{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.1em; color:var(--ink-faint); text-transform:uppercase; }
  .tier-bars{ display:flex; align-items:flex-end; gap:4px; height:28px; }
  .tier-bars span{ width:7px; border-radius:2px; background:var(--surface-line); }
  .tier-bars span:nth-child(1){ height:10px; }
  .tier-bars span:nth-child(2){ height:18px; }
  .tier-bars span:nth-child(3){ height:28px; }
  .tier-bars span.on{ background:var(--accent-soft); }
  .price-card.hot .tier-bars span.on{ background:var(--warm); }
  .price-amount{ font-family:var(--font-display); font-size:1.9rem; }
  .price-time{ font-size:0.82rem; color:var(--ink-faint); font-family:var(--font-mono); }
  .price-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:0.9rem; color:var(--ink-dim); }
  .price-list li{ padding-left:18px; position:relative; }
  .price-list li::before{ content:'—'; position:absolute; left:0; color:var(--accent-soft); }
  .price-footnote{ text-align:center; margin-top:36px; font-size:0.9rem; color:var(--ink-dim); }
  .price-footnote a{ color:var(--accent-soft); text-decoration:underline; text-underline-offset:3px; }
  .price-actions{ display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-top:auto; padding-top:6px; }
  .price-actions .cta-pill, .price-actions .cta-ghost{ justify-content:center; width:100%; }

  /* close */
  #close{ text-align:center; padding-top:100px; }
  .close-head{ font-size:clamp(1.9rem, 4.6vw, 3.2rem); max-width:720px; margin-inline:auto; filter:drop-shadow(0 6px 24px rgba(4,5,8,0.65)); }
  .close-actions{ display:flex; justify-content:center; margin-top:30px; }

  form.contact{
    max-width:560px; margin:56px auto 0; padding:30px; text-align:left; display:grid; gap:16px;
  }
  .field{ display:grid; gap:6px; }
  .field label{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; color:var(--ink-faint); text-transform:uppercase; }
  .field input, .field select, .field textarea{
    background:rgba(255,255,255,0.03); border:1px solid var(--surface-line); border-radius:10px;
    padding:12px 14px; color:var(--ink); font-family:var(--font-body); font-size:0.95rem;
  }
  .field textarea{ resize:vertical; min-height:96px; }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
    outline:2px solid var(--accent-soft); outline-offset:1px; border-color:var(--accent-soft);
  }
  .submit-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .form-note{ font-size:0.82rem; color:var(--ink-faint); }
  .form-success{ display:none; font-family:var(--font-mono); font-size:0.85rem; color:var(--accent-soft); }
  .form-success.show{ display:block; }

  footer{
    padding:50px 0 60px; text-align:center;
    font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-faint);
    display:grid; gap:14px;
  }
  footer .foot-links{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
  footer a{ text-decoration:none; color:var(--ink-dim); }
  footer a:hover{ color:var(--accent-soft); }

  @media (prefers-reduced-motion: reduce){
    * { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  }

  /* ---------- scrollbar ---------- */
  html{ scrollbar-color:var(--ink-faint) var(--bg); scrollbar-width:thin; }
  ::-webkit-scrollbar{ width:10px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{ background:#2a2d38; border-radius:10px; border:2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--accent-soft); }

  /* ---------- custom cursor ---------- */
  @media (pointer: fine){
    body.has-cursor{ cursor:none; }
    body.has-cursor a, body.has-cursor button, body.has-cursor input, body.has-cursor select, body.has-cursor textarea{ cursor:none; }
  }
  #cursor-dot, #cursor-ring{
    position:fixed; top:0; left:0; pointer-events:none; z-index:60;
    transform:translate(-50%,-50%);
    border-radius:50%;
  }
  #cursor-dot{ width:6px; height:6px; background:var(--accent-soft); box-shadow:0 0 8px 1px var(--accent); }
  #cursor-ring{ width:32px; height:32px; border:1px solid var(--surface-line); transition:width 0.25s cubic-bezier(.32,.72,0,1), height 0.25s cubic-bezier(.32,.72,0,1), border-color 0.25s ease; }
  #cursor-ring.active{ width:46px; height:46px; border-color:var(--accent-soft); }

  /* ---------- boot sequence: cinematic dragon flight → hex-mark ignition ---------- */
  #boot{
    position:fixed; inset:0; z-index:100;
    background:#040406;
    overflow:hidden;
    transition:opacity 0.9s ease, visibility 0.9s ease;
  }
  #boot.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

  .boot-stage{ position:absolute; inset:0; }
  #bootCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

  .boot-glow{ position:absolute; left:50%; top:50%; width:900px; height:900px; max-width:150vw; max-height:150vw; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(47,230,198,0.20), transparent 65%); filter:blur(14px); opacity:0; animation:bootGlowCycle 7.2s ease forwards; pointer-events:none; }
  @keyframes bootGlowCycle{
    0%{ opacity:0; }
    11%{ opacity:.35; }
    28%{ opacity:.5; }
    56%{ opacity:.6; }
    63%{ opacity:1; }
    79%{ opacity:.9; }
    100%{ opacity:0; }
  }

  .boot-flash{ position:absolute; left:50%; top:50%; width:60px; height:60px; transform:translate(-50%,-50%) scale(0); border-radius:50%; background:radial-gradient(circle, #eafffa, rgba(47,230,198,.55) 45%, transparent 70%); opacity:0; animation:bootFlash 0.7s ease-out 3.95s forwards; pointer-events:none; }
  @keyframes bootFlash{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.2); } 30%{ opacity:1; transform:translate(-50%,-50%) scale(3.4); } 100%{ opacity:0; transform:translate(-50%,-50%) scale(6.2); } }

  .boot-hex{ position:absolute; left:50%; top:50%; width:240px; height:240px; transform:translate(-50%,-50%) scale(.7); opacity:0; animation:hexIn 0.6s cubic-bezier(.2,1.4,.4,1) 4.05s forwards, hexOut 0.9s ease 5.7s forwards; pointer-events:none; }
  @keyframes hexIn{ to{ transform:translate(-50%,-50%) scale(1); opacity:1; } }
  @keyframes hexOut{ to{ opacity:0; } }
  .hex-poly{ fill:none; stroke:var(--accent); stroke-width:2.5; }
  .hex-poly-dim{ fill:none; stroke:var(--surface-line); stroke-width:1; }
  .hex-node{ fill:var(--accent); }
  .hex-node-warm{ fill:var(--warm); }
  .hex-outer{ transform-origin:100px 100px; animation:hexSpin 60s linear infinite; }
  @keyframes hexSpin{ to{ transform:rotate(360deg); } }
  .hex-core{ fill:var(--accent); filter:drop-shadow(0 0 10px var(--accent)); transform-origin:100px 100px; transform:scale(0); animation:boot-pulse 1.6s ease-in-out infinite, coreIn 0.4s cubic-bezier(.2,1.4,.4,1) 4.3s forwards; }
  @keyframes boot-pulse{ 0%,100%{ opacity:0.7; } 50%{ opacity:1; } }
  @keyframes coreIn{ to{ transform:scale(1); } }

  .boot-status{ position:absolute; left:50%; top:calc(50% + 210px); transform:translateX(-50%); font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em; color:var(--accent-soft); display:flex; align-items:center; gap:8px; opacity:.85; white-space:nowrap; }
  .boot-status::before{ content:'▸'; }
  .boot-word{ position:absolute; left:50%; top:calc(50% + 6px); transform:translate(-50%,10px); text-align:center; opacity:0; animation:bootWordIn 0.6s ease 4.2s forwards, bootWordOut 1s ease 5.65s forwards; pointer-events:none; }
  @keyframes bootWordIn{ to{ transform:translate(-50%,0); opacity:1; } }
  @keyframes bootWordOut{ to{ opacity:0; } }
  .boot-word b{ display:block; font-family:var(--font-mono); font-size:15px; letter-spacing:.32em; font-weight:500; color:var(--ink); }
  .boot-word span{ display:block; margin-top:7px; font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; color:var(--ink-faint); text-transform:uppercase; }

  .boot-skip{
    position:absolute; bottom:24px; right:24px; z-index:2;
    font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; color:var(--ink-faint);
    background:transparent; border:1px solid var(--surface-line); border-radius:999px;
    padding:8px 16px; cursor:pointer;
  }
  .boot-skip:hover, .boot-skip:focus-visible{ color:var(--ink); border-color:var(--accent-soft); }

  @media(max-width:640px){ .boot-status{ top:calc(50% + 160px); } .boot-word{ top:calc(50% + 2px); } .boot-word b{ font-size:13px; } }

  /* ---------- ledger badge ---------- */
  .ledger-badge{
    position:fixed; left:20px; bottom:18px; z-index:35;
    font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.08em; color:var(--ink-faint);
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:999px;
    background:rgba(14,15,21,0.5); border:1px solid var(--surface-line);
    backdrop-filter:blur(10px);
  }
  .ledger-badge .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px 1px var(--accent); flex:none; }
  @media(max-width:640px){ .ledger-badge{ display:none; } }

/* Readable cinematic palette and restored identity. */
:root{--ink:#fff3df;--ink-dim:#d5d9e4;--ink-faint:#b4bdcf;--accent:#8edce8;--accent-soft:#c8f1f6;--deep:#b6a4ff;--surface:#111725;}
#bg-canvas{opacity:.72;}
#scrim{background:linear-gradient(90deg,rgba(6,9,16,.85),rgba(6,9,16,.5) 65%,rgba(6,9,16,.25));}
nav{background:rgba(7,11,19,.91);border-bottom:1px solid rgba(200,220,255,.15);backdrop-filter:blur(18px);}
.nav-links a{opacity:1;color:#e0e5ef;}
.brand{padding:3px 12px 3px 4px;background:transparent;border:0;}
.brand-logo{flex:none;width:40px;height:40px;}
.hero-grid{max-width:850px;position:relative;}
.hero-grid::before{content:'';position:absolute;inset:-34px;z-index:-1;border-radius:32px;background:radial-gradient(ellipse at left,rgba(7,11,19,.88),rgba(7,11,19,.55) 68%,transparent);}
.hero-head{color:#fff3df;line-height:1.12;font-size:clamp(2.2rem,5.8vw,4.8rem);}
.hero-head .accent-line{background:none;color:#ffda9e;-webkit-text-fill-color:#ffda9e;}
.hero-sub{color:#e0e4ed;max-width:610px;}
.hero-identity{display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:.82rem;letter-spacing:.08em;}
.hero-identity img{border-radius:14px;border:1px solid #deb475;image-rendering:pixelated;}
.hero-identity small{display:block;font-size:.66rem;color:#c0cadb;margin-top:3px;}
.stat-chip,.cta-ghost{background:rgba(8,13,23,.9);}
.turn-inner{padding-block:48px;background:radial-gradient(ellipse,rgba(7,11,19,.93),rgba(7,11,19,.72) 60%,transparent);}
.turn-tagline .w{color:#c8cedb;}
.turn-tagline .w.lit,.turn-tagline .w.accent{color:#ffda9e;text-shadow:0 3px 16px #070b13;}
.turn-pre{color:#dde4ef!important;opacity:1!important;}
.section-head{padding:24px;border-left:2px solid #d8af71;background:linear-gradient(90deg,rgba(8,13,23,.95),rgba(8,13,23,.7));border-radius:0 16px 16px 0;}
.proc-card,.proof-card,.tier-card,.cap-item{background:rgba(12,18,30,.94);}
.boot-skip{color:#fff3df!important;background:rgba(0,0,0,.8)!important;border:1px solid #c8b48f!important;}
.ledger-badge{display:none;}
#close{background:linear-gradient(180deg,transparent,rgba(8,13,23,.95) 30%);}
@media(max-width:640px){.hero-grid{gap:20px;}#hero{padding-top:120px;}.hero-head{font-size:clamp(2rem,8.3vw,3rem);}nav{padding:10px 12px;}nav .cta-pill{font-size:.62rem;padding:10px 12px;}.brand{font-size:.68rem;}.section-head{padding:18px;}}

.story-label{justify-content:center;margin-bottom:30px;}.about-chapter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:48px;align-items:center;}.about-avatar{width:100%;height:auto;border-radius:24px;border:1px solid #d8af7166;box-shadow:0 25px 80px #0009;image-rendering:pixelated;}.about-chapter .section-head{margin:0;}@media(max-width:700px){.about-chapter{grid-template-columns:1fr;gap:28px;}.about-avatar{max-width:280px;justify-self:center;}}
/* Keep the scroll cue clear of content at every viewport height. */
html{overflow-x:clip;}
#hero .scroll-cue{position:relative;left:auto;bottom:auto;transform:none;align-self:center;margin-top:36px;}
/* Interactive project display cases. Copy remains visible in every state. */
.proof-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.proof-card{min-width:0;position:relative;isolation:isolate;padding:24px 28px 30px;border:1px solid #8996ba36;border-top:1px solid #c6d4eb55;border-radius:24px;background:linear-gradient(145deg,rgba(29,37,54,.97),rgba(10,15,25,.98) 65%);box-shadow:inset 0 1px 0 #ffffff0a,0 20px 50px #0004;transition:border-color .4s,box-shadow .4s;}
.proof-card.is-engaged{border-color:#cbd8ef88;box-shadow:inset 0 1px 0 #ffffff1a,0 25px 65px #0007;}
.proof-metric{font-size:clamp(1.9rem,3.2vw,2.6rem);overflow-wrap:anywhere;line-height:1.16;}
.proof-showcase{position:relative;height:176px;margin:-8px -12px 6px;perspective:650px;border-bottom:1px solid #bdd2fa1a;}
.object-index{position:absolute;top:0;left:0;color:#b6c3d7;font:10px var(--font-mono);letter-spacing:.14em;}
.object-toggle{position:absolute;inset:12px 0 0;width:100%;border:0;color:#dbe7f4;background:transparent;cursor:pointer;border-radius:16px;perspective:650px;-webkit-tap-highlight-color:transparent;}
.object-toggle:focus-visible{outline:2px solid #ddc599;outline-offset:3px;}
.object-orbit{position:absolute;left:50%;top:70%;width:130px;height:32px;transform:translate(-50%,-50%);border:1px solid rgba(var(--object-tone),.24);border-radius:50%;background:radial-gradient(ellipse,rgba(var(--object-tone),.08),transparent 68%);transition:box-shadow .5s,border-color .5s;}
.object-orbit::after{content:'';position:absolute;inset:7px 20px;border:1px solid rgba(var(--object-tone),.15);border-radius:50%;}
.object-float{position:absolute;left:50%;top:42%;width:210px;height:158px;pointer-events:none;opacity:0;filter:blur(12px);transform:translate(-50%,-65%) scale(.75);transition:opacity .4s,filter .5s,transform .6s cubic-bezier(.2,.7,.2,1);}
.object-float img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 15px 14px #0008);transform:translate3d(var(--float-x,0px),var(--float-y,0px),0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease-out;}
.is-engaged .object-float{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1);}
.is-engaged .object-orbit{border-color:rgba(var(--object-tone),.6);box-shadow:0 0 25px rgba(var(--object-tone),.13);}
.object-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font:10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;transition:opacity .25s;color:#bfcddd;}
.is-engaged .object-hint{opacity:0;}
.object-particles{position:absolute;left:50%;top:45%;pointer-events:none;}
.object-particles i{position:absolute;width:3px;height:3px;border-radius:1px;background:rgb(var(--object-tone));opacity:0;}
.is-dissolving .object-particles i{animation:object-dissolve .65s var(--delay) ease-out both;}
@keyframes object-dissolve{0%{opacity:0;transform:translate(0,0) scale(1);}15%{opacity:.7;}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.1);}}
@media(hover:hover) and (pointer:fine){.is-engaged .object-float{animation:object-hover 3s .6s ease-in-out infinite;}@keyframes object-hover{0%,100%{transform:translate(-50%,-50%);}50%{transform:translate(-50%,-54%);}}}
@media(min-width:1200px){.proof-grid{grid-template-columns:repeat(4,minmax(0,1fr));}.proof-card{padding:24px 20px;}.proof-metric{font-size:2.05rem;}}
@media(max-width:620px){.proof-grid{grid-template-columns:1fr;}.proof-card{padding:24px;}.proof-showcase{height:170px;}}
@media(prefers-reduced-motion:reduce){.object-float,.object-float img,.object-orbit{transition:none;animation:none!important;}.object-particles{display:none;}.object-float{filter:none;}}

/* Shared treatment for process, services, pricing, and FAQ cards. */
.interactive-card{min-width:0;position:relative;isolation:isolate;border:1px solid #8996ba36;border-top:1px solid #c6d4eb55;border-radius:24px;background:linear-gradient(145deg,rgba(29,37,54,.97),rgba(10,15,25,.98) 65%);box-shadow:inset 0 1px 0 #ffffff0a,0 20px 50px #0004;transition:border-color .4s,box-shadow .4s;}
.interactive-card.is-engaged{border-color:#cbd8ef88;box-shadow:inset 0 1px 0 #ffffff1a,0 25px 65px #0007;}
.text-showcase{height:135px;width:100%;margin:0 0 18px;}
.text-showcase .object-float{width:165px;height:124px;}
.text-showcase .object-toggle{inset:0;}
.text-showcase .object-orbit{width:110px;height:26px;}
.tag-chip.interactive-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:20px;white-space:normal;}
.tag-chip .text-showcase{height:120px;margin-bottom:14px;}
.price-card.hot{border-color:#d8b57599;}
.proc-card.interactive-card{padding:24px;}
.faq-card .text-showcase{height:110px;}
@media(prefers-reduced-motion:reduce){.interactive-card{transition:none;}}
.tag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:18px;}.tag-chip.interactive-card{width:100%;}