/* SK Luxury PRO — Dark Luxury Theme with Preloader, JSON projects */
:root{
  --bg:#0e0e0e; --fg:#f3f3f3; --muted:#b6b6b6; --accent:#d6c29a; --card:#141414; --line:#222;
  --radius:12px; --container:1180px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}

#preloader{position:fixed; inset:0; background:#0b0b0b; display:grid; place-items:center; z-index:2000; transition:opacity .4s ease, visibility .4s ease}
#preloader.hide{opacity:0; visibility:hidden}
.preloader-inner{display:flex; flex-direction:column; align-items:center; gap:14px}
.logo-spin{animation:spin 1.2s linear infinite; filter: drop-shadow(0 0 16px rgba(214,194,154,.25));}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.bar{width:160px; height:4px; background:#1e1e1e; border-radius:999px; overflow:hidden; border:1px solid #222}
.bar-fill{display:block; width:40%; height:100%; background:var(--accent); animation:bar 1.2s ease-in-out infinite}
@keyframes bar{0%{transform:translateX(-100%)}50%{transform:translateX(60%)}100%{transform:translateX(180%)}}

.small{font-size:.9rem}
.container{max-width:var(--container); margin-inline:auto; padding:0 20px}
.site-header{position:sticky; top:0; background:rgba(14,14,14,.7); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); z-index:1000}
.nav{display:flex; align-items:center; gap:16px; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg)}
.logo-text{font-weight:700; letter-spacing:.08em}
.menu{display:flex; gap:20px; list-style:none; padding:0; margin:0}
.menu a{color:var(--fg); text-decoration:none; opacity:.9}
.menu a.cta{padding:.6rem 1rem; border:1px solid var(--accent); border-radius:999px}
.menu-toggle{display:none; background:transparent; border:0; color:var(--fg); font-size:24px}
.lang-switch{display:flex; gap:8px}
.lang{background:#1a1a1a; color:var(--fg); border:1px solid var(--line); border-radius:999px; padding:.35rem .7rem; cursor:pointer}
.lang[aria-pressed="true"]{border-color:var(--accent)}

.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center; padding:56px 20px}
.hero .hero-media img{width:100%; height:auto; border-radius:12px; border:1px solid var(--line)}
.hero h1{font-size:48px; line-height:1.1; margin:0 0 12px}
.muted{color:var(--muted)}
.btn{display:inline-block; padding:.9rem 1.2rem; background:var(--fg); color:#111; border-radius:999px; border:1px solid var(--fg); text-decoration:none}
.btn.ghost{background:transparent; color:var(--fg); border-color:var(--fg); margin-inline-start:10px}
.section{padding:56px 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:18px}
.title{font-size:28px; margin:0}

.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.card{display:block; background:var(--card); padding:12px; border-radius:12px; border:1px solid var(--line); text-decoration:none; color:var(--fg); transition:transform .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-3px); border-color:var(--accent)}
.card img{width:100%; height:280px; object-fit:cover; border-radius:8px; margin-bottom:10px}
.card-meta{display:flex; justify-content:space-between; color:var(--muted); font-size:.9rem}

.services{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.service{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px}

.about{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
.about-media img{width:100%; height:auto; border-radius:12px; border:1px solid var(--line)}
.badges{display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:12px 0 0; list-style:none}
.badges li{border:1px solid var(--line); padding:.4rem .7rem; border-radius:999px; color:var(--muted)}

.insta-wrap .hint{margin-top:8px; color:var(--muted); font-size:.9rem}

.form{display:grid; gap:12px; background:var(--card); padding:20px; border:1px solid var(--line); border-radius:12px}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
input, textarea{width:100%; background:#0b0b0b; color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:.8rem}

.footer{border-top:1px solid var(--line); padding:24px 0 40px; display:flex; justify-content:space-between; align-items:center; gap:16px}
.footer a{color:var(--muted); text-decoration:none}

.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1; transform:none}

.project-hero img{border-radius:12px; border:1px solid var(--line); margin-bottom:16px}
.project-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px}
.project-body .lead{font-size:1.1rem}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr; padding:40px 20px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .services{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .menu{display:none; position:absolute; top:64px; right:20px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; flex-direction:column; width:min(260px, 90vw)}
  .menu.show{display:flex}
  .menu-toggle{display:block}
  .grid{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .card img{height:220px}
  .hero h1{font-size:36px}
}