/* ── RESET & VARS ── */
*,
*::before,
*::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}

:root {
     --bg: #090909;
     --surface: #111111;
     --border: #ff6a00;
     --primary: #ff6a00;
     --primary-dim: #cc5200;
     --muted: #664400;
     --text: #ff8c33;
     --text-dim: #995500;
     --font-pixel: 'Press Start 2P', monospace;
     --font-mono: 'Share Tech Mono', monospace;
}

html {
     scroll-behavior: smooth;
}

body {
     background: var(--bg);
     color: var(--text);
     font-family: var(--font-mono);
     min-height: 100vh;
     overflow-x: hidden;
     position: relative;
}

/* ── CRT EFFECTS ── */
.scanlines {
     pointer-events: none;
     position: fixed;
     inset: 0;
     z-index: 100;
     background: repeating-linear-gradient(to bottom,
               transparent 0px,
               transparent 3px,
               rgba(0, 0, 0, 0.18) 3px,
               rgba(0, 0, 0, 0.18) 4px);
}

.noise {
     pointer-events: none;
     position: fixed;
     inset: 0;
     z-index: 99;
     opacity: 0.03;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
     background-size: 150px 150px;
}

/* ── LAYOUT ── */
.hub {
     max-width: 680px;
     margin: 0 auto;
     padding: 5rem 2rem 3.5rem;
     display: flex;
     flex-direction: column;
     gap: 3rem;
}

/* ── HERO ── */
.hero {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1.5rem;
}

.blink-cursor {
     font-family: var(--font-pixel);
     font-size: 1.4rem;
     color: var(--primary);
     animation: blink 1s step-end infinite;
}

@keyframes blink {

     0%,
     100% {
          opacity: 1;
     }

     50% {
          opacity: 0;
     }
}

.name {
     font-family: var(--font-pixel);
     font-size: clamp(1.3rem, 4.5vw, 2.1rem);
     color: var(--primary);
     text-shadow:
          0 0 8px var(--primary),
          0 0 24px var(--primary-dim);
     letter-spacing: 0.05em;
     line-height: 1.6;
}

.tagline {
     font-family: var(--font-mono);
     font-size: clamp(1rem, 2.8vw, 1.15rem);
     color: var(--text);
     opacity: 0.9;
     max-width: 500px;
}

.sub {
     font-family: var(--font-mono);
     font-size: 0.9rem;
     color: var(--text-dim);
     letter-spacing: 0.1em;
}

/* ── DIVIDER ── */
.divider {
     text-align: center;
     color: var(--muted);
     font-family: var(--font-mono);
     font-size: 0.85rem;
     letter-spacing: 0.15em;
     user-select: none;
}

/* ── LINKS / CARDS ── */
.links {
     display: flex;
     flex-direction: column;
     gap: 1rem;
}

.card {
     display: flex;
     align-items: center;
     gap: 1.2rem;
     padding: 1.2rem 1.5rem;
     background: var(--surface);
     border: 1px solid var(--border);
     text-decoration: none;
     color: var(--text);
     position: relative;
     transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
     /* pixel corner effect */
     clip-path: polygon(0 4px, 4px 4px, 4px 0,
               calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
               100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
               4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}

.card:hover {
     background: #1a0d00;
     transform: translateX(4px);
     box-shadow: -4px 0 0 var(--primary), 0 0 18px rgba(255, 106, 0, 0.15);
}

.card-icon {
     font-size: 1.5rem;
     flex-shrink: 0;
     width: 2.2rem;
     text-align: center;
}

.card-info {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 0.3rem;
}

.card-title {
     font-family: var(--font-pixel);
     font-size: 0.7rem;
     color: var(--primary);
     line-height: 1.8;
     letter-spacing: 0.05em;
}

.card-desc {
     font-family: var(--font-mono);
     font-size: 0.875rem;
     color: var(--text-dim);
}

.card-arrow {
     font-size: 0.875rem;
     color: var(--muted);
     transition: color 0.15s, transform 0.15s;
}

.card:hover .card-arrow {
     color: var(--primary);
     transform: translateX(3px);
}

/* ── FOOTER ── */
.footer {
     text-align: center;
     border-top: 1px solid #1a0d00;
     padding-top: 1.75rem;
}

.footer-text {
     font-family: var(--font-mono);
     font-size: 0.8rem;
     color: var(--text-dim);
}

/* ── RESPONSIVE ── */
@media (max-width: 400px) {
     .hub {
          padding: 3rem 1.2rem 2.5rem;
     }

     .card-title {
          font-size: 0.58rem;
     }
}