:root {
  --teal: #12A7A1;
  --teal-600: #0E857F;
  --ink: #0f172a;
  --muted: #475569;
  --bg: #f6fbfb;
  --card: #ffffff;
  --ring: rgba(18,167,161,0.25);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; color:var(--ink); background:var(--bg); line-height:1.6; }
a { color:var(--teal); 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,.9); backdrop-filter:blur(8px); border-bottom:1px solid #e2e8f0; }
.nav { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px; }
.brand img { width:36px; height:36px; border-radius:9999px; display:block; }
nav ul { list-style:none; display:flex; gap:20px; margin:0; padding:0; }
nav a { color:var(--ink); font-weight:600; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:9999px; padding:12px 18px; font-weight:700; border:0; cursor:pointer; box-shadow:0 1px 2px rgba(2,8,23,.08); background:var(--teal); color:#fff; }
.btn:hover { background:var(--teal-600); }
.btn.outline { background:transparent; color:var(--teal); border:2px solid var(--teal); } .btn.outline:hover{ background:rgba(18,167,161,.06);}
.hero { position:relative; padding:80px 0 40px; background: radial-gradient(1000px 400px at 50% -100px, rgba(18,167,161,.15), transparent 70%); }
.hero-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; }
.kicker { color:var(--teal-600); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; }
h1 { margin:10px 0 12px; font-size: clamp(2rem, 4vw, 3.25rem); line-height:1.1; }
.lead { font-size:1.125rem; color:var(--muted); }
.coming-soon { font-size:1.125rem; color:var(--teal-600); }
.cta { margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; }
.hero-art { background:var(--card); border-radius:20px; padding:18px; box-shadow:0 10px 30px rgba(2,8,23,.08), 0 2px 6px rgba(2,8,23,.06); }
.hero-art img { width:100%; height:auto; display:block; border-radius:12px; }
section { padding:64px 0; }
.section-title { font-size: clamp(1.5rem, 2.2vw, 2rem); margin:0 0 14px; }
.section-sub { color:var(--muted); margin-top:0; }
.grid { display:grid; gap:20px; } .grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.card { background:var(--card); padding:22px; border-radius:16px; box-shadow: 0 1px 2px rgba(2,8,23,.06), 0 6px 18px rgba(2,8,23,.05); }
.card h3 { margin:0 0 8px; font-size:1.05rem; }
.pill { display:inline-block; padding:2px 8px; font-size:.75rem; border-radius:999px; background:rgba(18,167,161,.12); color:var(--teal-600); font-weight:700; }
.screens { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.screens figure { margin:0; background:var(--card); padding:10px; border-radius:12px; box-shadow:0 1px 2px rgba(2,8,23,.06); }
.screens img { width:100%; height:auto; display:block; border-radius:8px; }
.screens figcaption { font-size:.85rem; color:var(--muted); margin-top:6px; }
.steps { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; counter-reset: step; }
.steps .card { position:relative; padding-left:64px; }
.steps .card::before { counter-increment: step; content: counter(step); position:absolute; left:18px; top:18px; width:32px; height:32px; border-radius:9999px; background:var(--teal); color:#fff; display:grid; place-items:center; font-weight:800; }
footer { padding:36px 0; border-top:1px solid #e2e8f0; background:#fff; color:var(--muted); font-size:.95rem; }
.foot { display:grid; grid-template-columns: 1.2fr 1fr; gap:24px; align-items:center; }
/* Tablet and down */
@media (max-width:980px){
  .hero-grid,
  .foot { grid-template-columns:1fr; }

  .screens { grid-template-columns:1fr 1fr; }
  .grid.cols-3 { grid-template-columns:1fr 1fr; }

  /* NEW: make How it works go to two columns on tablets */
  .steps { grid-template-columns: 1fr 1fr; }
}

/* Mobile */
@media (max-width:640px){
  .screens { grid-template-columns:1fr; }
  .grid.cols-3 { grid-template-columns:1fr; }
  .hero { padding-top:56px; }

  /* NEW: hide header nav on mobile */
  nav ul { display:none; }

  /* NEW: make How it works fully stack on phones */
  .steps { grid-template-columns: 1fr; }
}