/* Nexuses B2B — plain CSS design system */
:root {
  --bg:#FBF8F1; --bg-elevated:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3EEE2;
  --border:rgba(24,18,7,.09); --border-strong:rgba(24,18,7,.16);
  --text:#1B1D24; --text-muted:#5A6072; --text-faint:#8A90A2;
  --gold:#B8873A; --gold-bright:#D4A857; --teal:#2E8177; --teal-dim:#276A62;
  --danger:#C2513C; --radius:12px;
  --ease:cubic-bezier(.16,.9,.2,1);
  --font-display:"Fraunces",ui-serif,Georgia,serif;
  --font-sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}

*,*::before,*::after{box-sizing:border-box;border-color:var(--border);}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-size:16px;line-height:1.55;
}
a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;display:block;}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit;}
input,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:450;letter-spacing:-.01em;line-height:1.1;margin:0;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
::selection{background:var(--gold);color:#FFFFFF;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* Layout */
.container-page{max-width:1240px;margin-inline:auto;padding-inline:28px;}
.grid{display:grid;}
.flex{display:flex;}
.hidden{display:none;}
.relative{position:relative;}
.absolute{position:absolute;}
.fixed{position:fixed;}
.text-center{text-align:center;}
.mx-auto{margin-left:auto;margin-right:auto;}

/* Typography helpers */
.font-display{font-family:var(--font-display);}
.font-mono{font-family:var(--font-mono);}
.italic{font-style:italic;}
.uppercase{text-transform:uppercase;}
.tracking-wider{letter-spacing:.08em;}
.tracking-widest{letter-spacing:.14em;}
.text-gold{color:var(--gold);}
.text-teal{color:var(--teal);}
.text-muted{color:var(--text-muted);}
.text-faint{color:var(--text-faint);}
.text-foreground{color:var(--text);}
.text-gradient-gold{
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.eyebrow{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:none;}
.eyebrow.center{justify-content:center;}

/* Buttons */
.btn-gold,.btn-ghost-gold{
  display:inline-flex;align-items:center;gap:10px;padding:15px 30px;
  border-radius:999px;font-size:14.5px;font-weight:600;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
  cursor:pointer;
}
.btn-gold{background:var(--gold);color:#FFFFFF;border:1px solid var(--gold);}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(198,161,91,.55);}
.btn-ghost-gold{border:1px solid var(--border-strong);color:var(--text);}
.btn-ghost-gold:hover{border-color:var(--gold);background:rgba(198,161,91,.08);}
.btn-gold.sm,.btn-ghost-gold.sm{padding:10px 20px;font-size:13px;}
.btn-full{width:100%;justify-content:center;}

/* Cards */
.card-lift{
  background:var(--surface);border:1px solid var(--border);
  border-radius:22px;padding:32px;
  transition:transform .26s var(--ease),border-color .26s var(--ease),box-shadow .26s var(--ease);
  display:block;
}
.card-lift:hover{transform:translateY(-6px);border-color:rgba(198,161,91,.35);box-shadow:0 30px 60px -25px rgba(24,18,7,.18);}
.card-lift.featured{border-color:rgba(198,161,91,.55);background:linear-gradient(180deg,var(--surface),var(--surface-2));}

/* Header */
.site-header{background:var(--bg);border-bottom:1px solid transparent;
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),padding .28s var(--ease);
  padding:12px 0;width:100%;
  transform:translateZ(0);
}
.site-header.scrolled{padding:8px 0;background:var(--bg);border-bottom:1px solid var(--border);}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:10px;}
.logo-mark{
  width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:600;font-size:15px;color:#12151F;
  background:linear-gradient(155deg,var(--gold),var(--teal-dim));
}
.logo-text{font-family:var(--font-display);font-size:21px;}
.nav{display:none;gap:30px;align-items:center;}
.nav a{
  font-size:14px;font-weight:500;color:var(--text-muted);
  position:relative;transition:color .2s var(--ease);
}
.nav a::after{content:'';position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--gold);transition:width .2s var(--ease);}
.nav a:hover,.nav a.active{color:var(--text);}
.nav a:hover::after,.nav a.active::after{width:100%;}
.header-actions{display:flex;align-items:center;gap:12px;}
.icon-btn{
  width:36px;height:36px;border-radius:999px;border:1px solid var(--border-strong);
  display:inline-flex;align-items:center;justify-content:center;transition:all .2s var(--ease);
}
.icon-btn:hover{border-color:var(--gold);color:var(--gold);}
.header-cta{display:none;}
.menu-btn{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;}
.mobile-menu{
  position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;
  background:var(--bg-elevated);z-index:40;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  transform:translateY(-100%);transition:transform .32s var(--ease);
  visibility:hidden;pointer-events:none;
}
.mobile-menu.open{transform:translateY(0);visibility:visible;pointer-events:auto;}
.mobile-menu a{font-family:var(--font-display);font-size:30px;}
.mobile-menu a.active{color:var(--gold);}
@media(min-width:1024px){
  .nav{display:flex;}
  .header-cta{display:inline-flex;}
  .menu-btn{display:none;}
}
@media(min-width:768px){.header-cta{display:inline-flex;}}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:40px;padding:32px 0;background:var(--bg-elevated);}
.footer-grid{display:grid;gap:28px;grid-template-columns:1fr;}
@media(min-width:768px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr;gap:56px;}}
.footer-links{column-count:2;column-gap:20px;}
.footer-links li{break-inside:avoid;-webkit-column-break-inside:avoid;}
@media(max-width:420px){.footer-links{column-count:1;}}
.footer-social{display:flex;gap:12px;margin-top:16px;}
.footer-social a{
  width:40px;height:40px;border-radius:999px;border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);
  transition:all .2s var(--ease);
}
.footer-social a:hover{border-color:var(--gold);color:var(--gold);}
.footer-social svg{width:16px;height:16px;stroke:currentColor;}
.footer-heading{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
.footer-links li{margin-bottom:8px;}
.footer-links a{font-size:14px;color:var(--text-muted);transition:color .2s;}
.footer-links a:hover{color:var(--gold);}
.footer-contact li{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--text-muted);margin-bottom:12px;}
.footer-contact svg{color:var(--gold);margin-top:2px;flex-shrink:0;}
.footer-contact a:hover{color:var(--text);}
.footer-bottom{
  max-width:1240px;margin-inline:auto;padding:14px 28px 0;margin-top:20px;
  border-top:1px solid var(--border);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12px;color:var(--text-faint);
}

/* Floating UI */
.progress-bar{
  position:fixed;top:0;left:0;height:3px;z-index:1200;width:0;
  background:linear-gradient(90deg,var(--gold),var(--teal));transition:width .1s linear;
}
.floating-btn{
  position:fixed;z-index:900;border-radius:999px;
  display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease);
}
.wa-btn{
  bottom:32px;right:32px;width:64px;height:64px;color:#fff;
  background:radial-gradient(circle at 30% 25%, #4EE58A 0%, #25D366 45%, #128C4A 100%);
  border:1.5px solid rgba(255,255,255,.35);
  box-shadow:
    0 0 0 6px rgba(37,211,102,.12),
    0 18px 48px -12px rgba(18,140,74,.55),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -8px 16px rgba(0,0,0,.15);
}
.wa-btn::before{
  content:"";position:absolute;inset:-8px;border-radius:999px;
  border:2px solid rgba(37,211,102,.5);opacity:.7;
  animation:wa-ring 2.4s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;
}
.wa-btn::after{
  content:"";position:absolute;inset:0;border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.25), transparent 55%);
  pointer-events:none;
}
.wa-btn svg{ position:relative; z-index:1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.wa-icon{
  width:28px;height:28px;display:inline-block;
  fill:#fff;stroke:none;
}
.wa-btn:hover{ transform: translateY(-4px) scale(1.06); }
@keyframes wa-ring{
  0%{transform:scale(.85);opacity:.75;}
  70%{transform:scale(1.35);opacity:0;}
  100%{transform:scale(1.35);opacity:0;}
}
.top-btn{
  bottom:110px;left:32px;width:48px;height:48px;border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--text);opacity:0;pointer-events:none;transform:translateY(8px);
}
.top-btn.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.top-btn:hover{background:var(--gold);color:#FFFFFF;border-color:var(--gold);}

/* Exit / timed offer popup */
.exit-popup-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(15,14,10,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s var(--ease),visibility .35s var(--ease);
}
.exit-popup-overlay.show{opacity:1;visibility:visible;pointer-events:auto;}
.exit-popup{
  position:relative;width:100%;max-width:460px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--border-strong);border-radius:26px;
  padding:44px 40px 38px;
  box-shadow:0 60px 120px -30px rgba(15,14,10,.45);
  transform:translateY(18px) scale(.96);opacity:0;
  transition:transform .4s var(--ease),opacity .4s var(--ease);
}
.exit-popup-overlay.show .exit-popup{transform:translateY(0) scale(1);opacity:1;}
.exit-popup-glow{
  position:absolute;top:-140px;left:50%;transform:translateX(-50%);
  width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(184,135,58,.32) 0%,transparent 65%);
}
.exit-popup-close{
  position:absolute;top:18px;right:18px;width:34px;height:34px;
  border-radius:999px;border:1px solid var(--border-strong);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-muted);background:var(--surface);
  transition:all .2s var(--ease);
}
.exit-popup-close:hover{color:#fff;background:var(--gold);border-color:var(--gold);}
.exit-popup-body{position:relative;z-index:1;text-align:center;}
.exit-popup-body .eyebrow{justify-content:center;}
.exit-popup-title{font-size:28px;margin-top:14px;}
.exit-popup-lead{color:var(--text-muted);margin-top:12px;font-size:15px;line-height:1.6;}
.exit-popup-perks{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;text-align:left;}
.exit-popup-perks li{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:14px;padding:12px 16px;font-size:14px;font-weight:500;
}
.exit-popup-perks li svg{flex:none;width:18px;height:18px;color:var(--teal);}
.exit-popup-perks li strong{font-weight:600;}
.exit-popup-tag{
  margin-left:auto;flex:none;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold);
  background:rgba(184,135,58,.12);border:1px solid rgba(184,135,58,.3);
  border-radius:999px;padding:4px 10px;
}
.exit-popup-cta{margin-top:26px;}
.exit-popup-cta .btn-gold{width:100%;justify-content:center;}
.exit-popup-dismiss{
  display:block;margin:16px auto 0;font-size:13px;color:var(--text-faint);
  text-decoration:underline;text-underline-offset:3px;
}
.exit-popup-dismiss:hover{color:var(--text-muted);}
@media(max-width:480px){
  .exit-popup{padding:36px 24px 30px;border-radius:22px;}
  .exit-popup-title{font-size:24px;}
}

/* Reveal + counter */
.reveal{opacity:1;}
.reveal.in{animation:reveal-up .45s var(--ease) both; will-change:transform,opacity;}
@keyframes reveal-up{from{opacity:0;transform:translate3d(0,14px,0);}to{opacity:1;transform:translate3d(0,0,0);}}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.pulse-dot{animation:pulse 2s infinite;}

/* Hero + sections */
.section{padding:36px 0;}
.section.sm{padding:28px 0;}
.hero{padding:178px 0 64px;position:relative;overflow:hidden;}
.hero-glow-1,.hero-glow-2,.header-glow{
  position:absolute;border-radius:999px;filter:blur(56px);pointer-events:none;
  will-change:transform;
}
.hero-glow-1{top:-33%;right:-25%;width:900px;height:900px;opacity:.25;
  background:radial-gradient(circle,var(--teal) 0%,transparent 60%);}
.hero-glow-2{bottom:-33%;left:-25%;width:900px;height:900px;opacity:.2;
  background:radial-gradient(circle,var(--gold) 0%,transparent 60%);}
.header-glow{top:-160px;left:50%;transform:translateX(-50%);width:900px;height:900px;opacity:.30;
  background:radial-gradient(circle,var(--gold) 0%,transparent 60%);}
.hero-grid{display:grid;gap:56px;align-items:center;position:relative;}
@media(min-width:1024px){.hero-grid{grid-template-columns:1.05fr .95fr;}}
.h1{font-size:clamp(40px,5.6vw,68px);line-height:1.03;}
.h1-page{font-size:clamp(38px,5.5vw,68px);line-height:1.05;max-width:900px;}
.h2{font-size:clamp(28px,3.6vw,44px);}
.h2-sm{font-size:clamp(28px,3.6vw,42px);}
.lead{margin-top:24px;font-size:18px;color:var(--text-muted);max-width:520px;}
.hero-ctas{margin-top:36px;display:flex;flex-wrap:wrap;gap:16px;}
.hero-stats{margin-top:56px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media(min-width:768px){.hero-stats{grid-template-columns:repeat(4,1fr);}}
.stat-num{font-family:var(--font-mono);font-size:30px;color:var(--gold);}
.stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-top:4px;}

/* ---------- Home hero: same moving particle background as the rest
   of the site (no separate opaque bg / extra tint — this used to have
   its own canvas+overlay before particles became a single global
   layer behind everything; that leftover opaque #05050a background
   was hiding the shared canvas inside the hero specifically). ---------- */
.hero.hero-dark{
  background: transparent;
}
.hero.hero-dark .hero-glow-1,
.hero.hero-dark .hero-glow-2{ display:none; } /* the global canvas already provides this glow */
.hero-particles{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; display:block; pointer-events:none;
}
.hero.hero-dark .hero-grid{ position:relative; z-index:2; }
.hero.hero-dark .h1{ color:#fff; }
.hero.hero-dark .lead{ color:rgba(255,255,255,.62); }
.hero.hero-dark .stat-num{ color:#fff; }
.hero.hero-dark .stat-label{ color:rgba(255,255,255,.48); }
.hero.hero-dark .btn-ghost-gold{ color:#fff; border-color:rgba(255,255,255,.28); }
.hero.hero-dark .btn-ghost-gold:hover{ border-color:#c084fc; background:rgba(192,132,252,.10); }
.hero.hero-dark .chart-wrap{ position:relative; z-index:2; }

/* Chart card
   NOTE: .chart-wrap must always keep position:relative + its own stacking
   context, because it's the only thing anchoring the two absolutely
   positioned .chart-badge pills to the card's corners. If that rule is
   ever missing (e.g. a later duplicate selector overriding it without
   position:relative, or a stale cached CSS file from before this fix),
   the badges fall back to positioning against the viewport instead of
   the card — one badge glued to the top of the screen, the other to the
   bottom, overlapping unrelated content. That's exactly what the
   "overlap after refresh" bug looks like. Every .chart-badge / .badge-tl /
   .badge-br / .chart-wrap rule is consolidated HERE, in one place, so
   nothing later in this file can quietly redefine them. */
.chart-wrap{position:relative;isolation:isolate;z-index:0;}
.growth-linechart{width:100%;height:110px;display:block;overflow:visible;}
.growth-line{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s var(--ease) .15s;}
.growth-area{opacity:0;transition:opacity .8s var(--ease) .5s;}
.growth-dot{opacity:0;transform-origin:320px 8px;transition:opacity .3s var(--ease) 1.05s, transform .3s var(--ease) 1.05s;transform:scale(0);}
.reveal.in .growth-line{stroke-dashoffset:0;}
.reveal.in .growth-area{opacity:1;}
.reveal.in .growth-dot{opacity:1;transform:scale(1);}

/* ---- Dynamic/live chart: continuous motion once the entrance draw-in
   has finished, instead of sitting static. Pure CSS, cheap (transform/
   opacity/stroke-dashoffset on a couple of small SVG shapes). ---- */
.growth-line-flow{
  stroke-dasharray:8 18; stroke-dashoffset:0; opacity:0;
  transition: opacity .4s var(--ease) 1.1s;
}
.reveal.in .growth-line-flow{
  opacity:.85;
  animation: growth-flow 2.2s linear infinite 1.15s;
}
@keyframes growth-flow{ to{ stroke-dashoffset:-104; } }

.growth-dot-ring{
  fill:none; stroke:#E6C266; stroke-width:2; opacity:0;
  transform-origin:320px 8px;
}
.reveal.in .growth-dot-ring{
  animation: growth-ring-pulse 2.2s ease-out infinite 1.1s;
}
@keyframes growth-ring-pulse{
  0%{ transform:scale(.7); opacity:.6; }
  75%{ transform:scale(2.4); opacity:0; }
  100%{ transform:scale(2.4); opacity:0; }
}
.reveal.in .growth-dot{
  animation: growth-dot-beat 2.2s ease-in-out infinite 1.1s;
}
@keyframes growth-dot-beat{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.22); }
}
@media (prefers-reduced-motion: reduce){
  .growth-line-flow, .growth-dot-ring, .growth-dot{ animation:none !important; }
}
.chart-badge{
  position:absolute;z-index:2;background:rgba(255,253,248,.9);border:1px solid var(--border);
  border-radius:999px;padding:8px 14px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 20px 40px -20px rgba(15,42,36,.25), inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter:blur(8px);
  display:inline-flex;align-items:center;gap:8px;
}
.badge-tl{top:-14px;left:24px;color:var(--teal);}
.badge-br{bottom:-14px;right:24px;color:var(--gold);}
.dot{width:8px;height:8px;border-radius:999px;display:inline-block;}
.dot-teal{background:var(--teal);color:rgba(15,92,78,.4);}
.dot-gold{background:var(--gold);color:rgba(184,135,58,.4);}

/* Marquee */
.marquee{padding:24px 0;border-block:1px solid var(--border);overflow:hidden;background:var(--bg-elevated);}
.marquee-track{display:flex;gap:56px;white-space:nowrap;animation:marquee 40s linear infinite;font-family:var(--font-mono);font-size:14px;color:var(--text-muted);}
.marquee-track .diamond{color:var(--gold);margin-left:56px;}

/* Grid layouts */
.grid-2{display:grid;gap:24px;grid-template-columns:1fr;}
.grid-3{display:grid;gap:24px;grid-template-columns:1fr;}
.grid-4{display:grid;gap:24px;grid-template-columns:1fr;}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr);}.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr);}.grid-4{grid-template-columns:repeat(4,1fr);}}
.section-head{max-width:640px;margin-bottom:36px;}
.section-head.center{margin-inline:auto;text-align:center;}

/* Service icon */
.svc-icon{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);border:1px solid var(--border-strong);margin-bottom:20px;
  transition:all .2s var(--ease);
}
.card-lift:hover .svc-icon{border-color:var(--gold);background:rgba(198,161,91,.08);}
.card-title{font-size:20px;margin-bottom:8px;}
.card-desc{font-size:15px;color:var(--text-muted);line-height:1.6;}

/* CTA block */
.cta-block{
  padding:56px 40px!important;text-align:center;
  background:linear-gradient(135deg,var(--surface),var(--surface-2));
}

/* Pill filters */
.pill-row{display:flex;flex-wrap:wrap;gap:12px;}
.pill{
  padding:8px 20px;border-radius:999px;font-size:14px;
  border:1px solid var(--border-strong);color:var(--text-muted);cursor:pointer;
  transition:all .2s var(--ease);
}
.pill:hover{border-color:var(--gold);color:var(--text);}
.pill.active{background:var(--gold);color:#FFFFFF;border-color:var(--gold);}

.tabs{
  display:inline-flex;padding:6px;border-radius:999px;
  border:1px solid var(--border-strong);background:var(--surface);gap:4px;flex-wrap:wrap;
}
.tab{padding:10px 20px;border-radius:999px;font-size:14px;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all .2s;}
.tab:hover{color:var(--text);}
.tab.active{background:var(--gold);color:#FFFFFF;}

/* Case card */
.case-tag{
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-family:var(--font-mono);
  color:var(--teal);border:1px solid rgba(79,209,197,.4);border-radius:999px;padding:4px 12px;
}
.case-results{margin-top:24px;padding-top:24px;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.result-num{font-family:var(--font-mono);font-size:24px;color:var(--gold);}
.result-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-top:4px;}

/* Feature list */
.features{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;}
.features li{display:flex;gap:8px;font-size:14px;color:var(--text-muted);align-items:flex-start;}
.features svg{color:var(--teal);margin-top:4px;flex-shrink:0;}

/* Pricing */
.price-head{font-family:var(--font-display);font-size:36px;color:var(--gold);}
.price-per{font-size:14px;color:var(--text-muted);margin-left:4px;}
.plan-features li{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--text-muted);margin-bottom:10px;}
.plan-features svg{color:var(--teal);margin-top:4px;flex-shrink:0;}
.plan-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#FFFFFF;font-size:11px;letter-spacing:.16em;
  font-weight:600;text-transform:uppercase;padding:4px 12px;border-radius:999px;
}

/* Contact + form */
.contact-grid{display:grid;gap:32px;grid-template-columns:1fr;}
@media(min-width:1024px){.contact-grid{grid-template-columns:1.2fr 1fr;}}
.form-grid{display:grid;gap:20px;grid-template-columns:1fr;}
@media(min-width:640px){.form-grid.cols-2{grid-template-columns:1fr 1fr;}}
.field label{display:block;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted);margin-bottom:8px;}
.field input,.field select,.field textarea{
  width:100%;padding:14px 20px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--border-strong);
  outline:none;font-size:14px;transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);}
.field textarea{resize:none;min-height:120px;}
.contact-info{display:flex;flex-direction:column;gap:16px;}
.contact-row{display:flex;align-items:center;gap:16px;padding:24px!important;}
.contact-row .icon-lg{width:48px;height:48px;border-radius:14px;border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0;}
.contact-row .l{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted);}
.contact-row .v{margin-top:4px;}

/* Footer Quick Links (SEO keyword block) */
.quicklinks-card{background:var(--surface);border:1px solid var(--border-strong);border-radius:20px;padding:28px 32px;box-shadow:0 20px 50px -30px rgba(24,18,7,.15);}
.quicklinks-label{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-mono);margin-bottom:16px;color:var(--teal);padding-bottom:12px;border-bottom:1px solid var(--border);}
.quicklinks-list{display:flex;flex-wrap:wrap;align-items:center;row-gap:10px;column-gap:0;line-height:1.8;}
.quicklinks-list a{color:var(--teal);font-size:14px;white-space:nowrap;transition:color .2s;}
.quicklinks-list a:hover{color:var(--gold);text-decoration:underline;}
.quicklinks-list a:not(:last-child)::after{content:"|";display:inline-block;margin:0 12px;color:var(--border-strong);}
@media(max-width:640px){
  .quicklinks-card{padding:20px;border-radius:16px;}
  .quicklinks-list a{white-space:normal;}
  .quicklinks-list a:not(:last-child)::after{margin:0 8px;}
}

.blog-thumb{
  position:relative;height:150px;border-radius:16px;margin-bottom:20px;overflow:hidden;
  background:
    radial-gradient(120px 90px at 12% 15%, rgba(184,135,58,.28), transparent 65%),
    radial-gradient(160px 120px at 88% 90%, rgba(46,129,119,.30), transparent 65%),
    linear-gradient(155deg, var(--surface-2), var(--surface));
  border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  transition:transform .32s var(--ease);
}
.card-lift:hover .blog-thumb{transform:scale(1.03);}
.blog-thumb .banner-icon{width:44px;height:44px;color:var(--gold-deep);stroke-width:1.4;opacity:.85;}
.blog-banner{
  position:relative;width:100%;max-width:780px;aspect-ratio:780/260;min-height:200px;
  border-radius:16px;overflow:hidden;margin-top:24px;
  background:
    radial-gradient(220px 160px at 10% 10%, rgba(184,135,58,.28), transparent 65%),
    radial-gradient(260px 200px at 90% 95%, rgba(46,129,119,.32), transparent 65%),
    linear-gradient(155deg, var(--surface-2), var(--surface));
  border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
}
.blog-banner .banner-icon{width:60px;height:60px;color:var(--gold-deep);stroke-width:1.2;opacity:.9;}
@media(max-width:640px){ .blog-banner .banner-icon{width:44px;height:44px;} }

/* Optional real image banner — drop an <img class="blog-banner-img" src="..."> as the
   FIRST child inside .blog-thumb or .blog-banner and it will cover the placeholder
   gradient + icon automatically. Leave it out (or delete it) to keep the icon look. */
.blog-thumb .blog-banner-img,
.blog-banner .blog-banner-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;
}
.blog-post-head{text-align:center;}
.blog-post-head .blog-meta{justify-content:center;}
.blog-post-head .h1-page,
.blog-post-head .lead{margin-left:auto;margin-right:auto;}
.blog-post-head .blog-banner{margin-left:auto;margin-right:auto;max-width:900px;}
.blog-meta{display:flex;gap:12px;align-items:center;margin-bottom:16px;}
.blog-tag{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-family:var(--font-mono);color:var(--teal);border:1px solid rgba(79,209,197,.4);border-radius:999px;padding:4px 12px;}
.blog-date{font-size:12px;color:var(--text-faint);}
.blog-title{font-size:20px;margin-bottom:12px;line-height:1.35;transition:color .2s;}
.card-lift:hover .blog-title{color:var(--gold);}
.blog-foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-faint);}
.blog-foot .read{color:var(--gold);display:flex;align-items:center;gap:4px;transition:gap .2s;font-size:14px;}
.card-lift:hover .blog-foot .read{gap:8px;}

/* Newsletter form */
.newsletter-form{display:flex;gap:12px;flex-direction:column;max-width:440px;margin:0 auto;}
@media(min-width:640px){.newsletter-form{flex-direction:row;}}
.newsletter-form input{
  flex:1;padding:14px 20px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--border-strong);outline:none;font-size:14px;
}
.newsletter-form input:focus{border-color:var(--gold);}

/* Tools */
.tool-tag{font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-family:var(--font-mono);color:var(--text-faint);padding:4px 10px;border-radius:999px;border:1px solid var(--border);}
.tool-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;}
.tool-cta{margin-top:20px;display:flex;align-items:center;gap:6px;font-size:12px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--gold);}
.card-lift:hover .tool-cta svg{transform:translate(2px,-2px);}
.tool-cta svg{transition:transform .2s;}

/* Legal prose */
.prose{max-width:780px;margin-inline:auto;color:var(--text-muted);line-height:1.7;text-align:left;}
.prose h2{color:var(--text);font-size:24px;margin:32px 0 10px;}
.prose h3{color:var(--text);font-size:19px;margin:26px 0 8px;}
.prose p{margin-bottom:14px;}
.prose a{color:var(--gold);}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px;}
.prose u{text-decoration:underline;}
.prose s{text-decoration:line-through;}
.prose blockquote{margin:20px 0;padding:10px 20px;border-left:3px solid var(--gold);color:var(--text);font-style:italic;background:var(--surface-2);border-radius:0 10px 10px 0;}
.prose pre{margin:20px 0;padding:16px 18px;border-radius:12px;background:var(--surface-2);font-family:var(--font-mono);font-size:13px;line-height:1.6;overflow-x:auto;white-space:pre-wrap;color:var(--text);}
.prose img{max-width:100%;height:auto;border-radius:14px;margin:20px 0;display:block;}
.prose hr{border:none;border-top:1px solid var(--border-strong);margin:32px 0;}

/* Pillar row */
.pillar-row{display:flex;gap:24px;align-items:flex-start;}
.pillar-num{font-family:var(--font-mono);font-size:28px;color:var(--gold);flex-shrink:0;}
.stack-4>*+*{margin-top:16px;}
.value-title{font-family:var(--font-display);color:var(--gold);font-size:18px;margin-bottom:8px;}

/* Utility spacing helpers used across pages */
.mt-4{margin-top:16px;}.mt-6{margin-top:24px;}.mt-8{margin-top:32px;}.mt-12{margin-top:48px;}
.mb-3{margin-bottom:12px;}.mb-4{margin-bottom:16px;}.mb-6{margin-bottom:24px;}.mb-8{margin-bottom:32px;}
.pb-16{padding-bottom:44px;}.pb-24{padding-bottom:60px;}
.max-w-lg{max-width:640px;}.max-w-md{max-width:520px;}.max-w-xl{max-width:720px;}
.h-full{height:100%;}


/* Light premium polish */
.site-header{backdrop-filter:saturate(1.2) blur(10px);background:rgba(251,248,241,.85);border-bottom:1px solid var(--border);}
/* .chart-badge / .badge-tl / .badge-br / .chart-wrap / .dot: consolidated
   near ".growth-linechart" above — do not re-add duplicates here. */
.marquee{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:22px 0;background:var(--bg-elevated);}
.marquee-track{display:flex;gap:32px;white-space:nowrap;animation:marquee 40s linear infinite;font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);}
.marquee-track span{padding-inline:8px;}
.marquee .diamond{color:var(--gold);}
.h1{font-size:clamp(40px,6vw,72px);letter-spacing:-.02em;}
.h1-page{font-size:clamp(36px,5vw,56px);letter-spacing:-.02em;}
.h2{font-size:clamp(30px,4vw,44px);letter-spacing:-.02em;}
.lead{font-size:18px;color:var(--text-muted);margin-top:20px;max-width:560px;line-height:1.6;}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:56px;max-width:520px;}
@media(min-width:768px){.hero-stats{grid-template-columns:repeat(4,1fr);}}
.stat-num{font-family:var(--font-display);font-size:32px;color:var(--gold);}
.stat-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-top:6px;}
@media(min-width:1024px){.hero-grid{grid-template-columns:1.1fr 1fr;}}

/* Show all pricing tab panels (no JS) — stack them with a heading */
[data-tab-panel]{margin-top:56px;}
[data-tab-panel]::before{content:attr(data-tab-panel);display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;}
[data-tab-panel="seo"]::before{content:"SEO Packages";}
[data-tab-panel="ads"]::before{content:"Google & Meta Ads Packages";}
[data-tab-panel="web"]::before{content:"Website Development Packages";}
.tabs{display:none;} /* hide non-functional tab bar */

/* icons */
.i-svg{width:1em;height:1em;display:inline-block;vertical-align:-.15em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ================================================================
   ORIGINWORKS — ULTRA-PREMIUM ENHANCEMENTS
   Rebrand palette + luxe hover effects, gradient buttons, glass,
   glow rings, magnetic tilt, shimmer, and refined typography.
   ================================================================ */
:root {
  /* Rebrand: deep emerald + antique gold from logo */
  --bg:#F7F3EA;
  --bg-elevated:#FFFDF8;
  --surface:#FFFFFF;
  --surface-2:#F1EADB;
  --border:rgba(15,42,36,.10);
  --border-strong:rgba(15,42,36,.20);
  --text:#0F2A24;
  --text-muted:#556961;
  --text-faint:#8A9691;
  --gold:#B8873A;
  --gold-bright:#E6C266;
  --gold-deep:#8E661F;
  --teal:#0F5C4E;     /* deep emerald from logo */
  --teal-dim:#0A3E34;
  --radius:16px;
  --shadow-lux: 0 30px 80px -40px rgba(15,42,36,.35),
                0 12px 30px -18px rgba(184,135,58,.25);
  --gradient-gold: linear-gradient(135deg,#E6C266 0%,#B8873A 45%,#8E661F 100%);
  --gradient-emerald: linear-gradient(135deg,#0F5C4E 0%,#0A3E34 100%);
  --gradient-lux: linear-gradient(135deg,#0F5C4E 0%,#0A3E34 40%,#B8873A 120%);
}

/* Refined body texture — subtle grain via layered gradients */
body{
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(184,135,58,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(15,92,78,.09), transparent 60%),
    var(--bg);
}

/* ================ LOGO (image-based) ================ */
.ow-logo-mark{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(150deg, rgba(230,194,102,.22), rgba(15,92,78,.14));
  border:1px solid rgba(184,135,58,.30);
  box-shadow: 0 6px 18px -8px rgba(184,135,58,.45), inset 0 0 0 1px rgba(255,255,255,.5);
  overflow:hidden; transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
.ow-logo-mark img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.35); /* crops to icon area of the wordmark logo */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}
.logo:hover .ow-logo-mark{ transform: rotate(-4deg) scale(1.05); box-shadow: 0 10px 24px -6px rgba(184,135,58,.55); }
.logo-text{
  font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.01em;
  color:var(--text);
}
.logo-text .text-gold{
  background: var(--gradient-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ================ NAV ================ */
.site-header{
  background: rgba(247,243,234,.72);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background: rgba(247,243,234,.90);
  border-bottom-color: var(--border);
  box-shadow: 0 10px 40px -20px rgba(15,42,36,.15);
}
.nav a{ position:relative; padding:6px 2px; }
.nav a::after{
  content:''; position:absolute; left:50%; right:50%; bottom:-4px; height:2px;
  background: var(--gradient-gold); border-radius:2px;
  transition: left .22s var(--ease), right .22s var(--ease), opacity .3s;
}
.nav a:hover::after,.nav a.active::after{ left:0; right:0; }

/* ================ BUTTONS ================ */
.btn-gold, .btn-ghost-gold{
  position:relative; overflow:hidden; isolation:isolate;
  font-weight:600; letter-spacing:.01em;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background-position .8s var(--ease), color .2s var(--ease);
}
.btn-gold{
  background: var(--gradient-gold);
  background-size: 200% 200%;
  background-position: 0% 0%;
  color:#FFF;
  border:1px solid rgba(255,255,255,.15);
  box-shadow: 0 12px 30px -14px rgba(184,135,58,.55),
              inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover{
  transform: translateY(-3px);
  background-position: 100% 100%;
  box-shadow: 0 22px 46px -14px rgba(184,135,58,.70),
              inset 0 1px 0 rgba(255,255,255,.45);
}
/* Shine sweep */
.btn-gold::before, .btn-ghost-gold::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .32s var(--ease);
}
.btn-gold:hover::before, .btn-ghost-gold:hover::before{ transform: translateX(120%); }

.btn-ghost-gold{
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(6px);
  border:1px solid var(--border-strong);
  color:var(--text);
}
.btn-ghost-gold:hover{
  transform: translateY(-2px);
  border-color: var(--gold);
  color: var(--gold-deep);
  box-shadow: 0 14px 34px -18px rgba(184,135,58,.35);
}
.btn-gold svg, .btn-ghost-gold svg{ transition: transform .22s var(--ease); }
.btn-gold:hover svg, .btn-ghost-gold:hover svg{ transform: translateX(4px); }

/* ================ CARDS — glass + tilt + spotlight ================ */
.card-lift{
  position:relative; isolation:isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,253,248,.75));
  border:1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 20px 40px -30px rgba(15,42,36,.20);
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateZ(0);
  transition: transform .32s var(--ease), border-color .32s var(--ease), box-shadow .32s var(--ease);
}
.card-lift::before{
  /* Gold gradient border on hover */
  content:''; position:absolute; inset:-1px; border-radius:23px; padding:1px;
  background: linear-gradient(135deg, rgba(230,194,102,.0), rgba(230,194,102,.6), rgba(15,92,78,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .32s var(--ease);
  pointer-events:none;
}
.card-lift::after{
  /* Spotlight follows pointer */
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(400px circle at var(--mx,50%) var(--my,50%),
              rgba(230,194,102,.15), transparent 45%);
  opacity:0; transition: opacity .26s var(--ease);
  pointer-events:none;
}
.card-lift:hover{
  border-color: transparent;
  box-shadow: var(--shadow-lux);
}
.card-lift:hover::before, .card-lift:hover::after{ opacity:1; }
.card-lift.featured{
  background: linear-gradient(180deg, rgba(255,253,248,.95), rgba(241,234,219,.9));
  border-color: rgba(184,135,58,.35);
}

/* Service icon polish */
.svc-icon{
  background: linear-gradient(135deg, rgba(230,194,102,.15), rgba(15,92,78,.08));
  border:1px solid rgba(184,135,58,.30);
  color: var(--gold-deep);
  transition: transform .32s var(--ease), background .26s, color .2s, box-shadow .26s;
}
.card-lift:hover .svc-icon{
  transform: rotate(-6deg) scale(1.08);
  background: var(--gradient-gold);
  color:#FFF;
  box-shadow: 0 10px 24px -10px rgba(184,135,58,.55);
}

/* ================ HERO ================ */
.hero{ padding: 170px 0 70px; }
.h1 .text-gradient-gold, .text-gradient-gold{
  background: var(--gradient-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-glow-1{ background: radial-gradient(circle, rgba(15,92,78,.35) 0%, transparent 60%); opacity:.55; }
.hero-glow-2{ background: radial-gradient(circle, rgba(184,135,58,.35) 0%, transparent 60%); opacity:.55; }
.header-glow{ background: radial-gradient(circle, rgba(184,135,58,.28) 0%, transparent 60%); opacity:.45; }

.eyebrow{
  color: var(--gold-deep);
  background: linear-gradient(90deg, rgba(230,194,102,.15), rgba(230,194,102,0));
  padding: 6px 14px 6px 12px; border-radius: 999px;
  border: 1px solid rgba(184,135,58,.25);
}
.eyebrow::before{ content:none; }

.stat-num{
  background: var(--gradient-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:600;
}

/* Chart badges glow: folded into the consolidated .chart-badge rule above */
.pulse-dot{ box-shadow: 0 0 0 0 currentColor; animation: pulse-ring 1.8s var(--ease) infinite; }
.dot-teal{ background: var(--teal); color: rgba(15,92,78,.4); }
.dot-gold{ background: var(--gold); color: rgba(184,135,58,.4); }
@keyframes pulse-ring{
  0%{ box-shadow: 0 0 0 0 currentColor; }
  70%{ box-shadow: 0 0 0 10px transparent; }
  100%{ box-shadow: 0 0 0 0 transparent; }
}

/* ================ MARQUEE ================ */
.marquee{
  background: linear-gradient(90deg, var(--bg-elevated), var(--surface-2), var(--bg-elevated));
  border-block:1px solid var(--border);
  position:relative;
}
.marquee::before, .marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg, var(--bg) 0%, transparent); }
.marquee::after { right:0; background:linear-gradient(-90deg, var(--bg) 0%, transparent); }
.marquee-track{ color: var(--text); font-weight:500; }
.marquee-track .diamond{ color: var(--gold); }

/* ================ SECTIONS / HEADINGS ================ */
h1,h2,h3{ letter-spacing:-.02em; }
.h1{ font-weight:450; }
.italic.text-gradient-gold{ padding-inline:2px; }

/* ================ PRICING ================ */
.price-head{
  background: var(--gradient-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:600;
}
.plan-badge{
  background: var(--gradient-gold);
  box-shadow: 0 10px 24px -10px rgba(184,135,58,.55);
}

/* ================ CTA BLOCK ================ */
.cta-block{
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(184,135,58,.14), transparent 60%),
    radial-gradient(600px 300px at 0% 100%, rgba(15,92,78,.14), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--surface-2)) !important;
  border:1px solid rgba(184,135,58,.30);
}

/* ================ FORMS ================ */
.field input, .field select, .field textarea{
  background: rgba(255,253,248,.85);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--gold);
  background: #FFF;
  box-shadow: 0 0 0 4px rgba(184,135,58,.15);
}

/* ================ FOOTER ================ */
.site-footer{
  background: linear-gradient(180deg, var(--bg-elevated), var(--surface-2));
  border-top: 1px solid rgba(184,135,58,.20);
}
.footer-social a{ transition: transform .22s var(--ease), background .22s, color .2s, border-color .2s; }
.footer-social a:hover{ transform: translateY(-3px); background: var(--gradient-gold); color:#FFF; border-color: transparent; }
.footer-heading{
  background: var(--gradient-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ================ FLOATING UI ================ */
.progress-bar{ background: var(--gradient-gold); box-shadow: 0 0 12px rgba(184,135,58,.5); }
.top-btn{
  background: var(--surface);
  border:1px solid var(--border-strong);
  box-shadow: 0 12px 30px -14px rgba(15,42,36,.30);
}
.top-btn:hover{ background: var(--gradient-gold); color:#FFF; border-color:transparent; transform: translateY(-2px); }

/* ================ SMALL TOUCHES ================ */
.case-tag, .blog-tag{
  color: var(--teal);
  border-color: rgba(15,92,78,.35);
  background: rgba(15,92,78,.06);
}
.tool-cta{ color: var(--gold-deep); }
.pillar-num{
  background: var(--gradient-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.value-title{
  background: var(--gradient-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
::selection{ background: var(--gold); color:#FFF; }

/* Container tightening on huge screens */
@media(min-width:1400px){ .container-page{ max-width:1280px; } }

/* Full wordmark logo image */
.logo{ display:inline-flex; align-items:center; gap:0; }
.ow-full-logo{
  height:68px; width:auto; display:block;
  transition: transform .32s var(--ease), filter .32s var(--ease), height .28s var(--ease);
  filter: drop-shadow(0 4px 12px rgba(15,42,36,.10));
}
.logo:hover .ow-full-logo{ transform: scale(1.04); filter: drop-shadow(0 8px 20px rgba(184,135,58,.35)); }
.site-header.scrolled .ow-full-logo{ height:54px; }
.site-footer .ow-full-logo{ height:64px; }
@media(max-width:640px){ .ow-full-logo{ height:48px; } .site-footer .ow-full-logo{ height:50px; } }

/* Discount badge on pricing cards */
.discount-badge{
  position:absolute; top:16px; right:16px;
  background: linear-gradient(135deg, #E53E3E, #B8383B);
  color:#fff; font-size:11px; font-weight:700; letter-spacing:.06em;
  padding:6px 10px; border-radius:999px; text-transform:uppercase;
  box-shadow: 0 8px 20px -6px rgba(229,62,62,.5);
  z-index:2;
}
.price-original{
  display:inline-block; color:var(--text-faint);
  text-decoration:line-through; font-size:16px;
  margin-right:8px; opacity:.7;
}

/* ================================================================
   Static-site conversion additions (functional JS-driven tabs/pills)
   ================================================================ */
#pricingTabs.tabs{display:inline-flex;}
[data-panel]{margin-top:0;}
.mobile-menu{padding:40px;}
.newsletter-form button{white-space:nowrap;}
.contact-row{text-decoration:none;color:inherit;}
.tool-tag{display:inline-block;}
a.card-lift{cursor:pointer;}
@media(max-width:767px){
  .hero-stats{max-width:none;}
}

/* ================================================================
   FAQ accordion (used on home + services, each with distinct content)
   ================================================================ */
.faq-list{max-width:800px;margin-inline:auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{
  border:1px solid var(--border);
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,253,248,.75));
  overflow:hidden;
  transition:border-color .24s var(--ease), box-shadow .24s var(--ease);
}
.faq-item.open{border-color:rgba(184,135,58,.4); box-shadow:0 16px 34px -26px rgba(15,42,36,.28);}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; background:none; border:none; text-align:left; cursor:pointer;
  font-family:var(--font-sans); font-size:16px; font-weight:600; color:var(--text);
}
.faq-q span:first-child{padding-right:8px;}
.faq-icon{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center;
  color:var(--gold-deep); transition:transform .28s var(--ease), background .22s, color .22s, border-color .22s;
}
.faq-icon svg{width:14px;height:14px;transition:transform .28s var(--ease);}
.faq-item.open .faq-icon{background:var(--gradient-gold); color:#fff; border-color:transparent; transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .32s var(--ease);}
.faq-a p{margin:0; padding:0 24px 22px; color:var(--text-muted); font-size:15px; line-height:1.7; max-width:640px;}
.faq-note{margin-top:28px;}
.faq-note a{color:var(--gold-deep); font-weight:600;}

/* ================================================================
   "How it works" step process (contact page, above the form)
   ================================================================ */
.steps-row{display:grid; grid-template-columns:1fr; gap:52px; position:relative;}
@media(min-width:760px){
  .steps-row{grid-template-columns:repeat(4,1fr); gap:20px;}
  .steps-row::before{
    content:''; position:absolute; top:38px; left:12%; right:12%; height:0;
    border-top:2px dashed rgba(184,135,58,.35); z-index:0;
  }
}
.step-item{position:relative; text-align:center; z-index:1;}
.step-ghost{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-weight:600; font-size:64px; line-height:1;
  color:rgba(15,42,36,.07); z-index:0; user-select:none; pointer-events:none;
}
.step-icon{
  position:relative; width:76px; height:76px; margin:0 auto; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  background:var(--gradient-gold); color:#fff;
  box-shadow:0 16px 32px -16px rgba(184,135,58,.55);
}
.step-icon svg{width:30px; height:30px;}
.step-item .card-title{margin-top:20px; margin-bottom:6px;}
.step-item .card-desc{max-width:230px; margin-inline:auto;}
.step-tag{
  display:inline-block; margin-top:12px; font-family:var(--font-mono); font-size:12px;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--teal);
}

/* ================================================================
   PREMIUM UPGRADE PACK (v6)
   - Smoother, faster micro-interactions
   - FAQ containers with animated + / × icon
   - Contact page hero, form, and info cards elevated
   ================================================================ */

:root{
  --ease-premium: cubic-bezier(.22,.61,.36,1);
  --shadow-premium: 0 30px 60px -30px rgba(24,18,7,.28), 0 12px 24px -18px rgba(24,18,7,.18);
  --shadow-soft: 0 10px 30px -18px rgba(24,18,7,.22);
  --gradient-gold: linear-gradient(135deg,#D4A857 0%,#B8873A 55%,#8A6428 100%);
  --gradient-surface: linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,248,241,.85));
  --gold-deep:#8A6428;
}

/* Slightly snappier global feel */
.card-lift{ transition: transform .18s var(--ease-premium), box-shadow .22s var(--ease-premium), border-color .2s var(--ease-premium); }
.card-lift:hover{ transform: translateY(-4px); box-shadow: var(--shadow-premium); }
.btn-gold, .btn-ghost-gold{ transition: transform .16s var(--ease-premium), box-shadow .18s var(--ease-premium), background .18s, border-color .18s, color .18s; }
.btn-gold{ background: var(--gradient-gold); border-color: transparent; box-shadow: 0 10px 24px -14px rgba(184,135,58,.55); }
.btn-gold:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(184,135,58,.7); }
.btn-ghost-gold:hover{ transform: translateY(-2px); }

.reveal.in{ animation: reveal-up .38s var(--ease-premium) both; }
@keyframes reveal-up{ from{opacity:0; transform: translate3d(0,10px,0);} to{opacity:1; transform:none;} }

/* ---------- FAQ premium containers with + icon ---------- */
.faq-list{ max-width:660px; gap:12px; }
.faq-item{
  border:1px solid rgba(24,18,7,.08);
  border-radius:16px;
  background: var(--gradient-surface);
  box-shadow: var(--shadow-soft);
  transition: border-color .22s var(--ease-premium), box-shadow .22s var(--ease-premium), transform .22s var(--ease-premium);
  position:relative;
}
.faq-item::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(135deg, rgba(184,135,58,.35), transparent 40%, rgba(46,129,119,.18));
  opacity:0; transition:opacity .25s var(--ease-premium);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude; padding:1px;
}
.faq-item:hover{ transform: translateY(-2px); box-shadow: var(--shadow-premium); }
.faq-item:hover::before, .faq-item.open::before{ opacity:1; }
.faq-item.open{ border-color: transparent; }

.faq-q{
  padding:16px 20px;
  font-size:14.5px; font-weight:600;
  gap:16px;
  transition: color .18s var(--ease-premium);
}
.faq-q:hover{ color: var(--gold-deep); }

/* Hide the shipped chevron SVG and draw a real +/× with pseudo elements */
.faq-icon{
  width:28px; height:28px; border-radius:9px;
  border:1px solid rgba(184,135,58,.35);
  background: rgba(184,135,58,.06);
  color: var(--gold-deep);
  position:relative;
  transition: background .22s var(--ease-premium), border-color .22s var(--ease-premium), transform .28s var(--ease-premium), box-shadow .22s var(--ease-premium);
}
.faq-icon svg{ display:none; }
.faq-icon::before, .faq-icon::after{
  content:""; position:absolute; left:50%; top:50%;
  width:11px; height:2px; border-radius:2px;
  background: currentColor;
  transform: translate(-50%,-50%);
  transition: transform .28s var(--ease-premium), opacity .2s var(--ease-premium);
}
.faq-icon::after{ transform: translate(-50%,-50%) rotate(90deg); }
.faq-item.open .faq-icon{
  background: var(--gradient-gold); color:#fff; border-color: transparent;
  box-shadow: 0 10px 20px -10px rgba(184,135,58,.7);
  transform: rotate(180deg);
}
.faq-item.open .faq-icon::before{ transform: translate(-50%,-50%) rotate(45deg); }
.faq-item.open .faq-icon::after{ transform: translate(-50%,-50%) rotate(-45deg); }

.faq-a{ transition: max-height .35s var(--ease-premium); }
.faq-a p{ padding: 0 20px 18px; font-size:14px; line-height:1.65; }

/* ---------- Contact page premium ---------- */
.contact-grid{ gap:40px; }
.contact-grid > .card-lift{
  border-radius:28px !important;
  padding:44px !important;
  background: var(--gradient-surface);
  border:1px solid rgba(24,18,7,.08);
  box-shadow: var(--shadow-premium);
  position:relative; overflow:hidden;
}
.contact-grid > .card-lift::after{
  content:""; position:absolute; top:-120px; right:-120px; width:320px; height:320px;
  background: radial-gradient(circle, rgba(184,135,58,.20), transparent 65%);
  pointer-events:none;
}
.contact-grid > .card-lift > form{ position:relative; z-index:1; }

/* Form fields */
.field input, .field select, .field textarea{
  padding:15px 18px; border-radius:14px;
  background: #fff;
  border:1px solid rgba(24,18,7,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transition: border-color .18s var(--ease-premium), box-shadow .22s var(--ease-premium), transform .1s var(--ease-premium);
}
.field input:hover, .field select:hover, .field textarea:hover{ border-color: rgba(184,135,58,.35); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(184,135,58,.15);
}
.field label{ color: var(--gold-deep); }
.contact-grid .btn-gold{ padding:16px 30px; font-size:15px; letter-spacing:.02em; }

/* Contact info rows */
.contact-info{ gap:14px; }
.contact-row{
  padding:22px !important;
  border-radius:20px !important;
  background: var(--gradient-surface);
  border:1px solid rgba(24,18,7,.08);
  box-shadow: var(--shadow-soft);
  transition: transform .18s var(--ease-premium), box-shadow .22s var(--ease-premium), border-color .18s;
}
.contact-row:hover{ transform: translateY(-3px) translateX(2px); border-color: rgba(184,135,58,.4); box-shadow: var(--shadow-premium); }
.contact-row .icon-lg{
  width:52px; height:52px; border-radius:16px;
  background: var(--gradient-gold); color:#fff;
  border:none; box-shadow: 0 10px 22px -12px rgba(184,135,58,.6);
  transition: transform .22s var(--ease-premium);
}
.contact-row:hover .icon-lg{ transform: rotate(-6deg) scale(1.05); }
.contact-row .v{ font-family: var(--font-display); font-size:18px; color: var(--text); }

/* Contact hero glow — stronger + softer */
.hero .header-glow{ opacity:.35; }

/* Steps row on contact */
.step-item{ transition: transform .22s var(--ease-premium); }
.step-item:hover{ transform: translateY(-4px); }
.step-icon{ transition: transform .28s var(--ease-premium), box-shadow .28s var(--ease-premium); }
.step-item:hover .step-icon{ transform: rotate(-6deg) scale(1.06); box-shadow: 0 22px 44px -18px rgba(184,135,58,.65); }

/* Nav underline snappier */
.nav a::after{ transition: width .22s var(--ease-premium); }

/* Marquee — a touch calmer */
.marquee-track{ animation-duration: 45s; }

/* Small mobile refinements */
@media (max-width: 640px){
  .faq-q{ padding:18px 20px; font-size:15px; }
  .faq-a p{ padding: 0 20px 20px; font-size:15px; }
  .contact-grid > .card-lift{ padding:28px !important; border-radius:22px !important; }
  .contact-row{ padding:18px !important; }
}

/* ============================================================
   v9 refinements — FAQ centered, Quick Links premium, hero fix
   ============================================================ */

/* ---- FAQ: centered question + answer ---- */
.faq-list{ max-width: 620px; }
.faq-item{ padding-right: 56px; position:relative; }
.faq-q{
  justify-content: center !important;
  text-align: center;
  padding: 17px 22px !important;
  gap: 0 !important;
}
.faq-q > span:first-child{ padding-right: 0 !important; }
.faq-icon{
  position: absolute;
  right: 14px; top: 50%;
  width:26px; height:26px; border-radius:8px;
  transform: translateY(-50%);
  margin: 0 !important;
}
.faq-item.open .faq-icon{ transform: translateY(-50%) rotate(180deg); }
.faq-a p{
  text-align: center;
  margin-inline: auto;
  max-width: 560px;
  padding: 0 24px 20px !important;
}
@media (max-width: 640px){
  .faq-item{ padding-right: 48px; }
  .faq-icon{ right: 10px; width:26px; height:26px; border-radius:8px; }
  .faq-q{ padding: 15px 18px !important; }
  .faq-a p{ padding: 0 18px 16px !important; }
}

/* ---- Quick Links: premium tile grid ---- */
.quicklinks-card{
  padding: 40px !important;
  border-radius: 28px !important;
  background: var(--gradient-surface);
  border: 1px solid rgba(24,18,7,.08);
  box-shadow: var(--shadow-premium);
  position: relative;
  overflow: hidden;
}
.quicklinks-card::before{
  content:""; position:absolute; top:-140px; right:-140px;
  width:360px; height:360px;
  background: radial-gradient(circle, rgba(184,135,58,.18), transparent 65%);
  pointer-events:none;
}
.quicklinks-card::after{
  content:""; position:absolute; bottom:-140px; left:-140px;
  width:360px; height:360px;
  background: radial-gradient(circle, rgba(46,129,119,.12), transparent 65%);
  pointer-events:none;
}
.quicklinks-label{
  display:inline-flex; align-items:center; gap:10px;
  color: var(--gold-deep) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 24px !important;
  position: relative; z-index:1;
}
.quicklinks-label::before{
  content:""; width:28px; height:2px; border-radius:2px;
  background: var(--gradient-gold);
}
.quicklinks-list{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px !important;
  row-gap: 12px !important;
  column-gap: 12px !important;
  line-height: normal !important;
  position: relative; z-index:1;
}
.quicklinks-list a{
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(24,18,7,.06);
  color: var(--text) !important;
  font-size: 14.5px !important;
  font-weight: 500;
  white-space: normal !important;
  box-shadow: 0 4px 12px -8px rgba(24,18,7,.15);
  transition: transform .22s var(--ease-premium), box-shadow .22s var(--ease-premium),
              border-color .22s var(--ease-premium), color .18s;
}
.quicklinks-list a::before{
  content:""; flex-shrink:0;
  width:8px; height:8px; border-radius:50%;
  background: var(--gradient-gold);
  box-shadow: 0 0 0 3px rgba(184,135,58,.12);
  transition: transform .22s var(--ease-premium);
}
.quicklinks-list a:hover{
  transform: translateY(-3px);
  border-color: rgba(184,135,58,.4);
  box-shadow: 0 16px 30px -18px rgba(184,135,58,.4);
  color: var(--gold-deep) !important;
  text-decoration: none !important;
}
.quicklinks-list a:hover::before{ transform: scale(1.2); }
.quicklinks-list a:not(:last-child)::after{ content: none !important; margin: 0 !important; }
@media (max-width: 900px){
  .quicklinks-list{ grid-template-columns: repeat(2, 1fr); }
  .quicklinks-card{ padding: 28px !important; border-radius: 22px !important; }
}
@media (max-width: 560px){
  .quicklinks-list{ grid-template-columns: 1fr; }
}

/* ---- Contact hero overlap fix (bigger logo made nav taller) ---- */
.hero{ padding-top: 200px; }
@media (max-width: 900px){
  .hero{ padding-top: 150px; }
}

/* ---- First-section-on-page clearance for the fixed header (contact.html:
   "How It Works" now leads the page, ahead of the hero) ---- */
.page-top-section{ padding-top: 200px !important; }
@media (max-width: 900px){
  .page-top-section{ padding-top: 150px !important; }
}

/* ---- FAQ: bigger container + slightly larger, easier-to-read text ---- */
.faq-list{ max-width: 1040px; gap: 18px; }
.faq-item{ border-radius: 20px; }
.faq-q{ font-size: 17px !important; padding: 14px 24px !important; }
.faq-icon{ width:30px; height:30px; right: 16px !important; }
.faq-item{ padding-right: 56px !important; }
.faq-a p{ font-size: 15.5px !important; line-height: 1.7; max-width: 800px; padding: 0 30px 18px !important; }
@media (max-width: 640px){
  .faq-q{ font-size: 15px !important; padding: 12px 16px !important; }
  .faq-icon{ width:24px; height:24px; }
  .faq-item{ padding-right: 42px !important; }
  .faq-a p{ font-size: 14.5px !important; padding: 0 18px 16px !important; }
}

/* ============ Premium hover & animation upgrades (v20) ============ */
.card-lift{ transition: transform .55s cubic-bezier(.19,1,.22,1), box-shadow .55s cubic-bezier(.19,1,.22,1), border-color .4s ease; will-change: transform; }
.card-lift:hover{ transform: translateY(-8px) scale(1.012) !important; box-shadow: 0 30px 60px -25px rgba(184,135,58,.35), 0 12px 28px -18px rgba(0,0,0,.18); border-color: rgba(184,135,58,.45); }
.svc-icon{ transition: transform .6s cubic-bezier(.19,1,.22,1), background .4s ease, color .4s ease; }
.card-lift:hover .svc-icon{ transform: rotate(-6deg) scale(1.08); }
.step-icon{ transition: transform .7s cubic-bezier(.19,1,.22,1), box-shadow .5s ease; }
.step-item:hover .step-icon{ transform: rotate(8deg) scale(1.1); box-shadow: 0 12px 30px -12px rgba(184,135,58,.55); }
.btn-gold, .btn-ghost-gold{ transition: transform .35s cubic-bezier(.19,1,.22,1), box-shadow .35s ease, background .35s ease, color .35s ease; }
.btn-gold:hover, .btn-ghost-gold:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -18px rgba(184,135,58,.55); }
.contact-row{ transition: transform .5s cubic-bezier(.19,1,.22,1), box-shadow .5s ease, border-color .4s ease; }
.contact-row:hover{ transform: translateX(6px); }
.quicklinks-list a{ transition: color .3s ease, transform .35s cubic-bezier(.19,1,.22,1); }
.quicklinks-list a:hover{ transform: translateX(4px); }

/* Pricing overview section on home */
.pricing-overview{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:28px; margin-top: 32px; }
@media (max-width: 900px){ .pricing-overview{ grid-template-columns: 1fr; } }
.price-card{ position:relative; padding: 36px 32px; border-radius: 20px; background: var(--surface, #fff); border:1px solid rgba(184,135,58,.18); display:flex; flex-direction:column; gap:18px; overflow:hidden; }
.price-card .plan-name{ font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color: var(--gold-deep, #8a6423); }
.price-card .plan-price{ font-family: var(--font-serif, 'Fraunces', serif); font-size:44px; line-height:1; font-weight:500; color: var(--ink, #1a1a1a); }
.price-card .plan-price small{ font-size:14px; font-weight:400; color: var(--muted, #666); margin-left:4px; }
.price-card .plan-desc{ color: var(--muted, #666); font-size:14.5px; line-height:1.55; }
.price-card ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.price-card ul li{ font-size:14.5px; color: var(--ink, #1a1a1a); padding-left:26px; position:relative; line-height:1.5; }
.price-card ul li::before{ content:''; position:absolute; left:0; top:7px; width:14px; height:14px; border-radius:50%; background: var(--gradient-gold, linear-gradient(135deg,#e6c266,#b8873a)); opacity:.9; }
.price-card ul li::after{ content:''; position:absolute; left:3px; top:11px; width:8px; height:4px; border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; transform: rotate(-45deg); }
.price-card .plan-cta{ margin-top:auto; }
.price-card.popular{ border-color: rgba(184,135,58,.55); background: linear-gradient(180deg, rgba(230,194,102,.08), rgba(255,255,255,1)); box-shadow: 0 22px 50px -30px rgba(184,135,58,.4); transform: translateY(-6px); }
.price-card.popular .plan-flag{ position:absolute; top:16px; right:16px; font-family: var(--font-mono, monospace); font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding:6px 12px; border-radius:999px; background: var(--gradient-gold, linear-gradient(135deg,#e6c266,#b8873a)); color:#fff; }

/* ================================================================
   ORIGINWORKS — SITE-WIDE DARK THEME
   Placed last on purpose so it wins the cascade over every earlier
   :root block and hardcoded light-mode color in this file. Because
   most components already read var(--bg)/var(--surface)/var(--text)/
   etc., re-declaring the core palette here re-themes the whole site;
   the handful of components below use hardcoded literal colors
   instead of variables, so those get explicit dark overrides too.
   ================================================================ */
:root{
  color-scheme: dark;
  --bg:#05050a;
  --bg-elevated:#0c0c14;
  --surface:#0f0f18;
  --surface-2:#15151f;
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.16);
  --text:#F5F4F8;
  --text-muted:#A6A8B8;
  --text-faint:#71738A;
  --gold-deep:#F0CB78;          /* brighter gold for hover text on dark */
  --teal:#34D399;                /* brighter emerald so it stays legible on dark */
  --teal-dim:#0FA678;
  --shadow-lux: 0 30px 80px -40px rgba(0,0,0,.6), 0 12px 30px -18px rgba(124,58,237,.25);
  --shadow-premium: 0 30px 60px -30px rgba(0,0,0,.55), 0 12px 24px -18px rgba(0,0,0,.4);
  --shadow-soft: 0 10px 30px -18px rgba(0,0,0,.45);
  --gradient-surface: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

/* Ambient tint stays subtle on the new dark base (already uses var(--bg)) */

/* ---- Header ---- */
.site-header{ background: rgba(5,5,10,.72); }
.site-header.scrolled{ background: rgba(5,5,10,.92); box-shadow: 0 10px 40px -20px rgba(0,0,0,.6); }
.mobile-menu{ background: var(--bg-elevated); }

/* ---- Buttons ---- */
.btn-ghost-gold{ background: rgba(255,255,255,.05); border-color: var(--border-strong); color: var(--text); }
.btn-ghost-gold:hover{ background: rgba(230,194,102,.08); border-color: var(--gold-bright); color: var(--gold-bright); }

/* ---- Cards (drives services / case studies / blog / pricing tiles) ---- */
.card-lift{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-color: var(--border); }
.card-lift.featured{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); }
.faq-item{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }

/* ---- Hero chart badge pills ---- */
.chart-badge{ background: rgba(15,15,24,.85); border-color: var(--border); box-shadow: 0 20px 40px -20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); }

/* ---- Form fields (contact page) ---- */
.field input, .field select, .field textarea{
  background: rgba(255,255,255,.05);
  border-color: var(--border-strong);
  color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus{
  background: rgba(255,255,255,.08);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--text-faint); }

/* ---- Quick links tiles ---- */
.quicklinks-list a{ background: rgba(255,255,255,.04); border-color: var(--border); }

/* ---- Pricing cards (use --ink/--muted fallbacks, not the shared vars) ---- */
.price-card{ background: var(--surface); border-color: rgba(230,194,102,.28); }
.price-card.popular{ background: linear-gradient(180deg, rgba(230,194,102,.10), rgba(15,15,24,1)); }
.price-card .plan-price{ color: var(--text); }
.price-card .plan-price small{ color: var(--text-muted); }
.price-card .plan-desc{ color: var(--text-muted); }
.price-card ul li{ color: var(--text); }

/* ---- Exit popup glow reads better slightly dimmer on dark ---- */
.exit-popup-overlay{ background: rgba(0,0,0,.7); }

/* ---- Global particle network background ----
   One fixed canvas behind the entire page (all sections, header,
   footer). z-index:-1 keeps it behind normal in-flow content without
   needing every section to be re-stacked. */
.bg-particles{
  position:fixed; inset:0; z-index:-1;
  width:100vw; height:100vh;
  display:block; pointer-events:none;
}

/* Header/footer made translucent (instead of solid) so the particle
   network is visible behind them too, not just in open page space. */
.site-header{ background: rgba(5,5,10,.38) !important; }
.site-header.scrolled{ background: rgba(5,5,10,.62) !important; }
.mobile-menu{ background: rgba(8,8,14,.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.site-footer{
  background: rgba(8,8,14,.40) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.price-card{ transition: transform .55s cubic-bezier(.19,1,.22,1), box-shadow .55s ease, border-color .4s ease; }
.price-card:hover{ transform: translateY(-12px) !important; box-shadow: 0 32px 60px -25px rgba(184,135,58,.4); border-color: rgba(184,135,58,.5); }
.price-card.popular:hover{ transform: translateY(-16px) !important; }

.blog-tags-line{color:var(--text-muted);font-size:14px;margin-top:32px;padding-top:20px;border-top:1px solid var(--border)}
.blog-tags-line strong{color:var(--text);font-weight:600}

/* CMS-driven free-form containers (Pages & Meta > Content Containers) */
.cms-container{ padding: 28px 0; border-top: 1px solid rgba(184,135,58,.16); }
.cms-container:first-child{ border-top:none; padding-top:0; }
.cms-container h3{ font-family: var(--font-serif, 'Fraunces', serif); font-size: 22px; font-weight:500; color: var(--text,#1B1D24); margin: 0 0 10px; }
.cms-container p{ color: var(--text-muted,#5A6072); line-height:1.7; margin:0; }

/* ---- SEO Content section: admin-editable heading + bullet points,
   rendered above the CTA on every main page. Heading sits full width,
   with the bullet checklist stacked directly below it — a thin gold/teal
   accent stripe and hairline-divided rows keep it feeling premium. No
   JS-gated animation classes, so it never depends on scroll timing to
   appear. Bullets lay out in two columns on wider screens so a 6-item
   list doesn't run into one long column. ----*/
.seo-content-card{
  padding:44px; overflow:hidden; position:relative;
  border-color:rgba(198,161,91,.22);
}
.seo-content-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold-bright),var(--gold) 45%,var(--teal));
}
.seo-content-card::after{
  content:''; position:absolute; top:-70px; right:-70px; width:240px; height:240px;
  background:radial-gradient(circle,rgba(198,161,91,.14) 0%,transparent 70%);
  pointer-events:none;
}
.seo-content-card > .h2{ max-width:720px; position:relative; z-index:1; }
.seo-bullets-label{
  display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:16px;
  position:relative; z-index:1;
}
.seo-bullets{
  display:grid; grid-template-columns:1fr; column-gap:40px;
  position:relative; z-index:1;
}
@media(min-width:700px){ .seo-bullets{ grid-template-columns:1fr 1fr; } }
.seo-bullets li{
  display:flex; align-items:flex-start; gap:14px;
  padding:13px 0; border-top:1px solid var(--border);
  font-size:14.5px; line-height:1.55; color:var(--text);
}
.seo-bullets li:nth-child(1){ border-top:none; padding-top:0; }
@media(min-width:700px){ .seo-bullets li:nth-child(2){ border-top:none; padding-top:0; } }
.seo-bullets li span:last-child{ padding-top:2px; }
.seo-bullet-icon{
  flex-shrink:0; width:24px; height:24px; margin-top:1px;
  border-radius:50%; border:1px solid rgba(198,161,91,.4);
  background:rgba(198,161,91,.07); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.seo-bullets li:hover .seo-bullet-icon{ background:var(--gold); border-color:var(--gold); color:#FFFFFF; }
.seo-bullet-icon svg{
  width:12px; height:12px; fill:none; stroke:currentColor;
  stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
}

/* ---- FAQ container: force centered alignment (fix) ---- */
.faq-list{
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  align-items: center;
}

/* ================================================================
   ORIGINWORKS — GLASSMORPHISM + INTERACTION POLISH
   Real backdrop-filter glass, buttons that lift on hover, and a
   scroll-performance switch that turns blur off for the ~150ms a
   scroll gesture is actually moving (see is-scrolling in main.js),
   then fades it back in once you stop. Backdrop-filter is the single
   most expensive thing a browser recomputes during scroll when many
   elements use it at once — this keeps the glass look without paying
   that cost while you're actually scrolling.
   ================================================================ */

/* ================================================================
   ORIGINWORKS — GLASSMORPHISM + INTERACTION POLISH
   Buttons that lift on hover, and glass panels. Note on backdrop-
   filter: it doesn't just cost extra during scroll — with the
   full-page particle canvas animating behind everything, ANY element
   using backdrop-filter has to resample its backdrop on basically
   every rendered frame (the canvas repaints continuously, so the
   region "behind" the glass keeps changing even when nothing is
   scrolling). That's fine for one or two elements (header, footer,
   the exit popup) but was applied to every card/badge/input too —
   with 6-10+ of those on screen at once, that's what caused the
   scroll lag. Fix: real blur stays only on the rare, low-count
   elements; the many repeated cards/badges/inputs get the same
   translucent-glass look (background + border + shadow) without the
   live blur, which costs nothing per frame no matter what's moving
   behind it.
   ================================================================ */

.exit-popup{
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.btn-ghost-gold{
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
}
.card-lift,
.faq-item,
.chart-badge,
.btn-ghost-gold,
.exit-popup,
.field select{ color-scheme: dark; }
.field select option{ background:#0f0f18; color:#F5F4F8; }
.field input, .field select, .field textarea{
  transition: transform .3s var(--ease,ease), box-shadow .3s var(--ease,ease),
              border-color .3s var(--ease,ease);
}
.card-lift{
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 50px -30px rgba(0,0,0,.55);
}

/* Even the rare blurred elements pause their blur for the ~150ms a
   scroll gesture is actively moving (main.js toggles this class),
   restoring it the instant scrolling settles. */
html.is-scrolling .btn-ghost-gold,
html.is-scrolling .exit-popup{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---- Buttons lift on hover (unified across every button-like control) ---- */
.btn-gold, .btn-ghost-gold, .top-btn, .pill, .tab,
.footer-social a, .quicklinks-list a, .contact-row{
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1),
              border-color .22s ease, background .22s ease, color .2s ease;
}
.btn-gold:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 46px -12px rgba(184,135,58,.55);
}
.btn-ghost-gold:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px -16px rgba(0,0,0,.5);
}
.quicklinks-list a:hover{ transform: translateY(-4px); border-color: rgba(230,194,102,.45); }
.contact-row:hover{ transform: translateY(-3px); }
.pill:hover, .tab:hover{ transform: translateY(-2px); }
.footer-social a:hover{ transform: translateY(-4px) scale(1.05); }
.quicklinks-card{ transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease; }
.quicklinks-card:hover{ transform: translateY(-6px); box-shadow: 0 34px 70px -30px rgba(0,0,0,.55); border-color: rgba(230,194,102,.35); }

/* ---- Fully responsive tuning ----
   Blur is one of the most GPU-expensive CSS properties on phones, so
   scale down what little of it remains instead of leaving desktop
   values everywhere. */
@media (max-width: 640px){
  .exit-popup{
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
  }
  .site-header{ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .site-footer{ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .btn-gold:hover, .btn-ghost-gold:hover{ transform: translateY(-2px); } /* smaller lift, touch screens don't hover anyway */
}

@media (prefers-reduced-motion: reduce){
  .card-lift, .btn-gold, .btn-ghost-gold, .quicklinks-list a, .contact-row,
  .pill, .tab, .footer-social a{ transition: none; }
}

/* ================================================================
   ORIGINWORKS — MAKE EVERY REMAINING CONTAINER TRANSPARENT/GLASS
   A few panels still painted a solid var(--surface)/var(--bg-elevated)
   background (opaque), which blocked the particle canvas behind them
   completely — inconsistent with the rest of the page, which is all
   translucent glass. This block brings the CTA block, pricing cards,
   quick-links card, marquee bar, and a few small chrome controls onto
   the same translucent treatment as everything else.
   ================================================================ */
.cta-block{
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(184,135,58,.14), transparent 60%),
    radial-gradient(600px 300px at 0% 100%, rgba(15,92,78,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important;
}
.quicklinks-card{ background: rgba(255,255,255,.05) !important; }
.price-card{ background: rgba(255,255,255,.05) !important; }
.price-card.popular{ background: linear-gradient(180deg, rgba(230,194,102,.10), rgba(255,255,255,.04)) !important; }
.marquee{ background: rgba(255,255,255,.03) !important; }
.tabs{ background: rgba(255,255,255,.05); }
.top-btn{ background: rgba(255,255,255,.06); }
.exit-popup-close{ background: rgba(255,255,255,.06); }
.exit-popup-perks li{ background: rgba(255,255,255,.05); }

/* A couple of remaining pill/badge containers were missing the hover
   lift every other box already has. */
.chart-badge{
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.chart-badge:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -20px rgba(0,0,0,.6);
  border-color: rgba(230,194,102,.4);
}
.eyebrow{
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease;
}
.eyebrow:hover{
  transform: translateY(-2px);
  border-color: rgba(184,135,58,.5);
}

/* ================================================================
   FAQ — full-width containers to match other section cards, and
   left-aligned question/answer text. The stylesheet accumulated
   several earlier "centered FAQ" passes (search "FAQ: centered" /
   "force centered alignment" above) that shrank the list and
   center-aligned the text — this block is intentionally the last
   thing in the file so it always wins the cascade and undoes them.
   ================================================================ */
.faq-list{
  max-width:none !important;
  width:100%;
  align-items:stretch;
  margin-left:0 !important;
  margin-right:0 !important;
}
.faq-item{ padding-right:0 !important; }
.faq-q{
  justify-content:space-between !important;
  text-align:left !important;
  gap:16px !important;
  padding:20px 24px !important;
}
.faq-q > span:first-child{ padding-right:8px !important; text-align:left !important; }
.faq-icon{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  left:auto !important;
  bottom:auto !important;
  transform:none !important;
  margin:0 !important;
}
.faq-item.open .faq-icon{ transform:rotate(180deg) !important; }
.faq-a p{
  text-align:left !important;
  margin-inline:0 !important;
  max-width:none !important;
  padding:0 24px 22px !important;
}
@media(max-width:640px){
  .faq-q{ padding:18px 20px !important; }
  .faq-a p{ padding:0 20px 20px !important; }
}