/*
 * Bivryn — kairoweb design foundation
 *
 * Mirrors the iOS app's visual register: deep dark navy ground, amber
 * + teal accents, NY-Italic editorial headlines, calm cinematic
 * motion. We deliberately avoid the fitness-tracker aesthetic
 * (aggressive gradients, brutalist gauges, hot reds) to keep the
 * marketing surface congruent with the product itself.
 */

/* ---------------------------------------------------------------- */
/* Tokens                                                           */
/* ---------------------------------------------------------------- */

:root {
    /* Backgrounds */
    --bg-primary:  #0A0E1A;
    --bg-surface:  #161B2A;
    --bg-elevated: #1E2435;

    /* Text */
    --text-primary:    #FFFFFF;
    --text-secondary:  rgba(255, 255, 255, 0.66);
    --text-tertiary:   rgba(255, 255, 255, 0.46);
    --text-quaternary: rgba(255, 255, 255, 0.30);

    /* Accents — matched to the iOS app */
    --amber:       #E89759;
    --amber-soft:  rgba(232, 151, 89, 0.14);
    --amber-line:  rgba(232, 151, 89, 0.35);
    --teal:        #5BC4A4;
    --teal-soft:   rgba(91, 196, 164, 0.14);

    /* Strokes + lines */
    --stroke:        rgba(255, 255, 255, 0.08);
    --stroke-strong: rgba(255, 255, 255, 0.16);

    /* Spacing / sizing */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------------- */
/* Reset + base                                                     */
/* ---------------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    overflow-x: hidden;
    line-height: 1.5;
}

/* Editorial serif used for headlines and any "soft moment" phrases —
 * mirrors the NewYork-Italic font the app uses for hero copy. */
.editorial {
    font-family: 'New York', 'Iowan Old Style', 'Cambria', 'Times New Roman', Georgia, serif;
    font-style: italic;
    letter-spacing: -0.01em;
}

/* Tabular figures for any numeric content — matches the
 * monospaced-digit treatment in the app. */
.tabular { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- */
/* Ambient hero glow — the soft, slow-pulsing colour wash that lives  */
/* behind the hero section. Pulled from KairoColors.amber +          */
/* KairoColors.teal so this matches the app's living landscape.      */
/* ---------------------------------------------------------------- */

.ambient-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.36;
    animation: orb-drift 16s ease-in-out infinite;
    will-change: transform, opacity;
}

.ambient-orb--amber {
    width: 520px; height: 520px;
    background: radial-gradient(circle, var(--amber) 0%, transparent 70%);
    top: -120px; left: -80px;
}

.ambient-orb--teal {
    width: 480px; height: 480px;
    background: radial-gradient(circle, var(--teal) 0%, transparent 70%);
    top: 8%; right: -120px;
    animation-delay: -6s;
    animation-duration: 22s;
    opacity: 0.30;
}

.ambient-orb--deep {
    width: 720px; height: 720px;
    background: radial-gradient(circle, rgba(80, 120, 200, 0.35) 0%, transparent 70%);
    bottom: -300px; left: 50%;
    transform: translateX(-50%);
    animation-delay: -10s;
    opacity: 0.40;
}

@keyframes orb-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.05); }
    66%      { transform: translate(-30px, 40px) scale(0.95); }
}

/* Respect users who've turned off motion in iOS / macOS Accessibility. */
@media (prefers-reduced-motion: reduce) {
    .ambient-orb { animation: none; }
    html { scroll-behavior: auto; }
    .fade-in, .fade-up { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------- */
/* Reveal-on-scroll                                                 */
/* Driven by the IntersectionObserver in main.js. Elements start    */
/* in the "hidden" state and the observer flips .is-visible when    */
/* they enter the viewport.                                         */
/* ---------------------------------------------------------------- */

.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fade-up.is-visible { opacity: 1; transform: none; }

.fade-in {
    opacity: 0;
    transition: opacity 1.2s ease-out;
}
.fade-in.is-visible { opacity: 1; }

/* Stagger helpers — applied on the parent, drives the children. */
.stagger > * { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.08s; }
.stagger > *:nth-child(3) { transition-delay: 0.16s; }
.stagger > *:nth-child(4) { transition-delay: 0.24s; }
.stagger > *:nth-child(5) { transition-delay: 0.32s; }
.stagger > *:nth-child(6) { transition-delay: 0.40s; }

/* ---------------------------------------------------------------- */
/* Phone frame                                                      */
/* Wraps each product screenshot so they look polished even when    */
/* the underlying PNG is just a raw iPhone screenshot. Subtle bezel */
/* + drop shadow + slight 3D tilt on hover.                         */
/* ---------------------------------------------------------------- */

.phone-frame {
    position: relative;
    display: inline-block;
    border-radius: 44px;
    padding: 10px;
    background: linear-gradient(160deg, #2c3041 0%, #14171f 100%);
    box-shadow:
        var(--shadow-soft),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.phone-frame:hover {
    transform: translateY(-4px) rotateX(2deg) rotateY(-2deg);
}

.phone-frame__screen {
    position: relative;
    border-radius: 34px;
    overflow: hidden;
    background: var(--bg-primary);
    aspect-ratio: 9 / 19.5; /* iPhone 15/16 Pro ratio */
    width: 100%;
    max-width: 320px;
}

.phone-frame__screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Placeholder shown when the named PNG hasn't been dropped in yet.
 * Uses :has() so the empty-state styles only apply when no <img>
 * loaded. Calm copy — no shouty "Image missing" treatment. */
.phone-frame__screen:not(:has(img))::after,
.phone-frame__screen img[data-placeholder]::after {
    content: attr(data-placeholder-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background:
        radial-gradient(circle at 30% 20%, rgba(232,151,89,0.15) 0%, transparent 55%),
        radial-gradient(circle at 70% 80%, rgba(91,196,164,0.12) 0%, transparent 55%),
        var(--bg-surface);
}

/* When an <img> is present but fails to load, the broken-image icon
 * gets swapped for the same calm placeholder treatment via the JS
 * onerror handler. */
img.screenshot-img {
    background:
        radial-gradient(circle at 30% 20%, rgba(232,151,89,0.15) 0%, transparent 55%),
        radial-gradient(circle at 70% 80%, rgba(91,196,164,0.12) 0%, transparent 55%),
        var(--bg-surface);
}

/* ---------------------------------------------------------------- */
/* Buttons                                                          */
/* ---------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: pointer;
    border: 0;
    will-change: transform;
}

.btn:hover { transform: translateY(-1px); }

.btn--primary {
    background: var(--amber);
    color: #1a1208;
    box-shadow: 0 12px 32px rgba(232, 151, 89, 0.28);
}

.btn--primary:hover {
    background: #f0a36b;
    box-shadow: 0 16px 38px rgba(232, 151, 89, 0.38);
}

.btn--ghost {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border: 1px solid var(--stroke);
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
}

/* ---------------------------------------------------------------- */
/* Cards                                                            */
/* ---------------------------------------------------------------- */

.card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--stroke);
    padding: 28px;
    transition: border-color 0.4s ease, transform 0.4s ease;
}

.card:hover {
    border-color: var(--stroke-strong);
    transform: translateY(-2px);
}

.card__eyebrow {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.10em;
    color: var(--text-tertiary);
    margin: 0 0 12px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.card__title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 8px 0;
    letter-spacing: -0.01em;
}

.card__body {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
}

/* Accent chip — small inline tag used throughout the page */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    background: var(--amber-soft);
    color: var(--amber);
    border: 1px solid var(--amber-line);
}

.chip--teal {
    background: var(--teal-soft);
    color: var(--teal);
    border-color: rgba(91, 196, 164, 0.35);
}

/* ---------------------------------------------------------------- */
/* Nav                                                              */
/* ---------------------------------------------------------------- */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 18px 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(10, 14, 26, 0.78);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.nav--scrolled {
    border-bottom-color: var(--stroke);
    background: rgba(10, 14, 26, 0.92);
}

.nav__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav__logo {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Bivryn mark — the small "K" icon that lives next to the brand
 * wordmark in the nav and footer. SVG is inlined per usage so we
 * never depend on a separate asset request. The wrapper just gives
 * the SVG a fixed canvas size; the SVG itself paints the rounded
 * square + amber K. */
.kairo-mark {
    display: inline-block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    line-height: 0;
}

.kairo-mark svg { display: block; width: 100%; height: 100%; }

/* Footer-brand sizing — slightly larger because the footer reads
 * as a "calling card" anchor. */
.footer__brand .kairo-mark { width: 32px; height: 32px; }

.nav__links {
    display: flex;
    gap: 28px;
    align-items: center;
}

.nav__link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav__link:hover { color: var(--text-primary); }

/* Primary CTA pill embedded in the nav. Stays visible at every
 * breakpoint (including mobile) because "Get Bivryn" is the
 * highest-value action on the page and shouldn't disappear behind
 * a hamburger. */
.nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--amber);
    color: #1a1208;
    padding: 9px 18px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(232, 151, 89, 0.22);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    white-space: nowrap;
}

.nav__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(232, 151, 89, 0.32);
    color: #1a1208;
}

.nav__cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 720px) {
    /* Hide non-CTA nav links on mobile; the CTA must stay. */
    .nav__links .nav__link:not(.nav__cta) { display: none; }
}

/* ---------------------------------------------------------------- */
/* Footer "Get Bivryn" CTA bar                                       */
/* Lives above the brand columns. Mirrors the nav CTA so it's the   */
/* same one-tap action whether the user is at the top or the        */
/* bottom of any page.                                              */
/* ---------------------------------------------------------------- */

.footer__cta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 28px;
    margin-bottom: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(120deg,
        rgba(232, 151, 89, 0.10) 0%,
        rgba(91, 196, 164, 0.06) 100%);
    border: 1px solid var(--amber-line);
}

.footer__cta-text {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.005em;
}

.footer__cta-text-soft {
    color: var(--text-secondary);
    font-weight: 400;
    margin-left: 4px;
}

.footer__cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 9999px;
    background: var(--amber);
    color: #1a1208;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 12px 32px rgba(232, 151, 89, 0.28);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.footer__cta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 38px rgba(232, 151, 89, 0.38);
    color: #1a1208;
}

@media (max-width: 560px) {
    .footer__cta-bar { padding: 22px; }
    .footer__cta-text { font-size: 15px; }
}

/* ---------------------------------------------------------------- */
/* Layout helpers                                                   */
/* ---------------------------------------------------------------- */

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    position: relative;
    padding: 120px 0;
}

@media (max-width: 720px) {
    .section { padding: 80px 0; }
}

.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    font-weight: 600;
    color: var(--amber);
    margin-bottom: 18px;
}

.h-display {
    font-size: clamp(40px, 7vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 600;
    margin: 0 0 24px 0;
}

.h-section {
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 0 0 24px 0;
}

.lede {
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 640px;
}

/* ---------------------------------------------------------------- */
/* Footer                                                           */
/* ---------------------------------------------------------------- */

.footer {
    padding: 80px 0 60px;
    border-top: 1px solid var(--stroke);
    background: var(--bg-primary);
}

.footer__top {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    justify-content: space-between;
    margin-bottom: 48px;
}

.footer__brand {
    max-width: 320px;
}

.footer__brand-line {
    color: var(--text-tertiary);
    font-size: 14px;
    margin-top: 12px;
    line-height: 1.6;
}

.footer__col h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--text-tertiary);
    margin: 0 0 14px 0;
    font-weight: 600;
}

.footer__col a {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 10px;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer__col a:hover { color: var(--text-primary); }

.footer__legal {
    border-top: 1px solid var(--stroke);
    padding-top: 28px;
    color: var(--text-quaternary);
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: space-between;
}

/* ---------------------------------------------------------------- */
/* Legal-page typography (privacy / terms / support)                */
/* ---------------------------------------------------------------- */

.legal-content {
    max-width: 760px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.7;
}

.legal-content h1 {
    color: var(--text-primary);
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.legal-content h2 {
    color: var(--text-primary);
    font-size: 22px;
    margin-top: 48px;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.legal-content h3 {
    color: var(--text-primary);
    font-size: 17px;
    margin-top: 28px;
    margin-bottom: 8px;
}

.legal-content p { margin: 0 0 16px 0; }

.legal-content ul, .legal-content ol {
    padding-left: 22px;
    margin: 0 0 16px 0;
}

.legal-content li { margin-bottom: 8px; }

.legal-content a {
    color: var(--amber);
    text-decoration: none;
    border-bottom: 1px solid var(--amber-line);
    transition: border-color 0.2s ease;
}

.legal-content a:hover { border-bottom-color: var(--amber); }

.legal-content__meta {
    color: var(--text-tertiary);
    font-size: 13px;
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--stroke);
}

.legal-content__callout {
    background: var(--bg-surface);
    border: 1px solid var(--stroke);
    border-left: 3px solid var(--amber);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin: 24px 0;
}

.legal-content__callout p:last-child { margin-bottom: 0; }