/* ═══════════════════════════════════════════════════════════════
   main.css — DiveLog landing page: tokens, base, layout, chrome
   Deep-ocean palette; --aqua matches the DiveLog app accent.
═══════════════════════════════════════════════════════════════ */

:root {
    /* surfaces */
    --abyss:    #03121a;
    --deep:     #07212e;
    --navy:     #0a3140;
    --navy-2:   #0e4256;

    /* accents */
    --aqua:     #38bdf8;
    --aqua-2:   #22b8a6;
    --aqua-ink: #0a5f7a;   /* accessible aqua for light bands */
    --gold:     #f5c542;

    /* ink on dark */
    --cream:    #eef6f6;
    --foam:     #d7efef;
    --text:     var(--cream);
    --muted:    rgba(219,240,240,.80);
    --faint:    rgba(219,240,240,.62);
    --border:       rgba(56,189,248,.20);
    --border-soft:  rgba(219,240,240,.13);
    --surface:      rgba(255,255,255,.035);
    --surface-2:    rgba(255,255,255,.055);

    /* light band */
    --sand:      #f2ede4;
    --sand-2:    #e8e1d4;
    --ink:       #072230;
    --ink-muted: #3b5a67;

    /* structure */
    --maxw:      1200px;
    --gutter:    32px;
    --radius-lg: 22px;
    --radius:    16px;
    --radius-sm: 12px;
    --shadow-shot: 0 42px 90px -38px rgba(0,0,0,.78);
    --shadow-card: 0 20px 50px -30px rgba(0,0,0,.6);
    --ease:      cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    overflow-x:hidden;
}

body {
    background:var(--abyss);
    color:var(--text);
    font-family:'Jost',system-ui,sans-serif;
    font-weight:400;
    font-size:17px;
    line-height:1.62;
    overflow-x:hidden;
}

::selection { background:rgba(56,189,248,.3); color:#fff; }
a { color:inherit; }
img, svg, picture { display:block; max-width:100%; }
button { font:inherit; }

:where(a, button, summary, input, [tabindex]):focus-visible {
    outline:2px solid var(--aqua);
    outline-offset:3px;
    border-radius:4px;
}

/* screen-reader-only text (section headings that would be visual noise) */
.visually-hidden {
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* skip link */
.skip {
    position:absolute; left:14px; top:-60px; z-index:400;
    background:var(--aqua); color:#042029; font-weight:500;
    padding:12px 20px; border-radius:0 0 12px 12px; text-decoration:none;
    transition:top .25s var(--ease);
}
.skip:focus { top:0; }

/* ── ambience ─────────────────────────────────────────────────── */
body::after {   /* film grain */
    content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
    opacity:.028;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.caustics {
    position:fixed; inset:-20%; z-index:0; pointer-events:none;
    background:
        radial-gradient(40% 55% at 18% 10%, rgba(56,189,248,.13), transparent 60%),
        radial-gradient(45% 50% at 84% 6%,  rgba(34,184,166,.14), transparent 62%),
        radial-gradient(60% 60% at 50% 118%, rgba(10,49,64,.85), transparent 60%);
    filter:blur(12px);
    animation:drift 30s ease-in-out infinite alternate;
}
@keyframes drift {
    from { transform:translate3d(0,0,0) scale(1); }
    to   { transform:translate3d(2.5%,2%,0) scale(1.07); }
}

/* a restrained bubble layer — four, not ten */
.bubbles { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bubbles span {
    position:absolute; bottom:-40px; border-radius:50%; opacity:0;
    background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), rgba(56,189,248,.05) 60%, transparent 70%);
    animation:rise linear infinite;
}
@keyframes rise {
    0%   { transform:translateY(0) translateX(0); opacity:0; }
    12%  { opacity:.65; }
    88%  { opacity:.4; }
    100% { transform:translateY(-112vh) translateX(38px); opacity:0; }
}
.bubbles span:nth-child(1) { left:11%; width:9px;  height:9px;  animation-duration:23s; animation-delay:0s; }
.bubbles span:nth-child(2) { left:38%; width:6px;  height:6px;  animation-duration:29s; animation-delay:6s; }
.bubbles span:nth-child(3) { left:68%; width:12px; height:12px; animation-duration:21s; animation-delay:3s; }
.bubbles span:nth-child(4) { left:88%; width:7px;  height:7px;  animation-duration:26s; animation-delay:9s; }

/* ── layout ───────────────────────────────────────────────────── */
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
section { position:relative; z-index:1; }
[id] { scroll-margin-top:96px; }

/* Grid/flex children default to a min-content floor, so one wide child (the
   hero thumbnail rail, a screenshot, a scrollable table) can push a track
   past the viewport. Opt every layout track out of that. */
.hero-grid > *, .row > *, .privacy-grid > *, .resp-pair > *,
.pillars > *, .aud-grid > *, .mod-grid > *, .facts-row > * { min-width:0; }

.band            { padding:clamp(84px,10vw,148px) 0; position:relative; z-index:1; }
.band--tight     { padding:clamp(60px,7vw,104px) 0; }
.band--deep      { background:linear-gradient(180deg, transparent, rgba(10,49,64,.55) 40%, transparent); }
.band--edge      { border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }

/* light band: re-point the ink tokens instead of restyling every child */
.band--light {
    background:linear-gradient(180deg, var(--sand), var(--sand-2));
    color:var(--ink);
    --text:var(--ink);
    --muted:#3b5a67;
    --faint:#4d6270;   /* 4.9:1 on the band's darkest stop — AA at 12 px */
    --border:rgba(7,34,48,.16);
    --border-soft:rgba(7,34,48,.11);
    --surface:rgba(7,34,48,.035);
    --surface-2:rgba(7,34,48,.06);
    --aqua:var(--aqua-ink);
}
.band--light .shot { --shadow-shot:0 34px 70px -34px rgba(7,34,48,.42); }

/* photo band: brand underwater photo behind a legibility scrim.
   The image lives on a class rather than an inline custom property — a
   relative url() inside a custom property resolves against this stylesheet,
   not the document, which silently 404s. */
.band--photo { color:var(--cream); overflow:hidden; isolation:isolate; }
.band--photo::before {
    content:''; position:absolute; inset:0; z-index:-2;
    background-size:cover; background-position:center;
}
.band--photo-ocean::before { background-image:url('../photo/underwater-ocean.webp'); }
.band--photo-sand::before { background-image:url('../photo/underwater-sand.webp'); }
.band--photo::after {
    content:''; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(3,18,26,.9), rgba(3,18,26,.58) 45%, rgba(3,18,26,.92));
}

/* ── type ─────────────────────────────────────────────────────── */
.eyebrow {
    display:inline-flex; align-items:center; gap:12px;
    font-size:11.5px; letter-spacing:.3em; text-transform:uppercase;
    color:var(--aqua); font-weight:500;
}
.eyebrow::before { content:''; width:26px; height:1px; background:currentColor; opacity:.75; }

h1, h2, h3, .display {
    font-family:'Cormorant Garamond',Georgia,serif;
    font-weight:400; letter-spacing:-.02em;
}
.title {
    font-size:clamp(34px,4.6vw,62px); line-height:1.02; font-weight:300;
    margin:20px 0 0; max-width:22ch;
}
.title em { font-style:italic; color:var(--aqua); }
.title--center { max-width:26ch; margin-inline:auto; }
.lead { color:var(--muted); max-width:56ch; margin-top:20px; font-size:clamp(16px,1.35vw,18.5px); }
.head--center { text-align:center; display:flex; flex-direction:column; align-items:center; }
.head--center .lead { margin-inline:auto; }

h3 { font-size:24px; line-height:1.12; font-weight:500; }

/* ── reveal ───────────────────────────────────────────────────────
   Guarded by html.js (set by the one-liner in <head>): without
   JavaScript nothing is hidden, so the page never renders blank. */
.js .reveal {
    opacity:0; transform:translateY(24px);
    transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.js .reveal.in { opacity:1; transform:none; }
.reveal--delay-1 { transition-delay:.07s; }
.reveal--delay-2 { transition-delay:.14s; }
.reveal--delay-3 { transition-delay:.21s; }
.reveal--delay-4 { transition-delay:.28s; }

/* ── nav ──────────────────────────────────────────────────────── */
.nav {
    position:fixed; top:0; left:0; right:0; z-index:200;
    display:flex; align-items:center; gap:24px; justify-content:space-between;
    padding:18px var(--gutter);
    border-bottom:1px solid transparent;
    transition:background .4s, padding .4s, border-color .4s;
}
.nav.scrolled {
    background:rgba(4,20,29,.78);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    padding:11px var(--gutter);
    border-bottom-color:var(--border);
}
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; }
/* the app's icon mark (assets/logo.png, 128 px master) — stays crisp on
   retina as long as the display size does not exceed 64 px */
.brand-mark { width:52px; height:52px; flex:none; }
.brand-name {
    font-family:'Cormorant Garamond',serif; font-size:23px; font-weight:500;
    line-height:1; color:var(--cream); white-space:nowrap;
}
.brand-name span { color:var(--aqua); }

.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a {
    font-size:12px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted); text-decoration:none; position:relative;
    display:inline-flex; align-items:center; min-height:44px;
    transition:color .25s;
}
.nav-links a::after {
    content:''; position:absolute; left:0; bottom:12px; width:0; height:1px;
    background:var(--aqua); transition:width .3s var(--ease);
}
.nav-links a:hover { color:var(--cream); }
.nav-links a:hover::after { width:100%; }

.nav-right { display:flex; align-items:center; gap:16px; }
.nav-cta {
    display:inline-flex; align-items:center; gap:8px;
    font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
    text-decoration:none; padding:11px 18px; border-radius:30px;
    border:1px solid var(--border); color:var(--cream);
    background:rgba(56,189,248,.08); white-space:nowrap;
    transition:border-color .3s, background .3s, color .3s;
}
.nav-cta:hover { border-color:var(--aqua); color:var(--aqua); background:rgba(56,189,248,.14); }

/* language switcher */
#lang-sw { display:flex; align-items:center; }
.lang-btn {
    background:none; border:none; cursor:pointer;
    font-family:'Jost',sans-serif; font-size:11.5px; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--faint); padding:10px 9px; line-height:1;
    min-height:44px; transition:color .25s;
}
.lang-btn:hover { color:var(--cream); }
.lang-btn.active { color:var(--aqua); }
.lang-btn + .lang-btn { border-left:1px solid var(--border); }

/* hamburger */
.hamburger {
    display:none; width:44px; height:44px; flex:none;
    border:none; background:none; cursor:pointer; position:relative;
}
.hamburger span {
    position:absolute; left:11px; right:11px; height:2px; border-radius:2px;
    background:var(--cream);
    transition:transform .35s var(--ease), opacity .2s, top .35s var(--ease);
}
.hamburger span:nth-child(1) { top:15px; }
.hamburger span:nth-child(2) { top:21px; }
.hamburger span:nth-child(3) { top:27px; }
.hamburger.open span:nth-child(1) { top:21px; transform:rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { top:21px; transform:rotate(-45deg); }

/* mobile menu */
.mobile-menu {
    position:fixed; inset:0; z-index:190;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
    padding:104px 24px 56px;
    background:linear-gradient(180deg, rgba(3,18,26,.985), rgba(7,33,46,.985));
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .38s ease, transform .38s ease, visibility 0s linear .38s;
    overflow-y:auto;
}
.mobile-menu.open {
    opacity:1; visibility:visible; transform:none;
    transition:opacity .38s ease, transform .38s ease, visibility 0s;
}
.mm-links { display:flex; flex-direction:column; align-items:center; gap:2px; }
.mm-links a {
    font-family:'Cormorant Garamond',serif; font-size:clamp(28px,7.5vw,38px); font-weight:300;
    color:var(--cream); text-decoration:none; padding:11px 8px; line-height:1.1;
    opacity:0; transform:translateY(14px); transition:color .25s;
}
.mobile-menu.open .mm-links a {
    opacity:1; transform:none;
    transition:opacity .45s ease, transform .5s var(--ease), color .25s;
}
.mobile-menu.open .mm-links a:nth-child(1) { transition-delay:.05s; }
.mobile-menu.open .mm-links a:nth-child(2) { transition-delay:.10s; }
.mobile-menu.open .mm-links a:nth-child(3) { transition-delay:.15s; }
.mobile-menu.open .mm-links a:nth-child(4) { transition-delay:.20s; }
.mobile-menu.open .mm-links a:nth-child(5) { transition-delay:.25s; }
.mobile-menu.open .mm-links a:nth-child(6) { transition-delay:.30s; }
.mm-links a:hover, .mm-links a:active { color:var(--aqua); }

/* ── hero ─────────────────────────────────────────────────────── */
.hero {
    position:relative; z-index:1; overflow:hidden;
    padding:clamp(132px,15vw,180px) 0 clamp(72px,9vw,116px);
}
.hero::before {
    content:''; position:absolute; top:2%; right:-12%; width:66%; height:82%; z-index:0;
    background:radial-gradient(closest-side, rgba(56,189,248,.15), transparent 70%);
    filter:blur(24px); pointer-events:none;
}
.hero > .wrap { position:relative; z-index:1; }
.hero-grid {
    display:grid; grid-template-columns:1fr 1.06fr;
    gap:clamp(40px,5vw,72px); align-items:center;
}
.hero h1 {
    font-size:clamp(42px,5.9vw,86px); line-height:.98; font-weight:300;
    letter-spacing:-.03em; margin:20px 0 0;
    animation:fadeUp 1.05s both .18s;
}
.hero h1 em { font-style:italic; color:var(--aqua); }
.hero-eyebrow { animation:fadeUp .95s both .08s; }
.hero-sub {
    color:var(--muted); max-width:48ch; margin-top:24px;
    font-size:clamp(16.5px,1.5vw,19px); animation:fadeUp 1.05s both .3s;
}
.hero-actions {
    display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:34px;
    animation:fadeUp 1.05s both .42s;
}
.hero-link {
    display:inline-flex; align-items:center; gap:8px; min-height:44px;
    font-size:13px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--aqua); text-decoration:none; padding:4px 2px;
    border-bottom:1px solid transparent; transition:border-color .3s;
}
.hero-link:hover { border-bottom-color:var(--aqua); }
.hero-note {
    margin-top:24px; font-size:13.5px; color:var(--faint);
    display:flex; align-items:flex-start; gap:9px;
    animation:fadeUp 1.05s both .54s;
}
.hero-note svg { color:var(--aqua); flex:none; margin-top:3px; }
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }

/* layered product composition */
.hero-media {
    position:relative; animation:fadeUp 1.15s both .36s;
    perspective:1400px;
}
.hero-stack { position:relative; }
.hero-shot-main {
    position:relative; z-index:2; border-radius:var(--radius-lg); overflow:hidden;
    border:1px solid var(--border); box-shadow:var(--shadow-shot);
    transition:transform .8s var(--ease);
    will-change:transform;
}
/* the dive-details capture is a tall page — the frame shows its top */
.hero-shot-main { aspect-ratio:1600/1150; }
.hero-shot-main img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.hero-card {
    position:absolute; z-index:3; border-radius:16px; overflow:hidden;
    border:1px solid rgba(56,189,248,.28);
    box-shadow:0 30px 60px -26px rgba(0,0,0,.85);
    background:var(--deep);
    transition:transform .8s var(--ease);
    will-change:transform;
}
.hero-card img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.hero-card--stat { aspect-ratio:1/.7; }
.hero-card--phone {
    width:23%; left:-5%; bottom:-6%;
    border-radius:20px; animation:float 9s ease-in-out infinite;
}
.hero-card--stat {
    width:42%; right:-7%; top:-8%;
    animation:float 11s ease-in-out infinite reverse;
}
@keyframes float {
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(-12px); }
}
.hero-badge {
    position:absolute; z-index:4; right:6%; bottom:-4%;
    display:inline-flex; align-items:center; gap:9px;
    padding:11px 17px; border-radius:30px;
    background:rgba(4,20,29,.86); border:1px solid var(--border);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--foam);
}
.hero-badge svg { color:var(--aqua); flex:none; }

/* hero thumbnail rail — mobile only */
.hero-thumbs { display:none; }

/* ── footer ───────────────────────────────────────────────────── */
.foot {
    border-top:1px solid var(--border-soft); padding:64px 0 52px;
    position:relative; z-index:1; background:rgba(3,18,26,.6);
}
.foot-grid {
    display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px;
}
.foot-tag { color:var(--faint); font-size:14px; max-width:38ch; margin-top:16px; }
.foot-col h4 {
    font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.22em;
    text-transform:uppercase; color:var(--aqua); font-weight:500; margin-bottom:16px;
}
.foot-col ul { list-style:none; display:flex; flex-direction:column; gap:2px; }
.foot-col a {
    color:var(--muted); text-decoration:none; font-size:14.5px;
    transition:color .25s; display:inline-flex; align-items:center; min-height:40px;
}
.foot-col a:hover { color:var(--aqua); }
.foot-bar {
    margin-top:52px; padding-top:26px; border-top:1px solid var(--border-soft);
    display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
    color:var(--faint); font-size:13px;
}
.foot-bar a { color:var(--aqua); text-decoration:none; }
.foot-bar a:hover { text-decoration:underline; }

/* ── motion opt-out ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    .caustics, .bubbles span,
    .hero-card--phone, .hero-card--stat { animation:none; }
    .hero h1, .hero-eyebrow, .hero-sub, .hero-actions, .hero-note, .hero-media { animation:none; }
    .js .reveal { opacity:1; transform:none; transition:none; }
    .shot-stack img { transition:none; }
    * { scroll-behavior:auto; }
}