:root {
  --bg:      #0c0c0e;
  --surface: #111116;
  --card:    #18181f;
  --border:  #26262f;
  --yellow:  #d1dc26;
  --orange:  #e85520;
  --white:   #ffffff;
  --gray:    #888899;
  --light:   #ccccdd;
  --r:       10px;
  --heading: 'Barlow Condensed', sans-serif;
  --body:    'Inter', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--white);
  overflow-x: hidden;
  line-height: 1.65;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--yellow); }

/* ── Layout ── */
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
section { padding: 80px 0; }

/* ── Typography ── */
.eyebrow {
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 14px;
  display: block;
}

h2 {
  font-family: var(--heading);
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 800; line-height: 1.05;
  color: var(--white); margin-bottom: 18px;
}
h2 em { color: var(--yellow); font-style: normal; }

h3 {
  font-family: var(--heading);
  font-size: 20px; font-weight: 700;
  color: var(--white); margin-bottom: 8px;
  line-height: 1.2;
}

p { font-size: 14px; color: var(--light); line-height: 1.75; }
p.lead { font-size: 16px; color: var(--light); max-width: 580px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body);
  font-size: 13px; font-weight: 600;
  padding: 13px 26px; border-radius: 6px;
  text-decoration: none; border: none; cursor: pointer;
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
}
.btn:hover { opacity: .88; transform: translateY(-1px); }
.btn-y  { background: var(--yellow); color: #000; }
.btn-o  { background: var(--orange); color: #fff; }
.btn-gh { background: transparent; color: var(--white); border: 1px solid var(--border); }
.btn-gh:hover { border-color: var(--yellow); color: var(--yellow); }

/* ── Cards ── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 26px;
  transition: border-color .2s;
}
.card:hover { border-color: rgba(232,214,0,.3); }

/* ── Divider ── */
hr.sec { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ═══════════════════
   TOP BAR
═══════════════════ */
.topbar {
  background: #100f00;
  border-bottom: 1px solid rgba(232,214,0,.15);
  padding: 9px 20px;
  text-align: center;
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,.6);
}
.topbar strong { color: var(--yellow); font-weight: 700; }

/* ═══════════════════
   NAVBAR
═══════════════════ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(12,12,14,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1140px; margin: 0 auto;
  padding: 0 20px; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}

/* pixel logo */
.logo { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.logo-text {
  font-family: var(--heading);
  font-size: 26px; font-weight: 800; letter-spacing: 1px;
  line-height: 1;
}
.logo-text .p1{color:#ff2d78}.logo-text .p2{color:#ff9900}
.logo-text .p3{color:#ffe600}.logo-text .p4{color:#00e676}
.logo-text .p5{color:#00b0ff}.logo-text .p6{color:#e040fb}
.logo-text .p7{color:#ff2d78}.logo-text .p8{color:#ff9900}
.logo-tag {
  font-size: 10px; font-weight: 500; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gray);
}

.nav-right { display: flex; align-items: center; gap: 12px; }
.wa-link {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #25d366;
  text-decoration: none; padding: 7px 14px;
  border: 1px solid rgba(37,211,102,.25); border-radius: 20px;
  transition: background .2s;
}
.wa-link:hover { background: rgba(37,211,102,.07); }

/* ═══════════════════
   HERO
═══════════════════ */
.hero {
  min-height: 92vh;
  display: flex; align-items: center;
  background: radial-gradient(ellipse 90% 70% at 70% 40%, rgba(232,214,0,.055) 0%, transparent 60%),
              var(--bg);
  border-bottom: 1px solid var(--border);
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center;
}
.hero-left { padding: 60px 0; }

.collab-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.collab-chip {
  font-size: 11px; font-weight: 600; color: var(--gray);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 13px;
}
.collab-x { color: var(--border); font-size: 14px; }

.hero h1 {
  font-family: var(--heading);
  font-size: clamp(47px, 5vw, 64px);
  font-weight: 800; line-height: 1.0;
  margin-bottom: 10px; letter-spacing: .5px;
}
.hero h1 .y { color: var(--yellow); }
.hero h1 .o {
  background: linear-gradient(90deg, var(--orange), var(--yellow));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 16px; font-weight: 300; font-style: italic;
  color: rgba(255,255,255,.45); margin-bottom: 32px;
}

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }

.stats-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
}
.stat-box {
  padding: 18px 14px; text-align: center;
  background: var(--card);
  border-right: 1px solid var(--border);
}
.stat-box:last-child { border-right: none; }
.stat-box .sv {
  font-family: var(--heading);
  font-size: 24px; font-weight: 800;
  color: var(--yellow); display: block; line-height: 1;
}
.stat-box .sl { font-size: 11px; color: var(--gray); margin-top: 4px; line-height: 1.3; }

/* Hero right panel */
.hero-panel {
  background: var(--card);
  border: 1px solid rgba(232,214,0,.2);
  border-radius: 14px; padding: 32px;
}
.bca-big {
  font-family: var(--heading);
  font-size: 88px; font-weight: 800; line-height: 1;
  color: var(--white); letter-spacing: -2px;
  margin-bottom: 6px;
}
.bca-big span { color: var(--yellow); }

.uni-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 22px;
}
.uni-icon {
  width: 34px; height: 34px; border-radius: 6px;
  background: #0d2040; display: flex; align-items: center;
  justify-content: center; font-size: 18px; flex-shrink: 0;
}
.uni-name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.uni-loc  { font-size: 10px; color: var(--gray); }

.panel-features { display: flex; flex-direction: column; gap: 8px; }
.pf {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--light);
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 7px; padding: 9px 13px;
}
.pf-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--yellow);
}

/* ═══════════════════
   MARQUEE STRIP
═══════════════════ */
.strip {
  background: var(--yellow);
  overflow: hidden; padding: 14px 0;
}
.strip-track {
  display: flex; gap: 48px;
  animation: scroll 22s linear infinite;
  width: max-content;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.strip-item {
  font-family: var(--body);
  font-size: 13px; font-weight: 700;
  color: #000; white-space: nowrap;
  display: flex; align-items: center; gap: 10px;
}
.strip-dot { width: 4px; height: 4px; background: rgba(0,0,0,.3); border-radius: 50%; }

/* ═══════════════════
   MARKET / WHY
═══════════════════ */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.num-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
.num-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 20px;
}
.num-box .nv {
  font-family: var(--heading);
  font-size: 32px; font-weight: 800;
  color: var(--yellow); line-height: 1; margin-bottom: 6px;
  display: block;
}
.num-box.or .nv { color: var(--orange); }
.num-box .nd { font-size: 12px; color: var(--gray); line-height: 1.5; }

.profile-box {
  background: rgba(232,214,0,.05);
  border: 1px solid rgba(232,214,0,.18);
  border-radius: var(--r); padding: 22px; margin-bottom: 16px;
}
.profile-box .role {
  font-family: var(--heading);
  font-size: 20px; font-weight: 800; color: var(--yellow);
  margin-bottom: 6px;
}

.vs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vs-box {
  border-radius: 8px; padding: 14px 12px; text-align: center;
  font-size: 12px; font-weight: 600;
}
.vs-bad  { background: rgba(255,70,70,.07); border: 1px solid rgba(255,70,70,.2); color: #ff7070; }
.vs-good { background: rgba(232,214,0,.07); border: 1px solid rgba(232,214,0,.2); color: var(--yellow); }
.vs-box span { display: block; font-family: var(--heading); font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.vs-box small { font-size: 10px; opacity: .6; letter-spacing: .5px; text-transform: uppercase; display: block; margin-bottom: 6px; }

/* ═══════════════════
   BETTER CARDS
═══════════════════ */
.four-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 44px; }
.bc {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 24px 20px;
  transition: border-color .2s, transform .2s;
}
.bc:hover { border-color: rgba(232,214,0,.3); transform: translateY(-3px); }
.bc-icon { font-size: 28px; margin-bottom: 14px; display: block; }
.bc h3 { font-size: 16px; margin-bottom: 7px; }
.bc p { font-size: 12px; }

/* ═══════════════════
   CURRICULUM
═══════════════════ */
.sem-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 44px; }
.sem {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 22px;
  transition: border-color .2s;
}
.sem:hover { border-color: rgba(232,214,0,.3); }
.sem-label {
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--yellow);
  margin-bottom: 10px; display: block;
}
.sem h3 { font-size: 15px; margin-bottom: 12px; }
.sem ul { list-style: none; }
.sem ul li {
  font-size: 12px; color: var(--gray);
  padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex; gap: 7px;
}
.sem ul li:last-child { border-bottom: none; }
.sem ul li::before { content: '›'; color: var(--yellow); flex-shrink: 0; }
.sem.highlight { border-color: rgba(232,214,0,.28); }
.sem.highlight .sem-label { color: var(--orange); }

/* ═══════════════════
   CAREERS TABLE
═══════════════════ */
.table-wrap {
  overflow-x: auto; margin-top: 44px;
  border: 1px solid var(--border); border-radius: var(--r);
}
table { width: 100%; border-collapse: collapse; min-width: 600px; }
thead { background: rgba(232,214,0,.06); }
th {
  padding: 13px 18px; text-align: left;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--yellow);
  border-bottom: 1px solid var(--border);
}
td {
  padding: 13px 18px; font-size: 13px; color: var(--light);
  border-bottom: 1px solid var(--border);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,.015); }
.sal { font-family: var(--heading); font-size: 14px; font-weight: 700; }
.sal.e { color: #00d4ff; } .sal.s { color: var(--yellow); }
.etags { display: flex; flex-wrap: wrap; gap: 4px; }
.etag {
  font-size: 10px; color: var(--gray);
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  border-radius: 3px; padding: 2px 6px;
}

/* ═══════════════════
   COMPARISON
═══════════════════ */
.comp-wrap { overflow-x: auto; margin-top: 44px; }
table.comp { min-width: 580px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); }
table.comp thead { background: rgba(255,255,255,.03); }
table.comp th { font-size: 14px; font-weight: 700; font-family: var(--heading); text-align: center; color: var(--white); letter-spacing: 0; text-transform: none; }
table.comp th.fh { text-align: left; font-family: var(--body); font-size: 10px; color: var(--gray); letter-spacing: 1px; text-transform: uppercase; }
table.comp th.ph { color: var(--yellow); background: rgba(232,214,0,.07); border-left: 2px solid var(--yellow); border-right: 2px solid var(--yellow); border-top: 2px solid var(--yellow); }
table.comp td { text-align: center; font-size: 13px; color: var(--gray); }
table.comp td.ft { text-align: left; font-weight: 500; color: var(--light); }
table.comp td.pt { background: rgba(232,214,0,.04); border-left: 2px solid rgba(232,214,0,.18); border-right: 2px solid rgba(232,214,0,.18); color: var(--yellow); font-weight: 600; font-size: 12px; }
table.comp tbody tr:last-child td.pt { border-bottom: 2px solid rgba(232,214,0,.4); }

/* ═══════════════════
   UNIVERSITY
═══════════════════ */
.hi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 28px; }
.hi {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px;
}
.hi-icon { font-size: 20px; margin-bottom: 8px; }
.hi h4 { font-family: var(--heading); font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.hi p { font-size: 11px; color: var(--gray); }

.capital-bar {
  background: rgba(232,214,0,.06); border: 1px solid rgba(232,214,0,.15);
  border-radius: var(--r); padding: 26px; margin-bottom: 20px;
}
.capital-bar h3 { font-size: 18px; margin-bottom: 20px; color: var(--yellow); }
.cap-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.cap { text-align: center; }
.cap .cv { font-family: var(--heading); font-size: 28px; font-weight: 800; color: var(--white); line-height: 1; display: block; }
.cap .cl { font-size: 10px; color: var(--gray); margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; }

.grad-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.grad-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--gray); }
.grad-list li::before { content: '✓'; color: var(--yellow); flex-shrink: 0; font-weight: 700; }

/* ═══════════════════
   PLACEMENT
═══════════════════ */
.place-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 44px; }
.place-card { border-radius: var(--r); padding: 28px 20px; text-align: center; }
.pc1 { background: rgba(232,214,0,.07); border: 1px solid rgba(232,214,0,.25); }
.pc2 { background: rgba(0,230,118,.06); border: 1px solid rgba(0,230,118,.22); }
.pc3 { background: rgba(232,85,32,.06); border: 1px solid rgba(232,85,32,.22); }
.pc4 { background: rgba(0,212,255,.06); border: 1px solid rgba(0,212,255,.22); }
.place-card .pn {
  font-family: var(--heading); font-size: 36px; font-weight: 800; line-height: 1; display: block; margin-bottom: 6px;
}
.pc1 .pn{color:var(--yellow)} .pc2 .pn{color:#00e676} .pc3 .pn{color:var(--orange)} .pc4 .pn{color:#00d4ff}
.place-card .pt { font-family: var(--heading); font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.place-card .pd { font-size: 12px; color: var(--gray); line-height: 1.5; }

/* ═══════════════════
   CTA
═══════════════════ */
.cta-sec {
  padding: 90px 0; text-align: center;
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(232,214,0,.06), transparent);
}
.cta-sec .big {
  font-family: var(--heading);
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 800; line-height: 1; letter-spacing: .5px;
  color: var(--white); margin: 20px 0 36px;
}
.cta-sec .big span {
  background: linear-gradient(90deg, var(--yellow), var(--orange));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 52px; }
.contact-row {
  display: flex; gap: 40px; justify-content: center; flex-wrap: wrap;
  padding-top: 40px; border-top: 1px solid var(--border);
}
.ci { text-align: left; }
.ci-l { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray); margin-bottom: 4px; }
.ci-v { font-size: 14px; font-weight: 600; }
.ci-v a { color: var(--yellow); text-decoration: none; }
.ci-v a:hover { text-decoration: underline; }

/* ═══════════════════
   FOOTER
═══════════════════ */
footer {
  background: #08080a; border-top: 1px solid var(--border);
  padding: 32px 0;
}
.foot-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.foot-note { font-size: 11px; color: var(--gray); max-width: 480px; line-height: 1.6; }
.foot-links { display: flex; gap: 18px; }
.foot-links a { font-size: 12px; color: var(--gray); text-decoration: none; }
.foot-links a:hover { color: var(--yellow); }

/* ═══════════════════
   RESPONSIVE
═══════════════════ */
@media (max-width: 1024px) {
  .four-grid { grid-template-columns: repeat(2,1fr); }
  .place-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-right { display: none; }
  .hero-left { padding: 48px 0; }
  .two-col { grid-template-columns: 1fr; }
  .sem-grid { grid-template-columns: 1fr 1fr; }
  .hi-grid { grid-template-columns: 1fr 1fr; }
  .cap-row { grid-template-columns: repeat(2,1fr); }
  .topbar { display: none; }
  .wa-link span { display: none; }
  .logo img{width: 142px;}
  .btn { padding: 6px 17px; }
}
@media (max-width: 540px) {
  .four-grid { grid-template-columns: 1fr; }
  .sem-grid { grid-template-columns: 1fr; }
  .hi-grid { grid-template-columns: 1fr; }
  .num-grid { grid-template-columns: 1fr; }
  .place-grid { grid-template-columns: 1fr; }
  .vs-row { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; }
  .contact-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .cta-sec .big { letter-spacing: 0;}
  .logo img{width: 142px;}
  .btn { padding: 6px 17px; }
}