:root {
  --blue:     #35459a;
  --navy:     #1b2460;
  --yellow:   #dca200;
  --white:    #ffffff;
  --lb:       #f7f9ff;
  --grey:     #f8fafc;
  --text:     #1f2937;
  --muted:    #6b7280;
  --border:   rgba(53,69,154,0.11);
  --sh:       0 2px 20px rgba(27,36,96,0.08);
  --sh-h:     0 10px 36px rgba(27,36,96,0.16);
  --r:        20px;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { font-family:'Poppins',sans-serif; color:var(--text); background:var(--white); overflow-x:hidden; line-height:1.7 }
a { text-decoration:none; color:inherit }
.career-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .career-list li {
            position: relative;
            color: #ffffff;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            font-weight: 400;
            padding-left: 28px;
            margin-bottom: 12px;
            line-height: 1.5;
            text-align: left;
        }

        .career-list li::before {
            content: "→";
            position: absolute;
            left: 0;
            top: 0;
            color: #f5b900;
            font-size: 20px;
            font-weight: 500;
        }
/* ============================================================
   REVEAL
   ============================================================ */
.rev { opacity:0; transform:translateY(28px); transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1) }
.rev.v { opacity:1; transform:none }
.rl  { opacity:0; transform:translateX(-32px); transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1) }
.rr  { opacity:0; transform:translateX(32px);  transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1) }
.rl.v, .rr.v { opacity:1; transform:none }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s}
.d4{transition-delay:.4s} .d5{transition-delay:.5s} .d6{transition-delay:.6s}

/* ============================================================
   LAYOUT
   ============================================================ */
.sw  { padding:40px 0 }
.wrap  { max-width:1200px; margin:0 auto; padding:0 24px }
.wrap-w { max-width:1380px; margin:0 auto; padding:0 24px }

.career-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .career-list li {
            position: relative;
            color: #ffffff;
            font-family: "Poppins", sans-serif;
            font-size: 16px;
            font-weight: 400;
            padding-left: 28px;
            margin-bottom: 5px;
            line-height: 1.5;
            text-align:left;
        }

        .career-list li::before {
            content: "→";
            position: absolute;
            left: 0;
            top: 0;
            color: #f5b900;
            font-size: 20px;
            font-weight: 500;
        }
/* ============================================================
   TYPE
   ============================================================ */
.s-lbl { font-family:'Antonio',sans-serif; font-size:12px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--yellow); display:inline-flex; align-items:center; gap:9px; margin-bottom:13px }
.s-lbl::before { content:''; display:inline-block; width:26px; height:2px; background:var(--yellow) }
.s-lbl.blue { color:var(--blue) } .s-lbl.blue::before { background:var(--blue) }
.s-lbl.white { color:rgba(255,255,255,.65) } .s-lbl.white::before { background:rgba(255,255,255,.5) }
.s-lbl.center { justify-content:center }
.s-h  { font-family:'Antonio',sans-serif; font-size:36px; font-weight:700; color:var(--navy); line-height:1.15; margin-bottom:12px }
.s-h.wh { color:var(--white) }
.s-sub { font-family:'Poppins',sans-serif; font-size:16px; color:var(--muted); max-width:660px; line-height:1.8; margin-bottom:44px }
.s-sub.center { text-align:center; margin-left:auto; margin-right:auto }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { font-family:'Antonio',sans-serif; font-size:16px; font-weight:600; padding:13px 30px; border-radius:999px; border:2px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:all .28s; white-space:nowrap; letter-spacing:.03em; text-transform:uppercase }
.btn-y  { background:var(--yellow); color:var(--navy); border-color:var(--yellow) }
.btn-y:hover  { background:#c49100; transform:translateY(-2px); box-shadow:0 7px 22px rgba(220,162,0,.34) }
.btn-wl { background:transparent; color:var(--white); border-color:rgba(255,255,255,.46) }
.btn-wl:hover { background:rgba(255,255,255,.1); border-color:var(--white); transform:translateY(-2px) }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar { background:var(--navy); padding:10px 0; position:sticky; top:0; z-index:999; border-bottom:1px solid rgba(255,255,255,.07) }
.tb { display:flex; align-items:center; justify-content:space-between; gap:16px }
.tb-brand { font-family:'Antonio',sans-serif; font-weight:700; font-size:16px; color:var(--white) }
.tb-brand span { color:var(--yellow) }
.bc { font-family:'Poppins',sans-serif; font-size:12px; color:rgba(255,255,255,.48); display:flex; align-items:center; gap:5px }
.bc a { color:rgba(255,255,255,.66) } .bc a:hover { color:var(--yellow) }

/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
.hero { background:linear-gradient(135deg,#1b2460 0%,#35459a 100%); padding:40px 0px; position:relative; overflow:hidden; min-height:90vh; display:flex; align-items:center }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 82% 44%,rgba(220,162,0,.07) 0%,transparent 70%), radial-gradient(ellipse 38% 38% at 6% 78%,rgba(53,69,154,.3) 0%,transparent 70%); pointer-events:none }
.hero-g { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center }

/* left */
.h-lbl { font-family:'Antonio',sans-serif; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--yellow); display:flex; align-items:center; gap:10px; margin-bottom:20px }
.h-lbl::before { content:''; width:28px; height:2px; background:var(--yellow) }
.h-hl { font-family:'Anton',sans-serif; font-size:61px; line-height:1.0; color:var(--white); margin-bottom:18px; letter-spacing:.01em }
.h-hl .acc { color:var(--yellow) }
.h-sub { font-family:'Poppins',sans-serif; font-size:15px; color:rgba(255,255,255,.6); letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px }
.h-p { font-size:15px; color:rgba(255,255,255,.72); line-height:1.85; margin-bottom:34px; max-width:490px }
.h-btns { display:flex; flex-wrap:wrap; gap:12px }

/* right */
.hero-right { position:relative }

/* Floating logo cluster */
.logo-cluster { position:relative; height:200px; margin-bottom:18px }
.lc-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72px; height:72px; background:rgba(220,162,0,.16); border:2px solid rgba(220,162,0,.4); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center }
.lc-center-t { font-family:'Anton',sans-serif; font-size:9px; color:var(--yellow); line-height:1.25; letter-spacing:.04em }
/* Floating logo chips */
.lc-chip { position:absolute; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:7px 13px; font-family:'Poppins',sans-serif; font-size:12px; color:rgba(255,255,255,.78); white-space:nowrap; backdrop-filter:blur(6px); transition:background .3s }
.lc-chip:hover { background:rgba(220,162,0,.18); border-color:rgba(220,162,0,.45) }
/* Positions */
.lc-1 { top:10px;  left:50%; transform:translateX(-50%); animation:fc1 5s ease-in-out infinite }
.lc-2 { top:28px;  right:8%;  animation:fc2 5.5s ease-in-out infinite }
.lc-3 { bottom:20px; right:10%; animation:fc3 6s ease-in-out infinite }
.lc-4 { bottom:10px; left:50%; transform:translateX(-50%); animation:fc4 5s ease-in-out infinite }
.lc-5 { bottom:28px; left:8%;  animation:fc5 6.5s ease-in-out infinite }
.lc-6 { top:28px;  left:8%;   animation:fc6 5s ease-in-out infinite }
/* Plane path SVG */
.hero-path-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
@keyframes fc1 { 0%,100%{top:10px}  50%{top:4px}  }
@keyframes fc2 { 0%,100%{top:28px}  50%{top:22px} }
@keyframes fc3 { 0%,100%{bottom:20px} 50%{bottom:14px} }
@keyframes fc4 { 0%,100%{bottom:10px} 50%{bottom:4px}  }
@keyframes fc5 { 0%,100%{bottom:28px} 50%{bottom:22px} }
@keyframes fc6 { 0%,100%{top:28px}  50%{top:22px} }

/* Hero highlight cards */
.h-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.h-kpi  { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:20px 16px; text-align:center; backdrop-filter:blur(6px); transition:background .3s }
.h-kpi:hover { background:rgba(255,255,255,.14) }
.h-kpi-n { font-family:'Anton',sans-serif; font-size:30px; color:var(--yellow); display:block; line-height:1; margin-bottom:6px }
.h-kpi-l { font-family:'Antonio',sans-serif; font-size:12px; color:rgba(255,255,255,.62); letter-spacing:.04em; text-transform:uppercase; line-height:1.35 }

/* Mobile hero path strip */
.hero-path-mobile { display:none; flex-direction:column; gap:0; margin-top:22px }
.hpm-step { display:flex; gap:12px; align-items:flex-start }
.hpm-dot  { width:32px; height:32px; border-radius:50%; background:rgba(220,162,0,.2); border:2px solid var(--yellow); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--yellow) }
.hpm-body { padding:0 0 20px; }
.hpm-body h4 { font-family:'Antonio',sans-serif; font-size:14px; font-weight:700; color:var(--white); margin-bottom:2px }
.hpm-body p  { font-size:12px; color:rgba(255,255,255,.52); line-height:1.55 }
.hpm-connector { width:2px; height:22px; background:linear-gradient(180deg,rgba(220,162,0,.65),rgba(220,162,0,.2)); margin-left:15px }

/* ============================================================
   SECTION 2 — RECRUITER NETWORK
   ============================================================ */
.network-section { background:var(--grey) }

/* Filter tabs */
.filter-row { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:36px }
.f-btn { font-family:'Antonio',sans-serif; font-size:12px; font-weight:600; padding:8px 17px; border-radius:999px; border:1.5px solid var(--border); background:var(--white); color:var(--text); cursor:pointer; transition:all .22s; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap }
.f-btn:hover { border-color:var(--blue); color:var(--blue) }
.f-btn.act  { background:var(--navy); color:var(--yellow); border-color:var(--navy) }

/* Logo grid */
.logo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.logo-card { background:var(--white); border-radius:18px; border:1px solid var(--border); box-shadow:var(--sh); padding:18px 14px; text-align:center; cursor:default; transition:all .28s; position:relative; overflow:hidden }
.logo-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .3s }
.logo-card:hover { transform:translateY(-5px); box-shadow:var(--sh-h) }
.logo-card:hover::after { transform:scaleX(1) }
.lc-ph { width:64px; height:42px; background:var(--lb); border-radius:9px; margin:0 auto 11px; display:flex; align-items:center; justify-content:center; color:var(--blue) }
.lc-name { font-family:'Poppins',sans-serif; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:5px; line-height:1.3 }
.lc-tag  { display:inline-block; font-family:'Poppins',sans-serif; font-size:14px; padding:2px 9px; border-radius:999px; background:var(--lb); color:var(--blue) }

/* Mobile scroll fallback */
.logo-scroll-outer { display:none; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px }
.logo-scroll-inner { display:flex; gap:12px; min-width:max-content; padding:2px }
.logo-scroll-inner .logo-card { min-width:148px; flex-shrink:0 }

/* ============================================================
   SECTION 3 — SECTOR PRESENCE
   ============================================================ */
.sector-section { background:var(--white) }
.sector-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.sector-c { background:var(--white); border-radius:var(--r); border:1px solid var(--border); box-shadow:var(--sh); padding:24px 20px; transition:all .28s; position:relative; overflow:hidden }
.sector-c::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .32s }
.sector-c:hover { transform:translateY(-5px); box-shadow:var(--sh-h) }
.sector-c:hover::before { transform:scaleX(1) }
.sec-icon { width:44px; height:44px; background:var(--lb); border-radius:11px; display:flex; align-items:center; justify-content:center; color:var(--blue); margin-bottom:14px; transition:background .28s }
.sector-c:hover .sec-icon { background:var(--yellow); color:var(--navy) }
.sector-c h3 { font-family:'Antonio',sans-serif; font-size:16px; font-weight:700; color:var(--navy); margin-bottom:8px }
.sector-c p  { font-size:13px; color:var(--muted); line-height:1.72 }

/* ============================================================
   SECTION 4 — STUDENT SUCCESS
   ============================================================ */
.success-section { background:var(--navy); position:relative; overflow:hidden }
.success-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 55% 65% at 90% 50%,rgba(220,162,0,.07) 0%,transparent 70%); pointer-events:none }
.success-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.sc-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11); border-radius:var(--r); padding:24px 20px; transition:all .28s; position:relative }
.sc-card:hover { background:rgba(255,255,255,.11); border-color:rgba(220,162,0,.35); transform:translateY(-4px) }
.sc-top { display:flex; align-items:center; gap:12px; margin-bottom:16px }
.sc-avatar { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#e8eeff,#f7f9ff); border:2px solid rgba(220,162,0,.5); display:flex; align-items:center; justify-content:center; font-family:'Anton',sans-serif; font-size:19px; color:var(--blue); flex-shrink:0 }
.sc-name    { font-family:'Antonio',sans-serif; font-size:16px; font-weight:700; color:var(--white); margin-bottom:2px }
.sc-company { font-size:13px; color:rgba(255,255,255,.6) }
.sc-bottom  { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px }
.sc-pkg     { font-family:'Anton',sans-serif; font-size:24px; color:var(--yellow); line-height:1 }
.sc-pkg-lbl { font-size:14px; color:rgba(255,255,255,.42); display:block; margin-top:2px }
.sc-sector  { font-family:'Antonio',sans-serif; font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:4px 11px; border-radius:999px; background:rgba(220,162,0,.16); color:var(--yellow); border:1px solid rgba(220,162,0,.28) }
.sc-co-logo { width:44px; height:30px; background:rgba(255,255,255,.1); border-radius:7px; border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; font-family:'Antonio',sans-serif; font-size:8px; color:rgba(255,255,255,.55); text-align:center; letter-spacing:.03em; text-transform:uppercase; margin-left:auto }
.sc-disclaimer { font-size:12px; color:rgba(255,255,255,.3); text-align:center; margin-top:36px; font-style:italic }

/* ============================================================
   SECTION 5 — ECOSYSTEM CONNECT
   ============================================================ */
.eco-section { background:var(--lb) }
.eco-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.eco-card { background:var(--white); border-radius:var(--r); border:1px solid var(--border); box-shadow:var(--sh); padding:26px 24px; transition:all .28s; cursor:pointer; position:relative; overflow:hidden }
.eco-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--yellow); transform:scaleX(0); transform-origin:left; transition:transform .32s }
.eco-card:hover { transform:translateY(-5px); box-shadow:var(--sh-h) }
.eco-card:hover::after { transform:scaleX(1) }
.eco-icon { width:44px; height:44px; background:var(--lb); border-radius:11px; display:flex; align-items:center; justify-content:center; color:var(--blue); margin-bottom:14px; transition:background .28s }
.eco-card:hover .eco-icon { background:var(--yellow); color:var(--navy) }
.eco-row  { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px }
.eco-card h3 { font-family:'Antonio',sans-serif; font-size:17px; font-weight:700; color:var(--navy) }
.eco-arrow { width:26px; height:26px; background:var(--lb); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--blue); transition:background .28s; flex-shrink:0 }
.eco-card:hover .eco-arrow { background:var(--yellow); color:var(--navy) }
.eco-card p { font-size:13px; color:var(--muted); line-height:1.7 }

/* ============================================================
   SECTION 6 — FINAL CTA
   ============================================================ */
.final-cta { background:linear-gradient(135deg,#35459a 0%,#1b2460 100%); padding:40px 0; text-align:center; position:relative; overflow:hidden }
.final-cta::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 55% 55% at 22% 35%,rgba(220,162,0,.07) 0%,transparent 70%); pointer-events:none }
.cta-trail { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:hidden }
.final-cta h2 { font-family:'Anton',sans-serif; font-size:40px; color:var(--white); margin-bottom:16px; line-height:1.08; position:relative; z-index:1 }
.final-cta h2 .acc { color:var(--yellow) }
.final-cta > div > p { font-size:16px; color:rgba(255,255,255,.71); max-width:600px; margin:0 auto 32px; line-height:1.85; position:relative; z-index:1 }
.cta-btns  { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-bottom:30px; position:relative; z-index:1 }
.cta-close { font-family:'Poppins',sans-serif; font-size:13px; color:rgba(255,255,255,.38); position:relative; z-index:1 }
.cta-close strong { color:rgba(255,255,255,.64); font-weight:500 }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px) {
  .logo-grid    { grid-template-columns:repeat(3,1fr) }
  .sector-grid  { grid-template-columns:repeat(3,1fr) }
  .success-grid { grid-template-columns:repeat(2,1fr) }
  .eco-grid     { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:900px) {
  .hero-g { grid-template-columns:1fr; gap:32px }
  .hero-right { order:-1 }
  .logo-cluster { height:160px }
  .h-kpis { grid-template-columns:repeat(3,1fr) }
  .sector-grid { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:768px) {
  .sw { padding:40px 0 }
  .logo-grid { display:none }
  .logo-scroll-outer { display:block }
  .sector-grid  { grid-template-columns:repeat(2,1fr) }
  .success-grid { grid-template-columns:1fr }
  .eco-grid     { grid-template-columns:1fr }
  .h-kpis { grid-template-columns:repeat(3,1fr) }
  .logo-cluster { display:none }
  .hero-path-mobile { display:flex }
  .bc { display:none }
  .tb-brand { font-size:14px }
}
@media(max-width:480px) {
  .wrap { padding:0 16px }
  .hero { padding:40px 0px; min-height:auto }
  .h-hl { font-size:38px }
  .h-kpis { grid-template-columns:1fr 1fr }
  .sector-grid { grid-template-columns:1fr }
  .btn { font-size:13px; padding:11px 20px }
  .filter-row { gap:7px }
  .f-btn { font-size:12px; padding:7px 13px }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important }
}