/* =========================================================
   CAMPUS BEES — Global Stylesheet
   Colors: Blue #1A3A6B, Gold/Orange #F5A623, White #FFFFFF
   Font: Plus Jakarta Sans
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --blue-dark:   #0D2B52;
  --blue:        #1A3A6B;
  --blue-mid:    #1E4D8C;
  --blue-light:  #EBF1FB;
  --gold:        #F5A623;
  --gold-light:  #FFCA6B;
  --gold-pale:   #FFF8EC;
  --white:       #FFFFFF;
  --off-white:   #F6F8FC;
  --text:        #1A2332;
  --text-muted:  #64748B;
  --border:      #E2E8F0;
  --shadow-sm:   0 2px 8px rgba(13,43,82,0.08);
  --shadow-md:   0 8px 24px rgba(13,43,82,0.12);
  --shadow-lg:   0 20px 48px rgba(13,43,82,0.16);
  --radius:      12px;
  --radius-lg:   20px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

img { display:block; max-width:100%; }
a  { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { cursor:pointer; font-family:inherit; border:none; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#f1f5f9; }
::-webkit-scrollbar-thumb { background:var(--blue-mid); border-radius:3px; }

/* ── Typography ── */
h1,h2,h3,h4,h5 { font-weight:700; line-height:1.2; color:var(--blue-dark); }
h1 { font-size:clamp(2rem,4.5vw,3.4rem); }
h2 { font-size:clamp(1.6rem,3vw,2.4rem); }
h3 { font-size:clamp(1.1rem,2vw,1.4rem); }
p  { color:var(--text-muted); }

/* ── Container ── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ── Section ── */
.section { padding:88px 0; }
.section--gray { background:var(--off-white); }

.section-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--gold-pale); color:var(--gold);
  font-size:.75rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 14px; border-radius:20px;
  margin-bottom:14px;
}
.section-tag.blue { background:var(--blue-light); color:var(--blue); }

.section-title { margin-bottom:14px; }
.section-sub { font-size:1rem; max-width:560px; line-height:1.75; }
.section-header { text-align:center; margin-bottom:56px; }
.section-header .section-sub { margin:0 auto; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:var(--radius);
  font-size:.93rem; font-weight:700; transition:all .22s;
  white-space:nowrap;
}
.btn-gold {
  background:var(--gold); color:var(--blue-dark);
  box-shadow:0 4px 16px rgba(245,166,35,.35);
}
.btn-gold:hover { background:#e09210; transform:translateY(-2px); box-shadow:0 8px 24px rgba(245,166,35,.4); }

.btn-outline-white {
  background:transparent; color:var(--white);
  border:2px solid rgba(255,255,255,.45);
}
.btn-outline-white:hover { background:rgba(255,255,255,.1); }

.btn-blue {
  background:var(--blue); color:var(--white);
  box-shadow:0 4px 16px rgba(26,58,107,.3);
}
.btn-blue:hover { background:var(--blue-mid); transform:translateY(-2px); }

.btn-outline-blue {
  background:transparent; color:var(--blue);
  border:2px solid var(--blue);
}
.btn-outline-blue:hover { background:var(--blue); color:white; }

/* ── NAV ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--blue-dark);
  border-bottom:1px solid rgba(255,255,255,.08);
  height:68px;
  display:flex; align-items:center;
  transition:box-shadow .3s;
}
.nav.scrolled { box-shadow:0 4px 24px rgba(0,0,0,.25); }
.nav__inner {
  display:flex; align-items:center; gap:0;
  max-width:1280px; margin:0 auto; padding:0 24px; width:100%;
}
.nav__logo {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; margin-right:auto;
}
.nav__logo-img { width:42px; height:42px; border-radius:10px; object-fit:contain; background:white; padding:2px; }
.nav__logo-text { font-size:1.1rem; font-weight:800; color:white; }
.nav__logo-sub { font-size:.62rem; color:rgba(255,255,255,.5); font-weight:400; display:block; line-height:1; }

.nav__links { display:flex; align-items:center; gap:2px; }
.nav__link {
  color:rgba(255,255,255,.78); font-size:.88rem; font-weight:500;
  padding:8px 14px; border-radius:8px; transition:all .18s;
  position:relative;
}
.nav__link:hover, .nav__link.active { color:white; background:rgba(255,255,255,.1); }
.nav__link .cs-pill {
  font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  background:var(--gold); color:var(--blue-dark);
  padding:2px 6px; border-radius:6px; margin-left:5px; vertical-align:middle;
}

.nav__cta { margin-left:16px; }

.nav__hamburger {
  display:none; flex-direction:column; gap:5px;
  width:32px; cursor:pointer; margin-left:auto;
}
.nav__hamburger span {
  display:block; height:2px; background:white;
  border-radius:2px; transition:all .3s;
}

.nav__mobile-menu {
  display:none; position:fixed; top:68px; left:0; right:0; bottom:0;
  background:var(--blue-dark); z-index:999; padding:24px;
  flex-direction:column; gap:8px; overflow-y:auto;
}
.nav__mobile-menu.open { display:flex; }
.nav__mobile-link {
  color:white; font-size:1rem; font-weight:600;
  padding:14px 16px; border-radius:var(--radius);
  border-bottom:1px solid rgba(255,255,255,.08);
  display:block;
}
.nav__mobile-link:hover { background:rgba(255,255,255,.08); }

/* ── CARDS ── */
.card {
  background:white; border-radius:var(--radius-lg);
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
  overflow:hidden; transition:all .28s;
}
.card:hover { box-shadow:var(--shadow-lg); transform:translateY(-5px); }

/* ── Badges ── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.75rem; font-weight:700; padding:5px 12px; border-radius:20px;
}
.badge-gold { background:var(--gold-pale); color:#92600a; }
.badge-blue { background:var(--blue-light); color:var(--blue); }
.badge-green { background:#d1fae5; color:#065f46; }

/* ── Tag chips ── */
.tag-chip {
  display:inline-flex; align-items:center;
  background:var(--blue-light); color:var(--blue);
  font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:6px;
}

/* ── Floating WhatsApp ── */
.wa-float {
  position:fixed; bottom:28px; right:28px; z-index:900;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:white;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(37,211,102,.45);
  font-size:1.5rem; transition:transform .22s, box-shadow .22s;
  text-decoration:none;
}
.wa-float:hover { transform:scale(1.12); box-shadow:0 10px 28px rgba(37,211,102,.55); }

/* ── Toast ── */
.toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--blue-dark); color:white; padding:14px 28px;
  border-radius:var(--radius); font-weight:600; font-size:.9rem;
  box-shadow:var(--shadow-lg); opacity:0; transition:all .4s; z-index:9999;
  display:flex; align-items:center; gap:10px; white-space:nowrap;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* ── Reveal animations ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ── Footer ── */
.footer {
  background:var(--blue-dark); color:rgba(255,255,255,.7);
  padding:64px 0 28px;
}
.footer__grid {
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:48px; padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:28px;
}
.footer__brand-logo { width:56px; height:56px; border-radius:12px; object-fit:contain; background:white; padding:3px; margin-bottom:14px; }
.footer__brand-name { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.2rem; font-weight:800; color:white; margin-bottom:4px; }
.footer__tagline { font-size:.8rem; color:rgba(255,255,255,.5); font-style:italic; margin-bottom:16px; }
.footer__desc { font-size:.85rem; line-height:1.75; color:rgba(255,255,255,.55); margin-bottom:20px; max-width:280px; }
.footer__socials { display:flex; gap:10px; }
.footer__social {
  width:36px; height:36px; border-radius:8px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.6); font-size:.85rem; font-weight:700;
  transition:all .2s;
}
.footer__social:hover { background:var(--gold); color:var(--blue-dark); border-color:transparent; }
.footer__col-title { font-size:.88rem; font-weight:700; color:white; margin-bottom:16px; }
.footer__links { display:flex; flex-direction:column; gap:10px; }
.footer__links a { font-size:.83rem; color:rgba(255,255,255,.55); transition:color .18s; }
.footer__links a:hover { color:var(--gold); }
.footer__bottom { display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:rgba(255,255,255,.35); flex-wrap:wrap; gap:8px; }

/* ── Breadcrumb ── */
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:.82rem; color:rgba(255,255,255,.6); flex-wrap:wrap; }
.breadcrumb a { color:rgba(255,255,255,.6); transition:color .18s; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb-sep { opacity:.4; }
.breadcrumb-current { color:var(--gold-light); font-weight:600; }

/* ── Page Hero (inner pages) ── */
.page-hero {
  background:linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 100%);
  padding:110px 0 64px; position:relative; overflow:hidden;
}
.page-hero__inner { position:relative; z-index:2; }
.page-hero__title { color:white; font-size:clamp(1.8rem,3.5vw,2.8rem); margin:12px 0 14px; }
.page-hero__sub { color:rgba(255,255,255,.72); font-size:1rem; max-width:560px; }
.page-hero__bg { position:absolute; inset:0; opacity:.06;
  background-image:radial-gradient(circle at 70% 40%, white 0%, transparent 60%); }

/* ── Utility ── */
.text-gold { color:var(--gold); }
.text-blue { color:var(--blue); }
.fw-800 { font-weight:800; }
.mt-8 { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.mt-32 { margin-top:32px; }
.mb-8 { margin-bottom:8px; }
.mb-16 { margin-bottom:16px; }
.mb-32 { margin-bottom:32px; }
.d-flex { display:flex; }
.align-center { align-items:center; }
.gap-12 { gap:12px; }
.gap-16 { gap:16px; }
.text-center { text-align:center; }

/* ─── RESPONSIVE ─── */
@media(max-width:1024px){
  .footer__grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media(max-width:768px){
  .section { padding:64px 0; }
  .nav__links, .nav__cta { display:none; }
  .nav__hamburger { display:flex; }
  .footer__grid { grid-template-columns:1fr; gap:24px; }
  .footer__bottom { flex-direction:column; text-align:center; }
  .container { padding:0 16px; }
}