:root{
    --bg:#0d0b0c;          /* near-black */
    --panel:#171318;       /* deep panel */
    --text:#f5f6f7;        /* soft white */
    --muted:#bdb7c2;       /* muted gray */
    --red:#b20b2e;         /* deep luxury red */
    --red-2:#e41c43;       /* accent red */
    --gold:#d8b26e;        /* subtle gold */
    --line:rgba(255,255,255,0.08);
    --radius:16px;
    --shadow:0 10px 30px rgba(0,0,0,0.35);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:linear-gradient(180deg,#0a0a0b, #120d10 50%, #0b090a);
    color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; line-height:1.7;
  }
  img{max-width:100%; height:auto; display:block}
  a{color:#fff; text-decoration:none}
  .container{max-width:1200px; margin:0 auto; padding:0 20px}

  /* Header */
  header{background:linear-gradient(90deg,#150d10,#1a1015); border-bottom:1px solid var(--line)}
  .bar{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0}
  .logo{display:flex; align-items:center; gap:12px}
  .mark{width:36px; height:36px; border-radius:12px; background:radial-gradient(circle at 30% 30%, var(--red-2), var(--red)); box-shadow:0 8px 24px rgba(226, 28, 67, .45)}
  .brand{font-weight:800; letter-spacing:.4px}
  nav a{padding:10px 12px; border-radius:10px}
  nav a:hover{background:rgba(255,255,255,0.06)}
  .cta{background:linear-gradient(180deg,var(--red-2),var(--red)); padding:10px 16px; border-radius:999px; font-weight:700; box-shadow:0 10px 25px rgba(226,28,67,.35); border:1px solid rgba(255,255,255,0.06)}
.mobile-top-stack{display:none}
@media (max-width:768px){
  .mobile-top-stack{display:block;margin:0;padding:0}
  .mobile-top-stack a{display:block;line-height:0}
  .mobile-top-stack img{width:100%;height:auto;display:block}
}
  /* Mobile menu */
  .menu-toggle{display:none}
  @media (max-width: 960px){
    nav{display:none}
    .menu-toggle{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(255,255,255,0.06); border-radius:12px}
    .drawer{display:none; background:var(--panel); border-top:1px solid var(--line)}
    .drawer.open{display:block}
    .drawer a{display:block; padding:14px 20px; border-bottom:1px solid var(--line)}
  }

  /* Hero */
  .hero{position:relative; padding:56px 0 28px; background:radial-gradient(1200px 400px at 50% -200px, rgba(226,28,67,0.22), transparent)}
  .hero-wrap{display:grid; grid-template-columns: 1.1fr 0.9fr; gap:30px; align-items:center}
  .badge{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.06); border:1px solid var(--line); padding:8px 12px; border-radius:999px; font-size:.92rem}
  .headline{font-size:clamp(28px, 5vw, 48px); line-height:1.15; margin:16px 0; font-weight:900}
  .lead{color:var(--muted)}
  .card{background:linear-gradient(180deg,#1a1216,#140f12); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
  .card.pad{padding:18px}

  /* Sections */
  section{padding:56px 0; border-top:1px solid var(--line)}
  h2{font-size:clamp(22px, 3.6vw, 34px); margin:0 0 16px}
  .grid-3{display:grid; grid-template-columns: repeat(3,1fr); gap:20px}
  .grid-2{display:grid; grid-template-columns: repeat(2,1fr); gap:20px}
  @media (max-width: 960px){ .hero-wrap{grid-template-columns:1fr} .grid-3,.grid-2{grid-template-columns:1fr} }

  /* Portfolio */
  .shots{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px}
  .shots img{border-radius:14px; border:1px solid var(--line)}
  @media (max-width: 960px){ .shots{grid-template-columns:1fr 1fr} }

  /* FAQ */
  details{background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:12px; padding:10px 14px}
  summary{cursor:pointer; font-weight:700}
  details+details{margin-top:10px}

  /* Footer */
  footer{padding:40px 0; background:#110c0f; border-top:1px solid var(--line); color:var(--muted)}
  .foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:20px}
  @media (max-width: 960px){ .foot-grid{grid-template-columns:1fr} }

  /* Mobile-only slide-down CTA popup (not sticky header) */
  .m-pop{display:none}
  @media (max-width: 960px){
    .m-pop{position:fixed; left:16px; right:16px; top:-220px; z-index:999; transition:.45s cubic-bezier(.2,.8,.2,1)}
    .m-pop.show{top:16px}
    .m-pop .inner{background:linear-gradient(180deg,#201117,#151015); border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 40px rgba(0,0,0,.45); overflow:hidden}
    .m-pop .row{display:flex; align-items:center; gap:10px; padding:14px}
    .m-pop .row .txt{font-weight:700}
    .m-pop .row .btns{margin-left:auto; display:flex; gap:8px}
    .m-pop .close{background:rgba(255,255,255,.08); border:1px solid var(--line); padding:8px 10px; border-radius:10px}
  }

  /* Forms */
  input, textarea, select{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,0.03); color:#fff}
  label{display:block; margin:10px 0 6px; font-weight:600}
  .btn{display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,0.08); background:linear-gradient(180deg,var(--red-2),var(--red)); box-shadow:0 10px 25px rgba(226,28,67,.35); color:#fff; font-weight:800}
  .muted{color:var(--muted)}
  .kicker{color:var(--gold); font-weight:700; letter-spacing:.2px}
  .sep{height:1px; background:var(--line); margin:14px 0}
</style>

<!-- ========================= script.js ========================= -->
<script>
  // Mobile drawer toggle (header not sticky, just a simple menu)
  function toggleDrawer(){
    var d = document.querySelector('.drawer');
    if(!d) return; d.classList.toggle('open');
  }
  // Mobile-only slide-down CTA popup after scroll
  (function(){
    var pop = null, closed = false;
    function init(){ pop = document.querySelector('.m-pop'); }
    window.addEventListener('scroll', function(){
      if(closed) return; if(!pop) init(); if(!pop) return;
      if(window.innerWidth <= 960){ if(window.scrollY > 240){ pop.classList.add('show'); } }
    });
    window.addEventListener('click', function(e){
      if(e.target && e.target.classList.contains('m-pop-close')){ closed = true; pop.classList.remove('show'); }
    });
  })();
</script>