:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --stroke:#e2e8f0;

  /* Strato AI palette (same as site) */
  --blue:#2563eb;
  --cyan:#06b6d4;
  --dark:#0b1220;
  --dark2:#0b2a4a;
  --darkText:#e6edf3;
  --darkMuted:#9fb0c2;

  --radius:22px;
  --shadow:0 14px 34px rgba(2,6,23,.08);
  --shadowDark: 0 26px 90px rgba(0,0,0,.42);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(37,99,235,.12), transparent 55%),
    radial-gradient(900px 520px at 80% 24%, rgba(6,182,212,.10), transparent 55%),
    var(--bg);
}
a{ color:inherit; text-decoration:none; }
.container{ max-width:1100px; margin:0 auto; padding:0 18px; }

/* --- Top shell --- */
.shell{ padding:18px 0 24px; }
.shell__inner{
  max-width:1200px;
  margin:0 auto;
  padding:18px;
  border-radius: 28px;
  background:
    radial-gradient(700px 420px at 25% 0%, rgba(37,99,235,.28), transparent 62%),
    radial-gradient(620px 420px at 78% 10%, rgba(6,182,212,.20), transparent 64%),
    linear-gradient(180deg, rgba(11,18,32,.98), rgba(7,10,15,.98));
  border:1px solid rgba(226,232,240,.10);
  box-shadow: var(--shadowDark);
  overflow:hidden;
}
.shell__topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 14px 0; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand__logo{ height:34px; width:auto; display:block; filter: drop-shadow(0 6px 22px rgba(0,0,0,.25)); }
.nav{ display:none; gap:18px; color: var(--darkMuted); font-weight:700; font-size:14px; }
.nav a:hover{ color: var(--darkText); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(34,48,68,.9);
  background: rgba(255,255,255,.04);
  color: var(--darkText);
  font-weight:800;
  font-size:14px;
}
.btn:hover{ transform: translateY(-1px); transition: .12s ease; }
.btn--primary{
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-color: rgba(37,99,235,.65);
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
}
.btn--ghost{ background: transparent; }
.btn--big{ padding:14px 18px; font-size:15px; }

.pill{
  display:inline-flex;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(34,48,68,.75);
  color: var(--darkMuted);
  font-weight:700;
  font-size:13px;
  background: rgba(255,255,255,.03);
}

.hero{ display:grid; gap:22px; padding:26px 14px 18px; }
.hero__copy h1{
  margin:12px 0 10px;
  font-size:38px;
  line-height:1.06;
  letter-spacing:-0.03em;
  color: var(--darkText);
}
.accent{
  background: linear-gradient(90deg, rgba(6,182,212,1), rgba(255,255,255,1));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.lead{ margin:0; color: var(--darkMuted); font-size:16px; line-height:1.65; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }

.hero__stats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.stat{ border:1px solid rgba(34,48,68,.7); border-radius:16px; padding:10px 12px; background: rgba(255,255,255,.03); min-width: 168px; }
.stat__k{ color: var(--darkMuted); font-weight:800; font-size:12px; }
.stat__v{ color: var(--darkText); font-weight:900; font-size:14px; margin-top:2px; }
.hero__logos{ margin-top:10px; color: rgba(230,237,243,.75); font-weight:700; }

.hero__art{ position:relative; min-height: 360px; }
.heroMedia{ position:relative; border-radius: 22px; overflow:hidden; border:1px solid rgba(34,48,68,.7); box-shadow: var(--shadowDark); }
.heroMedia__img{ width:100%; height:360px; object-fit:cover; display:block; filter: saturate(0.95) contrast(1.05); opacity:.86; }
.heroMedia__overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,10,15,.12), rgba(7,10,15,.78)); }

.mockup{
  position:absolute;
  right:16px;
  bottom:-18px;
  width:min(360px, 92%);
  border-radius: 22px;
  border:1px solid rgba(34,48,68,.7);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadowDark);
}
.mockup__screen{ padding:14px; color: var(--darkText); }
.mockup__title{ font-weight:900; margin:2px 0 10px; }
.mockup__row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ padding:7px 10px; border-radius:999px; border:1px solid rgba(34,48,68,.75); background: rgba(255,255,255,.05); color: var(--darkMuted); font-weight:800; font-size:12px; }
.mockup__line{ height:10px; border-radius:999px; background: linear-gradient(90deg, rgba(199,164,75,.35), rgba(27,74,138,.35)); margin:12px 0; }
.mockup__mini{ display:flex; gap:10px; }
.miniCard{ flex:1; border-radius:16px; border:1px solid rgba(34,48,68,.75); background: rgba(255,255,255,.04); padding:10px; }
.miniCard__k{ color: var(--darkMuted); font-weight:800; font-size:12px; }
.miniCard__v{ color: var(--darkText); font-weight:900; margin-top:4px; }
.mockup__note{ margin-top:10px; color: rgba(230,237,243,.82); font-size:13px; line-height:1.45; }

.float{ position:absolute; border-radius:999px; filter: blur(0px); opacity:.55; }
.float--a{ width:90px; height:90px; background: radial-gradient(circle at 30% 30%, rgba(199,164,75,.65), transparent 55%); left:14px; top:40px; }
.float--b{ width:140px; height:140px; background: radial-gradient(circle at 30% 30%, rgba(27,74,138,.65), transparent 60%); right:26px; top:30px; }
.float--c{ width:120px; height:120px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 60%); left:26px; bottom:40px; }

/* Sections */
.section{ padding:44px 0; }
.section--alt{ background: rgba(255,255,255,.72); border-top:1px solid rgba(217,226,239,.7); border-bottom:1px solid rgba(217,226,239,.7); }
.section--dark{ background: linear-gradient(180deg, rgba(13,19,32,.98), rgba(7,10,15,.98)); color: var(--darkText); }

.centerHead{ text-align:center; }
.centerHead--dark{ color: var(--darkText); }
.eyebrow{ display:inline-flex; padding:7px 10px; border-radius:999px; border:1px solid rgba(27,74,138,.18); background: rgba(27,74,138,.08); color: var(--muted); font-weight:900; font-size:12px; }
.eyebrow--dark{ border-color: rgba(34,48,68,.75); background: rgba(255,255,255,.05); color: var(--darkMuted); }
.centerHead h2{ margin:12px 0 6px; font-size:30px; letter-spacing:-0.02em; }
.sub{ color: var(--muted); font-size:16px; line-height:1.65; }
.sub--dark{ color: var(--darkMuted); }

.steps{ display:grid; gap:12px; margin-top:18px; }
.step{ border:1px solid rgba(217,226,239,.9); border-radius: 18px; background:#fff; box-shadow: var(--shadow); padding:16px; }
.step__num{ width:34px; height:34px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: rgba(27,74,138,.10); color: var(--blue); font-weight:1000; }
.step h3{ margin:10px 0 6px; }
.step p{ margin:0; color: var(--muted); line-height:1.55; }

.split{ display:grid; gap:16px; align-items:start; }
.bullets{ margin:14px 0 0; padding-left:18px; color: var(--muted); line-height:1.6; }
.bullets li{ margin:8px 0; }
.row{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }

.cardLite{ border:1px solid rgba(217,226,239,.9); border-radius: 22px; background:#fff; box-shadow: var(--shadow); padding:16px; }
.cardLite__title{ font-weight:1000; margin:0 0 10px; }
.cardLite__grid{ display:grid; gap:10px; }
.cardLite__item b{ display:block; }
.cardLite__item span{ display:block; color: var(--muted); margin-top:2px; }

.plans{ display:grid; gap:12px; margin-top:18px; }
.plan{ border:1px solid rgba(34,48,68,.75); border-radius: 22px; background: rgba(255,255,255,.04); box-shadow: var(--shadowDark); padding:18px; }
.plan__tag{ display:inline-flex; padding:6px 10px; border-radius:999px; border:1px solid rgba(34,48,68,.75); background: rgba(255,255,255,.04); color: var(--darkMuted); font-weight:900; font-size:12px; }
.plan h3{ margin:10px 0 6px; }
.plan .muted{ color: var(--darkMuted); }
.list{ margin:12px 0 0; padding-left:18px; color: var(--darkMuted); line-height:1.6; }
.list li{ margin:8px 0; }
.plan--highlight{ border-color: rgba(199,164,75,.55); }

.darkCta{ margin-top:16px; border:1px solid rgba(34,48,68,.75); border-radius: 22px; padding:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; background: rgba(255,255,255,.04); }
.darkCta__title{ font-weight:1000; }

.faq{ display:grid; gap:10px; }
.faqItem{ border:1px solid rgba(217,226,239,.9); border-radius: 18px; background:#fff; box-shadow: var(--shadow); padding:10px 12px; }
.faqItem summary{ cursor:pointer; font-weight:900; }
.faqItem p{ margin:10px 0 0; color: var(--muted); line-height:1.55; }

.final{ padding:44px 0 70px; }
.final__box{ border:1px solid rgba(217,226,239,.9); border-radius: 26px; background:#fff; box-shadow: var(--shadow); padding:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }

.footer{ padding:18px 0 40px; color: var(--muted); }
.footer__inner{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.footer__links{ display:flex; gap:12px; }

@media (min-width: 940px){
  .nav{ display:flex; }
  .hero{ grid-template-columns: 1.15fr .85fr; align-items:stretch; }
  .steps{ grid-template-columns: repeat(3, 1fr); }
  .split{ grid-template-columns: 1.12fr .88fr; }
  .plans{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .hero__copy h1{ font-size:32px; }
  .mockup{ position:relative; right:auto; bottom:auto; margin-top:12px; width:100%; }
  .heroMedia__img{ height:280px; }
  .final__box{ flex-direction:column; align-items:flex-start; }
  .darkCta{ flex-direction:column; align-items:flex-start; }
}