/* Album Scanner - home, contact and privacy pages (same palette as the app) */
:root{
  --bg:#14161b;--panel:#1b1e25;--panel2:#232731;--raised:#2a2f3a;--border:#313745;
  --text:#e9ebf1;--muted:#98a0b3;--faint:#6b7386;--accent:#5b8cff;--accent-hi:#7aa2ff;--accent-lo:#2b3d66;
  --good:#37c98b;--warn:#f2a33a;--danger:#ff5f5f;
  --radius:12px;--max:1120px;
  font-family:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,-apple-system,sans-serif;
  color:var(--text);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent-hi);text-decoration:none}a:hover{color:#fff}
img,svg{max-width:100%}
.wrap{width:min(var(--max),100% - 40px);margin-inline:auto}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.site-head{position:sticky;top:0;z-index:10;background:rgba(20,22,27,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.site-head .wrap{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;color:var(--text);white-space:nowrap}
.brand:hover{color:var(--text)}
.nav{display:flex;gap:22px;margin-left:auto;font-size:15px}
.nav a{color:var(--muted)}.nav a:hover,.nav a[aria-current]{color:var(--text)}
@media (max-width:720px){.nav a.hide-sm{display:none}.site-head .wrap{gap:14px}.site-head .btn{padding:8px 12px;font-size:14px}}

/* buttons + fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:15px;font-weight:600;
  padding:10px 18px;border-radius:10px;border:1px solid var(--border);background:var(--raised);color:var(--text);cursor:pointer;white-space:nowrap}
.btn:hover{background:#333948;color:var(--text)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn.big{padding:13px 24px;font-size:16px}
.btn:disabled{opacity:.6;cursor:default}
label{display:block;font-size:14px;font-weight:600;margin:0 0 6px}
input[type=text],input[type=email],textarea{width:100%;font:inherit;font-size:15px;color:var(--text);background:var(--bg);
  border:1px solid var(--border);border-radius:9px;padding:11px 12px}
textarea{min-height:150px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #5b8cff33}
.field{margin-bottom:16px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);margin:8px 0}
.check input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex:none}
.err{color:var(--danger);font-size:14px;min-height:20px;margin:6px 0 0}
.hp{position:absolute;left:-10000px}

/* hero */
.hero{padding:76px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:13px;font-weight:600;color:#c9f5e2;background:#1f3b31;
  border:1px solid #2c6b52;border-radius:20px;padding:4px 12px;margin-bottom:18px}
h1{font-size:clamp(34px,4.6vw,52px);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px}
h1 .hl{color:var(--accent-hi)}
.lead{font-size:19px;color:var(--muted);margin:0 0 28px;max-width:34em}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;font-size:14px;color:var(--muted)}
.trust span::before{content:"✓";color:var(--good);font-weight:700;margin-right:6px}
.hero-art{background:linear-gradient(160deg,#1c2130,#16181e);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 30px 80px #0007}
@media (max-width:880px){.hero .wrap{grid-template-columns:1fr}.hero{padding-top:48px}}

/* sections */
section.block{padding:72px 0;border-top:1px solid var(--border)}
.kicker{color:var(--accent-hi);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}
h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.01em;margin:0 0 12px;line-height:1.2}
.sub{color:var(--muted);margin:0 0 36px;max-width:40em}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.steps li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:17px;
  background:var(--accent-lo);color:#fff;font-weight:700;margin-bottom:14px}
.steps h3,.feat h3{margin:0 0 6px;font-size:18px}
.steps p,.feat p{margin:0;color:var(--muted);font-size:15px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.feat .ic{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:var(--accent-lo);color:var(--accent-hi);margin-bottom:12px}
@media (max-width:880px){.steps,.feats{grid-template-columns:1fr}}

/* sign-up */
.signup{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.card{background:var(--panel2);border:1px solid var(--border);border-radius:16px;padding:30px}
.card h3{margin:0 0 4px;font-size:22px}
.card .small{font-size:13px;color:var(--faint);margin-top:14px}
.perks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.perks li{display:flex;gap:10px;color:var(--muted)}
.perks li::before{content:"✓";color:var(--good);font-weight:700}
.welcome-back{display:none}
.is-member .welcome-back{display:block}
.is-member .join-form{display:none}
@media (max-width:880px){.signup{grid-template-columns:1fr}}

/* plain pages */
.page{padding:64px 0 80px}
.page .wrap{max-width:760px}
.page h1{font-size:clamp(30px,4vw,40px)}
.page h2{font-size:21px;margin-top:34px}
.page p,.page li{color:#cfd4df}
.page .wrap.wide{max-width:980px}
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:start}
@media (max-width:760px){.page .wrap.wide{max-width:980px}
.contact-grid{grid-template-columns:1fr}}

/* footer */
.site-foot{border-top:1px solid var(--border);padding:28px 0;color:var(--faint);font-size:14px}
.site-foot .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.site-foot nav{display:flex;gap:18px;margin-left:auto}
.site-foot a{color:var(--muted)}.site-foot a:hover{color:var(--text)}