/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
  --bg:          #080808;
  --bg2:         #111111;
  --bg3:         #1a1a1a;
  --card:        #141414;
  --accent:      #c8a96e;
  --accent-lt:   #dfc08a;
  --accent-dk:   #9e7f4a;
  --txt:         #f0f0f0;
  --txt2:        #9a9a9a;
  --txt3:        #555555;
  --border:      #242424;
  --border2:     #303030;
  --ok:          #4ade80;
  --err:         #f87171;
  --r:           8px;
  --rl:          16px;
  --ease:        all .3s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,::before,::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background:var(--bg);
  color:var(--txt);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
img { display:block; max-width:100% }
a { text-decoration:none }
button,input,textarea,select { font-family:inherit }

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; width:100%; z-index:900;
  padding:1.5rem 0; transition:var(--ease);
}
.nav.scrolled {
  background:rgba(8,8,8,.95);
  backdrop-filter:blur(20px);
  padding:1rem 0;
  border-bottom:1px solid var(--border);
}
.nav-inner {
  max-width:1200px; margin:0 auto; padding:0 2rem;
  display:flex; justify-content:space-between; align-items:center;
}
.nav-logo {
  font-size:1.4rem; font-weight:900; letter-spacing:3px; color:var(--txt);
}
.nav-logo b { color:var(--accent) }
.nav-links {
  display:flex; gap:2.5rem; list-style:none; align-items:center;
}
.nav-links a {
  color:var(--txt2); font-size:.875rem; font-weight:500;
  letter-spacing:.5px; transition:var(--ease);
}
.nav-links a:hover { color:var(--accent) }
.nav-links .cta {
  background:var(--accent); color:#000 !important;
  padding:.55rem 1.4rem; border-radius:var(--r); font-weight:700 !important;
}
.nav-links .cta:hover { background:var(--accent-lt) !important }
.nav-burger {
  display:none; flex-direction:column; gap:5px; cursor:pointer; padding:5px; border:0; background:0;
}
.nav-burger span { display:block; width:22px; height:2px; background:var(--txt); transition:var(--ease) }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden;
}
.hero-glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 70% at 20% 60%, rgba(200,169,110,.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 15%, rgba(200,169,110,.04) 0%, transparent 60%);
}
.hero-grid {
  position:absolute; inset:0; pointer-events:none; opacity:.25;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,#000,transparent);
  mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,#000,transparent);
}
.hero-inner {
  max-width:1200px; margin:0 auto; padding:10rem 2rem 6rem;
  position:relative; z-index:1; width:100%;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(200,169,110,.08); border:1px solid rgba(200,169,110,.25);
  padding:.35rem 1rem; border-radius:100px;
  font-size:.75rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--accent); margin-bottom:2rem;
}
.hero-eyebrow i { font-size:.8rem }
.hero-h1 {
  font-size:clamp(3.2rem,9vw,7rem); font-weight:900; line-height:1;
  letter-spacing:-3px; margin-bottom:1.5rem; max-width:850px;
  white-space:pre-line;
}
.hero-h1 em { color:var(--accent); font-style:normal }
.hero-p {
  font-size:clamp(1rem,2vw,1.15rem); color:var(--txt2);
  max-width:500px; margin-bottom:3rem; line-height:1.85;
}
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap }
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:1rem 2.5rem; border-radius:var(--r); font-weight:700;
  font-size:1rem; transition:var(--ease); cursor:pointer; border:0;
}
.btn-gold {
  background:var(--accent); color:#000;
}
.btn-gold:hover { background:var(--accent-lt); transform:translateY(-2px); box-shadow:0 8px 28px rgba(200,169,110,.35) }
.btn-outline {
  background:transparent; color:var(--txt);
  border:1px solid var(--border2);
}
.btn-outline:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px) }
/* Hero background media (image or video) */
.hero-bg-media {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background-size:cover; background-position:center;
  z-index:0;
}
.hero-media-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to right, rgba(0,0,0,.75) 0%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.2) 100%);
}
.hero--media .hero-glow { z-index:2; opacity:.4 }
.hero--media .hero-grid { z-index:2; opacity:.1 }
.hero--media .hero-inner { z-index:3 }
.hero--media .hero-scroll-hint { z-index:3 }

.hero-scroll-hint {
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  color:var(--txt3); font-size:.75rem; letter-spacing:1px; text-transform:uppercase;
  animation:bob 2.5s ease-in-out infinite;
}
.hero-scroll-hint::after {
  content:''; width:1px; height:36px;
  background:linear-gradient(to bottom,var(--accent),transparent);
}
@keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* ── Stats bar ───────────────────────────────────────────────────────────── */
.stats-bar {
  background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.stats-inner {
  max-width:1200px; margin:0 auto; padding:0 2rem;
  display:grid; grid-template-columns:repeat(3,1fr);
}
.stat {
  padding:3rem 2rem; text-align:center;
  border-right:1px solid var(--border);
}
.stat:last-child { border-right:none }
.stat-n {
  font-size:3rem; font-weight:900; color:var(--accent);
  line-height:1; letter-spacing:-2px; margin-bottom:.4rem;
}
.stat-l { color:var(--txt2); font-size:.8rem; font-weight:600; letter-spacing:1px; text-transform:uppercase }

/* ── Section helpers ─────────────────────────────────────────────────────── */
.section { padding:8rem 0 }
.section--dark { background:var(--bg2); border-top:1px solid var(--border) }
.wrap { max-width:1200px; margin:0 auto; padding:0 2rem }
.sec-head { text-align:center; margin-bottom:4.5rem }
.sec-tag {
  display:inline-block; color:var(--accent); font-size:.75rem;
  font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:.8rem;
}
.sec-h2 {
  font-size:clamp(2rem,4vw,3rem); font-weight:800;
  letter-spacing:-1px; margin-bottom:.75rem;
}
.sec-sub { color:var(--txt2); max-width:480px; margin:0 auto; font-size:1.05rem }

/* ── Services ────────────────────────────────────────────────────────────── */
.svc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem }
.svc-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--rl);
  padding:2.5rem; transition:var(--ease); position:relative; overflow:hidden;
}
.svc-card::after {
  content:''; position:absolute; top:0; inset-inline:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0; transition:var(--ease);
}
.svc-card:hover { border-color:rgba(200,169,110,.3); transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,.5) }
.svc-card:hover::after { opacity:1 }
.svc-icon {
  width:52px; height:52px; border-radius:var(--r);
  background:rgba(200,169,110,.1); display:flex; align-items:center;
  justify-content:center; font-size:1.25rem; color:var(--accent); margin-bottom:1.5rem;
}
.svc-name { font-size:1.15rem; font-weight:700; margin-bottom:.6rem }
.svc-desc { color:var(--txt2); font-size:.93rem; line-height:1.75; margin-bottom:1.5rem }
.svc-price { color:var(--accent); font-weight:700; font-size:.95rem }

/* ── About ───────────────────────────────────────────────────────────────── */
.about-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center;
}
.about-img-wrap { position:relative }
.about-img, .about-img-ph {
  width:100%; aspect-ratio:4/3; border-radius:var(--rl);
  border:1px solid var(--border); object-fit:cover;
}
.about-img-ph {
  background:var(--bg3); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem; color:var(--txt3);
}
.about-img-ph i { font-size:3rem; color:var(--accent); opacity:.4 }
.about-badge {
  position:absolute; bottom:-1.5rem; right:-1.5rem;
  background:var(--accent); color:#000; padding:1.5rem 2rem;
  border-radius:var(--rl); text-align:center; font-weight:900;
}
.about-badge .big { font-size:2.5rem; line-height:1; display:block }
.about-badge .sm { font-size:.75rem; font-weight:700; letter-spacing:1px }
.about-text {
  color:var(--txt2); font-size:1.02rem; line-height:1.9; white-space:pre-line; margin-bottom:2rem;
}
.feats { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1.5rem }
.feat { display:flex; align-items:center; gap:.6rem; font-size:.9rem; color:var(--txt2) }
.feat i { color:var(--accent); font-size:.8rem }

/* ── Process ─────────────────────────────────────────────────────────────── */
.steps {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; position:relative; margin-top:4rem;
}
.steps::before {
  content:''; position:absolute; top:2.5rem;
  left:calc(16.67% + 1rem); right:calc(16.67% + 1rem);
  height:1px; background:var(--border);
}
.step { text-align:center; padding:1.5rem 1rem }
.step-num {
  width:56px; height:56px; border-radius:50%; border:2px solid var(--accent);
  display:flex; align-items:center; justify-content:center; margin:0 auto 2rem;
  font-size:1.1rem; font-weight:800; color:var(--accent);
  background:var(--bg); position:relative; z-index:1;
}
.step-h { font-size:1.1rem; font-weight:700; margin-bottom:.6rem }
.step-p { color:var(--txt2); font-size:.92rem; line-height:1.7 }

/* ── Contact ─────────────────────────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:5rem; align-items:start }
.ci { display:flex; gap:1.25rem; margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid var(--border) }
.ci:last-child { border-bottom:none }
.ci-icon {
  width:44px; height:44px; flex-shrink:0; border-radius:var(--r);
  background:rgba(200,169,110,.1); display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.ci-lbl { font-size:.75rem; color:var(--txt3); text-transform:uppercase; letter-spacing:1px; font-weight:700; margin-bottom:.3rem }
.ci-val { color:var(--txt); font-weight:500; white-space:pre-line }
.cf {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--rl); padding:2.5rem;
}
.cf-h { font-size:1.2rem; font-weight:700; margin-bottom:2rem }
.fg { margin-bottom:1.25rem }
.fl { display:block; font-size:.82rem; font-weight:600; color:var(--txt2); margin-bottom:.45rem; letter-spacing:.3px }
.fc {
  width:100%; background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--r); padding:.8rem 1rem; color:var(--txt);
  font-size:.95rem; outline:none; transition:var(--ease);
}
.fc:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,169,110,.1) }
.fc::placeholder { color:var(--txt3) }
textarea.fc { resize:vertical; min-height:130px }
.fg-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.alert-ok {
  padding:.9rem 1.25rem; border-radius:var(--r); margin-bottom:1.25rem;
  background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.25); color:var(--ok);
  font-size:.92rem;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
  background:var(--bg); border-top:1px solid var(--border); padding:2.5rem 0;
}
.footer-inner {
  max-width:1200px; margin:0 auto; padding:0 2rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
}
.f-logo { font-size:1.1rem; font-weight:900; letter-spacing:3px; color:var(--txt2) }
.f-logo b { color:var(--accent) }
.f-copy { color:var(--txt3); font-size:.82rem }
.f-developer { color:var(--txt3); font-size:.82rem; text-align: center; margin-top: 10px; }
.f-developer a { color:var(--txt3); text-decoration:underline; }
.f-link { color:var(--txt3); font-size:.82rem; transition:var(--ease) }
.f-link:hover { color:var(--accent) }

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN
   ══════════════════════════════════════════════════════════════════════════ */

.a-layout { display:flex; min-height:100vh; background:var(--bg) }

/* Sidebar */
.a-sidebar {
  width:250px; background:var(--bg2); border-right:1px solid var(--border);
  position:fixed; top:0; left:0; bottom:0; display:flex; flex-direction:column; z-index:200;
}
.a-sb-head {
  padding:1.5rem; border-bottom:1px solid var(--border);
}
.a-brand { font-size:1rem; font-weight:900; letter-spacing:2px; color:var(--txt) }
.a-brand b { color:var(--accent) }
.a-brand small { display:block; font-size:.65rem; color:var(--txt3); letter-spacing:1px; font-weight:400 }
.a-nav { flex:1; overflow-y:auto; padding:.5rem 0 }
.a-nav-lbl {
  padding:.5rem 1.25rem; font-size:.65rem; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--txt3); margin-top:1rem;
}
.a-nav a {
  display:flex; align-items:center; gap:.7rem; padding:.7rem 1.25rem;
  color:var(--txt2); font-size:.87rem; font-weight:500; transition:var(--ease);
  border-left:3px solid transparent; position:relative;
}
.a-nav a:hover { color:var(--txt); background:rgba(255,255,255,.02) }
.a-nav a.on { color:var(--accent); background:rgba(200,169,110,.06); border-left-color:var(--accent) }
.a-nav .badge {
  margin-left:auto; background:var(--accent); color:#000;
  font-size:.65rem; font-weight:800; padding:.15rem .5rem; border-radius:100px;
}

/* Main area */
.a-main { margin-left:250px; flex:1; display:flex; flex-direction:column; min-height:100vh }
.a-top {
  background:var(--bg2); border-bottom:1px solid var(--border);
  padding:1rem 1.75rem; display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:100;
}
.a-top-title { font-size:1rem; font-weight:700 }
.a-top-acts { display:flex; align-items:center; gap:.75rem }
.a-body { padding:1.75rem; flex:1 }

/* Buttons */
.abtn {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem 1.15rem; border-radius:var(--r); font-size:.83rem;
  font-weight:600; transition:var(--ease); border:0; cursor:pointer; text-decoration:none;
}
.abtn-gold { background:var(--accent); color:#000 }
.abtn-gold:hover { background:var(--accent-lt) }
.abtn-ghost { background:var(--bg3); color:var(--txt2); border:1px solid var(--border) }
.abtn-ghost:hover { color:var(--txt) }
.abtn-danger { background:rgba(248,113,113,.08); color:var(--err); border:1px solid rgba(248,113,113,.2) }
.abtn-danger:hover { background:rgba(248,113,113,.18) }

/* Stat cards */
.a-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-bottom:1.75rem }
.a-stat {
  background:var(--card); border:1px solid var(--border); border-radius:var(--rl); padding:1.5rem;
}
.a-stat-lbl { font-size:.75rem; color:var(--txt3); text-transform:uppercase; letter-spacing:1px; margin-bottom:.5rem }
.a-stat-val { font-size:2.4rem; font-weight:900; color:var(--accent); line-height:1 }

/* Table card */
.a-card { background:var(--card); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; margin-bottom:1.5rem }
.a-card-head {
  padding:1.1rem 1.5rem; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.a-card-head h3 { font-size:.95rem; font-weight:700 }
.a-tbl { width:100%; border-collapse:collapse }
.a-tbl th {
  background:var(--bg3); padding:.65rem 1.25rem; text-align:left;
  font-size:.72rem; font-weight:700; letter-spacing:.5px; color:var(--txt3); text-transform:uppercase;
}
.a-tbl td { padding:.9rem 1.25rem; border-bottom:1px solid var(--border); font-size:.875rem; color:var(--txt2) }
.a-tbl tr:last-child td { border-bottom:none }
.a-tbl tr:hover td { background:rgba(255,255,255,.01) }

/* Content editor */
.cg { background:var(--card); border:1px solid var(--border); border-radius:var(--rl); margin-bottom:1.25rem; overflow:hidden }
.cg-head {
  padding:.9rem 1.5rem; border-bottom:1px solid var(--border); background:var(--bg3);
  display:flex; align-items:center; gap:.6rem;
}
.cg-head h3 { font-size:.8rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--txt2) }
.cg-head i { color:var(--accent); font-size:.9rem }
.crow {
  display:grid; grid-template-columns:190px 1fr auto;
  gap:1rem; align-items:start; padding:1.1rem 1.5rem;
  border-bottom:1px solid var(--border);
}
.crow:last-child { border-bottom:none }
.crow-lbl { font-size:.82rem; font-weight:600; color:var(--txt2); padding-top:.4rem }
.crow-key { font-size:.7rem; color:var(--txt3); font-family:monospace; margin-top:2px }
.cinput {
  width:100%; background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--r); padding:.6rem .85rem; color:var(--txt); font-size:.88rem;
  outline:none; transition:var(--ease);
}
.cinput:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,169,110,.1) }
textarea.cinput { min-height:90px; resize:vertical }
.csave {
  background:var(--accent); color:#000; border:0; border-radius:var(--r);
  padding:.55rem .9rem; font-size:.78rem; font-weight:700; cursor:pointer;
  transition:var(--ease); white-space:nowrap;
}
.csave:hover { background:var(--accent-lt) }
.csave.saved { background:var(--ok) }
.img-row { align-items:center }
.img-zone {
  border:2px dashed var(--border2); border-radius:var(--r);
  padding:1rem; text-align:center; cursor:pointer; transition:var(--ease);
}
.img-zone:hover { border-color:var(--accent) }
.img-thumb { width:100%; max-height:100px; object-fit:cover; border-radius:var(--r); margin-bottom:.5rem }
.img-lbl { font-size:.78rem; color:var(--txt3) }

/* Badges */
.bdg { display:inline-block; font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:100px }
.bdg-ok { background:rgba(74,222,128,.1); color:var(--ok) }
.bdg-warn { background:rgba(200,169,110,.1); color:var(--accent) }

/* Service modal overlay */
.modal-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.7);
  z-index:500; align-items:center; justify-content:center;
}
.modal-overlay.open { display:flex }
.modal-box {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--rl);
  padding:2rem; width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
}
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem }
.modal-head h3 { font-size:1rem; font-weight:700 }
.modal-close { background:0; border:0; color:var(--txt2); cursor:pointer; font-size:1.2rem }
.modal-close:hover { color:var(--txt) }

/* Login */
.login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg);
}
.login-card {
  width:100%; max-width:400px;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--rl); padding:2.5rem;
}
.login-h { font-size:1.5rem; font-weight:900; letter-spacing:2px; margin-bottom:.3rem }
.login-h b { color:var(--accent) }
.login-sub { color:var(--txt3); font-size:.85rem; margin-bottom:2rem }
.val-err {
  padding:.75rem 1rem; border-radius:var(--r); margin-bottom:1.25rem; font-size:.85rem;
  background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.2); color:var(--err);
}

/* Alert */
.a-alert { padding:.75rem 1.25rem; border-radius:var(--r); margin-bottom:1.25rem; font-size:.88rem }
.a-alert-ok { background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.2); color:var(--ok) }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:1024px) {
  .about-grid { grid-template-columns:1fr; gap:3rem }
  .about-badge { right:1rem }
}
@media(max-width:768px) {
  .nav-links {
    display:none; position:fixed; inset:0; background:rgba(8,8,8,.98);
    flex-direction:column; align-items:center; justify-content:center;
    gap:2.5rem; z-index:800;
  }
  .nav-links.open { display:flex }
  .nav-links a { font-size:1.4rem }
  .nav-burger { display:flex; z-index:900 }
  .stats-inner { grid-template-columns:1fr }
  .stat { border-right:none; border-bottom:1px solid var(--border); padding:2rem }
  .stat:last-child { border-bottom:none }
  .steps { grid-template-columns:1fr }
  .steps::before { display:none }
  .contact-grid { grid-template-columns:1fr; gap:3rem }
  .fg-row { grid-template-columns:1fr }
  .footer-inner { flex-direction:column; text-align:center }
  .hero-h1 { letter-spacing:-2px }
  /* admin responsive */
  .a-sidebar { transform:translateX(-100%); transition:var(--ease) }
  .a-sidebar.open { transform:translateX(0) }
  .a-main { margin-left:0 }
  .a-stats { grid-template-columns:1fr }
}