/* ============================================================================
   naturarum / apps — shared design system
   Token-driven: spacing, type, radii, and motion all come from the :root scale
   below, so the look stays consistent across the hub and every app page. Pages
   may override the accent variables (and a motif) in a small inline <style>.
   Dark by default, with a light-mode palette via prefers-color-scheme.
   ========================================================================== */

:root {
    /* ── Colour ──────────────────────────────────────────────────────────── */
    --bg: #0d0d11;
    --bg-card: #14141a;
    --bg-card-hover: #1a1a22;
    --text: #e4e4e8;
    --text-muted: #a0a0ae;
    --text-dim: #6b6b7a;

    /* Pastel family palette (warm orange → pink → lavender → blue → cyan).
       A page sets --accent to its own primary; --grad stays constant. */
    --accent: #ffa9c9;
    --accent-glow: rgba(255, 169, 201, 0.22);
    --accent2: #8cb8ff;
    --accent2-glow: rgba(140, 184, 255, 0.18);
    --accent3: #cfa9ff;
    --accent4: #ffbd82;
    --accent5: #9ee6e6;
    --grad: linear-gradient(100deg,
        var(--accent4) 0%, var(--accent) 28%, var(--accent3) 52%,
        var(--accent2) 76%, var(--accent5) 100%);
    --on-accent: #1a1020;        /* dark text that sits on an accent fill */

    --border: #22222b;
    --border-light: #2a2a35;

    /* ── Radii ───────────────────────────────────────────────────────────── */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* ── Spacing scale (4px base) ────────────────────────────────────────── */
    --space-3xs: 4px;  --space-2xs: 8px;  --space-xs: 12px;  --space-sm: 16px;
    --space-md: 24px;  --space-lg: 32px;  --space-xl: 48px;  --space-2xl: 64px;
    --space-3xl: 96px;

    /* Fluid rhythm — tight top, generous bottom */
    --section-pt: clamp(16px, 3.5vw, 28px);
    --section-pb: clamp(40px, 7vw, 64px);
    --hero-pt:    clamp(48px, 9vw, 88px);
    --hero-pb:    clamp(36px, 5vw, 52px);
    --card-pad-y: clamp(20px, 3vw, 26px);
    --card-pad-x: clamp(18px, 2.6vw, 24px);
    --gap-grid:   clamp(14px, 2vw, 18px);

    /* ── Layout ──────────────────────────────────────────────────────────── */
    --gutter: clamp(22px, 5.5vw, 32px);
    --measure: 62ch;
    --max-width: 880px;
    --nav-height: 56px;

    /* ── Type ────────────────────────────────────────────────────────────── */
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
    --fs-eyebrow:    clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
    --fs-body-sm:    clamp(0.82rem, 0.8rem + 0.12vw, 0.875rem);
    --fs-body:       clamp(0.9rem, 0.88rem + 0.2vw, 0.95rem);
    --fs-lead:       clamp(1.02rem, 0.96rem + 0.5vw, 1.18rem);
    --fs-card-title: clamp(1.05rem, 1.0rem + 0.4vw, 1.18rem);
    --fs-h1:         clamp(2.0rem, 1.35rem + 3.1vw, 3.4rem);
    --lh-tight: 1.1;  --lh-snug: 1.35;  --lh-normal: 1.55;  --lh-loose: 1.6;
    --tracking-tight: -0.03em;  --tracking-snug: -0.01em;
    --tracking-eyebrow: 0.14em;  --tracking-label: 0.08em;

    /* ── Motion ──────────────────────────────────────────────────────────── */
    --t-fast: 0.2s;  --t-med: 0.3s;
    --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ── Elevation ───────────────────────────────────────────────────────── */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 14px 32px rgba(0, 0, 0, 0.32);
}

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

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

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: var(--lh-loose);
    min-height: 100vh;
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(140, 184, 255, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse at 25% 40%, rgba(255, 169, 201, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse at 78% 68%, rgba(207, 169, 255, 0.05) 0%, transparent 60%);
    background-attachment: fixed;
}

/* keep content above the animated background */
nav, main, footer { position: relative; z-index: 1; }

/* keyboard focus — visible only to keyboard/AT users, never to mouse clicks */
:where(a, button, [tabindex], summary, input, select):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ─── Nav ─────────────────────────────────────────────────────────────── */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(13, 13, 17, 0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    height: var(--nav-height);
    display: flex;
    align-items: center;
}
nav .nav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
}
.nav-brand {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: var(--tracking-snug);
    color: var(--text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}
.nav-mark {
    width: 17px;
    height: 17px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--accent4), var(--accent), var(--accent3), var(--accent2));
    flex-shrink: 0;
}
.nav-crumb {
    color: var(--text-dim);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-crumb b { color: var(--text-muted); font-weight: 600; }
.nav-cta {
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-light);
    transition: background var(--t-fast) ease, border-color var(--t-fast) ease, filter var(--t-fast) ease;
    letter-spacing: var(--tracking-snug);
    white-space: nowrap;
}
.nav-cta:hover {
    background: var(--accent-glow);
    border-color: var(--accent);
    filter: brightness(1.1);
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ─── Hero ────────────────────────────────────────────────────────────── */
.hero {
    text-align: center;
    padding-block: var(--hero-pt) var(--hero-pb);
    animation: fadeUp 0.7s ease-out both;
}
.hero.left { text-align: left; }
.hero .eyebrow {
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: var(--space-xs);
    font-weight: 600;
}
.hero h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-sm);
    color: #f5f5f8;
    text-wrap: balance;
}
.hero h1 .accent, .grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent);
}
.hero .tagline {
    font-size: var(--fs-lead);
    color: var(--text-muted);
    max-width: var(--measure);
    margin: 0 auto var(--space-lg);
    letter-spacing: var(--tracking-snug);
    line-height: var(--lh-snug);
    text-wrap: pretty;
}
.hero.left .tagline { margin-left: 0; }
.cta-group {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.hero.left .cta-group { justify-content: flex-start; }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn-appstore { display: inline-block; transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.btn-appstore:hover { transform: translateY(-2px); box-shadow: 0 8px 28px var(--accent-glow); }
.btn-appstore img { height: 44px; display: block; }

.btn-primary, .btn-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px;
    font-size: 0.9rem; letter-spacing: var(--tracking-snug); text-decoration: none;
    border-radius: var(--radius-pill);
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease,
                background var(--t-fast) ease, border-color var(--t-fast) ease, filter var(--t-fast) ease;
}
.btn-primary {
    font-weight: 700; color: var(--on-accent); padding: 0 22px; border: none;
    background: linear-gradient(120deg, var(--accent), var(--accent3));
}
.btn-primary:hover { filter: brightness(1.07); transform: translateY(-2px); }
.btn-secondary {
    font-weight: 600; color: var(--text); padding: 0 20px;
    border: 1px solid var(--border-light);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--text-dim); }

.section-title {
    font-size: var(--fs-body-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-dim);
    margin-bottom: var(--space-md);
    font-weight: 600;
}

/* ─── App grid (hub) ──────────────────────────────────────────────────── */
.apps { padding-block: var(--section-pt) var(--section-pb); }
.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--gap-grid);
}
.app-card {
    background: rgba(20, 20, 26, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--card-pad-y) var(--card-pad-x);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--t-med) var(--ease-bounce),
                border-color var(--t-med) ease, box-shadow var(--t-med) ease, background var(--t-med) ease;
}
.app-card:hover {
    transform: translateY(-4px);
    border-color: var(--card-accent, var(--accent));
    background: rgba(26, 26, 34, 0.85);
    box-shadow: var(--shadow-card-hover), 0 0 16px var(--card-glow, var(--accent-glow));
}
.app-card:focus-visible { outline: 2px solid var(--card-accent, var(--accent)); outline-offset: 3px; }
.app-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-sm);
}
.app-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.app-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-name {
    font-size: var(--fs-card-title);
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
    color: #eaeaef;
    margin-bottom: var(--space-3xs);
}
.app-desc {
    font-size: var(--fs-body);
    color: var(--text-muted);
    line-height: var(--lh-normal);
    margin-bottom: var(--space-sm);
    flex: 1;
}
.app-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2xs);
}
.app-link { font-size: var(--fs-body-sm); font-weight: 600; color: var(--card-accent, var(--accent)); letter-spacing: var(--tracking-snug); }
.pill {
    font-size: 0.7rem;
    color: var(--text-dim);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    white-space: nowrap;
}
.badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.badge-available { background: rgba(158, 230, 230, 0.15); color: var(--accent5); }
.badge-soon { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); }
.badge-plugin { background: rgba(255, 189, 130, 0.14); color: var(--accent4); }

/* "different identity" card variant (Re-deemer — warm / hardware) */
.app-card.alt { background: linear-gradient(165deg, #16130d, #131316); border-color: #3a2f1d; }
.app-card.alt:hover { border-color: #5a4a2e; box-shadow: var(--shadow-card-hover), 0 0 16px rgba(255, 189, 130, 0.16); }
.app-card.alt .app-name { color: #f3e6d4; }
.app-card.alt .app-desc { color: #b6a489; }

/* ─── Feature / detail cards (app pages) ──────────────────────────────── */
.features { padding-block: var(--section-pt) var(--section-pb); }
.features-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-grid); }
.feature-card {
    background: rgba(20, 20, 26, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--card-pad-y) var(--card-pad-x);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--t-med) var(--ease-bounce),
                border-color var(--t-med) ease, box-shadow var(--t-med) ease, background var(--t-med) ease;
}
.feature-card:hover {
    background: rgba(26, 26, 34, 0.85);
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover), 0 0 15px var(--accent-glow);
}
.feature-card .card-label {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-dim); margin-bottom: var(--space-3xs); font-weight: 600;
}
.feature-card h3 { font-size: var(--fs-card-title); font-weight: 600; letter-spacing: var(--tracking-snug); margin-bottom: var(--space-2xs); color: #eaeaef; }
.feature-card p { font-size: var(--fs-body); color: var(--text-muted); line-height: var(--lh-normal); }
.feature-card ul { list-style: none; padding: 0; margin-top: var(--space-2xs); }
.feature-card ul li {
    font-size: var(--fs-body-sm); color: var(--text-muted);
    padding: 3px 0 3px 18px; position: relative; line-height: var(--lh-normal);
}
.feature-card ul li::before {
    content: ''; position: absolute; left: 0; top: 9px;
    width: 6px; height: 5.2px; background: var(--accent); border-radius: 1px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); opacity: 0.6;
}

.details { padding-block: var(--section-pt) var(--section-pb); }
.details-card {
    background: rgba(20, 20, 26, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--card-pad-y) var(--card-pad-x);
    margin-bottom: var(--space-sm);
    box-shadow: var(--shadow-card);
    transition: transform var(--t-med) var(--ease-bounce), border-color var(--t-med) ease, box-shadow var(--t-med) ease;
}
.details-card:hover { transform: translateY(-2px); border-color: var(--border-light); box-shadow: var(--shadow-card-hover); }
.details-card h3 { font-size: var(--fs-card-title); font-weight: 600; letter-spacing: var(--tracking-snug); margin-bottom: var(--space-2xs); color: #eaeaef; }
.details-card p { font-size: var(--fs-body); color: var(--text-muted); line-height: var(--lh-normal); max-width: var(--measure); }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-xs); }
.tag {
    font-size: 0.75rem; padding: 4px 10px; border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-light);
    color: var(--text-muted); letter-spacing: var(--tracking-snug);
}

/* ─── Contact ─────────────────────────────────────────────────────────── */
.contact { padding-block: var(--section-pt) var(--section-pb); }
.contact-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--card-pad-y) var(--card-pad-x);
    text-align: center; box-shadow: var(--shadow-card);
}
.contact-card h3 { font-size: var(--fs-card-title); font-weight: 600; letter-spacing: var(--tracking-snug); margin-bottom: var(--space-2xs); }
.contact-card p { color: var(--text-muted); font-size: var(--fs-body); margin-bottom: var(--space-3xs); }
.contact-email {
    display: inline-block; font-size: 1rem; font-weight: 600; color: var(--accent);
    text-decoration: none; margin-top: var(--space-2xs); transition: filter var(--t-fast); letter-spacing: var(--tracking-snug);
}
.contact-email:hover { filter: brightness(1.15); }

/* ─── Footer ──────────────────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--border);
    padding: var(--space-lg) 0;
    text-align: center;
    color: var(--text-dim);
    font-size: var(--fs-body-sm);
    letter-spacing: 0.01em;
}
footer a { color: var(--text-muted); text-decoration: none; transition: color var(--t-fast); }
footer a:hover { color: var(--accent); }
footer .footer-links {
    display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-2xs);
}

/* ─── Animated background (soft floating blobs) ───────────────────────── */
.bg-shapes { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.10; animation: drift 18s ease-in-out infinite; }
.bg-blob:nth-child(1) { width: 320px; height: 320px; background: var(--accent);  top: 4%;  left: -6%; }
.bg-blob:nth-child(2) { width: 260px; height: 260px; background: var(--accent2); top: 52%; right: -5%; animation-delay: -4s; }
.bg-blob:nth-child(3) { width: 200px; height: 200px; background: var(--accent3); bottom: 8%; left: 14%; animation-delay: -8s; }
.bg-blob:nth-child(4) { width: 220px; height: 220px; background: var(--accent4); top: 26%; right: 18%; animation-delay: -12s; }
@keyframes drift {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-26px) scale(1.06); }
}

/* ─── Scroll reveal ───────────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .bg-blob { animation: none; }
    .hero { animation: none; }
    .reveal { transition: none; }
    html { scroll-behavior: auto; }
    .app-card, .feature-card, .details-card,
    .btn-primary, .btn-secondary, .btn-appstore { transition: none; }
    .app-card:hover, .feature-card:hover, .details-card:hover,
    .btn-primary:hover, .btn-secondary:hover, .btn-appstore:hover { transform: none; }
}

/* ─── Responsive (mobile-first) ───────────────────────────────────────── */
@media (min-width: 600px) {
    .features-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
    .nav-crumb { display: none; }   /* keep brand + CTA from crowding on small phones */
}

/* ─── Light mode ──────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
    :root {
        --bg: #f2f2f7;
        --bg-card: #ffffff;
        --bg-card-hover: #fcfcfc;
        --text: #1d1d1f;
        --text-muted: #444446;
        --text-dim: #5a5a5c;
        --accent: #e23a78;          /* darker pink → AA contrast as link/CTA text */
        --accent-glow: rgba(226, 58, 120, 0.20);
        --accent2: #4a8cff;
        --accent2-glow: rgba(74, 140, 255, 0.18);
        --accent3: #9b51e0;
        --accent4: #e07000;
        --accent5: #00a0a0;
        --border: #d2d2d7;
        --border-light: #e5e5ea;
        --on-accent: #ffffff;
        --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
        --shadow-card-hover: 0 12px 30px rgba(0, 0, 0, 0.08);
    }
    body {
        background-image:
            radial-gradient(ellipse at 50% 0%, rgba(74, 140, 255, 0.05) 0%, transparent 70%),
            radial-gradient(ellipse at 25% 40%, rgba(226, 58, 120, 0.04) 0%, transparent 60%),
            radial-gradient(ellipse at 78% 68%, rgba(155, 81, 224, 0.04) 0%, transparent 60%);
    }
    nav { background: rgba(242, 242, 247, 0.75); }
    .hero h1 { color: #000; }
    .app-card, .feature-card, .details-card, .contact-card { background: rgba(255, 255, 255, 0.7); }
    .app-card:hover, .feature-card:hover { background: rgba(255, 255, 255, 0.92); }
    .app-name, .feature-card h3, .details-card h3, .contact-card h3 { color: #111; }
    .app-card.alt { background: linear-gradient(165deg, #fbf3e6, #fdfdfd); border-color: #e4d4ba; }
    .app-card.alt .app-name { color: #5a4216; }
    .app-card.alt .app-desc { color: #7a6646; }
    .badge-soon { background: rgba(0, 0, 0, 0.05); }
    .tag { background: rgba(0, 0, 0, 0.03); }
    .btn-secondary:hover { background: rgba(0, 0, 0, 0.04); border-color: var(--text-dim); }
    .bg-blob { opacity: 0.07; }
}