/* The home page (index.html). The shared header, footer and the Figtree typeface come from chrome.css, which
 * the build links into every page; --u (one pixel of the 1536-px design space) is defined there. */
:root{
  --ink:#0a0b2e; --ink-2:#14163a; --text:#2c2f4a; --muted:#4c4f63; --muted-2:#6c6f82;
  --blue:#0050fd; --blue-hover:#0042d9; --eyebrow:#2f5fcb;
  --violet:#5a43df; --violet-soft:#efecfd;
  --mint:#5cc2a9; --mint-ink:#178069; --mint-soft:#e5f6f1;
  --indigo:#4a51de; --indigo-soft:#eceefd;
  --cream:#fefdf9; --cream-2:#f8f5ee; --paper:#ffffff; --line:#ebe8e0; --line-2:#e6e5e0;
  --grad:linear-gradient(90deg,#2a17f6 0%,#1d12f8 28%,#0838fb 55%,#0262fd 100%);
  --shadow:0 1px 2px rgba(10,11,46,.05),0 22px 48px -26px rgba(10,11,46,.30);
  --shadow-lg:0 2px 6px rgba(10,11,46,.05),0 40px 80px -40px rgba(10,11,46,.38);
  --art:url("/assets/home/hero.webp");
}
/* Desktop gets the full 3072-px render (sharp on high-density screens); phones and tablets keep the 2000-px copy. */
@media (min-width:1100px){:root{--art:url("/assets/home/hero-3072.webp")}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p{margin:0}
h2,h3{text-wrap:balance}
:focus-visible{outline:3px solid #8fb0ff;outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px}
.skip:focus{top:12px}
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.08em}
.eyebrow{font-weight:600;text-transform:uppercase;letter-spacing:.24em;color:var(--eyebrow)}

.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:999px;font-weight:600;border:0;transition:background-color .15s ease,box-shadow .15s ease,transform .15s ease,border-color .15s ease}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 18px -10px rgba(0,80,253,.75)}
.btn-primary:hover{background:var(--blue-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-outline{background:rgba(255,255,255,.92);color:var(--ink);border:1px solid #d6d9e2}
.btn-outline:hover{border-color:#aeb5c8;background:#fff}

/* ───────── First screen (hero + workspace band) ───────── */
.stage{position:relative;aspect-ratio:1536/1024;overflow:hidden;background:var(--cream)}
.art{position:absolute;inset:0;background:var(--art) center top/100% auto no-repeat}
.wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wave-m{display:none}
.hero-copy{position:absolute;left:calc(89 * var(--u));top:calc(118 * var(--u));width:calc(660 * var(--u))}
.hero-copy .eyebrow{font-size:max(12px,calc(14 * var(--u)));line-height:1.2;letter-spacing:.158em}
.hero-copy h1{margin-top:calc(9 * var(--u));font-size:calc(74 * var(--u));line-height:.95;font-weight:800;letter-spacing:-.0467em;color:#030330}
.hero-copy h1 .grad{letter-spacing:-.0384em;margin-left:calc(-2.5 * var(--u))}
.lede{margin-top:calc(13 * var(--u));font-size:max(16px,calc(20.4 * var(--u)));line-height:calc(29 * var(--u));font-weight:500;color:#12122e;letter-spacing:-.003em}
.cta-row{margin-top:calc(21.5 * var(--u));display:flex;flex-wrap:wrap;gap:calc(16 * var(--u))}
.btn-lg{height:max(44px,calc(50 * var(--u)));font-size:max(15px,calc(16.5 * var(--u)));padding:0 calc(28 * var(--u)) 0 calc(31 * var(--u));gap:calc(9 * var(--u))}
.btn-lg .ico{font-size:1.1em;stroke-width:2.1}
.btn-video{font-weight:500;font-size:max(15px,calc(15.2 * var(--u)));gap:calc(13 * var(--u));padding:0 calc(24 * var(--u)) 0 calc(22 * var(--u))}
.play{width:calc(21 * var(--u));height:calc(21 * var(--u));min-width:18px;min-height:18px;border-radius:50%;border:2px solid #1f55dd;display:grid;place-items:center}
.play::after{content:"";width:0;height:0;border-style:solid;border-width:.3em 0 .3em .5em;border-color:transparent transparent transparent #1f55dd;margin-left:.12em;font-size:max(14px,calc(17 * var(--u)))}
.tagline{margin-top:calc(16 * var(--u));font-size:max(13px,calc(14.4 * var(--u)));line-height:1.45;color:#4c4c59;letter-spacing:.002em}

.band-copy{position:absolute;left:calc(89 * var(--u));top:calc(864.5 * var(--u))}
.band-copy .eyebrow{font-size:max(12px,calc(14 * var(--u)));line-height:1.2;letter-spacing:.075em;color:#2b57c3}
.band-copy h2{margin-top:calc(12 * var(--u));font-size:calc(44 * var(--u));line-height:1.045;font-weight:700;letter-spacing:-.03em;color:#020112}
.pillars{position:absolute;left:calc(646.3 * var(--u));top:calc(958 * var(--u));transform:translateY(-50%);display:flex;align-items:center}
.pillar{display:flex;align-items:center;gap:calc(20 * var(--u));padding:calc(6 * var(--u)) calc(28.75 * var(--u));font-size:max(15px,calc(18 * var(--u)));font-weight:500;color:#1f1f39;border-radius:14px;transition:background-color .15s ease,color .15s ease}
.pillar:first-child{padding-left:0}
.pillar:hover{color:var(--blue)}
.pillar .ico{width:calc(44 * var(--u));height:calc(44 * var(--u));stroke-width:1.6}
.p-collab .ico{color:var(--violet)}
.p-create .ico{color:var(--mint)}
.p-operate .ico{color:var(--indigo)}
.sep{width:1px;height:calc(42 * var(--u));background:var(--line-2)}

/* ───────── Sections ───────── */
.wrap{width:min(1356px,100% - 2 * clamp(20px,5.86vw,90px));margin-inline:auto}
.section{padding-block:clamp(72px,8.5vw,128px);scroll-margin-top:56px}
.section-head{max-width:760px}
.section-head .eyebrow{font-size:13px;display:flex;align-items:center;gap:10px}
.section-head h2{margin-top:14px;font-size:clamp(34px,3.6vw,52px);line-height:1.06;font-weight:700;letter-spacing:-.032em;color:var(--ink)}
.section-head p.intro{margin-top:18px;font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--text);max-width:620px}
.center{text-align:center;margin-inline:auto}
.center .eyebrow{justify-content:center}
.center p.intro{margin-inline:auto;text-wrap:balance}

.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(40px,6vw,96px);align-items:center}
.feature.flip .feature-copy{order:2}
.feature-copy .eyebrow .ico{font-size:22px;stroke-width:1.9}
.e-collab{color:var(--violet)} .e-create{color:var(--mint-ink)} .e-operate{color:var(--indigo)}
.points{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:18px}
.points li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.tile{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px}
.t-collab{background:var(--violet-soft);color:var(--violet)}
.t-create{background:var(--mint-soft);color:var(--mint-ink)}
.t-operate{background:var(--indigo-soft);color:var(--indigo)}
.points h3{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin-top:1px}
.points p{margin-top:3px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.text-link{display:inline-flex;align-items:center;gap:8px;margin-top:30px;font-weight:600;color:var(--blue);font-size:16px}
.text-link .ico{transition:transform .15s ease;stroke-width:2.1}
.text-link:hover .ico{transform:translateX(3px)}

.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;border:2px solid #fff;flex:none}
.av-a{background:#e2793f} .av-b{background:#3f8fd8}
.av-bot{background:linear-gradient(135deg,#3b2cf0,#0a6bff)}
.av-bot svg{width:17px;height:17px;stroke:#fff}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* Scenes: crops of the illustration with sample bubbles */
.scene{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:#f3efe6 center/cover no-repeat;box-shadow:var(--shadow-lg)}
.scene .scene-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(10,11,46,.06);pointer-events:none}
.say{position:absolute;z-index:1;display:flex;gap:10px;align-items:flex-start;max-width:min(80%,380px);padding:11px 15px 12px 11px;border-radius:16px;background:rgba(255,255,255,.97);box-shadow:0 14px 34px -14px rgba(10,11,46,.42);font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.say.agent{background:rgba(245,243,255,.98)}
.say b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:1px}
.say .av{width:28px;height:28px;font-size:11.5px;border:0;margin-top:1px}
.say .av-bot svg{width:16px;height:16px}
.js .say{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.js .scene.in .say{opacity:1;transform:none}
.js .scene.in .say.s2{transition-delay:1s}
@media (prefers-reduced-motion:reduce){.js .say{opacity:1;transform:none;transition:none}}

/* Ideas → Products → Impact */
.flow-band{background:linear-gradient(180deg,var(--cream) 0%,#f5f2ea 100%);border-block:1px solid #f0ece2}
.steps{--g:28px;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);margin-top:48px;padding-top:66px}
.path{position:absolute;left:49px;width:calc((200% + 2 * var(--g)) / 3);top:20px;height:3px;border-radius:3px;background:linear-gradient(90deg,#5aa8ff,#3b6dff 50%,#7c5cff);box-shadow:0 0 12px 2px rgba(64,126,255,.45),0 0 28px 6px rgba(64,126,255,.18)}
.path::after{content:"";position:absolute;top:-3px;left:0;width:60px;height:9px;border-radius:9px;background:radial-gradient(closest-side,#fff,rgba(255,255,255,0));animation:travel 4.5s linear infinite}
@keyframes travel{from{left:0}to{left:calc(100% - 60px)}}
.steps.four{grid-template-columns:repeat(4,1fr)}
.steps.four .path{width:calc((300% + 3 * var(--g)) / 4)}
.step{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:28px 28px 30px;box-shadow:var(--shadow)}
.step::before{content:"";position:absolute;left:48px;top:-25px;width:3px;height:25px;background:linear-gradient(180deg,rgba(64,126,255,.5),rgba(64,126,255,0))}
.node{position:absolute;top:-87px;left:28px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:#fff;background:linear-gradient(135deg,#3b2cf0,#0a6bff);box-shadow:0 0 0 6px #fff,0 0 22px 4px rgba(64,126,255,.45)}
.step small{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow)}
.step h3{margin-top:10px;font-size:22px;letter-spacing:-.02em;font-weight:700}
.step p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--muted)}

/* Solutions */
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:52px}
.sol{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.sol:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.sol-art{position:relative;overflow:hidden;aspect-ratio:16/10;background:radial-gradient(80% 90% at 50% 100%,#fff1dc 0%,#fdf6ea 45%,#f3f6ff 100%)}
.sol-art img{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);height:76%;width:auto;max-width:84%;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(80,60,20,.16))}
.sol-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.sol-body small{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--eyebrow)}
.sol-body h3{margin-top:10px;font-size:21px;line-height:1.25;letter-spacing:-.02em;font-weight:700}
.sol-body p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--muted);flex:1}
.sol-body .text-link{margin-top:18px;font-size:15px}

/* Customer story */
.proof{position:relative;margin:0;background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:clamp(28px,4.5vw,64px);box-shadow:var(--shadow);overflow:hidden}
.proof::before{content:"";position:absolute;right:-12%;top:-30%;width:55%;height:90%;background:radial-gradient(closest-side,rgba(255,214,150,.32),rgba(255,214,150,0));pointer-events:none}
.proof>*{position:relative}
.proof-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.proof-top .eyebrow{font-size:13px;white-space:nowrap}
.proof-logo{height:24px;width:auto}
.proof-quote{margin:30px 0 0}
.proof-quote::before{content:"\201C";display:block;height:50px;font-family:Georgia,"Times New Roman",serif;font-size:112px;line-height:.86;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.proof-quote p{max-width:1040px;font-size:clamp(22px,2.25vw,32px);line-height:1.34;font-weight:600;letter-spacing:-.018em;color:var(--ink);text-wrap:pretty}
.proof-cite{display:flex;flex-direction:column;gap:3px;margin-top:26px}
.proof-name{font-size:16px;font-weight:700;color:var(--ink)}
.proof-role{font-size:15px;color:var(--muted)}
.proof-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:42px;border-top:1px solid var(--line)}
.stat{padding:26px 28px 0 0}
.stat+.stat{padding-left:28px;border-left:1px solid var(--line)}
.stat b{display:block;font-size:clamp(28px,2.7vw,40px);line-height:1.1;font-weight:800;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.stat span{display:block;margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--muted)}

/* Pricing */
.price{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:clamp(28px,4.5vw,64px);box-shadow:var(--shadow)}
.price .big{margin-top:14px;font-size:clamp(30px,3vw,44px);line-height:1.1;font-weight:700;letter-spacing:-.03em}
.price p.intro{margin-top:16px;font-size:17px;line-height:1.6;color:var(--text)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{display:flex;align-items:center;gap:12px;font-size:16.5px;font-weight:500}
.checks .tile{width:30px;height:30px;border-radius:9px;font-size:15px;background:#e9efff;color:var(--blue)}
.checks .tile .ico{stroke-width:2.6}
.price .btn{margin-top:28px}

/* Final CTA */
.cta{position:relative;overflow:hidden;border-radius:32px;min-height:460px;display:flex;align-items:center;background:var(--art) 60% 50%/170% auto no-repeat;box-shadow:var(--shadow-lg)}
.cta::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(254,253,249,.98) 0%,rgba(254,253,249,.95) 40%,rgba(254,253,249,.5) 58%,rgba(254,253,249,0) 74%)}
.cta-inner{position:relative;padding:clamp(32px,5vw,72px);max-width:640px}
.cta .eyebrow{font-size:15px;text-transform:none;letter-spacing:.005em;font-weight:600}
.cta h2{margin-top:14px;font-size:clamp(36px,4vw,60px);line-height:1.02;font-weight:800;letter-spacing:-.04em}
.cta p{margin-top:16px;font-size:18px;line-height:1.55;color:var(--text);max-width:520px}
.cta .cta-row{margin-top:28px;gap:14px}
.cta .btn-lg{height:50px;font-size:17px;padding:0 24px;gap:9px}
.cta .btn-video{gap:12px;padding:0 24px 0 20px}

/* Video dialog */
dialog.video{width:min(520px,calc(100vw - 32px),calc((100dvh - 110px) * .8));max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:22px;background:#0a0b2e;color:#fff;box-shadow:0 40px 120px rgba(0,0,0,.45);overflow:hidden}
dialog.video::backdrop{background:rgba(8,10,40,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.video-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 14px 22px}
.video-head strong{font-size:16px}
.video-head small{display:block;font-size:12.5px;color:#aab0d6;margin-top:2px}
.x{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;font-size:18px}
.x:hover{background:rgba(255,255,255,.18)}
dialog.video .player{display:block;width:100%;aspect-ratio:864 / 1080;border:0;background:#05061a}

/* ───────── Tablet & mobile ───────── */
@media (max-width:1099px){

  .stage{aspect-ratio:auto;display:flex;flex-direction:column;overflow:visible}
  .hero-copy{position:relative;order:1;left:auto;top:auto;width:auto;padding:112px 20px 34px;background:linear-gradient(180deg,#e9f2fb 0%,#f6f6f2 55%,var(--cream) 100%)}
  .hero-copy h1{margin-top:14px;font-size:clamp(44px,10.2vw,76px);line-height:.98}
  .lede{margin-top:16px;font-size:clamp(17px,2.6vw,20px);max-width:560px}
  .br-d{display:none}
  .cta-row{margin-top:24px;gap:12px}
  .btn-lg{height:50px;font-size:16.5px;padding:0 22px;gap:9px}
  .btn-video{gap:12px}
  .play{width:21px;height:21px}
  .tagline{margin-top:18px;font-size:14px}
  .art{position:relative;order:2;inset:auto;height:clamp(300px,64vw,600px);background-size:auto 136%;background-position:66% 30%}
  .wave{display:none}
  .wave-m{display:block;position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(36px,9vw,70px)}
  .band{order:3;padding:10px 20px 8px}
  .band-copy{position:static}
  .band-copy .eyebrow{font-size:12.5px}
  .band-copy h2{margin-top:12px;font-size:clamp(30px,6.4vw,44px);line-height:1.08}
  .pillars{position:static;transform:none;margin-top:26px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px}
  .pillar,.pillar:first-child{flex-direction:column;justify-content:center;gap:8px;padding:12px 6px;font-size:15px;text-align:center}
  .pillar .ico{width:34px;height:34px}
  .sep{width:1px;height:auto;margin-block:10px}

  .feature,.feature.flip{grid-template-columns:1fr}
  .feature.flip .feature-copy{order:0}
  .steps,.steps.four{grid-template-columns:1fr;margin-top:36px;padding-top:0;gap:18px}
  .steps.four .path{width:3px}
  .path{left:20px;width:3px;top:30px;bottom:30px;height:auto;background:linear-gradient(180deg,#5aa8ff,#3b6dff 50%,#7c5cff)}
  .path::after{display:none}
  .step{margin-left:44px;padding:24px 22px 26px}
  .step::before{display:none}
  .node{top:22px;left:-45px;width:34px;height:34px;font-size:17px;box-shadow:0 0 0 5px var(--cream),0 0 18px 3px rgba(64,126,255,.4)}
  .sol-grid{grid-template-columns:1fr;max-width:620px;margin-inline:auto}
  .price{grid-template-columns:1fr}
  .proof-stats{grid-template-columns:1fr}
  .stat,.stat+.stat{padding:22px 0 0;border-left:0}
  .stat+.stat{margin-top:22px;border-top:1px solid var(--line)}
  .proof-logo{height:20px}
  .cta{min-height:0;background-size:auto 150%;background-position:72% 40%}
  .cta::before{background:linear-gradient(180deg,rgba(254,253,249,.97) 0%,rgba(254,253,249,.93) 62%,rgba(254,253,249,.6) 100%)}
}
@media (max-width:520px){
  .say{font-size:13px;max-width:88%;padding:9px 12px 10px 9px;gap:8px}
  .say b{font-size:11.5px}
  .say .av{width:24px;height:24px;font-size:10px}
  .cta-row .btn{flex:1 1 100%}
}