/* ==========================================================================
   SHREYA WEB — v4 · creative minimal
   White canvas · Sora display · lime accent · dashboard motif
   ========================================================================== */

:root{
  --w:      #FFFFFF;
  --bg:     #FBFBF9;
  --bg2:    #F4F6F1;
  --line:   #E7E9E1;
  --line2:  #D2D6C9;

  --ink:    #0A0C09;
  --ink2:   #5D6359;
  --ink3:   #8C9287;

  --lime:   #A8E22B;
  --lime-d: #7CB80F;
  --deep:   #0E2A12;

  --r:  10px;
  --r2: 18px;
  --r3: 28px;

  --sh1: 0 1px 2px rgba(10,12,9,.04), 0 4px 14px rgba(10,12,9,.04);
  --sh2: 0 2px 6px rgba(10,12,9,.05), 0 18px 46px rgba(14,42,18,.09);
  --sh3: 0 30px 80px rgba(14,42,18,.14);

  --wrap: 1260px;
  --gut: clamp(20px, 4.5vw, 48px);

  --d: "Sora", system-ui, sans-serif;
  --b: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --m: "JetBrains Mono", ui-monospace, monospace;

  --e:  cubic-bezier(.22,.68,.24,1);
  --e2: cubic-bezier(.65,0,.35,1);
  --hh: 78px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:100px; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--b);
  font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--lime); color:var(--ink); }
:focus-visible{ outline:2px solid var(--deep); outline-offset:3px; border-radius:6px; }

/* ---------- type ---------- */
h1,h2,h3{ font-family:var(--d); font-weight:600; letter-spacing:-.045em; line-height:1.04; margin:0 0 .5em; text-wrap:balance; }
h1{ font-size:clamp(2.05rem,5.6vw,4.6rem); font-weight:700; }
h2{ font-size:clamp(1.95rem,3.9vw,3.2rem); }
h3{ font-size:clamp(1.1rem,1.6vw,1.32rem); letter-spacing:-.03em; line-height:1.25; }
h4{ font-family:var(--d); font-size:1rem; font-weight:600; letter-spacing:-.02em; margin:0 0 .5em; }
p{ margin:0 0 1.1em; } p:last-child{ margin-bottom:0; }

.lead{ font-size:clamp(1.04rem,1.4vw,1.22rem); line-height:1.62; color:var(--ink2); max-width:58ch; }
.mut{ color:var(--ink2); } .sm{ font-size:.92rem; } .xs{ font-size:.8rem; }

.tag{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 11px;
  border:1px solid var(--line); background:var(--w); border-radius:100px;
  font-family:var(--m); font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink2); box-shadow:var(--sh1); }
.tag i{ width:7px; height:7px; border-radius:50%; background:var(--lime-d); flex:none;
  box-shadow:0 0 0 3px rgba(168,226,43,.24); }

.lbl{ font-family:var(--m); font-size:.7rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink3); display:block; }

.hi{ position:relative; display:inline-block; white-space:nowrap; }
.hi::after{ content:""; position:absolute; left:-.04em; right:-.04em; bottom:.19em; height:.40em;
  background:var(--lime); border-radius:2px; z-index:-1; transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--e) .35s; }
.in .hi::after, .hi.go::after{ transform:scaleX(1); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.sec{ padding:clamp(66px,8vw,128px) 0; position:relative; }
.sec--sm{ padding:clamp(46px,5.5vw,80px) 0; }
.alt{ background:var(--bg2); }
.wht{ background:var(--w); }

.hd{ max-width:760px; margin-bottom:clamp(34px,4.5vw,58px); }
.hd.mid{ margin-inline:auto; text-align:center; }
.hd h2{ margin:.55em 0 .3em; }
.hd-row{ display:flex; gap:24px; justify-content:space-between; align-items:flex-end; flex-wrap:wrap;
  margin-bottom:clamp(34px,4.5vw,58px); }
.hd-row .hd{ margin-bottom:0; }

.grid{ display:grid; gap:clamp(16px,2vw,26px); }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.mt{ margin-top:clamp(28px,3.6vw,46px); }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; position:relative;
  padding:15px 26px; border-radius:100px; border:1px solid transparent;
  background:var(--ink); color:var(--w);
  font-family:var(--b); font-size:.96rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  transition:transform .3s var(--e), box-shadow .3s var(--e), background .3s, color .3s, border-color .3s;
  box-shadow:0 6px 18px rgba(10,12,9,.14); }
.btn svg{ width:16px; height:16px; flex:none; transition:transform .35s var(--e); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(10,12,9,.2); }
.btn:hover svg{ transform:translateX(4px); }
.btn--l{ background:var(--lime); color:var(--ink); box-shadow:0 6px 20px rgba(124,184,15,.32); }
.btn--l:hover{ box-shadow:0 14px 34px rgba(124,184,15,.42); }
.btn--o{ background:var(--w); color:var(--ink); border-color:var(--line2); box-shadow:var(--sh1); }
.btn--o:hover{ border-color:var(--ink); box-shadow:var(--sh1); }
.btn--wa{ background:#25D366; color:#06210F; box-shadow:0 6px 20px rgba(37,211,102,.3); }
.btn--sm{ padding:11px 19px; font-size:.87rem; }
.btn--full{ width:100%; justify-content:center; }

.tl{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.95rem;
  padding-bottom:3px; border-bottom:1.5px solid var(--line2); transition:gap .3s var(--e), border-color .3s; }
.tl svg{ width:15px; height:15px; flex:none; }
.tl:hover{ gap:14px; border-color:var(--lime-d); }

#prog{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--lime-d); z-index:400; }

/* ---------- header ---------- */
.hdr{ position:sticky; top:0; z-index:300; transition:transform .45s var(--e); }
.hdr.hide{ transform:translateY(-105%); }
.hdr__bg{ position:absolute; inset:0; z-index:-1; background:rgba(251,251,249,.82);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid transparent; transition:border-color .35s; }
.hdr.stuck .hdr__bg{ border-color:var(--line); }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:18px; height:var(--hh); }

.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand img{ width:40px; height:40px; border-radius:50%; }
.brand b{ font-family:var(--d); font-size:1.04rem; font-weight:700; letter-spacing:-.05em; display:block; line-height:1; }
.brand i{ font-style:normal; font-family:var(--m); font-size:.54rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink3); display:block; margin-top:5px; }

.nav{ display:flex; gap:3px; }
.nav a{ padding:9px 15px; border-radius:100px; font-size:.93rem; font-weight:500; color:var(--ink2);
  transition:background .25s, color .25s; }
.nav a:hover{ background:var(--bg2); color:var(--ink); }
.nav a.on{ background:var(--ink); color:var(--w); }

.hdr__r{ display:flex; align-items:center; gap:12px; flex:none; }
.hdr__tel{ display:inline-flex; align-items:center; gap:8px; font-family:var(--m); font-size:.82rem; font-weight:500; }
.hdr__tel svg{ width:15px; height:15px; color:var(--lime-d); }

.burg{ display:none; width:44px; height:44px; border:1px solid var(--line2); border-radius:50%;
  background:var(--w); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burg span{ width:17px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform .35s var(--e), opacity .2s; }
.burg.on span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.burg.on span:nth-child(2){ opacity:0; }
.burg.on span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

.mnav{ position:fixed; inset:var(--hh) 0 0; z-index:290; background:var(--bg);
  padding:18px var(--gut) 40px; overflow-y:auto; clip-path:inset(0 0 100% 0);
  transition:clip-path .55s var(--e2); visibility:hidden; }
.mnav.open{ clip-path:inset(0 0 0 0); visibility:visible; }
.mnav a.ml{ display:flex; align-items:baseline; justify-content:space-between;
  padding:18px 2px; border-bottom:1px solid var(--line);
  font-family:var(--d); font-size:1.5rem; font-weight:600; letter-spacing:-.045em; }
.mnav a.ml span{ font-family:var(--m); font-size:.66rem; color:var(--ink3); }
.mnav__f{ margin-top:26px; display:grid; gap:11px; }

/* ================= HERO ================= */
.hero{ position:relative; overflow:hidden; padding:clamp(34px,4.5vw,64px) 0 clamp(50px,6vw,86px); }
.hero__fx{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__grid{ position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:58px 58px; opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 80% 62% at 50% 34%, #000 10%, transparent 76%);
  mask-image:radial-gradient(ellipse 80% 62% at 50% 34%, #000 10%, transparent 76%); }
.hero__glow{ position:absolute; border-radius:50%; filter:blur(90px); }
.hero__glow.a{ width:44vw; height:44vw; background:rgba(168,226,43,.42); top:-16%; right:-6%; animation:fa 18s ease-in-out infinite; }
.hero__glow.b{ width:32vw; height:32vw; background:rgba(120,200,255,.20); bottom:-14%; left:-6%; animation:fb 23s ease-in-out infinite; }
@keyframes fa{ 50%{ transform:translate(-6%,7%) scale(1.12); } }
@keyframes fb{ 50%{ transform:translate(8%,-6%) scale(.9); } }

.hero__in{ position:relative; z-index:2; display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(30px,4vw,60px); align-items:center; }
.hero h1{ margin:24px 0 0; letter-spacing:-.05em; }
.hero .lead{ margin-top:24px; }
.hero__cta{ margin-top:32px; }
.hero__trust{ display:flex; gap:clamp(18px,2.6vw,38px); margin-top:36px; padding-top:26px; border-top:1px solid var(--line); }
.hero__trust div > b{ font-family:var(--d); font-size:clamp(1.4rem,2.2vw,1.95rem); font-weight:700;
  letter-spacing:-.05em; line-height:1; display:block; white-space:nowrap; }
.hero__trust div > span{ font-family:var(--m); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink3); display:block; margin-top:9px; white-space:nowrap; }

/* rotating word */
.rot{ display:inline-grid; vertical-align:bottom; overflow:hidden; height:1.08em; }
.rot > span{ grid-area:1/1; display:block; color:var(--lime-d);
  transform:translateY(105%); opacity:0; transition:transform .6s var(--e), opacity .4s; }
.rot > span.on{ transform:none; opacity:1; }
.rot > span.out{ transform:translateY(-105%); opacity:0; }

/* dashboard panel */
.dash{ position:relative; background:var(--w); border:1px solid var(--line); border-radius:var(--r3);
  box-shadow:var(--sh3); padding:clamp(20px,2vw,28px); }
.dash__hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.dash__hd b{ font-family:var(--d); font-size:1rem; font-weight:600; letter-spacing:-.03em; }
.dash__pill{ font-family:var(--m); font-size:.64rem; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px; background:rgba(168,226,43,.2); color:var(--lime-d); font-weight:600; }
.dash__chart{ position:relative; }
.dash__chart svg{ width:100%; height:auto; display:block; }
.dash__ln{ fill:none; stroke:var(--lime-d); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1000; stroke-dashoffset:1000; }
.dash.go .dash__ln{ animation:draw 2.1s var(--e) .3s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.dash__ar{ fill:url(#dgrad); opacity:0; }
.dash.go .dash__ar{ animation:fadein .9s ease 1.5s forwards; }
@keyframes fadein{ to{ opacity:1; } }
.dash__bar{ fill:var(--bg2); transform-origin:bottom; transform:scaleY(0); }
.dash.go .dash__bar{ animation:bar .8s var(--e) forwards; }
@keyframes bar{ to{ transform:scaleY(1); } }
.dash__dot{ opacity:0; } .dash.go .dash__dot{ animation:fadein .5s ease 2.3s forwards; }
.dash__x{ display:flex; justify-content:space-between; margin-top:10px; }
.dash__x span{ font-family:var(--m); font-size:.6rem; color:var(--ink3); letter-spacing:.06em; }
.dash__m{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; }
.dash__m div{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:13px 12px; }
.dash__m b{ font-family:var(--d); font-size:1.15rem; font-weight:700; letter-spacing:-.04em; display:block; line-height:1; }
.dash__m span{ font-family:var(--m); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink3); display:block; margin-top:8px; }
.dash__note{ font-family:var(--m); font-size:.58rem; letter-spacing:.08em; color:var(--ink3);
  text-align:center; margin-top:40px; text-transform:uppercase; }

.chip{ position:absolute; z-index:3; display:flex; align-items:center; gap:9px;
  background:var(--w); border:1px solid var(--line); border-radius:100px; padding:9px 15px 9px 10px;
  box-shadow:var(--sh2); font-size:.82rem; font-weight:600; white-space:nowrap; }
.chip i{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; }
.chip i svg{ width:14px; height:14px; }
.chip.c1{ top:-22px; left:-28px; animation:fl 6s ease-in-out infinite; }
.chip.c2{ bottom:-24px; right:-26px; animation:fl 7.4s ease-in-out infinite 1s; }

@keyframes fl{ 50%{ transform:translateY(-10px); } }
@media (max-width:1180px){ .chip{ display:none; } }

/* ---------- marquee ---------- */
.marq{ overflow:hidden; border-block:1px solid var(--line); background:var(--w); padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.marq__t{ display:flex; gap:38px; width:max-content; animation:mv 40s linear infinite; }
.marq:hover .marq__t{ animation-play-state:paused; }
@keyframes mv{ to{ transform:translateX(-50%); } }
.marq__i{ display:inline-flex; align-items:center; gap:38px; white-space:nowrap;
  font-family:var(--d); font-size:1.02rem; font-weight:500; letter-spacing:-.03em; color:var(--ink2); }
.marq__i::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--lime); }

/* ---------- service explorer ---------- */
.exp{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(24px,3.5vw,56px); align-items:start; }
.exp__l{ border-top:1px solid var(--line); }
.exp__b{ width:100%; text-align:left; background:none; border:0; cursor:pointer; display:grid;
  grid-template-columns:44px 1fr 22px; gap:16px; align-items:center;
  padding:20px 4px; border-bottom:1px solid var(--line); transition:padding-left .4s var(--e); }
.exp__b:hover{ padding-left:14px; }
.exp__b .n{ font-family:var(--m); font-size:.68rem; color:var(--ink3); }
.exp__b .t{ font-family:var(--d); font-size:clamp(1.05rem,1.7vw,1.35rem); font-weight:600;
  letter-spacing:-.035em; transition:color .3s; }
.exp__b .k{ width:22px; height:22px; opacity:0; transform:translateX(-6px); transition:all .35s var(--e); color:var(--lime-d); }
.exp__b.on{ padding-left:14px; }
.exp__b.on .t{ color:var(--lime-d); }
.exp__b.on .k{ opacity:1; transform:none; }
.exp__b.on .n{ color:var(--lime-d); }
.exp__p{ position:sticky; top:104px; background:var(--w); border:1px solid var(--line);
  border-radius:var(--r3); padding:clamp(24px,2.6vw,36px); box-shadow:var(--sh2); }
.exp__i{ display:none; } .exp__i.on{ display:block; animation:pin .45s var(--e); }
@keyframes pin{ from{ opacity:0; transform:translateY(12px); } }
.exp__ico{ width:52px; height:52px; border-radius:15px; background:var(--bg2); display:grid; place-items:center; margin-bottom:20px; }
.exp__ico svg{ width:24px; height:24px; color:var(--deep); }
.exp__i h3{ margin-bottom:.5em; }
.exp__i p{ color:var(--ink2); font-size:.96rem; }
@media (max-width:900px){ .exp{ grid-template-columns:1fr; } .exp__p{ position:static; } }

.ticks{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px; }
.ticks li{ display:flex; gap:11px; font-size:.94rem; color:var(--ink2); line-height:1.55; }
.ticks svg{ width:15px; height:15px; flex:none; margin-top:5px; color:var(--lime-d); }

/* ---------- cards ---------- */
.c{ background:var(--w); border:1px solid var(--line); border-radius:var(--r2);
  padding:clamp(22px,2.4vw,32px); transition:transform .4s var(--e), box-shadow .4s var(--e), border-color .3s; }
.c:hover{ transform:translateY(-4px); box-shadow:var(--sh2); border-color:var(--line2); }
.c__ico{ width:48px; height:48px; border-radius:14px; background:var(--bg2); display:grid; place-items:center;
  margin-bottom:18px; transition:background .35s, transform .4s var(--e); }
.c__ico svg{ width:22px; height:22px; color:var(--deep); }
.c:hover .c__ico{ background:var(--lime); transform:rotate(-6deg); }
.c h3{ margin-bottom:.45em; }
.c p{ color:var(--ink2); font-size:.94rem; margin:0; }
.c__n{ font-family:var(--m); font-size:.68rem; letter-spacing:.14em; color:var(--ink3); display:block; margin-bottom:18px; }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; }
.stats > div{ background:var(--w); padding:clamp(22px,2.6vw,34px); }
.stats > div > b{ font-family:var(--d); font-size:clamp(1.9rem,3.4vw,2.9rem); font-weight:700;
  letter-spacing:-.055em; line-height:1; display:block; white-space:nowrap; }
.stats > div > span{ font-family:var(--m); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink3); display:block; margin-top:12px; }

/* ---------- work ---------- */
.filts{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.f{ padding:9px 17px; border-radius:100px; border:1px solid var(--line); background:var(--w); cursor:pointer;
  font-size:.85rem; font-weight:500; color:var(--ink2); transition:all .25s var(--e); }
.f:hover{ border-color:var(--line2); color:var(--ink); }
.f.on{ background:var(--ink); border-color:var(--ink); color:var(--w); }

.pg{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px); }
.p{ display:block; border-radius:var(--r2); overflow:hidden; background:var(--w); border:1px solid var(--line);
  transition:transform .4s var(--e), box-shadow .4s var(--e), border-color .3s; }
.p:hover{ transform:translateY(-5px); box-shadow:var(--sh2); border-color:var(--line2); }
.p.hide{ display:none; }
.sh{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg2); border-bottom:1px solid var(--line); }
.sh img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
  opacity:0; transition:opacity .6s var(--e), transform .9s var(--e); }
.sh img.ld{ opacity:1; }
.p:hover .sh img{ transform:scale(1.05); }
.sh__fb{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:7px; padding:18px; }
.sh__fb b{ font-family:var(--d); font-weight:600; font-size:1rem; letter-spacing:-.03em; }
.sh__fb i{ font-style:normal; font-family:var(--m); font-size:.6rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink3); }
.p__b{ padding:17px 20px 19px; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.p__t{ font-family:var(--d); font-size:1rem; font-weight:600; letter-spacing:-.03em; }
.p__u{ font-family:var(--m); font-size:.72rem; color:var(--ink3); margin-top:5px; word-break:break-all; }
.p__k{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  flex:none; transition:all .35s var(--e); }
.p__k svg{ width:13px; height:13px; }
.p:hover .p__k{ background:var(--lime); border-color:var(--lime); transform:rotate(45deg); }
.none{ display:none; padding:64px 0; text-align:center; } .none.on{ display:block; }

/* ---------- process ---------- */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.steps::before{ content:""; position:absolute; top:19px; left:6%; right:6%; height:1px; background:var(--line); }
.st{ position:relative; padding:0 12px; text-align:left; }
.st__d{ width:38px; height:38px; border-radius:50%; background:var(--w); border:1px solid var(--line2);
  display:grid; place-items:center; font-family:var(--m); font-size:.72rem; font-weight:600;
  margin-bottom:20px; position:relative; z-index:1; transition:all .4s var(--e); }
.st:hover .st__d{ background:var(--lime); border-color:var(--lime); }
.st h4{ margin-bottom:.5em; }
.st p{ font-size:.9rem; color:var(--ink2); margin:0; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; gap:26px; } .steps::before{ display:none; } .st{ padding:0; } }

/* ---------- quotes ---------- */
.qs{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px;
  scrollbar-width:none; cursor:grab; }
.qs::-webkit-scrollbar{ display:none; }
.qs.drag{ cursor:grabbing; scroll-snap-type:none; }
.q{ flex:none; width:min(400px,84vw); scroll-snap-align:start; background:var(--w); border:1px solid var(--line);
  border-radius:var(--r2); padding:28px; display:flex; flex-direction:column; gap:16px; }
.q__s{ display:flex; gap:3px; color:#F0B429; } .q__s svg{ width:15px; height:15px; }
.q blockquote{ margin:0; font-size:1rem; line-height:1.6; color:var(--ink); }
.q__w{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px; }
.q__a{ width:40px; height:40px; border-radius:50%; background:var(--lime); display:grid; place-items:center;
  font-family:var(--d); font-weight:700; font-size:.9rem; flex:none; }
.q__w b{ display:block; font-size:.92rem; } .q__w span{ font-size:.78rem; color:var(--ink3); }

/* ---------- pricing ---------- */
.tog{ display:inline-flex; padding:5px; border:1px solid var(--line); border-radius:100px;
  background:var(--w); margin-bottom:34px; box-shadow:var(--sh1); }
.tog button{ padding:10px 22px; border:0; background:none; border-radius:100px; cursor:pointer;
  font-size:.88rem; font-weight:600; color:var(--ink2); transition:all .3s var(--e); }
.tog button.on{ background:var(--ink); color:var(--w); }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.pl{ background:var(--w); border:1px solid var(--line); border-radius:var(--r2);
  padding:clamp(24px,2.6vw,34px); display:flex; flex-direction:column; gap:18px; position:relative;
  transition:transform .4s var(--e), box-shadow .4s var(--e); }
.pl:hover{ transform:translateY(-4px); box-shadow:var(--sh2); }
.pl--b{ border-color:var(--ink); box-shadow:var(--sh2); }
.pl__f{ position:absolute; top:-12px; left:clamp(24px,2.6vw,34px); background:var(--lime); color:var(--ink);
  border-radius:100px; padding:5px 13px; font-family:var(--m); font-size:.62rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; }
.pl h3{ margin:0; }
.pl__s{ font-size:.9rem; color:var(--ink2); margin:0; }
.pl__p{ font-family:var(--d); font-size:2.3rem; font-weight:700; letter-spacing:-.055em; line-height:1;
  padding-top:16px; border-top:1px solid var(--line); }
.pl__p small{ display:block; font-family:var(--m); font-size:.64rem; font-weight:400; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink3); margin-top:11px; }
.pl .btn{ margin-top:auto; }
.hidep{ display:none !important; }

/* ---------- faq ---------- */
.faq{ border-top:1px solid var(--line); }
.fq{ border-bottom:1px solid var(--line); }
.fq__q{ width:100%; background:none; border:0; cursor:pointer; text-align:left; position:relative;
  padding:24px 48px 24px 0; font-family:var(--d); font-size:clamp(1rem,1.5vw,1.16rem);
  font-weight:600; letter-spacing:-.03em; line-height:1.35; }
.fq__q::after{ content:""; position:absolute; right:4px; top:50%; width:13px; height:1.6px;
  background:var(--ink); transform:translateY(-50%); }
.fq__q::before{ content:""; position:absolute; right:9.7px; top:50%; width:1.6px; height:13px;
  background:var(--ink); transform:translateY(-50%); transition:transform .4s var(--e); }
.fq.open .fq__q::before{ transform:translateY(-50%) scaleY(0); }
.fq__a{ max-height:0; overflow:hidden; transition:max-height .48s var(--e); }
.fq__a > div{ padding:0 48px 26px 0; color:var(--ink2); max-width:70ch; }

/* ---------- CTA ---------- */
.cta{ position:relative; overflow:hidden; background:var(--w); border:1px solid var(--line);
  border-radius:var(--r3); padding:clamp(34px,5vw,72px); text-align:center; box-shadow:var(--sh2); }
.cta::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 300px at 50% -8%, rgba(168,226,43,.34), transparent 70%); }
.cta > *{ position:relative; z-index:1; }
.cta h2{ max-width:18ch; margin-inline:auto; }
.cta .lead{ max-width:56ch; margin-inline:auto; }
.cta .row{ justify-content:center; margin-top:28px; }

/* ---------- form ---------- */
.form{ background:var(--w); border:1px solid var(--line); border-radius:var(--r3);
  padding:clamp(24px,3vw,38px); box-shadow:var(--sh2); }
.bars{ display:flex; gap:6px; margin:20px 0 26px; }
.bars div{ flex:1; height:3px; border-radius:3px; background:var(--line); transition:background .4s; }
.bars div.on{ background:var(--lime-d); }
.pane{ display:none; } .pane.on{ display:block; animation:pin .4s var(--e); }
.fld{ margin-bottom:17px; }
.fld label{ display:block; font-family:var(--m); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink3); margin-bottom:9px; }
.fld input,.fld select,.fld textarea{ width:100%; padding:13px 15px; font:inherit; font-size:.97rem;
  color:var(--ink); border:1px solid var(--line2); border-radius:var(--r); background:var(--bg);
  transition:border-color .25s, box-shadow .25s, background .25s; }
.fld textarea{ min-height:104px; resize:vertical; }
.fld input:focus,.fld select:focus,.fld textarea:focus{ outline:none; border-color:var(--lime-d);
  background:var(--w); box-shadow:0 0 0 3px rgba(168,226,43,.22); }
.fld input::placeholder,.fld textarea::placeholder{ color:var(--ink3); }
.fld.bad input,.fld.bad textarea,.fld.bad select{ border-color:#CC5B3C; }
.fld .er{ display:none; color:#CC5B3C; font-size:.79rem; margin-top:6px; }
.fld.bad .er{ display:block; }
.opts{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt span{ display:block; padding:13px 14px; border:1px solid var(--line2); border-radius:var(--r);
  cursor:pointer; font-size:.91rem; font-weight:500; text-align:center; transition:all .25s var(--e); }
.opt input:checked + span{ border-color:var(--ink); background:var(--ink); color:var(--w); }
.opt input:focus-visible + span{ outline:2px solid var(--deep); outline-offset:2px; }
.hp{ position:absolute; left:-9999px; }

/* ---------- contact list ---------- */
.cl{ display:grid; gap:0; }
.cl a, .cl div.ci{ display:flex; gap:15px; align-items:flex-start; padding:19px 0; border-bottom:1px solid var(--line); }
.cl > *:first-child{ border-top:1px solid var(--line); }
.ci__i{ width:42px; height:42px; border-radius:12px; background:var(--bg2); display:grid; place-items:center; flex:none; }
.ci__i svg{ width:18px; height:18px; color:var(--deep); }
.ci__l{ font-family:var(--m); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); }
.ci__v{ font-weight:600; font-size:1.02rem; margin-top:4px; word-break:break-word; }

/* ---------- footer ---------- */
.ftr{ background:var(--w); border-top:1px solid var(--line); padding:clamp(48px,6vw,82px) 0 0; }
.ftr__t{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.25fr; gap:clamp(22px,3vw,44px); padding-bottom:44px; }
.ftr h4{ font-family:var(--m); font-size:.66rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink3); margin-bottom:17px; }
.ftr ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.ftr ul a{ font-size:.93rem; color:var(--ink2); transition:color .25s; }
.ftr ul a:hover{ color:var(--lime-d); }
.ftr__soc{ display:flex; gap:9px; margin-top:20px; }
.ftr__soc a{ width:40px; height:40px; border-radius:12px; border:1px solid var(--line); display:grid;
  place-items:center; color:var(--ink2); transition:all .25s var(--e); }
.ftr__soc a:hover{ background:var(--lime); border-color:var(--lime); color:var(--ink); transform:translateY(-2px); }
.ftr__soc svg{ width:16px; height:16px; }
.ftr__b{ border-top:1px solid var(--line); padding:20px 0 26px; display:flex; justify-content:space-between;
  gap:14px; flex-wrap:wrap; font-family:var(--m); font-size:.72rem; color:var(--ink3); }

/* ---------- floats + mobile bar ---------- */
.wa{ position:fixed; right:18px; bottom:18px; z-index:250; width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#06210F; display:grid; place-items:center; box-shadow:0 10px 28px rgba(37,211,102,.4);
  transition:transform .3s var(--e); }
.wa:hover{ transform:scale(1.07); }
.wa svg{ width:25px; height:25px; }
.top{ position:fixed; left:18px; bottom:18px; z-index:250; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line2); background:var(--w); cursor:pointer; display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:all .3s var(--e); box-shadow:var(--sh1); }
.top.on{ opacity:1; visibility:visible; transform:none; }
.top svg{ width:16px; height:16px; }

.mbar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:260; padding:10px 12px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border-top:1px solid var(--line); gap:9px; }
.mbar .btn{ flex:1; justify-content:center; padding:13px 14px; font-size:.9rem; }
@media (max-width:700px){
  .mbar{ display:flex; }
  body{ padding-bottom:74px; }
  .wa{ bottom:84px; width:48px; height:48px; }
  .top{ bottom:84px; }
}

/* ---------- page hero ---------- */
.ph{ position:relative; overflow:hidden; padding:clamp(36px,4.6vw,68px) 0 clamp(32px,4vw,54px);
  border-bottom:1px solid var(--line); }
.ph__fx{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.ph__in{ position:relative; z-index:2; max-width:860px; }
.ph h1{ margin:22px 0 0; font-size:clamp(2.2rem,4.6vw,3.7rem); }
.ph .lead{ margin-top:22px; }
.crumb{ font-family:var(--m); font-size:.7rem; letter-spacing:.1em; color:var(--ink3); margin-bottom:20px; }
.crumb a:hover{ color:var(--lime-d); }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--e), transform .85s var(--e); }
.rv.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav,.hdr__tel{ display:none; }
  .burg{ display:flex; }
  .hero__in{ grid-template-columns:1fr; }
  .ftr__t{ grid-template-columns:1fr 1fr; }
  .pg{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plans{ grid-template-columns:1fr; max-width:480px; }
}
@media (max-width:860px){
  .g3{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .g2,.pg,.g4{ grid-template-columns:1fr; }
  .ftr__t{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .hdr__r .btn{ display:none; }
  .opts{ grid-template-columns:1fr; }
  .dash__m{ grid-template-columns:1fr; }
  .hero__trust{ flex-wrap:wrap; gap:20px 26px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; }
  .hi::after{ transform:scaleX(1); }
  .dash__ln{ stroke-dashoffset:0; } .dash__ar,.dash__dot{ opacity:1; } .dash__bar{ transform:none; }
}
@media print{ .hdr,.wa,.top,.mnav,.mbar,#prog{ display:none !important; } }

/* ==========================================================================
   v5 — 3D hero stage, Google reviews, Meta Ads results
   ========================================================================== */

/* ---------- 3D stage ---------- */
.stage{ position:relative; perspective:1500px; perspective-origin:50% 45%; }
.deck{ position:relative; transform-style:preserve-3d; transition:transform .5s var(--e); will-change:transform; }
.deck .dash{ transform:translateZ(0); }

/* orbit ring of service badges behind the panel */
.orbit{ position:absolute; inset:-8% -6%; z-index:0; pointer-events:none; transform-style:preserve-3d; }
.orbit i{
  position:absolute; width:44px; height:44px; border-radius:50%; background:var(--w);
  border:1px solid var(--line); box-shadow:var(--sh1); display:grid; place-items:center;
  color:var(--ink2);
}
.orbit i svg{ width:19px; height:19px; }
.orbit i:nth-child(1){ top:6%;  left:-4%;  animation:orb 9s ease-in-out infinite; }
.orbit i:nth-child(2){ top:40%; left:-8%;  animation:orb 11s ease-in-out infinite .9s; }
.orbit i:nth-child(3){ bottom:8%; left:2%; animation:orb 10s ease-in-out infinite 1.8s; }
.orbit i:nth-child(4){ top:2%;  right:6%;  animation:orb 12s ease-in-out infinite .4s; }
.orbit i:nth-child(5){ bottom:2%; right:-3%; animation:orb 9.5s ease-in-out infinite 1.3s; }
@keyframes orb{ 50%{ transform:translateY(-14px); } }
@media (max-width:1180px){ .orbit{ display:none; } }

/* live activity toast */
.toast{
  position:absolute; left:-34px; bottom:64px; z-index:6; width:250px;
  background:var(--w); border:1px solid var(--line); border-radius:16px; padding:13px 15px;
  box-shadow:var(--sh2); display:flex; gap:11px; align-items:center;
}
.toast__i{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none; }
.toast__i svg{ width:16px; height:16px; }
.toast b{ display:block; font-size:.84rem; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.toast span{ display:block; font-family:var(--m); font-size:.6rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink3); margin-top:5px; }
.toast__i i{ width:7px; height:7px; border-radius:50%; background:#2FBF5F;
  box-shadow:0 0 0 3px rgba(47,191,95,.22); animation:tp 1.8s infinite; }
@keyframes tp{ 50%{ opacity:.35; } }
.toast__s{ display:none; } .toast__s.on{ display:flex; gap:11px; align-items:center; width:100%; animation:tin .5s var(--e); }
@keyframes tin{ from{ opacity:0; transform:translateY(10px); } }
@media (max-width:1180px){ .toast{ display:none; } }

/* ROAS mini card */
.roas{
  position:absolute; right:-40px; top:16%; z-index:6; width:172px;
  background:var(--w); border:1px solid var(--line); border-radius:16px; padding:15px;
  box-shadow:var(--sh2);
}
.roas__k{ font-family:var(--m); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); }
.roas__v{ font-family:var(--d); font-size:1.7rem; font-weight:700; letter-spacing:-.05em; line-height:1; margin-top:7px; }
.roas__b{ display:flex; gap:4px; align-items:flex-end; height:34px; margin-top:12px; }
.roas__b i{ flex:1; background:var(--bg2); border-radius:3px; display:block; transform-origin:bottom;
  animation:rb 2.6s ease-in-out infinite; }
.roas__b i:nth-child(1){ height:38%; animation-delay:0s; }
.roas__b i:nth-child(2){ height:56%; animation-delay:.16s; }
.roas__b i:nth-child(3){ height:44%; animation-delay:.32s; }
.roas__b i:nth-child(4){ height:74%; animation-delay:.48s; }
.roas__b i:nth-child(5){ height:92%; background:var(--lime); animation-delay:.64s; }
@keyframes rb{ 50%{ transform:scaleY(.72); } }
@media (max-width:1180px){ .roas{ display:none; } }

/* ---------- Google reviews ---------- */
.gr{ display:grid; grid-template-columns:290px minmax(0,1fr); gap:clamp(24px,3vw,48px); align-items:start; }
@media (max-width:900px){ .gr{ grid-template-columns:1fr; } }
.gr__sum{ background:var(--w); border:1px solid var(--line); border-radius:var(--r2);
  padding:26px; text-align:center; box-shadow:var(--sh1); position:sticky; top:100px; }
@media (max-width:900px){ .gr__sum{ position:static; } }
.gr__g{ display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:.95rem; }
.gr__g svg{ width:19px; height:19px; }
.gr__word{ font-family:var(--d); font-size:1.5rem; font-weight:700; letter-spacing:-.04em; margin:18px 0 10px; }
.gr__stars{ display:flex; justify-content:center; gap:3px; color:#F0B429; }
.gr__stars svg{ width:19px; height:19px; }
.gr__n{ font-family:var(--m); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink3); margin-top:14px; }

.gr__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:620px){ .gr__list{ grid-template-columns:1fr; } }
.rev{ background:var(--w); border:1px solid var(--line); border-radius:var(--r2); padding:20px 22px;
  transition:transform .35s var(--e), box-shadow .35s var(--e); }
.rev:hover{ transform:translateY(-3px); box-shadow:var(--sh2); }
.rev__h{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.rev__a{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-family:var(--d); font-weight:700; font-size:.88rem; color:var(--ink); }
.rev__h b{ display:block; font-size:.92rem; font-weight:700; letter-spacing:-.02em; }
.rev__h span{ display:block; font-family:var(--m); font-size:.62rem; color:var(--ink3); margin-top:3px; }
.rev__s{ display:flex; gap:2px; color:#F0B429; margin-bottom:9px; }
.rev__s svg{ width:13px; height:13px; }
.rev p{ font-size:.94rem; color:var(--ink2); margin:0; }

/* ---------- Meta Ads results ---------- */
.ma{ background:var(--w); border:1px solid var(--line); border-radius:var(--r2); overflow:hidden;
  transition:transform .4s var(--e), box-shadow .4s var(--e); }
.ma:hover{ transform:translateY(-4px); box-shadow:var(--sh2); }
.ma__h{ padding:20px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:11px; }
.ma__ic{ width:34px; height:34px; border-radius:10px; background:rgba(24,119,242,.1); display:grid;
  place-items:center; flex:none; color:#1877F2; }
.ma__ic svg{ width:17px; height:17px; }
.ma__h b{ display:block; font-family:var(--d); font-size:.98rem; font-weight:600; letter-spacing:-.03em; }
.ma__h span{ display:block; font-family:var(--m); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink3); margin-top:4px; }
.ma__g{ display:grid; grid-template-columns:repeat(2,1fr); }
.ma__g div{ padding:18px 22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.ma__g div:nth-child(2n){ border-right:0; }
.ma__g div:nth-child(n+3){ border-bottom:0; }
.ma__g b{ font-family:var(--d); font-size:1.5rem; font-weight:700; letter-spacing:-.05em;
  line-height:1; display:block; color:var(--lime-d); }
.ma__g span{ font-family:var(--m); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink3); display:block; margin-top:8px; }
.ma__f{ padding:18px 22px; }
.ma__f p{ font-size:.92rem; color:var(--ink2); margin:0; }

/* ---------- bigger hero headline room ---------- */
.hero__in.tall{ align-items:center; min-height:clamp(480px,62vh,660px); }

/* ==========================================================================
   v5 — 3D stage, reviews, service tabs, results
   ========================================================================== */

/* ---------- 3D stage + tilt ---------- */
.stage3d{ perspective:1400px; perspective-origin:50% 40%; }
.tilt{ transform-style:preserve-3d; transition:transform .5s var(--e); will-change:transform; }
.tilt.grab{ transition:transform .12s linear; }
.depth{ transform:translateZ(56px); }
.depth-2{ transform:translateZ(34px); }
.depth-3{ transform:translateZ(90px); }

/* card tilt used on feature cards */
[data-tilt]{ transition:transform .45s var(--e), box-shadow .4s var(--e); transform-style:preserve-3d; }

/* ---------- hero orbit ring ---------- */
.orbit{ position:absolute; top:0; bottom:0; right:0; width:52%; z-index:0; pointer-events:none;
  display:grid; place-items:center; overflow:hidden; }
.orbit i{ position:absolute; border:1px dashed var(--line2); border-radius:50%; opacity:.34; }
.orbit i:nth-child(1){ width:min(38vw,560px); aspect-ratio:1; animation:spin 46s linear infinite; }
.orbit i:nth-child(2){ width:min(27vw,400px); aspect-ratio:1; animation:spin 34s linear infinite reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- live ticker inside the dashboard ---------- */
.tick{ display:flex; align-items:center; gap:10px; margin-top:18px; padding:12px 14px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r); }
.tick__d{ width:8px; height:8px; border-radius:50%; background:#2FBF5F; flex:none;
  box-shadow:0 0 0 0 rgba(47,191,95,.55); animation:pulse 2.2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(47,191,95,0); } 100%{ box-shadow:0 0 0 0 rgba(47,191,95,0); } }
.tick span{ font-family:var(--m); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); }
.tick b{ font-family:var(--d); font-size:.95rem; font-weight:700; margin-left:auto; letter-spacing:-.03em; }

/* ---------- google rating badge ---------- */
.grate{ display:inline-flex; align-items:center; gap:12px; padding:11px 18px 11px 14px;
  background:var(--w); border:1px solid var(--line); border-radius:100px; box-shadow:var(--sh1); }
.grate__g{ font-family:var(--d); font-weight:700; font-size:1.02rem; letter-spacing:-.04em; }
.grate__g span:nth-child(1){ color:#4285F4; } .grate__g span:nth-child(2){ color:#EA4335; }
.grate__g span:nth-child(3){ color:#FBBC05; } .grate__g span:nth-child(4){ color:#4285F4; }
.grate__g span:nth-child(5){ color:#34A853; } .grate__g span:nth-child(6){ color:#EA4335; }
.grate__s{ display:flex; gap:2px; color:#F0B429; } .grate__s svg{ width:14px; height:14px; }
.grate b{ font-family:var(--d); font-weight:700; font-size:.95rem; letter-spacing:-.03em; }
.grate small{ font-size:.78rem; color:var(--ink3); }

/* ---------- review wall ---------- */
.rw{ column-count:3; column-gap:clamp(16px,2vw,24px); }
@media (max-width:980px){ .rw{ column-count:2; } }
@media (max-width:620px){ .rw{ column-count:1; } }
.rw__c{ break-inside:avoid; background:var(--w); border:1px solid var(--line); border-radius:var(--r2);
  padding:24px; margin-bottom:clamp(16px,2vw,24px); transition:transform .4s var(--e), box-shadow .4s var(--e); }
.rw__c:hover{ transform:translateY(-4px); box-shadow:var(--sh2); }
.rw__h{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.rw__av{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-family:var(--d); font-weight:700; font-size:.88rem; color:var(--ink); }
.rw__h b{ display:block; font-size:.93rem; font-weight:600; }
.rw__h span{ font-size:.74rem; color:var(--ink3); }
.rw__g{ margin-left:auto; width:17px; height:17px; flex:none; }
.rw__s{ display:flex; gap:2px; color:#F0B429; margin-bottom:10px; } .rw__s svg{ width:14px; height:14px; }
.rw__c p{ font-size:.96rem; color:var(--ink); margin:0; }

/* ---------- service tabs ---------- */
.stabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.stab{ padding:11px 20px; border-radius:100px; border:1px solid var(--line); background:var(--w);
  cursor:pointer; font-size:.9rem; font-weight:600; color:var(--ink2); transition:all .28s var(--e); }
.stab:hover{ border-color:var(--line2); color:var(--ink); transform:translateY(-2px); }
.stab.on{ background:var(--ink); border-color:var(--ink); color:var(--w); }
.spane{ display:none; } .spane.on{ display:grid; animation:pin .45s var(--e); }
.sgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px); }
@media (max-width:980px){ .sgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .sgrid{ grid-template-columns:1fr; } }
.sv{ background:var(--w); border:1px solid var(--line); border-radius:var(--r2); padding:26px;
  position:relative; overflow:hidden; transition:transform .4s var(--e), box-shadow .4s var(--e), border-color .3s; }
.sv:hover{ transform:translateY(-5px); box-shadow:var(--sh2); border-color:var(--line2); }
.sv h3{ margin:0 0 .5em; font-size:1.08rem; }
.sv p{ font-size:.92rem; color:var(--ink2); margin:0; }
.sv__star{ position:absolute; top:20px; right:20px; font-family:var(--m); font-size:.58rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; padding:5px 10px; border-radius:100px;
  background:var(--lime); color:var(--ink); }
.sv--hero{ background:linear-gradient(150deg, #F4FBE4, var(--w) 62%); border-color:var(--lime); }

/* ---------- results cards ---------- */
.res{ background:var(--w); border:1px solid var(--line); border-radius:var(--r2); overflow:hidden;
  transition:transform .4s var(--e), box-shadow .4s var(--e); }
.res:hover{ transform:translateY(-5px); box-shadow:var(--sh2); }
.res__h{ padding:24px 26px 20px; }
.res__k{ font-family:var(--m); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--lime-d); font-weight:600; }
.res__h h3{ margin:10px 0 0; font-size:1.14rem; }
.res__m{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border-block:1px solid var(--line); }
.res__m div{ background:var(--bg); padding:18px 12px; text-align:center; }
.res__m b{ font-family:var(--d); font-size:1.35rem; font-weight:700; letter-spacing:-.05em;
  display:block; line-height:1; color:var(--ink); }
.res__m span{ font-family:var(--m); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink3); display:block; margin-top:8px; }
.res__b{ padding:22px 26px 26px; }
.res__b p{ font-size:.93rem; color:var(--ink2); margin:0; }

/* ---------- big statement ---------- */
.big{ font-family:var(--d); font-size:clamp(1.6rem,3.4vw,2.9rem); font-weight:600;
  letter-spacing:-.045em; line-height:1.15; max-width:22ch; }
.big em{ font-style:normal; color:var(--lime-d); }

/* ---------- logo strip of countries ---------- */
.flagrow{ display:flex; flex-wrap:wrap; gap:10px; }
.flagrow span{ padding:8px 15px; border:1px solid var(--line); border-radius:100px; background:var(--w);
  font-size:.85rem; font-weight:500; color:var(--ink2); }

@media (max-width:1080px){ .orbit{ display:none; } }


/* ==========================================================================
   v6 — card fix, mega menu, lead popup, advanced form, extra visuals
   ========================================================================== */

/* FIX: project-card internals were inline spans and collapsed to zero height */
.p .sh{ display:block; }
.p__b > span:first-child{ display:block; min-width:0; }
.p__t, .p__u{ display:block; }
.p__k{ display:grid; }
.sh__fb{ display:grid; }
.cl a, .cl .ci{ text-decoration:none; }
.ci__l, .ci__v{ display:block; }
.chip i{ display:grid; }

/* ---------- mega menu ---------- */
.nav__i{ position:relative; display:inline-flex; }
.nav__t{ display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border-radius:100px;
  font-size:.93rem; font-weight:500; color:var(--ink2); background:none; border:0; cursor:pointer;
  font-family:var(--b); transition:background .25s, color .25s; }
.nav__t svg{ width:12px; height:12px; transition:transform .3s var(--e); }
.nav__i:hover .nav__t, .nav__i.open .nav__t{ background:var(--bg2); color:var(--ink); }
.nav__i.open .nav__t svg{ transform:rotate(180deg); }

.mega{ position:fixed; left:0; right:0; top:var(--hh); z-index:280; padding-top:8px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .3s var(--e), transform .38s var(--e), visibility .38s; }
.mega.open{ opacity:1; visibility:visible; transform:none; }
.mega__in{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.mega__card{ background:var(--w); border:1px solid var(--line); border-radius:var(--r3);
  box-shadow:var(--sh3); padding:clamp(22px,2.4vw,32px); display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) .95fr; gap:clamp(16px,2vw,26px); }
.mega__col h5{ font-family:var(--m); font-size:.63rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink3); margin:0 0 13px; }
.mega__col a{ display:flex; align-items:center; gap:9px; padding:7px 0; font-size:.89rem;
  font-weight:500; color:var(--ink2); transition:color .22s, transform .28s var(--e); }
.mega__col a:hover{ color:var(--ink); transform:translateX(4px); }
.mega__d{ width:5px; height:5px; border-radius:50%; background:var(--lime); flex:none; }
.mega__feat{ background:linear-gradient(155deg,#F2FBDF,var(--w) 72%); border:1px solid var(--lime);
  border-radius:var(--r2); padding:22px; display:flex; flex-direction:column; gap:11px; }
.mega__feat span.k{ font-family:var(--m); font-size:.6rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--lime-d); }
.mega__feat h4{ font-size:1.02rem; margin:0; }
.mega__feat p{ font-size:.85rem; color:var(--ink2); margin:0; }
.mega__feat .btn{ margin-top:auto; }
@media (max-width:1080px){ .mega{ display:none; } }

/* ---------- lead popup ---------- */
.ov{ position:fixed; inset:0; z-index:500; background:rgba(10,12,9,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:18px; overflow:auto;
  opacity:0; visibility:hidden; transition:opacity .35s var(--e), visibility .35s; }
.ov.open{ opacity:1; visibility:visible; }
.pop{ width:min(920px,100%); background:var(--w); border-radius:var(--r3);
  box-shadow:0 40px 100px rgba(10,12,9,.34); display:grid; grid-template-columns:.9fr 1fr;
  position:relative; overflow:hidden; transform:translateY(26px) scale(.97);
  transition:transform .45s var(--e); }
.ov.open .pop{ transform:none; }
.pop__x{ position:absolute; top:13px; right:13px; z-index:3; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:var(--w); cursor:pointer; display:grid; place-items:center;
  transition:background .25s, transform .3s var(--e); }
.pop__x:hover{ background:var(--bg2); transform:rotate(90deg); }
.pop__x svg{ width:14px; height:14px; }
.pop__l{ background:linear-gradient(165deg,#EDF9D5,#F7FCEC 58%,var(--w));
  padding:clamp(24px,2.8vw,34px); display:flex; flex-direction:column; gap:15px;
  position:relative; overflow:hidden; }
.pop__l::after{ content:""; position:absolute; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle,rgba(168,226,43,.45),transparent 68%); bottom:-130px; left:-100px; }
.pop__l > *{ position:relative; z-index:1; }
.pop__l h3{ font-size:clamp(1.28rem,2.1vw,1.68rem); margin:0; }
.pop__l p{ font-size:.93rem; color:var(--ink2); margin:0; }
.pop__val{ list-style:none; padding:0; margin:4px 0 0; display:grid; gap:10px; }
.pop__val li{ display:flex; gap:10px; font-size:.9rem; font-weight:500; }
.pop__val svg{ width:15px; height:15px; flex:none; margin-top:4px; color:var(--lime-d); }
.pop__seal{ margin-top:auto; display:flex; align-items:center; gap:9px; font-size:.78rem; color:var(--ink2); }
.pop__r{ padding:clamp(24px,2.8vw,34px); }
.pop__r h4{ font-size:1.04rem; margin:0 0 6px; }
@media (max-width:760px){ .pop{ grid-template-columns:1fr; } .pop__val{ display:none; } }

/* ---------- advanced form: choice cards ---------- */
.picks{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.picks--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:520px){ .picks, .picks--3{ grid-template-columns:1fr; } }
.pick{ position:relative; display:block; }
.pick input{ position:absolute; opacity:0; width:0; height:0; }
.pick > span{ display:flex; align-items:center; gap:11px; padding:13px 14px; cursor:pointer;
  border:1px solid var(--line2); border-radius:var(--r); background:var(--w);
  font-size:.9rem; font-weight:600; transition:all .28s var(--e); }
.pick > span i{ width:30px; height:30px; border-radius:9px; background:var(--bg2); flex:none;
  display:grid; place-items:center; transition:background .28s; }
.pick > span i svg{ width:15px; height:15px; }
.pick > span::after{ content:""; width:17px; height:17px; border-radius:50%; flex:none;
  border:1.5px solid var(--line2); margin-left:auto; transition:all .25s var(--e); }
.pick:hover > span{ border-color:var(--ink); transform:translateY(-2px); }
.pick input:checked + span{ border-color:var(--lime-d); background:#FAFEF0;
  box-shadow:0 0 0 3px rgba(168,226,43,.22); }
.pick input:checked + span i{ background:var(--lime); }
.pick input:checked + span::after{ border-color:var(--lime-d); background:var(--lime-d);
  box-shadow:inset 0 0 0 3px var(--w); }
.pick input:focus-visible + span{ outline:2px solid var(--deep); outline-offset:3px; }

.fsteps{ display:flex; align-items:center; gap:9px; margin-bottom:20px; }
.fstep{ display:flex; align-items:center; gap:8px; font-size:.77rem; font-weight:600; color:var(--ink3); }
.fstep i{ width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line2);
  display:grid; place-items:center; font-family:var(--m); font-size:.64rem; font-style:normal;
  transition:all .3s var(--e); }
.fstep.on{ color:var(--ink); }
.fstep.on i{ background:var(--ink); border-color:var(--ink); color:var(--w); }
.fstep.done i{ background:var(--lime); border-color:var(--lime); color:var(--ink); }
.fstep__l{ flex:1; height:1px; background:var(--line); }
@media (max-width:560px){ .fstep em{ display:none; } }

.fsum{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; min-height:1px; }
.fsum span{ font-family:var(--m); font-size:.65rem; letter-spacing:.04em; padding:6px 11px;
  border-radius:100px; background:var(--bg2); color:var(--ink2); }

/* ---------- comparison table ---------- */
.vs{ border:1px solid var(--line); border-radius:var(--r3); overflow:hidden; background:var(--w); }
.vs__r{ display:grid; grid-template-columns:1.4fr 1fr 1fr; border-bottom:1px solid var(--line); }
.vs__r:last-child{ border-bottom:0; }
.vs__r > div{ padding:17px 20px; display:flex; align-items:center; gap:10px; font-size:.93rem; }
.vs__r > div + div{ border-left:1px solid var(--line); }
.vs__h{ background:var(--bg2); }
.vs__h > div{ font-family:var(--d); font-weight:700; font-size:.92rem; letter-spacing:-.02em; }
.vs__r > div:last-child{ background:#FAFEF0; }
.vs svg{ width:16px; height:16px; flex:none; }
.vs .yes{ color:var(--lime-d); } .vs .no{ color:#C08063; }
@media (max-width:760px){
  .vs__r{ grid-template-columns:1fr; }
  .vs__r > div + div{ border-left:0; border-top:1px solid var(--line); }
  .vs__h{ display:none; }
}

/* ---------- industries ---------- */
.ind{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
@media (max-width:900px){ .ind{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .ind{ grid-template-columns:1fr; } }
.ind a{ display:flex; align-items:center; gap:12px; padding:16px 18px; background:var(--w);
  border:1px solid var(--line); border-radius:var(--r2); font-size:.92rem; font-weight:600;
  transition:all .35s var(--e); }
.ind a:hover{ border-color:var(--lime-d); background:#FAFEF0; transform:translateY(-3px); box-shadow:var(--sh1); }
.ind a i{ width:8px; height:8px; border-radius:50%; background:var(--lime); flex:none; }

/* ---------- trust bar ---------- */
.tbar{ display:flex; flex-wrap:wrap; gap:clamp(14px,2.2vw,32px); align-items:center; justify-content:center;
  padding:16px clamp(18px,2.4vw,28px); background:var(--w); border:1px solid var(--line);
  border-radius:100px; box-shadow:var(--sh1); }
@media (max-width:760px){ .tbar{ border-radius:var(--r2); justify-content:flex-start; } }
.tbar div{ display:flex; align-items:center; gap:9px; font-size:.87rem; font-weight:600; }
.tbar svg{ width:16px; height:16px; color:var(--lime-d); flex:none; }