/* ============================================================
   SailR — Deep Ocean marketing site
   Palette pulled from the app's tokens (web/src/theme/tokens.css)
   ============================================================ */
:root {
  --bg:#0a1722; --bg-2:#08131d;
  --surface:#0f2230; --card:#102634; --card-2:#143042;
  --line:#243c4f; --line-soft:#1b3343;
  --teal:#2fc4bd; --teal-2:#33c7c0; --blue:#6fc2dd;
  --navy:#0b3d5c; --navy-2:#155a82;
  --ink:#e6eef3; --ink-dim:#a9b8c2; --ink-mut:#6e8595;
  --green:#1fb36b; --red:#e2483d; --gold:#f4b23e;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --glow:0 0 60px rgba(47,196,189,.22);
  --maxw:1160px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a { color:var(--teal); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { line-height:1.12; letter-spacing:-.02em; margin:0 0 .5em; font-weight:800; }
img { max-width:100%; display:block; }
.grad { background:linear-gradient(100deg,var(--teal),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grn { color:var(--green); font-weight:700; }
.red { color:var(--red); font-weight:700; }
.mono { font-family:var(--mono); }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-weight:700; border-radius:999px; padding:.85em 1.6em; cursor:pointer;
  border:1px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { text-decoration:none; transform:translateY(-2px); }
.btn-primary { background:linear-gradient(100deg,var(--teal),#2aa9a3); color:#04161a; box-shadow:0 8px 24px rgba(47,196,189,.28); }
.btn-primary:hover { box-shadow:0 12px 30px rgba(47,196,189,.42); }
.btn-lg { font-size:1.05rem; padding:1em 1.9em; }
.btn-sm { padding:.55em 1.1em; font-size:.92rem; }
.btn-tip { background:linear-gradient(100deg,#f2a30a,#e08c00); color:#1a1205; box-shadow:0 8px 24px rgba(242,163,10,.28); }
.btn-tip:hover { box-shadow:0 12px 30px rgba(242,163,10,.42); }
.foot-tip { margin:4px 0 2px; font-size:.95rem; display:inline-flex; align-items:center; gap:.6em; flex-wrap:wrap; justify-content:center; }

/* "Coming soon to Google Play" pseudo-badge (non-trademarked) */
.play-cta { display:inline-flex; align-items:center; gap:.7em; padding:.7em 1.2em;
  border:1px solid var(--line); border-radius:14px; background:var(--card);
  color:var(--ink-dim); font-size:.9rem; cursor:default; }
.play-cta svg { width:26px; height:26px; fill:var(--teal); flex:0 0 auto; }
.play-cta small { color:var(--ink-mut); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; }
.play-cta b { color:var(--ink); font-size:1rem; }

/* ---------- Coastline Creators company header ---------- */
.cc-header { display:block; line-height:0; background:#05121b; border-bottom:1px solid var(--line-soft); }
.cc-header:hover { text-decoration:none; }
.cc-header img { width:100%; height:clamp(130px,24vw,320px); object-fit:cover; object-position:center; }

/* ---------- ribbon ---------- */
.ribbon { background:linear-gradient(90deg,var(--navy),var(--navy-2)); color:#dff4f2;
  text-align:center; font-size:.92rem; padding:.6em 1em; position:relative; z-index:60; }
.ribbon strong { color:#fff; }
.ribbon-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--teal);
  margin-right:.5em; vertical-align:middle; box-shadow:0 0 0 0 rgba(47,196,189,.7); animation:pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(47,196,189,.6);} 70%{box-shadow:0 0 0 9px rgba(47,196,189,0);} 100%{box-shadow:0 0 0 0 rgba(47,196,189,0);} }

/* ---------- nav ---------- */
.nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(18px,4vw,40px); background:rgba(10,23,34,.78); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft); }
.brand { display:inline-flex; align-items:center; gap:.5em; font-weight:800; font-size:1.3rem; color:var(--ink); }
.brand:hover { text-decoration:none; }
.brand-mark { width:26px; height:26px; fill:var(--teal); }
.brand-r { color:var(--teal); }
.nav-links { display:flex; align-items:center; gap:1.6rem; }
.nav-links a { color:var(--ink-dim); font-weight:600; font-size:.97rem; }
.nav-links a:hover { color:var(--ink); text-decoration:none; }
.nav-links a.btn-primary { color:#04161a; }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span { width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }

/* ---------- hero ---------- */
.hero { position:relative; padding:clamp(48px,8vw,96px) clamp(18px,4vw,40px) clamp(40px,6vw,72px); overflow:hidden; }
.hero-glow { position:absolute; inset:-20% -10% auto -10%; height:680px; z-index:0; pointer-events:none;
  background:
    radial-gradient(620px 360px at 78% 12%, rgba(47,196,189,.20), transparent 70%),
    radial-gradient(560px 420px at 12% 0%, rgba(111,194,221,.14), transparent 70%);
  animation:drift 16s ease-in-out infinite alternate; }
@keyframes drift { from{transform:translate3d(0,0,0);} to{transform:translate3d(0,26px,0) scale(1.04);} }
.hero-brand { position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  gap:.3em; margin:0 auto clamp(22px,4vw,44px); }
.hero-brand-mark { width:clamp(54px,9vw,100px); height:clamp(54px,9vw,100px); fill:var(--teal);
  filter:drop-shadow(0 6px 22px rgba(47,196,189,.35)); }
.hero-brand-word { font-size:clamp(2.8rem,9vw,6rem); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--ink); }
.hero-inner { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.eyebrow { display:inline-block; font-size:.86rem; font-weight:700; letter-spacing:.04em;
  color:var(--teal); background:rgba(47,196,189,.10); border:1px solid rgba(47,196,189,.28);
  padding:.4em 1em; border-radius:999px; margin-bottom:1.1rem; }
.hero h1 { font-size:clamp(2.3rem,5.4vw,4rem); margin-bottom:.45em; }
.hero-sub { font-size:clamp(1.02rem,1.6vw,1.22rem); color:var(--ink-dim); max-width:36ch; }
.hero-sub strong { color:var(--ink); }
.cta-row { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; }
.cta-row.center { justify-content:center; }
.stat-chips { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem; }
.chip { font-size:.8rem; font-weight:700; padding:.4em .85em; border-radius:8px;
  background:var(--card); border:1px solid var(--line); color:var(--ink-dim); }
.chip:first-child { color:var(--red); }
.chip.mono { font-family:var(--mono); letter-spacing:.02em; }

.hero-shot { margin:0; }
/* phone frame — these are real portrait WP32 screenshots */
.shot-frame { max-width:300px; margin:0 auto; padding:9px; border-radius:32px;
  background:linear-gradient(160deg,#1a2c3a,#0a141d); border:1px solid #2b4256;
  box-shadow:var(--shadow), var(--glow); }
.shot-frame img { width:100%; display:block; border-radius:24px; }
.hero-shot .shot-frame { max-width:320px; }
.hero-shot figcaption { text-align:center; color:var(--ink-mut); font-size:.88rem; margin-top:1rem; }

/* ---------- value band ---------- */
.band { max-width:880px; margin:clamp(28px,5vw,56px) auto; padding:0 24px; text-align:center; }
.band p { font-size:clamp(1.1rem,2vw,1.45rem); color:var(--ink-dim); line-height:1.5; }
.band strong { color:var(--ink); }

/* ---------- feature sections ---------- */
.feat { max-width:var(--maxw); margin:0 auto; padding:clamp(40px,6vw,76px) clamp(18px,4vw,40px);
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,5vw,64px); align-items:center; }
.feat.reverse .feat-text { order:2; }
.feat.reverse .feat-shot { order:1; }
.kicker { display:inline-block; font-size:.82rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal); margin-bottom:.7rem; }
.feat-text h2 { font-size:clamp(1.7rem,3.2vw,2.5rem); }
.feat-text p { color:var(--ink-dim); font-size:1.06rem; }
.ticks { list-style:none; padding:0; margin:1.3rem 0 0; }
.ticks li { position:relative; padding-left:1.9rem; margin:.6rem 0; color:var(--ink); }
.ticks li::before { content:"✓"; position:absolute; left:0; top:0; width:1.3rem; height:1.3rem;
  display:grid; place-items:center; font-size:.78rem; font-weight:800; color:#04161a;
  background:var(--teal); border-radius:50%; }
.feat-shot { margin:0; }

/* ---------- feature grid ---------- */
.grid-wrap { max-width:var(--maxw); margin:0 auto; padding:clamp(30px,5vw,60px) clamp(18px,4vw,40px); }
.grid-title { text-align:center; font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:1.8rem; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gcard { background:linear-gradient(180deg,var(--card),var(--surface)); border:1px solid var(--line);
  border-radius:16px; padding:24px; transition:transform .18s ease, border-color .18s ease; }
.gcard:hover { transform:translateY(-4px); border-color:var(--teal); }
.gicon { font-size:1.7rem; display:block; margin-bottom:.5rem; }
.gcard h3 { font-size:1.1rem; margin-bottom:.3em; }
.gcard p { color:var(--ink-dim); font-size:.97rem; margin:0; }

/* ---------- how it works ---------- */
.how { max-width:var(--maxw); margin:0 auto; padding:clamp(40px,6vw,72px) clamp(18px,4vw,40px); text-align:center; }
.how-title { font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:2rem; }
.steps { display:flex; align-items:stretch; justify-content:center; gap:18px; flex-wrap:wrap; }
.step { flex:1 1 240px; max-width:300px; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:28px 22px; }
.step-n { display:grid; place-items:center; width:44px; height:44px; margin:0 auto .8rem;
  border-radius:50%; background:linear-gradient(140deg,var(--teal),#2aa9a3); color:#04161a; font-weight:800; font-size:1.2rem; }
.step h3 { font-size:1.2rem; }
.step p { color:var(--ink-dim); margin:0; font-size:.98rem; }
.step-arrow { align-self:center; color:var(--teal); font-size:1.8rem; font-weight:700; }

/* ---------- notify ---------- */
.notify { padding:clamp(36px,6vw,72px) clamp(18px,4vw,40px); }
.notify-card { max-width:760px; margin:0 auto; text-align:center;
  background:radial-gradient(900px 320px at 50% -30%, rgba(47,196,189,.16), transparent 70%), linear-gradient(180deg,var(--card),var(--surface));
  border:1px solid var(--line); border-radius:24px; padding:clamp(32px,5vw,56px); box-shadow:var(--shadow); }
.notify-card h2 { font-size:clamp(1.7rem,3.4vw,2.6rem); }
.notify-card p { color:var(--ink-dim); font-size:1.08rem; max-width:50ch; margin-left:auto; margin-right:auto; }
.notify-card .eyebrow { background:rgba(244,178,62,.10); border-color:rgba(244,178,62,.3); color:var(--gold); }
.notify-fine { font-size:.86rem; color:var(--ink-mut); margin-top:1.2rem; }

/* ---------- faq ---------- */
.faq { max-width:780px; margin:0 auto; padding:clamp(30px,5vw,60px) clamp(18px,4vw,40px); }
.faq-title { text-align:center; font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:1.6rem; }
.faq-list details { background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:0 20px; margin:12px 0; overflow:hidden; }
.faq-list summary { cursor:pointer; font-weight:700; padding:18px 0; list-style:none; position:relative; padding-right:32px; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:4px; top:16px; color:var(--teal); font-size:1.4rem; font-weight:400; transition:transform .2s; }
.faq-list details[open] summary::after { transform:rotate(45deg); }
.faq-list details p { color:var(--ink-dim); margin:0 0 18px; }

/* ---------- footer ---------- */
.footer { border-top:1px solid var(--line-soft); margin-top:40px; padding:48px 24px; text-align:center; background:var(--bg-2); }
.foot-brand { display:inline-flex; align-items:center; gap:.5em; font-weight:800; font-size:1.3rem; }
.foot-brand .brand-mark { width:24px; height:24px; fill:var(--teal); }
.foot-tag { color:var(--ink-dim); margin:.8rem 0 .4rem; }
.foot-links { margin:.2rem 0; }
.foot-links .dot { color:var(--ink-mut); margin:0 .5em; }
.foot-maker { display:inline-flex; align-items:center; gap:.7em; margin-top:1.4rem; color:var(--ink-mut); font-size:.84rem; }
.foot-maker:hover { text-decoration:none; }
.foot-maker-label { letter-spacing:.02em; }
.foot-maker img { height:38px; width:auto; opacity:.95; transition:opacity .15s ease; }
.foot-maker:hover img { opacity:1; }
.foot-copy { color:var(--ink-mut); font-size:.86rem; margin-top:.9rem; }

/* ---------- reveal animation ---------- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:860px) {
  /* Mobile menu: a dropdown anchored below the nav bar. Positioned `absolute`
     (not `fixed`) because `.nav`'s backdrop-filter makes it the containing block
     for fixed descendants — `top:0` would then anchor to the nav, not the viewport,
     leaving the slid-up menu poking into view. Hide via visibility/opacity so the
     closed state can't be partially exposed regardless of containing block. */
  .nav-links { position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--surface); padding:8px clamp(18px,4vw,40px) 16px;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    transform:translateY(-10px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease; }
  .nav-links.open { transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
  .nav-links a { padding:14px 4px; border-bottom:1px solid var(--line-soft); }
  .nav-links a.btn-primary { margin-top:12px; border-bottom:0; text-align:center; }
  .nav-toggle { display:flex; z-index:55; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .hero-inner { grid-template-columns:1fr; }
  .hero-shot { order:-1; }
  .feat { grid-template-columns:1fr; }
  .feat.reverse .feat-text { order:0; }
  .feat.reverse .feat-shot { order:-1; }
  .feat-shot { order:-1; }
  .grid { grid-template-columns:1fr 1fr; }
  .step-arrow { transform:rotate(90deg); }
}
@media (max-width:520px) {
  body { font-size:16px; }
  .grid { grid-template-columns:1fr; }
  .cta-row { justify-content:center; }
}

@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; }
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}