:root{
  --bg-start:#9fd8ff;
  --bg-end:#ffc198;
  --card:#f7f2e8;
  --text:#254053;
  --muted:#516b7a;
  --accent:#4cc577;
  --accent-600:#39b264;
  --blue:#6fc3ff;
  --yellow:#ffd36a;
  --red:#ff9a9a;
  --green:#b9e6a8;
  --radius-lg:28px;
  --radius-md:18px;
  --shadow:0 10px 30px rgba(0,0,0,.15);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: linear-gradient(180deg,var(--bg-start),var(--bg-end)) fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{width:100%;max-width:960px;margin:0 auto;padding:0 20px}

.site-header{position:sticky;top:0;backdrop-filter:saturate(140%) blur(6px);background:rgba(255,255,255,.2)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:700}
.brand-name{font-size:18px}
.site-nav a{color:var(--text);text-decoration:none;margin-left:16px}
.site-nav a:focus,.site-nav a:hover{text-decoration:underline}

.main{padding:24px 0 48px}
.hero{padding:20px 0 40px}
.hero-inner{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.hero-copy h1{font-size:40px;line-height:1.1;margin:0 0 12px}
.tagline{font-size:18px;color:var(--muted);margin:0 0 20px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:9999px;text-decoration:none;font-weight:700;border:2px solid transparent;min-height:44px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-600)}
.btn-primary:focus{outline:3px solid #fff;box-shadow:0 0 0 3px var(--accent-600)}
.btn-ghost{background:transparent;border-color:rgba(37,64,83,.25);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.35)}

.hero-visual{display:flex;justify-content:center}
.hero-shots{position:relative;display:flex;justify-content:center;z-index: -10;}
.shot.phone{position:relative;z-index:-10}
.device{margin:0}
.device .bezel{position:relative;background:#111;border-radius:28px;padding:16px;box-shadow:var(--shadow)}
.device .screen{overflow:hidden;border-radius:20px;background:#000}
.device .screen img{display:block;width:100%;height:auto}
.device.phone{width:min(100px,40vw)}
.device.phone .bezel{border-radius:32px}
.device.phone .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:42%;height:16px;background:#111;border-bottom-left-radius:10px;border-bottom-right-radius:10px}
.device.tablet{width:min(360px,62vw)}
.device.tablet .bezel{padding:18px;border-radius:26px}
.device.tablet .camera{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:8px;height:8px;background:#2a2a2a;border-radius:50%;}

.section{padding:36px 0}
.section.alt{background:rgba(255,255,255,.3)}
.feature-list,.audience-list{margin:12px 0 0;padding-left:20px}
.feature-list li,.audience-list li{margin:6px 0}
.cta-center{margin-top:18px;display:flex;justify-content:center}
.screens-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:14px}
.screens-grid figure{margin:0}
.screens-grid img{width:100%;height:auto;border-radius:16px;box-shadow:var(--shadow);background:#fff}
.screens-grid figcaption{text-align:center;font-size:14px;color:var(--muted);margin-top:6px}

.site-footer{padding:18px 0}
.site-footer .container{display:flex;align-items:center;justify-content:space-between}
.site-footer a{color:var(--text)}
.footnote{margin:0;color:var(--muted)}

@media (min-width:720px){
  .hero-inner{grid-template-columns:1.1fr .9fr;gap:36px}
  .hero-copy h1{font-size:48px}
  .device.phone{width:210px}
  .device.tablet{width:420px;transform:translateY(10px)}
  .screens-grid{grid-template-columns:repeat(2,1fr)}
}

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