@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Architects+Daughter&family=Caveat:wght@400;600;700&display=swap");
:root{--bg-primary:#fefefe;--bg-secondary:#f8f5f0;--bg-accent:#fff9f0;--text-primary:#2c1810;--text-secondary:#5a4a3a;--text-muted:#8b7355;--accent-primary:#ff6b35;--accent-secondary:#f7931e;--accent-tertiary:#ffb347;--border-color:#e8dcc6;--font-body:'Kalam', cursive;--font-heading:'Caveat', cursive;--font-accent:'Architects Daughter', cursive;--shadow-light:rgba(255, 107, 53, 0.1);--shadow-medium:rgba(0, 0, 0, 0.08);--shadow-dark:rgba(255, 107, 53, 0.2);--shadow-color:rgba(0, 0, 0, 0.15);--paper-texture:#fefefe;}
[data-theme="dark"]{--bg-primary:#1a1611;--bg-secondary:#2a221b;--bg-accent:#332821;--text-primary:#f5f1eb;--text-secondary:#d4c7b3;--text-muted:#a08b6f;--accent-primary:#ff7849;--accent-secondary:#ffab3d;--accent-tertiary:#ffc962;--border-color:#4a3f2f;--shadow-light:rgba(255, 120, 73, 0.15);--shadow-medium:rgba(0, 0, 0, 0.3);--shadow-dark:rgba(255, 120, 73, 0.25);--shadow-color:rgba(0, 0, 0, 0.4);--paper-texture:#1f1b16;}
body{color:var(--text-primary);font-family:var(--font-body);font-size:18px;font-weight:400;line-height:1.6;}
h1, h2, h3, h4, h5, h6{color:var(--accent-primary);font-family:var(--font-heading);font-weight:700;line-height:1.2;margin-bottom:16px;margin-top:0;}
h1{font-size:clamp(40px, 8vw, 80px);line-height:1.1;margin-bottom:20px;text-shadow:2px 2px 4px var(--shadow-medium);}
h2{font-size:clamp(32px, 6vw, 56px);line-height:1.2;margin-bottom:24px;}
h3{font-size:clamp(24px, 4vw, 40px);margin-bottom:16px;}
h4{color:var(--accent-secondary);font-size:clamp(20px, 3vw, 32px);margin-bottom:12px;}
h5{font-size:clamp(18px, 2.5vw, 24px);margin-bottom:10px;}
h6 {
font-size: clamp(16px, 2vw, 20px);
margin-bottom: 8px;
} p{margin-bottom:16px;margin-top:0;}
p:last-child {
margin-bottom: 0;
} a{color:var(--accent-primary);text-decoration:underline;text-decoration-color:var(--accent-secondary);text-decoration-thickness:1px;text-underline-offset:2px;transition:all 0.3s ease;}
a:hover, a:focus{color:var(--accent-secondary);text-decoration-thickness:2px;}
a:active{color:var(--accent-tertiary);}
ul, ol{margin:16px 0;padding-left:24px;}
ul{list-style:none;}
ul li{margin-bottom:12px;padding-left:8px;position:relative;}
ul li::before{color:var(--accent-primary);content:"→";font-family:var(--font-accent);font-size:18px;left:-20px;position:absolute;}
ol{list-style:decimal;}
ol li{margin-bottom:12px;}
strong, b{color:var(--accent-primary);font-weight:700;}
em, i{font-style:italic;}
blockquote{background:var(--bg-accent);border-left:4px solid var(--accent-primary);border-radius:10px;margin:24px 0;padding:20px 24px;position:relative;transform:rotate(-0.5deg);}
blockquote p{color:var(--text-secondary);font-family:var(--font-accent);font-size:20px;font-style:italic;margin:0;}
blockquote cite{color:var(--text-muted);display:block;font-size:16px;font-style:normal;margin-top:12px;}
blockquote cite::before{content:"— ";}
code{background:var(--bg-accent);border-radius:4px;color:var(--accent-secondary);font-family:'Courier New', monospace;font-size:0.9em;padding:2px 6px;}
pre{background:var(--bg-secondary);border:2px dashed var(--border-color);border-radius:10px;margin:24px 0;overflow-x:auto;padding:20px;}
pre code{background:none;padding:0;}
small{font-size:0.875em;}
mark{background:var(--accent-tertiary);border-radius:3px;color:var(--bg-primary);padding:2px 4px;}
sub, sup{font-size:0.75em;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
hr{border:none;border-top:2px dashed var(--border-color);margin:40px 0;opacity:0.7;}
abbr[title]{border-bottom:1px dotted var(--accent-primary);cursor:help;text-decoration:none;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-primary{color:var(--accent-primary);}
.text-secondary{color:var(--accent-secondary);}
.text-muted{color:var(--text-muted);}
.font-heading{font-family:var(--font-heading);}
.font-accent{font-family:var(--font-accent);}
.font-body{font-family:var(--font-body);}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
.modal-overlay, .modal-content, .modal-icon{animation:none !important;transition:opacity 0.01ms !important;}
}
.float-animation{animation:float 3s ease-in-out infinite;}
@keyframes slideInUp {
from{opacity:0;transform:translateY(30px);}
to{opacity:1;transform:translateY(0);}
}
@keyframes modalBounce {
0%{opacity:0;transform:rotate(-1deg) scale(0.8) translateY(-50px);}
60%{transform:rotate(-1deg) scale(1.05) translateY(0);}
100%{opacity:1;transform:rotate(-1deg) scale(1) translateY(0);}
}
@keyframes float {
0%,
100%{transform:translateY(0) rotate(var(--rotate, 0deg));}
50%{transform:translateY(-10px) rotate(calc(var(--rotate, 0deg) + 2deg));}
}
@keyframes wiggle {
0%,
100%{transform:rotate(var(--rotate, 0deg));}
25%{transform:rotate(calc(var(--rotate, 0deg) - 3deg));}
75%{transform:rotate(calc(var(--rotate, 0deg) + 3deg));}
}
@keyframes wobble {
0%,
100%{transform:rotate(-5deg);}
50%{transform:rotate(5deg);}
}
@keyframes bounceIn {
0%{transform:scale(0);}
50%{transform:scale(1.2);}
100%{transform:scale(1);}
}
@keyframes bounce {
0%,
100%{transform:translateY(0);}
50%{transform:translateY(-20px);}
}
@keyframes pulse {
0%,
100%{box-shadow:5px 5px 0 var(--shadow-color);}
50%{box-shadow:5px 5px 0 var(--shadow-color), 0 0 0 8px rgba(247, 127, 0, 0.3);}
}
.modal-overlay{align-items:center;backdrop-filter:blur(5px);background:rgba(0, 0, 0, 0.75);display:flex;height:100%;justify-content:center;left:0;opacity:0;padding:16px;position:fixed;top:0;transition:opacity 0.3s ease, visibility 0.3s ease;visibility:hidden;width:100%;z-index:10000;}
.modal-overlay.show{opacity:1;visibility:visible;}
.modal-content{animation:modalBounce 0.5s ease forwards;background:var(--bg-primary);border:3px solid var(--border-color);border-radius:20px 15px 25px 18px;box-shadow:10px 10px 30px rgba(0, 0, 0, 0.3);max-width:740px;position:relative;transform:rotate(-1deg) scale(0.9);transition:transform 0.3s ease;width:100%;}
.modal-overlay.show .modal-content{transform:rotate(-1deg) scale(1);}
.modal-close{align-items:center;background:transparent;border:none;border-radius:50%;color:var(--text-primary);cursor:pointer;display:flex;font-size:32px;height:40px;justify-content:center;line-height:1;position:absolute;right:16px;top:16px;transition:all 0.3s;width:40px;}
.modal-close:hover{background:var(--accent-primary);color:var(--bg-primary);transform:rotate(90deg);}
.modal-header{padding:32px 24px 16px;text-align:center;}
.modal-icon{animation:float 3s ease-in-out infinite;display:block;font-size:32px;}
.modal-header h2{color:var(--accent-primary);font-family:var(--font-heading);font-size:clamp(28px, 5vw, 36px);margin:0;transform:rotate(-1deg);}
.modal-body{padding:0 24px 24px 24px;}
.modal-subtitle{color:var(--text-primary);font-size:18px;margin-bottom:24px;text-align:center;}
.modal-features{margin-bottom:24px;}
.modal-feature{align-items:center;background:var(--bg-secondary);color:var(--text-secondary);border-radius:10px;display:flex;gap:12px;margin-bottom:8px;padding:12px;transform:rotate(calc(-0.5deg + var(--rotate, 0deg)));}
.modal-feature:nth-child(1){--rotate:-1deg;}
.modal-feature:nth-child(2){--rotate:0.5deg;}
.modal-feature:nth-child(3){--rotate:1deg;}
.feature-icon{flex-shrink:0;font-size:24px;}
.modal-feature span:last-child{font-size:16px;font-weight:500;}
.modal-form{display:flex;flex-direction:column;gap:12px;}
.modal-form input[type="text"],
.modal-form input[type="email"]{background:var(--bg-primary);border:3px solid var(--border-color);border-radius:15px 25px 15px 25px;color:var(--text-primary);font-family:var(--font-primary);font-size:16px;padding:16px;transition:all 0.3s;width:100%;}
.modal-form input[type="email"]:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(255, 107, 53, 0.2);outline:none;transform:rotate(-0.5deg);}
.modal-submit{background:var(--accent-primary);border:3px solid var(--border-color);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;box-shadow:5px 5px 0px rgba(44, 24, 16, 0.2);color:var(--bg-primary);cursor:pointer;font-family:var(--font-primary);font-size:18px;font-weight:bold;padding:16px 32px;transform:rotate(-1deg);transition:all 0.3s;}
.modal-submit:hover{box-shadow:8px 8px 0px rgba(44, 24, 16, 0.3);transform:rotate(1deg) scale(1.05);}
.modal-submit:disabled{cursor:not-allowed;opacity:0.6;}
.modal-privacy{color:var(--text-primary);font-size:12px;margin-top:12px;opacity:0.7;text-align:center;}
.modal-footer{border-top:2px dashed var(--border-color);padding:16px 24px 24px;text-align:center;}
.modal-dismiss{background:transparent;border:2px solid var(--border-color);border-radius:20px;color:var(--text-primary);cursor:pointer;font-family:var(--font-primary);font-size:14px;padding:12px 24px;transition:all 0.3s;}
.modal-dismiss:hover{background:var(--border-color);color:var(--bg-primary);transform:scale(1.05);}
.modal-success{padding:32px 0;text-align:center;}
.success-icon{animation:bounceIn 0.5s ease;display:block;font-size:64px;margin-bottom:16px;}
.modal-success h3{color:var(--accent-primary);font-family:var(--font-heading);font-size:32px;margin-bottom:12px;}
.modal-success p{color:var(--text-primary);font-size:18px;margin-bottom:24px;}
.modal-success-close{background:var(--accent-primary);border:3px solid var(--border-color);border-radius:25px;color:var(--bg-primary);cursor:pointer;font-family:var(--font-primary);font-size:16px;font-weight:bold;padding:12px 32px;transition:all 0.3s;}
.modal-success-close:hover{transform:scale(1.05);}
[data-theme="dark"] .modal-content{background:var(--bg-primary);border-color:var(--border-color);}
[data-theme="dark"] .modal-close{color:var(--text-primary);}
.container{margin:0 auto;max-width:1200px;padding:0 24px;position:relative;}
.hamburger{background:none;border:none;cursor:pointer;height:30px;left:32px;padding:0;position:fixed;top:32px;transform:rotate(-2deg);width:35px;z-index:1001;}
.hamburger span{background:var(--text-primary);border-radius:50px;display:block;height:4px;margin-bottom:7px;position:relative;transition:all 0.3s;width:100%;}
.hamburger span:nth-child(1){transform:rotate(1deg);width:90%;}
.hamburger span:nth-child(2){transform:rotate(-1deg);width:95%;}
.hamburger span:nth-child(3){transform:rotate(2deg);width:85%;}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(8px, 8px);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){background-color:var(--text-primary);border-radius:2px;display:flex;flex-direction:column;gap:6px;height:3px;transform:rotate(-45deg) translate(12px, -12px);width:35px;}
.nav-brand{text-align:center;text-indent:-9999px;}
.nav-menu{background:var(--bg-primary);border-right:3px solid var(--border-color);box-shadow:5px 0 20px var(--shadow-color);height:100vh;left:-100%;overflow-y:auto;padding:80px 24px;position:fixed;top:0;transition:left 0.3s ease;width:300px;z-index:1000;}
.nav-menu.active{left:0;}
.nav-menu a{border-radius:10px;color:var(--text-primary);display:block;font-size:20px;margin-bottom:16px;padding:8px;position:relative;text-decoration:none;transform:rotate(calc(-1deg + var(--rotate, 0deg)));transition:all 0.3s;}
.nav-menu a:nth-child(odd){--rotate:1deg;}
.nav-menu a:nth-child(even){--rotate:-1deg;}
.nav-menu a:hover {
background: var(--accent-primary);
color: var(--text-secondary);
transform: rotate(0deg) scale(1.05);
} *{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;overflow-x:hidden;scroll-behavior:smooth;}
body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.8;overflow-x:hidden;transition:background-color 0.3s ease, color 0.3s ease;}
.sr-only{border:0;clip:rect(0, 0, 0, 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;}
.scribble{pointer-events:none;position:absolute;z-index:1;}
.scribble-1{height:100px;left:5%;top:10%;transform:rotate(15deg);width:100px;}
.scribble-2{bottom:10%;height:120px;right:5%;transform:rotate(-25deg);width:120px;}
.scribble svg{fill:none;height:100%;opacity:0.3;stroke:var(--accent-tertiary);stroke-width:2px;width:100%;}
.scroll-to-top{background:var(--accent-primary);border:4px solid var(--border-color);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;bottom:32px;box-shadow:6px 6px 0 var(--shadow-color);cursor:pointer;height:60px;opacity:0;position:fixed;right:32px;transform:rotate(-2deg) translateY(100px);transition:all 0.3s ease;visibility:hidden;width:60px;z-index:999;}
.scroll-to-top::before{border:2px dashed var(--border-color);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;content:'';inset:-2px;opacity:0.3;position:absolute;}
.scroll-to-top.show{opacity:1;transform:rotate(-2deg) translateY(0);visibility:visible;}
.scroll-to-top:hover{box-shadow:10px 10px 0 var(--shadow-color);transform:rotate(2deg) translateY(-5px) scale(1.05);}
.scroll-to-top:active{box-shadow:3px 3px 0 var(--shadow-color);transform:rotate(0deg) translateY(0) scale(0.98);}
.scroll-arrow{color:var(--bg-primary);display:block;font-size:32px;font-weight:bold;line-height:1;transform:rotate(3deg);}
.section-cards{position:relative;}
.section-cards{display:grid;gap:32px;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));margin-top:48px;}
.section-card{align-items:center;background:var(--bg-primary);border:3px solid var(--border-color);border-radius:20px;box-shadow:8px 8px 20px var(--shadow-light);display:flex;flex-direction:column;justify-content:center;min-height:280px;padding:32px;position:relative;text-align:center;transform:rotate(calc(-2deg + var(--rotate, 0deg)));transition:all 0.3s;}
.section-card:nth-child(1){--rotate:-3deg;}
.section-card:nth-child(2){--rotate:1.5deg;}
.section-card:nth-child(3){--rotate:3deg;}
.section-card:hover{box-shadow:12px 12px 30px var(--shadow-dark);transform:rotate(0deg) scale(1.05);}
.section-card-title{color:var(--text-primary);font-family:var(--font-accent-secondary);font-size:24px;margin-bottom:24px;}
.section-card-label{color:var(--text-primary);font-size:18px;line-height:1.7;}
.section-card-number{color:var(--accent-primary);display:block;font-family:var(--font-heading);font-size:48px;font-weight:700;line-height:1;margin-bottom:16px;}
.site-header{align-items:center;display:flex;justify-content:space-between;padding:32px;position:fixed;top:0;transition:background-color 0.3s;width:100%;z-index:1000;}
.subscribe-trigger{animation:pulse 2s ease-in-out infinite;background:var(--accent-secondary);border:3px solid var(--border-color);border-radius:50%;bottom:32px;box-shadow:5px 5px 0 var(--shadow-color);cursor:pointer;height:56px;left:32px;opacity:1;position:fixed;transform:rotate(5deg);transition:all 0.3s ease;visibility:visible;width:56px;z-index:999;}
.subscribe-trigger:hover{animation:none;box-shadow:8px 8px 0 var(--shadow-color);transform:rotate(-5deg) translateY(-5px) scale(1.1);}
.subscribe-trigger:active{animation:none;box-shadow:3px 3px 0 var(--shadow-color, rgba(44, 24, 16, 0.2));transform:rotate(0deg) translateY(0) scale(0.95);}
.subscribe-icon{color:var(--bg-primary);display:block;font-size:28px;font-weight:bold;line-height:1;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.w-50{margin:0 auto;max-width:50%;}
.w-66{margin:0 auto;max-width:66%;}
.w-75{margin:0 auto;max-width:75%;}
.w-90{margin:0 auto;max-width:90%;}
.content-section{padding:80px 24px;position:relative;}
.content-section:nth-child(even){background:var(--bg-accent);}
.section-title{color:var(--accent-primary);font-family:var(--font-heading);font-size:clamp(40px, 5vw, 64px);font-weight:400;margin-bottom:20px;position:relative;text-align:center;transform:rotate(-1.5deg);}
.section-title::after{background:var(--accent-primary);border-radius:2px;bottom:-5px;content:'';height:3px;left:-10px;opacity:0.7;position:absolute;right:-10px;transform:rotate(-1deg) scaleY(0.8);}
.section-description{color:var(--text-secondary);font-size:20px;line-height:1.7;margin-bottom:32px;text-align:center;}
.section-content{margin:0 auto;max-width:1200px;}
.footer-cta-section{background:var(--bg-secondary);margin-bottom:48px;padding:96px 24px;text-align:center;}
.footer-cta-content{margin:0 auto;max-width:800px;}
.footer-cta-title{color:var(--accent-primary);font-family:var(--font-heading);font-size:clamp(32px, 5vw, 48px);margin-bottom:24px;transform:rotate(-1deg);}
.footer-cta-description{color:var(--text-primary);font-size:20px;margin-bottom:32px;}
.footer-cta-button{background:var(--accent-primary);border:3px solid var(--text-primary);border-radius:15px;box-shadow:0 8px 20px var(--shadow-medium);color:white;display:inline-block;font-family:var(--font-heading);font-size:32px;font-weight:600;margin-top:30px;padding:20px 40px;text-decoration:none;transform:rotate(-2deg);transition:all 0.3s ease;}
.footer-cta-button:hover{box-shadow:0 12px 30px var(--shadow-light);transform:rotate(1deg) scale(1.05);}
.site-footer{background:var(--border-color);color:var(--text-primary);padding:0 0 48px 0;text-align:center;}
.site-footer:after{content:'Research sources:ISSN, Journal of Sports Medicine, American College of Sports Medicine, International Journal of Sport Nutrition and Exercise Metabolism';display:block;margin-top:24px;}
.footer-links{display:flex;flex-wrap:wrap;gap:32px;justify-content:center;margin-bottom:32px;}
.footer-links a{color:var(--text-primary);display:inline-block;font-size:20px;text-decoration:none;transform:rotate(calc(-1deg + var(--rotate, 0deg)));transition:all 0.3s;}
.footer-links a:nth-child(odd){--rotate:1deg;}
.footer-links a:nth-child(even){--rotate:-1deg;}
.footer-links a:hover{color:var(--accent-primary);text-decoration:underline;transform:rotate(0deg) scale(1.1);}
.footer-copyright{color:var(--text-primary);font-family:var(--font-heading);font-size:20px;transform:rotate(-0.5deg);}
.footer-copyright:before{content:'Built with ❤️ for the ultra running community';display:block;margin:16px 0;}
.footer-copyright:after{content:'Evidence-based nutrition planning for ultra-endurance athletes';display:block;margin:16px 0 0 0;font-size:24px;}
.footer-disclaimer{background:var(--bg-accent);border:2px dashed var(--accent-secondary);border-radius:15px;color:var(--text-muted);font-size:18px;line-height:1.25;margin:16px auto;max-width:800px;padding:20px;transform:rotate(-0.5deg);}
.theme-toggle{background:var(--bg-secondary);border:2px solid var(--accent-primary);border-radius:50px;box-shadow:0 4px 12px var(--shadow-medium);color:var(--text-primary);cursor:pointer;font-family:var(--font-accent);font-size:14px;padding:8px 16px;position:fixed;right:24px;top:24px;transform:rotate(-2deg);transition:all 0.3s ease;z-index:1000;}
.theme-toggle::before{content:'☀️ Dark Mode';font-size:16px;}
[data-theme="dark"] .theme-toggle::before{content:'🌙 Light Mode';}
.theme-toggle .slider{display:none;}
@media(min-width:769px) and (max-width:1024px){
.container{max-width:960px;padding:0 20px;}
.content-section{padding:48px 20px;}
.section-cards{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));}
.science-cards{grid-template-columns:repeat(2, 1fr);}
.benefits-grid, .benefits-cards{grid-template-columns:repeat(2, 1fr);}
} @media(max-width:768px){
html{font-size:15px;}
.container{padding:0 16px;}
.hamburger{left:16px;top:16px;}
.theme-toggle{right:16px;top:16px;}
.section-card, .problem-card, .science-card, .science-point, .benefit-card, .benefit-item, .solution-card, .timeline-item, .calculator-feature-item, .reference-item{transform:none !important;}
.hero-section{min-height:75vh;padding:64px 16px 28px;}
.hero-title{font-size:clamp(28px, 8vw, 44px);line-height:1.1;margin-bottom:12px;}
.hero-subtitle{font-size:clamp(16px, 3vw, 20px);line-height:1.3;margin:20px 0;padding:10px 16px;}
.hero-buttons{flex-direction:column;gap:14px;}
.hero-buttons .btn-primary, .hero-buttons .btn-secondary{font-size:16px;line-height:1.3;padding:12px 20px;white-space:normal;width:100%;}
.content-section{padding:36px 16px;}
.section-title{font-size:clamp(24px, 6vw, 36px);line-height:1.15;margin-bottom:14px;}
.section-description{font-size:16px;line-height:1.5;margin-bottom:20px;}
.section-cards{gap:18px;grid-template-columns:1fr;margin-top:20px;}
.section-card{padding:18px;}
.section-card-title{font-size:18px;line-height:1.2;margin-bottom:10px;}
.section-card-number{font-size:42px;margin:10px 0;}
.section-card-label{font-size:15px;}
.problem-section .container{margin:20px auto;padding:28px 18px;}
.problem-section .section-title{font-size:32px;}
.science-section{margin:60px auto 0 auto;padding:36px 0;}
.science-cards{gap:18px;grid-template-columns:1fr;margin-bottom:28px;}
.science-card{padding:18px;}
.science-card-title{font-size:18px;line-height:1.2;}
.science-card-number{font-size:30px;}
.science-point{font-size:16px;padding:10px 14px;}
.science-point-title{font-size:18px;line-height:1.2;margin-bottom:12px;}
.science-point-description{font-size:15px;line-height:1.5;}
.benefits-section{margin:0 auto 60px auto;padding:36px 0;}
.benefits-cards{gap:18px;grid-template-columns:1fr;}
.benefit-card{padding:18px;}
.benefit-item{font-size:16px;padding:10px 14px;}
.benefit-icon{font-size:36px;margin-bottom:8px;}
.benefit-title{font-size:28px;line-height:1.15;margin-bottom:10px;}
.benefit-description{font-size:15px;line-height:1.5;}
.benefits-timeline{padding:20px 0;}
.timeline-item{flex-direction:column !important;margin-bottom:28px;text-align:center !important;}
.timeline-icon{font-size:22px;height:56px;margin-bottom:14px;width:56px;}
.timeline-content{padding:0;}
.timeline-title{font-size:22px;line-height:1.2;}
.timeline-description{font-size:15px;line-height:1.5;}
.solution-section{margin:24px auto;padding:20px 16px;}
.solution-cards{gap:18px;grid-template-columns:1fr;}
.solution-card{padding:18px;}
.solution-card-title{line-height:1.2;}
.calculator-preview{margin:20px auto;}
.calculator-preview h3{font-size:24px;line-height:1.2;margin-bottom:18px;}
.calculator-features{margin-top:20px;}
.calculator-feature-item{font-size:16px;padding:10px 14px;}
.solution-btn-primary, .solution-btn-large{font-size:16px;line-height:1.3;margin:16px 0;padding:12px 20px;white-space:normal;width:100%;}
.solution-cta-subtext{font-size:16px;margin-top:14px;}
.references-section{padding:36px 0;}
.references-section h3{font-size:clamp(18px, 4vw, 22px);}
.references-list{font-size:14px;margin-top:28px;}
.reference-item{font-size:14px;margin:10px 0;padding-left:18px;}
.footer-cta-section{padding:24px 16px;}
.footer-cta-title{font-size:clamp(26px, 5vw, 36px);line-height:1.15;margin-bottom:14px;}
.footer-cta-description{font-size:16px;line-height:1.5;margin-bottom:20px;}
.footer-cta-button{font-size:16px;line-height:1.3;padding:12px 20px;white-space:normal;width:100%;}
.site-footer{padding:32px 0;}
.footer-links{flex-direction:column;gap:10px;}
.footer-links a{font-size:15px;}
.footer-copyright{font-size:15px;margin-top:14px;}
.footer-disclaimer{font-size:14px;margin-top:14px;}
.scroll-to-top{bottom:18px;height:48px;right:18px;width:48px;}
.scroll-arrow{font-size:24px;}
.subscribe-trigger{bottom:18px;height:48px;left:18px;width:48px;}
.subscribe-icon{font-size:20px;}
.modal-content{border-radius:18px;margin:14px;max-width:100%;}
.modal-header h2{font-size:24px;}
.modal-icon{font-size:36px;}
.modal-subtitle{font-size:15px;}
.modal-feature{font-size:13px;}
.modal-form input{font-size:15px;padding:11px;}
.modal-submit{font-size:16px;padding:13px;}
.scribble-1, .scribble-2{display:none;}
.w-50, .w-66, .w-75, .w-90{max-width:100%;width:100%;}
} @media(max-width:480px){
html{font-size:14px;}
.container{padding:0 12px;}
.hero-section{min-height:70vh;padding:56px 12px 20px;}
.hero-title{font-size:clamp(24px, 8vw, 38px);margin-bottom:10px;}
.hero-subtitle{font-size:clamp(15px, 3.5vw, 18px);margin:16px 0;padding:8px 14px;}
.hero-buttons .btn-primary, .hero-buttons .btn-secondary{font-size:15px;padding:12px 22px;}
.content-section{padding:28px 12px;}
.section-title{font-size:clamp(22px, 6vw, 32px);margin-bottom:10px;}
.section-description{font-size:15px;margin-bottom:16px;}
.section-card{padding:14px;}
.section-card-title{font-size:17px;}
.section-card-number{font-size:36px;}
.section-card-label{font-size:14px;}
.problem-section .container{padding:20px 14px;}
.problem-section .section-title{font-size:28px;}
.science-section{margin:48px auto 0 auto;padding:28px 0;}
.science-card{padding:14px;}
.science-card-title{font-size:17px;}
.science-card-number{font-size:26px;}
.science-point{font-size:15px;padding:8px 12px;}
.science-point-title{font-size:17px;}
.science-point-description{font-size:14px;}
.benefits-section{margin:0 auto 48px auto;padding:28px 0;}
.benefit-card{padding:14px;}
.benefit-item{padding:8px 12px;}
.benefit-icon{font-size:32px;}
.benefit-title{font-size:24px;}
.benefit-description{font-size:14px;}
.timeline-item{margin-bottom:20px;}
.timeline-icon{font-size:18px;height:50px;width:50px;}
.timeline-title{font-size:20px;}
.timeline-description{font-size:14px;}
.solution-section{margin:28px auto 48px auto;padding:20px 14px;}
.solution-card{padding:14px;}
.calculator-preview h3{font-size:20px;}
.calculator-feature-item{font-size:15px;padding:8px 12px;}
.solution-btn-primary, .solution-btn-large{font-size:15px;padding:12px 22px;}
.solution-cta-subtext{font-size:15px;}
.references-section{padding:28px 0;}
.references-section h3{font-size:clamp(16px, 4vw, 20px);}
.reference-item{font-size:13px;padding-left:16px;}
.footer-cta-section{padding:28px 12px;}
.footer-cta-title{font-size:clamp(22px, 5vw, 32px);}
.footer-cta-description{font-size:15px;}
.footer-cta-button{font-size:15px;padding:12px 22px;}
.site-footer{padding:28px 0;}
.footer-links a{font-size:14px;}
.footer-copyright{font-size:14px;}
.scroll-to-top{bottom:14px;height:44px;right:14px;width:44px;}
.scroll-arrow{font-size:22px;}
.subscribe-trigger{bottom:14px;height:44px;left:14px;width:44px;}
.subscribe-icon{font-size:18px;}
.modal-content{border-radius:14px;margin:10px;}
.modal-header h2{font-size:22px;}
.modal-icon{font-size:32px;}
.modal-subtitle{font-size:14px;}
.modal-feature{font-size:12px;}
.modal-form input{font-size:14px;padding:9px;}
.modal-submit{font-size:15px;padding:11px;}
} @media(max-width:360px){
html{font-size:13px;}
.hero-title{font-size:clamp(22px, 8vw, 34px);}
.section-title{font-size:clamp(20px, 6vw, 28px);}
.section-card-number{font-size:32px;}
.benefit-icon{font-size:28px;}
.benefit-title{font-size:20px;}
.timeline-icon{font-size:16px;height:46px;width:46px;}
} @media(min-width:1440px){
.container{max-width:1320px;}
.problem-section .container, .solution-section{max-width:1200px;}
.hero-title{font-size:clamp(60px, 7vw, 76px);}
.section-title{font-size:clamp(44px, 4.5vw, 52px);}
} @media print {
.hamburger, .theme-toggle, .scroll-to-top, .subscribe-trigger, .scribble, .modal-overlay{display:none !important;}
body{color:#000;font-size:12pt;}
.hero-section, .content-section {
padding: 20pt;
} a{color:#000;text-decoration:underline;}
.section-card, .science-card, .benefit-item, .solution-section{border:1pt solid #000;page-break-inside:avoid;}
}
.loader{display:none;}
.section-card{background:var(--bg-accent);border:2px solid var(--accent-primary);border-radius:20px;box-shadow:0 10px 30px var(--shadow-light);padding:30px;position:relative;text-align:left;transition:all 0.3s ease;}
.content-section:nth-child(even) .section-card{background:var(--bg-primary);border:2px dashed var(--accent-primary);}
.section-card:hover{box-shadow:0 15px 40px var(--shadow-medium);transform:translateY(-5px) rotate(0deg);}
.section-card a{color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--accent-secondary);text-decoration-thickness:1px;transition:color 0.3s ease-in-out;}
.section-card a:hover{color:var(--accent-secondary);}
.section-card-title{color:var(--accent-primary);font-family:var(--font-accent);font-size:22px;margin-bottom:15px;text-decoration:underline;text-decoration-color:var(--accent-secondary);text-decoration-thickness:2px;text-underline-offset:4px;}
.section-card-number{color:var(--text-secondary);display:block;font-family:var(--font-heading);font-size:56px;font-weight:700;margin:16px 0;text-shadow:1px 1px 2px var(--shadow-medium);transform:rotate(-2deg);transition:transform 0.3s ease;}
.section-card-number:hover{transform:rotate(-4deg) scale(1.1);}
.section-card-label{color:var(--text-secondary);font-size:18px;line-height:1.6;}
.hero-section{align-items:center;display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding:100px 24px 48px;position:relative;}
.hero-content{max-width:1200px;position:relative;text-align:center;z-index:10;}
.hero-title{color:var(--accent-primary);font-family:var(--font-heading);font-size:clamp(48px, 8vw, 96px);font-weight:700;margin-bottom:20px;text-shadow:2px 2px 4px var(--shadow-medium);transform:rotate(-2deg);}
.hero-title::after{display:none;}
.hero-title .highlight{color:var(--accent-primary);display:inline-block;position:relative;}
.hero-title .highlight::after{background:var(--accent-secondary);border-radius:50%;bottom:-5px;content:'';height:15px;left:-10px;opacity:0.3;position:absolute;right:-10px;transform:rotate(-1deg);}
.hero-subtitle{background:var(--bg-accent);border:2px dashed var(--accent-secondary);border-radius:25px;box-shadow:0 8px 25px var(--shadow-light);color:var(--text-secondary);display:inline-block;font-size:clamp(20px, 3vw, 32px);line-height:1.5;margin:40px 0;padding:15px 30px;transform:rotate(1deg);}
.hero-buttons{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-top:32px;}
.hero-buttons .btn-primary, .hero-buttons .btn-secondary{border:none;border-radius:50px;cursor:pointer;display:inline-block;font-family:var(--font-accent);font-size:20px;font-weight:600;padding:24px 40px;position:relative;text-decoration:none;transition:all 0.3s ease;}
.hero-buttons .btn-primary{background:var(--accent-primary);box-shadow:5px 5px 15px var(--shadow-medium);color:var(--bg-primary);transform:rotate(-1deg);}
.hero-buttons .btn-primary:hover{background:var(--accent-secondary);box-shadow:8px 8px 20px var(--shadow-dark);transform:rotate(1deg) scale(1.1);}
.hero-buttons .btn-secondary{background:transparent;border:2px solid var(--accent-primary);color:var(--accent-primary);transform:rotate(1deg);}
.hero-buttons .btn-secondary:hover{background:var(--accent-primary);color:var(--bg-primary);transform:rotate(-1deg) scale(1.05);}
.problem-section .container{backdrop-filter:blur(10px);background:var(--paper-texture);border:3px solid var(--accent-primary);border-radius:25px;box-shadow:0 20px 40px var(--shadow-medium), 0 0 0 1px var(--border-color), inset 0 1px 0 rgba(255, 255, 255, 0.1);margin:0 auto;max-width:980px;padding:40px;position:relative;transform:rotate(-1deg);}
.problem-section .section-title{font-size:40px;margin-bottom:15px;}
.problem-section .section-title::after{display:none;}
.science-section{background:var(--bg-accent);padding:96px 0;}
.science-cards{display:grid;gap:32px;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));margin-bottom:48px;margin-top:48px;}
.science-card{background:var(--bg-primary);border:2px solid var(--accent-secondary);border-radius:20px;box-shadow:0 10px 30px var(--shadow-light);padding:10px 30px 30px 30px;position:relative;transform:rotate(var(--card-rotation, 1deg));transition:all 0.3s ease;}
.science-card:nth-child(1){--card-rotation:-2deg;}
.science-card:nth-child(2){--card-rotation:1deg;}
.science-card:nth-child(3){--card-rotation:2.5deg;}
.science-card:hover{box-shadow:12px 12px 30px var(--shadow-dark);transform:rotate(0deg) scale(1.05);}
.science-card-title{color:var(--accent-primary);font-family:var(--font-heading);font-size:22px;margin-bottom:16px;text-decoration:underline;text-decoration-color:var(--accent-secondary);text-decoration-thickness:2px;text-underline-offset:4px;}
.science-card-label{color:var(--text-secondary);font-size:18px;line-height:1.7;}
.science-card-label a{color:var(--accent-primary);text-decoration:1px underline var(--accent-secondary);}
.science-card-number{color:var(--accent-primary);display:block;font-family:var(--font-accent);font-size:36px;font-weight:700;margin:24px 0 12px 0;text-shadow:1px 1px 2px var(--shadow-medium);transform:rotate(-2deg);}
.science-points{margin-top:48px;}
.science-point{background:var(--bg-primary);border-left:5px solid var(--accent-primary);border-radius:10px;margin:24px 0;padding:24px;position:relative;transform:rotate(var(--rotate, 0deg));transition:all 0.3s ease;}
.science-point:nth-child(odd){--rotate:-0.5deg;}
.science-point:nth-child(even){--rotate:0.5deg;}
.science-point:hover{box-shadow:0 8px 20px var(--shadow-light);transform:rotate(0deg) translateX(10px);}
.science-point-title{color:var(--accent-primary);font-family:var(--font-heading);font-size:28px;margin-bottom:16px;}
.science-description{color:var(--text-primary);font-size:18px;line-height:1.7;}
.science-item{margin-bottom:12px;padding-left:8px;}
.science-point-source{font-size:14px;font-style:italic;margin-top:16px;opacity:0.8;}
.science-point-source a{color:var(--accent-secondary);text-decoration:underline;}
.benefits-section{background:var(--bg-secondary);padding:96px 0;}
.benefits-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));margin-top:48px;}
.benefit-item{background:var(--bg-primary);border-left:5px solid var(--accent-secondary);border-radius:10px;padding:24px;position:relative;transform:rotate(var(--rotate, 0deg));transition:all 0.3s ease;}
.benefit-item:nth-child(1){--rotate:-1deg;}
.benefit-item:nth-child(2){--rotate:1.5deg;}
.benefit-item:nth-child(3){--rotate:-0.8deg;}
.benefit-item:nth-child(4){--rotate:1.2deg;}
.benefit-item:nth-child(5){--rotate:-1.3deg;}
.benefit-item:nth-child(6){--rotate:0.9deg;}
.benefit-item:hover{box-shadow:0 8px 20px var(--shadow-light);transform:rotate(0deg) scale(1.05);}
.benefit-icon{display:block;font-size:48px;margin-bottom:12px;transform:rotate(-5deg);}
.benefit-title{color:var(--accent-primary);font-family:var(--font-heading);font-size:32px;line-height:1.2;margin-bottom:12px;}
.benefit-description{color:var(--text-primary);font-size:18px;line-height:1.6;margin:12px 0;}
.benefits-timeline{padding:48px 0;position:relative;}
.timeline-item{align-items:center;display:flex;margin-bottom:48px;position:relative;}
.timeline-item:nth-child(even){flex-direction:row-reverse;text-align:right;}
.timeline-icon{align-items:center;background:var(--accent-primary);border:3px solid var(--bg-primary);border-radius:50%;box-shadow:0 10px 30px var(--shadow-light);color:var(--bg-primary);display:flex;flex-shrink:0;font-size:32px;height:80px;justify-content:center;transform:rotate(-5deg);transition:all 0.3s ease;width:80px;}
.timeline-item:hover .timeline-icon{transform:rotate(5deg) scale(1.1);}
.timeline-content{flex:1;padding:0 32px;}
.timeline-title{color:var(--accent-primary);font-family:var(--font-heading);font-size:28px;margin-bottom:8px;}
.timeline-description{color:var(--text-primary);font-size:18px;line-height:1.6;}
.solution-section{background:var(--bg-accent);padding:96px 0;}
.solution-section .section-description{color:var(--text-primary);}
.calculator-preview{background:var(--bg-primary);border:2px dashed var(--accent-primary);border-radius:20px;margin:48px auto;max-width:900px;padding:40px;text-align:center;transform:rotate(-0.5deg);}
.calculator-preview h3{color:var(--accent-primary);font-family:var(--font-heading);font-size:36px;margin-bottom:32px;}
.calculator-features{display:grid;gap:16px;margin-top:32px;}
.calculator-feature-item{background:var(--bg-accent);border-left:4px solid var(--accent-primary);border-radius:8px;font-size:18px;padding:16px 24px;text-align:left;transform:rotate(var(--rotate, 0deg));transition:all 0.3s ease;}
.calculator-feature-item:nth-child(odd){--rotate:-0.5deg;}
.calculator-feature-item:nth-child(even){--rotate:0.5deg;}
.calculator-feature-item:hover{background:var(--bg-primary);transform:rotate(0deg) translateX(10px);}
.solution-btn-primary, .solution-btn-large{background:var(--accent-primary);border:none;border-radius:50px;box-shadow:5px 5px 15px var(--shadow-medium);color:var(--bg-primary);cursor:pointer;display:block;font-family:var(--font-accent);font-size:24px;font-weight:600;margin:40px auto;max-width:540px;padding:24px 48px;text-align:center;text-decoration:none;transform:rotate(-2deg);transition:all 0.3s ease;}
.solution-btn-primary:hover, .solution-btn-large:hover{background:var(--accent-secondary);box-shadow:8px 8px 30px var(--shadow-dark);transform:rotate(2deg) scale(1.1);}
.solution-cta-subtext{color:var(--text-secondary);font-family:var(--font-primary);font-size:20px;font-style:italic;margin-top:24px;text-align:center;}
.references-section{background:var(--bg-primary);border-top:3px dashed var(--accent-tertiary);padding:96px 0;}
.references-section h3{color:var(--accent-secondary);font-family:var(--font-heading);font-size:clamp(24px, 4vw, 32px);margin:24px 0;}
.references-list{list-style:none;margin:48px auto 0 auto;max-width:1000px;padding:0;}
.reference-item{background:var(--bg-accent);border-left:4px solid var(--accent-tertiary);border-radius:8px;font-size:16px;line-height:1.7;margin:20px 0;padding:16px 24px;position:relative;transform:rotate(var(--rotate, 0deg));transition:all 0.3s ease;}
.reference-item:nth-child(odd){--rotate:-0.3deg;}
.reference-item:nth-child(even){--rotate:0.3deg;}
.reference-item:hover{background:var(--bg-primary);box-shadow:0 5px 15px var(--shadow-light);transform:rotate(0deg) translateX(10px);}
.reference-item strong{color:var(--accent-primary);display:block;margin-bottom:8px;}
.reference-item a{color:var(--accent-secondary);text-decoration:underline;transition:color 0.3s ease;}
.reference-item a:hover{color:var(--accent-tertiary);}
.reference-journal {
color: var(--text-muted);
display: block;
font-size: 14px;
font-style: italic;
margin-top: 8px;
}.form-group{margin-bottom:25px;text-align:left;}
.form-row{display:grid;gap:25px;grid-template-columns:1fr 1fr;}
label{color:var(--text-primary);display:block;font-family:'Architects Daughter', cursive;font-size:17px;font-weight:600;margin-bottom:10px;}
input, select{background:var(--bg-primary);border:3px solid var(--accent-primary);border-radius:12px;color:var(--text-primary);font-family:'Kalam', cursive;font-size:16px;padding:15px;transform:rotate(-1deg);transition:all 0.3s ease;width:100%;}
input:focus, select:focus{border-color:var(--accent-secondary);box-shadow:0 0 0 3px var(--shadow-light);outline:none;transform:rotate(0deg) scale(1.02);}
.weight-input{align-items:center;display:flex;}
.weight-input input{border-radius:12px 0 0 12px;}
.unit-toggle{background:var(--accent-primary);border:3px solid var(--accent-primary);border-left:none;border-radius:0 12px 12px 0;color:white;cursor:pointer;font-family:'Kalam', cursive;font-weight:600;padding:15px 20px;transform:rotate(-1deg);transition:all 0.3s ease;}
.unit-toggle:hover{background:var(--accent-secondary);border-color:var(--accent-secondary);transform:rotate(0deg);}
.calculate-btn{background:var(--accent-primary);border:3px solid var(--text-primary);border-radius:15px;color:white;cursor:pointer;font-family:'Caveat', cursive;font-size:24px;font-weight:600;margin-top:30px;padding:20px;transform:rotate(1deg);transition:all 0.3s ease;width:100%;}
.calculate-btn:hover{background:var(--accent-secondary);box-shadow:0 10px 25px var(--shadow-light);transform:rotate(-1deg) scale(1.02);}
.results{background:var(--bg-accent);border:3px dashed var(--accent-secondary);border-radius:20px;display:none;margin-top:40px;padding:30px;}
.results h3{color:var(--accent-primary);font-family:'Caveat', cursive;font-size:32px;margin-bottom:25px;text-align:center;transform:rotate(-1deg);}
.results-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));margin-bottom:25px;}
.result-card{background:var(--paper-texture);border:2px solid var(--accent-primary);border-radius:15px;box-shadow:0 6px 15px var(--shadow-medium);padding:25px;text-align:center;transform:rotate(var(--card-rotation, 1deg));}
.result-card .value{color:var(--accent-primary);font-family:'Caveat', cursive;font-size:40px;font-weight:bold;margin-bottom:8px;}
.result-card .label{color:var(--text-secondary);font-family:'Architects Daughter', cursive;font-weight:600;}
.result-card .total{color:var(--text-muted);font-size:15px;margin-top:8px;}
.fuel-breakdown{background:var(--paper-texture);border:2px solid var(--accent-secondary);border-radius:15px;margin-top:20px;padding:25px;transform:rotate(-0.5deg);}
.fuel-breakdown h4{color:var(--accent-primary);font-family:'Caveat', cursive;font-size:24px;margin-bottom:20px;}
.fuel-options{display:grid;gap:20px;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));}
.fuel-option{background:var(--bg-accent);border-left:4px solid var(--accent-primary);border-radius:12px;padding:20px;transform:rotate(var(--card-rotation, 0.5deg));}
.fuel-option h5{color:var(--accent-primary);font-family:'Architects Daughter', cursive;margin-bottom:12px;}
.fuel-option ul{list-style:none;padding:0;}
.fuel-option li{color:var(--text-secondary);margin:8px 0;padding-left:15px;position:relative;}
.fuel-option li::before{color:var(--accent-secondary);content:'→';font-weight:bold;left:0;position:absolute;}
@media(max-width:768px){
.form-row, .results-grid {
grid-template-columns: 1fr;
}
.calculator-container {
margin: 0 10px;
padding: 25px;
}
.hero h1 {
font-size: 48px;
}
.research-grid {
grid-template-columns: 1fr;
}
.fuel-options {
grid-template-columns: 1fr;
}
}