@import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Caveat:wght@400;700&family=Architects+Daughter&display=swap");
:root{--bg-primary:#fff9f0;--bg-secondary:#2c1810;--text-primary:#2c1810;--text-secondary:#fff9f0;--accent-primary:#ff6b35;--accent-secondary:#004e89;--accent-tertiary:#f77f00;--border-color:#2c1810;--font-body:'Patrick Hand', cursive;--font-heading:'Caveat', cursive;--font-accent:'Architects Daughter', cursive;--shadow-color:rgba(0, 0, 0, 0.1);}
[data-theme="dark"]{--bg-primary:#1a1a2e;--bg-secondary:#eaeaea;--text-primary:#eaeaea;--text-secondary:#1a1a2e;--accent-primary:#ff6b9d;--accent-secondary:#00d9ff;--accent-tertiary:#ffd93d;--border-color:#eaeaea;--shadow-color:rgba(255, 255, 255, 0.1);}
@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 32px;position:relative;}
.section-title{color:var(--text-primary);display:inline-block;font-size:clamp(32px, 6vw, 56px);line-height:1.25;margin-bottom:24px;position:relative;}
.section-title::after{background:linear-gradient(to right, transparent, var(--accent-primary), transparent);bottom:-5px;content:"";height:3px;position:absolute;right:0;transform:scaleX(1.1) rotate(-1deg);width:50%;}
.section-description{font-size:20px;margin-bottom:32px;}
.footer-cta-section{background:var(--accent-primary);border:4px solid var(--border-color);border-radius:20px;box-shadow:8px 8px 0 var(--shadow-color);color:var(--bg-primary);margin:0 auto 64px;max-width:1200px;padding:64px 32px;text-align:center;transform:rotate(-1deg);}
.footer-cta-content{margin:0 auto;max-width:800px;}
.footer-cta-title{color:var(--bg-primary);font-size:clamp(32px, 5vw, 48px);margin-bottom:24px;transform:rotate(-1deg);}
.footer-cta-description{color:var(--bg-primary);font-size:20px;margin-bottom:32px;}
.footer-cta-button{background:var(--bg-primary);border:4px solid var(--border-color);box-shadow:6px 6px 0 var(--border-color);color:var(--accent-primary);cursor:pointer;display:inline-block;font-size:20px;padding:20px 40px;text-decoration:none;transform:rotate(-1deg);transition:all 0.3s;}
.footer-cta-button:hover{box-shadow:8px 8px 0px var(--shadow-color);transform:rotate(1deg) scale(1.05);}
.nav-menu{background:var(--bg-primary);border:3px solid var(--border-color);box-shadow:-5px 5px 0 var(--shadow-color);height:auto;left:-300px;padding:0 32px;position:fixed;top:80px;transition:left 0.3s;width:280px;z-index:999;}
.nav-menu.active{left:20px;}
.nav-menu a{border-bottom:2px dashed var(--border-color);border-radius:0;color:var(--text-primary);display:block;margin-bottom:0;padding:16px 0;text-decoration:none;transform:none;transition:transform 0.2s;}
.nav-menu a:last-child{border-bottom:0;}
.nav-menu a:hover{background:transparent;color:var(--accent-primary);transform:translateX(10px);}
.site-footer{background:var(--text-primary);border-top:5px solid var(--accent-primary);color:var(--bg-primary);padding:64px 0;text-align:center;}
[data-theme="dark"] .site-footer{background:var(--text-secondary);color:var(--bg-secondary);}
.footer-links{display:flex;flex-wrap:wrap;gap:32px;justify-content:center;margin-bottom:32px;}
.footer-links a{border-bottom:2px dashed var(--accent-primary);color:var(--accent-primary);text-decoration:none;}
.footer-links a:hover{border-bottom-color:transparent;color:var(--accent-tertiary);}
.footer-copyright{color:var(--text-secondary);font-size:20px;transform:rotate(-0.5deg);}
.footer-disclaimer{border-top:2px dashed grey;margin-top:32px;padding:16px;}
.theme-toggle{background:none;border:3px solid var(--border-color);border-radius:20px;color:var(--text-primary);cursor:pointer;font-size:19px;height:48px;padding:8px 15px;position:fixed;right:32px;top:32px;transform:rotate(2deg);transition:all 0.3s;width:112px;z-index:1000;}
.theme-toggle:hover{background:var(--accent-primary);color:var(--bg-primary);transform:rotate(-2deg) scale(1.05);}
.theme-toggle::before{content:'☀️ / 🌙';font-size:20px;height:40px;left:50%;line-height:2;position:absolute;text-align:center;top:50%;transform:translateX(-50%) translateY(-50%);width:96px;}
.theme-toggle .slider{display:none;}
h1, h2, h3{font-family:var(--font-heading);font-weight:700;}
h1{font-size:clamp(40px, 8vw, 80px);line-height:1.1;margin-bottom:16px;}
h2{font-size:clamp(32px, 6vw, 56px);margin-bottom:24px;position:relative;}
h3{font-size:clamp(24px, 4vw, 32px);margin-bottom:16px;}
@media(min-width:769px) and (max-width:1024px){
.container{max-width:960px;padding:0 20px;}
.content-section{padding:48px 20px;}
.problem-section, .solution-section, .references-section, .footer-cta-section{max-width:960px;}
.problem-cards, .science-cards, .benefits-cards, .solution-cards{grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));}
.hero-title{font-size:clamp(40px, 7vw, 64px);}
.section-title{font-size:clamp(28px, 5vw, 48px);}
} @media(max-width:768px){
html{font-size:14px;}
.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 24px;}
.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-bottom:20px;}
.hero-buttons{flex-direction:column;gap:12px;}
.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:14px;}
.section-description{font-size:16px;line-height:1.5;margin-bottom:20px;}
.problem-section{margin:24px auto;padding:24px 18px;}
.problem-cards{gap:18px;grid-template-columns:1fr;margin-top:20px;}
.problem-card{padding:18px;}
.problem-card-title{font-size:18px;line-height:1.2;margin-bottom:8px;}
.problem-card-number{font-size:42px;margin:10px 0;}
.problem-card-label{font-size:15px;}
.science-section{margin:60px auto 0 auto;padding:32px 0;}
.science-cards{gap:18px;grid-template-columns:1fr;}
.science-card{padding:18px 14px;}
.science-card-title{font-size:18px;line-height:1.2;}
.science-point{padding:10px 14px;}
.science-point-title{font-size:18px;line-height:1.2;margin-bottom:8px;}
.science-point-description{font-size:15px;line-height:1.5;}
.benefits-section{margin:0 auto 60px auto;padding:32px 0;}
.benefits-cards{gap:18px;grid-template-columns:1fr;}
.benefit-card{padding:18px 14px;}
.benefit-card-title{font-size:18px;line-height:1.2;}
.benefit-item{padding:10px 14px;}
.benefit-icon{font-size:36px;margin-bottom:8px;}
.benefit-title{font-size:28px;line-height:1.15;margin-bottom:8px;}
.benefit-description{font-size:15px;line-height:1.5;}
.benefits-timeline{padding:24px 0;}
.timeline-item{flex-direction:column !important;margin-bottom:24px;text-align:center !important;}
.timeline-icon{font-size:22px;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;}
.solution-cards{gap:18px;grid-template-columns:1fr;}
.solution-card{padding:18px 14px;}
.solution-card-title{font-size:18px;line-height:1.2;}
.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:12px;}
.calculator-preview{margin:20px auto;padding:18px;}
.calculator-preview h3{font-size:24px;line-height:1.2;margin-bottom:16px;}
.calculator-feature-item{font-size:15px;padding:10px 14px;}
.references-section{padding:32px 0;}
.references-section h3{font-size:clamp(18px, 4vw, 22px);}
.reference-item{font-size:14px;margin:10px 0;padding-left:18px;}
.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:90%;}
.site-footer{padding:32px 0;}
.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;}
.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:18px;}
.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:10px;}
.modal-submit{font-size:16px;padding:12px;}
.w-50, .w-66, .w-75, .w-90{max-width:100%;}
.scribble, .scribble-1, .scribble-2{display:none;}
} @media(max-width:480px){
html{font-size:13px;}
.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, 3vw, 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;}
.problem-section{margin:20px auto;padding:20px 14px;}
.problem-cards{gap:16px;margin-top:16px;}
.problem-card{padding:16px;}
.problem-card-title{font-size:17px;}
.problem-card-number{font-size:36px;margin:8px 0;}
.problem-card-label{font-size:14px;}
.science-section{margin:48px auto 0 auto;padding:24px 0;}
.science-cards{gap:16px;}
.science-card{padding:16px 12px;}
.science-card-title{font-size:17px;}
.science-point{padding:8px 12px;}
.science-point-title{font-size:17px;}
.science-point-description{font-size:14px;}
.benefits-section{margin:0 auto 48px auto;padding:24px 0;}
.benefits-cards{gap:16px;}
.benefit-card{padding:16px 12px;}
.benefit-card-title{font-size:17px;}
.benefit-item{padding:8px 12px;}
.benefit-icon{font-size:32px;}
.benefit-title{font-size:24px;}
.benefit-description{font-size:14px;}
.benefits-timeline{padding:20px 0;}
.timeline-item{margin-bottom:20px;}
.timeline-icon{font-size:18px;height:50px;margin-bottom:10px;width:50px;}
.timeline-title{font-size:18px;}
.timeline-description{font-size:14px;}
.solution-section{margin:28px auto 48px auto;padding:20px 14px;}
.solution-cards{gap:16px;}
.solution-card{padding:16px 12px;}
.solution-card-title{font-size:17px;}
.solution-btn-primary, .solution-btn-large{font-size:15px;margin:16px 0;padding:12px 20px;}
.solution-cta-subtext{font-size:15px;margin-top:10px;}
.calculator-preview{margin:16px auto;padding:16px;}
.calculator-preview h3{font-size:20px;margin-bottom:14px;}
.calculator-feature-item{font-size:14px;padding:8px 12px;}
.references-section{padding:24px 0;}
.references-section h3{font-size:clamp(16px, 4vw, 20px);}
.reference-item{font-size:13px;margin:8px 0;padding-left:16px;}
.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:24px 0;}
.footer-links a{font-size:15px;}
.footer-copyright{font-size:14px;margin-top: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:12px;}
.modal-form input{font-size:14px;padding:9px;}
.modal-submit{font-size:15px;padding:11px;}
} @media(max-width:360px){
html{font-size:12px;}
.hero-title{font-size:clamp(22px, 8vw, 32px);}
.section-title{font-size:clamp(20px, 6vw, 28px);}
.problem-card-number, .science-card-number, .benefit-card-number, .solution-card-number{font-size:32px;}
.benefit-icon{font-size:28px;}
.benefit-title{font-size:20px;}
.timeline-icon{font-size:16px;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{display:none;}
.section-card{background:var(--bg-primary);border:3px solid var(--border-color);border-radius:0;box-shadow:5px 5px 0 var(--shadow-color);}
.hero-section{align-items:center;display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding:96px 32px 64px;position:relative;}
.hero-content{max-width:900px;position:relative;text-align:center;z-index:2;}
.hero-title{color:var(--accent-primary);text-shadow:4px 4px 0 var(--shadow-color);transform:rotate(-1deg);}
.hero-subtitle{font-family:var(--font-accent);font-size:clamp(19px, 3vw, 29px);margin-bottom:32px;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{background:var(--accent-primary);border:4px solid var(--border-color);box-shadow:6px 6px 0 var(--border-color);color:var(--bg-primary);display:inline-block;font-size:24px;margin:16px;padding:19px 48px;text-decoration:none;transform:rotate(-2deg);transition:all 0.3s;}
.hero-buttons .btn-primary:hover, .hero-buttons .btn-secondary:hover{box-shadow:8px 8px 0 var(--border-color);transform:rotate(2deg) translateY(-5px);}
.hero-buttons .btn-secondary{background:var(--accent-secondary);}
.problem-section{background:rgba(255, 107, 53, 0.1);border:3px dashed var(--accent-primary);border-radius:20px;margin:48px auto;max-width:1200px;padding:64px 48px;transform:rotate(-1deg);}
[data-theme="dark"] .problem-section{background:rgba(255, 107, 157, 0.1);}
.problem-content{margin:0 auto;max-width:1200px;text-align:center;}
.science-section{background:rgba(0, 78, 137, 0.05);margin:192px auto 0 auto;padding:96px 0;position:relative;transform:rotate(1deg);}
[data-theme="dark"] .science-section{background:rgba(0, 217, 255, 0.1);}
.science-section.content-section{left:-2%;max-width:104%;width:104%;}
.science-points{margin-top:48px;}
.science-point{background:var(--bg-primary);border-left:5px solid var(--accent-primary);font-size:19px;margin:16px 0;padding:8px 24px;position:relative;transform:rotate(calc(-1deg + var(--rotate, 0deg)));}
.science-point:nth-child(odd){--rotate:1deg;}
.science-point:nth-child(even){--rotate:-1.5deg;}
.science-point-title{color:var(--accent-tertiary);font-family:var(--font-heading);font-size:24px;margin-bottom:24px;}
.science-point-description{font-size:clamp(16px, 2.5vw, 19px);line-height:1.6;margin:16px 0;text-align:left;transform:rotate(0.1deg);}
.science-point-source{font-size:14px;font-style:italic;margin-top:16px;}
.science-point-source a{color:var(--accent-primary);text-decoration:underline;}
.benefits-section{background:rgba(247, 127, 0, 0.05);border-top:3px solid var(--bg-primary);margin:0 auto 192px auto;padding:96px 0;transform:rotate(1deg);}
[data-theme="dark"] .benefits-section{background:rgba(0, 217, 255, 0.1);}
.benefits-section.content-section{left:-2%;max-width:104%;width:104%;}
.benefits-grid{margin-top:48px;}
.benefit-item{background:var(--bg-primary);border-left:5px solid var(--accent-secondary);font-size:19px;margin:16px 0;padding:8px 24px;position:relative;transform:rotate(calc(-1deg + var(--rotate, 0deg)));}
.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{transform:rotate(0deg) scale(1.05);}
.benefit-icon{display:block;font-size:48px;margin-bottom:8px;transform:rotate(-5deg);}
.benefit-title{color:var(--accent-tertiary);font-family:var(--font-heading);font-size:40px;line-height:1.2;margin-bottom:16px;}
.benefit-description{color:var(--text-primary);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:var(--bg-primary);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-tertiary);font-family:var(--font-heading);font-size:30px;margin-bottom:8px;transform:rotate(-1deg);}
.timeline-description{color:var(--text-primary);font-size:19px;line-height:1.4;}
.solution-section{background:rgba(255, 107, 53, 0.1);border:3px dashed var(--accent-primary);border-radius:20px;margin:64px auto 192px auto;max-width:1200px;padding:64px 48px;transform:rotate(-1deg);}
[data-theme="dark"] .solution-section{background:rgba(255, 107, 157, 0.1);}
.solution-section .section-description{color:var(--text-primary);}
.solution-btn-primary, .solution-btn-large{background:var(--accent-primary);border:4px solid var(--border-color);box-shadow:6px 6px 0 var(--border-color);color:var(--bg-primary);display:block;font-size:24px;margin:32px auto;max-width:540px;padding:19px 48px;text-align:center;text-decoration:none;transform:rotate(-2deg);transition:all 0.3s;}
.solution-btn-primary:hover, .solution-btn-large:hover{box-shadow:8px 8px 30px var(--shadow-color);transform:rotate(2deg) scale(1.1);}
.solution-cta-subtext{font-family:var(--font-primary);font-size:22px;margin-top:24px;text-align:center;}
.calculator-preview{margin:32px auto;max-width:800px;text-align:center;}
.calculator-preview h3{font-size:36px;margin-bottom:24px;}
.calculator-features{margin-top:32px;}
.calculator-feature-item{background:var(--bg-primary);border-left:5px solid var(--accent-primary);font-size:19px;margin:16px 0;padding:8px 24px;position:relative;transform:rotate(calc(-1deg + var(--rotate, 0deg)));}
.calculator-feature-item:nth-child(odd){--rotate:1deg;}
.calculator-feature-item:nth-child(even){--rotate:-1deg;}
.references-section{background:rgba(247, 127, 0, 0.1);border-radius:15px;border-top:3px dotted var(--accent-tertiary);margin:0 auto;max-width:1200px;padding:64px 0;}
[data-theme="dark"] .references-section{background:rgba(255, 217, 61, 0.1);}
.references-section.content-section{max-width:100%;width:100%;}
.references-section h3{font-family:var(--font-heading);font-size:clamp(21px, 4vw, 29px);margin:16px 0;transform:rotate(-0.3deg);}
.references-list{font-size:15px;line-height:1.6;list-style:none;margin:48px auto 0 auto;}
.reference-item{margin:16px 0;padding-left:24px;position:relative;}
.reference-item::before{color:var(--accent-tertiary);content:"★";left:0;position:absolute;}
.reference-item a{color:var(--accent-secondary);word-break:break-all;}
.reference-journal {
color: var(--text-primary);
font-size: 14px;
font-style: italic;
}