:root{
  --obsidian:#131418; --panel:#1b1d22; --line:#2a2d34; --fg:#f3f2ef; --muted:#a3a4ac;
  --plate:#f6f5f1; --accent:#e8412e; --accent-strong:#c8341f; --accent-tint:rgba(232,65,46,.14);
  --inverse-bg:#f6f5f1; --inverse-fg:#131418;
  --r-sm:2px; --r-md:4px; --r-lg:10px; --r-pill:999px;
  --shadow-rest:0 1px 2px rgba(0,0,0,.30); --shadow-lift:0 18px 40px rgba(0,0,0,.45);
  --container:1180px; --section:72px;
  --font-display:"Sora",system-ui,sans-serif; --font-body:"Manrope",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--obsidian); color:var(--fg);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--accent); text-decoration:none; transition:color .2s ease}
a:hover{color:var(--accent-strong)}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; margin:0 0 .4em; line-height:1.08}
h1{font-size:clamp(2.4rem,6vw,4.2rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
h3{font-size:clamp(1.1rem,1.8vw,1.35rem)}
p{margin:0 0 1em}
section{scroll-margin-top:80px}
.container{max-width:var(--container); margin:0 auto; padding:0 24px; width:100%}
.section{padding:var(--section) 0}
.eyebrow{font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:inline-block}
.muted{color:var(--muted)}
.lede{font-size:clamp(1.05rem,2vw,1.25rem); color:var(--muted); line-height:1.6; max-width:64ch}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; z-index:200; border-radius:0 0 var(--r-md) 0}
.skip-link:focus{left:0}
/* buttons */
button,a.btn{font-family:var(--font-display); font-weight:600; cursor:pointer; border:0; transition:transform .15s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
a.btn,input.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:var(--r-md); font-family:var(--font-display); font-weight:600; line-height:1; cursor:pointer; border:1px solid transparent; transition:transform .15s ease,background .2s ease,box-shadow .2s ease}
a.btn{ text-decoration:none }
a.btn svg{width:18px;height:18px}
input.btn{font-size:15px}
a.btn-primary,input.btn-primary{background:var(--accent); color:#fff; box-shadow:var(--shadow-rest)}
a.btn-primary:hover,input.btn-primary:hover{background:var(--accent-strong); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-lift)}
a.btn:active,input.btn-primary:active{transform:scale(.97)}
a.btn-ghost{background:transparent; color:var(--fg); border-color:var(--line)}
a.btn-ghost:hover{color:#fff; border-color:var(--fg); background:rgba(255,255,255,.03)}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
/* chips */
ol{margin:0; padding:0}
ul.clean,ul.clean ul{list-style:none; margin:0; padding:0}
.chip{display:inline-block; padding:5px 12px; border-radius:var(--r-pill); background:var(--accent-tint); color:var(--accent); font-family:var(--font-display); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase}
/* hairline */
hr.rule{border:0; border-top:1px solid var(--line); margin:0}
/* nav toggle default visible only with js */
.nav-toggle{display:none}
:root.js .nav{display:none}
:root.js .nav.open{display:flex}
:root.js .nav-toggle{display:inline-flex}
/* reduced motion fallback: reveal shows by default unless js+motion allowed */
:root.js.reveal-on .reveal{opacity:0; transform:translateY(18px)}
.reveal.in{opacity:1 !important; transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  :root.js.reveal-on .reveal{opacity:1 !important; transform:none !important}
}
.laser-rule{height:2px; background:var(--accent); transform-origin:left; border:0}
html.js.reveal-on .laser-rule{transform:scaleX(0)}
@media (prefers-reduced-motion:reduce){ html.js.reveal-on .laser-rule{transform:scaleX(1)} }
/* end base; components appended below */
/* topline */
.topline{background:#0e0f12; border-bottom:1px solid var(--line); font-size:13px; color:var(--muted)}
.topline .container{display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:40px; padding-top:4px; padding-bottom:4px}
.topline a{color:var(--muted)}
.topline a:hover{color:#fff}
.topline .certs{color:var(--accent); font-family:var(--font-display); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap}
/* header */
.site-header{position:sticky; top:0; z-index:100; background:rgba(19,20,24,.82); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line)}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px}
.logo{display:inline-flex; align-items:baseline; gap:8px; color:#fff; font-family:var(--font-display); font-weight:800; font-size:1.4rem; letter-spacing:-.02em}
.logo .tag{font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.nav{display:flex; align-items:center; gap:4px}
.nav a{color:var(--fg); font-family:var(--font-display); font-weight:500; font-size:14px; padding:10px 12px; border-radius:var(--r-md); position:relative}
.nav a:hover{color:#fff; background:rgba(255,255,255,.04)}
.nav a[aria-current=page]{color:var(--accent)}
.nav a.btn{margin-left:8px; color:#fff}
/* mobile toggle */
.nav-toggle{align-items:center; justify-content:center; background:transparent; border:1px solid var(--line); color:var(--fg); width:42px; height:42px; border-radius:var(--r-md); display:none}
:root.js .nav-toggle{display:inline-flex}
/* breadcrumbs */
.breadcrumbs{padding:18px 0 0; font-size:13px; color:var(--muted)}
.breadcrumbs ol{list-style:none; display:flex; gap:8px; padding:0; margin:0}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--accent)}
/* hero */
.hero{padding:36px 0 48px}
.hero .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
.hero h1{margin-bottom:.3em}
.hero .lede{margin-top:14px}
.hero .btn-row{margin-top:28px}
.hero .trustline{margin-top:24px; display:flex; gap:10px; flex-wrap:wrap}
.hero-visual{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; box-shadow:var(--shadow-lift)}
.hero-visual .plate{background:var(--plate); border-radius:var(--r-md); padding:10px; display:grid; place-items:center}
.hero-visual .plate img{width:100%; height:auto; filter:saturate(1.02)}
.hero-visual .specrow{display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; margin-top:18px; border-top:1px solid var(--line); padding-top:18px}
.hero-visual .specrow .s{text-align:center}
.hero-visual .specrow .s b{display:block; font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:#fff; letter-spacing:-.02em}
.hero-visual .specrow .s span{font-size:11px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; font-family:var(--font-display)}
/* section head */
.section-head{max-width:70ch; margin-bottom:36px}
.section-head .eyebrow{margin-bottom:14px}
.section-head.center{margin-inline:auto; text-align:center}
/* featured spotlight */
.featured{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--panel)}
.featured .plate{background:var(--plate); padding:12px; display:grid; place-items:center; border-right:1px solid var(--line)}
.featured .plate img{max-height:420px; width:auto; object-fit:contain}
.featured .body{padding:40px}
.featured .chip{margin-bottom:18px}
.featured h2{margin-bottom:.4em}
.featured .specs{display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; margin:24px 0}
.featured .specs .s b{display:block; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:#fff}
.featured .specs .s span{font-size:11px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; font-family:var(--font-display)}
/* grids */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
/* vitrine card */
.vitrine-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--panel); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; min-width:0}
.vitrine-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:#3a3d44}
.vitrine-card .plate{background:var(--plate); padding:10px; display:grid; place-items:center; aspect-ratio:1/1}
.vitrine-card .plate img{width:100%; height:100%; object-fit:contain; filter:saturate(1.02)}
.vitrine-card .body{padding:18px 18px 22px; display:flex; flex-direction:column; gap:8px}
.vitrine-card .cat{font-family:var(--font-display); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.vitrine-card h3{margin:0; font-size:1.2rem}
.vitrine-card .desc{font-size:14px; color:var(--muted); margin:0; flex:1}
.vitrine-card .more{font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:6px}
.vitrine-card .chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
/* capability / stats */
.stat-band{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--panel)}
.stat-band .stat{padding:30px 24px; border-right:1px solid var(--line); text-align:left}
.stat-band .stat:last-child{border-right:0}
.stat-band .stat b{display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,3.4vw,3rem); color:#fff; letter-spacing:-.02em; line-height:1}
.stat-band .stat b sup{font-size:.5em; color:var(--accent); font-weight:700; vertical-align:super}
.stat-band .stat span{display:block; margin-top:10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-family:var(--font-display)}
.panel-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.panel-grid .col{padding:28px; border-right:1px solid var(--line)}
.panel-grid .col:last-child{border-right:0; background:#16171c}
.panel-grid h3{margin:.2em 0 .4em}
.panel-grid p{color:var(--muted); margin-bottom:14px}
/* treatment index */
.tindex{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--panel)}
.tindex a{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--fg); transition:background .15s ease, color .15s ease}
.tindex a:hover{background:rgba(232,65,46,.06); color:#fff}
.tindex a span.name{font-family:var(--font-display); font-weight:600; font-size:15px}
.tindex a svg{color:var(--accent); flex-shrink:0}
/* inverse CTA band (light ending) */
.cta-band{background:var(--inverse-bg); color:var(--inverse-fg); border-radius:var(--r-lg); padding:44px}
.cta-band h2{color:var(--inverse-fg)}
.cta-band .lede{color:#4a4a48; max-width:60ch}
.cta-band .btn-row{margin-top:28px}
a.btn-primary.inv{background:var(--inverse-fg); color:#fff}
a.btn-primary.inv:hover{background:#000; color:#fff}
a.btn-ghost.inv{color:var(--inverse-fg); border-color:rgba(19,20,24,.25)}
a.btn-ghost.inv:hover{background:rgba(19,20,24,.05); border-color:var(--inverse-fg)}
/* footer */
.site-footer{border-top:1px solid var(--line); margin-top:var(--section); padding:44px 0 32px; background:#0e0f12}
.site-footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px}
.site-footer .logo{color:#fff}
.site-footer .brand-blurb{color:var(--muted); font-size:14px; margin:.6em 0 .4em}
.site-footer h4{font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin:0 0 14px}
.site-footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.site-footer a{color:var(--muted); font-size:14px}
.site-footer a:hover{color:var(--accent)}
.site-footer .legal{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:12px}
/* contact form */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:start}
.contact-info .row{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line)}
.contact-info .row .ic{width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--r-md); color:var(--accent); background:var(--panel)}
.contact-info .row b{display:block; font-family:var(--font-display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.contact-info .row a,.contact-info .row span.val{color:var(--fg); font-size:15px}
.form-card{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); padding:32px}
.form-card h3{margin-top:0}
.field{margin-bottom:16px}
.field label{display:block; font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
.field label .req{color:var(--accent)}
.field input,.field textarea,.field select{width:100%; background:#111218; border:1px solid var(--line); border-radius:var(--r-md); color:var(--fg); font-family:var(--font-body); font-size:15px; padding:11px 13px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint)}
.field textarea{min-height:110px; resize:vertical}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-note{font-size:13px; color:var(--muted); margin-top:14px}
#form-status{margin-top:14px; font-family:var(--font-display); font-size:14px; font-weight:600}
#form-status.ok{color:#7be88a}
#form-status.err{color:var(--accent)}
/* spec table */
.spec-table{width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.spec-table th,.spec-table td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:14px}
.spec-table th{background:#16171c; color:var(--muted); font-family:var(--font-display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600}
.spec-table td b{color:#fff; font-family:var(--font-display); font-weight:600}
.spec-table tr:last-child td{border-bottom:0}
/* product detail */
.pd-hero{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.pd-hero .plate{background:var(--plate); border:1px solid var(--line); border-radius:var(--r-lg); padding:40px; display:grid; place-items:center; min-height:420px}
.pd-hero .plate img{max-height:400px; width:auto; object-fit:contain}
.pd-hero h1{margin:0 0 .3em}
.pd-body{max-width:820px}
.pd-body p{margin-bottom:1em}
.back-link{display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-family:var(--font-display); font-size:13px; font-weight:600; margin-bottom:18px}
.back-link:hover{color:var(--accent)}
/* prose */
.prose{max-width:820px}
.prose h2{margin-top:1.4em}
.prose p,.prose li{color:#d9d8d3; line-height:1.7}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.5em}
/* responsive */
@media (max-width:980px){
  .hero .grid{grid-template-columns:1fr; gap:32px}
  .featured{grid-template-columns:1fr}
  .featured .plate{border-right:0; border-bottom:1px solid var(--line)}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .stat-band{grid-template-columns:1fr 1fr}
  .stat-band .stat:nth-child(2){border-right:0}
  .stat-band .stat:nth-child(1),.stat-band .stat:nth-child(2){border-bottom:1px solid var(--line)}
  .panel-grid{grid-template-columns:1fr}
  .panel-grid .col{border-right:0; border-bottom:1px solid var(--line)}
  .tindex{grid-template-columns:1fr 1fr}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .pd-hero{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}
@media (max-width:680px){
  :root{--section:64px}
  .nav-toggle{display:inline-flex}
  .nav{position:fixed; inset:108px 0 auto 0; flex-direction:column; align-items:stretch; gap:2px; background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 24px; box-shadow:var(--shadow-lift)}
  .nav a{padding:14px 8px; border-radius:0; border-bottom:1px solid var(--line)}
  .nav a.btn{margin:8px 0 0; border-radius:var(--r-md); text-align:center}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr}
  .stat-band{grid-template-columns:1fr; border-radius:var(--r-md)}
  .stat-band .stat{border-right:0 !important; border-bottom:1px solid var(--line)}
  .tindex{grid-template-columns:1fr}
  .cta-band{padding:36px 24px}
  .site-footer .cols{grid-template-columns:1fr}
  .topline .container{flex-direction:column; gap:4px}
  .topline .certs{display:none}
  .featured .specs{grid-template-columns:1fr}
  .hero-visual .specrow{grid-template-columns:1fr; gap:14px}
  .hero-visual .specrow .s{text-align:left}
  .form-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }