:root{--ink:#14123a;--paper:#f7f5ff;--yel:#ffd23f;--bg:#2b2fe8;--f:'Bricolage Grotesque',system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:400 1.0625rem/1.6 'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--paper)}
h1,h2,h3,.logo{font-family:var(--f);line-height:1.05;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:800}h2,.h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:800;font-family:var(--f)}
a{color:inherit}.wrap{max-width:1100px;margin:auto;padding:0 20px}.narrow{max-width:720px}
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:rgba(247,245,255,.92);backdrop-filter:blur(8px)}
.logo{font-size:1.5rem;font-weight:800;text-decoration:none}.logo b{color:#d81b6a}
nav{display:flex;gap:18px;align-items:center}nav a{text-decoration:none;font-weight:500}.burger{display:none}
.btn{display:inline-block;padding:14px 26px;border-radius:99px;background:var(--yel);color:var(--ink);font-weight:700;text-decoration:none;border:0;cursor:pointer;font:700 1rem 'DM Sans'}
.btn.dark{background:var(--ink);color:#fff}.btn.sm{padding:8px 18px}.btn:hover{transform:translateY(-2px)}
:focus-visible{outline:3px solid var(--yel);outline-offset:3px}
.hero{background:var(--bg);color:#fff;padding:56px 0 80px;transition:background .5s;overflow:hidden}
.hero[data-t=toner]{--bg:#c4175f}.hero[data-t=soft]{--bg:#00725f}
.hgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.hero p{font-size:1.2rem;max-width:34ch;margin:0 0 1.4em}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.tabs button{padding:9px 18px;border-radius:99px;border:2px solid #fff;background:transparent;color:#fff;font:500 1rem 'DM Sans';cursor:pointer}
.tabs button[aria-selected=true]{background:#fff;color:var(--ink);font-weight:700}
.art{position:relative;aspect-ratio:1;border-radius:40% 60% 55% 45%/50% 40% 60% 50%;background:rgba(255,255,255,.14)}
.art img{position:absolute;inset:6%;width:88%;height:88%;object-fit:cover;border-radius:inherit}
.blob{position:absolute;border-radius:50%;background:var(--yel)}.b1{width:22%;aspect-ratio:1;top:-4%;right:8%}.b2{width:12%;aspect-ratio:1;bottom:6%;left:-3%;background:#fff}
.sec{padding:84px 0}.alt{background:#ece9ff}.lead{max-width:52ch;opacity:.85}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ticks{list-style:none;padding:0;margin:0 0 28px}.ticks li{padding:10px 0 10px 34px;position:relative;border-bottom:1px solid #d6d1f5}
.ticks li:before{content:"✓";position:absolute;left:0;top:9px;width:24px;height:24px;border-radius:50%;background:#00a58a;color:#fff;font-size:.8rem;display:grid;place-items:center}
.phone{justify-self:center;width:230px;height:430px;border:10px solid var(--ink);border-radius:36px;background:#fff;padding:18px}
.screen{display:grid;gap:12px}.screen i{display:block;height:70px;border-radius:12px;background:linear-gradient(120deg,#2b2fe8,#d81b6a)}.screen i:nth-child(2){background:#ffd23f}.screen i:nth-child(3){background:#00a58a}
.screen u{text-decoration:none;text-align:center;background:#25d366;color:#fff;padding:12px;border-radius:99px;font-weight:700;font-size:.9rem}
.cards{display:grid;gap:14px}.cards article{padding:22px;border-radius:20px;background:#fff;border-left:8px solid #2b2fe8}.cards article:nth-child(2){border-color:#d81b6a}.cards article:nth-child(3){border-color:#00a58a}
.cards h3{font-size:1.25rem;margin:0}.cards p{margin:.3em 0 0}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:26px 0}
.prod{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:18px;background:#fff;border:2px solid transparent}.prod span{font-size:.85rem;color:#c4175f}.prod strong{font-family:var(--f);font-size:1.3rem}
.add{margin-top:8px;padding:9px;border-radius:99px;border:2px solid var(--ink);background:none;font:700 .95rem 'DM Sans';cursor:pointer}
.add[aria-pressed=true]{background:#00a58a;border-color:#00a58a;color:#fff}.prod:has(.add[aria-pressed=true]){border-color:#00a58a}
.bar{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.bar input{flex:1;min-width:240px;padding:14px 20px;border-radius:99px;border:2px solid var(--ink);font:1rem 'DM Sans'}
.chips{display:flex;gap:8px}.chips button{padding:10px 18px;border-radius:99px;border:2px solid var(--ink);background:none;font:500 1rem 'DM Sans';cursor:pointer}.chips button[aria-pressed=true]{background:var(--ink);color:#fff}
details{border-bottom:1px solid #d6d1f5;padding:16px 0}summary{cursor:pointer;font-weight:700}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:40px 20px;background:var(--ink);color:#fff}
.wafab{position:fixed;right:18px;bottom:18px;z-index:30;padding:14px 20px;border-radius:99px;background:#1a7f43;color:#fff;font-weight:700;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}
#quote{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;display:flex;gap:16px;align-items:center;padding:10px 12px 10px 22px;border-radius:99px;background:var(--ink);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.3)}#quote[hidden]{display:none}
@media(max-width:800px){.hgrid,.split{grid-template-columns:1fr}.art{max-width:300px}.burger{display:block;background:none;border:2px solid var(--ink);border-radius:99px;padding:6px 14px;font:inherit}
nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:20px;background:var(--paper)}nav.open{display:flex}.wafab{bottom:78px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
