/* ==========================================================================
   Saints Leisure — site.css
   Dark nightlife palette. The signature motif is the jukebox "rim light":
   a soft coloured glow that edges panels, device frames and primary buttons.
   ========================================================================== */

:root{
  /* surfaces */
  --ink:#0a0616;
  --ink-2:#120b24;
  --panel:#190f2e;
  --panel-2:#22163d;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);

  /* text */
  --fg:#f5f5f7;
  --fg-dim:#a6a6b2;
  --fg-faint:#73737f;

  /* brand — sampled from the client's video (deep violet field, orchid notes)
     and their process graphic (vivid purple #a93fde, bright blue #3b9bf0) */
  --accent:#a93fde;          /* vivid purple  */
  --accent-deep:#7d26ad;
  --accent-soft:#cf8cf2;
  --blue:#3b9bf0;            /* bright blue   */
  --blue-soft:#7cc0f8;

  /* the four jukeboxes alternate purple/blue, as the graphic does */
  --a-orchid:#a93fde;
  --a-amethyst:#3b9bf0;
  --a-indigo:#c06ff0;
  --a-fuchsia:#5eb4f5;

  /* type scale — deliberately restrained; see house typography rules */
  --h1:clamp(2.2rem,3.85vw,3.45rem);
  --h2:clamp(1.68rem,2.64vw,2.4rem);
  --h3:clamp(1.2rem,1.65vw,1.42rem);
  --lede:clamp(1.04rem,1.15vw,1.17rem);
  --body:clamp(1rem,1.1vw,1.08rem);
  --small:.84rem;

  --pad:clamp(52px,6vw,86px);
  --gutter:clamp(18px,4vw,34px);
  --maxw:1380px;
  --r:14px;
  --r-lg:20px;

  --hh:104px;  /* header height — heroes reserve this at the top */
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--body);
  line-height:1.65;
  font-weight:350;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{line-height:1.14;margin:0;font-weight:600;letter-spacing:-.018em}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
p{margin:0}

::selection{background:var(--accent);color:#000}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--pad)}
.section--tight{padding-block:calc(var(--pad) * .62)}

.stack>*+*{margin-top:1rem}

/* ---------- eyebrow / section heading ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .85rem;
}
.eyebrow::before{
  content:"";width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}
.eyebrow--plain::before{display:none}

.lede{font-size:var(--lede);color:var(--fg-dim);max-width:62ch}

.sec-head{max-width:66ch;margin-bottom:clamp(28px,3.4vw,46px)}
.sec-head .lede{margin-top:.9rem}

/* ---------- buttons — always hug their text, never stretch ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  width:auto;max-width:100%;
  padding:.72rem 1.15rem .72rem .72rem;
  border-radius:100px;border:1px solid transparent;
  font-size:.95rem;font-weight:500;letter-spacing:-.01em;
  cursor:pointer;background:none;color:var(--fg);
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.btn__chip{
  display:grid;place-items:center;flex:0 0 auto;
  width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.22);
}
.btn__chip svg{width:15px;height:15px}

.btn--primary{
  background:var(--accent);color:#ffffff;border-color:var(--accent);
  box-shadow:0 0 0 0 rgba(169,63,222,.5),0 10px 28px -14px rgba(169,63,222,.85);
}
.btn--primary .btn__chip{background:rgba(0,0,0,.14)}
.btn--primary:hover{background:#b95ae6;transform:translateY(-2px);box-shadow:0 0 22px -4px rgba(169,63,222,.55),0 14px 30px -14px rgba(169,63,222,.9)}

.btn--ghost{border-color:var(--line);background:rgba(255,255,255,.035);color:var(--fg)}
.btn--ghost .btn__chip{background:rgba(255,255,255,.07)}
.btn--ghost:hover{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.07);transform:translateY(-2px)}

.btn--trail{flex-direction:row-reverse;padding:.72rem .72rem .72rem 1.35rem}
.btn--plain{padding-inline:1.5rem}  /* no chip — even padding both sides */
.btn--lg{font-size:clamp(1.03rem,min(1.3vw,2.26vh),1.18rem);padding:.92rem .92rem .92rem 1.72rem}
.btn--lg .btn__chip{width:38px;height:38px}
.btn--lg .btn__chip svg{width:17px;height:17px}
.btn--primary .btn__chip{background:#fff;color:var(--accent-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:flex-start}

/* ---------- header ----------
   The header is not a band of its own: it sits *inside* the hero, transparent,
   and only grows a background once you scroll away from the top. Hero and page
   heroes reserve --hh of top padding so their content clears it. */
.header{
  position:fixed;top:0;left:0;right:0;z-index:70;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
.header.is-stuck{
  background:rgba(10,6,22,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
.header__in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:1.1rem;min-height:var(--hh);padding-block:16px;
}
.brand{justify-self:start}
.nav{justify-self:center}
.header__cta{justify-self:end}

.brand{display:flex;align-items:center;flex:0 0 auto}
/* Client wordmark. Sized by height so it always holds its weight against the
   nav; the file is white-on-transparent so it needs no plate behind it. */
.brand__logo{height:60px;width:auto;display:block}
.brand--footer .brand__logo{height:64px}

/* nav */
.nav{display:flex;align-items:center;gap:.15rem}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.55rem .78rem;border-radius:9px;
  font-size:.93rem;color:var(--fg-dim);
  transition:color .16s ease,background .16s ease;
}
.nav__link:hover,.nav__item:hover>.nav__link{color:var(--fg);background:rgba(255,255,255,.05)}
.nav__link[aria-current="page"]{color:var(--accent)}
.nav__caret{width:10px;height:10px;transition:transform .2s ease}
.nav__item:hover .nav__caret{transform:rotate(180deg)}

.nav__sub{
  position:absolute;top:calc(100% + 10px);left:0;min-width:214px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:.4rem;
  box-shadow:0 26px 54px -22px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav__sub a{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .7rem;border-radius:9px;font-size:.91rem;color:var(--fg-dim);
}
.nav__sub a:hover{background:rgba(255,255,255,.06);color:var(--fg)}
.nav__dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--accent)}
.nav__dot--orchid{background:var(--a-orchid)}
.nav__dot--indigo{background:var(--a-indigo)}
.nav__dot--fuchsia{background:var(--a-fuchsia)}
.nav__dot--amethyst{background:var(--accent)}

.header__cta{flex:0 0 auto}

/* Menu toggle drawn as an equaliser — reads as both "menu" and "music", and
   sits in a glass chip with the brand edge. Becomes an X when open. */
.burger{
  display:none;position:relative;width:48px;height:48px;flex:0 0 auto;
  border:1px solid rgba(169,63,222,.5);border-radius:14px;
  background:rgba(18,9,34,.6);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 18px -6px rgba(169,63,222,.6),inset 0 1px 0 rgba(255,255,255,.08);
  color:var(--accent-soft);cursor:pointer;
  align-items:center;justify-content:center;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.burger:hover{border-color:var(--accent);box-shadow:0 0 26px -6px rgba(169,63,222,.9)}

.burger__eq{display:flex;align-items:center;gap:3px;height:20px;transition:opacity .2s ease,transform .25s ease}
.burger__eq i{
  width:2.5px;border-radius:2px;background:currentColor;display:block;
  transform-origin:center;
}
.burger__eq i:nth-child(1){height:9px}
.burger__eq i:nth-child(2){height:18px}
.burger__eq i:nth-child(3){height:13px}
.burger__eq i:nth-child(4){height:7px}
.burger__eq i{animation:burger-eq 1.6s ease-in-out infinite}
.burger__eq i:nth-child(2){animation-delay:.2s}
.burger__eq i:nth-child(3){animation-delay:.4s}
.burger__eq i:nth-child(4){animation-delay:.6s}
.burger:hover .burger__eq i{animation-duration:.85s}   /* livelier on hover */
.burger[aria-expanded="true"] .burger__eq i{animation:none}
@keyframes burger-eq{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.25)}}

/* open state: the bars fade out and a cross takes their place */
.burger::before,.burger::after{
  content:"";position:absolute;left:50%;top:50%;width:17px;height:1.8px;border-radius:2px;
  background:currentColor;opacity:0;transform:translate(-50%,-50%) rotate(0deg);
  transition:opacity .2s ease,transform .25s ease;
}
.burger[aria-expanded="true"] .burger__eq{opacity:0;transform:scale(.6)}
.burger[aria-expanded="true"]::before{opacity:1;transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"]::after{opacity:1;transform:translate(-50%,-50%) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.burger__eq i{animation:none}}

/* mobile drawer — translate only; never give it a margin or it leaks a strip */
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(390px,88vw);z-index:90;
  background:linear-gradient(170deg,#1a0f2e,var(--ink-2) 60%);
  border-left:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  box-shadow:-30px 0 60px -30px rgba(0,0,0,.9);
  padding:1.1rem clamp(18px,5vw,26px) 2rem;
  transform:translateX(101%);transition:transform .42s cubic-bezier(.22,1,.36,1);
  overflow-y:auto;display:flex;flex-direction:column;
}
.drawer.is-open{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.drawer__brand{flex:0 0 auto;display:block}
.drawer__brand img{height:46px;width:auto;display:block}

/* contents ease up as the panel slides in, staggered down the list */
.drawer > *{opacity:0;transform:translateY(10px);transition:opacity .32s ease,transform .32s ease}
.drawer.is-open > *{opacity:1;transform:none}
.drawer.is-open > *:nth-child(1){transition-delay:.06s}
.drawer.is-open > *:nth-child(2){transition-delay:.10s}
.drawer.is-open > *:nth-child(3){transition-delay:.14s}
.drawer.is-open > *:nth-child(4){transition-delay:.18s}
.drawer.is-open > *:nth-child(5){transition-delay:.22s}
.drawer.is-open > *:nth-child(6){transition-delay:.26s}
.drawer.is-open > *:nth-child(7){transition-delay:.30s}
.drawer.is-open > *:nth-child(8){transition-delay:.34s}
@media (prefers-reduced-motion:reduce){
  .drawer > *{opacity:1;transform:none;transition:none}
}
.drawer__close{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  background:rgba(169,63,222,.14);color:#fff;cursor:pointer;
  font-size:1.35rem;line-height:1;transition:background .2s ease,border-color .2s ease;
}
.drawer__close:hover{background:rgba(169,63,222,.3);border-color:var(--accent)}

.drawer > a:not(.btn){
  display:flex;align-items:center;justify-content:space-between;
  padding:.95rem .25rem;border-bottom:1px solid var(--line-soft);
  font-size:1.06rem;font-weight:500;color:#fff;
  transition:color .18s ease,padding-left .18s ease;
}
.drawer > a:not(.btn):hover{color:var(--accent-soft);padding-left:.55rem}
.drawer > a:not(.btn)[aria-current="page"]{color:var(--accent-soft)}

/* sub-items stack and sit under a purple rule, instead of running inline */
.drawer__sub{
  display:flex;flex-direction:column;
  margin:.2rem 0 .3rem .35rem;padding-left:.9rem;
  border-left:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
}
.drawer__sub a{
  padding:.6rem .25rem;border-bottom:0;
  font-size:.95rem;font-weight:400;color:var(--fg-dim);
  transition:color .18s ease,padding-left .18s ease;
}
.drawer__sub a:hover{color:#fff;padding-left:.4rem}

.drawer .btn{
  margin-top:1.4rem;align-self:flex-start;
  padding:.72rem 1.7rem;font-size:.98rem;   /* a pill, not a blob */
}

.scrim{position:fixed;inset:0;background:rgba(6,3,14,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:80;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.scrim.is-open{opacity:1;visibility:visible}

/* ---------- hero ----------
   The client's artwork already carries the jukebox and the crowd on its right
   half, so the overlay only darkens the left where the copy sits. Everything
   is sized from both axes so the band always fits the viewport. */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:72% center}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(10,6,22,.95) 0%,rgba(10,6,22,.88) 32%,
      rgba(10,6,22,.5) 52%,rgba(10,6,22,.12) 70%,rgba(10,6,22,.3) 100%),
    linear-gradient(180deg,rgba(10,6,22,.55),transparent 26%,transparent 68%,var(--ink) 100%);
}
.hero__in{
  position:relative;width:100%;
  padding-block:calc(var(--hh) + clamp(8px,2vh,34px)) clamp(6px,1.4vh,20px);
}
.hero__copy{max-width:min(54%,620px);display:flex;flex-direction:column}
.hero__shot{display:none}


.hero__badge{
  display:inline-flex;align-items:center;gap:.42rem;
  align-self:flex-start;   /* a column flex parent was stretching it full width */
  padding:.4rem .85rem;border-radius:100px;
  border:1px solid rgba(169,63,222,.5);
  background:rgba(18,9,34,.62);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 0 18px -8px rgba(169,63,222,.55),inset 0 1px 0 rgba(255,255,255,.07);
  font-size:clamp(.6rem,min(.76vw,1.3vh),.72rem);
  letter-spacing:.09em;text-transform:uppercase;font-weight:500;color:#fff;
  white-space:nowrap;
  margin:0 0 clamp(11px,2.5vh,30px);
}
.hero__badge svg{width:12px;height:12px;color:var(--accent-soft)}

.hero h1{
  font-size:clamp(2rem,min(4.6vw,7vh),3.95rem);
  font-weight:700;line-height:1.08;letter-spacing:-.028em;margin:0;color:#fff;
}
.hero h1 .mark{
  position:relative;display:inline-block;
  background:linear-gradient(96deg,var(--accent-soft) 4%,#e879f9 46%,var(--accent) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.1em;   /* gradient text clips descenders without this */
}
.hero h1 .mark::after{  /* the underline swoosh */
  content:"";position:absolute;left:2%;right:-1%;bottom:.02em;height:.07em;
  border-radius:100px;
  background:linear-gradient(90deg,transparent,var(--accent) 16%,#e879f9 62%,transparent);
  box-shadow:0 0 18px rgba(169,63,222,.85);
}

.hero__lede{
  margin:clamp(12px,2.5vh,30px) 0 0;max-width:48ch;
  font-size:clamp(.97rem,min(1.18vw,1.95vh),1.16rem);
  color:#cfc6dd;line-height:1.6;
}
.hero__lede strong{color:#fff;font-weight:600}

/* four benefits, divided like the reference */
.hfeats{
  display:flex;flex-wrap:wrap;
  margin-top:clamp(14px,3.1vh,40px);
}
.hfeat{
  display:flex;flex-direction:column;gap:.62rem;
  padding-right:clamp(15px,1.9vw,30px);margin-right:clamp(15px,1.9vw,30px);
  border-right:1px solid rgba(255,255,255,.14);
}
.hfeat:last-child{border-right:0;margin-right:0;padding-right:0}
.hfeat__ico{
  width:clamp(37px,min(3.5vw,5.9vh),48px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(169,63,222,.2);border:1px solid rgba(169,63,222,.45);
  color:var(--accent-soft);
}
.hfeat__ico svg{width:clamp(17px,1.5vw,21px);height:clamp(17px,1.5vw,21px)}
.hfeat__t{font-size:clamp(.84rem,min(1vw,1.72vh),.98rem);line-height:1.3;color:#e9e3f2}

.hero .btn-row{margin-top:clamp(14px,3.1vh,40px)}
.hero .btn--lg{padding-block:clamp(.6rem,1.4vh,.85rem)}
.hero .btn--lg.btn--plain{padding-inline:clamp(1.3rem,2vw,1.9rem)}

/* handwritten note and trust card, as positioned in the reference */
.hero__note{
  position:absolute;top:calc(var(--hh) - clamp(18px,2vh,30px));right:var(--gutter);
  display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;
  font-family:'Segoe Script','Bradley Hand','Brush Script MT',cursive;
  font-size:clamp(.95rem,1.35vw,1.4rem);color:#fff;line-height:1.3;
  text-shadow:0 2px 12px rgba(10,6,22,.8);pointer-events:none;
}
.hero__note span:nth-child(2){margin-right:.5rem}
.hero__trust{
  position:absolute;right:var(--gutter);bottom:clamp(6px,2vh,26px);
  display:flex;align-items:center;gap:.7rem;
  padding:.65rem .95rem;border-radius:14px;
  background:rgba(14,8,28,.76);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.hero__avs{display:flex}
.hero__avs img{
  width:35px;height:35px;border-radius:50%;margin-right:-10px;
  object-fit:cover;display:block;
  border:2px solid #2a1840;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.hero__avs img:last-child{margin-right:0}
.hero__stars{display:flex;gap:.1rem;color:#ffc233}
.hero__stars svg{width:13px;height:13px}
.hero__trustt{display:block;font-size:.87rem;color:#ece6f5;margin-top:.15rem;max-width:17ch}

/* bottom strip */
.hstrip{
  position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-radius:18px;
  background:rgba(16,9,32,.82);border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  margin-top:clamp(8px,1.6vh,22px);
}
.hstrip__i{
  display:flex;align-items:center;gap:.85rem;
  padding:clamp(10px,1.7vh,21px) clamp(12px,1.4vw,24px);
  border-right:1px solid rgba(255,255,255,.08);
  font-size:clamp(.81rem,min(.96vw,1.62vh),.95rem);line-height:1.3;color:#e4ddf0;
}
.hstrip__i:last-child{border-right:0}
.hstrip__ico{
  width:clamp(33px,min(2.95vw,5vh),44px);aspect-ratio:1;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:rgba(169,63,222,.2);border:1px solid rgba(169,63,222,.42);
  color:var(--accent-soft);
}
.hstrip__ico svg{width:clamp(15px,1.3vw,19px);height:clamp(15px,1.3vw,19px)}

@media (max-width:1180px){
  .hero__note{display:none}
}
/* Short-and-wide windows (a laptop with browser chrome) are the case that
   overflowed. Compress the remaining fixed steps rather than drop content. */
@media (max-height:780px) and (min-width:1041px){
  .hero__badge{padding:.42rem .9rem;margin-bottom:clamp(6px,1.3vh,14px)}
  .hfeat__t{font-size:clamp(.74rem,1.4vh,.84rem)}
  .hstrip__i{font-size:clamp(.72rem,1.35vh,.82rem)}
  .hero__lede{max-width:44ch}
  .hero__note{font-size:clamp(.9rem,1.15vw,1.15rem)}
}
@media (max-width:1040px) and (min-width:861px){
  .hero__bg img{object-position:68% center}
  .hero__bg::after{
    background:
      linear-gradient(90deg,rgba(10,6,22,.94) 0%,rgba(10,6,22,.8) 46%,rgba(10,6,22,.5) 100%),
      linear-gradient(180deg,rgba(10,6,22,.6),transparent 30%,var(--ink) 100%);
  }
  .hero__copy{max-width:100%}
  .hero__trust{position:static;margin-top:clamp(14px,2.4vh,22px);width:max-content;max-width:100%}
  .hstrip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hstrip__i:nth-child(3n){border-right:0}
}

/* ---- phone hero: copy, then the artwork as a block, then features, then the
   trust bar — the order in the client's mobile reference ---- */
@media (max-width:860px){
  .hero{
    min-height:0;display:block;background:var(--ink);
    padding-bottom:clamp(28px,5.5vh,52px);   /* clear of the stats band below */
  }
  .hero__bg{display:none}
  .hero__copy{max-width:100%}
  .hero__in{
    display:flex;flex-direction:column;
    padding-block:calc(var(--hh) + clamp(10px,2.2vh,22px)) clamp(16px,3vh,28px);
  }
  .hero__badge{align-self:flex-start}
  .hero h1{font-size:clamp(2rem,8.4vw,2.9rem)}
  .hero__lede{max-width:100%;font-size:clamp(.95rem,4vw,1.08rem)}

  /* buttons above the artwork, features below it */
  .hero .btn-row{order:1;margin-top:clamp(14px,2.6vh,24px);flex-wrap:nowrap;gap:.5rem}
  .hero .btn-row .btn{flex:0 1 auto;min-width:0;white-space:nowrap;
    font-size:clamp(.8rem,3.6vw,.95rem);padding-inline:clamp(1rem,4.2vw,1.5rem)}
  /* full-bleed: breaks out of the page gutter, edge to edge */
  .hero__shot{
    order:2;display:block;position:relative;
    margin:clamp(14px,2.6vh,24px) calc(var(--gutter) * -1) 0;
  }
  .hfeats{order:3;margin-top:clamp(16px,3vh,26px)}

  .hero__shot img{
    width:100%;display:block;
    /* the supplied file is already cropped to the subject — shown as-is */
    height:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
  }


  /* four features across, divided, as the reference shows */
  .hero .hfeats{display:flex;flex-wrap:nowrap;align-items:stretch;gap:0}
  .hero .hfeat{
    flex:1 1 0;min-width:0;
    /* a later rule flips these to a row — the reference stacks icon over label */
    display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:.45rem;padding-inline:clamp(3px,1.2vw,9px);margin-right:0;
    border-right:1px solid rgba(255,255,255,.14);
  }
  .hero .hfeat:last-child{border-right:0}
  .hero .hfeat__ico{width:clamp(40px,11vw,54px);margin-inline:auto}
  .hero .hfeat__ico svg{width:clamp(20px,5.4vw,26px);height:clamp(20px,5.4vw,26px)}
  .hero .hfeat__t{font-size:clamp(.63rem,2.85vw,.8rem);line-height:1.22;letter-spacing:-.01em}

  /* trust bar spans the width */
  .hero__trust{
    position:static;order:4;width:100%;margin-top:clamp(16px,3vh,26px);
    justify-content:center;gap:clamp(8px,2.4vw,16px);
    padding:clamp(9px,2.2vw,13px) clamp(10px,2.6vw,16px);border-radius:100px;
  }
  .hero__avs{padding-right:clamp(8px,2.6vw,14px);border-right:1px solid rgba(255,255,255,.18)}
  .hero__avs img{width:clamp(26px,7.6vw,34px);height:clamp(26px,7.6vw,34px);margin-right:-9px}
  .hero__avs img:last-child{margin-right:0}
  /* the rating line stays on one line */
  .hero__trustt{max-width:none;white-space:nowrap;font-size:clamp(.56rem,2.75vw,.82rem)}
  .hero__stars svg{width:clamp(12px,3.2vw,16px);height:clamp(12px,3.2vw,16px)}
  /* very narrow phones: drop the divider and shrink the faces further */
  @media (max-width:360px){
    .hero__avs{border-right:0;padding-right:6px}
    .hero__avs img{width:24px;height:24px;margin-right:-8px}
  }
  .hero__note{display:none}

  /* the pill stays on one line at phone widths */
  .hero__badge{
    font-size:clamp(.52rem,2.5vw,.66rem);letter-spacing:.07em;
    padding:.38rem .78rem;gap:.38rem;
  }
  .hero__badge svg{width:clamp(10px,2.8vw,12px);height:clamp(10px,2.8vw,12px)}

  .hstrip{grid-template-columns:repeat(3,minmax(0,1fr))}
}

}
@media (max-width:720px){
  .hstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hstrip__i:nth-child(3n){border-right:1px solid rgba(255,255,255,.08)}
  .hstrip__i:nth-child(2n){border-right:0}
  .hfeat{padding-right:clamp(8px,2.5vw,14px);margin-right:clamp(8px,2.5vw,14px)}
}
@media (max-width:720px){
  /* Two columns so every item is fully visible — a scroll row left the next
     item visibly sliced at the edge. */
  .hstrip{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;
  }
  .hstrip__i{
    min-width:0;
    border-right:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  /* the label is a flex child: without min-width:0 it refuses to shrink below
     its longest word and pushes the item past its grid track */
  .hstrip__i > span{min-width:0;overflow-wrap:anywhere}
  .hstrip__i:nth-child(2n){border-right:0}
  .hstrip__i:last-child{grid-column:1 / -1;border-right:0;border-bottom:0}
  .hstrip__i:nth-last-child(2){border-bottom:0}
  .hfeats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.6vh,14px)}
  .hfeat{border-right:0;padding-right:0;margin-right:0;flex-direction:row;align-items:center;gap:.6rem}
  .hfeat__ico{width:36px}
  .hero__trust{padding:.5rem .75rem;gap:.55rem;margin-top:clamp(10px,1.8vh,18px)}
  .hero__avs img{width:28px;height:28px}
  .hero__trustt{font-size:.76rem;max-width:none}
  .hero__in{padding-block:calc(var(--hh) + clamp(6px,1.4vh,22px)) clamp(4px,1vh,14px)}
}

/* ---------- the jukebox device (CSS-drawn, stands in for product photos) --- */
.jb{
  --jb-accent:var(--a-orchid);
  position:relative;margin-inline:auto;
  /* 0.702 = 33/47 aspect. Capping width from leftover height keeps the box
     inside the viewport instead of letterboxing it in a too-wide column. */
  width:100%;max-width:330px;
  container-type:inline-size;   /* internals size from the device, not the page */
  border-radius:26px;
  background:linear-gradient(168deg,#211630,#0c0812 64%);
  /* the rim light, entirely in border + shadow so nothing can wash the cabinet */
  border:1px solid color-mix(in srgb,var(--jb-accent) 62%,transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 0 22px -6px color-mix(in srgb,var(--jb-accent) 45%,transparent),
    0 0 0 1px rgba(0,0,0,.55),
    0 0 18px -2px color-mix(in srgb,var(--jb-accent) 75%,transparent),
    0 0 64px -10px color-mix(in srgb,var(--jb-accent) 65%,transparent),
    0 42px 70px -34px rgba(0,0,0,1);
  padding:12px;   /* NOT cqw: on the container itself that resolves to the viewport */
  display:flex;flex-direction:column;
  animation:jb-float 7s ease-in-out infinite;
}
@keyframes jb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}


.jb__screen{
  flex:0 0 auto;border-radius:4.5cqw;overflow:hidden;
  background:linear-gradient(172deg,#160c28,#08050f);
  border:1px solid rgba(255,255,255,.1);
  padding:3.4cqw 3cqw;display:flex;flex-direction:column;gap:2.7cqw;
}
.jb__logo{display:flex;justify-content:center;padding:.6cqw 0 .3cqw}
.jb__logo img{height:7cqw;width:auto;display:block;opacity:.96}

.jb__search{
  display:flex;align-items:center;justify-content:space-between;gap:7px;
  padding:1.5cqw 1.5cqw 1.5cqw 3cqw;border-radius:2.4cqw;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  font-size:3.1cqw;color:rgba(255,255,255,.5);flex:0 0 auto;
}
.jb__search svg{
  width:3.3cqw;height:3.3cqw;padding:1.2cqw;box-sizing:content-box;flex:0 0 auto;
  border-radius:1.8cqw;background:var(--jb-accent);color:#fff;
}

.jb__row{display:flex;flex-direction:column;gap:1.2cqw;flex:0 0 auto}
.jb__rowhead{display:flex;align-items:center;justify-content:space-between;font-size:2.7cqw}
.jb__rowhead span{color:rgba(255,255,255,.8)}
.jb__rowhead b{font-weight:400;font-size:2.4cqw;color:var(--jb-accent)}
.jb__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2cqw}
.jb__tile{
  display:block;aspect-ratio:3/4;border-radius:1.2cqw;
  background:linear-gradient(155deg,color-mix(in srgb,var(--jb-accent) 58%,#2a1740),#150d24);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.jb__tile:nth-child(2){background:linear-gradient(155deg,#5d4a9e,#171026)}
.jb__tile:nth-child(3){background:linear-gradient(155deg,color-mix(in srgb,var(--jb-accent) 40%,#3b2a63),#120b20)}
.jb__tile:nth-child(4){background:linear-gradient(155deg,#7a4ea8,#140d22)}


.jb__grille{
  display:flex;gap:.9cqw;align-items:center;flex:0 0 auto;
  margin-top:2.7cqw;padding:1.8cqw 2.7cqw;border-radius:2.1cqw;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
}
.jb__grille i{flex:1;height:1.2cqw;border-radius:.9cqw;background:rgba(255,255,255,.16)}
.jb__grille i:first-child{background:var(--jb-accent);box-shadow:0 0 7px var(--jb-accent)}

.jb__plinth{
  flex:0 0 auto;margin-top:2.1cqw;padding:2.7cqw 3cqw;border-radius:2.7cqw;
  display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
}
.jb__plinth img{height:5.2cqw;width:auto;display:block;opacity:.9}

.jb--orchid{--jb-accent:var(--a-orchid)}

/* ---------- stats ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-block:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent);
}
.stat{padding:clamp(22px,3vw,34px) var(--gutter);text-align:center;border-right:1px solid var(--line-soft)}
.stat:last-child{border-right:0}
.stat__n{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:650;letter-spacing:-.03em;line-height:1;color:var(--fg)}
.stat__n sup{font-size:.52em;color:var(--accent);font-weight:600;top:-.5em;position:relative}
.stat__l{font-size:.78rem;color:var(--fg-faint);margin-top:.5rem;letter-spacing:.03em}


/* ---------- about band ----------
   The client's artwork is the section background, sitting to the left. The
   overlay fades in from the middle so the copy on the right stays readable. */
.about-band{position:relative;overflow:hidden;isolation:isolate;background:var(--ink)}

/* The artwork is a finished, framed composition — it must never be cropped to
   fill the band, or its own cards get sliced. It is contained inside a left
   column at its true aspect; the rest of the band is flat ink. */
/* The box takes the artwork's own aspect so the art fills it exactly — that way
   the feather below lines up with the real edges instead of empty letterbox. */
.about-band__bg{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:48%;aspect-ratio:1552/1013;z-index:-2;
}
.about-band__bg img{width:100%;height:100%;display:block;object-fit:cover}

/* Feather the top, bottom and right edges into the section background so the
   panel melts into the band instead of sitting on it as a hard rectangle. */
.about-band__bg img{
  -webkit-mask-image:
    linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%),
    linear-gradient(90deg,#000 0%,#000 80%,transparent 100%);
  mask-image:
    linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%),
    linear-gradient(90deg,#000 0%,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* ambient purple so the space around the artwork is not dead flat */
.about-band::before{
  content:"";position:absolute;z-index:-3;pointer-events:none;
  width:min(62vw,760px);aspect-ratio:1;border-radius:50%;filter:blur(140px);
  background:rgba(169,63,222,.22);left:-10%;top:50%;transform:translateY(-50%);
}
.about-band::after{
  content:"";position:absolute;z-index:-3;pointer-events:none;
  width:min(46vw,540px);aspect-ratio:1;border-radius:50%;filter:blur(130px);
  background:rgba(59,155,240,.12);right:-8%;top:-18%;
}

/* the copy sits in the right-hand half, over the faded side */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(24px,4vw,56px);align-items:center;min-height:min(74vh,660px)}
.about__copy{grid-column:2}

.about__h{
  font-size:clamp(1.8rem,3.1vw,2.9rem);font-weight:700;
  line-height:1.12;letter-spacing:-.025em;margin:0;color:#fff;
}
.about__h .mark{
  position:relative;display:inline-block;font-style:italic;
  background:linear-gradient(96deg,var(--accent-soft) 4%,#e879f9 48%,var(--accent) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.1em;   /* gradient text clips descenders without this */
}
.about__h .mark::after{
  content:"";position:absolute;left:1%;right:-2%;bottom:.01em;height:.065em;
  border-radius:100px;
  background:linear-gradient(90deg,transparent,var(--accent) 18%,#e879f9 64%,transparent);
  box-shadow:0 0 16px rgba(169,63,222,.8);
}
.about__body{
  margin:clamp(16px,2vw,24px) 0 0;color:#cfc6dd;
  font-size:clamp(.95rem,1.05vw,1.06rem);line-height:1.68;
}

/* pillars as cards */
.acc--cards{border-top:0;margin-top:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:.7rem}
.acc--cards .acc__item{
  border-bottom:0;border:1px solid var(--line);border-radius:16px;
  background:rgba(14,8,28,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  overflow:hidden;transition:border-color .22s ease,background .22s ease;
}
.acc--cards .acc__item:has(.acc__btn[aria-expanded="true"]){
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:rgba(169,63,222,.14);
}
.acc--cards .acc__btn{padding:1rem 1.1rem;gap:.85rem}
.acc--cards .acc__n{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font-size:.76rem;
  background:rgba(169,63,222,.2);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  color:var(--accent-soft);
}
.acc--cards .acc__btn[aria-expanded="true"] .acc__n{background:var(--accent);border-color:var(--accent);color:#fff}
.acc--cards .acc__ico{background:rgba(255,255,255,.06)}
.acc--cards .acc__panel p{padding:0 1.1rem 1.1rem 3.05rem;font-size:.92rem;color:#c3b8d4}

@media (max-width:980px){
  /* Stacked. The artwork sits above the copy at full width, still uncropped,
     rather than hiding behind text. */
  .about{grid-template-columns:minmax(0,1fr);min-height:0}
  .about__copy{grid-column:1}
  .about-band__bg{position:static;transform:none;width:100%;margin-bottom:clamp(20px,3vw,32px)}
  .about-band__bg img{height:auto;object-fit:contain;object-position:center}
  .about-band__bg img{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add;
  }
  .about-band__bg::after{display:none}
  .about-band::before{width:min(90vw,620px);top:28%}
}
@media (max-width:620px){
  .acc--cards .acc__btn{padding:.85rem .9rem;gap:.65rem}
  .acc--cards .acc__n{width:30px;height:30px;font-size:.72rem}
  .acc--cards .acc__panel p{padding:0 .9rem 1rem 2.5rem}
}


/* ---------- benefits ----------
   Numbered neon cards from the client's mockup: a squared number badge with a
   rule running off it, the title, the copy, then a "Learn more" action. */
.bene{position:relative;overflow:hidden;isolation:isolate}
.bene::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(70vw,820px);aspect-ratio:1;border-radius:50%;filter:blur(150px);
  background:rgba(169,63,222,.13);left:50%;top:40%;transform:translate(-50%,-50%);
}
/* second line of the heading picks up the brand gradient */
.sec-head h2 .mark{
  position:relative;display:inline-block;
  background:linear-gradient(96deg,var(--accent-soft) 2%,#e879f9 46%,var(--accent) 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.1em;   /* gradient text clips descenders without this */
}
.sec-head h2 .mark::after{
  content:"";position:absolute;left:0;right:34%;bottom:.015em;height:.055em;
  border-radius:100px;
  background:linear-gradient(90deg,var(--accent),#e879f9 70%,transparent);
  box-shadow:0 0 14px rgba(169,63,222,.8);
}

.bgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.7vw,22px)}
.bcard{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(20px,2.1vw,27px);
  border-radius:22px;
  background:linear-gradient(168deg,rgba(52,24,88,.5),rgba(16,9,30,.82) 62%);
  border:1px solid color-mix(in srgb,var(--accent) 36%,transparent);
  box-shadow:0 0 30px -10px rgba(169,63,222,.55),inset 0 1px 0 rgba(255,255,255,.07);
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.bcard:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--accent) 68%,transparent);
  box-shadow:0 0 44px -10px rgba(169,63,222,.8),inset 0 1px 0 rgba(255,255,255,.1);
}
.bcard__top{display:flex;align-items:center;gap:.85rem;margin-bottom:clamp(14px,1.6vw,20px)}
.bcard__n{
  width:clamp(42px,3.5vw,50px);aspect-ratio:1;flex:0 0 auto;
  display:grid;place-items:center;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--accent) 62%,transparent);
  background:rgba(169,63,222,.15);
  font-size:clamp(1rem,1.15vw,1.2rem);font-weight:450;color:#fff;
  letter-spacing:.02em;
}
.bcard__rule{
  flex:1;height:1px;min-width:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),transparent);
}
.bcard h3{font-size:clamp(1.1rem,1.35vw,1.32rem);font-weight:650;margin-bottom:.6rem;color:#fff}
.bcard p{color:var(--fg-dim);font-size:.92rem;line-height:1.6}
.bcard__more{
  margin-top:clamp(18px,2vw,26px);padding-top:0;
  display:inline-flex;align-items:center;gap:.8rem;
  font-size:.93rem;font-weight:600;color:#fff;align-self:flex-start;
}
.bcard__more i{
  width:clamp(34px,2.8vw,40px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;flex:0 0 auto;
  background:var(--accent);color:#fff;
  box-shadow:0 0 18px rgba(169,63,222,.85);
  transition:transform .2s ease,box-shadow .2s ease;
}
.bcard__more i svg{width:16px;height:16px}
.bcard__more:hover i{transform:translateX(3px);box-shadow:0 0 26px rgba(169,63,222,1)}

@media (max-width:1040px){ .bgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){
  .bgrid{grid-template-columns:minmax(0,1fr)}
  .sec-head h2 .mark::after{right:20%}
}

/* ---------- generic cards ---------- */
.grid{display:grid;gap:clamp(14px,1.8vw,20px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  position:relative;border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);
  background:linear-gradient(168deg,var(--panel),var(--ink-2));
  border:1px solid var(--line);
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.card:hover{border-color:rgba(255,255,255,.2);transform:translateY(-3px);box-shadow:0 24px 46px -26px rgba(0,0,0,.95)}
.card__ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:1.05rem;
  background:rgba(169,63,222,.11);border:1px solid rgba(169,63,222,.22);color:var(--accent);
}
.card__ico svg{width:20px;height:20px}
.card h3{margin-bottom:.55rem}
.card p{color:var(--fg-dim);font-size:.93rem}

.card__num{
  position:absolute;top:clamp(16px,2vw,22px);right:clamp(18px,2.2vw,24px);
  font-size:.76rem;font-weight:600;color:var(--fg-faint);letter-spacing:.1em;
}

/* ---------- product cards ---------- */
.prod{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(170deg,var(--panel),var(--ink-2));
  padding:clamp(22px,2.6vw,30px);
  display:flex;flex-direction:column;gap:1rem;
  transition:border-color .22s ease,transform .22s ease;
}
.prod:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--p-accent) 45%,transparent)}
.prod::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--p-accent),transparent);
  opacity:.75;
}
.prod--orchid{--p-accent:var(--a-orchid)}
.prod--amethyst{--p-accent:var(--accent)}
.prod--indigo{--p-accent:var(--a-indigo)}
.prod--fuchsia{--p-accent:var(--a-fuchsia)}

.prod__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.prod__name{font-size:1.22rem;font-weight:620;letter-spacing:-.02em}
.prod__strap{font-size:.84rem;color:var(--p-accent);margin-top:.2rem;font-weight:500}
.prod__tag{
  font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  padding:.3rem .6rem;border-radius:100px;white-space:nowrap;flex:0 0 auto;
  background:color-mix(in srgb,var(--p-accent) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--p-accent) 38%,transparent);
  color:var(--p-accent);
}
.prod p{color:var(--fg-dim);font-size:.92rem}
.prod__feet{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.3rem}
.pill{
  font-size:.74rem;padding:.3rem .62rem;border-radius:100px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--fg-dim);
}
.pill--on{border-color:rgba(169,63,222,.32);color:var(--accent);background:rgba(169,63,222,.08)}
.prod__link{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.9rem;font-weight:500;color:var(--fg);
  transition:gap .2s ease;
}
.prod:hover .prod__link{gap:.75rem}
.prod__link svg{width:14px;height:14px;color:var(--p-accent)}

/* ---------- split / feature rows ---------- */
.split{
  display:grid;gap:clamp(30px,4.5vw,60px);
  grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;
}
.split--rev .split__media{order:2}
.split__media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split__media::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 40%,rgba(10,6,22,.55))}

.ticklist{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-direction:column;gap:.72rem}
.ticklist li{display:flex;gap:.7rem;align-items:flex-start;font-size:.94rem;color:var(--fg-dim)}
.ticklist svg{width:17px;height:17px;flex:0 0 auto;margin-top:.22rem;color:var(--accent)}

/* ---------- accordion (pillars + faqs) ---------- */
.acc{border-top:1px solid var(--line-soft)}
.acc__item{border-bottom:1px solid var(--line-soft)}
.acc__btn{
  width:100%;display:flex;align-items:center;gap:1rem;justify-content:space-between;
  padding:1.15rem .2rem;background:none;border:0;cursor:pointer;
  color:var(--fg);font-family:inherit;font-size:1.01rem;font-weight:500;text-align:left;
  letter-spacing:-.012em;line-height:1.4;
}
.acc__btn:hover{color:var(--accent)}
.acc__n{font-size:.78rem;color:var(--accent);font-weight:600;flex:0 0 auto;letter-spacing:.08em}
.acc__q{flex:1;min-width:0}
.acc__ico{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.04);transition:.25s;
}
.acc__ico svg{width:13px;height:13px;transition:transform .25s ease}
.acc__btn[aria-expanded="true"] .acc__ico{background:var(--accent);border-color:var(--accent);color:#ffffff}
.acc__btn[aria-expanded="true"] .acc__ico svg{transform:rotate(45deg)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.acc__panel[data-open="true"]{grid-template-rows:1fr}
.acc__panel>div{overflow:hidden}
.acc__panel p{padding:0 3rem 1.3rem 0;color:var(--fg-dim);font-size:.94rem;max-width:74ch}

/* ---------- features ---------- */
.feat{position:relative}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.fcard{
  position:relative;overflow:hidden;
  padding:clamp(22px,2.4vw,32px);border-radius:22px;
  background:linear-gradient(168deg,rgba(46,22,80,.42),rgba(16,9,30,.8) 64%);
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.fcard::after{  /* soft corner bloom */
  content:"";position:absolute;top:-40%;right:-25%;width:60%;aspect-ratio:1;
  border-radius:50%;background:rgba(169,63,222,.2);filter:blur(60px);pointer-events:none;
}
.fcard:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:0 0 40px -12px rgba(169,63,222,.7);
}
.fcard__ico{
  position:relative;display:grid;place-items:center;
  width:clamp(56px,4.6vw,66px);aspect-ratio:1;border-radius:50%;
  margin-bottom:clamp(16px,1.8vw,22px);
  background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent-deep));
  color:#fff;
  box-shadow:0 0 0 7px rgba(169,63,222,.13),0 10px 26px -8px rgba(169,63,222,.85);
}
.fcard__ico svg{width:clamp(24px,2vw,28px);height:clamp(24px,2vw,28px)}
.fcard h3{font-size:clamp(1.1rem,1.35vw,1.3rem);font-weight:650;margin-bottom:.6rem;color:#fff}
.fcard p{color:var(--fg-dim);font-size:.93rem;line-height:1.62}

/* ---------- testimonials: two rows, opposite directions ---------- */
.tst{position:relative;overflow:hidden}
.mq{
  display:flex;flex-direction:column;gap:clamp(12px,1.5vw,18px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.mq__row{overflow:hidden}
.mq__track{
  display:flex;gap:clamp(12px,1.5vw,18px);width:max-content;
  animation:mq-left 56s linear infinite;
}
.mq__track--rev{animation-name:mq-right;animation-duration:64s}
@keyframes mq-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mq-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mq:hover .mq__track,.mq:focus-within .mq__track{animation-play-state:paused}

.tcard{
  flex:0 0 auto;width:clamp(290px,25vw,360px);
  display:flex;flex-direction:column;gap:.9rem;
  padding:clamp(20px,1.9vw,26px);border-radius:20px;
  background:linear-gradient(168deg,rgba(44,21,76,.46),rgba(16,9,30,.82) 66%);
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  transition:border-color .22s ease;
}
.tcard:hover{border-color:color-mix(in srgb,var(--accent) 58%,transparent)}
.tcard__stars{display:flex;gap:.16rem;color:var(--accent-soft)}
.tcard__stars svg{width:15px;height:15px}
.tcard p{font-size:.97rem;line-height:1.6;color:#e7e0f2;flex:1;margin:0}
.tcard__by{display:flex;align-items:center;gap:.75rem;padding-top:.85rem;border-top:1px solid var(--line-soft)}
.tcard__av{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(169,63,222,.16);border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);
  color:var(--accent-soft);font-weight:650;font-size:.84rem;
}
.tcard__nm{display:block;font-weight:600;font-size:.94rem;line-height:1.25;color:#fff}
.tcard__loc{display:block;font-size:.8rem;color:var(--fg-faint)}

@media (prefers-reduced-motion:reduce){
  .mq__track{animation:none}
  .mq__row{overflow-x:auto}
}
@media (max-width:1040px){ .fgrid{grid-template-columns:minmax(0,1fr)} }

/* ---------- steps ----------
   Four capsules alternating purple and blue, following the client's process
   graphic: a tinted capsule, a solid disc holding the icon, then the copy. */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.step{
  --tone:var(--accent);--tone-2:var(--accent-soft);
  position:relative;text-align:center;
  padding:clamp(24px,2.6vw,32px) clamp(16px,1.8vw,24px) clamp(26px,3vw,36px);
  border-radius:999px/120px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--tone) 26%,transparent),
    color-mix(in srgb,var(--tone-2) 13%,transparent) 62%,
    transparent);
  border:1px solid color-mix(in srgb,var(--tone) 26%,transparent);
}
.step--blue{--tone:var(--blue);--tone-2:var(--blue-soft)}
.step__disc{
  width:clamp(62px,6vw,80px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;margin:0 auto clamp(14px,1.6vw,20px);
  background:var(--tone);color:#fff;
  box-shadow:0 14px 34px -12px color-mix(in srgb,var(--tone) 90%,transparent);
}
.step__disc svg{width:clamp(26px,2.6vw,33px);height:clamp(26px,2.6vw,33px)}
.step h3{margin-bottom:.55rem;font-size:clamp(1rem,1.25vw,1.14rem);letter-spacing:-.01em}
.step p{color:var(--fg-dim);font-size:.9rem;line-height:1.55}

/* ---------- locations ---------- */
.locs{display:flex;flex-wrap:wrap;gap:.55rem}
.loc{
  display:inline-flex;align-items:center;gap:.48rem;
  padding:.62rem 1rem;border-radius:100px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);
  font-size:.92rem;color:var(--fg-dim);
  transition:border-color .18s ease,color .18s ease,background .18s ease,transform .18s ease;
}
.loc:hover{border-color:rgba(169,63,222,.5);color:var(--fg);background:rgba(169,63,222,.07);transform:translateY(-2px)}
.loc svg{width:13px;height:13px;color:var(--accent);flex:0 0 auto}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);isolation:isolate}
.cta__bg{position:absolute;inset:0;z-index:-2}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,6,22,.96),rgba(10,6,22,.78))}
.cta__glow{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(90px);z-index:-1;background:rgba(169,63,222,.28);right:-120px;top:-150px}
.cta__in{padding:clamp(32px,4.5vw,58px) clamp(24px,3.6vw,52px);max-width:62ch}
.cta h2{margin-bottom:.9rem}
.cta .btn-row{margin-top:1.6rem}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft);isolation:isolate}
.phero__bg{position:absolute;inset:0;z-index:-2}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.phero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,6,22,.84),rgba(10,6,22,.93) 60%,var(--ink))}
.phero__glow{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(92px);z-index:-1;opacity:.45;background:rgba(255,61,139,.4);top:-170px;right:-80px}
.phero__in{padding-block:calc(clamp(42px,5.6vw,76px) + var(--hh)) clamp(42px,5.6vw,76px);position:relative}
.phero .lede{margin-top:1rem}

.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.8rem;color:var(--fg-faint);margin-bottom:1.1rem}
.crumbs a:hover{color:var(--accent)}
.crumbs svg{width:11px;height:11px;opacity:.5}

/* ---------- product detail layout ---------- */
.pdetail{display:grid;gap:clamp(32px,4.6vw,62px);grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center}
.spec{
  margin-top:1.6rem;padding:.7rem 1rem;border-radius:100px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  background:rgba(169,63,222,.09);
  font-size:.85rem;color:var(--fg-dim);
  display:inline-flex;align-items:center;gap:.6rem;width:auto;max-width:100%;
}
.spec svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto}
.note{
  margin-top:1rem;font-size:.84rem;color:var(--fg-faint);
  display:flex;gap:.55rem;align-items:flex-start;
}
.note svg{width:14px;height:14px;flex:0 0 auto;margin-top:.2rem;color:var(--fg-faint)}

/* ---------- contact ----------
   Two columns: contact rows and a "what happens next" card on the left, the
   enquiry panel on the right. Every field carries a leading icon chip. */
.ctc{position:relative;overflow:hidden;isolation:isolate}
.ctc::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(60vw,700px);aspect-ratio:1;border-radius:50%;filter:blur(150px);
  background:rgba(169,63,222,.14);right:-10%;top:-10%;
}
.ctc__in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(26px,3.4vw,52px);align-items:start}

.ctc__h{font-size:clamp(1.8rem,3vw,2.8rem);font-weight:700;line-height:1.12;letter-spacing:-.025em;margin:0;color:#fff}
.ctc__h .mark{
  position:relative;display:inline-block;
  background:linear-gradient(96deg,var(--accent-soft) 2%,#e879f9 46%,var(--accent) 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.1em;   /* gradient text clips descenders without this */
}
.ctc__h .mark::after{
  content:"";position:absolute;left:0;right:30%;bottom:.015em;height:.06em;border-radius:100px;
  background:linear-gradient(90deg,var(--accent),#e879f9 70%,transparent);
  box-shadow:0 0 14px rgba(169,63,222,.8);
}
.ctc__lede{margin:clamp(14px,1.8vw,22px) 0 clamp(20px,2.4vw,30px);color:#cfc6dd;font-size:clamp(.95rem,1.05vw,1.06rem);line-height:1.65;max-width:46ch}

/* contact rows */
.crows{display:flex;flex-direction:column;gap:.7rem}
.crow{
  display:flex;align-items:center;gap:.95rem;
  padding:.9rem 1rem;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  background:rgba(22,12,40,.55);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
a.crow:hover{border-color:color-mix(in srgb,var(--accent) 65%,transparent);background:rgba(169,63,222,.1);transform:translateY(-2px)}
.crow__ico{
  width:46px;aspect-ratio:1;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);
  background:rgba(169,63,222,.14);color:var(--accent-soft);
  box-shadow:0 0 16px -4px rgba(169,63,222,.7);
}
.crow__ico svg{width:20px;height:20px}
.crow__txt{flex:1;min-width:0}
.crow__k{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint)}
.crow__v{display:block;font-size:.98rem;color:#fff;margin-top:.15rem;overflow-wrap:anywhere}
.crow__go{
  width:32px;aspect-ratio:1;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--fg-dim);
}
.crow__go svg{width:14px;height:14px}

/* what happens next */
.cnext{
  display:flex;gap:1rem;margin-top:.8rem;padding:clamp(18px,1.9vw,24px);border-radius:18px;
  background:linear-gradient(165deg,rgba(80,34,130,.5),rgba(26,14,46,.7));
  border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);
  box-shadow:0 0 34px -12px rgba(169,63,222,.7);
}
.cnext__ico{
  width:48px;aspect-ratio:1;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 62%,transparent);
  background:rgba(169,63,222,.2);color:var(--accent-soft);
}
.cnext__ico svg{width:21px;height:21px}
.cnext h3{font-size:1.05rem;font-weight:650;color:#fff;margin-bottom:.45rem}
.cnext p{font-size:.9rem;line-height:1.6;color:#cfc6dd}

/* enquiry panel */
.cpanel{
  padding:clamp(22px,2.6vw,38px);border-radius:24px;
  background:linear-gradient(168deg,rgba(40,19,68,.55),rgba(14,8,26,.8) 62%);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  box-shadow:0 0 46px -14px rgba(169,63,222,.6),inset 0 1px 0 rgba(255,255,255,.06);
}
.cpanel__h{font-size:clamp(1.4rem,2.1vw,1.95rem);font-weight:700;color:#fff;letter-spacing:-.022em;margin:0}
.cpanel__lede{margin:.7rem 0 clamp(18px,2vw,26px);color:#cfc6dd;font-size:.96rem;line-height:1.6}

.fgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.3vw,18px)}
.fld--wide{grid-column:1 / -1}
.fld label{display:block;font-size:.88rem;color:#e4ddf0;margin-bottom:.5rem}
.fld label b{color:var(--accent-soft);font-weight:400}

.ifield{display:flex;align-items:stretch;gap:.5rem}
.ifield__ico{
  width:52px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  background:rgba(169,63,222,.11);color:var(--accent-soft);
}
.ifield__ico svg{width:19px;height:19px}
.ifield--area .ifield__ico{align-self:stretch}
.ifield input,.ifield select,.ifield textarea{
  flex:1;min-width:0;width:100%;
  padding:.85rem .95rem;border-radius:13px;
  background:rgba(0,0,0,.34);border:1px solid var(--line);
  color:#fff;font-family:inherit;font-size:.95rem;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.ifield textarea{resize:vertical;min-height:122px;line-height:1.55}
.ifield input::placeholder,.ifield textarea::placeholder{color:rgba(255,255,255,.34)}
.ifield input:focus,.ifield select:focus,.ifield textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(0,0,0,.45);
  box-shadow:0 0 0 3px rgba(169,63,222,.2);
}
.ifield select{
  appearance:none;cursor:pointer;padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cf8cf2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:17px;
}

.cpanel__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;
  margin-top:clamp(18px,2vw,26px);
}
.cpanel__foot .btn{flex:0 0 auto}
.form__note{display:flex;align-items:center;gap:.5rem;font-size:.84rem;color:var(--fg-faint);margin:0}
.form__note svg{width:15px;height:15px;flex:0 0 auto;color:var(--accent-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:980px){
  .ctc__in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .fgrid2{grid-template-columns:minmax(0,1fr)}
  .ifield__ico{width:46px}
  .crow__ico{width:42px}
  .crow__ico svg{width:18px;height:18px}
}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line-soft);background:var(--ink-2);margin-top:clamp(40px,5vw,70px)}
.footer__in{
  display:grid;gap:clamp(26px,3.4vw,46px);
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  padding-block:clamp(40px,4.6vw,62px);
}
.footer h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:1rem;font-weight:600}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem}
.footer a{font-size:.91rem;color:var(--fg-dim)}
.footer a:hover{color:var(--accent)}
.footer__about p{font-size:.9rem;color:var(--fg-dim);margin-top:1rem;max-width:40ch}
.footer__social{display:flex;gap:.5rem;margin-top:1.2rem}
.footer__social a{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--fg-dim);
  transition:.18s;
}
.footer__social a:hover{border-color:rgba(169,63,222,.45);color:var(--accent);transform:translateY(-2px)}
.footer__social svg{width:16px;height:16px}
.footer__bar{
  border-top:1px solid var(--line-soft);padding-block:1.35rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:space-between;align-items:center;
  font-size:.82rem;color:var(--fg-faint);
}

/* ---------- reveal (must never gate content — JS adds .is-in, CSS fails open) ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal,html:not(.js) .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .jb{animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .nav,.header__cta{display:none}
  .burger{display:flex;justify-self:end}
  .header__in{grid-template-columns:1fr auto}
  .jb{max-width:280px}
  .pdetail{grid-template-columns:minmax(0,1fr)}
  .pdetail__art{width:100%;max-width:330px;margin-inline:auto}
  .footer__in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .split,.contact{grid-template-columns:minmax(0,1fr)}
  .split--rev .split__media{order:0}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Very small phones (360px-class). Everything stays; type, icons and spacing
   step down one more notch so the band still lands inside the viewport. */
@media (max-width:420px){
  .hero h1{font-size:clamp(1.58rem,min(7.4vw,5.6vh),2rem)}
  .hero__badge{padding:.38rem .8rem;font-size:.68rem;margin-bottom:clamp(5px,1.1vh,12px)}
  .hero__lede{font-size:clamp(.84rem,1.6vh,.95rem);margin-top:clamp(6px,1.3vh,14px)}
  .hfeats{gap:clamp(6px,1.2vh,11px);margin-top:clamp(8px,1.5vh,16px)}
  .hfeat__ico{width:31px}
  .hfeat__ico svg{width:15px;height:15px}
  .hfeat__t{font-size:.72rem;line-height:1.25}
  .hero .btn-row{margin-top:clamp(9px,1.8vh,20px);gap:.45rem}
  .hero .btn--lg{font-size:.9rem;padding:.58rem .58rem .58rem 1.1rem}
  .hero .btn--lg .btn__chip{width:30px;height:30px}
  .hero__trust{padding:.42rem .62rem;margin-top:clamp(8px,1.4vh,14px)}
  .hero__avs img{width:25px;height:25px;margin-right:-8px}
  .hero__trustt{font-size:.72rem}
  .hstrip__i{min-width:0;padding:clamp(6px,1vh,12px) 10px;font-size:.75rem;gap:.55rem}
  .hstrip__ico{width:28px}
  .hstrip__ico svg{width:14px;height:14px}
}

/* 360x640-class phones: the shortest real viewport. One last step down so the
   band still lands inside it, without dropping anything. */
/* Short viewports at tablet / large-phone widths — the stacked layout has the
   whole copy column, the trust card and the strip to fit. Step everything down
   together rather than drop any of it. */
@media (max-height:800px) and (max-width:1040px){
  .hero__in{padding-block:calc(var(--hh) + clamp(6px,1.2vh,16px)) clamp(4px,1vh,12px)}
  .hero h1{font-size:clamp(1.45rem,min(3.9vw,5.2vh),2.3rem)}
  .hero__badge{padding:.36rem .82rem;font-size:.67rem;margin-bottom:clamp(6px,1.2vh,14px)}
  .hero__lede{font-size:clamp(.8rem,1.55vh,.94rem);margin-top:clamp(6px,1.2vh,14px);max-width:54ch}
  .hfeats{margin-top:clamp(8px,1.5vh,16px);gap:clamp(6px,1.2vh,12px)}
  .hfeat{gap:.4rem}
  .hfeat__ico{width:clamp(27px,4.3vh,36px)}
  .hfeat__ico svg{width:14px;height:14px}
  .hfeat__t{font-size:.71rem;line-height:1.24}
  .hero .btn-row{margin-top:clamp(8px,1.6vh,18px)}
  .hero .btn--lg{font-size:.88rem;padding-block:.5rem}
  .hero__trust{margin-top:clamp(7px,1.3vh,14px);padding:.38rem .58rem}
  .hero__avs img{width:24px;height:24px;margin-right:-8px}
  .hero__trustt{font-size:.73rem}
  .hero__stars svg{width:11px;height:11px}
  .hstrip{margin-top:clamp(7px,1.3vh,14px)}
  .hstrip__i{padding-block:clamp(5px,1vh,11px);font-size:.74rem;gap:.6rem}
  .hstrip__ico{width:27px}
  .hstrip__ico svg{width:13px;height:13px}
}

@media (max-width:420px) and (max-height:700px){
  .hero__in{padding-block:calc(var(--hh) + 6px) 4px}
  .hero__badge{margin-bottom:8px}
  .hero__lede{margin-top:8px}
  .hfeats{margin-top:10px}
  .hero .btn-row{margin-top:10px}
  .hero__trust{margin-top:8px;padding:.36rem .56rem}
  .hstrip{margin-top:8px}
  .hstrip__i{padding-block:7px}
}

@media (max-width:620px){
  :root{--hh:88px}
  .grid--4,.grid--3,.grid--2{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr);gap:16px}
  .step{border-radius:46px}
  .field--2{grid-template-columns:minmax(0,1fr)}
  .acc__panel p{padding-right:1rem}
  .brand__logo{height:46px}
  .footer__in{grid-template-columns:minmax(0,1fr)}
  .footer__bar{justify-content:flex-start}
}