:root{
  --bg-0:#1c1512;
  --bg-1:#201914;
  --fg-0:#f4e7d8;
  --fg-1:#d9c3b1;
  --muted:#a28978;
  --accent-0:#e29a66;
  --accent-1:#ffb47f;
  --shadow:0,0,0;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:
    radial-gradient(1100px 800px at 50% 45%, var(--bg-1) 0%, var(--bg-0) 60%),
    var(--bg-0);
  color:var(--fg-0);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.hold{
  min-height:100dvh;
  display:grid;
  place-content:center;
  place-items:center;
  gap:clamp(12px,2vw,22px);
  padding-block: clamp(24px,6vh,72px);
  padding-inline:clamp(16px,5vw,72px);
  text-align:center;
}

.hero-image{
  width:min(1200px,92vw);
  height:auto;
  filter:
    drop-shadow(0 32px 60px rgba(var(--shadow),.55))
    drop-shadow(0 4px 14px rgba(226,154,102,.18));
  user-select:none;
}

.brand{
  margin:0;
  font-weight:800;
  font-size:clamp(28px,6.2vw,58px);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--fg-0);
  text-shadow:0 1px 0 rgba(var(--shadow),.55), 0 0 24px rgba(226,154,102,.18);
}

.subtitle{
  margin:0;
  font-weight:600;
  font-size:clamp(14px,2.4vw,18px);
  color:var(--muted);
}
.brand::before,.brand::after{
  content:"";
  display:block;
  width:min(320px,60vw);
  height:2px;
  margin:12px auto 10px;
  background:
    linear-gradient(90deg, transparent 0 10%, var(--accent-0) 10% 25%, transparent 25% 75%, var(--accent-0) 75% 90%, transparent 90% 100%);
  opacity:.55;
}
.brand::before{ margin-top:2px }

.foot{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  padding:10px 16px;
  display:flex;
  justify-content:center;
  font:600 12px/1.4 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color:var(--fg-1);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.35) 30%, rgba(0,0,0,.6));
  backdrop-filter:saturate(120%) blur(2px);
}
@media (prefers-reduced-motion: no-preference){
  .hero-image{ transition: transform .6s cubic-bezier(.2,.75,.2,1) }
  .hold:hover .hero-image{ transform: translateY(-2px) }
}

@media (max-width:520px){
  .brand::before,.brand::after{ width:min(240px,70vw) }
}