/* ═══════════════════════════════════════════════════════════════
   VExif Landing Page CSS
═══════════════════════════════════════════════════════════════ */

:root {
  --brand:       #6C47FF;
  --brand-light: #9D7FFF;
  --brand-dark:  #4A28E0;
  --dark:        #0D0D12;
  --dark-2:      #13131A;
  --dark-3:      #1A1A25;
  --mid:         #2A2A3A;
  --border:      rgba(255,255,255,0.08);
  --text:        #E8E8F0;
  --muted:       #9090A8;
  --white:       #FFFFFF;
  --radius:      12px;
  --shadow:      0 8px 40px rgba(108,71,255,0.15);
  --font:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { font-family:var(--font); background:var(--dark); color:var(--text); line-height:1.6; overflow-x:hidden }
a { color:inherit; text-decoration:none }
img { max-width:100%; display:block }
.container { max-width:1180px; margin:0 auto; padding:0 24px }
.container-narrow { max-width:760px }

/* ── NAV ─────────────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(13,13,18,0.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  max-width:1180px; margin:0 auto; padding:0 24px; height:64px;
}
.nav-logo { font-size:20px; font-weight:900; letter-spacing:-0.5px; color:var(--white) }
.nav-links { display:flex; gap:28px; list-style:none }
.nav-links a { font-size:14px; font-weight:500; color:var(--muted); transition:color .2s }
.nav-links a:hover { color:var(--white) }
.nav-cta { display:flex; gap:10px; align-items:center }
.btn-ghost { font-size:14px; font-weight:600; color:var(--muted); padding:8px 16px; border-radius:8px; transition:color .2s }
.btn-ghost:hover { color:var(--white) }
.btn-primary-sm {
  background:var(--brand); color:var(--white); font-size:14px; font-weight:700;
  padding:9px 18px; border-radius:8px; transition:background .2s; border:none; cursor:pointer;
}
.btn-primary-sm:hover { background:var(--brand-dark) }
.nav-hamburger { display:none; background:none; border:none; color:var(--white); font-size:22px; cursor:pointer }

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  position:relative; padding:140px 0 100px; overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 50% -20%, rgba(108,71,255,0.25) 0%, transparent 70%);
}
.hero-bg-grid {
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:48px 48px;
}
.hero-inner { position:relative; z-index:1; text-align:center }
.hero-badge {
  display:inline-block; background:rgba(108,71,255,0.2); border:1px solid rgba(108,71,255,0.4);
  color:var(--brand-light); font-size:13px; font-weight:600; padding:6px 16px; border-radius:100px;
  margin-bottom:24px; letter-spacing:.3px;
}
.hero-h1 {
  font-size:clamp(2.4rem, 5vw, 4.5rem); font-weight:900; line-height:1.08;
  letter-spacing:-2px; color:var(--white); margin-bottom:20px;
}
.gradient-text {
  background:linear-gradient(135deg, var(--brand) 0%, #C084FC 50%, #38BDF8 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub { font-size:1.1rem; color:var(--muted); max-width:600px; margin:0 auto 36px; line-height:1.75 }
.hero-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:56px }
.btn-hero-primary {
  background:var(--brand); color:var(--white); font-size:16px; font-weight:700;
  padding:14px 32px; border-radius:10px; transition:transform .2s, background .2s;
  display:inline-block;
}
.btn-hero-primary:hover { background:var(--brand-dark); transform:translateY(-2px) }
.btn-hero-ghost {
  background:transparent; color:var(--text); font-size:16px; font-weight:600;
  padding:14px 32px; border-radius:10px; border:1px solid var(--border);
  transition:border-color .2s; display:inline-block;
}
.btn-hero-ghost:hover { border-color:var(--brand-light) }
.hero-stats { display:flex; justify-content:center; gap:48px; flex-wrap:wrap }
.hero-stat { text-align:center }
.hero-stat strong { display:block; font-size:2rem; font-weight:900; color:var(--white) }
.hero-stat span { font-size:13px; color:var(--muted) }

/* ── MARQUEE ─────────────────────────────────────────────────── */
.marquee-section { padding:32px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.marquee-label { text-align:center; font-size:13px; color:var(--muted); margin-bottom:16px; text-transform:uppercase; letter-spacing:1px }
.marquee-track { overflow:hidden }
.marquee-inner {
  display:flex; gap:64px; animation:marquee 30s linear infinite; width:max-content;
}
.marquee-item { display:flex; align-items:center; opacity:.5; transition:opacity .2s; white-space:nowrap }
.marquee-item:hover { opacity:1 }
.marquee-item img { height:28px; filter:brightness(0) invert(1) }
.marquee-item span { font-size:16px; font-weight:700; letter-spacing:1px; color:var(--white) }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── SECTIONS ────────────────────────────────────────────────── */
.section { padding:100px 0 }
.section-dark { background:var(--dark-2) }
.section-light { background:var(--dark-3) }
.section-purple { background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(108,71,255,0.1) 0%, var(--dark-2) 100%) }
.section-header { text-align:center; max-width:700px; margin:0 auto 60px }
.section-eyebrow { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--brand-light); margin-bottom:12px }
.section-header h2 { font-size:clamp(1.8rem,3vw,2.8rem); font-weight:800; color:var(--white); letter-spacing:-1px; margin-bottom:14px }
.section-header p { font-size:1rem; color:var(--muted) }

/* ── STEPS ───────────────────────────────────────────────────── */
.steps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:24px }
.step-card {
  background:var(--dark-3); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; position:relative; transition:border-color .3s, transform .3s;
}
.step-card:hover { border-color:var(--brand); transform:translateY(-4px) }
.step-num {
  position:absolute; top:16px; right:20px; font-size:48px; font-weight:900;
  color:rgba(255,255,255,.04); line-height:1;
}
.step-icon { font-size:32px; margin-bottom:14px }
.step-card h3 { font-size:16px; font-weight:700; color:var(--white); margin-bottom:8px }
.step-card p  { font-size:14px; color:var(--muted); line-height:1.6 }

/* ── FEATURES ────────────────────────────────────────────────── */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px }
.feature-card {
  background:var(--dark-3); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; transition:border-color .3s;
}
.feature-card:hover { border-color:var(--brand-light) }
.feature-icon { font-size:28px; margin-bottom:12px }
.feature-card h3 { font-size:15px; font-weight:700; color:var(--white); margin-bottom:6px }
.feature-card p  { font-size:13px; color:var(--muted); line-height:1.6 }

/* ── API PREVIEW ─────────────────────────────────────────────── */
.api-preview-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:48px; align-items:center }
.api-preview-text h3 { font-size:1.5rem; font-weight:800; color:var(--white); margin-bottom:12px }
.api-preview-text p  { color:var(--muted); margin-bottom:20px }
.check-list { list-style:none; margin-bottom:28px }
.check-list li { font-size:14px; color:var(--text); padding:4px 0 }
.code-window {
  background:#0A0A10; border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; font-family:'Fira Code','JetBrains Mono',monospace;
}
.code-titlebar {
  background:var(--dark-3); padding:10px 16px; display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted);
}
.dot { width:12px; height:12px; border-radius:50% }
.dot.red    { background:#FF5F57 }
.dot.yellow { background:#FFBD2E }
.dot.green  { background:#28CA42 }
.code-window pre { padding:20px; font-size:13px; line-height:1.7; color:#A8B3CF; overflow-x:auto }
.code-window .c  { color:#636C7E }  /* comment */
.code-window .s  { color:#98C379 }  /* string */

/* ── TESTIMONIALS ────────────────────────────────────────────── */
.testi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px }
.testi-card {
  background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px;
}
.testi-stars { color:#FBBF24; font-size:16px; margin-bottom:12px }
.testi-body  { font-size:15px; color:var(--text); line-height:1.7; margin-bottom:20px; font-style:italic }
.testi-author { display:flex; align-items:center; gap:12px }
.testi-author img { width:44px; height:44px; border-radius:50%; object-fit:cover }
.testi-author strong { display:block; font-size:14px; color:var(--white) }
.testi-author small  { font-size:12px; color:var(--muted) }

/* ── PRICING ─────────────────────────────────────────────────── */
.pricing-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px; align-items:start;
}
.price-card {
  background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; position:relative; transition:border-color .3s, transform .3s;
}
.price-card:hover { border-color:var(--brand); transform:translateY(-4px) }
.price-card-popular {
  border-color:var(--brand); background:rgba(108,71,255,0.08);
  box-shadow:0 0 40px rgba(108,71,255,0.2);
}
.popular-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:var(--white); font-size:11px; font-weight:700;
  padding:4px 14px; border-radius:100px; white-space:nowrap;
}
.price-icon { font-size:28px; margin-bottom:10px }
.price-plan { font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:10px }
.price-num  { font-size:2.5rem; font-weight:900; color:var(--white) }
.price-period { font-size:14px; color:var(--muted) }
.price-calls { font-size:13px; color:var(--brand-light); margin:8px 0 16px; font-weight:600 }
.price-features { list-style:none; margin-bottom:24px }
.price-features li { font-size:13px; color:var(--muted); padding:4px 0 }

/* ── BLOG ────────────────────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px }
.blog-card {
  background:var(--dark-3); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:border-color .3s, transform .3s; display:block;
}
.blog-card:hover { border-color:var(--brand-light); transform:translateY(-4px) }
.blog-img { height:180px; background-size:cover; background-position:center }
.blog-card-body { padding:20px }
.blog-date { font-size:12px; color:var(--muted); margin-bottom:6px }
.blog-card-body h3 { font-size:17px; font-weight:700; color:var(--white); margin-bottom:8px }
.blog-card-body p  { font-size:13px; color:var(--muted); margin-bottom:12px }
.blog-read-more { font-size:13px; color:var(--brand-light); font-weight:600 }

/* ── CONTACT ─────────────────────────────────────────────────── */
.contact-form { background:var(--dark-2); border:1px solid var(--border); border-radius:var(--radius); padding:36px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:0 }
.form-group { margin-bottom:16px }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px }
.form-group input, .form-group textarea {
  width:100%; background:var(--dark-3); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:14px; padding:11px 14px; transition:border-color .2s; font-family:var(--font);
}
.form-group input:focus, .form-group textarea:focus {
  outline:none; border-color:var(--brand); background:var(--dark-2);
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer { background:var(--dark-2); border-top:1px solid var(--border); padding:60px 0 32px }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:40px }
.footer-logo { font-size:20px; font-weight:900; color:var(--white); margin-bottom:12px }
.footer-brand p { font-size:14px; color:var(--muted); line-height:1.6 }
.footer-links h4 { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:14px }
.footer-links ul { list-style:none }
.footer-links li { margin-bottom:8px }
.footer-links a { font-size:14px; color:var(--muted); transition:color .2s }
.footer-links a:hover { color:var(--white) }
.footer-bottom { border-top:1px solid var(--border); padding-top:24px; text-align:center }
.footer-bottom p { font-size:13px; color:var(--muted) }

/* ── ALERTS ──────────────────────────────────────────────────── */
.alert { padding:14px 18px; border-radius:8px; margin-bottom:20px; font-size:14px }
.alert-success { background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.3); color:#4ADE80 }
.alert-error   { background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.3); color:#F87171 }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:768px) {
  .nav-links, .nav-cta { display:none }
  .nav-links.mobile-open { display:flex; flex-direction:column; position:absolute; top:64px; left:0; right:0; background:var(--dark-2); padding:20px; border-bottom:1px solid var(--border) }
  .nav-hamburger { display:block }
  .hero { padding:100px 0 60px }
  .hero-h1 { letter-spacing:-1px }
  .hero-stats { gap:24px }
  .api-preview-grid { grid-template-columns:1fr }
  .footer-grid { grid-template-columns:1fr; gap:28px }
  .form-row { grid-template-columns:1fr }
  .steps-grid, .features-grid { grid-template-columns:1fr }
}