:root{
  --bg:#0b0d11; --bg2:#11151c; --panel:rgba(255,255,255,.05); --line:rgba(255,255,255,.1);
  --text:#f5f7fb; --muted:#9aa4b2; --muted2:#cad3df; --accent:#8fd8ff; --accent2:#5bb7ff;
  --gold:#d8aa5c; --gold-soft:#f3d49a; --container:1240px; --radius:28px; --shadow:0 24px 80px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 20% 0%, rgba(28,40,58,.95) 0%, rgba(11,13,17,1) 38%), linear-gradient(180deg,#090b0f,#0b0d11); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif; line-height:1.55}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(var(--container), calc(100% - 40px)); margin:auto}
.section{padding:58px 0}
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1; transform:none}
.site-header{position:sticky; top:0; z-index:30; background:rgba(11,13,17,.78); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:80px}
.brand-logo{width:156px; max-width:32vw; height:auto}
.menu{display:flex; gap:24px; color:var(--muted); font-size:14px}
.menu a{position:relative; transition:.2s}
.menu a:hover{color:var(--text)}
.menu a::after{content:""; position:absolute; left:0; right:0; bottom:-7px; height:1px; background:linear-gradient(90deg, transparent, var(--accent), transparent); transform:scaleX(0); transition:transform .2s}
.menu a:hover::after{transform:scaleX(1)}
.nav-actions{display:flex; gap:12px}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 22px; border-radius:999px; border:1px solid transparent; font-weight:700; transition:.2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#05111a; box-shadow:0 10px 28px rgba(91,183,255,.24)}
.btn-secondary{background:rgba(255,255,255,.04); border-color:var(--line); color:var(--text)}
.hero{position:relative; min-height:84vh; display:flex; align-items:center; overflow:hidden}
.hero-bg{position:absolute; inset:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(90deg, rgba(9,11,15,.84) 0%, rgba(9,11,15,.56) 42%, rgba(9,11,15,.34) 100%)}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr}
.hero-copy{max-width:700px}
.glass{background:linear-gradient(180deg, rgba(16,20,28,.60), rgba(16,20,28,.42)); border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(10px); border-radius:32px; padding:34px; box-shadow:var(--shadow)}
.hero h1{font-size:clamp(42px, 7vw, 82px); line-height:.98; letter-spacing:-.05em; margin:0 0 18px}
.hero .lead{font-size:clamp(18px, 2vw, 22px); color:var(--muted2); max-width:620px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.hero-badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px}
.hero-badges span{padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:#dce5ef; font-size:14px}
.eyebrow{display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:999px; background:rgba(143,216,255,.08); border:1px solid rgba(143,216,255,.18); color:var(--accent); font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px}
.section-head h2{font-size:clamp(30px, 4vw, 50px); line-height:1.02; letter-spacing:-.04em; max-width:12ch; margin:12px 0 0}
.section-head p{max-width:650px; color:var(--muted); font-size:17px; margin:0}
.cards-3,.cards-2,.price-grid{display:grid; gap:18px}
.cards-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.cards-2,.price-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
.card{background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card:hover{border-color:rgba(255,255,255,.14)}
.card h3{font-size:24px; margin:0 0 12px}
.card h2{font-size:38px; line-height:1.05; margin:16px 0 14px}
.card p{color:var(--muted); margin:0}
.cards-3 .card,.cards-2 .card,.price-grid .card{padding:26px}
.pill{display:inline-flex; padding:8px 12px; border-radius:999px; background:rgba(216,170,92,.11); border:1px solid rgba(216,170,92,.20); color:var(--gold-soft); font-size:13px; font-weight:700; margin-bottom:14px}
.clean{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px}
.clean li{position:relative; padding-left:18px; color:var(--muted2)}
.clean li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--accent)}
.gallery-toolbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px}
.filter-chip{display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:#dfe6ef; font-size:14px; font-weight:650; cursor:pointer; transition:.2s}
.filter-chip:hover{background:rgba(255,255,255,.06)}
.filter-chip.is-active{background:rgba(143,216,255,.10); border-color:rgba(143,216,255,.24); color:var(--accent)}
.gallery-layout{display:grid; grid-template-columns:1.15fr .85fr; gap:18px; margin-bottom:18px}
.gallery-side{display:grid; grid-template-rows:1fr 1fr; gap:18px}
.gallery-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.gallery-card{padding:0; margin:0; overflow:hidden; position:relative; border-radius:24px; border:1px solid var(--line); background:#0d1117; cursor:pointer; min-height:240px; box-shadow:var(--shadow)}
.gallery-large{min-height:420px}
.gallery-card img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.gallery-card:hover img{transform:scale(1.04)}
.gallery-card figcaption{position:absolute; left:16px; right:16px; bottom:16px; padding:12px 14px; border-radius:16px; background:rgba(11,13,17,.62); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.1); color:#eef3fa; font-size:14px}
.gallery-tag{position:absolute; top:14px; left:14px; z-index:2; padding:7px 10px; border-radius:999px; background:rgba(11,13,17,.58); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.1); color:var(--gold-soft); font-size:12px; font-weight:700}
.gallery-card.is-hidden{display:none}
.spotlight{display:grid; grid-template-columns:.9fr 1.1fr; gap:18px; align-items:stretch}
.spotlight-image img{width:100%; height:100%; object-fit:cover; border-radius:20px}
.compare-card{padding:0; overflow:hidden}
.compare-wrap{position:relative; min-height:340px}
.compare-wrap img{width:100%; height:100%; object-fit:cover}
.compare-label{position:absolute; top:14px; left:14px; z-index:2; padding:8px 12px; border-radius:999px; background:rgba(11,13,17,.58); border:1px solid rgba(255,255,255,.1); color:#eef3fa; font-size:12px; font-weight:700}
.compare-copy{padding:18px}
.price-table{width:100%; border-collapse:collapse; font-size:15px}
.price-table th,.price-table td{padding:15px 16px; text-align:left; border-bottom:1px solid rgba(255,255,255,.08)}
.price-table th{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); background:rgba(255,255,255,.03)}
.lead-box{padding:28px}
.lead-form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.lead-form label{display:flex; flex-direction:column; gap:8px}
.lead-form label span{font-size:13px; color:var(--muted); font-weight:650}
.lead-form input,.lead-form select,.lead-form textarea{width:100%; min-height:56px; padding:16px 18px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--text); outline:none}
.lead-form textarea{min-height:140px; resize:vertical}
.lead-form .full{grid-column:1 / -1}
.form-actions{display:flex; gap:12px; flex-wrap:wrap}
.contact-list{display:grid; gap:14px; margin-top:18px}
.contact-list small{display:block; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px}
.contact-list strong{font-size:18px}
.site-footer{padding:24px 0 40px; color:var(--muted)}
.footer-inner{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.08); padding-top:18px}
.footer-brand{display:flex; align-items:center; gap:14px}
.footer-brand img{width:132px}
.lightbox{position:fixed; inset:0; background:rgba(6,8,12,.88); backdrop-filter:blur(12px); display:none; align-items:center; justify-content:center; padding:14px; z-index:120}
.lightbox.is-open{display:flex}
.lightbox-backdrop{position:absolute; inset:0}
.lightbox-dialog{position:relative; z-index:1; width:min(1320px, calc(100% - 10px)); max-height:calc(100vh - 20px); display:grid; grid-template-columns:1.12fr .52fr; gap:18px}
.lightbox-media{position:relative; border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:#0a0c10; box-shadow:0 24px 80px rgba(0,0,0,.42); display:grid; grid-template-rows:1fr auto; min-height:64vh}
.lightbox-media img{width:100%; height:100%; object-fit:contain; background:#000; user-select:none; -webkit-user-drag:none}
.swipe-zone{position:absolute; inset:0; z-index:1}
.lightbox-thumbs{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; padding:12px; border-top:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02)}
.lightbox-thumb{position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#0a0c10; cursor:pointer; aspect-ratio:1/1; transition:.2s}
.lightbox-thumb img{width:100%; height:100%; object-fit:cover}
.lightbox-thumb:hover{transform:translateY(-1px)}
.lightbox-thumb.is-active{border-color:rgba(143,216,255,.36); box-shadow:0 0 0 3px rgba(143,216,255,.10)}
.lightbox-panel{padding:22px; border-radius:26px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); box-shadow:0 24px 80px rgba(0,0,0,.32); display:flex; flex-direction:column; justify-content:space-between}
.lightbox-panel h3{font-size:30px; line-height:1.02; letter-spacing:-.04em; margin:14px 0 10px}
.lightbox-panel p{color:var(--muted2)}
.lightbox-counter{display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:#dfe6ef; font-size:13px}
.lightbox-meta{display:grid; gap:10px; margin-top:18px}
.meta-row{padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:#e8edf7; font-size:14px}
.lightbox-hint{margin-top:12px; color:var(--muted); font-size:13px}
.lightbox-controls{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.lightbox-btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 16px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:var(--text); cursor:pointer; transition:.2s}
.lightbox-btn:hover{background:rgba(255,255,255,.08)}
.lightbox-close{position:absolute; top:14px; right:14px; z-index:2; width:46px; height:46px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(11,13,17,.62); color:#fff; display:grid; place-items:center; cursor:pointer}
@media (max-width:1180px){
  .cards-3,.cards-2,.price-grid,.gallery-layout,.gallery-grid,.spotlight,.lightbox-dialog,.lead-form{grid-template-columns:1fr}
  .gallery-side{grid-template-rows:auto}
}
@media (max-width:820px){
  .container{width:min(var(--container), calc(100% - 20px))}
  .menu{display:none}
  .nav{min-height:72px}
  .brand-logo{width:126px}
  .nav-actions .btn-secondary{display:none}
  .hero{min-height:72vh}
  .glass{padding:24px}
  .hero-badges,.hero-actions,.form-actions{flex-direction:column}
  .btn{width:100%}
  .lightbox-thumbs{grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; padding:10px}
  .lightbox-panel{padding:16px; border-radius:20px}
  .lightbox-media{min-height:42vh; border-radius:20px}
}