/* ============================================================
   LAUNCHGLOBAL — DARK PREMIUM DESIGN SYSTEM 2026 v2
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #07070f;
  --bg-2:      #0d0d1e;
  --bg-3:      #13132a;
  --card:      rgba(255,255,255,0.055);
  --card-h:    rgba(255,255,255,0.09);
  --border:    rgba(255,255,255,0.1);
  --border-h:  rgba(255,255,255,0.22);
  --glow:      rgba(99,102,241,0.15);
  --text:      #ffffff;
  --text-2:    rgba(255,255,255,0.58);
  --text-3:    rgba(255,255,255,0.3);
  --accent:    #6366f1;
  --accent-2:  #a855f7;
  --accent-3:  #f97316;
  --g1: linear-gradient(135deg,#6366f1 0%,#a855f7 100%);
  --g2: linear-gradient(135deg,#f97316 0%,#f59e0b 100%);
  --g3: linear-gradient(135deg,#22d3ee 0%,#6366f1 100%);
  --g4: linear-gradient(135deg,#10b981 0%,#22d3ee 100%);
  --nav-h: 68px;
  --r: 14px;
  --r-lg: 20px;
}

html { scroll-behavior: smooth; }
a { color: inherit; }
a:visited { color: inherit; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Display',
               'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.4;
}

/* ── NAV ─────────────────────────────────── */
nav:not(.breadcrumb) {
  position: sticky; top: 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 clamp(1.5rem,5vw,4rem);
  background: rgba(7,7,15,0.65);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
nav.scrolled {
  background: rgba(7,7,15,0.92);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 24px rgba(0,0,0,0.4);
}

.nav-logo {
  font-size: 1.2rem; font-weight: 800; letter-spacing: -0.03em;
  text-decoration: none; color: var(--text); margin-right: auto; flex-shrink: 0;
}
.nav-logo span {
  background: var(--g1);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.nav-links {
  display: flex; align-items: center; gap: 0.1rem; list-style: none;
}
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: flex; align-items: center; gap: 4px;
  padding: 0.45rem 0.8rem;
  font-size: 0.855rem; font-weight: 500;
  color: var(--text-2); text-decoration: none;
  border-radius: 8px;
  transition: color 0.18s, background 0.18s;
}
.nav-links > li > a:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-links > li > a:visited { color: var(--text-2); }
.nav-links > li > a:visited:hover { color: var(--text); }

.nav-arrow { flex-shrink: 0; opacity: 0.45; transition: transform 0.2s; }
.nav-links > li:hover .nav-arrow { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: 100%; left: 50%;
  padding-top: 10px;
  transform: translateX(-50%) translateY(-8px);
  min-width: 210px;
  background: rgba(13,13,30,0.97);
  backdrop-filter: blur(28px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0.5rem;
  list-style: none;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
}
.nav-links > li:hover .nav-dropdown {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown li a {
  display: block; padding: 0.55rem 0.9rem;
  font-size: 0.84rem; color: var(--text-2);
  text-decoration: none; border-radius: 9px;
  transition: color 0.15s, background 0.15s;
}
.nav-dropdown li a:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.sep { height: 1px; background: var(--border); margin: 0.35rem 0.6rem; list-style: none; }
.nav-dropdown a { color: var(--text-2) !important; text-decoration: none !important; }
.nav-dropdown a:visited { color: var(--text-2) !important; }
.nav-dropdown a:hover { color: var(--text) !important; }

.nav-cta {
  margin-left: 1.25rem;
  padding: 0.48rem 1.2rem;
  background: var(--g1);
  color: #fff !important; font-size: 0.84rem; font-weight: 700;
  text-decoration: none; border-radius: 50px;
  box-shadow: 0 4px 20px rgba(99,102,241,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(99,102,241,0.5); }

/* ── HAMBURGER ── */
.hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 6px; margin-left: 1rem;
  z-index: 201;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── MOBILE MENU ── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(7,7,15,0.97);
  backdrop-filter: blur(20px);
  padding-top: var(--nav-h);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
  overflow-y: auto;
}
.mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-menu-inner { padding: 2rem; }
.mobile-menu-group { margin-bottom: 1.5rem; }
.mobile-menu-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 0.75rem;
}
.mobile-menu-group a {
  display: block; padding: 0.65rem 0;
  font-size: 1rem; color: var(--text-2);
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.15s;
}
.mobile-menu-group a:hover { color: var(--text); }
.mobile-menu-group a:visited { color: var(--text-2); }
.mobile-menu-cta {
  display: inline-block !important;
  margin-top: 1rem;
  padding: 0.7rem 2rem !important;
  background: var(--g1);
  color: #fff !important;
  border-radius: 50px;
  font-weight: 700;
  border-bottom: none !important;
}

/* ── BREADCRUMB ── */
nav.breadcrumb {
  background: transparent;
  padding: 0.65rem clamp(1.5rem,5vw,4rem);
  border-bottom: 1px solid var(--border);
}
nav.breadcrumb ol {
  display: flex; gap: 0.4rem; list-style: none;
  font-size: 0.78rem; color: var(--text-3); max-width: 1200px; margin: 0 auto;
}
nav.breadcrumb ol li + li::before { content: '/'; margin-right: 0.4rem; }
nav.breadcrumb ol li a { color: var(--text-3); text-decoration: none; transition: color 0.15s; }
nav.breadcrumb ol li a:hover { color: var(--text-2); }

/* ── HERO ── */
.hero {
  min-height: 88vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 5rem clamp(1.5rem,5vw,4rem) 4rem;
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse 100% 60% at 50% -5%, rgba(99,102,241,0.14) 0%, transparent 60%),
              radial-gradient(ellipse 50% 40% at 80% 80%, rgba(168,85,247,0.08) 0%, transparent 60%),
              var(--bg);
}
.hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
}
.hero::after {
  content: '';
  position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,0.12) 0%, transparent 65%);
  bottom: -80px; right: -40px; pointer-events: none;
  animation: orb2 8s ease-in-out infinite;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 1.1rem;
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 50px;
  font-size: 0.75rem; font-weight: 600; color: #a5b4fc;
  letter-spacing: 0.03em;
  margin-bottom: 2rem;
  position: relative; z-index: 1;
}
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.hero h1 {
  font-size: clamp(3rem,8vw,6.5rem);
  font-weight: 900; letter-spacing: -0.045em; line-height: 1.05;
  margin-bottom: 1.5rem;
  position: relative; z-index: 1;
}
.hero h1 em {
  font-style: normal;
  background: var(--g1);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: clamp(0.95rem,2vw,1.12rem);
  color: var(--text-2); max-width: 520px; line-height: 1.8;
  margin-bottom: 2.5rem;
  position: relative; z-index: 1;
}

.hero-actions {
  display: flex; gap: 0.875rem; flex-wrap: wrap; justify-content: center;
  position: relative; z-index: 1;
}

.hero-stats {
  display: flex; gap: clamp(2rem,5vw,4rem);
  margin-top: 4.5rem; flex-wrap: wrap; justify-content: center;
  position: relative; z-index: 1;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  width: 100%; max-width: 700px;
}
.hero-stat { text-align: center; }
.hero-stat-num {
  font-size: clamp(1.8rem,3.5vw,2.4rem);
  font-weight: 900; letter-spacing: -0.04em;
  background: linear-gradient(135deg, #fff 0%, #a5b4fc 60%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1;
}
.hero-stat-label {
  font-size: 0.73rem; color: rgba(255,255,255,0.38); margin-top: 0.4rem;
  letter-spacing: 0.02em;
}

/* ── TRUST BAR ── */
.trust-bar {
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
}
.trust-bar-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(1.5rem,5vw,4rem);
  text-align: center;
}
.trust-logos {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.2rem,3vw,2.5rem); flex-wrap: nowrap;
  margin-bottom: 0.75rem;
}
.trust-logos img {
  height: 15px; width: auto; max-width: 85px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.3;
  transition: opacity 0.25s;
  flex-shrink: 0;
}
.trust-logos img:hover { opacity: 0.6; }
.trust-label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}

/* ── PLATFORM BADGES ── */
.platforms {
  padding: 1.8rem clamp(1.5rem,5vw,4rem);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  background: rgba(255,255,255,0.012);
  text-align: center;
}
.platform-logos {
  display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; justify-content: center;
}
.platform-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.38rem 0.85rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 0.79rem; font-weight: 600; color: var(--text-2);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.platform-badge:hover { background: var(--card-h); border-color: var(--border-h); color: var(--text); }
.dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 800; color: #fff;
}
.dot-ks { background: #05ce78; }
.dot-ig { background: linear-gradient(135deg,#eb1478,#f97316); }
.dot-mf { background: #e83030; }
.dot-wz { background: #1a56db; }
.dot-fv { background: #7c3aed; }

.partner-certified {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.6rem,1.5vw,1.2rem); flex-wrap: wrap;
}
.partner-cert-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; color: var(--text-3);
  background: rgba(99,102,241,0.05);
  transition: border-color 0.2s, color 0.2s;
}
.partner-cert-badge:hover { border-color: rgba(99,102,241,0.5); color: var(--text-2); }
.partner-cert-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--g1); flex-shrink: 0;
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.78rem 1.9rem;
  background: var(--g1);
  color: #fff; font-size: 0.92rem; font-weight: 700;
  text-decoration: none; border-radius: 50px;
  box-shadow: 0 6px 28px rgba(99,102,241,0.38);
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(99,102,241,0.5); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.78rem 1.9rem;
  border: 1px solid var(--border-h);
  color: var(--text-2); font-size: 0.92rem; font-weight: 600;
  text-decoration: none; border-radius: 50px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  white-space: nowrap;
}
.btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.05); }

.btn-white {
  display: inline-flex; align-items: center;
  padding: 0.78rem 1.9rem;
  background: #fff; color: #07070f !important;
  font-size: 0.92rem; font-weight: 800;
  text-decoration: none; border-radius: 50px;
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap; flex-shrink: 0;
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(255,255,255,0.18); }

/* ── LAYOUT ── */
.inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.5rem,5vw,4rem); }
.section { padding: 5.5rem 0; }
.section-alt { background: #0b0b1c; }
.section-center { text-align: center; }
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 1rem;
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #a5b4fc; margin-bottom: 1.25rem;
}
.section-title {
  font-size: clamp(2rem,4.5vw,3.2rem);
  font-weight: 900; letter-spacing: -0.04em; line-height: 1.1;
  margin-bottom: 1rem;
}
.section-desc {
  font-size: 1rem; color: var(--text-2); max-width: 560px; line-height: 1.75;
}
.section-center .section-desc { margin: 0 auto; }

/* ── GRIDS ── */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit,minmax(290px,1fr)); gap: 1.25rem; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1rem; }

/* ── WHY CROWDFUNDING ── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}
.why-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem;
  text-align: left;
  position: relative;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.why-card:hover {
  border-color: rgba(99,102,241,0.35);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 60px rgba(99,102,241,0.06);
}
.why-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(99,102,241,0.05));
  color: #818cf8;
}
.why-card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 0.5rem; }
.why-card p { font-size: 0.875rem; color: var(--text-2); line-height: 1.7; }

/* ── CARDS ── */
.card {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem;
  position: relative;
  transition: background 0.24s, border-color 0.24s, transform 0.24s, box-shadow 0.24s;
}
.card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(99,102,241,0.35);
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(99,102,241,0.15), 0 20px 60px rgba(0,0,0,0.35), 0 0 60px rgba(99,102,241,0.06);
}
.card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.65rem; line-height: 1.3; }
.card p { font-size: 0.875rem; color: var(--text-2); line-height: 1.7; }

.card-icon {
  width: 48px; height: 48px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem; flex-shrink: 0;
}
.card-icon svg { flex-shrink: 0; }
.ic-1 { background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(99,102,241,0.06)); color: #818cf8; }
.ic-2 { background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(168,85,247,0.06)); color: #c084fc; }
.ic-3 { background: linear-gradient(135deg, rgba(249,115,22,0.2), rgba(249,115,22,0.06)); color: #fb923c; }
.ic-4 { background: linear-gradient(135deg, rgba(34,211,238,0.2), rgba(34,211,238,0.06)); color: #67e8f9; }
.ic-5 { background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(16,185,129,0.06)); color: #34d399; }
.ic-6 { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.06)); color: #fbbf24; }

.card-link {
  display: inline-block; margin-top: 1rem;
  color: var(--accent); font-size: 0.84rem; font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}
.card-link:hover { color: #a5b4fc; }
.card-link-group {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem;
}
.card-link-group .card-link { margin-top: 0; }

/* ── TIMELINE / PROCESS ── */
.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}
.timeline-item {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem;
  position: relative; overflow: hidden;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.timeline-item::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--g1); opacity: 0;
  transition: opacity 0.25s;
}
.timeline-item:hover {
  border-color: rgba(99,102,241,0.35);
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3), 0 0 48px rgba(99,102,241,0.06);
}
.timeline-item:hover::before { opacity: 1; }
.timeline-num {
  width: 42px; height: 42px;
  background: var(--g1);
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; color: #fff;
  margin-bottom: 1.25rem;
  box-shadow: 0 6px 20px rgba(99,102,241,0.3);
}
.timeline-duration {
  font-size: 0.7rem; font-weight: 700; color: #a5b4fc;
  letter-spacing: 0.05em; text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.timeline-content h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 0.5rem; }
.timeline-content p { font-size: 0.875rem; color: var(--text-2); line-height: 1.7; }

/* ── CASE CARDS ── */
.case-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color 0.24s, transform 0.24s, box-shadow 0.24s;
}
.case-card:hover {
  border-color: rgba(99,102,241,0.35);
  transform: translateY(-5px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.35), 0 0 60px rgba(99,102,241,0.08);
}
.case-img {
  height: 180px;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 1rem 1.25rem;
  position: relative; overflow: hidden;
  background-size: cover;
  background-position: center;
}
.case-img-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  position: relative; z-index: 1;
  background: rgba(0,0,0,0.3); padding: 0.22rem 0.55rem; border-radius: 5px;
  backdrop-filter: blur(8px);
}
.ci-1 { background: linear-gradient(135deg,rgba(79,70,229,.55) 0%,rgba(0,0,0,.45) 100%), url('https://images.unsplash.com/photo-1631451095765-2c91616fc9e6?w=600&h=280&fit=crop&q=80') center/cover; }
.ci-2 { background: linear-gradient(135deg,rgba(14,165,233,.55) 0%,rgba(0,0,0,.45) 100%), url('https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=600&h=280&fit=crop&q=80') center/cover; }
.ci-3 { background: linear-gradient(135deg,rgba(16,185,129,.55) 0%,rgba(0,0,0,.45) 100%), url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=280&fit=crop&q=80') center/cover; }
.case-body { padding: 1.5rem; }
.case-tag {
  display: inline-block; padding: 0.2rem 0.6rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
  background: rgba(99,102,241,0.12); color: #a5b4fc;
  border-radius: 50px; margin-bottom: 0.75rem;
}
.case-body h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.35; }
.case-body p { font-size: 0.85rem; color: var(--text-2); line-height: 1.65; margin-bottom: 1.2rem; }
.case-result { display: flex; border-top: 1px solid var(--border); padding-top: 1.2rem; }
.case-metric { flex: 1; text-align: center; }
.case-metric + .case-metric { border-left: 1px solid var(--border); }
.case-metric .num {
  font-size: 1.12rem; font-weight: 800;
  background: var(--g1);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.case-metric .label { font-size: 0.68rem; color: var(--text-3); margin-top: 0.2rem; }

/* ── LOCATION CARDS ── */
.location-card {
  background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(168,85,247,0.03));
  border: 1px solid rgba(99,102,241,0.15);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.25rem;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}
.location-card:hover { border-color: rgba(99,102,241,0.35); transform: translateY(-3px); }
.location-city {
  font-size: 1.4rem; font-weight: 900;
  background: var(--g1);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}
.location-detail {
  font-size: 0.82rem; color: var(--text-2); line-height: 1.5;
}

/* ── HIGHLIGHT BAR ── */
.highlight-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
  margin-top: 2rem;
  padding: 2rem 2.5rem;
  background: rgba(99,102,241,0.05);
  border: 1px solid rgba(99,102,241,0.18);
  border-radius: var(--r-lg);
  position: relative; overflow: hidden;
}
.highlight-bar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.5), transparent);
}
.highlight-item { flex: 1; text-align: center; min-width: 180px; padding: 0.5rem; }
.highlight-num {
  font-size: 2rem; font-weight: 900;
  background: linear-gradient(135deg, #fff, #a5b4fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1; margin-bottom: 0.4rem;
}
.highlight-label { font-size: 0.82rem; color: var(--text-2); line-height: 1.4; }
.highlight-label span { font-size: 0.72rem; color: var(--text-3); }
.highlight-divider {
  width: 1px; height: 50px; background: rgba(99,102,241,0.2);
  flex-shrink: 0;
}

/* ── TEAM ── */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem; margin-top: 2.5rem;
}
.team-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg); padding: 2rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0.7rem;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  position: relative; overflow: hidden;
}
.team-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--g1); opacity: 0;
  transition: opacity 0.25s;
}
.team-card:hover {
  border-color: rgba(99,102,241,0.35);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 0 48px rgba(99,102,241,0.06);
}
.team-card:hover::before { opacity: 1; }
.team-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center;
  justify-content: center; font-size: 1.4rem; font-weight: 900; color: #fff;
  flex-shrink: 0;
}
.ta-1 { background: var(--g1); }
.ta-2 { background: var(--g2); }
.ta-3 { background: var(--g3); }
.team-name { font-size: 1rem; font-weight: 800; }
.team-title { font-size: 0.75rem; color: var(--accent-2); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.team-bio { font-size: 0.84rem; color: var(--text-2); line-height: 1.65; }
.team-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: center; margin-top: 0.2rem; }
.team-tag {
  padding: 0.18rem 0.55rem; border-radius: 999px;
  background: rgba(99,102,241,0.1); color: var(--accent);
  font-size: 0.68rem; font-weight: 600;
}

/* ── TESTIMONIALS ── */
.testimonials-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem; margin-top: 2.5rem;
}
.testimonial {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  padding: 2rem;
  position: relative; overflow: hidden;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
  text-align: left;
}
.testimonial::before {
  content: '\201C';
  position: absolute; top: -0.5rem; left: 1.2rem;
  font-size: 6rem; font-weight: 900; line-height: 1;
  color: rgba(99,102,241,0.1);
  font-family: Georgia, serif; pointer-events: none;
}
.testimonial:hover {
  border-color: rgba(99,102,241,0.25);
  box-shadow: 0 12px 48px rgba(0,0,0,0.25), 0 0 48px rgba(99,102,241,0.05);
  transform: translateY(-3px);
}
.stars { font-size: 0.85rem; color: #f59e0b; margin-bottom: 1rem; letter-spacing: 2px; }
.testimonial blockquote {
  font-size: 0.9rem; color: rgba(255,255,255,0.68); line-height: 1.8;
  margin-bottom: 1.5rem; font-style: normal;
  position: relative; z-index: 1;
}
.testimonial blockquote strong { color: var(--text); font-weight: 700; }
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.av1 { background: var(--g1); }
.av2 { background: var(--g2); }
.av3 { background: var(--g3); }
.author-name { font-size: 0.85rem; font-weight: 700; }
.author-role { font-size: 0.74rem; color: var(--text-3); margin-top: 0.1rem; }

/* ── GUIDE CTA ── */
.guide-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  padding: 2rem 2.5rem;
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(168,85,247,0.05));
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: var(--r-lg);
  position: relative; overflow: hidden;
}
.guide-cta::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.5), transparent);
}
.guide-cta-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(99,102,241,0.12);
  display: flex; align-items: center; justify-content: center;
  color: #818cf8; flex-shrink: 0;
}
.guide-cta-text { flex: 1; min-width: 200px; }
.guide-cta-text h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.35rem; }
.guide-cta-text p { color: var(--text-2); font-size: 0.87rem; line-height: 1.6; }

/* ── FAQ ── */
.faq-list { list-style: none; max-width: 780px; margin: 2.5rem auto 0; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.07); }
.faq-item:first-child { border-top: 1px solid rgba(255,255,255,0.07); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.5rem; padding: 1.3rem 0;
  cursor: pointer; font-weight: 600; font-size: 0.95rem;
  color: var(--text); user-select: none;
  transition: color 0.2s;
}
.faq-q svg { flex-shrink: 0; transition: transform 0.28s, color 0.2s; color: var(--text-3); }
.faq-item.open .faq-q svg { transform: rotate(180deg); color: var(--accent); }
.faq-item.open .faq-q { color: #a5b4fc; }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease, padding 0.2s;
  color: rgba(255,255,255,0.55); font-size: 0.88rem; line-height: 1.8;
}
.faq-item.open .faq-a { max-height: 500px; padding-bottom: 1.3rem; }

/* ── CTA SECTION ── */
.cta-section {
  padding: 8rem clamp(1.5rem,5vw,4rem);
  text-align: center;
  position: relative; overflow: hidden;
  background: #07070f;
}
.cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(99,102,241,0.12) 0%, rgba(168,85,247,0.05) 40%, transparent 70%);
  pointer-events: none;
}
.cta-section::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 20%, transparent 70%);
}
.cta-section .section-eyebrow,
.cta-section .section-title,
.cta-section .section-desc { position: relative; z-index: 1; }
.cta-section .section-desc { margin: 0 auto 2rem; }
.cta-note { font-size: 0.75rem; color: var(--text-3); position: relative; z-index: 1; }

/* ── FORM ── */
.cta-form-real {
  display: flex; flex-direction: column; gap: 0.7rem;
  max-width: 460px; margin: 0 auto 1.5rem;
  position: relative; z-index: 1;
}
.cta-input-row { display: flex; gap: 0.7rem; }
.cta-input-real {
  padding: 0.75rem 1.3rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-h);
  border-radius: 12px;
  color: var(--text); font-size: 0.9rem; font-family: inherit;
  width: 100%; outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.cta-input-real::placeholder { color: var(--text-3); }
.cta-input-real:focus { border-color: rgba(99,102,241,0.6); background: rgba(99,102,241,0.05); }
.cta-select {
  padding: 0.75rem 1.3rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-h);
  border-radius: 12px;
  color: var(--text-2); font-size: 0.88rem; font-family: inherit;
  width: 100%; outline: none; cursor: pointer;
  transition: border-color 0.2s;
}
.cta-select:focus { border-color: rgba(99,102,241,0.6); }
.cta-select option { background: var(--bg-3); color: var(--text); }
.form-success {
  display: none; padding: 1rem 1.5rem;
  background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25);
  border-radius: 12px; color: #34d399; font-size: 0.9rem; text-align: center;
  position: relative; z-index: 1;
}

/* ── CONTACT WIDGET ── */
.contact-widget {
  display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center;
  margin-top: 1.5rem; position: relative; z-index: 1;
}
.contact-chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 1.15rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-h);
  border-radius: 50px;
  font-size: 0.85rem; font-weight: 600; color: var(--text-2);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.contact-chip:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); color: var(--text); }
.chip-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0;
  box-shadow: 0 0 6px #22c55e;
}

/* ── FOOTER ── */
footer {
  background: #0a0a19;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 4.5rem clamp(1.5rem,5vw,4rem) 2rem;
}
.footer-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;
  margin-bottom: 2.5rem;
}
.footer-brand .logo { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.9rem; }
.footer-brand .logo span {
  background: var(--g1);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.footer-brand p { font-size: 0.84rem; color: var(--text-2); line-height: 1.7; max-width: 250px; }
.footer-col h4 {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 1.15rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a { font-size: 0.84rem; color: var(--text-2); text-decoration: none; transition: color 0.15s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  max-width: 1200px; margin: 0 auto;
  padding-top: 1.75rem; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; color: var(--text-3);
}

/* ── ANIMATIONS ── */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: none; }

@keyframes orb2 {
  0%,100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15) translateY(-15px); opacity: 0.5; }
}

/* ── FLOATING CTA ── */
.float-cta {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 300;
  display: flex; align-items: center;
  padding: 0.75rem 1.5rem;
  background: var(--g1);
  color: #fff; font-weight: 700; font-size: 0.86rem;
  text-decoration: none; border-radius: 50px;
  box-shadow: 0 8px 32px rgba(99,102,241,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.2s, box-shadow 0.2s;
}
.float-cta.visible { opacity: 1; pointer-events: all; }
.float-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 44px rgba(99,102,241,0.6); }

/* ── COUNTER ── */
.count-num { display: inline-block; }

/* ── AI WIDGET ── */
.ai-fab {
  position: fixed;
  bottom: 5.5rem; right: 1.5rem;
  z-index: 199;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border: none; border-radius: 50px;
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(99,102,241,0.4), 0 0 0 1px rgba(255,255,255,0.08) inset;
  transition: transform 0.2s, box-shadow 0.2s;
  font-family: inherit;
  white-space: nowrap;
}
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(99,102,241,0.55); }
.ai-fab svg { flex-shrink: 0; }

.ai-panel {
  position: fixed;
  bottom: 9rem; right: 1.5rem;
  z-index: 299;
  width: 370px;
  max-height: 76vh;
  background: #0e0e1f;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 18px;
  box-shadow: 0 36px 90px rgba(0,0,0,0.8), 0 0 0 1px rgba(99,102,241,0.06);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transform: translateY(12px) scale(0.97);
  transition: opacity 0.22s ease, transform 0.22s ease;
  overflow: hidden;
}
.ai-panel.open { opacity: 1; pointer-events: all; transform: none; }

.ai-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.15rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(99,102,241,0.05);
}
.ai-panel-head h4 { font-size: 0.9rem; font-weight: 700; color: var(--text); margin: 0; }
.ai-panel-close {
  background: none; border: none; cursor: pointer; color: var(--text-2);
  padding: 0.2rem; font-size: 1rem; line-height: 1;
  transition: color 0.15s;
}
.ai-panel-close:hover { color: var(--text); }

.ai-panel-body {
  overflow-y: auto; padding: 1.1rem;
  flex: 1; min-height: 0;
}
.ai-panel-body::-webkit-scrollbar { width: 3px; }
.ai-panel-body::-webkit-scrollbar-track { background: transparent; }
.ai-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.ai-field { margin-bottom: 0.8rem; }
.ai-field label { display: block; font-size: 0.76rem; color: var(--text-2); margin-bottom: 0.3rem; font-weight: 500; }
.ai-field input, .ai-field textarea, .ai-field select {
  width: 100%; padding: 0.55rem 0.75rem;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 9px; color: var(--text);
  font-size: 0.82rem; font-family: inherit;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.ai-field input:focus, .ai-field textarea:focus, .ai-field select:focus {
  outline: none; border-color: rgba(99,102,241,0.45);
}
.ai-field textarea { resize: vertical; min-height: 65px; }
.ai-field select option { background: #1a1a2e; }

.ai-submit-btn {
  width: 100%; padding: 0.7rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border: none; border-radius: 9px;
  font-size: 0.88rem; font-weight: 700; font-family: inherit;
  cursor: pointer; margin-top: 0.4rem;
  transition: opacity 0.2s, transform 0.2s;
}
.ai-submit-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.ai-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.ai-loading { text-align: center; padding: 2rem 1rem; }
.ai-spinner {
  width: 32px; height: 32px; margin: 0 auto 1rem;
  border: 3px solid rgba(99,102,241,0.18);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ai-loading p { font-size: 0.83rem; color: var(--text-2); }

.ai-score-wrap { text-align: center; padding: 1rem 0 0.6rem; }
.ai-score-circle {
  width: 84px; height: 84px; margin: 0 auto 0.7rem;
  border-radius: 50%;
  background: conic-gradient(var(--score-color, #6366f1) var(--score-deg, 0deg), rgba(255,255,255,0.05) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ai-score-circle::before {
  content: ''; position: absolute;
  width: 66px; height: 66px; border-radius: 50%;
  background: #0e0e1f;
}
.ai-score-num {
  font-size: 1.5rem; font-weight: 900;
  color: var(--text); position: relative; z-index: 1;
}
.ai-verdict {
  display: inline-block; padding: 0.25rem 0.9rem;
  border-radius: 18px; font-size: 0.8rem; font-weight: 700;
  margin-bottom: 0.8rem;
}
.ai-verdict-great { background: rgba(16,185,129,0.12); color: #34d399; }
.ai-verdict-good { background: rgba(99,102,241,0.12); color: #a5b4fc; }
.ai-verdict-ok { background: rgba(245,158,11,0.12); color: #fbbf24; }
.ai-verdict-no { background: rgba(239,68,68,0.1); color: #f87171; }

.ai-result-block { margin-bottom: 0.8rem; }
.ai-result-block-title {
  font-size: 0.73rem; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}
.ai-result-highlight { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.ai-result-block ul { list-style: none; padding: 0; margin: 0; }
.ai-result-block ul li {
  font-size: 0.8rem; color: var(--text-2); padding: 0.2rem 0;
  padding-left: 1rem; position: relative;
}
.ai-result-block ul li::before {
  content: '\2022'; position: absolute; left: 0;
  color: rgba(99,102,241,0.6);
}
.ai-result-block p { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; margin: 0; }
.ai-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 0.7rem 0; }
.ai-cta-link {
  display: block; text-align: center;
  padding: 0.65rem; margin-top: 0.7rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border-radius: 9px;
  font-size: 0.85rem; font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s;
}
.ai-cta-link:hover { opacity: 0.9; }
.ai-reset-btn {
  background: none; border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-2); border-radius: 7px;
  padding: 0.4rem 0.9rem; font-size: 0.78rem;
  cursor: pointer; margin-top: 0.4rem; font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.ai-reset-btn:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }
.ai-error {
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.18);
  border-radius: 9px; padding: 0.7rem 0.9rem;
  font-size: 0.8rem; color: #f87171; margin-top: 0.7rem;
}

/* ── SUBPAGE STYLES (preserved) ── */
.page-hero {
  padding: 5.5rem clamp(1.5rem,5vw,4rem) 5rem;
  text-align: center;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% -10%, rgba(99,102,241,0.15), transparent 70%);
  pointer-events: none;
}
.page-hero .hero-eyebrow { position: relative; z-index: 1; }
.page-hero h1 {
  font-size: clamp(2.6rem,6.5vw,5.5rem);
  font-weight: 900; letter-spacing: -0.04em; line-height: 1.08;
  margin-bottom: 1.25rem; position: relative; z-index: 1;
}
.page-hero h1 em {
  font-style: normal; background: var(--g1);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.page-hero p {
  font-size: 1.05rem; color: var(--text-2); max-width: 600px;
  margin: 0 auto; line-height: 1.75; position: relative; z-index: 1;
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.col-visual {
  border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; border: 1px solid var(--border);
}
.cv1 { background: linear-gradient(135deg,rgba(99,102,241,.18),rgba(168,85,247,.18)); }
.cv2 { background: linear-gradient(135deg,rgba(34,211,238,.18),rgba(99,102,241,.18)); }
.cv3 { background: linear-gradient(135deg,rgba(249,115,22,.18),rgba(245,158,11,.18)); }
.cv4 { background: linear-gradient(135deg,rgba(16,185,129,.18),rgba(34,211,238,.18)); }
.cv5 { background: linear-gradient(135deg,rgba(245,158,11,.18),rgba(249,115,22,.18)); }
.cv6 { background: linear-gradient(135deg,rgba(168,85,247,.18),rgba(99,102,241,.18)); }

.cta-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  background: var(--g1);
  border-radius: var(--r-lg); padding: 3rem 3.5rem; flex-wrap: wrap;
}
.cta-banner h3 { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.025em; color: #fff; }
.cta-banner p { color: rgba(255,255,255,0.72); margin-top: 0.5rem; font-size: 0.975rem; }

.results-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1.25rem; margin-top: 3rem;
}
.result-card {
  background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(168,85,247,0.03));
  border: 1px solid rgba(99,102,241,0.15);
  border-radius: var(--r-lg); padding: 2.5rem 1.5rem;
  text-align: center; position: relative; overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.result-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.4), transparent);
}
.result-card:hover { border-color: rgba(99,102,241,0.35); transform: translateY(-3px); }
.result-num {
  font-size: clamp(2.2rem,4vw,3.2rem);
  font-weight: 900; letter-spacing: -0.04em;
  background: linear-gradient(135deg, #fff, #a5b4fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1;
}
.result-label { font-size: 0.82rem; color: var(--text-2); margin-top: 0.7rem; line-height: 1.45; }

.compare-table-wrap { border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.compare-table th, .compare-table td { padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.compare-table thead tr { background: rgba(99,102,241,0.1); }
.compare-table thead th { font-weight: 700; text-align: left; color: var(--text); font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; }
.compare-table thead th:last-child { background: rgba(99,102,241,0.2); color: #a5b4fc; }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.compare-table tbody td { color: rgba(255,255,255,0.65); }
.compare-table tbody td:first-child { font-weight: 600; color: var(--text); }
.compare-table tbody td:last-child { color: #a5b4fc; font-weight: 600; }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tag { padding: 0.28rem 0.75rem; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 50px; font-size: 0.78rem; color: var(--text-2); }
.tag-accent { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.25); color: #a5b4fc; }

.related-services { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }
.related-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.9rem; background: var(--card); border: 1px solid var(--border);
  border-radius: 50px; font-size: 0.82rem; color: var(--text-2);
  text-decoration: none; transition: all 0.2s;
}
.related-chip:hover { background: var(--card-h); border-color: var(--border-h); color: var(--text); }

.tag-filter { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2.5rem; justify-content: center; }
.tag-btn {
  padding: 0.45rem 1.2rem; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-2);
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all 0.2s;
}
.tag-btn:hover { border-color: rgba(99,102,241,0.5); color: var(--text); }
.tag-btn.active { background: var(--g1); border-color: transparent; color: #fff; }
.case-section { transition: opacity 0.3s; }
.case-section.hidden { display: none; }

.article-body { color: var(--text-2); }
.article-body h2 { font-size: 1.65rem; font-weight: 800; color: var(--text); margin: 3rem 0 1rem; letter-spacing: -0.025em; line-height: 1.2; }
.article-body h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 2rem 0 0.75rem; }
.article-body p { margin-bottom: 1rem; line-height: 1.8; font-size: 0.95rem; }
.article-body ul, .article-body ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.article-body li { line-height: 1.75; font-size: 0.95rem; margin-bottom: 0.35rem; }
.article-body strong { color: var(--text); font-weight: 700; }
.article-tip {
  background: rgba(99,102,241,0.08); border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0; padding: 1rem 1.25rem; margin: 1.75rem 0;
  font-size: 0.9rem; line-height: 1.75;
}
.toc { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 1.5rem 1.75rem; margin-bottom: 2.5rem; }
.toc h4 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1rem; }
.toc ol { padding-left: 1.25rem; }
.toc li { font-size: 0.875rem; margin-bottom: 0.55rem; }
.toc a { color: var(--text-2); text-decoration: none; transition: color 0.15s; }
.toc a:hover { color: var(--accent); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .two-col { grid-template-columns: 1fr; gap: 2.5rem; }
  .col-visual { max-width: 480px; }
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .highlight-divider { display: none; }
  .highlight-bar { flex-direction: column; gap: 1.5rem; }
}
@media (max-width: 700px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .cta-banner { padding: 2rem; flex-direction: column; align-items: flex-start; }
  .hero-stats { gap: 1.5rem; }
  .section { padding: 4rem 0; }
  .hero h1 { font-size: 2.6rem; }
  .hero { min-height: 80vh; }
  .page-hero h1 { font-size: 2.4rem; }
  .cta-input-row { flex-direction: column; }
  .guide-cta { flex-direction: column; align-items: flex-start; }
  .guide-cta-icon { display: none; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .trust-logos { flex-wrap: wrap; gap: 1rem; }
  .hero-stats { flex-direction: column; gap: 1rem; padding-top: 2rem; margin-top: 3rem; }
}
@media (max-width: 460px) {
  .ai-panel { width: calc(100vw - 2rem); right: 1rem; bottom: 8.5rem; }
  .ai-fab { bottom: 5rem; right: 1rem; }
}

/* ============================================================
   NEW COMPONENTS v3 — APPEND ONLY
   ============================================================ */

/* 1. Aurora Hero background animation upgrade */
@keyframes aurora-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(60px, -40px) scale(1.15); }
  66%  { transform: translate(-40px, 30px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes aurora-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-80px, 50px) scale(1.2); }
  66%  { transform: translate(50px, -30px) scale(0.88); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes aurora-drift-3 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(30px, 60px) scale(1.1) rotate(180deg); }
  100% { transform: translate(0, 0) scale(1) rotate(360deg); }
}

.hero { position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(99,102,241,0.28) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 80% 60%, rgba(168,85,247,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 55% 80%, rgba(34,211,238,0.14) 0%, transparent 65%);
  animation: aurora-drift-1 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 50% 40% at 70% 20%, rgba(249,115,22,0.1) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 30% 70%, rgba(99,102,241,0.18) 0%, transparent 70%);
  animation: aurora-drift-2 22s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

/* 2. Press strip — auto-scroll marquee */
.press-strip {
  overflow: hidden;
  padding: 2.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.018);
}
.press-strip-label {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.4rem;
}
.press-strip-track-wrap { overflow: hidden; width: 100%; }
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.press-strip-track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}
.press-strip-track:hover { animation-play-state: paused; }
.press-name {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.2s;
  padding: 0 0.5rem;
}
.press-name:hover { color: var(--text); }
.press-sep { color: var(--text-3); font-size: 1rem; align-self: center; }

/* 3. Alternating feature rows */
.feature-rows { display: flex; flex-direction: column; gap: 5rem; margin-top: 3.5rem; }
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }
.feature-col { display: flex; flex-direction: column; gap: 2rem; }
.feature-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem 2.25rem;
  transition: border-color 0.25s, transform 0.25s;
}
.feature-item:hover { border-color: rgba(99,102,241,0.35); transform: translateY(-2px); }
.feature-item-head {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;
}
.feature-item-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.feature-item h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.feature-item p { color: var(--text-2); font-size: 0.9rem; line-height: 1.75; }

/* 4. Checklist */
.check-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.55rem; }
.check-list li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.88rem; color: var(--text-2); line-height: 1.6;
}
.check-list li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 800;
  font-size: 0.85rem;
  margin-top: 0.05rem;
  flex-shrink: 0;
  width: 1.1rem;
}

/* 5. Pricing grid / cards */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.pricing-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem 2.25rem 2.5rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  position: relative;
}
.pricing-card:hover { border-color: rgba(99,102,241,0.35); transform: translateY(-3px); }
.pricing-card.featured {
  border-color: rgba(99,102,241,0.5);
  background: rgba(99,102,241,0.07);
  box-shadow: 0 0 40px rgba(99,102,241,0.15);
}
.pricing-card.featured::before {
  content: '最受欢迎';
  position: absolute;
  top: -1px; right: 1.5rem;
  background: var(--g1);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.75rem;
  border-radius: 0 0 8px 8px;
}
.pricing-name { font-size: 1rem; font-weight: 700; color: var(--text-2); }
.pricing-price { font-size: 2.2rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.pricing-price span { font-size: 1rem; font-weight: 500; color: var(--text-2); }
.pricing-desc { font-size: 0.85rem; color: var(--text-2); line-height: 1.65; }
.pricing-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: 700; font-size: 0.88rem;
  text-decoration: none;
  margin-top: auto;
  transition: opacity 0.2s;
}
.pricing-cta-outline { border: 1px solid var(--border); color: var(--text); }
.pricing-cta-outline:hover { border-color: rgba(99,102,241,0.5); }
.pricing-cta-filled { background: var(--g1); color: #fff; border: none; }
.pricing-cta-filled:hover { opacity: 0.88; }

/* 6. Platform compare grid */
.platform-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.platform-compare-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem 2rem;
  transition: border-color 0.25s, transform 0.25s;
  cursor: default;
}
.platform-compare-card:hover { border-color: rgba(99,102,241,0.4); transform: translateY(-3px); }
.pc-header {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem;
}
.pc-dot {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1rem; color: #fff; flex-shrink: 0;
}
.pc-name { font-size: 1.05rem; font-weight: 800; }
.pc-tagline { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; margin-bottom: 1rem; }
.pc-categories { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.pc-cat {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--text-2);
}
.pc-cat::before { content: '▸'; color: var(--accent); font-size: 0.7rem; flex-shrink: 0; }
.pc-stat { font-size: 0.8rem; color: var(--text-3); padding-top: 0.75rem; border-top: 1px solid var(--border); }
.pc-stat strong { color: #a5b4fc; }
.pc-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: 1rem; font-size: 0.8rem; color: var(--accent);
  text-decoration: none; font-weight: 600;
  transition: gap 0.2s;
}
.pc-link:hover { gap: 0.55rem; }

/* 7. Highlight box */
.highlight-box {
  background: rgba(99,102,241,0.07);
  border: 1px solid rgba(99,102,241,0.25);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.25rem 1.75rem;
  margin: 1.5rem 0;
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.75;
}
.highlight-box strong { color: var(--text); }

/* 8. Versus table enhanced */
.versus-table-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 2.5rem;
}
.versus-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.versus-table th, .versus-table td {
  padding: 0.95rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: left;
}
.versus-table thead tr { background: rgba(99,102,241,0.1); }
.versus-table thead th {
  font-weight: 700; color: var(--text);
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.versus-table thead th.col-us {
  background: rgba(99,102,241,0.22);
  color: #a5b4fc;
}
.versus-table tbody tr:last-child td { border-bottom: none; }
.versus-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.versus-table tbody td { color: var(--text-2); }
.versus-table tbody td:first-child { font-weight: 600; color: var(--text); }
.versus-table tbody td.col-us { color: #a5b4fc; font-weight: 700; }
.versus-table .v-good { color: #10b981; }
.versus-table .v-bad  { color: #f87171; }

/* 9. Page hero enriched */
.page-hero {
  min-height: 52vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 4rem) 1.5rem 4rem;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 55% 45% at 30% 40%, rgba(99,102,241,0.2) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 70% 55%, rgba(168,85,247,0.15) 0%, transparent 65%);
  animation: aurora-drift-1 20s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { margin-bottom: 1.1rem; }
.page-hero .hero-sub { margin-top: 0.75rem; margin-bottom: 1.75rem; max-width: 640px; }

/* 10. Mobile hamburger & menu — supplement for sub-pages */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 42px; height: 42px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer;
  transition: background 0.2s;
}
.hamburger:hover { background: rgba(255,255,255,0.1); }
.hamburger span {
  display: block; width: 20px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: all 0.3s ease;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 998;
  background: rgba(7,7,15,0.97);
  backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 1.5rem) 1.5rem 2rem;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-inner { display: flex; flex-direction: column; gap: 2rem; height: 100%; }
.mobile-menu-group { display: flex; flex-direction: column; gap: 0.3rem; }
.mobile-menu-label {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 0.5rem;
}
.mobile-menu-group a {
  display: block; padding: 0.6rem 0;
  color: var(--text-2); text-decoration: none;
  font-size: 1rem; font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.2s;
}
.mobile-menu-group a:hover { color: var(--text); }
.mobile-menu-cta {
  display: block; margin-top: auto;
  padding: 1rem; text-align: center;
  background: var(--g1); color: #fff !important;
  border-radius: var(--r); font-weight: 700;
  text-decoration: none !important;
  font-size: 1rem;
}

/* Media banner in hero */
.hero-media-bar {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 2rem; flex-wrap: wrap; justify-content: center;
}
.hero-media-label {
  font-size: 0.72rem; color: var(--text-3);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.hero-media-names {
  display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center;
}
.hero-media-name {
  font-size: 0.82rem; font-weight: 800;
  color: var(--text-3); letter-spacing: -0.01em;
  transition: color 0.2s;
}
.hero-media-name:hover { color: var(--text-2); }

/* Testimonial big quote */
.testimonial { position: relative; }
.testimonial blockquote::before {
  content: '"';
  position: absolute;
  top: -0.8rem; left: -0.5rem;
  font-size: 4rem; line-height: 1;
  color: rgba(99,102,241,0.2);
  font-weight: 900;
  pointer-events: none;
}
.avatar-color-1 { background: linear-gradient(135deg,#6366f1,#a855f7); }
.avatar-color-2 { background: linear-gradient(135deg,#f97316,#f59e0b); }
.avatar-color-3 { background: linear-gradient(135deg,#10b981,#22d3ee); }

/* Case card tags and extra metrics */
.case-tag-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.case-cat-tag {
  padding: 0.2rem 0.65rem; border-radius: 50px;
  font-size: 0.72rem; font-weight: 700;
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.25);
  color: #a5b4fc;
}
.case-metrics-row {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  padding-top: 0.75rem; margin-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.case-metric-item { display: flex; flex-direction: column; gap: 0.15rem; }
.case-metric-item .num { font-size: 1.15rem; font-weight: 900; letter-spacing: -0.03em; color: var(--text); }
.case-metric-item .label { font-size: 0.72rem; color: var(--text-3); }

/* Step connector for timeline upgrade */
.timeline-step-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(99,102,241,0.12);
  border: 2px solid rgba(99,102,241,0.3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}
.timeline-step-icon svg { color: #a5b4fc; }

/* Responsive for new components */
@media (max-width: 860px) {
  .feature-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .feature-row.reverse { direction: ltr; }
  .platform-compare-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .platform-compare-grid { grid-template-columns: 1fr; }
  .press-name { font-size: 0.95rem; }
  .versus-table th, .versus-table td { padding: 0.7rem 0.85rem; font-size: 0.8rem; }
  .hero-media-bar { gap: 0.5rem; }
}

/* ============================================================
   ADDITIONAL UTILITIES — td-accent, td-muted, grid-4 platform fix
   ============================================================ */
.td-accent { color: #a5b4fc !important; font-weight: 600 !important; }
.td-muted  { color: rgba(255,255,255,0.35) !important; }

/* Platform compare cards in grid-4 */
.grid-4 .card .check-list { margin-top: 0.75rem; }
.grid-4 .card .check-list li { font-size: 0.83rem; }

/* Press strip sep */
.press-sep { color: var(--text-3); font-size: 0.9rem; align-self: center; opacity: 0.5; }

/* Section spacing improvement */
#platforms { padding-top: 3.5rem; padding-bottom: 2rem; }

/* ============================================================
   BRAND JOURNEY CHANNELS SECTION
   ============================================================ */
.journey-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.journey-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  text-align: left;
  transition: border-color 0.25s, transform 0.25s;
  position: relative;
}
.journey-card:hover {
  border-color: rgba(99,102,241,0.5);
  transform: translateY(-4px);
}
.journey-num {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.75rem;
  opacity: 0.7;
}
.journey-icon {
  width: 44px; height: 44px;
  background: rgba(99,102,241,0.1);
  border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: #a5b4fc;
}
.journey-card h3 {
  font-size: 1.05rem; font-weight: 700;
  margin: 0 0 0.6rem;
}
.journey-card p {
  font-size: 0.845rem; line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 1rem;
}
.journey-card .check-list { margin-top: 0.5rem; }
.journey-card .check-list li { font-size: 0.8rem; }
@media (max-width: 960px) {
  .journey-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .journey-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CASE FILTER TABS
   ============================================================ */
.case-tabs {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2rem 0 2.5rem;
}
.case-tab {
  padding: 0.45rem 1.2rem;
  border-radius: 2rem;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 0.845rem;
  font-weight: 500;
  font-family: inherit;
  transition: all 0.2s;
}
.case-tab:hover {
  border-color: rgba(99,102,241,0.5);
  color: var(--text);
}
.case-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.case-card.hidden { display: none; }

/* Case tag color variants */
.case-tag-ks    { background: rgba(0,184,109,0.12); color: #34d399; }
.case-tag-video { background: rgba(234,88,12,0.12);  color: #fb923c; }
.case-tag-store { background: rgba(139,92,246,0.12); color: #c084fc; }
.case-tag-ads   { background: rgba(59,130,246,0.12); color: #60a5fa; }

/* ============================================================
   CHANNEL COVERAGE STRIP (replaces old .platforms)
   ============================================================ */
.channel-strip {
  background: rgba(255,255,255,0.03);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2rem 2rem 1.5rem;
}
.channel-strip-inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto 1.5rem;
}
.channel-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0 2.5rem;
}
.channel-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.8;
}
.channel-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.ch-item {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-2);
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.4rem;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
a.ch-item:hover {
  border-color: rgba(99,102,241,0.5);
  color: var(--text);
}
.channel-divider {
  width: 1px;
  height: 60px;
  background: var(--border);
  align-self: center;
  flex-shrink: 0;
}
.channel-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  max-width: 900px;
  margin: 0 auto;
}
.cert-badge {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.cert-badge .✦ { color: var(--accent); }
@media (max-width: 680px) {
  .channel-divider { display: none; }
  .channel-group { padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border); width: 100%; }
  .channel-group:last-child { border-bottom: none; }
}

/* ============================================================
   TRUST BAR (replaces old channel strip)
   ============================================================ */
.trust-bar {
  background: rgba(99,102,241,0.05);
  border-top: 1px solid rgba(99,102,241,0.15);
  border-bottom: 1px solid rgba(99,102,241,0.15);
  padding: 0.9rem 1.5rem;
}
.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}
.trust-cert {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #a5b4fc;
  white-space: nowrap;
}
.trust-cert svg {
  color: #6ee7b7;
  flex-shrink: 0;
}
.trust-bar .trust-sep {
  color: rgba(255,255,255,0.2);
  font-size: 0.8rem;
}
@media (max-width: 600px) {
  .trust-bar .trust-sep { display: none; }
  .trust-cert { font-size: 0.74rem; }
}

/* ============================================================
   WHY US SECTION
   ============================================================ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
.why-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  text-align: left;
  transition: border-color 0.25s, transform 0.25s;
}
.why-card:hover {
  border-color: rgba(99,102,241,0.45);
  transform: translateY(-3px);
}
.why-icon {
  width: 42px; height: 42px;
  background: rgba(99,102,241,0.1);
  border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: #a5b4fc;
}
.why-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; }
.why-card p  { font-size: 0.845rem; line-height: 1.65; color: var(--text-2); margin: 0; }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .why-grid { grid-template-columns: 1fr; } }

/* CTA trust row */
.cta-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
  margin-top: 1rem;
}
.cta-trust-item {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

/* Testimonial strong numbers */
.testimonial blockquote strong {
  color: #a5b4fc;
  font-weight: 700;
}

/* ============================================================
   CASE IMAGE REAL PHOTOS (ci-4 to ci-8)
   ============================================================ */
.ci-4 { background: linear-gradient(135deg,rgba(245,158,11,.5) 0%,rgba(0,0,0,.45) 100%), url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=600&h=280&fit=crop&q=80') center/cover; }
.ci-5 { background: linear-gradient(135deg,rgba(99,102,241,.55) 0%,rgba(0,0,0,.45) 100%), url('https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&h=280&fit=crop&q=80') center/cover; }
.ci-6 { background: linear-gradient(135deg,rgba(168,85,247,.55) 0%,rgba(0,0,0,.45) 100%), url('https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=600&h=280&fit=crop&q=80') center/cover; }
.ci-7 { background: linear-gradient(135deg,rgba(59,130,246,.55) 0%,rgba(0,0,0,.45) 100%), url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=280&fit=crop&q=80') center/cover; }
.ci-8 { background: linear-gradient(135deg,rgba(16,185,129,.55) 0%,rgba(0,0,0,.45) 100%), url('https://images.unsplash.com/photo-1526772662643-6e5e8e44d9cc?w=600&h=280&fit=crop&q=80') center/cover; }

/* ============================================================
   SERVICE CARD VISUAL HEADERS
   ============================================================ */
.card-visual {
  height: 148px;
  border-radius: 0.65rem;
  margin-bottom: 1.25rem;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 0.75rem;
}
.card-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 60%);
  pointer-events: none;
}
.card-visual-label {
  position: relative;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  padding: 0.25rem 0.6rem;
  border-radius: 0.35rem;
}

/* ============================================================
   WHY US — SPLIT LAYOUT
   ============================================================ */
.why-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 3rem;
}
.why-split-img {
  border-radius: 1.25rem;
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
}
.why-split-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 1.25rem;
  filter: brightness(0.85) saturate(1.1);
}
.why-split-img::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  border: 1px solid rgba(99,102,241,0.25);
  background: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.why-split-points { display: flex; flex-direction: column; gap: 1.5rem; }
.why-point { display: flex; gap: 1rem; align-items: flex-start; }
.why-point-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 0.6rem;
  display: flex; align-items: center; justify-content: center;
  color: #a5b4fc;
}
.why-point-text h4 { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.3rem; }
.why-point-text p  { font-size: 0.83rem; line-height: 1.6; color: var(--text-2); margin: 0; }
@media (max-width: 800px) {
  .why-split { grid-template-columns: 1fr; }
  .why-split-img { aspect-ratio: 16/7; }
}

/* Guide banner — visual enhancement */
.guide-cta { position: relative; overflow: visible; }
.guide-pdf-visual {
  width: 90px; height: 110px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-shrink: 0;
  box-shadow: 0 8px 32px rgba(99,102,241,0.35);
  position: relative;
}
.guide-pdf-visual::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 16px 16px 0;
  border-color: transparent rgba(0,0,0,0.25) transparent transparent;
}
.guide-pdf-visual svg { color: rgba(255,255,255,0.9); }
.guide-pdf-visual span {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7); text-transform: uppercase;
}

/* ============================================================
   PREMIUM UPGRADE v3 — 简洁高级
   ============================================================ */

/* 更大呼吸空间 */
.section { padding: 7rem 0; }

/* Section eyebrow 升级：去背景，用渐变文字 + 横线 */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0 0;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 0.68rem !important; font-weight: 700 !important;
  letter-spacing: 0.15em !important; text-transform: uppercase !important;
  color: transparent !important;
  background: var(--g1) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  margin-bottom: 1rem !important;
}
.section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1.5px;
  background: var(--g1);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Section title 更大更强 */
.section-title {
  font-size: clamp(2.2rem, 4.8vw, 3.6rem) !important;
  letter-spacing: -0.045em !important;
  line-height: 1.08 !important;
  margin-bottom: 1.25rem !important;
}

/* Section desc 更细 */
.section-desc {
  font-size: 0.95rem !important;
  color: rgba(255,255,255,0.5) !important;
  max-width: 520px;
  line-height: 1.8 !important;
}

/* Hero sub 更细气 */
.hero-sub {
  color: rgba(255,255,255,0.52) !important;
  line-height: 1.9 !important;
  max-width: 480px !important;
}

/* Journey cards 升级 */
.journey-grid {
  margin-top: 3.5rem !important;
  gap: 1rem !important;
}
.journey-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  padding: 2.25rem 2rem !important;
  position: relative;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s !important;
}
.journey-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1.5px;
  background: var(--g1); opacity: 0;
  transition: opacity 0.3s;
}
.journey-card:hover {
  border-color: rgba(99,102,241,0.3) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 40px rgba(99,102,241,0.06) !important;
}
.journey-card:hover::after { opacity: 1; }
.journey-num {
  font-size: 0.62rem !important; font-weight: 800 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: rgba(99,102,241,0.6) !important; margin-bottom: 1rem !important;
  line-height: 1 !important;
}
.journey-icon {
  width: 44px !important; height: 44px !important;
  border-radius: 12px !important; margin-bottom: 1.25rem !important;
}
.journey-card h3 { font-size: 1.05rem !important; font-weight: 800 !important; margin-bottom: 0.6rem !important; }
.journey-card p { font-size: 0.855rem !important; color: rgba(255,255,255,0.5) !important; line-height: 1.75 !important; margin-bottom: 1rem !important; }

/* Journey link */
.journey-link {
  font-size: 0.78rem; font-weight: 700;
  color: rgba(99,102,241,0.7);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.journey-link:hover { color: #a5b4fc; }

/* Services cards - tighter */
.card {
  border: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.035) !important;
}
.card:hover {
  border-color: rgba(99,102,241,0.28) !important;
  background: rgba(255,255,255,0.065) !important;
}
.card h3 { font-size: 0.98rem !important; font-weight: 800 !important; margin-bottom: 0.6rem !important; }
.card p { font-size: 0.845rem !important; color: rgba(255,255,255,0.48) !important; line-height: 1.72 !important; }

/* Case cards tighter */
.case-card { border-color: rgba(255,255,255,0.06) !important; background: rgba(255,255,255,0.03) !important; }
.case-body { padding: 1.4rem 1.5rem !important; }
.case-body h3 { font-size: 0.96rem !important; }
.case-body p { font-size: 0.83rem !important; color: rgba(255,255,255,0.48) !important; margin-bottom: 1rem !important; }
.case-metric .num { font-size: 1.06rem !important; }

/* Testimonials tighter */
.testimonial blockquote { font-size: 0.875rem !important; color: rgba(255,255,255,0.58) !important; line-height: 1.85 !important; }
.testimonial blockquote strong { color: #ffffff !important; }

/* Compare table cleaner */
.compare-table { font-size: 0.86rem !important; }
.compare-table thead th { font-size: 0.8rem !important; }

/* Why split point text tighter */
.why-point-text p { color: rgba(255,255,255,0.48) !important; }

/* About team bio */
.team-bio { font-size: 0.83rem !important; color: rgba(255,255,255,0.48) !important; }

/* FAQ question */
.faq-q { font-size: 0.93rem !important; }
.faq-a { font-size: 0.86rem !important; color: rgba(255,255,255,0.48) !important; line-height: 1.85 !important; }

/* Guide CTA tighter */
.guide-cta-text h3 { font-size: 1.05rem !important; }
.guide-cta-text p { font-size: 0.84rem !important; color: rgba(255,255,255,0.5) !important; }

/* Trust bar more minimal */
.trust-bar { padding: 1.25rem 0 !important; background: rgba(255,255,255,0.01) !important; }
.trust-cert { font-size: 0.77rem !important; color: rgba(255,255,255,0.42) !important; }
.trust-sep { color: rgba(255,255,255,0.18) !important; }

/* Press strip tighter */
.press-strip { padding: 1.5rem 0 !important; }

/* Hero stats divider cleaner */
.hero-stats { border-top-color: rgba(255,255,255,0.06) !important; }
.hero-stat-label { color: rgba(255,255,255,0.32) !important; font-size: 0.7rem !important; letter-spacing: 0.04em !important; }

/* Better section alternating */
.section-alt { background: rgba(255,255,255,0.012) !important; }

/* CTA section */
.cta-section { padding: 9rem clamp(1.5rem,5vw,4rem) !important; }

/* Result cards (About stats) */
.result-card { border-color: rgba(255,255,255,0.06) !important; }
.result-num { letter-spacing: -0.04em !important; }

/* How it works timeline */
.timeline-content p { font-size: 0.855rem !important; color: rgba(255,255,255,0.48) !important; }


/* Case KS link */
.case-ks-link {
  display: inline-flex; align-items: center;
  margin-top: 1rem;
  font-size: 0.78rem; font-weight: 700;
  color: rgba(99,102,241,0.75);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.case-ks-link:hover { color: #a5b4fc; }

/* ============================================================
   SECTION UPGRADES v4 — badges / press / journey / services
   ============================================================ */

/* Premium badge pills */
.trust-bar-inner {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem !important;
  padding: 0.5rem 0;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.9rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid;
}
.trust-badge-ks     { color: #05ce78; border-color: rgba(5,206,120,.3); background: rgba(5,206,120,.07); }
.trust-badge-gg     { color: #e45a30; border-color: rgba(228,90,48,.3); background: rgba(228,90,48,.07); }
.trust-badge-meta   { color: #0082fb; border-color: rgba(0,130,251,.3); background: rgba(0,130,251,.07); }
.trust-badge-google { color: #fbbc04; border-color: rgba(251,188,4,.3);  background: rgba(251,188,4,.07);  }
.trust-badge-shopify{ color: #96bf48; border-color: rgba(150,191,72,.3); background: rgba(150,191,72,.07); }
.trust-badge svg { flex-shrink: 0; }

/* Press strip — bigger, more premium */
.press-strip { background: rgba(255,255,255,0.025); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.press-strip-label { font-size: 0.62rem !important; letter-spacing: 0.18em !important; color: rgba(255,255,255,.3) !important; }
.press-name { font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: rgba(255,255,255,.45) !important; }

/* Journey cards — subtle left-accent on hover */
.journey-card { border-left: 2px solid transparent; transition: border-color 0.25s, transform 0.25s; }
.journey-card:hover { border-left-color: var(--accent); transform: translateY(-2px); }
.journey-num { font-size: 0.65rem !important; letter-spacing: 0.15em; color: var(--accent) !important; font-weight: 800; }
.journey-icon { background: rgba(99,102,241,0.12) !important; border: 1px solid rgba(99,102,241,0.2) !important; }

/* Service cards — show images through gradient */
.card-visual { transition: transform 0.35s ease; }
.card:hover .card-visual { transform: scale(1.03); }

/* Section desc — slightly tighter */
.section-desc { max-width: 52ch; margin-left: auto; margin-right: auto; }

/* Process steps — number accent */
.step-num { color: var(--accent) !important; border-color: rgba(99,102,241,0.35) !important; background: rgba(99,102,241,0.08) !important; }


/* ── SERVICES GRID CARDS ──────────────────── */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
.svc-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.svc-card:hover { background: var(--card-h); border-color: var(--border-h); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.svc-card:visited { color: inherit; }
.svc-card-wide { grid-column: 1 / -1; flex-direction: row; }
.svc-card-img {
  height: 160px; flex-shrink: 0;
  background-size: cover; background-position: center;
  position: relative;
}
.svc-card-wide .svc-card-img { height: auto; width: 320px; min-height: 140px; }
.svc-card-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,7,15,0) 40%, rgba(7,7,15,0.6) 100%);
}
.svc-card-wide .svc-card-img::after {
  background: linear-gradient(90deg, rgba(7,7,15,0) 0%, rgba(7,7,15,0.5) 100%);
}
.svc-card-body {
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.35rem;
  padding: 1.2rem 1.4rem;
  flex: 1;
}
.svc-card h3 { font-size: 1.1rem; font-weight: 700; }
.svc-card p { font-size: 0.85rem; color: var(--text-2); line-height: 1.6; }
.svc-link { font-size: 0.8rem; color: var(--accent); font-weight: 500; margin-top: 0.2rem; }
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card-wide { flex-direction: column; }
  .svc-card-wide .svc-card-img { width: 100%; height: 140px; }
  .svc-card-img { height: 140px; }
  .svc-card-body { padding: 1rem 1.2rem; }
}

/* ── VIDEO SHOWCASE ─────────────────────── */
.video-showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
.video-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.video-card:hover { border-color: var(--border-h); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.video-card video {
  width: 100%; aspect-ratio: 16/9;
  display: block; object-fit: cover;
  background: #000;
}
.video-label {
  padding: 0.75rem 1rem;
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-2);
}
@media (max-width: 640px) {
  .video-showcase { grid-template-columns: 1fr; gap: 0.8rem; }
  .video-label { font-size: 0.75rem; padding: 0.55rem 0.8rem; }
}

/* ── MEDIA TEXT GRID ────────────────────── */
.media-text-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.8rem;
  margin-top: 2.5rem;
}
.media-text-card {
  display: flex; align-items: center; justify-content: center;
  padding: 1.1rem 0.8rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 0.88rem; font-weight: 700; color: rgba(255,255,255,0.45);
  text-align: center;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
}
.media-text-card:hover { background: var(--card-h); border-color: var(--border-h); color: var(--text); transform: translateY(-2px); }
@media (max-width: 900px) { .media-text-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .media-text-grid { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .media-text-card { font-size: 0.75rem; padding: 0.9rem 0.5rem; }
}

/* ── KOL GRID CARDS ──────────────────────── */
.kol-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.8rem;
  margin-top: 2.5rem;
}
.kol-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.4rem;
  padding: 1.1rem 0.6rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-align: center;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.kol-card:hover { background: var(--card-h); border-color: var(--border-h); transform: translateY(-3px); }
.kol-photo {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(99,102,241,0.3);
  background: var(--bg-3);
}
.kol-photo-more {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--g2);
  font-size: 1.2rem; font-weight: 800; color: #fff;
  border: 2px solid rgba(249,115,22,0.3);
}
.kol-name { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.kol-subs { font-size: 0.9rem; font-weight: 800; background: var(--g1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 900px) { .kol-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) {
  .kol-grid { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .kol-card { padding: 0.8rem 0.4rem; }
  .kol-photo, .kol-photo-more { width: 38px; height: 38px; }
  .kol-name { font-size: 0.7rem; }
  .kol-subs { font-size: 0.8rem; }
}

/* ── PARTNER TEXT GRID ──────────────────── */
.partner-text-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin-top: 2.5rem;
}
.partner-text-card {
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem 0.8rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 0.88rem; font-weight: 700; color: rgba(255,255,255,0.45);
  text-align: center;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
}
.partner-text-card:hover { background: var(--card-h); border-color: var(--border-h); color: var(--text); transform: translateY(-2px); }
@media (max-width: 900px) { .partner-text-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .partner-text-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .partner-text-card { font-size: 0.75rem; padding: 0.9rem 0.5rem; }
}

/* ── DTC SITE PORTFOLIO ──────────────────── */
.dtc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-top: 2.5rem;
}
.dtc-card {
  display: block;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: background 0.25s, border-color 0.25s, transform 0.3s, box-shadow 0.3s;
}
.dtc-card:hover {
  background: var(--card-h);
  border-color: var(--border-h);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
}
.dtc-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--border);
  transition: opacity 0.25s;
}
.dtc-card:hover img { opacity: 0.9; }
.dtc-info {
  padding: 0.55rem 0.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dtc-info span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}
.dtc-info em {
  font-style: normal;
  font-size: 0.65rem;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
@media (max-width: 900px) { .dtc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .dtc-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .dtc-info { padding: 0.45rem 0.6rem; }
  .dtc-info span { font-size: 0.7rem; }
  .dtc-info em { font-size: 0.58rem; }
}

/* ── PROJECT TIMELINE (3D) ────────────── */
.proj-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 3rem;
  counter-reset: tl;
}
.pt-item {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  padding: 1.8rem 1.5rem 1.5rem;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  counter-increment: tl;
}
.pt-item::before {
  content: counter(tl, decimal-leading-zero);
  position: absolute;
  top: -12px; right: 12px;
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, rgba(99,102,241,0.12), transparent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}
.pt-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--g1);
  opacity: 0;
  transition: opacity 0.3s;
}
.pt-item:hover {
  border-color: rgba(99,102,241,0.35);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3), 0 0 40px rgba(99,102,241,0.08);
}
.pt-item:hover::after { opacity: 1; }
.pt-item:nth-child(even)::before {
  background: linear-gradient(180deg, rgba(249,115,22,0.12), transparent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pt-item:nth-child(even)::after { background: var(--g2); }
.pt-dot {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--g1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px rgba(99,102,241,0.3);
  font-size: 0.85rem; font-weight: 900; color: #fff;
}
.pt-item:nth-child(even) .pt-dot { background: var(--g2); box-shadow: 0 4px 16px rgba(249,115,22,0.3); }
.pt-dot::after { content: counter(tl); }
.pt-phase {
  font-size: 0.65rem;
  font-weight: 700;
  color: #a5b4fc;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}
.pt-item:nth-child(even) .pt-phase { color: #fdba74; }
.pt-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.pt-desc {
  font-size: 0.82rem;
  color: var(--text-3);
  line-height: 1.65;
}
@media (max-width: 640px) {
  .proj-timeline { grid-template-columns: 1fr; gap: 0.9rem; }
  .pt-item { padding: 1.4rem 1.2rem 1.2rem; }
  .pt-item::before { font-size: 3.5rem; }
  .pt-dot { width: 30px; height: 30px; border-radius: 8px; font-size: 0.75rem; }
  .pt-title { font-size: 0.92rem; }
  .pt-desc { font-size: 0.78rem; }
}

/* ── lang toggle ── */
.lang-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  margin-right: 4px;
}
.lang-toggle:hover { border-color: var(--accent); color: var(--text); }