/* =========================================================
   KORVA — style.css
   Design tokens: near-black glass, indigo→violet glow accent
   Fonts: Manrope (display) / Inter (body) / JetBrains Mono (data)
========================================================= */

:root{
  --bg: #07070a;
  --bg-alt: #0c0d12;
  --surface: #101119;
  --glass: rgba(255,255,255,0.055);
  --glass-strong: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.10);
  --text: #f3f3f6;
  --text-muted: #9b9ba6;
  --text-faint: #6c6c78;

  --accent-1: #6E8BFF;
  --accent-2: #B478FF;
  --accent-grad: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --accent-glow: rgba(110, 139, 255, 0.35);

  --success: #34d399;

  --font-display: 'Manrope', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);

  --nav-h: 76px;
}

[data-theme="light"]{
  --bg: #f5f5f8;
  --bg-alt: #ececf2;
  --surface: #ffffff;
  --glass: rgba(10,10,20,0.045);
  --glass-strong: rgba(10,10,20,0.08);
  --border: rgba(10,10,20,0.10);
  --text: #101115;
  --text-muted: #55555f;
  --text-faint: #85858f;
  --accent-glow: rgba(110, 139, 255, 0.22);
}

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

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

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .4s var(--ease), color .4s var(--ease);
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; color: inherit; }
ul{ list-style:none; margin:0; padding:0; }
input{ font-family: inherit; }

.container{ width:100%; max-width: 1180px; margin:0 auto; padding: 0 24px; }

::selection{ background: var(--accent-1); color:#fff; }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--glass-strong); border-radius:10px; }

/* focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--accent-1);
  outline-offset: 3px;
  border-radius: 6px;
}

body.no-scroll{ overflow: hidden; height: 100vh; }

/* =========================================================
   CUSTOM CURSOR
========================================================= */
.cursor-dot, .cursor-ring{
  position: fixed; top:0; left:0; pointer-events:none; z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{ width:6px; height:6px; background: var(--accent-1); }
.cursor-ring{
  width: 34px; height: 34px; border: 1.5px solid var(--accent-2);
  transition: width .25s var(--ease), height .25s var(--ease), opacity .25s var(--ease), border-color .25s;
}
.cursor-ring.cursor-hover{ width: 56px; height: 56px; border-color: var(--accent-1); }
@media (hover: none), (pointer: coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}

/* =========================================================
   SCROLL PROGRESS BAR
========================================================= */
.scroll-progress{
  position: fixed; top:0; left:0; width:100%; height: 3px; z-index: 1200;
  background: transparent;
}
.scroll-progress span{
  display:block; height:100%; width:0%;
  background: var(--accent-grad);
  box-shadow: 0 0 12px var(--accent-glow);
  transition: width .1s linear;
}

/* =========================================================
   LOADER
========================================================= */
.loader{
  position: fixed; inset:0; background: var(--bg); z-index: 3000;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner{ text-align:center; }
.loader-logo{
  font-family: var(--font-display); font-weight:800; font-size: 2.4rem; letter-spacing: 0.08em;
  background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block; margin-bottom: 22px; animation: pulseGlow 1.6s ease-in-out infinite;
}
.loader-bar{ width: 180px; height: 3px; background: var(--glass-strong); border-radius: 10px; overflow:hidden; margin:0 auto; }
.loader-bar span{ display:block; height:100%; width:0%; background: var(--accent-grad); }
@keyframes pulseGlow{
  0%,100%{ filter: drop-shadow(0 0 6px var(--accent-glow)); }
  50%{ filter: drop-shadow(0 0 18px var(--accent-glow)); }
}

/* =========================================================
   LANGUAGE SELECTOR
========================================================= */
.lang-screen{
  position: fixed; inset:0; z-index: 2500;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg);
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.lang-screen.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.lang-bg{
  position:absolute; inset:0; overflow:hidden;
  background:
    radial-gradient(600px circle at 20% 20%, var(--accent-glow), transparent 60%),
    radial-gradient(500px circle at 80% 80%, rgba(180,120,255,0.25), transparent 60%);
  filter: blur(10px);
  animation: driftBg 14s ease-in-out infinite alternate;
}
@keyframes driftBg{
  0%{ transform: scale(1) translate(0,0); }
  100%{ transform: scale(1.15) translate(-30px, 20px); }
}
.lang-box{ position:relative; z-index:1; text-align:center; padding: 24px; max-width: 640px; }
.lang-logo{
  font-family: var(--font-display); font-weight:800; font-size: 1.6rem; letter-spacing: .1em;
  color: var(--text-muted); display:block; margin-bottom: 18px;
}
.lang-title{ font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin: 0 0 36px; font-weight:700; }
.lang-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lang-card{
  background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 22px 12px; display:flex; flex-direction:column; align-items:center; gap:10px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .35s var(--ease-soft), border-color .3s, background .3s, box-shadow .3s;
}
.lang-card:hover, .lang-card:focus-visible{
  transform: translateY(-6px) scale(1.03);
  border-color: var(--accent-1);
  background: var(--glass-strong);
  box-shadow: 0 12px 30px rgba(0,0,0,.35), 0 0 24px var(--accent-glow);
}
.lang-flag{ font-size: 2rem; }
.lang-name{ font-size: .92rem; color: var(--text-muted); font-weight:600; }
@media (max-width: 560px){ .lang-grid{ grid-template-columns: repeat(2, 1fr); } }

/* =========================================================
   NAVBAR
========================================================= */
.navbar{
  position: fixed; top:0; left:0; width:100%; z-index: 1000;
  height: var(--nav-h);
  display:flex; align-items:center;
  transition: background .4s var(--ease), height .35s var(--ease), border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.navbar.scrolled{
  height: 64px;
  background: rgba(7,7,10,0.55);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .navbar.scrolled{ background: rgba(245,245,248,0.7); }

.navbar-inner{
  width:100%; max-width: 1240px; margin:0 auto; padding: 0 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{
  font-family: var(--font-display); font-weight:800; font-size: 1.3rem; letter-spacing: .06em;
  background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav-links{ display:flex; gap: 30px; }
.nav-links a{
  font-size: .92rem; font-weight:500; color: var(--text-muted);
  position:relative; padding: 6px 0; transition: color .25s;
}
.nav-links a::after{
  content:''; position:absolute; bottom:0; left:0; width:0; height: 1.5px;
  background: var(--accent-grad); transition: width .3s var(--ease-soft);
}
.nav-links a:hover{ color: var(--text); }
.nav-links a:hover::after{ width:100%; }

.nav-actions{ display:flex; align-items:center; gap: 10px; }
.lang-switch, .theme-toggle{
  width: 38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--glass); border: 1px solid var(--border);
  transition: background .25s, border-color .25s, transform .25s;
}
.lang-switch:hover, .theme-toggle:hover{ background: var(--glass-strong); border-color: var(--accent-1); transform: translateY(-2px); }

.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width: 38px; height: 38px;
}
.hamburger span{
  display:block; width: 100%; height: 2px; background: var(--text);
  transition: transform .35s var(--ease), opacity .3s;
}
.hamburger.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position: fixed; top: 0; right:0; height: 100vh; width: min(78vw, 340px); z-index: 999;
  background: rgba(10,10,16,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform .45s var(--ease);
  display:flex; align-items:center; padding: 100px 40px 40px;
}
[data-theme="light"] .mobile-menu{ background: rgba(255,255,255,0.9); }
.mobile-menu.active{ transform: translateX(0); }
.mobile-menu-links{ display:flex; flex-direction:column; gap: 26px; width:100%; }
.mobile-menu-links a{ font-size: 1.15rem; font-weight:600; opacity:0; transform: translateX(20px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.mobile-menu.active .mobile-menu-links a{ opacity:1; transform: translateX(0); }
.mobile-menu.active .mobile-menu-links a:nth-child(1){ transition-delay: .05s; }
.mobile-menu.active .mobile-menu-links a:nth-child(2){ transition-delay: .1s; }
.mobile-menu.active .mobile-menu-links a:nth-child(3){ transition-delay: .15s; }
.mobile-menu.active .mobile-menu-links a:nth-child(4){ transition-delay: .2s; }
.mobile-menu.active .mobile-menu-links a:nth-child(5){ transition-delay: .25s; }
.mobile-menu.active .mobile-menu-links a:nth-child(6){ transition-delay: .3s; }
.mobile-menu.active .mobile-menu-links a:nth-child(7){ transition-delay: .35s; }

@media (max-width: 900px){
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
}

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  position: relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 15px 30px; border-radius: var(--radius-full);
  font-weight:600; font-size: .95rem; letter-spacing:.01em;
  transition: transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft), background .3s;
  white-space: nowrap;
}
.btn-primary{
  background: var(--accent-grad); color:#fff;
  box-shadow: 0 8px 24px var(--accent-glow);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 14px 34px var(--accent-glow); }
.btn-ghost{
  background: var(--glass); color: var(--text); border: 1px solid var(--border);
}
.btn-ghost:hover{ background: var(--glass-strong); border-color: var(--accent-1); transform: translateY(-3px); }
.btn-block{ width:100%; }

.btn .ripple{
  position:absolute; border-radius:50%; background: rgba(255,255,255,0.5);
  transform: scale(0); animation: rippleAnim .6s ease-out forwards; pointer-events:none;
}
@keyframes rippleAnim{ to{ transform: scale(3.2); opacity:0; } }

.icon-btn{
  width: 40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--glass); border:1px solid var(--border);
  transition: background .25s, border-color .25s, transform .25s, color .25s;
}
.icon-btn:hover{ background: var(--glass-strong); border-color: var(--accent-1); transform: translateY(-3px); color: var(--accent-1); }

/* =========================================================
   SCROLL REVEAL BASE
========================================================= */
[data-reveal]{
  opacity:0; transform: translateY(36px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].in-view{ opacity:1; transform: translateY(0); }

/* =========================================================
   TILT 3D CARDS
========================================================= */
.tilt-3d{ transform-style: preserve-3d; will-change: transform; transition: transform .25s var(--ease-soft); }

.glass-reflection{
  position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 35%);
  mix-blend-mode: overlay;
}

/* =========================================================
   HERO
========================================================= */
.hero{
  position: relative; min-height: 100vh; display:flex; align-items:center;
  padding: calc(var(--nav-h) + 40px) 24px 80px;
  overflow:hidden;
}
.hero-shapes{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-glow{
  position:absolute; top:10%; left:50%; width: 900px; height:900px; transform: translateX(-50%);
  background: radial-gradient(circle, var(--accent-glow), transparent 65%);
  filter: blur(30px); animation: floatGlow 12s ease-in-out infinite alternate;
}
@keyframes floatGlow{ 0%{ transform: translate(-52%,-4%) scale(1); } 100%{ transform: translate(-48%,4%) scale(1.12); } }

.shape{ position:absolute; border-radius: 40%; filter: blur(2px); opacity:.5; }
.shape-1{ width:220px; height:220px; top:14%; left:6%; border:1px solid var(--border); background: var(--glass); animation: floatShape 9s ease-in-out infinite; }
.shape-2{ width:140px; height:140px; bottom:16%; left:16%; background: var(--glass); border:1px solid var(--border); border-radius:30%; animation: floatShape 11s ease-in-out infinite reverse; }
.shape-3{ width:90px; height:90px; top:60%; left:42%; background: var(--accent-grad); opacity:.12; border-radius:50%; animation: floatShape 7s ease-in-out infinite; }
@keyframes floatShape{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-26px) rotate(8deg); } }

#particlesCanvas{ position:absolute; inset:0; width:100%; height:100%; }

.hero-inner{
  position:relative; z-index:1; width:100%; max-width: 1180px; margin:0 auto;
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center;
}
.eyebrow{
  display:inline-block; font-family: var(--font-mono); font-size:.75rem; letter-spacing:.14em;
  color: var(--accent-1); text-transform:uppercase; margin-bottom: 18px;
}
.hero-title{
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.05; margin: 0 0 22px; letter-spacing: -0.02em;
}
.hero-title .char{ display:inline-block; opacity:0; transform: translateY(24px); animation: charIn .6s var(--ease) forwards; }
@keyframes charIn{ to{ opacity:1; transform: translateY(0); } }

.hero-subtitle{ font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--text); font-weight:600; margin: 0 0 14px; }
.hero-desc{ color: var(--text-muted); font-size: 1.02rem; max-width: 480px; margin: 0 0 34px; }
.hero-actions{ display:flex; gap: 16px; flex-wrap:wrap; }

.hero-visual{ position:relative; }
.hero-image-frame{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  border: 1px solid var(--border); background: var(--glass);
  animation: floatImg 6s ease-in-out infinite;
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
}
@keyframes floatImg{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-16px); } }
.hero-image{ width:100%; aspect-ratio: 4/5; object-fit: cover; background: var(--surface); }

.floating-badge{
  position:absolute; padding: 10px 16px; border-radius: var(--radius-full);
  background: var(--glass-strong); border:1px solid var(--border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: .8rem; font-weight:600; box-shadow: 0 10px 24px rgba(0,0,0,.3);
  animation: floatBadge 5s ease-in-out infinite;
}
.badge-1{ top: 12%; right: -6%; animation-delay: .3s; }
.badge-2{ bottom: 10%; left: -8%; animation-delay: 1s; }
@keyframes floatBadge{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }

.scroll-cue{ position:absolute; bottom: 26px; left:50%; transform: translateX(-50%); z-index:1; }
.scroll-cue span{
  display:block; width: 22px; height: 36px; border: 1.5px solid var(--border); border-radius: 20px; position:relative;
}
.scroll-cue span::before{
  content:''; position:absolute; top:6px; left:50%; width:4px; height:8px; background: var(--accent-1);
  border-radius:2px; transform: translateX(-50%); animation: scrollCue 1.6s ease-in-out infinite;
}
@keyframes scrollCue{ 0%{ opacity:1; top:6px; } 100%{ opacity:0; top:18px; } }

@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; text-align:center; }
  .hero-desc{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
  .hero-visual{ max-width: 340px; margin: 0 auto; }
  .badge-1, .badge-2{ display:none; }
}

/* =========================================================
   SECTION GENERIC
========================================================= */
section{ position: relative; padding: 120px 0; }
.section-head{ text-align:center; max-width: 640px; margin: 0 auto 60px; }
.section-title{ font-family: var(--font-display); font-weight:800; font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 14px; letter-spacing: -0.01em; }
.section-sub{ color: var(--text-muted); font-size: 1.05rem; }
.section-text{ color: var(--text-muted); font-size: 1.05rem; max-width: 520px; }

/* =========================================================
   ABOUT
========================================================= */
.about-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items:center; }
.about-visual{ position:relative; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--border); }
.about-visual img{ width:100%; aspect-ratio: 4/3; object-fit:cover; background: var(--surface); }

.stats-row{ display:flex; gap: 40px; margin-top: 42px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; }
.stat-number{ font-family: var(--font-mono); font-weight:600; font-size: 2.4rem; background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-suffix{ font-family: var(--font-mono); font-size:1.2rem; color: var(--accent-2); margin-top:-6px; }
.stat-label{ color: var(--text-muted); font-size: .85rem; margin-top: 4px; }

@media (max-width: 860px){ .about-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   DIFF CARDS
========================================================= */
.diff-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.diff-card{
  background: var(--glass); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 34px 28px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease-soft), background .3s;
}
.diff-card:hover{ border-color: var(--accent-1); box-shadow: 0 20px 40px rgba(0,0,0,.35), 0 0 30px var(--accent-glow); background: var(--glass-strong); }
.diff-icon{
  width: 54px; height:54px; border-radius: 16px; display:flex; align-items:center; justify-content:center;
  background: var(--accent-grad); color:#fff; margin-bottom: 20px;
}
.diff-card h3{ font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 10px; }
.diff-card p{ color: var(--text-muted); font-size: .95rem; margin:0; }

@media (max-width: 900px){ .diff-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .diff-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   TIMELINE
========================================================= */
.timeline-track{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position:relative;
}
.timeline-track::before{
  content:''; position:absolute; top: 9px; left:0; right:0; height:1px; background: var(--border);
}
.timeline-item{ position:relative; padding-top: 30px; }
.timeline-dot{
  position:absolute; top:0; left:0; width:18px; height:18px; border-radius:50%;
  background: var(--accent-grad); box-shadow: 0 0 0 6px var(--glass);
}
.timeline-year{ font-family: var(--font-mono); color: var(--accent-1); font-size:.85rem; display:block; margin-bottom:8px; }
.timeline-item h3{ font-family: var(--font-display); font-size:1.05rem; margin: 0 0 8px; }
.timeline-item p{ color: var(--text-muted); font-size:.92rem; margin:0; }

@media (max-width: 860px){
  .timeline-track{ grid-template-columns: 1fr; gap: 40px; }
  .timeline-track::before{ top:0; bottom:0; left:9px; right:auto; width:1px; height:auto; }
}

/* =========================================================
   PLANS
========================================================= */
.plans-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 820px; margin:0 auto; }
.plan-card{
  position:relative; background: var(--glass); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 42px 34px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .35s var(--ease-soft), box-shadow .35s;
}
.plan-card:hover{ box-shadow: 0 25px 50px rgba(0,0,0,.4), 0 0 40px var(--accent-glow); }
.plan-featured{ border-color: var(--accent-1); background: var(--glass-strong); }
.plan-badge{
  position:absolute; top: -14px; right: 34px; background: var(--accent-grad); color:#fff;
  font-size:.72rem; font-weight:700; padding: 6px 14px; border-radius: var(--radius-full); letter-spacing:.04em;
}
.plan-name{ font-family: var(--font-display); font-weight:700; font-size:1.2rem; display:block; margin-bottom: 14px; }
.plan-price{ font-family: var(--font-mono); font-size: 2.6rem; font-weight:600; margin-bottom: 18px; }
.plan-price span{ background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.plan-ideal{ color: var(--text-muted); font-size:.9rem; margin: 0 0 10px; }
.plan-features{ margin: 0 0 30px; display:flex; flex-direction:column; gap:10px; }
.plan-features li{ font-size:.95rem; padding-left: 26px; position:relative; color: var(--text); }
.plan-features li::before{
  content:'✓'; position:absolute; left:0; color: var(--accent-1); font-weight:700;
}

@media (max-width: 760px){ .plans-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   GALLERY + LIGHTBOX
========================================================= */
.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-item{
  position:relative; border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--border);
  aspect-ratio: 4/3;
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease-soft), filter .4s; background: var(--surface); }
.gallery-item::after{
  content:'🔍'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.35); opacity:0; transition: opacity .3s; font-size:1.4rem;
}
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item:hover::after{ opacity:1; }

@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .gallery-grid{ grid-template-columns: 1fr; } }

.lightbox-overlay{
  position: fixed; inset:0; z-index: 2200; background: rgba(3,3,6,0.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .4s var(--ease), visibility .4s var(--ease);
}
.lightbox-overlay.active{ opacity:1; visibility:visible; }
.lightbox-stage{ max-width: 86vw; max-height: 84vh; }
.lightbox-stage img{ max-width:100%; max-height:84vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.6); transform: scale(.92); transition: transform .4s var(--ease); }
.lightbox-overlay.active .lightbox-stage img{ transform: scale(1); }
.lightbox-close{ position:absolute; top: 26px; right: 30px; font-size:1.4rem; color:#fff; }
.lightbox-nav{ position:absolute; top:50%; transform: translateY(-50%); font-size: 2.4rem; color:#fff; padding: 10px 18px; opacity:.7; transition: opacity .25s; }
.lightbox-nav:hover{ opacity:1; }
.lightbox-prev{ left: 12px; }
.lightbox-next{ right: 12px; }

/* =========================================================
   TESTIMONIALS
========================================================= */
.testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.testi-card{
  background: var(--glass); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 30px 26px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .3s var(--ease-soft), box-shadow .3s;
}
.testi-card:hover{ transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.testi-quote{ font-size: .98rem; color: var(--text); margin: 0 0 22px; line-height:1.6; }
.testi-author{ display:flex; align-items:center; gap:12px; }
.testi-avatar{
  width: 42px; height:42px; border-radius:50%; background: var(--accent-grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex-shrink:0;
}
.testi-name{ display:block; font-weight:600; font-size:.92rem; }
.testi-role{ display:block; color: var(--text-muted); font-size:.8rem; }

@media (max-width: 900px){ .testi-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   FAQ
========================================================= */
.faq-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items:start; }
.faq-item{ border-bottom: 1px solid var(--border); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding: 22px 0; font-size: 1.02rem; font-weight:600; text-align:left;
}
.faq-plus{ position:relative; width: 18px; height:18px; flex-shrink:0; }
.faq-plus::before, .faq-plus::after{
  content:''; position:absolute; background: var(--accent-1); top:50%; left:50%; transform: translate(-50%,-50%);
}
.faq-plus::before{ width:100%; height:2px; }
.faq-plus::after{ width:2px; height:100%; transition: transform .3s var(--ease-soft); }
.faq-item.active .faq-plus::after{ transform: translate(-50%,-50%) rotate(90deg); }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease-soft); }
.faq-answer p{ color: var(--text-muted); padding-bottom: 22px; margin:0; }

@media (max-width: 860px){ .faq-grid{ grid-template-columns: 1fr; gap: 30px; } }

/* =========================================================
   CTA FINAL
========================================================= */
.cta-final{ padding: 60px 0 120px; }
.cta-box{
  text-align:center; padding: 70px 40px; border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--glass-strong), var(--glass));
  border:1px solid var(--border); position:relative; overflow:hidden;
}
.cta-box::before{
  content:''; position:absolute; inset:-40%; background: radial-gradient(circle, var(--accent-glow), transparent 60%);
  animation: floatGlow 10s ease-in-out infinite alternate;
}
.cta-box h2{ font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0 0 14px; position:relative; }
.cta-box p{ color: var(--text-muted); margin: 0 0 30px; position:relative; }
.cta-box .btn{ position:relative; }

/* =========================================================
   NEWSLETTER
========================================================= */
.newsletter{ padding: 0 0 120px; }
.newsletter-box{
  display:flex; align-items:center; justify-content:space-between; gap: 30px; flex-wrap:wrap;
  background: var(--glass); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 40px;
}
.newsletter-box h3{ font-family: var(--font-display); margin: 0 0 8px; font-size: 1.3rem; }
.newsletter-box p{ color: var(--text-muted); margin:0; max-width: 380px; }
.newsletter-form{ display:flex; gap: 12px; flex-wrap:wrap; }
.newsletter-form input{
  padding: 14px 20px; border-radius: var(--radius-full); border:1px solid var(--border);
  background: var(--surface); color: var(--text); min-width: 240px;
}

/* =========================================================
   CONTACT
========================================================= */
.contact-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items:center; }
.contact-phone{
  display:flex; align-items:center; gap: 14px; font-family: var(--font-mono); font-size: 1.3rem;
  margin: 26px 0 26px; font-weight:600;
}
.whatsapp-btn{ background: linear-gradient(135deg, #25D366, #128C7E); box-shadow: 0 8px 24px rgba(37,211,102,.3); }
.contact-card{
  background: var(--glass); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 40px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.contact-card-eyebrow{ display:block; font-family: var(--font-mono); color: var(--accent-1); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin: 20px 0 6px; }
.contact-card-eyebrow:first-child{ margin-top:0; }
.contact-card p{ margin: 0; color: var(--text-muted); }

@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   FOOTER
========================================================= */
.footer{ background: var(--bg-alt); border-top: 1px solid var(--border); padding: 70px 0 30px; position:relative; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 50px; }
.footer-brand p{ color: var(--text-muted); font-size:.92rem; margin: 16px 0 22px; max-width: 320px; }
.social-links{ display:flex; gap: 12px; }
.footer-heading{ display:block; font-weight:700; margin-bottom: 18px; font-size:.95rem; }
.footer-links{ display:flex; flex-direction:column; }
.footer-links a{ color: var(--text-muted); font-size:.92rem; padding: 6px 0; transition: color .25s; }
.footer-links a:hover{ color: var(--accent-1); }
.footer-credits p{ color: var(--text-muted); font-size:.9rem; margin: 0 0 10px; }
.footer-rights{ font-size:.8rem !important; color: var(--text-faint) !important; }

.back-to-top{
  position: fixed; bottom: 30px; right: 30px; width: 48px; height:48px; border-radius:50%;
  background: var(--accent-grad); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px var(--accent-glow); z-index: 500;
  opacity:0; visibility:hidden; transform: translateY(20px);
  transition: opacity .3s, visibility .3s, transform .3s var(--ease-soft);
}
.back-to-top.visible{ opacity:1; visibility:visible; transform: translateY(0); }

@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; gap: 34px; } }

/* =========================================================
   MODAL
========================================================= */
.modal-overlay{
  position: fixed; inset:0; z-index: 2100; background: rgba(3,3,6,0.7);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; padding: 20px;
  opacity:0; visibility:hidden; transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.modal-overlay.active{ opacity:1; visibility:visible; }
.modal-box{
  position:relative; width: 100%; max-width: 480px; max-height: 90vh; overflow-y:auto;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 40px 34px; transform: translateY(30px) scale(.97); transition: transform .4s var(--ease);
}
.modal-overlay.active .modal-box{ transform: translateY(0) scale(1); }
.modal-close{ position:absolute; top: 20px; right: 22px; font-size:1.1rem; color: var(--text-muted); }
.modal-box h3{ font-family: var(--font-display); font-size:1.4rem; margin: 6px 0 26px; }
.modal-form{ display:flex; flex-direction:column; gap: 16px; }
.modal-form label{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; color: var(--text-muted); font-weight:600; }
.modal-form input{
  padding: 13px 16px; border-radius: var(--radius-sm); border:1px solid var(--border);
  background: var(--bg-alt); color: var(--text); font-size:.95rem;
}
.modal-form input:focus{ border-color: var(--accent-1); }
.modal-form input[readonly]{ color: var(--accent-1); font-weight:600; }

/* =========================================================
   TOAST
========================================================= */
.toast{
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-full);
  padding: 14px 26px; font-size:.9rem; z-index: 3000; box-shadow: 0 12px 30px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.toast.active{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }

/* =========================================================
   RESPONSIVE FINAL TWEAKS
========================================================= */
@media (max-width: 480px){
  section{ padding: 90px 0; }
  .container{ padding: 0 18px; }
  .stats-row{ gap: 26px; }
  .newsletter-box{ padding: 30px; }
  .modal-box{ padding: 32px 22px; }
}