/*
Theme Name: WOWebsites
Theme URI: https://wowebsites.com
Author: WOWebsites
Author URI: https://wowebsites.com
Description: Award-winning web design and SEO WordPress theme for WOWebsites.com
Version: 1.0.0
License: Proprietary
Text Domain: wowebsites
*/

/* ─────────────────────────────────────────────
   TOKENS
───────────────────────────────────────────── */
:root {
  --white:      #ffffff;
  --off-white:  #f7f9f8;
  --surface:    #f0f5f3;
  --ink:        #0d1a16;
  --ink-mid:    #2d4a3e;
  --text:       #1a2e26;
  --text-mid:   #4a6b5e;
  --text-light: #7a9b8e;
  --teal:       #5bbfaa;
  --teal-dark:  #389982;
  --teal-deep:  #1d6e5e;
  --teal-pale:  #e8f5f2;
  --teal-mid:   #c2e8df;
  --coral:      #e8614e;
  --coral-dark: #c94a38;
  --coral-pale: #fef0ee;
  --border:     rgba(0,0,0,.08);
  --shadow-sm:  0 2px 12px rgba(0,0,0,.06);
  --shadow-md:  0 8px 36px rgba(0,0,0,.1);
  --shadow-lg:  0 20px 60px rgba(0,0,0,.14);
  --ff-display: 'Space Grotesk', sans-serif;
  --ff-body:    'Inter', sans-serif;
  --ff-italic:  'Playfair Display', serif;
  --ease:       cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px; cursor:none }
body { font-family:var(--ff-body); background:var(--white); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased }
img { max-width:100%; height:auto; display:block }
a { text-decoration:none; color:inherit }
ul { list-style:none }

/* ─────────────────────────────────────────────
   CUSTOM CURSOR
───────────────────────────────────────────── */
#cursor { position:fixed; width:10px; height:10px; background:var(--teal-dark); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .3s var(--ease),height .3s var(--ease),background .25s }
#cursor-ring { position:fixed; width:36px; height:36px; border:1.5px solid var(--teal); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:opacity .3s }
body:has(a:hover) #cursor, body:has(button:hover) #cursor { width:44px; height:44px; background:var(--coral); }
body:has(a:hover) #cursor-ring, body:has(button:hover) #cursor-ring { opacity:0 }

/* ─────────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────────── */
.t-display { font-family:var(--ff-display); font-weight:700; font-size:clamp(3.6rem,7vw,7rem); line-height:.96; letter-spacing:-.045em }
.t-h2 { font-family:var(--ff-display); font-weight:700; font-size:clamp(2.2rem,3.8vw,3.8rem); line-height:1.05; letter-spacing:-.035em }
.t-h3 { font-family:var(--ff-display); font-weight:700; font-size:clamp(1.5rem,2.2vw,2rem); line-height:1.1; letter-spacing:-.025em }
.t-label { font-family:var(--ff-body); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-dark) }
.t-body { font-size:.95rem; line-height:1.82; color:var(--text-mid) }
.t-italic { font-family:var(--ff-italic); font-style:italic; color:var(--teal-dark); font-weight:400 }

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.55rem; cursor:none;
  font-family:var(--ff-display); font-weight:700; font-size:.88rem;
  padding:.875rem 2rem; border-radius:100px; border:none;
  position:relative; overflow:hidden; letter-spacing:-.01em;
  white-space:nowrap; transition:color .3s;
}
.btn > * { position:relative; z-index:1 }
.btn::after { content:''; position:absolute; inset:0; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); border-radius:inherit }
.btn:hover::after { transform:scaleX(1); transform-origin:left }

.btn-coral { background:var(--coral); color:#fff; box-shadow:0 4px 20px rgba(232,97,78,.3) }
.btn-coral::after { background:var(--coral-dark) }

.btn-ink { background:var(--ink); color:#fff }
.btn-ink::after { background:var(--teal-deep) }

.btn-teal { background:var(--teal); color:#fff; box-shadow:0 4px 16px rgba(91,191,170,.3) }
.btn-teal::after { background:var(--teal-dark) }

.btn-outline { background:transparent; color:var(--ink); border:1.5px solid var(--border) }
.btn-outline::after { background:var(--teal-pale) }
.btn-outline:hover { color:var(--teal-dark) }

.btn-teal-ghost { background:transparent; color:var(--teal-dark); border:1.5px solid var(--teal) }
.btn-teal-ghost::after { background:var(--teal); }
.btn-teal-ghost:hover { color:#fff }

.btn svg { width:15px; height:15px; transition:transform .3s }
.btn:hover svg { transform:translateX(3px) }

/* ─────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────── */
.wrap { width:88%; max-width:1240px; margin:0 auto }
.wrap--wide { width:94%; max-width:1440px; margin:0 auto }

/* ─────────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(36px); transition:opacity .85s var(--ease), transform .85s var(--ease) }
.reveal.in { opacity:1; transform:translateY(0) }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s} .d5{transition-delay:.5s}

/* ─────────────────────────────────────────────
   TOP BAR
───────────────────────────────────────────── */
.topbar { background:var(--ink); padding:.5rem 0 }
.topbar__inner { display:flex; align-items:center; justify-content:space-between; font-size:.73rem; color:rgba(255,255,255,.45) }
.topbar__support { display:flex; align-items:center; gap:.5rem }
.topbar__support-dot { width:6px; height:6px; background:var(--teal); border-radius:50%; animation:blink 2.5s infinite }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.topbar__nav { display:flex; gap:1.5rem }
.topbar__nav a { color:rgba(255,255,255,.4); transition:color .2s }
.topbar__nav a:hover { color:rgba(255,255,255,.85) }

/* ─────────────────────────────────────────────
   MAIN NAV
───────────────────────────────────────────── */
.nav { position:sticky; top:0; z-index:800; background:rgba(255,255,255,.92); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:1rem 0; transition:box-shadow .3s }
.nav.scrolled { box-shadow:var(--shadow-md) }
.nav__inner { display:flex; align-items:center; justify-content:space-between; gap:2rem }

.nav__logo { display:flex; align-items:center; gap:.65rem }
.nav__logo-mark { width:38px; height:38px; background:var(--teal); border-radius:9px; display:flex; align-items:center; justify-content:center }
.nav__logo-mark svg { width:20px; height:20px; color:#fff }
.nav__logo-name { font-family:var(--ff-display); font-weight:800; font-size:1.2rem; color:var(--ink); letter-spacing:-.04em }
.nav__logo-name span { color:var(--teal-dark) }

.nav__links { display:flex; align-items:center; gap:.15rem }
.nav__links a { font-size:.84rem; font-weight:500; color:var(--text-mid); padding:.55rem .9rem; border-radius:7px; transition:color .2s, background .2s }
.nav__links a:hover { color:var(--teal-dark); background:var(--teal-pale) }

.nav__actions { display:flex; align-items:center; gap:.75rem }
.nav__phone { font-size:.82rem; font-weight:600; color:var(--text-mid); display:flex; align-items:center; gap:.4rem; transition:color .2s }
.nav__phone svg { color:var(--teal); width:15px; height:15px }
.nav__phone:hover { color:var(--teal-dark) }

/* ─────────────────────────────────────────────
   HERO
───────────────────────────────────────────── */
.hero { background:var(--white); padding:5.5rem 0 0; position:relative; overflow:hidden }

/* Teal arc shape top-right */
.hero__arc {
  position:absolute; top:-120px; right:-180px; width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, var(--teal-mid) 0%, var(--teal-pale) 45%, transparent 70%);
  pointer-events:none; z-index:0;
  animation:arcFloat 9s ease-in-out infinite;
}
@keyframes arcFloat { 0%,100%{transform:scale(1) rotate(0deg)} 50%{transform:scale(1.04) rotate(8deg)} }

.hero__dot-grid {
  position:absolute; top:0; left:0; right:0; bottom:0;
  background-image:radial-gradient(var(--teal-mid) 1px, transparent 1px);
  background-size:32px 32px; opacity:.35; pointer-events:none; z-index:0;
  mask-image:radial-gradient(ellipse 60% 80% at 80% 20%, black 0%, transparent 70%);
}

.hero__inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; padding-bottom:5rem }

.hero__content { display:flex; flex-direction:column; gap:2rem }

.hero__badge {
  display:inline-flex; align-items:center; gap:.6rem; background:var(--teal-pale);
  border:1px solid var(--teal-mid); padding:.45rem 1rem; border-radius:50px; width:fit-content;
  animation:fadeDown .7s .2s var(--ease) both;
}
@keyframes fadeDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
.hero__badge-dot { width:6px; height:6px; background:var(--teal-dark); border-radius:50%; animation:blink 2.5s infinite }
.hero__badge span { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-dark) }

.hero__headline { animation:fadeUp .85s .35s var(--ease) both }
@keyframes fadeUp { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
.hero__headline .row { display:block; overflow:hidden }
.hero__headline .row-1 { color:var(--ink) }
.hero__headline .row-2 { color:var(--teal-dark) }
.hero__headline .row-3 { color:var(--ink) }

.hero__sub { font-size:1.05rem; line-height:1.8; color:var(--text-mid); max-width:480px; animation:fadeUp .85s .5s var(--ease) both }

.hero__actions { display:flex; gap:.85rem; flex-wrap:wrap; animation:fadeUp .85s .65s var(--ease) both }

.hero__trust { display:flex; align-items:center; gap:.85rem; animation:fadeUp .85s .75s var(--ease) both }

.hero__stars { display:flex; gap:2px }
.hero__stars svg { width:15px; height:15px; fill:#f5a623; color:#f5a623 }
.hero__trust-text { font-size:.8rem; color:var(--text-light) }
.hero__trust-text strong { color:var(--text-mid) }

/* Hero right panel — visual card */
.hero__visual { position:relative; animation:fadeUp .9s .5s var(--ease) both }
.hero__card {
  background:var(--white); border-radius:24px; padding:2.5rem;
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
  position:relative; z-index:1;
}
.hero__card-label { font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-light); margin-bottom:1.75rem }
.hero__metrics { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
.hero__metric-val { font-family:var(--ff-display); font-size:2.5rem; font-weight:800; color:var(--ink); letter-spacing:-.05em; line-height:1 }
.hero__metric-val em { color:var(--teal-dark); font-style:normal }
.hero__metric-lbl { font-size:.75rem; color:var(--text-light); line-height:1.45; margin-top:.3rem }
.hero__metric-bar { height:3px; background:var(--surface); border-radius:2px; margin-top:.6rem; overflow:hidden }
.hero__metric-bar-fill { height:100%; background:linear-gradient(90deg,var(--teal),var(--teal-dark)); border-radius:2px; animation:barfill 1.8s .8s var(--ease) both }
@keyframes barfill { from{width:0} }

/* Floating tag cards */
.hero__tag-float {
  position:absolute; background:var(--white); border-radius:14px;
  padding:.85rem 1.1rem; display:flex; align-items:center; gap:.65rem;
  box-shadow:var(--shadow-md); border:1px solid var(--border);
  animation:float 5s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.hero__tag-float--1 { top:-1.5rem; right:-1.75rem; animation-delay:0s }
.hero__tag-float--2 { bottom:-1.5rem; left:-2rem; animation-delay:1.8s }
.hero__tag-icon { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.hero__tag-icon--teal { background:var(--teal-pale) }
.hero__tag-icon--coral { background:var(--coral-pale) }
.hero__tag-icon svg { width:16px; height:16px }
.hero__tag-icon--teal svg { color:var(--teal-dark) }
.hero__tag-icon--coral svg { color:var(--coral) }
.hero__tag-body strong { display:block; font-size:.86rem; font-weight:600; color:var(--ink) }
.hero__tag-body span { font-size:.73rem; color:var(--text-light) }

/* ─────────────────────────────────────────────
   STATS STRIP (inline with hero bottom)
───────────────────────────────────────────── */
.hero-stats { background:var(--ink); padding:2.5rem 0 }
.hero-stats__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0 }
.hero-stat { padding:0 3rem; border-right:1px solid rgba(255,255,255,.08); text-align:center }
.hero-stat:first-child { padding-left:0; text-align:left }
.hero-stat:last-child { border-right:none }
.hero-stat__num { font-family:var(--ff-display); font-size:clamp(2.2rem,3.5vw,3.2rem); font-weight:800; letter-spacing:-.05em; color:#fff; line-height:1 }
.hero-stat__num em { color:var(--teal); font-style:normal }
.hero-stat__lbl { font-size:.75rem; color:rgba(255,255,255,.4); margin-top:.35rem; line-height:1.45 }

/* ─────────────────────────────────────────────
   TICKER
───────────────────────────────────────────── */
.ticker { background:var(--teal); padding:.85rem 0; overflow:hidden }
.ticker__track { display:flex; white-space:nowrap; animation:ticker 28s linear infinite }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ticker__item { display:inline-flex; align-items:center; gap:1.5rem; padding:0 2rem; font-family:var(--ff-display); font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.9) }
.ticker__sep { color:rgba(255,255,255,.4) }

/* ─────────────────────────────────────────────
   CLIENTS
───────────────────────────────────────────── */
.clients { padding:5rem 0; border-bottom:1px solid var(--border) }
.clients__label { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-light); margin-bottom:2.5rem }
.clients__row { display:flex; align-items:center; gap:3rem; flex-wrap:wrap }
.clients__item { font-family:var(--ff-display); font-weight:700; font-size:1rem; color:var(--text-light); letter-spacing:-.02em; transition:color .25s; cursor:none }
.clients__item:hover { color:var(--teal-dark) }

/* ─────────────────────────────────────────────
   CONTACT BAR
───────────────────────────────────────────── */
.contact-bar { background:var(--white); border-bottom:1px solid var(--border) }
.contact-bar__grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr }
.cbar-cell { padding:1.75rem 2rem; border-right:1px solid var(--border); cursor:none; transition:background .25s }
.cbar-cell:last-child { border-right:none }
.cbar-cell:not(.cbar-cell--intro):hover { background:var(--teal-pale) }
.cbar-cell--intro strong { font-family:var(--ff-display); font-size:1rem; font-weight:700; color:var(--ink); display:block; margin-bottom:.25rem; letter-spacing:-.02em }
.cbar-cell--intro p { font-size:.78rem; color:var(--text-light); margin:0 }
.cbar-link { display:flex; flex-direction:column; gap:.25rem; height:100%; justify-content:center }
.cbar-link svg { color:var(--teal); width:18px; height:18px; margin-bottom:.3rem }
.cbar-link strong { font-family:var(--ff-display); font-size:.9rem; font-weight:700; color:var(--ink); letter-spacing:-.015em }
.cbar-link span { font-size:.72rem; color:var(--text-light) }

/* ─────────────────────────────────────────────
   VALUE / MANIFESTO
───────────────────────────────────────────── */
.value { padding:8rem 0; background:var(--off-white); position:relative; overflow:hidden }
.value__ghost { position:absolute; right:-2%; top:50%; transform:translateY(-50%); font-family:var(--ff-display); font-weight:800; font-size:clamp(7rem,14vw,16rem); color:rgba(91,191,170,.06); letter-spacing:-.06em; pointer-events:none; line-height:1; white-space:nowrap }
.value__inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:7rem; align-items:center }
.value__label { display:flex; align-items:center; gap:.8rem; margin-bottom:1.5rem }
.value__label::after { content:''; flex:1; height:1px; background:var(--teal-mid) }
.value__headline { margin-bottom:2rem }
.value__headline .italic { font-family:var(--ff-italic); font-style:italic; color:var(--teal-dark); font-size:90% }
.value__body { font-size:1rem; line-height:1.85; color:var(--text-mid); margin-bottom:2.5rem }
.value__points { display:flex; flex-direction:column; gap:1.25rem }
.value__point { display:flex; align-items:flex-start; gap:1rem; padding:1.25rem 1.5rem; background:var(--white); border-radius:14px; border:1px solid var(--border); transition:box-shadow .3s, border-color .3s }
.value__point:hover { box-shadow:var(--shadow-sm); border-color:var(--teal-mid) }
.value__point-icon { width:38px; height:38px; border-radius:10px; background:var(--teal-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.value__point-icon svg { width:18px; height:18px; color:var(--teal-dark) }
.value__point-text h4 { font-family:var(--ff-display); font-size:.9rem; font-weight:700; color:var(--ink); margin-bottom:.2rem; letter-spacing:-.01em }
.value__point-text p { font-size:.82rem; color:var(--text-mid); line-height:1.6; margin:0 }

/* Stats column */
.value__stats { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem }
.vstat { background:var(--white); border-radius:20px; padding:2.25rem; border:1px solid var(--border); position:relative; overflow:hidden; transition:transform .3s, box-shadow .3s }
.vstat:hover { transform:translateY(-4px); box-shadow:var(--shadow-md) }
.vstat::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px }
.vstat:nth-child(1)::before { background:var(--teal) }
.vstat:nth-child(2)::before { background:var(--coral) }
.vstat:nth-child(3)::before { background:var(--teal-dark) }
.vstat:nth-child(4)::before { background:#f5a623 }
.vstat__num { font-family:var(--ff-display); font-size:clamp(2.2rem,3vw,3rem); font-weight:800; color:var(--ink); letter-spacing:-.05em; line-height:1; margin-bottom:.4rem }
.vstat__num em { color:var(--teal-dark); font-style:normal }
.vstat__lbl { font-size:.78rem; color:var(--text-light); line-height:1.45 }

/* ─────────────────────────────────────────────
   PACKAGES
───────────────────────────────────────────── */
.packages { padding:8rem 0; background:var(--white) }
.packages__head { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:end; margin-bottom:4.5rem }
.packages__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem }

.pkg-card { border-radius:24px; padding:2.75rem; border:1px solid var(--border); background:var(--white); position:relative; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s }
.pkg-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.pkg-card--featured { background:var(--teal-deep); border-color:var(--teal-deep) }
.pkg-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:4px; background:var(--border); transition:background .3s }
.pkg-card:not(.pkg-card--featured):hover::after { background:var(--teal) }
.pkg-card--featured::after { background:rgba(255,255,255,.2) }

.pkg-card__num { font-family:var(--ff-display); font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--text-light); margin-bottom:1.75rem }
.pkg-card--featured .pkg-card__num { color:rgba(255,255,255,.45) }
.pkg-card__pill { display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .85rem; border-radius:50px; margin-bottom:.85rem }
.pkg-card__pill--base { background:var(--teal-pale); color:var(--teal-dark) }
.pkg-card__pill--plus { background:rgba(255,255,255,.15); color:#fff }
.pkg-card__pill--max { background:var(--coral-pale); color:var(--coral-dark) }
.pkg-card h3 { font-family:var(--ff-body); font-size:1.45rem; font-weight:600; letter-spacing:-.01em; line-height:1.25; margin-bottom:.85rem }
.pkg-card:not(.pkg-card--featured) h3 { color:var(--ink) }
.pkg-card--featured h3 { color:#fff }
.pkg-card__desc { font-size:.85rem; line-height:1.75; margin-bottom:2rem; min-height:72px }
.pkg-card:not(.pkg-card--featured) .pkg-card__desc { color:var(--text-mid) }
.pkg-card--featured .pkg-card__desc { color:rgba(255,255,255,.65) }
.pkg-card__divider { height:1px; margin-bottom:1.75rem }
.pkg-card:not(.pkg-card--featured) .pkg-card__divider { background:var(--border) }
.pkg-card--featured .pkg-card__divider { background:rgba(255,255,255,.15) }
.pkg-card__features { display:flex; flex-direction:column; gap:.7rem; margin-bottom:2.25rem }
.pkg-card__feature { display:flex; align-items:center; gap:.7rem; font-size:.84rem }
.pkg-card:not(.pkg-card--featured) .pkg-card__feature { color:var(--text-mid) }
.pkg-card--featured .pkg-card__feature { color:rgba(255,255,255,.75) }
.pkg-card__feature-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0 }
.pkg-card:not(.pkg-card--featured) .pkg-card__feature-dot { background:var(--teal) }
.pkg-card--featured .pkg-card__feature-dot { background:rgba(255,255,255,.5) }
.pkg-card__ctas { display:flex; flex-direction:column; gap:.75rem }
.pkg-card__ctas a { justify-content:center; font-size:.84rem }
.pkg-card--featured .btn-outline { border-color:rgba(255,255,255,.3); color:#fff }
.pkg-card--featured .btn-outline::after { background:rgba(255,255,255,.12) }

/* ─────────────────────────────────────────────
   PROCESS
───────────────────────────────────────────── */
.process { padding:8rem 0; background:var(--off-white); border-top:1px solid var(--border) }
.process__head { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:end; margin-bottom:5rem }
.process__steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border) }
.pstep { background:var(--white); padding:2.5rem 2rem; position:relative; transition:background .3s }
.pstep:hover { background:var(--teal-pale) }
.pstep__num { font-family:var(--ff-display); font-weight:800; font-size:3.5rem; color:var(--surface); line-height:1; margin-bottom:1.5rem; letter-spacing:-.07em }
.pstep:hover .pstep__num { color:var(--teal-mid) }
.pstep__line { width:24px; height:2.5px; background:var(--teal); border-radius:2px; margin-bottom:1.25rem }
.pstep h4 { font-family:var(--ff-display); font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:.65rem; letter-spacing:-.01em }
.pstep p { font-size:.82rem; line-height:1.7; color:var(--text-mid) }

/* ─────────────────────────────────────────────
   TESTIMONIALS
───────────────────────────────────────────── */
.testimonials { padding:8rem 0; background:var(--white) }
.testi-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:20px; overflow:hidden }
.testi-card { background:var(--white); padding:3rem; transition:background .3s }
.testi-card:hover { background:var(--off-white) }
.testi-card--tall { grid-row:span 2; background:var(--teal-pale) }
.testi-card--tall:hover { background:var(--teal-mid) }
.testi-card__stars { display:flex; gap:3px; margin-bottom:1.5rem }
.testi-card__stars svg { width:13px; height:13px; fill:var(--teal-dark); color:var(--teal-dark) }
.testi-card__quote-mark { font-family:var(--ff-display); font-size:3.5rem; font-weight:800; color:var(--teal-mid); line-height:.7; margin-bottom:.75rem; letter-spacing:-.06em }
.testi-card--tall .testi-card__quote-mark { color:var(--teal) }
.testi-card__body { font-family:var(--ff-italic); font-style:italic; font-size:1.05rem; line-height:1.7; color:var(--text); margin-bottom:2rem }
.testi-card--tall .testi-card__body { font-size:1.3rem }
.testi-card__author { display:flex; align-items:center; gap:.85rem }
.testi-card__avatar { width:42px; height:42px; border-radius:50%; background:var(--teal); display:flex; align-items:center; justify-content:center; font-family:var(--ff-display); font-weight:800; font-size:.85rem; color:#fff; flex-shrink:0 }
.testi-card--tall .testi-card__avatar { background:var(--teal-dark) }
.testi-card__name { font-family:var(--ff-display); font-size:.9rem; font-weight:700; color:var(--ink); margin-bottom:.15rem; letter-spacing:-.01em }
.testi-card__co { font-size:.73rem; color:var(--text-light) }
.testi-card__cs { display:inline-flex; align-items:center; gap:.35rem; font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--teal-dark); margin-top:.4rem; transition:gap .2s }
.testi-card__cs:hover { gap:.55rem }
.right-column { display:flex; flex-direction:column; gap:1px; background:var(--border) }

/* ─────────────────────────────────────────────
   KPIs
───────────────────────────────────────────── */
.kpis { padding:8rem 0; background:var(--off-white); border-top:1px solid var(--border) }
.kpis__layout { display:grid; grid-template-columns:1fr 1.6fr; gap:7rem; align-items:start }
.kpis__sidebar { position:sticky; top:7rem }
.kpis__list { display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:16px; overflow:hidden }
.kpi-item { background:var(--white); padding:2.5rem; transition:background .3s; position:relative }
.kpi-item:hover { background:var(--teal-pale) }
.kpi-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--teal); opacity:0; transition:opacity .3s }
.kpi-item:hover::before { opacity:1 }
.kpi-item__num { font-family:var(--ff-display); font-size:2rem; font-weight:800; color:var(--teal-dark); letter-spacing:-.05em; line-height:1; margin-bottom:.6rem }
.kpi-item h3 { font-family:var(--ff-display); font-size:1.1rem; font-weight:700; color:var(--ink); margin-bottom:.6rem; letter-spacing:-.02em }
.kpi-item p { font-size:.84rem; line-height:1.78; color:var(--text-mid); margin:0 }

/* ─────────────────────────────────────────────
   BLOG
───────────────────────────────────────────── */
.blog { padding:8rem 0; background:var(--white) }
.blog__head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:3.5rem; gap:2rem }
.blog__grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:1.5rem }
.article-card { border-radius:20px; overflow:hidden; border:1px solid var(--border); background:var(--white); transition:transform .3s var(--ease), box-shadow .3s var(--ease) }
.article-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md) }
.article-card__img { height:200px; background:linear-gradient(135deg, var(--teal-deep) 0%, var(--teal-dark) 100%); position:relative; display:flex; align-items:flex-end; padding:1.25rem }
.article-card--lead .article-card__img { height:240px }
.article-card__img-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--ff-display); font-size:3.5rem; font-weight:800; color:rgba(255,255,255,.07); letter-spacing:-.08em; pointer-events:none }
.article-card__cat { font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:rgba(255,255,255,.15); color:#fff; padding:.3rem .75rem; border-radius:50px; backdrop-filter:blur(6px); position:relative; z-index:1 }
.article-card__body { padding:1.75rem }
.article-card__date { font-size:.72rem; color:var(--text-light); margin-bottom:.6rem }
.article-card h3 { font-family:var(--ff-display); font-weight:700; font-size:1.1rem; color:var(--ink); line-height:1.25; letter-spacing:-.02em; margin-bottom:.75rem }
.article-card--lead h3 { font-size:1.35rem }
.article-card p { font-size:.83rem; line-height:1.7; color:var(--text-mid); margin-bottom:1.25rem }
.article-card__link { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700; color:var(--teal-dark); letter-spacing:-.01em; transition:gap .2s }
.article-card__link:hover { gap:.65rem }
.article-card__link svg { width:13px; height:13px }

/* ─────────────────────────────────────────────
   FAQ
───────────────────────────────────────────── */
.faq { padding:8rem 0; background:var(--off-white); border-top:1px solid var(--border) }
.faq__layout { display:grid; grid-template-columns:1fr 1.5fr; gap:7rem }
.faq__sidebar .t-h2 { margin:1.25rem 0 1.5rem }
.faq__items { display:flex; flex-direction:column }
.faq__item { border-bottom:1px solid var(--border) }
.faq__q { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.6rem 0; cursor:none }
.faq__q h4 { font-family:var(--ff-display); font-size:.98rem; font-weight:700; color:var(--ink); letter-spacing:-.015em; line-height:1.3 }
.faq__toggle { width:28px; height:28px; border:1.5px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .25s, border-color .25s }
.faq__toggle svg { width:12px; height:12px; color:var(--text-mid); transition:transform .3s }
.faq__item.open .faq__toggle { background:var(--teal); border-color:var(--teal) }
.faq__item.open .faq__toggle svg { color:#fff; transform:rotate(45deg) }
.faq__a { overflow:hidden; max-height:0; transition:max-height .4s var(--ease) }
.faq__item.open .faq__a { max-height:250px }
.faq__a p { font-size:.87rem; line-height:1.8; color:var(--text-mid); padding-bottom:1.5rem }

/* ─────────────────────────────────────────────
   CTA SECTION
───────────────────────────────────────────── */
.cta-band {
  padding:8rem 0; background:var(--teal-deep); position:relative; overflow:hidden;
}
.cta-band::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 50%, rgba(91,191,170,.25) 0%, transparent 65%);
  pointer-events:none;
}
.cta-band__ghost { position:absolute; right:-2%; bottom:-10%; font-family:var(--ff-display); font-weight:800; font-size:clamp(8rem,16vw,20rem); color:rgba(255,255,255,.04); letter-spacing:-.07em; pointer-events:none; line-height:1 }
.cta-band__inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; align-items:center; gap:4rem }
.cta-band h2 { color:#fff; margin-bottom:.75rem }
.cta-band p { color:rgba(255,255,255,.65); font-size:1rem; margin:0 }
.cta-band__actions { display:flex; flex-direction:column; gap:.85rem; align-items:stretch; flex-shrink:0; min-width:220px }
.cta-band__actions a { justify-content:center }
.cta-band .btn-white { background:#fff; color:var(--teal-deep); font-family:var(--ff-display); font-size:.88rem; font-weight:700; padding:.875rem 2rem; border-radius:100px; transition:background .25s, transform .25s; cursor:none; display:flex; align-items:center; justify-content:center; gap:.55rem; letter-spacing:-.01em }
.cta-band .btn-white:hover { background:var(--teal-pale); transform:translateY(-2px) }
.cta-band .btn-outline-white { background:transparent; border:1.5px solid rgba(255,255,255,.3); color:#fff; padding:.875rem 2rem; border-radius:100px; font-family:var(--ff-display); font-size:.88rem; font-weight:700; text-align:center; transition:background .25s; cursor:none; display:flex; align-items:center; justify-content:center; letter-spacing:-.01em }
.cta-band .btn-outline-white:hover { background:rgba(255,255,255,.1) }

/* ─────────────────────────────────────────────
   NEWSLETTER
───────────────────────────────────────────── */
.newsletter { background:var(--ink); padding:4rem 0 }
.newsletter__inner { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center }
.newsletter h3 { font-family:var(--ff-display); font-size:1.7rem; font-weight:800; color:#fff; letter-spacing:-.04em; margin-bottom:.4rem }
.newsletter p { font-size:.88rem; color:rgba(255,255,255,.45); margin:0 }
.newsletter__form { display:flex; gap:0; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:100px; padding:.45rem .45rem .45rem 1.5rem; align-items:center }
.newsletter__form input { flex:1; background:none; border:none; outline:none; font-size:.88rem; color:#fff; font-family:var(--ff-body) }
.newsletter__form input::placeholder { color:rgba(255,255,255,.3) }
.newsletter__form button { background:var(--teal); color:#fff; font-family:var(--ff-display); font-size:.82rem; font-weight:700; padding:.7rem 1.5rem; border-radius:100px; border:none; cursor:none; transition:background .25s; letter-spacing:-.01em; white-space:nowrap; flex-shrink:0 }
.newsletter__form button:hover { background:var(--teal-dark) }

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.footer { background:var(--off-white); border-top:1px solid var(--border); padding:5.5rem 0 0 }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:4rem; padding-bottom:4rem; border-bottom:1px solid var(--border) }
.footer__logo { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem }
.footer__logo-mark { width:36px; height:36px; background:var(--teal); border-radius:8px; display:flex; align-items:center; justify-content:center }
.footer__logo-mark svg { width:19px; height:19px; color:#fff }
.footer__logo-name { font-family:var(--ff-display); font-weight:800; font-size:1.15rem; color:var(--ink); letter-spacing:-.04em }
.footer__brand p { font-size:.84rem; line-height:1.8; color:var(--text-light); max-width:300px; margin:0 0 1.75rem }
.footer__social { display:flex; gap:.6rem }
.footer__social a { width:34px; height:34px; border:1px solid var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--white); transition:background .2s, border-color .2s }
.footer__social a:hover { background:var(--teal); border-color:var(--teal) }
.footer__social svg { width:15px; height:15px; color:var(--text-light); transition:color .2s }
.footer__social a:hover svg { color:#fff }

.footer__col-title { font-size:.69rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-light); margin-bottom:1.25rem }
.footer__col ul { display:flex; flex-direction:column; gap:.6rem }
.footer__col ul a { font-size:.84rem; color:var(--text-mid); transition:color .2s }
.footer__col ul a:hover { color:var(--teal-dark) }
.footer__contact { display:flex; flex-direction:column; gap:.75rem }
.footer__contact-item { display:flex; align-items:flex-start; gap:.55rem; font-size:.83rem; color:var(--text-mid) }
.footer__contact-item svg { color:var(--teal); flex-shrink:0; margin-top:.1rem; width:14px; height:14px }
.footer__contact-item a { color:var(--text-mid); transition:color .2s }
.footer__contact-item a:hover { color:var(--teal-dark) }
.footer__bottom { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.5rem 0; flex-wrap:wrap }
.footer__copy { font-size:.74rem; color:var(--text-light) }
.footer__legal { display:flex; gap:1.5rem }
.footer__legal a { font-size:.73rem; color:var(--text-light); transition:color .2s }
.footer__legal a:hover { color:var(--teal-dark) }

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media(max-width:1100px){
  .hero__inner { grid-template-columns:1fr }
  .hero__visual { display:none }
  .hero-stats__grid { grid-template-columns:1fr 1fr }
  .hero-stat { padding:1.5rem; text-align:left; border-right:none; border-bottom:1px solid rgba(255,255,255,.08) }
  .value__inner { grid-template-columns:1fr }
  .packages__head { grid-template-columns:1fr }
  .packages__grid { grid-template-columns:1fr }
  .process__steps { grid-template-columns:1fr 1fr }
  .testi-layout { grid-template-columns:1fr }
  .testi-card--tall { grid-row:auto }
  .kpis__layout { grid-template-columns:1fr }
  .kpis__sidebar { position:static }
  .blog__grid { grid-template-columns:1fr }
  .faq__layout { grid-template-columns:1fr; gap:3rem }
  .cta-band__inner { grid-template-columns:1fr }
  .newsletter__inner { grid-template-columns:1fr }
  .footer__grid { grid-template-columns:1fr 1fr }
}
@media(max-width:768px){
  html { cursor:auto }
  #cursor, #cursor-ring { display:none }
  .topbar__nav { display:none }
  .nav__links { display:none }
  .nav__phone { display:none }
  .contact-bar__grid { grid-template-columns:1fr 1fr }
  .process__steps { grid-template-columns:1fr }
  .footer__grid { grid-template-columns:1fr }
  .cta-band__actions { min-width:auto; width:100% }
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}