/* SmartDivs home: hero, showreel, trusted-by, intro */
:root{
  --sd-accent:#D92D29;
  --sd-ink:#17181B;
  --sd-bg:#F6F5F2;
  --sd-muted:#4A4D55;
  --sd-muted-2:#5B5E66;
  --sd-logo:#9A9CA2;
  --sd-line:rgba(23,24,27,.1);
  --sd-display:'Bricolage Grotesque',sans-serif;
  --sd-body:'DM Sans',system-ui,sans-serif;
  --sd-mono:'JetBrains Mono',monospace;
  --sd-serif:'Instrument Serif',serif;
  --sf:#FFFFFF;--dk:#17181B;--ln:rgba(23,24,27,.12);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--sd-bg);color:var(--sd-ink);font-family:var(--sd-body);-webkit-font-smoothing:antialiased}
a{color:var(--sd-ink);text-decoration:none}
a:hover{color:var(--sd-ink)}
.sd-page{overflow-x:clip}
.sd-wrap{position:relative;max-width:1848px;margin:0 auto;padding:0 clamp(20px,5.5vw,104px)}

/* ---------- keyframes ---------- */
@keyframes sdBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes sdWord{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
@keyframes sdCell{0%,100%{opacity:0}50%{opacity:1}}
@keyframes sdIn{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}
@keyframes sdPop{0%{opacity:0;transform:translateY(40px) scale(.9)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sdMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sd-in{opacity:0;animation:sdIn .8s cubic-bezier(.2,.7,.2,1) forwards}
.sd-pop{opacity:0;animation:sdPop .8s cubic-bezier(.2,.8,.2,1.1) forwards}
.sd-swap{display:inline-block;animation:sdWord .55s cubic-bezier(.2,.7,.2,1) both}

/* ---------- buttons ---------- */
.sd-btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;transition:transform .2s ease,filter .2s ease}
.sd-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.sd-btn--accent{min-height:56px;padding:0 28px;background:var(--sd-accent);color:#fff;font-weight:700;font-size:16px}
.sd-btn--accent:hover{color:#fff}

/* ---------- hero ---------- */
.sd-hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--sd-bg)}
.sd-grid{position:absolute;inset:0;pointer-events:none;background-size:64px 64px;
  background-image:linear-gradient(rgba(23,24,27,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(23,24,27,.05) 1px,transparent 1px)}
.sd-grid--lit{
  background-image:linear-gradient(rgba(23,24,27,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(23,24,27,.18) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(220px circle at var(--mx,-999px) var(--my,-999px),#000 0%,transparent 100%);
  mask-image:radial-gradient(220px circle at var(--mx,-999px) var(--my,-999px),#000 0%,transparent 100%)}
.sd-cell{position:absolute;width:63px;height:63px;pointer-events:none;opacity:0;animation:sdCell 7s ease-in-out infinite}
.sd-hero__wrap{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.sd-brand{display:flex;align-items:center;gap:10px;font-family:var(--sd-display);font-weight:800;font-size:24px;letter-spacing:-.02em}
.sd-brand img{mix-blend-mode:multiply}

.sd-hero__row{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:48px;align-items:center;align-content:center;padding:32px 0 56px}
.sd-hero__text{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:28px}
.sd-badge{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:var(--sf);border:1px solid var(--sd-line);font-size:14px;color:var(--sd-muted)}
.sd-badge__dot{width:8px;height:8px;border-radius:50%;background:var(--sd-accent)}
.sd-h1{margin:0;font-family:var(--sd-display);font-weight:800;font-size:clamp(32px,6vw,82px);line-height:1;letter-spacing:-.035em}
.sd-h1__word{color:var(--sd-accent);white-space:nowrap}
.sd-caret{animation:sdBlink 1s steps(1) infinite}
.sd-keywords{display:flex;flex-wrap:wrap;gap:10px;min-height:92px;align-content:flex-start}
.sd-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;background:var(--sf);border:1px solid var(--ln);font-size:15px;font-weight:500;color:#2B2D33}
.sd-chip.sd-swap{display:inline-flex}
.sd-chip__dot{width:6px;height:6px;border-radius:50%;background:var(--sd-accent)}

.sd-hero__visual{flex:1 1 440px;min-width:0;perspective:1400px}
.sd-pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.sd-stagger{margin-top:48px}
.sd-pillar{display:flex;flex-direction:column;gap:14px;min-height:230px;padding:24px;border-radius:26px;border:1px solid var(--sd-line);background:var(--sf);color:var(--sd-ink);
  box-shadow:0 10px 30px rgba(23,24,27,.06);transform:rotate(var(--rot,0deg));
  transition:transform .6s cubic-bezier(.2,.8,.2,1),background-color .45s ease,color .45s ease,box-shadow .6s ease,border-color .45s ease}
.sd-pillar:focus-visible{outline:3px solid var(--sd-ink);outline-offset:3px}
.sd-pillar__top{display:flex;align-items:center;justify-content:space-between}
.sd-pillar__icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--sd-bg);color:var(--sd-accent);transition:background-color .45s ease,color .45s ease}
.sd-pillar__num{font-family:var(--sd-mono);font-size:13px;opacity:.7}
.sd-pillar__name{margin-top:auto;font-family:var(--sd-display);font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-.025em;line-height:1}
.sd-pillar.is-active{background:var(--sd-accent);color:#fff;border-color:var(--sd-accent);box-shadow:0 28px 60px rgba(217,45,41,.28);transform:translateY(-14px) rotate(0deg) scale(1.03)}
.sd-pillar.is-active:hover{color:#fff}
.sd-pillar.is-active .sd-pillar__icon{background:rgba(255,255,255,.18);color:#fff}

/* ---------- showreel (desktop, scroll-driven) ---------- */
.sd-reel{position:relative;z-index:2;height:400vh;pointer-events:none}
.sd-reel__scene{position:sticky;top:0;height:100vh;overflow:hidden}
.sd-reel__frame{position:absolute;left:0;top:0;width:0;height:0;border-radius:24px;overflow:hidden;background:#0B0B0C;pointer-events:auto;box-shadow:0 30px 80px rgba(23,24,27,.2);will-change:left,top,width,height}
.sd-reel__video{display:block;width:100%;height:100%;object-fit:cover}

.sd-intro{position:absolute;inset:0;max-width:1848px;margin:0 auto;padding:0 clamp(20px,5.5vw,104px);display:flex;flex-direction:column;justify-content:center;gap:72px;opacity:0;transform:translateY(30px);pointer-events:none}
.sd-trusted{display:flex;flex-direction:column;gap:36px}
.sd-trusted__label{display:flex;align-items:center;gap:28px}
.sd-trusted__line{flex:1 1 0;height:1px;background:var(--ln)}
.sd-trusted__text{font-family:var(--sd-serif);font-style:italic;font-size:28px;color:var(--sd-muted-2);white-space:nowrap}
.sd-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.sd-marquee__track{display:flex;align-items:center;gap:80px;width:max-content;padding-right:80px;animation:sdMarquee 32s linear infinite}
.sd-logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--sd-display);font-weight:700;font-size:26px;letter-spacing:-.01em;color:var(--sd-logo);white-space:nowrap}
.sd-logo::before{content:"";width:22px;height:22px;border-radius:50%;border:2.2px solid var(--sd-logo)}
.sd-logo img{display:block;height:32px;width:auto;filter:grayscale(1);opacity:.6}

.sd-intro__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;align-items:start}
.sd-intro__side{grid-column:span 4;display:flex;flex-direction:column;gap:20px}
.sd-intro__caption{font-size:17px;line-height:1.5;font-weight:500;color:var(--sd-ink)}
.sd-slot{width:100%;max-width:340px;aspect-ratio:16/9;border-radius:16px;background:rgba(23,24,27,.05)}
.sd-intro__text{grid-column:span 8;margin:0;font-weight:500;font-size:clamp(28px,2.9vw,44px);line-height:1.32;letter-spacing:-.02em;color:var(--sd-ink)}

/* ---------- showreel (phones, simple) ---------- */
.sd-reel-m{display:none;padding:16px 20px 72px;flex-direction:column;gap:28px}
.sd-reel-m__video{aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#0B0B0C}
.sd-reel-m .sd-trusted{gap:20px}
.sd-reel-m .sd-trusted__label{gap:16px}
.sd-reel-m .sd-trusted__text{font-size:22px}
.sd-reel-m .sd-marquee__track{gap:44px;padding-right:44px}
.sd-reel-m .sd-logo{font-size:20px}
.sd-reel-m .sd-logo::before{width:18px;height:18px}
.sd-reel-m .sd-intro__caption{font-size:15px}
.sd-intro__text--m{font-size:24px;line-height:1.38;letter-spacing:-.015em}
@supports (animation-timeline:view()){
  .sd-reveal{animation:sdIn linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}

/* ---------- responsive ---------- */
@media (max-width:899px){
  .sd-reel{display:none}
  .sd-reel-m{display:flex}
}
@media (max-width:760px){
  .sd-pillar{min-height:160px;padding:18px;border-radius:20px}
  .sd-stagger{margin-top:24px}
  .sd-keywords{gap:8px;min-height:80px}
  .sd-chip{min-height:36px;padding:0 12px;font-size:13.5px;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .sd-in,.sd-pop,.sd-swap,.sd-caret,.sd-cell,.sd-reveal,.sd-marquee__track{animation:none;opacity:1}
  .sd-pillar{transition:background-color .2s ease,color .2s ease}
}


/* =========================================================
   SERVICES: scroll story + "Your plan" (option 3)
   ========================================================= */
:root{--accent:#D92D29;--accent-dark:#B8231F;--ink:#17181B;--bg:#F6F5F2;--muted:#4A4D55;--muted2:#5B5E66;--line:rgba(23,24,27,.12);--charcoal:#3C3C3E;
  --display:'Bricolage Grotesque',sans-serif;--body:'DM Sans',system-ui,sans-serif;--mono:'JetBrains Mono',monospace}
.sv{padding:160px 0 120px;background:var(--bg)}
@media (max-width:760px){.sv{padding:96px 0 72px}}


/* ---------- shared ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:var(--sf);border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--muted)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.h2{margin:18px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(36px,4.6vw,76px);line-height:1.04;letter-spacing:-.035em;max-width:1200px}
.h2 .soft{color:#A6A8AE}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--ln);background:var(--sf);font-size:15px;font-weight:500;color:#2B2D33;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.chip:hover{border-color:var(--accent)}
a.chip:hover{background:var(--accent);color:#fff}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.chip:active{transform:scale(.96)}
.step{min-height:82vh;display:flex;flex-direction:column;justify-content:center;gap:20px;opacity:.25;transition:opacity .5s ease}
.step.is-active{opacity:1}

/* browser mock */
.browser{position:relative;width:100%;aspect-ratio:16/11;max-height:100%;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 90px rgba(23,24,27,.12);overflow:hidden}
.browser__url{margin-left:12px;padding:5px 14px;border-radius:8px;background:#F1F0EC;font-family:var(--mono);font-size:12px;color:var(--muted2)}
.browser__stage-name{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--accent)}
.browser__progress{position:absolute;left:16px;right:16px;bottom:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;z-index:6}
.browser__progress span{height:4px;border-radius:2px;background:rgba(23,24,27,.1);overflow:hidden;position:relative}
.browser__progress span::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
.browser__progress span.done::after{transform:scaleX(1)}
.scene{position:absolute;inset:46px 0 0 0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.scene.is-on{opacity:1;visibility:visible}
.scene .a{opacity:0}
.scene.is-on .a{animation:up .7s cubic-bezier(.2,.8,.2,1) forwards}
.scene.is-on .a2{animation-delay:.15s}.scene.is-on .a6{animation-delay:.75s}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes type{from{max-width:0}to{max-width:100%}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
.gr-row{position:absolute;left:0;right:0;height:21%;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 4%;border-radius:12px;transition:top 1s cubic-bezier(.6,0,.2,1)}
.gr-row i{display:block;height:13%;width:70%;border-radius:4px;background:#C9CCD3}
.gr-row b{display:block;height:9%;width:38%;border-radius:4px;background:#E3E5EA}
.gr-row[data-slot="0"]{top:0}.gr-row[data-slot="1"]{top:26%}.gr-row[data-slot="2"]{top:52%}.gr-row[data-slot="3"]{top:78%}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ring{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.25);opacity:0}}

/* ---------- plan tray (options 2 + 3) ---------- */
.tray{position:fixed;left:50%;bottom:24px;z-index:60;display:flex;align-items:center;gap:14px;max-width:min(920px,calc(100vw - 32px));padding:10px 10px 10px 22px;border-radius:999px;background:var(--dk);color:#fff;box-shadow:0 24px 60px rgba(23,24,27,.35);transform:translate(-50%,140%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tray.is-open{transform:translate(-50%,0)}
.tray__label{font-weight:700;white-space:nowrap}
.tray__count{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:var(--accent);font-family:var(--mono);font-size:13px}
.tray__items{display:flex;gap:6px;overflow:hidden;min-width:0;flex:1}
.tray__items span{flex:none;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.12);font-size:13px;white-space:nowrap}
.tray__clear{border:0;background:none;color:rgba(255,255,255,.7);font-size:13px;cursor:pointer;padding:8px}
.tray__clear:hover{color:#fff}
.tray__cta{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;white-space:nowrap}
.tray__cta:hover{background:var(--accent-dark)}

/* ---------- responsive ---------- */
@media (max-width:899px){
  .story__body{grid-template-columns:1fr;margin-top:40px}
  .story__stage{display:none}
  .step{min-height:0;opacity:1;padding:40px 0;border-top:1px solid var(--line)}
  .tray{left:16px;right:16px;bottom:16px;max-width:none;transform:translateY(140%);padding:10px 10px 10px 18px}
  .tray.is-open{transform:none}
  .tray__items,.tray__clear{display:none}
  .tray__label{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .scene .a{opacity:1}
}
.bx{position:absolute;inset:4.5% 4.5% 11%;display:grid;gap:2.6cqw}
.tl{position:relative;min-width:0;min-height:0;border-radius:2.2cqw;background:#FBFAF8;border:1px solid var(--line);overflow:hidden;padding:5.2cqw 2.6cqw 2.4cqw;display:flex;flex-direction:column}
.fl{position:absolute;z-index:4;display:flex;align-items:center;gap:1.4cqw;padding:1.3cqw 2cqw;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px rgba(23,24,27,.12);font-size:max(10px,1.45cqw);font-weight:600;white-space:nowrap}
.so{flex:1;display:flex;flex-direction:column;gap:1cqw;min-height:0}
.ty{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1cqw}
.ty strong{font-family:var(--display);font-size:8cqw;line-height:.9;letter-spacing:-.04em}
.ty span{font-family:var(--mono);font-size:1.3cqw;color:var(--muted2)}
.ty i{height:1cqw;border-radius:1cqw;background:#D6D4CF}
.ty i.s{width:60%}
.ph{width:100%;max-width:17cqw;aspect-ratio:9/18;border-radius:2.6cqw;border:.8cqw solid var(--dk);background:#fff;padding:1.4cqw;display:flex;flex-direction:column;gap:1.1cqw;box-shadow:0 14px 30px rgba(23,24,27,.18)}
.db{flex:1;display:flex;gap:1.6cqw;min-height:0}
@keyframes barUp{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
.aa{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1cqw}
.aa i{height:1cqw;border-radius:1cqw;background:#D4CCF7}
.aa i.s{width:60%}
.ad{flex:1;display:flex;gap:1.6cqw;min-height:0}
.au{display:flex;align-items:center;gap:1.4cqw;flex-wrap:nowrap;font-size:max(10px,1.4cqw);font-weight:600}
.au span{padding:.9cqw 1.8cqw;border-radius:999px;background:#fff;border:1px solid var(--line);white-space:nowrap}
.au span.ok{border-color:#22A06B;color:#1B7F55;background:#EAF7F0}
.au em{font-style:normal;color:var(--muted2)}
.ck{align-self:stretch;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.9cqw}
.ck li{display:flex;align-items:center;gap:1cqw;padding:.9cqw 1.4cqw;border-radius:1cqw;background:#fff;border:1px solid var(--line);font-size:max(10px,1.35cqw);font-weight:600}
.ck li::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:2.2cqw;height:2.2cqw;border-radius:50%;background:#DDF3E8;color:#1B7F55;font-size:1.2cqw}
.hs{flex:1;display:flex;flex-direction:column;gap:1.2cqw;min-height:0}
.hs small{font-size:max(8px,1.1cqw);color:var(--muted2)}
.ml{flex:1;display:flex;flex-direction:column;gap:1cqw;justify-content:center}

/* =========================================================
   SERVICES v3: Halo Lab-style columns
   ========================================================= */
.sx{padding:160px 0 140px;background:var(--bg)}
.sx__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;align-items:end;margin-bottom:80px}
.sx__title{grid-column:span 8}
.sx__intro{grid-column:span 4;margin:0;padding-bottom:10px;font-size:18px;line-height:1.6;color:var(--muted)}
.sx__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ln)}
.sx__col{position:relative;display:flex;flex-direction:column;gap:14px;padding:44px 32px 40px;border-right:1px solid var(--ln)}
.sx__col:last-child{border-right:0}
.sx__col::before{content:"";position:absolute;inset:10px;border-radius:26px;background:var(--sf);box-shadow:0 28px 60px rgba(23,24,27,.07);opacity:0;transform:scale(.98);transition:opacity .35s ease,transform .35s ease;z-index:0}
.sx__col>*{position:relative;z-index:1}
.sx__col:hover::before,.sx__col:focus-within::before{opacity:1;transform:none}
.sx__top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.sx__num{font-family:var(--mono);font-size:13px;color:var(--muted2);padding-top:6px}
.sx__name{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(36px,3vw,52px);line-height:1;letter-spacing:-.035em}
.sx__name a{transition:color .25s ease}
.sx__col:hover .sx__name a{color:var(--accent)}
.sx__desc{margin:0 0 14px;font-size:16px;line-height:1.55;color:var(--muted);min-height:4.65em}
.sx__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--ln)}
.sx__list li{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(23,24,27,.08)}
.sx__link{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;font-size:16px;font-weight:500;transition:color .2s ease,padding .25s ease}
.sx__link svg{flex:none;opacity:0;transform:translateX(-8px);transition:opacity .2s ease,transform .25s ease;color:var(--accent)}
.sx__link:hover{color:var(--accent);padding-left:6px}
.sx__link:hover svg{opacity:1;transform:none}
.sx__add{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--ln);background:var(--sf);font-size:17px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease,transform .25s ease}
.sx__list li:hover .sx__add,.sx__add:focus-visible,.sx__add[aria-pressed="true"]{opacity:1}
.sx__add:hover{border-color:var(--accent);color:var(--accent)}
.sx__add[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(45deg)}
.sx__more{margin-top:auto;padding-top:22px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;border-bottom:1.5px solid var(--ink);padding-bottom:3px}
.sx__more:hover{color:var(--accent);border-color:var(--accent)}
.sx__toggle{display:none}
@media (hover:none){.sx__add{opacity:1}}
@media (max-width:1200px){
  .sx__title,.sx__intro{grid-column:span 12}
  .sx__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx__col:nth-child(2n){border-right:0}
  .sx__col:nth-child(n+3){border-top:1px solid var(--ln)}
}
@media (max-width:640px){
  .sx{padding:96px 0 72px}
  .sx__head{margin-bottom:40px;gap:20px}
  .sx__grid{grid-template-columns:1fr}
  .sx__col{border-right:0;padding:36px 4px 32px}
  .sx__col:nth-child(n+2){border-top:1px solid var(--ln)}
  .sx__col::before{display:none}
  .sx__desc{min-height:0}
  .sx__list li:nth-child(n+5){display:none}
  .sx__col.is-open .sx__list li{display:flex}
  .sx__toggle{display:inline-flex;align-self:flex-start;margin-top:12px;padding:0;border:0;background:none;font-size:15px;font-weight:600;color:var(--accent);cursor:pointer}
  .sx__more{padding-top:14px}
}
@media (prefers-reduced-motion:reduce){.sx__col::before,.sx__link,.sx__link svg{transition:none}}

/* services v3.1: numbered tops instead of icons */
.sx__top{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.sx__num{padding-top:0;font-family:var(--mono);font-size:14px;color:var(--accent)}
.sx__rule{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent) 0 32px,rgba(23,24,27,.12) 32px);transition:background-size .5s ease}
.sx__col:hover .sx__rule{background:var(--accent)}
.sx__name{font-size:clamp(40px,3.4vw,60px)}
.sx__col .sx__toggle{display:none!important}
@media (max-width:640px){.sx__list li:nth-child(n+5){display:flex}}

/* =========================================================
   SHARED SECTION HEADER
   ========================================================= */
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;align-items:end;margin-bottom:64px}
.sec-head__title{grid-column:span 8}
.sec-head__intro{grid-column:span 4;margin:0;padding-bottom:10px;font-size:18px;line-height:1.6;color:var(--muted)}
@media (max-width:1100px){.sec-head__title,.sec-head__intro{grid-column:span 12}}
@media (max-width:640px){.sec-head{margin-bottom:40px;gap:20px}}

/* =========================================================
   WORK
   ========================================================= */
.wk{padding:140px 0}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tags li{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--ln);background:var(--sf);font-size:14px;font-weight:500;color:#2B2D33}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;transition:transform .2s ease,background-color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn--dark{background:var(--dk);color:#fff}
.btn--line{border:1px solid rgba(23,24,27,.25)}
.sample{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;background:#FDE8E7;color:var(--accent);font-family:var(--mono);font-size:11px;letter-spacing:.04em}
/* ---------- browser frame with scrolling full-page screenshot ---------- */
.frame{position:relative;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 70px rgba(23,24,27,.12);overflow:hidden}
.frame__bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;background:#FBFAF8;border-bottom:1px solid var(--line)}
.frame__bar i{width:9px;height:9px;border-radius:50%;background:#E2E1DC}
.frame__url{margin-left:10px;padding:4px 12px;border-radius:7px;background:#F1F0EC;font-family:var(--mono);font-size:11px;color:var(--muted2)}
.frame__hint{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted2);transition:opacity .3s ease}
.frame__view{position:relative;overflow:hidden;aspect-ratio:16/10;container-type:inline-size}
.frame__page{position:absolute;left:0;right:0;top:0;transition:transform 5.5s cubic-bezier(.45,0,.55,1)}
.frame:hover .frame__page,.frame.is-playing .frame__page{transform:translateY(var(--end,-60%))}
.frame:hover .frame__hint{opacity:0}

/* mock site (sizes in cqw so it scales with the frame) */
.mk{font-family:var(--body);color:var(--mk-ink);background:var(--mk-bg)}
.mk[dir="rtl"]{font-family:'IBM Plex Sans Arabic',sans-serif}
.mk__nav{display:flex;align-items:center;justify-content:space-between;padding:2.6cqw 5cqw;font-family:var(--display);font-weight:800;font-size:2.1cqw;letter-spacing:.04em}
.mk__nav span{display:flex;gap:2.4cqw;align-items:center}
.mk__nav span i{display:block;width:6cqw;height:.7cqw;border-radius:1cqw;background:currentColor;opacity:.25}
.mk__nav span b{padding:1cqw 2cqw;border-radius:5cqw;background:var(--mk-accent);color:var(--mk-on);font-family:var(--body);font-size:1.4cqw;letter-spacing:0}
.mk__hero{margin:0 5cqw;padding:7cqw 6cqw;border-radius:2cqw;background:var(--mk-hero);color:var(--mk-hero-ink);display:grid;grid-template-columns:1.3fr 1fr;gap:4cqw;align-items:center}
.mk__hero small{display:block;margin-bottom:2cqw;font-size:1.3cqw;font-weight:700;letter-spacing:.14em;color:var(--mk-accent)}
.mk__hero strong{display:block;font-family:var(--display);font-size:5.2cqw;line-height:1.02;letter-spacing:-.02em}
.mk[dir="rtl"] .mk__hero strong{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:4.6cqw;line-height:1.3}
.mk__hero em{display:inline-block;margin-top:3cqw;padding:1.4cqw 3cqw;border-radius:1cqw;background:var(--mk-accent);color:var(--mk-on);font-style:normal;font-weight:700;font-size:1.5cqw}
.mk__art{aspect-ratio:1;border-radius:2cqw;background:var(--mk-art)}
.mk__band{display:flex;gap:4cqw;justify-content:center;padding:4cqw 5cqw;opacity:.45}
.mk__band i{display:block;width:10cqw;height:2.4cqw;border-radius:1cqw;background:currentColor}
.mk__sec{padding:4cqw 5cqw}
.mk__sec h4{margin:0 0 3cqw;font-family:var(--display);font-size:3.4cqw;letter-spacing:-.02em}
.mk[dir="rtl"] .mk__sec h4{font-family:'IBM Plex Sans Arabic',sans-serif}
.mk__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw}
.mk__cards div{padding:2.4cqw;border-radius:1.6cqw;background:var(--mk-card);display:flex;flex-direction:column;gap:1.4cqw}
.mk__cards div i{display:block;aspect-ratio:4/3;border-radius:1.2cqw;background:var(--mk-art)}
.mk__cards div b{display:block;height:1.2cqw;width:70%;border-radius:1cqw;background:currentColor;opacity:.7}
.mk__cards div u{display:block;height:.9cqw;width:90%;border-radius:1cqw;background:currentColor;opacity:.2}
.mk__split{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;align-items:center}
.mk__split i{display:block;aspect-ratio:5/4;border-radius:2cqw;background:var(--mk-art)}
.mk__lines{display:flex;flex-direction:column;gap:1.6cqw}
.mk__lines b{display:block;height:2.6cqw;width:80%;border-radius:1cqw;background:currentColor}
.mk__lines u{display:block;height:1cqw;border-radius:1cqw;background:currentColor;opacity:.2}
.mk__lines u.s{width:70%}
.mk__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw}
.mk__stats div{padding:3cqw 2cqw;border-radius:1.6cqw;background:var(--mk-card);text-align:center}
.mk__stats strong{display:block;font-family:var(--display);font-size:3.6cqw;color:var(--mk-accent2)}
.mk__stats span{display:block;margin:1cqw auto 0;height:.9cqw;width:60%;border-radius:1cqw;background:currentColor;opacity:.25}
.mk__cta{margin:4cqw 5cqw;padding:5cqw;border-radius:2cqw;background:var(--mk-accent);color:var(--mk-on);display:flex;align-items:center;justify-content:space-between;font-family:var(--display);font-weight:800;font-size:3.2cqw}
.mk[dir="rtl"] .mk__cta{font-family:'IBM Plex Sans Arabic',sans-serif}
.mk__cta i{display:block;width:16cqw;height:5cqw;border-radius:5cqw;background:var(--mk-on);opacity:.9}
.mk__foot{padding:5cqw;background:var(--mk-foot);color:var(--mk-foot-ink);display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3cqw}
.mk__foot b{display:block;font-family:var(--display);font-size:2.4cqw}
.mk__foot i{display:block;height:.9cqw;margin-top:1.6cqw;border-radius:1cqw;background:currentColor;opacity:.3}

/* ---------- OPTION 1: industry switcher ---------- */
.ind__tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.ind__tab{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;border:1px solid var(--ln);background:var(--sf);font-size:16px;font-weight:600;cursor:pointer;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.ind__tab span{font-family:var(--mono);font-size:12px;opacity:.6}
.ind__tab:hover{border-color:var(--accent)}
.ind__tab[aria-selected="true"]{background:var(--dk);color:#fff;border-color:var(--dk)}
.ind__panel{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(32px,4vw,80px);align-items:center}
.ind__panel[hidden]{display:none}
.ind__panel .frame{animation:panelIn .6s cubic-bezier(.2,.8,.2,1)}
.ind__info{display:flex;flex-direction:column;gap:20px;animation:panelIn .6s cubic-bezier(.2,.8,.2,1) .08s both}
@keyframes panelIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.ind__kicker{font-family:var(--mono);font-size:13px;color:var(--accent)}
.ind__h3{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(32px,3vw,52px);line-height:1.02;letter-spacing:-.03em}
.ind__client{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600}
.ind__desc{margin:0;font-size:18px;line-height:1.6;color:var(--muted)}
.ind__result{display:flex;align-items:baseline;gap:14px;padding:18px 20px;border-radius:16px;background:var(--sf);border:1px solid var(--line)}
.ind__result strong{font-family:var(--display);font-size:34px;color:var(--accent);letter-spacing:-.02em}
.ind__result span{font-size:15px;color:var(--muted)}
.ind__actions{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:1100px){.ind__panel{grid-template-columns:1fr}}
@media (max-width:760px){
  .ind__tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * clamp(20px,5.5vw,104px)) 28px;padding:0 clamp(20px,5.5vw,104px);scrollbar-width:none}
  .ind__tab{flex:none;min-height:46px;padding:0 18px;font-size:15px}
  .ind__result strong{font-size:28px}
}
@media (prefers-reduced-motion:reduce){.frame__page{transition:none}.frame:hover .frame__page,.frame.is-playing .frame__page{transform:none}.ind__panel .frame,.ind__info{animation:none}}

/* =========================================================
   PRODUCTS (dark band)
   ========================================================= */
.pr{padding:140px 0;background:var(--dk);color:#fff}
.sec-head--dark .sec-head__intro{color:#B4B7BF}
.eyebrow--dark{background:#232427;border-color:#33353A;color:#C9CBD1}
.pr .h2 .soft{color:#6E717A}
.pr__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-radius:28px;background:#1F2024;border:1px solid #2C2E33;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease}
.pc:hover{transform:translateY(-6px);border-color:#44464C}
.pc__visual{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center;padding:28px;overflow:hidden}
.pc--mint .pc__visual{background:#5B3DF5}
.pc--member .pc__visual{background:#16A085}
.pc--menu .pc__visual{background:#F2A541}
.pc--salon .pc__visual{background:#D92D29}
.pc__body{display:flex;flex-direction:column;gap:12px;padding:32px 30px 30px}
.pc__kicker{font-family:var(--mono);font-size:12px;color:#9EA1A9}
.pc__name{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(28px,2.4vw,40px);line-height:1.02;letter-spacing:-.03em}
.pc__name a:hover{color:#FF7A6E}
.pc__desc{margin:0;font-size:16px;line-height:1.55;color:#B4B7BF}
.pc__more{margin-top:auto;padding-top:14px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;border-bottom:1.5px solid #fff;padding-bottom:3px}
.pc__more:hover{color:#FF7A6E;border-color:#FF7A6E}
/* product mini-mocks */
.pm{width:100%;max-width:280px;border-radius:18px;background:#fff;color:var(--ink);padding:14px;box-shadow:0 24px 50px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:10px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pc:hover .pm{transform:rotate(-3deg) scale(1.03)}
.pm__bar{display:flex;align-items:center;justify-content:space-between}
.pm__bar b{width:40%;height:8px;border-radius:4px;background:var(--dk)}
.pm__bar i{width:22px;height:22px;border-radius:50%;background:#EDEBE6}
.pm__hero{padding:16px;border-radius:12px;background:#1A1440;color:#fff;display:flex;flex-direction:column;gap:6px}
.pm__hero small{font-size:9px;font-weight:700;letter-spacing:.12em;color:#FFC94D}
.pm__hero strong{font-family:var(--display);font-size:22px}
.pm__hero em{align-self:flex-start;padding:5px 12px;border-radius:999px;background:#FFC94D;color:#1A1440;font-style:normal;font-size:11px;font-weight:700}
.pm__kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pm__kpis span{padding:10px;border-radius:10px;background:#F4F1FF;display:flex;flex-direction:column;gap:6px}
.pm__kpis b{font-size:10px;color:#5B3DF5}
.pm__kpis i{height:6px;width:70%;border-radius:3px;background:#C9BEFF}
.pm__rows{display:flex;flex-direction:column;gap:6px}
.pm__rows span{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:10px;background:#F2F8F6}
.pm__rows i{width:46%;height:6px;border-radius:3px;background:#C5E3DA}
.pm__rows b{font-size:10px;padding:3px 8px;border-radius:999px;background:#DDF3E8;color:#1B7F55}
.pm__rows span:nth-child(2) b{background:#FFF1DA;color:#A86A00}
.pm__chart{height:70px;display:flex;align-items:flex-end;gap:6px;padding:8px;border-radius:10px;background:#F2F8F6}
.pm__chart i{flex:1;border-radius:4px 4px 0 0;background:#16A085}
.pm--menu{background:transparent;box-shadow:none;padding:0;flex-direction:row;align-items:center;justify-content:center;gap:18px}
.pm__phone{width:150px;border-radius:22px;border:6px solid var(--dk);background:#fff;padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 24px 50px rgba(0,0,0,.25)}
.pm__tabs{display:flex;gap:4px}
.pm__tabs b,.pm__tabs i{flex:1;padding:4px 0;border-radius:6px;text-align:center;font-size:10px;font-style:normal}
.pm__tabs b{background:var(--dk);color:#fff}
.pm__tabs i{background:#F1EFEA}
.pm__item{display:flex;gap:8px;align-items:center}
.pm__item i{flex:none;width:30px;height:30px;border-radius:8px;background:#F7D7A3}
.pm__item span{flex:1;display:flex;flex-direction:column;gap:4px}
.pm__item b{height:6px;width:80%;border-radius:3px;background:var(--dk)}
.pm__item u{height:5px;width:40%;border-radius:3px;background:#E3A23A}
.pm__qr{width:84px;height:84px;border-radius:12px;background:#fff;box-shadow:0 18px 36px rgba(0,0,0,.22);background-image:
  linear-gradient(90deg,var(--ink) 50%,transparent 50%),linear-gradient(var(--ink) 50%,transparent 50%);background-size:12px 12px;background-position:6px 6px;background-repeat:repeat;border:10px solid #fff;outline:1px solid #EDEBE6}
.pm__cal{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pm__cal i{height:22px;border-radius:6px;background:#F4EEEE}
.pm__cal i.on{background:#F7C9C7}
.pm__slot{padding:10px 12px;border-radius:10px;background:#FDECEB;font-size:12px;color:var(--ink)}
.pm__slot b{color:var(--accent);margin-right:6px}
@media (max-width:1200px){.pr__grid{grid-template-columns:1fr}}
@media (max-width:640px){.pr{padding:96px 0}.pc{grid-template-columns:1fr}.pc__visual{min-height:240px}}

/* =========================================================
   WHY SMARTDIVS
   ========================================================= */
.wy{padding:140px 0}
.wy__stats{grid-column:span 4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wy__stats div{padding:18px 16px;border-radius:18px;background:var(--sf);border:1px solid var(--line)}
.wy__stats strong{display:block;font-family:var(--display);font-weight:800;font-size:clamp(28px,2.4vw,40px);letter-spacing:-.03em;color:var(--accent)}
.wy__stats span{display:block;margin-top:4px;font-size:13px;line-height:1.35;color:var(--muted2)}
.wy__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ln)}
.wy__item{padding:36px 32px 36px 0;border-bottom:1px solid var(--ln)}
.wy__item:not(:nth-child(3n)){border-right:1px solid var(--ln)}
.wy__item:not(:nth-child(3n+1)){padding-left:32px}
.wy__num{font-family:var(--mono);font-size:13px;color:var(--accent)}
.wy__item h3{margin:14px 0 10px;font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.02em;line-height:1.15}
.wy__item p{margin:0;font-size:16px;line-height:1.55;color:var(--muted);max-width:420px}
@media (max-width:1100px){.wy__stats{grid-column:span 12}}
@media (max-width:900px){.wy__grid{grid-template-columns:1fr}.wy__item{border-right:0!important;padding:28px 0!important}}
@media (max-width:640px){.wy{padding:96px 0}.wy__stats{grid-template-columns:1fr 1fr 1fr;gap:8px}.wy__stats div{padding:14px 12px}}

/* =========================================================
   PROCESS
   ========================================================= */
.ps{padding:40px 0 140px}
.ps__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:none}
.ps__step{position:relative;padding:28px 26px 30px;border-radius:24px;background:var(--sf);border:1px solid var(--line);transition:transform .3s ease,box-shadow .3s ease}
.ps__step:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(23,24,27,.07)}
.ps__step::after{content:"";position:absolute;top:44px;right:-16px;width:16px;height:2px;background:var(--accent)}
.ps__step:last-child::after{display:none}
.ps__num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--mono);font-size:14px}
.ps__step h3{margin:22px 0 10px;font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em}
.ps__step p{margin:0;font-size:16px;line-height:1.55;color:var(--muted)}
@media (max-width:1100px){.ps__steps{grid-template-columns:repeat(2,minmax(0,1fr))}.ps__step::after{display:none}}
@media (max-width:640px){.ps{padding:24px 0 96px}.ps__steps{grid-template-columns:1fr}}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.ts{padding:140px 0;background:#EFECE6}
@media (max-width:640px){.ts{padding:96px 0}}

/* =========================================================
   PLANS
   ========================================================= */
.pl{padding:140px 0}
.pl__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.pl__card{position:relative;display:flex;flex-direction:column;gap:12px;padding:34px 32px 32px;border-radius:28px;background:var(--sf);border:1px solid var(--line)}
.pl__card--hot{background:var(--dk);color:#fff;border-color:var(--dk);transform:translateY(-12px);box-shadow:0 40px 80px rgba(23,24,27,.18)}
.pl__badge{position:absolute;top:24px;right:24px;padding:6px 12px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:700}
.pl__name{margin:0;font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.03em}
.pl__type{font-family:var(--mono);font-size:12px;color:var(--accent)}
.pl__card--hot .pl__type{color:#FF7A6E}
.pl__desc{margin:4px 0 0;font-size:16px;line-height:1.55;color:var(--muted);min-height:3.1em}
.pl__card--hot .pl__desc{color:#B4B7BF}
.pl__price{margin:10px 0 6px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em}
.pl__card--hot .pl__price{border-color:#33353A}
.pl__list{margin:0 0 12px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pl__list li{display:flex;gap:10px;font-size:15.5px;line-height:1.45}
.pl__list li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
.pl__cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border-radius:999px;border:1px solid var(--ln);font-weight:700;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.pl__cta:hover{background:var(--dk);color:#fff;border-color:var(--dk)}
.pl__card--hot .pl__cta{background:var(--accent);border-color:var(--accent);color:#fff}
.pl__card--hot .pl__cta:hover{background:#B8231F}
@media (max-width:1000px){.pl__grid{grid-template-columns:1fr}.pl__card--hot{transform:none}}
@media (max-width:640px){.pl{padding:96px 0}}

/* =========================================================
   FAQ
   ========================================================= */
.fq{padding:40px 0 140px}
.fq__wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,6vw,120px);align-items:start}
.fq__side{position:sticky;top:40px;display:flex;flex-direction:column;gap:16px}
.fq__side .h2{margin-top:6px}
.fq__side p{margin:0;font-size:17px;color:var(--muted)}
.fq__side a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.fq__list{border-top:1px solid var(--ln)}
.fq__item{border-bottom:1px solid var(--ln)}
.fq__item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;cursor:pointer}
.fq__item summary::-webkit-details-marker{display:none}
.fq__item h3{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(20px,1.6vw,26px);letter-spacing:-.015em;line-height:1.25}
.fq__item summary:hover h3{color:var(--accent)}
.fq__icon{position:relative;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--ln);transition:background-color .25s ease,transform .3s ease}
.fq__icon::before,.fq__icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:var(--dk);transition:transform .3s ease,background-color .25s ease}
.fq__icon::after{transform:rotate(90deg)}
.fq__item[open] .fq__icon{background:var(--accent);border-color:var(--accent)}
.fq__item[open] .fq__icon::before,.fq__item[open] .fq__icon::after{background:#fff}
.fq__item[open] .fq__icon::after{transform:rotate(0deg)}
.fq__item p{margin:0;padding:0 60px 28px 0;font-size:17px;line-height:1.65;color:var(--muted)}
@media (max-width:900px){.fq__wrap{grid-template-columns:1fr}.fq__side{position:static}}
@media (max-width:640px){.fq{padding:24px 0 96px}.fq__item p{padding-right:0}}

/* =========================================================
   FINAL CTA + FOOTER
   ========================================================= */
.ct{padding:0 0 24px}
.ct__box{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:22px;padding:clamp(40px,6vw,96px);border-radius:36px;background:var(--accent);color:#fff}
.ct__box::after{content:"";position:absolute;right:-6%;bottom:-30%;width:42%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.18);box-shadow:0 0 0 60px rgba(255,255,255,.05),0 0 0 120px rgba(255,255,255,.04)}
.ct__kicker{font-family:var(--mono);font-size:13px;opacity:.8}
.ct__title{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(40px,6vw,104px);line-height:.98;letter-spacing:-.04em;position:relative;z-index:1}
.ct__text{margin:0;max-width:560px;font-size:19px;line-height:1.55;opacity:.92;position:relative;z-index:1}
.ct__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:10px;position:relative;z-index:1}
.ct__btn{display:inline-flex;align-items:center;gap:10px;min-height:58px;padding:0 30px;border-radius:999px;background:#fff;color:var(--ink);font-weight:700;font-size:16px;transition:transform .2s ease}
.ct__btn:hover{transform:translateY(-2px);color:var(--ink)}
.ct__link{color:#fff;font-weight:600;border-bottom:1.5px solid rgba(255,255,255,.6);padding-bottom:2px}
.ct__link:hover{color:#fff;border-color:#fff}
.ft{padding:72px 0 32px}
.ft__top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:32px;padding-bottom:48px;border-bottom:1px solid var(--ln)}
.ft__brand{display:flex;flex-direction:column;gap:16px}
.ft__brand p{margin:0;max-width:340px;font-size:15px;line-height:1.6;color:var(--muted)}
.ft__col{display:flex;flex-direction:column;gap:10px;font-size:15px}
.ft__col h3{margin:0 0 6px;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2)}
.ft__col a:hover{color:var(--accent)}
.ft__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;font-size:14px;color:var(--muted2)}
.ft__bottom a:hover{color:var(--accent)}
@media (max-width:1000px){.ft__top{grid-template-columns:1fr 1fr}.ft__brand{grid-column:1 / -1}}
/* fixes: links on dark products band,FAQ label width */
.pr a,.pr a:hover{color:#fff}
.pr .pc__name a:hover,.pr .pc__more:hover{color:#FF7A6E}
.fq__side .eyebrow{align-self:flex-start}

/* =====================================================================
   SITE HEADER + MEGA MENU (Halo Lab style)
   ===================================================================== */
:root{--hd-h:80px;--hd-ease:cubic-bezier(.2,.8,.2,1)}
.sd-hero__wrap{padding-top:var(--hd-h)}
.hd{position:fixed;top:0;left:0;right:0;z-index:100;transition:transform .4s var(--hd-ease)}
.hd::before{content:"";position:absolute;inset:0;background:rgba(246,245,242,.84);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--sd-line);opacity:0;transition:opacity .25s}
.hd.is-scrolled::before,.hd.is-open::before,.hd.is-drawer::before{opacity:1}
.hd.is-hidden{transform:translateY(-100%)}
.hd__wrap{position:relative}
.hd__bar{position:relative;display:flex;align-items:center;gap:24px;height:var(--hd-h)}
.hd__brand{flex:0 0 auto}
.hd__nav{flex:1 1 auto;display:flex;justify-content:center}
.hd__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.hd__trigger,.hd__link{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 16px;border:0;border-radius:999px;background:transparent;font:500 15px/1 var(--sd-body);color:var(--sd-ink);cursor:pointer;transition:background .2s}
.hd__trigger:hover,.hd__link:hover,.hd__trigger[aria-expanded="true"]{background:rgba(23,24,27,.06);color:var(--sd-ink)}
.hd__trigger svg{opacity:.55;transition:transform .3s var(--hd-ease)}
.hd__trigger[aria-expanded="true"] svg{transform:rotate(180deg);opacity:1}
.hd__trigger:focus-visible,.hd__link:focus-visible,.hd__cta:focus-visible,.hd__burger:focus-visible,.hd__mega a:focus-visible,.hd__drawer a:focus-visible,.dr__acc:focus-visible{outline:2px solid var(--sd-accent);outline-offset:2px}
.hd__actions{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.hd__cta{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 6px 0 22px;border-radius:999px;background:var(--dk);color:var(--sd-bg);font-weight:700;font-size:15px}
.hd__cta:hover{color:var(--sd-bg)}
.hd__cta i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sd-accent);transition:transform .35s var(--hd-ease)}
.hd__cta:hover i{transform:rotate(-45deg)}
.hd__burger{display:none;position:relative;width:48px;height:48px;border-radius:14px;border:1px solid var(--ln);background:var(--sf);cursor:pointer}
.hd__burger span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:var(--dk);transition:transform .3s var(--hd-ease),top .3s var(--hd-ease)}
.hd__burger span:first-child{top:19px}.hd__burger span:last-child{top:27px}
.hd.is-drawer .hd__burger span:first-child{top:23px;transform:rotate(45deg)}
.hd.is-drawer .hd__burger span:last-child{top:23px;transform:rotate(-45deg)}

/* the morphing shell */
.hd__mega{position:absolute;top:calc(100% + 8px);left:0;width:0;height:0;border-radius:28px;background:var(--sf);border:1px solid var(--sd-line);box-shadow:0 40px 90px rgba(23,24,27,.16),0 6px 16px rgba(23,24,27,.05);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-10px) scale(.99);transform-origin:top center;
  transition:opacity .2s,transform .3s var(--hd-ease),visibility 0s linear .3s,left .4s var(--hd-ease),width .4s var(--hd-ease),height .4s var(--hd-ease)}
.hd.is-open .hd__mega{opacity:1;visibility:visible;transform:none;
  transition:opacity .2s,transform .3s var(--hd-ease),visibility 0s,left .4s var(--hd-ease),width .4s var(--hd-ease),height .4s var(--hd-ease)}
.hd__mega.no-geo{transition:opacity .2s,transform .3s var(--hd-ease),visibility 0s!important}
.hd.is-open .hd__bar::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.hd__pane{position:absolute;top:0;left:0;padding:28px;opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s linear .18s}
.hd__pane.is-on{opacity:1;visibility:visible;transition:opacity .28s .06s,visibility 0s}
.hd__pane--narrow{padding:12px}

.mm--split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}
.mm__eyebrow{margin:0 0 14px 4px;font:500 12px/1 var(--sd-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sd-muted-2)}
.mm__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mm__core{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:20px;background:var(--sd-bg);color:var(--sd-ink);transition:background .2s}
.mm__core:hover{background:#EEECE7;color:var(--sd-ink)}
.mm__num{font:500 12px/1 var(--sd-mono);color:var(--sd-accent)}
.mm__t{display:flex;align-items:center;justify-content:space-between;font:800 22px/1.05 var(--sd-display);letter-spacing:-.025em}
.mm__t b,.mm__fl b{font-weight:500;transition:transform .3s var(--hd-ease)}
.mm__t b{opacity:0;transform:translateX(-6px);color:var(--sd-accent)}
.mm__core:hover .mm__t b{opacity:1;transform:none}
.mm__d{font-size:14px;line-height:1.4;color:var(--sd-muted)}
.mm__items{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:1px}
.mm__items a{display:block;padding:10px 14px;border-radius:12px;font-size:15px;font-weight:500;color:var(--sd-ink);transition:background .15s,color .15s}
.mm__items a:hover{background:var(--sd-bg);color:var(--sd-accent)}

.mm__feat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:24px;border-radius:22px;background-color:var(--sd-accent);color:#fff;overflow:hidden;min-height:260px;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);background-size:32px 32px;transition:transform .35s var(--hd-ease)}
.mm__feat::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%)}
.mm__feat:hover{color:#fff;transform:translateY(-2px)}
.mm__feat--dark{background-color:var(--dk);background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px)}
.mm__feat--dark::before{background:radial-gradient(circle,rgba(217,45,41,.55),transparent 70%)}
.mm__tag{position:absolute;left:24px;top:24px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.18);font:500 12px/1 var(--sd-mono);letter-spacing:.04em}
.mm__ft{position:relative;font:800 26px/1.05 var(--sd-display);letter-spacing:-.03em}
.mm__fd{position:relative;font-size:14.5px;line-height:1.45;opacity:.9}
.mm__fl{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-weight:700;font-size:15px}
.mm__feat:hover .mm__fl b{transform:translateX(4px)}

.mm__inds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.mm__inds a{display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px;color:var(--sd-ink);transition:background .15s}
.mm__inds a:hover{background:var(--sd-bg);color:var(--sd-ink)}
.mm__inds i{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:#fff;font:500 12px/1 var(--sd-mono);font-style:normal;letter-spacing:.04em;transition:transform .3s var(--hd-ease)}
.mm__inds a:hover i{transform:rotate(-6deg) scale(1.05)}
.mm__inds span{display:flex;flex-direction:column;gap:4px;min-width:0}
.mm__inds b{font-size:15px;font-weight:700}
.mm__inds small{font-size:13px;color:var(--sd-muted)}

.mm__prods{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mm__prods a{display:flex;flex-direction:column;gap:6px;padding:10px 10px 16px;border-radius:22px;color:var(--sd-ink);transition:background .2s}
.mm__prods a:hover{background:var(--sd-bg);color:var(--sd-ink)}
.mm__pv{display:grid;place-items:center;height:132px;margin-bottom:8px;border-radius:16px;overflow:hidden}
.mm__win{display:flex;flex-direction:column;gap:7px;width:62%;padding:12px;border-radius:12px;background:#fff;box-shadow:0 16px 30px rgba(0,0,0,.22);transform:translateY(14px) rotate(-3deg);transition:transform .45s var(--hd-ease)}
.mm__prods a:hover .mm__win{transform:translateY(4px) rotate(0)}
.mm__win i{height:7px;border-radius:4px;background:#E7E5E0}
.mm__win i:first-child{width:40%;background:var(--dk)}.mm__win i:nth-child(2){width:85%}.mm__win i:last-child{width:60%}
.mm__prods small{padding:0 6px;font:500 11.5px/1.3 var(--sd-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--sd-muted-2)}
.mm__prods b{padding:0 6px;font:800 20px/1.1 var(--sd-display);letter-spacing:-.02em}
.mm__prods span:last-child{padding:0 6px;font-size:14px;line-height:1.4;color:var(--sd-muted)}

.mm__co{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mm__co a{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:14px;color:var(--sd-ink);transition:background .15s}
.mm__co a:hover{background:var(--sd-bg);color:var(--sd-ink)}
.mm__co b{font-size:15px;font-weight:700}
.mm__co small{font-size:13px;color:var(--sd-muted)}

.hd__scrim{position:fixed;inset:0;z-index:99;background:rgba(23,24,27,.22);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
.hd__scrim.is-on{opacity:1;pointer-events:auto}

/* mobile drawer */
.hd__drawer{position:fixed;top:var(--hd-h);left:0;right:0;bottom:0;overflow-y:auto;overscroll-behavior:contain;background:var(--sd-bg);padding:8px 0 40px;animation:hdDrawer .35s var(--hd-ease)}
.hd__drawer[hidden]{display:none}
@keyframes hdDrawer{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.dr__group{border-bottom:1px solid var(--sd-line)}
.dr__acc{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;padding:0;border:0;background:none;font:800 26px/1 var(--sd-display);letter-spacing:-.03em;color:var(--sd-ink);text-align:left;cursor:pointer}
.dr__acc span{position:relative;width:16px;height:16px}
.dr__acc span::before,.dr__acc span::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;border-radius:2px;background:var(--dk);transition:transform .3s var(--hd-ease)}
.dr__acc span::after{transform:rotate(90deg)}
.dr__acc[aria-expanded="true"] span::after{transform:rotate(0)}
.dr__sub{padding:0 0 18px}
.dr__sub[hidden]{display:none}
.dr__pill{display:flex;flex-direction:column;padding:6px 0 10px}
.dr__pill a{padding:9px 0;font-size:16px;color:var(--sd-muted)}
.dr__pill a:first-child{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--sd-ink)}
.dr__pill em{font:500 12px var(--sd-mono);font-style:normal;color:var(--sd-accent)}
.dr__sub--list{display:flex;flex-direction:column}
.dr__sub--list a{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:17px;font-weight:500}
.dr__sub--list i{width:14px;height:14px;border-radius:4px}
.dr__foot{display:flex;flex-direction:column;gap:14px;padding-top:28px}
.dr__cta{display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:999px;background:var(--sd-accent);color:#fff;font-weight:700;font-size:16px}
.dr__cta:hover{color:#fff}
.dr__foot p{margin:0;text-align:center;font-size:14px;color:var(--sd-muted)}
body.hd-lock{overflow:hidden}

@media (max-width:1279px){
  .mm--split{grid-template-columns:minmax(0,1fr) 240px}
  .mm__inds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mm__ft{font-size:22px}
}
@media (max-width:1023px){
  :root{--hd-h:72px}
  .hd__nav,.hd__mega,.hd__scrim{display:none}
  .hd__burger{display:block}
  .hd__cta{height:44px;padding:0 5px 0 18px;font-size:14px}
  .hd__cta i{width:34px;height:34px}
  .hd__bar{justify-content:space-between}
}
@media (max-width:420px){
  .hd__cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hd,.hd__mega,.hd__pane,.hd__drawer{transition:none!important;animation:none!important}
}
/* header refinements */
.mm__inds{grid-template-columns:repeat(3,minmax(0,1fr))}
.mm__win{width:58%;gap:8px;padding:14px}
.mm__win em{display:block;width:36%;height:16px;margin-top:4px;border-radius:999px;background:currentColor}
.mm__prods li:nth-child(1) .mm__win{color:#5B3DF5}.mm__prods li:nth-child(2) .mm__win{color:#16A085}
.mm__prods li:nth-child(3) .mm__win{color:#F2A541}.mm__prods li:nth-child(4) .mm__win{color:#D92D29}
.hd__scrim{background:rgba(23,24,27,.18);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
@media (max-width:1279px){
  .mm--split{grid-template-columns:minmax(0,1fr);gap:16px}
  .mm__inds{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mm__feat{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:18px 22px}
  .mm__tag{position:relative;left:auto;top:auto}
  .mm__ft{font-size:20px}
  .mm__fd{display:none}
  .mm__fl{margin:0 0 0 auto}
  .mm__cols{gap:8px}
  .mm__core{padding:16px}
  .mm__items a{padding:9px 10px;font-size:14.5px}
}

/* =====================================================================
   V2 POLISH: backgrounds,gradients,motion,friendliness
   ===================================================================== */
:root{--sp:cubic-bezier(.32,.72,0,1)}

/* ---- hero aura (soft gradient glow that drifts and follows the cursor) ---- */
.sd-aura{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.sd-aura i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.sd-aura i:nth-child(1){width:46vw;height:46vw;max-width:760px;max-height:760px;right:-8vw;top:-10vw;background:radial-gradient(circle,rgba(255,122,110,.55),rgba(255,122,110,0) 70%);animation:sdDrift1 18s ease-in-out infinite}
.sd-aura i:nth-child(2){width:34vw;height:34vw;max-width:560px;max-height:560px;right:18vw;bottom:-12vw;background:radial-gradient(circle,rgba(255,196,120,.45),rgba(255,196,120,0) 70%);animation:sdDrift2 22s ease-in-out infinite}
.sd-aura i:nth-child(3){width:26vw;height:26vw;max-width:420px;max-height:420px;left:var(--ax,60%);top:var(--ay,40%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(217,45,41,.22),rgba(217,45,41,0) 70%);transition:left .9s var(--sp),top .9s var(--sp);opacity:.7}
@keyframes sdDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,5vw) scale(1.12)}}
@keyframes sdDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-4vw) scale(.9)}}
.sd-hero__wrap{z-index:1}
.sd-note{display:inline-flex;align-items:center;gap:8px;margin-left:18px;font-size:14px;color:var(--sd-muted)}
.sd-note i{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:sdPing 2s infinite}
@keyframes sdPing{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}80%,100%{box-shadow:0 0 0 9px rgba(34,197,94,0)}}
@media (max-width:640px){.sd-note{display:flex;margin:14px 0 0}}

/* ---- intro word fill (Grizzly-style) ---- */
.sd-intro__text .wf{color:rgba(23,24,27,.16);transition:color .45s ease,opacity .45s ease}
.sd-intro__text .wf.on{color:var(--sd-ink)}
.sd-intro__text a.wf{opacity:.3}.sd-intro__text a.wf.on{opacity:1}
.sd-intro__text--m .wf{transition:color .5s ease}

/* ---- section backgrounds: a light / white / tint / dark rhythm ---- */
.sx{position:relative;background:var(--sf);border-radius:48px 48px 0 0;overflow:hidden}
.sx::before{content:"";position:absolute;right:-10%;top:-20%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,122,110,.12),transparent 65%);pointer-events:none}
.sx>.sd-wrap{position:relative}
.wk{position:relative;background:
  radial-gradient(55% 45% at 0% 0%,rgba(255,122,110,.16),transparent 70%),
  radial-gradient(45% 40% at 100% 70%,rgba(91,61,245,.10),transparent 70%),
  linear-gradient(180deg,#fff 0%,var(--sd-bg) 18%,var(--sd-bg) 100%)}
.pr{position:relative;z-index:1;border-radius:48px;overflow:hidden;background:
  radial-gradient(40% 50% at 12% 0%,rgba(217,45,41,.38),transparent 70%),
  radial-gradient(35% 45% at 95% 30%,rgba(91,61,245,.30),transparent 70%),
  radial-gradient(45% 40% at 55% 110%,rgba(22,160,133,.22),transparent 70%),
  var(--dk)}
.pr::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent)}
.pr>.sd-wrap{position:relative}
.wy{position:relative;background:var(--sf);margin-top:-48px;padding-top:188px}
.ps{background:linear-gradient(180deg,#fff 0%,#FFF3EE 100%);padding-top:60px}
.ts{background:
  radial-gradient(50% 60% at 100% 0%,rgba(255,196,120,.25),transparent 70%),
  linear-gradient(180deg,#FFF3EE 0%,#F3F0FF 100%)}
.pl{background:linear-gradient(180deg,#F3F0FF 0%,#fff 40%)}
.fq{background:var(--sf);padding-top:60px}
.ct{background:var(--sf)}
.ct__box{background:
  radial-gradient(60% 80% at 100% 0%,rgba(255,170,110,.55),transparent 60%),
  radial-gradient(50% 70% at 0% 100%,rgba(142,23,20,.55),transparent 60%),
  linear-gradient(135deg,#E8403A,#C8221E)}
.sx__head,.sec-head{position:relative}
@media (max-width:640px){
  .sx{border-radius:32px 32px 0 0}
  .pr{border-radius:32px}
  .wy{margin-top:-32px;padding-top:128px}
}

/* ---- hand-drawn marks (Grizzly) ---- */
.scrib,.circ{position:relative;display:inline-block;white-space:nowrap}

/* ---- stickers (draggable) ---- */
.stk{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:var(--sf);border:1px solid var(--sd-line);box-shadow:0 12px 30px rgba(23,24,27,.12);font-weight:700;font-size:15px;white-space:nowrap;transform:rotate(var(--r,0deg)) translate(var(--dx,0px),var(--dy,0px));cursor:grab;user-select:none;touch-action:none;transition:box-shadow .2s,scale .25s var(--sp)}
.stk:hover{scale:1.06}
.stk.is-drag{cursor:grabbing;scale:1.1;box-shadow:0 24px 50px rgba(23,24,27,.22);transition:none}
.js .stk{opacity:0;translate:0 14px;transition:opacity .5s,translate .7s var(--sp),box-shadow .2s,scale .25s var(--sp)}
.js .stk.in{opacity:1;translate:0 0}
@media (max-width:900px){.stk{font-size:13px;padding:8px 12px;top:-30px!important}}
@media (max-width:640px){.stk{position:relative;left:auto!important;right:auto!important;top:auto!important;align-self:flex-start;margin-bottom:14px}.sx__head .stk{display:none}}

/* ---- reveal on scroll ---- */
.js .rv{opacity:0;translate:0 34px;transition:opacity .8s ease,translate 1s var(--sp),transform .5s var(--sp),box-shadow .5s;transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),0s,0s}
.js .rv.in{opacity:1;translate:0 0}
.js .h2 .circ,.js .h2 .scrib{opacity:0;transition:opacity .6s ease .35s}.js .h2.in .circ,.js .h2.in .scrib{opacity:1}
.js .h2 .rw,.js .ct__title .rw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js .h2 .rw>span,.js .ct__title .rw>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--sp);transition-delay:calc(var(--i,0) * 45ms)}
.js .h2.in .rw>span,.js .ct__title.in .rw>span{transform:none}
.js .ps__step::after{transform:scaleX(0);transform-origin:left;transition:transform .6s ease .6s}
.js .ps__step.in::after{transform:scaleX(1)}

/* ---- magnetic + cursor follower ---- */
.sd-mag{transition:transform .5s var(--sp)}
.cur{position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--sd-accent);opacity:0;transition:width .35s var(--sp),height .35s var(--sp),margin .35s var(--sp),opacity .2s,background .3s;display:grid;place-items:center;mix-blend-mode:normal}
.cur.on{opacity:1}
.cur.big{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--dk)}
.cur span{font-size:13px;font-weight:700;color:#fff;opacity:0;transition:opacity .2s;white-space:nowrap}
.cur.big span{opacity:1}
.cur.link{width:40px;height:40px;margin:-20px 0 0 -20px;background:rgba(217,45,41,.16)}
@media (pointer:coarse){.cur{display:none}}

/* ---- products / cards hover lift ---- */
.pc{transition:transform .5s var(--sp)}
.pc:hover{transform:translateY(-6px)}
.wy__item{transition:background .3s}
.wy__item:hover{background:linear-gradient(180deg,rgba(255,122,110,.06),transparent)}
.wy__item h3{transition:color .25s}.wy__item:hover h3{color:var(--sd-accent)}
.pl__card{transition:transform .5s var(--sp),box-shadow .5s}
.pl__card:not(.pl__card--hot):hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(23,24,27,.08)}

/* ---- CTA rotating badge ---- */
.ct__box{isolation:isolate}
.ct__badge{position:absolute;right:clamp(24px,5vw,80px);top:clamp(24px,5vw,72px);z-index:2;display:grid;place-items:center;width:150px;height:150px;color:#fff}
.ct__badge:hover{color:#fff}
.ct__badge svg{position:absolute;inset:0;width:100%;height:100%;animation:sdSpin 14s linear infinite}
.ct__badge text{font:700 13.5px var(--sd-mono);letter-spacing:.14em;fill:#fff}
.ct__badge>span{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;color:var(--sd-accent);transition:transform .4s var(--sp)}
.ct__badge:hover>span{transform:rotate(45deg) scale(1.08)}
@keyframes sdSpin{to{transform:rotate(360deg)}}
.wave{display:inline-block;transform-origin:70% 70%;animation:sdWave 2.4s ease-in-out infinite}
@keyframes sdWave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
@media (max-width:760px){.ct__badge{width:104px;height:104px;top:20px;right:20px}.ct__badge text{font-size:12px}.ct__badge>span{width:46px;height:46px}.ct__title{padding-right:0}.ct__kicker{margin-top:84px}}

/* ---- big marquee (Halo Lab) ---- */
.bm{background:var(--sf);padding:clamp(40px,6vw,96px) 0;overflow:hidden}

/* ---- footer: dark,rounded,giant wordmark ---- */
.ft{position:relative;background:
  radial-gradient(40% 60% at 85% 100%,rgba(217,45,41,.35),transparent 70%),
  var(--dk);color:#fff;border-radius:48px 48px 0 0;overflow:hidden}
.ft .sd-brand{color:#fff}
.ft .sd-brand img{mix-blend-mode:normal;background:#fff;border-radius:9px;padding:3px}
.ft__top{border-color:rgba(255,255,255,.12)}
.ft__brand p{color:#A9ACB3}
.ft__col{color:#D9DBE0}
.ft__col a{color:#D9DBE0}
.ft__col a:hover{color:#FF7A6E}
.ft__col h3{color:#80838B}
.ft__word{display:flex;justify-content:center;gap:0;padding:40px 0 8px;font-family:var(--sd-display);font-weight:800;font-size:clamp(64px,17vw,300px);line-height:.85;letter-spacing:-.06em;user-select:none}
.ft__word span{background:linear-gradient(180deg,#fff 20%,rgba(255,255,255,.08));-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform .8s var(--sp)}
.ft__word span:last-child{background-image:linear-gradient(180deg,#FF7A6E 20%,rgba(217,45,41,.1))}
.ft__word:hover span:first-child{transform:translateY(-6px) rotate(-2deg)}
.ft__word:hover span:last-child{transform:translateY(-6px) rotate(2deg)}
.ft__bottom{color:#80838B;border-top:1px solid rgba(255,255,255,.12)}
.ft__bottom a{color:#A9ACB3}
.ft__bottom a:hover{color:#FF7A6E}
.ft__cup{display:inline-block;animation:sdWave 3s ease-in-out infinite}
@media (max-width:640px){.ft{border-radius:32px 32px 0 0}}

/* ---- mobile app-style tab bar (six2eight, improved) ---- */
.tb,.sh,.sh-scrim{display:none}
@media (max-width:767px){
  .hd__actions{display:none}
  .tb{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:120;display:grid;grid-template-columns:1fr 1fr 76px 1fr 1fr;align-items:center;height:68px;padding:0 6px;border-radius:26px;
    background:rgba(23,24,27,.9);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 18px 40px rgba(23,24,27,.28),inset 0 1px 0 rgba(255,255,255,.08);
    transition:transform .45s var(--sp)}
  .tb.is-down{transform:translateY(calc(100% + 24px))}
  .tb__ink{position:absolute;top:8px;left:0;width:var(--iw,60px);height:52px;border-radius:18px;background:rgba(255,255,255,.1);transform:translateX(var(--ix,6px));transition:transform .5s var(--sp),width .5s var(--sp),opacity .3s;pointer-events:none}
  .tb__item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:52px;border:0;background:none;color:#9A9DA5;font:600 11px/1 var(--sd-body);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .25s}
  .tb__item svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--sp)}
  .tb__item.is-on{color:#fff}
  .tb__item.is-on svg{transform:translateY(-1px) scale(1.08);stroke:#FF7A6E}
  .tb__item:active svg{transform:scale(.88)}
  .tb__talk{position:relative;justify-self:center;width:64px;height:64px;margin-top:-30px;border-radius:50%;border:5px solid var(--sd-bg);background:linear-gradient(145deg,#FF5A4F,#C8221E);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 26px rgba(217,45,41,.45);-webkit-tap-highlight-color:transparent;transition:transform .35s var(--sp)}
  .tb__talk::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(217,45,41,.5);animation:sdRing 2.6s ease-out infinite}
  .tb__talk:active{transform:scale(.9)}
  .tb__talk svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linejoin:round}
  .tb__talk svg .dot{fill:#fff;stroke:none;animation:sdDots 1.4s ease-in-out infinite}
  .tb__talk svg .dot:nth-of-type(2){animation-delay:.15s}.tb__talk svg .dot:nth-of-type(3){animation-delay:.3s}
  .tb__hint{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);padding:9px 14px;border-radius:14px;background:var(--sf);color:var(--sd-ink);font:700 13px/1 var(--sd-body);white-space:nowrap;box-shadow:0 10px 26px rgba(23,24,27,.18);opacity:0;pointer-events:none;transition:opacity .4s,transform .5s var(--sp)}
  .tb__hint::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:#fff}
  .tb__hint.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .tray{bottom:calc(92px + env(safe-area-inset-bottom))}
  body{padding-bottom:96px}
  .ft{padding-bottom:110px}

  .sh-scrim{display:block;position:fixed;inset:0;z-index:130;background:rgba(23,24,27,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .4s}
  .sh-scrim.on{opacity:1;pointer-events:auto}
  .sh{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:140;max-height:88svh;border-radius:28px 28px 0 0;background:var(--sf);box-shadow:0 -20px 60px rgba(23,24,27,.2);transform:translateY(105%);transition:transform .55s var(--sp);padding-bottom:env(safe-area-inset-bottom)}
  .sh[hidden]{display:none}
  .sh.on{transform:translateY(var(--drag,0px))}
  .sh.is-drag{transition:none}
  .sh__grab{display:grid;place-items:center;height:26px;cursor:grab;touch-action:none}
  .sh__grab span{width:44px;height:5px;border-radius:5px;background:#D9D7D2}
  .sh__head{display:flex;align-items:center;justify-content:space-between;padding:0 20px 10px;touch-action:none}
  .sh__head h2{margin:0;font:800 28px/1.1 var(--sd-display);letter-spacing:-.03em}
  .sh__x{width:38px;height:38px;border-radius:50%;border:0;background:var(--sd-bg);font-size:24px;line-height:1;color:var(--sd-ink);cursor:pointer}
  .sh__body{overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 28px}
  .sh__lead{margin:0 4px 16px;font-size:15px;color:var(--sd-muted)}
  .sh .sg,.sh .tk,.sh .sh__card,.sh .mo-prods a,.sh .mo-chips a,.sh .mo-grid a{opacity:0;transform:translateY(16px);transition:opacity .4s,transform .6s var(--sp)}
  .sh.on .sg,.sh.on .tk,.sh.on .sh__card,.sh.on .mo-prods a,.sh.on .mo-chips a,.sh.on .mo-grid a{opacity:1;transform:none;transition-delay:calc(.08s + var(--i,0) * 45ms)}

  .sg{margin-bottom:12px;border-radius:22px;padding:6px;background:var(--tint)}
  .sg--1{--tint:#FDEEEC;--c:#D92D29}.sg--2{--tint:#EEF0FB;--c:#4253D6}.sg--3{--tint:#E9F6EF;--c:#13915F}.sg--4{--tint:#FFF4E2;--c:#C77A0A}
  .sg__head,.sg__item{display:flex;align-items:center;gap:14px;padding:12px 12px;border-radius:16px;color:var(--sd-ink)}
  .sg__head em{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--c);color:#fff;font:500 13px var(--sd-mono);font-style:normal}
  .sg__head b{font:800 20px/1.1 var(--sd-display);letter-spacing:-.02em}
  .sg__head small,.sg__item small{display:block;margin-top:3px;font-size:13px;color:var(--sd-muted)}
  .sg__head span,.sg__item span{flex:1 1 auto;min-width:0}
  .sg__item{background:var(--sf);margin-top:4px}
  .sg__item b{font-size:15.5px;font-weight:700}
  .sg__head i,.sg__item i{font-style:normal;color:var(--c);font-weight:700;transition:transform .3s var(--sp)}
  .sg__item:active{transform:scale(.98)}
  .sh__card{display:flex;align-items:center;gap:14px;margin-top:6px;padding:18px;border-radius:22px;background:linear-gradient(135deg,#E8403A,#C8221E);color:#fff}
  .sh__card:hover{color:#fff}
  .sh__card b{font:800 19px/1.15 var(--sd-display)}
  .sh__card small{display:block;margin-top:4px;font-size:13.5px;opacity:.9}
  .sh__card span{flex:1}.sh__card i{font-style:normal;font-weight:700}

  .tk{display:flex;align-items:center;gap:14px;margin-bottom:10px;padding:14px;border-radius:20px;background:var(--sd-bg);color:var(--sd-ink)}
  .tk i{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;color:#fff;font-style:normal;font-weight:800}
  .tk i svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .tk b{font-size:16.5px;font-weight:700}.tk small{display:block;margin-top:3px;font-size:13.5px;color:var(--sd-muted)}
  .tk span{flex:1;min-width:0}.tk em{font-style:normal;font-weight:700;color:var(--sd-accent)}
  .tk--plan{background:#FDEEEC}.tk--plan i{background:var(--sd-accent)}
  .tk[hidden]{display:none}

  .sh__label{margin:8px 4px 10px;font:500 12px var(--sd-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sd-muted-2)}
  .mo-prods{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
  .mo-prods a{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;background:var(--sd-bg);color:var(--sd-ink)}
  .mo-prods i{width:30px;height:30px;border-radius:10px}
  .mo-prods b{font-size:15px}.mo-prods small{display:block;margin-top:2px;font-size:12.5px;color:var(--sd-muted)}
  .mo-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
  .mo-chips a{padding:10px 14px;border-radius:999px;border:1px solid var(--sd-line);font-size:14px;font-weight:600;color:var(--sd-ink)}
  .mo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .mo-grid a{padding:16px;border-radius:16px;background:var(--sd-bg);font-weight:700;color:var(--sd-ink)}
  .sh__foot{margin:22px 4px 0;text-align:center;font-size:13px;color:var(--sd-muted)}
}
@media (min-width:768px) and (max-width:1023px){.hd__burger{display:block}}
@media (max-width:767px){.hd__burger{display:none}}
@keyframes sdRing{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.45);opacity:0}}
@keyframes sdDots{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@media (prefers-reduced-motion:reduce){
  .sd-aura i,.wave,.ft__cup,.ct__badge svg,.tb__talk::before,.tb__talk svg .dot{animation:none!important}
  .js .rv,.js .stk,.js .h2 .rw>span,.js .ct__title .rw>span{opacity:1!important;transform:none!important;translate:none!important}
}
/* v2 fixes */
.tray:not(.is-open){box-shadow:none;visibility:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),visibility 0s linear .5s}
.tray.is-open{visibility:visible}
@media (max-width:767px){.tray:not(.is-open){transform:translateY(calc(100% + 140px))}}
.ct__badge>svg{position:absolute;inset:0;width:100%;height:100%;animation:sdSpin 14s linear infinite}
.ct__badge svg{position:static;animation:none;width:auto;height:auto}
.ct__badge>svg{position:absolute;width:100%;height:100%;animation:sdSpin 14s linear infinite}
@media (max-width:767px){.tb__talk{border:0;box-shadow:0 0 0 5px rgba(23,24,27,.92),0 12px 26px rgba(217,45,41,.45)}}

/* =====================================================================
   DAY / NIGHT THEME
   ===================================================================== */
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark;
  --sd-bg:#0D0E10;--bg:#0D0E10;--sf:#151619;--dk:#1E1F23;
  --sd-ink:#F2F1EE;--ink:#F2F1EE;--sd-muted:#A9ACB4;--muted:#A9ACB4;--sd-muted-2:#8E919A;--muted2:#8E919A;
  --sd-logo:#6E717A;--sd-line:rgba(255,255,255,.1);--line:rgba(255,255,255,.12);--ln:rgba(255,255,255,.12)}
/* mock screens keep their light look */
html[data-theme="dark"] :is(.frame,.browser,.pm,.pm__phone,.pm__qr,.mm__win,.ct__btn,.ct__badge>span,.ph){
  --ink:#17181B;--sd-ink:#17181B;--line:rgba(23,24,27,.12);--ln:rgba(23,24,27,.12);--sd-line:rgba(23,24,27,.1);
  --muted:#4A4D55;--sd-muted:#4A4D55;--muted2:#5B5E66;--bg:#F6F5F2;--sd-bg:#F6F5F2;--sf:#fff;--dk:#17181B}
html[data-theme="dark"] .ct__btn,html[data-theme="dark"] .ct__btn:hover{color:#17181B}

/* hero */
html[data-theme="dark"] .sd-grid{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px)}
html[data-theme="dark"] .sd-grid--lit{background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px)}
html[data-theme="dark"] .sd-aura i{opacity:.4}
html[data-theme="dark"] .sd-pillar{box-shadow:0 10px 30px rgba(0,0,0,.35)}
html[data-theme="dark"] .sd-brand img{mix-blend-mode:normal;background:#fff;border-radius:9px;padding:3px}
html[data-theme="dark"] .sd-slot{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .sd-intro__text .wf{color:rgba(242,241,238,.16)}
html[data-theme="dark"] .sd-intro__text .wf.on{color:var(--sd-ink)}

/* header + mega menu */
html[data-theme="dark"] .hd::before{background:rgba(13,14,16,.78)}
html[data-theme="dark"] .hd__trigger:hover,html[data-theme="dark"] .hd__link:hover,html[data-theme="dark"] .hd__trigger[aria-expanded="true"]{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .hd__cta{background:#F2F1EE;color:#17181B}
html[data-theme="dark"] .hd__cta:hover{color:#17181B}
html[data-theme="dark"] .hd__mega{box-shadow:0 40px 90px rgba(0,0,0,.55)}
html[data-theme="dark"] .mm__core:hover{background:#1F2024}
html[data-theme="dark"] .hd__scrim{background:rgba(0,0,0,.45)}
html[data-theme="dark"] .hd__burger{background:var(--sf)}

/* sections */
html[data-theme="dark"] .sx{background:#131417}
html[data-theme="dark"] .sx::before{background:radial-gradient(circle,rgba(255,90,79,.14),transparent 65%)}
html[data-theme="dark"] .sx__list li{border-color:var(--ln)}
html[data-theme="dark"] .sx__col::before{background:#1B1C20;box-shadow:0 28px 60px rgba(0,0,0,.4)}
html[data-theme="dark"] .wk{background:
  radial-gradient(55% 45% at 0% 0%,rgba(255,90,79,.14),transparent 70%),
  radial-gradient(45% 40% at 100% 70%,rgba(91,61,245,.16),transparent 70%),
  linear-gradient(180deg,#131417 0%,var(--sd-bg) 18%,var(--sd-bg) 100%)}
html[data-theme="dark"] .pr{box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
html[data-theme="dark"] .wy{background:#131417}
html[data-theme="dark"] .ps{background:linear-gradient(180deg,#131417 0%,#1A1312 100%)}
html[data-theme="dark"] .ts{background:radial-gradient(50% 60% at 100% 0%,rgba(255,170,90,.10),transparent 70%),linear-gradient(180deg,#1A1312 0%,#14121C 100%)}
html[data-theme="dark"] .pl{background:linear-gradient(180deg,#14121C 0%,#131417 40%)}
html[data-theme="dark"] .fq,html[data-theme="dark"] .ct,html[data-theme="dark"] .bm{background:#131417}
html[data-theme="dark"] .pl__card--hot{background:linear-gradient(160deg,#2B1716,#1E1F23 60%);border-color:rgba(255,90,79,.45);box-shadow:0 40px 80px rgba(0,0,0,.5)}
html[data-theme="dark"] .pl__cta:hover{background:#F2F1EE;color:#17181B;border-color:#F2F1EE}
html[data-theme="dark"] .ps__step,html[data-theme="dark"] .pl__card,html[data-theme="dark"] .wy__stats div{box-shadow:none}
html[data-theme="dark"] .ft{box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
html[data-theme="dark"] .stk{box-shadow:0 12px 30px rgba(0,0,0,.45)}
html[data-theme="dark"] .cur.big{background:#F2F1EE}html[data-theme="dark"] .cur.big span{color:#17181B}
html[data-theme="dark"] .tray{background:#F2F1EE;color:#17181B}

/* mobile sheets */
@media (max-width:767px){
  html[data-theme="dark"] .tb{background:rgba(30,31,35,.88);box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
  html[data-theme="dark"] .tb__talk{box-shadow:0 0 0 5px rgba(30,31,35,.95),0 12px 26px rgba(217,45,41,.45)}
  html[data-theme="dark"] .sh{box-shadow:0 -20px 60px rgba(0,0,0,.6)}
  html[data-theme="dark"] .sh__grab span{background:#3A3C42}
  html[data-theme="dark"] .sg--1{--tint:rgba(217,45,41,.16)}
  html[data-theme="dark"] .sg--2{--tint:rgba(66,83,214,.18)}
  html[data-theme="dark"] .sg--3{--tint:rgba(19,145,95,.18)}
  html[data-theme="dark"] .sg--4{--tint:rgba(199,122,10,.18)}
  html[data-theme="dark"] .sg__item{background:#1B1C20}
  html[data-theme="dark"] .tk--plan{background:rgba(217,45,41,.16)}
  html[data-theme="dark"] .tb__hint{background:#F2F1EE;color:#17181B}
  html[data-theme="dark"] .tb__hint::after{border-top-color:#F2F1EE}
}

/* ---- the switch ---- */
.tg{position:relative;flex:0 0 auto;width:64px;height:36px;padding:0;border-radius:999px;border:1px solid var(--ln);background:var(--sf);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .4s,border-color .4s}
.tg:focus-visible{outline:2px solid var(--sd-accent);outline-offset:3px}
.tg__knob{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#FFC24B;box-shadow:0 2px 8px rgba(255,170,40,.55);display:grid;place-items:center;transition:transform .55s var(--sp,cubic-bezier(.32,.72,0,1)),background .4s,box-shadow .4s}
.tg__knob svg{width:18px;height:18px;overflow:hidden}
.tg__sun{fill:#fff;transition:transform .55s var(--sp,cubic-bezier(.32,.72,0,1))}
.tg__rays{stroke:#fff;stroke-width:2;stroke-linecap:round;transform-origin:12px 12px;transition:transform .55s var(--sp,cubic-bezier(.32,.72,0,1)),opacity .3s}
.tg__bite{fill:#FFC24B;transform:translate(14px,-14px);transition:transform .55s var(--sp,cubic-bezier(.32,.72,0,1)),fill .4s}
.tg__stars{position:absolute;inset:0;pointer-events:none}
.tg__stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;transition:opacity .4s .15s}
.tg__stars i:nth-child(1){left:12px;top:9px}.tg__stars i:nth-child(2){left:20px;top:21px;width:2px;height:2px}.tg__stars i:nth-child(3){left:9px;top:22px;width:2px;height:2px}
.tg:hover .tg__rays{transform:rotate(45deg)}
html[data-theme="dark"] .tg{background:#24252B;border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .tg__knob{transform:translateX(28px);background:#E9E6F5;box-shadow:0 2px 10px rgba(180,170,255,.4)}
html[data-theme="dark"] .tg__rays{transform:rotate(90deg) scale(.4);opacity:0}
html[data-theme="dark"] .tg__bite{transform:translate(5px,-5px);fill:#E9E6F5}
html[data-theme="dark"] .tg__sun{fill:#B9B3D6}
html[data-theme="dark"] .tg__stars i{opacity:.9}
@media (max-width:1023px){.tg{margin-left:auto}}
@media (max-width:767px){.tg{width:58px;height:34px}.tg__knob{width:26px;height:26px}html[data-theme="dark"] .tg__knob{transform:translateX(24px)}}

/* circular reveal when switching */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}
html.no-trans *,html.no-trans *::before,html.no-trans *::after{transition:none!important}
html[data-theme="dark"] :is(.sd-chip,.chip,.tags li){color:#D9DBE0}

/* ===== v3: hero cards "We + word + description",typing pills ===== */
.sd-pillar__txt{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.sd-pillar__we{font-size:15px;font-weight:500;opacity:.6;letter-spacing:.01em;line-height:1}
.sd-pillar__txt .sd-pillar__name{margin-top:0}
.sd-pillar__desc{font-size:15px;line-height:1.3;opacity:.72;font-weight:500}
.sd-pillar.is-active .sd-pillar__we,.sd-pillar.is-active .sd-pillar__desc{opacity:.9}
.sd-chip-pop{animation:sdChipPop .55s cubic-bezier(.34,1.56,.64,1) both}
.sd-chip-out{animation:sdChipOut .25s ease both}
@keyframes sdChipPop{from{opacity:0;transform:translateY(10px) scale(.6)}to{opacity:1;transform:none}}
@keyframes sdChipOut{to{opacity:0;transform:scale(.85)}}
@media (max-width:760px){.sd-pillar__desc{font-size:13px}.sd-pillar__we{font-size:13px}}

/* ===== v3: showreel ===== */
.sd-reel{height:330vh}
.sd-reel__frame{left:0;top:0;transform-origin:0 0;will-change:transform;cursor:pointer;transition:none}
.sd-play{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:14px;padding:10px 26px 10px 10px;border:0;border-radius:999px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#17181B;font:700 17px/1 var(--sd-body);cursor:pointer;box-shadow:0 20px 50px rgba(0,0,0,.3);transition:transform .45s var(--sp,cubic-bezier(.32,.72,0,1)),opacity .2s}
.sd-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.sd-play__ico{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--sd-accent)}
.sd-play__ico::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(217,45,41,.45);animation:sdRing 2.4s ease-out infinite}
.sd-play__ico svg{width:24px;height:24px;margin-left:3px;fill:#fff}
.sd-play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.sd-reel-m__video{position:relative}
.sd-play--m{padding:6px 18px 6px 6px;font-size:14px;gap:10px}
.sd-play--m .sd-play__ico{width:42px;height:42px}
.sd-play--m .sd-play__ico svg{width:18px;height:18px}
.vb{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(16px,4vw,64px);background:rgba(10,10,12,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .35s}
.vb[hidden]{display:none}
.vb.on{opacity:1}
.vb__box{width:min(1280px,100%,calc((100vh - 120px) * 16 / 9));aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 40px 100px rgba(0,0,0,.6);transform:scale(.94);transition:transform .5s var(--sp,cubic-bezier(.32,.72,0,1))}
.vb.on .vb__box{transform:none}
.vb__video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.vb__x{position:absolute;top:20px;right:20px;width:52px;height:52px;border-radius:50%;border:0;background:#fff;color:#17181B;font-size:30px;line-height:1;cursor:pointer;transition:transform .3s}
.vb__x:hover{transform:rotate(90deg)}
.vb__x:focus-visible{outline:3px solid var(--sd-accent);outline-offset:3px}

/* ===== v3: services hint,no stickers drag ===== */
.sx__hint{display:flex;align-items:center;gap:14px;margin:0 0 28px;padding:14px 20px;border-radius:18px;background:var(--sd-bg);border:1px dashed rgba(217,45,41,.35);font-size:15.5px;line-height:1.45;color:var(--sd-muted);max-width:760px}
.sx__hint b{color:var(--sd-ink)}
.sx__hint-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sd-accent);color:#fff;font-weight:700;font-size:20px;line-height:1;animation:sdHintPulse 2.4s ease-in-out infinite}
.sx__hint-key{display:inline-grid;place-items:center;width:22px;height:22px;margin:0 2px;border-radius:50%;border:1.5px solid var(--sd-accent);color:var(--sd-accent);font-weight:700;font-size:14px;line-height:1;vertical-align:-4px}
@keyframes sdHintPulse{0%,100%{box-shadow:0 0 0 0 rgba(217,45,41,.35)}50%{box-shadow:0 0 0 8px rgba(217,45,41,0)}}
.sx__add.nudge{animation:sdNudge .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes sdNudge{0%{transform:scale(1)}35%{transform:scale(1.35) rotate(90deg);background:var(--sd-accent);color:#fff;border-color:var(--sd-accent)}100%{transform:scale(1)}}
.stk{cursor:default;user-select:auto;touch-action:auto}
.stk:hover{scale:1}
html[data-theme="dark"] .sx__hint{background:#1B1C20}
@media (max-width:640px){.sx__hint{font-size:14px;padding:12px 14px;align-items:flex-start}}

/* ===== v3: work — several projects per industry ===== */
.ind__panel{display:block}
.ind__slide{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(32px,4vw,80px);align-items:center}
.ind__slide[hidden]{display:none}
.ind__slide .frame{animation:panelIn .6s cubic-bezier(.2,.8,.2,1)}
.ind__n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--sd-accent);color:#fff;font:700 12px/1 var(--sd-body);font-style:normal}
.ind__pager{display:flex;align-items:center;gap:16px;margin:0 0 22px;padding:10px 10px 10px 18px;border-radius:999px;background:var(--sf);border:1px solid var(--ln)}
.ind__count{flex:none;font:500 13px var(--sd-mono);color:var(--sd-muted-2)}
.ind__count b{color:var(--sd-accent);font-weight:500}
.ind__picks{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.ind__picks::-webkit-scrollbar{display:none}
.ind__pick{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:0;background:transparent;color:var(--sd-muted);font:600 14px/1 var(--sd-body);cursor:pointer;transition:background .25s,color .25s}
.ind__pick i{width:10px;height:10px;border-radius:3px}
.ind__pick:hover{color:var(--sd-ink);background:var(--sd-bg)}
.ind__pick[aria-pressed="true"]{background:var(--sd-bg);color:var(--sd-ink);box-shadow:inset 0 0 0 1px var(--ln)}
.ind__arrows{flex:none;display:flex;gap:6px}
.ind__arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--ln);background:var(--sf);color:var(--sd-ink);font-size:17px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ind__arrow:hover{background:var(--sd-accent);border-color:var(--sd-accent);color:#fff}
@media (max-width:1100px){.ind__slide{grid-template-columns:1fr}}
@media (max-width:640px){.ind__pager{flex-wrap:wrap;border-radius:20px;padding:10px;gap:10px}.ind__picks{order:3;flex-basis:100%}.ind__arrows{margin-left:auto}}

/* =====================================================================
   v4: smooth scroll fallback + animated gradient backgrounds (day & night)
   ===================================================================== */
html{scroll-behavior:smooth}
html.lenis{scroll-behavior:auto}
.sd-reel__scene>.sd-reel__frame{position:absolute}
.sd-reel__scene>.sd-intro{position:absolute}
@keyframes ambA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(12vw,8vh) scale(1.15)}100%{transform:translate(4vw,18vh) scale(.95)}}
@keyframes ambB{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-10vw,-6vh) scale(1.2)}100%{transform:translate(-18vw,10vh) scale(1)}}
@keyframes ambC{0%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-8vw,-14vh) scale(.9)}100%{transform:translate(10vw,-6vh) scale(1.1)}}

/* night: deep blue-violet gradients instead of flat black,richer glows */
html[data-theme="dark"]{--sd-bg:#0B0C14;--bg:#0B0C14;--sf:#14151F;--dk:#1B1C28}
html[data-theme="dark"] body{background:linear-gradient(180deg,#0B0C14 0%,#0E0D18 50%,#0B0C14 100%)}
html[data-theme="dark"] .sd-hero{background:radial-gradient(80% 60% at 80% 0%,rgba(217,45,41,.14),transparent 70%),radial-gradient(60% 50% at 0% 100%,rgba(91,61,245,.14),transparent 70%),#0B0C14}
html[data-theme="dark"] .sx{background:linear-gradient(180deg,#11121C 0%,#0F1019 100%)}
html[data-theme="dark"] .wk{background:linear-gradient(180deg,#0F1019 0%,#0C0D15 100%)}
html[data-theme="dark"] .pr{background:linear-gradient(160deg,#1A1424 0%,#12131E 55%,#0F1A1C 100%)}
html[data-theme="dark"] .wy{background:linear-gradient(180deg,#0F1019 0%,#14111E 100%)}
html[data-theme="dark"] .ps{background:linear-gradient(180deg,#14111E 0%,#1B1019 100%)}
html[data-theme="dark"] .ts{background:linear-gradient(180deg,#1B1019 0%,#101424 100%)}
html[data-theme="dark"] .pl{background:linear-gradient(180deg,#101424 0%,#11121C 100%)}
html[data-theme="dark"] .fq{background:linear-gradient(180deg,#11121C 0%,#0F1019 100%)}
html[data-theme="dark"] .ct,html[data-theme="dark"] .bm{background:#0F1019}
html[data-theme="dark"] .ft{background:linear-gradient(180deg,#141523 0%,#0B0C14 100%)}

/* the red call-to-action panel slowly shifts its gradient */
.ct__box{background-size:160% 160%;animation:ctShift 14s ease-in-out infinite alternate}
@keyframes ctShift{0%{background-position:0% 0%}100%{background-position:100% 100%}}
/* the hero aura keeps moving even when the OS asks for less motion is NOT forced; respect it */
@media (prefers-reduced-motion:reduce){.amb i,.ct__box{animation-duration:90s}}

/* =====================================================================
   v5: ONE breathing glow from top to bottom (replaces multi-colour washes)
   ===================================================================== */
html{background:var(--sd-bg)}
body{background:transparent!important}
.sd-page{position:relative;z-index:1}
.breath{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.breath i{position:absolute;left:var(--bx,50%);top:var(--by,22%);border-radius:50%;will-change:transform,opacity}
.breath i:nth-child(1){width:78vmax;height:78vmax;margin:-39vmax 0 0 -39vmax;
  background:radial-gradient(circle,rgba(217,45,41,.17) 0%,rgba(217,45,41,.07) 32%,rgba(217,45,41,0) 62%);
  animation:sdBreathe 7s ease-in-out infinite}
.breath i:nth-child(2){width:38vmax;height:38vmax;margin:-19vmax 0 0 -19vmax;
  background:radial-gradient(circle,rgba(240,70,55,.16) 0%,rgba(240,70,55,0) 64%);
  animation:sdBreathe 7s ease-in-out -3.5s infinite}
@keyframes sdBreathe{0%,100%{transform:scale(.82);opacity:.6}50%{transform:scale(1.14);opacity:1}}
html[data-theme="dark"]{--sd-bg:#0C0B10;--bg:#0C0B10}
html[data-theme="dark"] .breath i:nth-child(1){background:radial-gradient(circle,rgba(217,45,41,.30) 0%,rgba(217,45,41,.12) 30%,rgba(217,45,41,0) 62%)}
html[data-theme="dark"] .breath i:nth-child(2){background:radial-gradient(circle,rgba(255,80,60,.24) 0%,rgba(255,80,60,0) 64%)}
html[data-theme="dark"] body{background:transparent!important}

/* every section sits on the same canvas so the glow flows through */
.sd-hero,.sx,.wk,.wy,.ps,.ts,.fb,.pl,.fq,.ct,.bm,html[data-theme="dark"] :is(.sd-hero,.sx,.wk,.wy,.ps,.ts,.fb,.pl,.fq,.ct,.bm){background:transparent!important}
.sx{border-radius:0}
.sx::before,.sd-aura{display:none!important}
/* products stay a dark panel,now with a single red glow */
.pr,html[data-theme="dark"] .pr{background:radial-gradient(55% 60% at 15% 0%,rgba(217,45,41,.35),transparent 70%),radial-gradient(45% 50% at 100% 100%,rgba(217,45,41,.18),transparent 70%),#141218!important}
html[data-theme="dark"] .pr{background:radial-gradient(55% 60% at 15% 0%,rgba(217,45,41,.28),transparent 70%),rgba(255,255,255,.03)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.ft{background:radial-gradient(45% 70% at 85% 100%,rgba(217,45,41,.35),transparent 70%),#141218!important}
html[data-theme="dark"] .ft{background:radial-gradient(45% 70% at 85% 100%,rgba(217,45,41,.3),transparent 70%),rgba(255,255,255,.03)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
html[data-theme="dark"] .hd::before{background:rgba(12,11,16,.72)}
@media (prefers-reduced-motion:reduce){.breath i{animation-duration:14s}}

/* =====================================================================
   v5: CLIENT FEEDBACK (Orynex-style)
   ===================================================================== */
.fb{position:relative;padding:clamp(80px,9vw,140px) 0 clamp(80px,9vw,160px)}
.fb__head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:clamp(48px,6vw,110px);text-align:center}
.fb__title{margin:0;font-family:var(--sd-display);font-weight:800;font-size:clamp(56px,10vw,150px);line-height:.95;letter-spacing:-.045em}
.fb__note{margin:0;font-size:14px;color:var(--sd-muted-2)}
.fb__card{margin:0;display:flex;flex-direction:column;gap:26px;padding:30px;border-radius:24px;background:var(--sf);border:1px solid var(--ln);box-shadow:0 30px 70px rgba(23,24,27,.06)}
.fb__who{display:flex;align-items:center;gap:18px}
.fb__photo{flex:none;display:grid;place-items:center;width:74px;height:98px;border-radius:14px;background:var(--tint);color:#17181B;font:800 30px/1 var(--sd-display);overflow:hidden}
.fb__photo img{width:100%;height:100%;object-fit:cover}
.fb__who b{display:block;font-family:var(--sd-display);font-weight:700;font-size:24px;letter-spacing:-.02em}
.fb__who small{display:block;margin-top:4px;font-size:16px;color:var(--sd-muted)}
.fb__q{width:40px;height:28px;fill:var(--sd-ink)}
.fb__text{margin:0;font-size:20px;line-height:1.5;letter-spacing:-.005em}
html[data-theme="dark"] .fb__card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.03));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:none}

/* desktop zig-zag (ratios taken from the reference layout) */
.fb__wrap{position:relative}
.fb__line{position:absolute;left:0;top:6.6%;width:100%;height:80%;overflow:visible;pointer-events:none}
.fb__line path{fill:none;stroke:var(--sd-ink);stroke-opacity:.12;stroke-width:10;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
html[data-theme="dark"] .fb__line path{stroke-opacity:.16}
.fb__row{position:relative;z-index:1;display:flex}
.fb__row .fb__card{width:33.3%}
.fb__row--1{justify-content:flex-start}
.fb__row--2{justify-content:flex-end;margin-top:-6.45%}
.fb__row--3{justify-content:center;margin-top:9%}
.fb__row--4{justify-content:flex-start;margin-top:14.8%}
.fb__row--5{justify-content:flex-end;margin-top:-14.3%}
.fb__slider{display:none}

/* phones + tablets: one card at a time,red round arrows */
@media (max-width:991px){
  .fb__wrap{display:none}
  .fb__head{align-items:flex-start;text-align:left}
  .fb__slider{display:block}
  .fb__track{display:grid;grid-auto-flow:column;grid-auto-columns:min(100%,520px);column-gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .fb__track::-webkit-scrollbar{display:none}
  .fb__slide{scroll-snap-align:start;display:flex}
  .fb__slide .fb__card{width:100%}
  .fb__arrows{display:flex;justify-content:center;gap:14px;margin-top:28px}
  .fb__arrow{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:0;background:var(--sd-accent);color:#fff;cursor:pointer;transition:transform .3s var(--sp,ease),background .2s}
  .fb__arrow:hover{background:#B8231F}
  .fb__arrow:active{transform:scale(.9)}
  .fb__arrow svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
}
@media (max-width:640px){
  .fb__card{padding:24px;gap:20px}
  .fb__photo{width:60px;height:80px;font-size:24px}
  .fb__who b{font-size:20px}.fb__who small{font-size:14px}
  .fb__text{font-size:17px}
}
@media (max-width:991px){.fb__slide .fb__card{box-shadow:none}.fb__track{padding:2px 2px 6px}}

/* =====================================================================
   v6: Contact button (Halo Lab style: orbiting light ring, glow, rolling text, drawing pen)
   ===================================================================== */
.hd__cta{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:14px;height:48px;padding:0 5px 0 22px;border-radius:999px;
  background:radial-gradient(110% 110% at 50% 215%,rgba(255,90,79,.55) 0%,rgba(255,90,79,0) 100%),var(--dk);color:#fff;font-weight:600;font-size:15px;transform:none!important;transition:background .4s}
.hd__cta:hover{color:#fff}
.hd__ring{position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;background:rgba(255,255,255,.14);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);overflow:hidden;pointer-events:none}
.hd__ring::before{content:"";position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;translate:-50% -50%;
  background:conic-gradient(rgba(255,170,160,.9) 0deg,rgba(255,170,160,0) 60deg,rgba(255,170,160,0) 300deg,rgba(255,170,160,.9) 360deg);animation:hdSpin 4s linear infinite}
@keyframes hdSpin{to{rotate:360deg}}
.hd__halo{position:absolute;inset:0;z-index:-2;border-radius:inherit;background:radial-gradient(80% 120% at 50% 120%,rgba(255,90,79,.65),transparent 70%);opacity:.4;transition:opacity 1s;pointer-events:none}
.hd__cta:hover .hd__halo{opacity:1}
.hd__roll{position:relative;display:block;height:1.3em;line-height:1.3em;overflow:hidden}
.hd__roll>span{display:block;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.hd__cta:hover .hd__roll>span{transform:translateY(-100%)}
.hd__ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--sd-accent);transition:transform .4s}
.hd__ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.hd__ico-line{stroke-dasharray:1;stroke-dashoffset:1}
.hd__ico-pen{transform-box:fill-box;transform-origin:20% 80%;transition:transform .3s}
.hd__cta:hover .hd__ico-line{animation:hdWrite 1.1s cubic-bezier(.65,0,.35,1) infinite}
.hd__cta:hover .hd__ico-pen{animation:hdPen 1.1s cubic-bezier(.65,0,.35,1) infinite}
@keyframes hdWrite{0%{stroke-dashoffset:1}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes hdPen{0%{transform:translate(-9px,2px) rotate(-8deg)}55%{transform:translate(5px,2px) rotate(6deg)}80%,100%{transform:translate(0,0) rotate(0)}}
html[data-theme="dark"] .hd__cta,html[data-theme="dark"] .hd__cta:hover{background:radial-gradient(110% 110% at 50% 215%,rgba(255,90,79,.4) 0%,rgba(255,90,79,0) 100%),rgba(255,255,255,.04);color:#F2F1EE}
@media (prefers-reduced-motion:reduce){.hd__ring::before{animation-duration:12s}}

/* =====================================================================
   v6: responsive fixes
   ===================================================================== */
/* services: the + is always visible,so visitors can see they can pick */
.sx__add{opacity:1!important;border-color:rgba(217,45,41,.45);color:var(--sd-accent);font-weight:600}
.sx__add:hover{background:rgba(217,45,41,.08)}

/* hero cards: say what they do + show they're links */
.sd-pillars__label{display:none}
.sd-pillar__top{gap:10px}
.sd-pillar__go{order:2;margin-left:auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sd-bg);color:var(--sd-accent);opacity:0;transform:scale(.6) rotate(-45deg);transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.sd-pillar__go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sd-pillar__num{order:3}
.sd-pillar:hover .sd-pillar__go,.sd-pillar:focus-visible .sd-pillar__go{opacity:1;transform:none}
.sd-pillar.is-active .sd-pillar__go{background:rgba(255,255,255,.2);color:#fff}
@media (max-width:760px){
  .sd-pillars__label{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;font-size:13px;color:var(--sd-muted)}
  .sd-pillars__label span:first-child{font:500 12px var(--sd-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sd-ink)}
  .sd-pillars{gap:10px;transform:none!important}
  .sd-stagger{margin-top:0}
  .sd-pillar{min-height:0;padding:16px;gap:18px;transform:none!important;box-shadow:none}
  .sd-pillar.is-active{transform:none!important;box-shadow:0 14px 30px rgba(217,45,41,.25)}
  .sd-pillar__icon{width:38px;height:38px;border-radius:12px}
  .sd-pillar__num{display:none}
  .sd-pillar__go{opacity:1;transform:none;width:30px;height:30px}
  .sd-pillar__txt .sd-pillar__name{font-size:26px}
}

/* portfolio: every industry visible on phones (wrap instead of a hidden scroll) */
@media (max-width:760px){
  .ind__tabs{flex-wrap:wrap!important;overflow:visible!important;margin:0 0 24px!important;padding:0!important;gap:8px}
  .ind__tab{min-height:40px!important;padding:0 14px!important;font-size:14px!important;gap:8px}
  .ind__tab span{display:none}
}

/* =====================================================================
   v7: SmartDivs cube,used as hints (fragments, outlines, single faces)
   ===================================================================== */
.eyebrow::before,.sd-badge__dot{width:13px;height:13px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M13.6 23.6L43 6.4Q50 2.4 57.1 6.4L86.4 23.6L59.6 39.1Q50 44.4 40.4 39.1Z' fill='%233C3C3E'/%3E%3Cpath d='M11.8 25.4L39.3 41.3Q44 44 48.8 44.2L48.8 95.5Q45.8 95.2 43 93.8L15.8 78Q8.6 73.6 8.6 65.7L8.6 34.7Q8.6 29.3 11.8 25.4Z' fill='%23D92D29'/%3E%3Cpath d='M88.2 25.4L60.7 41.3Q56 44 51.2 44.2L51.2 95.5Q54.2 95.2 57 93.8L84.2 78Q91.4 73.6 91.4 65.7L91.4 34.7Q91.4 29.3 88.2 25.4Z' fill='%23D92D29'/%3E%3C/svg%3E") center/contain no-repeat}
.sd-badge__dot{animation:cbSpinY 6s ease-in-out infinite}
html[data-theme="dark"] .eyebrow::before,html[data-theme="dark"] .sd-badge__dot,.eyebrow--dark::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M13.6 23.6L43 6.4Q50 2.4 57.1 6.4L86.4 23.6L59.6 39.1Q50 44.4 40.4 39.1Z' fill='%239A9CA6'/%3E%3Cpath d='M11.8 25.4L39.3 41.3Q44 44 48.8 44.2L48.8 95.5Q45.8 95.2 43 93.8L15.8 78Q8.6 73.6 8.6 65.7L8.6 34.7Q8.6 29.3 11.8 25.4Z' fill='%23E5463F'/%3E%3Cpath d='M88.2 25.4L60.7 41.3Q56 44 51.2 44.2L51.2 95.5Q54.2 95.2 57 93.8L84.2 78Q91.4 73.6 91.4 65.7L91.4 34.7Q91.4 29.3 88.2 25.4Z' fill='%23E5463F'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes cbSpinY{0%,70%,100%{transform:none}80%{transform:scaleX(-1)}90%{transform:none}}

.cbh{position:absolute;z-index:0;pointer-events:none;color:var(--sd-accent);will-change:transform}
.cbh svg{display:block;width:100%;height:auto;overflow:visible}
.cbh path{fill:none;stroke:currentColor;stroke-width:var(--sw,.35);vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.65,0,.35,1),fill .8s ease 1.4s}
.cbh path:nth-child(2){transition-delay:.25s,1.6s}.cbh path:nth-child(3){transition-delay:.5s,1.8s}
.cbh.in path{stroke-dashoffset:0}
.cbh.in .f{fill:var(--ff)}
.sx>.sd-wrap,.wy>.sd-wrap,.pr>.sd-wrap,.ft>.sd-wrap{position:relative;z-index:1}
.ct__box>*:not(.cbh){position:relative;z-index:1}
.ct__box::after{display:none}
/* placements */
.cbh--sx{width:clamp(320px,38vw,620px);right:clamp(-220px,-10vw,-80px);top:-6%;opacity:.55}
.cbh--wy{width:clamp(300px,34vw,560px);left:clamp(-260px,-14vw,-110px);bottom:-10%;opacity:.6;--ff:rgba(217,45,41,.05)}
.cbh--ft{width:clamp(220px,24vw,400px);right:4%;top:-14%;opacity:.5;--ff:rgba(217,45,41,.12)}
html[data-theme="dark"] .cbh--sx,html[data-theme="dark"] .cbh--wy{opacity:.7}
@keyframes cbFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-3deg)}}
@media (max-width:760px){.cbh--sx{width:260px;right:-120px;top:-40px}.cbh--wy{width:240px;left:-130px}.cbh--ft{width:180px;right:-40px;top:-40px}}
@media (prefers-reduced-motion:reduce){.cbh path{transition-duration:.01s}.sd-badge__dot{animation:none}}
.ct__box>.ct__badge{position:absolute}
.cbh{--sw:1.3}
.cbh--sx{opacity:.32}
.cbh--wy{opacity:.42;--ff:rgba(217,45,41,.10)}
.cbh--ft{opacity:.55;--ff:rgba(217,45,41,.22)}
html[data-theme="dark"] .cbh--sx{opacity:.42}
html[data-theme="dark"] .cbh--wy{opacity:.5}

/* v8: contact button — clearly visible on the light theme too */
html:not([data-theme="dark"]) .hd__cta{background:radial-gradient(120% 120% at 50% 210%,rgba(255,90,79,.75) 0%,rgba(255,90,79,0) 100%),#17181B;box-shadow:0 6px 18px rgba(217,45,41,.18);transition:box-shadow .5s}
html:not([data-theme="dark"]) .hd__ring{padding:2px;background:rgba(255,255,255,.08)}
html:not([data-theme="dark"]) .hd__ring::before{background:conic-gradient(#FF5A4F 0deg,rgba(255,170,160,.95) 40deg,rgba(255,90,79,0) 95deg,rgba(255,90,79,0) 265deg,rgba(255,170,160,.95) 320deg,#FF5A4F 360deg);animation-duration:3s}
html:not([data-theme="dark"]) .hd__halo{opacity:.55;background:radial-gradient(85% 130% at 50% 125%,rgba(255,90,79,.9),transparent 70%)}
html:not([data-theme="dark"]) .hd__cta:hover{box-shadow:0 10px 30px rgba(217,45,41,.38),0 0 0 4px rgba(217,45,41,.10)}
html:not([data-theme="dark"]) .hd__cta:hover .hd__halo{opacity:1}

/* v8: phones — no cards in the hero (headline + pills + button only) */
@media (max-width:760px){
  .sd-hero__visual{display:none}
  .sd-hero__row{align-content:center}
}

/* =====================================================================
   v9
   ===================================================================== */
/* section pills + hero badge: back to the red dot */
.eyebrow::before,html[data-theme="dark"] .eyebrow::before,.eyebrow--dark::before{width:8px;height:8px;border-radius:50%;background:var(--sd-accent)!important}
.sd-badge__dot,html[data-theme="dark"] .sd-badge__dot{width:8px;height:8px;border-radius:50%;background:var(--sd-accent)!important;animation:none}

/* "Got a project in mind?": back to its rings */
.ct__box::after{display:block}

/* services cube: the line keeps drawing itself,on a loop */
.cbh--sx path{transition:none;animation:cbLoop 9s cubic-bezier(.65,0,.35,1) infinite}
.cbh--sx path:nth-child(2){animation-delay:.6s}
.cbh--sx path:nth-child(3){animation-delay:1.2s}
@keyframes cbLoop{0%{stroke-dashoffset:1}38%,62%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}

/* "Let's" + "build" collide in the middle,then burst */
.bx{position:relative;height:200vh}
.bx__scene{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vw,28px)}
.bx__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.bx__line{position:relative;z-index:1;display:flex;align-items:baseline;justify-content:center;gap:.22em;font-family:var(--sd-display);font-weight:800;font-size:clamp(64px,13vw,240px);line-height:.9;letter-spacing:-.05em;white-space:nowrap}
.bx__w{display:inline-block;will-change:transform}
.bx__w--r{color:var(--sd-accent)}
.bx__after{position:relative;z-index:1;font-family:var(--sd-display);font-weight:800;font-size:clamp(28px,4.4vw,80px);letter-spacing:-.04em;line-height:1;color:var(--sd-ink);opacity:0;transform:translateY(30px) scale(.9);transition:opacity .6s ease .25s,transform .9s cubic-bezier(.34,1.56,.64,1) .25s}
.bx.is-boom .bx__after{opacity:1;transform:none}
.bx__ring{position:absolute;left:50%;top:50%;z-index:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid var(--sd-accent);opacity:0;pointer-events:none}
.bx.is-boom .bx__ring{animation:bxRing 1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes bxRing{0%{opacity:.9;transform:scale(.2);border-width:14px}100%{opacity:0;transform:scale(28);border-width:1px}}
.bx.is-boom .bx__line{animation:bxShake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes bxShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translate(-8px,2px) scale(1.04)}40%,60%{transform:translate(8px,-2px) scale(1.04)}}
.bx.is-boom .bx__scene::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 50% 50%,rgba(255,90,79,.35),transparent 55%);animation:bxFlash .9s ease-out forwards}
@keyframes bxFlash{0%{opacity:1}100%{opacity:0}}
@media (max-width:760px){.bx{height:170vh}.bx__line{font-size:19vw}}
@media (max-width:760px){.bx__line{font-size:16.5vw}}
/* v10: UI labels that used to be headings */
.mk__sec .mk__h{margin:0 0 3cqw;font-family:var(--display);font-weight:700;font-size:3.4cqw;letter-spacing:-.02em}
.mk[dir="rtl"] .mk__sec .mk__h{font-family:'IBM Plex Sans Arabic',sans-serif}
.ft__h{margin:0 0 6px;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2)}
.ft .ft__h{color:#80838B}
@media (max-width:767px){.sh__head .sh__t{margin:0;font:800 28px/1.1 var(--sd-display);letter-spacing:-.03em}}
/* inline logo mark (adapts to the theme, no white box at night) */
.sd-mark{flex:none;display:block}
.sd-mark path{fill:#D92D29}
.sd-mark .sd-mark__top{fill:#3C3C3E}
html[data-theme="dark"] .sd-mark .sd-mark__top,.ft .sd-mark .sd-mark__top{fill:#8E909A}
.sd-h1{font-size:clamp(32px,5.6vw,82px)}
html[data-theme="dark"] :is(.ps__step,.pl__card:not(.pl__card--hot),.wy__stats div,.sx__hint,.ind__pager,.sd-pillar:not(.is-active)){background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* =====================================================================
   v11: accessibility + review fixes
   ===================================================================== */
:root{--accent-text:#BF2420}
html[data-theme="dark"]{--accent-text:#FF6A60}
/* small red text uses a slightly deeper red so it passes WCAG AA */
.sx__num,.wy__num,.ind__kicker,.fq__side a,.sample,.ind__count b,.pl__type{color:var(--accent-text)}
.h2 .soft{color:#80838B}
html[data-theme="dark"] .h2 .soft{color:#8C8F98}
.sd-pillar.is-active .sd-pillar__num,.sd-pillar.is-active .sd-pillar__we,.sd-pillar.is-active .sd-pillar__desc{opacity:1;color:#fff}
.sd-logo{color:var(--sd-muted-2)}
/* comfortable tap targets */
.ft__col a,.ft__bottom a{display:inline-block;padding:4px 0}
.ct__link{display:inline-block;padding:6px 0}
/* skip link */
.skip{position:fixed;left:16px;top:-60px;z-index:400;padding:12px 18px;border-radius:12px;background:var(--sd-accent);color:#fff;font-weight:700;transition:top .2s}
.skip:focus{top:16px;color:#fff}
.fb__track:focus-visible{outline:2px solid var(--sd-accent);outline-offset:4px;border-radius:24px}
.sample,html[data-theme="dark"] .sample{color:#BF2420}
.fq__side p a{display:inline-block;padding:3px 0}
/* buyer's guide section */
.hc{position:relative;padding:clamp(90px,10vw,140px) 0}
/* showreel: no pill on desktop (the cursor says Play); still reachable by keyboard */
.sd-reel .sd-play:not(:focus-visible){opacity:0!important;pointer-events:none!important}
/* the Play cursor in SmartDivs red (day mode) */
html:not([data-theme="dark"]) .cur.big.play{background:var(--sd-accent);box-shadow:0 10px 30px rgba(217,45,41,.35)}
.breath{display:none!important}

/* =====================================================================
   v12: showreel stands alone; ABOUT section (Halo Lab layout, SmartDivs red)
   ===================================================================== */
.sd-reel{height:220vh}
.sd-reel-m{padding-bottom:40px}

.ab{position:relative;z-index:1;padding:clamp(64px,7vw,110px) 0 clamp(80px,9vw,140px);color:#fff;
  background:linear-gradient(180deg,#B91E1A 0%,#D92D29 30%,#E2534E 52%,#EE9D98 72%,#F6DEDB 86%,var(--sd-bg) 100%)}
html[data-theme="dark"] .ab{background:linear-gradient(180deg,#8E1714 0%,#B8231F 30%,#7A1A18 58%,#2A1214 82%,var(--sd-bg) 100%)}
.ab__trusted{display:flex;align-items:center;gap:28px}
.ab__line{flex:1 1 0;height:1px;background:rgba(255,255,255,.4)}
.ab__label{margin:0;font-family:var(--sd-serif);font-style:italic;font-size:clamp(22px,2vw,30px);color:rgba(255,255,255,.92);white-space:nowrap}
.ab .sd-marquee{margin-top:36px}
.ab .sd-logo{color:rgba(255,255,255,.85)}
.ab .sd-logo::before{border-color:rgba(255,255,255,.85)}
.ab__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px clamp(32px,5vw,96px);margin-top:clamp(70px,8vw,130px);align-items:start}
.ab__side{display:flex;flex-direction:column;gap:clamp(40px,6vw,120px)}
.ab__seal{width:clamp(96px,8vw,128px);height:auto}
.ab__seal *{stroke:rgba(255,255,255,.95)!important;filter:none!important}
.ab__seal path[fill],.ab__seal circle[fill]{fill:rgba(255,255,255,.95)!important}
.ab__seal path:not([fill]){fill:none}
.ab__caption{margin:0;font-size:18px;line-height:1.55;font-weight:500;color:#fff}
.ab__text{margin:0;font-family:var(--sd-body);font-weight:500;font-size:clamp(28px,2.6vw,50px);line-height:1.22;letter-spacing:-.02em;color:#fff}
.ab__text .abw{opacity:.38;transition:opacity .4s ease}
.ab__text .abw.on{opacity:1}
.ab__chip{display:inline-flex;align-items:baseline;gap:.25em;color:#fff;white-space:nowrap}
.ab__chip:hover{color:#fff}
.ab__ico{display:inline-grid;place-items:center;width:1.05em;height:1.05em;border-radius:.24em;background:rgba(255,255,255,.22);transform:translateY(.12em)}
.ab__ico svg{width:.66em;height:.66em;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ab__u{border-bottom:2px solid rgba(255,255,255,.75);line-height:1.05}
.ab__chip:hover .ab__u{border-color:#fff}
.ab__stats{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:clamp(70px,8vw,130px)}
.ab__stat{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:170px;padding:30px 50px;border-radius:14px;background:#fff;color:#17181B;box-shadow:0 10px 30px rgba(120,20,18,.08)}
.ab__stat p{margin:0;max-width:260px;font-size:18px;line-height:1.6;color:#5B5E66}
.ab__stat strong{font-family:var(--sd-serif);font-style:italic;font-weight:400;font-size:clamp(56px,5.4vw,96px);line-height:.9;letter-spacing:-.02em;color:#0E0F12;white-space:nowrap}
@media (max-width:900px){.ab__grid{grid-template-columns:1fr}.ab__side{flex-direction:row;align-items:center;gap:24px}}
@media (max-width:640px){
  .ab__trusted{gap:14px}.ab__label{font-size:20px}
  .ab__stats{grid-template-columns:1fr;gap:14px}
  .ab__stat{min-height:120px;padding:24px 26px}
  .ab__stat p{font-size:15px}
  .ab__text{font-size:26px}
}
/* cube line animation now lives beside the About statement */
.ab__side{position:relative}
.cbh--ab{position:relative;width:clamp(150px,15vw,240px);color:#fff;opacity:.95;--sw:1.6;transform:none!important}
.cbh--ab path{transition:none;animation:cbLoop 9s cubic-bezier(.65,0,.35,1) infinite}
.cbh--ab path:nth-child(2){animation-delay:.6s}
.cbh--ab path:nth-child(3){animation-delay:1.2s}
@media (max-width:900px){.cbh--ab{width:120px}}
.sd-reel{height:150vh}
/* v13 Why: Halo Lab "key advantages" layout in SmartDivs colours */
.wy,html[data-theme="dark"] .wy{background:radial-gradient(120% 70% at 50% 120%,rgba(217,45,41,.22),transparent 60%),#0B0B0E!important;color:#fff;margin-top:0!important;padding:120px 0 130px!important}
.wy__kicker{margin:0 0 14px;text-align:center;font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(20px,1.6vw,26px);color:rgba(255,255,255,.62)}
.wy__title{margin:0 auto 76px;max-width:13.5em;text-align:center;font-family:var(--display);font-weight:600;font-size:clamp(36px,4.2vw,64px);line-height:1.06;letter-spacing:-.035em;color:#fff}
.wy__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:0!important;max-width:1476px;margin:0 auto}
.wy__item{padding:0 40px 68px 0!important;border:0!important;background:none!important}
.wy__item:nth-child(n+4){padding-top:64px!important;padding-bottom:0!important;border-top:1px solid rgba(255,255,255,.18)!important}
.wy__item:not(:nth-child(3n+1)){padding-left:76px!important}
.wy__item:not(:nth-child(3n)){border-right:1px solid rgba(255,255,255,.18)!important}
.wy__ic{display:block;width:56px;height:56px;margin-bottom:44px;filter:drop-shadow(0 0 6px rgba(255,106,96,.35))}
.wy__item h3{margin:0 0 22px!important;font-family:var(--display);font-weight:600;font-size:clamp(22px,1.6vw,28px);letter-spacing:-.025em;line-height:1.15;color:#fff!important}
.wy__item:hover h3{color:#fff!important}
.wy__item p{margin:0;max-width:24em;font-size:17px;line-height:1.65;color:rgba(255,255,255,.72)!important}
@media (max-width:991px){.wy__grid{grid-template-columns:1fr 1fr}.wy__item,.wy__item:nth-child(n){padding:40px 32px 40px 0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.18)!important}.wy__item:nth-child(2n){padding-left:32px!important;border-left:1px solid rgba(255,255,255,.18)!important}}
@media (max-width:600px){.wy{padding:88px 0!important}.wy__title{margin-bottom:40px}.wy__grid{grid-template-columns:1fr}.wy__item,.wy__item:nth-child(n){padding:32px 0!important;border-left:0!important}.wy__ic{margin-bottom:24px;width:48px;height:48px}}
.wy__title{max-width:none}@media (max-width:600px){.wy__title br{display:none}.wy__item:last-child{border-bottom:0!important}}
/* v14 Products: light in light mode */
html:not([data-theme="dark"]) .pr{background:#F4F2EE!important;color:var(--sd-ink,#141414);box-shadow:none}
html:not([data-theme="dark"]) .pr::before{background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px)}
html:not([data-theme="dark"]) .pr .h2{color:#141414}
html:not([data-theme="dark"]) .pr .h2 .soft{color:#80838B}
html:not([data-theme="dark"]) .pr .sec-head__intro{color:#55585F}
html:not([data-theme="dark"]) .pc{background:#fff;border-color:#E6E3DD}
html:not([data-theme="dark"]) .pc:hover{border-color:#D3CFC7;box-shadow:0 24px 50px rgba(20,20,20,.08)}
html:not([data-theme="dark"]) .pc__kicker{color:#6B6E75}
html:not([data-theme="dark"]) .pc__desc{color:#55585F}
html:not([data-theme="dark"]) .pr a,html:not([data-theme="dark"]) .pr a:hover{color:#141414}
html:not([data-theme="dark"]) .pc__more{border-color:#141414}
html:not([data-theme="dark"]) .pr .pc__name a:hover,html:not([data-theme="dark"]) .pr .pc__more:hover{color:var(--accent-text);border-color:var(--accent-text)}
.cbh--ab{width:clamp(200px,24vw,420px)!important}@media (max-width:767px){.cbh--ab{width:clamp(150px,44vw,220px)!important}}
/* v15 Services: fits one screen; centred heading; plan hint at bottom; mobile slider */
.sx{padding:clamp(64px,9vh,104px) 0 clamp(56px,8vh,96px)!important}
.sx__head{display:block;margin-bottom:clamp(24px,4vh,48px);text-align:center}
.sx__title{max-width:none}
.sx__head .h2{margin:0 auto;max-width:16em;font-size:clamp(34px,3.6vw,60px);line-height:1.04}
.sx__col{padding:clamp(22px,3vh,36px) 28px clamp(20px,2.6vh,30px);gap:10px}
.sx__top{margin-bottom:clamp(8px,1.4vh,16px)}
.sx__name{font-size:clamp(36px,3vw,52px)}
.sx__desc{margin:0 0 6px;font-size:15px;line-height:1.5;min-height:4.5em}
.sx__link{min-height:clamp(38px,4.6vh,46px);font-size:15px}
.sx__more{padding-top:14px}
.sx__dots{display:none}
.sx__hint{width:max-content;max-width:100%;margin:clamp(20px,3vh,36px) auto 0}
@media (max-width:767px){
  .sx{padding:56px 0 40px!important}
  .sx__head{margin-bottom:20px}
  .sx__head .h2{font-size:clamp(28px,8vw,36px);max-width:12em}
  .sx__grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-top:0;margin:0 -16px;padding:0 16px;scroll-padding:0 16px}
  .sx__grid::-webkit-scrollbar{display:none}
  .sx__col,.sx__col:nth-child(n){flex:0 0 calc(100% - 28px);scroll-snap-align:start;border:1px solid var(--ln)!important;border-radius:22px;padding:20px 18px 18px;background:var(--sf)}
  .sx__top{margin-bottom:6px}
  .sx__name{font-size:34px}
  .sx__desc{min-height:0;font-size:14.5px}
  .sx__link{min-height:42px}
  .sx__dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
  .sx__dots i{width:6px;height:6px;border-radius:3px;background:var(--ln);transition:width .3s,background .3s}
  .sx__dots i.on{width:22px;background:var(--sd-accent)}
  .sx__hint{width:auto;margin-top:14px}
}
html[data-theme="dark"] .sx__col{background:transparent}
@media (max-width:767px){html[data-theme="dark"] .sx__col{background:rgba(255,255,255,.03)}}
@media (min-width:768px){.sx{padding:clamp(48px,7vh,104px) 0 clamp(44px,6vh,96px)!important}}
/* v16 mobile hero: content up, showreel on first screen */
@media (max-width:767px){
  .sd-hero,.sd-hero__wrap{min-height:0!important}
  .sd-hero__row{padding:28px 0 8px!important;align-content:flex-start!important;gap:0}
  .sd-reel-m{padding-top:20px!important}
}
/* v16 About cube hidden on mobile; services slider: sideways only, centred cards */
@media (max-width:767px){
  .ab__side{display:none!important}
  .ab__grid{grid-template-columns:1fr!important}
  .sx__grid{overflow-y:hidden!important;overscroll-behavior-x:contain;touch-action:pan-x pan-y;gap:12px;margin:0 -16px;padding:4px 7vw 6px;scroll-padding:0 7vw}
  .sx__col,.sx__col:nth-child(n){flex:0 0 86vw;scroll-snap-align:center;scroll-snap-stop:always;transform:none!important}
  .sx__col.rv,.sx__col.rv.in{transform:none!important}
}
@media (max-width:767px){.sx__grid{margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}}
/* v16 Work on mobile: scrollable pills -> phone-height demo -> project-name slider */
.ind__demo{display:block;color:inherit;border-radius:inherit}
.ind__demo:focus-visible{outline:2px solid var(--sd-accent);outline-offset:4px}
@media (max-width:767px){
  .ind__tabs{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;margin:0 calc(50% - 50vw) 16px!important;padding:2px 16px!important;scrollbar-width:none;scroll-padding:0 16px}
  .ind__tabs::-webkit-scrollbar{display:none}
  .ind__tab{flex:none!important;white-space:nowrap}
  .ind__panel{display:flex!important;flex-direction:column}
  .ind__panel>.ind__slide{order:1}
  .ind__panel>.ind__pager{order:2;margin:14px 0 0!important;padding:6px!important;border-radius:999px!important;flex-wrap:nowrap!important;gap:6px!important}
  .ind__count{display:none!important}
  .ind__picks{order:0!important;flex:1 1 auto!important;flex-basis:auto!important}
  .ind__arrows{margin-left:0!important;flex:none}
  .ind__slide{display:block!important}
  .ind__info{display:none!important}
  .frame__view{aspect-ratio:auto!important;height:clamp(340px,calc(100svh - 330px),520px)}
  .frame__hint{display:none}
}
.ind__panel[hidden],.ind__slide[hidden]{display:none!important}
@media (max-width:767px){.ind__panel{align-items:stretch!important}.ind__panel>*{min-width:0;width:100%}.ind__demo,.ind__demo .frame{width:100%}.ind__picks{min-width:0!important}}
/* v16 one vertical rhythm for every content section */
:root{--sec:clamp(72px,8vw,120px)}
@media (max-width:767px){:root{--sec:64px}}
.ab,.wk,.pr,.wy,.ps,.fb,.pl,.hc,.fq{padding-top:var(--sec)!important;padding-bottom:var(--sec)!important;margin-top:0!important;margin-bottom:0!important}
.wk .sec-head,.pr .sec-head,.ps .sec-head,.pl .sec-head,.hc .sec-head{margin-top:0!important}
.wk .sec-head .h2,.pr .sec-head .h2,.ps .sec-head .h2,.pl .sec-head .h2,.hc .sec-head .h2,.fq .h2{margin-top:0!important}
@media (max-width:767px){.bx__line{flex-direction:column;align-items:center;gap:0;font-size:27vw!important;line-height:.88}}