/* =========================================================================
   Habit Battery — shared site styles
   One place for all brand tokens. Edit colors/fonts here and every page updates.
   Theme: dark, locked (no section inverts). Accent: battery green.
   ========================================================================= */

:root{
  /* Surfaces (near-black, never pure #000) */
  --bg:        #0B0B0F;
  --bg-2:      #101016;
  --surface:   #15151E;
  --surface-2: #1B1B26;

  /* Lines */
  --line:   rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);

  /* Text */
  --text:  #ECECF2;
  --muted: #9A9AA8;
  --faint: #6B6B78;

  /* Brand */
  --green:      #22C55E;
  --green-soft: #4ADE80;
  --green-deep: #14532D;
  --amber:      #FBBF24;
  --on-green:   #06210F;   /* dark text that sits on the green button */

  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1180px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --ease: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px }

/* ---------- Navigation (single line, <=72px) ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,15,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  height:68px; display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.01em }
.brand img{ width:32px; height:32px; border-radius:9px }
.nav-links{ display:flex; align-items:center; gap:28px; font-weight:600; font-size:15px }
.nav-links a{ color:var(--muted); transition:color .2s }
.nav-links a:hover{ color:var(--text) }
@media (max-width:680px){ .nav-links a:not(.btn){ display:none } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; font-size:15px; line-height:1;
  padding:12px 20px; border-radius:999px; cursor:pointer;
  border:1px solid transparent; transition:transform .15s var(--ease), background .2s, border-color .2s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99) }
.btn-primary{ background:var(--green); color:var(--on-green) }
.btn-primary:hover{ background:var(--green-soft) }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-2) }
.btn-ghost:hover{ border-color:var(--green); color:var(--green-soft) }

/* ---------- Generic section ---------- */
section{ position:relative }
.eyebrow{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green); margin-bottom:14px;
}
h1,h2,h3{ letter-spacing:-.02em; line-height:1.08; margin:0 }
.lead{ color:var(--muted); font-size:clamp(16px,2vw,19px); max-width:60ch }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); background:var(--bg-2); margin-top:0 }
.footer-inner{ padding:54px 0 40px; display:grid; gap:34px; grid-template-columns:1.4fr 1fr 1fr }
.footer h4{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin:0 0 14px }
.footer a{ display:block; color:var(--muted); padding:5px 0; transition:color .2s }
.footer a:hover{ color:var(--text) }
.footer .brand{ margin-bottom:12px }
.footer .tag{ color:var(--faint); font-size:14px; max-width:34ch }
.footer-base{
  border-top:1px solid var(--line); padding:22px 0;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  color:var(--faint); font-size:13.5px;
}
.footer-base a{ color:var(--muted) }
.footer-base a:hover{ color:var(--green-soft) }
@media (max-width:760px){ .footer-inner{ grid-template-columns:1fr 1fr } .footer .brand-col{ grid-column:1/-1 } }

/* ---------- Legal / article pages ---------- */
.legal{ padding:72px 0 90px }
.legal .article{ max-width:720px; margin:0 auto }
.legal .back{ color:var(--muted); font-size:14px; font-weight:600; display:inline-flex; gap:7px; margin-bottom:30px }
.legal .back:hover{ color:var(--green-soft) }
.legal h1{ font-size:clamp(30px,5vw,40px); margin-bottom:10px }
.legal .updated{ color:var(--faint); font-size:14px; margin:0 0 8px }
.legal h2{ font-size:20px; margin:38px 0 6px; color:var(--text) }
.legal p, .legal li{ color:#C7C7D1; font-size:16px }
.legal ul{ padding-left:20px }
.legal li{ margin:6px 0 }
.legal a{ color:var(--green-soft); text-decoration:underline; text-underline-offset:3px }

/* ---------- Support FAQ ---------- */
.faq{ max-width:760px; margin:0 auto; display:grid; gap:12px }
.faq details{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:4px 20px; transition:border-color .2s;
}
.faq details[open]{ border-color:var(--line-2) }
.faq summary{
  cursor:pointer; list-style:none; padding:18px 0; font-weight:700; font-size:17px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; color:var(--green); font-size:22px; font-weight:400; transition:transform .2s }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq .answer{ padding:0 0 20px; color:#C7C7D1; font-size:16px }
.faq .answer a{ color:var(--green-soft); text-decoration:underline; text-underline-offset:3px }

/* ---------- Support contact card ---------- */
.contact-card{
  max-width:760px; margin:40px auto 0; text-align:center;
  background:linear-gradient(180deg,rgba(34,197,94,.10),rgba(34,197,94,.02));
  border:1px solid var(--green-deep); border-radius:var(--radius); padding:38px 28px;
}
.contact-card h3{ font-size:22px; margin-bottom:8px }
.contact-card p{ color:var(--muted); margin:0 0 20px }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}

/* ====================== Polish: atmosphere + details ====================== */

::selection{ background:rgba(34,197,94,.32); color:#fff }

html{ scrollbar-color:rgba(34,197,94,.45) var(--bg-2) }
::-webkit-scrollbar{ width:12px; height:12px }
::-webkit-scrollbar-track{ background:var(--bg-2) }
::-webkit-scrollbar-thumb{ background:rgba(34,197,94,.4); border-radius:99px; border:3px solid var(--bg-2) }
::-webkit-scrollbar-thumb:hover{ background:rgba(34,197,94,.6) }

:focus-visible{ outline:2px solid var(--green-soft); outline-offset:3px; border-radius:6px }

[id]{ scroll-margin-top:88px }

/* Soft green aurora behind everything + a subtle film-grain overlay on top */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(56vw 50vh at 12% 2%, rgba(34,197,94,.05), rgba(34,197,94,0) 80%),
    radial-gradient(52vw 46vh at 90% 92%, rgba(34,197,94,.035), rgba(34,197,94,0) 80%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Animated underline on nav links */
.nav-links a:not(.btn){ position:relative }
.nav-links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px;
  background:var(--green); border-radius:2px; transition:right .25s var(--ease);
}
.nav-links a:not(.btn):hover::after{ right:0 }

/* Built-by-HTI credit (below the footer) */
.hti-credit{ position:relative; z-index:1; border-top:1px solid var(--line); background:var(--bg); padding:24px; text-align:center; }
.hti-credit a{ display:inline-flex; align-items:center; gap:10px; color:var(--faint); font-size:13.5px; font-weight:600; transition:color .2s; }
.hti-credit a:hover{ color:var(--text) }
.hti-credit img{ height:24px; width:auto; transition:transform .25s var(--ease) }
.hti-credit a:hover img{ transform:scale(1.12) }
.hti-credit strong{ color:var(--muted); font-weight:800 }
.hti-credit a:hover strong{ color:var(--green-soft) }