/* pages/home.css — implementation of Home.dc.html from the Claude Design
   project "Safer Music Group redesign". Alternating dark/light editorial
   sections, Instrument Serif italics, canvas waveforms, ticker band. */

/* shared narrow wrap used by the editorial sections */
.edit-wrap { max-width: 1100px; margin: 0 auto; }

/* ============ HERO ============ */
.hero {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 68px clamp(1.25rem, 4vw, 2.5rem) 0;
    background: linear-gradient(180deg, #060D1F 0%, #081226 55%, #0A1733 100%);
    color: var(--text-hi);
}
.hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
}
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 8px 18px;
    border-radius: 999px;
    margin-bottom: 36px;
}
.kicker-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    animation: floatPulse 2.6s ease-in-out infinite;
}
@keyframes floatPulse { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

.hero h1 {
    font-size: clamp(52px, 7.5vw, 108px);
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -0.03em;
    margin: 0 0 32px;
    max-width: 12ch;
}
.hero-sub {
    font-size: 19px;
    line-height: 1.6;
    color: var(--text-mid);
    max-width: 52ch;
    margin: 0 0 44px;
}
.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
#hero-wave {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 220px;
    display: block;
    z-index: 1;
}

/* ---- design's button pair ---- */
.btn-paper {
    display: inline-block;
    background: var(--paper);
    color: var(--ink-950);
    font-size: 16px;
    font-weight: 500;
    padding: 16px 34px;
    border-radius: 999px;
    transition: background var(--t-fast), color var(--t-fast);
}
.btn-paper:hover { background: var(--gold); color: var(--ink-950); }
.btn-line {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--text-hi);
    font-size: 16px;
    padding: 15px 34px;
    border-radius: 999px;
    transition: border-color var(--t-fast), color var(--t-fast);
}
.btn-line:hover { border-color: var(--gold); color: var(--gold); }

/* ============ TICKER ============ */
.ticker {
    background: #0A1733;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    padding: 18px 0;
    color: var(--text-low);
}
.ticker-track {
    display: flex;
    width: max-content;
    animation: tickerMove 32s linear infinite;
}
@keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-run {
    display: flex;
    gap: 56px;
    padding-right: 56px;
    font-size: 13px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    white-space: nowrap;
}
.tick-gem { color: #3A4C74; }

/* ============ THE PROMISE ============ */
.promise { padding: 140px clamp(1.25rem, 4vw, 2.5rem); }
.promise .kicker { margin-bottom: 40px; display: block; }
.promise-statement {
    font-family: var(--font-serif);
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1.22;
    letter-spacing: -0.01em;
    margin: 0;
    max-width: 24ch;
    color: var(--paper-text);
}
.promise-statement em {
    font-style: italic;
    color: var(--serif-accent);
}
.promise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--paper-line);
    border: 1px solid var(--paper-line);
    margin-top: 90px;
}
.promise-cell { background: var(--paper); padding: 36px 32px; }
.promise-label {
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--paper-low);
    margin-bottom: 14px;
}
.promise-body { font-size: 17px; line-height: 1.55; color: var(--paper-text); }

/* ============ THREE STEPS ============ */
.steps { padding: 140px clamp(1.25rem, 4vw, 2.5rem); border-top: 1px solid #E4E8F0; }
.steps-white { background: var(--paper-card); }
.steps-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 80px;
}
.steps-head h2 {
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0;
}
.steps-side { font-size: 15px; color: var(--paper-low); max-width: 30ch; }
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
}
.step-numeral {
    font-family: var(--font-serif);
    font-size: 88px;
    line-height: 1;
    color: var(--paper-line);
    margin-bottom: 24px;
}
.steps-grid h3 { font-size: 21px; font-weight: 600; margin: 0 0 14px; }
.steps-grid p { font-size: 15.5px; line-height: 1.65; color: var(--paper-mid); margin: 0; }

/* ============ FEATURES ============ */
.feat { padding: 140px clamp(1.25rem, 4vw, 2.5rem); border-top: 1px solid #E4E8F0; }
.feat-title {
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0 0 70px;
    max-width: 16ch;
}
.feat-rows { display: flex; flex-direction: column; }
.feat-row {
    display: grid;
    grid-template-columns: 90px 1fr 1.4fr;
    gap: 32px;
    align-items: baseline;
    padding: 38px 0;
    border-top: 1px solid var(--paper-line);
    transition: background var(--t-fast);
}
.feat-row:hover { background: var(--paper-card); }
.feat-idx {
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--text-low);
}
.feat-name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--paper-text); }
.feat-body { font-size: 15.5px; line-height: 1.65; color: var(--paper-mid); }

/* ============ CTA ============ */
.cta {
    position: relative;
    background: linear-gradient(180deg, #0A1733 0%, #060D1F 100%);
    color: var(--text-hi);
    padding: 160px clamp(1.25rem, 4vw, 2.5rem);
    text-align: center;
    overflow: hidden;
}
#cta-wave {
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 260px;
    display: block;
    opacity: 0.5;
}
.cta-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.cta h2 {
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
}
.cta p { font-size: 18px; color: var(--text-mid); margin: 0 0 44px; }

/* ============ reveal-on-scroll ============ */
[data-reveal] { opacity: 0; transform: translateY(26px); }
.no-observer [data-reveal] { opacity: 1; transform: none; }

/* ============ responsive ============ */
@media (max-width: 900px) {
    .promise-grid, .steps-grid { grid-template-columns: 1fr; }
    .feat-row { grid-template-columns: 48px 1fr; }
    .feat-body { grid-column: 2; }
    .hero h1 { font-size: clamp(44px, 11vw, 64px); }
    #hero-wave { height: 140px; }
    .promise, .steps, .feat { padding-top: 90px; padding-bottom: 90px; }
    .cta { padding: 110px clamp(1.25rem, 4vw, 2.5rem); }
}