:root {
  --ink: #0d2d57;
  --ink-deep: #071f4a;
  --green: #0b5b3c;
  --blue: #1678e8;
  --sky: #eef7ff;
  --muted: #617188;
  --line: #dfe7f0;
  --bg: #f5f7fb;
  --white: #ffffff;
  --soft-green: #edf8f2;
  --shadow: 0 24px 70px rgba(7,31,74,.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  color: var(--ink-deep);
  background: white;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.nav {
  position: sticky; top: 0; z-index: 30;
  min-height: 74px; display: flex; align-items: center; gap: 30px;
  padding: 10px max(24px, calc((100vw - 1180px)/2));
  background: rgba(255,255,255,.90); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(223,232,242,.85);
}
.brand { display:flex; align-items:center; gap:10px; font-weight:850; font-size:20px; margin-right:auto; }
.brand img { width:38px; height:38px; object-fit:cover; border-radius:10px; }
nav { display:flex; gap:22px; font-size:13px; font-weight:700; color:#385572; }
nav a:hover { color:var(--green); }
.button {
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0f315c,#0a5b42); color:white;
  min-height:48px; padding:0 22px; border-radius:14px; font-weight:800;
  box-shadow:0 12px 28px rgba(15,49,92,.20);
  transition: transform .18s ease, box-shadow .18s ease;
}
.button:hover { transform: translateY(-1px); box-shadow:0 16px 34px rgba(15,49,92,.24); }
.button.small { min-height:40px; padding:0 16px; border-radius:12px; font-size:14px; }
.button.ghost { color:var(--ink-deep); background:white; border:1px solid var(--line); box-shadow:none; }
.hero {
  max-width:1180px; margin:0 auto; padding:76px 24px 78px;
  display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:76px;
}
.eyebrow { letter-spacing:.15em; font-size:12px; font-weight:900; color:var(--green); margin-bottom:14px; }
h1 { font-size:clamp(54px,7vw,88px); line-height:.96; letter-spacing:-.055em; margin:0 0 28px; }
h1 span { color:var(--green); }
h2 { font-size:clamp(34px,4vw,54px); line-height:1.05; letter-spacing:-.04em; margin:0 0 18px; }
h3 { margin:0 0 8px; font-size:21px; letter-spacing:-.02em; }
.lead { font-size:20px; color:#52657d; max-width:660px; }
.lead.smaller { font-size:18px; }
.hero-badges { display:flex; gap:8px; flex-wrap:wrap; margin:25px 0 0; }
.hero-badges span { border:1px solid #d8e4ee; background:#f8fbfd; border-radius:999px; padding:8px 11px; font-size:12px; font-weight:800; color:#36526d; }
.hero-actions { display:flex; gap:12px; margin:27px 0 14px; flex-wrap:wrap; }
.micro { color:#718096; font-size:13px; }
.hero-visual { position:relative; display:flex; justify-content:center; align-items:center; min-height:650px; }
.hero-shot {
  width:min(360px, 80vw); border-radius:48px; position:relative; z-index:2;
  box-shadow:0 35px 80px rgba(7,31,74,.22); border:1px solid rgba(13,45,87,.12);
  transform:rotate(1.4deg);
}
.device-shadow { position:absolute; width:330px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(49,107,84,.18), rgba(49,107,84,0) 68%); filter:blur(8px); transform:translate(20px,60px); }
.floating-card {
  position:absolute; z-index:3; background:rgba(255,255,255,.96); border:1px solid rgba(223,231,240,.9);
  box-shadow:0 14px 40px rgba(7,31,74,.13); border-radius:16px; padding:12px 15px; min-width:118px;
  display:flex; flex-direction:column;
}
.floating-card strong { font-size:18px; color:var(--ink-deep); }
.floating-card span { font-size:11px; color:var(--muted); font-weight:700; }
.float-one { left:4px; bottom:105px; }
.float-two { right:-5px; top:115px; }
.trust {
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; justify-content:center; gap:clamp(18px,6vw,70px); padding:21px 24px;
  color:#61738a; font-size:13px; font-weight:750; flex-wrap:wrap;
}
.section { max-width:1180px; margin:0 auto; padding:100px 24px; }
.section-heading { max-width:800px; margin-bottom:48px; }
.section-heading p { font-size:18px; color:var(--muted); }
.cards { display:grid; gap:22px; }
.cards.three { grid-template-columns:repeat(3,1fr); }
.card { border:1px solid var(--line); border-radius:24px; padding:30px; box-shadow:0 12px 40px rgba(7,31,74,.055); background:#fff; }
.card p, .features-grid p { color:var(--muted); margin-bottom:0; }
.icon {
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--soft-green); color:var(--green); font-weight:900; font-size:21px; margin-bottom:22px;
}
.shaded { max-width:none; background:var(--bg); padding-left:max(24px,calc((100vw - 1180px)/2)); padding-right:max(24px,calc((100vw - 1180px)/2)); }
.features-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 48px; }
.features-grid article { display:flex; gap:18px; padding:22px 0; border-top:1px solid var(--line); }
.features-grid > article > span { color:var(--green); font-weight:900; font-size:13px; margin-top:4px; }
.features-grid h3 { margin-bottom:4px; }
.features-grid p { margin-top:0; }
.stripe-note {
  display:flex; align-items:center; gap:15px; background:white; border:1px solid var(--line); border-radius:18px; padding:18px 20px; margin-top:34px; max-width:820px;
}
.stripe-mark { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#635bff; color:#fff; font-weight:900; font-size:20px; flex:0 0 auto; }
.stripe-note div:last-child { display:flex; flex-direction:column; }
.stripe-note span { color:var(--muted); font-size:13px; }
.screens { padding-bottom:80px; }
.screen-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.screen-card { margin:0; border:1px solid var(--line); background:#f7f8fb; border-radius:28px; padding:16px; box-shadow:0 18px 55px rgba(7,31,74,.08); overflow:hidden; }
.screen-card img { width:100%; border-radius:21px; border:1px solid rgba(13,45,87,.08); }
.screen-card figcaption { display:flex; flex-direction:column; gap:3px; padding:15px 6px 3px; }
.screen-card figcaption strong { font-size:18px; }
.screen-card figcaption span { color:var(--muted); font-size:13px; }
.screen-card.featured-shot { transform:translateY(-20px); }
.screen-card.wide { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.7fr) minmax(220px,.7fr); gap:25px; align-items:center; padding:20px; margin-top:12px; }
.screen-card.wide img { border-radius:22px; }
.screen-card.wide figcaption { padding:20px; }
.screen-card.wide figcaption strong { font-size:26px; }
.screen-card.wide figcaption span { font-size:15px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.less-admin { padding-top:55px; }
.flow { display:grid; gap:12px; }
.flow div { display:flex; align-items:center; gap:16px; border:1px solid var(--line); padding:17px; border-radius:16px; }
.flow b { width:34px;height:34px;border-radius:50%;background:var(--soft-green);color:var(--green);display:grid;place-items:center; flex:0 0 auto; }
.compare { padding-top:80px; }
.comparison-wrap { border:1px solid var(--line); border-radius:24px; overflow:auto; box-shadow:0 15px 50px rgba(7,31,74,.06); }
.comparison-table { width:100%; border-collapse:collapse; min-width:930px; background:#fff; font-size:13px; }
.comparison-table th, .comparison-table td { padding:17px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.comparison-table thead th { background:#f5f7fb; font-size:13px; color:#4b6077; }
.comparison-table tbody th { width:190px; font-size:13px; color:#36516d; }
.comparison-table .clearround-col { background:#f0f8f4; }
.comparison-table thead .clearround-col { color:var(--green); }
.comparison-table td small { display:block; color:var(--muted); margin-top:2px; }
.simple-badge { display:inline-block; border-radius:999px; padding:5px 8px; background:#dff2e7; color:#095639; font-weight:800; font-size:11px; }
.comparison-note { color:#7c8898; font-size:11px; margin:12px 3px 0; }
.focus-banner { margin-top:42px; border-radius:26px; padding:34px; background:linear-gradient(135deg,#0d2f59,#0b5c3f); color:white; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.focus-banner .eyebrow { color:#95e2bf; margin-bottom:10px; }
.focus-banner h3 { font-size:26px; line-height:1.15; margin:0; }
.focus-banner p { color:#d6e7e0; margin:0; font-size:16px; }
.focus-banner p strong { color:#fff; }
.pricing { padding-top:70px; }
.pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:900px; }
.price-card { border:1px solid var(--line); border-radius:24px; padding:34px; position:relative; background:#fff; }
.price-card.featured { border:2px solid var(--green); box-shadow:0 20px 60px rgba(11,91,60,.12); }
.plan { font-weight:850; font-size:20px; margin:0; }
.price { font-size:52px; font-weight:900; letter-spacing:-.05em; margin:10px 0; }
.price small { font-size:15px; color:var(--muted); letter-spacing:0; }
.price-card > p:not(.plan) { color:var(--muted); }
.price-card ul { list-style:none; padding:0; margin:24px 0 0; }
.price-card li { margin:12px 0; }
.price-card li:before { content:"✓"; color:var(--green); font-weight:900; margin-right:10px; }
.pill { position:absolute; right:20px; top:20px; background:var(--soft-green); color:var(--green); border-radius:999px; font-size:9px; font-weight:900; letter-spacing:.08em; padding:7px 10px; }
.faq { max-width:850px; }
details { border-top:1px solid var(--line); padding:20px 0; }
details:last-child { border-bottom:1px solid var(--line); }
summary { cursor:pointer; font-weight:800; font-size:17px; }
details p { color:var(--muted); max-width:720px; }
.cta {
  max-width:1180px; margin:30px auto 90px; padding:42px; border-radius:28px;
  background:linear-gradient(135deg,#071f4a,#0a4d38); color:white; display:grid;
  grid-template-columns:auto 1fr auto; gap:24px; align-items:center;
}
.cta img { width:86px; height:86px; border-radius:21px; object-fit:cover; }
.cta .eyebrow { color:#90dfb9; }
.cta h2 { font-size:34px; margin-bottom:8px; }
.cta p { color:#c4ddda; margin:0; }
.button.inverse { background:white;color:var(--ink-deep);box-shadow:none; }
footer {
  max-width:1180px; margin:0 auto; padding:30px 24px 50px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; color:var(--muted); font-size:13px;
}
footer div { display:flex; gap:18px; }

@media (max-width: 1040px) {
  nav { gap:14px; }
  nav a:nth-child(4) { display:none; }
  .hero { gap:42px; }
  .float-one { left:-8px; }
  .float-two { right:-8px; }
}
@media (max-width: 850px) {
  .nav nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:55px; text-align:center; gap:38px; }
  .hero-copy .lead { margin-left:auto; margin-right:auto; }
  .hero-actions, .hero-badges { justify-content:center; }
  .hero-visual { min-height:auto; padding:20px 0 35px; }
  .hero-shot { width:min(330px, 78vw); }
  .float-one { left:calc(50% - 210px); bottom:80px; }
  .float-two { right:calc(50% - 205px); top:80px; }
  .cards.three, .features-grid, .split, .pricing-grid { grid-template-columns:1fr; }
  .split { gap:40px; }
  .screen-grid { grid-template-columns:1fr 1fr; }
  .screen-card.featured-shot { transform:none; }
  .screen-card.wide { grid-template-columns:1fr; }
  .focus-banner { grid-template-columns:1fr; gap:18px; }
  .cta { margin:20px 16px 70px; grid-template-columns:1fr; text-align:center; }
  .cta img { margin:auto; }
}
@media (max-width: 560px) {
  .nav { min-height:66px; padding:8px 16px; }
  .brand span { font-size:18px; }
  .nav .button.small { display:none; }
  .hero { padding:48px 18px 52px; }
  h1 { font-size:54px; }
  .hero-visual { overflow:visible; }
  .hero-shot { width:286px; border-radius:39px; }
  .floating-card { padding:9px 11px; min-width:100px; }
  .floating-card strong { font-size:15px; }
  .float-one { left:2px; bottom:70px; }
  .float-two { right:0; top:62px; }
  .section { padding:75px 18px; }
  .shaded { padding-left:18px; padding-right:18px; }
  .screen-grid { grid-template-columns:1fr; }
  .screen-card { max-width:390px; width:100%; margin-left:auto; margin-right:auto; }
  .screen-card.wide { grid-column:auto; max-width:none; }
  .screen-card.wide figcaption { padding:8px 4px 3px; }
  .screen-card.wide figcaption strong { font-size:20px; }
  .focus-banner { padding:26px; }
  .focus-banner h3 { font-size:22px; }
  .price { font-size:46px; }
  .pill { position:static; display:inline-block; margin-bottom:14px; }
  .cta h2 { font-size:28px; }
  footer { margin:0 18px; padding-left:0; padding-right:0; flex-direction:column; gap:14px; }
}