:root{
  --bg-deep:#0b0907;
  --bg-warm:#15110d;
  --gold:#e2c16a;
  --gold-deep:#b78f3d;
  --ink:#f6f3ec;
  --muted:#d7d0c5;
  --line:#3a2d1f;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow-x:hidden;
}

.bg-overlay{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  contain:layout paint size;
}
.bg-overlay > *{position:absolute; inset:0}
.bg-gradient{
  background:
    radial-gradient(900px 600px at 85% -10%, #1b150f 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #241b13 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-warm), var(--bg-deep));
}
#bg{width:100%; height:100%; display:block}
.vignette{
  background: radial-gradient(65% 85% at 50% 40%, transparent 60%, rgba(0,0,0,.30) 100%);
}

html{scroll-behavior:smooth; scroll-snap-type:y proximity}
.section{min-height:100vh; display:grid; align-items:center; scroll-snap-align:start}

.shell{max-width:1200px; margin:0 auto; padding:0 24px}
.card{
  background:#14100dcc; border:1px solid var(--line);
  border-radius:20px; padding:22px; box-shadow:0 14px 50px rgba(0,0,0,.45)
}
.glass-strong{
  backdrop-filter:saturate(120%) blur(8px);
  background: linear-gradient(180deg, rgba(20,16,13,.82), rgba(18,14,11,.74));
  border: 1px solid rgba(231,200,115,.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 12px 40px rgba(0,0,0,.45),
    0 0 0 1px rgba(231,200,115,.06);
}

.site-header{position:sticky; top:0; z-index:20; padding:14px 0}
.header-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-radius:16px;
  background:linear-gradient(180deg, rgba(16,12,9,.75), rgba(14,11,9,.65));
  border:1px solid rgba(231,200,115,.26);
  box-shadow:
    0 12px 40px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 0 1px rgba(231,200,115,.08);
  backdrop-filter: blur(10px);
}

.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--ink)}
.logo-img{
  width:34px; height:34px; border-radius:10px;
  object-fit:contain; background:#0e0b09;
  box-shadow:0 0 24px rgba(226,193,106,.35);
  display:block;
}
.word b{opacity:.92}

.header-actions{display:flex; align-items:center; gap:10px}
.nav{display:flex; gap:8px}
.nav .pill{
  color:var(--ink); text-decoration:none; font-weight:700;
  padding:8px 12px; border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(231,200,115,.18);
}
.nav .pill:hover{background:rgba(255,255,255,.12)}

.x-btn{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--ink); text-decoration:none; font-weight:700;
  padding:8px 12px; border-radius:12px;
  background: rgba(255,255,255,.07);
  border:1px solid rgba(231,200,115,.22);
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
}
.x-btn:hover{ background: rgba(255,255,255,.12) }
.x-btn svg{ display:block }

.hero{grid-template-columns:1.2fr .8fr; gap:28px; position:relative}
@media (max-width:980px){ .hero{grid-template-columns:1fr} }

.hero::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:min(680px, 92%); height:72%;
  background: radial-gradient(70% 85% at 40% 45%, rgba(10,8,6,.78), rgba(10,8,6,.48) 60%, rgba(10,8,6,0) 85%);
  border:1px solid rgba(231,200,115,.14);
  border-radius:24px; z-index:0;
}
.hero-col, .hero-card{position:relative; z-index:1}

.title{
  font-family:Gloock, serif;
  color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.35);
  font-size: clamp(44px, 6.4vw, 82px);
  line-height:0.98; margin:0 0 10px;
}
.accent{
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent
}
.lede{
  color:var(--muted);
  font-size:clamp(17px,2vw,21px);
  max-width:64ch;
  text-shadow:0 1px 0 rgba(0,0,0,.35)
}
.cta{display:flex; gap:12px; margin:22px 0}
.stack{margin:10px 0 0; padding-left:18px; color:#cec6ba}

.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{
  padding:8px 12px; border-radius:999px;
  background:#00000040; border:1px solid var(--line)
}
.stats{display:flex; gap:18px; margin-top:14px}
.stats .n{font-family:Gloock, serif; font-size:28px; display:block}

.two-col{grid-template-columns:1fr 1fr; gap:22px}
@media (max-width:980px){ .two-col{grid-template-columns:1fr} }
.two-col h2{
  font-family:Gloock, serif; font-size:clamp(30px, 4vw, 44px);
  margin:0 0 10px
}
.grid-3.tight{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:900px){ .grid-3.tight{grid-template-columns:1fr} }
.mini{background:#100d0a; border:1px solid var(--line); border-radius:14px; padding:16px}

.contact{text-align:center}
.contact-form{max-width:640px; margin:18px auto 0; display:grid; gap:12px}
.contact-form input,.contact-form textarea{
  width:100%; padding:14px 16px; border-radius:14px;
  border:1px solid var(--line); background:#0e0b09; color:var(--ink)
}
.note{color:#c8c0b4; font-size:.9rem}
.foot{margin-top:12px; color:#a89e90}

.btn{
  display:inline-block; padding:12px 18px; border-radius:999px;
  border:1px solid var(--line); text-decoration:none; font-weight:800
}
.btn.primary{
  background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#1a130a;
  box-shadow:0 10px 34px rgba(226,193,106,.28)
}
.btn.text{background:transparent; border-color:transparent; color:var(--ink)}

.toast{
  position:fixed; right:24px; bottom:24px; z-index:40;
  max-width:360px;
  padding:12px 14px 14px;
  display:flex; gap:12px; align-items:flex-start;
  color:var(--ink);
  background: linear-gradient(180deg, rgba(20,16,13,.92), rgba(18,14,11,.86));
  border:1px solid rgba(231,200,115,.25);
  border-radius:14px;
  box-shadow:0 16px 48px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
  opacity:0; transform: translateY(8px) scale(0.98);
  pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.toast .icon{
  width:22px; height:22px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:#1a130a;
  background: radial-gradient(circle at 35% 35%, var(--gold), var(--gold-deep));
  box-shadow:0 0 18px rgba(226,193,106,.45);
}
.toast .msg{ line-height:1.25 }
.toast .progress{
  margin-top:10px; height:2px; width:100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  border-radius:2px;
  transform-origin:left; transform:scaleX(1);
}

@media (max-width: 1024px){
  .shell{ padding: 0 18px; }
  .site-header{ padding: 10px 0; }
  .header-bar{ padding: 8px 12px; border-radius: 14px; }

  .nav .pill{ padding: 6px 10px; font-size: 0.95rem; }
  .header-actions{ gap: 8px; }

  .title{ font-size: clamp(36px, 8vw, 64px); }
  .lede{ font-size: clamp(15px, 2.6vw, 18px); }

  .hero::before{
    width: min(620px, 96%);
    height: 70%;
  }

  .card{ padding: 18px; }
  .grid-3.tight{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px){
  html{ scroll-snap-type: y proximity; }
  .section{ min-height: 100svh; }

  .header-actions{ gap: 6px; }
  .brand .word{ font-size: 0.95rem; }

  .nav .pill{ padding: 6px 9px; font-size: .9rem; }

  .x-btn span{ display:none; }
  .x-btn{ padding: 8px; }

  .hero{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero::before{
    left: -8px;
    width: calc(100% + 16px);
    height: 62%;
    border-radius: 20px;
  }

  .title{ font-size: clamp(32px, 9vw, 52px); }
  .card{ padding: 16px; border-radius: 16px; }

  .two-col{ grid-template-columns: 1fr; }
  .grid-3.tight{ grid-template-columns: 1fr; }

  .contact-form{ max-width: 100%; }
  .stats{ gap: 14px; }
}

@media (max-width: 400px){
  .header-bar{ padding: 6px 8px; border-radius: 12px; }
  .logo-img{ width: 30px; height: 30px; }
  .brand .word{ display:none; }

  .nav .pill{ padding: 6px 8px; font-size: .85rem; }

  .hero::before{ height: 56%; }
  .title{ font-size: 30px; }
  .btn{ padding: 10px 14px; }

  .toast{
    right: 12px; left: 12px; bottom: 12px;
    max-width: unset;
  }
}