:root{--bg:#0B1026;--text:#F0F0F0;--neon:#D97706;--r:18px;--max:100ch;--s4:32px}
html,body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 system-ui,Inter,Segoe UI,Roboto,sans-serif}
a{color:var(--neon);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .18s}
a:hover{background-size:100% 2px}
.wrap{max-width:var(--max);margin:auto;padding:var(--s4)}


:root{
  --neon:#D97706;
}

a{
  color: var(--neon);
  text-decoration: none;
  background: linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;
  transition: background-size .18s;
}
a:hover{ background-size: 100% 2px; }

.card{
  display:grid; gap:12px; grid-template-columns: 120px 1fr;
  align-items:center; padding:20px; border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 10px 30px rgba(0,0,0,.35);
  position:relative; transition:transform .18s, box-shadow .18s;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 0 8px rgba(122,252,255,.25), 0 18px 40px rgba(0,0,0,.45); }
.card img{ width:120px; height:80px; object-fit:cover; border-radius:12px; }
.card h3{ margin:0; font-size:1.1rem; }
.meta{ color:var(--muted); font-size:.9rem; }
.tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{ padding:2px 8px; border-radius:999px; font-size:.8rem; color:#001015;
  background:radial-gradient(120% 120% at 10% 10%, var(--neon), #ff77e9); box-shadow:0 0 12px rgba(122,252,255,.35); }
.stretched{ position:absolute; inset:0; }
@media (max-width:640px){
  .card{ grid-template-columns: 1fr; }
  .card img{ width:100%; height:140px; }
}
/* smooth transforms for media */
.card .thumb{ transition: transform .18s, box-shadow .18s, filter .18s }

/* hover + keyboard focus glow */
.card:hover .thumb,
.card:focus-within .thumb{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 18px rgba(122,252,255,.45), 0 0 32px rgba(255,119,233,.25);
  filter: saturate(1.05);
}

@media (prefers-reduced-motion: reduce){
  .card .thumb{ transition: none }
}
.tag{
  padding:2px 10px; border-radius:999px; font-size:.8rem; border:1px solid rgba(255,255,255,.25);
  background:transparent; color:var(--text); cursor:pointer;
}
.tag.active-tag{
  color:#001015;
  background:radial-gradient(120% 120% at 10% 10%, var(--neon), #ff77e9);
  box-shadow:0 0 12px rgba(122,252,255,.35);
  border-color:transparent;
}
.hero{
  min-height: calc(100vh - 140px); /* fills most of the screen */
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;

  margin-left: auto;
  margin-right: auto;
  max-width: 50rem;

}

.hero h1{
  font-size: clamp(3.4rem, 4.8vw, 3.4rem);
  line-height:1.05;
  letter-spacing:.03em;
  text-shadow:0 0 18px rgba(122,252,255,.45);
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}

.tagline{
  font-size:1.05rem;
  color:var(--neon);
}

/* reuse your btn style if you already have it, otherwise: */
.btn{
  display:inline-block;
  margin-top:8px;
  padding:.6rem 1.2rem;
  border-radius:999px;
  font-weight:600;
  color: #1A2421;
  background: #D97706;
  box-shadow: 0 0 10px rgba(217,119,6,0.4);
}
.btn:hover{
  filter: brightness(1.1);
}

/* make hero content not too wide */
.hero{
  max-width: 70rem;
}
.main-nav a {
  margin-left: 24px; /* space between items */
  font-weight: 500;
}

.main-nav a:first-child {
  margin-left: 0;
}
/* 2-column hero layout */
.hero-grid{
  display: grid;
  gap: 40px;
  align-items: center;
  grid-template-columns: 420px 1fr; /* left flexible, right fixed */
  margin-top: 40px;
}
.hero-social{
  grid-column: 1 / -1;
}

/* responsive: stack on mobile */
@media (max-width: 900px){
  .hero-grid{
    grid-template-columns: 1fr;
    text-align:left;
  }
  .hero-photo{
    justify-self:center;
  }
}

/* photo styling */
.hero-photo img{
  width: 100%;
  height: auto;
  border-radius: 18px;          /* soft rounded rectangle */
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 8px 32px rgba(0,0,0,.45),
    0 0 24px rgba(122,252,255,.25); /* neon glow */
  display: block;
}
.hero-social{
  grid-column: 1 / -1;       /* span across both hero columns */
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
.social-icon{
  width:56px;
  height:56px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.35); /* outline */
  background:rgba(0,0,0,.4);              /* subtle, not full neon blob */
  color:var(--text);
  cursor:pointer;
  transition:transform .15s, box-shadow .15s, border-color .15s, color .15s;
}

.social-icon i{
  font-size:1.55rem;
}

.social-icon:hover,
.social-icon:focus-visible{
  transform:translateY(-1px) scale(1.05);
  border-color:var(--neon);
  box-shadow:0 0 18px rgba(122,252,255,.65), 0 0 28px rgba(255,119,233,.4);
  color:var(--neon);
}


.social-icon span{
  pointer-events: none;
}