:root{
  --cream:#F4F1EC; --sage:#5B6B54; --sage-d:#4a5845; --ink:#3A4434;
  --gold:#C8A24C; --navy:#0E1A33; --muted:#7a766c; --line:#e3ded4;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--ink); line-height:1.65;
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--cream) url("img/bg.jpg") repeat; background-size:420px;
}
a{color:var(--sage); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1000px; margin:0 auto; padding:0 24px;}

/* nav */
.nav{display:flex; align-items:center; gap:14px; padding:16px 24px; max-width:1000px; margin:0 auto;}
.nav .logo{width:40px; height:40px; border-radius:11px; box-shadow:0 2px 8px rgba(0,0,0,.18);}
.nav .brand{font-weight:800; font-size:1.25rem; color:var(--ink); letter-spacing:.2px;}
.nav .spacer{flex:1;}
.nav .links a{margin-left:20px; font-weight:600; color:var(--sage-d);}
@media(max-width:560px){.nav .links{display:none;}}

/* hero */
.hero{text-align:center; padding:8px 0 6px;}
.hero img{width:100%; max-width:920px; border-radius:20px; box-shadow:0 12px 36px rgba(0,0,0,.14);}
.tagline{text-align:center; font-size:1.5rem; color:var(--sage); font-weight:700; margin:30px 0 8px;}
.lead{text-align:center; max-width:660px; margin:0 auto 26px; font-size:1.08rem; color:#4a4a44;}
.cta{text-align:center; margin:6px 0 14px;}
.btn{display:inline-block; background:var(--sage); color:#fff!important; padding:15px 30px;
  border-radius:999px; font-weight:700; font-size:1.05rem; box-shadow:0 6px 18px rgba(91,107,84,.35);}
.btn:hover{text-decoration:none; background:var(--sage-d);}
.btn.alt{background:#fff; color:var(--sage)!important; box-shadow:0 4px 14px rgba(0,0,0,.08);}
.note{text-align:center; color:var(--muted); font-size:.85rem; margin-bottom:36px;}

/* sections */
section{padding:30px 0;}
h2{text-align:center; color:var(--ink); font-size:1.7rem; margin:0 0 22px;}
.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;}
.card{background:#fff; border-radius:16px; padding:22px; box-shadow:0 4px 16px rgba(0,0,0,.06);}
.card h3{margin:0 0 6px; color:var(--sage);}

/* screenshots — shown in tablet device frames */
.shot-feature{margin:0 auto 36px; max-width:720px;}
.shot-feature figcaption{text-align:center; color:var(--sage-d); font-weight:600; margin-top:14px;}

.shots{display:flex; flex-wrap:wrap; justify-content:center; gap:26px;}
.shot{width:clamp(190px,30%,300px); margin:0;}
.shot figcaption{text-align:center; color:var(--sage-d); font-weight:600; font-size:.92rem; margin-top:11px;}

/* tablet bezel */
.frame{position:relative; background:linear-gradient(150deg,#243653,#0E1A33);
  border-radius:24px; padding:14px; line-height:0;
  box-shadow:0 14px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);}
.shot-feature .frame{border-radius:30px; padding:20px;}
.frame img{width:100%; height:auto; display:block; border-radius:9px;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);}
/* front-camera dot, centred on the top bezel */
.frame::before{content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.28);}
.shot-feature .frame::before{top:8px;}

/* content pages */
.page{background:#fff; border-radius:18px; padding:28px 30px; margin:18px 0 40px; box-shadow:0 4px 16px rgba(0,0,0,.06);}
.page h1{color:var(--sage); margin-top:0;}
.page h3{color:var(--ink);}

/* footer */
footer{border-top:1px solid var(--line); margin-top:24px; padding:26px 0 44px; text-align:center; color:var(--muted); font-size:.92rem;}
footer .fnav a{margin:0 10px; color:var(--sage-d); font-weight:600;}
footer .badge{width:54px; height:54px; border-radius:14px; margin-bottom:8px; box-shadow:0 2px 8px rgba(0,0,0,.15);}