:root{
  --bg:#0b0f14;
  --bg-soft:#0f141b;
  --fg:#e6ecf1;
  --muted:#9fb0c3;
  --primary:#4778c7; /* static, darker blue */
  --accent:#5c8fd6;
  --card:rgba(255,255,255,0.06);
  --glass:rgba(15,20,27,0.55);
  --border:rgba(90,140,200,0.35);
  --shadow:0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);

  /* Code/dev hero images */
  --hero0:url('hero1.png');
  --hero1:url('hero2.png');
  --hero2:url('hero3.png');
  --hero3:url('hero4.png');
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--fg);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(71,120,199,0.08), transparent 60%),
    radial-gradient(1200px 800px at 90% -10%, rgba(92,143,214,0.08), transparent 60%),
    var(--bg);
  line-height:1.6;
}

/* Static border frame (no rotation animation) */
.site-frame{
  min-height:100dvh;
  border:1px solid transparent;
  background:
    linear-gradient(var(--bg-soft),var(--bg-soft)) padding-box,
    linear-gradient(135deg, rgba(71,120,199,0.6), rgba(92,143,214,0.6)) border-box;
  border-radius:18px;
  margin:12px;
  box-shadow: var(--shadow);
}

.section{ padding: clamp(48px,6vw,96px) 0; }
.section.alt{ background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%); }
.container{ width:min(1200px, 92vw); margin:0 auto; }
.grid-2{ display:grid; gap:28px; grid-template-columns: 1.1fr 0.9fr; }
@media (max-width: 900px){ .grid-2{ grid-template-columns:1fr; } }

.card{ border-radius:16px; overflow:hidden; box-shadow: var(--shadow); border:1px solid var(--border); }
.glass{ background: var(--glass); backdrop-filter: blur(12px); }
.pad-20{ padding:20px; } /* utility for About and Credentials */

.card.media img{ display:block; width:100%; height:100%; object-fit:cover; }
.card.media figcaption{ padding:10px 14px; color:var(--muted); font-size:.9rem; background:rgba(0,0,0,.25); }

.hero{ position:relative; height:72vh; min-height:520px; border-bottom:1px solid rgba(255,255,255,.05); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; background-position:center; background-size:cover; opacity:0; transition:opacity 1200ms ease; }
.hero-bg-0{ background-image: var(--hero0); }
.hero-bg-1{ background-image: var(--hero1); }
.hero-bg-2{ background-image: var(--hero2); }
.hero-bg.active{ opacity:0.45; }
.hero-overlay{
  position:relative; z-index:2; height:100%; display:grid; place-content:center;
  text-align:center; padding: 0 6vw;
  background: radial-gradient(800px 400px at 50% 20%, rgba(0,0,0,.35), transparent 60%);
}
.hero-title{ font-size: clamp(36px, 6vw, 64px); margin:.2rem 0 .4rem; letter-spacing:.4px; }
.hero-sub{ display:block; font-size: clamp(16px,2vw,20px); color:var(--muted); margin-top:8px; }
.hero-punch{ margin: 12px auto 24px; max-width: 850px; font-size: clamp(16px,2vw,20px); color:#d5e6ff; }
.hero-tag{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.tag-chip{ border:1px solid var(--border); color:#cfe0f7; background:rgba(0,0,0,.35); padding:6px 10px; font-size:.85rem; border-radius:999px; }
.hero-cta{ display:flex; gap:12px; justify-content:center; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:12px; text-decoration:none; cursor:pointer; border:1px solid var(--border); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn.primary{ background: linear-gradient(180deg, #4a7fcf, #3a6ab0); color:#FFFFFF; font-weight:700; text-shadow:none; }
.btn.primary:hover{ transform: translateY(-1px); box-shadow:0 8px 24px rgba(71,120,199,.35); }
.btn.ghost{ background: linear-gradient(180deg, #4a7fcf, #3a6ab0); color:#FFFFFF; font-weight:700; text-shadow:none; }
.btn.ghost:hover{ transform: translateY(-1px); box-shadow:0 8px 24px rgba(71,120,199,.35); }

h2{ font-size: clamp(24px,3vw,36px); margin: 0 0 14px; letter-spacing:.3px; }
.badges{ display:flex; gap:8px; flex-wrap:wrap; padding:0; list-style:none; margin:16px 0 0; }
.badges li{ border:1px dashed var(--border); padding:6px 10px; border-radius:999px; color:#cfe8ff; font-size:.9rem; }

.skills-grid{ display:grid; gap:14px; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){ .skills-grid{ grid-template-columns:1fr 1fr; } }
.skill{ border:1px solid var(--border); background: linear-gradient(180deg, rgba(71,120,199,.08), rgba(92,143,214,.05)); border-radius:14px; padding:16px; }

.work-grid{ display:grid; gap:18px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1100px){ .work-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 700px){ .work-grid{ grid-template-columns:1fr; } }
.work img{ width:100%; height:200px; object-fit:cover; }
.work-body{ padding:14px 16px 18px; }
.image-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:16px; }
.image-row img{ width:100%; height:180px; object-fit:cover; border-radius:12px; border:1px solid var(--border); }

.tick-list{ margin:0; padding-left:1.1em; }
.tick-list li{ margin: .4em 0; }

.form{ padding:18px; }
.form-grid{ display:grid; gap:14px; grid-template-columns: 1fr 1fr; }
.form-grid .full{ grid-column: 1 / -1; }
label span{ display:block; font-size:.95rem; color:#c3d8ee; margin-bottom:6px; }
input, textarea{ width:100%; padding:12px 12px; background:#0a1119; color:var(--fg); border:1px solid rgba(90,140,200,.35); border-radius:10px; outline:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
input:focus, textarea:focus{ border-color:#5c8fd6; }
textarea{ min-height:130px; resize:vertical; }
.captcha{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.captcha-q{ display:flex; align-items:center; gap:10px; font-weight:700; }
.actions{ display:flex; align-items:center; gap:16px; margin-top:8px; }
#formNote{ color:#bfe4ff; font-size:.95rem; }

.footer{ border-top:1px solid rgba(255,255,255,.06); padding:24px 0; text-align:center; color:var(--muted); }

.hero-bg-3{ background-image: var(--hero3); }

.hero-title, .hero-sub, .hero-punch, .hero-tag, .hero-cta {
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.hero-title, .hero-sub, .hero-punch, .hero-tag, .hero-cta {
  color: #FFFFFF !important;
  text-shadow: 0 3px 6px rgba(0,0,0,0.85);
}