/* ═══════════════════════════════════════════════════════════════
   components.css — DiveLog landing page components
═══════════════════════════════════════════════════════════════ */

/* ── buttons ──────────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    min-height:48px; padding:14px 26px;
    font-family:'Jost',sans-serif; font-size:13px; font-weight:500;
    letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
    cursor:pointer; border-radius:40px; border:1px solid transparent;
    white-space:nowrap;
    transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn svg { transition:transform .3s var(--ease); flex:none; }
.btn:hover svg { transform:translateX(4px); }
.btn-primary {
    background:linear-gradient(120deg, var(--aqua), var(--aqua-2));
    color:#042029; box-shadow:0 12px 32px -12px rgba(56,189,248,.62);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 18px 42px -14px rgba(56,189,248,.78); }
.btn-ghost {
    border-color:var(--border); color:var(--text); background:var(--surface);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.btn-ghost:hover { border-color:var(--aqua); color:var(--aqua); transform:translateY(-2px); }
.band--light .btn-primary { background:linear-gradient(120deg, #0f7d9c, #0d8f86); color:#fff; box-shadow:0 12px 30px -14px rgba(7,34,48,.5); }
.band--light .btn-ghost { background:rgba(7,34,48,.04); }

/* ── key facts strip ──────────────────────────────────────────── */
.facts {
    background:linear-gradient(180deg, rgba(56,189,248,.10), rgba(34,184,166,.06));
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    padding:34px 0;
}
.facts-row {
    display:grid; grid-template-columns:repeat(6,1fr); gap:8px;
}
.fact {
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:8px; padding:12px 10px; position:relative;
}
.fact + .fact::before {
    content:''; position:absolute; left:0; top:16%; bottom:16%;
    width:1px; background:var(--border);
}
.fact-ic { color:var(--aqua); opacity:.9; }
.fact-v {
    font-family:'Cormorant Garamond',serif; font-size:clamp(28px,3vw,40px);
    font-weight:500; line-height:1; letter-spacing:-.02em; color:var(--cream);
}
.fact-v em { font-style:normal; color:var(--aqua); }
.fact-c {
    font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--faint); line-height:1.4;
}

/* ── screenshot frame ─────────────────────────────────────────── */
.shot {
    position:relative; border-radius:18px; overflow:hidden;
    border:1px solid var(--border); box-shadow:var(--shadow-shot);
    background:var(--deep);
}
.shot img { width:100%; height:auto; }
.shot--glow::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    box-shadow:inset 0 0 60px -20px rgba(56,189,248,.25);
}
.shot-frame {   /* clipped tall screenshot — shows the top of a long page */
    max-height:min(70vh,620px); overflow:hidden;
}
.shot-frame img { object-fit:cover; object-position:top center; }
.shot-cap {
    display:flex; align-items:center; gap:8px; margin-top:14px;
    font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
}
.shot-cap svg { color:var(--aqua); flex:none; }

/* phone frame */
.phone {
    border-radius:26px; overflow:hidden; border:1px solid var(--border);
    box-shadow:var(--shadow-shot); background:var(--deep); max-width:290px;
}
.phone img { width:100%; height:auto; }

/* ── alternating showcase rows ────────────────────────────────── */
.showcase { display:flex; flex-direction:column; gap:clamp(72px,9vw,130px); margin-top:clamp(56px,7vw,88px); }
.row {
    display:grid; grid-template-columns:1.05fr .95fr;
    gap:clamp(36px,5vw,72px); align-items:center;
}
.row--flip .row-media { order:-1; }
.row-copy h3 {
    font-family:'Cormorant Garamond',serif; font-size:clamp(27px,3.1vw,40px);
    font-weight:300; line-height:1.06; letter-spacing:-.02em; margin-top:18px;
}
.row-copy h3 em { font-style:italic; color:var(--aqua); }
.row-copy p { color:var(--muted); margin-top:16px; }
.row-copy .lead { margin-top:16px; }

/* feature bullet list */
.blist { list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:11px; }
.blist li { display:flex; gap:11px; align-items:flex-start; font-size:15.5px; color:var(--muted); }
.blist svg { color:var(--aqua); flex:none; margin-top:5px; }
.blist b { color:var(--text); font-weight:500; }

/* metric chips (deco / stats numbers) */
.chips { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.chip {
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 14px; border-radius:30px;
    border:1px solid var(--border); background:var(--surface);
    font-size:12.5px; letter-spacing:.04em; color:var(--muted);
}
.chip b { color:var(--text); font-weight:500; }
.chip--gold { border-color:rgba(245,197,66,.35); color:var(--foam); }
.chip--gold b { color:var(--gold); }

/* ── value pillars ────────────────────────────────────────────── */
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:clamp(48px,6vw,72px); }
.pillar {
    padding:38px 32px 40px; border-radius:20px;
    border:1px solid var(--border); background:var(--surface);
    transition:transform .4s var(--ease), border-color .4s, background .4s;
}
.pillar:hover { transform:translateY(-5px); border-color:rgba(56,189,248,.42); background:var(--surface-2); }
.pillar-ic {
    width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
    color:var(--aqua); background:rgba(56,189,248,.12); border:1px solid var(--border);
    margin-bottom:22px;
}
.pillar h3 { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:500; }
.pillar p { color:var(--muted); margin-top:12px; font-size:15.5px; }

/* ── privacy list ─────────────────────────────────────────────── */
.privacy-grid { display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(36px,5vw,72px); align-items:center; }
.pri-list { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:14px 24px; margin-top:30px; }
.pri-list li { display:flex; gap:11px; align-items:flex-start; font-size:15.5px; color:var(--foam); }
.pri-list svg { color:var(--aqua-2); flex:none; margin-top:4px; }
.note {
    margin-top:30px; padding:20px 22px; border-radius:14px;
    border:1px solid var(--border); background:rgba(3,18,26,.5);
    font-size:14.5px; color:var(--muted);
}
.note b { color:var(--foam); font-weight:500; display:block; margin-bottom:6px; }
.band--light .note { background:rgba(7,34,48,.04); }
.band--light .note b { color:var(--ink); }

/* ── modules ──────────────────────────────────────────────────── */
.mod-groups { display:flex; flex-direction:column; gap:clamp(34px,4vw,52px); margin-top:clamp(48px,6vw,72px); }
.mod-group-head {
    display:flex; align-items:center; gap:16px; margin-bottom:20px;
}
.mod-group-head h3 {
    font-family:'Jost',sans-serif; font-size:11.5px; letter-spacing:.24em;
    text-transform:uppercase; color:var(--aqua); font-weight:500; white-space:nowrap;
}
.mod-group-head::after { content:''; flex:1; height:1px; background:var(--border); }
.mod-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.mod-grid--4 { grid-template-columns:repeat(4,1fr); }
.mod-grid--3 { grid-template-columns:repeat(3,1fr); }
.mod-grid--2 { grid-template-columns:repeat(2,1fr); }
.mod {
    display:flex; align-items:center; gap:14px; padding:16px 18px;
    border-radius:15px; border:1px solid var(--border-soft); background:var(--surface);
    transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.mod:hover { border-color:rgba(56,189,248,.42); background:var(--surface-2); transform:translateY(-3px); }
.mod img { width:56px; height:56px; flex:none; }
.mod-t b { display:block; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:18px; line-height:1.15; }
.mod-t span { font-size:13px; color:var(--faint); line-height:1.45; display:block; margin-top:2px; }

/* three-up screenshot tiles (secondary modules) */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:clamp(44px,5vw,64px); }
.gallery figure { min-width:0; }
.shot--tile { aspect-ratio:16/11; }
.shot--tile img { height:100%; object-fit:cover; object-position:top center; }
.gallery figcaption {
    margin-top:12px; font-size:12.5px; letter-spacing:.06em; color:var(--faint);
}

/* ── theme showcase ──────────────────────────────────────────── */
.theme-wrap { margin-top:clamp(44px,5vw,64px); }
.theme-tabs {
    display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:28px;
}
.theme-tab {
    min-height:44px; padding:11px 20px; border-radius:30px; cursor:pointer;
    border:1px solid var(--border); background:var(--surface);
    font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--muted); transition:color .3s, border-color .3s, background .3s;
}
.theme-tab:hover { color:var(--text); border-color:var(--aqua); }
.theme-tab[aria-selected="true"] {
    color:#042029; background:linear-gradient(120deg, var(--aqua), var(--aqua-2));
    border-color:transparent; font-weight:500;
}
.theme-stage {
    position:relative; border-radius:18px; overflow:hidden;
    border:1px solid var(--border); box-shadow:var(--shadow-shot);
    aspect-ratio:1200/875; background:var(--deep);
}
.theme-stage img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:0; transition:opacity .6s ease;
}
.theme-stage img.on { opacity:1; }
.theme-meta {
    display:flex; flex-wrap:wrap; gap:18px 34px; justify-content:center;
    margin-top:26px; font-size:14.5px; color:var(--muted);
}
.theme-meta span { display:inline-flex; align-items:center; gap:9px; }
.theme-meta svg { color:var(--aqua); flex:none; }

/* responsive pair (desktop + phone) */
.resp-pair {
    display:grid; grid-template-columns:1.5fr .5fr; gap:28px; align-items:end;
    margin-top:clamp(40px,5vw,60px);
}

/* ── audience cards ───────────────────────────────────────────── */
.aud-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:clamp(46px,6vw,70px); }
.aud {
    padding:32px 26px 34px; border-radius:18px;
    border:1px solid var(--border); background:var(--surface);
    transition:transform .4s var(--ease), border-color .4s, background .4s;
}
.aud:hover { transform:translateY(-5px); border-color:rgba(56,189,248,.42); background:var(--surface-2); }
.aud-ic { color:var(--aqua); margin-bottom:18px; }
.aud h3 { font-family:'Cormorant Garamond',serif; font-size:23px; font-weight:500; }
.aud p { color:var(--muted); margin-top:11px; font-size:15px; }

/* ── compatibility table ──────────────────────────────────────── */
.table-scroll { margin-top:clamp(40px,5vw,60px); overflow-x:auto; border-radius:16px; border:1px solid var(--border); }
table.compat { width:100%; border-collapse:collapse; min-width:720px; background:var(--surface); }
table.compat caption { text-align:left; padding:0 0 14px; color:var(--faint); font-size:13.5px; }
table.compat th, table.compat td { padding:16px 20px; text-align:left; font-size:14.5px; vertical-align:top; }
table.compat thead th {
    font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--aqua); font-weight:500;
    border-bottom:1px solid var(--border); white-space:nowrap;
}
table.compat tbody tr + tr td { border-top:1px solid var(--border-soft); }
table.compat td:first-child { color:var(--text); font-weight:500; }
table.compat td { color:var(--muted); }
.tag {
    display:inline-block; padding:4px 11px; border-radius:20px; font-size:11.5px;
    letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.tag--ok   { background:rgba(18,165,148,.16); color:#5fd3c4; border:1px solid rgba(18,165,148,.35); }
.tag--warn { background:rgba(245,197,66,.14); color:#f3d488; border:1px solid rgba(245,197,66,.32); }
.band--light .tag--ok   { background:rgba(13,143,134,.12); color:#0a6f68; border-color:rgba(13,143,134,.3); }
.band--light .tag--warn { background:rgba(180,130,20,.12); color:#8a6410; border-color:rgba(180,130,20,.3); }

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq-grid { max-width:860px; margin:clamp(44px,5vw,64px) auto 0; display:flex; flex-direction:column; gap:12px; }
.qa { border:1px solid var(--border); border-radius:15px; background:var(--surface); overflow:hidden; }
.qa summary {
    cursor:pointer; list-style:none; padding:20px 24px; min-height:56px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:500; color:var(--text);
}
.qa summary::-webkit-details-marker { display:none; }
.qa summary:hover { color:var(--aqua); }
.qa .plus { flex:none; width:20px; height:20px; position:relative; }
.qa .plus::before, .qa .plus::after {
    content:''; position:absolute; background:var(--aqua); border-radius:2px;
}
.qa .plus::before { top:9px; left:0; right:0; height:2px; }
.qa .plus::after { left:9px; top:0; bottom:0; width:2px; transition:transform .3s var(--ease); }
.qa[open] .plus::after { transform:rotate(90deg); }
.qa-body { padding:0 24px 22px; color:var(--muted); font-size:15.5px; max-width:74ch; }

/* ── final CTA ────────────────────────────────────────────────── */
.cta { text-align:center; }
.cta .title { margin-inline:auto; }
.cta .lead { margin:20px auto 0; }
.cta-actions { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:38px; }
.cta-note { margin-top:26px; font-size:13.5px; color:var(--faint); }