/* Tyler Casey – Digital & AI-Literate Marketing Portfolio (2025) */
:root{
  --bg:#0b0c10; --panel:#0f1117; --muted:#8b94a7; --text:#e9eefc;
  --brand:#6aa6ff; --brand-2:#b066ff; --radius:16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35); --ring: 0 0 0 3px rgba(106,166,255,.35);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f9ff; --panel:#ffffff; --text:#0b0c10; --muted:#5c6475;
         --shadow: 0 10px 30px rgba(0,0,0,.08) }
  body{background:#f7f9ff}
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(106,166,255,.12), transparent 50%),
    radial-gradient(1200px 600px at 90% 20%, rgba(176,102,255,.12), transparent 50%),
    var(--bg);
  color:var(--text);
  font:16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.grad-text{background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-background-clip:text;color:transparent}
a{color:var(--text); text-decoration:none} a:hover{opacity:.92}
.container{max-width:1100px;margin:0 auto;padding:24px}

/* Header / Nav */
.header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(150%) blur(8px);
  background:rgba(11,12,16,.6); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; gap:18px; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px}
.brand .dot{width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 0 18px rgba(106,166,255,.65)}
.brand h1{font-size:16px;margin:0;letter-spacing:.2px;font-weight:700}
.menu{display:flex; gap:14px; flex-wrap:wrap}
.menu a{padding:8px 12px;border-radius:10px;color:#cfe0ff}
.menu a.active, .menu a:hover{
  background:linear-gradient(135deg, rgba(106,166,255,.18), rgba(176,102,255,.18));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
/* Mobile nav */
.hamburger{display:none; background:transparent; border:1px solid rgba(255,255,255,.16); padding:10px 12px; border-radius:10px; color:#cfe0ff}
@media (max-width:800px){
  .menu{display:none; position:absolute; right:16px; top:64px; background:var(--panel); padding:12px; border-radius:12px; box-shadow:var(--shadow)}
  .menu.open{display:flex; flex-direction:column}
  .hamburger{display:block}
}

/* Hero */
.hero{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:36px; align-items:center;
  padding:56px 24px; border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  margin-top:24px; box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.06);
  animation: fadeUp .6s ease both;
}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.hero h2{font-size:38px; line-height:1.2; margin:0 0 14px; letter-spacing:.2px}
.hero p{color:#c9d4f4; margin:0 0 20px}

.badges{display:flex; gap:8px; flex-wrap:wrap}
.badge{font-size:12px; color:#dbe7ff; border:1px solid rgba(255,255,255,.1);
  padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.03)}

.cta{display:flex; gap:12px; margin-top:12px; flex-wrap:wrap}
.btn{
  padding:12px 16px; border-radius:12px; font-weight:600; letter-spacing:.2px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:white; border:none;
  box-shadow:0 10px 24px rgba(106,166,255,.3); cursor:pointer; transition:transform .15s ease;
}
.btn.secondary{background:transparent; color:#cfe0ff; border:1px solid rgba(255,255,255,.14)}
.btn:focus{outline:none; box-shadow:var(--ring)} .btn:hover{transform:translateY(-1px)}

/* Cards / Sections */
.card-grid{display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); margin-top:24px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:18px; box-shadow:var(--shadow);
  transition: transform .15s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0,0,0,.45) }
.card h3{margin:0 0 8px}
.card p{margin:0; color:#c9d4f4}

.section{margin:54px 0}
.section h2{font-size:26px; margin:0 0 10px}
.kicker{color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.2em; font-size:12px; margin-bottom:6px}

.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:22px;
}
.list{display:grid; gap:12px}
.list li{list-style:none; padding-left:12px; border-left:2px solid rgba(106,166,255,.4)}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.figure{border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow); background:#0d0f14}
.figure img{width:100%; height:100%; object-fit:cover; object-position:center center; display:block}

/* Ensure hero image is in frame/visible at load */
.figure img[loading="eager"]{contain:content}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}

/* Forms / Footer */
.form{display:grid; gap:12px; max-width:640px}
input, textarea{
  background:#0e1016; border:1px solid rgba(255,255,255,.12); color:var(--text);
  padding:12px 14px; border-radius:12px; font:inherit
}
textarea{min-height:140px; resize:vertical}
input:focus, textarea:focus{outline:none; box-shadow:var(--ring)}
label{font-weight:600; color:#d7e6ff}
small{color:#9ca8c6}
.footer{margin:48px 0 16px; color:#8b94a7; font-size:14px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; opacity:.9}

/* Music */
.audio-card audio, .soundcloud-embed{width:100%; min-height:166px; border:0; border-radius:12px; overflow:hidden}