/* ============================================================================
   Voyage Keeper - v7 brand override
   Reuses the Eagle Point Publishing v7 "Atelier" design SYSTEM (epp-v7.css):
   the Fraunces + Inter type scale, section banding, button system, card and
   stat treatments, sticky mobile bar, reveal motion. Only the palette and a
   handful of app-landing specifics are re-skinned here, to an oceanic / cruise
   feel: deep sea blues with a warm sand / sunset-gold accent. Distinct from
   EPP's teal -> indigo -> violet.
   ========================================================================== */
:root{
  /* dark surfaces: deep ocean instead of near-black indigo */
  --ink:#04141F; --ink-1:#072233; --ink-2:#0B3450; --navy:#0A2A40;

  /* light surfaces: bright sea-foam paper + warm sand cream */
  --paper:#F4F8FB; --paper-2:#FFFFFF; --cream:#F3ECDD;

  --text-d:#EAF4FB; --muted-d:rgba(220,236,247,.70); --faint-d:rgba(220,236,247,.42);
  --text-l:#08222F; --muted-l:#4A6173; --muted-l2:#647A8A;

  --line-d:rgba(255,255,255,.11); --line-l:rgba(8,34,47,.10); --line-l2:rgba(8,34,47,.07);

  /* product accent: sky -> sea -> deep ocean blue */
  --i1:#34C9E8; --i2:#1E8BD6; --i3:#0B5C9E;
  /* warm anchor: sunset sand / gold */
  --brass:#E4A23C; --brass-soft:#F6E6C7;

  --grad:linear-gradient(100deg,var(--i1),var(--i2) 52%,var(--i3));
  --grad-warm:linear-gradient(100deg,#F4C56A,#E4A23C 60%,#C57E22);
  --grad-soft:linear-gradient(120deg,rgba(52,201,232,.16),rgba(30,139,214,.14),rgba(11,92,158,.16));

  --green:#2BBF8F; --amber:#F0B03C; --cta:#1E8BD6;

  --glow:0 0 0 1px var(--line-d),0 48px 100px -38px rgba(52,201,232,.34);
}

/* eyebrow + accent text re-tinted to the sea palette */
.eyebrow{color:#86E2FF}
.on-light .eyebrow{color:var(--i2)}.on-light .eyebrow::before{background:linear-gradient(90deg,var(--i2),transparent)}
.btn:focus-visible{outline-color:#86E2FF}
.trust-row .dot{background:var(--i2)}

/* ---------- App-landing specifics ---------- */

/* hero gradient: dawn-at-sea wash */
.hero{background:radial-gradient(120% 90% at 82% -8%,#0e4f78 0,#0a3450 42%,var(--ink) 100%)}
.mesh-1{background:radial-gradient(circle,rgba(52,201,232,.5),transparent 65%)}
.mesh-2{background:radial-gradient(circle,rgba(228,162,60,.4),transparent 65%)}

/* store badge */
.store-badges{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px}
.badge-link{display:inline-flex;border-radius:12px;transition:transform .25s var(--ease)}
.badge-link:hover{transform:translateY(-2px)}
.badge-gplay{height:62px;width:auto}
.badge-note{font-size:.86rem;color:var(--muted-d)}

/* phone screenshot frame in the hero */
.app-frame{position:relative;border-radius:38px;border:1px solid var(--line-d);
  background:linear-gradient(180deg,rgba(14,79,120,.5),rgba(7,34,51,.85));
  backdrop-filter:blur(20px);box-shadow:var(--glow);padding:14px;
  width:min(300px,76vw);margin:0 auto;transform:rotate(.6deg)}
.app-frame::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:108px;height:7px;border-radius:99px;background:rgba(255,255,255,.18);z-index:3}
.app-frame img{border-radius:26px;width:100%;height:auto;box-shadow:0 24px 60px -28px rgba(0,0,0,.6)}
.app-frame .free-toast{position:absolute;right:-12px;bottom:42px;display:flex;align-items:center;gap:9px;
  background:#06231a;border:1px solid rgba(43,191,143,.42);color:#A7F3D0;font-family:var(--ff-mono);
  font-size:.74rem;padding:11px 15px;border-radius:12px;box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.app-frame .free-toast b{color:var(--green)}

/* feature grid (re-uses card language) */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.feat{position:relative;border:1px solid var(--line-l);background:var(--paper-2);border-radius:var(--r);
  padding:28px 26px;box-shadow:var(--shadow-card);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feat .feat-ico{width:46px;height:46px;border-radius:13px;background:var(--grad-soft);display:grid;place-items:center;
  font-size:1.4rem;margin-bottom:16px;box-shadow:inset 0 0 0 1px rgba(30,139,214,.2)}
.feat h3{font-size:1.28rem;margin:0 0 10px;letter-spacing:-.01em}
.feat p{font-size:.98rem;color:var(--muted-l);margin:0;line-height:1.58}

/* screenshot gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.gcard{border:1px solid var(--line-l);background:var(--paper-2);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-card);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.gshot{background:linear-gradient(180deg,#0a3450,#072233);padding:22px 22px 0;display:flex;justify-content:center}
.gshot img{width:min(196px,60%);border-radius:18px 18px 0 0;box-shadow:0 -8px 30px -14px rgba(0,0,0,.5)}
.gtext{padding:20px 22px 24px}
.gtext h3{font-size:1.12rem;margin:0 0 7px;letter-spacing:-.01em}
.gtext p{font-size:.9rem;color:var(--muted-l);margin:0;line-height:1.55}

/* pricing panel */
.price-wrap{max-width:560px;margin:0 auto;text-align:center;border:1px solid var(--line-l);
  background:var(--paper-2);border-radius:var(--r-lg);padding:clamp(32px,5vw,52px);box-shadow:var(--shadow-card);position:relative}
.price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-family:var(--ff-mono);
  font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--grad-warm);
  color:#2a1c06;padding:6px 16px;border-radius:999px;white-space:nowrap}
.price-big{font-family:var(--ff-display);font-size:clamp(2.6rem,6vw,3.6rem);font-weight:600;letter-spacing:-.02em;margin:6px 0 4px}
.price-big .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.price-lead{font-size:1.1rem;color:var(--muted-l);margin:0 auto 22px;max-width:42ch}
.price-list{list-style:none;margin:0 auto 8px;padding:0;display:grid;gap:12px;max-width:330px;text-align:left}
.price-list li{position:relative;padding-left:30px;font-size:1rem;color:var(--text-l)}
.price-list li::before{content:"\2713";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;
  background:var(--grad-soft);color:var(--i2);font-size:.72rem;font-weight:800;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.4px var(--i2)}

/* sea chips on dark */
.sea-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.sea-chips span{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-d);border:1px solid var(--line-d);background:rgba(255,255,255,.03);padding:8px 14px;border-radius:999px}

/* sync card on dark band */
.sync-card{border:1px solid var(--line-d);border-radius:18px;background:rgba(255,255,255,.04);
  padding:24px;backdrop-filter:blur(10px)}
.sync-card .sync-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-family:var(--ff-mono);
  font-size:.74rem;color:#86E2FF}
.sync-card .sync-orb{width:22px;height:22px;border-radius:7px;background:var(--grad)}
.sync-card p{font-size:.98rem;color:var(--text-d);line-height:1.6;margin:0 0 14px}
.sync-card p:last-child{margin-bottom:0}
.sync-card .sync-promise{font-family:var(--ff-mono);font-size:.68rem;color:var(--green);letter-spacing:.04em}

@media(max-width:980px){
  .feature-grid,.gallery{grid-template-columns:1fr 1fr}
  .app-frame{transform:none}
}
@media(max-width:620px){
  .feature-grid,.gallery{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
}