:root{
  --bg:#050506;
  --gold-1:#f7c35a;
  --gold-2:#c98a24;
  --silver-1:#e7ecf1;
  --silver-2:#8b95a3;
  --graphite:#3d4149;
  --text:#f2ede2;
  --muted:#8d9096;
  --line: rgba(242,237,226,0.12);
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{ height:100%; background:var(--bg); overflow:hidden; }

body{
  font-family:'Inter', sans-serif;
  color:var(--text);
  position:relative;
  width:100%;
  height:100dvh;
}

/* ---------- edge accents (desktop: left/right, mobile: top/bottom) ---------- */
.accent{
  position:absolute;
  z-index:0;
  background-repeat:no-repeat;
  filter:saturate(1.05);
}

.accent-left{
  left:0; top:0; bottom:0; width:38vw;
  background-image:url("../assets/bg-left.jpg");
  background-size:cover;
  background-position:left center;
  mask-image:linear-gradient(to right, black 45%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, black 45%, transparent 100%);
  animation:driftX 40s ease-in-out infinite alternate;
}
.accent-right{
  right:0; top:0; bottom:0; width:38vw;
  background-image:url("../assets/bg-right.jpg");
  background-size:cover;
  background-position:right center;
  mask-image:linear-gradient(to left, black 45%, transparent 100%);
  -webkit-mask-image:linear-gradient(to left, black 45%, transparent 100%);
  animation:driftX 44s ease-in-out infinite alternate-reverse;
}
.accent-top, .accent-bottom{ display:none; }

@keyframes driftX{
  0%{ transform:scale(1.05) translateX(0); }
  100%{ transform:scale(1.14) translateX(1.5%); }
}
@keyframes driftY{
  0%{ transform:scale(1.06) translateY(0); }
  100%{ transform:scale(1.15) translateY(-1.8%); }
}

@media (max-width: 780px){
  .accent-left, .accent-right{ display:none; }
  .accent-top, .accent-bottom{ display:block; left:0; right:0; }
  .accent-top{
    top:0; height:34vh;
    background-image:url("../assets/bg-top.jpg");
    background-size:cover;
    background-position:center top;
    mask-image:linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom, black 40%, transparent 100%);
    animation:driftY 40s ease-in-out infinite alternate;
  }
  .accent-bottom{
    bottom:0; height:26vh;
    background-image:url("../assets/bg-bottom.jpg");
    background-size:cover;
    background-position:center bottom;
    mask-image:linear-gradient(to top, black 40%, transparent 100%);
    -webkit-mask-image:linear-gradient(to top, black 40%, transparent 100%);
    animation:driftY 46s ease-in-out infinite alternate-reverse;
  }

  .services{
    flex-direction:column;
    gap:7px;
  }
  .services .sep{ display:none; }
}

.vignette{
  position:absolute; inset:0; z-index:1;
  background: radial-gradient(ellipse at center 42%, rgba(5,5,6,0.15) 0%, rgba(5,5,6,0.65) 62%, rgba(5,5,6,0.94) 100%);
}

/* ---------- center stage ---------- */
.stage{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 24px;
  text-align:center;
}

.lockup-wrap{
  position:relative;
  display:inline-block;
}

.lockup{
  display:block;
  width: clamp(220px, 30vw, 380px);
  height:auto;
  filter: drop-shadow(0 6px 26px rgba(0,0,0,0.55));
}

.lockup-sheen{
  position:absolute;
  inset:0;
  pointer-events:none;
  mask-image:url("../assets/fractal-form-logo.svg");
  -webkit-mask-image:url("../assets/fractal-form-logo.svg");
  mask-size:100% 100%;
  -webkit-mask-size:100% 100%;
  mask-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;
  background:linear-gradient(115deg,
    transparent 35%,
    rgba(255,255,255,0.5) 47%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0.5) 53%,
    transparent 65%);
  background-size:260% 260%;
  mix-blend-mode:overlay;
  animation:sheen 9s ease-in-out infinite alternate;
}

@keyframes sheen{
  0%{ background-position: -30% -30%; }
  100%{ background-position: 100% 100%; }
}

.tagline{
  margin-top: clamp(14px, 2.2vw, 18px);
  font-family:'Inter', sans-serif;
  font-weight:400;
  font-size: clamp(13px, 1.8vw, 15px);
  letter-spacing: 0.01em;
  color: var(--muted);
  max-width: 30ch;
}

.rule{
  width:34px; height:1px;
  margin: clamp(18px, 3vw, 26px) 0;
  background: linear-gradient(to right, var(--gold-2), var(--silver-2));
  opacity:0.7;
}

.services{
  font-family:'JetBrains Mono', monospace;
  font-size: clamp(10.5px, 1.6vw, 12.5px);
  letter-spacing: 0.1em;
  text-transform:uppercase;
  color: var(--muted);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  gap: 4px 12px;
}
.services .sep{ color: var(--graphite); }
.services .live{ color: var(--gold-1); }

.status-row{
  margin-top: clamp(34px, 5.5vw, 48px);
  display:flex;
  align-items:center;
  gap:9px;
}
.dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--gold-1);
  box-shadow: 0 0 8px 1px rgba(247,195,90,0.65);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.4; transform:scale(0.7); }
}
.status-text{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--silver-2);
}

.contact{
  margin-top: 14px;
  font-family:'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--text);
  text-decoration:none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.contact:hover{ color: var(--gold-1); border-color: var(--gold-2); }

@media (prefers-reduced-motion: reduce){
  .accent-left, .accent-right, .accent-top, .accent-bottom, .dot, .lockup-sheen{ animation:none; }
}