/* ===== Theme: Deep blues/purples, brushed metal, dark red accents ===== */
*,
*::before,
*::after { box-sizing: border-box }

:root{
  --ink:#E9EDF4;              /* text */
  --muted:#9BA7BE;            /* secondary text */
  --bg:#0c1320;               /* deep base */
  --bg2:#121a2f;              /* gradient stop */
  --panel:#172338;            /* panel base */
  --panel2:#1e2c48;           /* panel gradient */
  --line:rgba(255,255,255,.08);
  --gloss:rgba(255,255,255,.35);
  --shadow:#01060d;

  /* dark red accents */
  --accent:#8e1b1b;
  --accent-2:#c12a2a;
}

/* ===== Base ===== */
html,body { height:100% }
body{
  margin:0;
  color:var(--ink);
  font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  /* Deep vignette + faint purple/blue gradient, NO lines */
  background:
    radial-gradient(1200px 600px at 15% 15%, rgba(60,90,160,.16), transparent 60%),
    radial-gradient(1200px 500px at 85% 65%, rgba(140,60,160,.14), transparent 70%),
    linear-gradient(180deg, #0d1426 0%, #111b33 45%, #0b1222 100%);
}

/* Subtle page grain with no stripes (soft vignette only) */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  /* extremely soft fog/vignette */
  background:
    radial-gradient(900px 500px at 70% 10%, rgba(255,255,255,.04), transparent 70%),
    radial-gradient(1200px 700px at 30% 90%, rgba(0,0,0,.35), transparent 60%);
  mix-blend-mode:soft-light;
  opacity:.9;
}

/* ===== Typography ===== */
h1,h2,h3,h4,h5,h6{
  font-family:"Teko", system-ui, sans-serif;
  letter-spacing:.5px;
  margin:0 0 10px;
}
h1.display{ font-size: clamp(32px, 4vw, 56px); line-height:1.05; }
h2{ font-size: clamp(22px, 2.5vw, 34px); }
h3{ font-size: clamp(18px, 2vw, 22px); }
.muted{ color:var(--muted) }
code{ padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.06); }

/* Brand lockup */
.brand{ color:var(--ink); text-decoration:none; display:flex; gap:10px; align-items:center }
.brand-mark{
  font:700 14px/1 "Russo One", sans-serif;
  letter-spacing:1px;
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:7px;
  background:linear-gradient(180deg, #2a3755, #172338);
  color:#cfe3ff;
  border:1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 6px 16px rgba(0,0,0,.4);
}
.brand-text{
  font:700 16px/1 "Russo One", sans-serif;
  letter-spacing:.5px;
}

/* ===== Layout ===== */
.container{ width:min(1100px, 92vw); margin-inline:auto; padding:0 0 }
.section{ padding:72px 0 }
.section.alt{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    linear-gradient(180deg, #111b2f 0%, #0f1728 100%);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.05);
}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(10,19,36,.92), rgba(10,19,36,.75));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-flex{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0 }

.site-nav{ display:flex; align-items:center; gap:18px }
.site-nav a{
  color:var(--ink); text-decoration:none; padding:8px 14px; border-radius:10px;
  border:1px solid transparent;
}
.site-nav a:hover{ color:#fff; border-color:var(--line); background:rgba(255,255,255,.03) }

.nav-toggle{ display:none }

/* ===== Buttons ===== */
.btn{
  display:inline-block; padding:10px 16px; border-radius:12px;
  border:1px solid var(--line); background:linear-gradient(180deg, #263455, #16243c);
  color:var(--ink); text-decoration:none; font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.08) inset;
}
.btn.primary{
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color:#5f0e0e; color:#fff;
  box-shadow:0 10px 24px rgba(194,33,33,.45), 0 1px 0 rgba(255,255,255,.08) inset;
}
.btn:hover{ transform:translateY(-1px); }

/* ===== Panels / Cards / Tiles (brushed metal look without stripes) ===== */
.metal{
  position:relative;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:
    0 18px 30px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -1px 0 rgba(0,0,0,.35) inset;
}
/* gentle gloss highlight */
.metal::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(80% 140% at 20% 0%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(110% 160% at 110% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(160% 100% at 80% 120%, rgba(0,0,0,.25), transparent 70%);
  border-radius:inherit;
  pointer-events:none;
}

/* subtle crimson glow on focus/hover */
.metal:is(:hover,:focus-within){
  box-shadow:
    0 18px 34px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 0 999px rgba(0,0,0,0) inset,
    0 0 40px rgba(142,27,27,.25);
}

.pad-lg{ padding:18px }

/* Tiles & Cards grids */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px; margin-top:16px }
.tile{ display:block; padding:18px; color:var(--ink); text-decoration:none }
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:16px; margin-top:14px }
.card{ min-height:160px; display:grid; place-items:center; text-align:center; color:var(--ink); text-decoration:none }
.card-label{ opacity:.9 }

/* ===== Hero ===== */
.hero{ position:relative; overflow:hidden; }
.hero .container{ display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center }
.hero-card{ height:260px; }
.tagline{ color:var(--muted); margin:6px 0 12px }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap }

/* A soft dark-red wash low in the hero */
.hero::before{
  content:""; position:absolute; inset:auto -15% 0 -15%; height:260px;
  background:
    radial-gradient(60% 140% at 20% 40%, rgba(142,27,27,.22), transparent 65%),
    radial-gradient(60% 160% at 80% 60%, rgba(70,16,16,.30), transparent 70%);
  filter: blur(40px);
  pointer-events:none;
}

/* ===== Forms ===== */
.contact-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px }
input, textarea{
  width:100%; padding:12px; border-radius:10px; color:var(--ink);
  background:#0f1a2b; border:1px solid rgba(255,255,255,.12);
}
textarea{ resize:vertical }
.form-note{ font-size:12px; color:var(--muted); margin-top:6px }

/* ===== Footer ===== */
.site-footer{ border-top:1px solid rgba(255,255,255,.08); padding:24px 0; background:#0b1424 }
.footer-grid{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap }
.socials a{ color:var(--muted); text-decoration:none; margin-left:12px }
.socials a:hover{ color:var(--ink) }

/* ===== Responsive ===== */
@media (max-width: 860px){
  .hero .container{ grid-template-columns:1fr; align-items:flex-start; gap:14px; padding:12px 0 }
  .hero-card{ height:220px }
  .site-nav{ display:none }
  .nav-toggle{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:10px;
    background:#152036; color:var(--ink); border:1px solid var(--line) }
  .site-nav.open{ display:flex; flex-direction:column; gap:10px; background:#0f1a2b; padding:12px; border:1px solid var(--line); border-radius:12px; margin:6px 0 0 }
  .contact-form .form-row{ grid-template-columns:1fr }
}
/* ===== Spotify player (metal + dark red accent) ===== */
.player-wrap{
  margin: 16px 0;                  /* breathing room */
  display: flex;
  justify-content: flex-start;     /* change to center if you want it centered */
}

.spotify-player{
  display: block;
  width: 100%;
  max-width: 860px;                /* keeps it from getting too wide */
  height: 232px;                   /* matches Spotify default */
  border: none;
  border-radius: 12px;             /* smooth corners */
  /* subtle metal feel behind the iframe chrome */
  background: linear-gradient(145deg, #2f3236, #1b1d20);
  /* raised look + faint inner highlight */
  box-shadow:
    0 8px 20px rgba(0,0,0,0.45),
    inset 0 1px 2px rgba(255,255,255,0.18);
  /* dark red trim (tweak to taste) */
  border: 1px solid #6a1414;
}

@media (max-width: 480px){
  .spotify-player{ height: 180px; } /* shorter on phones */
}
/* ====== THEME VARS ====== */
:root{
  --bg:#0b0d10;           /* site bg */
  --steel:#1e232a;        /* brushed steel */
  --edge:#c23;            /* dark red accent */
  --edge2:#ff3b3b;        /* hot red for glow peaks */
  --txt:#e8eaee;          /* text */
  --glass:#ffffffcc;      /* highlight */
}

/* Optional site body colors */
body{ background: var(--bg); color: var(--txt); }

/* ====== SHINE SWEEP ====== */
.shine {
  position: relative;
  color: var(--txt);
  overflow: hidden;
  isolation: isolate;
}
.shine::after{
  content:"";
  position:absolute; inset:-20% -120% -20% -120%;
  background: linear-gradient(100deg,
    transparent 40%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.55) 54%,
    rgba(255,255,255,0.12) 58%,
    transparent 68%);
  transform: translateX(-60%) rotate(8deg);
  animation: shineSweep 3.2s cubic-bezier(.22,.61,.36,1) infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}
@keyframes shineSweep {
  0%   { transform: translateX(-60%) rotate(8deg); opacity: 0.2; }
  48%  { opacity: 1; }
  100% { transform: translateX(60%)  rotate(8deg); opacity: 0.2; }
}

/* ====== BRUSHED METAL SECTION ====== */
.brushed {
  background:
    repeating-linear-gradient(90deg, #161a1f 0 1px, #13171b 1px 2px),
    linear-gradient(180deg, #0f1318, #0b0f13 60%, #0a0d11);
  box-shadow: inset 0 1px 0 #2a2f37, inset 0 -1px 0 #080a0d;
  border: 1px solid #1c2127;
  border-radius: 16px;
}

/* ====== FUTURISTIC BUTTONS ====== */
.button {
  --radius: 14px;
  --padY: .9rem; --padX: 1.2rem;
  --glow: 0 0 0 transparent;
  position: relative;
  display: inline-flex; align-items:center; gap:.6rem;
  padding: var(--padY) var(--padX);
  border-radius: var(--radius);
  background: linear-gradient(180deg,#1d232b,#14181e);
  color: var(--txt);
  border: 1px solid #2a313a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 18px rgba(0,0,0,.35),
    var(--glow);
  text-decoration:none; font-weight:600; letter-spacing:.02em;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.button::after{
  content:"";
  position:absolute; inset:-30% -120% -30% -120%;
  background: linear-gradient(100deg,
    transparent 45%, rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.6) 52%, rgba(255,255,255,.18) 56%,
    transparent 62%);
  transform: translateX(-80%) rotate(12deg);
  opacity:0; pointer-events:none; mix-blend-mode: screen;
}
.button:hover::after{
  animation: btnSheen 1.6s cubic-bezier(.22,.61,.36,1);
  opacity:1;
}
@keyframes btnSheen {
  0%   { transform: translateX(-80%) rotate(12deg); opacity:.2; }
  100% { transform: translateX(80%)  rotate(12deg); opacity:.8; }
}

/* Neon edge variant */
.button--neo {
  border: 1px solid color-mix(in srgb, var(--edge) 60%, #fff 10%);
  box-shadow:
    inset 0 0 10px rgba(255,59,59,.06),
    0 0 18px rgba(255,59,59,.12),
    0 0 38px rgba(255,59,59,.08);
  background:
    radial-gradient(120% 160% at 10% 10%, rgba(255,59,59,.14), transparent 40%),
    linear-gradient(180deg, #1a1f26, #12161b);
}
.button--neo:hover{
  --glow: 0 0 22px rgba(255,59,59,.35);
  border-color: color-mix(in srgb, var(--edge2) 70%, #fff 15%);
  transform: translateY(-1px) scale(1.01);
}
.button--neo:active{ transform: translateY(0) scale(.995); }

/* Ghost / holographic variant */
.button--holo{
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--txt) 30%, #ff3b3b 20%);
  box-shadow: inset 0 0 12px rgba(255,255,255,.05);
}
.button--holo:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

/* Smaller chip size */
.button--chip{
  --padY: .55rem; --padX: .8rem; --radius: 12px;
  font-weight:500;
}

/* Subtle breathing glow */
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 24px rgba(255,59,59,.15), inset 0 0 12px rgba(255,59,59,.06); }
  50%     { box-shadow: 0 0 42px rgba(255,59,59,.28), inset 0 0 18px rgba(255,59,59,.10); }
}
.button--pulse { animation: pulseGlow 2.8s ease-in-out infinite; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .shine::after, .button::after, .button--pulse { animation: none !important; }
  .button { transition: none !important; }
}