/* ────────────────────────────────────────────────────────────────────
   Cleanvix ships one visual world — the "Obsidian & Ember" dashboard
   theme the app itself defaults to (dark charcoal, ember orange, emerald
   success). Shared by every page on this site (index, about, privacy,
   terms) so the brand stays identical no matter which page a link lands
   on.
   ──────────────────────────────────────────────────────────────────── */
:root{
  --bg: #0a0908;
  --surface: #151210;
  --surface-2: #1c1712;
  --surface-3: #221d18;
  --line: rgba(245,241,236,.10);
  --line-strong: rgba(245,241,236,.18);
  --ink: #f5f1ec;
  --ink-dim: #c4bcb2;
  --ink-faint: #8c8477;
  --ember: #ff7a29;
  --ember-deep: #cc5b00;
  --ember-dim: rgba(255,122,41,.14);
  --amber: #e0a458;
  --emerald: #34c77b;
  --emerald-dim: rgba(52,199,123,.14);

  --display: "Iowan Old Style","Sitka Text","Palatino Linotype",Georgia,"Times New Roman",serif;
  --body: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono: "SF Mono","Cascadia Code","Roboto Mono",Consolas,"Liberation Mono",monospace;

  --maxw: 1120px;
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--ember); color:#1c0d00; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.12;
  text-wrap:balance;
  margin:0;
}
p{ margin:0; }

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:24px;
  padding-right:24px;
}
@media (max-width:640px){
  .wrap{ padding-left:18px; padding-right:18px; }
}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* ── Scroll-reveal (progressive enhancement — see script.js) ───────── */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
  transition-delay:0s;
  will-change:opacity, transform;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.feature-grid > .reveal:nth-child(2){ transition-delay:.04s; }
.feature-grid > .reveal:nth-child(3){ transition-delay:.08s; }
.feature-grid > .reveal:nth-child(4){ transition-delay:.12s; }
.feature-grid > .reveal:nth-child(5){ transition-delay:.16s; }
.feature-grid > .reveal:nth-child(6){ transition-delay:.20s; }
.feature-grid > .reveal:nth-child(n+7){ transition-delay:.24s; }
.gallery-scroll > .reveal:nth-child(2){ transition-delay:.05s; }
.gallery-scroll > .reveal:nth-child(3){ transition-delay:.10s; }
.gallery-scroll > .reveal:nth-child(4){ transition-delay:.15s; }
.gallery-scroll > .reveal:nth-child(5){ transition-delay:.20s; }
.gallery-scroll > .reveal:nth-child(n+6){ transition-delay:.25s; }
.manifesto > .reveal:nth-child(2){ transition-delay:.05s; }
.manifesto > .reveal:nth-child(3){ transition-delay:.10s; }
.manifesto > .reveal:nth-child(4){ transition-delay:.15s; }
.manifesto > .reveal:nth-child(n+5){ transition-delay:.20s; }
.stat-grid > .reveal:nth-child(2){ transition-delay:.05s; }
.stat-grid > .reveal:nth-child(3){ transition-delay:.10s; }
.stat-grid > .reveal:nth-child(4){ transition-delay:.15s; }

/* ── Nav ─────────────────────────────────────────────────────────── */
header.site{
  position:sticky; top:0; z-index:20;
  background:rgba(10,9,8,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.navrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  min-height:68px;
  padding-top:12px; padding-bottom:12px;
  flex-wrap:wrap;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:600; font-size:19px;
  text-decoration:none; color:var(--ink);
  flex-shrink:0;
}
.brand .mark{ width:30px; height:30px; flex-shrink:0; }
nav.links{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; row-gap:8px; }
nav.links a{
  position:relative;
  font-size:14px; text-decoration:none; color:var(--ink-dim);
  transition:color .15s ease;
  white-space:nowrap;
  padding-bottom:3px;
}
nav.links a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:100%; height:2px; border-radius:2px;
  background:var(--ember);
  transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
nav.links a:hover{ color:var(--ink); }
nav.links a:hover::after{ transform:scaleX(1); }
nav.links a.active{ color:var(--ink); }
nav.links a.active::after{ transform:scaleX(1); }
.chip{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:var(--amber); background:rgba(224,164,88,.12);
  border:1px solid rgba(224,164,88,.28);
  padding:6px 12px; border-radius:100px; white-space:nowrap;
}
@media (max-width:760px){
  nav.links a.hide-sm{ display:none; }
}
@media (max-width:480px){
  .brand{ font-size:17px; }
  nav.links{ gap:14px; }
  .chip{ display:none; }
}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  overflow:hidden;
  padding:76px 0 84px;
  background:
    radial-gradient(720px 480px at 88% -10%, rgba(255,122,41,.22), transparent 60%),
    radial-gradient(500px 380px at 8% 110%, rgba(52,199,123,.10), transparent 60%);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
}
.hero h1{
  font-size:clamp(34px,5vw,54px);
  letter-spacing:-.01em;
}
.hero h1 em{ font-style:italic; color:var(--ember); }
.hero .lede{
  margin-top:20px;
  max-width:52ch;
  color:var(--ink-dim);
  font-size:17px;
}
.hero .cta-row{
  margin-top:32px;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
}
.btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg, var(--ember), var(--ember-deep));
  color:#1c0d00; font-weight:700; font-size:15px;
  padding:13px 22px; border-radius:12px;
  text-decoration:none;
  box-shadow:0 10px 26px -12px rgba(255,122,41,.65);
  transition:filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover{
  filter:brightness(1.06);
  transform:translateY(-2px);
  box-shadow:0 16px 32px -12px rgba(255,122,41,.8);
}
.btn-primary:active{ transform:translateY(0); }
.status-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12.5px; color:var(--ink-faint);
}
.status-chip .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--emerald);
  box-shadow:0 0 0 3px var(--emerald-dim);
}

/* ── Hero device mock (built from real CSS/SVG, not a screenshot) ─── */
.device{
  justify-self:center;
  width:min(340px, 100%);
  border-radius:34px;
  padding:14px;
  background:linear-gradient(160deg, #262019, #16120e);
  border:1px solid var(--line-strong);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  animation:device-float 6.5s ease-in-out infinite;
}
@keyframes device-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-9px); }
}
.screen{
  background:var(--surface);
  border-radius:24px;
  padding:20px 18px 22px;
  border:1px solid var(--line);
}
.screen .app-row{ display:flex; align-items:center; justify-content:space-between; }
.screen .app-title{ font-family:var(--display); font-weight:600; font-size:15px; }
.screen .app-sub{ color:var(--ink-faint); font-size:11px; margin-top:2px; }
.badge-elite{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  color:var(--ember); background:var(--ember-dim);
  border:1px solid rgba(255,122,41,.3);
  padding:4px 9px; border-radius:8px;
}

.gauge-row{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; }
.gauge-label{ font-size:11px; color:var(--ink-faint); letter-spacing:.03em; }
.gauge-value{ font-family:var(--mono); font-size:30px; font-weight:700; color:var(--ember); margin-top:2px; }

.ring-wrap{ position:relative; width:78px; height:78px; }
.ring-wrap svg{ transform:rotate(-90deg); }
.ring-pct{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:15px; font-weight:700; color:var(--ink);
}
.ring-track{ stroke:var(--surface-3); }
.ring-value{
  stroke:var(--ember);
  stroke-linecap:round;
  stroke-dasharray:213;
  stroke-dashoffset:213;
  animation:draw 1.1s .3s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes draw{ to{ stroke-dashoffset:38; } }

.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.tile{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 13px;
}
.tile .k{ font-size:10.5px; color:var(--ink-faint); }
.tile .v{ font-family:var(--mono); font-size:17px; font-weight:700; margin-top:3px; }
.tile .v.up{ color:var(--emerald); }

.bar-track{
  margin-top:16px; height:8px; border-radius:8px; background:var(--surface-3); overflow:hidden;
}
.bar-fill{
  height:100%; width:61%; border-radius:8px;
  background:linear-gradient(90deg, var(--ember), var(--amber));
}
.bar-caption{ display:flex; justify-content:space-between; margin-top:8px; font-size:10.5px; color:var(--ink-faint); }

/* ── Stat strip ──────────────────────────────────────────────────── */
.stats{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--surface);
}
.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0;
}
.stat{
  padding:26px 20px;
  border-left:1px solid var(--line);
}
.stat:first-child{ border-left:none; }
.stat .n{ font-family:var(--mono); font-size:30px; font-weight:700; color:var(--ink); }
.stat .d{ font-size:12.5px; color:var(--ink-faint); margin-top:4px; }
@media (max-width:760px){
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .stat:nth-child(3){ border-left:none; }
  .stat{ border-bottom:1px solid var(--line); }
}

/* ── Section shell ───────────────────────────────────────────────── */
section{ padding:88px 0; }
.section-head{ max-width:60ch; margin-bottom:44px; }
.section-head h2{ font-size:clamp(26px,3.4vw,36px); margin-top:10px; }
.section-head .lede{ color:var(--ink-dim); margin-top:14px; font-size:16px; }

/* ── Feature grid (mirrors the app's own Home tool grid) ────────── */
.feature-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
@media (max-width:760px){ .feature-grid{ grid-template-columns:1fr; } }
.feature{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:18px;
  padding:22px;
  transition:border-color .18s ease, transform .18s ease;
}
.feature:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.feature .tag{
  display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  color:var(--amber); text-transform:uppercase; margin-bottom:10px;
}
.feature h3{ font-size:18px; font-family:var(--body); font-weight:700; }
.feature p{ margin-top:8px; color:var(--ink-dim); font-size:14.5px; }
.feature.new{ border-color:rgba(52,199,123,.35); background:linear-gradient(180deg, var(--emerald-dim), var(--surface) 60%); }
.feature.new .tag{ color:var(--emerald); }

/* ── About ─────────────────────────────────────────────────────── */
.about-grid{
  display:grid; grid-template-columns:1.3fr .7fr; gap:48px;
  align-items:start;
}
@media (max-width:840px){ .about-grid{ grid-template-columns:1fr; } }
.about-body p{ color:var(--ink-dim); margin-top:16px; font-size:16px; line-height:1.7; }
.about-body p:first-child{ margin-top:0; }
.about-body strong{ color:var(--ink); font-weight:600; }
.about-facts{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  padding:6px 22px;
}
.about-fact{
  display:flex; justify-content:space-between; gap:16px;
  padding:16px 0; border-top:1px solid var(--line);
}
.about-fact:first-child{ border-top:none; }
.about-fact .k{ color:var(--ink-faint); font-size:13.5px; }
.about-fact .v{ color:var(--ink); font-size:13.5px; font-weight:600; text-align:right; }

/* ── Gallery (in-app screens) ─────────────────────────────────────── */
.gallery-scroll{
  display:flex; gap:20px; overflow-x:auto; padding:6px 2px 26px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.gallery-scroll::-webkit-scrollbar{ height:8px; }
.gallery-scroll::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:8px; }
.gallery-item{
  flex:0 0 auto; scroll-snap-align:start;
  width:min(72vw,260px);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:var(--surface);
  transition:border-color .18s ease, transform .18s ease;
}
.gallery-item:hover{ border-color:var(--ember); transform:translateY(-3px); }
.gallery-item img{ width:100%; height:auto; display:block; transition:transform .45s ease; }
.gallery-item:hover img{ transform:scale(1.045); }
.gallery-caption{
  padding:12px 14px 16px;
  font-family:var(--mono); font-size:12px; letter-spacing:.03em;
  color:var(--ink-dim);
}

/* ── Manifesto list ──────────────────────────────────────────────── */
.manifesto{ display:flex; flex-direction:column; }
.manifesto-item{
  display:grid; grid-template-columns:44px 1fr; gap:18px;
  padding:22px 0; border-top:1px solid var(--line);
}
.manifesto-item:last-child{ border-bottom:1px solid var(--line); }
.manifesto-item .glyph{
  font-family:var(--mono); color:var(--ember); font-size:18px; padding-top:2px;
}
.manifesto-item h3{ font-family:var(--body); font-size:16.5px; font-weight:700; }
.manifesto-item p{ margin-top:6px; color:var(--ink-dim); font-size:14.5px; max-width:62ch; }

/* ── Policy sections ─────────────────────────────────────────────── */
.policy{ background:var(--surface); border-top:1px solid var(--line); }
.policy-updated{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); margin-top:8px; }
.policy-body{ margin-top:32px; max-width:74ch; }
.policy-body h3{
  font-family:var(--body); font-size:16px; font-weight:700;
  margin-top:34px; margin-bottom:10px; color:var(--ink);
}
.policy-body h3:first-child{ margin-top:0; }
.policy-body p{ color:var(--ink-dim); font-size:15px; margin-top:10px; }
.policy-body ul{ margin:10px 0 0; padding-left:20px; color:var(--ink-dim); font-size:15px; }
.policy-body li{ margin-top:6px; }
.policy-body a{ color:var(--amber); text-decoration:underline; text-underline-offset:2px; }

.table-scroll{ overflow-x:auto; margin-top:10px; border:1px solid var(--line); border-radius:12px; }
table.policy-table{ border-collapse:collapse; width:100%; min-width:560px; font-size:13.5px; }
table.policy-table th, table.policy-table td{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top;
}
table.policy-table th{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--amber); background:var(--surface-2);
}
table.policy-table td{ color:var(--ink-dim); }
table.policy-table tr:last-child td{ border-bottom:none; }

/* ── Page banner (About / Privacy / Terms standalone pages) ────────
   Replaces the old bare .page-head strip (which left a large empty
   band under the nav) with a proper mini-hero: title copy on one
   side, a brand-styled icon badge on the other, so nothing reads
   as dead space on either side. ─────────────────────────────────── */
.page-banner{
  position:relative;
  overflow:hidden;
  padding:48px 0 40px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(620px 360px at 92% -30%, rgba(255,122,41,.16), transparent 60%),
    radial-gradient(440px 320px at -8% 130%, rgba(52,199,123,.09), transparent 60%);
}
.page-banner-inner{
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.page-banner-text{ max-width:62ch; }
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; color:var(--ink-faint); text-decoration:none;
  margin-bottom:16px;
  transition:color .15s ease, gap .15s ease;
}
.back-link:hover{ color:var(--ink); gap:9px; }
.page-title{
  margin-top:10px;
  font-size:clamp(28px, 4vw, 40px);
}
.page-sub{ margin-top:10px; color:var(--ink-dim); font-size:15px; }
.page-badge{
  flex-shrink:0;
  width:100px; height:100px;
  border-radius:26px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #262019, #16120e);
  border:1px solid var(--line-strong);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.65);
  color:var(--ember);
  animation:device-float 6.5s ease-in-out infinite;
}
.page-badge svg{ width:44px; height:44px; }
@media (max-width:640px){
  .page-banner-inner{ flex-direction:column-reverse; align-items:flex-start; gap:20px; }
  .page-badge{ width:68px; height:68px; border-radius:18px; }
  .page-badge svg{ width:30px; height:30px; }
}

/* ── Footer ──────────────────────────────────────────────────────── */
footer{ border-top:1px solid var(--line); padding:44px 0; }
.foot-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
}
.foot-links{ display:flex; gap:22px; flex-wrap:wrap; }
.foot-links a{ font-size:13.5px; color:var(--ink-dim); text-decoration:none; }
.foot-links a:hover{ color:var(--ink); }
.foot-fine{ font-size:12.5px; color:var(--ink-faint); margin-top:18px; }