/* Soulo AI v2 homepage — 7-screen deck (loaded after /styles.css) */
body.v2 .hdr{border-bottom:0}
html.deck-on body.v2 .deck>.slide{position:absolute!important;left:0;right:0;height:100%!important;min-height:0!important;margin:0;box-sizing:border-box;overscroll-behavior:contain}
html.deck-on body.v2 #home{top:0!important}
html.deck-on body.v2 #platform{top:100%!important}
html.deck-on body.v2 #api{top:200%!important}
html.deck-on body.v2 #ai-production{top:300%!important}
html.deck-on body.v2 #about{top:400%!important}
html.deck-on body.v2 #faq{top:500%!important}
html.deck-on body.v2 #contact{top:600%!important}
/* mockup screens were standalone pages: no internal scroll on desktop */
html.deck-on body.v2 .slide.scr{overflow:hidden}

/* stepped reveal (Products 01 / 02): hidden items keep their place in the layout */
html.deck-on body.v2 [data-step]{opacity:0;transform:translate3d(0,34px,0);transition:opacity .75s var(--ease-out),transform .95s var(--ease-out);will-change:opacity,transform}
html.deck-on body.v2 [data-step].shown{opacity:1;transform:none}
html.deck-on body.v2 .slide.entering [data-step].shown{transition-delay:.35s}
@media (prefers-reduced-motion:reduce){html.deck-on body.v2 [data-step]{transition-duration:.01s!important;transition-delay:0s!important;transform:none}}

/* contact: HubSpot form inside the mockup's card */
#contact .hs-wrap{background:#fff;border-radius:12px;padding:20px 22px;color:#172033;min-height:120px}
#contact .formcard .fnote{margin-bottom:14px}

/* ---------- narrow screens: stack the locked layouts, screens scroll inside ---------- */
@media (max-width:860px){
  html.deck-on body.v2 .slide.scr{overflow-y:auto;overflow-x:hidden}
  body.v2 .slide.scr{padding:calc(var(--hdr) + 16px) 34px 32px 22px!important;height:100%}
  body.v2 #platform .wrap,body.v2 #api .wrap,body.v2 #ai-production .wrap,body.v2 #contact .wrap{grid-template-columns:1fr!important;gap:28px!important}
  body.v2 #platform .viz{max-width:420px;order:2}
  body.v2 #platform .copy .title{font-size:clamp(2rem,8.6vw,2.6rem)}
  body.v2 #platform .entries{grid-template-columns:1fr}
  body.v2 #api .title,body.v2 #ai-production .title{white-space:normal;font-size:clamp(2.2rem,10vw,3rem)}
  body.v2 #api .two{grid-template-columns:1fr}
  body.v2 #api .eps{max-width:260px}
  body.v2 #api .blk p .keep{white-space:normal}
  body.v2 #api .blk{padding:22px 20px}
  body.v2 #ai-production .tiles{grid-template-columns:1fr 1fr;gap:12px;order:2}
  body.v2 #ai-production .tile{min-height:0;padding:18px}
  body.v2 #faq .qa p{padding-left:22px}
  body.v2 #contact .foot nav{margin-left:0}
}
@media (max-width:420px){body.v2 #ai-production .tiles{grid-template-columns:1fr}}
/* the live HubSpot form is taller than the mockup form: Contact scrolls inside its screen */
html.deck-on body.v2 #contact{overflow-y:auto!important;overflow-x:hidden}
/* hero without eyebrow: headline + lede + link, vertically centred (original h1 bottom margin) */
body.v2 #home h1{margin:0 0 34px}

/* Platform */
#platform{height:100%;box-sizing:border-box;padding:calc(var(--hdr) + 20px) var(--pad) 20px;display:flex;overflow:hidden}
#platform .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center;margin:auto;max-width:1240px;width:100%}
#platform .copy{max-width:35rem}
#platform .copy .eyebrow{margin:0}
#platform .copy .title{font-size:clamp(2.3rem,3.9vw,3.35rem);line-height:1.06;letter-spacing:-.035em;font-weight:600;color:var(--ink);margin:0 0 22px}
#platform .copy .body{font-size:16.5px;line-height:1.68;color:var(--text);margin:0}
#platform .copy .quiet{margin:18px 0 0;font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:12px}
#platform .copy .quiet::before{content:"";width:22px;height:1px;background:#e7cdb6}
#platform .entries{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
#platform .entry{display:flex;align-items:center;gap:14px;padding:14px 16px 14px 18px;border-radius:16px;text-decoration:none;color:var(--ink);
    background:rgba(255,255,255,.58);border:1px solid rgba(239,230,220,.95);
    -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(60,30,10,.03),0 10px 28px -12px rgba(60,30,10,.10)}
#platform .entry .num{font-size:11px;letter-spacing:.2em;color:var(--accent-strong);font-weight:600}
#platform .entry .txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
#platform .entry .name{font-size:15px;font-weight:600;letter-spacing:-.01em}
#platform .entry .sub{font-size:12.5px;color:var(--muted)}
#platform .entry .go{width:30px;height:30px;border-radius:999px;border:1px solid #fed7aa;background:var(--tint);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
#platform .viz{position:relative;width:100%;max-width:610px;aspect-ratio:1/1;margin:0 auto;justify-self:center}
#platform .viz svg.links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#platform .viz .halo{position:absolute;left:50%;top:50%;width:78%;height:78%;transform:translate(-50%,-50%);border-radius:50%;
    background:radial-gradient(closest-side,rgba(251,146,60,.26),rgba(253,186,116,.12) 55%,rgba(253,186,116,0));filter:blur(18px)}
#platform .viz .grid{position:absolute;inset:-4%;background-image:radial-gradient(rgba(31,27,24,.13) 1px,transparent 1.3px);background-size:22px 22px;
    -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 100%);mask-image:radial-gradient(closest-side,#000 30%,transparent 100%);opacity:.8}
#platform .tile{position:absolute;transform:translate(-50%,-50%);border-radius:20px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,250,244,.62));border:1px solid rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
    box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(239,230,220,.7),0 2px 6px rgba(120,60,20,.05),0 22px 44px -16px rgba(120,60,20,.22);
    animation:float 9s ease-in-out infinite}
#platform .tile svg{width:58%;height:58%}
#platform .tile::after{content:"";position:absolute;right:10px;top:10px;width:6px;height:6px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.16),0 0 10px rgba(245,158,11,.7)}
#platform .core{position:absolute;left:50%;top:50%;width:25%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:30px;
    background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,241,230,.78));border:1px solid rgba(253,186,116,.75);
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    box-shadow:inset 0 1px 0 #fff,0 0 0 8px rgba(255,237,213,.55),0 0 0 9px rgba(253,186,116,.35),0 30px 60px -18px rgba(234,88,12,.42),0 0 80px rgba(251,146,60,.35);
    display:flex;align-items:center;justify-content:center}
#platform .core svg{width:56%;height:56%}
#platform .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:44px;border:1px dashed rgba(234,88,12,.28);width:37%;aspect-ratio:1;animation:spin 60s linear infinite}
#platform .ring.o{width:52%;border-radius:60px;border:1px solid rgba(234,88,12,.10);animation-duration:90s;animation-direction:reverse}
@keyframes float{0%,100%{margin-top:0}50%{margin-top:-6px}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#platform .tile,#platform .ring{animation:none}}
/* Products 01 */
#api{height:100%;box-sizing:border-box;padding:calc(var(--hdr) + 20px) var(--pad) 20px;display:flex;overflow:hidden}
#api .wrap{position:relative;z-index:1;display:grid;gap:clamp(32px,4.5vw,72px);align-items:center;margin:auto;max-width:1240px;width:100%}
#api .glow{position:absolute;pointer-events:none;border-radius:50%;z-index:0;filter:blur(30px)}
#api .eyebrow{margin:0;display:flex;align-items:center;gap:14px}
#api .eyebrow b{color:var(--accent-strong);font-weight:600}
#api .eyebrow::after{content:"";width:36px;height:1px;background:#e7cdb6}
#api .title{font-size:clamp(2.4rem,4.2vw,3.6rem);line-height:1.04;letter-spacing:-.035em;font-weight:600;color:var(--ink);margin:20px 0 18px;white-space:nowrap}
#api .lede{font-size:18px;line-height:1.55;color:var(--ink);margin:0;max-width:31rem}
#api .body{font-size:16px;line-height:1.7;color:var(--text);margin:16px 0 0;max-width:30rem}
#api .quiet{margin:22px 0 0;font-size:13.5px;color:var(--muted)}
#api .act{margin-top:30px;display:flex;align-items:center;gap:22px}
#api .act .btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:12px 24px}
#api .glass{position:relative;border-radius:20px;overflow:visible;
    background:linear-gradient(165deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.38) 45%,rgba(255,255,255,.28) 100%);
    border:1px solid rgba(255,255,255,.78);
    -webkit-backdrop-filter:blur(40px) saturate(140%);backdrop-filter:blur(40px) saturate(140%);
    box-shadow:inset 0 1px 1.5px rgba(255,255,255,.92),inset 0 -1px 0 rgba(255,255,255,.28),
      0 0 0 .5px rgba(255,255,255,.35),0 12px 40px -14px rgba(120,60,20,.18),0 2px 6px rgba(120,60,20,.05)}
#api .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    opacity:.07;mix-blend-mode:soft-light;background:url(glass-noise.png) repeat;background-size:180px}
#api .glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 36%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
#api .glass>*{position:relative;z-index:1}
#api .ic{width:44px;height:44px;border-radius:12px;background:var(--tint);border:1px solid #fed7aa;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
#api .ic svg{width:22px;height:22px}
#api .wrap{grid-template-columns:max-content 700px;gap:56px;justify-content:start}
#api .stack{display:flex;flex-direction:column;gap:20px}
#api .blk{padding:28px 30px 28px}
#api .bh{display:flex;align-items:center;gap:14px;margin:0 0 14px}
#api .bh h3{font-size:1.22rem;letter-spacing:-.02em;font-weight:600;margin:0;color:var(--ink);line-height:1.2}
#api .blk p{font-size:14.5px;line-height:1.78;color:var(--text);margin:0;max-width:38rem}
#api .chiprow{display:flex;align-items:center;gap:10px;margin-top:22px}
#api .chiprow + .chiprow{margin-top:14px}
#api .cl{width:44px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
#api .chips{display:flex;flex-wrap:wrap;gap:7px}
#api .chip{font-size:12.5px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:6px 13px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#api .chip.v{background:var(--tint);border-color:#fed7aa;color:var(--accent-strong)}
#api .two{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:18px;align-items:center}
#api .blk p .keep{white-space:nowrap}
#api .eps{display:flex;gap:8px}
#api .ep{flex:1;border-radius:10px;aspect-ratio:9/14;position:relative;overflow:hidden;background:#f3eee6;border:1px solid #fed7aa}
#api .ep img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
#api .ep::after{content:"";position:absolute;inset:0 0 auto;height:32%;background:linear-gradient(180deg,rgba(246,239,230,.82),rgba(246,239,230,0));pointer-events:none;z-index:1}
#api .ep span{position:absolute;left:6px;top:6px;z-index:2;font-size:9px;letter-spacing:.14em;color:var(--accent-strong);font-weight:600}
#api .thread{height:1px;margin:10px 4px 0;background:linear-gradient(90deg,#f97316,#f59e0b);opacity:.6;position:relative}
#api .thread::before,#api .thread::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,.8)}
#api .thread::before{left:0}
#api .thread::after{right:0}
/* Products 02 */
#ai-production{height:100%;box-sizing:border-box;padding:calc(var(--hdr) + 20px) var(--pad) 20px;display:flex;overflow:hidden}
#ai-production .wrap{position:relative;z-index:1;display:grid;gap:clamp(36px,4vw,64px);align-items:center;margin:auto;max-width:1240px;width:100%}
#ai-production .glow{position:absolute;pointer-events:none;border-radius:50%;z-index:0;filter:blur(30px)}
#ai-production .eyebrow{margin:0;display:flex;align-items:center;gap:14px}
#ai-production .eyebrow b{color:var(--accent-strong);font-weight:600}
#ai-production .eyebrow::after{content:"";width:36px;height:1px;background:#e7cdb6}
#ai-production .title{font-size:clamp(2.4rem,4.2vw,3.6rem);line-height:1.04;letter-spacing:-.035em;font-weight:600;color:var(--ink);margin:20px 0 18px;white-space:nowrap}
#ai-production .lede{font-size:18px;line-height:1.55;color:var(--ink);margin:0;max-width:31rem}
#ai-production .act{margin-top:30px;display:flex;align-items:center;gap:22px}
#ai-production .act .btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:12px 24px}
#ai-production .glass{position:relative;border-radius:20px;overflow:visible;
    background:linear-gradient(165deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.38) 45%,rgba(255,255,255,.28) 100%);
    border:1px solid rgba(255,255,255,.78);
    -webkit-backdrop-filter:blur(40px) saturate(140%);backdrop-filter:blur(40px) saturate(140%);
    box-shadow:inset 0 1px 1.5px rgba(255,255,255,.92),inset 0 -1px 0 rgba(255,255,255,.28),
      0 0 0 .5px rgba(255,255,255,.35),0 12px 40px -14px rgba(120,60,20,.18),0 2px 6px rgba(120,60,20,.05)}
#ai-production .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    opacity:.07;mix-blend-mode:soft-light;background:url(glass-noise.png) repeat;background-size:180px}
#ai-production .glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 36%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
#ai-production .glass>*{position:relative;z-index:1}
#ai-production .ic{width:44px;height:44px;border-radius:12px;background:var(--tint);border:1px solid #fed7aa;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
#ai-production .ic svg{width:22px;height:22px}
#ai-production .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
#ai-production .tiles{display:grid;grid-template-columns:1fr 1fr;gap:18px;position:relative}
#ai-production .tile{padding:26px 26px 28px;display:flex;flex-direction:column;gap:16px;min-height:200px;box-sizing:border-box}
#ai-production .tile h3{font-size:1.08rem;letter-spacing:-.02em;font-weight:600;margin:4px 0 0;color:var(--ink)}
#ai-production .tile p{font-size:14.5px;line-height:1.7;color:var(--text);margin:0}
#ai-production .tile .top{display:flex;align-items:center}
#ai-production .copy{padding-left:4px}
#ai-production .quiet{margin:22px 0 0;font-size:13.5px;color:var(--muted)}
/* FAQ */
#faq{height:100%;box-sizing:border-box;padding:calc(var(--hdr) + 28px) var(--pad) 24px;display:flex;flex-direction:column;align-items:center;overflow:hidden;isolation:isolate}
#faq .glow{position:absolute;pointer-events:none;border-radius:50%;z-index:0;filter:blur(70px)}
#faq .top{position:relative;z-index:1;text-align:center;margin-bottom:30px}
#faq .eyebrow{margin:0;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);font-weight:500}
#faq .title{font-size:clamp(2.2rem,3.6vw,3.1rem);line-height:1.06;letter-spacing:-.035em;font-weight:600;color:var(--ink);margin:14px 0 0}
#faq .list{position:relative;z-index:1;width:100%;max-width:760px;display:flex;flex-direction:column;gap:10px}
#faq .qa{border-radius:14px;background:rgba(255,255,255,.66);border:1px solid rgba(160,110,70,.14);box-shadow:0 10px 30px -20px rgba(140,80,30,.25);backdrop-filter:blur(14px);transition:background .2s}
#faq .qa[open]{background:rgba(255,255,255,.86)}
#faq .qa summary{list-style:none;display:flex;align-items:center;gap:16px;padding:16px 22px;cursor:pointer}
#faq .qa summary::-webkit-details-marker{display:none}
#faq .qa .n{font-size:12px;color:#ea7a2a;font-weight:600;letter-spacing:.06em;width:20px}
#faq .qa .q{flex:1;font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
#faq .qa .pm{position:relative;width:14px;height:14px;flex-shrink:0}
#faq .qa .pm::before,#faq .qa .pm::after{content:"";position:absolute;left:0;right:0;top:6px;height:1.6px;background:#b9895f;border-radius:2px;transition:transform .25s}
#faq .qa .pm::after{transform:rotate(90deg)}
#faq .qa[open] .pm::after{transform:rotate(0)}
#faq .qa p{margin:0;padding:0 22px 18px 58px;font-size:14px;line-height:1.6;color:var(--text)}
/* Contact */
#contact{height:100%;box-sizing:border-box;padding:calc(var(--hdr) + 16px) var(--pad) 16px;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
#contact .glow{position:absolute;pointer-events:none;border-radius:50%;z-index:0;filter:blur(70px)}
#contact .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start;margin:auto 0 auto;max-width:1240px;width:100%;flex:1;padding-top:8px}
#contact .c-title{font-size:clamp(2.4rem,4.2vw,3.8rem);margin:16px 0 14px;font-weight:600;letter-spacing:-.035em}
#contact .c-lead{font-size:15.5px;max-width:42ch;margin-bottom:26px;color:var(--text);line-height:1.6}
#contact .eyebrow{margin:0}
#contact .foot{position:relative;z-index:1;width:100%;max-width:1240px;margin:18px auto 0;border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px 32px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);line-height:1.6;flex-shrink:0}
#contact .foot p{max-width:62ch;font-size:10.5px;line-height:1.6;margin:0;color:var(--muted)}
#contact .foot nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:0;white-space:nowrap;align-items:flex-start;font-size:11.5px}
#contact .foot nav a{color:var(--muted);text-decoration:none}
#contact .foot nav a:hover{color:var(--ink)}
#contact .foot nav .sep{margin:0 8px;color:#c4b8ac;user-select:none}