
:root{
  --bg:#050706;--panel:#080b08;--panel2:#101510;--line:#263026;--line2:#384338;
  --text:#f7f8ef;--muted:#aeb5aa;--lime:#a8e600;--lime2:#d4ff28;--gold:#e3b169;
  --shadow:0 24px 70px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
body{overflow-x:hidden}
button,input,textarea{font-family:inherit}
button{cursor:pointer}
.page{min-height:100vh;background:radial-gradient(circle at top center,rgba(168,230,0,.12),transparent 28%),#050706}
.header{
  height:112px;display:grid;grid-template-columns:440px 1fr 240px;align-items:center;
  padding:0 30px;border-bottom:1px solid rgba(168,230,0,.35);
  background:linear-gradient(180deg,#0e140d,#050706);position:sticky;top:0;z-index:50;box-shadow:0 20px 50px rgba(0,0,0,.62)
}
.brand{display:flex;align-items:center;gap:18px}.brand img{height:92px;width:132px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(168,230,0,.45))}
.brandText{font-size:37px;letter-spacing:12px;line-height:.86;font-weight:700}.brandText span{display:block;color:var(--lime);font-size:16px;letter-spacing:9px;margin-top:10px}
.nav{display:flex;justify-content:center;align-items:center;gap:34px;height:100%}.nav a{font-size:13px;color:#edf1e7;text-decoration:none;text-transform:uppercase;opacity:.92;white-space:nowrap}.nav a.active{color:var(--lime);font-weight:900;height:100%;display:flex;align-items:center;border-bottom:3px solid var(--lime)}
.headerActions{display:flex;justify-content:flex-end;gap:24px}.ha{text-align:center;text-transform:uppercase;font-size:10px}.ha b{display:block;font-size:25px;font-weight:300}

.hero{
  min-height:calc(100vh - 112px);display:grid;grid-template-columns:1fr 460px;gap:34px;padding:34px;
  background:linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.24),rgba(0,0,0,.82)),url('/static/img/hero-scene.jpg') center/cover no-repeat
}
.heroCopy{align-self:end;max-width:820px;padding:0 0 52px 28px}
.kicker{color:var(--lime);font-weight:900;letter-spacing:3px;text-transform:uppercase;font-size:13px}
.hero h1{font-size:82px;line-height:.9;margin:18px 0 22px;text-transform:uppercase;letter-spacing:-2px}.hero h1 span{color:var(--lime)}
.hero p{font-size:20px;line-height:1.5;color:#e6eadf;max-width:700px}
.heroButtons{display:flex;gap:14px;margin-top:26px}.btn{border:0;border-radius:10px;padding:15px 24px;font-weight:950;text-decoration:none;display:inline-flex;align-items:center;gap:10px}.btnPrimary{background:linear-gradient(180deg,var(--lime2),var(--lime));color:#101010;box-shadow:0 10px 34px rgba(168,230,0,.28)}.btnGhost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:white;backdrop-filter:blur(10px)}
.heroPanel{align-self:center;background:rgba(5,7,6,.82);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:22px;box-shadow:var(--shadow);backdrop-filter:blur(16px)}
.heroPanel h3{margin:0 0 16px;color:var(--lime);text-transform:uppercase}
.stat{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:14px 0}.stat b{font-size:22px;color:white}.stat span{color:var(--muted)}
.builder{min-height:100vh;display:grid;grid-template-columns:300px 1fr 315px;border-top:1px solid var(--line);background:#050706}
.left{display:grid;grid-template-columns:86px 1fr;min-height:0;border-right:1px solid var(--line);background:linear-gradient(180deg,#080b08,#050706)}
.cats{padding-top:72px;border-right:1px solid var(--line)}.cat{height:52px;display:flex;align-items:center;gap:8px;padding:0 12px;font-size:10px;text-transform:uppercase;color:#e6ecdf;cursor:pointer}.cat.active,.cat:hover{color:var(--lime);background:linear-gradient(90deg,rgba(168,230,0,.22),transparent)}.cat i{font-style:normal;width:18px;font-size:18px}
.parts{padding:24px 14px;overflow:auto;max-height:calc(100vh - 0px)}.parts h2,.cart h2{font-size:17px;color:var(--lime);margin:0 0 8px}.muted{color:var(--muted);line-height:1.38}
.productGrid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}.product{display:grid;grid-template-columns:78px 1fr;gap:11px;align-items:center;padding:8px;background:linear-gradient(180deg,#151b15,#090c09);border:1px solid #2c382c;border-radius:12px;cursor:pointer;transition:.15s}.product:hover{border-color:var(--lime);transform:translateY(-1px)}.product img{width:78px;height:58px;object-fit:cover;border-radius:8px}.product b{display:block;text-transform:uppercase;font-size:12px}.product strong{color:var(--lime);font-size:13px}.product small{color:var(--muted);display:block;margin-top:3px}
.stage{position:relative;min-height:760px;overflow:hidden;background:#080a08}.stage:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.28)),url('/static/img/builder-scene.jpg') center/cover no-repeat;opacity:.96}.stage:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 68% 38%,rgba(168,230,0,.16),transparent 27%),linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.08) 40%,rgba(0,0,0,.38))}
.stageTop{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;padding:24px 34px}.stageTop h2{margin:0;text-transform:uppercase;font-size:16px}.stageTop p{margin:6px 0;color:#fff;text-shadow:0 2px 8px #000}.toggles{display:flex;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);border-radius:10px;overflow:hidden}.toggles button{background:transparent;color:white;border:0;padding:12px 16px}.toggles .active{color:var(--lime);background:rgba(168,230,0,.09)}
.design{position:absolute;z-index:4;left:40px;right:40px;top:118px;bottom:90px;overflow:auto}.pergola{display:none;position:absolute;left:60px;right:80px;top:5px;height:95px;border-top:15px solid #080908;border-left:10px solid #080908;border-right:10px solid #080908;filter:drop-shadow(0 18px 22px rgba(0,0,0,.7))}.pergola.show{display:block}.pergola:after{content:"";position:absolute;left:-8px;right:-8px;top:-28px;height:20px;background:repeating-linear-gradient(90deg,#080908 0,#080908 58px,transparent 58px,transparent 84px)}
.rowBuild{position:absolute;left:30px;bottom:70px;display:flex;align-items:flex-end;min-width:max-content;filter:drop-shadow(28px 26px 18px rgba(0,0,0,.68))}
.empty{font-size:25px;margin-bottom:80px;text-shadow:0 4px 18px #000}
.unit{position:relative;margin-right:5px;width:110px;height:120px;background:linear-gradient(150deg,#262c26,#070807 75%);border:1px solid #5c6758;border-radius:8px 8px 4px 4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}.unit.wide{width:150px}.unit.xwide{width:190px}.unit.tall{height:168px}.unit.mid{height:145px}.unit:before{content:"";position:absolute;left:0;right:0;top:-8px;height:15px;background:linear-gradient(90deg,#eff0e8,#747a71,#fafaf2,#858b83);border-radius:5px}.unit .img{position:absolute;inset:13px 10px 30px;background:center/cover no-repeat;border-radius:5px;opacity:.48;mix-blend-mode:screen}.unit .door{position:absolute;left:13%;right:13%;top:34%;bottom:18%;border:1px solid #3d483d;background:linear-gradient(160deg,#151915,#090a09)}.unit .handle{position:absolute;left:32%;right:32%;top:58%;height:4px;background:linear-gradient(90deg,#fff,#777);border-radius:5px}.unit .label{position:absolute;left:3px;right:3px;bottom:-23px;text-align:center;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unit .legs{position:absolute;left:10px;right:10px;bottom:-40px;height:40px;border-left:4px solid #050505;border-right:4px solid #050505}.unit .wheel{position:absolute;bottom:-50px;width:16px;height:16px;border-radius:50%;background:#050505;border:2px solid #303730}.unit .wheel.l{left:1px}.unit .wheel.r{right:1px}.unit.tall .hood{position:absolute;left:18%;right:18%;top:-46px;height:52px;background:linear-gradient(160deg,#3b4039,#080908);border-radius:44px 44px 4px 4px;border:1px solid #687064}.unit.tall .rack{position:absolute;left:20%;right:20%;top:-108px;height:70px;border-left:5px solid #050505;border-right:5px solid #050505;border-top:8px solid #050505}.unit.tall .rack:after{content:"";position:absolute;left:0;right:0;top:27px;height:5px;background:#d7dbd3}.unit.mid .dome{position:absolute;left:22%;right:22%;top:-42px;height:48px;border-radius:44px 44px 5px 5px;background:linear-gradient(160deg,#333,#080808);border:1px solid #666}.unit.sink .basin{position:absolute;left:28%;right:28%;top:20px;height:28px;border:4px solid #e0e5dc;border-radius:4px;background:#111}.unit.sink .tap{position:absolute;left:58%;top:-12px;width:5px;height:28px;background:#e0e5dc}.unit.fridge .door{background:linear-gradient(160deg,#122d38,#030404)}.unit.corner{clip-path:polygon(0 0,82% 0,100% 28%,100% 100%,0 100%)}.unit.addon,.unit.pergolaUnit{display:none}
.dock{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;display:flex;gap:14px;align-items:center;padding:12px 20px;background:rgba(5,6,5,.84);border:1px solid rgba(255,255,255,.16);border-radius:14px;backdrop-filter:blur(12px);box-shadow:var(--shadow)}.dock button{background:transparent;color:white;border:0;font-size:11px}.dock b{display:block;font-size:22px;font-weight:300}
.cart{padding:26px 22px;background:#070908;border-left:1px solid var(--line);overflow:auto}.cartLine{display:grid;grid-template-columns:50px 1fr 74px 18px;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #242d24}.cartLine img{width:48px;height:38px;object-fit:cover;border-radius:7px;border:1px solid #303b30}.cartLine span{font-size:13px}.cartLine b{text-align:right;font-size:12px}.remove{cursor:pointer;color:#d7ddd2}.totals{border-top:1px solid #384338;margin-top:16px;padding-top:13px}.totals .r{display:flex;justify-content:space-between;padding:7px 0;color:#e5e8dd}.big{display:flex;justify-content:space-between;margin:16px 0;color:var(--lime);font-size:23px;font-weight:950}.full{width:100%;justify-content:center;margin-top:9px}.presets{padding:26px 34px 34px;background:#060806;border-top:1px solid var(--line)}.presetsTop{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}.presets h2{margin:0;color:var(--lime);font-size:18px}.presetGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.preset{position:relative;border:1px solid #334033;border-radius:14px;overflow:hidden;background:#111;min-height:178px;cursor:pointer}.preset img{width:100%;height:178px;object-fit:cover;display:block;filter:brightness(.88)}.preset div{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.92));display:flex;justify-content:space-between}.preset strong{color:var(--lime)}
.checkout{display:none;position:fixed;inset:0;background:rgba(0,0,0,.84);z-index:100;place-items:center}.checkoutCard{background:#090c09;border:1px solid #3a463a;border-radius:18px;padding:30px;width:min(860px,94vw);box-shadow:var(--shadow)}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}input,textarea{background:#050705;border:1px solid #354035;color:white;border-radius:9px;padding:14px;width:100%}
.footer{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#060806;border-top:1px solid var(--line)}.foot{padding:22px 34px;border-right:1px solid var(--line);display:flex;gap:14px;align-items:center}.foot i{font-style:normal;color:var(--lime);font-size:28px}.foot b{display:block;text-transform:uppercase;font-size:13px}.foot span{color:var(--muted);font-size:13px}
.admin{padding:35px;max-width:1250px;margin:0 auto}.admin table{width:100%;border-collapse:collapse;background:#0b0e0b}.admin th,.admin td{border-bottom:1px solid #283028;padding:10px;text-align:left}.admin th{color:var(--lime);background:#151a15}
@media(max-width:1250px){.header,.hero,.builder,.presetGrid,.footer{grid-template-columns:1fr}.header{height:auto;padding:16px}.nav,.headerActions{display:none}.hero{min-height:auto}.hero h1{font-size:48px}.left{grid-template-columns:1fr}.cats{display:flex;padding-top:0;overflow:auto}.cat{min-width:120px}.stage{min-height:680px}.presetGrid{grid-template-columns:1fr}.brandText{font-size:28px}}
