:root{
  --bg:#0a0d0e; --bg-soft:#12171a; --panel:#141a1d;
  --ink:#f3f6f6; --sub:#9aa7a8; --line:#262f32;
  --accent:#2ee0c3; --accent-soft:#0e2e29; --accent-ink:#04211c;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
html,body{height:100%;}
body{background:var(--bg); color:var(--ink); font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; line-height:1.55;}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px;}
h1,h2,h3{font-family:-apple-system,Arial,sans-serif; letter-spacing:-0.02em; font-weight:800; line-height:1.1;}
.page{display:none;}
.page.active{display:block;}

/* NAV */
header{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line); padding:env(safe-area-inset-top,0px) 0 0;}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; max-width:1080px; margin:0 auto;}
.logo{font-size:20px; font-weight:900; letter-spacing:-0.01em; cursor:pointer;}
.logo span{color:var(--accent);}
nav.links{display:none; gap:22px; font-size:14px; font-weight:600;}
nav.links a{text-decoration:none; color:var(--sub); cursor:pointer;}
nav.links a:hover,nav.links a.on{color:var(--ink);}
.nav-cta{background:var(--ink); color:var(--bg); font-size:13px; font-weight:700; padding:9px 16px; border-radius:6px; text-decoration:none; cursor:pointer;}
.burger{display:block; background:none; border:1px solid var(--line); border-radius:6px; padding:8px 10px; font-size:16px;}
@media(min-width:820px){ nav.links{display:flex;} .burger{display:none;} }
.mobile-menu{display:none; flex-direction:column; gap:2px; border-top:1px solid var(--line); padding:10px 20px 16px;}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:10px 4px; text-decoration:none; color:var(--ink); font-weight:600; font-size:15px; border-bottom:1px solid var(--line); cursor:pointer;}

/* HERO */
.hero{padding:52px 0 40px; background:linear-gradient(180deg,var(--accent-soft),var(--bg) 70%);}
.hero .eyebrow{color:var(--accent); font-weight:800; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px;}
.hero h1{font-size:38px; margin-bottom:16px; max-width:14ch;}
.hero p{color:var(--sub); font-size:16px; max-width:44ch; margin-bottom:26px;}
.btn{display:inline-block; background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:15px; padding:14px 26px; border-radius:8px; text-decoration:none; border:none; cursor:pointer;}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
.btn.dark{background:var(--ink); color:var(--bg);}
.hero-art{margin-top:32px; height:180px; border-radius:14px; background:linear-gradient(135deg,var(--accent),#0a5f52); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px; letter-spacing:0.05em; text-transform:uppercase; opacity:0.92;}

/* SECTIONS */
section{padding:46px 0; border-bottom:1px solid var(--line);}
.eyebrow-sm{color:var(--accent); font-weight:800; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px;}
section h2{font-size:24px; margin-bottom:6px;}
section .lede{color:var(--sub); font-size:14px; margin-bottom:26px; max-width:52ch;}

/* FEATURED PRODUCT CARD */
.feature-card{display:flex; flex-direction:column; gap:18px; background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:22px; overflow:hidden;}
.feature-art{height:220px; padding:14px; border-radius:10px; background:radial-gradient(circle at 30% 30%,var(--panel),var(--bg-soft)); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
.product-photo{width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.product-photo img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.dial{width:110px; height:110px; border-radius:50%; border:3px solid var(--accent); display:flex; flex-direction:column; align-items:center; justify-content:center;}
.dial .n{font-size:30px; font-weight:900; color:var(--accent);}
.dial .l{font-size:9px; color:var(--sub); letter-spacing:0.05em;}
.feature-card h3{font-size:19px; margin-bottom:6px;}
.feature-card p{color:var(--sub); font-size:14px; margin-bottom:14px;}
.price-line{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.price-line .p{font-size:26px; font-weight:900;}
.btn-row{display:flex; gap:10px; flex-wrap:wrap;}
@media(min-width:720px){ .feature-card{flex-direction:row; align-items:center;} .feature-art{width:40%; height:260px; padding:16px; flex-shrink:0;} }

/* CATEGORY GRID */
.grid3{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:720px){ .grid3{grid-template-columns:repeat(3,1fr);} }
.cat-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px; cursor:pointer;}
.cat-card .ic{width:40px; height:40px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.cat-card .ic svg{width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:2;}
.cat-card h3{font-size:16px; margin-bottom:4px;}
.cat-card p{font-size:13px; color:var(--sub);}

/* WHY */
.why-grid{display:grid; grid-template-columns:1fr; gap:22px;}
@media(min-width:720px){ .why-grid{grid-template-columns:repeat(4,1fr);} }
.why-item .ic{width:38px; height:38px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.why-item .ic svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2;}
.why-item h3{font-size:15px; margin-bottom:4px;}
.why-item p{font-size:13px; color:var(--sub);}

/* NEW ARRIVALS / PLACEHOLDERS */
.ghost-card{background:var(--bg-soft); border:1px dashed var(--line); border-radius:12px; padding:26px 16px; text-align:center; color:var(--sub); font-size:13px; font-weight:600;}
.ghost-card .tag{display:inline-block; background:var(--line); color:var(--sub); font-size:11px; font-weight:700; padding:4px 10px; border-radius:12px; margin-bottom:10px;}

/* NEWSLETTER */
.newsletter{background:linear-gradient(160deg,var(--accent-soft),var(--panel)); border:1px solid var(--line); color:var(--ink); border-radius:14px; padding:34px 24px; text-align:center;}
.newsletter h2{color:var(--ink); font-size:22px; margin-bottom:8px;}
.newsletter p{color:var(--sub); font-size:14px; margin-bottom:20px;}
.news-form{display:flex; gap:8px; max-width:380px; margin:0 auto; flex-wrap:wrap;}
.news-form input{flex:1; min-width:180px; padding:12px 14px; border-radius:7px; border:none; font-size:14px;}
.news-form button{padding:12px 18px; border-radius:7px; border:none; background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:14px; cursor:pointer;}
.news-msg{margin-top:12px; font-size:13px; color:var(--accent); display:none;}

/* SHOP PAGE */
.shop-grid{display:grid; grid-template-columns:1fr; gap:16px;}
@media(min-width:640px){ .shop-grid{grid-template-columns:repeat(2,1fr);} }
.product-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column;}
.product-card .art{height:190px; padding:14px; background:radial-gradient(circle at 30% 30%,var(--bg-soft),var(--panel)); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line);}
.product-card .body{padding:16px;}
.product-card h3{font-size:15px; margin-bottom:4px;}
.product-card .p{font-size:16px; font-weight:800; margin:6px 0 12px;}
.product-card.disabled{opacity:0.6;}
.soon-badge{display:inline-block; background:var(--line); color:var(--sub); font-size:11px; font-weight:700; padding:3px 9px; border-radius:10px; margin-bottom:10px;}

/* PRODUCT PAGE */
.crumbs{font-size:13px; color:var(--sub); margin-bottom:18px;}
.crumbs a{cursor:pointer; text-decoration:underline;}
.pp-hero{display:flex; flex-direction:column; gap:24px;}
@media(min-width:820px){ .pp-hero{flex-direction:row;} }
.pp-art{flex:1; height:320px; padding:20px; border-radius:12px; background:radial-gradient(circle at 30% 30%,var(--bg-soft),var(--panel)); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
.pp-info{flex:1;}
.pp-info h1{font-size:28px; margin-bottom:10px;}
.pp-info .p{font-size:30px; font-weight:900; margin-bottom:16px;}
.pp-info .lede{margin-bottom:20px;}
.spec-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px;}
.spec{background:var(--bg-soft); border:1px solid var(--line); border-radius:8px; padding:14px;}
.spec .k{font-size:11px; color:var(--sub); margin-bottom:3px;}
.spec .v{font-size:14px; font-weight:700;}
.att-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.att{background:var(--bg-soft); border:1px solid var(--line); border-radius:18px; padding:6px 12px; font-size:12.5px; color:var(--sub);}
.info-cols{display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:720px){ .info-cols{grid-template-columns:1fr 1fr;} }
.info-col h3{font-size:15px; margin-bottom:8px;}
.info-col p,.info-col li{font-size:13.5px; color:var(--sub);}
.info-col ul{padding-left:18px; margin-top:4px;}

/* FORMS */
.form-field{margin-bottom:14px;}
.form-field label{display:block; font-size:13px; font-weight:700; margin-bottom:6px;}
.form-field input,.form-field textarea{width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--line); background:var(--bg-soft); color:var(--ink); font-size:14px; font-family:inherit;}
.form-field textarea{min-height:110px; resize:vertical;}
.contact-note{background:var(--accent-soft); border:1px solid var(--line); border-radius:10px; padding:14px 16px; font-size:13.5px; color:var(--sub); margin-bottom:22px;}

/* FOOTER */
footer{padding:40px 0 60px; background:var(--bg-soft);}
.foot-grid{display:flex; flex-direction:column; gap:24px;}
@media(min-width:720px){ .foot-grid{flex-direction:row; justify-content:space-between;} }
.foot-links{display:flex; flex-direction:column; gap:8px; font-size:13.5px;}
.foot-links a{color:var(--sub); text-decoration:none; cursor:pointer;}
.foot-links a:hover{color:var(--ink);}
.foot-logo{font-size:18px; font-weight:900; margin-bottom:8px;}
.foot-bottom{margin-top:30px; font-size:12px; color:var(--sub); border-top:1px solid var(--line); padding-top:18px;}

/* STATIC PAGE */
.static-page h1{font-size:26px; margin-bottom:18px;}
.static-page p{color:var(--sub); font-size:14px; margin-bottom:14px; max-width:60ch;}
.static-page li{color:var(--sub); font-size:14px; margin-bottom:6px;}
.placeholder-note{background:var(--accent-soft); border:1px solid var(--line); border-radius:10px; padding:14px 16px; font-size:13px; color:var(--sub); margin-top:20px;}