:root{
    --bg:#F6F5FB;
    --bg-panel:#FFFFFF;
    --ink:#15121F;
    --ink-soft:#514C63;
    --line:#E4E1F0;
    --blue:#2F6BFF;
    --blue-ink:#0C2E7A;
    --pink:#FF3D8A;
    --pink-ink:#7A0E3E;
    --violet:#7A3BFF;
    --violet-ink:#2E0F80;
    --amber:#FFB020;
    --amber-ink:#5C3900;
    --blue-tint:#EAF0FF;
    --pink-tint:#FFEAF3;
    --violet-tint:#F1EAFF;
    --amber-tint:#FFF3DC;
    --cyan:#17C3D6;
    --cyan-tint:#E4FBFC;
    --panel-rgb:255,255,255;
    --bg-rgb:246,245,251;
    --shadow: 0 1px 0 rgba(21,18,31,0.05);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#131120;
      --bg-panel:#1B1830;
      --ink:#F3F1FA;
      --ink-soft:#B7B2CC;
      --line:#332E4D;
      --blue-tint:#1A2748;
      --pink-tint:#3A1830;
      --violet-tint:#2A1F4A;
      --amber-tint:#3A2A0E;
      --cyan:#5FE9F5;
      --cyan-tint:#0F3438;
      --blue:#6E93FF;
      --pink:#FF6FA8;
      --violet:#A47CFF;
      --amber:#FFC85C;
      --panel-rgb:27,24,48;
      --bg-rgb:19,17,32;
    }
  }
  :root[data-theme="dark"]{
    --bg:#131120;
    --bg-panel:#1B1830;
    --ink:#F3F1FA;
    --ink-soft:#B7B2CC;
    --line:#332E4D;
    --blue-tint:#1A2748;
    --pink-tint:#3A1830;
    --violet-tint:#2A1F4A;
    --amber-tint:#3A2A0E;
    --cyan:#5FE9F5;
    --cyan-tint:#0F3438;
    --blue:#6E93FF;
    --pink:#FF6FA8;
    --violet:#A47CFF;
    --amber:#FFC85C;
    --panel-rgb:27,24,48;
    --bg-rgb:19,17,32;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Onest',system-ui,-apple-system,sans-serif;
    padding-inline:0;
  }

  /* ---- fixed iridescent backdrop: stays put while the page scrolls over it ---- */
  .ambient-bg{
    position:fixed; inset:0; z-index:0; overflow:hidden;
    background:var(--bg); pointer-events:none;
  }
  .ambient-bg .blob{
    position:absolute; border-radius:50%; filter:blur(64px); will-change:transform;
    opacity:.6; mix-blend-mode:normal;
  }
  .ambient-bg .b1{width:46vw; height:46vw; left:-12vw; top:-16vw; background:radial-gradient(circle,var(--blue) 0%,transparent 72%); animation:driftA 26s ease-in-out infinite;}
  .ambient-bg .b2{width:40vw; height:40vw; right:-10vw; top:4vw; background:radial-gradient(circle,var(--pink) 0%,transparent 72%); animation:driftB 32s ease-in-out infinite;}
  .ambient-bg .b3{width:50vw; height:50vw; left:20vw; bottom:-22vw; background:radial-gradient(circle,var(--violet) 0%,transparent 72%); animation:driftC 29s ease-in-out infinite;}
  .ambient-bg .b4{width:34vw; height:34vw; right:8vw; bottom:6vw; background:radial-gradient(circle,var(--cyan) 0%,transparent 72%); animation:driftD 24s ease-in-out infinite;}
  @keyframes driftA{0%,100%{transform:translate(0,0) scale(1); opacity:.55;} 50%{transform:translate(4vw,5vw) scale(1.12); opacity:.75;}}
  @keyframes driftB{0%,100%{transform:translate(0,0) scale(1); opacity:.45;} 50%{transform:translate(-5vw,4vw) scale(1.1); opacity:.65;}}
  @keyframes driftC{0%,100%{transform:translate(0,0) scale(1); opacity:.4;} 50%{transform:translate(3vw,-4vw) scale(1.14); opacity:.62;}}
  @keyframes driftD{0%,100%{transform:translate(0,0) scale(1); opacity:.4;} 50%{transform:translate(-4vw,-3vw) scale(1.08); opacity:.6;}}
  @media (prefers-reduced-motion: reduce){
    .ambient-bg .blob{animation:none;}
  }
  .site{position:relative; z-index:1;}
  h1,h2,h3{
    font-family:'Unbounded','Onest',system-ui,sans-serif;
    text-wrap:balance;
    margin:0;
    letter-spacing:-0.015em;
  }
  p{margin:0; color:var(--ink-soft); line-height:1.6;}
  a{color:inherit;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  .tabular{font-variant-numeric:tabular-nums;}
  button{font-family:inherit; cursor:pointer;}
  :focus-visible{outline:3px solid var(--violet); outline-offset:2px;}

  .wrap{max-width:1160px; margin-inline:auto; padding-inline:24px;}

  /* ---- top bar ---- */
  .topbar{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .topbar-inner{
    max-width:1160px; margin-inline:auto; padding:12px 24px;
    display:flex; align-items:center; gap:10px;
  }
  .brand{display:flex; align-items:center; gap:10px; flex:0 0 auto; margin-right:10px;}
  .brand img{width:34px; height:auto; display:block;}
  .brand-icon{border-radius:9px; box-shadow:0 2px 8px rgba(20,10,50,0.28);}
  .brand-word{font-family:'Unbounded',sans-serif; font-weight:800; font-size:19px; letter-spacing:-0.01em;}
  .brand-word small{display:block; font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:9px; letter-spacing:0.12em; color:var(--ink-soft); margin-top:-2px;}

  .nav-arrow{
    display:none; flex:0 0 auto;
    align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%;
    border:1.5px solid var(--line); background:var(--bg-panel); color:var(--ink);
    font-size:16px; line-height:1; padding:0;
    box-shadow:0 2px 6px rgba(20,10,50,0.14);
    transition:background .15s, transform .15s;
  }
  .nav-arrow.is-visible{display:flex;}
  .nav-arrow:hover{background:var(--bg); transform:scale(1.08);}
  .nav-arrow:active{transform:scale(0.94);}

  nav.tabs{
    display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
    flex:1 1 auto;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image:linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
  nav.tabs::-webkit-scrollbar{display:none;}
  nav.tabs .tab-link{
    flex:0 0 auto;
    background:transparent; border:1.5px solid transparent; color:var(--ink-soft);
    font-size:13px; font-weight:700; font-variation-settings:'wght' 650; padding:8px 13px; border-radius:100px;
    white-space:nowrap; transition:background .15s, color .15s, border-color .15s, font-variation-settings .25s ease;
  }
  nav.tabs .tab-link:hover{background:var(--bg-panel); color:var(--ink); font-variation-settings:'wght' 800;}
  nav.tabs .tab-link[aria-current="page"]{
    background:var(--ink); color:var(--bg); border-color:var(--ink); font-variation-settings:'wght' 800;
  }
  nav.tabs .tab-link .num{font-family:'IBM Plex Mono',monospace; opacity:.55; margin-right:6px; font-weight:500;}

  main{padding-bottom:80px;}
  section.page{padding-top:44px;}
  section.page[hidden]{display:none;}

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
    margin-bottom:14px;
  }
  .eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--accent, var(--violet));}

  /* ---- generic panel: frosted glass, so the fixed iridescent backdrop reads through ---- */
  .panel{
    background:rgba(var(--panel-rgb), .8);
    backdrop-filter:blur(18px) saturate(1.15);
    -webkit-backdrop-filter:blur(18px) saturate(1.15);
    border:1.5px solid var(--line);
    border-radius:22px;
    padding:32px;
  }
  .tint{background:color-mix(in srgb, var(--tintc, var(--violet-tint)) 78%, transparent); border-color:transparent;}

  .grid{display:grid; gap:18px;}
  .g2{grid-template-columns:1fr 1fr;}
  .g3{grid-template-columns:repeat(3,1fr);}
  .g5{grid-template-columns:repeat(5,1fr);}
  @media (max-width:900px){
    .g2,.g3,.g5{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:620px){
    .g2,.g3,.g5{grid-template-columns:1fr;}
  }

  .chip{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:500;
    padding:6px 11px; border-radius:100px; background:var(--bg); border:1px solid var(--line);
    color:var(--ink-soft);
  }
  .chip.on{background:var(--ink); color:var(--bg); border-color:var(--ink);}

  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-weight:800; font-variation-settings:'wght' 780; font-size:14.5px; padding:13px 22px; border-radius:100px;
    border:1.5px solid var(--ink); background:var(--ink); color:var(--bg);
    text-decoration:none; transition:transform .15s ease, font-variation-settings .25s ease;
  }
  .btn:hover{transform:translateY(-2px); font-variation-settings:'wght' 900;}
  .btn.ghost{background:transparent; color:var(--ink);}
  .btn.accent{background:var(--accent,var(--violet)); border-color:var(--accent,var(--violet)); color:#fff;}

  img.shot{width:100%; display:block; border-radius:14px; object-fit:cover;}
  figure{margin:0;}
  figcaption{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); margin-top:8px; letter-spacing:0.02em;}

  .shotgrid figure{
    position:relative; margin:0; border-radius:16px; overflow:hidden;
    aspect-ratio:4/3; border:1.5px solid var(--line);
    background:#0c0a14;
  }
  .shotgrid figure img.shot{
    width:100%; height:100%; border-radius:0; object-fit:cover; object-position:center;
  }
  .shotgrid figcaption{
    position:absolute; top:12px; right:12px; margin:0; max-width:72%;
    background:rgba(10,8,20,.62); color:#fff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    padding:6px 11px; border-radius:100px; font-size:10.5px; text-align:right;
    border:1px solid rgba(255,255,255,.18);
  }

  .site-demo{
    position:relative; aspect-ratio:1600/774; background:#0c0a14; overflow:hidden;
  }
  .site-demo video{ width:100%; height:100%; object-fit:cover; display:block; }
  .site-demo-caption{
    position:absolute; bottom:14px; right:14px; margin:0; max-width:70%;
    background:rgba(10,8,20,.62); color:#fff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    padding:7px 13px; border-radius:100px; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
    border:1px solid rgba(255,255,255,.18); letter-spacing:.02em;
  }
  .site-demo-tag{
    position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:7px;
    background:rgba(212,169,74,.16); color:#F0DFAF; border:1px solid rgba(212,169,74,.4);
    padding:7px 13px 7px 11px; border-radius:100px; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
    font-weight:600; letter-spacing:.05em; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .dot-live{
    width:7px; height:7px; border-radius:50%; background:#D4A94A; flex:0 0 auto;
    animation:liveDotPulse 1.8s ease-out infinite;
  }
  @keyframes liveDotPulse{
    0%{box-shadow:0 0 0 0 rgba(212,169,74,.55);}
    70%{box-shadow:0 0 0 8px rgba(212,169,74,0);}
    100%{box-shadow:0 0 0 0 rgba(212,169,74,0);}
  }
  @media (prefers-reduced-motion: reduce){ .dot-live{animation:none;} }

  .stat{
    background:rgba(var(--bg-rgb),.7); border:1px solid var(--line); border-radius:16px; padding:16px 18px;
  }
  .stat .n{font-family:'Unbounded',sans-serif; font-weight:800; font-size:26px; display:block;}
  .stat .l{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em;}

  /* ---- 3D depth: pointer-driven tilt cards, CSS transforms only (no WebGL/model assets, zero load-time cost) ----
     applied to every information panel / text box on the site — .tilt-card marks the bespoke
     tiles/feature-panels/shots, while .panel, .worldcard and .placeholder-panel (every generic
     content box, case-study card, pricing table, form, world card, placeholder) get it for free */
  .tilt-card, .panel, .worldcard, .placeholder-panel{
    --rx:0deg; --ry:0deg; --tscale:1;
    position:relative;
    transform-style:preserve-3d;
    transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--tscale));
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
    will-change:transform;
  }
  .tilt-card.is-active, .panel.is-active, .worldcard.is-active, .placeholder-panel.is-active{transition:transform .08s linear;}
  .tilt-card:hover, .panel:hover, .worldcard:hover, .placeholder-panel:hover{--tscale:1.015;}
  /* layered children pop toward the viewer at different depths as the card tilts */
  .tilt-card > .ic-badge, .tilt-card > .brand-badge{transform:translateZ(46px);}
  .tilt-card > h3, .panel > h3, .worldcard > h3, .placeholder-panel > h3{transform:translateZ(28px);}
  .tilt-card > p, .panel > p, .placeholder-panel > p{transform:translateZ(20px);}
  .tilt-card > .go, .tilt-card > .chip.on, .panel > .chip.on, .placeholder-panel > .chip.on{transform:translateZ(22px);}
  .shotgrid figure.tilt-card > img.shot{transform:translateZ(-8px) scale(1.04);}
  .shotgrid figure.tilt-card > figcaption{transform:translateZ(32px);}
  .worldcard .wc-body > h3{transform:translateZ(24px);}
  /* soft light sheen that tracks the pointer, reinforcing the sense of a physical tilted surface */
  .tilt-card::after, .panel::after, .worldcard::after, .placeholder-panel::after{
    content:''; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;
    background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.28), transparent 45%);
    opacity:0; transition:opacity .35s ease; mix-blend-mode:overlay;
  }
  .tilt-card.is-active::after, .panel.is-active::after, .worldcard.is-active::after, .placeholder-panel.is-active::after{opacity:1;}
  @media (hover:none), (pointer:coarse), (prefers-reduced-motion: reduce){
    .tilt-card, .panel, .worldcard, .placeholder-panel{transform:none !important;}
    .tilt-card::after, .panel::after, .worldcard::after, .placeholder-panel::after{display:none;}
  }

  /* ---- home hero ---- */
  .hero{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
    padding-block:20px 50px;
  }
  @media (max-width:860px){ .hero{grid-template-columns:1fr;} }
  .hero h1{font-size:clamp(34px,5.2vw,58px); line-height:1.03; font-weight:800;}
  .hero h1 .hl{
    background:linear-gradient(100deg, var(--violet), var(--pink), var(--blue), var(--cyan), var(--violet));
    background-size:400% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  @keyframes kineticHue{
    0%{background-position:0% 50%;}
    100%{background-position:400% 50%;}
  }

  /* ---- kinetic typography: headline + section-head words animate in as they're seen ----
     variable-font weight rides along with the entrance too — words resolve from a light
     draft weight up to a commanding bold as they land, using the true wght axis (no extra
     font files: Unbounded/Onest are loaded as variable fonts, see the Google Fonts link) */
  .kinetic-word{
    display:inline-block;
    opacity:0;
    transform:translateY(0.5em) rotate(4deg) scale(.94);
    filter:blur(3px);
    font-variation-settings:'wght' 340;
  }
  .kinetic-in .kinetic-word{
    animation:
      kineticIn .75s cubic-bezier(.16,.85,.24,1) forwards,
      kineticWeight .75s cubic-bezier(.16,.85,.24,1) forwards;
    animation-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms);
  }
  /* the highlighted span needs the one-shot entrance, the weight ramp AND the endless hue-drift;
     this selector must out-specificity the plain .kinetic-in .kinetic-word rule above
     so all three animations combine instead of the shorthand clobbering the others */
  .kinetic-in .kinetic-word.hl{
    animation:
      kineticIn .75s cubic-bezier(.16,.85,.24,1) forwards,
      kineticWeight .75s cubic-bezier(.16,.85,.24,1) forwards,
      kineticHue 8s linear infinite;
    animation-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms);
  }
  @keyframes kineticIn{
    to{ opacity:1; transform:translateY(0) rotate(0) scale(1); filter:blur(0); }
  }
  @keyframes kineticWeight{
    to{ font-variation-settings:'wght' 780; }
  }
  @media (prefers-reduced-motion: reduce){
    .kinetic-word{ opacity:1; transform:none; filter:none; font-variation-settings:'wght' 780; }
    .kinetic-in .kinetic-word{ animation:none; }
    .kinetic-in .kinetic-word.hl{ animation:none; background-position:0 50%; }
  }
  .hero p.lede{font-size:17.5px; max-width:46ch; margin-top:18px;}
  .hero .cta-row{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}
  .hero-art{
    position:relative; aspect-ratio:1/1; border-radius:28px;
    background:
      radial-gradient(circle at 30% 25%, var(--blue-tint), transparent 60%),
      radial-gradient(circle at 75% 70%, var(--pink-tint), transparent 55%),
      var(--violet-tint);
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--line);
    overflow:hidden;
  }
  .hero-art .stage{
    position:relative; width:86%; aspect-ratio:3/2; border-radius:26px;
    background:#0B0A16; overflow:hidden;
    box-shadow:0 30px 70px rgba(60,30,140,0.28), 0 0 0 1px rgba(255,255,255,0.06) inset;
  }
  .hero-art .stage video{width:100%; height:100%; object-fit:cover; display:block;}
  .hero-art .stage{transition:transform .35s cubic-bezier(.2,.8,.2,1);}
  .hero-art .blob{position:absolute; border-radius:50%; opacity:.5; filter:blur(2px);}

  .marquee{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:14px;}
  .marquee .track{display:flex; gap:0; width:max-content; animation:scroll 32s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .marquee .track{animation:none;} }
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  .marquee span{font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:16px; letter-spacing:0.04em; color:var(--ink-soft); white-space:nowrap;}

  .bento a.tile{
    position:relative; display:flex; flex-direction:column; justify-content:flex-end;
    text-decoration:none; border-radius:20px; padding:20px; min-height:222px;
    border:1.5px solid var(--line); background-color:var(--tintc);
    background-size:cover; background-position:center;
    overflow:hidden; isolation:isolate;
    transition:transform .15s;
  }
  .bento a.tile::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(10,8,22,.12) 0%, rgba(10,8,22,.48) 55%, rgba(10,8,22,.9) 100%);
  }
  .bento a.tile .ic-badge{
    position:absolute; top:18px; left:18px; width:42px; height:42px; border-radius:13px;
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
  }
  .bento a.tile .ic-badge img{width:100%; height:100%; object-fit:contain; border-radius:13px;}
  .bento a.tile .ic{width:22px; height:22px; display:block;}
  .bento a.tile h3{font-size:17px; color:#fff;}
  .bento a.tile p{font-size:13.5px; margin-top:6px; color:rgba(255,255,255,.85);}
  .bento a.tile .go{font-family:'IBM Plex Mono',monospace; font-size:11.5px; margin-top:14px; display:inline-block; color:#fff;}
  @media (max-width:640px){ .bento a.tile{min-height:190px;} }

  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:26px; flex-wrap:wrap;}
  .section-head h2{font-size:clamp(26px,3.4vw,38px);}

  footer{
    border-top:1px solid var(--line); margin-top:40px; padding-block:34px;
  }
  footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center;}
  footer p{font-size:12.5px; font-family:'IBM Plex Mono',monospace;}

  table.price{width:100%; border-collapse:collapse;}
  table.price th, table.price td{
    text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); font-size:14px;
  }
  table.price th{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); font-weight:600;}
  table.price td.n{font-family:'IBM Plex Mono',monospace;}
  .tablewrap{overflow-x:auto;}

  .steps{counter-reset:step; display:grid; gap:14px;}
  .step{display:flex; gap:16px; align-items:flex-start;}
  .step .badge{
    counter-increment:step; content:counter(step);
    flex:0 0 auto; width:30px; height:30px; border-radius:50%;
    background:var(--ink); color:var(--bg); display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:13px;
  }
  .step .badge::before{content:counter(step);}

  .worldcard{border-radius:18px; overflow:hidden; border:1.5px solid var(--line); background:rgba(var(--panel-rgb),.8); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);}
  .worldcard img{width:100%; height:150px; object-fit:cover; display:block;}
  .worldcard .wc-body{padding:16px 18px;}
  .worldcard h3{font-size:16px;}
  .worldcard .meta{display:flex; justify-content:space-between; margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft);}

  .dodex-ticker{
    position:relative; overflow:hidden; border-radius:16px; padding-block:18px;
    background:linear-gradient(120deg, rgba(140,54,226,.07), rgba(47,107,255,.06) 50%, rgba(255,61,138,.06));
    border:1px solid var(--line);
    -webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  }
  .dodex-ticker .track{display:flex; gap:12px; width:max-content; animation:dodexScroll 36s linear infinite;}
  .dodex-ticker .track .seg{display:flex; gap:12px; flex:0 0 auto;}
  .dodex-ticker:hover .track{animation-play-state:paused;}
  .dodex-ticker .t{
    font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:13px; letter-spacing:.03em;
    padding:8px 18px 8px 8px; border-radius:100px; background:var(--bg-panel); border:1px solid var(--line);
    display:inline-flex; align-items:center; gap:9px; white-space:nowrap; color:var(--ink);
    box-shadow:0 2px 10px rgba(20,10,50,.06);
  }
  .dodex-ticker .t img{width:22px; height:22px; border-radius:50%; object-fit:cover; background:#fff; flex:0 0 auto; box-shadow:0 0 0 1px var(--line);}
  @keyframes dodexScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){
    .dodex-ticker{-webkit-mask-image:none; mask-image:none; overflow-x:auto;}
    .dodex-ticker .track{animation:none; flex-wrap:wrap; width:auto;}
    .dodex-ticker .track .seg.dupe{display:none;}
  }

  /* ---- branded feature panels (DODEX / DO WALLET): real site imagery as backdrop ---- */
  .feature-panel{
    position:relative; overflow:hidden; isolation:isolate; color:#fff;
    background-size:cover; background-position:center; border-color:transparent;
  }
  .feature-panel::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(160deg, rgba(8,6,18,.42) 0%, rgba(8,6,18,.8) 100%);
  }
  .feature-panel h3{color:#fff;}
  .feature-panel p{color:rgba(255,255,255,.86);}
  .feature-panel .chip:not(.on){background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); color:#fff;}
  .feature-panel .chip.on{background:#fff; color:#15121F; border-color:#fff;}
  .feature-panel .stat{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
  .feature-panel .stat .l{color:rgba(255,255,255,.72);}
  .feature-panel .mono{color:rgba(255,255,255,.7) !important;}
  .feature-panel .brand-badge{
    position:absolute; top:28px; right:28px; width:48px; height:48px; border-radius:14px;
    overflow:hidden; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .feature-panel .brand-badge img{width:100%; height:100%; object-fit:cover; display:block;}
  .feature-panel.wallet{background:linear-gradient(120deg, #2A1744 0%, #171020 72%);}
  .feature-panel.docorp::before{background:linear-gradient(160deg, rgba(8,6,4,.62) 0%, rgba(6,5,3,.88) 100%);}
  .feature-panel.docorp .chip.on{background:#D4A94A; color:#241A05; border-color:#D4A94A;}
  .feature-panel.docorp .chip:not(.on){background:rgba(212,169,74,.14); border-color:rgba(212,169,74,.4); color:#F0DFAF;}
  .chain-scatter{position:absolute; inset:0; z-index:-1; overflow:hidden;}
  .chain-scatter img{position:absolute; opacity:.3; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));}

  /* ---- Social DoMisfits panel: exact palette lifted live from social.domisfits.com's own sign-in screen ---- */
  .feature-panel.social{background: radial-gradient(at 60% 40%, #1F0C31 0%, #0D0915 50%, #08070D 100%);}
  .social-glow{position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:inherit;}
  .social-glow span{position:absolute; border-radius:50%; filter:blur(40px);}
  .social-glow .g1{width:220px; height:220px; top:8%; left:8%; background:radial-gradient(circle, rgba(128,32,223,.5) 0%, transparent 70%);}
  .social-glow .g2{width:190px; height:190px; bottom:6%; right:10%; background:radial-gradient(circle, rgba(168,34,195,.42) 0%, transparent 70%);}
  .feature-panel.social .social-logo{width:190px; height:auto; display:block; margin-bottom:20px; filter:drop-shadow(0 10px 26px rgba(153,77,230,.4)); transform:translateZ(40px);}
  .feature-panel.social .chip.on{background:linear-gradient(135deg, #8C36E2 0%, #AC26D9 100%); color:#fff; border-color:transparent;}
  .btn.social-cta{background:linear-gradient(135deg, #8C36E2 0%, #AC26D9 100%); border-color:transparent;}
  .btn.social-cta:hover{filter:brightness(1.08);}
  @media (max-width:640px){ .feature-panel .brand-badge{width:38px; height:38px; top:20px; right:20px;} }

  .placeholder-panel{
    border:1.5px dashed var(--line); border-radius:22px; padding:50px 32px;
    text-align:center; background:rgba(var(--panel-rgb),.8);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  }
  .placeholder-panel .icon{
    width:56px; height:56px; border-radius:16px; background:var(--tintc,var(--violet-tint));
    display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
  }

  form.contact{display:grid; gap:14px; max-width:440px;}
  form.contact label{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); display:block; margin-bottom:6px;}
  form.contact input, form.contact textarea{
    width:100%; border:1.5px solid var(--line); background:var(--bg); border-radius:12px;
    padding:11px 13px; font-family:inherit; font-size:14px; color:var(--ink);
  }
  form.contact input:focus, form.contact textarea:focus{border-color:var(--violet);}

  /* ---- Contact page: typewriter headline + email chip ---- */
  .type-line .caret{
    display:inline-block; width:3px; height:0.85em; background:currentColor; margin-left:3px;
    vertical-align:-0.05em; animation:caretBlink .9s steps(1) infinite; border-radius:1px;
  }
  @keyframes caretBlink{ 50%{opacity:0;} }
  .section-head .subline{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:16px; }
  .email-chip{
    display:inline-flex; align-items:center; gap:7px; margin-left:2px;
    padding:8px 16px; border-radius:100px; color:#fff; text-decoration:none;
    font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:13.5px; letter-spacing:.02em;
    background:linear-gradient(135deg, var(--blue) 0%, var(--pink) 55%, var(--violet) 100%);
    background-size:180% 180%;
    box-shadow:0 8px 20px rgba(122,59,255,.28);
    opacity:0; transform:translateY(6px) scale(.92);
    transition:opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.34,1.56,.64,1), background-position .6s ease;
  }
  .email-chip.show{ opacity:1; transform:translateY(0) scale(1); }
  .email-chip:hover{ background-position:100% 100%; box-shadow:0 10px 26px rgba(122,59,255,.4); }
  @media (prefers-reduced-motion: reduce){
    .type-line .caret{ animation:none; opacity:0; }
    .email-chip{ transition:opacity .3s ease; }
  }

  /* ---- Contact page: "how we work" process timeline ---- */
  .process{ list-style:none; margin:20px 0 0; padding:0; position:relative; }
  .process::before{
    content:''; position:absolute; left:20px; top:8px; bottom:8px; width:2px; border-radius:2px;
    background:linear-gradient(to bottom, var(--blue), var(--pink), var(--violet), var(--amber), var(--cyan), var(--pink));
    opacity:.4;
  }
  .process-step{
    position:relative; display:flex; gap:18px; padding-bottom:26px;
    opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease;
    transition-delay:calc(var(--i,0)*110ms);
  }
  .process-step:last-child{ padding-bottom:0; }
  .process-panel.in-view .process-step{ opacity:1; transform:translateY(0); }
  .process-dot{
    position:relative; z-index:1; flex:0 0 auto; width:41px; height:41px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.6), transparent 55%), var(--accent);
    box-shadow:0 0 0 6px var(--bg-panel), 0 6px 16px rgba(20,10,50,.18);
  }
  .process-dot svg{ width:18px; height:18px; display:block; }
  .process-body{ padding-top:2px; }
  .process-body h4{ font-size:15.5px; margin:0 0 4px; }
  .process-body p{ font-size:13.5px; color:var(--ink-soft); margin:0; max-width:36ch; line-height:1.5; }
  .process-panel .lede-sm{ color:var(--ink-soft); margin-top:8px; font-size:14px; }
  @media (prefers-reduced-motion: reduce){
    .process-step{ opacity:1; transform:none; transition:none; }
  }
  @media (max-width:640px){
    .process-body p{ max-width:none; }
  }

  .tab-link{text-decoration:none; display:inline-block;}