/* ===========================
   Summit Legacy Group — V5 (Conversion-focused overhaul)
   =========================== */

:root {
  --blue: #2c91c0;
  --blue-dark: #1a5774;
  --blue-deep: #1b3a4a;
  --blue-light: #b3d7e9;
  --blue-pale: #dceef6;
  --blue-glow: rgba(44, 145, 192, 0.25);
  --steel: #8c97a1;
  --slate: #3d4a54;
  --slate-light: #5a6872;
  --dark: #1a2028;
  --dark-card: rgba(0, 0, 0, 0.04);
  --white: #ffffff;
  --glacier: #e9edf1;
  --ice: #f1f3f6;
  --frost: #dce2e8;
  --off-white: #f5f6f8;
  --gray-100: #e2e5ea;
  --gray-200: #cdd2d8;
  --gray-400: #8a929b;
  --gray-500: #5c6670;
  --gray-600: #3e474f;
  --heading: 'Montserrat', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --max-w: 1260px;
  --page-gutter: clamp(0.85rem, 2.6vw, 1.75rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); font-size: 1rem; line-height: 1.7; color: #333; background: var(--dark); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--page-gutter); }
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 200;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: var(--dark);
  color: var(--white);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(44, 145, 192, 0.9);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.body-dark { background: var(--dark); color: var(--white); }
.body-light { background: var(--off-white); color: var(--dark); }
.body-glacier { background: var(--glacier); color: var(--slate); }
.body-slate { background: var(--slate); color: var(--white); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(245, 246, 247, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding: 0 var(--page-gutter); }
.nav--dark { background: rgba(14, 14, 14, 0.92); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.nav--slate { background: rgba(50, 60, 68, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.nav--slate .nav-brand { color: var(--white); }
.nav--slate .nav-logo-img { filter: brightness(0) invert(1); }
.nav--slate .nav-link { color: rgba(255,255,255,0.6); }
.nav--slate .nav-link:hover { color: var(--blue-light); }
.nav--slate .nav-link.active { color: var(--blue-light); border-bottom-color: var(--blue-light); }
.nav-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--dark); font-family: var(--heading); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.nav--dark .nav-brand { color: var(--white); }
.nav-logo-img { height: 48px; width: auto; }
.nav-name-full { white-space: nowrap; max-width: 300px; overflow: hidden; opacity: 1; transition: max-width 0.6s var(--ease), opacity 0.4s var(--ease); }
.nav-name-short { white-space: nowrap; max-width: 0; overflow: hidden; opacity: 0; font-size: 1rem; letter-spacing: 0.08em; transition: max-width 0.6s var(--ease), opacity 0.4s var(--ease) 0.2s; }
.nav.scrolled .nav-name-full { max-width: 0; opacity: 0; transition: max-width 0.6s var(--ease), opacity 0.3s var(--ease); }
.nav.scrolled .nav-name-short { max-width: 110px; opacity: 1; transition: max-width 0.6s var(--ease), opacity 0.4s var(--ease) 0.15s; }
.nav-links { display: flex; gap: 2rem; }
.nav-link { font-family: var(--body); font-size: 0.8rem; font-weight: 600; text-decoration: none; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.3rem 0; border-bottom: 2px solid transparent; transition: all 0.25s var(--ease); }
.nav-link:hover { color: var(--blue); }
.nav-link.active { color: var(--blue); border-bottom-color: var(--blue); }
.nav--dark .nav-link { color: var(--gray-400); }
.nav--dark .nav-link:hover { color: var(--blue-light); }
.nav--dark .nav-link.active { color: var(--blue-light); border-bottom-color: var(--blue-light); }

/* Content sections */
.content-light { padding: 5rem 0 4rem; background: var(--off-white); position: relative; z-index: 1; }
.content-dark { padding: 5rem 0 4rem; background: var(--dark); }
.content-slate { padding: 3rem 0 5rem; background: var(--slate); position: relative; z-index: 1; }
.content-slate .sec-head h2 { color: var(--white); }
.content-slate .sec-sub { color: rgba(255,255,255,0.55); }

/* Hero (homepage) */
.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; background: #000000; }
.hero.bg-ready { background: #000000; }
.hero-topo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M300 50 Q400 100 350 200 T300 350 T250 450 T200 550' fill='none' stroke='%23808a94' stroke-width='1'/%3E%3Cpath d='M150 0 Q250 80 200 180 T180 320 T220 460 T150 600' fill='none' stroke='%23808a94' stroke-width='1'/%3E%3Cpath d='M450 0 Q500 120 420 220 T450 380 T400 500 T450 600' fill='none' stroke='%23808a94' stroke-width='1'/%3E%3Cpath d='M50 100 Q150 150 100 280 T80 420 T120 550' fill='none' stroke='%23808a94' stroke-width='1'/%3E%3Cpath d='M550 80 Q480 200 520 300 T500 450 T540 580' fill='none' stroke='%23808a94' stroke-width='1'/%3E%3Cpath d='M0 300 Q100 280 200 310 T400 290 T600 320' fill='none' stroke='%23808a94' stroke-width='1'/%3E%3Cpath d='M0 200 Q150 170 300 210 T600 190' fill='none' stroke='%23808a94' stroke-width='1'/%3E%3Cpath d='M0 400 Q120 380 250 410 T500 390 T600 420' fill='none' stroke='%23808a94' stroke-width='1'/%3E%3C/svg%3E"); background-size: 600px 600px; animation: topoDrift 60s linear infinite; }
.hero.bg-ready .hero-topo { opacity: 0; }
@keyframes topoDrift { to { background-position: 600px 300px; } }
.hero-beam { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.hero.bg-ready .hero-beam { opacity: 0; }
.hero-beam--1 { width: 800px; height: 800px; background: rgba(180, 195, 210, 0.35); top: -30%; right: -20%; animation: beamPulse 12s ease-in-out infinite; }
.hero-beam--2 { width: 600px; height: 600px; background: rgba(200, 210, 220, 0.3); bottom: -25%; left: -15%; animation: beamPulse 16s ease-in-out infinite 4s; }
@keyframes beamPulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
.hero-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s; z-index: 2; }
.hero:hover .hero-glow { opacity: 1; }
/* Summit glow — light pollution from logo */
.summit-glow { position: absolute; top: 20%; left: 50%; width: 600px; height: 600px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(200,220,240,0.4) 35%, rgba(200,220,240,0.1) 55%, transparent 75%); z-index: 4; pointer-events: none; opacity: 0; filter: blur(40px); }
.hero.bg-ready .summit-glow { animation: glowAppear 1.5s ease 0.5s forwards; }
@keyframes glowAppear { 0% { opacity: 0; } 100% { opacity: 1; } }

/* Mountain photo section */
.hero-mountains { position: absolute; inset: 0; z-index: 2; opacity: 0; }
.hero.bg-ready .hero-mountains { animation: mtnFadeIn 1.2s ease forwards; }
@keyframes mtnFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mtnFadeMobile { 0% { transform: scale(1) translateY(0); opacity: 0; } 100% { transform: scale(1.05) translateY(0); opacity: 1; } }

/* Mountain photo — GPU-accelerated transform pan (no background-position = no stutter) */
.mtn-photo { position: absolute; inset: -37% -30% -23% -30%; background: url('../images/mtn-candidate-2.jpg') 56% 58% / cover no-repeat; filter: brightness(1.15) sepia(1) hue-rotate(190deg) saturate(1.4); will-change: transform; transform-origin: 48% 28%; }
.hero.bg-ready .mtn-photo { animation: paramountPan 5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Zoom toward summit — origin at peak means base expands away = "approaching the mountain" */
@keyframes paramountPan {
  0%   { transform: scale(0.7) translateY(5%); opacity: 0; filter: brightness(1.15) sepia(1) hue-rotate(190deg) saturate(1.4) blur(0px); }
  12%  { opacity: 1; }
  60%  { filter: brightness(1.15) sepia(1) hue-rotate(190deg) saturate(1.4) blur(0px); }
  100% { transform: scale(1.15) translateY(0); opacity: 1; filter: brightness(1.15) sepia(1) hue-rotate(190deg) saturate(1.4) blur(6px); }
}

/* White fade at summit peak — appears as pan lands at 3s */
.mtn-fade { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 30% 40% at 50% 38%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0.4) 55%, transparent 78%); pointer-events: none; opacity: 0; }
.hero.bg-ready .mtn-fade { animation: peakReveal 3s ease forwards; }
@keyframes peakReveal { 0% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } }

/* Summit fog / smoke — thick at start, dissipates as pan approaches summit */
.mtn-fog { position: absolute; top: -8%; left: -45%; width: 190%; height: 125%; pointer-events: none; z-index: 4; will-change: transform, opacity; }

.mtn-fog--back {
  background:
    radial-gradient(ellipse 1800px 500px at 50% 45%, rgba(200,215,230,0.98), transparent 55%),
    radial-gradient(ellipse 1200px 400px at 15% 55%, rgba(200,215,230,0.95), transparent 60%),
    radial-gradient(ellipse 1400px 450px at 80% 50%, rgba(210,220,235,0.95), transparent 60%),
    radial-gradient(ellipse 900px 350px at 35% 65%, rgba(220,230,240,0.9), transparent 65%),
    radial-gradient(ellipse 700px 300px at 65% 70%, rgba(210,222,235,0.85), transparent 65%);
  opacity: 0;
}
.hero.bg-ready .mtn-fog--back { animation: fogUncoverBack 5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.mtn-fog--mid {
  background:
    radial-gradient(ellipse 1600px 450px at 50% 40%, rgba(230,236,242,0.97), transparent 50%),
    radial-gradient(ellipse 1000px 350px at 10% 45%, rgba(225,232,240,0.95), transparent 55%),
    radial-gradient(ellipse 1100px 380px at 85% 42%, rgba(220,228,238,0.95), transparent 55%),
    radial-gradient(ellipse 800px 300px at 60% 58%, rgba(230,236,242,0.9), transparent 60%),
    radial-gradient(ellipse 600px 250px at 30% 52%, rgba(225,234,242,0.88), transparent 60%);
  opacity: 0;
}
.hero.bg-ready .mtn-fog--mid { animation: fogUncoverMid 5s cubic-bezier(0.16, 1, 0.3, 1) 0.08s forwards; }

.mtn-fog--front {
  background:
    radial-gradient(ellipse 1400px 400px at 50% 36%, rgba(242,245,248,0.98), transparent 45%),
    radial-gradient(ellipse 900px 320px at 20% 32%, rgba(240,243,247,0.97), transparent 50%),
    radial-gradient(ellipse 1000px 340px at 80% 30%, rgba(240,243,247,0.95), transparent 50%),
    radial-gradient(ellipse 600px 260px at 45% 48%, rgba(242,245,248,0.92), transparent 55%),
    radial-gradient(ellipse 500px 220px at 70% 55%, rgba(238,242,246,0.9), transparent 55%);
  opacity: 0;
}
.hero.bg-ready .mtn-fog--front { animation: fogUncoverFront 4.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards; }

@keyframes fogUncoverBack {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(1.12); }
  8%   { opacity: 0.92; }
  45%  { opacity: 0.78; transform: translate3d(5%, -6%, 0) scale(1.08); }
  75%  { opacity: 0.35; transform: translate3d(10%, -14%, 0) scale(1.02); }
  100% { opacity: 0.08; transform: translate3d(14%, -22%, 0) scale(0.96); }
}

@keyframes fogUncoverMid {
  0%   { opacity: 0; transform: translate3d(-2%, 2%, 0) scale(1.14); }
  10%  { opacity: 0.98; }
  40%  { opacity: 0.82; transform: translate3d(8%, -10%, 0) scale(1.06); }
  70%  { opacity: 0.28; transform: translate3d(14%, -20%, 0) scale(0.98); }
  100% { opacity: 0.03; transform: translate3d(18%, -27%, 0) scale(0.92); }
}

@keyframes fogUncoverFront {
  0%   { opacity: 0; transform: translate3d(-4%, 5%, 0) scale(1.18); }
  12%  { opacity: 0.96; }
  32%  { opacity: 0.84; transform: translate3d(6%, -8%, 0) scale(1.1); }
  58%  { opacity: 0.45; transform: translate3d(12%, -18%, 0) scale(1.0); }
  82%  { opacity: 0.12; transform: translate3d(18%, -26%, 0) scale(0.93); }
  100% { opacity: 0; transform: translate3d(22%, -32%, 0) scale(0.88); }
}

/* Billowing clouds — 5 depth layers weaving through content */
.cloud { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; }
.hero.bg-ready .cloud { animation: cloudBillow var(--dur) ease-in-out infinite, cloudAppear 2.5s ease var(--del, 0s) forwards; }
@keyframes cloudBillow {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(var(--dx1), var(--dy1)) scale(var(--s1)); }
  50%  { transform: translate(var(--dx2), var(--dy2)) scale(1.05); }
  75%  { transform: translate(var(--dx3), var(--dy3)) scale(var(--s2)); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes cloudAppear { 0% { opacity: 0; } 100% { opacity: var(--co); } }

/* L1: DEEP — behind mountain */
.cloud-deep { z-index: 1; filter: blur(10px); background: radial-gradient(ellipse, rgba(190,210,230,0.85) 0%, rgba(190,210,230,0.4) 40%, transparent 70%); }
.cloud--d1 { width: 1000px; height: 400px; top: 18%; left: -12%; --dur: 35s; --co: 0.7; --dx1: 70px; --dy1: -10px; --s1: 1.08; --dx2: 120px; --dy2: 15px; --dx3: 50px; --dy3: -5px; --s2: 0.96; }
.cloud--d2 { width: 900px; height: 350px; top: 28%; right: -15%; --dur: 40s; --co: 0.6; --del: 1s; --dx1: -80px; --dy1: 12px; --s1: 1.1; --dx2: -130px; --dy2: -8px; --dx3: -50px; --dy3: 10px; --s2: 1.04; }
.cloud--d3 { width: 1100px; height: 450px; top: 35%; left: 5%; --dur: 45s; --co: 0.5; --del: 2s; --dx1: 50px; --dy1: 20px; --s1: 1.06; --dx2: -30px; --dy2: 30px; --dx3: 70px; --dy3: 8px; --s2: 0.98; }

/* L2: MTN — wrapping around mountain flanks */
.cloud-mtn { z-index: 3; filter: blur(5px); background: radial-gradient(ellipse, rgba(225,235,245,0.9) 0%, rgba(225,235,245,0.5) 40%, transparent 65%); }
.cloud--mt1 { width: 700px; height: 280px; top: 40%; left: -8%; --dur: 22s; --co: 0.85; --dx1: 50px; --dy1: -15px; --s1: 1.12; --dx2: 90px; --dy2: 10px; --dx3: 35px; --dy3: -8px; --s2: 0.95; }
.cloud--mt2 { width: 600px; height: 240px; top: 45%; right: -5%; --dur: 26s; --co: 0.8; --del: 0.5s; --dx1: -60px; --dy1: 12px; --s1: 1.08; --dx2: -100px; --dy2: -8px; --dx3: -40px; --dy3: 14px; --s2: 1.06; }
.cloud--mt3 { width: 800px; height: 320px; top: 50%; left: 15%; --dur: 20s; --co: 0.75; --del: 1s; --dx1: 35px; --dy1: 18px; --s1: 1.14; --dx2: -20px; --dy2: 25px; --dx3: 55px; --dy3: 10px; --s2: 0.93; }

/* L3: WRAP — between logo and title */
.cloud-wrap { z-index: 7; filter: blur(3px); background: radial-gradient(ellipse, rgba(242,246,250,0.9) 0%, rgba(240,244,250,0.5) 35%, transparent 60%); }
.cloud--w1 { width: 600px; height: 200px; top: 48%; left: 10%; --dur: 16s; --co: 0.7; --dx1: 40px; --dy1: -10px; --s1: 1.1; --dx2: 75px; --dy2: 5px; --dx3: 25px; --dy3: -6px; --s2: 0.97; }
.cloud--w2 { width: 550px; height: 180px; top: 46%; right: 8%; --dur: 19s; --co: 0.65; --del: 0.8s; --dx1: -45px; --dy1: 8px; --s1: 1.07; --dx2: -80px; --dy2: -5px; --dx3: -30px; --dy3: 10px; --s2: 1.04; }

/* L4: WISP — between title and subtitle */
.cloud-wisp { z-index: 7; filter: blur(2px); background: radial-gradient(ellipse, rgba(250,252,255,0.85) 0%, rgba(248,250,255,0.4) 35%, transparent 55%); }
.cloud--ws1 { width: 500px; height: 140px; top: 58%; left: 20%; --dur: 14s; --co: 0.55; --dx1: 35px; --dy1: -6px; --s1: 1.08; --dx2: 60px; --dy2: 4px; --dx3: 20px; --dy3: -4px; --s2: 0.98; }
.cloud--ws2 { width: 450px; height: 120px; top: 56%; right: 15%; --dur: 17s; --co: 0.5; --del: 1.2s; --dx1: -30px; --dy1: 5px; --s1: 1.06; --dx2: -55px; --dy2: -4px; --dx3: -18px; --dy3: 7px; --s2: 1.03; }

/* L5: OVER — foreground clouds drifting over everything */
.cloud-over { z-index: 15; filter: blur(2px); background: radial-gradient(ellipse, rgba(255,255,255,0.95) 0%, rgba(248,252,255,0.6) 35%, transparent 60%); }
.cloud--o1 { width: 1000px; height: 350px; top: 28%; left: -15%; --dur: 13s; --co: 0.8; --dx1: 70px; --dy1: -12px; --s1: 1.1; --dx2: 140px; --dy2: 8px; --dx3: 60px; --dy3: -6px; --s2: 0.97; }
.cloud--o2 { width: 850px; height: 300px; top: 52%; right: -10%; --dur: 16s; --co: 0.75; --del: 0.5s; --dx1: -65px; --dy1: 14px; --s1: 1.08; --dx2: -120px; --dy2: -6px; --dx3: -50px; --dy3: 10px; --s2: 1.05; }
.cloud--o3 { width: 750px; height: 280px; top: 40%; left: 20%; --dur: 20s; --co: 0.7; --del: 1s; --dx1: 45px; --dy1: -15px; --s1: 1.12; --dx2: -20px; --dy2: -10px; --dx3: 35px; --dy3: 8px; --s2: 0.95; }

/* Legacy kenBurns removed — replaced by paramountPan + kenBurnsSubtle */
.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
.hero-layer { position: relative; }
.hero-logo { width: 500px; margin: 0 auto 0.5rem; display: grid; margin-top: -8vh; }

/* Grid stack — canvas (chroma-keyed video) and static overlap */
.logo-video, .logo-static, .logo-canvas { grid-area: 1 / 1; width: 100%; object-fit: contain; }
.logo-video { display: none; }
.logo-canvas { z-index: 2; aspect-ratio: 16 / 9; }

/* Static logo: hidden until video ends */
.logo-static { opacity: 0; z-index: 1; transition: opacity 0.5s ease; }
.hero-logo.video-done .logo-canvas { opacity: 0; transition: opacity 0.5s ease; }
.hero-logo.video-done .logo-static { opacity: 1; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero h1 { font-family: var(--heading); font-weight: 800; font-size: 6vw; color: #071e2e; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1.1; margin: 0 auto 0.5rem; white-space: nowrap; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 2px 8px rgba(0,0,0,0.15); }
.hero-rule { width: 70px; height: 3px; margin: 0 auto 1.5rem; background: linear-gradient(90deg, transparent, var(--gray-400), transparent); border: none; opacity: 0; animation: fadeIn 0.8s var(--ease) 0.5s forwards; }
.hero-sub { font-size: 1.15rem; color: #111; font-weight: 600; line-height: 1.7; margin-bottom: 1.5rem; white-space: nowrap; text-align: center; text-shadow: 0 0 12px rgba(255,255,255,0.9), 0 0 30px rgba(255,255,255,0.6), 0 0 50px rgba(255,255,255,0.3); }
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
@keyframes riseIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2.75rem; border-radius: 5px; font-family: var(--body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s var(--ease); }
.btn-lg { padding: 1.15rem 3rem; font-size: 0.85rem; }
.btn-full { width: 100%; }
.btn .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.2); transform: scale(0); animation: rip 0.6s ease-out; pointer-events: none; }
@keyframes rip { to { transform: scale(4); opacity: 0; } }
.btn-primary { background: var(--blue); color: var(--white); box-shadow: 0 4px 24px rgba(44,145,192,0.35); }
.btn-primary:hover { background: #2580ab; box-shadow: 0 8px 36px rgba(44,145,192,0.5); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,0.5); color: var(--slate); border: 1.5px solid var(--gray-200); }
.btn-ghost:hover { color: var(--dark); border-color: var(--gray-400); background: rgba(255,255,255,0.8); transform: translateY(-2px); }
.btn-ghost--dark { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); border: 1.5px solid rgba(255,255,255,0.2); }
.btn-ghost--dark:hover { color: var(--white); border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.12); transform: translateY(-2px); }

/* Sell page hero CTA */
.sell-hero { position: relative; padding: 6rem 0 5rem; background: #0a1015; overflow: hidden; }
.sell-hero-bg { position: absolute; inset: 0; opacity: 0; background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M300 50 Q400 100 350 200 T300 350 T250 450 T200 550' fill='none' stroke='%23b3d7e9' stroke-width='1.5'/%3E%3Cpath d='M150 0 Q250 80 200 180 T180 320 T220 460 T150 600' fill='none' stroke='%23b3d7e9' stroke-width='1.5'/%3E%3Cpath d='M450 0 Q500 120 420 220 T450 380 T400 500 T450 600' fill='none' stroke='%23b3d7e9' stroke-width='1.5'/%3E%3C/svg%3E"); background-size: 600px 600px; animation: topoDrift 60s linear infinite; }
.sell-hero-inner { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
.sell-hero-text h1 { font-family: var(--heading); font-weight: 800; font-size: clamp(2rem, 5vw, 3.5rem); color: var(--white); line-height: 1.15; margin-bottom: 1.25rem; }
.sell-hero-sub { font-size: 1.1rem; color: rgba(255,255,255,0.6); line-height: 1.8; max-width: 500px; margin-bottom: 2rem; }
.sell-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.proof-card { background: rgba(233, 237, 241, 0.82); border: 1px solid rgba(255,255,255,0.5); border-radius: 20px; padding: 2rem; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; text-align: center; }
.proof-num { font-family: var(--heading); font-weight: 800; font-size: 2rem; line-height: 1; margin-bottom: 0.35rem; white-space: nowrap; background: linear-gradient(135deg, var(--slate), var(--blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.proof-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue); opacity: 0.6; }

/* Section heads */
.sec-head { text-align: center; max-width: 640px; margin: 0 auto 3.5rem; }
.sec-rule { width: 50px; height: 3px; margin: 0 auto 1.25rem; background: linear-gradient(90deg, var(--blue), var(--blue-light), var(--blue)); border: none; border-radius: 2px; }
.sec-rule--light { background: linear-gradient(90deg, rgba(179,215,233,0.3), var(--blue-light), rgba(179,215,233,0.3)); }
.sec-head h2 { font-family: var(--heading); font-weight: 800; font-size: 2.25rem; color: var(--dark); margin-bottom: 0.75rem; }
.content-dark .sec-head h2 { color: var(--white); }
.sec-sub { font-size: 1.05rem; color: var(--gray-500); line-height: 1.7; }
.sec-sub--light { color: rgba(255,255,255,0.5); }
.content-dark .sec-sub { color: var(--gray-400); }

/* Steps visual cards */
.steps-visual { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 900px; margin: 0 auto; }
.step-card { position: relative; background: linear-gradient(170deg, #e8f1f8 0%, #dce8f0 100%); border: 1px solid rgba(44,145,192,0.12); border-radius: 16px; padding: 2rem; text-align: center; transition: all 0.4s var(--ease); }
.step-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(44,145,192,0.15), 0 0 0 1px rgba(44,145,192,0.12); border-color: rgba(44,145,192,0.25); background: linear-gradient(170deg, #dce8f2 0%, #d0dfe9 100%); }
.step-icon-wrap { width: 80px; height: 80px; margin: 0 auto 1rem; border-radius: 20px; background: linear-gradient(135deg, rgba(44,145,192,0.08), rgba(44,145,192,0.02)); border: 1px solid rgba(44,145,192,0.1); display: flex; align-items: center; justify-content: center; transition: all 0.4s var(--ease); box-shadow: 0 4px 16px rgba(44,145,192,0.08); }
.step-card:hover .step-icon-wrap { background: linear-gradient(135deg, var(--blue), #2580ab); border-color: var(--blue); box-shadow: 0 4px 20px rgba(44,145,192,0.3); }
.step-icon { width: 24px; height: 24px; color: var(--blue); transition: color 0.3s var(--ease); }
.step-card:hover .step-icon { color: var(--white); }
.step-num-badge { position: absolute; top: 1rem; right: 1rem; width: 28px; height: 28px; border-radius: 50%; background: var(--off-white); border: 1.5px solid var(--gray-200); font-family: var(--heading); font-weight: 800; font-size: 0.7rem; color: var(--gray-400); display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease); }
.step-card:hover .step-num-badge { background: var(--blue); border-color: var(--blue); color: var(--white); }
.step-num-big { position: absolute; top: 0.5rem; right: 0.75rem; font-family: var(--heading); font-weight: 800; font-size: 3.5rem; color: rgba(44,145,192,0.1); line-height: 1; pointer-events: none; transition: color 0.4s var(--ease); }
.step-card:hover .step-num-big { color: rgba(44,145,192,0.25); }
.step-card h3 { font-family: var(--heading); font-weight: 700; font-size: 1.05rem; color: var(--dark); margin-bottom: 0.5rem; }
.step-card p { font-size: 0.9rem; color: var(--gray-500); line-height: 1.6; }
.step-connector { display: none; }
.step-icon { width: 44px; height: 44px; color: var(--blue); }

/* Why section */
.why-section { padding: 5rem 0; background: linear-gradient(170deg, #2d3840, #3d4a54); position: relative; z-index: 1; overflow: hidden; }
.why-section .sec-head h2 { color: var(--white); }

/* Value list — bold editorial layout */
.value-list { display: flex; flex-direction: column; gap: 1rem; max-width: 720px; margin: 0 auto; }
.value-item { display: flex; align-items: flex-start; gap: 1.75rem; padding: 2rem 2.5rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-left: 4px solid var(--blue); border-radius: 0 14px 14px 0; transition: all 0.4s var(--ease); position: relative; overflow: hidden; }
.value-item::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--blue), var(--blue-light)); transition: box-shadow 0.4s var(--ease); }
.value-item:hover { background: rgba(255, 255, 255, 0.08); transform: translateX(8px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), -4px 0 24px rgba(44, 145, 192, 0.1); }
.value-item:hover::before { box-shadow: 0 0 20px rgba(44, 145, 192, 0.3); }
.value-marker { font-family: var(--heading); font-weight: 800; font-size: 2.75rem; line-height: 1; background: linear-gradient(135deg, var(--blue), var(--blue-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; flex-shrink: 0; min-width: 56px; opacity: 0.6; transition: opacity 0.4s var(--ease); }
.value-item:hover .value-marker { opacity: 1; }
.value-body h3 { font-family: var(--heading); font-weight: 700; font-size: 1.3rem; color: var(--white); margin-bottom: 0.4rem; }
.value-body p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.5); line-height: 1.7; }

/* FAQ */
.faq-section { padding: 5rem 0; }
.faq { max-width: 640px; margin: 0 auto; }
.faq--wide { max-width: 720px; }
.faq h3 { text-align: center; font-family: var(--heading); font-weight: 700; font-size: 1.3rem; margin-bottom: 1.5rem; }
.faq-item { border-bottom: 1px solid var(--gray-100); transition: all 0.3s var(--ease); border-radius: 8px; padding: 0 0.75rem; margin-bottom: 2px; }
.faq-item:first-of-type { border-top: 1px solid var(--gray-100); }
.faq-item:hover { background: rgba(44,145,192,0.02); }
.faq-item.active { background: rgba(44,145,192,0.03); border-color: rgba(44,145,192,0.1); }
.faq-q { width: 100%; background: none; border: none; text-align: left; padding: 1.25rem 0; font-family: var(--body); font-size: 0.95rem; font-weight: 600; color: var(--dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: color 0.2s; }
.faq-q:hover { color: var(--blue); }
.faq-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--gray-200); background: var(--off-white); position: relative; transition: all 0.4s var(--ease); }
.faq-item:hover .faq-icon { border-color: var(--blue); }
.faq-item.active .faq-icon { background: var(--blue); border-color: var(--blue); transform: rotate(45deg); box-shadow: 0 0 16px rgba(44,145,192,0.2); }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: var(--gray-400); border-radius: 1px; transition: all 0.35s var(--ease); }
.faq-icon::before { width: 12px; height: 1.5px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-icon::after { width: 1.5px; height: 12px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-item.active .faq-icon::before, .faq-item.active .faq-icon::after { background: var(--white); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq-a p { padding: 0 0 1.25rem; font-size: 0.95rem; line-height: 1.7; color: var(--gray-500); }
.faq-item.active .faq-a { max-height: 200px; }

/* CTA section */
.cta-section { padding: 5rem 0; background: var(--off-white); position: relative; z-index: 1; }
.cta-section--slate { background: linear-gradient(170deg, #2d3840, #1a2028); position: relative; overflow: hidden; }
.cta-card { display: grid; grid-template-columns: 1fr; gap: 3rem; background: var(--white); border-radius: 24px; padding: 3rem; box-shadow: 0 8px 40px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03); }
.cta-text h2 { font-family: var(--heading); font-weight: 800; font-size: 1.75rem; color: var(--dark); margin-bottom: 0.75rem; }
.cta-text > p { font-size: 1rem; color: var(--gray-500); line-height: 1.7; margin-bottom: 2rem; }
.cta-contact-info { display: flex; flex-direction: column; gap: 0.75rem; }
.cta-contact-link { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; font-size: 0.9rem; font-weight: 500; color: var(--slate); transition: color 0.2s; }
.cta-contact-link:hover { color: var(--blue); }
.cta-contact-link svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--blue); }
.cta-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-500); }
.form-group input, .form-group select, .form-group textarea { font-family: var(--body); font-size: 0.95rem; padding: 0.85rem 1rem; border: 1.5px solid var(--gray-100); border-radius: 10px; background: var(--off-white); color: var(--dark); transition: all 0.25s var(--ease); outline: none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(44,145,192,0.1); background: var(--white); }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--gray-400); }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.form-note { font-size: 0.8rem; color: var(--gray-400); text-align: center; margin-top: -0.25rem; }
.form-status {
  padding: 0.85rem 1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
}
.form-status[hidden] { display: none !important; }
.form-status--success {
  background: rgba(46, 184, 92, 0.12);
  border: 1px solid rgba(46, 184, 92, 0.3);
  color: #185d31;
}
.form-status--error {
  background: rgba(187, 54, 54, 0.1);
  border: 1px solid rgba(187, 54, 54, 0.2);
  color: #7a1f1f;
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.btn[aria-busy="true"] {
  opacity: 0.85;
  pointer-events: none;
}
.cta-simple { text-align: center; max-width: 600px; margin: 0 auto; }
.cta-simple h2 { font-family: var(--heading); font-weight: 800; font-size: 2rem; color: var(--white); margin-bottom: 0.75rem; }
.cta-simple > p { font-size: 1.05rem; color: rgba(255,255,255,0.5); margin-bottom: 2rem; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Process hero */
.process-hero { padding: 5rem 0 3rem; text-align: center; background: #0a1015; position: relative; overflow: hidden; }
.process-hero-inner h1 { font-family: var(--heading); font-weight: 800; font-size: clamp(2rem, 5vw, 3rem); color: var(--white); margin-bottom: 1rem; }
.process-hero-sub { font-size: 1.1rem; color: rgba(255,255,255,0.5); line-height: 1.8; max-width: 520px; margin: 0 auto; }

/* Phase cards */
.phase-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 1000px; margin: 0 auto 5rem; }
.phase-card { padding: 2.25rem 2rem; border-radius: 18px; background: rgba(233, 237, 241, 0.85); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow: hidden; transition: all 0.5s var(--ease); will-change: transform; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.phase-card ul { flex: 1; }
.glass { position: relative; z-index: 2; }
.glass::before { content: none; }
.glass:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.15); background: rgba(241, 243, 246, 0.92); }
.glass::after { content: none; }
.glass .glass-shimmer { display: none; }
.phase-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.glass-num { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--blue), #2580ab); border: 1px solid rgba(44,145,192,0.3); color: var(--white); font-family: var(--heading); font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.4s var(--ease); box-shadow: 0 2px 12px rgba(44,145,192,0.2); }
.glass:hover .glass-num { background: linear-gradient(135deg, #2580ab, var(--blue-dark)); border-color: var(--blue); box-shadow: 0 0 20px rgba(44,145,192,0.3), 0 4px 16px rgba(44,145,192,0.2); transform: rotate(-3deg) scale(1.08); }
.phase-header h3 { font-family: var(--heading); font-weight: 700; font-size: 1.15rem; color: var(--slate); margin: 0; }
.phase-duration { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); margin-top: 0.2rem; }
.phase-card ul { list-style: none; margin-bottom: 1.5rem; }
.phase-card li { position: relative; padding-left: 1.5rem; margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--gray-600); line-height: 1.65; }
.phase-card li::before { content: ''; position: absolute; left: 0; top: 0.6rem; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); opacity: 0.4; transition: all 0.3s; }
.glass:hover li::before { opacity: 1; box-shadow: 0 0 8px var(--blue-glow); }
.phase-outcome { display: flex; align-items: center; gap: 0.6rem; padding-top: 1rem; border-top: 1px solid rgba(44,145,192,0.1); font-size: 0.8rem; font-weight: 600; color: var(--blue-dark); text-transform: uppercase; letter-spacing: 0.06em; }
.phase-outcome svg { width: 16px; height: 16px; color: var(--blue); flex-shrink: 0; }

/* Timeline */
.timeline-visual { max-width: 960px; margin: 0 auto; background: rgba(233, 237, 241, 0.82); border-radius: 20px; padding: 2.5rem 2rem; border: 1px solid rgba(255,255,255,0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: all 0.5s var(--ease); }
.timeline-visual:hover { box-shadow: 0 16px 48px rgba(0,0,0,0.1), 0 0 40px rgba(44,145,192,0.06); background: rgba(241, 243, 246, 0.9); }
.timeline-title { text-align: center; font-family: var(--heading); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--slate); margin-bottom: 2.5rem; }
.timeline-track { position: relative; }
.timeline-line { display: none; }
.timeline-progress { display: none; }
.timeline-nodes { display: flex; flex-direction: column; gap: 2rem; position: relative; }
.tl-node { display: flex; align-items: flex-start; gap: 1.25rem; }
.tl-node-dot { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), #2580ab); border: 2px solid rgba(180,220,245,0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; transition: all 0.35s var(--ease); box-shadow: 0 0 0 5px rgba(44,145,192,0.1), 0 2px 12px rgba(44,145,192,0.2); position: relative; }
.tl-node:hover .tl-node-dot { box-shadow: 0 0 0 8px rgba(44,145,192,0.15), 0 0 30px rgba(44,145,192,0.25); }
.tl-node-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--white); box-shadow: 0 0 6px rgba(255,255,255,0.3); }
.tl-node-check { width: 18px; height: 18px; color: var(--white); }
.tl-node-label { font-family: var(--heading); font-weight: 700; font-size: 0.8rem; color: var(--blue); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.15rem; }
.tl-node-desc { font-size: 0.9rem; color: var(--gray-600); line-height: 1.5; }

/* Diff section */
.diff-section { padding: 5rem 0; background: var(--slate); position: relative; overflow: hidden; }
.diff-section .sec-head h2 { color: var(--white); }
.diff-grid { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.diff-item { background: rgba(233, 237, 241, 0.82); border: 1px solid rgba(255,255,255,0.5); border-radius: 18px; padding: 1.5rem; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: all 0.5s var(--ease); }
.diff-item:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.1), 0 0 40px rgba(44,145,192,0.06); background: rgba(241, 243, 246, 0.9); border-color: rgba(44,145,192,0.2); }
.diff-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: center; }
.diff-them, .diff-us { font-size: 0.9rem; line-height: 1.6; }
.diff-them { color: var(--gray-400); }
.diff-us { color: var(--slate); font-weight: 500; }
.diff-label { display: block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.35rem; color: var(--gray-400); }
.diff-label--us { color: var(--blue); }
.diff-arrow { width: 32px; height: 32px; border-radius: 50%; background: rgba(44,145,192,0.12); display: flex; align-items: center; justify-content: center; color: var(--blue); flex-shrink: 0; }
.diff-arrow svg { width: 16px; height: 16px; }

/* Footer */
.foot { padding: 3rem var(--page-gutter); text-align: center; background: #d5dbe1; border-top: 1px solid rgba(0,0,0,0.06); position: relative; z-index: 1; }
.foot-inner { max-width: var(--max-w); margin: 0 auto; }
.foot-brand { margin-bottom: 1.5rem; }
.foot-logo { width: 60px; margin: 0 auto 0.75rem; opacity: 0.7; transition: opacity 0.3s; }
.foot-logo:hover { opacity: 1; }
.foot-logo img { width: 100%; }
.foot-name { font-family: var(--heading); font-weight: 800; font-size: 1.1rem; color: var(--dark); margin-bottom: 0.15rem; letter-spacing: 0.02em; }
.foot-tag { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.6rem; color: var(--slate-light); }
.foot-links { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 1.5rem; }
.foot-links a { font-size: 0.8rem; font-weight: 500; text-decoration: none; color: var(--slate-light); transition: color 0.2s; }
.foot-links a:hover { color: var(--blue); }
.foot-copy { font-size: 0.75rem; color: var(--slate-light); }
.foot p { font-size: 0.8rem; color: var(--slate-light); }

/* Misc */
.btt { position: fixed; bottom: 2rem; right: 2rem; width: 46px; height: 46px; border-radius: 50%; background: rgba(30,30,30,0.9); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(8px); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(20px); transition: all 0.3s var(--ease); z-index: 100; }
.btt.visible { opacity: 1; transform: translateY(0); }
.btt:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(44,145,192,0.35); }
.btt svg { width: 18px; height: 18px; }
.weather-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

/* Animations */
.fade-up { opacity: 0; transform: translateY(36px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.fade-up.vis { opacity: 1; transform: translateY(0); }
.pop-in { opacity: 0; transform: scale(0.88); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.pop-in.vis { opacity: 1; transform: scale(1); }
.slide-in-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.slide-in-left.vis { opacity: 1; transform: translateX(0); }
.slide-in-right { opacity: 0; transform: translateX(60px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.slide-in-right.vis { opacity: 1; transform: translateX(0); }
.stag > *:nth-child(1) { transition-delay: 0s; }
.stag > *:nth-child(2) { transition-delay: 0.12s; }
.stag > *:nth-child(3) { transition-delay: 0.22s; }
.stag > *:nth-child(4) { transition-delay: 0.32s; }
.stag > *:nth-child(5) { transition-delay: 0.42s; }

/* Hero video */
.hero-video { width: 100%; display: block; }
.hero-title, .hero-sub, .hero-cta { opacity: 0; transform: translateY(28px); animation: none; }
.hero-title.vis, .hero-sub.vis, .hero-cta.vis { opacity: 1; transform: translateY(0); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
/* Title: clean fade-in (no char-by-char) */

/* Cinematic intro layers */
.cine-blackout { position: absolute; inset: 0; background: #000; z-index: 10; pointer-events: none; opacity: 1; transition: opacity 0.5s ease; }
.hero.bg-ready .cine-blackout { opacity: 0; }
.hero.cine-done .cine-blackout { display: none; }

.cine-light-burst { position: absolute; top: 35%; left: 50%; width: 200vmax; height: 200vmax; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(180,210,235,0.5) 0%, rgba(44,145,192,0.15) 40%, transparent 70%); z-index: 11; pointer-events: none; opacity: 0; }
.hero.bg-ready .cine-light-burst { animation: lightBurst 1.8s ease forwards; }
@keyframes lightBurst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1); } }
.hero.cine-done .cine-light-burst { display: none; }

.cine-light-sweep { position: absolute; inset: 0; z-index: 12; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.12) 45%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.12) 55%, transparent 70%); background-size: 300% 100%; }
.hero.bg-ready .cine-light-sweep { opacity: 1; animation: lightSweep 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards; }
@keyframes lightSweep { 0% { background-position: 200% 0; opacity: 1; } 100% { background-position: -100% 0; opacity: 0; } }
.hero.cine-done .cine-light-sweep { display: none; }

.cine-vignette { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%); opacity: 1; transition: opacity 1.5s ease 0.3s; }
.hero.bg-ready .cine-vignette { opacity: 0; }
.hero.cine-done .cine-vignette { display: none; }

/* Fog parts to reveal title — 3s reveal then slow gentle drift */
.hero.bg-ready .cloud-over,
.hero.bg-ready .cloud-wrap,
.hero.bg-ready .cloud-wisp {
  animation: fogPart 3s cubic-bezier(0.25, 0.1, 0.25, 1) var(--del, 0s) forwards !important;
}
.hero.cine-done .cloud-over,
.hero.cine-done .cloud-wrap,
.hero.cine-done .cloud-wisp {
  animation: fogDrift var(--dur, 20s) ease-in-out infinite !important;
}

/* Parting direction per cloud */
.cloud--w1  { --part-x: -200px; --part-y: -15px; }
.cloud--w2  { --part-x: 200px;  --part-y: 10px; }
.cloud--ws1 { --part-x: -180px; --part-y: 15px; }
.cloud--ws2 { --part-x: 180px;  --part-y: -10px; }
.cloud--o1  { --part-x: -250px; --part-y: -25px; }
.cloud--o2  { --part-x: 250px;  --part-y: 20px; }
.cloud--o3  { --part-x: -200px; --part-y: -15px; }

/* 3s one-shot: fog gathers thick then sweeps outward */
@keyframes fogPart {
  0%   { opacity: 0;    transform: translate(0, 0) scale(1); }
  30%  { opacity: 0.8;  transform: translate(0, 0) scale(1.02); }
  100% { opacity: 0.18; transform: translate(var(--part-x, 0px), var(--part-y, 0px)) scale(1.35); }
}

/* Slow ongoing drift at settled position */
@keyframes fogDrift {
  0%   { opacity: 0.18; transform: translate(var(--part-x, 0px), var(--part-y, 0px)) scale(1.35); }
  25%  { opacity: 0.28; transform: translate(calc(var(--part-x, 0px) + 30px), calc(var(--part-y, 0px) - 12px)) scale(1.38); }
  50%  { opacity: 0.1;  transform: translate(calc(var(--part-x, 0px) - 20px), calc(var(--part-y, 0px) + 15px)) scale(1.32); }
  75%  { opacity: 0.25; transform: translate(calc(var(--part-x, 0px) + 15px), calc(var(--part-y, 0px) + 8px)) scale(1.4); }
  100% { opacity: 0.18; transform: translate(var(--part-x, 0px), var(--part-y, 0px)) scale(1.35); }
}

/* Mountain fades from black immediately */
.hero--cinematic .hero-mountains { opacity: 0; }
.hero--cinematic.bg-ready .hero-mountains { animation: mtnFadeIn 1.2s ease forwards; }

/* Summit glow cinematic override */
.hero--cinematic .summit-glow { opacity: 0; }
.hero--cinematic.bg-ready .summit-glow { animation: glowAppear 1.5s ease 0.5s forwards; }

/* Lite hero path — preserve the look, skip the expensive intro on touch/small/low-power devices */
.hero--lite { padding: clamp(1.5rem, 4vw, 2.5rem); }
.hero--lite .cine-blackout,
.hero--lite .cine-light-burst,
.hero--lite .cine-light-sweep,
.hero--lite .cine-vignette,
.hero--lite .cloud,
.hero--lite .mtn-fog,
.hero--lite .logo-canvas,
.hero--lite .logo-video { display: none !important; }
.hero--lite .summit-glow {
  opacity: 0.45 !important;
  animation: none !important;
  will-change: opacity, transform;
}
.hero--lite .mtn-photo {
  animation: none !important;
  opacity: 0.92 !important;
  inset: -20% -15% -10% -15%;
  will-change: transform;
}
.hero--lite .hero-mountains,
.hero--lite .mtn-fade {
  opacity: 1 !important;
  animation: none !important;
}
.hero--lite .logo-static { opacity: 1 !important; }
.hero--lite .hero-logo {
  width: clamp(240px, 34vw, 360px);
  transform: none !important;
  opacity: 1;
  margin-top: 0;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.hero--lite.lite-live .hero-logo { animation: liteLogoRise 0.85s var(--ease) both; }
.hero--lite.lite-live .mtn-photo { animation: liteMountainFloat 16s ease-in-out infinite alternate !important; }
.hero--lite.lite-live .summit-glow { animation: liteGlowPulse 5.5s ease-in-out infinite !important; }
.hero--lite .hero-title,
.hero--lite .hero-sub,
.hero--lite .hero-cta {
  position: relative;
  z-index: 20 !important;
}
.hero--lite .hero-title.vis,
.hero--lite .hero-sub.vis,
.hero--lite .hero-cta.vis {
  transition-duration: 0.6s;
}
.hero--lite h1 {
  font-size: clamp(1.75rem, 5vw, 3.2rem);
  white-space: normal;
  max-width: 14ch;
}
.hero--lite .hero-sub {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  white-space: normal;
  line-height: 1.5;
  max-width: min(32rem, 88vw);
  margin-left: auto;
  margin-right: auto;
}
.hero--lite .hero-cta { gap: 0.75rem; }
.hero--lite .hero-cta .btn { min-width: 220px; }

@keyframes liteLogoRise {
  from { opacity: 1; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes liteMountainFloat {
  0% { transform: scale(1.02) translate3d(0, 0, 0); }
  100% { transform: scale(1.07) translate3d(0, -1.5%, 0); }
}

@keyframes liteGlowPulse {
  0%, 100% { opacity: 0.38; transform: translate(-50%, -50%) scale(0.98); }
  50% { opacity: 0.62; transform: translate(-50%, -50%) scale(1.06); }
}

/* ========================= SUB-PAGE ATMOSPHERE ========================= */
.page-mtn {
  position: absolute;
  inset: -25% -20%;
  background: url('../images/mtn-candidate-2.jpg') 56% 100% / cover no-repeat;
  filter: brightness(0.45) sepia(1) hue-rotate(190deg) saturate(1.2);
  z-index: 0;
  opacity: 0;
  will-change: transform;
  transform-origin: 50% 70%;
}
.atmos-ready .page-mtn { animation: pageMtnReveal 2s ease forwards, pageMtnBreathe 25s ease-in-out 2s infinite alternate; }
@keyframes pageMtnReveal {
  0% { opacity: 0; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1.05); }
}
@keyframes pageMtnBreathe {
  0% { transform: scale(1.05); }
  100% { transform: scale(1.1) translateY(-1%); }
}
.page-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sell-overlay { background: linear-gradient(170deg, rgba(61,74,84,0.82) 0%, rgba(45,56,64,0.88) 40%, rgba(26,32,40,0.92) 100%); }
.process-overlay { background: linear-gradient(180deg, rgba(45,56,64,0.78) 0%, rgba(61,74,84,0.85) 100%); }
.page-vignette { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.45) 100%); pointer-events: none; }
.page-fog { position: absolute; left: -30%; width: 160%; height: 100%; pointer-events: none; z-index: 2; opacity: 0; }
.page-fog--1 {
  background:
    radial-gradient(ellipse 800px 300px at 30% 60%, rgba(200,215,230,0.5), transparent 60%),
    radial-gradient(ellipse 600px 250px at 70% 50%, rgba(210,220,235,0.4), transparent 60%);
}
.page-fog--2 {
  background:
    radial-gradient(ellipse 700px 280px at 50% 45%, rgba(220,230,240,0.45), transparent 55%),
    radial-gradient(ellipse 500px 200px at 20% 55%, rgba(225,232,240,0.4), transparent 60%);
}
.atmos-ready .page-fog--1 { animation: pageFogDrift 30s linear infinite, pageFogAppear 2s ease 0.3s forwards; }
.atmos-ready .page-fog--2 { animation: pageFogDrift 22s linear infinite reverse, pageFogAppear 2s ease 0.6s forwards; }
@keyframes pageFogDrift { 0% { transform: translateX(0); } 100% { transform: translateX(18%); } }
@keyframes pageFogAppear { 0% { opacity: 0; } 100% { opacity: 0.55; } }
.page-cloud { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 3; filter: blur(4px); background: radial-gradient(ellipse, rgba(225,235,245,0.7) 0%, rgba(225,235,245,0.3) 40%, transparent 65%); }
.atmos-ready .page-cloud { animation: cloudBillow var(--dur) ease-in-out infinite, cloudAppear 2s ease var(--del, 0.5s) forwards; }
.page-cloud--1 { width: 500px; height: 200px; top: 15%; left: -8%; --dur: 18s; --co: 0.45; --del: 0.5s; --dx1: 40px; --dy1: -8px; --s1: 1.08; --dx2: 70px; --dy2: 5px; --dx3: 25px; --dy3: -4px; --s2: 0.97; }
.page-cloud--2 { width: 450px; height: 180px; top: 55%; right: -5%; --dur: 22s; --co: 0.4; --del: 1s; --dx1: -50px; --dy1: 10px; --s1: 1.06; --dx2: -85px; --dy2: -5px; --dx3: -30px; --dy3: 8px; --s2: 1.03; }
.page-cloud--3 { width: 600px; height: 220px; top: 70%; left: 15%; --dur: 25s; --co: 0.35; --del: 1.5s; --dx1: 35px; --dy1: 12px; --s1: 1.1; --dx2: -15px; --dy2: 18px; --dx3: 45px; --dy3: 5px; --s2: 0.95; }
.sell-hero > .wrap,
.process-hero > .wrap { position: relative; z-index: 5; }

/* Dark section mountain texture */
.why-section::before,
.diff-section::before,
.cta-section--slate::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: url('../images/mtn-candidate-2.jpg') center / cover no-repeat;
  filter: brightness(0.2) sepia(1) hue-rotate(190deg) saturate(0.8);
  opacity: 0.35;
  z-index: 0;
}
.why-section > .wrap,
.diff-section > .wrap,
.cta-section--slate > .wrap { position: relative; z-index: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .hero-sub, .hero-cta, .hero-rule { opacity: 1; transform: none; }
  .slide-in-left, .slide-in-right, .fade-up, .pop-in { opacity: 1; transform: none; }
  .hero-logo { transform: scale(1) !important; }
  .cine-blackout, .cine-light-burst, .cine-light-sweep, .cine-vignette { display: none; }
  .mtn-photo { animation: none !important; }
  .page-mtn { opacity: 0.5 !important; }
  .page-fog { opacity: 0.3 !important; }
  .page-cloud { opacity: 0.3 !important; }
}

/* Responsive */
@media (max-width: 480px) {
  /* Homepage hero — scale down for mobile */
  .hero { padding: 1.5rem; justify-content: center; }
  .hero-logo { width: 240px; transform: scale(1.8); margin-top: 2vh; margin-bottom: 2.5rem; }
  .hero h1 { font-size: clamp(1.4rem, 5.5vw, 1.9rem); white-space: normal; line-height: 1.15; font-weight: 800; }
  .hero-sub { font-size: 0.9rem; white-space: normal; line-height: 1.5; margin-bottom: 1rem; max-width: 280px; margin-left: auto; margin-right: auto; }
  .hero-cta { flex-direction: column; align-items: center; gap: 0.75rem; }
  .hero-cta .btn { min-width: 220px; text-align: center; }
  .mtn-photo { inset: -20% -15% -10% -15%; }
  .mtn-fade { background: radial-gradient(ellipse 60% 50% at 50% 35%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.7) 35%, rgba(255,255,255,0.3) 60%, transparent 85%); }
  /* ===== MOBILE: Kill ALL cinematic overhead, show content NOW ===== */
  /* Nuke cinematic layers — they cause 25s+ blank screens on mobile Safari */
  .cine-blackout, .cine-light-burst, .cine-light-sweep, .cine-vignette { display: none !important; }
  /* Kill all clouds — pure dead weight on mobile */
  .cloud { display: none !important; }
  /* Kill fog layers */
  .mtn-fog { display: none !important; }
  /* Summit glow — simple, no animation */
  .summit-glow { opacity: 0.7 !important; animation: none !important; }
  /* Mountain — show immediately, no animation, no heavy inset */
  .mtn-photo { animation: none !important; opacity: 1 !important; inset: -20% -15% -10% -15%; }
  .hero-mountains { opacity: 1 !important; animation: none !important; }
  .mtn-fade { opacity: 1 !important; animation: none !important; }
  /* Kill video/canvas — static logo only */
  .logo-canvas, .logo-video { display: none !important; }
  /* Logo — visible immediately, simple fade-up */
  .logo-static { opacity: 1 !important; }
  /* Title, subtitle, buttons — visible with fast staggered fade (transforms only, no filter) */
  .hero-title, .hero h1, .hero-sub, .hero-cta { position: relative; z-index: 20 !important; }
  .hero-title, .hero h1 { animation: mobileFadeUp 0.6s ease 0.2s both !important; }
  .hero-sub { animation: mobileFadeUp 0.6s ease 0.4s both !important; }
  .hero-cta { animation: mobileFadeUp 0.6s ease 0.6s both !important; }
  @keyframes mobileFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Nav */
  .nav { padding: 0 1rem; }
  .nav-logo-img { height: 36px; }
  .nav-brand { gap: 0.5rem; }
  .nav-name-full { max-width: 0; opacity: 0; }
  .nav-name-short { max-width: 110px; opacity: 1; font-size: 0.85rem; letter-spacing: 0.06em; }
  .nav-links { gap: 0.75rem; }
  .nav-link { font-size: 0.65rem; white-space: nowrap; }
  /* Sell page */
  .sell-hero { padding: 4rem 0 3rem; }
  .sell-hero-text h1 { font-size: 1.8rem; }
  .diff-compare { grid-template-columns: 1fr; gap: 0.75rem; }
  .diff-arrow { transform: rotate(90deg); margin: 0 auto; }
  .cta-card { padding: 2rem 1.5rem; }
}

@media (min-width: 640px) {
  .proof-grid { grid-template-columns: repeat(4, 1fr); }
  .form-row { grid-template-columns: 1fr 1fr; }
  .value-list { max-width: 760px; }
}

@media (min-width: 768px) {
  .hero h1 { font-size: clamp(1.4rem, 3.5vw, 2.4rem); }
  .hero-logo { width: 480px; }
  .hero-sub { font-size: 1.2rem; }
  .sec-head h2 { font-size: 2.5rem; }
  .sell-hero-inner { grid-template-columns: 1fr 1fr; }
  .steps-visual { grid-template-columns: repeat(4, 1fr); align-items: stretch; position: relative; }
  .steps-visual::before { content: ''; position: absolute; top: 56px; left: 14%; right: 14%; height: 2px; background: linear-gradient(90deg, transparent, rgba(44,145,192,0.25) 20%, rgba(44,145,192,0.35) 50%, rgba(44,145,192,0.25) 80%, transparent); z-index: 0; }
  .step-card { position: relative; z-index: 1; }
  .phase-grid { grid-template-columns: repeat(3, 1fr); }
  .timeline-line { display: block; position: absolute; top: 20px; left: 20px; right: 20px; height: 3px; background: rgba(0,0,0,0.08); border-radius: 2px; }
  .timeline-progress { display: block; position: absolute; top: 20px; left: 20px; width: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-light)); border-radius: 2px; transition: width 1.5s var(--ease); }
  .timeline-progress.vis { width: calc(100% - 40px); }
  .timeline-nodes { flex-direction: row; justify-content: space-between; }
  .tl-node { flex-direction: column; align-items: center; text-align: center; flex: 1; gap: 0.75rem; }
  .cta-card { grid-template-columns: 1fr 1fr; padding: 3.5rem; }
  .proof-num { font-size: 2.25rem; }
  .cta-simple h2 { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
  .hero h1 { font-size: clamp(1.6rem, 3.8vw, 2.8rem); }
  .hero-logo { width: 560px; }
}

/* =====================================================
   V7 — Conversion polish for Sell + Process pages only
   (Homepage untouched)
   ===================================================== */

.page-sell .nav,
.page-process .nav {
  background: rgba(248, 250, 252, 0.92);
  border-bottom: 1px solid rgba(23, 40, 53, 0.08);
}

.page-sell .nav-link,
.page-process .nav-link {
  font-weight: 700;
  letter-spacing: 0.09em;
}

.page-sell .nav-link.active,
.page-process .nav-link.active {
  border-bottom-width: 3px;
}

.page-sell .hero-eyebrow,
.page-process .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: rgba(179, 215, 233, 0.18);
  border: 1px solid rgba(179, 215, 233, 0.38);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: rgba(255, 255, 255, 0.78);
}

.page-sell .sell-hero-inner {
  gap: 2.2rem;
}

.page-sell .sell-hero-sub {
  color: rgba(255, 255, 255, 0.74);
  font-size: 1.05rem;
  line-height: 1.72;
}

.page-sell .hero-points {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.65rem;
  padding: 0;
  max-width: 540px;
}

.page-sell .hero-points li {
  position: relative;
  padding-left: 1.5rem;
  color: rgba(240, 246, 252, 0.86);
  font-size: 0.92rem;
  line-height: 1.5;
}

.page-sell .hero-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.46rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-light), var(--blue));
  box-shadow: 0 0 0 3px rgba(44, 145, 192, 0.18);
}

.page-sell .proof-card {
  border-radius: 18px;
  box-shadow: 0 12px 42px rgba(9, 20, 30, 0.33);
}

.page-sell .proof-label {
  letter-spacing: 0.08em;
}

.page-sell .trust-strip {
  background: linear-gradient(180deg, #f1f5f8 0%, #eef2f6 100%);
  border-top: 1px solid rgba(61, 74, 84, 0.08);
  border-bottom: 1px solid rgba(61, 74, 84, 0.08);
  position: relative;
  z-index: 1;
}

.page-sell .trust-strip-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding: 0.95rem 2rem;
}

.page-sell .trust-pill {
  border: 1px solid rgba(44, 145, 192, 0.2);
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
  color: var(--slate);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.page-sell .step-card,
.page-process .phase-card,
.page-process .timeline-visual,
.page-process .diff-item,
.page-sell .cta-card {
  box-shadow: 0 14px 40px rgba(10, 22, 34, 0.12);
}

.page-sell .step-card:hover,
.page-process .phase-card:hover,
.page-process .diff-item:hover {
  transform: translateY(-8px);
}

.page-sell .cta-card {
  border: 1px solid rgba(22, 51, 73, 0.08);
}

.page-sell .cta-text h2,
.page-process .cta-simple h2 {
  letter-spacing: -0.02em;
}

.page-sell .cta-form-wrap {
  background: linear-gradient(180deg, #f8fbfe 0%, #f1f6fa 100%);
  border: 1px solid rgba(30, 83, 115, 0.12);
  border-radius: 18px;
  padding: 1.15rem;
}

.page-process .process-hero {
  padding-bottom: 3.5rem;
}

.page-process .process-kpis {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

.page-process .process-kpi {
  border: 1px solid rgba(179, 215, 233, 0.22);
  background: rgba(8, 18, 27, 0.42);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  color: rgba(237, 246, 252, 0.86);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
}

.page-process .process-kpi span {
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--blue-light);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.page-process .phase-header h3,
.page-process .timeline-title,
.page-process .diff-label--us {
  color: var(--blue-deep);
}

.page-process .phase-outcome {
  color: var(--blue-deep);
  border-top-color: rgba(27, 58, 74, 0.12);
}

.page-process .diff-them,
.page-process .diff-us {
  font-size: 0.93rem;
}

@media (min-width: 640px) {
  .page-sell .trust-strip-inner,
  .page-process .process-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .page-sell .sell-hero-inner {
    grid-template-columns: 1.07fr 0.93fr;
    align-items: start;
  }

  .page-sell .cta-form-wrap {
    padding: 1.35rem;
  }
}



/* =====================================================
   V8 — LOUD visual overhaul (sell + process only)
   ===================================================== */

.page-sell {
  background: #f4f8fc;
  color: #15212a;
}

.page-sell .sell-hero {
  padding: 7.5rem 0 5.5rem !important;
  background: linear-gradient(145deg, #0f2533 0%, #1f4a63 48%, #153042 100%) !important;
  border-bottom: 8px solid rgba(179, 215, 233, 0.35);
}

.page-sell .sell-hero-text h1 {
  font-size: clamp(2.3rem, 5.6vw, 4.2rem) !important;
  letter-spacing: -0.03em;
  text-shadow: 0 6px 20px rgba(0,0,0,0.28);
}

.page-sell .sell-hero-sub {
  font-size: 1.15rem !important;
}

.page-sell .hero-points li {
  font-size: 1rem !important;
}

.page-sell .btn-primary {
  background: linear-gradient(135deg, #2c91c0, #1d6e94) !important;
  box-shadow: 0 12px 32px rgba(15, 53, 74, 0.4) !important;
}

.page-sell .btn-ghost {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(44,145,192,0.42) !important;
  color: #12384a !important;
}

.page-sell .proof-card {
  background: linear-gradient(180deg, #ffffff 0%, #edf5fb 100%) !important;
  border: 1px solid rgba(44,145,192,0.28) !important;
  box-shadow: 0 20px 50px rgba(7, 26, 41, 0.25) !important;
}

.page-sell .trust-strip {
  background: #0f2533 !important;
  border-top: none !important;
  border-bottom: none !important;
}

.page-sell .trust-pill {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(179,215,233,0.35) !important;
  color: #e7f3fb !important;
}

.page-sell .content-light {
  background: linear-gradient(180deg, #f7fbff 0%, #eef4f9 100%) !important;
}

.page-sell .step-card {
  background: #ffffff !important;
  border: 1px solid rgba(21,64,88,0.13) !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 38px rgba(17, 43, 59, 0.12) !important;
}

.page-sell .step-card h3 {
  font-size: 1.14rem !important;
  color: #12384a !important;
}

.page-sell .step-card p {
  color: #395160 !important;
  font-size: 0.96rem !important;
}

.page-sell .why-section {
  background: linear-gradient(160deg, #102634 0%, #1f4258 55%, #123146 100%) !important;
}

.page-sell .value-item {
  background: rgba(255,255,255,0.08) !important;
  border-left-width: 6px !important;
  border-radius: 0 16px 16px 0 !important;
}

.page-sell .value-body h3 {
  font-size: 1.35rem !important;
}

.page-sell .faq-section {
  background: #f7fbff;
}

.page-sell .faq-item {
  border: 1px solid #d7e5ef !important;
  border-radius: 12px !important;
  margin-bottom: 0.75rem !important;
  padding: 0 1rem !important;
  background: #fff;
}

.page-sell .cta-section {
  background: linear-gradient(180deg, #e8f1f8 0%, #dce8f2 100%) !important;
}

.page-sell .cta-card {
  border-radius: 28px !important;
  box-shadow: 0 16px 52px rgba(14, 40, 58, 0.16) !important;
}

.page-process {
  background: #101f2a;
}

.page-process .process-hero {
  padding: 7rem 0 4.75rem !important;
  background: linear-gradient(155deg, #0b1c27 0%, #18405a 48%, #0f2a3a 100%) !important;
  border-bottom: 8px solid rgba(179, 215, 233, 0.28);
}

.page-process .process-hero-inner h1 {
  font-size: clamp(2.35rem, 5vw, 4rem) !important;
  letter-spacing: -0.03em;
}

.page-process .process-hero-sub {
  color: rgba(234,246,255,0.85) !important;
}

.page-process .process-kpi {
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(194,226,245,0.38) !important;
  color: #f2fbff !important;
  font-size: 0.9rem !important;
}

.page-process .content-slate {
  background: linear-gradient(180deg, #f1f7fc 0%, #e6f0f7 100%) !important;
}

.page-process .phase-card {
  background: #ffffff !important;
  border: 1px solid rgba(25,74,102,0.18) !important;
  box-shadow: 0 16px 42px rgba(14, 36, 50, 0.14) !important;
}

.page-process .phase-header h3 {
  color: #0f3850 !important;
  font-size: 1.2rem !important;
}

.page-process .phase-card li {
  color: #345162 !important;
  font-size: 0.95rem !important;
}

.page-process .timeline-visual {
  background: #ffffff !important;
  border: 1px solid rgba(25,74,102,0.16) !important;
}

.page-process .diff-section {
  background: linear-gradient(165deg, #102634 0%, #1e435b 56%, #122f43 100%) !important;
}

.page-process .diff-item {
  background: rgba(255,255,255,0.93) !important;
  border: 1px solid rgba(44,145,192,0.22) !important;
}

.page-process .cta-section--slate {
  background: linear-gradient(165deg, #0d2230 0%, #14344a 100%) !important;
}

.page-process .cta-simple > p {
  color: rgba(228, 242, 252, 0.86) !important;
}

@media (min-width: 768px) {
  .page-sell .sell-hero-inner {
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 2.6rem !important;
  }
}


/* V8.1 — Homepage intro starts from white (not black) */
.hero,
.hero.bg-ready {
  background: #ffffff !important;
}

.cine-blackout {
  background: #ffffff !important;
}


/* =====================================================
   V9 — Gamma-inspired cinematic lift (sell + process)
   ===================================================== */

.page-sell,
.page-process {
  --impact-aqua: #6ec5f0;
  --impact-ice: #e9f7ff;
  --impact-deep: #0b2231;
}

.page-sell .sell-hero,
.page-process .process-hero {
  isolation: isolate;
  --spot-x: 50%;
  --spot-y: 34%;
}

.page-sell .sell-hero::before,
.page-process .process-hero::before,
.page-sell .sell-hero::after,
.page-process .process-hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.page-sell .sell-hero::before,
.page-process .process-hero::before {
  inset: -30% -18%;
  z-index: 3;
  background:
    radial-gradient(ellipse 60% 35% at 18% 22%, rgba(120, 200, 240, 0.24), transparent 66%),
    radial-gradient(ellipse 54% 40% at 82% 16%, rgba(95, 174, 222, 0.2), transparent 72%);
  filter: blur(2px);
  opacity: 0;
}

.page-sell .sell-hero.atmos-ready::before,
.page-process .process-hero.atmos-ready::before {
  animation: impactAuroraIn 1.4s ease forwards, impactAuroraDrift 18s ease-in-out 1.4s infinite alternate;
}

.page-sell .sell-hero::after,
.page-process .process-hero::after {
  inset: 0;
  z-index: 4;
  background: linear-gradient(
    112deg,
    rgba(255, 255, 255, 0) 18%,
    rgba(214, 240, 255, 0.1) 36%,
    rgba(255, 255, 255, 0.22) 48%,
    rgba(214, 240, 255, 0.1) 60%,
    rgba(255, 255, 255, 0) 78%
  );
  background-size: 220% 100%;
  opacity: 0;
}

.page-sell .sell-hero.atmos-ready::after,
.page-process .process-hero.atmos-ready::after {
  animation: impactSweep 3.2s var(--ease) 0.4s forwards;
}

.impact-spotlight {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(640px circle at var(--spot-x) var(--spot-y), rgba(198, 233, 255, 0.28), transparent 68%),
    radial-gradient(360px circle at calc(var(--spot-x) + 12%) calc(var(--spot-y) + 8%), rgba(255, 255, 255, 0.2), transparent 72%);
  mix-blend-mode: screen;
  transition: background-position 0.12s linear, opacity 0.35s ease;
}

.page-sell .sell-hero.atmos-ready .impact-spotlight,
.page-process .process-hero.atmos-ready .impact-spotlight {
  opacity: 1;
}

.page-sell .proof-card,
.page-sell .step-card,
.page-process .phase-card,
.page-process .diff-item,
.page-process .timeline-visual {
  position: relative;
  overflow: hidden;
}

.page-sell .proof-card::after,
.page-sell .step-card::after,
.page-process .phase-card::after,
.page-process .diff-item::after,
.page-process .timeline-visual::after {
  content: '';
  position: absolute;
  inset: -120% -60%;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(192, 232, 255, 0.38) 50%,
    rgba(255, 255, 255, 0) 65%
  );
  opacity: 0;
}

.page-sell .proof-card::after,
.page-process .timeline-visual::after {
  animation: impactCardSweep 7.2s linear infinite;
}

.page-sell .step-card:hover::after,
.page-process .phase-card:hover::after,
.page-process .diff-item:hover::after {
  opacity: 1;
  animation: impactCardSweep 1.25s linear 1;
}

.page-sell .proof-stat {
  position: relative;
  padding-bottom: 0.42rem;
}

.page-sell .proof-stat::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  transform: scaleX(var(--proof-fill, 0));
  transform-origin: left;
  background: linear-gradient(90deg, rgba(44, 145, 192, 0.18), rgba(44, 145, 192, 0.9));
  box-shadow: 0 0 12px rgba(44, 145, 192, 0.32);
  transition: transform 1.25s var(--ease);
}

.page-sell .proof-card.meters-live .proof-stat:nth-child(1) { --proof-fill: 1; }
.page-sell .proof-card.meters-live .proof-stat:nth-child(2) { --proof-fill: 0.98; transition-delay: 0.12s; }
.page-sell .proof-card.meters-live .proof-stat:nth-child(3) { --proof-fill: 1; transition-delay: 0.2s; }
.page-sell .proof-card.meters-live .proof-stat:nth-child(4) { --proof-fill: 0.84; transition-delay: 0.28s; }

.page-process .process-kpi {
  position: relative;
  overflow: hidden;
}

.page-process .process-kpi::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, rgba(179, 215, 233, 0.3), rgba(179, 215, 233, 0.95));
}

.page-process .process-kpi:nth-child(1)::before { animation: kpiLine 1.2s var(--ease) 0.1s forwards; }
.page-process .process-kpi:nth-child(2)::before { animation: kpiLine 1.2s var(--ease) 0.28s forwards; }
.page-process .process-kpi:nth-child(3)::before { animation: kpiLine 1.2s var(--ease) 0.46s forwards; }

.page-process .phase-card.is-active {
  transform: translateY(-10px) scale(1.01);
  border-color: rgba(44, 145, 192, 0.45) !important;
  box-shadow: 0 20px 55px rgba(10, 30, 43, 0.23) !important;
}

.page-process .phase-card.is-active .glass-num {
  box-shadow: 0 0 0 8px rgba(44, 145, 192, 0.14), 0 0 26px rgba(44, 145, 192, 0.32);
}

.page-process .timeline-track::before {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(179, 215, 233, 0.28) 0%, rgba(179, 215, 233, 0) 72%);
  opacity: 0.75;
  pointer-events: none;
}

.page-process .timeline-progress {
  box-shadow: 0 0 20px rgba(44, 145, 192, 0.35);
}

.page-process .timeline-progress.vis {
  animation: timelineCharge 1.8s ease 1;
}

.page-process .diff-item {
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}

.page-process .diff-item:hover {
  border-color: rgba(44, 145, 192, 0.46) !important;
  box-shadow: 0 18px 50px rgba(8, 27, 41, 0.2) !important;
}

@keyframes impactAuroraIn {
  from { opacity: 0; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes impactAuroraDrift {
  0% { transform: translate3d(-1.8%, 0, 0) scale(1); }
  100% { transform: translate3d(2.6%, -2.4%, 0) scale(1.05); }
}

@keyframes impactSweep {
  0% { opacity: 0; background-position: 220% 0; }
  18% { opacity: 0.85; }
  100% { opacity: 0; background-position: -120% 0; }
}

@keyframes impactCardSweep {
  0% { transform: translateX(-35%); opacity: 0; }
  18% { opacity: 0.9; }
  55% { opacity: 0.65; }
  100% { transform: translateX(45%); opacity: 0; }
}

@keyframes kpiLine {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes timelineCharge {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.45); }
  100% { filter: brightness(1); }
}

@media (max-width: 767px) {
  .impact-spotlight { opacity: 0.45 !important; }
  .page-sell .sell-hero::before,
  .page-process .process-hero::before { inset: -40% -28%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-sell .sell-hero::before,
  .page-process .process-hero::before,
  .page-sell .sell-hero::after,
  .page-process .process-hero::after,
  .impact-spotlight,
  .page-sell .proof-card::after,
  .page-sell .step-card::after,
  .page-process .phase-card::after,
  .page-process .diff-item::after,
  .page-process .timeline-visual::after {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* =====================================================
   V10 — Brutal visual revamp from gobble page critique
   (sell.html + process.html only)
   ===================================================== */

.page-sell,
.page-process {
  background: #050c14;
  color: #e9f4ff;
}

.page-sell .nav,
.page-process .nav {
  background: rgba(255, 255, 255, 0.55) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.page-sell .nav-brand,
.page-process .nav-brand,
.page-sell .nav-link,
.page-process .nav-link {
  color: #0c2a3e !important;
}

.page-sell .nav-logo-img,
.page-process .nav-logo-img {
  filter: none;
}

.page-sell .nav-link.active,
.page-process .nav-link.active {
  color: #1a6a94 !important;
  border-bottom-color: #2c91c0 !important;
}

.page-sell .sell-hero,
.page-process .process-hero {
  min-height: 86vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(118, 204, 255, 0.22);
  box-shadow: inset 0 -120px 140px rgba(3, 12, 22, 0.9);
}

.page-sell .sell-hero {
  background: radial-gradient(1200px 700px at 18% 12%, rgba(55, 154, 214, 0.3), transparent 70%),
              radial-gradient(900px 500px at 82% 16%, rgba(123, 204, 255, 0.17), transparent 72%),
              linear-gradient(140deg, #050f1a 0%, #0a2132 46%, #061523 100%) !important;
}

.page-process .process-hero {
  background: radial-gradient(1000px 640px at 16% 8%, rgba(64, 177, 245, 0.26), transparent 70%),
              radial-gradient(980px 540px at 88% 20%, rgba(116, 202, 255, 0.2), transparent 72%),
              linear-gradient(150deg, #05101a 0%, #0a1f31 48%, #071624 100%) !important;
}

.page-sell .sell-hero::before,
.page-process .process-hero::before {
  content: '';
  position: absolute;
  inset: -45% -20% auto;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 28% 20%, rgba(189, 232, 255, 0.22) 0%, rgba(189, 232, 255, 0) 58%),
    radial-gradient(ellipse at 72% 16%, rgba(132, 210, 255, 0.2) 0%, rgba(132, 210, 255, 0) 60%);
  animation: revampSkyFloat 16s ease-in-out infinite alternate;
}

.page-sell .sell-hero::after,
.page-process .process-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(255,255,255,0) 38%, rgba(211, 241, 255, 0.16) 48%, rgba(255,255,255,0) 58%),
    radial-gradient(circle at 50% 35%, rgba(172, 228, 255, 0.14), transparent 66%);
  background-size: 230% 100%, 100% 100%;
  mix-blend-mode: screen;
  animation: revampSweep 8s linear infinite;
}

.page-sell .sell-hero > .wrap,
.page-process .process-hero > .wrap {
  z-index: 6;
}

.page-sell .sell-hero-inner,
.page-process .process-hero .wrap {
  width: 100%;
}

.page-sell .hero-eyebrow,
.page-process .hero-eyebrow {
  background: rgba(102, 196, 255, 0.14) !important;
  border: 1px solid rgba(120, 206, 255, 0.45) !important;
  color: #d8f3ff !important;
  box-shadow: 0 0 24px rgba(87, 188, 255, 0.25);
}

.page-sell .sell-hero-text h1,
.page-process .process-hero-inner h1 {
  font-size: clamp(2.55rem, 6vw, 5.2rem) !important;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #f3fbff !important;
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.52);
}

.page-sell .sell-hero-sub,
.page-process .process-hero-sub {
  font-size: clamp(1.03rem, 1.6vw, 1.2rem) !important;
  color: rgba(222, 241, 255, 0.85) !important;
  max-width: 60ch;
}

.page-sell .hero-points li {
  color: rgba(228, 246, 255, 0.92) !important;
  font-size: 0.98rem !important;
}

.page-sell .hero-points li::before {
  width: 0.66rem;
  height: 0.66rem;
  top: 0.42rem;
  box-shadow: 0 0 0 4px rgba(75, 173, 227, 0.2), 0 0 18px rgba(75, 173, 227, 0.4);
}

.page-sell .btn,
.page-process .btn {
  border-radius: 12px !important;
  letter-spacing: 0.11em;
}

.page-sell .btn-primary,
.page-process .btn-primary {
  background: linear-gradient(135deg, #36a4e2 0%, #1e7cad 52%, #2bb8ff 100%) !important;
  box-shadow: 0 16px 38px rgba(19, 117, 170, 0.4) !important;
}

.page-sell .btn-primary:hover,
.page-process .btn-primary:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 20px 44px rgba(28, 151, 216, 0.46) !important;
}

.page-sell .btn-ghost,
.page-process .btn-ghost,
.page-process .btn-ghost--dark {
  background: rgba(7, 24, 36, 0.66) !important;
  color: #dcf5ff !important;
  border-color: rgba(118, 204, 255, 0.42) !important;
}

.page-sell .proof-card {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.94), rgba(236, 248, 255, 0.88)) !important;
  border: 1px solid rgba(107, 195, 242, 0.38) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 66px rgba(4, 21, 33, 0.4) !important;
  animation: revampFloatCard 6.5s ease-in-out infinite;
}

.page-sell .proof-num {
  color: #0c5678 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.page-sell .proof-label {
  color: #3a6174 !important;
}

.page-sell .trust-strip {
  margin-top: -14px;
  background: linear-gradient(180deg, #071523 0%, #06121f 100%) !important;
  border-top: 1px solid rgba(94, 186, 237, 0.26) !important;
  border-bottom: 1px solid rgba(94, 186, 237, 0.2) !important;
}

.page-sell .trust-pill {
  background: rgba(15, 43, 61, 0.72) !important;
  border-color: rgba(117, 206, 255, 0.42) !important;
  color: #d8f2ff !important;
}

.page-sell .content-light {
  background: linear-gradient(180deg, #eaf5fd 0%, #dcecf8 100%) !important;
}

.page-sell .step-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 252, 0.96)) !important;
  border: 1px solid rgba(43, 133, 185, 0.18) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 38px rgba(11, 42, 60, 0.13) !important;
}

.page-sell .step-num-big {
  color: rgba(68, 160, 211, 0.28) !important;
  font-size: 2.4rem;
}

.page-sell .why-section {
  background: linear-gradient(165deg, #06121f 0%, #0a2233 52%, #071624 100%) !important;
}

.page-sell .value-item {
  background: rgba(13, 38, 55, 0.68) !important;
  border: 1px solid rgba(108, 197, 245, 0.24);
  border-left: 4px solid #41a9e6 !important;
  border-radius: 14px !important;
}

.page-sell .value-body h3,
.page-sell .value-body p {
  color: #e7f6ff !important;
}

.page-sell .faq-section {
  background: linear-gradient(180deg, #dbe9f4 0%, #d2e4f1 100%) !important;
}

.page-sell .faq-item {
  background: rgba(255, 255, 255, 0.84) !important;
  border: 1px solid rgba(86, 163, 208, 0.24) !important;
  border-radius: 12px !important;
}

.page-sell .faq-q {
  font-size: 0.95rem;
}

.page-sell .cta-section {
  background: linear-gradient(180deg, #d7e7f3 0%, #cadfee 100%) !important;
}

.page-sell .cta-card {
  background: linear-gradient(165deg, rgba(255,255,255,0.95) 0%, rgba(238,247,253,0.95) 100%) !important;
  border: 1px solid rgba(105, 191, 238, 0.26) !important;
}

.page-sell .cta-text h2,
.page-sell .cta-text p,
.page-sell .cta-contact-link {
  color: #123448 !important;
}

.page-sell .cta-form-wrap {
  background: rgba(255,255,255,0.66) !important;
  border: 1px solid rgba(105, 191, 238, 0.23) !important;
}

.page-process .process-kpis {
  gap: 0.9rem;
}

.page-process .process-kpi {
  background: rgba(10, 39, 57, 0.78) !important;
  border: 1px solid rgba(117, 206, 255, 0.48) !important;
  color: #e4f7ff !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(156, 223, 255, 0.12);
}

.page-process .process-kpi span {
  color: #8dd8ff !important;
}

.page-process .content-slate {
  background: linear-gradient(180deg, #e7f2fb 0%, #d7e8f5 100%) !important;
}

.page-process .phase-card,
.page-process .timeline-visual,
.page-process .diff-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(240,248,253,0.95)) !important;
  border: 1px solid rgba(92, 175, 221, 0.22) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 42px rgba(8, 38, 55, 0.14) !important;
}

.page-process .phase-card li,
.page-process .tl-node-desc,
.page-process .diff-them,
.page-process .diff-us {
  color: #314f60 !important;
}

.page-process .phase-header h3,
.page-process .timeline-title,
.page-process .diff-label--us {
  color: #0c4f73 !important;
}

.page-process .phase-duration,
.page-process .tl-node-label {
  color: #1a83bb !important;
}

.page-process .timeline-line {
  background: rgba(71, 157, 204, 0.25) !important;
}

.page-process .timeline-progress {
  background: linear-gradient(90deg, #35a1df, #8ad8ff) !important;
}

.page-process .diff-section {
  background: linear-gradient(165deg, #06121f 0%, #0a2233 55%, #081827 100%) !important;
}

.page-process .diff-section .sec-head h2,
.page-process .diff-section .sec-sub {
  color: #e6f5ff !important;
}

.page-process .cta-section--slate {
  background: linear-gradient(165deg, #07182a 0%, #0d2a3f 100%) !important;
}

.page-process .cta-simple h2,
.page-process .cta-simple > p {
  color: #ecf8ff !important;
}

.page-sell .foot,
.page-process .foot {
  background: linear-gradient(180deg, #d3e0ea 0%, #ccdbe6 100%) !important;
}

@keyframes revampSkyFloat {
  0% { transform: translate3d(-2%, 0, 0) scale(1); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.06); }
}

@keyframes revampSweep {
  0% { background-position: 210% 0, 0 0; }
  100% { background-position: -110% 0, 0 0; }
}

@keyframes revampFloatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (max-width: 900px) {
  .page-sell .sell-hero,
  .page-process .process-hero {
    min-height: 78vh;
  }

  .page-sell .sell-hero-text h1,
  .page-process .process-hero-inner h1 {
    font-size: clamp(2.1rem, 8vw, 3.1rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-sell .proof-card,
  .page-sell .sell-hero::before,
  .page-process .process-hero::before,
  .page-sell .sell-hero::after,
  .page-process .process-hero::after {
    animation: none !important;
  }
}


/* =====================================================
   V11 — Gamma Stratos integration (sell + process only)
   Ported from Gamma.app Stratos theme: animated gradient
   borders, warm accent pops, enhanced glass morphism,
   pulsing CTA glow, section-card depth rhythm.
   Color scheme preserved (Summit Legacy blues mapped from Stratos).
   ===================================================== */

/* --- Warm accent from Stratos secondaryColors --- */
.page-sell,
.page-process {
  --gamma-warm: #fac496;
  --gamma-cyan: #77c9eb;
  --gamma-mint: #9feed9;
  --gamma-lavender: #c593db;
  --gamma-card-border: rgba(166, 211, 255, 0.28);
  --gamma-card-glow: rgba(44, 145, 192, 0.15);
}

/* --- Animated gradient border ring on proof card --- */
.page-sell .proof-card {
  position: relative;
  z-index: 1;
  border: none !important;
}
.page-sell .proof-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 24px;
  background: linear-gradient(
    var(--border-angle, 0deg),
    rgba(44, 145, 192, 0.7),
    rgba(119, 201, 235, 0.5) 25%,
    rgba(250, 196, 150, 0.5) 50%,
    rgba(197, 147, 219, 0.4) 75%,
    rgba(44, 145, 192, 0.7)
  );
  animation: gammaRotateBorder 6s linear infinite;
}

@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes gammaRotateBorder {
  to { --border-angle: 360deg; }
}

/* Fallback for browsers without @property */
@supports not (background: paint(something)) {
  .page-sell .proof-card::before {
    background: linear-gradient(135deg, rgba(44, 145, 192, 0.6), rgba(250, 196, 150, 0.4), rgba(197, 147, 219, 0.4), rgba(119, 201, 235, 0.5));
    background-size: 300% 300%;
    animation: gammaGradientShift 4s ease infinite;
  }
}

@keyframes gammaGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Animated gradient border on phase cards --- */
.page-process .phase-card {
  position: relative;
  z-index: 1;
  border: none !important;
}
.page-process .phase-card::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  z-index: -1;
  border-radius: 20px;
  background: linear-gradient(
    var(--border-angle, 0deg),
    rgba(44, 145, 192, 0.55),
    rgba(119, 201, 235, 0.4) 33%,
    rgba(159, 238, 217, 0.35) 66%,
    rgba(44, 145, 192, 0.55)
  );
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  animation: gammaRotateBorder 8s linear infinite;
}
.page-process .phase-card:hover::before,
.page-process .phase-card.is-active::before {
  opacity: 1;
}

/* --- Pulsing CTA glow halo --- */
.page-sell .btn-primary,
.page-process .btn-primary {
  position: relative;
  z-index: 1;
}
.page-sell .sell-hero .btn-primary::after,
.page-process .process-hero .btn-primary::after,
.page-sell .cta-section .btn-primary::after,
.page-process .cta-section--slate .btn-primary::after {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(44, 145, 192, 0.6), rgba(250, 196, 150, 0.4));
  filter: blur(12px);
  opacity: 0.6;
  animation: gammaCTAPulse 3s ease-in-out infinite;
}

@keyframes gammaCTAPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); filter: blur(12px); }
  50% { opacity: 0.75; transform: scale(1.06); filter: blur(16px); }
}

/* --- Warm accent badge on ghost CTA --- */
.page-sell .sell-hero .btn-ghost,
.page-process .process-hero .btn-ghost--dark {
  border-color: rgba(250, 196, 150, 0.42) !important;
  color: var(--gamma-warm) !important;
}
.page-sell .sell-hero .btn-ghost:hover,
.page-process .process-hero .btn-ghost--dark:hover {
  background: rgba(250, 196, 150, 0.12) !important;
  border-color: rgba(250, 196, 150, 0.65) !important;
  box-shadow: 0 0 28px rgba(250, 196, 150, 0.2);
}

/* --- Enhanced frosted glass with inner glow --- */
.page-sell .proof-card,
.page-process .phase-card,
.page-process .timeline-visual,
.page-process .diff-item,
.page-sell .step-card,
.page-sell .cta-card {
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    0 20px 50px rgba(6, 22, 35, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

/* --- Inner glow ring on hero stat numbers --- */
.page-sell .proof-num {
  background: linear-gradient(135deg, #0c5678, #2c91c0) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 2px 4px rgba(44, 145, 192, 0.25));
}

/* --- Warm accent underline on key headings --- */
.page-sell .sec-head h2::after,
.page-process .sec-head h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin: 0.65rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gamma-warm), var(--gamma-cyan));
  opacity: 0.75;
}

/* --- Section-card depth rhythm (overlapping sections) --- */
.page-sell .content-light,
.page-sell .faq-section,
.page-sell .cta-section {
  border-radius: 28px 28px 0 0;
  margin-top: -24px;
  position: relative;
  z-index: 2;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.08);
}

.page-sell .why-section {
  border-radius: 28px 28px 0 0;
  margin-top: -24px;
  position: relative;
  z-index: 3;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
}

.page-process .content-slate {
  border-radius: 28px 28px 0 0;
  margin-top: -24px;
  position: relative;
  z-index: 2;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.08);
}

.page-process .diff-section {
  border-radius: 28px 28px 0 0;
  margin-top: -24px;
  position: relative;
  z-index: 3;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
}

.page-process .cta-section--slate {
  border-radius: 28px 28px 0 0;
  margin-top: -24px;
  position: relative;
  z-index: 4;
}

/* --- Glass morphism on KPI pills --- */
.page-process .process-kpi {
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    0 8px 24px rgba(4, 18, 28, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(141, 216, 255, 0.12) !important;
  transition: all 0.4s var(--ease);
}
.page-process .process-kpi:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 32px rgba(4, 18, 28, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(141, 216, 255, 0.22) !important;
}

/* --- Glass morphism trust pills --- */
.page-sell .trust-pill {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all 0.35s var(--ease);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.page-sell .trust-pill:hover {
  transform: translateY(-2px);
  background: rgba(20, 58, 80, 0.82) !important;
  border-color: rgba(141, 216, 255, 0.55) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* --- Gamma "shimmer" on timeline dots --- */
.page-process .tl-node-dot {
  position: relative;
}
.page-process .tl-node-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44, 145, 192, 0.35), transparent 70%);
  animation: gammaNodePulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes gammaNodePulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.35); opacity: 0.1; }
}

/* --- Enhanced step card hover with warm accent border --- */
.page-sell .step-card {
  transition: all 0.45s var(--ease);
  position: relative;
  z-index: 1;
}
.page-sell .step-card:hover {
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow:
    0 24px 55px rgba(8, 32, 48, 0.2),
    0 0 0 1.5px rgba(250, 196, 150, 0.35) !important;
}
.page-sell .step-card:hover .step-icon-wrap {
  box-shadow: 0 0 20px rgba(250, 196, 150, 0.25), 0 4px 20px rgba(44, 145, 192, 0.3) !important;
}

/* --- Gamma-style value item accent glow on hover --- */
.page-sell .value-item:hover {
  border-left-color: var(--gamma-warm) !important;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.25), -6px 0 28px rgba(250, 196, 150, 0.12) !important;
}
.page-sell .value-item:hover .value-marker {
  background: linear-gradient(135deg, var(--gamma-warm), var(--gamma-cyan)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* --- Comparison cards warm accent on Summit Legacy side --- */
.page-process .diff-label--us {
  color: var(--gamma-warm) !important;
}
.page-process .diff-arrow {
  background: linear-gradient(135deg, rgba(250, 196, 150, 0.2), rgba(44, 145, 192, 0.2)) !important;
  color: var(--gamma-warm) !important;
  box-shadow: 0 0 16px rgba(250, 196, 150, 0.15);
}

/* --- FAQ subtle glass treatment --- */
.page-sell .faq-item {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.35s var(--ease);
}
.page-sell .faq-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(44, 145, 192, 0.08);
  border-color: rgba(44, 145, 192, 0.2) !important;
}
.page-sell .faq-item.active {
  border-color: rgba(250, 196, 150, 0.3) !important;
  box-shadow: 0 4px 20px rgba(250, 196, 150, 0.08);
}

/* --- Contact form glass enhancement --- */
.page-sell .cta-form-wrap {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 28px rgba(0, 0, 0, 0.06) !important;
}
.page-sell .form-group input:focus,
.page-sell .form-group select:focus,
.page-sell .form-group textarea:focus {
  border-color: var(--gamma-warm) !important;
  box-shadow: 0 0 0 4px rgba(250, 196, 150, 0.12) !important;
}

/* --- Footer warm accent strip --- */
.page-sell .foot,
.page-process .foot {
  border-top: 2px solid transparent !important;
  border-image: linear-gradient(90deg, transparent 10%, var(--gamma-warm) 30%, var(--gamma-cyan) 70%, transparent 90%) 1;
}

/* --- Responsive --- */
@media (max-width: 767px) {
  .page-sell .content-light,
  .page-sell .why-section,
  .page-sell .faq-section,
  .page-sell .cta-section,
  .page-process .content-slate,
  .page-process .diff-section,
  .page-process .cta-section--slate {
    border-radius: 18px 18px 0 0;
    margin-top: -16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-sell .proof-card::before,
  .page-process .phase-card::before,
  .page-sell .sell-hero .btn-primary::after,
  .page-process .process-hero .btn-primary::after,
  .page-sell .cta-section .btn-primary::after,
  .page-process .cta-section--slate .btn-primary::after,
  .page-process .tl-node-dot::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ====================================================================
   ENHANCED FOG SYSTEM — v25
   More clouds, varied animations, opacity cycling, stronger title
   ==================================================================== */

/* --- Hero title: punch through fog --- */
.hero h1 {
  color: #071e2e !important;
  -webkit-text-stroke: 0;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.4),
    0 2px 8px rgba(0,0,0,0.15);
  position: relative;
  z-index: 9;
}

/* --- Additional billow keyframes for variation --- */
@keyframes cloudBillowAlt {
  0%   { transform: translate(0, 0) scale(1); }
  20%  { transform: translate(var(--dx1), var(--dy2)) scale(var(--s1)); }
  45%  { transform: translate(var(--dx3), var(--dy1)) scale(1.03); }
  70%  { transform: translate(var(--dx2), var(--dy3)) scale(var(--s2)); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes cloudBillowDrift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  30%  { transform: translate(var(--dx2), var(--dy1)) scale(var(--s1)) rotate(0.5deg); }
  60%  { transform: translate(var(--dx1), var(--dy3)) scale(var(--s2)) rotate(-0.3deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

@keyframes cloudBillowSlow {
  0%   { transform: translate(0, 0) scale(1); }
  15%  { transform: translate(var(--dx3), var(--dy2)) scale(1.02); }
  50%  { transform: translate(var(--dx1), var(--dy1)) scale(var(--s1)); }
  85%  { transform: translate(var(--dx2), var(--dy3)) scale(var(--s2)); }
  100% { transform: translate(0, 0) scale(1); }
}

/* --- Opacity pulse: fog thickens and thins --- */
@keyframes fogPulse {
  0%, 100% { opacity: var(--co); }
  40%  { opacity: calc(var(--co) * 1.3); }
  70%  { opacity: calc(var(--co) * 0.5); }
}

@keyframes fogPulseAlt {
  0%, 100% { opacity: var(--co); }
  25%  { opacity: calc(var(--co) * 0.4); }
  55%  { opacity: calc(var(--co) * 1.4); }
  80%  { opacity: calc(var(--co) * 0.7); }
}

/* --- L1 DEEP: two new clouds --- */
.cloud--d4 {
  width: 1200px; height: 500px; top: 22%; left: 30%;
  --dur: 52s; --co: 0.45; --del: 3s;
  --dx1: -90px; --dy1: 15px; --s1: 1.05;
  --dx2: 60px; --dy2: -20px;
  --dx3: -40px; --dy3: 25px; --s2: 1.02;
}
.hero.bg-ready .cloud--d4 {
  animation: cloudBillowSlow var(--dur) ease-in-out infinite,
             cloudAppear 3s ease var(--del) forwards,
             fogPulse 18s ease-in-out 5s infinite;
}

.cloud--d5 {
  width: 800px; height: 380px; top: 32%; right: 10%;
  --dur: 38s; --co: 0.55; --del: 4s;
  --dx1: 100px; --dy1: -8px; --s1: 1.09;
  --dx2: -60px; --dy2: 18px;
  --dx3: 80px; --dy3: -12px; --s2: 0.97;
}
.hero.bg-ready .cloud--d5 {
  animation: cloudBillowAlt var(--dur) ease-in-out infinite,
             cloudAppear 3.5s ease var(--del) forwards,
             fogPulseAlt 22s ease-in-out 6s infinite;
}

/* --- L2 MTN: two new clouds --- */
.cloud--mt4 {
  width: 650px; height: 260px; top: 42%; right: 20%;
  --dur: 28s; --co: 0.7; --del: 1.5s;
  --dx1: -45px; --dy1: -18px; --s1: 1.1;
  --dx2: 70px; --dy2: 12px;
  --dx3: -30px; --dy3: -6px; --s2: 0.94;
}
.hero.bg-ready .cloud--mt4 {
  animation: cloudBillowDrift var(--dur) ease-in-out infinite,
             cloudAppear 2.8s ease var(--del) forwards,
             fogPulse 15s ease-in-out 3s infinite;
}

.cloud--mt5 {
  width: 550px; height: 220px; top: 48%; left: -5%;
  --dur: 32s; --co: 0.65; --del: 2.5s;
  --dx1: 60px; --dy1: 20px; --s1: 1.07;
  --dx2: -40px; --dy2: -15px;
  --dx3: 80px; --dy3: 8px; --s2: 1.03;
}
.hero.bg-ready .cloud--mt5 {
  animation: cloudBillowAlt var(--dur) ease-in-out infinite,
             cloudAppear 3s ease var(--del) forwards,
             fogPulseAlt 20s ease-in-out 4s infinite;
}

/* --- L3 WRAP: one new cloud --- */
.cloud--w3 {
  width: 700px; height: 220px; top: 44%; left: -5%;
  --dur: 24s; --co: 0.55; --del: 1.5s;
  --dx1: 55px; --dy1: -12px; --s1: 1.09;
  --dx2: -30px; --dy2: 8px;
  --dx3: 40px; --dy3: -5px; --s2: 0.96;
}
.hero.bg-ready .cloud--w3 {
  animation: cloudBillowDrift var(--dur) ease-in-out infinite,
             cloudAppear 2.5s ease var(--del) forwards,
             fogPulse 12s ease-in-out 2s infinite;
}

/* --- L4 WISP: one new cloud --- */
.cloud--ws3 {
  width: 550px; height: 160px; top: 54%; left: 5%;
  --dur: 21s; --co: 0.45; --del: 2s;
  --dx1: -40px; --dy1: 7px; --s1: 1.05;
  --dx2: 55px; --dy2: -6px;
  --dx3: -25px; --dy3: 10px; --s2: 1.02;
}
.hero.bg-ready .cloud--ws3 {
  animation: cloudBillowSlow var(--dur) ease-in-out infinite,
             cloudAppear 2.5s ease var(--del) forwards,
             fogPulseAlt 16s ease-in-out 3s infinite;
}

/* --- L5 OVER: two new foreground clouds --- */
.cloud--o4 {
  width: 900px; height: 320px; top: 35%; right: 5%;
  --dur: 18s; --co: 0.6; --del: 2s;
  --dx1: -80px; --dy1: -10px; --s1: 1.06;
  --dx2: 50px; --dy2: 16px;
  --dx3: -60px; --dy3: -8px; --s2: 1.03;
}
.hero.bg-ready .cloud--o4 {
  animation: cloudBillowAlt var(--dur) ease-in-out infinite,
             cloudAppear 2.8s ease var(--del) forwards,
             fogPulse 14s ease-in-out 4s infinite;
}

.cloud--o5 {
  width: 700px; height: 260px; top: 55%; left: -8%;
  --dur: 24s; --co: 0.55; --del: 3s;
  --dx1: 90px; --dy1: 12px; --s1: 1.08;
  --dx2: -40px; --dy2: -14px;
  --dx3: 65px; --dy3: 6px; --s2: 0.96;
}
.hero.bg-ready .cloud--o5 {
  animation: cloudBillowDrift var(--dur) ease-in-out infinite,
             cloudAppear 3s ease var(--del) forwards,
             fogPulseAlt 19s ease-in-out 5s infinite;
}

/* haze layer removed — obscured mountain landing */

/* existing clouds keep original billow + appear — no overrides */

/* --- Hero subtitle: also strengthen visibility --- */
.hero-sub {
  text-shadow:
    0 0 10px rgba(255,255,255,1),
    0 0 25px rgba(255,255,255,0.85),
    0 0 50px rgba(255,255,255,0.5),
    0 0 80px rgba(255,255,255,0.3);
}

/* --- Reduced motion: kill fog pulses too --- */
@media (prefers-reduced-motion: reduce) {
  .cloud-haze,
  .cloud--d4, .cloud--d5,
  .cloud--mt4, .cloud--mt5,
  .cloud--w3, .cloud--ws3,
  .cloud--o4, .cloud--o5 {
    animation: none !important;
    opacity: 0 !important;
  }
}