:root{
  --bg:#f1f3f8;--side:#151922;--panel:#fff;--violet:#7c5cff;--cyan:#42c7d9;--yellow:#ffd765;
  --text:#242833;--muted:#748094;--line:#dfe4ec;--rail:240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}img{display:block;width:100%}
button,input,textarea,select{font:inherit}
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:70;background:var(--side);color:#fff;padding:1.2rem;
  display:flex;flex-direction:column
}
.logo{font-weight:900;font-size:1.18rem;letter-spacing:.06em}.side-kicker{font-size:.64rem;color:#929aac;margin:.4rem 0 1.4rem}
.sidebar nav a{display:flex;justify-content:space-between;padding:.78rem .8rem;margin:.22rem 0;border-radius:12px;color:#c9cfda;font-size:.76rem}
.sidebar nav a:hover,.sidebar nav a.active{background:#252b38;color:#fff}.side-dot{width:8px;height:8px;border-radius:50%;background:#49505f}
.sidebar nav a.active .side-dot{background:var(--cyan)}
.side-foot{margin-top:auto;font-size:.68rem;color:#8f98a9;border-top:1px solid #2e3442;padding-top:1rem}
.main{margin-left:var(--rail);min-height:100vh}
.topbar{position:sticky;top:0;z-index:60;background:#ffffffec;backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:.9rem 1.4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.search{width:min(430px,48vw);border:1px solid var(--line);padding:.7rem .85rem;border-radius:12px;background:#f9fafc}
.top-actions{display:flex;gap:.5rem}.chip{border:1px solid var(--line);background:#fff;padding:.62rem .72rem;border-radius:10px;font-size:.72rem;font-weight:800;cursor:pointer}
.content{padding:1.5rem}
.hero{display:grid;grid-template-columns:1.05fr .95fr;background:linear-gradient(135deg,#ebe8ff,#e9fbfd);border:1px solid var(--line);border-radius:26px;overflow:hidden}
.hero-copy{padding:4vw}.kicker{font-size:.64rem;letter-spacing:.18em;color:var(--violet);font-weight:900}
h1,h2,h3{letter-spacing:-.04em}h1{font-size:clamp(3.7rem,7vw,7rem);line-height:.86;margin:.6rem 0 1.1rem}
.hero-copy p,.section p{color:var(--muted)}.hero-art{padding:2vw}.hero-art img{height:100%;object-fit:cover;border-radius:20px}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}.btn{display:inline-flex;padding:.8rem .95rem;border:1px solid var(--text);border-radius:10px;font-weight:800;cursor:pointer}.btn.primary{background:var(--text);color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1rem 0}.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem}.stat b{display:block;font-size:1.8rem}.stat:nth-child(1) b{color:var(--violet)}.stat:nth-child(2) b{color:#2297a8}.stat:nth-child(3) b{color:#c98d00}.stat span{font-size:.72rem;color:var(--muted)}
.section{padding:3.5rem 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.4rem}.section-head h2{font-size:clamp(2.5rem,4.5vw,4.6rem);margin:.2rem 0}
.filters{display:flex;gap:.5rem;flex-wrap:wrap}.filters button{border:1px solid var(--line);background:#fff;padding:.58rem .75rem;border-radius:10px;cursor:pointer}.filters button.active{background:var(--violet);color:#fff}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.product{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.product img{aspect-ratio:1/1;object-fit:cover;background:#f7f8fb}
.product-copy{padding:1rem}.product-copy h3{margin:.1rem 0}.product-copy p{font-size:.84rem;color:var(--muted)}
.product-actions{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.product-actions button{border:0;background:var(--side);color:#fff;padding:.58rem .7rem;border-radius:8px;cursor:pointer}
.product.hidden{display:none}

.builder{display:grid;grid-template-columns:.8fr 1.2fr;gap:2rem}.builder-panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.3rem}
.budget-line{display:flex;justify-content:space-between;align-items:center}.builder input[type=range]{width:100%;margin:1rem 0}.budget-value{font-size:2rem;font-weight:900;color:var(--violet)}
.setup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}.setup-item{padding:1rem;border:1px solid var(--line);border-radius:14px;background:#f8f9fc}.setup-item b{display:block}.setup-item span{font-size:.72rem;color:var(--muted)}
.builder-note{margin-top:1rem;color:var(--muted);font-size:.74rem}

.compare-tray{position:fixed;right:18px;bottom:18px;width:min(430px,calc(100% - 36px));z-index:90;background:#151922;color:#fff;border:1px solid #313746;border-radius:18px;padding:1rem;box-shadow:0 20px 55px rgba(23,25,34,.28);transform:translateY(140%);transition:.25s}
.compare-tray.open{transform:none}.compare-head{display:flex;justify-content:space-between;align-items:center}.compare-items{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}.compare-item{background:#252b38;padding:.55rem .65rem;border-radius:9px;font-size:.7rem}.compare-tray button{background:transparent;color:#fff;border:1px solid #4d5567;padding:.45rem .55rem;border-radius:8px}
.compare-table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.74rem}.compare-table td{padding:.5rem;border-top:1px solid #303746}

.pagehero{padding:4rem 0 2rem}.pagehero h1{font-size:clamp(3.5rem,7vw,6.5rem)}
.editorial{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.story{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.3rem}
.form{display:grid;gap:1rem;max-width:700px}.field label{display:block;font-size:.7rem;font-weight:800;letter-spacing:.1em;margin-bottom:.35rem}.field input,.field textarea,.field select{width:100%;padding:.85rem;border:1px solid var(--line);border-radius:10px}.status{min-height:1.2em;color:var(--violet);font-weight:800}
.footer{padding:2rem 0;color:var(--muted);font-size:.78rem;border-top:1px solid var(--line)}
@media(max-width:950px){
  .sidebar{position:static;width:auto;flex-direction:row;align-items:center;overflow:auto}.sidebar nav{display:flex}.sidebar nav a{white-space:nowrap}.side-kicker,.side-foot{display:none}.main{margin-left:0}
  .hero,.builder{grid-template-columns:1fr}.products{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.topbar{top:0}
}
@media(max-width:620px){
  .content{padding:1rem}.hero-copy{padding:2rem 1.2rem}.hero-art{padding:1rem}.products,.stats,.setup-grid,.editorial{grid-template-columns:1fr}
  .search{display:none}.section-head{align-items:flex-start;flex-direction:column}
}