/* Roeri — roeri.app landing page.
   Design carried over from design/prototypes/home-final.html in the app repo:
   warm sea palette, paper grain, a single wave anchoring the right edge. */

:root{
  --bg:#f1f5f3;
  --card:#ffffff;
  --ink:#0f2b2a;
  --muted:#546965;          /* darkened from the prototype's #5a6f6b for AA on --bg */
  --line:#e1e8e5;
  --line-2:#cfdcd7;
  --teal:#1f8d7e;
  --teal-deep:#13675c;
  --blue:#2f6fb0;
  --down:#c0271b;
  --radius:14px;
  --sans:"Helvetica Neue",Helvetica,Arimo,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Paper grain over everything. Subtle — it should read as texture, not noise. */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}

/* A green aura rising from the bottom of the viewport. */
.seaglow{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(92% 70% at 50% 122%,rgba(31,141,126,.34) 0%,rgba(47,166,166,.14) 42%,transparent 72%);
}

/* The wave anchors the right edge and stays put while the page scrolls past it. */
.wave{
  position:fixed;right:-8%;top:-4%;bottom:-4%;width:auto;z-index:-1;pointer-events:none;
  filter:drop-shadow(0 22px 36px rgba(6,28,38,.18));
}
.wave img{display:block;height:100%;width:auto;object-fit:contain}
.wave{opacity:1;transition:opacity .45s ease}
.wave.past-hero{opacity:.42}
@media(max-width:900px){ .wave{right:-26%;opacity:.35} }

a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:700;letter-spacing:-.03em;line-height:1.06}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 28px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--card);color:var(--ink);padding:12px 18px;border-radius:0 0 10px 0;font-weight:700;
}
.skip:focus{left:0}

:where(a,button,.btn):focus-visible{
  outline:2px solid var(--teal-deep);outline-offset:3px;border-radius:6px;
}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:15px;font-family:inherit;
  border-radius:11px;padding:12px 20px;border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn-lg{padding:15px 26px;font-size:16px}
.btn-p{
  background:linear-gradient(120deg,#1f8d7e,#149a86 45%,#2f8fb0);
  color:#fff;box-shadow:0 10px 24px -12px rgba(31,141,126,.85);
}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(31,141,126,.85)}
.btn-s{background:var(--card);border-color:var(--line-2);color:var(--ink)}
.btn-s:hover{transform:translateY(-2px);border-color:var(--teal)}
.btn.full{width:100%}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:var(--teal-deep);background:rgba(31,141,126,.12);border:1px solid rgba(31,141,126,.22);
  padding:6px 14px;border-radius:999px;
}
.tag{
  display:block;font-size:13px;font-weight:700;color:var(--teal-deep);
  text-transform:uppercase;letter-spacing:.07em;
}

/* ── nav ─────────────────────────────────────────────────────────────── */
nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(10px);
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  border-bottom:1px solid transparent;
}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:20px;letter-spacing:-.02em}
.logo .mk{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  color:#fff;background:var(--teal);flex:none;
}
.nl{display:flex;gap:28px;font-size:14.5px;color:var(--muted);font-weight:500}
.nl a:hover{color:var(--ink)}
.navcta{display:flex;gap:10px;align-items:center}
@media(max-width:860px){ .nl{display:none} }
@media(max-width:560px){ .navcta .btn-s{display:none} }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{display:flex;align-items:center;justify-content:center;min-height:86vh;padding:56px 0}
.hero .inner{max-width:840px;margin:0 auto;text-align:center}
.hero h1{font-size:clamp(38px,5.4vw,64px);margin-top:22px;text-wrap:balance}
.hero h1 .accent{color:var(--teal)}
.hero .sub{font-size:clamp(17px,2.1vw,21px);color:var(--muted);max-width:52ch;margin:22px auto 0}
.hero .cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;justify-content:center}
.hero .trust{margin-top:22px;font-size:13.5px;color:var(--muted)}

/* ── logo strip ──────────────────────────────────────────────────────── */
.strip{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--card) 55%,transparent)}
.strip .row{display:flex;gap:30px;align-items:center;justify-content:center;flex-wrap:wrap;font-weight:700;font-size:16px;color:#7d908b}
.strip-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}

/* ── sections ────────────────────────────────────────────────────────── */
section.block{padding:88px 0}
.head{max-width:64ch}
.head.centred{margin:0 auto;text-align:center}
.head h2{font-size:clamp(29px,4.3vw,45px);margin-top:12px}
.head p{color:var(--muted);font-size:18px;margin-top:14px}

/* ── feature cards ───────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:980px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media(max-width:660px){ .cards{grid-template-columns:1fr} }

.card{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 18px 34px -26px rgba(6,28,38,.5)}
.card.moat{border-color:rgba(31,141,126,.45);box-shadow:0 0 0 1px rgba(31,141,126,.12)}
.card h3{font-size:19px;margin-top:14px}
.card p{color:var(--muted);font-size:15px;margin-top:9px}
.ico{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;
  color:var(--teal-deep);background:rgba(31,141,126,.11);border:1px solid rgba(31,141,126,.2);
}
.ico svg{width:21px;height:21px}
.mbadge{
  align-self:flex-start;font-size:11px;font-weight:700;color:var(--teal-deep);
  background:rgba(31,141,126,.12);border:1px solid rgba(31,141,126,.25);
  padding:3px 9px;border-radius:999px;margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em;
}

.secondary{margin-top:36px;border-top:1px solid var(--line);padding-top:26px;text-align:center}
.sec-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.sec-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.chip{
  font-size:13.5px;font-weight:600;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 15px;
}

/* ── the moat block ──────────────────────────────────────────────────── */
.moat-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:900px){ .moat-grid{grid-template-columns:1fr;gap:34px} }

.ticks{list-style:none;margin-top:22px;display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px;color:var(--muted);font-size:15.5px}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;
  background:rgba(31,141,126,.15);
  box-shadow:inset 0 0 0 1px rgba(31,141,126,.35);
}
.ticks li::after{
  content:"";position:absolute;left:5px;top:.72em;width:6px;height:3px;
  border-left:1.8px solid var(--teal-deep);border-bottom:1.8px solid var(--teal-deep);
  transform:rotate(-45deg);
}

.demo{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:0 26px 50px -34px rgba(6,28,38,.55);
}
.demo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.demo-row:first-child{padding-top:2px}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.down{background:var(--down);box-shadow:0 0 0 3px rgba(192,39,27,.16)}
.host{font-weight:700}
.state{color:var(--muted)}
.lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);min-width:92px}
.val{font-weight:600}
.pill{margin-left:auto;font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px}
.pill-found{background:rgba(192,39,27,.1);color:var(--down);border:1px solid rgba(192,39,27,.22)}
.pill-apply{background:linear-gradient(120deg,#1f8d7e,#2f8fb0);color:#fff}
.demo-foot{padding-top:12px;font-size:13.5px;color:var(--teal-deep);font-weight:600}
.demo-cap{margin-top:10px;font-size:12px;color:var(--muted)}

/* ── how it works ────────────────────────────────────────────────────── */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;counter-reset:s}
@media(max-width:860px){ .steps{grid-template-columns:1fr} }
.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.steps h3{font-size:18px;margin-top:14px}
.steps p{color:var(--muted);font-size:15px;margin-top:8px}
.num{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  font-weight:700;font-size:14px;color:#fff;background:var(--teal);
}

/* ── pricing ─────────────────────────────────────────────────────────── */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;align-items:stretch}
@media(max-width:900px){ .tiers{grid-template-columns:1fr;max-width:460px;margin-inline:auto} }
.tier{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
}
.tier.featured{border-color:var(--teal);box-shadow:0 0 0 1px rgba(31,141,126,.2),0 24px 44px -32px rgba(6,28,38,.55)}
.tier h3{font-size:19px}
.price{margin-top:10px;display:flex;align-items:baseline;gap:5px}
.amt{font-size:40px;font-weight:700;letter-spacing:-.04em}
.per{color:var(--muted);font-size:15px;font-weight:600}
.who{color:var(--muted);font-size:14.5px;margin-top:4px}
.tier ul{list-style:none;margin:20px 0 24px;display:grid;gap:10px;flex:1}
.tier li{position:relative;padding-left:24px;font-size:15px}
.tier li::before{
  content:"";position:absolute;left:2px;top:.5em;width:7px;height:4px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);
}
.founding{margin-top:22px;text-align:center;color:var(--muted);font-size:14px}

/* ── final CTA ───────────────────────────────────────────────────────── */
.final{padding:96px 0;text-align:center}
.final h2{font-size:clamp(28px,4.2vw,44px)}
.final p{color:var(--muted);font-size:18px;margin:14px 0 28px}

/* ── footer ──────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:44px 0 26px;background:color-mix(in srgb,var(--card) 55%,transparent)}
.foot{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap}
.foot-brand p{color:var(--muted);font-size:14.5px;margin-top:10px;max-width:34ch}
.foot-links{display:flex;gap:56px}
.foot-links div{display:grid;gap:9px;align-content:start}
.foot-links a{color:var(--muted);font-size:14.5px}
.foot-links a:hover{color:var(--ink)}
.fl-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.foot-base{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}

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