/* ===================================
   SALES BUGLE FREE TOOLS - SHARED STYLES
   TrueBrew Birdie Generative Design System

   This file contains reusable patterns extracted from
   the Pipeline Calculator for use across all 10 free tools.

   Last updated: 2026-01-18
   =================================== */

/* ===================================
   TABLE OF CONTENTS
   1. CSS Variables
   2. Scroll Animations
   3. Keyframe Animations
   4. Diagonal Divider (Signature Element)
   5. Hero Section Base
   6. Problem Section Base
   7. Tool Section Base
   8. Glass Morphism Form
   9. Results Section
   10. Email Gate Section
   11. Footer
   12. Responsive Design
   13. Print Styles
   =================================== */

/* ===================================
   1. CSS VARIABLES
   =================================== */
:root {
    /* Typography */
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Brand Colors */
    --gold: #FDB913;
    --gold-light: rgba(253, 185, 19, 0.1);
    --dark-brown: #3D3020;
    --navy: #0A1628;
    --cream: #FAF9F6;
    --white: #FFFFFF;
    --dark-text: #1A1A1A;
    --text-light: rgba(255, 255, 255, 0.7);

    /* Motion Library */
    --duration-fast: 200ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 800ms;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===================================
   2. SCROLL ANIMATIONS
   Usage: Add data-animate="fade-in" or data-animate="fade-up"
   and optional data-delay="1" through data-delay="4"
   =================================== */
[data-animate] {
    opacity: 0;
    transition: all var(--duration-slower) var(--ease-out-expo);
}

[data-animate].visible {
    opacity: 1;
}

[data-animate="fade-in"] {
    opacity: 0;
    transform: translateY(40px);
}

[data-animate="fade-in"].visible {
    opacity: 1;
    transform: translateY(0);
}

[data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(40px);
}

[data-animate="fade-up"].visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays */
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }

/* ===================================
   3. KEYFRAME ANIMATIONS
   =================================== */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(253, 185, 19, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(253, 185, 19, 0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    50% { transform: translateY(-20px) translateX(10px); }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   4. DIAGONAL DIVIDER (Signature Element)
   Sales Bugle's signature diagonal transition between sections
   =================================== */
.diagonal-divider {
    height: 100px;
    background: linear-gradient(135deg, var(--cream) 49.5%, var(--gold) 49.5%, var(--gold) 50.5%, var(--white) 50.5%);
    position: relative;
}

.diagonal-divider--reverse {
    background: linear-gradient(135deg, var(--white) 49.5%, var(--gold) 49.5%, var(--gold) 50.5%, var(--cream) 50.5%);
}

.diagonal-divider--to-footer {
    background: linear-gradient(135deg, var(--white) 49.5%, var(--gold) 49.5%, var(--gold) 50.5%, var(--navy) 50.5%);
}

@media (max-width: 768px) {
    .diagonal-divider {
        height: 60px;
    }
}

/* ===================================
   5. HERO SECTION BASE
   Asymmetric 60/40 split layout with dark brown gradient
   =================================== */

/* Main hero container */
.hero-tool {
    background: linear-gradient(165deg, var(--dark-brown) 0%, #4a3a2a 100%);
    color: var(--white);
    padding: 140px 0 100px;
    min-height: 85vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Backward compatibility */
.hero-calculator {
    background: linear-gradient(165deg, var(--dark-brown) 0%, #4a3a2a 100%);
    color: var(--white);
    padding: 140px 0 100px;
    min-height: 85vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Grain texture overlay */
.grain-overlay {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Decorative circles - animated floating elements */
.deco-circle {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(253, 185, 19, 0.2);
    pointer-events: none;
}

.deco-circle--1 {
    width: 200px;
    height: 200px;
    top: 15%;
    right: 10%;
    animation: float 8s ease-in-out infinite;
}

.deco-circle--2 {
    width: 120px;
    height: 120px;
    bottom: 20%;
    left: 5%;
    animation: float 6s ease-in-out infinite reverse;
}

/* Decorative diagonal line */
.deco-line--diagonal {
    position: absolute;
    width: 3px;
    height: 150px;
    background: linear-gradient(to bottom, transparent, var(--gold), transparent);
    top: 25%;
    right: 25%;
    transform: rotate(45deg);
    opacity: 0.3;
}

/* Hero split layout (60/40) */
.hero-split {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 80px;
    align-items: center;
}

.hero-content {
    text-align: left;
    padding-right: 40px;
}

/* Hero badge (e.g., "Free Tool") */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(253, 185, 19, 0.15);
    border: 1px solid rgba(253, 185, 19, 0.4);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gold);
    margin-bottom: 32px;
    backdrop-filter: blur(10px);
}

.badge-icon {
    display: flex;
    align-items: center;
}

/* Hero headline */
.hero-headline {
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 28px;
    letter-spacing: -0.03em;
}

.highlight-gold {
    color: var(--gold);
    font-style: italic;
}

/* Hero subheadline */
.hero-subhead {
    font-size: 22px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 48px;
    font-weight: 400;
    max-width: 540px;
}

/* Hero CTA block */
.hero-cta-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.btn-hero {
    font-size: 18px;
    padding: 18px 48px;
    min-width: 280px;
    transition: all var(--duration-base) var(--ease-out-expo);
}

.btn-hero:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(253, 185, 19, 0.4);
}

.cta-note {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

/* ===================================
   6. PROBLEM SECTION BASE
   Bento grid layout on cream background
   =================================== */
.problem-section {
    background-color: var(--cream);
    padding: 80px 0;
    position: relative;
}

/* Noise texture background */
.noise-texture {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.02;
    pointer-events: none;
}

/* Bento grid layout */
.problem-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    margin-bottom: 64px;
}

.problem-card {
    background-color: var(--white);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all var(--duration-base) var(--ease-out-expo);
}

.problem-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.problem-card--large {
    grid-column: span 7;
}

.problem-card--medium {
    grid-column: span 5;
}

.problem-card--small {
    grid-column: span 12;
}

.problem-card h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--dark-text);
    line-height: 1.4;
}

.problem-card p {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* Problem diagnosis section */
.problem-diagnosis {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding-top: 48px;
    border-top: 2px solid rgba(253, 185, 19, 0.2);
}

.problem-diagnosis h2 {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 16px;
    color: var(--dark-text);
}

.diagnosis-intro {
    font-size: 18px;
    line-height: 1.6;
    color: #555;
}

/* ===================================
   7. TOOL SECTION BASE
   Main interactive tool section on white background
   =================================== */
.tool-section {
    background-color: var(--white);
    padding: 80px 0;
    position: relative;
}

/* Backward compatibility */
.calculator-section {
    background-color: var(--white);
    padding: 80px 0;
    position: relative;
}

/* Grid pattern background */
.grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(253, 185, 19, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(253, 185, 19, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.tool-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 64px;
}

/* Backward compatibility */
.calculator-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 64px;
}

.tool-header h2,
.calculator-header h2 {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 16px;
    color: var(--dark-text);
}

.tool-intro {
    font-size: 20px;
    line-height: 1.6;
    color: #555;
}

/* Backward compatibility */
.calculator-intro {
    font-size: 20px;
    line-height: 1.6;
    color: #555;
}

.tool-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

/* Backward compatibility */
.calculator-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

/* ===================================
   8. GLASS MORPHISM FORM
   Glass effect form with gradient background
   =================================== */
.tool-glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(250, 249, 246, 0.95));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(253, 185, 19, 0.2);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* Backward compatibility */
.calculator-glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(250, 249, 246, 0.95));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(253, 185, 19, 0.2);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.tool-form {
    padding: 48px;
}

/* Backward compatibility */
.calculator-form {
    padding: 48px;
}

.form-group {
    margin-bottom: 32px;
}

.form-group label {
    display: block;
    margin-bottom: 12px;
}

.label-text {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 4px;
}

.label-hint {
    display: block;
    font-size: 14px;
    color: #666;
    font-weight: 400;
}

/* Text input styles */
.form-group input {
    width: 100%;
    padding: 16px 20px;
    font-size: 18px;
    font-family: var(--font-body);
    font-weight: 500;
    border: 2px solid #E5E5E5;
    border-radius: 12px;
    background-color: var(--white);
    transition: all var(--duration-fast) ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(253, 185, 19, 0.1);
}

.form-group input::placeholder {
    color: #999;
    font-weight: 400;
}

/* Select dropdown styles */
.form-group select {
    width: 100%;
    padding: 16px 20px;
    font-size: 18px;
    font-family: var(--font-body);
    font-weight: 500;
    border: 2px solid #E5E5E5;
    border-radius: 12px;
    background-color: var(--white);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
    transition: all var(--duration-fast) ease;
}

.form-group select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(253, 185, 19, 0.1);
}

/* Input with prefix/suffix (e.g., $ or %) */
.input-with-prefix,
.input-with-suffix {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix,
.input-suffix {
    position: absolute;
    font-size: 18px;
    font-weight: 600;
    color: #666;
    pointer-events: none;
}

.input-prefix {
    left: 20px;
}

.input-suffix {
    right: 20px;
}

.input-with-prefix input {
    padding-left: 40px;
}

.input-with-suffix input {
    padding-right: 48px;
}

/* Calculate/Submit Button */
.btn-calculate {
    width: 100%;
    font-size: 18px;
    padding: 18px 32px;
    margin-top: 16px;
    font-weight: 600;
    transition: all var(--duration-base) var(--ease-out-expo);
}

.btn-calculate:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(253, 185, 19, 0.3);
}

/* ===================================
   9. RESULTS SECTION
   Dark glass card with gold accents
   =================================== */
.results-wrapper {
    margin-top: 48px;
    animation: fadeIn 0.5s ease-out;
}

.results-glass-card {
    background: linear-gradient(135deg, var(--dark-brown) 0%, var(--navy) 100%);
    padding: 48px;
    border-radius: 20px;
    color: var(--white);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.results-header h3 {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 400;
    margin: 0;
    color: var(--gold);
}

.btn-recalculate {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}

.btn-recalculate:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Results Grid */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.result-card {
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    transition: all var(--duration-base) var(--ease-out-expo);
}

.result-card:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.12);
}

.result-card-primary {
    border-left: 4px solid var(--gold);
}

.result-card-warning {
    border-left: 4px solid #FF6B6B;
}

.result-card-score {
    border-left: 4px solid #4ECDC4;
}

.result-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 12px;
    font-weight: 600;
}

.result-value {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 8px;
    line-height: 1;
}

.result-hint {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

/* Health Bar with Gold Fill */
.health-bar-wrapper {
    margin-bottom: 40px;
}

.health-bar {
    width: 100%;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

.health-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #FF6B6B 0%, #FFD93D 50%, var(--gold) 100%);
    border-radius: 20px;
    transition: width 1s var(--ease-out-expo);
    position: relative;
    box-shadow: 0 0 20px rgba(253, 185, 19, 0.5);
}

.health-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Diagnosis Card with Gold Border */
.diagnosis-card {
    background-color: rgba(253, 185, 19, 0.1);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 32px;
}

.diagnosis-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.diagnosis-header span {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold);
}

.diagnosis-text {
    font-size: 18px;
    line-height: 1.6;
    color: var(--white);
    margin: 0;
    font-style: italic;
}

/* Insights Grid */
.insights-grid {
    display: grid;
    gap: 16px;
}

.insight-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--gold);
    padding: 20px 24px;
    border-radius: 8px;
    transition: all var(--duration-fast) ease;
}

.insight-card:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.insight-card p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* ===================================
   10. EMAIL GATE SECTION
   Lead capture form with diagonal pattern background
   =================================== */
.email-gate-section {
    background: var(--white);
    padding: 80px 0;
    position: relative;
}

/* Diagonal pattern background */
.diagonal-pattern {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 20px,
        rgba(253, 185, 19, 0.03) 20px,
        rgba(253, 185, 19, 0.03) 40px
    );
    pointer-events: none;
}

/* Floating decorative elements */
.floating-element {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 185, 19, 0.1), transparent);
    pointer-events: none;
    animation: float 6s ease-in-out infinite;
}

.floating-element--1 {
    width: 300px;
    height: 300px;
    top: 10%;
    right: 5%;
}

.floating-element--2 {
    width: 200px;
    height: 200px;
    bottom: 15%;
    left: 10%;
    animation-delay: 2s;
}

.gate-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.gate-header h2 {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 400;
    color: var(--dark-text);
    margin-bottom: 16px;
}

.gate-subhead {
    font-size: 20px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 48px;
}

/* Glass card form */
.gate-glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(250, 249, 246, 0.98));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(253, 185, 19, 0.2);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    margin-bottom: 32px;
}

.report-form .form-group {
    margin-bottom: 24px;
    text-align: left;
}

.report-form .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 8px;
}

.optional {
    font-weight: 400;
    color: #888;
}

.report-form .form-group input {
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
    font-family: var(--font-body);
    border: 2px solid #E5E5E5;
    border-radius: 10px;
    transition: all var(--duration-fast) ease;
}

.report-form .form-group input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(253, 185, 19, 0.1);
}

.report-form .form-group input::placeholder {
    color: #999;
}

.btn-form {
    width: 100%;
    font-size: 18px;
    padding: 16px 32px;
    margin-top: 8px;
}

.form-privacy {
    font-size: 14px;
    color: #666;
    margin-top: 16px;
    margin-bottom: 0;
}

.gate-trust {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--dark-text);
    font-size: 16px;
}

.trust-item svg {
    flex-shrink: 0;
}

/* ===================================
   11. CTA SECTION
   Call to action with Raju's credentials
   =================================== */
.cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #0A1628 0%, #1a2744 100%);
}

.cta-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(253, 185, 19, 0.3);
    border-radius: 24px;
    padding: 48px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--white);
    margin-bottom: 16px;
}

.cta-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.btn-cta {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
}

.btn-secondary {
    background: transparent;
    border: 2px solid var(--gold);
    color: var(--gold);
}

.btn-secondary:hover {
    background: var(--gold);
    color: var(--navy);
}

.cta-subtext {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px;
}

.cta-credentials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    object-fit: cover;
}

.cta-credentials-text {
    text-align: left;
}

.cta-credentials-text strong {
    display: block;
    color: var(--white);
    font-size: 16px;
}

.cta-credentials-text span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* ===================================
   12. CONTENT SECTION
   How It Works / Explanatory content
   =================================== */
.content-section {
    padding: 80px 0;
    background: var(--cream);
}

.content-section h2 {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--navy);
    text-align: center;
    margin-bottom: 48px;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.content-block {
    background: var(--white);
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.content-block h3 {
    font-size: 20px;
    color: var(--navy);
    margin-bottom: 12px;
}

.content-block p {
    color: #555;
    line-height: 1.7;
    font-size: 16px;
}

.content-block strong {
    color: var(--navy);
}

/* ===================================
   13. FAQ SECTION
   Schema.org FAQ markup support
   =================================== */
.faq-section {
    padding: 80px 0;
    background: var(--white);
}

.faq-section h2 {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--navy);
    text-align: center;
    margin-bottom: 48px;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #e0e0e0;
    padding: 24px 0;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item h3 {
    font-size: 18px;
    color: var(--navy);
    margin-bottom: 12px;
    font-weight: 600;
}

.faq-item p {
    color: #555;
    line-height: 1.7;
    font-size: 16px;
}

/* ===================================
   14. FOOTER
   Dark navy footer with brand colors
   =================================== */
.footer-tool {
    background-color: var(--navy);
    color: var(--white);
    padding: 64px 0 32px;
}

/* Backward compatibility */
.footer-calculator {
    background-color: var(--navy);
    color: var(--white);
    padding: 64px 0 32px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    margin-bottom: 48px;
}

.footer-brand h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--gold);
}

.footer-brand p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.footer-column h4 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    color: var(--gold);
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 14px;
    transition: color var(--duration-fast) ease;
}

.footer-column ul li a:hover {
    color: var(--gold);
}

.footer-bottom {
    text-align: center;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ===================================
   15. RESPONSIVE DESIGN
   Mobile-first breakpoints
   =================================== */
@media (max-width: 768px) {
    /* CTA Section */
    .cta-section {
        padding: 60px 0;
    }

    .cta-box {
        padding: 32px 24px;
    }

    .cta-content h2 {
        font-size: 28px;
    }

    .cta-content p {
        font-size: 16px;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-credentials {
        flex-direction: column;
        text-align: center;
    }

    .cta-credentials-text {
        text-align: center;
    }

    /* Content Section */
    .content-section {
        padding: 60px 0;
    }

    .content-section h2 {
        font-size: 28px;
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .content-block {
        padding: 24px;
    }

    /* FAQ Section */
    .faq-section {
        padding: 60px 0;
    }

    .faq-section h2 {
        font-size: 28px;
    }

    .faq-item h3 {
        font-size: 16px;
    }

    /* Hero */
    .hero-tool,
    .hero-calculator {
        padding: 100px 0 60px;
        min-height: auto;
    }

    .hero-split {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero-content {
        padding-right: 0;
        text-align: center;
    }

    .hero-headline {
        font-size: 40px;
    }

    .hero-subhead {
        font-size: 18px;
        max-width: 100%;
    }

    .hero-cta-block {
        align-items: center;
    }

    .btn-hero {
        font-size: 16px;
        padding: 16px 40px;
        min-width: auto;
    }

    /* Problem section */
    .problem-bento {
        grid-template-columns: 1fr;
    }

    .problem-card--large,
    .problem-card--medium,
    .problem-card--small {
        grid-column: span 1;
    }

    .problem-card {
        padding: 32px;
    }

    .problem-diagnosis h2 {
        font-size: 28px;
    }

    /* Tool section */
    .tool-header h2,
    .calculator-header h2 {
        font-size: 32px;
    }

    .tool-glass-card,
    .calculator-glass-card {
        border-radius: 16px;
    }

    .tool-form,
    .calculator-form {
        padding: 32px 24px;
    }

    .form-group {
        margin-bottom: 24px;
    }

    /* Results */
    .results-glass-card {
        padding: 32px 24px;
        border-radius: 16px;
    }

    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .results-header h3 {
        font-size: 28px;
    }

    .results-grid {
        grid-template-columns: 1fr;
    }

    .result-value {
        font-size: 36px;
    }

    .health-bar {
        height: 32px;
    }

    .diagnosis-text {
        font-size: 16px;
    }

    /* Email gate */
    .gate-header h2 {
        font-size: 32px;
    }

    .gate-glass-card {
        padding: 32px 24px;
        border-radius: 16px;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-links {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 480px) {
    .hero-headline {
        font-size: 32px;
    }

    .hero-subhead {
        font-size: 16px;
    }

    .tool-header h2,
    .calculator-header h2 {
        font-size: 28px;
    }

    .tool-form,
    .calculator-form {
        padding: 24px 16px;
    }

    .form-group input,
    .form-group select {
        font-size: 16px;
        padding: 14px 16px;
    }

    .results-glass-card {
        padding: 24px 16px;
    }

    .result-value {
        font-size: 32px;
    }

    .gate-glass-card {
        padding: 24px 16px;
    }

    .gate-header h2 {
        font-size: 28px;
    }
}

/* ===================================
   13. PRINT STYLES
   Optimize for printing results
   =================================== */
@media print {
    .header,
    .hero-tool,
    .hero-calculator,
    .problem-section,
    .email-gate-section,
    .footer-tool,
    .footer-calculator,
    .btn-recalculate,
    .tool-glass-card,
    .calculator-glass-card,
    .diagonal-divider,
    .grain-overlay,
    .deco-circle,
    .deco-line--diagonal,
    .noise-texture,
    .grid-pattern,
    .diagonal-pattern,
    .floating-element {
        display: none;
    }

    .results-wrapper {
        margin-top: 0;
    }

    .results-glass-card {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    .result-card,
    .diagnosis-card,
    .insight-card {
        border: 1px solid #ccc !important;
        background: white !important;
        color: black !important;
    }

    .result-value,
    .diagnosis-text {
        color: black !important;
    }
}