/* =========================================================
   RK Vridhi Digital — Complete Animated Design System
   ========================================================= */
:root{
  --navy-900:#050505;
  --navy-800:#0a1228;
  --navy-700:#101c3a;
  --navy-600:#16264d;
  --line:rgba(140,180,255,.16);
  --line-strong:rgba(120,170,255,.34);
  --text:#eaf1ff;
  --muted:#a9bada;
  --brand-400:#5aa2ff;
  --brand-500:#2f7bff;
  --brand-600:#1a55e0;
  --accent:#38e0c8;
  --grad:linear-gradient(135deg,#2f7bff 0%,#5aa2ff 45%,#38e0c8 100%);
  --grad-soft:linear-gradient(135deg,rgba(47,123,255,.18),rgba(56,224,200,.12));
  --glass:rgba(255,255,255,.045);
  --glass-strong:rgba(255,255,255,.075);
  --card-red:linear-gradient(145deg,#5c1f26,#33111a);
  --card-blue:linear-gradient(145deg,#17284d,#0d1830);
  --card-yellow:linear-gradient(145deg,#4a3d10,#2b230a);
  --card-golden:linear-gradient(145deg,#5c4413,#33270b);
  --card-grey:linear-gradient(145deg,#343a42,#1c2024);
  --card-brown:linear-gradient(145deg,#40291a,#23150b);
  --shadow:0 18px 44px rgba(2,8,24,.55);
  --shadow-lg:0 28px 70px rgba(2,8,24,.65);
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:30px;
  --wrap:1180px;
  --sp:clamp(56px,7vw,104px);
  --font-head:"Manrope","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);color:var(--text);
  background:var(--navy-900);line-height:1.65;font-size:16px;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-400);text-decoration:none}
a:hover{color:#8dc0ff}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(34px,5.6vw,60px);font-weight:800}
h2{font-size:clamp(30px,4.4vw,48px);font-weight:800}
h3{font-size:clamp(20px,2.2vw,25px);font-weight:800}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.15rem}
.wrap{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.plain{list-style:none;padding:0;margin:0}
.plain li{margin:.4em 0}
.dropdown-group-label,.footer-group-label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);opacity:.8;padding:10px 14px 2px;margin-top:4px}
.dropdown-group-label:first-child,.footer-group-label:first-child{margin-top:0;padding-top:0}
ul.plain li.footer-group-label{padding-left:0}
.accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.center{text-align:center}

/* ---------- 2. CURSOR ORB LIGHTING ---------- */
.cursor-orb {
  position: fixed; width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(90,162,255,0.18) 0%, transparent 70%);
  pointer-events: none; z-index: 9999;
  border-radius: 50%; transform: translate(-50%, -50%);
  transition: opacity 0.3s; mix-blend-mode: screen;
}

/* ---------- 3. POINTER SHOCKWAVE ON CLICK ---------- */
.shockwave-ripple {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(56,224,200,0.4) 0%, rgba(47,123,255,0.15) 50%, transparent 70%);
  animation: shockwave-expand 0.8s ease-out forwards;
}
@keyframes shockwave-expand {
  0% { width: 0; height: 0; opacity: 0.8; }
  100% { width: 450px; height: 450px; opacity: 0; }
}

/* ---------- accessibility ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--brand-500);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--brand-400);outline-offset:3px;border-radius:6px}

/* ---------- background fx ---------- */
.bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:
  radial-gradient(1100px 620px at 78% -8%,rgba(47,123,255,.20),transparent 60%),
  radial-gradient(900px 540px at 4% 12%,rgba(56,224,200,.10),transparent 60%),
  linear-gradient(180deg,#050a18 0%,#08102400 40%,#050a18 100%),var(--navy-900)}
.bg-fx .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.bg-fx .b1{width:420px;height:420px;background:rgba(47,123,255,.35);top:-90px;right:-60px}
.bg-fx .b2{width:360px;height:360px;background:rgba(56,224,200,.18);bottom:8%;left:-90px}
.bg-fx .b3{width:300px;height:300px;background:rgba(90,162,255,.20);top:44%;right:8%}
.bg-fx .grid{position:absolute;inset:0;opacity:.28;
  background-image:linear-gradient(rgba(140,180,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(140,180,255,.06) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(70% 55% at 50% 30%,#000,transparent 85%)}

/* ---------- 5. FLOWING WAVE BG SECTION ---------- */
.wave-hero-section {
  position: relative; background: #0a0e1f; padding: 70px 20px; border-radius: var(--r-lg); overflow: hidden; margin: 40px auto; width: min(var(--wrap), calc(100% - 40px));
}
.wave-bg-anim {
  position: absolute; inset: -30%;
  background: conic-gradient(from 180deg at 50% 50%, transparent 0deg, rgba(56,224,200,0.25) 60deg, rgba(47,123,255,0.4) 140deg, rgba(90,162,255,0.25) 220deg, transparent 360deg);
  filter: blur(70px); animation: wave-rotate 14s linear infinite; pointer-events: none;
}
@keyframes wave-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- 4. MARQUEE TICKER ---------- */
.marquee-wrap { background: rgba(5,10,24,0.85); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; overflow: hidden; margin: 20px 0; }
.marquee-track { display: flex; gap: 40px; width: max-content; animation: marquee-scroll 22s linear infinite; }
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
.marquee-item { color: var(--muted); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.marquee-item::after { content: "•"; color: var(--accent); opacity: 0.6; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- glass ---------- */
.glass{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);
}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(5,10,24,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
  transition:top .4s cubic-bezier(.22,1,.36,1),width .4s cubic-bezier(.22,1,.36,1),max-width .4s cubic-bezier(.22,1,.36,1),
  border-radius .4s ease,border-color .4s ease,background .4s ease,box-shadow .4s ease,padding .4s ease;}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;transition:gap .4s ease,padding .4s ease}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--text);flex-shrink:0}
.brand img{border-radius:9px}
.nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap;position:relative;transition:opacity .3s ease,max-width .4s ease,margin .4s ease}
.nav-links a{position:relative;z-index:1;padding:9px 13px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--muted);transition:color .22s}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff}
.nav-cta{position:relative;z-index:1;background:var(--grad)!important;color:#04122e!important;font-weight:800!important;border:0!important;box-shadow:0 10px 26px rgba(47,123,255,.32);
  transition:opacity .3s ease,max-width .4s ease,padding .4s ease,margin .4s ease}
.nav-cta:hover{filter:brightness(1.06);color:#04122e!important}

/* ---------- header shrink state: floats to center, collapses to logo + name only ----------
   Toggle by adding class "nav-shrink" to .site-header via JS when window.scrollY > ~40px. */
.site-header.nav-shrink{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  width:max-content;max-width:92%;
  border-radius:999px;border:1px solid var(--line-strong);
  background:rgba(8,16,36,.92);box-shadow:var(--shadow-lg);
}
.site-header.nav-shrink .wrap{width:auto;margin:0;padding:0 22px}
.site-header.nav-shrink .nav{padding:9px 0;gap:0}
.site-header.nav-shrink .nav-links,
.site-header.nav-shrink .nav-cta,
.site-header.nav-shrink .nav-toggle{
  opacity:0;max-width:0;padding:0!important;margin:0!important;
  overflow:hidden;pointer-events:none;border:0;box-shadow:none;
}
@media (prefers-reduced-motion:reduce){
  .site-header,.nav,.nav-links,.nav-cta{transition:none}
}

/* ---------- magnetic tab indicator (pill slides + morphs between nav links) ---------- */
.nav-pill{
  position:absolute;top:0;left:0;z-index:0;border-radius:999px;
  background:var(--grad-soft);border:1px solid var(--line-strong);
  opacity:0;pointer-events:none;
  transition:transform .5s cubic-bezier(.22,1.4,.36,1),width .5s cubic-bezier(.22,1.4,.36,1),height .5s cubic-bezier(.22,1.4,.36,1),opacity .25s ease;
  will-change:transform,width,height;
}
.nav-links.pill-ready .nav-pill{opacity:1}
@media (prefers-reduced-motion:reduce){
  .nav-pill{transition:opacity .2s ease}
}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line-strong);border-radius:12px;padding:10px 11px;cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--text);margin:4px 0;border-radius:2px;transition:.25s}

/* ---------- sections ---------- */
.section{padding:var(--sp) 0}
.section-head{max-width:780px;margin:0 auto clamp(32px,4vw,52px);text-align:center}
.section-head p{color:var(--muted);font-size:17px;margin:0}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-400);padding:7px 13px;border-radius:999px;background:var(--grad-soft);border:1px solid var(--line-strong);margin-bottom:16px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:999px;
  font-weight:800;font-size:15px;border:1px solid transparent;cursor:pointer;transition:.24s;min-height:48px}
.btn-primary{background:var(--grad);color:#04122e;box-shadow:0 14px 32px rgba(47,123,255,.30)}
.btn-primary:hover{transform:translateY(-2px);color:#04122e;box-shadow:0 18px 40px rgba(47,123,255,.40)}
.btn-ghost{background:var(--glass-strong);border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateY(-2px)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,6vw,84px) 0 clamp(40px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center}
.hero h1{margin-bottom:18px}
.hero-lede{font-size:clamp(16.5px,1.5vw,19px);color:var(--muted);max-width:60ch}
.hero-role{font-family:var(--font-head);font-weight:700;color:var(--brand-400);letter-spacing:.02em;margin-bottom:10px}
.pill-row{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 26px}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--muted);
  padding:8px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--line)}
.portrait-frame{border-radius:var(--r-xl);padding:10px;background:var(--grad-soft);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg)}
.portrait-frame img{border-radius:calc(var(--r-xl) - 8px);width:100%;object-fit:cover}
.identity-card{margin-top:-30px;margin-inline:auto;width:max-content;max-width:92%;padding:14px 22px;border-radius:var(--r-md);
  background:rgba(8,16,36,.9);border:1px solid var(--line-strong);text-align:center;position:relative;box-shadow:var(--shadow)}
.identity-card .name{font-family:var(--font-head);font-weight:800;font-size:18px}
.identity-card .role{font-size:13px;color:var(--muted)}

/* ---------- metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.metric{padding:26px;text-align:center}
.metric .m-value{font-family:var(--font-head);font-size:clamp(32px,4vw,46px);font-weight:800;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.metric .m-label{margin-top:8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- cards ---------- */
.card-grid{display:grid;gap:20px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.card{padding:28px;position:relative;transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease;height:100%}
.card:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:var(--shadow-lg)}
.card p{color:var(--muted);margin-bottom:.7em}
.card p:last-of-type{margin-bottom:0}

/* ---------- 7. UNIVERSAL ACCENT CARD SYSTEM ----------
   One card design, used everywhere: solutions, process/challenge steps,
   diversity/feature grids, team, services — anywhere a colored card is needed.
   The WHOLE card is washed in the accent color (a top-to-bottom tinted gradient,
   not just a corner glow), plus a matching tinted border — not only the icon tile.
   Each card gets its color from a fixed brand palette (.c-indigo, .c-teal, .c-purple,
   .c-cyan, .c-green, .c-red, .c-blue) added as an extra class — no inline styles needed.
   .accent-card is the canonical class name; .solution-card is kept as an alias so
   existing markup keeps working unchanged. */
.cards-wrap{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

.accent-card,.solution-card{
  --accent:#5aa2ff;--accent-soft:rgba(90,162,255,.22);--accent-wash:rgba(90,162,255,.38);
  padding:0;overflow:hidden;position:relative;
  background:linear-gradient(165deg,var(--accent-wash) 0%,var(--accent-soft) 42%,rgba(6,11,24,.92) 100%),var(--navy-800);
  border:1px solid var(--accent-soft);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,border-color .4s ease;
}
.accent-card::after,.solution-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 1px transparent inset;transition:box-shadow .4s ease;
}
.accent-card:hover,.solution-card:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:0 26px 60px -22px var(--accent-wash)}
.accent-card:hover::after,.solution-card:hover::after{box-shadow:0 0 0 1px var(--accent-soft) inset}

/* clickable card variant — padding lives on the link, body has none (avoids double padding) */
.accent-card-link,.solution-card-link{display:flex;flex-direction:column;height:100%;padding:26px 24px 24px;color:inherit;text-decoration:none}
.solution-card-body{display:flex;flex-direction:column;flex:1;min-height:0}
/* non-link (plain) card variant — body carries its own padding */
.accent-card-body{display:flex;flex-direction:column;flex:1;min-height:0;padding:26px 24px 24px}

.accent-card-top,.solution-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.accent-num,.solution-num{font-family:var(--font-head);font-weight:800;font-size:11.5px;letter-spacing:.06em;color:var(--text);
  background:rgba(255,255,255,.06);border:1px solid var(--line-strong);padding:5px 11px;border-radius:8px}
.accent-tile-icon,.solution-tile-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--accent);
  box-shadow:0 10px 22px -8px var(--accent);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.accent-tile-icon svg,.solution-tile-icon svg{width:22px;height:22px}
.accent-card:hover .accent-tile-icon,.solution-card:hover .solution-tile-icon{transform:scale(1.08) rotate(-4deg)}
.accent-card-body h3,.solution-card-body h3{margin:0 0 12px;font-size:1.1rem}
.accent-divider,.solution-divider{display:block;width:32px;height:3px;border-radius:2px;background:var(--accent);margin-bottom:14px;transition:width .4s ease}
.accent-card:hover .accent-divider,.solution-card:hover .solution-divider{width:54px}
.accent-card-body>p,.solution-card-body>p{margin:0 0 18px;font-size:.92rem;line-height:1.55;color:var(--muted)}
.accent-bestfor,.solution-bestfor{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);margin-bottom:16px}
.accent-bestfor-label,.solution-bestfor-label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.accent-bestfor p,.solution-bestfor p{margin:0;font-size:.87rem;line-height:1.5;color:var(--muted)}
.accent-card-cta,.solution-card-cta{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.92rem;color:var(--accent)}
.accent-card-cta .arrow,.solution-card-cta .arrow{display:inline-block;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.accent-card:hover .accent-card-cta .arrow,.solution-card:hover .solution-card-cta .arrow{transform:translateX(6px)}
.solution-card-center{grid-column:2 / span 1}

/* fixed brand palette — add one of these classes alongside .accent-card / .solution-card
   instead of inline style="--accent:...". Reuse the same 7 across every card grid on the site. */
.c-indigo{--accent:#6366F1;--accent-soft:rgba(99,102,241,.22);--accent-wash:rgba(99,102,241,.40)}
.c-teal  {--accent:#14B8A6;--accent-soft:rgba(20,184,166,.22);--accent-wash:rgba(20,184,166,.40)}
.c-purple{--accent:#A78BFA;--accent-soft:rgba(167,139,250,.22);--accent-wash:rgba(167,139,250,.40)}
.c-cyan  {--accent:#22D3EE;--accent-soft:rgba(34,211,238,.22);--accent-wash:rgba(34,211,238,.40)}
.c-green {--accent:#22C55E;--accent-soft:rgba(34,197,94,.22);--accent-wash:rgba(34,197,94,.40)}
.c-red   {--accent:#EF4444;--accent-soft:rgba(239,68,68,.22);--accent-wash:rgba(239,68,68,.40)}
.c-blue  {--accent:#2563EB;--accent-soft:rgba(37,99,235,.22);--accent-wash:rgba(37,99,235,.40)}

@media (prefers-reduced-motion:reduce){
  .accent-card,.solution-card,.accent-tile-icon,.solution-tile-icon,.accent-divider,.solution-divider,.accent-card-cta .arrow,.solution-card-cta .arrow{transition:none}
}
@media (max-width:980px){ .solution-card-center{grid-column:auto} }

/* ---------- flow ---------- */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.flow-step{position:relative;padding:18px 22px;border-radius:var(--r-md);background:var(--glass);
  border:1px solid var(--line);backdrop-filter:blur(10px);text-align:center}
.flow-title{display:block;font-family:var(--font-head);font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.flow-sub{display:block;color:var(--muted);font-size:14.5px;margin-top:4px}
.flow-h{grid-auto-flow:column;grid-auto-columns:1fr}
.flow-grid-3{grid-template-columns:repeat(3,1fr)}

/* ---------- notes / FAQ ---------- */
.note{padding:26px 28px;border-radius:var(--r-lg);border:1px solid var(--line-strong);background:var(--grad-soft)}
.faq{display:grid;gap:12px;max-width:860px;margin-inline:auto}
.faq-item{padding:0;overflow:hidden}
.faq-item summary{cursor:pointer;padding:18px 22px;font-family:var(--font-head);font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--brand-400);font-size:22px;line-height:1}
.faq-item[open] summary::after{content:"–"}
.faq-a{padding:0 22px 18px;color:var(--muted)}

/* ---------- CTA band ---------- */
.cta-card{padding:clamp(32px,4vw,56px);text-align:center;background:var(--grad-soft);border-color:var(--line-strong)}
.cta-card p{color:var(--muted);max-width:62ch;margin-inline:auto}
.cta-card .btn-row{justify-content:center;margin-top:24px}

/* ---------- BUSINESSES I HANDLE — LOCKED COLOUR WAVE CARDS ---------- */
.biz-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;width:100%}
.biz-chip{position:relative;display:block;min-width:0;min-height:110px;overflow:hidden;isolation:isolate;padding:22px 14px;text-align:center;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--line);opacity:1;visibility:visible;transition:transform .25s ease,border-color .25s ease,background .25s ease}
.biz-chip:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.biz-chip::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid transparent}
.biz-chip .biz-wave{position:absolute;width:180%;height:180%;top:-40%;left:-40%;z-index:0;filter:blur(30px);opacity:.48;pointer-events:none;animation:jcWaveFlow 17s ease-in-out infinite;will-change:transform}
.biz-chip:hover .biz-wave{opacity:.78}
.biz-chip .biz-icon{position:relative;z-index:1}
.biz-chip h3{position:relative;z-index:1}
@media (max-width:980px){.biz-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.biz-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.biz-chip{min-height:104px;padding:20px 10px}}

/* ---------- consultation form (global — used on every page with #consult) ---------- */
.consult-section{padding:var(--sp) 0}
.consult-card{
  position:relative;overflow:hidden;isolation:isolate;max-width:900px;margin:0 auto;
  padding:clamp(26px,4vw,44px);border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(47,123,255,.20) 0%,rgba(56,224,200,.10) 45%,rgba(6,11,24,.94) 100%),var(--navy-800);
  border:1px solid var(--line-strong);
  transition:border-color .4s ease,box-shadow .4s ease;
}
.consult-card:hover{border-color:rgba(120,170,255,.55);box-shadow:0 26px 60px -22px rgba(47,123,255,.35)}
.consult-card-inner{position:relative;z-index:1}
.consult-wave{position:absolute;width:170%;height:170%;top:-35%;left:-35%;z-index:0;filter:blur(64px);opacity:.55;pointer-events:none;animation:jcWaveFlow 17s ease-in-out infinite;will-change:transform}
.consult-wave{background:
  radial-gradient(circle at 75% 20%,#5aa2ff,transparent 50%),
  radial-gradient(circle at 15% 80%,#38e0c8,transparent 48%),
  radial-gradient(circle at 55% 60%,#a855f7,transparent 46%)}
.consult-card:hover .consult-wave{opacity:.8}
@media (prefers-reduced-motion:reduce){.consult-wave{animation:none}.consult-card{transition:none}}
.consult-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13.5px;font-weight:700;color:var(--muted)}
.field-hint{font-weight:400;text-transform:none;letter-spacing:0;opacity:.7}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.05);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  color:var(--text);padding:12px 14px;font-family:var(--font-body);font-size:16px;width:100%;
}
/* Native <option> list renders on a white background in most browsers/OS,
   so force dark, readable text for the options themselves (the closed
   select box above keeps the light --text color against its dark field).
   color-scheme:light stops the browser's own dark-mode auto-theming of
   the native dropdown from overriding these colors (which is why only
   the highlighted/selected option was showing up readable). */
.field select{color-scheme:light}
.field select option{color:#0a0f1f !important;background:#fff !important}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brand-400);outline-offset:2px;border-color:var(--brand-400)}
.field-error{font-size:12.5px;color:#ff8a8a;min-height:1em}
.website-url{position:absolute;left:-9999px;opacity:0}
.form-microcopy{color:var(--muted);font-size:13px;text-align:center;margin-top:12px}
.form-feedback{text-align:center;font-weight:700;margin-top:10px;color:var(--accent)}
.consult-contact{display:flex;flex-wrap:wrap;gap:14px 22px;justify-content:center;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.consult-contact a{font-weight:700;font-size:14.5px}
.full{width:100%}
.mt-2{margin-top:8px}
@media (max-width:980px){
  .consult-grid{grid-template-columns:1fr}
}

/* ---------- footer additions (global) ---------- */
.footer-tagline{color:var(--muted);font-size:14.5px;margin:10px 0}
.footer-since{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-400);margin-bottom:14px}
.footer-social{display:flex;gap:12px}
.footer-social a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--glass-strong);border:1px solid var(--line)}
.footer-social a:hover{background:var(--grad-soft);border-color:var(--line-strong)}
.footer-social svg{width:17px;height:17px;fill:var(--text)}
.footer-cta{display:inline-flex;margin-top:14px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:rgba(5,10,24,.7);padding:clamp(44px,5vw,68px) 0 26px;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px}
.footer-brand{margin-bottom:12px}
.site-footer h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:#fff}
.footer-bottom{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:8px}

/* ---------- FINAL CONVERSION: TRIAL PACK + START YOUR DIGITAL JOURNEY ---------- */
.journey-conversion-section{
  padding:var(--sp) 0;
  --jc-trial-1:#5ec8f2;--jc-trial-2:#2f6fe0;--jc-trial-glow:rgba(94,200,242,.40);
  --jc-gold-1:#e6b757;--jc-gold-2:#a56a1a;--jc-gold-glow:rgba(214,168,74,.35);
}
.conversion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,32px)}
.conversion-card{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:285px;padding:clamp(28px,4vw,40px);
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.conversion-card:hover{transform:translateY(-6px)}
.trial-card{background:linear-gradient(135deg,rgba(47,111,224,.22),rgba(94,200,242,.10)),var(--glass)}
.journey-card{background:linear-gradient(135deg,rgba(166,106,26,.20),rgba(230,183,87,.10)),var(--glass)}
.trial-card:hover{border-color:rgba(94,200,242,.60);box-shadow:0 24px 60px -20px var(--jc-trial-glow)}
.journey-card:hover{border-color:rgba(214,168,74,.60);box-shadow:0 24px 60px -20px var(--jc-gold-glow)}
.conversion-wave{position:absolute;width:170%;height:170%;top:-35%;left:-35%;z-index:0;filter:blur(58px);opacity:.62;pointer-events:none;animation:jcWaveFlow 16s ease-in-out infinite;will-change:transform}
.trial-wave{background:radial-gradient(circle at 72% 28%,var(--jc-trial-1),transparent 52%),radial-gradient(circle at 18% 78%,var(--jc-trial-2),transparent 48%)}
.journey-wave{background:radial-gradient(circle at 72% 28%,var(--jc-gold-1),transparent 52%),radial-gradient(circle at 18% 78%,var(--jc-gold-2),transparent 48%);animation-duration:19s}
.conversion-card:hover .conversion-wave{opacity:.88}
@keyframes jcWaveFlow{0%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(-4%,3%) rotate(6deg) scale(1.04)}100%{transform:translate(0,0) rotate(0deg) scale(1)}}
.conversion-card-inner{position:relative;z-index:1}
.conv-title{display:block;font-size:clamp(20px,2.4vw,25px);line-height:1.3;margin:0 0 14px}
.conv-icon{display:none!important}
.conv-copy{color:var(--muted);font-size:15px;line-height:1.65;margin:0 0 24px}
.conv-price-old{text-decoration:line-through;opacity:.7}
.conv-price-new{color:var(--text);font-weight:800}
.conv-btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;padding:14px 26px;border-radius:999px;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.conv-btn:hover{transform:translateY(-3px)}
.conv-btn-trial{background:linear-gradient(135deg,var(--jc-trial-1),var(--jc-trial-2));color:#07131a}
.conv-btn-trial:hover{box-shadow:0 14px 30px -10px var(--jc-trial-glow)}
.conv-btn-journey{background:#0a0a0a;color:#f4e2ae;border:1px solid rgba(214,168,74,.5)}
.conv-btn-journey:hover{box-shadow:0 14px 30px -10px var(--jc-gold-glow);border-color:rgba(214,168,74,.9)}

/* ---------- 6. PREMIUM 3D FLOATING CONTACT DOCK (WhatsApp / Call / Email) & MOBILE BAR ---------- */
.float-stack{position:fixed; right:22px; bottom:32px; z-index:999; display:flex; flex-direction:column; align-items:flex-end; gap:14px}
.float-icon{
  position:relative; width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  color:#04231a; border:1px solid rgba(255,255,255,.35);
  background-blend-mode:overlay;
  box-shadow:0 14px 30px -8px var(--fab-glow,rgba(0,0,0,.4)), 0 2px 4px rgba(0,0,0,.25) inset, 0 -6px 10px rgba(255,255,255,.18) inset;
  animation: fab-float 3.6s ease-in-out infinite;
  transition: transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .32s ease, filter .32s ease;
  will-change: transform;
}
.float-icon::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%);
  opacity:.8; pointer-events:none;
}
.float-icon:hover, .float-icon:focus-visible{
  transform:translateY(-6px) scale(1.08);
  box-shadow:0 22px 44px -10px var(--fab-glow,rgba(0,0,0,.5)), 0 2px 4px rgba(0,0,0,.25) inset, 0 -6px 10px rgba(255,255,255,.22) inset;
  filter:brightness(1.06);
}
.float-icon:hover svg, .float-icon:focus-visible svg{transform:scale(1.12) rotate(-4deg)}
.float-icon svg{position:relative; z-index:1; width:25px; height:25px; transition:transform .28s ease}
.float-icon .float-label{
  position:absolute; right:calc(100% + 14px); top:50%; transform:translateY(-50%) translateX(8px);
  background:rgba(8,14,30,.96); border:1px solid var(--line-strong); color:var(--text);
  font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:8px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.float-icon:hover .float-label, .float-icon:focus-visible .float-label{opacity:1; transform:translateY(-50%) translateX(0)}
.float-wa{
  background:linear-gradient(155deg,#3fe089 0%,#25d366 45%,#128c4a 100%);
  --fab-glow:rgba(37,211,102,.55); animation-delay:0s;
}
.float-call{
  background:linear-gradient(155deg,#7cc3ff 0%,#2f7bff 45%,#1a4fb8 100%);
  --fab-glow:rgba(47,123,255,.55); animation-delay:.5s; color:#06152e;
}
.float-email{
  background:linear-gradient(155deg,#c9a3ff 0%,#8b5cf6 45%,#5b21b6 100%);
  --fab-glow:rgba(139,92,246,.55); animation-delay:1s; color:#1a0e33;
}
@keyframes fab-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}
.float-icon:hover{animation-play-state:paused}
@media (max-width:900px){
  .float-stack{right:14px; bottom:90px; gap:10px}
  .float-icon{width:50px; height:50px}
  .float-icon svg{width:21px; height:21px}
  .float-label{display:none}
}
@media (prefers-reduced-motion:reduce){
  .float-icon{animation:none}
  .float-icon:hover, .float-icon:focus-visible{transform:none}
  .float-icon:hover svg, .float-icon:focus-visible svg{transform:none}
}

.mobile-bar{display:none}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .conversion-grid{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .site-header{background:rgba(5,10,24,.98);}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:4px;padding:14px 20px 22px;
    background:rgba(5,10,24,.98);border-bottom:1px solid var(--line);display:none}
  .nav-links.open{display:flex}
  .nav-pill{display:none}
  .hero-grid{grid-template-columns:1fr}
  .cards-3,.cards-2{grid-template-columns:1fr}
  .flow-h{grid-auto-flow:row}
  .mobile-bar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 14px;background:rgba(5,10,24,.94);border-top:1px solid var(--line);backdrop-filter:blur(14px)}
  .mobile-bar .btn{flex:1;padding:12px 12px;font-size:14px}
  .conversion-card{min-height:0}
  .conv-btn{width:100%;justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .conversion-wave{animation:none}
  .conversion-card,.conv-btn,.biz-chip{transition:none}
  .conversion-card:hover,.biz-chip:hover{transform:none}
}

/* =========================================================
   LAYOUT / NAV / BREADCRUMB — used by my-solutions.html and
   every /solutions/*.html page (site-wide, not page-specific)
   ========================================================= */
.container{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto}

.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text span{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

.primary-nav{position:relative}
.primary-nav ul{list-style:none;display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0;padding:0}
.primary-nav li{position:relative;margin:0}
.primary-nav a{display:inline-flex;align-items:center;padding:9px 13px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--muted);transition:color .22s,background .22s}
.primary-nav a:hover{color:#fff}
.primary-nav a[aria-current="page"]{color:#fff;background:var(--glass-strong)}
.header-cta{margin-left:8px}

/* dropdown — "My Solutions" (7 services)
   Works under either header pattern used across the site: the newer
   .primary-nav (used on /solutions/*.html) and the original .nav-links
   (used on my-solutions.html, index.html, etc.) */
.primary-nav .dropdown,.nav-links .dropdown{position:relative;display:inline-flex;align-items:center}
.primary-nav .dropdown > a::after,.nav-links .dropdown > a::after{content:"";display:inline-block;margin-left:6px;width:6px;height:6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
.primary-nav .dropdown:hover > a::after,.primary-nav .dropdown:focus-within > a::after,
.nav-links .dropdown:hover > a::after,.nav-links .dropdown:focus-within > a::after{transform:rotate(-135deg)}
.primary-nav .dropdown-content,.nav-links .dropdown-content{
  list-style:none;position:absolute;top:calc(100% + 10px);left:0;min-width:280px;margin:0;padding:10px;
  background:rgba(8,14,30,.98);border:1px solid var(--line-strong);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:80;
}
.primary-nav .dropdown:hover .dropdown-content,.primary-nav .dropdown:focus-within .dropdown-content,
.nav-links .dropdown:hover .dropdown-content,.nav-links .dropdown:focus-within .dropdown-content{
  opacity:1;visibility:visible;transform:translateY(0);
}
.primary-nav .dropdown-content li,.nav-links .dropdown-content li{margin:0}
.primary-nav .dropdown-content a,.nav-links .dropdown-content a{display:block;padding:10px 14px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--muted);white-space:normal}
.primary-nav .dropdown-content a:hover,.primary-nav .dropdown-content a[aria-current="page"],
.nav-links .dropdown-content a:hover,.nav-links .dropdown-content a[aria-current="page"]{background:var(--grad-soft);color:#fff}

.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin:0 0 18px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--brand-400)}
.breadcrumb span{color:var(--text);font-weight:600}

@media (max-width:900px){
  .primary-nav{position:static}
  .primary-nav ul{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:4px;
    padding:14px 20px 22px;background:rgba(5,10,24,.98);border-bottom:1px solid var(--line);display:none}
  #primaryNav.open ul,#navLinks.open ul,.primary-nav ul.open{display:flex}
  .primary-nav .dropdown-content,.nav-links .dropdown-content{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:none;background:transparent;margin:2px 0 6px;padding-left:14px}
  .primary-nav .dropdown > a::after,.nav-links .dropdown > a::after{display:none}
  .nav-links .dropdown{display:flex;flex-direction:column;align-items:flex-start}
  .header-cta{display:none}
}

/* =========================================================
   SOLUTIONS GRID (my-solutions.html card list)
   ========================================================= */
.solutions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.solution-card-img{margin:-26px -24px 20px;aspect-ratio:16/10;overflow:hidden;
  border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
.solution-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.solution-card:hover .solution-card-img img{transform:scale(1.06)}
@media (max-width:980px){.solutions-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.solutions-grid{grid-template-columns:1fr}}

.disclaimer-box{font-size:13px;color:var(--muted);text-align:center;max-width:70ch;margin:32px auto 0;
  padding:14px 18px;border:1px dashed var(--line-strong);border-radius:var(--r-sm)}

/* =========================================================
   7-SERVICE COMPARISON TABLE (my-solutions.html #comparison)
   ========================================================= */
.comparison-section{padding:var(--sp) 0}
.comparison-wrapper{width:100%;overflow-x:auto;margin-top:40px;background:var(--glass);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.comparison-table{width:100%;border-collapse:collapse;text-align:left;font-size:.92rem;min-width:1000px}
.comparison-table th,.comparison-table td{padding:16px 20px;border-bottom:1px solid var(--line)}
.comparison-table th{background:rgba(255,255,255,.045);font-weight:700;color:var(--text);position:sticky;top:0;z-index:10}
.comparison-table td:first-child,.comparison-table th:first-child{
  position:sticky;left:0;background:var(--navy-800);z-index:5;font-weight:600;min-width:220px;
  box-shadow:2px 0 6px rgba(0,0,0,.35)}
.comparison-table tbody tr:hover{background:rgba(255,255,255,.03)}
.comparison-table tr.section-row td{background:rgba(255,255,255,.07);font-weight:700;color:var(--text);
  font-size:.98rem;text-transform:uppercase;letter-spacing:.5px}

.col-ads{box-shadow:inset 0 3px 0 0 #3b82f6}
.col-growth{box-shadow:inset 0 3px 0 0 #10b981}
.col-web{box-shadow:inset 0 3px 0 0 #0ea5e9}
.col-seo{box-shadow:inset 0 3px 0 0 #f59e0b}
.col-linkedin{box-shadow:inset 0 3px 0 0 #6366f1}
.col-youtube{box-shadow:inset 0 3px 0 0 #ef4444}
.col-ai{box-shadow:inset 0 3px 0 0 #8b5cf6}

.legend-box{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:24px;font-size:.88rem;
  color:var(--muted);background:var(--glass);padding:14px 20px;border-radius:var(--r-sm);border:1px solid var(--line)}
.legend-item{display:flex;align-items:center;gap:8px}
.cell-included{color:#34d399;font-weight:700}
.cell-depends{color:#fbbf24;font-weight:600}
.cell-none{color:var(--muted)}

/* =========================================================
   SECTION-ALT / CTA BAND / STANDALONE WA BUTTON
   ========================================================= */
.section-alt{background:rgba(255,255,255,.02)}
.cta-band{padding:clamp(36px,5vw,56px);border-radius:var(--r-lg);background:var(--grad-soft);border:1px solid var(--line-strong)}
.text-center{text-align:center}
.mt-4{margin-top:28px}

/* =========================================================================
   SOLUTION PAGES — SHARED DARK-THEME COMPONENT LIBRARY
   Used across every /solutions/*.html page (ads-management, growth-system,
   website-landing-page, seo-solutions, linkedin-solutions,
   youtube-solutions, ai-automation). All values reuse the site's existing
   navy/glass/gradient tokens so every service page matches the main theme.
   ========================================================================= */

/* ---------- generic grids / spacing utilities ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid-6{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.cards-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.text-large{font-size:1.2rem;color:var(--muted)}
.text-muted{color:var(--muted)}
.mb-2{margin-bottom:16px}
.mb-4{margin-bottom:32px}
.bg-light{background:rgba(255,255,255,.02)}
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* ---------- hero variant used by some solution pages ---------- */
.hero-message-first{padding:clamp(120px,14vw,168px) 0 clamp(48px,6vw,72px);text-align:center;position:relative;overflow:hidden}
.hero-message-first h1{margin-bottom:18px}
.strategy,.strategy-line{font-weight:700;color:var(--brand-400);margin:20px 0;font-size:1rem;letter-spacing:.02em}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px;font-size:13.5px;color:var(--muted);font-weight:600}
.trust-row span{background:var(--glass);border:1px solid var(--line);padding:6px 14px;border-radius:999px}

/* ---------- generic frosted card (light-theme "glass-card" re-skinned dark) ---------- */
.glass-card{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:28px;box-shadow:var(--shadow);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;color:var(--text)
}
.glass-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.glass-card p{color:var(--muted)}
.glass-card.text-center{text-align:center}

/* ---------- package / pricing cards (covers pkg-card, pkg, package-card naming) ---------- */
.pkg-cards,.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:32px}
.pkg-card,.package-card{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--shadow);color:var(--text);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease
}
.pkg-card:hover,.package-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.pkg-card p,.package-card p{color:var(--muted)}
.package-card.popular,.card.glass.pkg.pkg-featured,.pkg-featured{border-color:var(--brand-400);box-shadow:0 20px 50px -18px rgba(47,123,255,.35)}
.package-card .btn{margin-top:auto;width:100%}

.badge-popular,.popular-badge,.pkg-flag{
  display:inline-block;position:relative;top:0;left:0;transform:none;
  background:var(--grad);color:#04122e;padding:5px 14px;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px
}
/* absolutely-positioned variants (ads-management uses .badge-popular as a floating ribbon) */
.pkg-card .badge-popular{position:absolute;top:-13px;right:20px;margin-bottom:0}
.package-card .popular-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);margin-bottom:0}

.pkg-block{margin:16px 0}
.pkg-block h4{font-size:14.5px;margin-bottom:8px}
.pkg-block.outcome{padding:14px 16px;border-radius:var(--r-sm);background:var(--grad-soft);border:1px solid var(--line-strong);font-size:13.5px}
.pkg-divider{height:1px;background:var(--line);margin:22px 0}

.price,.price-block{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:14px 0}
.price-old,.price-was,.price-del{text-decoration:line-through;color:var(--muted);font-size:1rem;font-weight:600}
.price-now{font-size:2rem;font-weight:800;color:var(--text);font-family:var(--font-head)}
.price-per{font-size:13px;color:var(--muted)}

.trial-card{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);color:#fff;border-color:rgba(255,255,255,.14)}
.trial-card h3,.trial-card .price-now{color:#fff}
.trial-card p,.trial-card .price-del{color:rgba(255,255,255,.75)}
.trial-card .badge-popular{background:#ef4444;color:#fff}

.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:10px;font-size:.92rem;color:var(--muted)}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--accent,var(--brand-400));font-weight:800}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{position:relative;padding-left:26px;margin-bottom:10px;font-weight:600;color:var(--text)}
.checklist li::before{content:"✓";position:absolute;left:0;color:var(--brand-400);font-weight:800}

/* ---------- comparison / feature tables (.responsive-table, .table-wrap, .table-wrapper, .gs-table-wrap) ---------- */
.responsive-table,.table-wrap,.table-wrapper,.gs-table-wrap{
  width:100%;overflow-x:auto;margin-top:28px;background:var(--glass);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)
}
.responsive-table table,.table-wrap table,.table-wrapper table,table.gs-compare{
  width:100%;border-collapse:collapse;min-width:640px;text-align:left;font-size:.92rem
}
.responsive-table th,.responsive-table td,
.table-wrap th,.table-wrap td,
.table-wrapper th,.table-wrapper td,
table.gs-compare th,table.gs-compare td{padding:14px 18px;border-bottom:1px solid var(--line);color:var(--muted)}
.responsive-table th,.table-wrap th,.table-wrapper th,table.gs-compare th{font-weight:700;color:var(--text);background:rgba(255,255,255,.04)}
.responsive-table td:first-child,.responsive-table th:first-child,
.table-wrap td:first-child,.table-wrap th:first-child,
.table-wrapper td:first-child,.table-wrapper th:first-child{color:var(--text);font-weight:600}
.col-highlight{background:var(--grad-soft)}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- workflow strip / platform pills ---------- */
.workflow-strip{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px;font-weight:700;font-size:.9rem}
.wf-node{background:var(--glass-strong);border:1px solid var(--line-strong);color:var(--text);padding:10px 20px;border-radius:999px}
.wf-arrow{color:var(--brand-400);opacity:.7}
.platform-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:32px 0}
.platform-pill{padding:9px 22px;background:var(--glass);border:1px solid var(--line);border-radius:999px;font-weight:600;font-size:.92rem;color:var(--text)}

.challenge-card{padding:28px}
.challenge-card h3{color:var(--text)}

/* ---------- human/AI split panels ---------- */
.human-ai-split{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:stretch;margin-top:40px}
.ai-box,.human-box{padding:32px;border-radius:var(--r-lg);border:1px solid var(--line)}
.ai-box{background:rgba(47,123,255,.07)}
.human-box{background:rgba(56,224,200,.06)}
.split-center{display:flex;align-items:center;justify-content:center}
.split-center span{background:var(--grad);color:#04122e;font-family:var(--font-head);font-weight:800;padding:10px 20px;border-radius:999px;text-transform:uppercase;letter-spacing:.1em;transform:rotate(-90deg);font-size:12px}
@media (max-width:900px){.human-ai-split{grid-template-columns:1fr}.split-center{display:none}}

/* ---------- math equation strip ---------- */
.math-equation{display:flex;align-items:center;justify-content:center;gap:14px;font-size:1.3rem;font-weight:700;margin:26px 0;flex-wrap:wrap;color:var(--text)}
.math-equation span{padding:12px 22px;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-sm)}

/* ---------- conversion card pairs / faq containers used on some pages ---------- */
.conversion-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:48px}
@media (max-width:900px){.conversion-cards{grid-template-columns:1fr}}
.faq-container{display:flex;flex-direction:column;gap:14px;margin-top:36px;max-width:800px;margin-inline:auto}
.faq-content{padding-top:14px;color:var(--muted)}
.disclaimer-text{text-align:center;font-size:13px;color:var(--muted);margin-top:22px;max-width:800px;margin-inline:auto}
.visual-center{display:flex;justify-content:center;margin:26px 0}
.visual-img{max-width:100%;height:auto;border-radius:var(--r-md)}

/* ---------- growth-system "deeper" contrast panel — now just a slightly
   deeper navy inset instead of a light/dark-on-light contrast trick ---------- */
.gs-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:26px 0}
.gs-flow .gs-node,.gs-node{background:var(--glass-strong);border:1px solid var(--line-strong);border-radius:999px;padding:10px 20px;font-family:var(--font-head);font-weight:700;font-size:.85rem;color:var(--text)}
.gs-flow .gs-arrow,.gs-arrow{opacity:.7;font-weight:700;color:var(--brand-400)}
.gs-two-path{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
@media (max-width:820px){.gs-two-path{grid-template-columns:1fr}}
.gs-path-card{border-radius:var(--r-lg);padding:28px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow)}
.gs-path-card h3{font-family:var(--font-head);margin-bottom:10px}
.gs-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--grad);color:#04122e;font-family:var(--font-head);font-weight:800;font-size:.8rem;margin-bottom:12px}
.gs-ai-highlight{margin:16px 0;padding:16px;border-radius:var(--r-md);background:var(--grad-soft);border:1px solid var(--line-strong)}
.gs-ai-highlight h4{font-family:var(--font-head);margin-bottom:6px}
.gs-complimentary{background:rgba(47,123,255,.08);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:12px 16px;margin-bottom:14px;font-size:.86rem;color:var(--muted)}
.gs-complimentary strong{display:block;font-family:var(--font-head);letter-spacing:.06em;font-size:.7rem;text-transform:uppercase;color:var(--brand-400);margin-bottom:6px}
.gs-badge-only{display:inline-block;background:var(--grad);color:#04122e;font-size:.65rem;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:999px;margin-left:8px;text-transform:uppercase;vertical-align:middle}
.gs-value-box{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line-strong)}
.gs-value-label{font-family:var(--font-head);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.gs-value-was{display:block;text-decoration:line-through;color:var(--muted);font-size:1rem;margin:4px 0}
.gs-value-now{display:block;font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:var(--brand-400)}
.gs-note-box{margin-top:18px;padding:16px 20px;border-radius:var(--r-md);background:var(--grad-soft);border:1px solid var(--line-strong);font-size:.92rem;color:var(--muted)}
.gs-deep{background:linear-gradient(165deg,rgba(47,123,255,.10) 0%,var(--navy-800) 55%,var(--navy-700) 100%);border:1px solid var(--line-strong);border-radius:var(--r-xl);padding:clamp(32px,4vw,48px) 24px;box-shadow:var(--shadow-lg);margin-top:10px}
.gs-deep .strategy,.gs-deep .strategy-line{color:var(--brand-400)}
.gs-decision-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:22px}
@media (max-width:1100px){.gs-decision-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gs-decision-grid{grid-template-columns:1fr}}
.gs-decision-card,.gs-icon-card{border-radius:var(--r-md);padding:20px;background:var(--glass);border:1px solid var(--line)}
.gs-decision-card h4,.gs-icon-card h4{font-family:var(--font-head);margin-bottom:10px;font-size:.95rem}
.gs-decision-card ul{padding-left:16px;font-size:.85rem;line-height:1.75;color:var(--muted)}
.gs-grid-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
@media (max-width:820px){.gs-grid-icons{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gs-grid-icons{grid-template-columns:1fr}}

/* =========================================================================
   SMART FLOATING WAVE BACKGROUND + BENTO GRID UTILITIES
   Reusable, subtle, SaaS-style layered wave background for card sections,
   plus generic Bento hierarchy helpers. Additive only — does not change
   any existing card/grid class already in use.
   ========================================================================= */
.wave-bg{position:absolute;inset:-10% -6%;z-index:0;pointer-events:none;overflow:hidden;border-radius:var(--r-lg)}
.wave-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.32;will-change:transform}
.wave-blob.w1{width:38%;padding-top:38%;top:-8%;left:-4%;background:radial-gradient(circle,var(--brand-400,#5aa2ff),transparent 70%);animation:waveDrift1 22s ease-in-out infinite}
.wave-blob.w2{width:32%;padding-top:32%;bottom:-10%;right:2%;background:radial-gradient(circle,#8b5cf6,transparent 70%);animation:waveDrift2 27s ease-in-out infinite}
.wave-blob.w3{width:26%;padding-top:26%;bottom:12%;left:32%;background:radial-gradient(circle,#25d366,transparent 70%);animation:waveDrift3 19s ease-in-out infinite}
@keyframes waveDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,3%) scale(1.08)}}
@keyframes waveDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3%,-4%) scale(1.05)}}
@keyframes waveDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-3%) scale(1.06)}}
/* card content already sits above via position:relative on card classes; z-index just in case */
.solutions-grid > article,.compare-grid > *,.bento-grid > *{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .wave-blob{animation:none}
}

/* ---- Generic Bento hierarchy helpers (opt-in via extra class, non-destructive) ---- */
.bento-grid{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
.bento-primary{grid-column:span 2;grid-row:span 2}
.bento-secondary{grid-column:span 2}
.bento-supporting{grid-column:span 1}
@media (max-width:980px){
  .bento-grid{grid-template-columns:repeat(2,1fr)}
  .bento-primary{grid-column:span 2}
}
@media (max-width:620px){
  .bento-grid{grid-template-columns:1fr}
  .bento-primary,.bento-secondary,.bento-supporting{grid-column:span 1;grid-row:auto}
}

/* ---- Optional focus/expand interaction for non-link Bento card groups ----
   Opt-in: add [data-bento-focus] to a card group container. Cards that are
   themselves full links (e.g. .solution-card-link) should NOT use this, since
   expand-on-click would fight the navigation click — main.js already skips
   any card whose entire body is an <a>. */
[data-bento-focus] .bento-card{cursor:pointer;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s ease,filter .35s ease}
[data-bento-focus].is-focused .bento-card{opacity:.55;filter:saturate(.7)}
[data-bento-focus].is-focused .bento-card.is-active{opacity:1;filter:none;transform:scale(1.015)}
@media (prefers-reduced-motion:reduce){
  [data-bento-focus] .bento-card{transition:none}
}



/* =========================================================
   PREMIUM SCROLL-MORPHING NAVBAR — FINAL OVERRIDE
   Keeps the existing navigation structure/classes intact.
   Full header -> centered colored-glass compact pill.
   ========================================================= */

/* Header gets a little more depth without making text glow. */
.site-header{
  position:sticky;
  isolation:isolate;
  overflow:visible;
  transition:
    top .62s cubic-bezier(.22,1,.36,1),
    left .62s cubic-bezier(.22,1,.36,1),
    transform .62s cubic-bezier(.22,1,.36,1),
    width .62s cubic-bezier(.22,1,.36,1),
    max-width .62s cubic-bezier(.22,1,.36,1),
    border-radius .62s cubic-bezier(.22,1,.36,1),
    border-color .45s ease,
    background .45s ease,
    box-shadow .55s ease,
    padding .55s ease;
}

/* Subtle colored glass layers. They stay behind all header content. */
.site-header::before,
.site-header::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  border-radius:inherit;
  opacity:0;
  transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1);
}

.site-header::before{
  width:210px;
  height:130px;
  right:5%;
  top:-55px;
  background:radial-gradient(circle,rgba(47,123,255,.28) 0%,rgba(47,123,255,.08) 42%,transparent 72%);
  filter:blur(26px);
}

.site-header::after{
  width:190px;
  height:120px;
  left:8%;
  bottom:-55px;
  background:radial-gradient(circle,rgba(56,224,200,.22) 0%,rgba(139,92,246,.10) 42%,transparent 72%);
  filter:blur(28px);
}

.site-header.nav-shrink{
  position:fixed;
  top:16px;
  left:50%;
  width:max-content;
  max-width:min(92vw,520px);
  transform:translate3d(-50%,0,0);
  border-radius:999px;
  border:1px solid rgba(120,170,255,.32);
  background:
    linear-gradient(135deg,rgba(47,123,255,.13),rgba(56,224,200,.08) 48%,rgba(139,92,246,.10)),
    rgba(5,12,28,.84);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  box-shadow:
    0 16px 42px rgba(2,8,24,.48),
    0 0 0 1px rgba(255,255,255,.025) inset;
  overflow:hidden;
}

.site-header.nav-shrink::before,
.site-header.nav-shrink::after{
  opacity:1;
}

.site-header.nav-shrink::before{
  transform:translate3d(12px,4px,0) scale(.82);
}

.site-header.nav-shrink::after{
  transform:translate3d(-8px,-2px,0) scale(.78);
}

/* Compact inner container */
.site-header.nav-shrink .wrap,
.site-header.nav-shrink .container{
  width:auto;
  max-width:none;
  margin:0;
  padding:0 22px;
}

.site-header.nav-shrink .nav,
.site-header.nav-shrink .nav-wrap{
  min-height:54px;
  padding:7px 0;
  gap:0;
  justify-content:center;
}

/* Brand becomes the visual anchor and smoothly moves to the exact center. */
.site-header .brand,
.site-header .brand-text{
  position:relative;
  z-index:3;
  transition:
    transform .62s cubic-bezier(.22,1,.36,1),
    gap .42s ease,
    font-size .42s ease,
    opacity .35s ease;
}

.site-header.nav-shrink .brand{
  margin-inline:auto;
  justify-content:center;
  gap:9px;
  transform:translate3d(0,0,0) scale(1);
}

.site-header.nav-shrink .brand img{
  width:36px;
  height:36px;
  border-radius:9px;
  transition:width .5s cubic-bezier(.22,1,.36,1),
             height .5s cubic-bezier(.22,1,.36,1);
}

/* If a small brand subtitle exists, keep it readable but compact. */
.site-header.nav-shrink .brand-text span{
  opacity:.72;
  font-size:9.5px;
  transition:font-size .4s ease,opacity .4s ease;
}

/* Navigation fades, slides and becomes non-interactive. */
.site-header .nav-links,
.site-header .primary-nav,
.site-header .nav-cta,
.site-header .header-cta,
.site-header .nav-toggle{
  transition:
    opacity .38s cubic-bezier(.22,1,.36,1),
    transform .48s cubic-bezier(.22,1,.36,1),
    max-width .48s cubic-bezier(.22,1,.36,1),
    visibility .38s ease,
    margin .48s ease,
    padding .48s ease;
}

.site-header.nav-shrink .nav-links,
.site-header.nav-shrink .primary-nav,
.site-header.nav-shrink .nav-cta,
.site-header.nav-shrink .header-cta,
.site-header.nav-shrink .nav-toggle{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,-9px,0) scale(.96);
  max-width:0;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
}

/* Prevent old magnetic pill from flashing during the morph. */
.site-header.nav-shrink .nav-pill{
  opacity:0!important;
}

/* Compact state text highlight: readable, not neon. */
.site-header.nav-shrink .brand,
.site-header.nav-shrink .brand-text strong{
  color:#f4f8ff;
  text-shadow:0 1px 14px rgba(90,162,255,.14);
}

.site-header.nav-shrink .brand::after{
  content:"";
  position:absolute;
  inset:-8px -16px;
  z-index:-1;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(47,123,255,.09),rgba(56,224,200,.07),rgba(139,92,246,.08));
  filter:blur(13px);
  opacity:.75;
}

/* Desktop hover: tiny premium lift, never excessive glow. */
@media (min-width:901px){
  .site-header:not(.nav-shrink) .brand:hover{
    transform:translateY(-1px);
  }
}

/* Existing mobile navigation remains normal at the top.
   Once scrolled, the same compact brand-only pill is used. */
@media (max-width:900px){
  .site-header.nav-shrink{
    top:10px;
    max-width:calc(100vw - 24px);
  }

  .site-header.nav-shrink .wrap,
  .site-header.nav-shrink .container{
    padding:0 17px;
  }

  .site-header.nav-shrink .nav,
  .site-header.nav-shrink .nav-wrap{
    min-height:50px;
    padding:6px 0;
  }

  .site-header.nav-shrink .brand img{
    width:32px;
    height:32px;
  }

  .site-header.nav-shrink .brand{
    font-size:15px;
  }
}

/* Accessibility: honor reduced motion everywhere in the morph. */
@media (prefers-reduced-motion:reduce){
  .site-header,
  .site-header::before,
  .site-header::after,
  .site-header .brand,
  .site-header .brand img,
  .site-header .nav-links,
  .site-header .primary-nav,
  .site-header .nav-cta,
  .site-header .header-cta,
  .site-header .nav-toggle{
    transition:none!important;
  }
}

/* =========================================================
   COLORED GLASS / SQUARE ACCENTS
   Existing colored-card palette is preserved. These helpers
   add the requested colorful rectangular/square glass treatment
   without overpowering text.
   ========================================================= */

.color-glass,
.glass-color{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(145deg,rgba(47,123,255,.13),rgba(56,224,200,.07) 48%,rgba(139,92,246,.08)),
    rgba(255,255,255,.035);
  border:1px solid rgba(120,170,255,.22);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
}

.color-glass::before,
.glass-color::before{
  content:"";
  position:absolute;
  width:150px;
  height:95px;
  top:-34px;
  right:-28px;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(47,123,255,.20),rgba(90,162,255,.06));
  filter:blur(18px);
  opacity:.72;
  pointer-events:none;
  z-index:-1;
}

.color-glass::after,
.glass-color::after{
  content:"";
  position:absolute;
  width:120px;
  height:90px;
  bottom:-35px;
  left:-24px;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(56,224,200,.15),rgba(139,92,246,.08));
  filter:blur(20px);
  opacity:.65;
  pointer-events:none;
  z-index:-1;
}

/* Keep the existing accent cards colorful across the complete surface. */
.accent-card,
.solution-card{
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
}

.accent-card::before,
.solution-card::before{
  content:"";
  position:absolute;
  width:145px;
  height:90px;
  right:-32px;
  top:-28px;
  border-radius:20px;
  background:var(--accent);
  opacity:.11;
  filter:blur(18px);
  pointer-events:none;
}

.accent-card::after,
.solution-card::after{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent) inset;
}

/* Avoid excessive text glow throughout the site. */
.accent,
.site-header.nav-shrink .brand,
.site-header.nav-shrink .brand-text{
  text-shadow:none;
}

/* =========================================================
   Smooth page compensation
   JS adds .nav-morphed to body while the header becomes fixed.
   This prevents a visible layout jump during the first morph.
   ========================================================= */
body.nav-morphed{
  --nav-morph-space:76px;
}

@media (max-width:900px){
  body.nav-morphed{
    --nav-morph-space:64px;
  }
}

/* =========================================================
   Optional stagger timing for menu fade-out.
   ========================================================= */
.site-header.nav-shrink .nav-links a:nth-child(1){transition-delay:0ms}
.site-header.nav-shrink .nav-links a:nth-child(2){transition-delay:18ms}
.site-header.nav-shrink .nav-links a:nth-child(3){transition-delay:36ms}
.site-header.nav-shrink .nav-links a:nth-child(4){transition-delay:54ms}
.site-header.nav-shrink .nav-links a:nth-child(5){transition-delay:72ms}
.site-header.nav-shrink .nav-links a:nth-child(6){transition-delay:90ms}


/* =========================================================
   FINAL NAVBAR BEHAVIOUR — TOP MENU POSITION
   The compact navbar stays exactly where the original menu
   lives: at the top of the viewport. It never becomes a tall
   floating capsule and never covers page content.
   ========================================================= */

/* Keep the header as a normal top/sticky bar. */
.site-header.nav-shrink{
  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;

  width:100%!important;
  max-width:none!important;
  min-width:0!important;

  height:62px!important;
  min-height:62px!important;
  max-height:62px!important;

  margin:0!important;
  padding:0!important;

  display:block!important;
  border-radius:0 0 18px 18px!important;
  overflow:visible!important;

  background:
    linear-gradient(
      90deg,
      rgba(47,123,255,.10),
      rgba(56,224,200,.07) 48%,
      rgba(139,92,246,.09)
    ),
    rgba(5,12,28,.88)!important;

  border:0!important;
  border-bottom:1px solid rgba(120,170,255,.22)!important;

  box-shadow:
    0 8px 26px rgba(2,8,24,.28),
    0 1px 0 rgba(255,255,255,.035) inset!important;

  backdrop-filter:blur(20px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(135%)!important;
}

/* Do not allow the decorative pseudo-elements to become huge. */
.site-header.nav-shrink::before,
.site-header.nav-shrink::after{
  width:180px!important;
  height:60px!important;
  top:0!important;
  bottom:auto!important;
  border-radius:0!important;
  filter:blur(22px)!important;
  opacity:.55!important;
}

.site-header.nav-shrink::before{
  left:10%!important;
  right:auto!important;
  transform:none!important;
}

.site-header.nav-shrink::after{
  right:10%!important;
  left:auto!important;
  transform:none!important;
}

/* Inner nav occupies the full top bar, but remains short. */
.site-header.nav-shrink .wrap,
.site-header.nav-shrink .container{
  width:100%!important;
  max-width:var(--max,1180px)!important;
  height:62px!important;
  min-height:62px!important;
  margin:0 auto!important;
  padding:0 20px!important;
  box-sizing:border-box!important;
}

.site-header.nav-shrink .nav,
.site-header.nav-shrink .nav-wrap{
  width:100%!important;
  height:62px!important;
  min-height:62px!important;
  max-height:62px!important;
  padding:0!important;
  margin:0!important;
  gap:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}

/* Only the brand remains. */
.site-header.nav-shrink .brand{
  position:relative;
  z-index:5;
  flex:0 0 auto!important;
  width:auto!important;
  max-width:calc(100vw - 40px)!important;
  height:44px!important;
  min-height:44px!important;
  margin:0 auto!important;
  padding:0!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  gap:9px!important;
  white-space:nowrap!important;
  transform:none!important;
}

/* Compact logo. */
.site-header.nav-shrink .brand img{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  object-fit:contain!important;
  border-radius:8px!important;
}

/* Company name remains clearly readable. */
.site-header.nav-shrink .brand-text,
.site-header.nav-shrink .brand-name{
  font-size:15px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  opacity:1!important;
}

.site-header.nav-shrink .brand-text span{
  display:none!important;
}

/* Absolutely remove hidden navigation from layout sizing. */
.site-header.nav-shrink .nav-links,
.site-header.nav-shrink .primary-nav,
.site-header.nav-shrink .nav-cta,
.site-header.nav-shrink .header-cta,
.site-header.nav-shrink .nav-toggle{
  position:absolute!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  max-width:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  overflow:hidden!important;
  transform:scale(.96)!important;
}

/* No old magnetic indicator in compact state. */
.site-header.nav-shrink .nav-pill{
  display:none!important;
}

/* A small horizontal glass highlight around the brand only. */
.site-header.nav-shrink .brand::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:-16px;
  right:-16px;
  top:3px;
  bottom:3px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      rgba(47,123,255,.13),
      rgba(56,224,200,.08),
      rgba(139,92,246,.12)
    );

  border:1px solid rgba(120,170,255,.13);
  box-shadow:
    0 5px 20px rgba(47,123,255,.08),
    0 0 0 1px rgba(255,255,255,.025) inset;

  filter:none!important;
  opacity:1!important;
  pointer-events:none;
}

/* Mobile: same top position, slightly smaller. */
@media (max-width:900px){
  .site-header.nav-shrink{
    height:56px!important;
    min-height:56px!important;
    max-height:56px!important;
    border-radius:0 0 14px 14px!important;
  }

  .site-header.nav-shrink .wrap,
  .site-header.nav-shrink .container,
  .site-header.nav-shrink .nav,
  .site-header.nav-shrink .nav-wrap{
    height:56px!important;
    min-height:56px!important;
    max-height:56px!important;
  }

  .site-header.nav-shrink .brand{
    height:40px!important;
    min-height:40px!important;
    gap:7px!important;
  }

  .site-header.nav-shrink .brand img{
    width:31px!important;
    height:31px!important;
    min-width:31px!important;
    min-height:31px!important;
  }

  .site-header.nav-shrink .brand-text,
  .site-header.nav-shrink .brand-name{
    font-size:14px!important;
  }

  .site-header.nav-shrink .brand::after{
    left:-12px;
    right:-12px;
  }
}

/* Reduced-motion remains accessible. */
@media (prefers-reduced-motion:reduce){
  .site-header,
  .site-header *{
    transition:none!important;
  }
}

/* MOBILE-FRIENDLY FIX: on the .primary-nav template (used on
   /solutions/*.html), two "Start Your Journey" CTAs rendered side-by-side
   on desktop/tablet — one inside the nav <ul> (.nav-cta, meant for the
   mobile dropdown menu) and one standalone (.header-cta, meant for
   desktop). Only the standalone one was hidden, and only below 900px.
   This hides the in-menu duplicate at desktop/tablet widths so exactly
   one CTA shows at every screen size. */
@media (min-width:901px){
  .primary-nav li a.nav-cta{display:none}
}

/* MOBILE FIX: the scroll-shrink effect above hides .nav-toggle along with
   the rest of the nav (opacity:0, visibility:hidden, pointer-events:none,
   width/height:0). On phones that means the hamburger button itself
   vanishes after ~55px of scroll, leaving no way to reopen the menu
   until the user scrolls all the way back to the top. This override keeps
   the toggle button visible and tappable at every scroll position on
   mobile widths, while leaving the shrink/collapse effect on the logo
   and CTA (desktop) untouched. */
@media (max-width:900px){
  .site-header.nav-shrink .nav-toggle{
    display:block!important;
    position:static!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:10px 11px!important;
    border:1px solid var(--line-strong)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    overflow:visible!important;
    transform:none!important;
  }
  /* If the user taps the (now-always-visible) toggle while scrolled down,
     the menu panel itself must still be able to open — override the
     shrink state's opacity/pointer-events/width collapse for it too. */
  .site-header.nav-shrink .nav-links.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    max-width:none!important;
    width:auto!important;
    height:auto!important;
    position:absolute!important;
    display:flex!important;
    transform:none!important;
  }
}