/* Fonts */
@font-face {
  font-family: 'DigitalDisco';
  src: url('/fonts/DigitalDisco.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PixelOperator';
  src: url('/fonts/PixelOperator.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#0b0a0d;
  --muted:#9a9aa6;
  --accent:#b74141;
  --accent-2:#ff7b7b;
  --container:1100px;
}

*{box-sizing:border-box}
body{margin:0; font-family: 'PixelOperator', system-ui, monospace; background:linear-gradient(180deg,#070608 0%, #0b0a0d 100%); color:#eee; -webkit-font-smoothing:antialiased; font-size:20px; line-height:1.55}
.container{max-width:var(--container); margin:0 auto; padding:2rem}

.site-header{border-bottom:1px solid rgba(255,255,255,0.04);}
.header-inner{display:flex; align-items:center; justify-content:space-between}
.logo{margin:0; font-size:1.6rem}
.display{font-family:'DigitalDisco', 'PixelOperator', sans-serif; letter-spacing:0.5px}
.pixel{font-family:'PixelOperator', monospace; font-size:1.6rem}
.main-nav a{color:var(--muted); text-decoration:none; margin-left:1rem; font-size:1.2rem}

.hero{padding:4rem 0; background:linear-gradient(180deg, rgba(183,65,65,0.06), transparent 40%)}
.hero-title{font-size:3rem; margin:0 0 0.5rem}
.hero-sub{max-width:60ch; color:var(--muted); font-size:1.3rem}
.cta-row{margin-top:1.25rem}
.btn{display:inline-block; padding:0.75rem 1.2rem; border:1px solid rgba(255,255,255,0.06); color:#fff; background:transparent; text-decoration:none; margin-right:0.5rem; font-size:1.15rem}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2)); border:none}
.btn.disabled, .btn[aria-disabled="true"]{
  position:relative;
  cursor:not-allowed;
  opacity:0.55;
  filter:grayscale(40%);
  pointer-events:auto; /* allow hover for tooltip */
}
.btn.disabled:hover::after, .btn[aria-disabled="true"]:hover::after{
  content:attr(title);
  position:absolute;
  left:50%;
  top:8px;
  transform:translate(-50%,100%);
  background:#1e1d22;
  color:#fff;
  padding:0.35rem 0.6rem;
  font-size:1rem;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:4px;
  white-space:nowrap;
  pointer-events:none;
  z-index:10;
}

.features{padding:2rem 0}
.feature-list{columns:2; gap:1rem; list-style:disc; margin-left:1.25rem; font-size:1.4rem}

.media-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem}
.media-item{background:rgba(255,255,255,0.02); padding:1rem; border-radius:6px}
.screenshot.placeholder{height:160px; display:flex; align-items:center; justify-content:center; color:var(--muted); background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:4px}

/* Video styling */
.media-item video{display:block; width:100%; height:auto; border:1px solid rgba(255,255,255,0.08); background:#000;}
.media-item video::-webkit-media-controls-panel{background:rgba(0,0,0,0.35)}

.callout{padding:2rem; margin-top:1.5rem; border-top:1px solid rgba(255,255,255,0.03)}

.contact-form label{display:block; margin-bottom:1rem}
.contact-form input,.contact-form textarea{width:100%; padding:0.7rem; background:#0d0d10; border:1px solid rgba(255,255,255,0.04); color:#fff; font-family:'PixelOperator', monospace; font-size:1.15rem}

.site-footer{border-top:1px solid rgba(255,255,255,0.04); padding:1.5rem 0; margin-top:3rem}
.footer-inner{display:flex; align-items:center; justify-content:space-between}

.muted{color:var(--muted)}

/* Gradient links (match .btn.primary gradient) */
a:not(.btn){
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-decoration:none;
}
a:not(.btn):hover{ filter:brightness(1.1); text-decoration:underline; text-underline-offset:2px }
a:not(.btn):focus-visible{ outline:2px dashed var(--accent-2); outline-offset:2px }

@media (max-width:700px){
  .header-inner{flex-direction:column; gap:0.75rem}
  .hero-title{font-size:2rem}
  .feature-list{columns:1}
}