:root{
  --brand:#4338ca;            /* indigo-600 */
  --brand-accent:#06b6d4;     /* cyan-500 */
  --ink:#1f2937;              /* gray-800 */
  --muted:#6b7280;            /* gray-500 */
  --bg:#f8fafc;               /* slate-50 */
  --card:#ffffff;
  --ring: rgba(67,56,202,.2);
}
html, body { background: var(--bg); color: var(--ink); }
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }

/* Typography */
.display{ font-family:"Playfair Display", serif; font-weight:700; font-size: clamp(2.2rem, 4vw, 4rem); line-height:1.05; }
.display-sm{ font-family:"Playfair Display", serif; font-weight:700; font-size: clamp(1.8rem, 3vw, 3rem); line-height:1.08; }
.brand-text { font-weight:800; letter-spacing:.2px; }

/* Hero background with soft gradient + grain */
.bg-hero{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(6,182,212,.18), transparent 60%),
    radial-gradient(1200px 600px at 110% 10%, rgba(67,56,202,.15), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.9));
  position: relative;
  isolation:isolate;
}
.bg-hero::after{
  content:"";
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' opacity='.04'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.5'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events:none;
}

/* Buttons */
.button.is-primary{ background: linear-gradient(135deg, var(--brand), var(--brand-accent)); border:none; }
.button.is-primary:hover{ filter:brightness(1.05); }
.button.is-light{ border:1px solid rgba(31,41,55,.15); }

/* Cards */
.card, .box { border-radius: 16px; box-shadow: 0 10px 30px rgba(2,8,23,.06); }
.device-stack{ display:grid; gap:16px; }
.device-card{ border:1px solid rgba(31,41,55,.08); }
.gradient-card{ background: linear-gradient(145deg, rgba(6,182,212,.08), rgba(67,56,202,.08)); border:1px solid rgba(31,41,55,.08); }

/* Features */
.feature{ display:flex; gap:16px; padding:18px 10px; }
.feature .icon{ flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:rgba(67,56,202,.08); color:var(--brand); }
.feature h3{ margin:0 0 6px; font-weight:600; }
.feature p{ color:var(--muted); }

/* KPI bubbles */
.mini-kpis{ display:flex; gap:28px; flex-wrap:wrap; }
.kpi{ font-weight:800; font-size:1.25rem; color:var(--brand); display:block; }
.mini-kpis small{ color:var(--muted); display:block; }

/* Timeline grid */
.timeline-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:22px; }
.step{ padding:18px; border-radius:16px; background:var(--card); border:1px solid rgba(31,41,55,.08); }
.step-icon{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(6,182,212,.12); color:var(--brand); margin-bottom:10px; }

/* Lists */
.list { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.list li{ display:flex; gap:12px; align-items:flex-start; }
.list i{ color:var(--brand); margin-top:3px; }

/* CTA band */
.cta{ background: linear-gradient(90deg, var(--brand), var(--brand-accent)); color:white; padding:42px 0; }
.cta.alt{ background: linear-gradient(90deg, rgba(67,56,202,.1), rgba(6,182,212,.1)); color:inherit; border-top:1px solid rgba(31,41,55,.08); border-bottom:1px solid rgba(31,41,55,.08); }

/* Footer */
.footer{ background:#0b1220; color:#cbd5e1; padding:48px 0; }
.footer .title{ color:white; }
.foot-links{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.foot-links a{ color:#cbd5e1; }
.foot-links a:hover{ color:white; }

.top-pad{ padding-top:2rem; }

/* Glass effect */
.glass{ background:rgba(255,255,255,.7); backdrop-filter: blur(6px); border:1px solid rgba(31,41,55,.08); }

/* FAQ accordion */
.faq-item + .faq-item{ border-top:1px solid rgba(31,41,55,.08); margin-top:12px; padding-top:12px; }
.faq-q{ background:transparent; border:0; display:flex; align-items:center; justify-content:space-between; width:100%; font-weight:600; padding:8px 0; }
.faq-a{ display:none; color:var(--muted); padding:2px 0 8px; }
.faq-item.open .faq-a{ display:block; }
.faq-item.open .faq-q [data-feather='chevron-down']{ transform:rotate(180deg); transition:transform .2s ease; }

/* Utilities */
.section.alt{ background:white; border-top:1px solid rgba(31,41,55,.08); border-bottom:1px solid rgba(31,41,55,.08); }
hr.is-divider{ border:0; height:1px; background:rgba(31,41,55,.08); }