/* Reefwell — coming soon. Static, no dependencies. Tokens match the main site. */
:root{
  --teal:#0A7F94; --lagoon:#34C6D9; --navy:#06243A; --shallows:#0FA3B8; --aqua:#E3F5F7; --coral:#FF7A59;
  --accent:var(--teal);
  --bg:#F6FBFC; --text:#06243A; --text-2:#45606F; --text-3:#6B8290;
  --line:rgba(6,36,58,.10);
  --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.78); --glass-line:rgba(255,255,255,.75);
  --shadow:0 1px 2px rgba(6,36,58,.04),0 8px 30px rgba(6,36,58,.07);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --accent:var(--lagoon);
    --bg:#041826; --text:#F2F8FA; --text-2:#A9C0CB; --text-3:#7F98A5;
    --line:rgba(255,255,255,.10);
    --glass:rgba(16,44,64,.55); --glass-strong:rgba(10,34,52,.72); --glass-line:rgba(255,255,255,.12);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 34px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;
  position:relative;min-height:100%;min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
img{max-width:100%;display:block}
ul{list-style:none}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}

.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--glass-line);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.35)}
@media (prefers-color-scheme:dark){.glass{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06)}}

/* Background: soft lagoon glows + faint CSS caustics */
.bg{position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:radial-gradient(50% 50% at 10% 0%,#FFFFFF,transparent 70%),linear-gradient(180deg,var(--aqua) 0%,var(--bg) 100%)}
@media (prefers-color-scheme:dark){.bg{background:radial-gradient(60% 60% at 0% 0%,#0E4B63,transparent 70%),linear-gradient(180deg,var(--navy) 0%,var(--bg) 100%)}}
.orb{position:absolute;border-radius:50%;filter:blur(60px)}
.orb-1{width:620px;height:620px;left:50%;top:6%;transform:translateX(-50%);background:rgba(52,198,217,.26)}
.orb-2{width:420px;height:420px;right:-120px;bottom:-140px;background:rgba(15,163,184,.16)}
@media (prefers-color-scheme:dark){.orb-1{background:rgba(15,163,184,.30)}.orb-2{background:rgba(52,198,217,.12)}}
.caustics{position:absolute;inset:-20%;opacity:.5;
  background:
    radial-gradient(closest-side,rgba(255,255,255,.55),transparent) 0 0/180px 140px,
    radial-gradient(closest-side,rgba(255,255,255,.35),transparent) 90px 70px/220px 170px;
  -webkit-mask-image:radial-gradient(60% 50% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(60% 50% at 50% 30%,#000,transparent 75%);
  animation:drift 40s linear infinite}
@media (prefers-color-scheme:dark){.caustics{opacity:.07}}
@keyframes drift{to{transform:translate(180px,140px)}}
@media (prefers-reduced-motion:reduce){.caustics{animation:none}}

/* Top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:1160px;margin:0 auto;padding:22px 28px}
.brand img{height:34px;width:auto}
.status{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--text-2);padding:7px 14px;border-radius:999px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,122,89,.18)}

/* Hero */
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px 24px 40px;width:100%;max-width:980px;margin:0 auto}
.app-icon{width:112px;height:112px;border-radius:25px;box-shadow:0 18px 40px rgba(6,36,58,.25),0 4px 10px rgba(6,36,58,.12)}
@media (prefers-color-scheme:dark){.app-icon{box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}}
.eyebrow{margin-top:28px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
h1{font-size:clamp(46px,7.2vw,92px);line-height:1.0;letter-spacing:-.045em;font-weight:800;margin:14px 0 20px}
.accent{background:linear-gradient(120deg,var(--shallows),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-color-scheme:dark){.accent{background:linear-gradient(120deg,#7FE3F0,var(--lagoon));-webkit-background-clip:text;background-clip:text}}
.lede{font-size:clamp(18px,1.6vw,22px);color:var(--text-2);max-width:560px;line-height:1.45}

.store-badge{margin-top:30px;display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border-radius:14px;padding:9px 20px 9px 14px;height:56px;border:1px solid rgba(255,255,255,.18);text-align:left;box-shadow:0 8px 24px rgba(6,36,58,.18)}
.store-badge span{display:flex;flex-direction:column;font-size:21px;font-weight:600;line-height:1.05;letter-spacing:-.01em}
.store-badge small{font-size:11px;font-weight:500;opacity:.85;letter-spacing:0}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px;width:100%}
.features li{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px;border-radius:22px}
.features b{display:block;font-size:16px;letter-spacing:-.01em;color:var(--text)}
.features li>span:last-child{font-size:14px;color:var(--text-2);line-height:1.4}
.ficon{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(160deg,var(--shallows),var(--teal));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px rgba(10,127,148,.25)}
.ficon svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.pills li{font-size:14px;font-weight:600;color:var(--text);padding:8px 14px 8px 32px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);position:relative}
.pills li::before{content:"";position:absolute;left:12px;top:50%;width:12px;height:7px;border-left:2.4px solid var(--accent);border-bottom:2.4px solid var(--accent);transform:translateY(-70%) rotate(-45deg)}

/* Footer */
.footer{width:100%;max-width:1160px;margin:0 auto;padding:22px 28px 28px;display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;border-top:1px solid var(--line)}
.footer-brand{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--text-2)}
.footer-brand img{border-radius:6px}
.fine{font-size:12.5px;color:var(--text-3)}

@media (max-width:820px){
  .features{grid-template-columns:1fr;max-width:420px;gap:12px;margin-top:38px}
}
@media (max-width:560px){
  .top{padding:16px 20px}
  .brand img{height:28px}
  .status{font-size:12.5px;padding:6px 12px}
  .hero{padding:20px 20px 32px}
  .app-icon{width:92px;height:92px;border-radius:21px}
  .eyebrow{margin-top:22px;font-size:13px}
  h1{margin:12px 0 16px}
  .lede{font-size:18px}
  .store-badge{margin-top:26px}
  .features li{padding:14px 16px;border-radius:20px}
  h1{font-size:42px}
  .pills{gap:6px 14px;margin-top:20px}.pills li{font-size:13px;padding:2px 0 2px 19px;white-space:nowrap;background:none;border:0}.pills li::before{left:2px;width:10px;height:6px;border-width:0 0 2.2px 2.2px}
  .footer{flex-direction:column;align-items:flex-start;padding:20px 20px 26px}
  .orb-1{width:420px;height:420px}
}