:root{--color-teal:#0AA3A8;--color-deep:#0B3C49;--color-ink:#111318;--color-bg:#0F1418;--radius-xl:16px}
html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}
body{margin:0;font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:#0F1418;color:#E8ECEF}
a{color:#CDEFF1;text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1200px,calc(100% - 32px));margin:0 auto}
.section{padding:56px 0}
.section-title{font-size:28px;margin:0 0 20px;font-weight:800}
.muted{opacity:.85}.small{font-size:.95rem}

header{position:sticky;top:0;z-index:50;background:#0F1418cc;backdrop-filter:blur(10px);border-bottom:1px solid #1b2329}
.nav{display:flex;align-items:center;gap:16px;height:72px}
.logo-img{height:48px;width:auto}
.nav-links{margin-left:auto;display:flex;gap:20px;align-items:center}
.btn,.btn-ghost{display:inline-block;padding:12px 18px;border-radius:14px;border:1px solid #2b3a41}
.btn{background:var(--color-teal);color:#fff;border-color:transparent}.btn:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;color:#E8ECEF}
.badge-soft{display:inline-block;padding:6px 10px;border-radius:999px;background:#0aa3a81a;border:1px solid #0aa3a84d;color:#aee9ec}
.hero{padding:56px 0 24px;background:radial-gradient(1200px 400px at 35% -10%, #0AA3A822, transparent 60%), radial-gradient(800px 350px at 90% -30%, #D96C1F22, transparent 60%)}
.hero h1{font-size:48px;line-height:1.15;margin:0 0 16px}
.hero .lead{opacity:.9;max-width:780px}
.actions{display:flex;gap:16px;margin:14px 0}
.hint{opacity:.7;margin-top:4px}

.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:1fr}
@media(min-width:980px){.grid-2{grid-template-columns:1.1fr .9fr}}
.grid-3{grid-template-columns:1fr}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}

.card{border:1px solid #27343b;border-radius:20px;padding:18px;background:#0f1418}
.card-depth{box-shadow:0 14px 36px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04)}
img{max-width:100%;height:auto;border-radius:12px}
.spec{margin:0;padding-left:18px}.spec li{margin:8px 0}

.panel-frame{position:relative;border-radius:20px;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.14);box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 14px 40px rgba(0,0,0,.45)}
.panel-frame::before{content:"";position:absolute;inset:8px;border-radius:16px;border:1px solid rgba(10,163,168,.22);pointer-events:none}
.panel-frame::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;box-shadow:0 0 0 2px rgba(10,163,168,.07) inset, 0 0 64px rgba(10,163,168,.08) inset}

.contacts-grid{display:grid;gap:18px}
@media(min-width:840px){.contacts-grid{grid-template-columns:1fr 1fr}}
.contacts-card{padding:16px;border:1px solid #27343b;border-radius:16px}

footer{padding:24px 0;border-top:1px solid #1b2329;opacity:.8}

@keyframes pulseGlow{0%{box-shadow:0 0 0 0 rgba(10,163,168,.45)}70%{box-shadow:0 0 0 12px rgba(10,163,168,0)}100%{box-shadow:0 0 0 0 rgba(10,163,168,0)}}
.highlight-contact{outline:2px solid rgba(10,163,168,.7);animation:pulseGlow 1.2s ease-out 3}
section{scroll-margin-top:84px}

/* atomizers visuals */
.atomizer-img{width:100%;height:auto;border-radius:12px;margin-bottom:10px;display:block;object-fit:contain;background:rgba(255,255,255,.02);padding:4px;border:1px solid #27343b}
.light .atomizer-img{background:#fff;border-color:#e7ecef}

.light body, body.light{background:#f7f9fa;color:#121416}
.light header{background:#ffffffc7;border-bottom-color:#e7ecef}
.light .card,.light .panel-frame{background:#fff;color:#121416;border-color:#e7ecef}
.light .btn-ghost{color:#121416}
.light .nav a{color:#121416}
.light .panel-frame{box-shadow:0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.7)}


/* powders visual */
.powders-img{width:100%;height:auto;display:block;border-radius:12px;object-fit:contain}


/* light theme contrast fixes */
.light .badge-soft{
  background:#E6FAF9;
  border-color:#93E2E5;
  color:#0B3C49;
  font-weight:600;
}
.light .hint{ color:#5c6a73; }


/* light contacts contrast */
.light .contacts-card a,
.light .contacts-card a:visited{
  color:#0B3C49;
  font-weight:600;
}
.light .contacts-card a:hover{ text-decoration: underline; }