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

html {
    scroll-behavior: smooth !important;
}

body {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif !important;
    background-color: #faf8f5 !important;
    color: #4a4a4a !important;
    line-height: 1.75 !important;
    font-size: 19px !important;
    margin-top: 44px !important;
}

.reading-progress {
    position: fixed !important;
    top: 44px !important;
    left: 0 !important;
    width: 0% !important;
    height: 3px !important;
    background: linear-gradient(90deg, #d4a84b 0%, #e8c068 50%, #d4a84b 100%) !important;
    z-index: 9999 !important;
    transition: width 0.1s ease-out !important;
    box-shadow: 0 0 10px rgba(212, 168, 75, 0.5) !important;
}

.magazine {
    overflow-x: hidden !important;
}

.fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.cover-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d3a4a 100%) !important;
}

.cover-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: url('https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?w=1920&q=80') center/cover no-repeat !important;
    opacity: 0.3 !important;
}

.dot-pattern {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
    opacity: 0.3 !important;
}


.cover-content {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
    padding: 40px 20px !important;
}

.cover-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 100px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #ffffff 0%, #d4a84b 50%, #ffffff 100%) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    line-height: 1.2 !important;
    letter-spacing: -1px !important;
    margin-bottom: 60px !important;
    filter: drop-shadow(0 2px 10px rgba(212,168,75,0.4)) drop-shadow(0 4px 20px rgba(0,0,0,0.3)) !important;
    animation: titleShimmer 4s ease-in-out infinite !important;
    will-change: transform, opacity !important;
}

@keyframes titleShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}


.cover-profiles {
    display: flex !important;
    justify-content: center !important;
    gap: 60px !important;
    flex-wrap: wrap !important;
}

.profile-item {
    text-align: center !important;
    will-change: transform, opacity !important;
}

.profile-avatar {
    width: 100px !important;
    height: 100px !important;
    margin: 0 auto 20px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.profile-avatar .avatar-ring {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 2px solid rgba(212, 168, 75, 0.5) !important;
    border-radius: 50% !important;
    animation: ringPulse 2s ease-in-out infinite !important;
}

@keyframes ringPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.profile-avatar i {
    font-size: 48px !important;
    color: #d4a84b !important;
    filter: drop-shadow(0 0 15px rgba(212, 168, 75, 0.4)) !important;
}

.profile-silhouette {
    width: 100px !important;
    height: 100px !important;
    margin: 0 auto 20px !important;
    color: #2d3a4a !important;
    filter: drop-shadow(0 0 20px rgba(212, 168, 75, 0.3)) !important;
}

.profile-silhouette svg {
    width: 100% !important;
    height: 100% !important;
}

.profile-counter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    color: #d4a84b !important;
    line-height: 1.1 !important;
    margin-bottom: 10px !important;
}

.profile-name {
    font-family: 'Source Serif 4', Georgia, serif !important;
    font-size: 18px !important;
    color: #ffffff !important;
    margin-bottom: 5px !important;
}

.profile-job {
    font-family: 'Source Serif 4', Georgia, serif !important;
    font-size: 14px !important;
    color: #7a7a7a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.profile-job i {
    font-size: 14px !important;
    color: #d4a84b !important;
}


.scroll-indicator {
    position: absolute !important;
    bottom: 5% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    color: #ffffff !important;
    opacity: 0.7 !important;
    animation: pulse 1.5s ease-in-out infinite !important;
}

.scroll-indicator span {
    display: block !important;
    font-size: 14px !important;
    margin-bottom: 10px !important;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5 !important; }
    50% { opacity: 1 !important; }
}

.text-section {
    background-color: #faf8f5 !important;
    padding: 80px 20px !important;
}

.text-section + .text-section {
    padding-top: 0 !important;
}

.text-container {
    max-width: 900px !important;
    margin: 0 auto !important;
}

.text-block {
    max-width: 680px !important;
    margin: 0 auto 1.5em auto !important;
}

.text-block p {
    font-size: 19px !important;
    line-height: 1.75 !important;
    color: #4a4a4a !important;
}

.question-text {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    text-align: center !important;
    margin-top: 40px !important;
}

.question-wrapper {
    position: relative !important;
    display: inline-block !important;
    padding: 60px 100px !important;
    margin: 40px auto !important;
    width: 100% !important;
    text-align: center !important;
}

.question-main {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 56px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    position: relative !important;
    z-index: 2 !important;
    display: inline-block !important;
}

.floating-questions {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 400px !important;
    height: 250px !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.floating-q {
    position: absolute !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    color: #d4a84b !important;
    animation: floatQuestion 3s ease-in-out infinite both !important;
}

.floating-q:nth-child(1) { font-size: 32px !important; left: -80px !important; top: 40% !important; animation-delay: 0s !important; }
.floating-q:nth-child(2) { font-size: 40px !important; right: -80px !important; left: auto !important; top: 35% !important; animation-delay: 0.3s !important; }
.floating-q:nth-child(3) { font-size: 28px !important; left: -50px !important; top: 75% !important; animation-delay: 0.6s !important; }
.floating-q:nth-child(4) { font-size: 36px !important; right: -50px !important; left: auto !important; top: 70% !important; animation-delay: 0.9s !important; }
.floating-q:nth-child(5) { font-size: 26px !important; left: 30% !important; top: -30px !important; animation-delay: 1.2s !important; }
.floating-q:nth-child(6) { font-size: 34px !important; right: 30% !important; left: auto !important; top: -25px !important; animation-delay: 1.5s !important; }
.floating-q:nth-child(7) { font-size: 30px !important; left: 25% !important; bottom: -35px !important; top: auto !important; animation-delay: 1.8s !important; }
.floating-q:nth-child(8) { font-size: 38px !important; right: 25% !important; left: auto !important; bottom: -30px !important; top: auto !important; animation-delay: 2.1s !important; }

@keyframes floatQuestion {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5) rotate(-15deg);
    }
    20% {
        opacity: 1;
        transform: scale(1.2) rotate(5deg);
    }
    40% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.1) rotate(-5deg);
    }
    80% {
        opacity: 0.6;
        transform: scale(0.9) rotate(10deg);
    }
}

.part-subtitle {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 44px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
    max-width: 900px !important;
    margin: 0 auto 50px auto !important;
    padding: 20px 20px 20px 30px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: linear-gradient(90deg, rgba(212,168,75,0.08) 0%, transparent 100%) !important;
    border-radius: 0 8px 8px 0 !important;
}

.gold-bar {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 5px !important;
    height: 100% !important;
    background: linear-gradient(180deg, #d4a84b 0%, #c49a42 100%) !important;
    border-radius: 0 2px 2px 0 !important;
    transform-origin: top !important;
    will-change: transform !important;
}

.quote-block {
    max-width: 680px !important;
    margin: 50px auto !important;
    position: relative !important;
    padding: 40px 50px !important;
    background: linear-gradient(135deg, rgba(212,168,75,0.08) 0%, rgba(212,168,75,0.02) 100%) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(212,168,75,0.2) !important;
}

.quote-block::before {
    content: '"' !important;
    position: absolute !important;
    top: -10px !important;
    left: 30px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 120px !important;
    color: #d4a84b !important;
    opacity: 0.3 !important;
    line-height: 1 !important;
}

.quote-text {
    font-family: 'Source Serif 4', Georgia, serif !important;
    font-style: italic !important;
    font-size: 24px !important;
    line-height: 1.7 !important;
    color: #2c2c2c !important;
    border-left: none !important;
    padding-left: 0 !important;
    max-width: 100% !important;
    margin: 0 0 20px 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.quote-source {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #d4a84b !important;
    padding-left: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.fade-up {
    will-change: transform, opacity !important;
}

.comparison-section {
    background: linear-gradient(180deg, #faf8f5 0%, #f5f0e8 100%) !important;
}

.comparison-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=1920&q=80') center/cover no-repeat !important;
    opacity: 0.05 !important;
}

.comparison-content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 1200px !important;
    padding: 40px 20px !important;
    text-align: center !important;
}

.section-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 36px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    margin-bottom: 15px !important;
}

.gold-underline {
    width: 60px !important;
    height: 3px !important;
    background-color: #d4a84b !important;
    margin: 0 auto 15px !important;
}

.section-subtitle {
    font-family: 'Source Serif 4', Georgia, serif !important;
    font-size: 16px !important;
    color: #7a7a7a !important;
    margin-bottom: 40px !important;
}

.cards-container {
    display: flex !important;
    justify-content: center !important;
    gap: 30px !important;
    flex-wrap: wrap !important;
    margin-bottom: 50px !important;
}

.profile-card {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    width: 320px !important;
    padding: 30px !important;
    cursor: pointer !important;
    transform-style: preserve-3d !important;
    will-change: transform, box-shadow !important;
}


.profile-card[data-expanded="true"] {
    border-color: #4a90a4 !important;
    border-width: 2px !important;
}

.card-header {
    margin-bottom: 20px !important;
}

.card-icon {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(74, 144, 164, 0.1) 0%, rgba(212, 168, 75, 0.1) 100%) !important;
    border-radius: 50% !important;
}

.card-icon i {
    font-size: 28px !important;
    color: #4a90a4 !important;
}

.card-icon svg {
    width: 28px !important;
    height: 28px !important;
}

.card-name {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    margin-bottom: 5px !important;
}

.card-job {
    font-size: 14px !important;
    color: #7a7a7a !important;
}

.card-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}

.stat-item {
    text-align: center !important;
}

.stat-value {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
}

.stat-label {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    color: #7a7a7a !important;
    letter-spacing: 0.5px !important;
}

.card-expand {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease-out !important;
}

.profile-card[data-expanded="true"] .card-expand {
    max-height: 200px !important;
}

.expand-content {
    padding-top: 20px !important;
    border-top: 1px solid #e0e0e0 !important;
    text-align: left !important;
}

.expand-content p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #4a4a4a !important;
    margin-bottom: 8px !important;
}

.common-points {
    margin-top: 40px !important;
}

.common-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    margin-bottom: 25px !important;
}

.common-items {
    display: flex !important;
    justify-content: center !important;
    gap: 40px !important;
    flex-wrap: wrap !important;
}

.common-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.common-icon {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(212, 168, 75, 0.15) !important;
    border-radius: 10px !important;
}

.common-icon i {
    font-size: 22px !important;
    color: #d4a84b !important;
}

.common-icon svg {
    width: 22px !important;
    height: 22px !important;
}

.common-text {
    font-size: 15px !important;
    color: #4a4a4a !important;
}

.calculator-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d3a4a 100%) !important;
}

.calculator-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle at 70% 50%, rgba(212,168,75,0.1) 0%, transparent 50%) !important;
}

.calculator-content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 1100px !important;
    padding: 40px 20px !important;
    text-align: center !important;
}

.calculator-content .section-title {
    color: #ffffff !important;
}

.calculator-content .section-subtitle {
    color: #7a7a7a !important;
    margin-bottom: 40px !important;
}

.calculator-layout {
    display: flex !important;
    gap: 40px !important;
    align-items: flex-start !important;
}

.calculator-inputs {
    flex: 0 0 40% !important;
    text-align: left !important;
}

.slider-group {
    margin-bottom: 25px !important;
}

.slider-label {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #ffffff !important;
    margin-bottom: 10px !important;
}

.slider-value {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #d4a84b !important;
}

.slider {
    width: 100% !important;
    height: 8px !important;
    border-radius: 4px !important;
    background: #2d3a4a !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #d4a84b !important;
    cursor: pointer !important;
    box-shadow: 0 2px 10px rgba(212,168,75,0.5) !important;
}

.slider::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #d4a84b !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(212,168,75,0.5) !important;
}

.preset-buttons {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 25px !important;
}

.preset-btn {
    flex: 1 !important;
    padding: 10px 15px !important;
    background: transparent !important;
    border: 1px solid #4a90a4 !important;
    border-radius: 6px !important;
    color: #4a90a4 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.preset-btn:hover {
    background: #4a90a4 !important;
    color: #ffffff !important;
}

.result-box {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    padding: 25px !important;
}

.result-main {
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.result-main .result-label {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #7a7a7a !important;
    margin-bottom: 5px !important;
}

.result-main .result-value {
    font-family: 'Inter', sans-serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    color: #d4a84b !important;
}

.result-details {
    display: flex !important;
    justify-content: space-between !important;
}

.result-item .result-label {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    color: #7a7a7a !important;
    margin-bottom: 3px !important;
}

.result-item .result-value {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

.result-item .result-value.highlight {
    color: #d4a84b !important;
}

.calculator-chart {
    flex: 0 0 60% !important;
    position: relative !important;
    height: 500px !important;
}

#compound-chart {
    width: 100% !important;
    height: 100% !important;
}

.crossover-tooltip {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: rgba(212,168,75,0.9) !important;
    color: #1a1a2e !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

.crossover-tooltip.visible {
    opacity: 1 !important;
}

.calculator-disclaimer {
    font-size: 13px !important;
    color: #7a7a7a !important;
    margin-top: 30px !important;
}

.race-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%) !important;
}

.race-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle at 50% 50%, rgba(212,168,75,0.05) 0%, transparent 50%) !important;
}

.race-content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 1200px !important;
    padding: 40px 20px !important;
    text-align: center !important;
}

.race-content .section-title {
    color: #ffffff !important;
    margin-bottom: 20px !important;
}

.formula-box {
    display: inline-block !important;
    background: rgba(212,168,75,0.1) !important;
    border: 1px solid #d4a84b !important;
    border-radius: 8px !important;
    padding: 12px 25px !important;
    margin-bottom: 40px !important;
}

.formula-box span {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    color: #d4a84b !important;
}

.race-track-container {
    margin: 0 auto !important;
}

.race-track {
    background: rgba(26,26,46,0.8) !important;
    border-radius: 12px !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
}

.track-timeline {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    padding: 0 150px 0 100px !important;
}

.timeline-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.5) !important;
}

.track-lanes {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.lane {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.lane-label {
    flex: 0 0 100px !important;
    text-align: right !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.lane-label small {
    font-weight: 400 !important;
    font-size: 11px !important;
    opacity: 0.7 !important;
}

.lane[data-rate="6"] .lane-label { color: #7a7a7a !important; }
.lane[data-rate="8"] .lane-label { color: #4a90a4 !important; }
.lane[data-rate="10"] .lane-label { color: #5fb87a !important; }
.lane[data-rate="12"] .lane-label { color: #d4a84b !important; }

.lane-track {
    flex: 1 !important;
    height: 40px !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    position: relative !important;
    overflow: visible !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.milestone {
    position: absolute !important;
    top: -8px !important;
    width: 2px !important;
    height: 56px !important;
    background: rgba(212,168,75,0.5) !important;
    transform: translateX(-50%) !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.milestone:hover {
    background: rgba(212,168,75,1) !important;
}

.milestone[data-label]::before {
    content: attr(data-label) !important;
    position: absolute !important;
    top: -18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #d4a84b !important;
    white-space: nowrap !important;
}

.milestone::after {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    bottom: 65px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    background: rgba(26,26,46,0.95) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
    pointer-events: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(212,168,75,0.3) !important;
}

.milestone:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
}

.ball {
    position: absolute !important;
    left: 115px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    transition: transform 0.1s ease !important;
}

.lane[data-rate="6"] .ball {
    background: #7a7a7a !important;
    box-shadow: 0 0 15px rgba(122,122,122,0.5) !important;
}
.lane[data-rate="8"] .ball {
    background: #4a90a4 !important;
    box-shadow: 0 0 15px rgba(74,144,164,0.5) !important;
}
.lane[data-rate="10"] .ball {
    background: #5fb87a !important;
    box-shadow: 0 0 15px rgba(95,184,122,0.5) !important;
}
.lane[data-rate="12"] .ball {
    background: #d4a84b !important;
    box-shadow: 0 0 15px rgba(212,168,75,0.5) !important;
}

.lane-result {
    flex: 0 0 150px !important;
    text-align: left !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
}

.lane[data-rate="6"] .lane-result { color: #7a7a7a !important; }
.lane[data-rate="8"] .lane-result { color: #4a90a4 !important; }
.lane[data-rate="10"] .lane-result { color: #5fb87a !important; }
.lane[data-rate="12"] .lane-result { color: #d4a84b !important; }

.lane-result.visible {
    opacity: 1 !important;
}

.race-initial-amount {
    display: inline-block !important;
    background: rgba(74,144,164,0.15) !important;
    border: 1px solid #4a90a4 !important;
    border-radius: 8px !important;
    padding: 12px 25px !important;
    margin-bottom: 30px !important;
}

.race-initial-amount span {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    color: #ffffff !important;
}

.race-initial-amount strong {
    color: #4a90a4 !important;
    font-weight: 700 !important;
}

.race-message {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    color: #ffffff !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
}

.race-message.visible {
    opacity: 1 !important;
}

.race-message strong {
    color: #d4a84b !important;
    font-size: 24px !important;
}

.conclusion-section {
    padding-bottom: 120px !important;
}

.final-question {
    text-align: center !important;
    margin-top: 60px !important;
}

.final-question p:first-child {
    font-size: 18px !important;
    color: #7a7a7a !important;
    margin-bottom: 15px !important;
}

.highlight-question {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    line-height: 1.4 !important;
}

@media (max-width: 768px) {
    body {
        font-size: 17px !important;
    }

    .cover-title {
        font-size: 38px !important;
        letter-spacing: -0.5px !important;
    }

    .cover-profiles {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .profile-counter {
        font-size: 32px !important;
    }

    .profile-silhouette {
        width: 80px !important;
        height: 80px !important;
    }

    .profile-avatar {
        width: 80px !important;
        height: 80px !important;
    }

    .profile-avatar i {
        font-size: 36px !important;
    }


    .text-section {
        padding: 60px 20px !important;
    }

    .text-block {
        max-width: 100% !important;
    }

    .text-block p {
        font-size: 17px !important;
    }

    .part-subtitle {
        font-size: 32px !important;
        max-width: 100% !important;
        padding: 15px 15px 15px 20px !important;
    }

    .question-wrapper {
        padding: 40px 20px !important;
    }

    .question-main {
        font-size: 40px !important;
    }

    .floating-q:nth-child(1) { font-size: 18px !important; }
    .floating-q:nth-child(2) { font-size: 24px !important; }
    .floating-q:nth-child(3) { font-size: 16px !important; }
    .floating-q:nth-child(4) { font-size: 20px !important; }
    .floating-q:nth-child(5) { font-size: 26px !important; }
    .floating-q:nth-child(6) { font-size: 18px !important; }
    .floating-q:nth-child(7) { font-size: 22px !important; }
    .floating-q:nth-child(8) { font-size: 20px !important; }

    .quote-block {
        max-width: 100% !important;
        padding: 30px 25px !important;
        margin: 40px auto !important;
    }

    .quote-block::before {
        font-size: 80px !important;
        left: 15px !important;
    }

    .quote-text {
        font-size: 18px !important;
    }

    .section-title {
        font-size: 28px !important;
    }

    .cards-container {
        flex-direction: column !important;
        align-items: center !important;
    }

    .profile-card {
        width: 100% !important;
        max-width: 340px !important;
    }

    .common-items {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    .calculator-layout {
        flex-direction: column !important;
    }

    .calculator-inputs {
        flex: none !important;
        width: 100% !important;
    }

    .calculator-chart {
        flex: none !important;
        width: 100% !important;
        height: 300px !important;
    }

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

    .track-timeline {
        padding: 0 80px 0 70px !important;
    }

    .lane-label {
        flex: 0 0 70px !important;
        font-size: 12px !important;
    }

    .lane-result {
        flex: 0 0 100px !important;
        font-size: 10px !important;
    }

    .milestone[data-label]::before {
        font-size: 8px !important;
        top: -14px !important;
    }

    .milestone::after {
        font-size: 10px !important;
        padding: 6px 10px !important;
    }

    .ball {
        left: 85px !important;
        width: 20px !important;
        height: 20px !important;
    }

    .highlight-question {
        font-size: 24px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    .fade-up {
        opacity: 1 !important;
        transform: none !important;
    }

    .gold-bar {
        transform: scaleY(1) !important;
    }

    .cover-title {
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    .profile-item {
        opacity: 1 !important;
    }
}