/* =====================================
   home.css — Steam-like (dark store vibe)
   + Mobile Drawer Menu
   ===================================== */

/* ---------- Tokens (Steam-ish) ---------- */
:root{
  --bg-0:#0b121a;
  --bg-1:#0f1823;
  --bg-2:#101c2a;

  --panel-1:rgba(255,255,255,.06);
  --panel-2:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.10);
  --stroke-2:rgba(255,255,255,.14);

  --text:#e6f0ff;
  --muted:#9fb3cc;

  --steam-blue:#66c0f4;
  --steam-blue-2:#4aa3df;
  --steam-green:#a4d007;

  --shadow:0 18px 60px rgba(0,0,0,.55);
  --shadow-soft:0 10px 30px rgba(0,0,0,.35);

  --r-sm:12px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;

  --max:1040px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 15% 0%, rgba(102,192,244,.14), transparent 52%),
    radial-gradient(900px 600px at 85% 10%, rgba(74,163,223,.10), transparent 52%),
    linear-gradient(180deg, var(--bg-0), var(--bg-2));
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{
  outline:3px solid rgba(102,192,244,.50);
  outline-offset:3px;
  border-radius:10px;
}

/* Skip */
.skip{
  position:absolute;
  left:-999px; top:12px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  padding:10px 14px;
  border-radius:12px;
  z-index:999;
}
.skip:focus{ left:12px; }

/* Layout */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:56px 20px 120px;
}

.card{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-xl);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:-2px -2px auto -2px;
  height:170px;
  background:
    linear-gradient(90deg, rgba(102,192,244,.18), transparent 55%),
    radial-gradient(900px 200px at 35% 0%, rgba(102,192,244,.16), transparent 62%);
  pointer-events:none;
  opacity:.95;
}

/* ---------- Header (Steam nav feel) ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 10px;
  position:relative;
  z-index:2;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(102,192,244,.10);
  border:1px solid rgba(102,192,244,.22);
  color: #dff4ff;
  font-size:13px;
  letter-spacing:.01em;
}
.badge i{ color: var(--steam-blue); }

.navrow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.navpill{
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  font-size:13px;
  color: rgba(230,240,255,.92);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.navpill:hover{
  text-decoration:none;
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.navpill--cta{
  background: linear-gradient(180deg, rgba(102,192,244,.22), rgba(102,192,244,.10));
  border-color: rgba(102,192,244,.30);
}

/* Mobile toggle button */
.navToggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px;
}
.navToggle:hover{
  background: rgba(255,255,255,.06);
}
.navToggle__bar{
  display:block;
  height:2px;
  width:18px;
  background: rgba(230,240,255,.90);
  border-radius:2px;
}

/* Desktop vs mobile */
.navrow--desktop{ display:flex; }
@media (max-width: 860px){
  .navrow--desktop{ display:none; }
  .navToggle{ display:inline-flex; }
}

/* ---------- Hero (Steam store panel vibe) ---------- */
.hero{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:24px;
  padding:26px 22px 18px;
  align-items:center;
  position:relative;
  z-index:1;
}

@media (max-width: 760px){
  .hero{
    grid-template-columns:1fr;
    text-align:center;
    padding:22px 18px 16px;
  }
}

.avatar{
  width:190px;
  height:190px;
  border-radius:50%;
  overflow:hidden;
  margin:0 auto;
  border:2px solid rgba(102,192,244,.30);
  box-shadow:
    0 0 0 8px rgba(102,192,244,.08),
    0 26px 70px rgba(0,0,0,.55);
  background: rgba(0,0,0,.2);
}
.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.title{
  margin:0 0 10px;
  font-size:44px;
  line-height:1.05;
  letter-spacing:-0.02em;

  /* PATCH: prevent title clipping on narrow containers */
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 760px){
  .title{ font-size:38px; }
}

.subtitle{
  margin:0;
  color: rgba(159,179,204,.96);
  font-size:16px;
  max-width: 64ch;
}

.leadline{
  margin:10px 0 0;
  font-size:15px;
  color: rgba(230,240,255,.94);
  max-width: 70ch;
}

/* CTA buttons like Steam green/blue accent */
.ctaRow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}
@media (max-width: 760px){
  .ctaRow{ justify-content:center; }
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(230,240,255,.96);
  font-weight:800;
  font-size:14px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
  text-decoration:none;
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
}

.btn.primary{
  background: linear-gradient(180deg, rgba(164,208,7,.95), rgba(120,160,0,.88));
  border-color: rgba(255,255,255,.18);
  color:#0b121a;
  font-weight:900;
}
.btn.primary i{ color:#0b121a; }

/* Quick links */
.quickLinks{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
@media (max-width: 760px){
  .quickLinks{ justify-content:center; }
}
.quickLinks a{
  font-size:13px;
  padding:9px 10px;
  border-radius:12px;
  background: rgba(15,24,35,.55);
  border:1px solid rgba(255,255,255,.10);
}
.quickLinks a i{ color: var(--steam-blue); }

/* ---------- Sections ---------- */
section{ padding: 18px 22px; }

.services h2,
.contact h2{
  margin:0 0 10px;
  font-size:18px;
  letter-spacing:.01em;
}

.servicesGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
@media (max-width: 900px){
  .servicesGrid{ grid-template-columns:1fr; }
}

.serviceCard{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--r-lg);
  padding:18px;
  box-shadow: var(--shadow-soft);
}
.serviceCard h3{
  margin:0 0 8px;
  font-size:16px;
}
.serviceCard p{
  margin:0 0 14px;
  color: rgba(159,179,204,.96);
  font-size:14px;
}

/* ---------- Contact / Form ---------- */
.contactIntro{
  margin:0 0 14px;
  color: rgba(159,179,204,.96);
  max-width: 75ch;
}

form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 760px){
  form{ grid-template-columns:1fr; }
}

input, select, textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,16,24,.72);
  color: var(--text);
  font-size:14px;
  outline:none;
}
input::placeholder, textarea::placeholder{
  color: rgba(159,179,204,.70);
}
textarea{
  grid-column:1/-1;
  min-height: 120px;
  resize: vertical;
}

button[type="submit"]{
  grid-column:1/-1;
  justify-content:center;
}

/* Status messages (used by home.js) */
.status{
  grid-column:1/-1;
  display:none;
  padding:12px 14px;
  border-radius:14px;
  font-size:13px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.status.ok{
  display:block;
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.10);
}
.status.err{
  display:block;
  border-color: rgba(251,113,133,.30);
  background: rgba(251,113,133,.10);
}

/* ---------- Footer ---------- */
.footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:18px 22px 22px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(159,179,204,.96);
  font-size:13px;
}

.footerLinks{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.footerLinks a{
  padding:9px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}

/* =====================================
   Mobile Drawer Menu (Steam-like)
   ===================================== */

.navOverlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(2px);
  z-index: 50;
}

.navDrawer{
  position:fixed;
  top:0;
  right:0;
  width:min(88vw, 360px);
  height:100vh;
  background: linear-gradient(180deg, rgba(16,28,42,.98), rgba(10,16,24,.98));
  border-left:1px solid rgba(255,255,255,.12);
  box-shadow: -24px 0 80px rgba(0,0,0,.65);
  z-index: 60;
  transform: translateX(105%);
  transition: transform .18s ease;
  display:flex;
  flex-direction:column;
}

.navDrawer.is-open{
  transform: translateX(0);
}

.navDrawer__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.navDrawer__title{
  font-weight:900;
  letter-spacing:.02em;
  color: rgba(230,240,255,.95);
}

.navClose{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
}
.navClose:hover{ background: rgba(255,255,255,.06); }

.navDrawer__links{
  padding:12px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.navDrawer__link{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-weight:800;
  color: rgba(230,240,255,.95);
}
.navDrawer__link:hover{
  text-decoration:none;
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}

.navDrawer__link--cta{
  background: linear-gradient(180deg, rgba(102,192,244,.20), rgba(102,192,244,.10));
  border-color: rgba(102,192,244,.30);
}

.navDrawer__meta{
  margin-top:auto;
  padding:14px 14px 18px;
  border-top:1px solid rgba(255,255,255,.10);
}
.navDrawer__hint{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(164,208,7,.10);
  border:1px solid rgba(164,208,7,.22);
  color: rgba(230,240,255,.95);
  font-size:13px;
}
.navDrawer__hint i{ color: var(--steam-green); }

/* Prevent background scroll when menu open */
body.nav-open{ overflow:hidden; }

/* =========================================================
   PREMIUM SCHOOL GRADIENT LAYER (ChallengeU-inspired)
   Drop-in overrides: keep your Steam-like base, add "school" polish
   Paste at END of styles.css
   ========================================================= */

/* 1) New premium tokens (kept compatible with your existing vars) */
:root{
  /* Brand gradient (navy -> magenta) */
  --edu-navy:#071a3a;
  --edu-navy-2:#0a2452;
  --edu-magenta:#ff2e6f;
  --edu-magenta-2:#ff4b8a;

  /* Premium accents */
  --edu-cyan:#57d6ff;
  --edu-gold:#ffd36e;

  /* Glow layers */
  --edu-glow-1: rgba(87,214,255,.18);
  --edu-glow-2: rgba(255,46,111,.16);
  --edu-glow-3: rgba(255,211,110,.10);

  /* Glass surfaces */
  --edu-glass-1: rgba(255,255,255,.075);
  --edu-glass-2: rgba(255,255,255,.045);
  --edu-stroke: rgba(255,255,255,.14);

  /* Override your accent choices (optional but recommended) */
  --steam-blue: var(--edu-cyan);
  --steam-blue-2: rgba(87,214,255,.72);

  /* Make green CTA look more premium */
  --steam-green: #b7f34a;
}

/* 2) Background: richer, more “academy” */
body{
  background:
    radial-gradient(1100px 650px at 14% 0%, var(--edu-glow-1), transparent 58%),
    radial-gradient(1100px 650px at 86% 10%, var(--edu-glow-2), transparent 58%),
    radial-gradient(900px 520px at 50% 95%, var(--edu-glow-3), transparent 60%),
    linear-gradient(135deg, var(--edu-navy) 0%, var(--edu-navy-2) 42%, rgba(255,46,111,.08) 100%),
    linear-gradient(180deg, var(--bg-0), var(--bg-2));
}

/* 3) Card: premium glass + subtle top gradient band like a hero overlay */
.card{
  background: linear-gradient(180deg, var(--edu-glass-1), var(--edu-glass-2));
  border-color: var(--edu-stroke);
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
}

.card::before{
  height: 210px;
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(87,214,255,.18), rgba(255,46,111,.14) 60%, transparent 100%),
    radial-gradient(900px 240px at 35% 0%, rgba(255,46,111,.12), transparent 62%),
    radial-gradient(900px 240px at 70% 0%, rgba(87,214,255,.12), transparent 62%);
}

/* 4) Topbar: more “institutional” */
.topbar{
  border-color: rgba(255,255,255,.14);
  background:
    linear-gradient(90deg, rgba(7,26,58,.72), rgba(10,36,82,.52) 45%, rgba(255,46,111,.18) 100%),
    rgba(255,255,255,.02);
  backdrop-filter: blur(12px);
}

/* 5) Badge: neon-academy pill */
.badge{
  background:
    linear-gradient(135deg, rgba(87,214,255,.18), rgba(255,46,111,.14));
  border-color: rgba(87,214,255,.28);
  color: rgba(230,240,255,.96);
}
.badge i{ color: var(--edu-cyan); }

/* 6) Nav CTA pill: gradient highlight */
.navpill--cta{
  background:
    linear-gradient(135deg, rgba(87,214,255,.20), rgba(255,46,111,.14));
  border-color: rgba(255,46,111,.26);
}

/* 7) Avatar: more premium ring */
.avatar{
  border-color: rgba(87,214,255,.34);
  box-shadow:
    0 0 0 9px rgba(87,214,255,.08),
    0 0 0 16px rgba(255,46,111,.06),
    0 28px 80px rgba(0,0,0,.60);
}

/* 8) Buttons: give primary a “school premium” vibe while keeping Steam feel */
.btn{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.045);
}
.btn:hover{
  border-color: rgba(255,255,255,.24);
}

.btn.primary{
  background:
    linear-gradient(180deg, rgba(183,243,74,.96), rgba(120,180,0,.90));
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 18px 60px rgba(183,243,74,.14),
    0 18px 60px rgba(255,46,111,.10);
}

/* Optional: add a SECONDARY premium button style if you want */
.btn.edu{
  background: linear-gradient(135deg, rgba(87,214,255,.88), rgba(255,46,111,.74));
  border-color: rgba(255,255,255,.18);
  color:#081222;
  font-weight: 900;
}
.btn.edu:hover{
  background: linear-gradient(135deg, rgba(87,214,255,.92), rgba(255,46,111,.82));
}

/* 9) Service cards: more “glass” */
.serviceCard{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.12);
}

/* 10) Form inputs: slightly more premium contrast */
input, select, textarea{
  border-color: rgba(255,255,255,.16);
  background: rgba(10,16,24,.78);
}

/* 11) Footer: subtle brand tint */
.footer{
  border-top-color: rgba(255,255,255,.12);
}

/* 12) Optional: improve underline behavior for links (more premium) */
a:hover{ text-decoration: none; }
.navpill:hover, .footerLinks a:hover, .quickLinks a:hover{
  text-decoration: none;
}

/* =========================================================
   PATCH: HERO IMAGE (no cropping) + image container polish
   Add class="heroMedia" to the hero image wrapper in HTML
   ========================================================= */

.heroMedia{
  margin-top: 14px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.heroMedia picture,
.heroMedia img{
  display:block;
  width:100%;
  height:auto !important;
}

.heroMedia img{
  object-fit: contain !important; /* critical: prevents cropping */
  max-height: none !important;
}

/* =========================================================
   PATCH — Bigger logo (Header + Footer) for new layout
   Works with:
   - .brandMark .brandLogo (header)
   - .footerMarkPro__img + optional horizontal logo in footer
   ========================================================= */

/* ---------- Header logo bigger ---------- */
.brandMark{
  display:flex;
  align-items:center;
  gap:14px;
}

.brandLogo{
  /* Bigger, premium, still sharp */
  width: 280px;
  height: auto;
  display:block;
}

/* Ensure header has enough height so logo doesn't feel squeezed */
.siteHeader__inner{
  align-items:center;
  min-height: 92px;
}

/* Brand text doesn't wrap weird */
.brandText{
  white-space: nowrap;
  color: rgba(159,179,204,.95);
  font-weight: 800;
  font-size: 13px;
}

/* Responsive: reduce logo size on smaller screens */
@media (max-width: 900px){
  .brandLogo{ width: 220px; }
  .siteHeader__inner{ min-height: 84px; }
}
@media (max-width: 520px){
  .brandLogo{ width: 190px; }
  .brandText{ display:none; } /* optional: cleaner mobile header */
}

/* ---------- Footer monogram bigger ---------- */
.footerMarkPro__img{
  width: 64px;   /* was ~44px */
  height: auto;
  display:block;
}

/* Footer spacing so bigger logo looks intentional */
.footerBottom__left{
  display:flex;
  align-items:center;
  gap:14px;
}

/* Optional: if you want the footer top area to feel more premium */
.footerPro__top{
  padding-top: 28px;
  padding-bottom: 22px;
}