/* Shared styling for the Pool Pals website — matches the app's look. */
:root{
  --green:#2d6a4f; --green-bright:#52b788; --green-glow:#74c69d;
  --gold:#f4a261;
  --bg:#080c08; --surface:#111711; --surface2:#182018;
  --border:#2a3a2a; --text:#e8f5e9; --muted:#6b8f71;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.65;
  min-height:100vh; overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(45,106,79,.2) 0%,transparent 60%);
}
.wrap{position:relative; z-index:1; max-width:720px; margin:0 auto; padding:40px 22px 80px;}

/* ── header ── */
.site-head{display:flex; align-items:center; gap:12px; margin-bottom:34px;}
.site-head .ball{font-size:34px; line-height:1;}
.brand{
  font-family:'Bebas Neue',sans-serif; font-size:32px; letter-spacing:3px; line-height:1;
  background:linear-gradient(135deg,var(--green-glow),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.tagline{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-top:2px;}

h1{font-family:'Bebas Neue',sans-serif; font-size:38px; letter-spacing:2px; line-height:1.1; margin-bottom:6px;}
h2{font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:1.5px; margin:34px 0 10px; color:var(--green-glow);}
h3{font-size:16px; font-weight:600; margin:22px 0 5px; color:var(--green-glow);}
p{margin-bottom:13px; color:#cfe3d4;}
a{color:var(--green-glow);}
a:hover{color:var(--gold);}
strong{color:var(--text);}
.updated{color:var(--muted); font-size:13px; margin-bottom:26px;}
.lede{font-size:17px; color:var(--muted); margin-bottom:26px;}

.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 22px; margin-bottom:14px;
}
.card h3{margin-top:0;}
.card p:last-child{margin-bottom:0;}

.feature{display:flex; gap:14px; align-items:flex-start; margin-bottom:16px;}
.feature .ic{font-size:24px; line-height:1.3; flex-shrink:0; width:32px; text-align:center;}
.feature .txt strong{display:block; margin-bottom:2px;}
.feature .txt span{color:var(--muted); font-size:14px;}

.btn{
  display:inline-block; background:linear-gradient(135deg,var(--green),var(--green-bright));
  color:#fff; text-decoration:none; font-weight:600; font-size:15px;
  padding:13px 26px; border-radius:11px; margin-top:8px;
}
.btn:hover{color:#fff; opacity:.92;}

.nav-links{
  margin-top:46px; padding-top:22px; border-top:1px solid var(--border);
  display:flex; gap:20px; flex-wrap:wrap; font-size:14px;
}
footer{margin-top:26px; color:var(--muted); font-size:13px;}

@media (max-width:520px){
  h1{font-size:31px;}
  .wrap{padding:30px 18px 60px;}
}