/* ============================================================
   GDXT Tech Academy — design tokens & base styles
   ============================================================ */
:root{
  --bg-0: #060d1c;
  --bg-1: #0a1428;
  --bg-2: #0e1c38;
  --bg-card: #0c1930;
  --border-soft: rgba(148, 180, 255, 0.14);
  --border-soft-2: rgba(148, 180, 255, 0.22);

  --text-hi: #f4f7fd;
  --text-mid: #b7c3dc;
  --text-dim: #7c8bab;

  --gold: #ffc426;
  --gold-dark: #e8a800;
  --gold-ink: #241a02;

  --iot: #2fa8ff;
  --iot-soft: rgba(47, 168, 255, 0.12);
  --embedded: #9a63ff;
  --embedded-soft: rgba(154, 99, 255, 0.12);
  --robotics: #22d98a;
  --robotics-soft: rgba(34, 217, 138, 0.12);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --font-display: "Space Grotesk", "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(47,168,255,0.10), transparent 60%),
              radial-gradient(900px 500px at 0% 10%, rgba(154,99,255,0.08), transparent 55%),
              var(--bg-0);
  color: var(--text-mid);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--text-hi); margin: 0; line-height: 1.15; }

.wrap{ max-width: 1240px; margin: 0 auto; padding: 0 32px; }

:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px;
  padding: 13px 24px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-gold{
  background: linear-gradient(180deg, #ffd25c, var(--gold));
  color: var(--gold-ink);
  box-shadow: 0 8px 24px -8px rgba(255,196,38,0.55);
}
.btn-gold:hover{ box-shadow: 0 10px 30px -6px rgba(255,196,38,0.7); }
.btn-outline{
  background: transparent;
  border-color: var(--border-soft-2);
  color: var(--text-hi);
}
.btn-outline:hover{ background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.4); }
.btn-block{ width: 100%; justify-content: center; }
.btn-sm{ padding: 9px 16px; font-size: 13px; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--border-soft);
  isolation: isolate;
}
/* The tint + blur live on this pseudo-layer, NOT on .site-header itself —
   backdrop-filter on an element makes it the containing block for any
   position:fixed descendant, which was trapping the mobile nav panel
   (position:fixed) inside the header's own 76px-tall box instead of the
   full viewport. Keeping .site-header filter-free fixes that. */
.site-header::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(6, 13, 28, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header .wrap{
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.brand{ display: flex; align-items: center; gap: 10px; }
.brand-logo{ height: 46px; width: auto; display: block; }

.main-nav{ display: flex; align-items: center; gap: 30px; }
.main-nav a{
  font-size: 14.5px; font-weight: 600; color: var(--text-mid);
  position: relative; padding: 6px 0;
  display: flex; align-items: center; gap: 4px;
}
.main-nav a:hover{ color: var(--text-hi); }
.main-nav a.active{ color: var(--gold); }
.main-nav a.active::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px;
  background: var(--gold); border-radius: 2px;
}
.nav-caret{ width: 10px; height: 10px; opacity: .7; }

.dropdown{ position: relative; }
.dropdown-menu{
  min-width: 220px; background: var(--bg-2); border: 1px solid var(--border-soft-2);
  border-radius: var(--radius-md); padding: 8px; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.5);
  transition: opacity .15s ease, transform .15s ease;
}
.dropdown-menu a{ display: block; padding: 10px 12px; border-radius: 8px; font-weight: 500; }
.dropdown-menu a:hover{ background: rgba(255,255,255,0.06); color: var(--text-hi); }

/* Desktop only: floating, centered dropdown revealed on hover/focus.
   Kept out of the mobile breakpoint entirely (rather than relying on a
   mobile rule to override it) so there's no specificity fight between
   this and the mobile reset below — that fight was exactly what caused
   the submenu to render shifted off-screen on mobile. */
@media (min-width: 981px){
  .dropdown-menu{
    position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%);
    opacity: 0; visibility: hidden;
  }
  .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu{
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
}

.header-actions{ display: flex; align-items: center; gap: 12px; }
.nav-toggle{ display:none; background:none; border:1px solid var(--border-soft-2); border-radius:8px; padding:8px; color:var(--text-hi); }

@media (max-width: 980px){
  .main-nav{ position: fixed; inset: 76px 0 0 0; background: var(--bg-1); flex-direction: column;
    padding: 24px 32px; gap: 4px; transform: translateX(100%); transition: transform .25s ease; overflow-y:auto; }
  .main-nav.open{ transform: translateX(0); }
  .main-nav a{ width: 100%; padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
  .dropdown-menu{ position: static; transform:none; opacity:1; visibility:visible; display:none; box-shadow:none; margin-top:4px; }
  .dropdown.open .dropdown-menu{ display:block; }
  .nav-toggle{ display:block; }
  .header-actions .btn-outline{ display:none; }
}

/* ---------- breadcrumb ---------- */
.breadcrumb{ font-size: 13px; color: var(--text-dim); padding: 22px 0 0; }
.breadcrumb a{ color: var(--text-dim); }
.breadcrumb a:hover{ color: var(--gold); }
.breadcrumb .sep{ margin: 0 6px; }
.breadcrumb .current{ color: var(--iot); }

/* ---------- page hero heading ---------- */
.page-head{ padding: 20px 0 44px; text-align: left; }
.page-head h1{ font-size: clamp(28px, 4vw, 42px); margin-bottom: 14px; }
.page-head p{ max-width: 640px; font-size: 16px; color: var(--text-mid); }

/* ---------- pill / eyebrow ---------- */
.pill{
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(47,168,255,0.10); border: 1px solid rgba(47,168,255,0.35);
  color: #7fc4ff; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px;
}

/* ---------- footer ---------- */
.site-footer{ border-top: 1px solid var(--border-soft); margin-top: 100px; padding: 48px 0 28px; }
.site-footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-links{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a{ font-size:13.5px; color:var(--text-dim); }
.footer-links a:hover{ color: var(--text-hi); }
.footer-copy{ font-size: 13px; color: var(--text-dim); }
.footer-contact{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-contact a{ display:flex; align-items:center; gap:6px; font-size:13px; color: var(--text-dim); }
.footer-contact a:hover{ color: var(--gold); }

section{ padding: 56px 0; }