/* ========================================
HADI AL SAIF - CHEMICAL ENGINEERING PORTFOLIO
========================================= */
/* ========================================
GLOBAL STYLES
========================================= */
:root {
  --bg:#05080d; --white:#f7fbff; --muted:#91a0af;
  --cyan:#42d9e8; --cyan2:#b7f5fa; --copper:#d29a5a;
  --copper2:#f0c48d; --line:rgba(174,187,200,.16);
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  margin:0; color:var(--white); background:radial-gradient(circle at 8% 12%,rgba(210,154,90,.12),transparent 24%),radial-gradient(circle at 92% 72%,rgba(66,217,232,.09),transparent 28%),var(--bg);
  font-family:Manrope,sans-serif;
}
body:before {
  content:""; position:fixed; inset:0;
  z-index:-1; opacity:.28; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:54px 54px; mask-image:radial-gradient(circle,#000,transparent 78%);
}
a {
  color:inherit;
}
.topbar {
  display:flex; position:fixed; top:18px;
  right:24px; left:24px; z-index:10;
  align-items:center; justify-content:space-between; width:min(1180px,calc(100% - 48px));
  margin:auto; padding:11px 14px 11px 18px; background:rgba(5,8,13,.8);
  border:1px solid var(--line); border-radius:18px; backdrop-filter:blur(18px);
}
.brand {
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.brand-mark {
  display:grid; width:42px; height:42px;
  place-items:center; color:#071015; background:linear-gradient(135deg,var(--copper2),var(--cyan2));
  border-radius:12px; font:800 18px Orbitron;
}
.brand strong {
  display:block; font:700 12px Orbitron; letter-spacing:1px;
}
.brand small {
  color:var(--muted); font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase;
}
.nav ul {
  display:flex; gap:5px; margin:0;
  padding:0; list-style:none;
}
.nav a {
  display:block; padding:10px 13px; color:var(--muted);
  border-radius:10px; font-size:11px; font-weight:800;
  letter-spacing:1px; text-decoration:none; text-transform:uppercase;
}
.nav a:hover {
  color:var(--white); background:rgba(66,217,232,.08);
}
.nav .gate-link {
  border:1px solid rgba(210,154,90,.26);
}
.wrap {
  width:min(1180px,calc(100% - 40px)); margin:auto;
}
.hero {
  display:grid; min-height:100svh; align-items:center;
  padding:130px 0 70px;
}
.hero-grid {
  display:grid; grid-template-columns:1.25fr .75fr; align-items:center;
  gap:70px;
}
.kicker {
  display:flex; align-items:center; gap:9px;
  margin:0 0 20px; color:var(--cyan); font-size:11px;
  font-weight:800; letter-spacing:2.6px; text-transform:uppercase;
}
.kicker:before {
  content:""; width:32px; height:1px;
  background:var(--cyan);
}
h1 {
  margin:0; font:800 clamp(3.3rem,7vw,7rem)/.94 Orbitron; letter-spacing:-.055em;
  text-transform:uppercase;
}
.gradient {
  display:block; background:linear-gradient(90deg,var(--copper),#fff0db 50%,var(--cyan2)); background-clip:text;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-copy {
  max-width:720px; margin:26px 0 0; color:#a8b5c2;
  font-size:clamp(16px,2vw,20px); line-height:1.8;
}
.actions {
  display:flex; flex-wrap:wrap; gap:13px;
  margin-top:30px;
}
.button {
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 22px; border-radius:999px; font-size:11px;
  font-weight:800; letter-spacing:1.5px; text-decoration:none;
  text-transform:uppercase;
}
.primary {
  color:#061015; background:linear-gradient(135deg,var(--copper2),#f8e4ca 48%,var(--cyan2));
}
.secondary {
  border:1px solid rgba(174,187,200,.25);
}
.emblem {
  display:grid; position:relative; aspect-ratio:1;
  place-items:center;
}
.emblem:before,.emblem:after {
  content:""; position:absolute; inset:8%;
  border:1px solid rgba(210,154,90,.3); border-radius:30%; transform:rotate(45deg);
}
.emblem:after {
  inset:20%; border-color:rgba(66,217,232,.28); animation:turn 16s linear infinite;
}
.core {
  display:grid; z-index:1; width:46%;
  aspect-ratio:1; place-items:center; background:linear-gradient(145deg,#111a28,#05090e);
  border:1px solid var(--line); border-radius:28px; box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.core span {
  font:800 clamp(3rem,7vw,6rem) Orbitron; background:linear-gradient(135deg,var(--copper2),#fff,var(--cyan2)); background-clip:text;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.orbit {
  position:absolute; right:3%; bottom:12%;
  padding:9px 14px; color:var(--cyan2); background:#081019;
  border:1px solid rgba(66,217,232,.22); border-radius:999px; font-size:9px;
  font-weight:800; letter-spacing:1.8px; text-transform:uppercase;
}
.section {
  padding:90px 0;
}
.heading {
  display:flex; align-items:end; justify-content:space-between;
  gap:30px; margin-bottom:32px;
}
.number {
  color:var(--copper); font:700 11px Orbitron; letter-spacing:2px;
}
.section h2 {
  margin:7px 0 0; font:700 clamp(2rem,4vw,3.8rem)/1 Orbitron; text-transform:uppercase;
}
.intro {
  max-width:520px; margin:0; color:var(--muted);
  line-height:1.7;
}
.glass {
  background:linear-gradient(145deg,rgba(14,21,32,.84),rgba(7,11,17,.9)); border:1px solid var(--line); border-radius:24px;
  box-shadow:0 24px 55px rgba(0,0,0,.25);
}
.about {
  display:grid; grid-template-columns:1.15fr .85fr; gap:22px;
}
.about-copy {
  padding:clamp(28px,5vw,52px);
}
.about-copy p {
  margin:0; color:#b2bfca; font-size:clamp(16px,2vw,19px);
  line-height:1.9;
}
.college {
  display:flex; flex-direction:column; justify-content:center;
  align-items:center; padding:34px; text-align:center;
}
.college img {
  width:min(300px,94%); height:116px; padding:11px 15px;
  object-fit:contain; background:#fff; border:1px solid rgba(183,245,250,.42);
  border-radius:20px; box-shadow:0 0 36px rgba(66,217,232,.13);
}
.college h3 {
  margin:24px 0 5px; font:700 clamp(16px,2vw,21px) Orbitron; text-transform:uppercase;
}
.college p {
  margin:0; color:var(--cyan); font-size:11px;
  font-weight:800; letter-spacing:2px; text-transform:uppercase;
}
.journey {
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
}
.journey-card,.focus-card {
  position:relative; padding:32px;
}
.tag {
  display:inline-flex; padding:7px 11px; color:var(--copper2);
  background:rgba(210,154,90,.08); border:1px solid rgba(210,154,90,.2); border-radius:999px;
  font-size:9px; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase;
}
.journey-card>i {
  position:absolute; top:28px; right:28px;
  color:rgba(66,217,232,.24); font-size:38px;
}
.journey-card h3,.focus-card h3 {
  margin:22px 0 10px; font-size:21px;
}
.journey-card p,.focus-card p {
  margin:0; color:var(--muted); line-height:1.75;
}
.focus {
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.focus-icon {
  display:grid; width:50px; height:50px;
  place-items:center; color:var(--cyan); background:rgba(66,217,232,.07);
  border:1px solid rgba(66,217,232,.2); border-radius:14px; font-size:20px;
}
.focus-card:nth-child(2) .focus-icon {
  color:var(--copper2); background:rgba(210,154,90,.08); border-color:rgba(210,154,90,.22);
}
.quote {
  margin:40px auto 90px; padding:clamp(32px,6vw,60px); text-align:center;
}
.quote p {
  max-width:820px; margin:auto; color:#d8e2ea;
  font-size:clamp(20px,3vw,31px); font-weight:600; line-height:1.55;
}
.quote span {
  display:block; margin-top:22px; color:var(--copper2);
  font-size:10px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase;
}
footer {
  padding:28px; color:#637180; border-top:1px solid var(--line);
  font-size:11px; text-align:center;
}
@keyframes turn {
  to {
    transform:rotate(405deg);
  }
}
/* ========================================
HOVER INTERACTIONS
========================================= */
.nav a,.button,.about-copy,.college,.journey-card,.focus-card,.quote, .college img,.journey-card>i,.focus-icon {
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,color .3s ease,background-color .3s ease;
}
.nav a:focus-visible,.button:focus-visible {
  outline:2px solid var(--cyan); outline-offset:3px;
}
@media(hover:hover) and (pointer:fine) {
  .nav a:hover {
    transform:translateY(-2px);
  }
  .button:hover {
    transform:translateY(-4px); box-shadow:0 17px 36px rgba(210,154,90,.2);
  }
  .about-copy:hover,.college:hover,.journey-card:hover,.focus-card:hover {
    transform:translateY(-7px); border-color:rgba(66,217,232,.35); box-shadow:0 30px 68px rgba(0,0,0,.34),0 0 30px rgba(66,217,232,.08);
  }
  .college:hover img {
    transform:scale(1.035); box-shadow:0 0 42px rgba(66,217,232,.2);
  }
  .journey-card:hover>i {
    transform:translateY(-4px) rotate(-5deg); color:var(--cyan);
  }
  .focus-card:hover .focus-icon {
    transform:translateY(-4px) rotate(4deg) scale(1.08); color:var(--copper2); border-color:rgba(210,154,90,.38);
  }
  .quote:hover {
    transform:translateY(-5px); border-color:rgba(210,154,90,.42); box-shadow:0 32px 72px rgba(0,0,0,.34),0 0 34px rgba(210,154,90,.1);
  }
}
/* ========================================
RESPONSIVE DESIGN
========================================= */
@media(max-width:850px) {
  .nav a:not(.gate-link) {
    display:none;
  }
  .hero {
    min-height:auto; padding-top:140px;
  }
  .hero-grid,.about {
    grid-template-columns:1fr;
  }
  .emblem {
    width:min(420px,86%); margin:auto; order:-1;
  }
  .focus,.journey {
    grid-template-columns:1fr;
  }
  .heading {
    align-items:start; flex-direction:column;
  }
  .college {
    order:-1;
  }
}
@media(max-width:520px) {
  .topbar {
    top:10px; right:10px; left:10px;
    width:calc(100% - 20px);
  }
  .brand small {
    display:none;
  }
  .wrap {
    width:calc(100% - 28px);
  }
  .hero {
    padding-top:115px;
  }
  .hero-grid {
    gap:32px;
  }
  .emblem {
    width:74%;
  }
  .section {
    padding:65px 0;
  }
  .about-copy,.college,.journey-card,.focus-card {
    padding:24px;
  }
  .actions .button {
    width:100%; justify-content:center;
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation-duration:.01ms!important; transition-duration:.01ms!important;
  }
}