/* ============ Studio Boole — shared styles ============ */
:root{
  --ink:#1d1d1f;--ink-2:#2d2d30;--ink-3:#3a3a3c;
  --cream:#ffffff;--paper:#ffffff;--soft:#f5f5f7;
  --violet:#0071e3;--violet-2:#2997ff;--blue:#0071e3;--blue-d:#2997ff;
  --coral:#6e6e73;--pink:#6e6e73;--sky:#2997ff;--lime:#2997ff;--sun:#86868b;--mint:#86868b;
  --muted:#6e6e73;--line:#d2d2d7;--r:24px;
  --grad:linear-gradient(180deg,#0077ed,#0071e3);--grad-2:var(--grad);--grad-3:var(--grad);
  --disp:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  --shadow:0 2px 8px rgba(0,0,0,.04),0 12px 40px rgba(0,0,0,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.leaving main,body.leaving footer{opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}
main{animation:pageIn .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
::selection{background:var(--lime);color:var(--ink)}
.wrap{width:min(1240px,100% - 40px);margin-inline:auto;position:relative}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.02;letter-spacing:-.035em}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lime-text{color:var(--lime)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:58px;padding:0 28px;border-radius:999px;font-weight:800;font-size:16px;letter-spacing:-.01em;white-space:nowrap;transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s,background .2s;overflow:hidden;isolation:isolate}
.btn .ar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22);transition:transform .25s}
.btn .ar svg{width:16px;height:16px}
.btn:hover{transform:translateY(-3px) scale(1.02)}
.btn:hover .ar{transform:translateX(4px) rotate(-45deg)}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 12px 30px rgba(0,113,227,.35)}
.btn-grad::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,#9a6bff,var(--violet) 55%,#0060c0);opacity:0;transition:opacity .3s}
.btn-grad:hover::after{opacity:1}
.btn-lime{background:var(--lime);color:var(--ink);box-shadow:0 12px 30px rgba(41,151,255,.35)}
.btn-lime .ar{background:var(--ink);color:var(--lime)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.18)}
.btn-line{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-sm{height:46px;padding:0 20px;font-size:14.5px}

/* ---------- pills / eyebrows ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.eyebrow i{width:12px;height:12px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 4px rgba(0,113,227,.18)}
.dark .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font-weight:700;font-size:14px}
.dark .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}

/* ---------- nav ---------- */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:80;width:min(1240px,100% - 24px);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 9px 9px 16px;border-radius:999px;background:rgba(255,253,249,.78);backdrop-filter:blur(18px) saturate(1.6);border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 40px rgba(0,0,0,.12);transition:top .3s,box-shadow .3s}
.nav.scrolled{top:8px;box-shadow:0 10px 40px rgba(0,0,0,.18)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.04em}
.logo svg{width:40px;height:40px;flex:none;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.logo:hover svg{transform:rotate(-12deg) scale(1.08)}
.logo small{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-top:2px}
.nav ul{list-style:none;display:flex;gap:4px;background:rgba(0,0,0,.05);padding:5px;border-radius:999px}
.nav ul a{display:block;padding:10px 18px;border-radius:999px;font-weight:700;font-size:15px;transition:background .2s,color .2s}
.nav ul a:hover{background:#fff}
.nav ul a.on{background:var(--ink);color:#fff}
.nav .right{display:flex;align-items:center;gap:8px}
.burger{display:none;width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;place-items:center}
.burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;position:relative;transition:.3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;border-radius:2px;transition:.3s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{top:0;transform:rotate(45deg)}
.menu-open .burger span::after{top:0;transform:rotate(-45deg)}
.overlay{position:fixed;inset:0;z-index:70;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:110px 28px 40px;clip-path:circle(0 at calc(100% - 44px) 44px);transition:clip-path .6s cubic-bezier(.7,0,.2,1);overflow:hidden}
.menu-open .overlay{clip-path:circle(150% at calc(100% - 44px) 44px)}
.overlay a.big{font-family:var(--disp);font-weight:700;font-size:clamp(40px,11vw,70px);letter-spacing:-.04em;line-height:1.15;display:flex;align-items:center;gap:16px;opacity:0;transform:translateY(20px);transition:.4s}
.overlay a.big i{width:16px;height:16px;border-radius:50%;background:var(--c)}
.menu-open .overlay a.big{opacity:1;transform:none}
.menu-open .overlay a.big:nth-child(2){transition-delay:.05s}.menu-open .overlay a.big:nth-child(3){transition-delay:.1s}.menu-open .overlay a.big:nth-child(4){transition-delay:.15s}.menu-open .overlay a.big:nth-child(5){transition-delay:.2s}
.overlay .foot{margin-top:40px;color:#86868b}
.overlay .blob{opacity:.5}

/* ---------- decorative shapes ---------- */
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.7;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.15)}100%{transform:translate(-40px,30px) scale(.95)}}
.shape{position:absolute;pointer-events:none;z-index:1}
.spin{animation:spin 22s linear infinite}
.spin-r{animation:spin 30s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.bob{animation:bob 6s ease-in-out infinite}
.bob-2{animation:bob 7.5s ease-in-out infinite -2s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-22px) rotate(calc(var(--rot,0deg) + 6deg))}}
.morph{animation:morph 12s ease-in-out infinite}
@keyframes morph{0%,100%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%}33%{border-radius:68% 32% 41% 59%/55% 61% 39% 45%}66%{border-radius:35% 65% 50% 50%/62% 38% 62% 38%}}
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");z-index:1}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative;overflow:hidden;padding:170px 0 110px;color:#fff;background:var(--ink);isolation:isolate}
.phero .bgimg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:.55;mix-blend-mode:screen}
.phero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:90px;background:var(--cream);clip-path:polygon(0 100%,100% 100%,100% 0,0 75%);z-index:2}
.phero h1{font-size:clamp(46px,7.4vw,112px);margin:22px 0 22px;max-width:14ch}
.phero p.lead{font-size:clamp(18px,1.7vw,22px);color:#a1a1a6;max-width:52ch}
.phero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.phero .wrap{z-index:3}

/* ---------- sections ---------- */
.sec{position:relative;padding:120px 0;overflow:hidden;overflow:clip}
.sec.tight{padding:80px 0}
.sh{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:52px}
.sh h2{font-size:clamp(38px,5.6vw,80px);margin-top:18px;max-width:15ch}
.sh p{max-width:44ch;font-size:18.5px;color:var(--muted)}
.dark{background:var(--ink);color:#fff}
.dark .sh p{color:#a1a1a6}
.violet{background:var(--violet);color:#fff}
.coral{background:var(--coral);color:#fff}

/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
.rv-l{opacity:0;transform:translateX(-50px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv-l.in{opacity:1;transform:none}
.rv-s{opacity:0;transform:scale(.85) rotate(-4deg);transition:opacity .8s,transform .8s cubic-bezier(.3,1.5,.5,1)}
.rv-s.in{opacity:1;transform:none}

/* marquee */
.mq{position:relative;z-index:5;overflow:hidden;white-space:nowrap;padding:20px 0;font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.03em}
.mq .track{display:inline-flex;gap:40px;animation:mq 34s linear infinite;padding-right:40px}
.mq.rev .track{animation-direction:reverse}
.mq span{display:inline-flex;align-items:center;gap:40px}
.mq span::after{content:"";width:16px;height:16px;flex:none;border-radius:50%;border:4px solid currentColor}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-wrap{position:relative;height:190px;margin-top:-60px;z-index:4;overflow-x:hidden;overflow-x:clip}
.mq-wrap .mq{position:absolute;left:-5%;right:-5%}
.mq-a{top:30px;background:var(--lime);color:var(--ink);transform:rotate(-3deg);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.mq-b{top:92px;background:var(--violet);color:#fff;transform:rotate(2deg)}

/* spotlight cards */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(0,113,227,.16),transparent 45%)}
.spot:hover::before{opacity:1}

/* phone frame */
.phone{position:relative;width:260px;border-radius:44px;padding:10px;background:#000000;box-shadow:0 2px 0 1px #2d2d30 inset,0 40px 80px rgba(10,6,30,.45)}
.phone::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:20px;background:#000000;z-index:2}
.phone img{width:100%;aspect-ratio:9/19.5;object-fit:cover;object-position:top;border-radius:34px;background:#fff}
.browser{border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.25);border:1px solid rgba(0,0,0,.08)}
.browser .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#f5f5f7;border-bottom:1px solid #e8e8ed}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#ff6058}.browser .bar i:nth-child(2){background:#ffbd2e}.browser .bar i:nth-child(3){background:#28c93f}
.browser .bar span{margin-left:10px;font-size:12px;font-weight:700;color:var(--muted);background:#fff;border-radius:999px;padding:3px 12px}
.browser img{width:100%}

/* sticker */
.sticker{position:absolute;width:150px;height:150px;z-index:6}
.sticker svg{width:100%;height:100%}
.sticker .core{position:absolute;inset:30px;border-radius:50%;display:grid;place-items:center;text-align:center;font-family:var(--disp);font-weight:700;font-size:14px;line-height:1.05;letter-spacing:-.03em}

/* CTA band */
.cta{position:relative;border-radius:44px;overflow:hidden;color:#fff;padding:90px 70px;isolation:isolate;background:var(--ink)}
.cta .ph{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:.45}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,rgba(0,0,0,.96) 25%,rgba(0,0,0,.82) 55%,rgba(0,113,227,.6))}
.cta h2{font-size:clamp(40px,6vw,88px);max-width:13ch}
.cta p{font-size:20px;color:#d2d2d7;max-width:46ch;margin:18px 0 32px}
.cta .acts{display:flex;gap:12px;flex-wrap:wrap}

/* footer */
footer{position:relative;background:var(--ink);color:#a1a1a6;padding:110px 0 40px;margin-top:120px;overflow:hidden;isolation:isolate}
footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
footer h3{font-size:clamp(30px,3.4vw,46px);color:#fff;max-width:12ch}
footer h4{font-family:var(--body);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#86868b;margin-bottom:16px;font-weight:800}
footer ul{list-style:none;display:grid;gap:10px;font-weight:600}
footer a:hover{color:var(--lime)}
footer .mail{display:inline-block;margin-top:22px;font-family:var(--disp);font-size:clamp(20px,2.2vw,28px);color:#fff;letter-spacing:-.03em;border-bottom:3px solid var(--lime);padding-bottom:4px}
footer .giant{display:block;width:100%;height:auto;margin-top:80px;user-select:none;overflow:visible}
@keyframes shine{to{background-position:200% 0}}
footer .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:24px;font-size:14px;color:#86868b}
.totop{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#fff}

/* modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex;animation:fade .25s}
@keyframes fade{from{opacity:0}}
.modal .box{position:relative;width:min(1120px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--paper);border-radius:32px;display:grid;grid-template-columns:1.25fr 1fr;animation:pop .4s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{from{transform:scale(.92) translateY(20px);opacity:0}}
.modal .x{position:absolute;top:14px;right:14px;z-index:5;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;font-size:24px;display:grid;place-items:center}

/* forms */
.field label{display:block;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px 4px}
.field input,.field textarea{width:100%;height:58px;border-radius:18px;border:2px solid var(--line);background:#fff;padding:0 18px;font-size:16.5px;font-weight:500;transition:border-color .2s,box-shadow .2s}
.field textarea{height:130px;padding:16px 18px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 5px rgba(0,113,227,.12)}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices label{cursor:pointer;margin:0;text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink)}
.choices input{position:absolute;opacity:0;width:0;height:0}
.choices span{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;border:2px solid var(--line);background:#fff;font-weight:700;transition:.2s cubic-bezier(.3,1.6,.5,1)}
.choices span:hover{border-color:var(--violet)}
.choices input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff;transform:scale(1.04)}
.choices input:focus-visible+span{box-shadow:0 0 0 4px rgba(0,113,227,.3)}

/* responsive */
@media (max-width:1060px){
  .nav ul,.nav .right .btn{display:none}
  .burger{display:grid}
  footer .top{grid-template-columns:1fr 1fr}
  .modal .box{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sec{padding:84px 0}
  .wrap{width:calc(100% - 32px)}
  .phero{padding:140px 0 90px}
  .cta{padding:56px 26px;border-radius:30px}
  footer .top{grid-template-columns:1fr}
  .btn{height:54px;padding:0 22px}
  .mq-wrap{height:160px}
  .mq-b{top:84px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.rv-l,.rv-s{opacity:1;transform:none}
}

/* ---------- rotating word ---------- */
.rot{display:inline-block;transition:opacity .35s,transform .35s,filter .35s}
.rot.out{opacity:0;transform:translateY(.35em) rotate(3deg);filter:blur(6px)}

/* ---------- product cards (Home + Products) ---------- */
.pcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:#fff;border:1.5px solid var(--line);overflow:hidden;text-align:left;transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .35s;cursor:pointer;width:100%}
.pcard:hover{transform:translateY(-8px) rotate(-.5deg);box-shadow:0 30px 60px rgba(0,0,0,.16)}
.pcard .vis{position:relative;height:300px;overflow:hidden;background:linear-gradient(140deg,var(--c),var(--c2));display:flex;align-items:flex-end;justify-content:center;isolation:isolate}
.pcard .vis::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.22);top:-80px;right:-60px;z-index:-1;transition:transform .6s}
.pcard .vis::after{content:"";position:absolute;width:120px;height:120px;border-radius:30px;border:3px solid rgba(255,255,255,.35);bottom:30px;left:-30px;transform:rotate(20deg);z-index:-1;transition:transform .6s}
.pcard:hover .vis::before{transform:scale(1.3) translate(-20px,20px)}
.pcard:hover .vis::after{transform:rotate(80deg)}
.pcard .vis .ph{width:62%;max-width:210px;margin-bottom:-90px;border-radius:30px;padding:7px;background:#000000;box-shadow:0 24px 50px rgba(0,0,0,.35);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.pcard .vis .ph img{border-radius:24px;aspect-ratio:9/19.5;object-fit:cover;object-position:top;width:100%;background:#fff}
.pcard .vis .br{width:88%;margin-bottom:-24px;border-radius:14px 14px 0 0;overflow:hidden;background:#fff;box-shadow:0 24px 50px rgba(0,0,0,.3);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.pcard .vis .br .bar{height:22px;background:#f5f5f7;display:flex;gap:5px;align-items:center;padding:0 10px}
.pcard .vis .br .bar i{width:7px;height:7px;border-radius:50%;background:#d2d2d7}
.pcard .vis .br img{width:100%;height:230px;object-fit:cover;object-position:top left}
.pcard .vis .ic{width:58%;max-width:200px;align-self:center;border-radius:34px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.3);transition:transform .45s cubic-bezier(.3,1.4,.5,1);background:#fff}
.pcard .vis .ic img{width:100%;aspect-ratio:1;object-fit:cover}
.pcard .vis .mk{width:86%;margin-bottom:-14px;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.pcard:hover .vis .ph,.pcard:hover .vis .br,.pcard:hover .vis .ic,.pcard:hover .vis .mk{transform:translateY(-12px) scale(1.03)}
.pcard .badge{position:absolute;top:16px;left:16px;z-index:3;background:var(--ink);color:#fff;font-weight:800;font-size:12.5px;padding:7px 12px;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.pcard .tx{padding:24px 26px 26px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard .tx small{font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pcard .tx h3{font-size:30px}
.pcard .tx p{color:var(--muted);font-size:15.5px}
.pcard .tx .go{margin-top:auto;padding-top:12px;font-weight:800;font-size:14.5px;display:inline-flex;align-items:center;gap:8px}
.pcard .tx .go svg{width:16px;height:16px;transition:transform .25s}
.pcard:hover .tx .go svg{transform:translateX(5px)}

/* mock screens for products without screenshots */
.mock{background:#fff;border-radius:18px 18px 0 0;padding:16px;box-shadow:0 24px 50px rgba(0,0,0,.28);font-size:13px;line-height:1.4;color:var(--ink)}
.mock .ttl{font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.mock.chat .m{padding:8px 11px;border-radius:14px;margin-bottom:7px;max-width:88%}
.mock.chat .me{margin-left:auto;background:var(--violet);color:#fff;border-bottom-right-radius:4px}
.mock.chat .tool{background:#f5f5f7;font-family:ui-monospace,monospace;font-size:11.5px;color:#6e6e73}
.mock.chat .bot{background:#f6f3ee;border-bottom-left-radius:4px}
.mock.chat .alert{background:#fff4d4;font-weight:700;font-size:12px}
.mock.rev .stars{color:#f5a700;letter-spacing:2px}
.mock.rev p{font-weight:700;margin:6px 0 10px}
.mock.rev .draft{background:#f5f5f7;border-radius:12px;padding:10px 12px}
.mock.rev .draft small{display:block;font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);margin-bottom:4px}
.mock.rev .post{display:inline-block;margin-top:10px;background:var(--ink);color:#fff;font-weight:800;font-size:12px;padding:7px 12px;border-radius:999px}
.mock.list .aisle{font-weight:800;font-size:11px;color:var(--coral);margin:8px 0 4px;text-transform:uppercase;letter-spacing:.08em}
.mock.list label{display:flex;gap:8px;align-items:center;padding:4px 0;font-weight:600}
.mock.list label i{width:15px;height:15px;border-radius:5px;border:2px solid #d2d2d7}
.mock.list label.ok{color:#86868b;text-decoration:line-through}
.mock.list label.ok i{background:var(--mint);border-color:var(--mint)}
/* eyebrows on dark/colour backgrounds */
.hero .eyebrow,.phero .eyebrow,.cta .eyebrow,.toy-sec .eyebrow,.on-dark .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:none;backdrop-filter:blur(8px)}

/* typewriter caret */
.tw{white-space:nowrap}
.tw-car{display:inline-block;width:.08em;height:.82em;margin-left:.06em;vertical-align:-.04em;background:currentColor;border-radius:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* gradient text on dark backgrounds: switch to solid lime for contrast */
.phero .grad-text,.cta .grad-text,footer .grad-text,.dark .grad-text,.hero .grad-text{background:none;color:var(--lime);-webkit-text-fill-color:var(--lime)}

/* review fixes */
.hero .eyebrow i,.phero .eyebrow i,.cta .eyebrow i,.toy-sec .eyebrow i,.on-dark .eyebrow i{background:var(--lime);box-shadow:none}
.phero .bgimg{opacity:.32}

/* =================== PREMIUM PASS (Apple-inspired) =================== */
body{letter-spacing:-.011em;background:#fff}
::selection{background:#b3d7ff;color:#1d1d1f}
h1,h2,h3,h4{font-weight:600!important;letter-spacing:-.035em;line-height:1.05}
p{color:inherit}
/* calm: no grain, blobs or floating decoration */
.grain::before,.blob,.shape{display:none!important}

/* nav: slim dark frosted bar, full width */
.nav{top:0!important;left:0;transform:none;width:100%;border-radius:0;height:52px;padding:0 max(20px,calc((100% - 1240px)/2));background:rgba(22,22,23,.8);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border:0;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none!important;color:#f5f5f7}
.logo{font-weight:600;font-size:17px;letter-spacing:-.02em}
.logo svg{width:28px;height:28px}
.logo small{display:none}
.nav ul{background:none;padding:0;gap:4px}
.nav ul a{padding:8px 14px;font-size:13.5px;font-weight:500;color:rgba(245,245,247,.75)}
.nav ul a:hover{background:none;color:#fff}
.nav ul a.on{background:none;color:#fff;font-weight:600}
.nav .right .btn-sm{height:32px;padding:0 15px;font-size:13px}
.nav .btn .ar{display:none}
.burger{background:none;width:40px;height:40px}
.overlay{background:#000}

/* buttons: Apple blue pills, restrained motion */
.btn{font-weight:600;letter-spacing:-.01em;height:50px;padding:0 24px;font-size:15.5px}
.btn:hover{transform:none}
.btn:hover .ar{transform:translateX(3px)}
.btn .ar{width:24px;height:24px}
.btn-grad,.btn-lime{background:#0071e3;color:#fff;box-shadow:none}
.btn-grad::after{display:none}
.btn-grad:hover,.btn-lime:hover{background:#0077ed}
.btn-lime .ar,.btn-grad .ar{background:rgba(255,255,255,.2);color:#fff}
.btn-ink{background:#1d1d1f}.btn-ink:hover{background:#000}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.35);backdrop-filter:none}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-line{background:transparent;border:1px solid #0071e3;color:#0071e3}
.btn-line:hover{background:#0071e3;color:#fff}

/* eyebrows: quiet grey caption */
.eyebrow,.hero .eyebrow,.phero .eyebrow,.cta .eyebrow,.toy-sec .eyebrow,.on-dark .eyebrow,.dark .eyebrow{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;backdrop-filter:none!important;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:#6e6e73!important;gap:8px}
.hero .eyebrow,.phero .eyebrow,.cta .eyebrow,.toy-sec .eyebrow,.on-dark .eyebrow,.dark .eyebrow,.proof .eyebrow,.nda .eyebrow,.next .eyebrow,.coffee .eyebrow{color:#a1a1a6!important}
.eyebrow i,.hero .eyebrow i,.phero .eyebrow i,.cta .eyebrow i,.toy-sec .eyebrow i,.on-dark .eyebrow i{width:7px!important;height:7px!important;background:#2997ff!important;box-shadow:none!important}

/* two-tone headlines: secondary words in grey, blue reserved for accents */
.grad-text,.phero .grad-text,.cta .grad-text,.dark .grad-text,.hero .grad-text{background:none!important;color:#86868b!important;-webkit-text-fill-color:#86868b!important}
footer .grad-text{color:#2997ff!important;-webkit-text-fill-color:#2997ff!important}
.lime-text{color:#2997ff}

/* hero + page heros: black, photo in greyscale, straight edges */
.hero{background:radial-gradient(1100px 650px at 75% 25%,#0d1d33 0%,#000 62%)!important}
.hero .bgimg{display:none}
.hero h1 .tw{color:#2997ff!important}
.phero{background:radial-gradient(1000px 600px at 80% 0%,#101c2e 0%,#000 60%)!important}
.phero::after{display:none!important}
.phero .bgimg{opacity:.18!important;filter:grayscale(1) contrast(1.1);mix-blend-mode:normal!important}
.phero p.lead,.hero .lead{color:#a1a1a6!important}
.dark,.toy-sec{background:#000!important}
.awards span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);backdrop-filter:none}

/* marquee: one flat, quiet band */
.mq-wrap{height:auto!important;margin-top:0!important;overflow:hidden}
.mq-wrap .mq{position:relative!important;left:0!important;right:0!important;top:0!important}
.mq-a{transform:none!important;background:#f5f5f7!important;color:#1d1d1f!important;box-shadow:none!important;font-weight:600;font-size:clamp(17px,1.8vw,22px);padding:22px 0}
.mq-b{display:none!important}
.mq span::after{width:7px;height:7px;border:0;background:#86868b}

/* stickers: monochrome */
.sticker circle{fill:#f5f5f7}
.sticker text{fill:#1d1d1f}
.sticker .core{background:#1d1d1f!important;color:#f5f5f7!important}

/* cards: soft grey tiles, no borders, no tilt */
.pcard{background:#f5f5f7;border:0}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.pcard .vis,.car .pcard .vis{background:linear-gradient(180deg,#fafafa,#ececf0)!important}
.pcard .vis::before,.pcard .vis::after{display:none}
.pcard .badge,.car .pcard .badge{background:#1d1d1f!important;color:#fff!important}
.pcard .tx .go{color:#0071e3}
.modal .gal{background:#f5f5f7!important}
.modal .det .tg{background:none!important;color:#0071e3!important;-webkit-text-fill-color:#0071e3!important;filter:none!important}
.modal .box{background:#fff}

/* home-specific */
.proof{background:#000!important}
.proof .ribbons span:first-child{background:#f5f5f7!important;border-color:#f5f5f7!important;color:#1d1d1f!important}
.sv{--o:rgba(0,0,0,.9)}
.sv:hover{transform:none}
.sv:hover .go{transform:translateX(3px);background:#fff}
.stat:hover,.pkc:hover,.person:hover,.val:hover{transform:none!important}
.stat::after{display:none}
.st1,.st3{background:#f5f5f7!important;color:#1d1d1f!important;border:0!important}
.st2{background:#1d1d1f!important;color:#fff!important}
.st4{background:#0071e3!important;color:#fff!important}
.step .dot{background:#f5f5f7!important;color:#1d1d1f!important;box-shadow:none!important;border-radius:50%!important;font-size:22px!important;width:64px!important;height:64px!important}
.step:hover .dot{transform:none}
.steps::before{top:31px;opacity:.15}
.step .time{background:#f5f5f7;border:0}
.panel{background:#1d1d1f;border-color:rgba(255,255,255,.1);backdrop-filter:none}
.gates button.on{background:#f5f5f7!important;color:#1d1d1f!important}
.sw.on{border-color:#0071e3;background:rgba(0,113,227,.14)}
.sw.on .t{background:#0071e3}
.sw.on .t::after{background:#fff!important}
.lamp.on .bulb{background:#f5f5f7!important;border-color:#f5f5f7!important;color:#1d1d1f!important;box-shadow:0 0 0 10px rgba(255,255,255,.08),0 0 70px rgba(255,255,255,.35)!important}
.tt tr.hit td{background:rgba(0,113,227,.2)}
.tt tr.hit td:last-child{color:#2997ff}

/* services */
.srv,.pt,.val,.dp{--c:#0071e3!important}
.jump a{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:none;font-weight:600}
.jump a i{background:#f5f5f7!important;color:#1d1d1f!important}
.jump a:hover{transform:none}
.media .num{background:#1d1d1f!important;color:#fff!important;transform:none!important;border-radius:22px!important;font-size:28px!important;width:80px!important;height:80px!important}
.media .photo::after{display:none}
.srv ul li{background:#f5f5f7;border:0;font-weight:600}
.great{background:#f5f5f7;border-left-width:3px}
.flow .node{background:#1d1d1f!important}
.flow .ping i{background:#0071e3}
.pt{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.pt b.n{background:#2c2c2e!important;color:#f5f5f7!important}
.pt small{color:#2997ff}
.term{background:#111;border-color:rgba(255,255,255,.1)}
.term .tags span{background:rgba(41,151,255,.1);color:#2997ff;border-color:rgba(41,151,255,.25)}
.k1,.k2{background:#f5f5f7!important;color:#1d1d1f!important}
.k3{background:#0071e3!important;color:#fff!important}
.k3 .btn{background:#fff!important;color:#0071e3!important}
.k4{background:#1d1d1f!important;color:#fff!important}
.pkc::before,.k4::before{display:none}
.pkc .d{background:rgba(0,0,0,.06)}.k3 .d,.k4 .d{background:rgba(255,255,255,.15)}
.stack span{background:#f5f5f7;border:0;font-weight:600}
.stack span:hover{background:#1d1d1f!important;color:#fff!important;transform:translateY(-3px)!important}
.faq details{background:#f5f5f7;border:0}
.faq details[open]{background:#fff;box-shadow:0 0 0 1px #d2d2d7,0 18px 40px rgba(0,0,0,.06)}
.faq details[open] summary i{background:#0071e3;color:#fff}
.faq summary i{background:#fff}

/* products */
.filters{top:66px!important;background:rgba(255,255,255,.85)!important;border-color:#e8e8ed!important}
.next{background:#0071e3!important}

/* studio */
.person.p1{background:#1d1d1f!important}
.person.p2{background:#0071e3!important}
.person::before{display:none}
.val{border:0;background:#f5f5f7}
.val .ic{background:#fff!important}
.val .ic svg{stroke:#1d1d1f!important}
.story mark{background:linear-gradient(transparent 62%,rgba(0,113,227,.18) 62%)!important}
.pics .pic{transform:none!important;border-width:0!important}
.bits{background:radial-gradient(circle at 30% 30%,#1d1d1f,#000 70%)!important}
.bits .ring,.bits .ring.r2{border-color:rgba(255,255,255,.14)!important}
.bits .core{background:linear-gradient(180deg,#fff,#86868b)!important;-webkit-background-clip:text!important;background-clip:text!important}

/* contact */
.promise li i{background:#f5f5f7!important;color:#1d1d1f!important}
.done .tick{background:#0071e3!important;transform:none!important}
.done .tick svg{stroke:#fff!important}
.formcard{background:#fff;border-color:#e8e8ed}

/* CTA + footer */
.cta{background:#000}
.cta::after{background:linear-gradient(110deg,rgba(0,0,0,.94) 30%,rgba(0,0,0,.55))!important}
.cta .ph{filter:grayscale(.4)}
footer{background:#000}
footer .mail{border-bottom-color:#0071e3}
footer a:hover{color:#2997ff}
/* premium pass – follow-ups */
.stack span{background:#f5f5f7!important;border:0!important}
.faq details{background:#f5f5f7!important;border:0!important}
.faq details[open]{background:#fff!important;box-shadow:0 0 0 1px #d2d2d7,0 18px 40px rgba(0,0,0,.06)!important}
.val{background:#f5f5f7!important;border:0!important}
.sh h2{max-width:20ch!important;text-wrap:balance}
h1,h2{text-wrap:balance}
.sec .wrap>h2{max-width:22ch!important}
.sv .bg{filter:saturate(.55) brightness(.9)}
.cta h2{max-width:18ch!important}

/* =================== A LITTLE MORE LIFE =================== */
@keyframes gshift{to{background-position:300% 0}}
/* gradient for headline accents on dark (bright) and light (deeper) backgrounds */
.hero h1 .tw-txt,.phero h1 .grad-text,.hero h1 .grad-text,body[data-page=home] .lime-text{
  background:linear-gradient(90deg,#2997ff,#9b6cff,#ff6aa8,#9b6cff,#2997ff)!important;background-size:300% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;
  animation:gshift 9s linear infinite;padding-right:.04em}
body[data-page=home] .grad-text{
  background:linear-gradient(90deg,#0071e3,#7b4dff,#e8457f,#7b4dff,#0071e3)!important;background-size:300% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;
  animation:gshift 9s linear infinite}
.hero h1 .tw-car{background:#9b6cff}

/* home hero: real photo behind, darkened on the text side */
.hero .bgimg{display:block!important;background:url("https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?w=2000&q=70&auto=format&fit=crop") 70% center/cover!important;opacity:.75!important;mix-blend-mode:normal!important}
.hero .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 22%,rgba(0,0,0,.72) 50%,rgba(0,0,0,.25) 100%),linear-gradient(0deg,#000 0%,transparent 30%)}
/* soft rotating glow behind the phones */
.stage::before{content:"";position:absolute;inset:14% 8% 10%;border-radius:50%;background:conic-gradient(from 0deg,#2997ff,#9b6cff,#ff6aa8,#2997ff);filter:blur(90px);opacity:.38;z-index:-1;animation:spin 20s linear infinite}

/* App of the Day card: photo glow on the right */
.proof{isolation:isolate}
.proof::after{content:"";position:absolute;inset:0;z-index:-2;background:url("https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=1800&q=70&auto=format&fit=crop") right center/cover;opacity:.55}
.proof::before{z-index:-1!important;border:0!important;width:auto!important;height:auto!important;inset:0!important;right:0!important;top:0!important;border-radius:0!important;background:linear-gradient(90deg,#000 35%,rgba(0,0,0,.55) 65%,rgba(0,0,0,.2))!important}

/* bring a little colour back into photos */
.sv .bg{filter:saturate(.85)}
.phero .bgimg{opacity:.3!important;filter:saturate(.6) contrast(1.05)!important}
.cta .ph{filter:none;opacity:.55}

/* primary buttons: subtle glow on hover */
.btn-grad:hover,.btn-lime:hover{box-shadow:0 8px 28px rgba(41,151,255,.45)}
@media (prefers-reduced-motion:reduce){.stage::before{animation:none}}
/* =================== OCT 2026 REFRESH =================== */
/* logo */
.logo svg{width:34px;height:34px;filter:drop-shadow(0 4px 14px rgba(123,77,255,.35))}
.logo b.lg{font-weight:800;background:linear-gradient(90deg,#2997ff,#9b6cff,#ff6aa8);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo:hover svg{transform:rotate(-8deg) scale(1.06)}

/* one background theme: abstract folds of light in the brand colours (assets/img/bg-*.webp) */
.hero .bgimg{background:url("../img/bg-home.webp") right center/cover!important;opacity:1!important;filter:none!important;mix-blend-mode:normal!important}
.phero .bgimg{background-position:right center!important;opacity:1!important;filter:none!important;mix-blend-mode:normal!important}
.hero .bgimg::after,.phero .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 45%,transparent 70%),linear-gradient(0deg,#000 0%,transparent 22%)}
.hero::after,.phero::after{display:none!important}

/* gradient accent word on light backgrounds */
.gtx{background:linear-gradient(90deg,#0071e3,#7b4dff,#e8457f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* how it works: rail through the centre of every number */
.steps{--d:64px;--g:20px;gap:var(--g)!important;margin-top:10px}
.steps::before{top:calc(var(--d) / 2 - 2px)!important;left:calc(var(--d) / 2)!important;right:calc((100% - 3 * var(--g)) / 4 - var(--d) / 2)!important;height:4px!important;opacity:1!important;border-radius:4px;background:linear-gradient(90deg,#2997ff,#9b6cff,#ff6aa8)!important}
.step{display:flex;flex-direction:column}
.step .dot{width:var(--d)!important;height:var(--d)!important;border-radius:50%!important;font-size:20px!important;margin-bottom:22px!important;color:#fff!important;position:relative;z-index:1;background:#1d1d1f!important;box-shadow:0 0 0 6px #fff,0 14px 28px rgba(0,0,0,.18)!important}
.step:nth-child(1) .dot{background:#0071e3!important}.step:nth-child(2) .dot{background:#5b5cf0!important}.step:nth-child(3) .dot{background:#9b6cff!important}.step:nth-child(4) .dot{background:#e8457f!important}
.step:hover .dot{transform:scale(1.1)!important}
.step .card-in{flex:1;background:#f5f5f7;border-radius:24px;padding:26px 24px 28px;transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .35s}
.step:hover .card-in{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,0,0,.08)}
.step h3{font-size:26px!important}
.step .time{background:#fff!important;border:0!important;box-shadow:0 0 0 1px #e3e3e8;color:#1d1d1f}
.step:last-child .card-in{background:#1d1d1f;color:#fff}.step:last-child .card-in p{color:#a1a1a6!important}.step:last-child .time{background:#2d2d30!important;color:#fff;box-shadow:none}
@media (max-width:1060px){.steps::before{display:block!important;top:calc(var(--d) / 2)!important;bottom:calc(var(--d) / 2)!important;left:calc(var(--d) / 2 - 2px)!important;right:auto!important;width:4px!important;height:auto!important;background:linear-gradient(180deg,#2997ff,#9b6cff,#ff6aa8)!important}
  .steps{grid-template-columns:1fr!important}.step{display:grid;grid-template-columns:var(--d) 1fr;gap:18px;align-items:start}.step .dot{margin:0!important}}

/* how we roll */
.vals{gap:18px!important}
.val{position:relative;overflow:hidden;background:#f5f5f7!important;border:0!important;border-radius:28px!important;padding:34px 28px 32px!important;isolation:isolate}
.val::before{content:attr(data-n);position:absolute;right:20px;top:14px;font-family:var(--disp);font-weight:800;font-size:64px;letter-spacing:-.05em;color:var(--c);opacity:.12;z-index:-1}
.val::after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--c);transform:scaleX(.18);transform-origin:left;transition:transform .45s cubic-bezier(.3,1.2,.5,1)}
.val:hover{transform:translateY(-8px)!important;background:#fff!important;box-shadow:0 26px 54px rgba(0,0,0,.09)!important}
.val:hover::after{transform:scaleX(1)}
.val .ic{width:58px!important;height:58px!important;border-radius:18px!important;background:var(--c)!important;box-shadow:0 12px 24px color-mix(in srgb,var(--c) 35%,transparent)}
.val .ic svg{width:26px!important;height:26px!important;stroke:#fff!important}
.val h3{font-size:23px!important;margin-top:6px}
.val p{font-size:15.5px!important;line-height:1.55}

/* contact: keep "hello" visible above the cards */
body[data-page=contact] .big-type{bottom:170px!important;right:-1%!important;z-index:1;font-size:clamp(110px,16vw,250px)!important;-webkit-text-stroke:2px rgba(255,255,255,.2)}
body[data-page=contact] .phero p.lead{position:relative;z-index:2}
@media (max-width:640px){body[data-page=contact] .big-type{bottom:128px!important;font-size:96px!important}}
/* promise colours (beat the older forced --c) */
.vals .val:nth-child(1){--c:#2997ff!important}.vals .val:nth-child(2){--c:#7b4dff!important}.vals .val:nth-child(3){--c:#e8457f!important}.vals .val:nth-child(4){--c:#0071e3!important}
@media (max-width:1060px){.step:last-child::before{content:"";position:absolute;left:0;top:var(--d);bottom:-40px;width:var(--d);background:#fff;z-index:0}}

/* =================== APPLE-STYLE FULL WIDTH + QUIETER ART =================== */
/* art reads as background: lower opacity and a soft mask into black */
.hero .bgimg,.phero .bgimg{opacity:.85!important;-webkit-mask-image:linear-gradient(90deg,transparent 18%,#000 62%);mask-image:linear-gradient(90deg,transparent 18%,#000 62%)}
.hero .bgimg::after,.phero .bgimg::after{background:linear-gradient(0deg,#000 0%,transparent 26%)!important}

/* gutter that keeps full-width content aligned with the 1240px column */
:root{--gut:max(20px,calc((100vw - 1240px) / 2))}
.bleed{margin-inline:calc(50% - 50vw)!important;width:100vw!important;max-width:none!important}

/* 1. LittleLogic: edge-to-edge panel with the art band behind */



/* 4. numbers on a full-width band of light */
.band-sec{position:relative;background:#000;color:#fff;isolation:isolate;padding:120px 0!important;margin:20px 0}
.band-sec::before{content:"";position:absolute;inset:0;z-index:-1;background:url("../img/bg-band.webp") center/cover;opacity:.6}
.band-sec::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#000 0%,transparent 30%,transparent 70%,#000 100%)}
.band-sec .stat{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#fff!important;border-radius:22px!important}
.band-sec .stat b{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}
.band-sec .stat span{color:#c7c7cc!important}
.band-sec .stat::before,.band-sec .stat::after{display:none!important}

@media (max-width:640px){.band-sec{padding:80px 0!important}}

/* =================== PHOTO BACKGROUNDS (Unsplash licence) =================== */
.hero .bgimg,.phero .bgimg{opacity:1!important;-webkit-mask-image:none!important;mask-image:none!important;background-position:right center!important;background-size:cover!important}
.hero .bgimg::after,.phero .bgimg::after{background:linear-gradient(90deg,#000 12%,rgba(0,0,0,.78) 40%,rgba(0,0,0,.1) 75%),linear-gradient(0deg,#000 0%,transparent 25%)!important}
body[data-page=home] .proof::after{background:url("../img/bg-proof.webp") right center/cover!important;opacity:.6!important}
body[data-page=home] .proof::before{background:linear-gradient(90deg,#000 35%,rgba(0,0,0,.6) 65%,rgba(0,0,0,.2))!important}
.band-sec::before{opacity:.75}
/* hero screenshots a touch smaller, and fixed in place (no mouse-follow) */
body[data-page=home] .hero .stage{zoom:.9}
body[data-page=home] .hero [data-depth]{translate:none!important}
body[data-page=services] .phero .bgimg{opacity:.6!important}
/* contact "hello": soft brand-gradient word, fully in frame */
body[data-page=contact] .big-type{right:5%!important;bottom:150px!important;font-size:clamp(110px,15vw,230px)!important;letter-spacing:-.06em!important;
  -webkit-text-stroke:0!important;color:transparent!important;
  background:linear-gradient(100deg,#2997ff 0%,#9b6cff 45%,#ff6aa8 80%,#9b6cff 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;opacity:.42;
  filter:drop-shadow(0 0 40px rgba(155,108,255,.35));animation:gshift 12s linear infinite alternate}
@media (max-width:640px){body[data-page=contact] .big-type{font-size:92px!important;bottom:128px!important;right:4%!important;opacity:.3}}
@media (prefers-reduced-motion:reduce){body[data-page=contact] .big-type{animation:none}}
body[data-page=contact] .big-type{opacity:.85!important;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 45%),linear-gradient(100deg,#5aaeff 0%,#b48cff 45%,#ff8cc0 80%,#b48cff 100%)!important;
  background-size:100% 100%,200% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;
  filter:drop-shadow(0 10px 40px rgba(155,108,255,.45))!important;animation:none!important}
body[data-page=contact] .big-type{padding:0 .12em .04em .04em!important}
/* classier wordmark + mark: monochrome with a single blue accent */
.logo svg{filter:none!important}
.logo b.lg{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:inherit!important;-webkit-text-fill-color:currentColor!important;font-weight:700}
.logo span{font-weight:500}
/* marquee: floats on white, centred between the hero and the next card */
.mq-a{background:transparent!important;padding:0!important;line-height:1.2}
.mq-wrap{padding-top:60px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
body[data-page=services] .phero .bgimg{left:40%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%)!important;mask-image:linear-gradient(90deg,transparent 0%,#000 22%)!important}
body[data-page=services] .phero .bgimg{background-position:15% 60%!important}
body[data-page=services] .phero .bgimg{left:24%!important}
.cta .ph{opacity:.6!important;filter:none!important}