/* ─────────────────────────────────────────
   DESIGN SYSTEM
───────────────────────────────────────── */
:root {
  --teal:   #00BFC7;
  --blue:   #2159E0;
  --grad:   linear-gradient(120deg, #00BFC7 0%, #2159E0 100%);
  --ease:   cubic-bezier(.22,1,.36,1);
  --fh:     'Outfit', sans-serif;
  --fb:     'Plus Jakarta Sans', sans-serif;
}
[data-theme="dark"] {
  --bg:      #080B13;
  --bg2:     #0C1020;
  --bg3:     #111827;
  --surf:    #161D2E;
  --bdr:     rgba(255,255,255,0.06);
  --bdr2:    rgba(255,255,255,0.12);
  --tx:      #E8EAF6;
  --tx2:     #6B7A99;
  --tx3:     #8A96B0;
}
[data-theme="light"] {
  --bg:      #F8F9FE;
  --bg2:     #F0F2FC;
  --bg3:     #E8EBF8;
  --surf:    #FFFFFF;
  --bdr:     rgba(0,0,0,0.07);
  --bdr2:    rgba(0,0,0,0.14);
  --tx:      #0C1020;
  --tx2:     #5A6480;
  --tx3:     #7A8499;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  cursor: none;
  transition: background .35s var(--ease), color .35s var(--ease);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit }
button { font-family: var(--fb); cursor: none; border: none; background: none }
img { display: block; max-width: 100% }
::selection { background: rgba(0,191,199,.2); color: var(--tx) }

/* ─────────────────────────────────────────
   CURSOR
───────────────────────────────────────── */
#cdot {
  position:fixed; width:6px; height:6px;
  background:var(--teal); border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .15s, height .15s, opacity .2s;
}
#cring {
  position:fixed; width:36px; height:36px;
  border:1px solid rgba(0,191,199,.45);
  border-radius:50%; pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:width .2s var(--ease), height .2s var(--ease), border-color .2s;
}
.cursor-hover #cdot { width:0; height:0; opacity:0 }
.cursor-hover #cring { width:52px; height:52px; border-color:var(--teal); border-width:1.5px }

/* ─────────────────────────────────────────
   SCROLL PROGRESS
───────────────────────────────────────── */
#pgbar {
  position:fixed; top:0; left:0; height:1.5px;
  background:var(--grad); width:0%; z-index:1000;
  transition:width .08s linear;
}

/* ─────────────────────────────────────────
   UTILITIES
───────────────────────────────────────── */
.wrap { max-width:1120px; margin:0 auto; padding:0 32px }
.sec  { padding:120px 0; position:relative; z-index:1 }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fb); font-size:11px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; color:var(--teal);
  margin-bottom:20px;
}
.eyebrow::before { content:''; width:18px; height:1px; background:var(--teal) }

.h2 {
  font-family:var(--fh); font-weight:600;
  font-size:clamp(36px, 4.5vw, 58px);
  line-height:1.1; letter-spacing:-1.5px;
  margin-bottom:18px; color:var(--tx);
}
.lead {
  font-size:17px; color:var(--tx2); line-height:1.8;
  max-width:500px; font-weight:400;
}

.g-text {
  background:var(--grad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 28px; border-radius:7px;
  font-family:var(--fb); font-size:14px; font-weight:600;
  letter-spacing:.2px; cursor:none;
  transition:all .25s var(--ease); position:relative; overflow:hidden;
  white-space:nowrap;
}
.btn-p {
  background:var(--grad); color:#fff;
  box-shadow:0 2px 20px rgba(0,191,199,.2);
}
.btn-p:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,191,199,.35) }
.btn-g {
  background:var(--surf); color:var(--tx);
  border:1px solid var(--bdr2);
}
.btn-g:hover { border-color:var(--teal); color:var(--teal); transform:translateY(-2px) }

/* CARDS */
.card {
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:14px; transition:all .3s var(--ease);
}
.card:hover { border-color:var(--bdr2); box-shadow:0 16px 48px rgba(0,0,0,.2) }

/* CHIP */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(0,191,199,.08); border:1px solid rgba(0,191,199,.18);
  border-radius:100px; padding:5px 14px;
  font-size:12px; font-weight:600; color:var(--teal); letter-spacing:.3px;
}

/* REVEAL */
.rv {
  opacity:0; transform:translateY(28px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.rv.in { opacity:1; transform:none }
.rv-l {
  opacity:0; transform:translateX(-28px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.rv-l.in { opacity:1; transform:none }
.rv-r {
  opacity:0; transform:translateX(28px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.rv-r.in { opacity:1; transform:none }

/* ─────────────────────────────────────────
   NAV
───────────────────────────────────────── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:18px 0;
  background:rgba(8,11,19,.72);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--bdr);
  transition:padding .3s var(--ease), background .3s;
}
[data-theme="light"] #nav { background:rgba(248,249,254,.8) }
#nav.scrolled { padding:13px 0 }
.nav-in {
  display:flex; align-items:center; justify-content:space-between;
  max-width:1120px; margin:0 auto; padding:0 32px;
}
.nav-logo { display:flex; align-items:center }
.nav-menu { display:flex; align-items:center; gap:8px }
.nav-menu a {
  padding:7px 14px; border-radius:6px;
  font-size:13.5px; font-weight:500; color:var(--tx2);
  transition:all .2s;
}
.nav-menu a:hover { color:var(--tx); background:var(--surf) }
.nav-r { display:flex; align-items:center; gap:10px }
.tbtn {
  width:36px; height:36px; border-radius:8px;
  background:var(--surf); border:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; cursor:none;
  transition:all .25s var(--ease);
}
.tbtn:hover { border-color:var(--teal) }
.nav-cta { padding:9px 20px; font-size:13.5px }
.ham {
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0; border-radius:11px;
  background:rgba(0,191,199,.10); border:1px solid rgba(0,191,199,.55);
  box-shadow:0 0 0 3px rgba(0,191,199,.06);
}
.ham span {
  display:block; width:24px; height:2.5px;
  background:var(--tx); border-radius:3px; transition:all .3s;
}
.ham:hover, .ham:focus-visible {
  background:rgba(0,191,199,.18); border-color:var(--teal);
  outline:none;
}
.mob {
  display:none; position:fixed; top:65px; left:0; right:0;
  background:var(--bg2); border-bottom:1px solid var(--bdr);
  padding:24px 32px; z-index:499;
  flex-direction:column; gap:4px;
}
.mob.open { display:flex }
.mob a {
  padding:11px 14px; border-radius:8px;
  font-size:16px; font-weight:500; color:var(--tx);
  transition:background .2s;
}
.mob a:hover { background:var(--surf) }

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
#hero {
  min-height:100vh; display:flex; align-items:center;
  padding-top:80px; overflow:hidden; position:relative;
}
/* Mesh */
.mesh {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 75% 15%, rgba(0,191,199,.11) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 15% 85%, rgba(33,89,224,.09) 0%, transparent 65%),
    radial-gradient(ellipse 35% 30% at 85% 75%, rgba(0,191,199,.06) 0%, transparent 55%);
  animation:mesh 14s ease-in-out infinite alternate;
}
@keyframes mesh {
  0%   { opacity:.8; transform:scale(1) }
  100% { opacity:1;  transform:scale(1.08) }
}
/* Grid */
.hgrid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, black 20%, transparent 75%);
}
.hero-inner {
  display:grid; grid-template-columns:1fr 1fr;
  gap:72px; align-items:center; position:relative; z-index:2;
}
.hero-tag { margin-bottom:28px }
.hero-h1 {
  font-family:var(--fh); font-weight:600;
  font-size:clamp(44px, 5.5vw, 76px);
  line-height:1.06; letter-spacing:-2.5px;
  margin-bottom:22px; color:var(--tx);
}
.hero-h1 em { font-style:normal }
/* Kinetic text */
.kin {
  display:inline-block; overflow:hidden;
  vertical-align:bottom; height:1.08em;
}
.kin-list {
  display:flex; flex-direction:column;
  animation:kin 9s steps(1) infinite;
}
@keyframes kin {
  0%,22%  { transform:translateY(0) }
  25%,47% { transform:translateY(-1.08em) }
  50%,72% { transform:translateY(-2.16em) }
  75%,97% { transform:translateY(-3.24em) }
  100%    { transform:translateY(0) }
}
.kin-w {
  height:1.08em; display:flex; align-items:center;
  white-space:nowrap;
  /* Solid fallback first */
  color: var(--teal);
  /* Gradient upgrade for supporting browsers */
  background:var(--grad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}
.hero-sub {
  font-size:17px; color:var(--tx2); line-height:1.8;
  max-width:460px; margin-bottom:40px; font-weight:400;
}
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:56px }
.hero-metrics {
  display:flex; gap:36px; padding-top:40px;
  border-top:1px solid var(--bdr);
}
.hm-n {
  font-family:var(--fh); font-weight:600;
  font-size:32px; line-height:1;
  letter-spacing:-1px;
}
.hm-l { font-size:12px; color:var(--tx2); margin-top:4px; font-weight:500; letter-spacing:.3px }

/* BROWSER MOCK */
.hero-vis { position:relative }
.hero-vis-inner {
  animation:bob 8s ease-in-out infinite;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.5));
}
@keyframes bob {
  0%,100% { transform:translateY(0) rotate(-.3deg) }
  50%      { transform:translateY(-12px) rotate(.3deg) }
}
.brow {
  background:var(--surf); border:1px solid var(--bdr2);
  border-radius:14px; overflow:hidden;
}
.brow-bar {
  background:var(--bg3); padding:12px 16px;
  display:flex; align-items:center; gap:12px;
  border-bottom:1px solid var(--bdr);
}
.bdots { display:flex; gap:6px }
.bdots span { width:10px; height:10px; border-radius:50% }
.bdots span:nth-child(1) { background:#FF5F57 }
.bdots span:nth-child(2) { background:#FFBD2E }
.bdots span:nth-child(3) { background:#28C840 }
.burl {
  flex:1; background:var(--bg2); border-radius:5px;
  padding:5px 12px; font-size:11px; color:var(--tx2); font-family:monospace;
}
.brow-body { padding:24px }
.ml { height:7px; border-radius:3.5px; margin-bottom:8px; background:var(--bdr) }
.ml.a { background:var(--grad); width:48% }
.ml.m { width:72% }
.ml.s { width:36% }
.ml.l { width:88% }
.mcta {
  height:34px; width:120px; border-radius:7px;
  background:var(--grad); margin:16px 0 20px; opacity:.9;
}
.mcards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px }
.mcard {
  height:68px; background:var(--bg3);
  border-radius:9px; border:1px solid var(--bdr);
}
/* Floating badge */
.fbadge {
  position:absolute; top:-20px; right:-20px;
  background:var(--grad); border-radius:12px;
  padding:16px 20px; z-index:10;
  box-shadow:0 16px 40px rgba(0,191,199,.3);
  animation:badge 6s ease-in-out infinite;
}
@keyframes badge {
  0%,100% { transform:translateY(0) rotate(1.5deg) }
  50%      { transform:translateY(-8px) rotate(-1deg) }
}
.fb-n {
  font-family:var(--fh); font-weight:700;
  font-size:30px; color:#fff; line-height:1;
}
.fb-l { font-size:11px; color:rgba(255,255,255,.7); font-weight:500; margin-top:2px }

/* ─────────────────────────────────────────
   TICKER
───────────────────────────────────────── */
.ticker {
  background:var(--bg2);
  border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr);
  padding:16px 0; overflow:hidden; position:relative; z-index:1;
}
.ticker-track {
  display:flex; gap:48px; width:max-content;
  animation:tick 28s linear infinite;
}
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ti {
  display:flex; align-items:center; gap:10px;
  font-size:12px; font-weight:600; color:var(--tx2);
  letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap;
}
.ti-dot { width:3px; height:3px; border-radius:50%; background:var(--teal); flex-shrink:0 }

/* ─────────────────────────────────────────
   SERVICES
───────────────────────────────────────── */
#services { background:var(--bg2) }
.srv-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; margin-top:64px;
}
.srv-card {
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:14px; padding:36px 28px;
  transition:all .3s var(--ease); position:relative; overflow:hidden;
}
.srv-card::after {
  content:''; position:absolute;
  top:0; left:0; right:0; height:2px;
  background:var(--grad); transform:scaleX(0);
  transition:transform .35s var(--ease); transform-origin:left;
}
.srv-card:hover { transform:translateY(-5px); border-color:var(--bdr2) }
.srv-card:hover::after { transform:scaleX(1) }
.srv-icon {
  width:46px; height:46px; border-radius:10px;
  background:rgba(0,191,199,.08); border:1px solid rgba(0,191,199,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:20px;
  transition:transform .3s var(--ease);
}
.srv-card:hover .srv-icon { transform:scale(1.1) rotate(-6deg) }
.srv-t {
  font-family:var(--fh); font-weight:600;
  font-size:17px; margin-bottom:10px; letter-spacing:-.3px;
}
.srv-d { color:var(--tx2); font-size:14px; line-height:1.75 }

/* ─────────────────────────────────────────
   PORTFOLIO — PROOF SECTION
───────────────────────────────────────── */
#portfolio { background:var(--bg) }
.port-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:20px; margin-top:64px;
}
.port-card {
  border-radius:14px; overflow:hidden;
  background:var(--surf); border:1px solid var(--bdr);
  transition:all .35s var(--ease);
}
.port-card:hover {
  transform:translateY(-6px);
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  border-color:var(--bdr2);
}
.port-thumb {
  height:210px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.pt-inner { display:none } /* legacy, replaced by .port-phone */
.port-phone {
  width:118px; height:198px; position:relative;
  background:#0a0a0a; border-radius:18px;
  border:2px solid #1f1f1f; padding:5px;
  box-shadow:0 10px 28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .35s var(--ease);
}
.port-phone::after {
  content:""; position:absolute; top:8px; left:50%;
  transform:translateX(-50%); width:32px; height:4px;
  background:#0a0a0a; border-radius:3px; z-index:2;
}
.port-card:hover .port-phone { transform:scale(1.06) translateY(-2px); }
.port-phone-screen {
  width:100%; height:100%; border-radius:12px;
  background-size:cover; background-position:top center;
  background-color:#000; overflow:hidden;
}
.port-ov {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(8,11,19,.88) 0%,transparent 55%);
  display:flex; align-items:flex-end; padding:20px;
  opacity:0; transition:opacity .3s var(--ease);
}
.port-card:hover .port-ov { opacity:1 }
.port-ov-link {
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--teal);
  transition:gap .2s;
}
.port-ov-link:hover { gap:10px }
.port-badge {
  position:absolute; top:14px; right:14px;
  background:rgba(0,191,199,.12); border:1px solid rgba(0,191,199,.25);
  color:var(--teal); font-size:10px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  padding:4px 10px; border-radius:100px;
}
.port-info { padding:24px }
.port-t { font-family:var(--fh); font-weight:600; font-size:18px; letter-spacing:-.3px; margin-bottom:6px }
.port-d { color:var(--tx2); font-size:13.5px; line-height:1.65; margin-bottom:14px }

/* Feature tags */
.port-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px }
.port-tag {
  font-size:11px; font-weight:600; color:var(--tx2);
  background:var(--bg2); border:1px solid var(--bdr);
  border-radius:100px; padding:3px 10px; letter-spacing:.2px;
}
/* Agency comparison bar */
.port-value {
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(120deg,rgba(0,191,199,.05),rgba(33,89,224,.05));
  border:1px solid rgba(0,191,199,.15);
  border-radius:9px; padding:12px 16px; gap:12px;
}
.pv-label { font-size:11px; color:var(--tx2); font-weight:600; text-transform:uppercase; letter-spacing:1px }
.pv-agency { font-size:13px; color:var(--tx2); text-decoration:line-through; margin-top:2px }
.pv-ours { font-family:var(--fh); font-weight:600; font-size:15px; color:var(--teal); white-space:nowrap }
.pv-divider { width:1px; height:36px; background:var(--bdr); flex-shrink:0 }

/* AI disclaimer banner */
.ai-banner {
  margin-top:56px;
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:14px; padding:36px 40px;
  display:grid; grid-template-columns:1fr auto;
  gap:32px; align-items:center;
}
.ai-b-title {
  font-family:var(--fh); font-weight:600; font-size:22px;
  letter-spacing:-.5px; margin-bottom:10px;
}
.ai-b-text { color:var(--tx2); font-size:15px; line-height:1.75; max-width:560px }
.ai-b-text strong { color:var(--tx); font-weight:600 }
@media(max-width:700px){
  .ai-banner { grid-template-columns:1fr }
  .ai-banner .btn { width:100%; justify-content:center }
}


/* ─────────────────────────────────────────
   ABOUT
───────────────────────────────────────── */
#about { background:var(--bg) }
.about-g {
  display:grid; grid-template-columns:1fr 1.4fr;
  gap:80px; align-items:center;
}
.about-img-wrap {
  position:relative;
}
.about-img-frame {
  border-radius:20px; overflow:hidden;
  border:1px solid var(--bdr2);
  box-shadow:0 32px 80px rgba(0,0,0,.4);
  position:relative;
}
.about-img-frame img {
  width:100%; display:block;
  filter:contrast(1.05) brightness(.95);
  transition:transform .6s var(--ease);
}
.about-img-frame:hover img { transform:scale(1.03) }
/* Gradient overlay bottom */
.about-img-frame::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:40%;
  background:linear-gradient(to top, rgba(8,11,19,.7), transparent);
  pointer-events:none;
}
/* Floating vet badge */
.about-vet-chip {
  position:absolute; bottom:-18px; right:-18px;
  background:var(--grad); border-radius:12px;
  padding:14px 20px;
  box-shadow:0 12px 36px rgba(0,191,199,.3);
  display:flex; align-items:center; gap:12px;
  animation:badge 6s ease-in-out infinite;
}
.avc-flag { font-size:24px }
.avc-t { font-family:var(--fh); font-weight:600; font-size:14px; color:#fff; line-height:1.2 }
.avc-s { font-size:11px; color:rgba(255,255,255,.75); margin-top:2px }
/* Content side */
.about-content { display:flex; flex-direction:column; gap:0 }
.about-body {
  display:flex; flex-direction:column; gap:18px;
  margin-bottom:36px;
}
.about-body p {
  font-size:16px; color:var(--tx2); line-height:1.85;
}
.about-body p strong { color:var(--tx); font-weight:600 }
.about-sig {
  display:flex; align-items:center; gap:16px;
  padding-top:28px; border-top:1px solid var(--bdr);
}
.about-sig-line {
  width:32px; height:1.5px; background:var(--grad); flex-shrink:0;
}
.about-sig-text {
  font-size:13px; color:var(--tx2); font-style:italic; line-height:1.6;
}
.about-sig-text strong { color:var(--tx); font-style:normal; font-weight:600 }
/* Credential pills */
.about-creds {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px;
}
.cred {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:100px; padding:6px 14px;
  font-size:12px; font-weight:600; color:var(--tx2);
  transition:all .25s var(--ease);
}
.cred:hover { border-color:var(--teal); color:var(--teal) }
.cred-dot { width:6px; height:6px; border-radius:50%; background:var(--teal); flex-shrink:0 }
@media(max-width:900px){
  .about-g { grid-template-columns:1fr; gap:48px }
  .about-img-wrap { max-width:360px; margin:0 auto }
}

/* ─────────────────────────────────────────
   WHY
───────────────────────────────────────── */
#why { background:var(--bg2) }
.why-g { display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:center }
.why-items { margin-top:44px; display:flex; flex-direction:column; gap:28px }
.wi { display:flex; gap:18px; align-items:flex-start }
.wi-chk {
  width:34px; height:34px; min-width:34px; border-radius:9px;
  background:rgba(0,191,199,.08); border:1px solid rgba(0,191,199,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--teal); margin-top:3px;
  transition:all .25s var(--ease); flex-shrink:0;
}
.wi:hover .wi-chk { background:var(--teal); color:#fff; transform:scale(1.08) }
.wi-t { font-weight:600; font-size:16px; margin-bottom:4px; letter-spacing:-.2px }
.wi-d { color:var(--tx2); font-size:14px; line-height:1.75 }
.why-vis { display:flex; flex-direction:column; gap:14px }
.vet-box {
  display:flex; align-items:center; gap:16px;
  background:linear-gradient(120deg,rgba(0,191,199,.07),rgba(33,89,224,.07));
  border:1px solid rgba(0,191,199,.18); border-radius:14px; padding:24px;
}
.vet-flag { font-size:32px }
.vet-t { font-weight:700; font-size:15px; letter-spacing:-.2px; margin-bottom:3px }
.vet-s { color:var(--tx2); font-size:13px }
.proc-box {
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:14px; padding:28px;
}
.proc-hd { font-family:var(--fh); font-weight:600; font-size:16px; letter-spacing:-.3px; margin-bottom:20px }
.proc-steps { display:flex; flex-direction:column }
.pstep {
  display:flex; gap:14px; align-items:flex-start;
  padding:15px 0; border-bottom:1px solid var(--bdr);
  transition:padding-left .2s var(--ease);
}
.pstep:last-child { border-bottom:none }
.pstep:hover { padding-left:6px }
.ps-n {
  width:26px; height:26px; min-width:26px; border-radius:50%;
  background:var(--grad); display:flex; align-items:center;
  justify-content:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0;
}
.ps-t { font-weight:600; font-size:14px; margin-bottom:2px; letter-spacing:-.1px }
.ps-d { color:var(--tx2); font-size:13px }

/* ─────────────────────────────────────────
   STATS
───────────────────────────────────────── */
#stats { background:var(--bg); padding:80px 0 }
.stats-g {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.stat-card {
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:14px; padding:36px 24px; text-align:center;
  transition:all .3s var(--ease);
}
.stat-card:hover {
  border-color:rgba(0,191,199,.25);
  transform:translateY(-4px);
}
.stat-n {
  font-family:var(--fh); font-weight:600;
  font-size:48px; line-height:1; letter-spacing:-2px;
  background:var(--grad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; margin-bottom:8px;
}
.stat-l {
  font-size:12px; color:var(--tx2); font-weight:600;
  text-transform:uppercase; letter-spacing:1px;
}

/* Package cards */
.pr-card {
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:14px; padding:40px 32px; position:relative;
  transition:all .35s var(--ease);
}
.pr-card:hover { transform:translateY(-5px) }
.pr-card.hot {
  background:linear-gradient(160deg,#111D38,#162040);
  border-color:rgba(0,191,199,.35);
  box-shadow:0 20px 60px rgba(0,191,199,.1);
  transform:scale(1.03);
}
.pr-card.hot:hover { transform:scale(1.03) translateY(-5px) }
.pr-pop {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; padding:5px 16px; border-radius:100px; white-space:nowrap;
}
.pr-tier {
  font-size:11px; font-weight:700; color:var(--teal);
  letter-spacing:2.5px; text-transform:uppercase; margin-bottom:14px;
}
.pr-price {
  font-family:var(--fh); font-weight:600;
  font-size:52px; line-height:1; letter-spacing:-2px; margin-bottom:4px;
}
.pr-price sup { font-size:20px; font-weight:400; color:var(--tx2); vertical-align:super }
.pr-dep { color:var(--tx2); font-size:13px; margin-bottom:28px }
.pr-div { height:1px; background:var(--bdr); margin:24px 0 }
.pr-feats { list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:34px }
.pr-feats li {
  font-size:14px; color:var(--tx2);
  display:flex; align-items:flex-start; gap:10px;
}
.pr-feats li.on { color:var(--tx) }
.pr-feats li::before { content:'✓'; color:var(--teal); font-weight:700; min-width:14px; flex-shrink:0 }
.pr-feats li.off::before { content:'—'; color:var(--bdr2) }

/* ═══════ PAYMENT OPTIONS CARD ═══════ */
.pay-options {
  background:linear-gradient(135deg, rgba(0,191,199,0.04) 0%, rgba(33,89,224,0.04) 100%);
  border:1px solid var(--bdr);
  border-radius:20px;
  padding:44px 40px;
  position:relative;
  overflow:hidden;
}
.pay-options::before {
  content:''; position:absolute; top:-40%; right:-20%;
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(0,191,199,0.08), transparent 70%);
  pointer-events:none;
}
.pay-head { margin-bottom:32px; position:relative; z-index:1 }
.pay-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  position:relative; z-index:1;
}
.pay-card {
  background:var(--bg2);
  border:1px solid var(--bdr2);
  border-radius:14px;
  padding:24px 22px;
  position:relative;
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.pay-card:hover {
  transform:translateY(-3px);
  border-color:var(--teal);
}
.pay-card.pay-featured {
  border-color:var(--teal);
  background:linear-gradient(135deg, var(--bg2) 0%, rgba(0,191,199,0.06) 100%);
  box-shadow:0 8px 32px rgba(0,191,199,0.12);
}
.pay-badge {
  position:absolute; top:-10px; right:16px;
  background:var(--grad);
  color:#fff; font-weight:600; font-size:10px;
  padding:4px 10px; border-radius:20px;
  letter-spacing:.5px; text-transform:uppercase;
}
.pay-amt {
  font-family:var(--fh); font-weight:700;
  font-size:44px; letter-spacing:-1.5px;
  line-height:1; margin-bottom:4px;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.pay-amt sup { font-size:22px; font-weight:400; vertical-align:super }
.pay-pct { font-size:22px; font-weight:500 }
.pay-label {
  font-family:var(--fh); font-weight:600;
  font-size:14px; color:var(--tx);
  text-transform:uppercase; letter-spacing:1.2px;
  margin-bottom:14px;
}
.pay-desc {
  font-size:13.5px; line-height:1.6;
  color:var(--tx2); margin-bottom:14px;
  min-height:64px;
}
.pay-avail {
  font-size:11.5px; color:var(--teal);
  font-weight:600; text-transform:uppercase;
  letter-spacing:.8px;
  padding-top:12px; border-top:1px solid var(--bdr);
}
.pay-footnote {
  margin-top:24px; text-align:center;
  font-size:12.5px; color:var(--tx2); font-style:italic;
  position:relative; z-index:1;
}
@media(max-width:860px){
  .pay-options { padding:32px 24px }
  .pay-grid { grid-template-columns:1fr; gap:16px }
  .pay-desc { min-height:auto }
}
@media(max-width:960px){
  .pr-card.hot { transform:none }
  .pr-card.hot:hover { transform:translateY(-5px) }
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns:1fr !important }
}

/* ─────────────────────────────────────────
   PRICING — VALUE ANCHORED
───────────────────────────────────────── */
#pricing { background:var(--bg2) }
.price-hd { text-align:center; margin-bottom:64px }
.price-hd .lead { margin:0 auto }
/* Starting from banner */
.price-banner {
  background:linear-gradient(120deg,rgba(0,191,199,.07),rgba(33,89,224,.07));
  border:1px solid rgba(0,191,199,.18);
  border-radius:14px; padding:32px 40px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:48px;
}
.pb-left { display:flex; flex-direction:column; gap:4px }
.pb-eyebrow { font-size:11px; font-weight:700; color:var(--teal); letter-spacing:2px; text-transform:uppercase }
.pb-text { font-family:var(--fh); font-weight:600; font-size:22px; letter-spacing:-.5px }
.pb-sub { color:var(--tx2); font-size:14px }
.pb-price {
  font-family:var(--fh); font-weight:600;
  font-size:52px; letter-spacing:-2px;
  background:var(--grad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; white-space:nowrap;
}
.pb-price span { font-size:20px; font-weight:400; color:var(--tx2); -webkit-text-fill-color:var(--tx2) }
/* Complexity drivers */
.complexity-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; margin-bottom:52px;
}
.cx-card {
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:14px; padding:28px 24px;
  transition:all .3s var(--ease);
}
.cx-card:hover { border-color:var(--bdr2); transform:translateY(-4px) }
.cx-icon { font-size:22px; margin-bottom:14px }
.cx-title { font-family:var(--fh); font-weight:600; font-size:16px; letter-spacing:-.3px; margin-bottom:10px }
.cx-items { list-style:none; display:flex; flex-direction:column; gap:7px }
.cx-items li {
  font-size:13px; color:var(--tx2);
  display:flex; align-items:center; gap:8px;
}
.cx-items li::before { content:'·'; color:var(--teal); font-size:18px; line-height:0 }
/* Price table */
.price-table {
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:14px; overflow:hidden; margin-bottom:52px;
}
.pt-header {
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
  background:var(--bg3); border-bottom:1px solid var(--bdr);
  padding:14px 24px; gap:16px;
}
.pt-hcell {
  font-size:11px; font-weight:700; color:var(--tx2);
  text-transform:uppercase; letter-spacing:1.5px;
}
.pt-row {
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
  padding:18px 24px; gap:16px;
  border-bottom:1px solid var(--bdr);
  transition:background .2s;
  align-items:center;
}
.pt-row:last-child { border-bottom:none }
.pt-row:hover { background:rgba(0,191,199,.03) }
.pt-name { font-weight:600; font-size:14px }
.pt-sub { font-size:12px; color:var(--tx2); margin-top:2px }
.pt-cell { font-size:14px; color:var(--tx2) }
.pt-cell.price { font-family:var(--fh); font-weight:600; font-size:16px; color:var(--tx) }
.pt-cell.agency { text-decoration:line-through; color:var(--tx3) }
.pt-cell.ours { color:var(--teal); font-weight:600 }
/* Quote CTA */
.quote-cta {
  background:var(--bg); border:1px solid var(--bdr);
  border-radius:14px; padding:40px;
  display:grid; grid-template-columns:1fr auto;
  gap:32px; align-items:center;
}
.qc-title { font-family:var(--fh); font-weight:600; font-size:24px; letter-spacing:-.5px; margin-bottom:8px }
.qc-text { color:var(--tx2); font-size:15px; line-height:1.75 }
.qc-text strong { color:var(--tx) }
@media(max-width:768px){
  .complexity-grid { grid-template-columns:1fr }
  .pt-header,.pt-row { grid-template-columns:1fr 1fr; }
  .pt-header .pt-hcell:nth-child(3),
  .pt-header .pt-hcell:nth-child(4),
  .pt-row .pt-cell:nth-child(3),
  .pt-row .pt-cell:nth-child(4) { display:none }
  .price-banner { flex-direction:column; align-items:flex-start }
  .quote-cta { grid-template-columns:1fr }
  .quote-cta .btn { width:100%; justify-content:center }
}

/* ─────────────────────────────────────────
   TESTIMONIALS
───────────────────────────────────────── */
#testimonials { background:var(--bg) }
.testi-g { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:64px }
.t-card {
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:14px; padding:32px 26px;
  transition:all .3s var(--ease); position:relative; overflow:hidden;
}
.t-card::before {
  content:'\201C'; position:absolute; top:14px; right:22px;
  font-size:72px; font-family:Georgia,serif; color:var(--bdr2);
  line-height:1; pointer-events:none;
}
.t-card:hover { transform:translateY(-5px); border-color:var(--bdr2) }
.t-stars { color:#F59E0B; font-size:12px; letter-spacing:2px; margin-bottom:16px }
.t-q { font-size:14px; color:var(--tx2); line-height:1.8; margin-bottom:24px; font-style:italic }
.t-auth { display:flex; align-items:center; gap:12px }
.t-av {
  width:38px; height:38px; border-radius:50%;
  background:var(--grad); display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:13px; color:#fff; flex-shrink:0;
}
.t-name { font-weight:600; font-size:13.5px; letter-spacing:-.1px }
.t-biz { color:var(--tx2); font-size:12px }

/* ─────────────────────────────────────────
   CONTACT
───────────────────────────────────────── */
#contact { background:var(--bg2) }
.contact-g { display:grid; grid-template-columns:1fr 1.15fr; gap:72px; margin-top:64px; align-items:start }
.c-info { display:flex; flex-direction:column; gap:24px }
.c-lead { font-size:16px; color:var(--tx2); line-height:1.8 }
.c-item { display:flex; gap:14px; align-items:flex-start }
.c-ico {
  width:42px; height:42px; min-width:42px; border-radius:10px;
  background:rgba(0,191,199,.08); border:1px solid rgba(0,191,199,.18);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  transition:all .25s var(--ease);
}
.c-item:hover .c-ico { background:var(--teal) }
.c-t { font-weight:600; font-size:14px; margin-bottom:3px }
.c-v { color:var(--tx2); font-size:13.5px }
.call-card {
  background:linear-gradient(120deg,rgba(0,191,199,.08),rgba(33,89,224,.08));
  border:1px solid rgba(0,191,199,.2); border-radius:14px; padding:28px;
}
.call-t { font-family:var(--fh); font-weight:600; font-size:20px; letter-spacing:-.4px; margin-bottom:8px }
.call-s { color:var(--tx2); font-size:13.5px; line-height:1.7; margin-bottom:22px }
/* FORM */
.cform { display:flex; flex-direction:column; gap:14px }
.fr { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.fg { display:flex; flex-direction:column; gap:7px }
.fg label {
  font-size:11px; font-weight:700; color:var(--tx2);
  letter-spacing:1.5px; text-transform:uppercase;
}
.fg input, .fg select, .fg textarea {
  background:var(--surf); border:1.5px solid var(--bdr2);
  border-radius:9px; padding:13px 15px;
  color:var(--tx); font-family:var(--fb); font-size:14px;
  transition:all .25s var(--ease); outline:none; resize:vertical;
  -webkit-font-smoothing:antialiased;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,191,199,.1);
}
.fg select option { background:var(--bg2) }
.fsub { width:100%; justify-content:center; padding:15px; font-size:15px; margin-top:4px }
#fsuccess {
  display:none; text-align:center;
  background:rgba(0,191,199,.07); border:1px solid rgba(0,191,199,.22);
  border-radius:14px; padding:36px; margin-top:14px;
}
#fsuccess .ok { font-size:36px; margin-bottom:10px }
#fsuccess .ft { font-family:var(--fh); font-weight:600; font-size:22px; margin-bottom:6px }
#fsuccess .fs { color:var(--tx2) }

/* ─────────────────────────────────────────
   SUPPORT / MAINTENANCE
───────────────────────────────────────── */
#support { background:var(--bg2) }
.support-intro { max-width:600px }
.plans-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px; margin-top:64px;
}
.plan-card {
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:14px; padding:40px 32px; position:relative;
  transition:all .35s var(--ease); display:flex; flex-direction:column;
}
.plan-card:hover { transform:translateY(-5px); border-color:var(--bdr2); box-shadow:0 24px 60px rgba(0,0,0,.25) }
.plan-card.plan-featured {
  background:linear-gradient(160deg,#111D38,#162040);
  border-color:rgba(0,191,199,.35);
  box-shadow:0 20px 60px rgba(0,191,199,.1);
  transform:scale(1.03);
}
.plan-card.plan-featured:hover { transform:scale(1.03) translateY(-5px) }
.plan-pop {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; padding:5px 16px; border-radius:100px; white-space:nowrap;
}
.plan-tier {
  font-size:11px; font-weight:700; color:var(--teal);
  letter-spacing:2.5px; text-transform:uppercase; margin-bottom:14px;
}
.plan-price {
  font-family:var(--fh); font-weight:600;
  font-size:52px; line-height:1; letter-spacing:-2px; margin-bottom:4px;
}
.plan-price sup { font-size:20px; font-weight:400; color:var(--tx2); vertical-align:super }
.plan-cadence { color:var(--tx2); font-size:13px; margin-bottom:28px }
.plan-div { height:1px; background:var(--bdr); margin:24px 0 }
.plan-feats {
  list-style:none; display:flex; flex-direction:column;
  gap:12px; margin-bottom:34px; flex:1;
}
.plan-feats li {
  font-size:14px; color:var(--tx2);
  display:flex; align-items:flex-start; gap:10px; line-height:1.55;
}
.plan-feats li.on { color:var(--tx) }
.plan-feats li::before { content:'✓'; color:var(--teal); font-weight:700; min-width:14px; flex-shrink:0; margin-top:1px }
.plan-feats li.section-label-li {
  font-size:11px; font-weight:700; color:var(--teal);
  letter-spacing:1.5px; text-transform:uppercase;
  border-top:1px solid var(--bdr); padding-top:14px; margin-top:4px;
}
.plan-feats li.section-label-li::before { content:''; min-width:0 }
.addons-wrap {
  margin-top:64px;
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:14px; overflow:hidden;
}
.addons-head { padding:28px 32px 0 }
.addons-head .eyebrow { margin-bottom:8px }
.addons-head h3 {
  font-family:var(--fh); font-weight:600;
  font-size:22px; letter-spacing:-.5px; margin-bottom:24px;
}
.addons-table { width:100%; border-collapse:collapse }
.addons-table th, .addons-table td {
  padding:14px 32px; text-align:left;
  border-top:1px solid var(--bdr); font-size:14px;
}
.addons-table th {
  font-size:11px; font-weight:700; color:var(--tx2);
  text-transform:uppercase; letter-spacing:1.5px;
  background:var(--bg3); border-top:none;
}
.addons-table td:nth-child(2) {
  font-family:var(--fh); font-weight:600;
  font-size:15px; color:var(--teal); white-space:nowrap;
}
.addons-table tr:hover td { background:rgba(0,191,199,.03) }
.addons-note {
  padding:20px 32px; color:var(--tx2); font-size:13px;
  border-top:1px solid var(--bdr);
}

.support-note-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px;
}
.support-note-card {
  background:var(--surf); border:1px solid var(--bdr); border-radius:14px; padding:24px 26px;
}
.support-note-card h4 {
  font-family:var(--fh); font-weight:600; font-size:18px; letter-spacing:-.3px; margin-bottom:12px;
}
.support-note-card p, .support-note-card li { color:var(--tx2); font-size:13.5px; line-height:1.75 }
.support-note-card ul { list-style:none; display:flex; flex-direction:column; gap:8px }
.support-note-card li::before { content:'•'; color:var(--teal); font-weight:700; margin-right:8px }
.client-cap {
  margin-top:24px; padding:22px 26px; border-radius:14px;
  background:linear-gradient(120deg,rgba(0,191,199,.08),rgba(33,89,224,.08));
  border:1px solid rgba(0,191,199,.2); color:var(--tx2); font-size:14px; line-height:1.75;
}
.client-cap strong { color:var(--tx) }
@media(max-width:760px){
  .support-note-grid { grid-template-columns:1fr }
}
@media(max-width:960px){
  .plans-grid { grid-template-columns:1fr }
  .plan-card.plan-featured { transform:none }
  .plan-card.plan-featured:hover { transform:translateY(-5px) }
  .addons-table th, .addons-table td { padding:12px 20px }
}

/* ─────────────────────────────────────────
   FAQ
───────────────────────────────────────── */
#faq { background:var(--bg2) }
.faq-grid {
  margin-top:56px; display:flex; flex-direction:column; gap:12px; max-width:780px;
}
.faq-item {
  background:var(--surf); border:1px solid var(--bdr);
  border-radius:12px; overflow:hidden;
  transition:border-color .25s var(--ease);
}
.faq-item:hover { border-color:var(--bdr2) }
.faq-item[open] { border-color:rgba(0,191,199,.25) }
.faq-item summary {
  list-style:none; padding:20px 24px;
  font-family:var(--fh); font-weight:600;
  font-size:16px; letter-spacing:-.2px; color:var(--tx);
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; cursor:none;
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary:hover { color:var(--teal) }
.faq-item[open] summary { color:var(--teal) }
.faq-item summary::after {
  content:'+'; font-size:20px; font-weight:300;
  color:var(--tx2); flex-shrink:0; line-height:1;
  transition:transform .25s var(--ease), color .2s;
}
.faq-item[open] summary::after { transform:rotate(45deg); color:var(--teal) }
.faq-body {
  padding:0 24px 20px; color:var(--tx2);
  font-size:15px; line-height:1.8; border-top:1px solid var(--bdr);
  padding-top:16px;
}
.faq-cta {
  margin-top:40px; color:var(--tx2); font-size:15px;
}
.faq-cta a { color:var(--teal); font-weight:600; transition:opacity .2s }
.faq-cta a:hover { opacity:.75 }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
footer {
  background:var(--bg); border-top:1px solid var(--bdr);
  padding:64px 0 32px; position:relative; z-index:1;
}
.foot-g {
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:48px; margin-bottom:52px;
}
.foot-brand p { color:var(--tx2); font-size:14px; margin-top:16px; line-height:1.75; max-width:250px }
.foot-col-t {
  font-weight:700; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:18px; color:var(--tx);
}
.foot-col a {
  display:block; color:var(--tx2); font-size:14px;
  margin-bottom:10px; transition:color .2s;
}
.foot-col a:hover { color:var(--teal) }
.foot-bot {
  padding-top:24px; border-top:1px solid var(--bdr);
  display:flex; justify-content:space-between;
  align-items:center; gap:16px; flex-wrap:wrap;
}
.foot-copy { color:var(--tx2); font-size:13px }
.foot-leg { display:flex; gap:22px }
.foot-leg a { color:var(--tx2); font-size:13px; transition:color .2s }
.foot-leg a:hover { color:var(--teal) }


/* V8 — BUILDING TRUST */
.lab-link { color:var(--teal)!important; border:1px solid rgba(0,191,199,.22); }
.project-actions { margin-top:16px; padding-top:14px; border-top:1px solid var(--bdr); }
.project-link { color:var(--teal); font-size:13px; font-weight:700; letter-spacing:.2px; }
.project-link:hover { text-decoration:underline; }
.growth-journey { background:var(--bg2); }
.journey-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:56px; }
.journey-step { position:relative; background:var(--surf); border:1px solid var(--bdr); border-radius:14px; padding:28px 22px; min-height:220px; }
.journey-step span { display:inline-flex; width:34px; height:34px; border-radius:50%; align-items:center; justify-content:center; background:var(--grad); color:white; font-size:11px; font-weight:800; margin-bottom:22px; }
.journey-step h3 { font-family:var(--fh); font-size:19px; margin-bottom:10px; }
.journey-step p { color:var(--tx2); font-size:13.5px; line-height:1.7; }
.release-section { background:var(--bg); padding-top:70px; padding-bottom:70px; }
.release-card { display:grid; grid-template-columns:1.3fr .8fr; gap:50px; background:linear-gradient(130deg,rgba(0,191,199,.08),rgba(33,89,224,.08)); border:1px solid rgba(0,191,199,.2); border-radius:18px; padding:46px; }
.release-card h2 { font-family:var(--fh); font-size:38px; line-height:1.1; }
.release-card h3 { color:var(--teal); font-family:var(--fh); font-size:21px; margin:8px 0 16px; }
.release-card p { color:var(--tx2); max-width:650px; }
.release-notes { display:flex; flex-direction:column; gap:12px; justify-content:center; }
.release-notes strong { color:var(--tx); text-transform:uppercase; letter-spacing:1.5px; font-size:11px; }
.release-notes span { color:var(--tx2); font-size:14px; padding:10px 0; border-bottom:1px solid var(--bdr); }
@media(max-width:960px){ .journey-grid{grid-template-columns:1fr 1fr}.release-card{grid-template-columns:1fr} }
@media(max-width:600px){ .journey-grid{grid-template-columns:1fr}.release-card{padding:30px 22px}.release-card h2{font-size:30px} }


/* ─────────────────────────────────────────
   v8.3 — BUILT FOR GROWTH
───────────────────────────────────────── */
.hm-n.words { font-size:22px; letter-spacing:-.4px }

/* Proactive Pulse / connected system visual */
.hero-system {
  position:relative; overflow:hidden;
  background:linear-gradient(145deg,rgba(22,29,46,.96),rgba(8,11,19,.98));
  border:1px solid var(--bdr2); border-radius:18px;
  padding:22px; min-height:420px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.hero-system::after {
  content:''; position:absolute; width:250px; height:250px; border-radius:50%;
  right:-100px; bottom:-120px; background:rgba(0,191,199,.10); filter:blur(18px);
}
.hs-top { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid var(--bdr); position:relative; z-index:1 }
.hs-live { display:flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:1.3px; font-size:10px; font-weight:700; color:var(--tx3) }
.hs-live i { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 0 rgba(0,191,199,.5); animation:hsPulse 2.4s infinite }
.hs-url { font-family:monospace; font-size:10px; color:var(--tx2); background:var(--bg2); border:1px solid var(--bdr); padding:5px 9px; border-radius:6px }
.hs-copy { padding:34px 4px 26px; position:relative; z-index:1 }
.hs-kicker { color:var(--teal); text-transform:uppercase; letter-spacing:1.8px; font-size:10px; font-weight:700 }
.hs-copy h3 { font-family:var(--fh); font-size:34px; line-height:1.05; letter-spacing:-1px; margin:8px 0 12px }
.hs-copy p { color:var(--tx2); font-size:13px; line-height:1.7; max-width:430px }
.system-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; position:relative; padding:12px 0 24px; z-index:1 }
.system-flow::before { content:''; position:absolute; left:12.5%; right:12.5%; top:31px; height:2px; background:linear-gradient(90deg,rgba(0,191,199,.25),#00BFC7,#2159E0,rgba(33,89,224,.25)); background-size:180% 100%; animation:pulseLine 3.4s linear infinite; box-shadow:0 0 18px rgba(0,191,199,.16) }
.sf-node { text-align:center; position:relative; z-index:2 }
.sf-dot { width:16px; height:16px; border-radius:50%; margin:11px auto 14px; display:block; background:var(--bg); border:3px solid var(--teal); box-shadow:0 0 0 5px rgba(0,191,199,.08),0 0 18px rgba(0,191,199,.22) }
.sf-node:nth-child(3) .sf-dot,.sf-node:nth-child(4) .sf-dot { border-color:#4B75E8; box-shadow:0 0 0 5px rgba(33,89,224,.08),0 0 18px rgba(33,89,224,.22) }
.sf-node strong { display:block; font-family:var(--fh); font-size:12px; line-height:1.2 }
.sf-node small { display:block; color:var(--tx2); font-size:9px; margin-top:4px; line-height:1.35 }
.system-footer { display:flex; flex-wrap:wrap; gap:8px; padding-top:18px; border-top:1px solid var(--bdr); position:relative; z-index:1 }
.system-footer span { font-size:10px; font-weight:600; letter-spacing:.4px; color:var(--tx3); padding:6px 10px; border-radius:999px; border:1px solid var(--bdr); background:rgba(255,255,255,.02) }
@keyframes hsPulse { 0%{box-shadow:0 0 0 0 rgba(0,191,199,.5)} 70%{box-shadow:0 0 0 8px rgba(0,191,199,0)} 100%{box-shadow:0 0 0 0 rgba(0,191,199,0)} }
@keyframes pulseLine { from{background-position:100% 0} to{background-position:-80% 0} }

/* Portfolio proof without price anchoring */
.port-value.port-focus { display:block }
.pv-focus { color:var(--tx); font-size:13px; font-weight:600; line-height:1.55; margin-top:3px }

/* Solution-based engagements */
.engagement-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:56px 0 34px }
.eng-card { background:var(--surf); border:1px solid var(--bdr); border-radius:16px; padding:34px; position:relative; overflow:hidden; transition:all .3s var(--ease) }
.eng-card::before { content:''; position:absolute; inset:0 auto auto 0; width:100%; height:2px; background:var(--grad); opacity:.65 }
.eng-card:hover { transform:translateY(-4px); border-color:rgba(0,191,199,.22); box-shadow:0 18px 50px rgba(0,0,0,.18) }
.eng-kicker { color:var(--teal); text-transform:uppercase; letter-spacing:1.8px; font-size:10px; font-weight:800; margin-bottom:12px }
.eng-card h3 { font-family:var(--fh); font-size:25px; line-height:1.15; letter-spacing:-.5px; margin-bottom:12px }
.eng-card > p { color:var(--tx2); font-size:14px; line-height:1.75; min-height:74px }
.eng-card ul { list-style:none; margin:24px 0; display:grid; gap:9px }
.eng-card li { color:var(--tx3); font-size:13px; padding-left:18px; position:relative }
.eng-card li::before { content:'↗'; color:var(--teal); position:absolute; left:0; top:0; font-size:11px }
.eng-best { border-top:1px solid var(--bdr); padding-top:18px; color:var(--tx2); font-size:11px; line-height:1.55 }
.scope-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid var(--bdr); background:var(--bdr); border-radius:14px; overflow:hidden; margin:0 0 64px }
.scope-strip > div { background:var(--bg2); padding:24px }
.scope-strip strong { display:block; font-family:var(--fh); font-size:15px; margin-bottom:6px }
.scope-strip span { display:block; color:var(--tx2); font-size:12px; line-height:1.65 }
.stat-word { font-size:31px }

/* Proof should feel intentional, not like a placeholder grid */
.testi-g { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:900px; margin:64px auto 0 }

@media(max-width:960px) {
  .engagement-grid { grid-template-columns:1fr }
  .scope-strip { grid-template-columns:1fr }
  .testi-g { grid-template-columns:1fr }
}
@media(max-width:600px) {
  .hm-n.words { font-size:20px }
  .eng-card { padding:28px 22px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
}

/* ─────────────────────────────────────────
   v8.3.1 — POSITIONING + MOBILE NAV REFINEMENT
───────────────────────────────────────── */
/* Compact release signature — visible, but secondary to the customer journey */
.release-section { padding-top:36px; padding-bottom:36px; }
.release-card.release-signature {
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  background:linear-gradient(120deg,rgba(0,191,199,.065),rgba(33,89,224,.055));
  border:1px solid rgba(0,191,199,.16); border-radius:14px; padding:22px 26px;
}
.release-signature .release-copy { min-width:0; }
.release-signature .release-label {
  color:var(--teal); text-transform:uppercase; letter-spacing:1.7px;
  font-size:9.5px; font-weight:800; margin-bottom:5px;
}
.release-signature h2 { font-family:var(--fh); font-size:20px; line-height:1.2; letter-spacing:-.35px; margin:0 0 4px; }
.release-signature p { color:var(--tx2); font-size:12.5px; line-height:1.55; margin:0; max-width:720px; }
.release-tags { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; flex-shrink:0; }
.release-tags span {
  border:1px solid var(--bdr); background:rgba(255,255,255,.025); color:var(--tx2);
  border-radius:999px; padding:7px 10px; font-size:9.5px; font-weight:700;
  letter-spacing:.45px; white-space:nowrap;
}

/* Transparent pricing without making the entry price the brand */
.investment-intro { max-width:760px; margin:0 auto; text-align:center; }
.eng-card .eng-price {
  display:flex; align-items:baseline; gap:7px; margin:16px 0 6px;
  font-family:var(--fh); color:var(--tx);
}
.eng-price strong {
  font-size:38px; line-height:1; letter-spacing:-1.5px; font-weight:650;
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.eng-price span { color:var(--tx2); font-size:11px; font-weight:650; letter-spacing:.5px; text-transform:uppercase; }
.eng-price.custom strong { font-size:29px; letter-spacing:-.8px; }
.investment-note {
  margin:0 0 58px; padding:16px 20px; border-radius:12px; border:1px solid var(--bdr);
  background:var(--bg); color:var(--tx2); text-align:center; font-size:12px; line-height:1.65;
}
.investment-note strong { color:var(--tx); }

/* Mobile navigation: reserve space for the logo and keep controls inside the viewport */
html, body { overflow-x:hidden; }
.nav-logo { min-width:0; flex:0 1 auto; }
.nav-logo svg { width:220px; max-width:100%; height:auto; display:block; }
.nav-r { flex:0 0 auto; min-width:0; }
@media(max-width:760px) {
  #nav { padding:11px 0; }
  #nav.scrolled { padding:9px 0; }
  .nav-in { padding:0 14px; gap:10px; width:100%; }
  .nav-logo { flex:1 1 auto; overflow:hidden; }
  .nav-logo svg { width:184px; max-width:100%; }
  .nav-cta { display:none; }
  .nav-r { gap:7px; }
  .tbtn { width:42px; height:42px; flex:0 0 42px; }
  .ham { display:flex; width:46px; height:46px; flex:0 0 46px; }
  .mob { top:64px; padding:18px 14px 24px; max-height:calc(100vh - 64px); overflow-y:auto; }
}
@media(max-width:430px) {
  .nav-logo svg { width:164px; }
  .tbtn { width:40px; height:40px; flex-basis:40px; }
  .ham { width:44px; height:44px; flex-basis:44px; }
  .ham span { width:22px; }
}
@media(max-width:360px) {
  .nav-in { padding:0 10px; gap:6px; }
  .nav-logo svg { width:148px; }
  .nav-r { gap:5px; }
}

@media(max-width:760px) {
  .release-card.release-signature { align-items:flex-start; flex-direction:column; gap:14px; padding:20px; }
  .release-tags { justify-content:flex-start; }
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media(max-width:960px) {
  .hero-inner { grid-template-columns:1fr; gap:48px }
  .hero-vis { display:none }
  .srv-grid { grid-template-columns:1fr 1fr }
  .port-grid { grid-template-columns:1fr }
  .why-g { grid-template-columns:1fr; gap:52px }
  .stats-g { grid-template-columns:repeat(2,1fr) }
  .price-g { grid-template-columns:1fr }
  .pr-card.hot { transform:none }
  .pr-card.hot:hover { transform:translateY(-5px) }
  .testi-g { grid-template-columns:1fr }
  .contact-g { grid-template-columns:1fr }
  .foot-g { grid-template-columns:1fr 1fr }
  .byo-addons { grid-template-columns:1fr }
  .nav-menu { display:none }
  .ham { display:flex }
}
@media(max-width:600px) {
  .sec { padding:80px 0 }
  .chip { font-size:11px; padding:4px 10px; letter-spacing:.1px }
  .hero-tag { padding-right:16px }
  .srv-grid { grid-template-columns:1fr }
  .fr { grid-template-columns:1fr }
  .byo { padding:28px 22px }
  .byo-bases { flex-direction:column }
  .foot-g { grid-template-columns:1fr }
  .hero-metrics { flex-wrap:wrap; gap:20px }
  .stats-g { grid-template-columns:1fr 1fr }
}


/* Portfolio: real desktop captures, September 2026 */
#portfolio{scroll-margin-top:90px}
#portfolio .port-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:22px;gap:28px}
#portfolio .port-card{min-width:0;display:flex;flex-direction:column}
#portfolio .portfolio-featured{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;margin-top:42px;border-color:rgba(0,191,199,.3)}
#portfolio .portfolio-preview{display:block;min-width:0;background:var(--bg2);border-bottom:1px solid var(--bdr)}
#portfolio .portfolio-preview img{display:block;width:100%;height:auto;aspect-ratio:1348/926;object-fit:contain}
#portfolio .browser-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;color:var(--tx2);background:var(--bg2);font-size:11px;border-bottom:1px solid var(--bdr)}
#portfolio .browser-bar>span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#portfolio .browser-dots{color:var(--teal);font-size:8px;letter-spacing:2px;white-space:nowrap}
#portfolio .port-info{padding:26px;display:flex;flex-direction:column;flex:1}
#portfolio .portfolio-featured .port-info{padding:32px}
#portfolio .portfolio-featured .port-t{font-size:clamp(24px,2.4vw,34px);line-height:1.15;margin:12px 0 16px}
#portfolio .port-t{font-size:22px;line-height:1.3;margin:10px 0}
#portfolio .port-d{font-size:14px;line-height:1.75}
#portfolio .project-status{color:var(--teal);text-transform:uppercase;font-size:10px;letter-spacing:1.8px;font-weight:700}
#portfolio .project-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:auto;padding-top:20px}
#portfolio .project-link{display:inline-flex;align-items:center;gap:8px;min-height:44px}
#portfolio .visit-link{border:1px solid var(--bdr2);border-radius:8px;padding:8px 14px;background:var(--bg2)}
#portfolio a:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
#portfolio .portfolio-heading{margin-top:54px}
#portfolio .portfolio-heading h3{font:600 27px var(--fh);margin:0 0 8px}
#portfolio .portfolio-heading p{color:var(--tx2);font-size:14px;line-height:1.7}
@media(max-width:760px){#portfolio .port-grid{grid-template-columns:1fr}#portfolio .portfolio-featured{grid-template-columns:1fr}#portfolio .port-info,#portfolio .portfolio-featured .port-info{padding:22px}#portfolio .browser-bar{font-size:10px}#portfolio .portfolio-heading{margin-top:38px}}