:root {
  --bg: #2b0c12;
  --grain-opacity: 0.6;
  --grain-fade-duration: 3200ms;
  --grain-drift-speed: 90s;
  --grain-size: 220px 220px;
  --grain-top: 18%;
  --grain-bottom: 82%;

  --text: #ffffff;
  --muted: rgba(255,255,255,0.8);
  --accent: #ffffff;
  --btn-bg: rgba(255,255,255,0.08);
  --btn-bg-hover: rgba(255,255,255,0.12);
  --btn-border: rgba(255,255,255,0.18);
  --ring: rgba(255,255,255,0.18);
  --focus: 2px solid rgba(255,255,255,0.45);
}

/* RESET */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
html { color-scheme: dark; }
body {
  font-family: "Futura", "Futura PT", "Avenir Next", "Avenir", "Trebuchet MS", "Montserrat", "Arial", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100svh;
  display: grid;
  place-items: stretch;
  overflow-x: hidden;
  position: relative;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    #000 var(--grain-top),
    #000 var(--grain-bottom),
    transparent 100%
  );
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    #000 var(--grain-top),
    #000 var(--grain-bottom),
    transparent 100%
  );

  mix-blend-mode: color-burn;

  will-change: opacity, background-position;

  background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'>\<filter id='n'>\<feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/>\<feColorMatrix type='saturate' values='0'/>\<feComponentTransfer><feFuncA type='table' tableValues='0 0.12'/></feComponentTransfer>\</filter>\<rect width='100%' height='100%' filter='url(%23n)'/>\</svg>");
  background-repeat: repeat;
  background-size: 220px 220px;
  background-position: 0 0;

  animation:
    grainFade var(--grain-fade-duration) ease-out forwards,
    grainDrift var(--grain-drift-speed) linear infinite var(--grain-fade-duration);
}

@keyframes grainFade{
  from { opacity: 0; }
  to   { opacity: var(--grain-opacity); }
}

@keyframes grainDrift{
  from { background-position: 0 0; }
  to   { background-position: 220px 180px; } /* subtle diagonal drift */
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce){
  body::after{
    animation: grainFade var(--grain-fade-duration) ease-out forwards;
  }
}

/* Layout */
.site {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 3vw, 32px);
  gap: clamp(24px, 4vh, 48px);
}

/* Accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: var(--btn-bg);
  color: var(--text);
  outline: var(--focus);
  border-radius: 8px;
}

/* Hero */
.hero {
  display: grid;
  place-items: center;
  text-align: center;
  width: min(980px, 92vw);
  margin-top: clamp(6vh, 10vh, 16vh);
}
.logo {
  width: clamp(160px, 25vw, 420px);       /* ~25% of screen on desktop */
  height: auto;
  display: block;
  margin: 0 auto clamp(20px, 4vh, 36px);
  filter: drop-shadow(0 0 0 transparent);
}
@media (max-width: 768px) {
  .logo { width: clamp(200px, 55vw, 520px); } /* scale up proportion on mobile */
}

.tagline {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: clamp(16px, 2.4vw, 22px);
  margin: 24px 0 10px 0;
  color: var(--text);
}
.address {
  margin: 0;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--muted);
}
.address a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, opacity 160ms ease;
}
.address a:hover,
.address a:focus-visible {
  border-color: var(--btn-border);
  opacity: 0.9;
  outline: none;
}

/* Footer CTAs */
.footer {
  width: 100%;
  display: grid;
  place-items: center;
  gap: 16px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn {
  --_pad: clamp(12px, 1.8vw, 14px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--_pad) clamp(16px, 2.2vw, 22px);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1;
  transition: transform 140ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  will-change: transform;
  outline: none;
}
.btn:hover {
  transform: translateY(-1px) scale(1.03);
  background: var(--btn-bg-hover);
  border-color: var(--ring);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}
.btn:focus-visible { box-shadow: 0 0 0 3px var(--ring); }

.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
  opacity: 0.9;
}

/* Copyright */
.copyright {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.9;
}

/* Improve tap targets on mobile */
@media (hover: none) and (pointer: coarse) {
  .btn { padding: 16px 22px; }
}