@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');
:root{--ink:#25221e;--muted:#6d675f;--cream:#fbf7ef;--paper:#fffdf9;--orange:#e8753d;--orange2:#f4a261;--green:#58735a;--line:#e8dfd2;--danger:#a64b3d}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Manrope,system-ui,sans-serif;line-height:1.65}.header{height:78px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;background:rgba(255,253,249,.92);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}.logo{font-weight:800;font-size:22px;color:var(--ink);text-decoration:none}.logo span{margin-right:8px}.header nav{display:flex;gap:7px;flex-wrap:wrap}.header nav a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:700;padding:9px 12px;border-radius:10px}.header nav a:hover,.header nav a.active{background:#f3eadf;color:var(--ink)}
main{max-width:1180px;margin:auto}.hero{min-height:570px;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;padding:70px 6%}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:800;color:var(--orange)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(44px,6vw,76px);line-height:1.05;letter-spacing:-2.5px;margin:15px 0 24px}h1 em{font-family:"Playfair Display",serif;font-weight:600;color:var(--orange)}h2{font-size:34px;line-height:1.2;letter-spacing:-1px}h3{font-size:18px;margin-bottom:8px}.hero-copy>p,.page-head>p{max-width:650px;color:var(--muted);font-size:17px}.actions{display:flex;gap:12px;margin-top:30px}.button{display:inline-block;background:var(--orange);color:white;text-decoration:none;font-weight:800;padding:13px 19px;border-radius:12px;box-shadow:0 8px 24px #e8753d33}.button.secondary{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}.button.light{background:#fff;color:var(--ink);box-shadow:none}.cat-card{height:420px;border-radius:38px;background:linear-gradient(145deg,#f6c58c,#e97743);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 25px 60px #b75b2b25}.sun{position:absolute;width:230px;height:230px;background:#ffe3b4;border-radius:50%;top:-55px;right:-30px}.cat-face{font-size:175px;filter:drop-shadow(0 15px 10px #5a2b1922);z-index:1;transform:translateY(-25px)}.bowl{position:absolute;bottom:74px;font-size:72px}.cat-caption{position:absolute;bottom:27px;background:#fffdf9d9;padding:7px 15px;border-radius:30px;font-size:12px;font-weight:800}
.section{padding:72px 6%}.section-title{margin-bottom:30px}.cards{display:grid;gap:18px}.cards.four{grid-template-columns:repeat(4,1fr)}.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:25px;box-shadow:0 8px 30px #6b52320a}.card p,.compare-card li,.check-grid p,.danger-grid p{color:var(--muted);font-size:14px}.icon{font-size:31px;margin-bottom:14px}.highlight{margin:20px 6% 70px;padding:44px;border-radius:24px;background:var(--green);color:#fff;display:flex;gap:35px;align-items:center;justify-content:space-between}.highlight .eyebrow{color:#d8ebcf}.highlight p{max-width:720px;color:#e7eee4}.compact{padding-top:0}.tip{border:1px solid var(--line);background:#f2eadf;border-radius:17px;padding:18px 22px;display:flex;gap:15px;align-items:center;font-size:14px}.tip span{font-size:25px}
.page-head{padding:80px 6% 45px}.page-head h1{font-size:clamp(42px,5vw,64px);max-width:850px}.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px}.compare-card{padding:34px;border-radius:24px;background:var(--paper);border:1px solid var(--line)}.compare-card.wet{background:#fff7ed}.compare-card.dry{background:#f4f2e9}.big-icon{font-size:55px}.compare-card h2{margin:10px 0 18px}.compare-card ul{padding-left:20px}.compare-card li{margin:10px 0}.tag{display:inline-block;margin-top:10px;padding:5px 10px;border-radius:99px;background:#e8f0e4;color:var(--green);font-size:11px;font-weight:800}.check-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.check-grid>div{border-top:2px solid var(--orange);padding-top:17px}.check-grid b{font-size:12px;color:var(--orange)}.note{margin:0 6% 70px;padding:22px 25px;border-radius:15px;background:#f1e8dc;font-size:14px}.note.red{background:#fae8e4;color:#6e3029}.danger-head .eyebrow{color:var(--danger)}.danger-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.danger-grid article{background:var(--paper);border:1px solid var(--line);border-radius:17px;padding:22px}.danger-grid span{font-size:29px}.timeline{display:grid;gap:18px}.timeline article{display:grid;grid-template-columns:90px 1fr;gap:25px;padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:20px}.age-num{font-size:40px;font-weight:800;color:var(--orange)}.age-label{text-transform:uppercase;letter-spacing:1px;font-size:11px;font-weight:800;color:var(--orange)}.timeline h2{margin:3px 0 8px}.timeline p{color:var(--muted);max-width:800px}.faq{padding:15px 6% 80px}.faq details{background:var(--paper);border:1px solid var(--line);border-radius:14px;margin:12px 0;padding:0 22px}.faq summary{cursor:pointer;font-weight:800;padding:20px 0}.faq details p{color:var(--muted);font-size:14px;padding:0 0 20px;margin:0;max-width:850px}
footer{padding:35px 6%;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}footer strong{color:var(--ink);font-size:15px}
@media(max-width:900px){.header{height:auto;min-height:72px;align-items:flex-start;padding:15px 5%;gap:10px}.header nav{justify-content:flex-end}.hero{grid-template-columns:1fr;padding-top:45px}.cat-card{height:330px}.cards.four,.check-grid,.danger-grid{grid-template-columns:1fr 1fr}.compare{grid-template-columns:1fr}.highlight{margin-left:5%;margin-right:5%}}
@media(max-width:600px){.header{display:block}.header nav{margin-top:10px;justify-content:flex-start}.hero{padding:35px 5%;gap:30px}.hero h1{font-size:45px}.section,.page-head{padding-left:5%;padding-right:5%}.cards.four,.check-grid,.danger-grid{grid-template-columns:1fr}.highlight{margin-left:5%;margin-right:5%;padding:30px;display:block}.highlight .button{margin-top:15px}.timeline article{grid-template-columns:55px 1fr}.page-head h1{font-size:43px}footer{display:block}footer span{display:block;margin-top:8px}}
