/* ====== Base Styles ====== */
:root{
  --bg:#0b0c10;
  --paper:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --accent:#0ea5e9;
  --accent-2:#22c55e;
  --cta:#111827;
  --cta-text:#ffffff;
  --ring: rgba(14,165,233,.35);
  --card:#f8fafc;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  color: var(--ink);
  background: #f6f7fb;
  line-height:1.6;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e5e7eb;
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:.6rem;align-items:center;font-weight:700;font-size:1.05rem;color:#0b1324}
.brand img{height:28px;width:auto}
.nav a{margin-left:18px;font-weight:600;color:#0b1324}
.nav .btn {
  background: #0ea5e9;
  margin-left:10px;
  color: #fff;
}

:root {
  --cta: #0ea5e9;
  --cta-text: #ffffff;
}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:12px 18px;border-radius:12px;border:1px solid #0b1324;
  background:var(--cta);color:var(--cta-text);font-weight:700;letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition:.2s transform ease, .2s box-shadow ease, .2s background ease;
}
.btn.secondary{background:#ffffff;color:#0b1324;border-color:#e5e7eb}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.12);text-decoration:none;background: #0284c7;}
.btn:focus{outline:3px solid var(--ring);outline-offset:2px}

.hero{
  background:radial-gradient(1200px 600px at 90% -10%, #e0f2fe 0,#fff 60%);
  border-bottom:1px solid #e5e7eb;
}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;padding:52px 0}
.hero .eyebrow{color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.hero h1{font-size:2.25rem;line-height:1.15;margin:.35rem 0 10px}
.hero p{font-size:1.1rem;color:#334155;margin:0 0 20px}

.badges{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 20px}
.badge{background:#e6f4ff;color:#0b1324;border:1px dashed #bae6fd;padding:7px 10px;border-radius:999px;font-weight:700;font-size:.82rem}

.hero .actions{display:flex;gap:12px;flex-wrap:wrap}

/* Slider */
.slider{position:relative;border-radius:16px;overflow:hidden;background:#0b1324;box-shadow:0 12px 32px rgba(2,6,23,.15)}
.slide{display:none}
.slide.active{display:block;animation:fade .6s ease}
@keyframes fade{from{opacity:.3}to{opacity:1}}
.slider img{width:100%;height:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.slider .controls{position:absolute;inset:auto 0 10px;display:flex;justify-content:center;gap:8px}
.dot{width:10px;height:10px;border-radius:999px;background:#ffffff80;border:1px solid #ffffffa0;cursor:pointer}
.dot.active{background:#fff}

/* Trust Row */
.trust{
  background:#fff;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;
}
.trust .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:26px 0}
.trust .card{
  background:var(--card);padding:16px;border-radius:14px;border:1px solid #e5e7eb;
  display:grid;gap:8px;align-content:start
}
.trust .card h4{margin:0;font-size:1rem}
.trust .card p{margin:0;color:#475569;font-size:.92rem}

/* Experts Section */
.section{padding:42px 0}
.section h2{font-size:1.8rem;margin:0 0 12px}
.kicker{color:var(--muted);font-weight:700;margin-bottom:8px}
.columns{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.columns .col{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px}
.columns .col h3{margin:0 0 8px;font-size:1.05rem}
.columns .col p{margin:0;color:#475569}

/* Process */
.process{
  background:linear-gradient(180deg,#ffffff 0,#f8fafc 100%);
  border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;
}
.process .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.step{padding:16px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;text-align:center;font-weight:700}
.step span{display:block;color:#475569;font-weight:600;margin-top:6px}

/* Footer */
.footer{background:#0b1324;color:#e2e8f0;margin-top:40px}
.footer .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;padding:28px 0}
.footer a{color:#bfdbfe}
.footer small{color:#94a3b8}

/* Responsive */
@media (max-width: 960px){
  .hero .wrap{grid-template-columns:1fr}
  .trust .grid{grid-template-columns:1fr 1fr}
  .columns{grid-template-columns:1fr}
  .process .steps{grid-template-columns:1fr 1fr;gap:10px}
  .footer .grid{grid-template-columns:1fr}
}
.process .flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 24px 0;
}

.process .stage {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  width: 120px;
}

.process .stage img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 8px;
}

.process .stage p {
  margin: 0;
  font-weight: 600;
}

.process .arrow {
  font-size: 1.5rem;
  color: #475569;
}
/* --- Shared tweaks --- */
.lede{font-size:1.1rem;color:#334155;margin:.2rem 0 1rem}

/* Partner section */
.partner{background:#fff;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.columns.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.checklist{margin:0;padding-left:0;list-style:none;display:grid;gap:10px}
.checklist li{
  position:relative;padding-left:28px
}
.checklist li::before{
  content:"";position:absolute;left:0;top:.4rem;width:18px;height:18px;
  border-radius:50%;background:#e6f4ff;border:1px solid #bae6fd;
  box-shadow:inset 0 0 0 4px #0ea5e9;
}

/* Launch section */
.launch{background:linear-gradient(180deg,#f8fafc 0,#ffffff 100%);border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.category-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:14px;
}
.feature-card{
  display:grid;grid-template-columns:180px 1fr;gap:16px;
  padding:16px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;
}
.feature-media img{
  width:100%;height:140px;object-fit:cover;border-radius:12px;background:#f1f5f9
}
.feature-body h3{margin:0 0 6px;font-size:1.1rem}
.bullets{margin:0;padding-left:18px;display:grid;gap:6px}
.bullets li{margin-left:0}

/* Responsive */
@media (max-width: 960px){
  .columns.two{grid-template-columns:1fr}
  .category-grid{grid-template-columns:1fr}
  .feature-card{grid-template-columns:1fr}
  .feature-media img{height:180px}
}
/* --- Pricing Section --- */
.pricing{background:#fff;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.pricing-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:18px;
}
.pricing-cards .card{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:20px;
  text-align:center;
  display:grid;gap:8px;
  box-shadow:0 2px 6px rgba(2,6,23,.04);
}
.pricing-cards .card h3{margin:0;font-size:1.05rem;color:#0b1324}
.pricing-cards .card p{margin:0;color:#475569}

/* Responsive */
@media (max-width: 960px){
  .pricing-cards{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .pricing-cards{grid-template-columns:1fr}
}
/* Header base (desktop stays as-is) */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e5e7eb}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:.6rem;align-items:center;font-weight:700;font-size:1.05rem;color:#0b1324}
.brand img{height:28px;width:auto}
.nav-links{display:flex;align-items:center;gap:18px}
.nav-links a{font-weight:600}
.nav-links a:not(.btn){color:#0b1324}
.nav .btn{color:var(--cta-text)}

/* Mobile menu button (hidden on desktop) */
.nav-toggle{
  display:none; border:1px solid #e5e7eb; background:#fff; border-radius:10px;
  padding:8px 12px; font-size:18px; line-height:1; cursor:pointer;
}

/* ====== Responsive header ====== */
@media (max-width: 880px){
  .nav{gap:12px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  /* collapse links */
  .nav-links{
    position:absolute; left:0; right:0; top:56px; /* just under header row */
    display:none; flex-direction:column; align-items:flex-start; gap:10px;
    background:#fff; border-bottom:1px solid #e5e7eb; padding:12px 20px;
    box-shadow:0 12px 24px rgba(2,6,23,.08);
  }
  .nav-links.open{display:flex}
  /* make the CTA full-width on mobile for easy tap */
  .nav-links .btn{width:100%; justify-content:center}
}

/* Prevent content from hiding under the sticky header on small screens */
@media (max-width: 880px){
  .header + *{scroll-margin-top:76px}
}
/* base layout */
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.nav-links{display:flex;align-items:center;gap:18px}
.nav-links a{font-weight:600}
.nav-links a:not(.btn){color:#0b1324}
.nav .btn{color:var(--cta-text)}

/* toggle button */
.nav-toggle{
  display:none;border:1px solid #e5e7eb;background:#fff;border-radius:10px;
  padding:8px 12px;font-size:18px;line-height:1;cursor:pointer;
}

/* responsive behavior */
@media (max-width: 880px){
  .nav{gap:12px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}

  /* IMPORTANT:
     hide only when JS is available (html.js ...) so no-JS still shows links */
  html.js .nav-links{
    position:absolute; left:0; right:0; top:56px;
    display:none; flex-direction:column; align-items:flex-start; gap:10px;
    background:#fff; border-bottom:1px solid #e5e7eb; padding:12px 20px;
    box-shadow:0 12px 24px rgba(2,6,23,.08); z-index:60;
  }
  html.js .nav-links.open{display:flex}

  .nav-links .btn{width:100%; justify-content:center}
}