:root{
  --bg:#0a0a0a; --panel:#111113; --fg:#f5f5f6; --muted:#a1a1aa; --line:#222226;
  --accent:#d8c38f; --accent-ink:#0a0a0a;
  --radius:12px; --radius-sm:9px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:72px;
  --w: clamp(16px, 1.6vw, 18px);
  --lh: 1.6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font: 500 var(--w)/var(--lh) ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--fg); background:var(--bg);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

img{max-width:100%; display:block; border-radius:var(--radius)}
a{color:inherit}
.container{max-width:1180px; margin-inline:auto; padding-inline: clamp(var(--space-5), 4vw, var(--space-7));}
.narrow{max-width:880px; margin:0 auto}
.small{font-size:.9rem}
.muted{color:var(--muted)}
.caption{color:var(--muted); font-size:.95rem}
.section{padding: clamp(var(--space-7), 10vw, var(--space-8)) 0; border-top:1px solid var(--line)}
.section.alt{background:linear-gradient(to bottom, rgba(255,255,255,.02), transparent)}

.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:0;top:0;width:auto;height:auto;background:#fff;color:#000;padding:8px;border-radius:6px;z-index:1000}

.site-header{position:sticky;top:0;z-index:10;background:rgba(10,10,10,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between; padding-block:14px}
.logo{font-weight:700; letter-spacing:.5px; text-decoration:none}
.submark{color:var(--muted); font-weight:500; margin-left:.3rem; font-size:.95em}
.nav-toggle{display:none}
.nav-list{display:flex;gap: clamp(12px, 2vw, 24px); list-style:none; margin:0; padding:0}
.nav-list a{padding:10px 12px; text-decoration:none; border-radius:8px; transition:background .2s}
.nav-list a:hover{background:#141416}

.hero{padding: clamp(56px, 10vw, 120px) 0}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 5vw, 56px); align-items:center}
.hero-copy h1{font-size: clamp(34px, 6vw, 62px); line-height:1.08; margin:0 0 12px}
.version-badge{display:inline-block; font-weight:600; letter-spacing:.3px; font-size:.85rem; color:#0a0a0a; background:var(--accent); padding:6px 10px; border-radius:999px; margin-bottom:12px}
.lede{font-size: clamp(18px, 2.2vw, 22px); color:var(--muted); margin:0 0 20px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.hero-figure{position:relative; overflow:hidden}
.hero-figure img, .hero-video{border-radius:18px; width:100%; height:auto}
.hero-video{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-1}

.pillars{display:grid;gap:20px;grid-template-columns:repeat(3,1fr); list-style:none; padding:0;margin:28px 0 0}
.pillars h3{margin:.2rem 0 .3rem}
.pillars p{margin:0;color:var(--muted)}

.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 5vw, 48px); align-items:center}
.craft-figure img{border-radius:18px}

.spec-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-top:20px}
.spec-grid article{background:var(--panel); border:1px solid var(--line); padding:18px; border-radius:var(--radius)}
.spec-grid h3{margin-top:0}
.spec-grid ul{margin:0; padding-left:18px; color:var(--muted)}

.gallery-slider{position:relative; overflow:hidden; margin-top:18px}
.gallery-track{display:flex; transition:transform 0.3s ease}
.gallery-slide{flex:0 0 100%; display:none}
.gallery-slide.active{display:block}
.gallery-slide img{width:100%; height:auto; border-radius:18px}
.gallery-slide figcaption{margin-top:8px; color:var(--muted); font-size:.95rem; text-align:center}
.gallery-prev, .gallery-next{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.5); color:#fff; border:none; padding:10px; cursor:pointer; border-radius:50%; font-size:18px; z-index:10}
.gallery-prev{left:10px}
.gallery-next{right:10px}
.gallery-dots{display:flex; justify-content:center; margin-top:10px}
.gallery-dots .dot{width:10px; height:10px; border-radius:50%; background:#ccc; margin:0 5px; cursor:pointer}
.gallery-dots .dot.active{background:var(--accent)}

.form-grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column}
label{margin: 0 0 6px}
input, select, textarea{
  appearance:none; background:var(--panel); border:1px solid var(--line); color:var(--fg);
  border-radius:var(--radius-sm); padding:12px 14px; font:inherit;
}
textarea{resize:vertical}
.hp{position:absolute;left:-5000px}
.error{color:#ffb4b4; min-height:1.2em; margin:.2rem 0 0}
.status{margin-top:10px; color:var(--muted)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:var(--accent-ink); border:0; padding:12px 16px;
  border-radius: 999px; text-decoration:none; font-weight:700; cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease; box-shadow: 0 6px 16px rgba(216,195,143,.18);
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0)}
.btn-ghost{background:transparent; color:var(--fg); border:1px solid var(--line); box-shadow:none}
.btn-small{padding:8px 12px; font-weight:600}

.pricing-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-top:20px}
.pricing-card{background:var(--panel); border:1px solid var(--line); padding:24px; border-radius:var(--radius); text-align:center}
.pricing-card.featured{border-color:var(--accent); position:relative}
.pricing-card.featured::before{content:'Most Popular'; position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:var(--accent); color:#0a0a0a; padding:4px 8px; border-radius:4px; font-size:.8rem; font-weight:600}
.pricing-card h3{margin-top:0}
.pricing-card .price{font-size:1.5rem; font-weight:700; color:var(--accent); margin:8px 0}
.pricing-card ul{list-style:none; padding:0; margin:16px 0; color:var(--muted)}
.pricing-card ul li{margin:4px 0}

.testimonials-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; margin-top:20px}
.testimonials-grid blockquote{background:var(--panel); border:1px solid var(--line); padding:20px; border-radius:var(--radius); margin:0}
.testimonials-grid blockquote p{margin:0 0 12px; font-style:italic}
.testimonials-grid blockquote cite{color:var(--muted); font-size:.9rem}

.site-footer{border-top:1px solid var(--line); padding:24px 0 40px}
.footer-inner{display:grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items:start}
.brand-block{display:flex; align-items:center; gap:12px}
.footer-nav{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.legal{color:var(--muted); display:grid; gap:6px}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr; gap:12px}
  .spec-grid{grid-template-columns:1fr; gap:12px}
  .pricing-grid{grid-template-columns:1fr; gap:12px}
  .testimonials-grid{grid-template-columns:1fr; gap:12px}
  .nav-toggle{display:inline-flex; background:transparent; color:var(--fg); border:1px solid var(--line); padding:8px 10px; border-radius:8px}
  .nav-list{position:absolute; right:16px; top:56px; display:none; flex-direction:column; background:var(--panel); border:1px solid var(--line); padding:8px; border-radius:10px}
  .nav-list.open{display:flex}
}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important}
}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}