/* =========================
   Design Tokens (edit here)
   ========================= */
:root{
  /* Palette */
  --color-bg:          #F8FAFD;
  --color-surface:     #FFFFFF;
  --color-ink:         #444746;
  --color-muted:       #7b807e;
  --color-muted-2:     #979B9A;
  --color-primary:     #5475ed;
  --color-primary-700: #4265b2;
  --color-stroke:      #9e9e9e;

  /* Layout & Radii */
  --container: 1300px;
  --radius-xl: 30px;
  --radius-lg: 14px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-1: 0 4px 10px rgba(0,0,0,.1);
  --shadow-2: 0 10px 30px rgba(0,0,0,.15);
  --btn-shadow: 0 2px 15px rgba(0,0,0,.25);
  --dropdown-shadow: 0 10px 24px rgba(0,0,0,.12);

  /* Motion */
  --dash-speed: 13s;
  --dash-gap: 5 5;

  /* Easing */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);

  --dropdown-offset: 18px;

    /* Additional spacing tokens (mobile polish) */
    --space-section-mobile: 44px; /* vertical section padding top on mobile */
    --space-section-bottom-mobile: 48px; /* bottom spacing */
    --space-block-mobile: 28px;
    --space-tight: 10px;

  /* Oferta card accents (also reused) */
  --of-blue:  var(--color-primary);
  --of-red:   #ef476f;
  --of-green: #06d6a0;
  --google-yellow: #eabb5e;

  --of-blue-10:  rgba(26,115,232,0.10);
  --of-red-10:   rgba(234,67,53,0.10);
  --of-green-10: rgba(52,168,83,0.10);

  /* Smart navbar */
  --nav-h: 84px;                 /* JS updates this */
  --nav-reveal-ms: 700ms;
}

/* Smaller viewports can subtly change stroke tone */
@media (max-width:1023px){
  :root{ --color-stroke: #B3B3B3; }
}

/* =============
   Reset & Base
   ============= */
*{ margin:0; padding:0; box-sizing:border-box; }
/* Desktop uses custom JS smooth scrolling; keep native smooth only on mobile to avoid double handling */
@media (max-width: 767px){
  /* ================= DEPARTMENT HERO (mobile) =================
     Adjust these three values to fine‑tune vertical space:          */
  .dept-hero-standard.hero{ padding:4px 10px 10px; } /* top | sides | bottom */
  .dept-hero-standard .hero-content{ padding:16px 10px 10px; gap:20px; }
  .dept-hero-standard .hero-image{ height:360px; } /* CPU image box height */
  .dept-hero-standard .hero-title{ font-size:1.95rem; }
  .dept-hero-standard .hero-description{ margin-bottom:18px; }

  /* ================= TOPICS STACK (mobile) ================= */
  .dept-topics.reordered{ grid-template-columns:1fr; justify-items:stretch; text-align:left; }
  .dept-topics.reordered .dept-topics-art{ margin:0 auto 10px; }
  .dept-topics.reordered .dept-topics-list{ max-width:none; width:100%; margin:0; padding-left:24px; }
  /* Optional: tighten list line height slightly */
  .dept-topics.reordered .dept-topics-list li{ line-height:1.45; }
  html{ scroll-behavior:smooth; }
}
@media (max-width:474px){
  /* Further tighten on very small phones */
  .dept-hero-standard.hero{ padding:2px 6px 8px; }
  .dept-hero-standard .hero-content{ padding:1px 1px 1px; gap:1px; }
  .dept-hero-standard .hero-image{ height:300px; }
  .dept-hero-standard .hero-title{ font-size:2.1rem; }
  .dept-topics.reordered .dept-topics-list{ font-size:.84rem; padding-left:18px; }
}
body{
  font-family: "Poppins", sans-serif;
  font-optical-sizing:auto;
  font-style:normal;
  font-variation-settings: "wdth" 100;
  background-color: var(--color-bg);
  color:#333;
}

/* Inline logo cluster inside hero (UTCN + Google) */
.hero-logos{ display:flex; align-items:center; gap:34px; margin:0 0 22px; flex-wrap:wrap; }
.hero-logos img{ display:block; height:44px; width:auto; object-fit:contain; }
.hero-logos .hero-utcn-logo{ height:48px; }
@media (max-width:1023px){
  .hero-logos{ gap:26px; margin-bottom:20px; }
  .hero-logos img{ height:40px; }
  .hero-logos .hero-utcn-logo{ height:44px; }
}
@media (max-width:639px){
  .hero-logos{ gap:20px; margin-bottom:16px; }
  .hero-logos img{ height:34px; }
  .hero-logos .hero-utcn-logo{ height:38px; }
}

/* Focus styles */
a, button{ outline: none; background: none; border: none; font: inherit; color: inherit; }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Mobile touch improvements */
@media (max-width: 767px) {
  /* Ensure minimum touch target size */
  .nav-link, .btn-primary, .btn-secondary, .of-btn, .enroll-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Improve button spacing */
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary {
    width: 100%;
    max-width: 280px;
  }
  
  /* Better spacing for mobile */
  .hero-buttons {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
}

/* =============================
   Mobile polish overrides (after initial rules)
   ============================= */
@media (max-width: 767px){
  /* Hero tightening */
  .hero{ padding:32px 16px 50px; }
  .hero-title{ font-size:2.05rem; line-height:1.08; margin-bottom:14px; letter-spacing:.2px; }
  .hero-description{ font-size:.9rem; line-height:1.55; margin-bottom:22px; }
  /* Context */
  .context{ padding: var(--space-section-mobile) 16px 38px; }
  .context-card{ padding:26px 18px 24px; border-radius:18px; }
  .context-card p{ font-size:.9rem; line-height:1.55; margin-bottom:14px; }
  /* Oferta */
  .oferta{ padding: var(--space-section-mobile) 12px 70px; }
  .oferta-title{ font-size:1.65rem; margin-bottom:14px; }
  .oferta-lead{ font-size:.88rem; margin-bottom:22px; }
  .of-card{ padding:22px 18px 18px; }
  .of-card-title{ font-size:1.2rem; margin-bottom:10px; }
  .of-list{ margin:6px 0 14px 16px; }
  .of-btn{ font-size:.85rem; }
  /* Beneficii */
  .beneficii{ padding: var(--space-section-mobile) 12px 48px; }
  .beneficii-title{ font-size:1.5rem; margin-bottom:20px; }
  .benefit-grid{ gap:22px; }
  .benefit-list{ gap:12px; }
  .benefit-list li{ padding:14px 14px 15px; border-radius:16px; }
  .b-text h3{ font-size:.92rem; }
  .b-text p{ font-size:.83rem; }
  .b-dots{ margin:4px 0 0 14px; font-size:.8rem; }
  /* Enroll */
  .enroll-cta{ margin-top:30px; padding:20px 18px 24px; border-radius:18px; }
  .enroll-title{ font-size:1.35rem; margin-bottom:22px; }
  .enroll-text{ font-size:.86rem; margin-bottom:20px; }
  .enroll-btn{ margin-top:10px; }
  /* Footer tightening */
  .footer-inner{ gap:38px; padding:46px 26px 44px; }
  .social-link{ gap:10px; }
}

@media (max-width:639px){
  .hero{ padding:20px 14px 42px; }
  .hero-content{ padding:26px 12px; }
  .hero-title{ font-size:1.85rem; }
  .hero-description{ font-size:.88rem; }
  .context{ padding:30px 14px 34px; }
  .context-card{ padding:22px 16px 20px; }
  .context-title{ font-size:1.35rem; }
  .context-card p{ font-size:.86rem; }
  .oferta{ padding:50px 12px 70px; }
  .oferta-title{ font-size:1.55rem; }
  .oferta-lead{ font-size:.85rem; }
  .of-card{ padding:0 16px 16px; }
  .of-rect{ height: 160px; margin: 14px 0 8px; }
  .of-card-title{ font-size:1.2rem; margin: 2px 0 4px; }
  .beneficii{ padding:42px 10px 46px; }
  .beneficii-title{ font-size:1.45rem; }
  .benefit-list li{ padding:12px 14px 14px; }
  .b-text h3{ font-size:.9rem; }
  .footer-inner{ padding:36px 16px 36px; gap:32px; }
  .social-link{ gap:8px; }
  .b-text p{ font-size:.8rem; }
  .enroll-cta{ padding:20px 14px 24px; }
  .enroll-title{ font-size:1.3rem; }
  .enroll-text{ font-size:.82rem; }

  /* Reorder and simplify Beneficii artwork on phones */
  #beneficii .benefit-grid,
  #beneficii-organizatii .benefit-grid { grid-template-columns: 1fr; }
  #beneficii .benefit-art,
  #beneficii-organizatii .benefit-art { order: 0; }
  #beneficii .benefit-copy,
  #beneficii-organizatii .benefit-copy { order: 1; }
  /* Swap wide illustration for simple icon */
  .benefit-img--desktop { display: none; }
  .benefit-img--mobile-icon {
    display: block;
    width: 64%;
    max-width: 340px;
    height: auto;
    margin: 6px auto 0;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.10));
    animation: mobileFloat 5.5s ease-in-out infinite;
  }
  /* Guard against any left offset on mobile */
  .benefit-img { margin-left: 0; }
}

/* Gentle float animation for mobile icons */
@keyframes mobileFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce){
  .benefit-img--mobile-icon{ animation: none !important; }
}

@media (max-width:474px){
  .hero{ padding:16px 10px 34px; }
  .hero-content{ padding:20px 10px; }
  .hero-title{ font-size:1.7rem; }
  .hero-description{ font-size:.8rem; }
  .context{ padding:24px 10px 30px; }
  .context-card{ padding:18px 12px 18px; }
  .context-title{ font-size:1.15rem; }
  .context-card p{ font-size:.78rem; }
  .oferta{ padding:44px 8px 56px; }
  .oferta-title{ font-size:1.45rem; }
  .oferta-lead{ font-size:.78rem; }
  .of-card{ padding:0 14px 14px; }
  .of-rect{ height: 140px; margin: 14px 0 10px; }
  .of-card-title{ font-size:1.1rem; }
  .beneficii{ padding:38px 8px 46px; }
  .beneficii-title{ font-size:1.35rem; }
  .benefit-list li{ padding:11px 12px 13px; }
  .b-text h3{ font-size:.85rem; }
  .b-text p{ font-size:.76rem; }
  .b-dots{ font-size:.75rem; }
  .enroll-cta{ padding:18px 12px 22px; }
  .enroll-title{ font-size:1.15rem; }
  .enroll-text{ font-size:.76rem; }
  .footer-inner{ padding:40px 18px 40px; }
}

/* Make buttons styled as links */
.nav-link{
  text-decoration:none;
  color: var(--color-muted-2);
  font-weight:500;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: var(--radius-lg);
  transition: background-color .18s ease, color .18s ease;
}
.nav-link:hover,
.nav-link:focus{
  background: #F2F4F7;
  color: var(--color-ink);
}

/* =================
   Smart Navbar Shell
   ================= */
.navbar-wrapper{
  position: fixed;
  top: 0; left: 0; right: 0;
  display:flex;
  justify-content:center;
  padding:0 16px;
  background:transparent;
  z-index: 999;
  pointer-events: none;
}

@media (max-width: 767px) {
  .navbar-wrapper {
    padding: 0;
    justify-content: flex-start;
  }
}
.navbar{
  pointer-events: auto;
  width:100%;
  max-width: var(--container);
  margin: 0 auto;

  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background: var(--color-surface);
  padding: 12px 60px;
  box-shadow: var(--shadow-1);

  display:flex;
  justify-content:space-between;
  align-items:center;

  transition: transform var(--nav-reveal-ms) var(--ease-smooth),
              opacity   var(--nav-reveal-ms) var(--ease-smooth);
  will-change: transform;
  position: relative;
  z-index: 1000;
}
.navbar--hidden{
  transform: translateY(calc(-1 * var(--nav-h)));
  opacity: 0;
}
#nav-spacer{ height: var(--nav-h); }
#nav-hover-zone{
  position: fixed; top:0; left:0; right:0; height:12px;
  z-index:1000; pointer-events:auto; background:transparent;
}

.navbar-left{ display:flex; align-items:center; }
.navbar-left a{ display:flex; align-items:center; }
.logo{ height:50px; margin:7px 10px 7px 7px; }
.logo-utcn{ height:40px; width:auto; margin:7px 0 7px 10px; display:block; object-fit:contain; }

.navbar-right{ display:flex; align-items:center; gap:28px; }
.navbar-menu{ list-style:none; display:flex; gap:28px; align-items: center; }
.navbar-menu li{ position: relative; }
.navbar-menu a.active{ color: var(--color-ink); font-weight:650; }

/* ===== Dropdown (desktop) ===== */
.dropdown-toggle{ display:flex; align-items:center; gap:.35rem; }
.chev{ display:inline-block; transform-origin: 50% 40%; transition: transform .25s var(--ease-smooth), opacity .2s ease; opacity:.8; font-size:.9em; }
.dropdown{
  position: absolute; top: 100%; left: 0; min-width: 320px;
  background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: 0 0px 24px rgba(0,0,0,.12); padding: 12px; list-style: none;
  max-height: 0; overflow: hidden; opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: max-height 280ms var(--ease-smooth), opacity 220ms ease, transform 280ms var(--ease-smooth);
  z-index: 1;
}
.has-dropdown > .dropdown::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px; }
.dropdown a{ display:block; padding:10px 14px; border-radius:10px; color: var(--color-muted); text-decoration:none; transition: background-color .18s ease, color .18s ease; white-space: nowrap; line-height: 1.25; }
.dropdown a:hover{ background:#F2F4F7; color: var(--color-ink); }
/* Desktop dropdown behavior */
@media (min-width: 768px) {
  .has-dropdown:hover > .dropdown,
  .has-dropdown:focus-within > .dropdown,
  .has-dropdown.open > .dropdown{ 
    max-height: 480px; 
    opacity: 1; 
    transform: translateY(0); 
    pointer-events: auto; 
  }
  .has-dropdown:hover > .dropdown-toggle .chev,
  .has-dropdown:focus-within > .dropdown-toggle .chev,
  .has-dropdown.open > .dropdown-toggle .chev{ 
    transform: rotate(180deg); 
  }
}

/* =================
   Context Section
   ================= */
.context { width: 100%; background: var(--color-surface); box-shadow: var(--shadow-1); padding: 20px 20px; content-visibility:auto; contain-intrinsic-size: 400px 600px; }
.context-card { max-width: var(--container); margin: 0 auto; padding: 40px 50px; text-align: center; }
.context-title { font-size: 1.8rem; font-weight: 700; color: var(--color-ink); margin-bottom: 24px; }
.context-card p { font-size: 1rem; line-height: 1.7; color: var(--color-muted); margin-bottom: 20px; }
.context-card p:last-child { margin-bottom: 0; }

/* ===========
   Buttons
   =========== */
.btn-primary{
  background-color: var(--color-primary); color:#fff; padding:10px 30px; text-decoration:none;
  border-radius: var(--radius-pill); font-weight:600;
  transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out; box-shadow: var(--btn-shadow);
}
.btn-primary:hover{ background-color: var(--color-primary-700); }
.btn-secondary{
  background-color: var(--color-surface); color: var(--color-ink); padding:10px 20px; text-decoration:none;
  border-radius: var(--radius-pill); font-weight:600; transition: background-color .2s ease-in-out;
  text-align:center; box-shadow: 0 2.08727px 10.4364px rgba(0,0,0,.15);
}
.btn-secondary:hover{ background-color:#eee; }
/* Color utility variants for hero department buttons */
.btn-dept-red{ background: var(--of-red); color:#fff; }
.btn-dept-red:hover{ background:#cc392d; }
.btn-dept-green{ background: var(--of-green); color:#fff; }
.btn-dept-green:hover{ background:#2c944a; }
.btn-dept-blue{ background: var(--of-blue); color:#fff; }
.btn-dept-blue:hover{ background:#0c5bd3; }

/* =========================
   Lightweight geometric background (GPU friendly)
   ========================= */
.bg-geometry{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.bg-layer{ position:absolute; inset:0; }

/* 1. Grid layer (optimized): single lightweight repeating pattern */
/* Rationale: Replaces 4 overlapping gradients + blend mode with a single repeating-linear-gradient.
   Cuts overdraw & removes mix-blend-mode (expensive on some GPUs). */
.bg-grid{
  /* Two orthogonal lightweight stripes to form full squares */
  background:
    repeating-linear-gradient(90deg,
      rgba(84,117,237,0.085) 0 1px,
      rgba(84,117,237,0.0) 1px 70px),
    repeating-linear-gradient(180deg,
      rgba(84,117,237,0.085) 0 1px,
      rgba(84,117,237,0.0) 1px 70px);
  background-size: 70px 70px;
  opacity:.75; /* slightly reduced since we doubled line count */
}

/* 2. Concentric circles (optimized): reduced to two soft radial glows (no blend mode) */
.bg-circles{
  background:
    radial-gradient(circle at 35% 60%, rgba(84,117,237,0.10), rgba(84,117,237,0) 55%),
    radial-gradient(circle at 72% 42%, rgba(234,67,53,0.10), rgba(234,67,53,0) 58%);
  opacity:.10; /* overall softness */
  /* Removed mix-blend-mode to lower composite cost */
}

/* 3. Accent lines (optimized): single sparse pattern, no blend mode */
.bg-accent-lines{
  /* Add opposing diagonal to complete diamond lattice */
  background:
    repeating-linear-gradient(45deg,
      rgba(84,117,237,0.06) 0 1px,
      rgba(84,117,237,0) 1px 64px),
    repeating-linear-gradient(-45deg,
      rgba(84,117,237,0.06) 0 1px,
      rgba(84,117,237,0) 1px 64px);
  opacity:.65; /* reduce cumulative visibility for subtlety */
}

/* Background layers now static (parallax removed). Kept class for stacking context only. */
.bg-layer{ /* placeholder to satisfy linter after parallax removal */ pointer-events:none; }

/* 4. Subtle dashed SVG overlay (thicker & darker for visibility) */
.bg-dashes{ opacity:.50; }
.bg-dashes svg{ width:100%; height:100%; }
/* Scale SVG slightly larger so upward parallax doesn't expose empty area near bottom */
.bg-dashes svg{ transform: scale(1.25); transform-origin:50% 50%; }
/* 5. Vignette edge shade (after dashes so it sits above geometry but still subtle) */
.bg-edge-shade{
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, rgba(248,250,253,0) 0%, rgba(248,250,253,0) 46%, rgba(248,250,253,0.06) 64%, rgba(0,0,0,0.08) 100%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06), rgba(255,255,255,0) 64%);
  mix-blend-mode: multiply;
  opacity:.2;
}
@media (max-width:767px){
  .bg-edge-shade{ opacity:.1; }
}
/* Base stroke tokens */
.dash-line, .dash-ring{ 
  fill:none; 
  stroke-width:1.5; 
  stroke-dasharray:6 11; 
  stroke-linecap:round; 
  vector-effect: non-scaling-stroke; 
}
/* Visibility tiers */
.ring-faint, .line-faint{ stroke: rgba(68,71,70,0.16); }
.ring-mid, .line-mid   { stroke: rgba(68,71,70,0.26); }
.ring-bold             { stroke: rgba(68,71,70,0.36); }

/* Animation */
@keyframes dashShift { to { stroke-dashoffset: -100; } }
.dash-anim{ animation: dashShift 14s linear infinite; }
.dash-anim-slow{ animation: dashShift 25s linear infinite; }
.dash-anim-fast{ animation: dashShift 8s linear infinite; }

/* Mobile scaling (slightly thicker, tighter spacing) */
@media (max-width:767px){
  .dash-line, .dash-ring{ stroke-width:1.5; stroke-dasharray:6 10; }
  .bg-dashes{ opacity:.6; }
}
@media (max-width:474px){
  .dash-line, .dash-ring{ stroke-width:1.2; stroke-dasharray:6 9; }
}
@media (prefers-reduced-motion: reduce){ .dash-anim, .dash-anim-slow, .dash-anim-fast{ animation:none; } }

/* =================
   Burger button
   ================= */
.burger{ display:none; flex-direction:column; justify-content:center; align-items:center; width:26px; height:20px; background:none; border:none; cursor:pointer; padding:0; gap:5px; position:relative; z-index:1001; }
.burger-line{ width:75%; height:3px; background-color:#c3ccc9; border-radius:2px; transition: all .3s ease-in-out; }
.burger.open .burger-line:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.burger.open .burger-line:nth-child(2){ opacity:0; }
.burger.open .burger-line:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* ===============
   Hero section
   =============== */
.hero{ padding:40px 20px 70px; display:flex; justify-content:center; }
.hero-container{ width:100%; }
.hero-content{
  max-width: var(--container); width:100%; margin:0 auto; padding:60px 40px;
  display:flex; justify-content:space-between; align-items:center; gap:60px; flex-wrap:wrap;
}

.hero-text{ min-width:320px; flex:1.1; }
.hero-subtitle{ text-transform:uppercase; font-size:.9rem; color:#7d7d7d; letter-spacing:1px; font-weight:500; margin-bottom:10px; }
.hero-title{ font-size:3rem; font-weight:700; color: var(--color-ink); line-height:1.2; margin-bottom:20px; }

/* Floating shield */
.hero-image{ flex:.9; min-width:300px; display:flex; justify-content:center; filter: drop-shadow(var(--shadow-2)); height:500px; }
.hero-image img{ max-width:100%; height:auto; animation: heroFloat 4s ease-in-out infinite; }
@keyframes heroFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
  100%{ transform: translateY(0px); }
}

/* Rotating word (per-letter animation + color themes) */
.highlight{
  display:inline-block;
  position:relative;
  min-width: 8ch; /* reduce layout jump as words change */
}
.highlight .letter{
  display:inline-block;
  transform: translateY(1.1em);
  opacity: 0;
}
.highlight .letter.in{
  transform: translateY(0);
  opacity: 1;
  transition: transform 520ms var(--ease-smooth), opacity 520ms var(--ease-smooth);
}
.highlight .letter.out{
  transform: translateY(-1.1em);
  opacity: 0;
  transition: transform 480ms var(--ease-smooth), opacity 480ms var(--ease-smooth);
}

/* color themes for the rotating word */
.hl-blue   { color: var(--of-blue);   text-shadow: 0 4px 6px rgba(26,115,232,.30); }
.hl-green  { color: var(--of-green);  text-shadow: 0 4px 6px rgba(52,168,83,.30); }
.hl-red    { color: var(--of-red);    text-shadow: 0 4px 6px rgba(234,67,53,.30); }
.hl-yellow { color: var(--google-yellow); text-shadow: 0 4px 6px rgba(250,189,3,.30); }

.hero-description{ font-size:1rem; color: var(--color-muted); line-height:1.6; margin-bottom:30px; }
.hero-buttons{ display:flex; gap:20px; flex-wrap:wrap; }

/* =================
   Oferta Section
   ================= */
.oferta{ padding: 80px 20px 100px; background: transparent; content-visibility:auto; contain-intrinsic-size: 500px 800px; }
.oferta-inner{ max-width: var(--container); margin: 0 auto; text-align: center; }
.oferta-title{ font-size: 2.2rem; font-weight: 800; color: var(--color-ink); letter-spacing: .2px; margin-bottom: 12px; }
.oferta-lead{ color: var(--color-muted); line-height: 1.7; max-width: 950px; margin: 0 auto 36px; }
.oferta-grid{ 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 24px; 
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}
.of-card{
  background: var(--color-surface);
  border-radius: 28px;
  box-shadow: var(--shadow-2);
  padding: 0 20px 22px; /* top spacing handled by placeholder rectangle */
  display: flex; flex-direction: column; align-items: stretch;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.of-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.14); }
.of-icon{ display:none; }
.of-blue { background: var(--of-blue-10); color: var(--of-blue); }
.of-red  { background: var(--of-red-10);  color: var(--of-red);  }
.of-green{ background: var(--of-green-10); color: var(--of-green); }
.of-card-title{ font-size: 1.65rem; font-weight: 800; margin: 2px 0 2px; letter-spacing:.2px; }
.of-blue-txt{ color: var(--of-blue); } .of-red-txt{ color: var(--of-red); } .of-green-txt{ color: var(--of-green); }
.of-list{ 
  margin: 2px 0 0 18px; 
  color: var(--color-ink); 
  line-height: 1.55; 
  list-style: disc;
}
.of-list li{ margin-bottom: 4px; color: #4a4d4c; }
.of-list li::marker{ color:#6b7280; }
.of-btn{ display:none; }

/* Large colored placeholder rectangles (image slots) */
.of-rect{ 
  width: 100%; 
  height: 210px; 
  border-radius: 18px; 
  margin: 24px 0 10px; 
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.of-rect--blue{ background:#DBF0FF; }
.of-rect--red{  background:#FAD6D9; }
.of-rect--green{background:#DDFBEF; }

/* Image replacement inside Oferta rectangles */
.of-rect-img{
  display:block;
  width:100%;
  height:210px;            /* match .of-rect height */
  border-radius:18px;      /* match .of-rect radius */
  object-fit:cover;        /* fill nicely */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
  margin: 24px 0 10px;     /* match .of-rect margins */
}

/* =================
   Beneficii section
   ================= */
.beneficii{
  padding: 64px 20px 32px;
  background: transparent; /* same vibe as hero */
  content-visibility:auto; contain-intrinsic-size: 520px 900px;
}
.beneficii-inner{
  max-width: var(--container);
  margin: 0 auto;
}
.beneficii-title{
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-ink);
  margin-bottom: 28px;
  text-align: left;
  padding-left: 24px; /* Align with benefit cards */
}

/* two-column layout */
.benefit-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: stretch; /* make both columns equal height */
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
}

/* list */
.benefit-list{
  list-style: none;
  display: grid;
  gap: 24px;
}
.benefit-list li{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start; /* Align badge to the top */
  background: var(--color-surface);
  border-radius: 20px;
  padding: 20px 24px;
  box-shadow: var(--shadow-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.benefit-list li:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.badge{
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  flex-shrink: 0;
  margin-top: 2px;
}
.badge--blue   { background: var(--of-blue); }
.badge--green  { background: var(--of-green); }
.badge--red    { background: #EA4335; }
.badge--yellow { background: var(--google-yellow); }

.b-text h3{
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 8px;
  line-height: 1.3;
  margin-top: 0;
}
/* Dedicated class to replace inline margin styles on benefit headings */
.benefit-heading{ margin:12px 0 15px; font-size:1.08rem; }
@media (max-width:767px){ .benefit-heading{ font-size:.95rem; margin:10px 0 12px; } }
@media (max-width:639px){ .benefit-heading{ font-size:.9rem; margin:8px 0 11px; } }
@media (max-width:474px){ .benefit-heading{ font-size:.85rem; margin:7px 0 10px; } }

/* Consistent styling for content blocks */
.b-text p,
.b-dots li {
  background: #f7f7f7;
  padding: 12px;
  border-radius: 10px;
  box-shadow: none;
  color: var(--color-muted);
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
  display: block;
}

.b-dots li {
  min-width: 0;
  word-wrap: break-word; /* Forces long links or emails to wrap */
  overflow-wrap: anywhere; 
}

.b-dots{
  margin: 8px 0 0 0;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}
.b-dots li {
  margin-bottom: 0; /* Reset margin from previous rule */
}
.b-dots li::marker{
  display: none; /* Hide default marker */
}

/* Ensure inline links inside schedule bullets look integrated and wrap well */
.b-dots a,
.b-text a{
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  font-weight: 600;
  display: inline;           /* keep links within the text flow */
  white-space: normal;       /* behave like regular paragraph text */
  overflow-wrap: break-word; /* wrap only when needed, not per character */
  word-break: normal;
}

/* artwork */
.benefit-art{
  display:flex;
  justify-content:center;
  align-items: stretch; /* fill full column height */
  padding: 0;
  overflow: hidden;      /* prevent visual overflow */
  min-height: 0;         /* allow the grid item to shrink within row */
}
/* Desktop wide artwork shown by default; mobile icon hidden by default */
.benefit-img--desktop{ display:block; }
.benefit-img--mobile-icon{ display:none; }
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02) rotate(-1deg);
  }
}

.benefit-img {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin-left: 120px;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.12));
  transition: transform 0.3s ease;
  animation: breathe 8s ease-in-out infinite; /* <--- this line makes it breathe */
  margin-top: 10px; /* small safety margin */
}

.benefit-img--tall {
  display: block;          /* remove baseline gap */
  height: 86%;             /* match column height */
  width: auto;             /* keep aspect ratio */
  max-height: 100%;        /* never exceed column */
  max-width: 100%;         /* don't overflow horizontally */
  object-fit: contain;     /* scale inside container without cropping */
}

/* Desktop-only: center the tall student illustration (REFERENCE POSITIONING.svg)
   by removing the global left offset so it matches BRIEFCARE’s centering */
@media (min-width: 768px){
  #beneficii .benefit-img--tall{
    padding-left: 25px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px; /* keep existing small safety margin */
  }
}


/* Enroll card */
.enroll-cta{
  margin-top: 5px; /* tightened to reduce gap to Beneficii */
  margin-bottom: 32px; /* add breathing room before next section */
  background: transparent; /* removed white card background */
  border-radius: 0; /* no rounded box when transparent */
  padding: 0 20px 6px; /* slight bottom padding for text/button balance */
  text-align: center;
  box-shadow: none; /* remove shadow */
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
}
/* Desktop breathing room below benefits list before the enroll blocks */
@media (min-width: 640px){
  #beneficii .enroll-cta,
  #beneficii-organizatii .enroll-cta{ margin-top: 48px; }
}
.enroll-title{
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--color-ink);
  line-height: 1.15;
  margin-bottom: 28px;
}
.enroll-text{
  color: var(--color-muted);
  line-height: 1.65;
  max-width: 900px;
  margin: 0 auto 26px;
  font-size: 1.02rem;
}
.enroll-btn{
  margin-top: 8px; /* sits closer like screenshot */
  font-size: 0.95rem;
  padding: 14px 32px;
}

/* Inline links inside enrollment paragraphs */
.enroll-link{
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  position: relative;
  transition: color .2s ease;
}
.enroll-link::after{
  content:"";
  position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background: currentColor; opacity:.35; transition: opacity .25s ease, transform .25s ease;
  transform-origin: left center; transform: scaleX(.85);
}
.enroll-link:hover{ color: var(--color-primary-700); }
.enroll-link:hover::after{ opacity:.75; transform: scaleX(1); }

/* =================
   Footer
   ================= */
.site-footer{
  background: var(--color-surface);
  box-shadow: 0 -2px 8px rgba(0,0,0,.06), 0 -6px 18px rgba(0,0,0,.05);
  margin: 60px 0 0;
  width: 100%;
  border-radius: 0; /* full width */
  content-visibility:auto; contain-intrinsic-size: 420px 1000px;
}
.footer-inner{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:54px;
  padding:52px clamp(32px,5vw,90px) 38px;
  color: var(--color-ink);
  font-size:.9rem;
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}
.footer-col{ line-height: 1.55; }
.footer-heading{ font-size:1.08rem; font-weight:700; margin:0 0 16px; text-align:center; }
.footer-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-list li{ color: var(--color-muted); display:flex; align-items:center; gap:10px; justify-content:center; }
.footer-text{ color:var(--color-muted); margin:0 0 16px; text-align:center; line-height:1.5; font-size:.9rem; }
.footer-copy{ margin:18px 0 0; font-size:.72rem; color: var(--color-muted-2); font-weight:500; }
.footer-link{ color: var(--color-ink); font-weight:600; text-decoration: underline; text-underline-offset:3px; }
.footer-link:hover{ color: var(--color-primary); }

/* simple icon placeholders */
/* old placeholder classes removed */
/* Social media inline icons */
.footer-col--social{ text-align:left; }
.social-list{ align-items:flex-start; }
.social-list--left li{ justify-content:flex-start; }
.social-list--left .social-link{ justify-content:flex-start; }
.social-list li{ gap:12px; }
.sm-icon-inline{ width:18px; height:18px; display:block; color: var(--color-muted); }
/* consolidated + resized social icon */
.sm-icon-inline{ 
  display:inline-block; 
  width:18px; 
  height:18px; 
  flex-shrink:0; 
  vertical-align:middle; 
  overflow:visible; 
}
.social-link svg{ 
  width:18px; height:18px; 
  stroke-width:0; 
}
.social-link{ line-height:1.3; }
.social-link{ display:flex; align-items:center; gap:12px; text-decoration:none; color: var(--color-muted); font-weight:500; line-height:1.4; }
.social-link span{ color: var(--color-muted); }
.social-link:hover{ color: var(--color-ink); }
.social-link:hover span{ color: var(--color-ink); }
.social-link:hover .sm-icon-inline{ color: var(--color-ink); }

/* ==========================
   Subtle Scroll Reveal Animations
   ========================== */
html.no-js .reveal{ opacity:1; transform:none; }
/* Base reveal */
.reveal{ 
  opacity:0; 
  transform: translateY(24px);
  transition: opacity .75s var(--ease-smooth), transform .75s var(--ease-smooth);
  will-change: opacity, transform;
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }
/* Variant helpers */
.reveal-fade{ transform: none; }
.reveal-scale{ transform: scale(.94); }
.reveal-scale.is-visible{ transform: scale(1); }
.reveal-left{ transform: translateX(-32px); }
.reveal-left.is-visible{ transform: translateX(0); }
.reveal-right{ transform: translateX(32px); }
.reveal-right.is-visible{ transform: translateX(0); }
/* Stagger groups: children inside .reveal-group get delays via JS */
.reveal-group > .reveal{ /* allow individual transition delays via inline style */ backface-visibility:hidden; }
/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale, .reveal-left, .reveal-right{ 
    opacity:1 !important; 
    transform:none !important; 
    transition:none !important; 
  }
}

/* removed .footer-bottom bar */

@media (max-width:1023px){
  .footer-inner{ gap:38px; padding:46px 46px 40px; font-size:.88rem; }
}
@media (max-width:767px){
  .footer-inner{ grid-template-columns:1fr; gap:28px; padding:34px 22px 30px; text-align:center; font-size:.86rem; }
  .footer-col, .footer-heading, .footer-text, .footer-copy{ text-align:center; }
  .footer-list{ justify-items:center; }
  .footer-list li{ justify-content:center; }
  .footer-col--social{ text-align:center; }
  .social-link{ justify-content:center; }
}
@media (max-width:474px){
  .site-footer{ margin-top:30px; }
  .footer-inner{ padding:30px 16px 28px; gap:22px; font-size:.8rem; }
  .footer-heading{ margin-bottom:12px; font-size:1rem; }
  .footer-text{ margin-bottom:14px; font-size:.82rem; line-height:1.45; }
  .footer-copy{ margin-top:14px; font-size:.68rem; }
  .social-link{ gap:8px; }
}

/* =============================
   Department Page Additions
   ============================= */
body.dept-page{ background: var(--color-bg); }
/* Department hero now reuses global hero; remove old styling */
.dept-hero-standard{ background:transparent; padding:0; }
.dept-hero-standard .hero-content{ padding:60px 40px; }
/* Base desktop/tablet hero image height; mobile overrides earlier in file */
@media (min-width:768px){
  .dept-hero-standard .hero-image{ height:500px; }
}
.dept-cpu-img{ max-width:100%; height:auto; animation: heroFloat 4s ease-in-out infinite; filter: drop-shadow(var(--shadow-2)); }

/* Structure / Topics */
.dept-structure{ background: transparent; padding:0 0 54px; content-visibility:auto; contain-intrinsic-size:600px 900px; }
.dept-structure-band{ background: var(--color-surface); box-shadow: var(--shadow-1); padding:60px 40px 38px; }
.dept-structure-body{ padding:60px 40px 0; }
.dept-structure-inner{ max-width:1200px; margin:0 auto; }
.dept-section-title{ font-size:2.05rem; font-weight:800; color: var(--color-ink); margin:0 0 30px; text-align:center; }
.dept-structure-lead{ max-width:1000px; margin:0 auto 34px; line-height:1.65; color: var(--color-muted); text-align:center; }
.dept-topics{ display:grid; grid-template-columns:1fr 0.9fr; gap:50px; align-items:start; }
.dept-topics.reordered{ grid-template-columns:0.95fr 1fr; align-items:center; }

/* --- FINAL MOBILE OVERRIDE FOR TOPICS (forces book above list) --- */
@media (max-width: 767px){
  .dept-topics.reordered{ grid-template-columns:1fr !important; }
  .dept-topics.reordered .dept-topics-art{ order:0; width:100%; display:flex; justify-content:center; margin:0 0 14px !important; }
  .dept-topics.reordered .dept-topics-list{ order:1; width:100%; max-width:none; margin:0 !important; padding:0 0 0 22px !important; }
}
.dept-section-bg{ background: var(--color-surface); box-shadow: var(--shadow-1); padding:60px 40px 50px; margin:60px auto 60px; border-radius:0; width:100%; }
.dept-section-bg .dept-section-title{ margin-top:0; }
.dept-topics-list{ margin:0; padding-left:20px; display:grid; gap:8px; font-size:.95rem; line-height:1.5; color:#4a4d4c; }
.dept-topics-art{ display:flex; justify-content:center; }
.dept-book-illustration{ width:260px; height:260px; filter: drop-shadow(0 10px 26px rgba(0,0,0,.16)); animation: heroFloat 5s ease-in-out infinite; }
.dept-book-illustration.large{ width:360px; height:360px; }

/* Activity cards */
.dept-activity-cards{ margin:50px 0 34px; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px; }
.dept-activity-card{ background:#fff; border-radius:28px; padding:28px 26px 26px; box-shadow: var(--shadow-2); display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; transition: transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth); will-change: transform; }
.dept-activity-card:hover{ transform: translateY(-8px); box-shadow:0 18px 40px -8px rgba(0,0,0,.18); }
.dept-activity-icon{ width:60px; height:60px; display:grid; place-items:center; border-radius:22px; background: var(--of-blue-10); font-size:1.6rem; }
.dept-act-title{ font-size:1.15rem; font-weight:700; margin:4px 0 4px; color: var(--color-ink); }
.dept-act-period{ font-size:.8rem; letter-spacing:.3px; font-weight:600; text-transform:uppercase; color: var(--color-muted); margin:0 0 6px; }
.dept-act-list{ margin:0; padding-left:18px; line-height:1.55; display:grid; gap:4px; font-size:.9rem; }
.dept-act-list li{ color:#4a4d4c; }

.dept-report-info{ margin:12px auto 14px; line-height:1.55; color: var(--color-muted); font-size:.95rem; max-width:820px; text-align:center; }
.dept-report-list{ margin:0 auto 10px; padding:0; display:grid; gap:6px; font-size:.9rem; line-height:1.5; color:#4a4d4c; list-style-position:inside; text-align:center; }

/* Schedule */
.dept-schedule{ padding:0 0 60px; }
.dept-schedule-band{ background: var(--color-surface); box-shadow: var(--shadow-1); padding:60px 40px 40px; }
.dept-schedule-body{ padding:50px 40px 0; }
.schedule-grid{ align-items:start; }
.schedule-grid{ max-width:1000px; margin:0 auto; }
.schedule-grid .benefit-copy{ width:100%; }
.schedule-grid .benefit-list{ margin:0 auto; }
.schedule-grid{ display:block; }
.schedule-list .b-text h3{ font-size:.95rem; margin:10px 0 10px; }
.schedule-list .b-dots{ font-size:.8rem; }
.schedule-art{ display:flex; justify-content:center; align-items:center; }
.schedule-art .benefit-img{ max-width:300px; }
.schedule-list .b-dots li{ color:#4a4d4c; }
.schedule-list .b-dots li::marker{ color:#4a4d4c; }
.schedule-list .badge{ background: var(--of-blue); }
.schedule-list .b-text h3 strong,
.schedule-list .b-dots li strong{ font-weight:800; color: var(--color-primary); }

/* Green variant for Comunicare page */
.schedule-list--green .badge{ background: var(--of-green); }
.schedule-list--green .b-text h3 strong,
.schedule-list--green .b-dots li strong{ color: var(--of-green); }

/* Red variant for Calculatoare page */
.schedule-list--red .badge{ background: var(--of-red); }
.schedule-list--red .b-text h3 strong,
.schedule-list--red .b-dots li strong{ color: var(--of-red); }

/* =============================
   Course Accordion (department schedule)
   ============================= */
.course-accordion{ display:grid; gap:14px; max-width:1000px; margin:0 auto; }
.course-item{ background: var(--color-surface); border-radius:20px; box-shadow: var(--shadow-1); overflow:hidden; }
.course-header{ width:100%; text-align:left; display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:16px 18px; cursor:pointer; }
.course-title{ font-weight:700; color: var(--color-ink); }
.course-meta{ color: var(--color-muted); font-weight:600; }
.course-chevron{ transition: transform .25s var(--ease-smooth); opacity:.8; }
.course-header[aria-expanded="true"] .course-chevron{ transform: rotate(180deg); }
.course-panel{ max-height:0; overflow:hidden; opacity:.0; transform: translateY(-4px); transition: max-height .35s var(--ease-smooth), opacity .25s ease, transform .35s var(--ease-smooth); }
.course-panel.open{ opacity:1; transform: translateY(0); }
.course-panel-inner{ padding: 8px 18px 18px; }

@media (max-width:767px){
  .course-header{ grid-template-columns: 1fr auto 20px; padding:14px 16px; }
  .course-panel-inner{ padding: 6px 14px 14px; }
}

@media (max-width:1023px){
  .schedule-grid{ max-width:100%; }
}
@media (max-width:639px){
  .schedule-list .b-text h3{ font-size:.9rem; }
  .schedule-art .benefit-img{ max-width:190px; }
}
.dept-schedule-inner{ max-width:1100px; margin:0 auto; }
.dept-schedule-lead{ text-align:center; max-width:900px; margin:0 auto 14px; line-height:1.6; color: var(--color-muted); }
.dept-steps{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:26px; }
.dept-steps > li{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:flex-start; background:transparent; padding:0 0 4px; border-radius:0; box-shadow:none; border-bottom:1px solid rgba(0,0,0,.06); }
.dept-steps > li:last-child{ border-bottom:none; }
.step-badge{ width:38px; height:38px; border-radius:50%; background: var(--color-primary); color:#fff; font-weight:700; display:grid; place-items:center; font-size:1rem; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.step-body h3{ margin:0 0 12px; font-size:1rem; line-height:1.4; color: var(--color-ink); font-weight:700; }
.step-points{ margin:0; padding-left:18px; display:grid; gap:6px; font-size:.85rem; line-height:1.45; color:#4a4d4c; }

/* Procedure */
.dept-procedure{ padding:56px 24px 60px; background: var(--color-surface); box-shadow: 0 -2px 8px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05); text-align:center; }
.dept-procedure-inner{ max-width:900px; margin:0 auto; }
.dept-proc-lead{ line-height:1.65; color: var(--color-muted); margin:0 auto 26px; max-width:820px; }
.dept-cta-btn{ margin-top:10px; }

/* Success */
.dept-success{ margin-top:100px; margin-bottom: 100px; padding:90px 24px px; text-align:center; }
.dept-success-text{ font-size:4.5rem; font-weight:800; letter-spacing:1px; display:inline-flex; gap:.15em; }
.dept-success-text span{ display:inline-block; color: var(--color-primary); animation: successFloat 5.5s ease-in-out infinite; text-shadow:0 6px 18px rgba(0,0,0,.18); }
.dept-success-text span:nth-child(2){ color: var(--of-green); }
.dept-success-text span:nth-child(3){ color: var(--of-red); }
.dept-success-text span:nth-child(4){ color: var(--google-yellow); }
.dept-success-text span:nth-child(5){ color: var(--color-primary); }
.dept-success-text span:nth-child(6){ color: var(--of-green); }
.dept-success-text span:nth-child(7){ color: var(--of-red); }
.dept-success-text span:nth-child(2){ animation-delay:.15s; }
.dept-success-text span:nth-child(3){ animation-delay:.3s; }
.dept-success-text span:nth-child(4){ animation-delay:.45s; }
.dept-success-text span:nth-child(5){ animation-delay:.6s; }
.dept-success-text span:nth-child(6){ animation-delay:.75s; }
.dept-success-text span:nth-child(7){ animation-delay:.9s; }
@keyframes successFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* Utilities */
.visually-hidden{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }
.no-wrap{ white-space:nowrap; }

/* Responsive adjustments */
@media (max-width:1023px){
  .dept-topics{ grid-template-columns:1fr; }
  .dept-book-illustration{ width:210px; height:210px; }
  .dept-hero--compact .dept-hero-inner{ padding:34px 34px; }
}
@media (max-width:767px){
  .dept-title{ font-size:2.3rem; }
  .dept-hero-inner{ gap:34px; }
  .dept-hero--compact .dept-hero-inner{ border-radius:24px; }
  .dept-topics-list{ font-size:.9rem; }
  .dept-activity-cards{ margin:40px 0 30px; }
  .dept-success-text{ font-size:3.4rem; }
  .dept-steps > li{ grid-template-columns:1fr; }
  .step-badge{ width:34px; height:34px; font-size:.9rem; }
  .step-body h3{ font-size:.95rem; }
}
@media (max-width:474px){
  .dept-title{ font-size:2rem; }
  .dept-success-text{ font-size:2.8rem; }
  .dept-structure-band, .dept-schedule-band{ padding:38px 24px 32px; }
  .dept-structure-body, .dept-schedule-body{ padding:40px 24px 0; }
  .dept-book-illustration.large{ width:280px; height:280px; }
}


/* =================
   Media Queries
   ================= */

/* 2xl ↓ */
@media (max-width:1535px){ .navbar{ max-width:1200px; } }
/* xl ↓ */
@media (max-width:1279px){
  .navbar{ max-width:1100px; padding:12px 50px; }
  .navbar-right{ gap:26px; }
  .navbar-menu{ gap:26px; }
}
/* lg ↓ */
@media (max-width:1023px){
  .navbar{ max-width:950px; padding:12px 40px; }
  .navbar-menu{ gap:24px; }
  .navbar-right{ gap:24px; }
  .nav-link{ font-size:.85rem; }
  .logo{ height:40px; }
  .logo-utcn{ height:32px; }
  .btn-primary{ font-size:.75rem; padding:8px 24px; }

  .oferta-grid{ grid-template-columns: repeat(2, 1fr); }
}
/* md ↓ */
@media (max-width: 767px){
  .navbar{ 
    width: calc(100% - 32px);
    max-width: none;
    padding: 16px 20px; 
    margin: 0 16px;
    border-radius: 0 0 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .burger{ 
    display: flex; 
    margin-left: auto; 
    align-self: center;
    order: 2;
  }
  .navbar-left {
    order: 1;
    flex: 1;
  }

  .navbar-right{
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    background: var(--color-surface);
    border-radius: 0 0 20px 20px;
    box-shadow: var(--shadow-2);
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 0; 
    width: calc(100% - 32px);
    padding: 0 0 25px 0;
    max-height: 0; 
    overflow: visible; 
    opacity: 0; 
    transform: translateY(-10px); 
    pointer-events: none;
    transition: opacity 220ms var(--ease-smooth), transform 300ms var(--ease-smooth), max-height 300ms var(--ease-smooth);
    z-index: 1;
  }
  .navbar-right.show{ 
    opacity: 1; 
    transform: translateY(0); 
    pointer-events: auto; 
    overflow: visible;
    max-height: 600px;
  }

  .navbar-menu{ 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    gap: 0; 
    padding: 20px 0 0 0; 
    list-style: none;
  }
  .navbar-menu li{ 
    width: 100%; 
    border-bottom: 1px solid #f0f0f0;
  }
  .navbar-menu li:last-child {
    border-bottom: none;
  }
  .navbar-menu .nav-link{ 
    text-align: left; 
    display: block; 
    width: 100%; 
    padding: 14px 18px; 
    font-size: 1rem;
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color 0.2s ease;
  }
  .navbar-menu .nav-link:hover {
    background-color: #f8f9fa;
  }

  .dropdown{
    position: static; 
    min-width: 0; 
    width: 100%; 
    box-shadow: none; 
    background: #f8f9fa;
    max-height: 0; 
    opacity: 0; 
    pointer-events: none; 
    padding: 0;
    transition: max-height 300ms var(--ease-smooth), opacity 300ms ease;
    overflow: hidden;
    border-radius: 0;
  }
  .has-dropdown.open > .dropdown{ 
    max-height: 300px; 
    opacity: 1; 
    pointer-events: auto; 
  }
  .dropdown a{ 
    padding: 11px 18px 11px 38px; 
    border-radius: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    display: block;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }
  .dropdown a:hover {
    background-color: #e9ecef;
  }

  .btn-primary{ 
    align-self: stretch; 
    text-align: center; 
    width: calc(100% - 40px); 
    font-size: 1rem; 
    padding: 16px 20px; 
    margin: 20px 20px 0 20px;
    border-radius: var(--radius-pill);
  }
  .nav-link{ font-size:1rem; }
  /* Smaller logos on mobile to ensure hamburger is visible */
  .logo{ height:34px; }
  .logo-utcn{ height:26px; margin-left:8px; }

  /* Hero section mobile improvements */
  .hero{ 
    padding: 40px 16px 60px; 
    margin-top: 0;
  }
  .hero-container{ 
    width: 100%; 
    max-width: 100%;
  }
  .hero-content{
    padding: 0;
    flex-direction: column;
    gap: 30px;
    text-align: center;
    max-width: 100%;
  }
  .hero-text{ min-width:unset; flex:none; width:100%; order:2; }
  .hero-title{ 
    font-size: 2.2rem; 
    line-height: 1.1;
    margin-bottom: 16px;
    text-align: center;
  }
  .hero-subtitle{ 
    font-size: 0.8rem; 
    margin-bottom: 8px;
    text-align: center;
  }
  .hero-description{ font-size:0.95rem; line-height:1.6; margin-bottom:24px; text-align:center; }
  .hero-buttons{ 
    flex-direction: column; 
    gap: 12px; 
    align-items: center;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    position: relative;
  }
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary{ width:100%; margin:0; }
  /* Extra specificity to ensure primary CTA loses outer mobile margin calc */
  .hero-buttons .btn-primary{ width:100%; margin:0; align-self:center; }
  .hero-image{ flex:none; min-width:unset; height:250px; order:1; width:100%; display:flex; justify-content:center; }

  /* Mobile hero title (HOME ONLY): keep fixed phrase on one line, animated word below */
  body.home .hero-title{ 
    font-size: clamp(1.15rem, 5.2vw, 1.8rem); /* tweak these values if it still wraps */
    white-space: nowrap; 
  }
  /* Hide the manual line break on mobile (HOME only) */
  body.home .hero-title br{ display:none; }
  /* Put the animated word on its own centered line (HOME only) */
  body.home .hero-title .highlight{ display:block; width:100%; text-align:center; margin-top:10px; white-space:nowrap; }

  /* Beneficii: on phones/tablets show simple icon above list */
  #beneficii .benefit-grid,
  #beneficii-organizatii .benefit-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "art"
      "copy";
  }
  #beneficii .benefit-copy,
  #beneficii-organizatii .benefit-copy{ grid-area: copy; }
  #beneficii .benefit-art,
  #beneficii-organizatii .benefit-art{ grid-area: art; }
  /* Swap wide illustration for simple icon on mobile */
  .benefit-img--desktop{ display:none; }
  .benefit-img--mobile-icon{
    display:block;
    width:62%;
    max-width:340px;
    height:auto;
    margin:6px auto 0;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.10));
  }
  /* Remove desktop left offset when stacked */
  .benefit-img{ margin-left:0; }

  /* Context section mobile */
  .context{ 
    padding: 40px 16px; 
    margin: 0;
  }
  /* Fix wrapping for 'Tematică variată' card: force two-line bullet */
  .oferta-grid .of-card:nth-child(1) .of-list li br{ display:none; }
  .oferta-grid .of-card:nth-child(1) .of-list li .no-wrap em::after{ content:", "; }
  .oferta-grid .of-card:nth-child(1) .of-list li em:last-of-type{ display:block; white-space:nowrap; }
  .context-card{ 
    padding: 30px 20px; 
    text-align: center; /* centered on mobile */
    max-width: 100%;
    margin: 0;
  }
  .context-title{ 
    font-size: 1.6rem; 
    margin-bottom: 20px;
    text-align: center;
  }
  .context-card p{ 
    font-size: 0.95rem; 
    line-height: 1.6;
    margin-bottom: 16px;
    text-align: center; /* centered on mobile */
  }
}
/* sm ↓ */
@media (max-width:639px){
  .navbar{ 
    width: calc(100% - 24px);
    max-width: none;
    padding: 14px 16px; 
    margin: 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
    /* Even smaller on very small phones */
    .logo{ height:32px; }
    .logo-utcn{ height:24px; }
  .btn-primary{ padding: 12px 16px; font-size: 0.95rem; }
  
  /* Hero section small screens */
  .hero{ padding: 16px 12px 40px; }
  .hero-content{ padding: 30px 16px; }
  .hero-title{ font-size: 2rem; }
  /* Smaller phones (HOME ONLY): slightly tighter clamp; adjust if needed */
  body.home .hero-title{ font-size: clamp(1.7rem, 4.8vw, 2.0rem); white-space: nowrap; }
  body.home .hero-title br{ display:none; }
  body.home .hero-title .highlight{ display:block; width:100%; text-align:center; margin-top:8px; white-space:nowrap; }
  .hero-subtitle{ font-size: 0.75rem; }
  .hero-description{ font-size: 0.9rem; text-align:center; }
  .hero-image{ height: 250px; }
  
  /* Context section small screens */
  .context{ padding: 16px 12px; }
  .context-card{ padding: 24px 16px; text-align:center; }
  .context-title{ font-size: 1.4rem; text-align:center; }
  .context-card p{ font-size: 0.9rem; text-align:center; }
  
  /* Oferta section mobile */
  .oferta{ padding: 60px 12px 80px; }
  .oferta-inner{ text-align: center; }
  .oferta-title{ font-size: 1.8rem; margin-bottom: 16px; }
  .oferta-lead{ font-size: 0.9rem; margin-bottom: 24px; }
  .oferta-grid{ 
    grid-template-columns: 1fr; 
    gap: 20px;
    justify-items: center; /* center cards inside single-column grid */
  }
  /* Slightly narrower cards on mobile */
  .oferta-inner{ display: grid; }
  .of-card{ padding: 0 18px 18px; width: 92%; max-width: 520px; }
  .of-rect{ height: 180px; margin: 16px 0 8px; border-radius: 16px; }
  .of-card-title{ font-size: 1.35rem; margin: 2px 0 4px; }
  .of-list{ margin: 4px 0 0 16px; line-height:1.5; }
  
  /* Beneficii section mobile */
  .beneficii{ padding: 50px 12px 50px; }
  .beneficii-title{ font-size: 1.6rem; margin-bottom: 24px; }
  .benefit-grid{ 
    grid-template-columns: 1fr; 
    gap: 24px;
  }
  .benefit-list{ gap: 14px; }
  .benefit-list li{ 
    padding: 14px 16px; 
    border-radius: 14px;
  }
  .badge{ 
    width: 30px; 
    height: 30px; 
    font-size: 0.85rem;
  }
  .b-text h3{ font-size: 0.95rem; }
  .b-text p{ font-size: 0.85rem; }
  .b-dots{ margin: 4px 0 0 16px; font-size: 0.85rem; }
  .benefit-img{ max-width: 100%; }
  
  .enroll-cta{ 
    margin-top: 32px; 
    padding: 24px 20px 28px;
    border-radius: 16px;
  }
  .enroll-title{ font-size: 1.4rem; }
  .enroll-text{ font-size: 0.9rem; }
  .enroll-btn{ margin-top: 12px; }
}