/* Base Styles */
:root {
  --bg: #0d1117;
  --bg-alt: #111927;
  --bg-soft: #182235;
  --bg-glass: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.18);
  --text: #f5f7fa;
  --text-dim: #a9b4c6;
  --primary: #3b82f6;
  --primary-accent: #60a5fa;
  --primary-glow: 200 100% 60%;
  --danger: #ef4444;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-1: 0 4px 18px -4px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 32px -6px rgba(0,0,0,0.55);
  --grad: linear-gradient(135deg,#3b82f6,#6366f1 45%,#8b5cf6);
  --grad-soft: linear-gradient(135deg,rgba(59,130,246,0.15),rgba(99,102,241,0.15) 45%,rgba(139,92,246,0.15));
  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 { scroll-behavior: smooth; }
html,body { padding:0; margin:0; background: var(--bg); color: var(--text); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

h1,h2,h3,h4 { font-weight:600; letter-spacing:-0.02em; margin:0 0 .6em; line-height:1.15; }
.narrow h2 { font-size: clamp(2rem,4vw,2.6rem); }
.hero h1 { font-size: clamp(2.4rem,5vw,3.4rem); }

p { line-height:1.55; margin:0 0 1em; }
.big { font-size:1.25rem; color: var(--text-dim); }
.lead { font-size:1.15rem; color: var(--text-dim); max-width:640px; }
.small { font-size:.85rem; }
.center-text { text-align:center; }

.container { width:min(1240px,92%); margin:0 auto; }
.grid { display:grid; gap:3rem; }
.flex { display:flex; }
.wrap { flex-wrap:wrap; }
.center-v { align-items:center; }
.between { justify-content:space-between; }
.gap-s { gap:.5rem; }

/* Skip to content */
.skip-link { position:absolute; top:-100%; left:1rem; background:var(--primary); color:#fff; padding:.6rem 1.2rem; border-radius:8px; z-index:100; font-weight:600; text-decoration:none; }
.skip-link:focus { top:1rem; }

/* Header */
.site-header { position:sticky; top:0; backdrop-filter:blur(18px); background:rgba(13,17,23,0.72); border-bottom:1px solid var(--border); z-index:40; padding:.5rem 0; }
.site-header .brand-name { font-size:1.35rem; font-weight:600; margin-left:.55rem; }
.brand a { text-decoration:none; color:inherit; display:flex; align-items:center; }
.logo { display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.logo.tiny { width:20px; height:20px; }

.main-nav { display:flex; gap:1.2rem; align-items:center; }
.main-nav a { color:var(--text-dim); text-decoration:none; font-weight:500; font-size:.95rem; transition:color .2s; }
.main-nav a:hover { color:var(--text); }
.mobile-nav-toggle { display:none; background:none; border:none; color:var(--text); font-size:1.6rem; cursor:pointer; padding:.5rem; }

/* Hero */
.hero { position:relative; padding:7rem 0 5.5rem; overflow:hidden; }
.hero-grid { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:center; }
.hero-text { position:relative; z-index:2; }
.gradient { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cta-group { display:flex; gap:1rem; margin:1.8rem 0 1.2rem; flex-wrap:wrap; }
.social-proof { font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-top:.6rem; }
.mini-metrics { display:flex; gap:2.2rem; margin-top:1.2rem; }
.mini-metrics div { display:flex; flex-direction:column; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.mini-metrics strong { font-size:1.3rem; color:var(--text); }

.shape-blur { position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(120px); opacity:.55; z-index:0; }
.shape-1 { background:#3b82f6; top:-120px; left:-160px; }
.shape-2 { background:#8b5cf6; bottom:-120px; right:-160px; }

/* App preview card */
.app-preview-card { background:var(--bg-soft); border:1px solid var(--border); border-radius:26px; padding:1.2rem 1.2rem 1rem; width:min(380px,100%); box-shadow:var(--shadow-2); position:relative; backdrop-filter:blur(8px); }
.app-preview-card::after { content:""; position:absolute; inset:0; border-radius:26px; padding:1px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.35; }
.app-header { margin-bottom:1rem; }
.status-pill { font-size:.65rem; font-weight:600; letter-spacing:.1em; padding:.38rem .6rem; border-radius:40px; background:linear-gradient(120deg,#059669,#10b981); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.08),0 4px 10px -2px rgba(0,0,0,.5); }
.status-pill.online { background:linear-gradient(120deg,#16a34a,#22c55e); }
.app-title { font-weight:600; font-size:.9rem; }
.app-screen { background:var(--bg); border:1px solid var(--border); border-radius:18px; padding:1rem; display:flex; flex-direction:column; gap:.9rem; }
.machine-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.9rem; }
.machine { padding:.75rem .85rem .9rem; border:1px solid var(--border); border-radius:14px; background:var(--bg-alt); font-size:.8rem; position:relative; overflow:hidden; }
.machine.busy { background:linear-gradient(145deg,#1e293b,#0f172a); }
.machine.idle { background:linear-gradient(145deg,#172337,#121b2b); }
.machine .row { display:flex; align-items:center; }
.machine .row.between { justify-content:space-between; }
.machine small { opacity:.7; display:block; margin-top:.4rem; }
.progress { position:relative; background:rgba(255,255,255,0.07); height:4px; border-radius:40px; margin:.55rem 0 .2rem; overflow:hidden; }
.progress span { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,#3b82f6,#8b5cf6); box-shadow:0 0 0 1px rgba(255,255,255,0.3); }
.app-footer { margin-top:1rem; }

/* Sections */
.section { padding:5.5rem 0; position:relative; }
.section.alt { background:linear-gradient(180deg,var(--bg-alt),#0f1623); }
.section.alt.pricing { background:linear-gradient(180deg,#101b2a,#0d1117); }

.features-grid { margin-top:3rem; display:grid; gap:1.8rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.feature-card { background:var(--bg-soft); border:1px solid var(--border); padding:1.25rem 1.2rem 1.35rem; border-radius:18px; position:relative; overflow:hidden; }
.feature-card::before { content:""; position:absolute; inset:0; background:var(--grad-soft); opacity:.8; pointer-events:none; }
.feature-card h3 { margin-top:0; font-size:1.05rem; }
.feature-card p { margin:0; font-size:.9rem; color:var(--text-dim); }

.split { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:3rem; align-items:start; }
.icon-list { list-style:none; padding:0; margin:0 0 2rem; display:flex; flex-direction:column; gap:.9rem; font-size:.95rem; }
.icon-list li { position:relative; padding-left:1.3rem; }
.icon-list li:before { content:""; width:8px; height:8px; border-radius:50%; background:linear-gradient(90deg,#3b82f6,#8b5cf6); position:absolute; top:.5rem; left:0; box-shadow:0 0 0 3px rgba(59,130,246,.15); }

.visuals-stack { display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.panel { border:1px solid var(--border); background:var(--bg-soft); border-radius:16px; padding:1rem 1rem 1rem; position:relative; overflow:hidden; min-height:130px; }
.panel.glass { background:rgba(255,255,255,0.05); backdrop-filter:blur(10px); }
.panel.glass.small { min-height:120px; }
.panel h4 { margin:0 0 .6rem; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; opacity:.8; }
.panel .bars { display:flex; align-items:flex-end; gap:.6rem; height:120px; }
.panel .bars div { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.4rem; }
.panel .bars span { width:100%; background:linear-gradient(180deg,#3b82f6,#8b5cf6); border-radius:6px 6px 2px 2px; box-shadow:0 0 0 1px rgba(255,255,255,0.3); }
.panel .bars label { font-size:.6rem; opacity:.6; }

/* Pricing */
.pricing-grid { margin-top:3.2rem; display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.price-card { background:var(--bg-soft); border:1px solid var(--border); border-radius:22px; padding:1.9rem 1.4rem 2.2rem; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.price-card.highlight { background:linear-gradient(150deg,#1f2e46,#132033 60%); border:1px solid var(--primary); box-shadow:0 0 0 1px rgba(59,130,246,.4),0 8px 26px -4px rgba(0,0,0,.6); }
.price-card .badge { position:absolute; top:0; right:0; background:var(--bg-alt); padding:.5rem .8rem; font-size:.6rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; border-bottom-left-radius:14px; border-left:1px solid var(--border); border-bottom:1px solid var(--border); }
.price-card .badge.accent { background:linear-gradient(120deg,#3b82f6,#8b5cf6); color:#fff; }
.price-card h3 { margin:0 0 .4rem; font-size:1.2rem; }
.price { font-size:2.4rem; font-weight:600; margin:.2rem 0 1.1rem; line-height:1; }
.price small { font-size:.65rem; font-weight:500; color:var(--text-dim); display:block; margin-top:.5rem; letter-spacing:.08em; }
.price.variable span { font-size:1.4rem; }
.price-features { list-style:none; padding:0; margin:0 0 1.8rem; display:flex; flex-direction:column; gap:.55rem; font-size:.85rem; }
.price-features li { position:relative; padding-left:1.1rem; }
.price-features li:before { content:""; position:absolute; left:0; top:.45rem; width:6px; height:6px; border-radius:2px; background:linear-gradient(90deg,#3b82f6,#8b5cf6); }
.footnote { font-size:.7rem; color:var(--text-dim); margin-top:2.5rem; }

/* CTA Final */
.cta-final { background:linear-gradient(160deg,#162133,#0d1117); }
.demo-form { background:var(--bg-soft); border:1px solid var(--border); padding:1.5rem 1.5rem 1.8rem; border-radius:20px; width:min(480px,100%); box-shadow:var(--shadow-1); display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 1rem; }
.demo-form .field { display:flex; flex-direction:column; gap:.4rem; }
.demo-form .field.full { grid-column:1 / -1; }
.demo-form label { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; opacity:.75; }
.demo-form input, .demo-form select, .demo-form textarea { background:var(--bg-alt); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:.7rem .8rem; font:inherit; resize:vertical; }
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus { outline:2px solid #3b82f6; border-color:#3b82f6; }
.form-note { font-size:.7rem; margin:0; grid-column:1 / -1; text-align:center; color:var(--text-dim); }

/* Footer */
.site-footer { background:#0b1017; padding:4rem 0 2rem; border-top:1px solid var(--border); }
.footer-grid { display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.footer-grid h4 { margin:0 0 .8rem; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.footer-grid ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.footer-grid a { color:var(--text-dim); text-decoration:none; font-size:.85rem; }
.footer-grid a:hover { color:var(--text); }
.subfooter { margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--border); font-size:.7rem; color:var(--text-dim); }
.legal-mentions { margin:1.2rem auto 0; max-width:1240px; width:92%; font-size:.6rem; line-height:1.4; color:var(--text-dim); opacity:.8; border-top:1px dashed var(--border); padding:1rem 0 0; }

/* Buttons */
.btn { --btn-bg:var(--bg-alt); --btn-border:var(--border); --btn-color:var(--text); cursor:pointer; user-select:none; border-radius:14px; padding:.85rem 1.15rem; font-weight:600; font-size:.9rem; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; line-height:1.1; position:relative; overflow:hidden; border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--btn-color); transition:filter .2s, background .2s, transform .15s, box-shadow .2s; }
.btn.small { padding:.55rem .9rem; font-size:.75rem; border-radius:11px; }
.btn.tiny { padding:.45rem .65rem; font-size:.65rem; border-radius:9px; font-weight:500; }
.btn.xl { padding:1.1rem 1.5rem; font-size:1rem; }
.btn.primary { --btn-bg:linear-gradient(135deg,#2563eb,#7c3aed); --btn-border:rgba(255,255,255,0.15); --btn-color:#fff; box-shadow:0 4px 14px -4px rgba(99,102,241,.5); }
.btn.primary:hover { filter:brightness(1.08); }
.btn.secondary { --btn-bg:var(--bg-soft); }
.btn.secondary:hover { background:#1e2a3c; }
.btn.ghost { --btn-bg:rgba(255,255,255,0.05); }
.btn.ghost:hover { background:rgba(255,255,255,0.1); }
.btn:active { transform:translateY(1px); }
.btn.w-100 { width:100%; }

.link { color:var(--primary); text-decoration:none; font-weight:500; }
.link:hover { text-decoration:underline; }

/* Utilities */
.w-100 { width:100%; }
.hidden { display:none !important; }

/* Privacy & content page styles */
.narrow h1 { margin-bottom:1rem; }
.narrow h2 { margin-top:2.5rem; }
.narrow h3 { margin-top:1.8rem; font-size:1rem; }
.narrow ul { padding-left:1.3rem; margin:0 0 1.2rem; display:flex; flex-direction:column; gap:.4rem; }
.narrow ul li { font-size:.95rem; color:var(--text-dim); line-height:1.55; }
.narrow p a { color:var(--primary-accent); text-decoration:underline; text-underline-offset:3px; transition:color .2s; }
.narrow p a:hover { color:var(--text); }
.cta-inline { margin-top:2.5rem; }

/* Responsive nav */
@media (max-width:880px) {
  .main-nav { position:fixed; inset:0 0 0 40%; background:rgba(15,22,35,0.97); flex-direction:column; gap:1.4rem; padding:7rem 2rem 2rem; transform:translateX(100%); transition:.45s cubic-bezier(.65,.05,.36,1); backdrop-filter:blur(14px); z-index:50; }
  .main-nav.open { transform:translateX(0); }
  .main-nav a { font-size:1.1rem; }
  .mobile-nav-toggle { display:block; z-index:51; }
  .cta-final .container { flex-direction:column; gap:2rem; }
  .cta-text { text-align:center; }
}

/* Tablet */
@media (max-width:768px) {
  .hero { padding:5rem 0 3.5rem; }
  .section { padding:3.5rem 0; }
  .hero-grid { gap:2.5rem; }
  .split { gap:2rem; }
  .pricing-grid { gap:1.5rem; }
  .demo-form { grid-template-columns:1fr; }
  .footer-grid { gap:1.5rem; }
  .mini-metrics { gap:1.4rem; }
  .container { width:min(1240px,88%); }
}

/* Small mobile */
@media (max-width:480px) {
  .hero { padding:3.5rem 0 2.5rem; }
  .hero h1 { font-size:1.75rem; }
  .section { padding:2.5rem 0; }
  .lead { font-size:1rem; }
  .big { font-size:1.05rem; }
  .mini-metrics { flex-wrap:wrap; gap:1rem; }
  .mini-metrics div { min-width:calc(50% - .5rem); }
  .mini-metrics strong { font-size:1.1rem; }
  .features-grid { grid-template-columns:1fr; gap:1rem; }
  .pricing-grid { grid-template-columns:1fr; }
  .app-preview-card { width:100%; }
  .hero-visual { display:flex; justify-content:center; }
  .site-header .brand-name { font-size:1.15rem; }
  .main-nav { inset:0 0 0 20%; }
  .price { font-size:2rem; }
  .footer-grid { grid-template-columns:1fr; }
  .subfooter { flex-direction:column; gap:.6rem; text-align:center; }
  .legal-mentions { font-size:.55rem; }
  .narrow h2 { font-size:1.25rem; }
  .narrow ul { padding-left:1rem; }
  .panel .bars { height:90px; }
}

/* Feature card hover */
.feature-card { transition:border-color .25s, transform .25s; }
.feature-card:hover { border-color:var(--border-strong); transform:translateY(-3px); }

/* Price card hover */
.price-card { transition:border-color .25s, transform .25s, box-shadow .25s; }
.price-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-2); }

/* Panel hover */
.panel { transition:border-color .25s; }
.panel:hover { border-color:var(--border-strong); }

/* Form inputs transition */
.demo-form input, .demo-form select, .demo-form textarea { transition:border-color .2s, outline .2s; }

/* Animations */
@media (prefers-reduced-motion:no-preference) {
  .hero h1 span { animation:gradPulse 6s linear infinite; }
  @keyframes gradPulse { 0% { filter:hue-rotate(0deg); } 100% { filter:hue-rotate(360deg);} }
  .app-preview-card { animation: float 9s ease-in-out infinite; }
  @keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } }

  /* scroll reveal */
  .feature-card, .price-card, .panel, .split .col { opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease, border-color .25s, box-shadow .25s; }
  .feature-card.visible, .price-card.visible, .panel.visible, .split .col.visible { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
}

/* Accessibility focus */
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#0d1117; }
::-webkit-scrollbar-thumb { background:#1e293b; border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:#334155; }