:root{
  --bg:#0a0a0a;
  --bg-raised:#141414;
  --ink:#f5f5f5;
  --muted:#9a9a9a;
  --line:#242424;
  --accent:#d4a537;
  --accent-dark:#b8891f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font:12px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

/* ---- Liquid Chrome background: fixed behind everything, over the solid
   --bg black. Kept low-opacity and dark-dominant so it reads as an
   atmospheric texture, not a bright effect that fights the content. */
#liquid-chrome{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:-1;
  opacity:.5;
  pointer-events:none;
  display:block;
}

.wrap{
  max-width:880px;
  margin:0 auto;
  padding:0 24px;
}


/* ---- hero / sections ---- */
/* Extra top padding since there's no header anymore — without it the
   avatar sits flush against the top edge of the viewport.
   Must be `main.wrap`, not bare `main`: the element is <main class="wrap">
   and .wrap sets `padding:0 24px`. A class selector outranks an element
   selector no matter the source order, so a bare `main{padding:...}` rule
   is silently overridden and does nothing. */
main.wrap{padding:60px 24px 36px}
.avatar{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--accent);
  margin:0 0 24px;
}

.eyebrow{
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 9px;
}
h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:23px;
  font-weight:400;
  line-height:1.28;
  margin:0 0 12px;
  max-width:16em;
}
.lede{
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
  max-width:38em;
  margin:0 0 20px;
}

/* ---- hero is centered; body sections below stay left-aligned ---- */
.hero{
  text-align:center;
}
.hero .avatar{
  margin:0 auto 24px;
}
.hero h1,
.hero .lede{
  margin-left:auto;
  margin-right:auto;
}
/* CTA note: white, static text — only the small blue dot in front blinks,
   so it draws the eye without the whole line flashing. */
.cta-note{
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:14px 0 0;
}
.blink-dot{
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:50%;
  background:#2f9bff;
  box-shadow:0 0 8px rgba(47,155,255,.9);
  vertical-align:middle;
  position:relative;
  top:-1px;
  animation:blink-dot 1s step-start infinite;
}
@keyframes blink-dot{
  50%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .blink-dot{animation:none}
}

/* ---- section-centered: same centered avatar treatment as the hero,
   used for Our Case Study and Trial Reel Method ---- */
.section-centered{
  text-align:center;
}
.section-centered .avatar{
  width:90px;
  height:90px;
  margin:0 auto 20px;
}
.section-centered .lede{
  margin-left:auto;
  margin-right:auto;
}
h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  font-weight:400;
  margin:0 0 12px;
}

/* ---- glass chip: same rectangle shape as the proof-strip stat cards
   (1,000+ / 2022 / $700K+), but liquid glass (blur) instead of a solid
   fill. Used on the hero eyebrow and the three section headings. ---- */
.glass-chip{
  display:inline-block;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:10px;
  padding:8px 18px;
  box-shadow:0 4px 16px rgba(0,0,0,.22);
}
p{margin:0 0 12px}
section{margin-bottom:40px}
/* The closing "Still Here?" section is the last thing before the footer —
   its trailing margin is pure dead space, so drop it. */
main section:last-of-type{margin-bottom:0}

/* ---- CTA ---- */
.cta{
  display:inline-block;
  border:0;
  font-family:inherit;
  cursor:pointer;
  padding:12px 22px;
  background:var(--accent);
  color:#0a0a0a;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:999px;
  transition:background .12s ease,transform .12s ease;
}
.cta:hover{background:var(--accent-dark)}
.cta:active{transform:scale(.985)}
.cta.secondary{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}
.cta.secondary:hover{border-color:var(--accent);color:var(--accent)}
.cta.cta-lg{
  font-size:14px;
  padding:16px 32px;
  letter-spacing:.07em;
}

.still-here{
  font-weight:700;
  font-size:20px;
  color:var(--ink);
  margin:0 0 18px;
}

/* ---- Rise Agency logo + legal consent notice ---- */
.agency-logo{
  width:110px;
  height:110px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 18px;
}
.legal-notice{
  color:var(--muted);
  font-size:10px;
  line-height:1.7;
  max-width:46em;
  margin:0 auto;
  text-align:center;
}
.legal-notice a{
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:2px;
}
.legal-notice a:hover{color:var(--ink)}

/* ---- proof strip: horizontal, compact ---- */
.proof-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:32px 0;
}
.proof-strip .stat{
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 6px;
  text-align:center;
}
.proof-strip .stat .n{
  font-family:Georgia,"Times New Roman",serif;
  font-size:13px;
  color:var(--accent);
  display:block;
  margin-bottom:3px;
}
.proof-strip .stat .l{
  font-size:8px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* ---- 2-column proof grid, used by Monthly Earnings, Case Studies and
   Trial Reel Method alike.

   NO forced aspect-ratio and NO object-fit:cover. Every one of these is a
   screenshot whose whole point is the numbers inside it — a square crop
   was cutting real figures and chart edges out of frame. Each image keeps
   its own natural proportions and is shown in full. Rows end up uneven in
   height as a result; that is the accepted trade-off, don't "fix" it by
   reintroducing a fixed tile. ---- */
.grid-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  align-items:start;
}
.grid-2col img{
  width:100%;
  border-radius:12px;
  background:var(--line);
}

/* ---- legal pages (privacy.html, terms.html) ----
   Long-form reading, so deliberately larger and left-aligned than the
   landing page's compact centred type. Narrower measure for readability. */
.legal{
  max-width:680px;
  padding-top:48px;
  padding-bottom:56px;
  text-align:left;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
}
.legal p{margin:0 0 16px}
.legal strong{color:var(--ink)}
.legal a{color:var(--accent)}
.legal a:hover{color:var(--accent-dark)}
.legal-title{
  font-family:Georgia,"Times New Roman",serif;
  font-size:30px;
  font-weight:400;
  line-height:1.2;
  color:var(--ink);
  margin:0 0 6px;
  max-width:none;
}
.legal-updated{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin:0 0 28px;
}
.legal-h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
  font-weight:400;
  color:var(--ink);
  margin:32px 0 10px;
}
.legal-list{
  margin:0 0 16px;
  padding-left:20px;
}
.legal-list li{margin-bottom:7px}
.legal-contact{
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  line-height:1.6;
}
.legal-back{
  font-size:12px;
  margin:0 0 32px;
}
.legal-back a{
  color:var(--muted);
  text-decoration:none;
}
.legal-back a:hover{color:var(--ink)}
.legal-back-bottom{
  margin:40px 0 0;
  padding-top:24px;
  border-top:1px solid var(--line);
}

/* ---- single proof image (Infloww ranking) ---- */
.proof-image{
  max-width:420px;
  width:100%;
  margin:0 auto;
  border-radius:12px;
  border:1px solid var(--line);
}

/* ---- scroll movement on proof images: replays every time an image
   scrolls into view, not just the first time (JS toggles .in-view on and
   off in index.html). The .scroll-anim class only ever gets added by
   that script, so a no-JS visitor just sees images at normal opacity. ---- */
.scroll-anim{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.scroll-anim.in-view{
  opacity:1;
  transform:translateY(0);
}

/* ---- footer ---- */
footer.site{
  border-top:1px solid var(--line);
  padding:20px 0;
  color:var(--muted);
  font-size:10px;
}
footer.site .wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  text-transform:uppercase;
  letter-spacing:.06em;
}

@media (max-width:640px){
  h1{font-size:20px}
}