/* Vokabix Marketing Site Styles */
:root {
  --bg: #0f1320;
  --bg-alt: #161c2e;
  --accent: #4F8BFF;
  --accent-grad: linear-gradient(135deg,#4F8BFF,#9F6BFF 60%, #FF5FA2);
  --text: #f5f7fb;
  --text-dim: #c5ccdc;
  --card: #1f273a;
  --card-border: #2a354d;
  --radius: 18px;
  --shadow: 0 4px 16px -4px rgba(0,0,0,.5),0 8px 32px -8px rgba(0,0,0,.35);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
body { line-height: 1.5; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

header.site-header { position:sticky; top:0; z-index:50; backdrop-filter: blur(18px); background:rgba(15,19,32,.72); border-bottom:1px solid #1f2534; }
.navbar { max-width:1220px; margin:0 auto; display:flex; align-items:center; padding:14px 28px; gap:36px; }
.nav-brand { display:flex; align-items:center; gap:14px; font-weight:600; font-size:1.15rem; letter-spacing:.5px; }
.nav-brand img { width:42px; height:42px; border-radius:14px; box-shadow:0 6px 18px -6px rgba(0,0,0,.6); }
.nav-links { margin-left:auto; display:flex; gap:28px; }
.nav-links a { position:relative; padding:6px 4px; font-size:.95rem; font-weight:500; color:var(--text-dim); }
.nav-links a.active, .nav-links a:hover { color:var(--text); }
.nav-links a.active::after, .nav-links a:hover::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--accent-grad); border-radius:2px; }

.btn { --btn-bg: var(--accent-grad); display:inline-flex; align-items:center; gap:10px; padding:14px 26px; background:var(--btn-bg); color:#fff; border:none; border-radius:14px; font-weight:600; letter-spacing:.4px; font-size:.95rem; cursor:pointer; box-shadow:0 4px 14px -4px rgba(79,139,255,.5), 0 6px 28px -8px rgba(159,107,255,.4); transition:.25s ease; }
.btn:hover { transform:translateY(-3px); box-shadow:0 6px 20px -6px rgba(79,139,255,.55), 0 10px 36px -10px rgba(159,107,255,.45); }
.btn.outline { background:rgba(79,139,255,.08); color:var(--text); box-shadow:none; border:1px solid rgba(255,255,255,.08); }
.btn.outline:hover { background:rgba(79,139,255,.15); }

main { overflow:hidden; }
.hero { position:relative; padding:110px 32px 80px; max-width:1260px; margin:0 auto; display:grid; gap:70px; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); }
.hero-content h1 { font-size:clamp(2.3rem,4.2vw,3.45rem); line-height:1.1; margin:0 0 28px; background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-content p.lead { font-size:1.15rem; max-width:640px; color:var(--text-dim); margin:0 0 34px; }
.badges { display:flex; gap:18px; flex-wrap:wrap; }
.badges span { background:rgba(255,255,255,.07); color:var(--text-dim); padding:6px 14px 6px 10px; border-radius:40px; display:inline-flex; align-items:center; gap:8px; font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; font-weight:600; border:1px solid rgba(255,255,255,.08); }
.hero-visual { position:relative; }
.device-frame { background:linear-gradient(145deg,#1c2536,#273246); border:1px solid #2e3a50; width:100%; max-width:420px; aspect-ratio:9/19.5; margin:0 auto; border-radius:45px; padding:26px 18px 32px; box-shadow: 0 20px 60px -10px rgba(0,0,0,.65), 0 6px 22px -6px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:14px; }
.device-status { height:6px; width:55%; background:linear-gradient(90deg,var(--accent),#fff); opacity:.75; border-radius:4px; margin:0 auto; }
.mock-card { flex:1; background:#232e43; border:1px solid #303d55; border-radius:26px; padding:22px 22px 18px; display:flex; flex-direction:column; gap:18px; position:relative; overflow:hidden; }
.mock-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(79,139,255,.18),transparent 60%); pointer-events:none; }
.mock-title { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.5px; font-size:.8rem; text-transform:uppercase; color:var(--text-dim); }
.progress-bar { height:10px; background:#182131; border-radius:8px; overflow:hidden; position:relative; }
.progress-bar span { position:absolute; inset:0; background:var(--accent-grad); width:72%; border-radius:inherit; box-shadow:0 0 0 1px rgba(255,255,255,.05); }
.word-row { display:flex; justify-content:space-between; font-size:.85rem; background:#1b2434; padding:10px 14px; border-radius:12px; border:1px solid #2d3a51; }
.word-row + .word-row { margin-top:8px; }
.folder-tags { display:flex; gap:6px; flex-wrap:wrap; }
.folder-tags span { font-size:.65rem; text-transform:uppercase; letter-spacing:.6px; background:#2a3750; padding:4px 10px; border-radius:20px; border:1px solid #364562; }

.section { padding:40px 32px 10px; max-width:1260px; margin:0 auto; position:relative; }
.section-narrow { max-width:980px; }
.section h2 { font-size:clamp(1.9rem,3vw,2.5rem); margin:0 0 12px; line-height:1.15; }
.section p.section-intro { margin:0 0 40px; max-width:760px; color:var(--text-dim); font-size:1.05rem; }

.features-grid { display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.feature-card { background:var(--card); border:1px solid var(--card-border); padding:24px 22px 26px; border-radius:24px; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow); }
.feature-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 25% 20%,rgba(159,107,255,.18),transparent 65%); opacity:.75; }
.feature-icon { width:52px; height:52px; background:var(--accent-grad); border-radius:16px; display:grid; place-items:center; font-size:26px; box-shadow:0 6px 18px -6px rgba(79,139,255,.55); }
.feature-card h3 { margin:0; font-size:1.15rem; letter-spacing:.3px; }
.feature-card p { margin:0; font-size:.9rem; color:var(--text-dim); }
.feature-meta { margin-top:auto; font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); opacity:.75; }

.split { display:grid; gap:70px; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); align-items:center; }
.code-block { background:#1b2332; border:1px solid #2a3548; padding:24px 26px; border-radius:22px; font-family: ui-monospace, SFMono-Regular, Consolas, 'Roboto Mono', Menlo, monospace; font-size:.8rem; line-height:1.5; position:relative; box-shadow:var(--shadow); }
.code-block::before { content:"App Flow"; position:absolute; top:10px; right:14px; font-size:.6rem; letter-spacing:2px; font-weight:600; color:var(--text-dim); background:#222c3d; padding:4px 10px; border-radius:40px; border:1px solid #303c4f; }
.code-line-dim { opacity:.5; }

.callout { margin:70px auto 0; padding:50px clamp(30px,5vw,70px); background:radial-gradient(circle at 25% 25%,rgba(79,139,255,.25),rgba(15,19,32,.4) 55%),linear-gradient(145deg,#1b2434,#141b29 60%); border:1px solid #2a3548; border-radius:38px; text-align:center; box-shadow:0 40px 120px -40px rgba(0,0,0,.8); }
.callout h2 { font-size:clamp(2rem,3.2vw,2.8rem); margin:0 0 22px; background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.callout p { font-size:1.05rem; max-width:740px; margin:0 auto 34px; color:var(--text-dim); }

.footer { margin-top:110px; padding:60px 32px 80px; background:#0b0f18; border-top:1px solid #1c2433; }
.footer-grid { max-width:1260px; margin:0 auto; display:grid; gap:40px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.footer h4 { margin:0 0 20px; font-size:1rem; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); }
.footer a { display:block; padding:6px 0; font-size:.85rem; color:var(--text-dim); }
.footer a:hover { color:var(--text); }
.copyright { text-align:center; margin:50px 0 0; font-size:.7rem; letter-spacing:.5px; color:#566079; }

.privacy-badge { display:inline-flex; align-items:center; gap:8px; background:#1d2736; padding:10px 16px; border-radius:14px; border:1px solid #2f3a4c; font-size:.75rem; text-transform:uppercase; letter-spacing:1px; font-weight:600; color:#89a4c8; }
.privacy-badge svg { width:18px; height:18px; }

@media (max-width:820px){
  .hero { padding-top:80px; }
  .navbar { padding:12px 20px; }
  .hero { grid-template-columns:1fr; }
  .split { grid-template-columns:1fr; gap:50px; }
  .device-frame { max-width:340px; }
}