@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Patrick+Hand&family=Caveat:wght@400;600;700&display=swap");
:root{--font-primary:'Patrick Hand', cursive;--font-heading:'Kalam', cursive;--font-accent:'Caveat', cursive;--font-accent-secondary:'Caveat', cursive;--font-body:'Patrick Hand', cursive;--font-size-base:18px;--font-size-small:14px;--font-size-medium:18px;--font-size-large:22px;--line-height-base:1.6;--line-height-heading:1.2;--line-height-tight:1.4;}:root{--primary-color:#FF6B6B;--secondary-color:#4ECDC4;--accent-color:#FFE66D;--dark-bg:#2C3E50;--light-bg:#FAF9F6;--text-dark:#2C3E50;--text-light:#FAF9F6;--hand-blue:#3498db;--hand-green:#27ae60;--hand-orange:#f39c12;--bg-primary:var(--light-bg);--bg-secondary:#ffffff;--text-primary:var(--text-dark);--text-secondary:var(--text-dark);--accent-primary:var(--primary-color);--accent-secondary:var(--secondary-color);--accent-tertiary:var(--accent-color);--border-color:var(--primary-color);--shadow-color:var(--accent-color);--shadow-light:rgba(0, 0, 0, 0.1);--shadow-medium:rgba(0, 0, 0, 0.15);--shadow-dark:rgba(0, 0, 0, 0.2);--success:var(--hand-green);--warning:var(--hand-orange);--info:var(--hand-blue);}
[data-theme="dark"]{--bg-primary:var(--dark-bg);--bg-secondary:#34495e;--text-primary:var(--text-light);--text-secondary:var(--text-light);--shadow-light:rgba(255, 255, 255, 0.1);--shadow-medium:rgba(255, 255, 255, 0.15);--shadow-dark:rgba(255, 255, 255, 0.2);}
body.dark-mode{--bg-primary:var(--dark-bg);--bg-secondary:#34495e;--text-primary:var(--text-light);--text-secondary:var(--text-light);--shadow-light:rgba(255, 255, 255, 0.1);--shadow-medium:rgba(255, 255, 255, 0.15);--shadow-dark:rgba(255, 255, 255, 0.2);}
@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{margin:0 auto;max-width:1200px;padding:80px 0;position:relative;}
.section-title{font-family:var(--font-heading);font-size:clamp(32px, 5vw, 54px);font-weight:700;margin-bottom:32px;text-align:center;color:var(--primary-color);position:relative;transform:rotate(-1deg);}
.section-title::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:100px;height:3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0 5 Q 25 0, 50 5 T 100 5' stroke='%234ECDC4' stroke-width='3' fill='none'/%3E%3C/svg%3E") no-repeat center;background-size:contain;}
.section-description{font-size:20px;margin-bottom:32px;}
.footer-cta-section{color:white;padding:64px;text-align:center;position:relative;overflow:hidden;border-bottom:2px dashed var(--shadow-dark);margin-bottom:32px;}
.footer-cta-title{font-family:var(--font-heading);font-size:clamp(32px, 5vw, 48px);font-weight:700;margin-bottom:16px;transform:rotate(-1deg);color:white;}
.footer-cta-description{font-family:var(--font-accent);font-size:clamp(16px, 2.5vw, 20px);margin-bottom:32px;font-family:var(--font-primary);color:white;}
.footer-cta-button{border:none;border-radius:50px 20px 50px 20px;box-shadow:5px 5px 20px rgba(0, 0, 0, 0.2);background:var(--accent-color);color:var(--dark-bg);cursor:pointer;display:inline-block;font-family:var(--font-heading);font-size:22px;font-weight:600;padding:16px 48px;text-decoration:none;transform:rotate(-2deg);transition:all 0.3s;}
.footer-cta-button:hover{box-shadow:8px 8px 30px rgba(0, 0, 0, 0.3);transform:rotate(2deg) scale(1.1);}
.site-footer{background:var(--dark-bg);color:var(--text-light);margin-top:90px;padding:48px 5%;position:relative;text-align:center;}
.site-footer::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath d='M0 50 Q 300 0, 600 50 T 1200 50 L1200 100 L0 100 Z' fill='%232C3E50'/%3E%3C/svg%3E") no-repeat center;background-size:cover;content:'';height:100px;left:0;position:absolute;right:0;top:-50px;}
.footer-content{position:relative;z-index:1;}
.footer-links{display:flex;flex-wrap:wrap;gap:32px;justify-content:center;list-style:none;margin-bottom:24px;padding:0;}
.footer-links a{color:var(--accent-color);display:inline-block;font-family:var(--font-primary);font-size:20px;text-decoration:none;transform:rotate(-1deg);transition:color 0.3s ease;}
.footer-links a:hover{transform:rotate(1deg) scale(1.1);}
.footer-copyright{font-family:var(--font-primary);font-size:20px;margin-top:16px;opacity:0.8;}
.footer-disclaimer{font-size:18px;font-style:italic;line-height:1.2;margin:16px auto;max-width:800px;opacity:0.8;}
.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-primary);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:hover{background-color:var(--accent-tertiary);color:var(--text-primary);}
[data-theme="dark"] .theme-toggle:hover{background-color:var(--accent-tertiary);color:var(--bg-secondary);}
.theme-toggle::before{content:'☀️ Dark Mode';font-size:16px;transform:rotate(1deg) scale(1.1);}
[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));}
.benefits-grid{grid-template-columns:repeat(2, 1fr);}
} @media(max-width:768px){
html{font-size:15px;}
.container{padding:0 16px;}
nav{padding:12px 16px;}
.nav-menu{padding:48px 20px;width:100%;}
.section-card, .problem-card, .science-card, .benefit-card, .benefit-item, .solution-card, .timeline-item, .calculator-feature-item, .reference-item{transform:none !important;}
.hero-section{min-height:75vh;padding:64px 16px 24px;}
.hero-title{font-size:clamp(28px, 8vw, 44px);line-height:1.1;margin-bottom:12px;}
.hero-subtitle{font-size:clamp(16px, 3.5vw, 20px);line-height:1.3;margin-bottom:20px;}
.hero-buttons{flex-direction:column;gap:12px;margin-top:20px;}
.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:32px 16px;}
.section-title{font-size:clamp(24px, 6vw, 36px);line-height:1.15;margin-bottom:16px;}
.section-description{font-size:16px;line-height:1.5;margin-bottom:20px;}
.section-cards{gap:16px;grid-template-columns:1fr;margin-top:20px;}
.section-card, .problem-card, .science-card, .benefit-card, .solution-card{margin:12px 0;padding:16px;}
.section-card-number, .problem-card-number, .science-card-number, .benefit-card-number, .solution-card-number{font-size:40px;margin:8px 0;}
.section-card-title, .problem-card-title, .science-card-title, .benefit-card-title, .solution-card-title{font-size:18px;line-height:1.2;margin-bottom:8px;}
.section-card-label, .problem-card-label{font-size:15px;}
.science-content{gap:16px;grid-template-columns:1fr;}
.science-point{margin:12px 0;padding:12px 16px;}
.science-point-title{font-size:18px;line-height:1.2;margin-bottom:8px;}
.science-point-description{font-size:15px;line-height:1.5;}
.science-point-source{font-size:14px;padding-left:24px;}
.benefits-grid{gap:16px;grid-template-columns:1fr;margin-top:20px;}
.benefit-item{margin:12px 0;padding:16px;}
.benefit-icon{font-size:36px;margin-bottom:8px;}
.benefit-title{font-size:24px;line-height:1.15;margin-bottom:8px;}
.benefit-description{font-size:15px;line-height:1.5;}
.timeline-item{flex-direction:column !important;margin-bottom:24px;text-align:center !important;}
.timeline-icon{font-size:24px;height:56px;margin-bottom:12px;width:56px;}
.timeline-content{padding:0;}
.timeline-title{font-size:20px;line-height:1.2;margin-bottom:8px;}
.timeline-description{font-size:15px;line-height:1.5;}
.solution-section{margin:24px auto;padding:20px 16px;}
.calculator-preview{margin:20px auto;padding:16px;}
.calculator-preview h3{font-size:22px;line-height:1.2;margin-bottom:16px;}
.calculator-features{gap:12px;grid-template-columns:1fr;}
.calculator-feature-item{font-size:15px;padding:10px 12px;}
.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:15px;margin-top:12px;}
.references-section{padding:32px 0;}
.reference-item{font-size:14px;margin:10px 0;padding:12px 16px;padding-left:24px;}
.footer-cta-section{padding:24px 16px;}
.footer-cta-title{font-size:clamp(24px, 5vw, 32px);line-height:1.15;margin-bottom:12px;}
.footer-cta-description{font-size:16px;line-height:1.5;margin-bottom:16px;}
.footer-cta-button{font-size:16px;line-height:1.3;padding:12px 20px;white-space:normal;width:100%;}
.site-footer{padding:24px 16px;}
.footer-links{flex-direction:column;gap:12px;}
.footer-links a{font-size:16px;}
.footer-copyright{font-size:15px;margin-top:12px;}
.footer-disclaimer{font-size:14px;margin-top:12px;padding:12px;}
.scroll-to-top{bottom:16px;height:48px;right:16px;width:48px;}
.scroll-arrow{font-size:24px;}
.subscribe-trigger{bottom:16px;height:48px;left:16px;width:48px;}
.subscribe-icon{font-size:20px;}
.modal-content{margin:12px;max-width:100%;padding:20px;}
.modal-header h2{font-size:24px;}
.modal-icon{font-size:36px;}
.modal-subtitle{font-size:15px;}
.modal-feature{font-size:14px;}
.modal-form input{font-size:15px;padding:10px;}
.modal-submit{font-size:16px;padding:12px;}
.scribble, .scribble-1, .scribble-2, .doodle{display:none;}
} @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, 36px);margin-bottom:10px;}
.hero-subtitle{font-size:clamp(15px, 3.5vw, 18px);margin-bottom:16px;}
.hero-buttons .btn-primary, .hero-buttons .btn-secondary{font-size:15px;padding:12px 20px;}
.content-section{padding:24px 12px;}
.section-title{font-size:clamp(22px, 6vw, 32px);margin-bottom:12px;}
.section-description{font-size:15px;margin-bottom:16px;}
.section-card, .problem-card, .science-card, .benefit-card, .solution-card{margin:10px 0;padding:14px;}
.section-card-number, .problem-card-number, .science-card-number, .benefit-card-number, .solution-card-number{font-size:36px;margin:6px 0;}
.section-card-title, .problem-card-title, .science-card-title, .benefit-card-title, .solution-card-title{font-size:17px;margin-bottom:6px;}
.section-card-label{font-size:14px;}
.science-point{margin:10px 0;padding:10px 14px;}
.science-point-title{font-size:17px;margin-bottom:6px;}
.science-point-description{font-size:14px;}
.science-point-source{font-size:13px;padding-left:20px;}
.benefit-item{margin:10px 0;padding:14px;}
.benefit-icon{font-size:32px;margin-bottom:6px;}
.benefit-title{font-size:20px;margin-bottom:6px;}
.benefit-description{font-size:14px;}
.timeline-item{margin-bottom:20px;}
.timeline-icon{font-size:20px;height:48px;margin-bottom:10px;width:48px;}
.timeline-title{font-size:18px;margin-bottom:6px;}
.timeline-description{font-size:14px;}
.solution-section{margin:24px auto;padding:20px 12px;}
.calculator-preview{margin:16px auto;padding:14px;}
.calculator-preview h3{font-size:20px;margin-bottom:12px;}
.calculator-feature-item{font-size:14px;padding:8px 10px;}
.solution-btn-primary, .solution-btn-large{font-size:15px;padding:12px 20px;}
.solution-cta-subtext{font-size:14px;margin-top:10px;}
.reference-item{font-size:13px;margin:8px 0;padding:10px 14px;padding-left:20px;}
.footer-cta-section{padding:24px 12px;}
.footer-cta-title{font-size:clamp(20px, 5vw, 28px);margin-bottom:10px;}
.footer-cta-description{font-size:15px;margin-bottom:14px;}
.footer-cta-button{font-size:15px;padding:12px 20px;}
.site-footer{padding:20px 12px;}
.footer-links a{font-size:15px;}
.footer-copyright{font-size:14px;margin-top:10px;}
.footer-disclaimer{font-size:13px;margin-top:10px;padding:10px;}
.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{margin:10px;padding:16px;}
.modal-header h2{font-size:22px;}
.modal-icon{font-size:32px;}
.modal-subtitle{font-size:14px;}
.modal-feature{font-size:13px;}
.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, 32px);}
.section-title{font-size:clamp(20px, 6vw, 28px);}
.section-card-number, .problem-card-number, .science-card-number, .benefit-card-number, .solution-card-number{font-size:32px;}
.benefit-icon{font-size:28px;}
.benefit-title{font-size:18px;}
.timeline-icon{font-size:18px;height:44px;width:44px;}
} @media print {
.hamburger, .theme-toggle, .scroll-to-top, .subscribe-trigger, .scribble, .doodle, .modal-overlay{display:none !important;}
body{color:#000;font-size:12pt;background:white;}
.hero-section, .content-section {
padding: 20pt;
page-break-inside: avoid;
} a{color:#000;text-decoration:underline;}
.section-card, .science-card, .benefit-item, .solution-section{border:1pt solid #000;page-break-inside:avoid;box-shadow:none;}
} .loader{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-primary);display:flex;justify-content:center;align-items:center;z-index:9999;transition:opacity 0.5s ease;}
.loader p{font-family:'Kalam', cursive;font-size:24px;margin-top:16px;}
.loader.hidden{opacity:0;pointer-events:none;}
.loader-content{text-align:center;}
.loader-icon{font-size:64px;animation:bounce 1s ease-in-out infinite;}
.section-card{background:white;border-radius:15px 50px 30px 80px;box-shadow:5px 5px 15px rgba(0, 0, 0, 0.1);margin:32px 0;padding:32px;position:relative;transform:rotate(-1deg);transition:transform 0.3s ease;}
.section-card:hover{transform:rotate(1deg) scale(1.02);}
.section-card::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Ctext x='25' y='35' font-family='Arial' font-size='30' text-anchor='middle' transform='rotate(15 25 25)'%3E✓%3C/text%3E%3C/svg%3E") no-repeat center;content:'';height:50px;opacity:0.8;position:absolute;right:-10px;top:-10px;width:50px;}
.hero-section{align-items:center;animation:slideInUp 1s ease-out;display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding-top:100px;position:relative;text-align:center;z-index:2;}
.hero-section .scribble-underline{display:inline-block;position:relative;}
.hero-section .scribble-underline::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M0 10 Q 50 5, 100 10 T 200 10' stroke='%23FF6B6B' stroke-width='2' fill='none' opacity='0.5'/%3E%3C/svg%3E") repeat-x center;background-size:contain;bottom:-5px;content:'';height:15px;left:0;position:absolute;right:0;}
.hero-title{color:var(--primary-color);font-family:var(--font-heading);font-size:clamp(40px, 8vw, 80px);font-weight:700;margin-bottom:16px;text-shadow:3px 3px 0 var(--accent-color);transform:rotate(-2deg);}
.hero-subtitle{color:var(--secondary-color);font-family:var(--font-accent);font-size:clamp(32px, 3vw, 30px);margin-bottom:32px;transform:rotate(1deg);}
.hero-subtitle div{color:var(--text-primary);font-family:var(--font-heading);font-size:20px;line-height:1.8;margin:16px auto 48px auto;max-width:700px;transform:rotate(-0.5deg);transform:rotate(-1deg);}
.hero-buttons{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;margin-top:40px;}
.hero-buttons .btn-primary, .hero-buttons .btn-secondary{background:var(--primary-color);border:none;border-radius:50px 20px 50px 20px;box-shadow:5px 5px 0 var(--accent-color);color:white;cursor:pointer;display:inline-block;font-family:var(--font-heading);font-size:22px;font-weight:600;overflow:hidden;padding:16px 48px;position:relative;text-decoration:none;transform:rotate(-2deg);transition:all 0.3s ease;}
.hero-buttons .btn-primary:hover, .hero-buttons .btn-secondary:hover{box-shadow:7px 7px 0 var(--accent-color);transform:rotate(2deg) scale(1.1);}
.hero-buttons .btn-primary::before{content:'→';font-size:24px;position:absolute;right:-30px;top:50%;transform:translateY(-50%);transition:right 0.3s ease;}
.hero-buttons .btn-primary:hover::before{right:20px;}
.hero-buttons .btn-secondary{background:transparent;border:3px solid var(--primary-color);color:var(--text-primary);transform:rotate(1deg);}
.hero-buttons .btn-secondary:hover{background:var(--primary-color);color:white;transform:rotate(-1deg) scale(1.05);}
.problem-section .section-cards{margin-top:0;}
.problem-section .section-card{background:linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(78, 205, 196, 0.1));border:0;border-radius:20px 50px 20px 50px;padding:48px 32px 32px 32px;text-align:center;transform:rotate(-2deg);transition:all 0.3s ease;}
.problem-section .section-card:hover{background:linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(78, 205, 196, 0.2));transform:rotate(2deg) scale(1.05);}
.problem-section .section-card-title{animation:wobble 2s ease-in-out infinite;color:var(--primary-color);display:inline-block;display:block;font-family:var(--font-heading);font-size:48px;font-weight:700;text-shadow:2px 2px 0 var(--accent-color);}
.problem-section .section-description{background:var(--bg-primary);color:var(--text-primary);border-radius:15px 50px 30px 80px;box-shadow:5px 5px 15px rgba(0, 0, 0, 0.1);margin:32px 0;padding:32px;position:relative;transform:rotate(-1deg);transition:transform 0.3s ease;}
.problem-section .section-description h3{color:var(--primary-color);font-family:var(--font-accent);font-size:30px;}
.problem-section .section-description ul{font-size:20px;list-style-type:none;margin:0;padding:0;}
.science-points{margin:48px 0;}
.science-point{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius:30px 15px 30px 15px;margin:32px 0;overflow:hidden;padding:32px;position:relative;transform:rotate(var(--rotate, 0deg));}
.science-point:nth-child(2){background:linear-gradient(135deg, rgb(240, 147, 251) 0%, rgb(245, 87, 108) 100%);}
.science-point:nth-child(3){background:linear-gradient(135deg, rgb(79, 172, 254) 0%, rgb(0, 242, 254) 100%);}
.science-point:nth-child(4){background:linear-gradient(135deg, rgb(67, 233, 123) 0%, rgb(56, 249, 215) 100%);}
.science-point:last-of-type{margin-bottom:0;}
.science-point:nth-child(odd){--rotate:1deg;}
.science-point:nth-child(even){--rotate:-1deg;}
.science-point::after{content:'🔬';font-size:48px;opacity:0.3;position:absolute;right:20px;top:20px;transform:rotate(15deg);}
.science-point .citation{background:rgba(255, 255, 255, 0.2);border-radius:15px;cursor:help;display:inline-block;font-size:16px;margin-left:5px;padding:2px 8px;}
.science-point-title{color:white;font-family:var(--font-accent);font-size:clamp(21px, 4vw, 29px);font-weight:700;margin:0 0 16px 0;transform:rotate(-0.3deg);}
.science-description{color:white;font-size:clamp(16px, 2.5vw, 19px);line-height:1.6;transform:rotate(0.1deg);}
.science-point-source{font-size:19px;font-style:italic;margin-top:16px;padding-left:36px;position:relative;}
.science-point-source::before{content:'📊';font-size:21px;left:0;position:absolute;transform:rotate(-10deg);}
.science-point-source a{color:var(--text-primary);text-decoration:underline;}
.benefits-section{background:var(--bg-primary);margin:0 auto;max-width:1200px;position:relative;transform:rotate(-0.5deg);}
.benefits-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));}
.benefit-item{background:var(--accent-color);border-radius:20px;box-shadow:5px 5px 0 var(--primary-color);color:white;padding:32px;text-align:center;transform:rotate(var(--rotate, 0deg));transition:all 0.3s ease;}
.benefit-item:hover{box-shadow:10px 10px 0 var(--primary-color);}
.benefit-item:nth-child(1){--rotate:-1deg;color:var(--text-primary);}
.benefit-item:nth-child(2){--rotate:1.5deg;background:var(--secondary-color);}
.benefit-item:nth-child(3){--rotate:-0.8deg;background:var(--primary-color);}
.benefit-item:nth-child(4){--rotate:1.2deg;background:linear-gradient(135deg, rgb(102, 126, 234), rgb(118, 75, 162));}
.benefit-item:nth-child(5){--rotate:-1.3deg;}
.benefit-item:nth-child(6){--rotate:0.9deg;background:var(--secondary-color);}
.benefit-icon{display:block;font-size:48px;margin-bottom:16px;transform:rotate(-5deg);}
.benefit-title{display:block;font-family:var(--font-accent);font-size:24px;font-weight:700;line-height:1.2;margin-bottom:16px;transform:rotate(-2deg);}
.benefit-description{font-size:18px;margin:16px 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-radius:50%;box-shadow:5px 5px 15px var(--shadow-color);color:white;display:flex;flex-shrink:0;font-size:30px;height:80px;justify-content:center;transform:rotate(-5deg);width:80px;}
.timeline-content{flex:1;padding:0 32px;}
.timeline-title{color:var(--accent-primary);font-family:var(--font-heading);font-size:30px;margin-bottom:8px;transform:rotate(-1deg);}
.timeline-description{font-size:19px;line-height:1.4;}
.solution-section.content-section{text-align:center;}
.solution-section .section-content{background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));border-radius:40px 20px 40px 20px;color:white;padding:64px;position:relative;text-align:center;transform:rotate(-1deg);}
.solution-hero h3{font-family:var(--font-heading);font-size:clamp(32px, 5vw, 54px);margin-bottom:16px;}
.solution-btn-primary, .solution-btn-large{background:white;border-radius:50px 20px 50px 20px;box-shadow:5px 5px 0 var(--accent-color);color:var(--primary-color);display:inline-block;font-family:'Kalam', cursive;font-size:22px;font-weight:600;padding:16px 64px 16px 48px;position:relative;text-decoration:none;transform:rotate(-2deg);transition:all 0.3s ease;}
.solution-btn-primary:hover, .solution-btn-large:hover{box-shadow:7px 7px 0 var(--accent-color);transform:rotate(2deg) scale(1.1);}
.solution-btn-primary::after, .solution-btn-large::after{color:var(--primary-color);content:'→';font-size:24px;position:absolute;right:32px;top:50%;transform:translateY(-50%);transition:right 0.3s ease;}
.solution-cta-subtext{font-family:var(--font-accent);font-size:22px;margin-top:24px;text-align:center;}
.calculator-preview h3{color:white;font-family:var(--font-heading);font-size:42px;margin-bottom:16px;}
.calculator-features{background:white;border-radius:20px;box-shadow:0 10px 30px rgba(0, 0, 0, 0.2);color:var(--text-dark);margin:32px auto;max-width:500px;padding:32px;text-align:left;transform:rotate(2deg);}
.calculator-feature-item{font-size:18px;margin:8px 0;}
.references-section .section-content{background:rgba(78, 205, 196, 0.1);border-radius:30px;padding:48px;}
.references-section h3{font-family:var(--font-accent);font-size:clamp(21px, 4vw, 29px);margin:16px 0;transform:rotate(-0.3deg);}
.references-list{list-style:none;margin:48px auto 0 auto;padding:0;}
.reference-item{font-size:16px;line-height:1.6;margin:16px 0;padding-left:32px;position:relative;}
.reference-item::before{content:'📚';left:0;position:absolute;top:0;}
.reference-item a{border-bottom:2px dotted var(--primary-color);color:var(--primary-color);text-decoration:none;transition:all 0.3s ease;}
.reference-item a:hover{border-bottom-style:solid;color:var(--secondary-color);}
.reference-journal {
color: var(--text-primary);
font-size: 15px;
font-style: italic;
}