/*
Theme Name: WellnessBox Pro
Theme URI: https://example.com/
Author: WellnessBox
Author URI: https://example.com/
Description: Apple-style landing page theme for WellnessBox electro therapy device.
Version: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wellnessbox-pro
Tags: one-column, custom-logo, custom-menu, featured-images, block-styles
*/

:root{--bg:#fff;--text:#0b0b0c;--muted:rgba(11,11,12,.65);--hair:rgba(11,11,12,.10);--soft:rgba(11,11,12,.06);--shadow:0 12px 30px rgba(0,0,0,.08);--shadow2:0 8px 18px rgba(0,0,0,.08);--r:22px;--r2:28px;--max:1100px;}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 22px}
.topbar{border-bottom:1px solid var(--hair);background:#fff;font-size:12px;color:var(--muted)}
.topbar .container{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 22px}
.topbar .right{display:none} @media(min-width:768px){.topbar .right{display:block}}
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--hair);background:rgba(255,255,255,.75);backdrop-filter:blur(14px)}
.nav .container{display:flex;justify-content:space-between;align-items:center;padding:14px 22px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em}
.logo{width:34px;height:34px;border-radius:12px;border:1px solid var(--hair);background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.04);overflow:hidden;display:grid;place-items:center}
.logo img{width:100%;height:100%;object-fit:contain;padding:4px}
.navlinks{display:none;gap:22px;font-size:14px;color:var(--muted)}
.navlinks a:hover{color:var(--text)}
@media(min-width:900px){.navlinks{display:flex}}
.navlinks li{list-style:none} .navlinks ul{margin:0;padding:0;display:flex;gap:22px}
.navcta{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:700;border:1px solid var(--hair);background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.04);cursor:pointer;user-select:none;transition:transform .15s ease,background .15s ease,opacity .15s ease}
.btn:hover{background:rgba(0,0,0,.03)} .btn:active{transform:translateY(1px)}
.btn.primary{background:#000;border-color:#000;color:#fff} .btn.primary:hover{opacity:.92;background:#000}
.menuBtn{display:inline-flex} @media(min-width:900px){.menuBtn{display:none}}
.mobileMenu{display:none;border-top:1px solid var(--hair);background:#fff}
.mobileMenu.open{display:block}
.mobileMenu a{display:block;padding:14px 22px;border-bottom:1px solid var(--hair);color:rgba(0,0,0,.75);font-size:14px}
.mobileMenu a:hover{background:rgba(0,0,0,.03)}
.hero{position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-220px;background:radial-gradient(circle at 15% 10%, rgba(16,185,129,.22), transparent 45%),radial-gradient(circle at 90% 30%, rgba(6,182,212,.20), transparent 50%);pointer-events:none}
.hero .container{position:relative;padding:78px 22px 58px;display:grid;gap:34px}
@media(min-width:900px){.hero .container{grid-template-columns:1.05fr .95fr;align-items:center;padding:92px 22px 70px}}
h1{margin:10px 0 0;font-size:44px;line-height:1.05;letter-spacing:-.04em}
@media(min-width:900px){h1{font-size:64px}}
.muted{color:var(--muted)}
.sub{margin-top:16px;font-size:16px;line-height:1.6;color:var(--muted);max-width:58ch}
@media(min-width:900px){.sub{font-size:18px}}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.55);color:rgba(255,255,255,.88);font-size:12px;backdrop-filter:blur(10px)}
.pill svg{width:14px;height:14px}
.hero-actions{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.stats{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px}
.stat{border:1px solid var(--hair);border-radius:18px;padding:14px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.stat .v{font-size:20px;font-weight:800;letter-spacing:-.02em}
.stat .l{margin-top:4px;font-size:13px;color:var(--muted)}
.productcard{border:1px solid var(--hair);border-radius:var(--r2);background:#fff;box-shadow:var(--shadow2);padding:18px}
.productimg{aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--soft);display:grid;place-items:center}
.productimg img{width:100%;height:100%;object-fit:contain;padding:14px}
.pc-footer{margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.pc-title{margin:0;font-weight:800;letter-spacing:-.01em;font-size:14px}
.pc-sub{margin-top:2px;font-size:12px;color:var(--muted)}
.price{border:1px solid var(--hair);background:var(--soft);border-radius:999px;padding:6px 10px;font-size:12px;color:rgba(0,0,0,.72);white-space:nowrap}
section{padding:64px 0}
.section-title{font-size:34px;letter-spacing:-.03em;margin:0}
.section-desc{margin-top:10px;color:var(--muted);line-height:1.6;max-width:72ch}
.grid3{margin-top:18px;display:grid;gap:14px}
@media(min-width:900px){.grid3{grid-template-columns:1fr 1fr 1fr}}
.card{border:1px solid var(--hair);border-radius:var(--r2);background:#fff;padding:20px;box-shadow:0 1px 1px rgba(0,0,0,.04);transition:box-shadow .2s ease,transform .2s ease}
.card:hover{box-shadow:var(--shadow2);transform:translateY(-1px)}
.cardhead{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.01em}
.iconbox{width:42px;height:42px;border-radius:16px;border:1px solid var(--hair);background:var(--soft);display:grid;place-items:center;flex:0 0 auto}
.iconbox svg{width:18px;height:18px}
.split{display:grid;gap:18px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:26px}}
.checklist{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px;color:rgba(0,0,0,.72)}
.checklist li{display:flex;gap:10px;align-items:flex-start}
.check{width:20px;height:20px;border-radius:999px;background:#000;color:#fff;display:grid;place-items:center;flex:0 0 auto;margin-top:2px}
.check svg{width:13px;height:13px}
.panel{border-radius:var(--r2);border:1px solid var(--hair);background:var(--soft);padding:18px}
.panel-inner{border-radius:22px;border:1px solid var(--hair);background:#fff;padding:18px;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.listbox{display:grid;gap:10px;margin-top:12px}
.row{border-radius:14px;border:1px solid var(--hair);background:#fff;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:rgba(0,0,0,.78)}
.row small{color:var(--muted)}
.cta-wrap{border-radius:36px;border:1px solid var(--hair);background:#000;padding:6px;box-shadow:var(--shadow)}
.cta{border-radius:32px;background:#fff;padding:26px;display:grid;gap:18px;align-items:center}
@media(min-width:900px){.cta{grid-template-columns:1.1fr .9fr;padding:32px}}
.faq{margin-top:16px;display:grid;gap:10px}
details{border:1px solid var(--hair);border-radius:20px;background:#fff;padding:14px 16px;box-shadow:0 1px 1px rgba(0,0,0,.04)}
summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:14px}
summary::-webkit-details-marker{display:none}
details p{margin:10px 0 0;color:var(--muted);line-height:1.6;font-size:14px}
footer{border-top:1px solid var(--hair);padding:44px 0}
.footergrid{display:grid;gap:20px}
@media(min-width:900px){.footergrid{grid-template-columns:1.2fr .9fr .9fr}}
.foothead{font-weight:900}
.footlinks a{display:block;margin-top:8px;color:var(--muted);font-size:14px}
.footlinks a:hover{color:var(--text)}
.disclaimer{margin-top:14px;border-radius:18px;border:1px solid var(--hair);background:var(--soft);padding:12px;color:var(--muted);font-size:12px;line-height:1.5}
.tiny{font-size:12px;color:rgba(0,0,0,.5);margin-top:12px}