/* Landing Page Styles — ChE0mD
 * Extracted from inline <style> for maintainability and cloneability.
 * Imports design tokens for consistent theming across cloned platforms.
 */
@import url('./tokens.css');

:root {
  /* Landing-specific aliases — used throughout this file.
   * --bg, --text, --muted duplicate tokens.css values;
   * use the token equivalents (--color-bg-primary, --color-text-primary,
   * --color-text-secondary) in new code. Kept here to avoid a risky
   * find-and-replace across 300+ rules. */
  --bg: var(--color-bg-primary);
  --text: var(--color-text-primary);
  --muted: var(--color-text-secondary);

  /* Landing-page-specific vars (no token equivalent) */
  --bg2: #0d1117;
  --cyan: #00B0F0;
  --teal: #00CED1;
  --green: #00D26A;
  --green-light: #34E889;
  --green-dark: #00A854;
  --gold: #DAA520;
  --magenta: #c850c0;
  --glass: rgba(255,255,255,0.05);
  --glass-border: rgba(0,210,106,0.18);
  --glass-border-cyan: rgba(0,176,240,0.15);
  --radius: 16px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }

/* Scroll progress bar */
.scroll-progress { position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg, var(--green), var(--cyan), var(--green-light)); z-index:200; width:0; transition:width 0.1s linear; }

/* Floating particles canvas */
#particles { position:fixed; inset:0; z-index:0; pointer-events:none; }

/* Nav */
nav { position:fixed; top:3px; width:100%; z-index:100; padding:1rem 2rem; display:flex; align-items:center; justify-content:space-between; background:rgba(10,10,26,0.92); backdrop-filter:blur(20px); border-bottom:1px solid var(--glass-border); transition:all 0.4s; }
nav.scrolled { padding:0.6rem 2rem; background:rgba(10,10,26,0.97); box-shadow:0 4px 30px rgba(0,210,106,0.08); }
nav img { height:40px; transition:all 0.3s; }
nav.scrolled img { height:32px; }
nav .links { display:flex; gap:1.5rem; align-items:center; }
nav a { color:var(--muted); text-decoration:none; font-size:0.9rem; transition:color 0.3s; position:relative; }
nav a:hover { color:var(--green-light); }
nav a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--green); transition:width 0.3s; }
nav a:hover::after { width:100%; }
.nav-cta { background:linear-gradient(135deg, var(--green), var(--green-dark)); color:#000 !important; padding:0.5rem 1.2rem; border-radius:8px; font-weight:600; }
.nav-cta:hover { background:linear-gradient(135deg, var(--green-light), var(--green)); color:#000 !important; box-shadow:0 0 20px rgba(0,210,106,0.4); }
.nav-cta::after { display:none !important; }
/* Hamburger menu */
.hamburger { display:none; background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer; padding:0.3rem; z-index:101; }
.nav-signin-mobile { display:none; }

/* Hero */
.hero { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:url('bg-sacred.png') center/cover; opacity:0.08; }
.hero::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 0%, var(--bg) 70%); }
.hero > * { position:relative; z-index:1; }
.hero img { height:120px; margin-bottom:2rem; filter:drop-shadow(0 0 40px rgba(0,210,106,0.3)); animation:float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.hero h1 { font-size:clamp(2.5rem,6vw,4.5rem); font-weight:700; line-height:1.1; margin-bottom:1rem; background:linear-gradient(135deg, var(--green), var(--cyan), var(--green-light)); background-size:200% 200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:gradientShift 4s ease infinite; }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.hero p { font-size:clamp(1rem,2vw,1.3rem); color:var(--muted); max-width:700px; margin-bottom:2.5rem; }
.hero-bullets { display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; margin-bottom:2rem; }
.hero-bullets span { display:flex; align-items:center; gap:0.5rem; color:var(--green-light); font-size:0.95rem; font-weight:500; }
.hero-bullets span::before { content:'\2713'; color:var(--green); font-weight:700; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.btn-primary { background:linear-gradient(135deg, var(--green), var(--green-dark)); color:#000; padding:0.9rem 2.5rem; border-radius:50px; font-weight:700; text-decoration:none; font-size:1.1rem; transition:all 0.3s; box-shadow:0 0 30px rgba(0,210,106,0.3); position:relative; overflow:hidden; }
.btn-primary::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%); opacity:0; transition:opacity 0.3s; }
.btn-primary:hover::before { opacity:1; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 50px rgba(0,210,106,0.5); }
.btn-outline { border:2px solid var(--cyan); color:var(--cyan); padding:0.9rem 2.5rem; border-radius:50px; font-weight:600; text-decoration:none; font-size:1.1rem; transition:all 0.3s; }
.btn-outline:hover { background:rgba(0,176,240,0.1); border-color:var(--green-light); color:var(--green-light); }

/* Glowing orbs */
.orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.12; pointer-events:none; animation:orbFloat 12s ease-in-out infinite; }
.orb-green { background:var(--green); width:400px; height:400px; top:20%; left:-10%; animation-delay:0s; }
.orb-cyan { background:var(--cyan); width:350px; height:350px; top:60%; right:-8%; animation-delay:-4s; }
.orb-green2 { background:var(--green-light); width:300px; height:300px; bottom:10%; left:30%; animation-delay:-8s; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0)} 33%{transform:translate(30px,-20px)} 66%{transform:translate(-20px,30px)} }

/* Typing cursor */
.typed-wrap { display:inline; }
.typed-cursor { display:inline-block; width:3px; height:1.2em; background:var(--green); margin-left:4px; animation:blink 1s step-end infinite; vertical-align:text-bottom; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Sections */
section { padding:6rem 2rem; max-width:1200px; margin:0 auto; position:relative; }
.section-title { font-size:clamp(2rem,4vw,3rem); text-align:center; margin-bottom:1rem; font-weight:700; }
.section-sub { text-align:center; color:var(--muted); max-width:600px; margin:0 auto 3rem; font-size:1.1rem; }

/* Section divider */
.section-divider { height:1px; max-width:200px; margin:0 auto; background:linear-gradient(90deg, transparent, var(--green), var(--cyan), transparent); opacity:0.4; }

/* Cards grid */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:1.5rem; }
.card { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:2rem; transition:all 0.4s; backdrop-filter:blur(10px); position:relative; overflow:hidden; }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--green), var(--cyan)); transform:scaleX(0); transition:transform 0.4s; transform-origin:left; }
.card:hover::before { transform:scaleX(1); }
.card:hover { border-color:var(--green); box-shadow:0 0 30px rgba(0,210,106,0.12); transform:translateY(-4px); }
.card-icon { font-size:2.5rem; margin-bottom:1rem; }
.card h3 { font-size:1.3rem; margin-bottom:0.5rem; color:var(--green); }
.card p { color:var(--muted); font-size:0.95rem; }

/* Problem section */
.problem-bg { background:linear-gradient(180deg, var(--bg) 0%, #0a1510 50%, var(--bg) 100%); padding:6rem 2rem; position:relative; }

/* Solution steps */
.steps { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; }
.step { flex:1; min-width:250px; text-align:center; position:relative; }
.step-num { width:60px; height:60px; background:linear-gradient(135deg, var(--green), var(--cyan)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; color:#000; margin:0 auto 1rem; box-shadow:0 0 25px rgba(0,210,106,0.3); transition:all 0.3s; }
.step:hover .step-num { box-shadow:0 0 40px rgba(0,210,106,0.5); transform:scale(1.1); }
.step h3 { margin-bottom:0.5rem; color:var(--green-light); }
.step p { color:var(--muted); font-size:0.95rem; }
/* Step connector lines */
.step::after { content:''; position:absolute; top:30px; left:calc(50% + 40px); width:calc(100% - 80px); height:2px; background:linear-gradient(90deg, var(--green), var(--cyan)); opacity:0.3; }
.step:last-child::after { display:none; }

/* === WHY CHE0MD / VALUE PROP === */
.vp-section { background:linear-gradient(180deg, var(--bg) 0%, #041210 30%, #060a18 70%, var(--bg) 100%); padding:6rem 2rem; overflow:hidden; position:relative; }
.vp-inner { max-width:1200px; margin:0 auto; position:relative; z-index:1; }
.vp-badge { display:inline-block; background:linear-gradient(135deg, var(--green), var(--cyan)); color:#000; padding:0.4rem 1.2rem; border-radius:20px; font-size:0.8rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:1.5rem; }

/* Animated comparison bars */
.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin:3rem 0; }
@media (max-width:768px) { .compare-grid { grid-template-columns:1fr; gap:2rem; } }
.compare-box { background:rgba(0,210,106,0.03); border:1px solid var(--glass-border); border-radius:var(--radius); padding:2rem; backdrop-filter:blur(10px); transition:all 0.4s; }
.compare-box:hover { border-color:var(--green); box-shadow:0 0 40px rgba(0,210,106,0.08); }
.compare-box h3 { color:var(--green-light); margin-bottom:1.5rem; font-size:1.2rem; display:flex; align-items:center; gap:0.5rem; }
.bar-group { margin-bottom:1.2rem; }
.bar-label { display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:0.4rem; }
.bar-label span:first-child { color:var(--muted); }
.bar-label span:last-child { color:var(--text); font-weight:600; }
.bar-track { height:8px; background:rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; }
.bar-fill { height:100%; border-radius:4px; width:0; transition:width 1.5s cubic-bezier(0.25,0.46,0.45,0.94); }
.bar-fill.them { background:linear-gradient(90deg, #ff4444, #cc3333); }
.bar-fill.us { background:linear-gradient(90deg, var(--green), var(--cyan)); box-shadow:0 0 10px rgba(0,210,106,0.5); }
.bar-group.visible .bar-fill { width:var(--w); }

/* Timeline compare */
.timeline-compare { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.timeline-bar { flex:1; height:32px; border-radius:8px; display:flex; align-items:center; padding:0 1rem; font-size:0.85rem; font-weight:600; position:relative; overflow:hidden; }
.timeline-bar::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%); animation:shimmer 2.5s infinite; }
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.timeline-bar.them { background:rgba(255,68,68,0.15); border:1px solid rgba(255,68,68,0.3); color:#ff6666; width:0; transition:width 1.5s ease; }
.timeline-bar.us { background:rgba(0,210,106,0.15); border:1px solid rgba(0,210,106,0.3); color:var(--green-light); width:0; transition:width 1.2s ease 0.3s; }
.timeline-compare.visible .timeline-bar.them { width:100%; }
.timeline-compare.visible .timeline-bar.us { width:20%; }
.tl-label { font-size:0.8rem; color:var(--muted); min-width:90px; }

/* Feature checklist comparison */
.feature-compare { margin:3rem 0; }
.feature-compare table { width:100%; border-collapse:collapse; }
.feature-compare th { text-align:left; padding:0.8rem 1rem; font-size:0.8rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); border-bottom:1px solid var(--glass-border); }
.feature-compare th:not(:first-child) { text-align:center; }
.feature-compare th.us-col { color:var(--green-light); }
.feature-compare td { padding:0.7rem 1rem; border-bottom:1px solid rgba(255,255,255,0.03); font-size:0.9rem; color:var(--muted); }
.feature-compare td:not(:first-child) { text-align:center; font-size:1.1rem; }
.feature-compare tr { transition:background 0.3s; }
.feature-compare tr:hover { background:rgba(0,210,106,0.04); }
.check { color:var(--green-light); text-shadow:0 0 8px rgba(0,210,106,0.6), 0 0 16px rgba(0,210,106,0.3); }
.cross { color:#ff4444; opacity:0.5; }
.partial { color:var(--gold); }

/* Differentiator cards */
.diff-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:1.2rem; margin-top:3rem; }
.diff-card { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:1.8rem; text-align:center; transition:all 0.4s; position:relative; overflow:hidden; }
.diff-card::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:conic-gradient(from 0deg, transparent, rgba(0,210,106,0.06), transparent 30%); animation:rotate 6s linear infinite; }
@keyframes rotate { 100%{transform:rotate(360deg)} }
.diff-card:hover { border-color:var(--green); transform:translateY(-6px); box-shadow:0 4px 40px rgba(0,210,106,0.15); }
.diff-card > * { position:relative; z-index:1; }
.diff-icon { font-size:2.2rem; margin-bottom:0.8rem; }
.diff-card h4 { color:var(--green-light); font-size:1.1rem; margin-bottom:0.5rem; }
.diff-card p { color:var(--muted); font-size:0.88rem; line-height:1.5; }

/* Animated counters */
.vp-counters { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; margin:3rem 0 0; }
.vp-counter { text-align:center; min-width:130px; padding:1.5rem 1rem; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); transition:all 0.3s; }
.vp-counter:hover { border-color:var(--green); transform:translateY(-4px); box-shadow:0 0 25px rgba(0,210,106,0.1); }
.vp-counter .big { font-size:2.8rem; font-weight:800; background:linear-gradient(135deg, var(--green), var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
.vp-counter .sub { color:var(--muted); font-size:0.82rem; margin-top:0.4rem; }

/* Market ticker */
.market-ticker { display:flex; align-items:center; justify-content:center; gap:0.8rem; margin-top:2rem; padding:1rem; background:var(--glass); border:1px solid var(--glass-border); border-radius:50px; font-size:0.9rem; }
.ticker-dot { width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }

/* === PROCESS FLOW === */
.process-flow { display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; margin:2rem 0 3rem; }
.pf-node { background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; padding:1rem 1.5rem; text-align:center; min-width:140px; transition:all 0.3s; }
.pf-node:hover { border-color:var(--green); box-shadow:0 0 20px rgba(0,210,106,0.1); transform:scale(1.05); }
.pf-node .pf-icon { font-size:1.5rem; margin-bottom:0.3rem; }
.pf-node .pf-label { font-size:0.8rem; color:var(--green-light); font-weight:600; }
.pf-node .pf-sub { font-size:0.7rem; color:var(--muted); }
.pf-arrow { color:var(--green); font-size:1.5rem; padding:0 0.5rem; opacity:0.5; animation:arrowPulse 2s infinite; }
.pf-arrow:nth-child(4n) { animation-delay:0.5s; }
.pf-arrow:nth-child(6n) { animation-delay:1s; }
@keyframes arrowPulse { 0%,100%{opacity:0.3;transform:translateX(0)} 50%{opacity:0.8;transform:translateX(4px)} }

/* ROI Calculator */
.roi-calc { max-width:800px; margin:0 auto; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:2.5rem; }
.roi-inputs { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; margin-bottom:2rem; }
@media (max-width:768px) { .roi-inputs { grid-template-columns:1fr; } }
.roi-field label { display:block; font-size:0.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.5rem; }
.roi-field input, .roi-field select { width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:10px; padding:0.8rem 1rem; color:var(--text); font-size:1rem; outline:none; }
.roi-field input:focus, .roi-field select:focus { border-color:var(--green); }
.roi-results { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; padding-top:2rem; border-top:1px solid var(--glass-border); }
.roi-result-item { text-align:center; }
.roi-result-num { font-size:2rem; font-weight:800; background:linear-gradient(135deg, var(--green), var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.roi-result-label { font-size:0.8rem; color:var(--muted); margin-top:0.3rem; }

/* Stat callout boxes */
.stat-row { display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; margin:2.5rem 0; }
.stat-box { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:1.2rem 1.5rem; text-align:center; min-width:160px; flex:1; max-width:220px; transition:all 0.3s; }
.stat-box:hover { border-color:var(--green); transform:translateY(-3px); box-shadow:0 0 20px rgba(0,210,106,0.1); }
.stat-box .stat-num { font-size:1.8rem; font-weight:800; background:linear-gradient(135deg, var(--green), var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1.2; }
.stat-box .stat-label { font-size:0.75rem; color:var(--muted); margin-top:0.3rem; line-height:1.3; }

/* Incident timeline */
.incident-timeline { position:relative; padding-left:2rem; margin:2rem 0; }
.incident-timeline::before { content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; background:linear-gradient(180deg, #ff4444, var(--green)); }
.incident-item { position:relative; margin-bottom:1.5rem; padding-left:1.5rem; }
.incident-item::before { content:''; position:absolute; left:-1.55rem; top:6px; width:12px; height:12px; border-radius:50%; background:#ff4444; border:2px solid var(--bg); box-shadow:0 0 8px rgba(255,68,68,0.4); }
.incident-item .inc-year { font-size:0.75rem; color:#ff6666; font-weight:700; letter-spacing:1px; }
.incident-item .inc-title { font-size:0.95rem; color:var(--text); font-weight:600; margin:0.2rem 0; }
.incident-item .inc-detail { font-size:0.82rem; color:var(--muted); line-height:1.5; }
.incident-item .inc-cause { display:inline-block; background:rgba(255,68,68,0.1); border:1px solid rgba(255,68,68,0.2); border-radius:6px; padding:0.15rem 0.6rem; font-size:0.72rem; color:#ff8888; margin-top:0.3rem; }

/* Vision section */
.vision-bg { background:linear-gradient(180deg, var(--bg) 0%, #041a10 30%, #061218 70%, var(--bg) 100%); padding:6rem 2rem; position:relative; overflow:hidden; }
.vision-inner { max-width:1200px; margin:0 auto; position:relative; z-index:1; }
.vision-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.5rem; margin:2rem 0; }
.vision-card { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:1.8rem; transition:all 0.4s; position:relative; overflow:hidden; }
.vision-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--green), var(--cyan)); transform:scaleX(0); transition:transform 0.4s; transform-origin:left; }
.vision-card:hover::after { transform:scaleX(1); }
.vision-card:hover { border-color:var(--green); transform:translateY(-4px); box-shadow:0 4px 30px rgba(0,210,106,0.1); }
.vision-card .v-icon { font-size:2rem; margin-bottom:0.6rem; }
.vision-card h4 { color:var(--green-light); font-size:1.05rem; margin-bottom:0.4rem; }
.vision-card .v-now { font-size:0.82rem; color:var(--cyan); margin-bottom:0.3rem; }
.vision-card p { font-size:0.85rem; color:var(--muted); line-height:1.5; }
.vision-card .v-stat { display:inline-block; background:rgba(0,210,106,0.1); border:1px solid rgba(0,210,106,0.2); border-radius:6px; padding:0.15rem 0.6rem; font-size:0.72rem; color:var(--green-light); margin-top:0.4rem; font-weight:600; }

/* ROI calculator strip */
.roi-strip { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:1rem; margin:2.5rem 0; }
.roi-item { background:rgba(0,210,106,0.04); border:1px solid var(--glass-border); border-radius:var(--radius); padding:1.2rem; text-align:center; transition:all 0.3s; }
.roi-item:hover { border-color:var(--green); }
.roi-item .roi-label { font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.4rem; }
.roi-item .roi-val { font-size:1.6rem; font-weight:800; background:linear-gradient(135deg, var(--green-light), var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.roi-item .roi-sub { font-size:0.7rem; color:var(--muted); margin-top:0.2rem; }

/* === MODULES === */
.modules { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:1.5rem; }

/* Pricing */
.pricing { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:1.5rem; }
.price-card { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:2.5rem 2rem; text-align:center; transition:all 0.4s; position:relative; overflow:hidden; }
.price-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--green), var(--cyan)); opacity:0; transition:opacity 0.4s; }
.price-card:hover::before { opacity:1; }
.price-card.popular { border-color:var(--green); box-shadow:0 0 40px rgba(0,210,106,0.15); transform:scale(1.03); }
.price-card.popular::before { opacity:1; }
.price-card .tier { font-size:0.9rem; text-transform:uppercase; letter-spacing:2px; color:var(--green); margin-bottom:0.5rem; }
.price-card .amount { font-size:2.5rem; font-weight:800; margin-bottom:0.5rem; background:linear-gradient(135deg, var(--green-light), var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.price-card .period { color:var(--muted); margin-bottom:1.5rem; }
.price-card ul { list-style:none; text-align:left; margin-bottom:2rem; }
.price-card li { padding:0.4rem 0; color:var(--muted); font-size:0.95rem; }
.price-card li::before { content:'\2713 '; color:var(--green-light); font-weight:700; text-shadow:0 0 8px rgba(0,210,106,0.6), 0 0 16px rgba(0,210,106,0.3); }
.badge { display:inline-block; background:linear-gradient(135deg, var(--green), var(--green-dark)); color:#000; padding:0.3rem 1rem; border-radius:20px; font-size:0.8rem; font-weight:700; margin-bottom:1rem; }

/* Testimonials */
.testimonials { display:grid; grid-template-columns:repeat(auto-fit, minmax(400px,1fr)); gap:2rem; }
.testimonial { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:2rem; position:relative; transition:all 0.3s; }
.testimonial:hover { border-color:var(--green); }
.testimonial::before { content:'\201C'; position:absolute; top:10px; left:15px; font-size:4rem; color:var(--green); opacity:0.15; font-family:serif; line-height:1; }
.testimonial blockquote { font-style:italic; font-size:1.1rem; margin-bottom:1rem; color:var(--text); line-height:1.7; }
.testimonial .author { color:var(--green-light); font-weight:600; }
.testimonial .role { color:var(--muted); font-size:0.9rem; }

/* Trust / Results section */
.results-bg { background:linear-gradient(180deg, var(--bg) 0%, #041210 50%, var(--bg) 100%); padding:6rem 2rem; }
.trust-grid { display:flex; gap:3rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
.trust-item { text-align:center; }
.trust-item .num { font-size:3rem; font-weight:800; background:linear-gradient(135deg, var(--green), var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.trust-item .label { color:var(--muted); font-size:0.9rem; }

/* Logos / Standards ribbon */
.standards-ribbon { display:flex; align-items:center; justify-content:center; gap:2.5rem; flex-wrap:wrap; margin:3rem 0; padding:2rem; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); }
.standard-badge { text-align:center; opacity:0.6; transition:opacity 0.3s; }
.standard-badge:hover { opacity:1; }
.standard-badge .std-name { font-size:0.95rem; font-weight:700; color:var(--green-light); }
.standard-badge .std-desc { font-size:0.7rem; color:var(--muted); }

/* Contact */
.contact-form { max-width:600px; margin:0 auto; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:2.5rem; backdrop-filter:blur(10px); }
.contact-form input, .contact-form textarea, .contact-form select { width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:10px; padding:0.9rem 1.2rem; color:var(--text); font-size:1rem; margin-bottom:1rem; outline:none; transition:border 0.3s; font-family:inherit; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color:var(--green); box-shadow:0 0 15px rgba(0,210,106,0.1); }
.contact-form textarea { min-height:120px; resize:vertical; }
.contact-form button { width:100%; background:linear-gradient(135deg, var(--green), var(--green-dark)); color:#000; padding:1rem; border:none; border-radius:50px; font-size:1.1rem; font-weight:700; cursor:pointer; transition:all 0.3s; }
.contact-form button:hover { box-shadow:0 0 30px rgba(0,210,106,0.4); transform:translateY(-1px); }
.contact-form button:disabled { cursor:not-allowed; opacity:0.7; transform:none; box-shadow:none; }
.contact-form input.invalid, .contact-form textarea.invalid { border-color:#ff6b6b; box-shadow:0 0 10px rgba(255,107,107,0.15); }
.form-msg { text-align:center; padding:1rem; color:var(--green); display:none; font-size:0.95rem; }

/* Footer */
footer { padding:3rem 2rem; text-align:center; border-top:1px solid var(--glass-border); color:var(--muted); font-size:0.9rem; position:relative; }
footer::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:200px; height:1px; background:linear-gradient(90deg, transparent, var(--green), var(--cyan), transparent); }
footer a { color:var(--green-light); text-decoration:none; }

/* Animations */
.fade-up { opacity:0; transform:translateY(30px); transition:all 0.8s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-left { opacity:0; transform:translateX(-40px); transition:all 0.8s ease; }
.fade-left.visible { opacity:1; transform:translateX(0); }
.fade-right { opacity:0; transform:translateX(40px); transition:all 0.8s ease; }
.fade-right.visible { opacity:1; transform:translateX(0); }
.scale-in { opacity:0; transform:scale(0.9); transition:all 0.6s ease; }
.scale-in.visible { opacity:1; transform:scale(1); }

/* Stagger children */
.stagger > *:nth-child(1) { transition-delay:0s; }
.stagger > *:nth-child(2) { transition-delay:0.1s; }
.stagger > *:nth-child(3) { transition-delay:0.2s; }
.stagger > *:nth-child(4) { transition-delay:0.3s; }
.stagger > *:nth-child(5) { transition-delay:0.4s; }
.stagger > *:nth-child(6) { transition-delay:0.5s; }

/* Mobile */
@media (max-width:768px) {
  .hamburger { display:block; }
  .nav-signin-mobile { display:block; }
  nav .links { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:rgba(10,10,26,0.97); backdrop-filter:blur(20px); padding:1rem 2rem 1.5rem; border-bottom:1px solid var(--glass-border); gap:0.5rem; }
  nav .links.open { display:flex; }
  nav .links a { padding:0.6rem 0; font-size:1rem; }
  .hero h1 { font-size:2.2rem; }
  .pricing { grid-template-columns:1fr; }
  .price-card.popular { transform:scale(1); }
  .testimonials { grid-template-columns:1fr; }
  section { padding:4rem 1.5rem; }
  .compare-grid { grid-template-columns:1fr; }
  .step::after { display:none; }
  .pf-arrow { display:none; }
  .process-flow { flex-direction:column; gap:0.8rem; }
  .feature-compare { overflow-x:auto; }
  .vp-counters { gap:1rem; }
  .vp-counter { min-width:140px; }
  .demo-showcase { grid-template-columns:1fr !important; }
}
