:root{
  --bg: #0E1A24;
  --panel: #0F2230;
  --ink: #0B1016;
  --ink-2:#3B4856;
  --ink-on-accent: #ffffff;
  --text: #E7ECF1;
  --muted: #b7c4d1;
  --surface: #0f1720;
  --accent:#00C2B8;
  --accent-2:#47A0FF;
  --ring: rgba(0,194,184,.25);

  --container: 1200px;
  --radius: 14px;
  --radius-sm: 10px;

  --space-1:.35rem;
  --space-2:.65rem;
  --space-3:1rem;
  --space-4:1.5rem;
  --space-5:2rem;
  --space-6:3rem;

  --shadow-lg: 0 10px 30px rgba(0,0,0,.35);
  --shadow-md: 0 6px 16px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}

/* Base typography & page background */
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55;
  color:var(--text);

  /* Solid base gradient only (no blobs here) */
  background: linear-gradient(180deg, #091119 0%, #0E1A24 100%);
  position: relative; /* for ::before stacking context */
}

/* Decorative gradient layer that does NOT scroll with content */
body::before{
  content:"";
  position: fixed;
  inset: -20vh -20vw;         /* oversize to avoid viewport edges */
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 80% -10rem, rgba(0,194,184,.14), transparent 60%),
    radial-gradient(45rem 30rem at -10rem 50%, rgba(71,160,255,.12), transparent 60%);
  background-repeat: no-repeat;
  /* tiny transform to keep a stable GPU layer and avoid banding */
  transform: translateZ(0);
  filter: blur(0.0001px);
}

/* Containers & typography */
.container{max-width:var(--container); margin-inline:auto; padding-inline: clamp(1rem, 3vw, 2rem);}
.nowrap{white-space:nowrap}
.lead{font-size: clamp(1.05rem, 1.2vw + .9rem, 1.25rem); color:var(--muted)}
h1,h2,h3{line-height:1.2; margin:0 0 .6em;}
h1{font-size: clamp(1.8rem, 1.5vw + 1.8rem, 3rem);}
h2{font-size: clamp(1.5rem, .7vw + 1.4rem, 2rem);}
h3{font-size: clamp(1.15rem, .5vw + 1.05rem, 1.3rem);}

.muted{color:var(--muted)}
.micro{color:#9ab0c2; font-size:.9rem; margin-top:var(--space-3)}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(10px);
  background: rgba(10,16,22,.55);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{display:flex; gap:.6rem; align-items:center; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.2px}
.logo{width:28px; height:28px}
nav a{
  color:var(--text); text-decoration:none; margin-left: clamp(.6rem, 1.2vw, 1.2rem);
  opacity:.9;
}
nav a:hover{opacity:1; text-decoration:underline}

/* Hero */
.hero{position:relative; min-height: 68vh; display:grid; place-items:stretch; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06)}
.hero picture, .hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: saturate(1.05) contrast(1.02) brightness(.85)}
.hero__overlay{
  position:relative; z-index:2;
  background: linear-gradient(180deg, rgba(10,16,22,.55), rgba(10,16,22,.85) 70%, rgba(10,16,22,.95));
  display:grid; align-items:end;
}
.hero__content{padding-block: clamp(3rem, 8vh, 8rem)}
.actions{display:flex; gap: .75rem; margin-top:1rem; flex-wrap:wrap}

/* Buttons */
.btn{
  --bg: var(--accent);
  --fg: #001318;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.75rem 1rem; border-radius: 999px;
  background: var(--bg); color: var(--fg); font-weight:700; text-decoration:none;
  box-shadow: var(--shadow-md); border:1px solid rgba(255,255,255,.12);
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow-lg)}
.btn:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
.btn--primary{--bg: linear-gradient(135deg, var(--accent), var(--accent-2)); --fg:#fff}
.btn--linkedin{background:#0a66c2; color:#fff}
.btn--linkedin .li{width:18px; height:18px}

/* Sections */
.section{padding-block: clamp(2.5rem, 6vw, 5rem);}

/* Was a background gradient; now an overlay to avoid mixing with page bg */
.section--alt{ position: relative; background: transparent; }
.section--alt::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%);
  pointer-events:none;
}

.section--cta{
  background: linear-gradient(180deg, rgba(71,160,255,.06), rgba(0,194,184,.06));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* Columns */
.cols{display:grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: repeat(1, 1fr);}
@media (min-width: 900px){ .cols{grid-template-columns: 1.2fr .8fr;} }

/* Cards */
.card{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); overflow:hidden; box-shadow: var(--shadow-md);
  margin-bottom: var(--space-3);
}
.card img{width:100%; height:auto; display:block}
.card__body{padding: 1rem 1rem 1.1rem;}

/* Checklist */
.checklist{padding-left:1.2rem}
.checklist li{margin:.4rem 0}

/* Features */
.features{
  display:grid; gap: clamp(1rem, 3vw, 1.5rem);
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
}
.feature{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 1.1rem 1rem;
  box-shadow: var(--shadow-md);
}
.feature__icon{font-size:1.4rem; line-height:1}

/* Gallery (CSS masonry via columns) */
.gallery{
  column-width: 320px;
  column-gap: var(--space-3);
}
.gallery figure{
  break-inside: avoid; margin: 0 0 var(--space-3) 0;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  overflow:hidden;
  box-shadow: var(--shadow-md);
}
.gallery img{width:100%; height:auto; display:block}
.gallery figcaption{
  padding:.6rem .75rem;
  font-size:.95rem; color:var(--muted); background: rgba(0,0,0,.25);
  border-top:1px solid rgba(255,255,255,.06);
}

/* Contact cards */
.contact-cards{
  display:grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 1rem;
}
.contact-card{
  display:flex; align-items:center; gap:.8rem;
  padding: .9rem 1rem;
  text-decoration:none; color:var(--text);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.contact-card:hover{background: rgba(255,255,255,.06)}
.contact-card svg{width:28px; height:28px}

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding-block: 1.2rem;
  color: var(--muted);
}
.site-footer .container{display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap}
.back-to-top{color:var(--muted); text-decoration:none}
.back-to-top:hover{text-decoration:underline}

/* Lightbox */
.lb{
  position: fixed; inset:0; background: rgba(5,10,15,.9);
  display:none; align-items:center; justify-content:center; z-index:2000;
}
.lb[open]{display:flex}
.lb__img{max-width: min(92vw, 1400px); max-height: 86vh; border-radius:12px; box-shadow: var(--shadow-lg)}
.lb__caption{color:#cfe0ee; text-align:center; margin-top:.6rem}
.lb__btn{
  position: absolute; top: 12px; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; padding:.55rem .75rem; border-radius: 999px; cursor:pointer
}
.lb__btn:focus-visible{outline:3px solid var(--ring)}
.lb__close{right: 12px}
.lb__prev{left: 12px; top: calc(50% - 22px)}
.lb__next{right: 12px; top: calc(50% - 22px)}
.lb__counter{position:absolute; bottom: 12px; left: 50%; transform: translateX(-50%); color:#aecdde; font-size:.9rem}

/* Small viewport tweaks */
@media (max-width: 480px){
  .actions{flex-direction:column; align-items:flex-start}
  .brand span{display:none}
}

/* News section */
.news-card {
  background: var(--surface, #0f172a0a);
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 16px;
  padding: clamp(1rem, 2vw, 1.5rem);
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
}
.news-card__header h3 { margin-bottom: .25rem; }
.news-meta { color: var(--muted, #6b7280); font-size: .95rem; margin-bottom: .75rem; }
.news-details { margin-top: .5rem; }
.news-details summary { cursor: pointer; }


/* Center the button + embed as a stack */
.news-actions{
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
  margin-inline: auto;       /* center the whole block */
  justify-items: center;     /* center the children */
}

.spotify-embed{
  width: 100%;
  margin-inline: auto;       /* make sure iframe container is centered */
}
.spotify-embed iframe{
  display: block;
  width: 100%;
}