:root{
  --bg:#f5f7f2;
  --bg-2:#eef4e8;
  --surface:#ffffff;
  --surface-2:#f7faf4;
  --text:#152033;
  --muted:#5d6879;
  --line:#dbe5d3;
  --primary:#97e34f;
  --primary-2:#79cf34;
  --primary-deep:#245b13;
  --dark:#101828;
  --shadow:0 18px 50px rgba(16,24,40,.08);
  --shadow-soft:0 8px 22px rgba(16,24,40,.06);
  --radius:28px;
  --radius-md:22px;
  --radius-sm:16px;
  --container:1200px;
  --content:820px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(151,227,79,.18), transparent 22%),
    radial-gradient(circle at 85% 15%, rgba(121,207,52,.14), transparent 20%),
    linear-gradient(180deg,#fbfcfa 0%, var(--bg) 45%, #f2f6ee 100%);
  line-height:1.6;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
p{margin:0 0 1rem}
h1,h2,h3{margin:0 0 1rem;line-height:1.04;letter-spacing:-.04em}
h1{font-size:clamp(2.8rem,7vw,5.8rem);font-weight:900}
h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:850}
h3{font-size:clamp(1.2rem,2vw,1.55rem);font-weight:800}
small{display:block}

.container{width:min(calc(100% - 2rem),var(--container));margin:0 auto}
.content{width:min(calc(100% - 2rem),var(--content));margin:0 auto}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{
  left:1rem;
  top:1rem;
  background:#fff;
  padding:.75rem 1rem;
  border-radius:12px;
  z-index:999;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(250,252,247,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(219,229,211,.9);
}

.header-inner{
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{
  font-size:clamp(1.35rem,2.2vw,1.7rem);
  font-weight:900;
  letter-spacing:-.05em;
  display:inline-flex;
  align-items:center;
  gap:.75rem;
}

.brand-mark{
  width:14px;
  height:14px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 0 0 6px rgba(151,227,79,.18);
}

.nav{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap}
.nav a{font-weight:700;color:#223047}
.nav a.active,.nav a:hover{color:var(--primary-deep)}
.nav .nav-cta{
  padding:.7rem 1rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
}

.hero{padding:3.4rem 0 2rem}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2.3rem;align-items:center}

.kicker,.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:linear-gradient(180deg,#eef8e6,#e5f3db);
  border:1px solid #cfe7bf;
  color:var(--primary-deep);
  padding:.55rem 1rem;
  border-radius:999px;
  font-weight:800;
  margin-bottom:1.2rem;
}

.hero h1 .accent,
.page-hero h1 .accent{
  color:var(--primary);
}


.lead{font-size:clamp(1.1rem,2vw,1.45rem);color:#344054;max-width:18em}

.button-row,.cta-row,.store-actions{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
  margin-top:1.4rem;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:56px;
  padding:0 1.25rem;
  border-radius:18px;
  font-weight:800;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.button-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#16310c;border:none}
.button-secondary{background:#fff}
.button-ghost{background:transparent;box-shadow:none}
.button-dark{background:#101828;color:#fff;border:none}

.helper,.muted{color:var(--muted)}

.feature-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 1.5rem;
  list-style:none;
  padding:0;
  margin:1.5rem 0 0;
}

.feature-list li{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  font-weight:750;
  font-size:1rem;
  color:#273444;
}

.check{
  width:28px;
  height:28px;
  border-radius:999px;
  background:#dff3d4;
  color:#2c8b2d;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  font-weight:900;
}

.phone-stage{
  position:relative;
  background:
    radial-gradient(circle at 60% 50%, rgba(121,207,52,.18), transparent 36%),
    linear-gradient(135deg,#eef6e8,#f8fbf6);
  border:1px solid #dce8d5;
  border-radius:36px;
  padding:1.25rem;
  box-shadow:var(--shadow);
}

.phone-collage{display:flex;align-items:flex-end;justify-content:center;gap:1rem}
.phone-collage img{
  border-radius:30px;
  box-shadow:0 20px 50px rgba(17,24,39,.16);
  border:1px solid rgba(16,24,40,.08);
}
.phone-collage .phone-a{width:28%}
.phone-collage .phone-b{width:31%;transform:translateY(18px)}
.phone-collage .phone-c{width:31%}

.metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  margin-top:1.5rem;
}

.metric{
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius:20px;
  padding:1rem;
  box-shadow:var(--shadow-soft);
}

.metric strong{
  display:block;
  font-size:2rem;
  line-height:1;
  margin-bottom:.35rem;
}

.section{padding:2.3rem 0}
.section-alt{
  background:linear-gradient(180deg, rgba(239,245,232,.58), rgba(245,247,242,0));
  border-top:1px solid rgba(219,229,211,.7);
  border-bottom:1px solid rgba(219,229,211,.7);
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:1rem;
  margin-bottom:1.3rem;
}

.grid-3,.card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2rem;
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.2rem;
}

.card,.mini-card,.text-card,.app-card,.ad-slot,.screenshot-card{
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:var(--shadow-soft);
}

.card,.app-card,.text-card,.screenshot-card{padding:1.3rem}
.mini-card{padding:.8rem}
.mini-card img,.screenshot-card img,.app-card .app-shot{border-radius:22px;background:#f2f4f7}

.card .icon,.pill-icon{
  width:52px;
  height:52px;
  border-radius:18px;
  background:#ebf8e0;
  color:#2d7a18;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  margin-bottom:.85rem;
}

.layout-main{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.35rem;
}

.app-card .meta{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
}

.app-logo{
  width:72px;
  height:72px;
  border-radius:18px;
  background:linear-gradient(135deg,#f0fbeb,#d9f4c1);
  border:1px solid #cce8b4;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex:0 0 72px;
  box-shadow:0 8px 20px rgba(31,41,55,.08);
}

.app-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.app-card .tag-row,.tag-row{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin:.9rem 0 1rem;
}

.tag{
  padding:.38rem .7rem;
  border-radius:999px;
  background:#f4f7f2;
  border:1px solid var(--line);
  font-weight:700;
  color:#42526a;
  font-size:.92rem;
}

.app-shot{margin-top:1rem}
.app-shot img{width:100%;border-radius:22px}

.app-card-store .store-actions{
  align-items:center;
  margin:1rem 0 1.25rem;
}

.appstore-link{
  display:inline-flex;
  align-items:center;
}

.appstore-badge{
  height:48px;
  width:auto;
  display:block;
}

.store-note{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:0 1rem;
  border-radius:14px;
  background:#f4f7f2;
  border:1px solid var(--line);
  color:#42526a;
  font-weight:700;
}

.play-soon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:0 1rem;
  border-radius:18px;
  background:#f4f7f2;
  border:1px dashed #c8d8bf;
  color:#42526a;
  font-weight:800;
}

.ad-slot{
  padding:1rem 1.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  text-align:center;
  background:linear-gradient(180deg,#f8fbf6,#f2f8ed);
}

.ad-slot strong{display:block;font-size:1.15rem}

.page-hero{padding:3.4rem 0 1.4rem;text-align:center}
.page-hero p{max-width:44rem;margin:0 auto}

.prose{font-size:1.06rem}
.prose h2{font-size:1.8rem;margin-top:2rem}
.prose h3{font-size:1.35rem;margin-top:1.4rem}
.prose ul{margin:0 0 1rem 1.2rem}

.app-hero{padding:3rem 0}
.app-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.app-brand{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.app-brand img{width:72px;height:72px;border-radius:18px}

.screenshot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}

.site-footer{
  padding:2.2rem 0 3rem;
  border-top:1px solid rgba(219,229,211,.8);
  margin-top:2rem;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.3fr .8fr .8fr;
  gap:1.2rem;
}

.footer-links a{
  display:block;
  margin:.35rem 0;
  color:#344054;
  font-weight:650;
}

.cookie-banner{
  position:fixed;
  left:1rem;
  right:1rem;
  bottom:1rem;
  z-index:70;
  max-width:820px;
  margin:auto;
  background:rgba(16,24,40,.96);
  color:#fff;
  border-radius:24px;
  padding:1rem 1.1rem;
  box-shadow:0 22px 60px rgba(0,0,0,.28);
  display:none;
}

.cookie-banner.show{display:block}

.cookie-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:1rem;
}

.cookie-actions button,.cookie-actions a{
  min-height:46px;
  padding:0 1rem;
  border-radius:14px;
  border:none;
  font-weight:800;
  cursor:pointer;
}

.cookie-actions .accept{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#17310d}
.cookie-actions .decline{background:#fff;color:#111827}
.cookie-actions .learn{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}

.note-box{
  background:#f8fbf5;
  border:1px solid var(--line);
  padding:1rem 1.1rem;
  border-radius:18px;
}

/* About page enhancements */

.about-hero{padding-bottom:1.25rem}

.about-layout{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:1.5rem;
  align-items:start;
}

.about-summary-card{
  position:sticky;
  top:110px;
  background:rgba(255,255,255,.88);
  border:1px solid #dbe5d3;
  border-radius:24px;
  padding:1.3rem;
  box-shadow:0 8px 22px rgba(16,24,40,.06);
}

.about-summary-card h2{
  font-size:1.35rem;
  margin-bottom:1rem;
}

.about-summary-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.85rem;
}

.about-summary-list li{
  padding:.85rem .95rem;
  background:#f8fbf5;
  border:1px solid #dbe5d3;
  border-radius:18px;
  line-height:1.5;
}

.about-company{
  margin:1rem 0 1.5rem;
}

.about-company-link{
  display:inline-block;
}

.about-company-logo{
  max-width:260px;
  height:auto;
  display:block;
}

.text-card{
  padding:2rem;
  background:rgba(255,255,255,.9);
  border-radius:24px;
  border:1px solid #dbe5d3;
}

.prose p{
  font-size:1.05rem;
  line-height:1.68;
}

.prose h2{
  margin-top:2rem;
}

.note-box{
  margin:1.5rem 0;
}

@media (max-width: 980px){
  .hero-grid,.app-hero-grid,.layout-main,.grid-3,.grid-2,.card-grid,.screenshot-grid,.footer-grid,.metrics,.about-layout{
    grid-template-columns:1fr;
  }
  .phone-collage .phone-a,.phone-collage .phone-b,.phone-collage .phone-c{width:30%}
  .section-head,.header-inner{align-items:flex-start}
  .header-inner{flex-direction:column;padding:.8rem 0}
  .nav{width:100%}
  .about-summary-card{position:static}
}

@media (max-width: 720px){
  h1{font-size:clamp(2.3rem,12vw,4rem)}
  .feature-list{grid-template-columns:1fr}
  .phone-collage{gap:.5rem}
  .phone-collage .phone-a,.phone-collage .phone-b,.phone-collage .phone-c{width:32%}
  .button,.cookie-actions button,.cookie-actions a,.store-note,.play-soon{width:100%}
}