/* GRENTAL — css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=Inter:wght@400;500&display=swap');
@theme{--color-bg-primary:#0E0E12;--color-bg-secondary:#18181E;--color-ink-primary:#EDEDF0;--color-ink-muted:#7A8698;--color-accent:#8A96A8;--font-display:'Space Grotesk',sans-serif;--font-body:'Inter',Arial,sans-serif}
:root{--bg:#0E0E12;--bg2:#18181E;--ink:#EDEDF0;--muted:#AEB5C1;--accent:#8A96A8;--line:rgba(255,255,255,.1)}*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6}img{width:100%;height:clamp(180px,32vw,280px);max-height:60vh;object-fit:cover;display:block}a{color:var(--ink);text-decoration:none}a:hover{color:#fff}
.container{width:min(1120px,calc(100% - 2rem));margin:0 auto}
.site-header{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.nav{min-height:76px;display:flex;align-items:center;gap:2rem}
.wordmark{font:700 1.5rem var(--font-display);letter-spacing:.04em}
.nav nav{display:flex;gap:1.25rem;margin-left:auto}
.nav nav a,.phone{font-size:.85rem;color:var(--muted)}
.hero{padding:4rem 0;background:var(--bg)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero-media img:first-child{height:clamp(320px,48vw,520px);max-height:80vh;border-radius:22px;box-shadow:0 12px 50px #000}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.6rem}
.thumbs img{height:100px;border-radius:10px;cursor:pointer}
.eyebrow{color:var(--accent);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;font-weight:500}
.hero h1,h2,h3{font-family:var(--font-display);line-height:1.15}
.hero h1{font-size:clamp(2.2rem,5vw,4.5rem);margin:1rem 0}
.lead{font-size:1.1rem;color:var(--muted)}
.rating{display:inline-flex;gap:.8rem;background:var(--bg2);padding:.45rem .8rem;border-radius:999px;margin:1rem 0;color:var(--accent)}
.rating span,.micro{color:var(--muted);font-size:.8rem}
.check-list{padding:0;list-style:none}
.check-list li{display:flex;gap:.65rem;margin:.8rem 0;color:var(--ink)}
.check-list li:before{content:'✓';color:var(--accent);font-weight:bold}
.button{display:inline-block;background:var(--accent);color:#101116;padding:1rem 1.5rem;border-radius:999px;font-weight:700;margin-top:1rem}
.button.light{background:var(--ink);color:var(--bg)}section{padding:5rem 0}
.metrics,.process,.cta{background:var(--bg2)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stats div{padding:1.2rem;border-left:2px solid var(--accent)}
.stats strong{display:block;font:700 2.5rem var(--font-display)}
.stats span{color:var(--muted);font-size:.85rem}
.section-head{max-width:700px;margin-bottom:2rem}
.section-head h2{font-size:clamp(2rem,4vw,3.4rem);margin:.6rem 0}
.section-head p,.card p,.split p{color:var(--muted)}
.grid-3,.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card,blockquote,details{background:var(--bg2);border:1px solid var(--line);padding:1.5rem;border-radius:16px}
.card h3,blockquote strong{font-size:1.2rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.split img{height:430px;border-radius:20px}
.text-link{color:var(--accent);font-weight:600}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:0;list-style:none}
.timeline li{border-top:2px solid var(--accent);padding-top:1rem}
.timeline b,.timeline span{display:block}
.timeline span{color:var(--muted);margin-top:.6rem}
.quotes blockquote{margin:0}
.quotes blockquote div{color:var(--accent)}blockquote p{color:var(--muted)}cite{font-style:normal;color:var(--accent);font-size:.8rem}
.faq-preview{background:var(--bg2)}
.faq-preview details{margin:.7rem 0}
.faq-preview summary{cursor:pointer;font-weight:600}
.faq-preview details p{color:var(--muted)}
.cta-inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.cta img{height:320px;border-radius:18px}
.cta h2,.cta p,.cta .eyebrow{color:#fff}
.site-footer{border-top:1px solid var(--line);padding:3rem 0 1rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.footer-grid h3{font-size:1rem}
.footer-grid p,.footer-grid a,.footer-bottom{color:var(--muted);font-size:.85rem}
.footer-grid>div>a:not(.wordmark){display:block;margin:.35rem 0}
.footer-bottom{border-top:1px solid var(--line);margin-top:2rem;padding-top:1rem}
.cookie-banner{display:none;position:fixed!important;bottom:0;left:0;right:0;z-index:9999;background:#fff;color:#2c3e50;padding:1rem 1.25rem;border-top:1px solid rgba(0,0,0,.15);box-shadow:0 -4px 12px rgba(0,0,0,.08);flex-wrap:wrap;align-items:center;gap:.75rem;font-size:.9rem}
.cookie-banner.is-visible{display:flex}
.cookie-banner p{margin:0 auto 0 0}
.cookie-banner a{color:#2c3e50;text-decoration:underline}
.cookie-banner button{padding:.5rem 1rem;border-radius:4px;cursor:pointer;border:1px solid #2c3e50;background:#2c3e50;color:#fff;font:inherit}
.cookie-banner button[data-cookie-reject]{background:transparent;color:#2c3e50}
@media(max-width:768px){
.nav{flex-wrap:wrap;padding:1rem 0;justify-content:space-between;gap:1rem}
.nav nav{display:flex;gap:.85rem;flex-wrap:wrap}
.nav nav a,.phone{font-size:.8rem}
.hero-grid,.split,.cta-inner{grid-template-columns:1fr;gap:2rem}
.hero{padding-top:2rem}
.hero-media img:first-child{height:360px}
.stats,.grid-3,.review-grid,.timeline,.footer-grid{grid-template-columns:1fr 1fr}
.stats strong{font-size:2rem}
}
@media(max-width:520px){
.nav{flex-direction:column;align-items:flex-start}
.nav nav{margin-left:0}
.stats,.grid-3,.review-grid,.timeline,.footer-grid{grid-template-columns:1fr}
.container{width:min(100% - 1.5rem,1120px)}
section{padding:3rem 0}
}
.hero-media img#main-product-img{object-fit:contain;background:#141419;padding:.5rem}
table{width:100%;border-collapse:collapse}
th,td{padding:.8rem;border:1px solid var(--line);text-align:left;color:var(--ink)}
th{font-weight:600;background:rgba(255,255,255,.03)}
td{color:var(--muted)}
.article{padding:5rem 0}
.article h1{font:700 clamp(2.3rem,5vw,4rem) var(--font-display)}
.article h2{margin-top:3rem}
.article p,.article li{color:var(--muted);max-width:800px}
.article ul{padding-left:1.3rem}
.callout{background:var(--bg2);border-left:3px solid var(--accent);padding:1.5rem;margin:2rem 0;border-radius:0 12px 12px 0}
.callout h2{color:#fff}
.callout p{color:var(--muted)}
.not-found{text-align:center;padding:6rem 0}
.not-found h1{font-size:6rem;margin:0;color:var(--accent)}
.contact-form{display:flex;flex-direction:column;gap:1.2rem;max-width:640px;margin-top:1.5rem}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-group label{font-size:.85rem;font-weight:600;color:var(--ink);letter-spacing:.02em}
.form-group input,.form-group textarea{width:100%;background:#101116;border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem;color:var(--ink);font-family:var(--font-body);font-size:.95rem;transition:border-color .2s,box-shadow .2s}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(138,150,168,.25)}
.form-group input::placeholder,.form-group textarea::placeholder{color:#555E6D}
.contact-form .button{cursor:pointer;border:none;align-self:flex-start}
.form-status{padding:1rem 1.25rem;border-radius:10px;font-size:.9rem;line-height:1.4;margin-top:.5rem}
.form-status.success{background:rgba(46,160,67,.15);border:1px solid #2ea043;color:#7ee787}
.form-status.error{background:rgba(248,81,73,.15);border:1px solid #f85149;color:#ff7b72}