*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F9F9F7;--white:#FFFFFF;--surf:#F4F3F0;--surf2:#EDECE9;
  --line:rgba(0,0,0,.06);--line2:rgba(0,0,0,.11);--line3:rgba(0,0,0,.18);
  --ink:#111110;--ink2:#6B7280;--ink3:#9CA3AF;
  --blue:#2563EB;--blue-dark:#1D4ED8;--meta:#1877F2;--google-b:#4285F4;
  --green:#15803D;--amber:#B45309;--red:#DC2626;
  --r:12px;--r2:20px;--r3:28px;
}
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}

/* scroll reveal */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
[data-reveal="left"]{transform:translateX(-22px)}
[data-reveal="right"]{transform:translateX(22px)}
[data-reveal].visible{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.07s}[data-delay="2"]{transition-delay:.14s}[data-delay="3"]{transition-delay:.21s}
[data-delay="4"]{transition-delay:.28s}[data-delay="5"]{transition-delay:.35s}[data-delay="6"]{transition-delay:.42s}
[data-delay="7"]{transition-delay:.49s}[data-delay="8"]{transition-delay:.56s}

/* NAV */
nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:900;display:flex;align-items:center;justify-content:space-between;width:min(1120px,calc(100% - 28px));padding:0 18px;height:54px;background:rgba(255,255,255,.9);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--line2);border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.9)}
.logo{display:flex;align-items:center;gap:9px;font-size:.95rem;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
.logo-img{height:30px;width:auto;display:block}
.nav-links{display:flex;gap:26px}
.nav-links a{font-size:.82rem;font-weight:500;color:var(--ink2);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;gap:8px;align-items:center}
.n-ghost{padding:7px 14px;border-radius:8px;font-size:.8rem;font-weight:500;color:var(--ink2);border:1px solid var(--line2);background:transparent;transition:all .2s}
.n-ghost:hover{color:var(--ink);border-color:var(--line3)}
.n-cta{padding:8px 17px;border-radius:8px;font-size:.8rem;font-weight:700;background:var(--ink);color:#fff;transition:all .2s;box-shadow:0 1px 3px rgba(0,0,0,.22)}
.n-cta:hover{background:#1a1a18;transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.22)}
.n-cta:active{transform:scale(.98)}

/* HERO — split screen */
#hero{min-height:100dvh;display:grid;grid-template-rows:1fr auto;padding-top:90px;position:relative;overflow:hidden}
#hero::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(0,0,0,.1) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,black,transparent 80%);opacity:.55}
.hero-inner{max-width:1140px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:55fr 45fr;gap:52px;align-items:center;position:relative;z-index:1}
.hero-left{display:flex;flex-direction:column;align-items:flex-start}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 5px;border-radius:99px;margin-bottom:26px;background:var(--white);border:1px solid var(--line2);box-shadow:0 1px 4px rgba(0,0,0,.06);font-size:.73rem;font-weight:600;color:var(--ink2)}
.badge-inner{display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;background:var(--ink);color:#fff;font-size:.68rem;font-weight:700}
.live-dot{width:5px;height:5px;border-radius:50%;background:#4ADE80;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
h1{font-size:clamp(2.6rem,5.2vw,4.6rem);font-weight:900;line-height:1.06;letter-spacing:-3px;max-width:600px;margin-bottom:22px;color:var(--ink)}
.h1-accent{color:var(--blue)}
.h1-sub{font-size:clamp(1.8rem,3.8vw,3.4rem);font-weight:300;color:rgba(17,17,16,.26);letter-spacing:-2px;display:block;margin-top:4px}
.hero-desc{font-size:clamp(.9rem,1.35vw,1.04rem);color:var(--ink2);max-width:460px;line-height:1.82;margin-bottom:30px}
.hero-desc strong{color:var(--ink);font-weight:600}
.hero-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:var(--white);border:1px solid var(--line2);font-size:.75rem;font-weight:600;color:var(--ink2);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.chip-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-fill{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;font-size:.88rem;font-weight:700;background:var(--ink);color:#fff;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s;box-shadow:0 2px 8px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.14)}
.btn-fill:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.22)}
.btn-fill:active{transform:scale(.98)}
.btn-line{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;font-size:.88rem;font-weight:600;background:var(--white);color:var(--ink);border:1px solid var(--line2);transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .2s,box-shadow .2s;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.btn-line:hover{border-color:var(--line3);transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.07)}
.btn-line:active{transform:scale(.98)}

/* hero right — campaign card */
.hero-right{display:flex;flex-direction:column;gap:12px;position:relative}
.hv-card{background:var(--white);border:1px solid var(--line2);border-radius:var(--r3);padding:26px;box-shadow:0 4px 24px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.9);animation:floatY 5s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hv-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.hv-live{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:var(--ink2)}
.hv-live::before{content:'';width:7px;height:7px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.18)}
.hv-badge{font-size:.66rem;font-weight:700;padding:3px 8px;border-radius:5px;background:var(--surf);color:var(--ink3);border:1px solid var(--line2)}
.hv-label{font-size:.66rem;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.8px;display:block;margin-bottom:4px}
.hv-val{font-size:2.5rem;font-weight:900;letter-spacing:-2px;color:var(--ink);line-height:1}
.hv-delta{font-size:.72rem;font-weight:600;color:var(--green);display:inline-flex;align-items:center;gap:4px;margin-top:5px}
.hv-bars{display:flex;align-items:flex-end;gap:5px;height:60px;margin:18px 0;padding-bottom:2px;border-bottom:1px solid var(--line)}
.hv-bar{flex:1;border-radius:4px 4px 0 0;background:var(--surf2);min-height:8px}
.hv-bar.hi{background:var(--blue)}
.hv-bar.mid{background:rgba(37,99,235,.35)}
.hv-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:16px}
.hv-stat{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:9px;background:var(--surf);border:1px solid var(--line)}
.hv-stat span{font-size:.62rem;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.6px}
.hv-stat strong{font-size:.9rem;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.hv-pill{background:var(--white);border:1px solid var(--line2);border-radius:99px;padding:9px 16px;display:inline-flex;align-items:center;gap:9px;font-size:.76rem;font-weight:600;color:var(--ink2);box-shadow:0 2px 8px rgba(0,0,0,.04);align-self:flex-end;margin-right:16px;animation:floatY2 4s ease-in-out .8s infinite}
@keyframes floatY2{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hv-pill-icon{width:22px;height:22px;border-radius:6px;flex-shrink:0;display:grid;place-items:center;background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.2)}
.hv-pill-icon svg{width:11px;height:11px;stroke:var(--blue);stroke-width:2;fill:none}

/* hero stats bar */
.hero-stats-row{border-top:1px solid var(--line);background:var(--white)}
.hero-stats{max-width:1140px;margin:0 auto;padding:0 32px;display:flex}
.hstat{padding:22px 36px;text-align:center;position:relative;flex:1}
.hstat+.hstat::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.hstat-val{font-size:1.65rem;font-weight:900;letter-spacing:-.8px;color:var(--ink);line-height:1;margin-bottom:5px}
.hstat-val span{color:var(--blue);font-size:1rem;font-weight:700}
.hstat-key{font-size:.67rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.8px}

/* MARQUEE */
.marquee-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;overflow:hidden;background:var(--white);position:relative}
.marquee-inner{display:flex;gap:0;animation:marquee 28s linear infinite;width:max-content}
.marquee-inner:hover{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.m-logo{display:flex;align-items:center;gap:36px;padding:0 36px;border-right:1px solid var(--line);font-size:.74rem;font-weight:700;color:var(--ink3);letter-spacing:1.8px;text-transform:uppercase;white-space:nowrap}
.marquee-strip::before,.marquee-strip::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:1}
.marquee-strip::before{left:0;background:linear-gradient(to right,var(--white),transparent)}
.marquee-strip::after{right:0;background:linear-gradient(to left,var(--white),transparent)}

/* SECTION */
.sec{padding:96px 24px;position:relative}
.wrap{max-width:1140px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;color:var(--blue);letter-spacing:2.2px;text-transform:uppercase;margin-bottom:14px}
.eyebrow::before{content:'';width:12px;height:1.5px;background:var(--blue);flex-shrink:0}
h2{font-size:clamp(1.8rem,3.4vw,2.75rem);font-weight:800;letter-spacing:-1.5px;line-height:1.16;margin-bottom:16px;color:var(--ink)}
.lead{font-size:.94rem;color:var(--ink2);line-height:1.8;max-width:480px}

/* PLATFORMS */
#platforms{background:var(--white)}
.plat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:52px}
.plat-card{border-radius:var(--r2);border:1px solid var(--line2);background:var(--bg);padding:34px;transition:border-color .25s,transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;position:relative;overflow:hidden}
.plat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--blue);opacity:0;transition:opacity .25s}
.plat-card:hover{border-color:var(--line3);transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,0,0,.06)}
.plat-card:hover::after{opacity:1}
.plat-card:active{transform:scale(.99)}
.plat-head{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.plat-icon{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
.plat-icon.meta{background:rgba(24,119,242,.08);border:1px solid rgba(24,119,242,.18)}
.plat-icon.google{background:rgba(66,133,244,.08);border:1px solid rgba(66,133,244,.18)}
.plat-name{font-size:1.05rem;font-weight:800;letter-spacing:-.3px;margin-bottom:3px;color:var(--ink)}
.plat-sub{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.4px;padding:2px 8px;border-radius:5px}
.plat-sub.meta{background:rgba(24,119,242,.07);color:var(--meta)}
.plat-sub.google{background:rgba(66,133,244,.07);color:var(--google-b)}
.plat-desc{font-size:.85rem;color:var(--ink2);line-height:1.75;margin-bottom:24px}
.plat-feats{display:flex;flex-direction:column;gap:8px}
.plat-feat{display:flex;align-items:flex-start;gap:9px;font-size:.81rem;color:var(--ink2)}
.feat-tick{width:17px;height:17px;border-radius:4px;flex-shrink:0;margin-top:1px;display:grid;place-items:center}
.feat-tick.meta{background:rgba(24,119,242,.07);color:var(--meta);border:1px solid rgba(24,119,242,.14)}
.feat-tick.google{background:rgba(66,133,244,.07);color:var(--google-b);border:1px solid rgba(66,133,244,.14)}
.feat-tick svg{width:8px;height:8px;stroke-width:3;fill:none}

/* BENTO */
#problems{background:var(--bg)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:11px;margin-top:52px}
.bc{background:var(--white);border:1px solid var(--line2);border-radius:var(--r2);padding:26px;transition:border-color .25s,transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.bc:hover{border-color:var(--line3);transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,.05)}
.bc:active{transform:scale(.99)}
.bc-a{grid-column:span 7}.bc-b{grid-column:span 5}.bc-c{grid-column:span 4}.bc-d{grid-column:span 4}.bc-e{grid-column:span 4}
.bc-sol{grid-column:span 12;background:var(--ink);color:#fff}
.bc-sol:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(0,0,0,.14)}
.bc-icon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;margin-bottom:14px;border:1px solid var(--line2);background:var(--surf);color:var(--ink2)}
.bc-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.prob-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.66rem;font-weight:700;letter-spacing:.3px;background:rgba(220,38,38,.06);color:#B91C1C;border:1px solid rgba(220,38,38,.12);margin-bottom:9px}
.bc h3{font-size:.94rem;font-weight:700;margin-bottom:7px;color:var(--ink)}
.bc p{font-size:.81rem;color:var(--ink2);line-height:1.7}
.bc-sol h3{color:#fff}.bc-sol p{color:rgba(255,255,255,.58)}
.bc-sol .bc-icon{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.65)}
.sol-layout{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.sol-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.sol-chip{padding:4px 10px;border-radius:5px;font-size:.7rem;font-weight:600;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.72)}
.sol-items{display:flex;flex-direction:column;gap:9px}
.sol-item{display:flex;align-items:flex-start;gap:10px;padding:13px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.sol-item-icon{width:28px;height:28px;border-radius:6px;flex-shrink:0;display:grid;place-items:center;background:rgba(255,255,255,.09);color:rgba(255,255,255,.65)}
.sol-item-icon svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sol-item h4{font-size:.8rem;font-weight:700;color:#fff;margin-bottom:2px}
.sol-item p{font-size:.74rem;color:rgba(255,255,255,.48);line-height:1.5}

/* PRICING */
#services{background:var(--white)}
.svc-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:46px;flex-wrap:wrap;gap:20px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.pcard{border-radius:var(--r2);border:1px solid var(--line2);background:var(--bg);padding:30px;position:relative;transition:border-color .25s,transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.pcard:hover{border-color:var(--line3);transform:translateY(-4px);box-shadow:0 10px 32px rgba(0,0,0,.07)}
.pcard:active{transform:scale(.99)}
.pcard.pop{background:var(--ink);border-color:transparent;box-shadow:0 4px 20px rgba(0,0,0,.14)}
.pcard.pop:hover{transform:translateY(-5px);box-shadow:0 18px 52px rgba(0,0,0,.22)}
.pop-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:4px 13px;border-radius:99px;white-space:nowrap;background:var(--blue);font-size:.65rem;font-weight:800;color:#fff;letter-spacing:.4px;box-shadow:0 4px 10px rgba(37,99,235,.3)}
.pcard-tier{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink3);margin-bottom:7px}
.pcard-line{font-size:.83rem;color:var(--ink2);margin-bottom:18px;line-height:1.5}
.pcard-price{font-size:1.8rem;font-weight:900;letter-spacing:-1.5px;color:var(--ink);line-height:1}
.pcard-price small{font-size:.79rem;font-weight:400;color:var(--ink2)}
.pcard-adspend{font-size:.73rem;color:var(--blue);margin:4px 0 3px}
.pcard-budget{font-size:.71rem;color:var(--ink3);padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.pcard-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.pcard-list li{display:flex;align-items:flex-start;gap:8px;font-size:.8rem;color:var(--ink2)}
.ptick{width:16px;height:16px;border-radius:4px;flex-shrink:0;margin-top:2px;display:grid;place-items:center;background:rgba(21,128,61,.07);color:var(--green);border:1px solid rgba(21,128,61,.16)}
.ptick svg{width:8px;height:8px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pbtn{display:block;text-align:center;padding:11px;border-radius:9px;font-size:.81rem;font-weight:700;transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s,box-shadow .2s}
.pbtn:hover{transform:translateY(-1px)}.pbtn:active{transform:scale(.98)}
.pbtn.out{border:1px solid var(--line2);color:var(--ink);background:var(--white)}
.pbtn.out:hover{border-color:var(--line3);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.pbtn.inv{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.14)}
.pbtn.inv:hover{background:rgba(255,255,255,.18)}
.pop .pcard-tier{color:rgba(255,255,255,.38)}.pop .pcard-line{color:rgba(255,255,255,.58)}.pop .pcard-price{color:#fff}
.pop .pcard-price small{color:rgba(255,255,255,.48)}.pop .pcard-adspend{color:#93C5FD}
.pop .pcard-budget{color:rgba(255,255,255,.32);border-bottom-color:rgba(255,255,255,.07)}
.pop .pcard-list li{color:rgba(255,255,255,.62)}
.pop .ptick{background:rgba(255,255,255,.09);color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.14)}

/* BENEFITS */
#benefits{background:var(--bg)}
.ben-section-label{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.ben-plat-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:7px;font-size:.74rem;font-weight:700}
.ben-plat-tag.meta{background:rgba(24,119,242,.07);color:var(--meta);border:1px solid rgba(24,119,242,.14)}
.ben-plat-tag.google{background:rgba(66,133,244,.07);color:var(--google-b);border:1px solid rgba(66,133,244,.14)}
.ben-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.ben-card{background:var(--white);border:1px solid var(--line2);border-radius:var(--r2);padding:24px;transition:border-color .22s,transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s;display:flex;flex-direction:column}
.ben-card:hover{border-color:var(--line3);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.06)}
.ben-card:active{transform:scale(.99)}
.ben-card-dark{background:var(--ink);border-color:transparent}
.ben-card-dark:hover{box-shadow:0 10px 34px rgba(0,0,0,.2);border-color:transparent}
.ben-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ben-icon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink2)}
.ben-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ben-tag{font-size:.6rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:2px 7px;border-radius:4px;border:1px solid}
.ben-tag-blue{background:rgba(37,99,235,.06);color:var(--blue);border-color:rgba(37,99,235,.13)}
.ben-tag-purple{background:rgba(109,40,217,.06);color:#7C3AED;border-color:rgba(109,40,217,.13)}
.ben-tag-green{background:rgba(21,128,61,.06);color:var(--green);border-color:rgba(21,128,61,.13)}
.ben-tag-amber{background:rgba(180,83,9,.06);color:var(--amber);border-color:rgba(180,83,9,.13)}
.ben-tag-cyan{background:rgba(8,145,178,.06);color:#0891B2;border-color:rgba(8,145,178,.13)}
.ben-card h3{font-size:.88rem;font-weight:700;margin-bottom:6px;color:var(--ink)}
.ben-card p{font-size:.79rem;color:var(--ink2);line-height:1.7;flex:1;margin-bottom:12px}
.ben-format{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
.bfmt{font-size:.66rem;font-weight:600;padding:2px 7px;border-radius:4px;background:var(--surf);border:1px solid var(--line2);color:var(--ink3)}
.ben-divider{height:1px;background:var(--line2);margin:44px 0}

/* PROCESS */
#process{background:var(--white)}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line2);border-radius:var(--r2);overflow:hidden;margin-top:52px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.pstep{background:var(--white);padding:30px 24px;border-right:1px solid var(--line);transition:background .22s;position:relative}
.pstep:last-child{border-right:none}
.pstep:hover{background:var(--surf)}
.pstep-n{font-size:2.8rem;font-weight:900;line-height:1;color:rgba(0,0,0,.04);letter-spacing:-2px;margin-bottom:12px}
.pstep-icon{width:32px;height:32px;border-radius:7px;display:grid;place-items:center;margin-bottom:12px;background:var(--surf);border:1px solid var(--line2);color:var(--ink2)}
.pstep-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pstep h3{font-size:.92rem;font-weight:700;margin-bottom:7px;color:var(--ink)}
.pstep p{font-size:.79rem;color:var(--ink2);line-height:1.7}

/* METRICS */
#metrics{background:var(--bg)}
.met-head{text-align:center;margin-bottom:52px}
.met-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line2);border-radius:var(--r2);overflow:hidden;background:var(--white);box-shadow:0 2px 10px rgba(0,0,0,.04)}
.met{padding:38px 20px;text-align:center;border-right:1px solid var(--line);transition:background .22s}
.met:last-child{border-right:none}
.met:hover{background:var(--surf)}
.met-val{font-size:2.3rem;font-weight:900;letter-spacing:-1.8px;line-height:1;margin-bottom:7px;color:var(--ink)}
.met-val.c-blue{color:var(--blue)}
.met-key{font-size:.67rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.9px}

/* WHY */
#why{background:var(--bg)}
.why-layout{display:grid;grid-template-columns:1fr 2fr;gap:60px;align-items:start}
.why-left{position:sticky;top:96px}
.why-item{padding:24px 0;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:18px;transition:padding-left .22s cubic-bezier(.22,1,.36,1);cursor:default}
.why-item:first-child{border-top:1px solid var(--line)}
.why-item:hover{padding-left:10px}
.why-num{font-size:.68rem;font-weight:700;color:var(--ink3);letter-spacing:.4px;margin-top:3px;flex-shrink:0;width:22px}
.why-item h3{font-size:.96rem;font-weight:700;margin-bottom:6px;color:var(--ink)}
.why-item p{font-size:.83rem;color:var(--ink2);line-height:1.75}

/* TESTIMONIALS — 2-col, no 3-col equal */
#testi{background:var(--white)}
.testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:46px}
.tcard-feat{grid-column:span 2;background:var(--ink);border:none;border-radius:var(--r2);padding:32px 36px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s}
.tcard-feat:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(0,0,0,.16)}
.tcard{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r2);padding:24px;transition:border-color .22s,transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s}
.tcard:hover{border-color:var(--line3);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.tcard:active{transform:scale(.99)}
.stars{color:var(--amber);font-size:.8rem;letter-spacing:2px;margin-bottom:12px}
.tcard-feat .stars{color:#FCD34D}
.tcard blockquote{font-size:.85rem;color:var(--ink2);line-height:1.8;margin-bottom:16px}
.tcard-feat blockquote{font-size:.94rem;color:rgba(255,255,255,.72);line-height:1.75;margin-bottom:18px}
.tauthor{display:flex;align-items:center;gap:10px}
.tavatar{width:32px;height:32px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;font-size:.7rem;font-weight:800;background:var(--blue);color:#fff}
.tcard-feat .tavatar{background:rgba(255,255,255,.15);color:#fff}
.tname{font-size:.81rem;font-weight:700;color:var(--ink)}
.trole{font-size:.71rem;color:var(--ink3)}
.tcard-feat .tname{color:#fff}.tcard-feat .trole{color:rgba(255,255,255,.42)}
.tfeat-right{border-left:1px solid rgba(255,255,255,.08);padding-left:28px}
.tfeat-metric{margin-bottom:18px}
.tfeat-val{font-size:2.6rem;font-weight:900;letter-spacing:-2px;color:#fff;line-height:1}
.tfeat-label{font-size:.68rem;color:rgba(255,255,255,.42);text-transform:uppercase;letter-spacing:.8px;margin-top:4px}
.tfeat-delta{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;color:#4ADE80;padding:3px 9px;border-radius:5px;background:rgba(74,222,128,.1);margin-top:8px}

/* CTA */
#cta{background:var(--ink);padding:120px 24px;text-align:center;position:relative;overflow:hidden}
#cta::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px}
#cta::after{content:'';position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:700px;height:480px;background:radial-gradient(ellipse,rgba(37,99,235,.14) 0%,transparent 65%);pointer-events:none}
.cta-wrap{max-width:580px;margin:0 auto;position:relative;z-index:1}
.cta-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;margin-bottom:24px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:.71rem;font-weight:600;color:rgba(255,255,255,.62)}
#cta h2{font-size:clamp(2rem,4.3vw,3.3rem);font-weight:900;letter-spacing:-2px;line-height:1.08;margin-bottom:16px;color:#fff}
.cta-accent{color:#93C5FD}
#cta p{font-size:.94rem;color:rgba(255,255,255,.48);margin-bottom:30px;line-height:1.8}
.cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.btn-wa{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;font-size:.88rem;font-weight:700;background:#fff;color:var(--ink);transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,.28)}
.btn-wa:active{transform:scale(.98)}
.btn-cal{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;font-size:.88rem;font-weight:600;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s}
.btn-cal:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn-cal:active{transform:scale(.98)}
.cta-note{font-size:.73rem;color:rgba(255,255,255,.3)}
.cta-note b{color:rgba(255,255,255,.58);font-weight:600}

/* PORTFOLIO */
.porto-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.porto-card{background:var(--white);border:1px solid var(--line2);border-radius:var(--r3);overflow:hidden;display:flex;flex-direction:column}
.porto-photo{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top center;display:block}
.porto-body{padding:28px;display:flex;flex-direction:column;flex:1}
.porto-role{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:99px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px}
.porto-role.meta{background:rgba(24,119,242,.08);color:var(--meta)}
.porto-role.google{background:rgba(66,133,244,.08);color:var(--google-b)}
.porto-name{font-size:1.35rem;font-weight:800;letter-spacing:-.4px;margin-bottom:6px}
.porto-title{font-size:.8rem;color:var(--ink2);font-weight:500;margin-bottom:16px}
.porto-bio{font-size:.85rem;color:var(--ink2);line-height:1.75;margin-bottom:22px;flex:1}
.porto-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.pstat{background:var(--surf);border-radius:10px;padding:12px;text-align:center}
.pstat-val{font-size:1.1rem;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.pstat-lbl{font-size:.65rem;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.porto-creds{display:flex;flex-direction:column;gap:8px}
.pcred{display:flex;align-items:flex-start;gap:9px;font-size:.78rem;color:var(--ink2);line-height:1.5}
.pcred svg{flex-shrink:0;margin-top:2px;color:var(--blue)}

/* FOOTER */
footer{background:var(--bg);border-top:1px solid var(--line2);padding:26px 48px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.foot-logo{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:800;color:var(--ink)}
.foot-links{display:flex;gap:18px}
.foot-links a{font-size:.75rem;color:var(--ink3);transition:color .2s}
.foot-links a:hover{color:var(--ink2)}
.foot-copy{font-size:.72rem;color:var(--ink3)}

/* RESPONSIVE */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr}
  .hero-left{align-items:flex-start}
  .hero-right{max-width:440px}
  .plat-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .met-grid{grid-template-columns:repeat(2,1fr)}
  .proc-grid{grid-template-columns:repeat(2,1fr)}
  .bento{display:flex;flex-direction:column}
  .sol-layout{grid-template-columns:1fr}
  .why-layout{grid-template-columns:1fr;gap:28px}
  .why-left{position:static}
  .testi-grid{grid-template-columns:1fr}
  .tcard-feat{grid-column:span 1;grid-template-columns:1fr}
  .tfeat-right{border-left:none;border-top:1px solid rgba(255,255,255,.08);padding-left:0;padding-top:22px}
  .ben-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .porto-grid{grid-template-columns:1fr}
  .porto-stats{grid-template-columns:repeat(3,1fr)}

  nav{padding:0 12px}
  .nav-links,.n-ghost{display:none}
  .sec{padding:60px 16px}
  #cta{padding:80px 16px}
  h1{letter-spacing:-2px}
  .hero-inner{padding:0 20px}
  .hero-stats{padding:0 20px;flex-direction:column}
  .hstat+.hstat::before{top:0;left:18px;right:18px;width:auto;height:1px;bottom:auto}
  .hstat{padding:14px 18px}
  .met-grid{grid-template-columns:1fr 1fr}
  .met{border-right:none;border-bottom:1px solid var(--line)}
  .met:nth-child(odd){border-right:1px solid var(--line)}
  footer{padding:18px 16px;flex-direction:column;text-align:center}
  .tcard-feat{padding:24px 20px}
}
@media(max-width:480px){
  .ben-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .hero-right{display:none}
}

/* ===== MULTI-PAGE ADDITIONS ===== */
a.logo{text-decoration:none}
.nav-links a.active{color:var(--ink);font-weight:700}

/* sub-page intro */
.subhero{padding:128px 24px 58px;background:var(--white);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.subhero::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(0,0,0,.1) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse 80% 75% at 28% 0%,black,transparent 78%);opacity:.5}
.subhero .wrap{position:relative;z-index:1}
.subhero h1{font-size:clamp(2.1rem,4.3vw,3.5rem);font-weight:900;letter-spacing:-2px;line-height:1.07;margin:0 0 16px;max-width:760px;color:var(--ink)}
.subhero p{font-size:clamp(.92rem,1.3vw,1.05rem);color:var(--ink2);max-width:540px;line-height:1.8}

/* home explore hub */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:50px}
.hub-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line2);border-radius:var(--r2);padding:28px;transition:border-color .25s,transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.hub-card:hover{border-color:var(--line3);transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,0,0,.06)}
.hub-icon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:var(--surf);border:1px solid var(--line2);color:var(--ink);margin-bottom:16px}
.hub-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hub-card h3{font-size:1.05rem;font-weight:800;letter-spacing:-.3px;margin-bottom:7px;color:var(--ink)}
.hub-card p{font-size:.83rem;color:var(--ink2);line-height:1.7;flex:1;margin-bottom:16px}
.hub-link{font-size:.8rem;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:6px}
@media(max-width:1024px){.hub{grid-template-columns:1fr}}


/* ===== MOBILE NAV (hamburger) ===== */
.nav-toggle{display:none;background:transparent;border:1px solid var(--line2);border-radius:8px;width:38px;height:34px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.nav-toggle span{display:block;width:16px;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s,opacity .22s}
.nav-toggle.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.on span:nth-child(2){opacity:0}
.nav-toggle.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:768px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:62px;left:0;right:0;flex-direction:column;gap:0;background:rgba(255,255,255,.98);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--line2);border-radius:14px;padding:8px;box-shadow:0 10px 34px rgba(0,0,0,.12);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px;border-radius:8px;font-size:.92rem;width:100%}
  .nav-links a:hover,.nav-links a.active{background:var(--surf);color:var(--ink)}
}

/* tighten nav on small screens */
@media(max-width:768px){
  .logo{font-size:.86rem;white-space:nowrap}
  .logo-img{height:26px}
  .n-cta{padding:7px 12px;font-size:.74rem;white-space:nowrap}
  nav{padding:0 10px}
}

/* ===== LEGAL PAGES ===== */
.legal{padding:54px 24px 84px;background:var(--white)}
.legal .wrap{max-width:760px}
.legal .updated{font-size:.8rem;color:var(--ink3);margin-bottom:6px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.legal h2{font-size:1.25rem;font-weight:800;letter-spacing:-.4px;margin:34px 0 12px;color:var(--ink)}
.legal h3{font-size:.98rem;font-weight:700;margin:18px 0 6px;color:var(--ink)}
.legal p{font-size:.92rem;color:var(--ink2);line-height:1.85;margin-bottom:14px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{font-size:.92rem;color:var(--ink2);line-height:1.8;margin-bottom:7px}
.legal a{color:var(--blue);text-decoration:underline}
.legal strong{color:var(--ink);font-weight:700}

/* ===== FOOTER (multi-row) ===== */
footer{background:var(--bg);border-top:1px solid var(--line2);padding:0;display:block}
.foot-main{max-width:1140px;margin:0 auto;padding:30px 24px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot-legal{max-width:1140px;margin:0 auto;padding:16px 24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.foot-legal-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-legal-links a{font-size:.74rem;color:var(--ink3);transition:color .2s}
.foot-legal-links a:hover{color:var(--ink)}
@media(max-width:768px){
  .foot-main,.foot-legal{flex-direction:column;text-align:center;padding-left:16px;padding-right:16px}
  .foot-links,.foot-legal-links{justify-content:center}
}

/* ===== COOKIE CONSENT BAR ===== */
.cookie-bar{position:fixed;left:14px;right:14px;bottom:14px;z-index:950;max-width:680px;margin:0 auto;background:rgba(17,17,16,.97);backdrop-filter:blur(12px);color:#fff;border-radius:14px;padding:15px 18px;display:flex;align-items:center;gap:16px;box-shadow:0 12px 40px rgba(0,0,0,.32);font-size:.8rem;line-height:1.55;animation:cookieUp .4s cubic-bezier(.22,1,.36,1)}
@keyframes cookieUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.cookie-bar a{color:#93C5FD;text-decoration:underline}
.cookie-ok{flex-shrink:0;background:#fff;color:var(--ink);border:0;border-radius:8px;padding:9px 18px;font-weight:700;font-size:.78rem;cursor:pointer;font-family:inherit;transition:transform .2s}
.cookie-ok:hover{transform:translateY(-1px)}
@media(max-width:560px){.cookie-bar{flex-direction:column;align-items:stretch;text-align:center;gap:11px}}