:root{
  --bg:#000; --bg2:#0d0b07; --panel:#14110b; --panel2:#1b170f; --line:rgba(214,168,62,.28);
  --gold:#E2B857; --gold2:#C9962F; --goldhi:#F6D77B; --text:#F3EFE6; --muted:#B4A88C; --dim:#8a806b;
  --warn:#ffb74d; --bad:#ff7a6b; --ok:#8fd18f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Montserrat,-apple-system,Arial,sans-serif;color:var(--text);
  background:radial-gradient(ellipse at 80% -10%,#2a2110 0%,var(--bg2) 35%,var(--bg) 70%) fixed;line-height:1.55}
a{color:var(--gold)}
img{max-width:100%}
.gold{background:linear-gradient(180deg,var(--goldhi),var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* nav */
.nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:12px 5vw;
  background:rgba(0,0,0,.82);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand img{height:44px;display:block;mix-blend-mode:screen}
.nav nav{display:flex;gap:22px;align-items:center}
.nav nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:14px}
.nav nav a:hover{color:var(--gold)}
.btn-sm{border:1px solid var(--gold);padding:8px 14px;border-radius:999px;color:var(--gold)!important}

/* layout */
.section{max-width:1180px;margin:0 auto;padding:80px 5vw}
.kick{color:var(--gold);letter-spacing:5px;text-transform:uppercase;font-weight:600;font-size:13px;margin-bottom:12px}
h1{font-size:clamp(36px,6vw,68px);line-height:1.05;margin:0 0 20px;font-weight:800}
h2{font-size:clamp(28px,3.6vw,42px);margin:0 0 28px;font-weight:800}
h3{margin:0 0 14px}
.lead{font-size:19px;color:#E8E3D8;max-width:720px}
.small-lead{font-size:16px}
.small,.hint{color:var(--muted);font-size:14px}
.tiny{color:var(--dim);font-size:12px;margin-top:12px}

/* hero */
.hero{max-width:1180px;margin:0 auto;padding:110px 5vw 70px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0}
.trust{list-style:none;padding:0;margin:30px 0 0;display:flex;gap:30px;flex-wrap:wrap;color:var(--muted)}
.trust b{color:var(--gold);font-size:22px;margin-right:6px}

.btn{display:inline-block;background:linear-gradient(180deg,var(--goldhi),var(--gold2));color:#000;font-weight:800;padding:14px 26px;
  border-radius:12px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;font-size:16px}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.btn.full{width:100%;text-align:center;margin-top:16px}
.btn:hover{filter:brightness(1.07)}

/* formats */
.format-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-bottom:14px}
.fcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;cursor:pointer;transition:.15s}
.fcard:hover{border-color:var(--gold);transform:translateY(-2px)}
.fcard h4{margin:0 0 6px;font-size:18px}
.fcard .spec{color:var(--gold);font-size:13px;font-weight:600;margin-bottom:8px}
.fcard p{margin:0;color:var(--muted);font-size:14px}

/* builder */
.builder-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
.step{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:18px}
.step h3{display:flex;align-items:center;gap:10px;font-size:19px}
.step h3 span{width:28px;height:28px;border-radius:50%;background:var(--gold);color:#000;display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.step h3 small{color:var(--muted);font-weight:500;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:10px 14px;border-radius:999px;cursor:pointer;font-family:inherit;font-weight:600;font-size:14px}
.chip.on{background:var(--gold);color:#000;border-color:var(--gold)}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:600}
input,select,textarea{background:#0b0906;border:1px solid var(--line);color:var(--text);padding:11px 12px;border-radius:10px;font-family:inherit;font-size:15px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);border-color:transparent}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.check{flex-direction:row;align-items:center;gap:8px;color:var(--text);font-weight:500;margin-top:12px}
.check input{width:auto}

.search-wrap{position:relative;margin-bottom:14px}
.results{position:absolute;left:0;right:0;top:100%;background:#0b0906;border:1px solid var(--gold);border-radius:10px;margin-top:4px;max-height:320px;overflow:auto;z-index:5;display:none}
.results.open{display:block}
.res{padding:10px 12px;cursor:pointer;border-bottom:1px solid rgba(214,168,62,.12)}
.res:hover,.res.active{background:var(--panel2)}
.res b{display:block}
.res span{color:var(--muted);font-size:13px}
.res.na{opacity:.45;cursor:not-allowed}

.ing-list .empty{color:var(--dim);font-size:14px}
.ing{display:grid;grid-template-columns:1fr 150px 32px 32px;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(214,168,62,.15)}
.ing-name{font-weight:700}
.ing-form{color:var(--muted);font-size:13px}
.ing-dose{display:flex;align-items:center;gap:6px}
.ing-dose input{padding:8px}
.ing-dose .unit{color:var(--muted);font-size:13px;min-width:28px}
.ing button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--gold);cursor:pointer;font-weight:700}
.ing .rm{color:var(--bad)}
.ing-meta{grid-column:1/-1;font-size:12px;color:var(--dim)}
.ing-meta .w{color:var(--warn)} .ing-meta .b{color:var(--bad)}
.ing-detail{grid-column:1/-1;background:var(--panel2);border-radius:10px;padding:12px 14px;font-size:13px;color:#E8E3D8}
.ing-detail dl{display:grid;grid-template-columns:130px 1fr;gap:4px 10px;margin:0}
.ing-detail dt{color:var(--muted)}
.ing-detail dd{margin:0}
.fill{margin-top:14px;font-size:14px}
.fill .bar{height:8px;background:#0b0906;border-radius:99px;overflow:hidden;margin:6px 0}
.fill .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--goldhi))}
.fill.over .bar i{background:var(--bad)}

/* summary */
.summary{position:sticky;top:90px;background:linear-gradient(180deg,#1d180e,#0d0b07);border:1px solid var(--gold);border-radius:18px;padding:22px}
.sum-head{color:var(--gold);letter-spacing:4px;text-transform:uppercase;font-size:12px;font-weight:700}
.sum-main{margin:10px 0 14px}
.sum-main .lbl{color:var(--muted);font-size:13px}
.sum-main .big{font-size:38px;font-weight:800}
.sum-main .sub{color:var(--muted);font-size:12px}
.sum-rows .r{display:flex;justify-content:space-between;font-size:14px;padding:7px 0;border-bottom:1px solid rgba(214,168,62,.15)}
.sum-rows .r span:last-child{font-weight:700;text-align:right}
.sum-rows .r.hl span:last-child{color:var(--gold)}
.sum-rows .sec{color:var(--gold);font-size:11px;letter-spacing:3px;text-transform:uppercase;margin:14px 0 2px}
.sum-warn{font-size:13px;color:var(--warn);margin-top:10px}
.sum-warn div{margin-bottom:4px}

/* brief */
.brief-form{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px;max-width:860px}
.brief-form > label{margin-bottom:14px}
.certs{border:1px solid var(--line);border-radius:10px;padding:10px 14px 14px;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:4px 18px}
.certs legend{color:var(--muted);font-size:13px;font-weight:600;padding:0 6px}
.consent{font-size:13px;color:var(--muted)}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.form-msg{margin-top:12px;font-weight:600}
.form-msg.ok{color:var(--ok)} .form-msg.err{color:var(--bad)}

.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.how-grid > div{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
.how-grid b{color:#000;background:var(--gold);width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.how-grid h4{margin:12px 0 6px;font-size:18px}
.how-grid p{color:var(--muted);margin:0}
.about p{max-width:800px;color:#E8E3D8}
.legal{padding-top:20px}
.legal p{color:var(--dim);font-size:13px;max-width:900px}
.legal h3{font-size:15px;color:var(--muted)}
.foot{border-top:1px solid var(--line);text-align:center;padding:40px 5vw;color:var(--dim);font-size:13px}
.foot img{height:60px;mix-blend-mode:screen}

/* live product visual */
.viz{--sh1:rgba(255,255,255,.22);--sh2:rgba(255,255,255,.14);--shs:rgba(255,255,255,.65);--tab:#f6f4ef;--lbg:#0b0b0b;--lfg:#F3EFE6;--lacc:#E2B857;--capscale:.9;
  margin:-6px -6px 16px;border-radius:14px;border:1px solid var(--line);
  background:radial-gradient(ellipse at 45% 35%,#3a2c10 0%,#17130b 55%,#070604 100%);overflow:hidden}
.viz-stage svg{display:block;width:100%;height:auto;max-height:280px}
.viz-cap{font-size:12px;color:var(--muted);text-align:center;padding:0 10px 10px}
.viz .pk,.viz .u{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .45s ease}
.viz[data-pack="tub"] .pk-tub,.viz[data-pack="glassjar"] .pk-glassjar,.viz[data-pack="pouch"] .pk-pouch,
.viz[data-pack="powdertub"] .pk-powdertub,.viz[data-pack="dropper"] .pk-dropper,.viz[data-pack="blister"] .pk-blister,
.viz[data-unit="cap"] .u-cap,.viz[data-unit="tab"] .u-tab,.viz[data-unit="chew"] .u-chew,.viz[data-unit="pow"] .u-pow,.viz[data-unit="liq"] .u-liq{opacity:1;transform:none}
.viz .sh1{fill:var(--sh1);stroke:var(--shs);stroke-width:.8}
.viz .sh2{fill:var(--sh2);stroke:var(--shs);stroke-width:.8}
.viz .tb{fill:var(--tab);stroke:rgba(0,0,0,.25);stroke-width:.8}
.viz .lblbg{fill:var(--lbg)} .viz .lblacc{fill:var(--lacc)}
.viz .sh1,.viz .sh2,.viz .tb,.viz .lblbg,.viz .lblacc,.viz text,.viz .lb-line{transition:fill .35s ease,stroke .35s ease}
.viz .capsc{transform:scale(var(--capscale));transition:transform .45s ease}
.viz .mini-cap,.viz .mini-tab{display:none}
.viz[data-unit="cap"] .mini-cap{display:inline} .viz[data-unit="tab"] .mini-tab,.viz[data-unit="chew"] .mini-tab{display:inline}
.viz #mvLbl{transition:transform .45s ease}
.viz[data-pack="tub"] #mvLbl{transform:translate(78px,146px) scale(.86)}
.viz[data-pack="glassjar"] #mvLbl{transform:translate(80px,142px) scale(.83)}
.viz[data-pack="pouch"] #mvLbl{transform:translate(70px,118px) scale(1)}
.viz[data-pack="powdertub"] #mvLbl{transform:translate(70px,128px) scale(1)}
.viz[data-pack="dropper"] #mvLbl{transform:translate(88px,162px) scale(.7)}
.viz[data-pack="blister"] #mvLbl{transform:translate(98px,106px) scale(.88)}
.viz .lb-brand{fill:var(--lacc);font-weight:700;letter-spacing:2.2px}
.viz .lb-name{fill:var(--lfg);font-weight:800}
.viz .lb-count{fill:var(--lfg);font-weight:700;letter-spacing:1.4px}
.viz .lb-small{fill:var(--lacc);font-size:5px;letter-spacing:1.5px;opacity:.85}
.viz .lb-line{stroke:var(--lacc);stroke-width:.8}
.viz text{font-family:Montserrat,Arial,sans-serif}
.summary{max-height:calc(100vh - 110px);overflow:auto}
.look{margin-top:14px}
.look-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.look-row > span{color:var(--muted);font-size:13px;font-weight:600;min-width:120px}
.chip.look-c{padding:7px 12px;font-size:13px;display:inline-flex;align-items:center;gap:7px}
.chip.look-c i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:inline-block}
@media (prefers-reduced-motion:reduce){.viz *,.viz #mvLbl{transition:none!important}}

@media (max-width:900px){
  .builder-grid{grid-template-columns:1fr}
  .summary{position:static;max-height:none;overflow:visible}
  .nav nav a:not(.btn-sm){display:none}
  .row3,.how-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .row2{grid-template-columns:1fr}
  .ing{grid-template-columns:1fr 120px 32px 32px}
  .section{padding:60px 16px}
  .hero{padding:70px 16px 40px}
}
@media print{
  body{background:#fff;color:#000}
}