/* ═══════════════════════════════════════════════════════════════════════════
   True Heart — Main Stylesheet
   main.css: reset, variables, typography, layout, nav, footer, modal
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
    --teal:          #3ECFCF;
    --teal-dim:      #1a8a8a;
    --teal-glow:     rgba(62, 207, 207, 0.15);
    --charcoal:      #0d1117;
    --charcoal-mid:  #141c26;
    --charcoal-light:#1e2a38;
    --white:         #f5f5f0;
    --white-dim:     rgba(245,245,240,0.6);
    --white-dimmer:  rgba(245,245,240,0.3);

    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans:  'DM Sans', system-ui, sans-serif;

    --radius-sm: 4px;
    --radius-md: 12px;
    --radius-lg: 24px;

    --transition: 0.3s ease;
    --shadow-card: 0 8px 32px rgba(0,0,0,0.4);
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
    background:  var(--charcoal);
    color:       var(--white);
    font-family: var(--font-sans);
    font-weight: 300;
    overflow-x:  hidden;
    line-height: 1.6;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* ── Skip link (accessibility) ──────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--teal);
    color: var(--charcoal);
    padding: 8px 16px;
    z-index: 999;
    transition: top var(--transition);
}
.skip-link:focus { top: 0; }

/* ── Navigation ─────────────────────────────────────────────────────────── */
#site-nav {
    position:   fixed;
    top: 0; left: 0; right: 0;
    z-index:    100;
    padding:    24px 48px;
    display:    flex;
    justify-content: space-between;
    align-items:     center;
    background: linear-gradient(to bottom, rgba(13,17,23,0.95), transparent);
    transition: background var(--transition);
}

#site-nav.scrolled {
    background: rgba(13,17,23,0.98);
    box-shadow: 0 1px 0 rgba(62,207,207,0.15);
}

.nav-logo {
    font-family: var(--font-serif);
    font-size:   22px;
    font-weight: 400;
    letter-spacing: 0.12em;
    color:       var(--white);
    text-decoration: none;
}
.nav-logo span { color: var(--teal); }

.nav-cta {
    background:  transparent;
    border:      1px solid var(--teal);
    color:       var(--teal);
    padding:     10px 24px;
    font-family: var(--font-sans);
    font-size:   13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition:  all var(--transition);
}
.nav-cta:hover {
    background: var(--teal);
    color:      var(--charcoal);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
#site-footer {
    padding:     48px;
    border-top:  1px solid rgba(245,245,240,0.08);
    display:     flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap:   wrap;
    gap:         16px;
}

.footer-logo {
    font-family: var(--font-serif);
    font-size:   18px;
    letter-spacing: 0.12em;
}
.footer-logo span { color: var(--teal); }

.footer-copy {
    font-size:      12px;
    color:          var(--white-dimmer);
    letter-spacing: 0.05em;
}

.footer-links {
    display: flex;
    gap:     24px;
}
.footer-links a {
    font-size:      12px;
    color:          var(--white-dimmer);
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition:     color var(--transition);
}
.footer-links a:hover { color: var(--teal); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
    display:         inline-block;
    background:      var(--teal);
    color:           var(--charcoal);
    border:          none;
    padding:         16px 40px;
    font-family:     var(--font-sans);
    font-size:       14px;
    font-weight:     500;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    text-decoration: none;
    position:        relative;
    overflow:        hidden;
    transition:      background var(--transition);
}
.btn-primary::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(255,255,255,0.15);
    transform:  translateX(-100%);
    transition: transform var(--transition);
}
.btn-primary:hover::after { transform: translateX(0); }
.btn-primary:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

.btn-secondary {
    display:         inline-block;
    background:      transparent;
    color:           var(--white-dim);
    border:          1px solid rgba(245,245,240,0.2);
    padding:         16px 40px;
    font-family:     var(--font-sans);
    font-size:       14px;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    text-decoration: none;
    transition:      all var(--transition);
}
.btn-secondary:hover {
    border-color: var(--teal);
    color:        var(--teal);
}

/* ── Section common ─────────────────────────────────────────────────────── */
.section-label {
    font-size:      11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--teal);
    margin-bottom:  48px;
    text-align:     center;
}

.section-divider {
    position: relative;
}
.section-divider::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--teal), transparent);
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        fixed;
    inset:           0;
    background:      rgba(13,17,23,0.85);
    backdrop-filter: blur(6px);
    z-index:         200;
    opacity:         0;
    visibility:      hidden;
    transition:      opacity var(--transition), visibility var(--transition);
}
.modal-overlay.is-open {
    opacity:    1;
    visibility: visible;
}

.modal-box {
    background:    var(--charcoal-light);
    border:        1px solid rgba(62,207,207,0.35);
    box-shadow:    0 0 60px rgba(62,207,207,0.12), var(--shadow-card);
    padding:       56px 48px;
    max-width:     480px;
    width:         90%;
    text-align:    center;
    transform:     translateY(20px);
    transition:    transform var(--transition);
}
.modal-overlay.is-open .modal-box { transform: translateY(0); }

.modal-icon {
    font-size:     32px;
    color:         var(--teal);
    margin-bottom: 20px;
}
.modal-title {
    font-family:   var(--font-serif);
    font-size:     36px;
    font-weight:   300;
    margin-bottom: 16px;
}
.modal-body {
    font-size:     15px;
    line-height:   1.8;
    color:         var(--white-dim);
    margin-bottom: 36px;
}
.modal-close { min-width: 160px; }

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes float-particle {
    0%   { transform: translateY(100vh) translateX(0);  opacity: 0; }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.3; }
    100% { transform: translateY(-10vh) translateX(30px); opacity: 0; }
}

@keyframes scroll-pulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
    50%       { opacity: 1;   transform: scaleY(1); }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #site-nav    { padding: 20px 24px; }
    #site-footer { padding: 32px 24px; flex-direction: column; text-align: center; }
    .modal-box   { padding: 40px 24px; }
}