/* =========================================================
   ClipsEdit — Digital Marketing Page
   Luxury / Futuristic / Glassmorphism Design System
========================================================= */

:root{
  --bg: #050505;
  --bg-soft: #0b0b0d;
  --text: #ffffff;
  --text-soft: #bfbfbf;
  --gold: #D8B26A;
  --gold-soft: #f0d9a8;
  --blue: #5DA9FF;
  --purple: #8A6BFF;

  --glass-bg: rgba(255,255,255,0.045);
  --glass-bg-strong: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.12);
  --card-radius: 22px;

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,1,.36,1);

  --container: 1240px;

  /* =========================================================
     PREMIUM REDESIGN TOKENS (V5)
     Additive only -- every variable above stays exactly as-is so nothing
     that already reads --gold/--glass-bg/--card-radius/etc. changes
     behavior. These are new tiers layered on top for the redesign pass.
  ========================================================= */
  --ease-premium: cubic-bezier(.19,1,.22,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --glass-bg-soft: rgba(255,255,255,0.025);
  --glass-border-strong: rgba(255,255,255,0.22);
  --glass-hairline: rgba(255,255,255,0.08);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;

  --space-section: clamp(110px, 12vw, 160px);

  /* soft, cinematic depth shadows -- layered (near + far) rather than one flat drop-shadow */
  --shadow-sm: 0 10px 24px -14px rgba(0,0,0,.55);
  --shadow-md: 0 30px 60px -24px rgba(0,0,0,.75), 0 8px 20px -12px rgba(0,0,0,.5);
  --shadow-lg: 0 50px 100px -30px rgba(0,0,0,.8), 0 14px 30px -16px rgba(0,0,0,.55);
  --shadow-glow-gold: 0 0 0 1px rgba(216,178,106,.18), 0 20px 60px -24px rgba(216,178,106,.35);

  --tracking-tight: -0.02em;
  --tracking-normal: -0.01em;
  --tracking-wide: .06em;
  --tracking-wider: .12em;

  /* user-controlled text size + contrast (Page Settings panel) -- 1 = default */
  --font-scale-user: 1;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  /* premium body rhythm: fluid clamp keeps type size smooth across every viewport
     instead of jumping at fixed breakpoints */
  font-size: calc(clamp(16px, 0.97vw + 0.6rem, 17.5px) * var(--font-scale-user, 1));
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg{ display:block; max-width:100%; }

a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; background:none; border:none; color:inherit; cursor: pointer; }
ul{ list-style:none; margin:0; padding:0; }

/* ---------- Accessibility: skip link + focus states ---------- */
.skip-link{
  position: fixed; top: -60px; left: 16px; z-index: 10000;
  background: var(--gold); color: #1a1408; font-weight: 700;
  padding: 12px 22px; border-radius: 10px; transition: top .25s var(--ease-out);
}
.skip-link:focus{ top: 16px; }

:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
button:focus-visible, a:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.btn:focus-visible{ outline-offset: 5px; }
input:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1{ letter-spacing: -0.03em; }
h2{ letter-spacing: -0.025em; }

p{ color: var(--text-soft); margin:0 0 1em; line-height: 1.65; }

.gradient-text{
  background: linear-gradient(100deg, var(--gold-soft) 0%, var(--gold) 35%, var(--blue) 70%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}

::selection{ background: var(--gold); color:#050505; }

/* scrollbar */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--gold), var(--blue)); border-radius: 10px; }

/* =========================================================
   PRELOADER
========================================================= */
.preloader{
  position: fixed; inset:0; z-index: 9999;
  background: var(--bg);
  display:flex; flex-direction: column; align-items:center; justify-content:center;
  gap: 28px;
  transition: opacity .9s var(--ease-out), visibility .9s;
}
.preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-mark{
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: .04em;
  display:flex;
  /* V4: cinematic exit -- logo scales up slightly and defocuses as the loader dismisses,
     instead of just fading in place. Reads like a quick camera push-in + rack-focus. */
  transition: transform .7s var(--ease-out), filter .7s var(--ease-out), opacity .55s ease;
}
.preloader-mark span{
  opacity:0; transform: translateY(16px);
  animation: markIn .6s var(--ease-out) forwards;
}
.preloader-mark .dot{ color: var(--gold); }
.preloader-mark span:nth-child(1){animation-delay:.02s}
.preloader-mark span:nth-child(2){animation-delay:.06s}
.preloader-mark span:nth-child(3){animation-delay:.10s}
.preloader-mark span:nth-child(4){animation-delay:.14s}
.preloader-mark span:nth-child(5){animation-delay:.18s}
.preloader-mark span:nth-child(6){animation-delay:.22s}
.preloader-mark span:nth-child(7){animation-delay:.26s}
.preloader-mark span:nth-child(8){animation-delay:.30s}
.preloader-mark span:nth-child(9){animation-delay:.34s}
@keyframes markIn{ to{ opacity:1; transform: translateY(0); } }
.preloader.hide .preloader-mark{
  transform: scale(1.08);
  filter: blur(7px);
  opacity: 0;
}
.preloader-bar{
  width: 220px; height:2px; background: rgba(255,255,255,.1); border-radius:2px; overflow:hidden;
  transition: opacity .4s ease, filter .4s ease;
}
.preloader-bar span{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, var(--gold), var(--blue));
}
.preloader.hide .preloader-bar{ opacity: 0; filter: blur(3px); }
@media (prefers-reduced-motion: reduce){
  .preloader-mark{ transition: opacity .3s ease; }
  .preloader.hide .preloader-mark{ transform: none; filter: none; }
  .preloader-bar{ transition: opacity .3s ease; }
  .preloader.hide .preloader-bar{ filter: none; }
}

/* =========================================================
   CURSOR
========================================================= */
.cursor, .cursor-ring{
  position: fixed; top:0; left:0; pointer-events:none; z-index: 9998;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor{ width:6px; height:6px; background: var(--gold); }
.cursor-ring{ width:34px; height:34px; border: 1px solid rgba(216,178,106,.5); transition: width .25s, height .25s, border-color .25s, background .25s; }
.cursor-ring.active{ width:60px; height:60px; background: rgba(216,178,106,.08); border-color: var(--gold); }
@media (hover:none), (pointer:coarse){
  body{ cursor:auto; }
  .cursor, .cursor-ring{ display:none; }
}

/* =========================================================
   BACKGROUND FX
========================================================= */
.fx-layer{ position: fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
#particles{ position:absolute; inset:0; width:100%; height:100%; }

.aurora{
  position:absolute; border-radius:50%;
  filter: blur(90px);
  opacity:.45;
  mix-blend-mode: screen;
  animation: auroraDrift 22s ease-in-out infinite;
}
.aurora-1{ width:50vw; height:50vw; top:-10%; left:-10%; background: radial-gradient(circle, var(--purple), transparent 70%); }
.aurora-2{ width:45vw; height:45vw; top:20%; right:-15%; background: radial-gradient(circle, var(--blue), transparent 70%); animation-delay: -7s;}
.aurora-3{ width:40vw; height:40vw; bottom:-15%; left:20%; background: radial-gradient(circle, var(--gold), transparent 70%); animation-delay: -14s;}
@keyframes auroraDrift{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(4%, 6%) scale(1.08); }
  66%{ transform: translate(-5%, -3%) scale(0.95); }
}
.noise{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity:.5;
}
.grain{
  position:absolute; inset:-50%;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 2px);
  opacity:.3;
}
/* V5: cinematic vignette -- gently darkens the far edges of the viewport so attention
   pulls toward the center content, the same trick used in film grading and by Apple's
   product pages. Pure CSS, static, costs nothing on scroll. */
.cinematic-vignette{
  position:fixed; inset:0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.35) 100%);
}

/* =========================================================
   NAV
========================================================= */
/* V5: floating glass pill navbar -- always a touch of glass, condenses and
   deepens on scroll rather than snapping from transparent to solid */
.nav{
  position: fixed; top: 18px; left: 50%; z-index: 900;
  transform: translateX(-50%);
  width: min(1260px, calc(100% - 32px));
  /* extra left padding gives the logo room to breathe, per the reference layout */
  padding: 14px 22px 14px 30px;
  border-radius: 100px;
  background: rgba(10,10,13,.5);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-hairline);
  box-shadow: var(--shadow-sm);
  transition: top .5s var(--ease-premium), padding .5s var(--ease-premium),
              background .4s, border-color .4s, box-shadow .5s var(--ease-premium), width .5s var(--ease-premium);
}
.nav.scrolled{
  top: 10px;
  padding: 10px 20px 10px 26px;
  background: rgba(6,6,8,.75);
  border-color: var(--glass-border-strong);
  box-shadow: var(--shadow-md);
}
@media (max-width: 560px){
  .nav{ top:10px; width: calc(100% - 20px); padding: 10px 16px; }
  .nav.scrolled{ top:6px; }
}
.nav-inner{
  max-width: 1440px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
}

/* =========================================================
   V5.2 — PREMIUM LOGO PRESENTATION (corrected sizing method)
   Root-cause fix: the logo file is a wide horizontal lockup (icon + wordmark),
   not a square icon. Earlier versions forced it into an equal width:height box,
   which -- combined with object-fit:contain -- silently shrank it down to fit
   whichever dimension was tighter (the width), making the whole lockup render
   far smaller than intended no matter how big that square box was set.
   Fix: set HEIGHT only and let width follow the image's real aspect ratio
   (width:auto). This is the only way to size a lockup like this correctly
   without distorting it or guessing its exact pixel proportions blind. */
.nav-logo{ display:flex; align-items:center; position:relative; flex-shrink:0; }
.nav-logo::before{
  /* soft ambient glow behind the mark -- the "premium aura" */
  content:""; position:absolute; left:-16px; top:50%; transform: translateY(-50%);
  width: 220px; height: 100px; border-radius:50%;
  background: radial-gradient(ellipse, rgba(216,178,106,.24), rgba(93,169,255,.10) 55%, transparent 75%);
  filter: blur(16px); opacity:.75; pointer-events:none; z-index:0;
  transition: opacity .4s ease, transform .5s var(--ease-premium);
}
.nav-logo:hover::before{ opacity:1; transform: translateY(-50%) scale(1.06); }

.logo-mark{
  position:relative; z-index:1;
  height: clamp(46px, 4vw, 56px); /* height drives the size -- matches the reference */
  width: auto;                     /* never forced/stretched -- true aspect ratio always */
  max-width: none;
  display:block;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(216,178,106,.35)) drop-shadow(0 6px 16px rgba(0,0,0,.5));
  transition: transform .4s var(--ease-premium), filter .4s var(--ease-premium), height .4s var(--ease-premium);
}
.nav-logo:hover .logo-mark{
  transform: scale(1.05);
  filter: drop-shadow(0 0 24px rgba(216,178,106,.55)) drop-shadow(0 8px 20px rgba(0,0,0,.55));
}
.nav.scrolled .logo-mark{ height: clamp(40px, 3.4vw, 48px); }
@media (prefers-reduced-motion: reduce){
  .logo-mark, .nav-logo::before{ transition: opacity .3s ease; }
  .nav-logo:hover .logo-mark{ transform:none; }
}
@media (max-width: 1000px){
  .logo-mark, .nav.scrolled .logo-mark{ height: clamp(38px, 5vw, 46px); }
  .nav-logo::before{ width:170px; height:84px; left:-10px; }
}
@media (max-width: 560px){
  .logo-mark, .nav.scrolled .logo-mark{ height:36px; }
  .nav-logo::before{ width:130px; height:68px; left:-8px; }
}

/* footer: same corrected height-driven sizing, bigger since there's no bar
   height constraint to work around */
.footer-brand .nav-logo::before{ left:-20px; width:250px; height:130px; }
.footer-brand .logo-mark{ height:64px; }
.footer-brand .nav-logo:hover .logo-mark{ transform: scale(1.05); }

.nav-links{ display:flex; gap: 34px; position: relative; }
.nav-links a{
  position:relative; font-size:.92rem; color: var(--text-soft);
  transition: color .3s; z-index: 1;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background: linear-gradient(90deg, var(--gold), var(--blue));
  transition: width .35s var(--ease-out);
}
.nav-links a:hover{ color: var(--text); }
.nav-links a:hover::after{ width:100%; }

/* V5: animated pill that glides beneath whichever link is currently active
   (positioned in script.js's scrollspy via getBoundingClientRect, purely additive --
   if JS can't measure it for any reason it just stays at width:0 and is invisible) */
.nav-indicator{
  position:absolute; left:0; bottom:-9px; height: 2px; width:0;
  background: linear-gradient(90deg, var(--gold), var(--blue));
  border-radius: 2px; opacity:0;
  transition: transform .5s var(--ease-premium), width .5s var(--ease-premium), opacity .3s ease;
  pointer-events:none;
}
.nav-indicator.on{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .nav-indicator{ transition: opacity .3s ease; } }

.nav-actions{ display:flex; align-items:center; gap:16px; }
.nav-burger{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav-burger span{ height:2px; width:100%; background:#fff; border-radius:2px; transition: transform .3s, opacity .3s; }

.mobile-menu-scrim{
  position: fixed; inset:0; z-index: 940;
  background: rgba(4,4,6,.55); backdrop-filter: blur(4px);
  opacity:0; pointer-events:none; transition: opacity .4s ease;
}
.mobile-menu-scrim.on{ opacity:1; pointer-events:auto; }
.mobile-menu{
  position: fixed; top:0; right:-100%; width: min(78vw, 340px); height:100vh; z-index: 950;
  background: rgba(8,8,10,.92);
  backdrop-filter: blur(24px);
  border-left: 1px solid var(--glass-border);
  padding: 100px 32px 40px;
  display:flex; flex-direction:column; gap: 26px;
  transition: right .5s var(--ease-premium);
  box-shadow: var(--shadow-lg);
}
.mobile-menu.open{ right:0; }
.mobile-menu a{
  font-size:1.1rem; color: var(--text-soft); font-family: var(--font-display); font-weight:500;
  opacity:0; transform: translateX(18px);
  transition: color .3s, opacity .45s var(--ease-premium), transform .45s var(--ease-premium);
}
/* V5: links cascade in one-by-one as the panel opens, instead of all appearing at once */
.mobile-menu.open a{ opacity:1; transform: translateX(0); }
.mobile-menu a:nth-child(1){ transition-delay: .08s; }
.mobile-menu a:nth-child(2){ transition-delay: .12s; }
.mobile-menu a:nth-child(3){ transition-delay: .16s; }
.mobile-menu a:nth-child(4){ transition-delay: .20s; }
.mobile-menu a:nth-child(5){ transition-delay: .24s; }
.mobile-menu a:nth-child(6){ transition-delay: .28s; }
.mobile-menu a:nth-child(7){ transition-delay: .32s; }
.mobile-menu a:hover{ color: var(--gold); }
@media (prefers-reduced-motion: reduce){
  .mobile-menu a{ opacity:1; transform:none; transition: color .3s; }
}

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding: 15px 30px; border-radius: 100px;
  font-size:.92rem; font-weight:600; letter-spacing:.01em;
  overflow:hidden; isolation:isolate;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.btn span{ position:relative; z-index:2; }
.btn-small{ padding: 10px 20px; font-size:.82rem; }
.btn-large{ padding: 18px 36px; }

/* light-sweep hover — a diagonal shine that travels across the button */
.btn::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--ease-out);
  z-index:1; pointer-events:none;
}
.btn:hover::after{ left: 130%; }
.btn-glass::after{ background: linear-gradient(115deg, transparent, rgba(255,255,255,.25), transparent); }

.btn-gold{
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 60%, #b3854a);
  color: #1a1408;
  box-shadow: 0 8px 30px -8px rgba(216,178,106,.65);
}
.btn-gold:hover{ transform: translateY(-3px); box-shadow: 0 14px 40px -8px rgba(216,178,106,.85); }

.btn-glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: #fff;
  backdrop-filter: blur(14px);
}
.btn-glass:hover{ background: var(--glass-bg-strong); transform: translateY(-3px); border-color: rgba(255,255,255,.3); }

/* =========================================================
   SECTION UTILITIES
========================================================= */
section{ position:relative; z-index:1; padding: 130px clamp(20px, 5vw, 60px); }

/* V5: section identity accents -- each major section gets a faint signature glow from
   the site's existing accent palette so it reads as its own chapter while remaining
   part of one cohesive system. Accent-only: no layout/grid/content changes here, so
   this can't break any existing feature or JS hook. */
#why-us::before, #process::before, #results::before, #pricing::before,
#testimonials::before, #cases::before, #faq::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:0; opacity:.6;
}
#why-us::before{ background: radial-gradient(ellipse 55% 38% at 12% 0%, rgba(93,169,255,.07), transparent 70%); }
#process::before{ background: radial-gradient(ellipse 55% 38% at 88% 6%, rgba(138,107,255,.07), transparent 70%); }
#results::before{ background: radial-gradient(ellipse 55% 38% at 12% 0%, rgba(76,242,255,.06), transparent 70%); }
#cases::before{ background: radial-gradient(ellipse 55% 38% at 88% 4%, rgba(93,169,255,.06), transparent 70%); }
#pricing::before{ background: radial-gradient(ellipse 55% 38% at 88% 0%, rgba(216,178,106,.08), transparent 70%); }
#testimonials::before{ background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,94,158,.05), transparent 70%); }
#faq::before{ background: radial-gradient(ellipse 55% 38% at 12% 4%, rgba(138,107,255,.05), transparent 70%); }
.section-head{
  max-width: 720px; margin: 0 auto 70px; text-align:center;
}
.section-tag{
  display:inline-block; padding: 7px 18px; border-radius:100px;
  font-size:.78rem; letter-spacing:.08em; text-transform: uppercase;
  color: var(--gold);
  background: rgba(216,178,106,.08);
  border: 1px solid rgba(216,178,106,.25);
  margin-bottom: 22px;
}
.section-head h2{ font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 18px; }
.section-head p{ font-size: 1.05rem; }

[data-reveal], [data-reveal-title]{
  opacity:0; transform: translateY(36px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].in-view, [data-reveal-title].in-view{ opacity:1; transform: translateY(0); }

/* =========================================================
   HERO
========================================================= */
.hero{
  min-height: 100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top: 160px;
}
.hero-inner{
  max-width: 1440px; margin:0 auto; width:100%;
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.85rem; color: var(--text-soft); letter-spacing:.04em;
  margin-bottom: 26px;
}
.eyebrow-dot{ width:7px; height:7px; border-radius:50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.4);} }

.hero-title{ font-size: clamp(2.7rem, 6vw, 5.4rem); letter-spacing: -0.035em; }
.hero-title .line{ display:block; overflow:hidden; }
.gold-dot{ color: var(--gold); }

.hero-sub{ font-size: 1.18rem; max-width: 540px; margin-top: 22px; line-height:1.6; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:18px; margin-top: 38px; }

.hero-stats{ display:flex; gap: 48px; margin-top: 64px; flex-wrap:wrap; }
.hero-stat{ position:relative; }
.hero-stat .counter, .hero-stat .unit{ font-family: var(--font-display); font-size: 2.1rem; font-weight:600; color:#fff; }
.hero-stat .unit{ color: var(--gold); }
.hero-stat p{ font-size:.82rem; margin:4px 0 0; color: var(--text-soft); }

.hero-visual{ position:relative; height: 620px; }
.hero-canvas-wrap{ position:absolute; inset:0; }
#hero3d{ width:100%; height:100%; }

.hud-chip{
  position:absolute; padding: 14px 20px; border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:4px;
}
/* V5: floating glass cards -- was dead markup ([data-float] had no CSS rule at all)
   now genuinely floats each HUD chip on its own gentle, offset loop */
[data-float]{ animation: floatChip 5.2s ease-in-out infinite; }
.hud-2[data-float]{ animation-delay: -1.3s; animation-duration: 5.8s; }
.hud-3[data-float]{ animation-delay: -2.6s; animation-duration: 4.7s; }
.hud-4[data-float]{ animation-delay: -3.9s; animation-duration: 5.4s; }
@keyframes floatChip{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce){ [data-float]{ animation:none; } }
.hud-label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-soft); }
.hud-value{ font-family: var(--font-display); font-size: 1.3rem; font-weight:600; }
.hud-value small{ font-size:.7rem; color: var(--text-soft); font-weight:400; }
.hud-1{ top: 6%; left: -2%; }
.hud-2{ top: 20%; right: 2%; }
.hud-3{ bottom: 26%; left: 4%; }
.hud-4{ bottom: 8%; right: 8%; }
.pulse-dot{ color: #6cf27d; }
.pulse-dot::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#6cf27d; margin-right:6px; box-shadow:0 0 10px #6cf27d; }

.scroll-cue{
  position:absolute; bottom: 34px; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-soft);
}
.scroll-line{ width:1px; height:44px; background: rgba(255,255,255,.15); overflow:hidden; }
.scroll-line i{ display:block; width:100%; height:14px; background: linear-gradient(var(--gold), transparent); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform: translateY(-20px);} 100%{ transform: translateY(50px);} }

/* trust strip / marquee */
.trust-label{ text-align:center; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color: var(--text-soft); margin-bottom: 30px; }
.marquee{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track{ display:flex; gap: 64px; width:max-content; animation: marqueeScroll 34s linear infinite; font-family: var(--font-display); font-size:1.2rem; color: var(--text-soft); }
.marquee-reverse .marquee-track{ animation-direction: reverse; }
@keyframes marqueeScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* =========================================================
   SERVICES
========================================================= */
.services-grid{
  max-width: var(--container); margin: 0 auto;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.service-card{
  position:relative; padding: 34px 28px; border-radius: var(--card-radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  overflow:hidden;
  transition: transform .5s var(--ease-out), border-color .4s, background .4s;
  transform-style: preserve-3d;
}
.service-card:hover{ border-color: rgba(216,178,106,.4); background: var(--glass-bg-strong); }
.card-glow{
  position:absolute; width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle, rgba(216,178,106,.35), transparent 70%);
  top:-80px; right:-80px; opacity:0; transition: opacity .5s;
  pointer-events:none;
}
.service-card:hover .card-glow{ opacity:1; }
/* V5: icon tile -- a soft glass badge behind every icon instead of a bare glyph,
   the same treatment Stripe/Linear-style premium SaaS sites use for icon rows */
.service-icon{
  width:56px; height:56px; margin-bottom:22px; color: var(--gold);
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgba(216,178,106,.16), rgba(216,178,106,.03));
  border: 1px solid rgba(216,178,106,.22);
  filter: drop-shadow(0 0 10px rgba(216,178,106,.35));
  transition: transform .4s var(--ease-premium), border-color .4s, background .4s;
}
.service-icon svg{ width:52%; height:52%; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.service-card:hover .service-icon{ transform: scale(1.08) rotate(-4deg); border-color: rgba(216,178,106,.5); }
@media (prefers-reduced-motion: reduce){ .service-card:hover .service-icon{ transform:none; } }
.service-card h3{ font-size:1.15rem; margin-bottom:10px; }
.service-card p{ font-size:.9rem; margin:0; }

/* =========================================================
   WHY US — BENTO
========================================================= */
.bento-grid{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 22px;
}
.bento-item{
  position:relative; padding: 30px; border-radius: var(--card-radius);
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  display:flex; flex-direction:column; justify-content:flex-end;
  transition: transform .5s var(--ease-out), border-color .4s;
}
.bento-item:hover{ transform: translateY(-6px); border-color: rgba(93,169,255,.4); }
.bento-large{ grid-column: span 2; }
.bento-icon{
  width:44px; height:44px; color: var(--blue); margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, rgba(93,169,255,.16), rgba(93,169,255,.03));
  border: 1px solid rgba(93,169,255,.22);
  transition: transform .4s var(--ease-premium), border-color .4s;
}
.bento-icon svg{ width:52%; height:52%; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.bento-item:hover .bento-icon{ transform: scale(1.08) rotate(4deg); border-color: rgba(93,169,255,.5); }
@media (prefers-reduced-motion: reduce){ .bento-item:hover .bento-icon{ transform:none; } }
.bento-item h3{ font-size:1.1rem; margin-bottom:8px; }
.bento-item p{ font-size:.88rem; margin:0; }

/* =========================================================
   PROCESS TIMELINE
========================================================= */
.timeline{ max-width: var(--container); margin:0 auto; position:relative; display:grid; grid-template-columns: repeat(6,1fr); gap: 20px; padding-top: 10px; }
.timeline-line{ position:absolute; top: 46px; left: 8%; right:8%; height:2px; background: rgba(255,255,255,.08); z-index:0; }
.timeline-fill{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--gold), var(--blue), var(--purple)); box-shadow: 0 0 12px var(--gold); transition: width 1.6s var(--ease-out); }
.timeline-step{ position:relative; text-align:center; padding-top: 66px; }
.step-index{ position:absolute; top:0; left:50%; transform: translateX(-50%); font-family: var(--font-display); font-size:.75rem; color: var(--text-soft); }
.step-dot{
  position:absolute; top: 40px; left:50%; transform: translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%;
  background: var(--bg); border: 2px solid var(--gold);
  box-shadow: 0 0 0 6px rgba(216,178,106,.08);
  z-index:2;
}
.timeline-step h3{ font-size:1.05rem; margin-bottom:8px; }
.timeline-step p{ font-size:.85rem; }

/* =========================================================
   LIVE DASHBOARD
========================================================= */
.dash-grid{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.dash-card{
  position:relative; padding: 26px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}
.dash-wide{ grid-column: span 2; }
.dash-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 18px; }
.dash-card-head h3{ font-size:.92rem; margin:0; font-family: var(--font-body); font-weight:600; color: var(--text-soft); }
.dash-badge{ font-size:.75rem; color:#6cf27d; background: rgba(108,242,125,.1); padding: 4px 10px; border-radius: 100px; }
.dash-line-chart{ width:100%; height:110px; }
.dash-line-chart .line{ filter: drop-shadow(0 0 6px rgba(216,178,106,.6)); }
.dash-big-num{ font-family: var(--font-display); font-size: 2.3rem; font-weight:600; }
.dash-unit{ font-family: var(--font-display); font-size:1.4rem; color: var(--gold); }
.dash-sub{ font-size:.8rem; margin:4px 0 0; }

.gauge{ position:relative; width:120px; height:120px; margin:0 auto; }
.gauge svg{ width:100%; height:100%; transform: rotate(-90deg); }
.gauge-track{ fill:none; stroke: rgba(255,255,255,.08); stroke-width:8; }
.gauge-fill{ fill:none; stroke: url(#gaugeGrad); stroke: var(--gold); stroke-width:8; stroke-linecap:round; stroke-dasharray: 264; stroke-dashoffset: 264; transition: stroke-dashoffset 1.6s var(--ease-out); }
.gauge-value{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-size:1.6rem; font-weight:700; }

.donut{ width:120px; height:120px; margin:0 auto 14px; }
.donut svg{ width:100%; height:100%; transform: rotate(-90deg); }
.donut-seg{ fill:none; stroke-width:14; }
/* circumference (r=40) = 251.33 — each segment's dasharray is "arcLength remainder" */
.seg-1{ stroke: var(--gold); stroke-dasharray: 115.6 251.33; stroke-dashoffset: 0; }
.seg-2{ stroke: var(--blue); stroke-dasharray: 85.45 251.33; stroke-dashoffset: -115.6; }
.seg-3{ stroke: var(--purple); stroke-dasharray: 50.27 251.33; stroke-dashoffset: -201.05; }
.legend{ display:flex; flex-direction:column; gap:6px; font-size:.8rem; color: var(--text-soft); }
.legend li{ display:flex; align-items:center; gap:8px; }
.legend i{ width:8px; height:8px; border-radius:50%; }
.dot-gold{ background: var(--gold); } .dot-blue{ background: var(--blue); } .dot-purple{ background: var(--purple); }

.bar-chart{ display:flex; align-items:flex-end; gap: 10px; height: 110px; }
.bar-chart span{
  flex:1; height: var(--h); border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--blue), var(--purple));
  transform: scaleY(0); transform-origin:bottom;
  transition: transform 1s var(--ease-out);
}
.bar-labels{ display:flex; justify-content:space-between; margin-top:10px; font-size:.72rem; color: var(--text-soft); }

.campaign-list li{ display:flex; align-items:center; gap:10px; font-size:.88rem; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.campaign-list li:last-child{ border-bottom:none; }
.campaign-list em{ margin-left:auto; font-style:normal; font-size:.72rem; color: var(--text-soft); }
.dot-live, .dot-warn{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dot-live{ background:#6cf27d; box-shadow: 0 0 8px #6cf27d; }
.dot-warn{ background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* =========================================================
   CASE STUDIES
========================================================= */
.case-grid{ max-width: var(--container); margin:0 auto; display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.case-card{
  padding: 30px; border-radius: var(--card-radius);
  background: var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter: blur(16px);
  transition: transform .5s var(--ease-out), border-color .4s;
}
.case-card:hover{ transform: translateY(-6px); border-color: rgba(93,169,255,.35); }
.case-tag{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-soft); }
.case-card h3{ font-size:1.05rem; margin: 10px 0 14px; }
.case-num{ font-family: var(--font-display); font-size: 2.6rem; font-weight:700; }
.case-unit{ font-family: var(--font-display); font-size:1.5rem; color: var(--gold); }
.sparkline{ width:100%; height:40px; margin-top: 18px; }

/* =========================================================
   TESTIMONIALS (base track — editorial styling appended below)
========================================================= */
.testi-track{ flex:1; overflow:hidden; }
@keyframes testiIn{ from{ opacity:0; transform: translateY(14px);} to{opacity:1; transform:translateY(0);} }
.testi-arrow{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background: var(--glass-bg); border:1px solid var(--glass-border);
  font-size:1.4rem; display:flex; align-items:center; justify-content:center;
  transition: background .3s, border-color .3s;
}
.testi-arrow:hover{ background: var(--glass-bg-strong); border-color: var(--gold); color: var(--gold); }

/* =========================================================
   FAQ ACCORDION
========================================================= */
.accordion{ max-width: 780px; margin:0 auto; display:flex; flex-direction:column; gap: 14px; }
.acc-item{ border-radius: 18px; background: var(--glass-bg); border:1px solid var(--glass-border); overflow:hidden; transition: border-color .3s; }
.acc-heading{ margin:0; font-size:1em; font-weight:400; }
.acc-item.active{ border-color: rgba(216,178,106,.35); }
.acc-head{ width:100%; display:flex; align-items:center; justify-content:space-between; padding: 22px 26px; font-size:1rem; font-weight:500; text-align:left; }
.acc-icon{ font-size:1.3rem; color: var(--gold); transition: transform .4s var(--ease-out); }
.acc-item.active .acc-icon{ transform: rotate(135deg); }
.acc-body{ max-height:0; overflow:hidden; transition: max-height .5s var(--ease-out); }
.acc-body p{ padding: 0 26px 22px; margin:0; font-size:.92rem; }

/* =========================================================
   CTA
========================================================= */
.cta{ text-align:center; overflow:hidden; }
.cta-glow{
  position:absolute; inset:0; margin:auto; width:60vw; height:60vw; max-width:900px; max-height:900px;
  background: radial-gradient(circle, rgba(216,178,106,.18), transparent 65%);
  filter: blur(40px); pointer-events:none;
}
.cta-blob{
  position:absolute; top:50%; left:50%; width: 46vw; max-width: 620px; min-width: 340px;
  transform: translate(-50%,-50%); pointer-events:none; opacity:.8; filter: blur(2px);
}
.cta-inner{ position:relative; max-width:720px; margin:0 auto; }
.cta-inner h2{ font-size: clamp(2.2rem, 5vw, 3.4rem); }
.cta-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:18px; margin-top: 34px; }

/* =========================================================
   FOOTER
========================================================= */
.site-footer{ position:relative; z-index:1; padding: 90px clamp(20px,5vw,60px) 30px; border-top:1px solid rgba(255,255,255,.07); }
.footer-top{ max-width: var(--container); margin:0 auto; display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 50px; padding-bottom: 60px; }
.footer-brand p{ margin: 18px 0 22px; font-size:.9rem; max-width: 320px; }
.footer-social{ display:flex; gap: 12px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--glass-bg); border:1px solid var(--glass-border); color: var(--text-soft);
  transition: color .3s, border-color .3s;
}
.footer-social a:hover{ color: var(--gold); border-color: var(--gold); }
.footer-social svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.footer-col h3{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-soft); margin-bottom: 18px; }
.footer-col a{ display:block; font-size:.92rem; color: var(--text-soft); padding: 6px 0; transition: color .3s; }
.footer-col a:hover{ color: var(--gold); }
.footer-bottom{
  max-width: var(--container); margin:0 auto; padding-top: 26px; border-top:1px solid rgba(255,255,255,.06);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  font-size:.8rem; color: var(--text-soft);
}
.footer-legal{ display:flex; gap: 22px; }
.footer-legal a:hover{ color: var(--gold); }

/* whatsapp fab */
.whatsapp-fab{
  position: fixed; bottom: 26px; right: 26px; z-index: 500;
  width:58px; height:58px; border-radius:50%;
  background: linear-gradient(135deg, #25D366, #1aa851);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 34px -10px rgba(37,211,102,.7);
  animation: fabPulse 2.6s ease-in-out infinite;
}
.whatsapp-fab svg{ width:28px; height:28px; fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@keyframes fabPulse{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.08);} }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1180px){
  .services-grid{ grid-template-columns: repeat(3,1fr); }
  .dash-grid{ grid-template-columns: repeat(2,1fr); }
  .dash-wide{ grid-column: span 2; }
  .case-grid{ grid-template-columns: repeat(2,1fr); }
  .bento-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 200px; }
  .bento-large{ grid-column: span 2; }
}

@media (max-width: 1000px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-visual{ height: 420px; order:-1; }
  .hud-chip{ padding: 10px 14px; }
  .hud-value{ font-size:1rem; }
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .timeline{ grid-template-columns: repeat(3,1fr); row-gap: 50px; }
  .timeline-line{ display:none; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  section{ padding: 90px 20px; }
  .services-grid{ grid-template-columns: 1fr 1fr; }
  .case-grid{ grid-template-columns: 1fr; }
  .dash-grid{ grid-template-columns: 1fr; }
  .dash-wide{ grid-column: span 1; }
  .bento-grid{ grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-large{ grid-column: span 1; }
  .timeline{ grid-template-columns: 1fr; gap: 34px; }
  .hero-stats{ gap: 28px; }
  .footer-top{ grid-template-columns: 1fr; }
}

@media (max-width: 460px){
  .services-grid{ grid-template-columns: 1fr; }
  .hero-title{ font-size: 2.3rem; }
}

/* =========================================================
   STICKY PROGRESS BAR + SECTION DOT NAV
========================================================= */
.progress-bar{
  position: fixed; top:0; left:0; right:0; height:3px; z-index: 999;
  background: rgba(255,255,255,.06);
}
.progress-bar span{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, var(--gold), var(--blue), var(--purple));
  box-shadow: 0 0 10px rgba(216,178,106,.6);
}

.dot-nav{
  position: fixed; right: 26px; top:50%; transform: translateY(-50%); z-index: 500;
  display:flex; flex-direction:column; gap: 16px;
}
.dot-nav a{
  position:relative; width:9px; height:9px; border-radius:50%;
  background: rgba(255,255,255,.25);
  transition: background .3s, transform .3s;
}
.dot-nav a::before{
  content: attr(data-label);
  position:absolute; right: 22px; top:50%; transform: translateY(-50%);
  font-size:.72rem; white-space:nowrap; color: var(--text-soft);
  background: var(--glass-bg-strong); border:1px solid var(--glass-border);
  padding: 5px 12px; border-radius: 100px; backdrop-filter: blur(10px);
  opacity:0; pointer-events:none; transition: opacity .3s, transform .3s;
}
.dot-nav a:hover::before{ opacity:1; transform: translateY(-50%) translateX(-4px); }
.dot-nav a:hover{ background: rgba(255,255,255,.6); }
.dot-nav a.active{ background: var(--gold); transform: scale(1.4); box-shadow: 0 0 10px var(--gold); }
@media (max-width: 1180px){ .dot-nav{ display:none; } }

/* =========================================================
   STATISTICS
========================================================= */
.stats{ padding-top: 70px; padding-bottom: 70px; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.stats-track{ max-width: var(--container); margin: 0 auto 60px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 30px; }
.stat-block{ text-align:center; flex:1; min-width: 160px; }
.stat-num{ font-family: var(--font-display); font-size: clamp(2.2rem,4vw,3.2rem); font-weight:700; color:#fff; }
.stat-unit{ font-family: var(--font-display); font-size: clamp(1.4rem,2vw,1.8rem); color: var(--gold); }
.stat-block p{ font-size:.85rem; margin: 8px 0 0; }
.stat-divider{ width:1px; height: 60px; background: rgba(255,255,255,.1); }
@media (max-width: 720px){ .stat-divider{ display:none; } }

.stats-marquee .marquee-track{ font-size:1rem; color: var(--gold); gap: 20px; }
.stats-marquee .sep{ color: rgba(255,255,255,.2); }

/* =========================================================
   CALCULATOR
========================================================= */
.calc-panel{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px;
  padding: 46px; border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--glass-border); backdrop-filter: blur(20px);
}
.calc-inputs{ display:flex; flex-direction:column; gap: 36px; justify-content:center; }
.calc-field{ display:flex; flex-direction:column; gap: 14px; }
.calc-label{ display:flex; justify-content:space-between; align-items:baseline; font-size:.92rem; color: var(--text-soft); }
.calc-label strong{ font-family: var(--font-display); font-size:1.1rem; color: var(--gold); }
.calc-range{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px;
  background: rgba(255,255,255,.12); outline:none;
}
.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 0 14px rgba(216,178,106,.7);
  cursor:pointer; border: 2px solid #050505;
}
.calc-range::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; border: 2px solid #050505;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 0 14px rgba(216,178,106,.7); cursor:pointer;
}
.calc-results{
  display:flex; flex-direction:column; gap: 18px; justify-content:center;
  padding: 30px; border-radius:20px;
  background: rgba(0,0,0,.25); border:1px solid var(--glass-border);
}
.calc-result{ display:flex; justify-content:space-between; align-items:center; padding-bottom: 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.calc-result-label{ font-size:.85rem; color: var(--text-soft); }
.calc-result-value{ font-family: var(--font-display); font-size:1.4rem; font-weight:600; }
.calc-result-gold{ border-bottom:none; }
.calc-result-gold .calc-result-value{ color: var(--gold); font-size:1.8rem; }
.calc-disclaimer{ font-size:.72rem; color: rgba(255,255,255,.35); margin: 4px 0 0; }
@media (max-width: 900px){ .calc-panel{ grid-template-columns: 1fr; padding: 30px; } }

/* =========================================================
   HOLOGRAPHIC DASHBOARD CARDS + GLOBE
========================================================= */
.dash-card.holo{
  position:relative;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), inset 0 0 40px rgba(93,169,255,.05);
}
.dash-card.holo::before{
  content:""; position:absolute; inset:0; border-radius: inherit; padding:1px;
  background: linear-gradient(135deg, rgba(216,178,106,.4), rgba(93,169,255,.15), rgba(138,107,255,.35));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}

.globe-row{
  max-width: var(--container); margin: 0 auto 60px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items:center;
}
.globe-visual{ position:relative; height: 340px; }
#globe3d{ width:100%; height:100%; }
.globe-caption{
  position:absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display:flex; align-items:center; gap:8px;
  font-size:.8rem; color: var(--text-soft);
  background: var(--glass-bg-strong); border:1px solid var(--glass-border);
  padding: 8px 18px; border-radius: 100px; backdrop-filter: blur(14px);
  white-space:nowrap;
}
.globe-dot{ width:7px; height:7px; border-radius:50%; background:#6cf27d; box-shadow:0 0 8px #6cf27d; }
.globe-copy h3{ font-size: 1.6rem; margin-bottom: 14px; }
@media (max-width: 900px){ .globe-row{ grid-template-columns: 1fr; } }

/* =========================================================
   CLIENT SUCCESS TIMELINE (JOURNEY)
========================================================= */
.journey-line{ position:relative; max-width: 820px; margin:0 auto; padding: 10px 0; }
.journey-line::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--gold) 0 10px, transparent 10px 20px);
  opacity:.5;
}
.journey-node{ position:relative; width:50%; padding: 0 40px 60px; }
.journey-left{ left:0; text-align:right; }
.journey-right{ left:50%; text-align:left; }
.journey-node::after{
  content:""; position:absolute; top: 6px; width:14px; height:14px; border-radius:50%;
  background: var(--bg); border: 2px solid var(--gold); box-shadow: 0 0 0 6px rgba(216,178,106,.1);
}
.journey-left::after{ right: -7px; }
.journey-right::after{ left: -7px; }
.journey-card{
  display:inline-block; text-align:left; padding: 24px 26px; border-radius: 18px; max-width: 340px;
  background: var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter: blur(16px);
  transition: transform .4s var(--ease-out), border-color .4s;
}
.journey-card:hover{ transform: translateY(-4px); border-color: rgba(216,178,106,.4); }
.journey-highlight{ border-color: rgba(216,178,106,.45); box-shadow: 0 20px 50px -25px rgba(216,178,106,.35); }
.journey-month{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--gold); }
.journey-card h3{ font-size:1.05rem; margin: 8px 0; }
.journey-card p{ font-size:.85rem; margin:0; }
@media (max-width: 720px){
  .journey-line::before{ left: 8px; }
  .journey-node, .journey-left, .journey-right{ width:100%; left:0; text-align:left; padding: 0 0 40px 34px; }
  .journey-left::after, .journey-right::after{ left: 1px; }
  .journey-card{ max-width:none; }
}

/* =========================================================
   TECHNOLOGY STACK
========================================================= */
.stack-grid{
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: repeat(4,1fr); gap: 20px;
}
.stack-card{
  padding: 26px; border-radius: 18px; text-align:center;
  background: var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter: blur(14px);
  transition: transform .4s var(--ease-out), border-color .4s;
}
.stack-card:hover{ transform: translateY(-6px); border-color: rgba(93,169,255,.4); }
.stack-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px; margin-bottom:16px;
  font-family: var(--font-display); font-weight:700; font-size:1.1rem;
  background: linear-gradient(135deg, var(--gold), var(--blue));
  color:#050505;
}
.stack-card h3{ font-size:1rem; margin-bottom:6px; }
.stack-card p{ font-size:.8rem; margin:0; }
@media (max-width: 900px){ .stack-grid{ grid-template-columns: repeat(2,1fr); } }

/* =========================================================
   PORTFOLIO / BEFORE-AFTER COMPARE SLIDER
========================================================= */
.portfolio-grid{ max-width: var(--container); margin:0 auto; display:grid; grid-template-columns: repeat(2,1fr); gap: 30px; }
.compare{
  position:relative; height: 360px; border-radius: 24px; overflow:hidden;
  border:1px solid var(--glass-border);
  user-select:none;
}
.compare-panel{
  position:absolute; inset:0; padding: 30px; display:flex; flex-direction:column; gap: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}
.compare-after{ z-index:1; }
.compare-before{
  z-index:2; width: 50%; overflow:hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.03), rgba(0,0,0,.3));
  filter: grayscale(0.5) brightness(0.75);
  border-right: 1px solid rgba(255,255,255,.25);
}
.compare-before > *{ width: 100vw; max-width: 620px; }
.compare-tag{
  align-self:flex-start; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  padding: 4px 12px; border-radius:100px; background: rgba(216,178,106,.15); color: var(--gold);
}
.compare-panel h3{ font-size:1.05rem; margin:0; }
.mini-metric{ display:flex; justify-content:space-between; font-size:.82rem; color: var(--text-soft); }
.mini-metric strong{ color:#fff; font-family: var(--font-display); }
.mini-bars{ display:flex; gap:8px; align-items:flex-end; height: 60px; margin-top:auto; }
.mini-bars span{ flex:1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--blue), var(--purple)); }
.compare-handle{
  position:absolute; top:0; bottom:0; left:50%; width:44px; margin-left:-22px; z-index:3;
  display:flex; align-items:center; justify-content:center; cursor: ew-resize;
}
.compare-handle::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; background: rgba(255,255,255,.7); transform: translateX(-50%); }
.compare-handle span{
  position:relative; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--glass-bg-strong); border:1px solid rgba(255,255,255,.4); backdrop-filter: blur(10px);
  font-size:1rem;
}
@media (max-width: 900px){ .portfolio-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   PRICING — shared feature-list styling (used inside .price-detail)
========================================================= */
.price-features{ display:flex; flex-direction:column; gap: 12px; margin-bottom: 30px; }
.price-features li{ font-size:.88rem; color: var(--text-soft); padding-left: 26px; position:relative; }
.price-features li::before{
  content:"✓"; position:absolute; left:0; top:0; color: var(--gold); font-weight:700;
}

/* =========================================================
   LIQUID / MAGNETIC BUTTON UPGRADE
========================================================= */
.btn.liquid{ transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-radius .4s var(--ease-out); }
.btn.liquid:hover{ border-radius: 40% 60% 60% 40% / 50% 45% 55% 50%; }

/* =========================================================
   SCROLL-TO-TOP FAB
========================================================= */
.scrolltop-fab{
  position: fixed; bottom: 96px; right: 26px; z-index: 500;
  width:52px; height:52px; border-radius:50%;
  background: var(--glass-bg-strong); border:1px solid var(--glass-border); backdrop-filter: blur(14px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform: translateY(10px);
  transition: opacity .4s, transform .4s;
}
.scrolltop-fab.show{ opacity:1; pointer-events:auto; transform: translateY(0); }
.scrolltop-fab svg{ position:absolute; inset:0; width:100%; height:100%; transform: rotate(-90deg); }
.ring-track{ fill:none; stroke: rgba(255,255,255,.1); stroke-width:2; }
.ring-fill{ fill:none; stroke: var(--gold); stroke-width:2; stroke-linecap:round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; transition: stroke-dashoffset .2s linear; }
.scrolltop-fab span{ position:relative; z-index:1; font-size:1.1rem; color:#fff; }

/* =========================================================
   AI ASSISTANT WIDGET
========================================================= */
.ai-widget{ position: fixed; bottom: 26px; left: 26px; z-index: 500; }
.ai-launcher{
  width:58px; height:58px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold), var(--purple));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 34px -10px rgba(138,107,255,.6);
  animation: fabPulse 2.6s ease-in-out infinite;
}
.ai-launcher svg{ width:26px; height:26px; color:#050505; }
.ai-panel{
  position:absolute; bottom: 74px; left:0; width: 320px; max-width: 82vw;
  background: rgba(10,10,12,.85); backdrop-filter: blur(24px);
  border:1px solid var(--glass-border); border-radius: 20px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.8);
  display:flex; flex-direction:column;
  opacity:0; transform: translateY(16px) scale(.96); pointer-events:none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
  overflow:hidden;
}
.ai-panel.open{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.ai-panel-head{ display:flex; align-items:center; gap:10px; padding: 16px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.ai-dot{ width:8px; height:8px; border-radius:50%; background:#6cf27d; box-shadow:0 0 8px #6cf27d; flex-shrink:0; }
.ai-panel-head strong{ display:block; font-size:.88rem; }
.ai-panel-head small{ color: var(--text-soft); font-size:.72rem; }
.ai-close{ margin-left:auto; font-size:1.3rem; color: var(--text-soft); line-height:1; }
.ai-body{ padding: 16px 18px; display:flex; flex-direction:column; gap: 10px; max-height: 260px; overflow-y:auto; }
.ai-msg{ font-size:.85rem; line-height:1.45; padding: 10px 14px; border-radius: 14px; max-width: 88%; }
.ai-bot{ align-self:flex-start; background: rgba(255,255,255,.07); border-bottom-left-radius:4px; }
.ai-user{ align-self:flex-end; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color:#1a1408; border-bottom-right-radius:4px; }
.ai-typing{ align-self:flex-start; display:flex; gap:4px; padding: 12px 14px; background: rgba(255,255,255,.07); border-radius:14px; }
.ai-typing span{ width:6px; height:6px; border-radius:50%; background: var(--text-soft); animation: typingBounce 1.2s ease-in-out infinite; }
.ai-typing span:nth-child(2){ animation-delay:.15s; } .ai-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typingBounce{ 0%,60%,100%{ transform: translateY(0); opacity:.5;} 30%{ transform: translateY(-4px); opacity:1;} }
.ai-quick{ display:flex; flex-wrap:wrap; gap:8px; padding: 14px 18px; border-top:1px solid rgba(255,255,255,.08); }
.ai-quick button{ font-size:.76rem; padding: 8px 12px; border-radius:100px; background: rgba(255,255,255,.06); border:1px solid var(--glass-border); color: var(--text-soft); transition: background .3s, color .3s; }
.ai-quick button:hover{ background: rgba(216,178,106,.15); color: var(--gold); }
@media (max-width: 560px){
  .ai-panel{ width: 88vw; }
  .scrolltop-fab{ right: 20px; bottom: 88px; }
  .whatsapp-fab{ right: 20px; }
  .ai-widget{ left: 16px; bottom: 16px; }
}

/* =========================================================
   SPLIT TEXT SUPPORT
========================================================= */
[data-split-lines] .line, [data-split-words] .word, [data-split-chars] .char{
  display:inline-block; will-change: transform, opacity;
}
[data-split-words] .word, [data-split-chars] .char{ opacity:0; }
[data-split-words], [data-split-lines]{ overflow: visible; }
.word-wrap{ display:inline-block; overflow:hidden; vertical-align:top; }

/* =========================================================
   EDITORIAL GHOST NUMERALS (section signature)
========================================================= */
.section-ghost-num{
  position:absolute; top: 40px; right: clamp(20px, 4vw, 60px);
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(4rem, 10vw, 9rem); line-height:1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.08);
  pointer-events:none; z-index:0; user-select:none;
}
@media (max-width: 720px){ .section-ghost-num{ font-size: 4rem; top: 20px; } }

/* =========================================================
   BENTO INDEX + HOVER PROOF (Why Us upgrade)
========================================================= */
.bento-item{ position:relative; overflow:hidden; }
.bento-index{
  position:absolute; top: 18px; right: 22px;
  font-family: var(--font-display); font-size:.75rem; color: rgba(255,255,255,.3);
  letter-spacing:.05em;
}
.bento-proof{
  display:block; margin-top: 14px; font-size:.78rem; color: var(--gold);
  opacity:0; transform: translateY(8px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.bento-item:hover .bento-proof{ opacity:1; transform: translateY(0); }

/* =========================================================
   PRICING — INTERACTIVE PLAN SWITCHER (replaces generic 3-card grid)
========================================================= */
.price-switcher{ max-width: var(--container); margin:0 auto; display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items:start; }
.price-tabs{ position:relative; display:flex; flex-direction:column; gap: 4px; padding: 6px; border-radius: 20px; background: var(--glass-bg); border:1px solid var(--glass-border); }
.price-tab{
  position:relative; z-index:1; display:flex; align-items:center; gap: 16px;
  width:100%; padding: 20px 22px; border-radius: 15px; text-align:left;
  transition: color .3s;
}
.price-tab-index{ font-family: var(--font-display); font-size:.75rem; color: var(--text-soft); flex-shrink:0; }
.price-tab-body{ display:flex; flex-direction:column; gap:2px; flex:1; }
.price-tab-name{ font-family: var(--font-display); font-weight:600; font-size:1.05rem; }
.price-tab-sub{ font-size:.78rem; color: var(--text-soft); }
.price-tab-price{ font-family: var(--font-display); font-weight:600; font-size:1.05rem; color: var(--text-soft); flex-shrink:0; }
.price-tab-price small{ font-size:.7rem; font-weight:400; }
.price-tab.active{ color:#fff; }
.price-tab.active .price-tab-price{ color: var(--gold); }
.price-tab:not(.active):hover{ background: rgba(255,255,255,.04); border-radius:15px; }
.price-tab-glider{
  position:absolute; left:6px; right:6px; top:6px; height: 78px; border-radius:15px; z-index:0;
  background: linear-gradient(160deg, rgba(216,178,106,.14), rgba(255,255,255,.03));
  border: 1px solid rgba(216,178,106,.35);
  transition: transform .45s var(--ease-out);
}
.price-detail{
  position:relative; min-height: 360px; padding: 40px; border-radius: 26px;
  background: var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter: blur(16px);
}
.price-panel{ animation: pricePanelIn .5s var(--ease-out); }
@keyframes pricePanelIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:translateY(0);} }
.price-panel-desc{ font-size:.98rem; margin-bottom: 26px; max-width: 460px; }
.price-detail .price-features{ display:flex; flex-direction:column; gap: 14px; margin-bottom: 32px; }
.price-detail .price-features li{ font-size:.92rem; color: var(--text-soft); padding-left: 28px; position:relative; }
.price-detail .price-features li::before{ content:"✓"; position:absolute; left:0; top:0; color: var(--gold); font-weight:700; }
@media (max-width: 900px){
  .price-switcher{ grid-template-columns: 1fr; }
  .price-tabs{ flex-direction:row; overflow-x:auto; }
  .price-tab{ flex-direction:column; align-items:flex-start; min-width: 200px; }
  .price-tab-glider{ display:none; }
  .price-detail{ padding: 28px 24px; }
}

/* =========================================================
   INDUSTRIES CHIPS (replaces fake client-logo marquee)
========================================================= */
.industries{ padding: 70px clamp(20px,5vw,60px); }
.industry-chip{
  display:inline-flex; align-items:center; font-family: var(--font-display); font-size:.9rem;
  padding: 10px 22px; border-radius: 100px; margin-right: 4px;
  border: 1px solid rgba(255,255,255,.14); color: var(--text-soft);
  background: rgba(255,255,255,.03);
  transition: color .3s, border-color .3s;
}
.industry-chip:hover{ color: var(--gold); border-color: rgba(216,178,106,.4); }

/* =========================================================
   TESTIMONIALS — EDITORIAL PULL-QUOTE LAYOUT
========================================================= */
.testi-editorial{ max-width: 880px; margin: 0 auto; display:flex; align-items:center; gap: 24px; }
.testi-slide{ display:none; }
.testi-slide.active{ display:block; animation: testiIn .6s var(--ease-out); }
.quote-mark{
  display:block; font-family: var(--font-display); font-size: 5rem; line-height:1; color: var(--gold);
  opacity:.5; margin-bottom: -20px;
}
.testi-quote{
  margin:0; font-family: var(--font-display); font-weight:500; font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height:1.4; color:#fff;
}
.testi-meta{ display:flex; align-items:center; justify-content:space-between; gap: 20px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); }
.testi-role{ font-size:.88rem; color: var(--text-soft); }
.testi-metric{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; flex-shrink:0; }
.testi-metric strong{ font-family: var(--font-display); font-size:1.6rem; color: var(--gold); }
.testi-metric small{ font-size:.72rem; color: var(--text-soft); }
.testi-dots{ display:flex; justify-content:center; gap:8px; margin-top: 34px; }
.testi-dots span{ width:7px; height:7px; border-radius:50%; background: rgba(255,255,255,.2); cursor:pointer; transition: background .3s, transform .3s; }
.testi-dots span.active{ background: var(--gold); transform: scale(1.3); }
@media (max-width: 720px){
  .testi-editorial{ flex-direction:column-reverse; gap: 18px; }
  .testi-meta{ flex-direction:column; align-items:flex-start; gap: 10px; }
  .testi-metric{ align-items:flex-start; text-align:left; }
}

/* =========================================================
   ILLUSTRATIVE / HONESTY DISCLAIMER
========================================================= */
.illustrative-note{
  max-width: var(--container); margin: 30px auto 0; text-align:center;
  font-size:.76rem; font-style:italic; color: rgba(255,255,255,.32);
}

/* =========================================================
   ROUND 3 UPGRADE FEATURES (merged from style-v3.css)
========================================================= */
:root{
  --cyan: #4CF2FF;
  --rose: #FF5E9E;
}

/* =========================================================
   ANIMATED GRADIENT BORDERS — service cards, bento, pricing, testimonials
========================================================= */
.service-card, .bento-item, .price-detail, .testi-editorial, .stack-card, .case-card, .dash-card{
  position: relative;
}
.service-card::before, .bento-item::before, .price-detail::before, .stack-card::before, .case-card::before, .dash-card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--grad-angle, 0deg),
    rgba(216,178,106,.7), rgba(79,157,255,.5), rgba(138,92,255,.6), rgba(76,242,255,.4), rgba(216,178,106,.7));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s ease;
  pointer-events: none; z-index: 2;
  animation: gradBorderSpin 6s linear infinite paused;
}
.service-card:hover::before, .bento-item:hover::before, .price-detail::before, .stack-card:hover::before, .case-card:hover::before, .dash-card:hover::before{
  opacity: 1; animation-play-state: running;
}
.price-detail::before{ opacity: .6; }
@keyframes gradBorderSpin{
  0%{ --grad-angle: 0deg; }
  100%{ --grad-angle: 360deg; }
}
@property --grad-angle{
  syntax: '<angle>'; inherits: false; initial-value: 0deg;
}
@media (prefers-reduced-motion: reduce){
  .service-card::before, .bento-item::before, .price-detail::before, .stack-card::before, .case-card::before, .dash-card::before{ animation: none; }
}

/* =========================================================
   PREMIUM CARD SYSTEM (V5) — one shared depth/lift/sheen treatment
   layered on every card type (service, bento, case, stack, dash, price,
   testimonial). Doesn't replace any of their individual rules above --
   this only adds consistent shadow, a soft inset top-highlight (the
   classic "glass catching light" detail) and a unified hover lift so
   every card in the site reads as one coherent premium system.
========================================================= */
.service-card, .bento-item, .price-detail, .testi-editorial, .stack-card, .case-card, .dash-card{
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .5s var(--ease-premium), box-shadow .5s var(--ease-premium), border-color .4s;
  will-change: transform;
}
.service-card:hover, .bento-item:hover, .stack-card:hover, .case-card:hover, .dash-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.09);
}
@media (prefers-reduced-motion: reduce){
  .service-card, .bento-item, .price-detail, .testi-editorial, .stack-card, .case-card, .dash-card{ transition: border-color .3s; }
  .service-card:hover, .bento-item:hover, .stack-card:hover, .case-card:hover, .dash-card:hover{ transform:none; }
}

/* =========================================================
   DASHBOARD — close the row-3 gap + richer Campaign/ROI cards
========================================================= */
.dash-card{ transition: transform .4s var(--ease-out, ease), box-shadow .4s var(--ease-out, ease); }
.dash-card:hover{ transform: translateY(-4px); box-shadow: 0 40px 70px -30px rgba(0,0,0,.85); }

.camp-bar{
  flex: 1; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.08); overflow: hidden; min-width: 60px;
}
.camp-bar span{
  display: block; height: 100%; width: var(--w, 0%); border-radius: 3px;
  background: linear-gradient(90deg, var(--gold, #D8B26A), var(--blue, #5DA9FF));
  transition: width 1s var(--ease-out, ease);
}
.camp-bar-warn span{ background: linear-gradient(90deg, var(--gold, #D8B26A), #ffb14c); }

.roi-row{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.roi-figure{ flex: 0 0 auto; }
.roi-spark{ flex: 1 1 160px; max-width: 240px; height: 70px; }
@media (max-width: 640px){
  .roi-row{ flex-direction: column; align-items: flex-start; }
  .roi-spark{ width: 100%; max-width: none; }
}

/* =========================================================
   SECTION DIVIDERS — replace hard section breaks
========================================================= */
.section-divider{ position: relative; height: 90px; margin-top: -1px; overflow: hidden; z-index: 1; pointer-events: none; }
.section-divider svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.section-divider .divider-glow{
  position:absolute; top:50%; left:50%; width: 60%; height: 2px; transform: translate(-50%,-50%);
  background: linear-gradient(90deg, transparent, rgba(216,178,106,.6), rgba(76,242,255,.4), transparent);
  filter: blur(1px);
}

/* =========================================================
   MESH-GRADIENT BACKGROUND ENHANCEMENT
========================================================= */
.mesh-layer{
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55; mix-blend-mode: screen;
  background:
    radial-gradient(circle at 15% 20%, rgba(76,242,255,.10), transparent 35%),
    radial-gradient(circle at 85% 15%, rgba(255,94,158,.08), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(138,92,255,.10), transparent 45%);
  animation: meshDrift 26s ease-in-out infinite alternate;
}
@keyframes meshDrift{
  0%{ transform: scale(1) translate(0,0); }
  50%{ transform: scale(1.12) translate(-2%, 2%); }
  100%{ transform: scale(1) translate(2%, -2%); }
}
@media (prefers-reduced-motion: reduce){ .mesh-layer{ animation: none; } }

/* floating bokeh dust */
.bokeh{
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(6px); opacity: .35;
  animation: bokehFloat linear infinite;
}
@keyframes bokehFloat{
  0%{ transform: translateY(0) translateX(0); }
  50%{ transform: translateY(-40px) translateX(12px); }
  100%{ transform: translateY(0) translateX(0); }
}

/* =========================================================
   PREMIUM CURSOR — spotlight + trail (see script-v3.js)
========================================================= */
.cursor-spotlight{
  position: fixed; top:0; left:0; width: 420px; height: 420px; border-radius: 50%;
  pointer-events: none; z-index: 40; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(216,178,106,.10), rgba(76,242,255,.05) 45%, transparent 70%);
  mix-blend-mode: screen; will-change: transform; opacity: 0; transition: opacity .4s ease;
}
.cursor-spotlight.on{ opacity: 1; }
.cursor-trail-dot{
  position: fixed; top:0; left:0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); pointer-events: none; z-index: 39; will-change: transform, opacity;
}
@media (hover:none), (pointer:coarse){
  .cursor-spotlight, .cursor-trail-dot{ display:none; }
}

/* =========================================================
   ICON GLOW-PULSE (services)
========================================================= */
.service-card:hover .service-icon{
  animation: iconGlowPulse 1.6s ease-in-out infinite;
}
@keyframes iconGlowPulse{
  0%,100%{ filter: drop-shadow(0 0 10px rgba(216,178,106,.35)); }
  50%{ filter: drop-shadow(0 0 20px rgba(216,178,106,.75)) drop-shadow(0 0 8px rgba(76,242,255,.4)); }
}
@media (prefers-reduced-motion: reduce){
  .service-card:hover .service-icon{ animation: none; }
}

/* =========================================================
   BUTTON ELASTIC PRESS FEEDBACK
========================================================= */
.btn{ transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.btn:active{ transform: scale(.94); transition: transform .15s cubic-bezier(.34,1.56,.64,1); }

/* =========================================================
   ANIMATED GRADIENT TEXT UPGRADE (adds cyan/rose into the sweep)
========================================================= */
.gradient-text{
  background-image: linear-gradient(100deg, var(--gold-soft) 0%, var(--gold) 25%, var(--cyan) 50%, var(--blue) 70%, var(--rose) 85%, var(--purple) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================
   THEME VARIANTS — swap the primary accent across the whole page
   (buttons, glows, gradient-text, icons all read from --gold,
   so remapping it per data-theme is enough to reskin everything)
========================================================= */
html[data-theme="blue"]{ --gold: #4F9DFF; --gold-soft: #9CC7FF; }
html[data-theme="purple"]{ --gold: #8A5CFF; --gold-soft: #C3ACFF; }
html[data-theme="cyan"]{ --gold: #2FD8E8; --gold-soft: #A6F3F7; }
html[data-theme="rose"]{ --gold: #FF5E9E; --gold-soft: #FFB4D0; }
html[data-theme="green"]{ --gold: #34D399; --gold-soft: #9CF5D3; }
html[data-theme="red"]{ --gold: #FF5C5C; --gold-soft: #FFB3B3; }

/* Text size + high-contrast controls (Page Settings panel) */
html.high-contrast{
  --text-soft: #ededed;
  --glass-border: rgba(255,255,255,.30);
  --glass-hairline: rgba(255,255,255,.24);
  --glass-border-strong: rgba(255,255,255,.42);
}
html.high-contrast .nav{ background: rgba(4,4,6,.82); }
html.high-contrast .nav.scrolled{ background: rgba(2,2,3,.92); }
html[data-fontscale="sm"]{ --font-scale-user: 0.92; }
html[data-fontscale="lg"]{ --font-scale-user: 1.12; }

.theme-swatch{
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,.25);
  transition: transform .3s var(--ease-out, ease), border-color .3s;
}
.theme-swatch:hover{ transform: scale(1.15); }
.theme-swatch.active{ border-color: #fff; }
.theme-swatch[data-swatch="gold"]{ background: linear-gradient(135deg,#f0d9a8,#D8B26A); }
.theme-swatch[data-swatch="blue"]{ background: linear-gradient(135deg,#9CC7FF,#4F9DFF); }
.theme-swatch[data-swatch="purple"]{ background: linear-gradient(135deg,#C3ACFF,#8A5CFF); }
.theme-swatch[data-swatch="cyan"]{ background: linear-gradient(135deg,#A6F3F7,#2FD8E8); }
.theme-swatch[data-swatch="rose"]{ background: linear-gradient(135deg,#FFB4D0,#FF5E9E); }
.theme-swatch[data-swatch="green"]{ background: linear-gradient(135deg,#9CF5D3,#34D399); }
.theme-swatch[data-swatch="red"]{ background: linear-gradient(135deg,#FFB3B3,#FF5C5C); }

/* Text-size segmented control */
.fontsize-group{ display:flex; gap:8px; }
.fontsize-btn{
  flex:1; padding:8px 0; border-radius:10px; text-align:center;
  border:1px solid var(--glass-border); background:var(--glass-bg);
  color: var(--text-soft); font-weight:600; transition: all .25s var(--ease-out);
}
.fontsize-btn[data-size="sm"]{ font-size:.78rem; }
.fontsize-btn[data-size="md"]{ font-size:.92rem; }
.fontsize-btn[data-size="lg"]{ font-size:1.05rem; }
.fontsize-btn:hover{ color: var(--text); border-color: var(--glass-border-strong); }
.fontsize-btn.active{ color:#1a1408; background: var(--gold); border-color: var(--gold); }
.fontsize-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* =========================================================
   SETTINGS PANEL — gear FAB + slide-in control panel
========================================================= */
.settings-fab{
  position: fixed; z-index: 501; right: 26px; bottom: 168px;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,12,.7); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.14); color: var(--gold, #D8B26A);
  transition: transform .35s var(--ease-out, ease), border-color .3s, color .3s;
}
.settings-fab:hover{ transform: rotate(45deg) scale(1.06); border-color: rgba(255,255,255,.3); }
.settings-fab[aria-expanded="true"]{ color: #fff; border-color: var(--gold, #D8B26A); }

.settings-panel{
  position: fixed; z-index: 600; top: 0; right: 0; height: 100vh;
  width: min(320px, 86vw); padding: 26px 22px 28px;
  background: rgba(8,8,10,.86); backdrop-filter: blur(22px);
  border-left: 1px solid rgba(255,255,255,.12);
  box-shadow: -20px 0 60px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 22px;
  transform: translateX(100%); opacity: 0;
  transition: transform .45s var(--ease-out, ease), opacity .35s ease;
  overflow-y: auto;
}
.settings-panel.open{ transform: translateX(0); opacity: 1; }
.settings-panel[hidden]{ display: none; }

.settings-head{ display: flex; align-items: center; justify-content: space-between; }
.settings-title{ font-family: var(--font-display, inherit); font-size: 1.05rem; letter-spacing: .02em; color: #fff; }
.settings-close{
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff;
  display:flex; align-items:center; justify-content:center; font-size: .85rem;
  transition: background .25s ease;
}
.settings-close:hover{ background: rgba(255,255,255,.14); }

.settings-group{ display: flex; flex-direction: column; gap: 12px; }
.settings-label{
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.5);
}
.theme-swatches{ display: flex; gap: 10px; }

.settings-toggle-row{
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  cursor: pointer; font-size: .88rem; color: rgba(255,255,255,.85);
}
.settings-toggle-row small{ display:block; font-size: .7rem; color: rgba(255,255,255,.45); font-weight: 400; }

.toggle-switch{ position: relative; flex: none; width: 42px; height: 24px; }
.toggle-switch input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 1; }
.toggle-track{
  position: absolute; inset: 0; border-radius: 100px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14);
  transition: background .3s ease;
}
.toggle-thumb{
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .3s var(--ease-out, ease);
}
.toggle-switch input:checked ~ .toggle-track{ background: var(--gold, #D8B26A); border-color: var(--gold, #D8B26A); }
.toggle-switch input:checked ~ .toggle-track .toggle-thumb{ transform: translateX(18px); }
.toggle-switch input:focus-visible ~ .toggle-track{ outline: 2px solid #fff; outline-offset: 2px; }

.settings-reset{
  margin-top: auto; padding: 10px 14px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.75); font-size: .82rem; transition: background .25s ease, color .25s ease;
}
.settings-reset:hover{ background: rgba(255,255,255,.14); color: #fff; }

@media (max-width: 560px){
  .settings-fab{ right: 16px; bottom: 150px; width: 42px; height: 42px; }
}

/* =========================================================
   COMMAND PALETTE — Ctrl/Cmd+K quick navigation + actions
========================================================= */
.cmdk-fab{
  position: fixed; z-index: 501; right: 26px; bottom: 226px;
  height: 42px; padding: 0 14px; border-radius: 100px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,12,.7); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .3s var(--ease-out, ease), border-color .3s;
}
.cmdk-fab:hover{ transform: scale(1.05); border-color: rgba(255,255,255,.3); }
.cmdk-fab-key{
  font-family: var(--font-display, inherit); font-size: .78rem; letter-spacing: .04em;
  color: rgba(255,255,255,.75);
}
@media (max-width: 560px){ .cmdk-fab{ right: 16px; bottom: 202px; height: 38px; } }

.cmdk-overlay{
  position: fixed; inset: 0; z-index: 700;
  background: rgba(4,4,6,.6); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: min(14vh, 140px);
  opacity: 0; transition: opacity .25s ease;
}
.cmdk-overlay[hidden]{ display: none; }
.cmdk-overlay.open{ opacity: 1; }

.cmdk-panel{
  width: min(560px, 90vw); max-height: 62vh; display: flex; flex-direction: column;
  background: rgba(12,12,15,.92); border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,.55);
  transform: translateY(-10px) scale(.98); transition: transform .25s var(--ease-out, ease);
  overflow: hidden;
}
.cmdk-overlay.open .cmdk-panel{ transform: translateY(0) scale(1); }

.cmdk-input-row{
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.55);
}
.cmdk-search-icon{ width: 18px; height: 18px; flex: none; }
.cmdk-input{
  flex: 1; background: none; border: none; outline: none;
  color: #fff; font-size: .98rem; font-family: var(--font-body, inherit);
}
.cmdk-input::placeholder{ color: rgba(255,255,255,.35); }
.cmdk-esc{
  font-size: .68rem; padding: 3px 7px; border-radius: 6px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.5);
}

.cmdk-list{ list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.cmdk-item{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  color: rgba(255,255,255,.8); font-size: .9rem;
}
.cmdk-item .cmdk-item-tag{
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.35);
}
.cmdk-item[aria-selected="true"]{
  background: rgba(216,178,106,.14); color: #fff;
}
.cmdk-item[aria-selected="true"] .cmdk-item-tag{ color: var(--gold, #D8B26A); }
.cmdk-empty{ padding: 22px 12px; text-align: center; color: rgba(255,255,255,.4); font-size: .88rem; }

/* =========================================================
   CTA LEAD FORM
========================================================= */
.cta-lead-form{
  margin-top: 26px; padding: 24px; border-radius: 18px; text-align: left;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  max-width: 620px; margin-left: auto; margin-right: auto;
}
.cta-lead-form[hidden]{ display: none; }
.cta-form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cta-field{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cta-field label{ font-size: .82rem; color: rgba(255,255,255,.7); }
.cta-field label small{ color: rgba(255,255,255,.4); font-weight: 400; }
.cta-field input, .cta-field select, .cta-field textarea{
  font-family: var(--font-body, inherit); font-size: .92rem; color: #fff;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.16); border-radius: 10px;
  padding: 10px 12px; outline: none; transition: border-color .25s ease, box-shadow .25s ease;
}
.cta-field textarea{ resize: vertical; min-height: 90px; }
.cta-field input:focus, .cta-field select:focus, .cta-field textarea:focus{
  border-color: var(--gold, #D8B26A); box-shadow: 0 0 0 3px rgba(216,178,106,.18);
}
.cta-field.invalid input, .cta-field.invalid textarea{ border-color: #ff6b6b; }
.cta-field-err{ font-size: .76rem; color: #ff8080; min-height: 1em; }
.cta-form-foot{
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 4px;
}
.cta-form-note{ font-size: .78rem; color: rgba(255,255,255,.45); margin: 0; max-width: 320px; }
.cta-form-success{
  margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; font-size: .85rem;
  background: rgba(120,220,150,.12); border: 1px solid rgba(120,220,150,.3); color: #b7f0c6;
}
.cta-form-success[hidden]{ display: none; }
@media (max-width: 640px){
  .cta-form-row{ grid-template-columns: 1fr; }
}

/* ---------- header nav scrollspy ---------- */
.nav-links a{ position: relative; }
.nav-links a.spy-active{ color: #fff; }
.nav-links a.spy-active::after{
  content:""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--gold, #D8B26A); border-radius: 2px;
}

/* ---------- toggle effects ---------- */
html.fx-off .mesh-layer, html.fx-off .bokeh, html.fx-off .starfield, html.fx-off .light-rays, html.fx-off .cinematic-vignette{
  display: none !important;
}
html.cursor-off .cursor-spotlight, html.cursor-off .cursor-trail-dot{
  display: none !important;
}
html.force-reduce-motion *, html.force-reduce-motion *::before, html.force-reduce-motion *::after{
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
html.perf-mode #hero3d, html.perf-mode #globe3d, html.perf-mode #stackOrb, html.perf-mode #laptopMockup{ display: none !important; }

/* =========================================================
   WHY US — floating 3D laptop mockup (procedural, GLB-ready)
========================================================= */
.laptop-orb-wrap{ display: flex; justify-content: center; margin: -10px auto 30px; }
.laptop-orb-wrap canvas{ width: 240px; height: 160px; display: block; }
@media (max-width: 560px){ .laptop-orb-wrap canvas{ width: 190px; height: 130px; } }

/* =========================================================
   TECH STACK — floating 3D integration orb
========================================================= */
.stack-orb-wrap{ display: flex; justify-content: center; margin: -6px auto 34px; }
.stack-orb-wrap canvas{ width: 160px; height: 160px; display: block; }
@media (max-width: 560px){ .stack-orb-wrap canvas{ width: 120px; height: 120px; } }

/* =========================================================
   RICHER BACKGROUND ANIMATION — light rays + twinkling starfield
========================================================= */
.light-rays{
  position: fixed; inset: -20%; z-index: 0; pointer-events: none; opacity: .28; mix-blend-mode: screen;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(216,178,106,.12) 8deg, transparent 20deg,
    transparent 100deg, rgba(76,242,255,.10) 108deg, transparent 120deg,
    transparent 220deg, rgba(138,92,255,.10) 228deg, transparent 240deg,
    transparent 360deg);
  animation: raysSpin 60s linear infinite;
}
@keyframes raysSpin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .light-rays{ animation: none; } }

.starfield{ position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.star{
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff;
  animation: starTwinkle ease-in-out infinite;
}
@keyframes starTwinkle{ 0%,100%{ opacity: .15; } 50%{ opacity: .9; } }
@media (prefers-reduced-motion: reduce){ .star{ animation: none; opacity: .4; } }