/* =========================================================
   FLIGHTCENTER NELLINGER — Design System "Cockpit HUD Light"
   ========================================================= */

/* Self-hosted fonts (was Google Fonts CDN) — loading fonts directly
   from fonts.googleapis.com/fonts.gstatic.com sends every visitor's IP
   to Google before any cookie consent is possible; LG München ruled
   that unlawful under the GDPR (Az. 3 O 17493/20). Hosting the same
   files same-origin removes that transfer entirely. Inter and Sora
   ship as variable fonts, so one file covers their whole weight range;
   Space Mono only has static Regular/Bold instances. Latin subset only
   (covers English + German, incl. ä/ö/ü/ß). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/sora-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spacemono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/spacemono-700.woff2') format('woff2');
}

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

:root{
  --navy:#003D7A;
  --navy-light:#0077BE;
  --navy-dark:#00224a;
  --navy-deep:#071019;
  --ink:#0b1420;
  --sub:#5c6472;
  --sub-soft:#8891a0;
  --bg:#f7f9fb;
  --bg-alt:#eef3f7;
  --surface:#ffffff;
  --line:#dde3ea;
  --line-soft:#e9edf2;
  --cyan:#20c4e3;
  --cyan-deep:#0891a8;
  --cyan-glow:rgba(32,196,227,.35);
  --amber:#ff6b35;
  --success:#10b981;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
  --radius-pill:999px;
  --shadow-sm:0 2px 14px rgba(11,20,32,.06);
  --shadow-md:0 18px 40px -18px rgba(0,61,122,.25);
  --shadow-glow:0 0 0 1px rgba(32,196,227,.18), 0 18px 40px -20px rgba(9,145,168,.35);
  --ease:cubic-bezier(.16,.84,.44,1);
  --nav-h:78px;
}

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Sora',-apple-system,sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--ink);
}

a{ color:inherit; }

::selection{ background:var(--cyan); color:#04141a; }

img{ max-width:100%; display:block; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--navy),var(--cyan-deep)); border-radius:10px; border:2px solid var(--bg); }

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

/* ============ SCROLL PROGRESS ============ */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--navy),var(--cyan));
  z-index:2000; transition:width .1s linear;
  box-shadow:0 0 12px var(--cyan-glow);
}

/* ============ CURSOR GLOW (desktop only) ============ */
.cursor-glow{
  position:fixed; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(32,196,227,.10) 0%, rgba(32,196,227,0) 70%);
  pointer-events:none; z-index:1; transform:translate(-50%,-50%);
  left:var(--cx,50%); top:var(--cy,30%);
  transition:opacity .4s ease;
  will-change:left, top;
}

/* ============ NAVIGATION ============
   NOTE: the blur/saturate lives on nav::before, not on nav itself.
   backdrop-filter (like transform/filter) makes an element the containing
   block for position:fixed descendants — if it sat on <nav>, the fixed
   mobile menu panel (.nav-menu.active) would be clipped to nav's own
   78px height instead of filling the viewport. Keeping nav filter-free
   lets fixed descendants position against the real viewport. */
nav{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  padding:0 2rem;
  height:var(--nav-h);
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:height .35s var(--ease), box-shadow .35s ease, border-color .4s ease;
}
nav::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:background .4s ease, backdrop-filter .4s ease;
}

nav.scrolled{ height:64px; box-shadow:var(--shadow-sm); border-bottom-color:rgba(221,227,234,.7); }
nav.scrolled::before{
  background:rgba(247,249,251,.92);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
}

/* nav.on-dark: used on pages where the nav sits directly over a dark
   hero (video/photo) — text starts white/transparent and switches to
   the normal dark-on-light styling once nav.scrolled kicks in. */
nav.on-dark .logo-word{ color:#fff; }
nav.on-dark .logo-word b{ color:#bfe9f3; }
nav.on-dark .logo-icon{ filter:brightness(0) invert(1); }
nav.on-dark .nav-menu a{ color:rgba(255,255,255,.82); }
nav.on-dark .nav-menu a:hover,
nav.on-dark .nav-menu a.active{ color:#fff; }
nav.on-dark .mobile-menu-btn span{ background:#fff; }

nav.on-dark.scrolled .logo-word{ color:var(--ink); }
nav.on-dark.scrolled .logo-word b{ color:var(--navy); }
nav.on-dark.scrolled .logo-icon{ filter:none; }
nav.on-dark.scrolled .nav-menu a{ color:var(--sub); }
nav.on-dark.scrolled .nav-menu a:hover,
nav.on-dark.scrolled .nav-menu a.active{ color:var(--ink); }
nav.on-dark.scrolled .mobile-menu-btn span{ background:var(--ink); }

/* the mobile dropdown panel always has a light background (see
   .nav-menu.active below), so its links must stay dark even when
   nav.on-dark hasn't scrolled yet — otherwise white-on-white. */
nav.on-dark .nav-menu.active a{ color:var(--sub); }
nav.on-dark .nav-menu.active a:hover,
nav.on-dark .nav-menu.active a.active{ color:var(--ink); }

.nav-container{
  max-width:1400px; margin:0 auto; width:100%;
  display:flex; justify-content:space-between; align-items:center;
}

.logo{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.logo-icon{ height:30px; width:auto; display:block; transition:transform .4s var(--ease), filter .4s ease; }
.logo:hover .logo-icon{ transform:rotate(-6deg) scale(1.05); }
.logo-word{
  font-family:'Sora',sans-serif; font-weight:800; font-size:.98rem;
  letter-spacing:.01em; color:var(--ink); line-height:1.1; transition:color .4s ease;
}
.logo-word b{ display:block; color:var(--navy); font-size:.65rem; font-weight:700; letter-spacing:.14em; font-family:'Space Mono',monospace; transition:color .4s ease; }

.nav-menu{ display:flex; list-style:none; gap:2.1rem; align-items:center; }

.nav-menu a{
  text-decoration:none; font-weight:600; font-size:.86rem; color:var(--sub);
  letter-spacing:.01em; position:relative; transition:color .25s ease; padding:.4rem 0;
}
.nav-menu a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:linear-gradient(90deg,var(--navy),var(--cyan)); transition:width .3s var(--ease);
  border-radius:2px;
}
.nav-menu a:hover{ color:var(--ink); }
.nav-menu a:hover::after,
.nav-menu a.active::after{ width:100%; }
.nav-menu a.active{ color:var(--ink); }

.nav-cta{
  padding:.6rem 1.3rem !important; border-radius:var(--radius-pill);
  background:var(--navy); color:#fff !important; font-weight:700 !important;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background:var(--navy-dark); color:#fff !important; }

/* ---- Language switch ---- */
.lang-switch{
  display:flex; align-items:center; gap:2px; background:var(--bg-alt);
  border:1px solid var(--line); border-radius:var(--radius-pill); padding:3px;
  margin-left:.25rem; transition:background .35s ease, border-color .35s ease;
}
.lang-btn{
  font-family:'Space Mono',monospace; font-size:.68rem; font-weight:700; letter-spacing:.05em;
  padding:.32rem .6rem; border-radius:var(--radius-pill); border:none; background:transparent;
  color:var(--sub); cursor:pointer; transition:background .25s ease, color .25s ease;
}
.lang-btn.active{ background:var(--navy); color:#fff; }
nav.on-dark .lang-switch{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); }
nav.on-dark .lang-btn{ color:rgba(255,255,255,.75); }
nav.on-dark .lang-btn.active{ background:#fff; color:var(--navy); }
nav.on-dark.scrolled .lang-switch{ background:var(--bg-alt); border-color:var(--line); }
nav.on-dark.scrolled .lang-btn{ color:var(--sub); }
nav.on-dark.scrolled .lang-btn.active{ background:var(--navy); color:#fff; }

.mobile-menu-btn{
  display:none; background:none; border:none; cursor:pointer; width:38px; height:32px;
  position:relative; flex-direction:column; justify-content:center; gap:6px;
}
.mobile-menu-btn span{ display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:.35s var(--ease); }
.mobile-menu-btn.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.mobile-menu-btn.active span:nth-child(2){ opacity:0; }
.mobile-menu-btn.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 2.1rem; border-radius:var(--radius-pill);
  text-decoration:none; font-weight:700; font-size:.9rem; letter-spacing:.01em;
  border:1.5px solid transparent; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s ease, color .35s ease, border-color .35s ease;
  isolation:isolate;
}
.btn span{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:.5rem; }
.btn-primary{ background:var(--navy); color:#fff; box-shadow:0 14px 30px -12px rgba(0,61,122,.55); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 38px -14px rgba(0,61,122,.6); }
.btn-primary::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-120%); transition:transform .6s ease;
}
.btn-primary:hover::before{ transform:translateX(120%); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--navy); color:var(--navy); transform:translateY(-3px); background:#fff; }

/* Ghost button for use over dark/photo backgrounds (e.g. the video hero) —
   starts white-on-transparent, and unlike .btn-ghost it flips to navy
   text ON a white fill on hover so the label never disappears. */
.btn-ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost-light:hover{ background:#fff; color:var(--navy); border-color:#fff; transform:translateY(-3px); }

.btn-cyan{ background:#fff; color:var(--cyan-deep); border-color:var(--cyan); }
.btn-cyan:hover{ background:var(--cyan); color:#04141a; transform:translateY(-3px); box-shadow:0 16px 34px -16px var(--cyan-glow); }

.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; transform:translateY(-3px); }

/* ============ LAYOUT / SECTION HELPERS ============ */
.section{ max-width:1400px; margin:0 auto; padding:6.5rem 2rem; position:relative; }
.section-narrow{ max-width:920px; }
.section-tight{ padding-top:3rem; padding-bottom:3rem; }

.eyebrow{
  font-family:'Space Mono',monospace; font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-deep);
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.25rem;
}
.eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 4px rgba(32,196,227,.18), 0 0 12px var(--cyan-glow);
  animation:pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.55; transform:scale(.8);} }

.section-title{
  font-size:clamp(2rem,5vw,3.4rem); line-height:1.1; margin-bottom:1.1rem;
}
.section-title .accent{
  background:linear-gradient(100deg,var(--navy),var(--cyan-deep) 60%,var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-subtitle{ font-size:1.08rem; color:var(--sub); max-width:640px; margin-bottom:3rem; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* Blueprint grid backdrop */
.grid-backdrop{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 20% 0%, #000 40%, transparent 90%);
  mask-image:radial-gradient(ellipse 70% 70% at 20% 0%, #000 40%, transparent 90%);
}
.glow-blob{
  position:absolute; border-radius:50%; filter:blur(70px); z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(32,196,227,.28), transparent 70%);
}

/* ============ REVEAL ON SCROLL ============ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }
.reveal-delay-5{ transition-delay:.4s; }

/* ============ PAGE HERO (inner pages) ============ */
.page-hero{
  position:relative; overflow:hidden;
  padding:calc(var(--nav-h) + 3rem) 2rem 3.5rem;
  background:var(--bg);
  border-bottom:1px solid var(--line-soft);
}
.page-hero-inner{ max-width:1400px; margin:0 auto; position:relative; z-index:2; }
.page-hero .eyebrow{ justify-content:flex-start; }

/* Large, faint brand-mark watermark that fills the otherwise empty
   right-hand side of the page-hero backdrop. */
.page-hero-icon{
  position:absolute; top:50%; right:4%; width:380px; height:auto;
  transform:translateY(-50%) rotate(-4deg); z-index:0; pointer-events:none;
  opacity:.06; animation:hero-icon-drift 8s ease-in-out infinite;
}
.page-hero-icon img{ width:100%; height:auto; display:block; }
@keyframes hero-icon-drift{
  0%, 100%{ transform:translateY(-50%) rotate(-4deg); }
  50%{ transform:translateY(-46%) rotate(-1deg); }
}
@media (max-width:1300px){ .page-hero-icon{ width:300px; } }
@media (max-width:1024px){ .page-hero-icon{ width:240px; right:2%; opacity:.05; } }
@media (max-width:700px){ .page-hero-icon{ display:none; } }

/* ============ HOME HERO (video) ============ */
.hero{
  min-height:100vh; display:flex; align-items:center; justify-content:flex-start;
  position:relative; overflow:hidden; padding-top:var(--nav-h);
}
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.hero::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(100deg, rgba(7,16,25,.92) 5%, rgba(7,16,25,.65) 42%, rgba(7,16,25,.25) 75%),
    linear-gradient(0deg, rgba(7,16,25,.55), transparent 40%);
}
.hero-grid-overlay{
  position:absolute; inset:0; z-index:2; opacity:.35; pointer-events:none;
  background-image:linear-gradient(rgba(32,196,227,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(32,196,227,.18) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 15% 30%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 60% 70% at 15% 30%, #000 0%, transparent 75%);
}
.hero-content{ position:relative; z-index:3; max-width:760px; padding:2rem 2rem 2rem 3rem; }
@media (max-width:900px){ .hero-content{ padding:2rem; } }

.hero-tag{
  font-family:'Space Mono',monospace; font-size:.78rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:#8ee9f7; margin-bottom:1.6rem; display:inline-flex; align-items:center; gap:.7rem;
}
.hero-tag::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); animation:pulse-dot 2s ease-in-out infinite; }

.hero h1{
  font-size:clamp(2.4rem,6.4vw,4.6rem); line-height:1.06; margin-bottom:1.6rem; color:#fff; letter-spacing:-0.02em;
}
.hero h1 .accent{ background:linear-gradient(100deg,#5fd9ec,var(--cyan) 60%,#8ee9f7); -webkit-background-clip:text; background-clip:text; color:transparent; }

.hero-sub{ color:rgba(255,255,255,.78); font-size:1.08rem; max-width:520px; margin-bottom:2.4rem; }

.hero-buttons{ display:flex; gap:1rem; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.65); font-family:'Space Mono',monospace; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:36px; background:linear-gradient(rgba(255,255,255,.7), transparent); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:linear-gradient(var(--cyan), transparent); animation:scroll-cue-drop 1.8s ease-in-out infinite; }
@keyframes scroll-cue-drop{ 0%{ top:-100%; } 100%{ top:100%; } }

/* ============ STATS ============ */
.stats-section{ background:var(--surface); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:0; }
.stats-container{
  max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.stat-item{ text-align:center; padding:3.4rem 1.5rem; position:relative; }
.stat-item + .stat-item::before{ content:''; position:absolute; left:0; top:25%; bottom:25%; width:1px; background:var(--line); }
.stat-number-row{ display:flex; align-items:baseline; justify-content:center; gap:.15rem; font-family:'Space Mono',monospace; }
.stat-number{ font-size:clamp(2rem,4.5vw,3.2rem); font-weight:700; color:var(--navy); line-height:1; }
.stat-plus{ font-size:1.4rem; color:var(--cyan-deep); font-weight:700; }
.stat-label{ margin-top:.7rem; font-size:.82rem; color:var(--sub); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }

/* ============ ABOUT ============ */
.about-section{ max-width:1400px; margin:0 auto; padding:6.5rem 2rem; }
.about-container{ display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:center; }
.about-text{ font-size:1rem; color:var(--sub); margin-bottom:1.3rem; }
.about-highlights{ display:grid; gap:1rem; margin-top:2rem; }
.highlight-item{ display:flex; gap:.9rem; align-items:flex-start; padding:.9rem 1rem; border-radius:var(--radius-md); transition:background .3s ease; }
.highlight-item:hover{ background:var(--bg-alt); }
.highlight-icon{
  min-width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:800; margin-top:.1rem;
}
.highlight-item p{ color:var(--ink); font-weight:500; font-size:.95rem; }

.about-image{ position:relative; }
.about-image .frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  border:1px solid var(--line);
}
.about-image img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/11.5; transition:transform .8s var(--ease); }
.about-image:hover img{ transform:scale(1.045); }
.about-image .corner-accent{
  position:absolute; width:120px; height:120px; border:2px solid var(--cyan); z-index:-1; border-radius:var(--radius-lg);
}
.about-image .corner-accent.top{ top:-18px; right:-18px; border-bottom:none; border-left:none; }
.about-image .corner-accent.bottom{ bottom:-18px; left:-18px; border-top:none; border-right:none; }
.about-image .badge-float{
  position:absolute; bottom:-1.4rem; left:1.6rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-md); padding:.9rem 1.3rem; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; gap:.7rem; font-family:'Space Mono',monospace; font-size:.8rem; font-weight:700; color:var(--navy);
}
.about-image .badge-float .dot{ width:9px; height:9px; border-radius:50%; background:var(--success); box-shadow:0 0 10px rgba(16,185,129,.6); }

/* ============ CARDS ============ */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.75rem; }

.tilt-card{ perspective:1000px; }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2.2rem; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s ease;
  position:relative; overflow:hidden; height:100%;
}
.card::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .45s ease;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%), rgba(32,196,227,.10), transparent 55%);
  pointer-events:none;
}
.card:hover::before{ opacity:1; }
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-glow); border-color:var(--cyan); }

.badge{
  display:inline-flex; align-items:center; font-family:'Space Mono',monospace; font-size:.68rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; background:var(--bg-alt); color:var(--cyan-deep);
  border:1px solid #cdeaf1; padding:.35rem .75rem; border-radius:var(--radius-pill); margin-bottom:1.1rem;
}
.card-icon{
  width:52px; height:52px; border-radius:var(--radius-md); background:linear-gradient(135deg,var(--navy),var(--cyan-deep));
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1.2rem; color:#fff;
  box-shadow:0 10px 20px -10px rgba(0,61,122,.5);
}
.card h3{ font-size:1.28rem; margin-bottom:.7rem; }
.card p{ color:var(--sub); font-size:.94rem; line-height:1.7; }

.card-cta{ margin-top:1.3rem; font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; gap:.4rem; color:var(--sub-soft); }
.card-cta.is-link{ color:var(--navy); }
.card-cta.is-link:hover{ gap:.65rem; color:var(--cyan-deep); }
.card-cta svg{ transition:transform .3s ease; }
.card-cta.is-link:hover svg{ transform:translateX(3px); }

/* ============ COURSE CATALOG — bold card grid ============ */
.course-groups{ display:flex; flex-direction:column; gap:3.5rem; }

.course-group-head{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.4rem; }
.course-group-head .tag{
  font-family:'Space Mono',monospace; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  color:var(--cyan-deep); background:var(--bg-alt); border:1px solid #bfe9f3;
  padding:.4rem .85rem; border-radius:var(--radius-pill);
}
.course-group-head h2{ font-size:1.4rem; font-weight:800; margin:0; letter-spacing:-.01em; }

.course-card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.6rem; }

.course-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2.1rem; display:flex; flex-direction:column; gap:.4rem; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}
.course-card::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .45s ease; pointer-events:none;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%), rgba(32,196,227,.10), transparent 55%);
}
.course-card:hover::before{ opacity:1; }
.course-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-glow); border-color:var(--cyan); }

.course-badge{
  align-self:flex-start; font-family:'Space Mono',monospace; font-size:.7rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; background:var(--navy); color:#fff;
  padding:.42rem .9rem; border-radius:6px; margin-bottom:1rem;
}
.course-badge.accent{ background:var(--cyan-deep); }
.course-badge.premium{ background:linear-gradient(100deg,var(--navy),var(--cyan-deep)); }
.course-badge.muted{ background:#5b6472; }

.course-card h3{ font-size:1.32rem; font-weight:800; margin:0 0 .6rem; letter-spacing:-.01em; color:var(--ink); }
.course-card p{ font-size:.94rem; color:var(--sub); line-height:1.65; margin:0; }

.course-foot{ display:flex; align-items:center; margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--line-soft); }
.course-status{
  font-family:'Space Mono',monospace; font-size:.8rem; font-weight:700; color:var(--sub-soft); letter-spacing:.03em;
}
.course-status.link{
  color:var(--navy); text-decoration:none; display:inline-flex; align-items:center; gap:.4rem;
  transition:gap .3s ease, color .3s ease;
}
.course-status.link:hover{ gap:.6rem; color:var(--cyan-deep); }
.course-status.link svg{ width:15px; height:15px; transition:transform .3s ease; }
.course-status.link:hover svg{ transform:translateX(3px); }

/* ============ GA TRIP SUPPORT — dashboard panel ============ */
.dashboard-grid{
  display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--line);
}
@media (max-width:820px){ .dashboard-grid{ grid-template-columns:1fr; } }

.dashboard-cell{
  background:var(--surface); padding:2.1rem 2.2rem; position:relative; transition:background .35s ease;
}
.dashboard-cell::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .4s ease; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,20%) var(--my,0%), rgba(32,196,227,.08), transparent 60%);
}
.dashboard-cell:hover::before{ opacity:1; }
.dashboard-cell:hover{ background:var(--bg-alt); }

.dashboard-code{
  font-family:'Space Mono',monospace; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  color:var(--cyan-deep); margin-bottom:.9rem; display:flex; align-items:center; gap:.5rem;
}
.dashboard-code::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan-glow); }
.dashboard-cell h3{ font-size:1.15rem; margin-bottom:.7rem; }
.dashboard-cell p{ color:var(--sub); font-size:.9rem; margin-bottom:.6rem; }
.dashboard-cell ul{ margin:.8rem 0 0 1.1rem; color:var(--sub); font-size:.88rem; line-height:1.8; }
.dashboard-cell li::marker{ color:var(--cyan-deep); }

/* Contact cards center */
.contact-card{ text-align:center; }
.contact-card .card-icon{ margin-left:auto; margin-right:auto; }

/* ============ WARNING / DISCLAIMER BOX ============ */
.warning-box, .disclaimer-box{
  background:linear-gradient(135deg,#fff8f2,#fff);
  border:1.5px solid var(--amber); border-radius:var(--radius-lg);
  padding:2.2rem 2.4rem; margin:2.4rem 0; position:relative;
}
.warning-box h3, .warning-box h4, .disclaimer-box h3{
  color:var(--amber); margin-bottom:1rem; font-weight:800; font-size:1.15rem;
  display:flex; align-items:center; gap:.6rem;
}
.warning-box p, .disclaimer-box p{ color:var(--sub); font-size:.95rem; line-height:1.8; margin-bottom:1rem; }
.warning-box strong, .disclaimer-box strong{ color:var(--ink); }

/* ============ LEGAL CONTENT ============ */
.legal-section{ margin-bottom:3rem; padding-bottom:2.4rem; border-bottom:1px solid var(--line-soft); }
.legal-section:last-of-type{ border-bottom:none; }
.legal-section h2{
  font-size:1.5rem; margin-bottom:1.4rem; font-weight:800; color:var(--navy);
  display:flex; align-items:center; gap:.7rem;
}
.legal-section h2::before{ content:''; width:6px; height:24px; border-radius:3px; background:linear-gradient(var(--navy),var(--cyan)); display:inline-block; }
.legal-section h3{ font-size:1.12rem; margin:1.6rem 0 .9rem; font-weight:700; }
.legal-section p{ margin-bottom:1rem; color:var(--sub); line-height:1.85; }
.legal-section ul{ margin:0 0 1rem 1.4rem; color:var(--sub); line-height:1.9; }
.legal-section li::marker{ color:var(--cyan-deep); }
.legal-section a{ color:var(--navy); font-weight:600; text-decoration:none; border-bottom:1px solid var(--cyan); }
.legal-toc{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:3rem; padding:1.4rem; background:var(--bg-alt);
  border-radius:var(--radius-md); border:1px solid var(--line);
}
.legal-toc a{
  font-size:.8rem; font-weight:700; color:var(--navy); text-decoration:none; background:#fff; border:1px solid var(--line);
  padding:.5rem .9rem; border-radius:var(--radius-pill); transition:.25s ease;
}
.legal-toc a:hover{ border-color:var(--cyan); color:var(--cyan-deep); transform:translateY(-2px); }

/* ============ CONTACT INFO PANEL ============ */
.contact-info{
  background:linear-gradient(135deg,var(--navy-deep),var(--navy-dark)); border-radius:var(--radius-lg);
  padding:3rem; margin-top:3rem; text-align:center; color:#fff; position:relative; overflow:hidden;
}
.contact-info::before{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(32,196,227,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(32,196,227,.14) 1px, transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(circle at 50% 0%, #000, transparent 75%);
  mask-image:radial-gradient(circle at 50% 0%, #000, transparent 75%);
}
.contact-info > *{ position:relative; z-index:1; }
.contact-info h3{ color:#fff; font-size:1.5rem; margin-bottom:1.6rem; }
.contact-detail{ margin-bottom:1.3rem; }
.contact-detail p{ color:rgba(255,255,255,.75); font-size:.95rem; margin-bottom:.3rem; }
.contact-detail strong{ color:#fff; font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.contact-detail a{ color:#8ee9f7; text-decoration:none; font-weight:700; font-size:1.05rem; }
.contact-detail a:hover{ text-decoration:underline; }

/* ============ FORM SECTION ============ */
.form-section{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:3rem; margin:3rem 0; box-shadow:var(--shadow-sm);
}
.form-section h3{ font-size:1.4rem; margin-bottom:.8rem; }
.form-section > p{ color:var(--sub); margin-bottom:2rem; }
.form-embed{
  width:100%; min-height:420px; border-radius:var(--radius-md); border:1.5px dashed var(--line);
  background:var(--bg-alt); display:flex; align-items:center; justify-content:center; text-align:center; padding:2.5rem;
}
.form-embed p{ color:var(--sub); font-size:.95rem; line-height:1.8; max-width:420px; }
.form-embed .icon{ font-size:2.2rem; margin-bottom:1rem; }

/* ============ GALLERY / CAROUSEL ============ */
.carousel-wrapper{
  position:relative; max-width:1040px; margin:0 auto; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-md); border:1px solid var(--line);
}
.carousel-container{ position:relative; width:100%; padding-bottom:58%; overflow:hidden; background:var(--navy-deep); }
.carousel-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1s ease, transform 1.2s ease; transform:scale(1.04); }
.carousel-slide.active{ opacity:1; transform:scale(1); }
.carousel-slide img{ width:100%; height:100%; object-fit:cover; }
.carousel-caption{
  position:absolute; left:0; right:0; bottom:0; padding:2.4rem 2rem 1.6rem;
  background:linear-gradient(0deg, rgba(7,16,25,.85), transparent);
  color:#fff; font-family:'Space Mono',monospace; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
}
.carousel-controls{ position:absolute; bottom:1.4rem; right:1.6rem; display:flex; gap:.6rem; z-index:10; }
.carousel-btn{
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); color:#fff; border:1px solid rgba(255,255,255,.3);
  width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:1.2rem; transition:.3s ease;
  display:flex; align-items:center; justify-content:center;
}
.carousel-btn:hover{ background:var(--cyan); color:#04141a; border-color:var(--cyan); transform:scale(1.08); }
.carousel-indicators{ position:absolute; bottom:1.6rem; left:1.8rem; display:flex; gap:.5rem; z-index:10; }
.indicator{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; transition:.3s ease; }
.indicator.active{ background:var(--cyan); width:26px; border-radius:5px; box-shadow:0 0 10px var(--cyan-glow); }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(7,16,25,.35); backdrop-filter:blur(6px);
  color:#fff; border:1px solid rgba(255,255,255,.25); width:44px; height:44px; border-radius:50%; cursor:pointer;
  font-size:1.2rem; z-index:5; transition:.3s ease; display:flex; align-items:center; justify-content:center;
}
.carousel-arrow:hover{ background:var(--cyan); color:#04141a; }
.carousel-arrow.prev{ left:1.2rem; } .carousel-arrow.next{ right:1.2rem; }

.gallery-info{
  max-width:800px; margin:3.5rem auto 0; text-align:center; padding:2.4rem; background:var(--surface);
  border-radius:var(--radius-lg); border:1px solid var(--line);
}
.gallery-info h3{ font-size:1.3rem; margin-bottom:1rem; color:var(--navy); }
.gallery-info p{ color:var(--sub); line-height:1.75; margin-bottom:.9rem; }

/* ============ FOOTER ============ */
footer{ background:var(--navy-deep); color:rgba(255,255,255,.72); padding:5rem 2rem 2rem; margin-top:6rem; position:relative; overflow:hidden; }
footer::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(32,196,227,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(32,196,227,.10) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 15% 0%, #000, transparent 80%);
  mask-image:radial-gradient(ellipse 60% 60% at 15% 0%, #000, transparent 80%);
}
.footer-content{ max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; position:relative; z-index:1; }
.footer-brand{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem; }
.footer-brand img{ height:30px; }
.footer-brand span{ font-family:'Sora',sans-serif; font-weight:800; color:#fff; font-size:1rem; }
.footer-section h4{ font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.4rem; color:#8ee9f7; font-family:'Space Mono',monospace; }
.footer-section p, .footer-section a{ font-size:.9rem; color:rgba(255,255,255,.62); text-decoration:none; line-height:1.9; transition:color .25s ease; }
.footer-section a:hover{ color:var(--cyan); }
.footer-links{ display:flex; flex-direction:column; gap:.6rem; }
.footer-bottom{ text-align:center; padding-top:2.2rem; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.5); font-size:.82rem; position:relative; z-index:1; }

/* ============ CUSTOM CURSOR (dot + trailing ring) ============ */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; border-radius:50%; pointer-events:none;
  z-index:3000; transform:translate(-50%,-50%); mix-blend-mode:difference;
}
.cursor-dot{ width:6px; height:6px; background:#fff; transition:opacity .3s; }
.cursor-ring{
  width:34px; height:34px; border:1px solid #fff;
  transition:width .25s var(--ease), height .25s var(--ease), opacity .3s, border-color .25s;
  opacity:.7;
}
.cursor-ring.grow{ width:64px; height:64px; opacity:.9; }
body.no-cursor .cursor-dot, body.no-cursor .cursor-ring{ display:none; }

/* ============ COOKIE CONSENT BANNER ============ */
.cookie-banner{
  position:fixed; left:1.25rem; right:1.25rem; bottom:1.25rem; z-index:2500;
  max-width:640px; margin:0 auto;
  background:var(--navy-deep); color:rgba(255,255,255,.85);
  border-radius:var(--radius-md); box-shadow:0 20px 44px -18px rgba(0,0,0,.5);
  padding:1.3rem 1.5rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem;
  transform:translateY(140%); transition:transform .5s var(--ease);
}
.cookie-banner.show{ transform:translateY(0); }
.cookie-banner p{ flex:1 1 260px; font-size:.85rem; line-height:1.6; margin:0; }
.cookie-banner a{ color:#8ee9f7; text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.cookie-banner button{
  font-family:inherit; font-weight:700; font-size:.82rem; border-radius:var(--radius-pill);
  padding:.55rem 1.2rem; cursor:pointer; border:1.5px solid transparent; transition:.25s ease;
}
.cookie-accept{ background:var(--cyan); color:#04141a; }
.cookie-accept:hover{ background:#4fd3ec; }

/* ============ SCROLL TO TOP ============ */
.scroll-to-top{
  position:fixed; bottom:2rem; right:2rem; width:52px; height:52px; background:var(--ink); color:#fff;
  border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(12px); transition:.35s var(--ease); z-index:999; font-size:1.3rem;
  box-shadow:0 12px 26px -10px rgba(0,0,0,.4);
}
.scroll-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.scroll-to-top:hover{ background:var(--cyan); color:#04141a; transform:translateY(-4px); }
.scroll-to-top svg{ width:20px; height:20px; transition:transform .35s var(--ease); }
.scroll-to-top:hover svg{ transform:translateY(-2px); }

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .about-container{ grid-template-columns:1fr; }
  .footer-content{ grid-template-columns:repeat(2,1fr); }
}

/* Nav collapses earlier than the general content breakpoint — the full
   link list (incl. external Knowledge Base / Feedback) overflows well
   before 768px. */
@media (max-width:1180px){
  nav{ padding:0 1.25rem; }
  .nav-menu{
    display:none;
  }
  .nav-menu.active{
    display:flex; position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
    background:rgba(247,249,251,.98); backdrop-filter:blur(20px);
    flex-direction:column; padding:2.5rem 2rem; gap:1.6rem; overflow-y:auto;
  }
  .nav-menu a{ font-size:1.1rem; }
  .nav-cta{ width:fit-content; }
  .mobile-menu-btn{ display:flex; }
}

@media (max-width:768px){
  .section{ padding:4rem 1.25rem; }
  .page-hero{ padding:calc(var(--nav-h) + 3rem) 1.25rem 3rem; }
  .about-section{ padding:4rem 1.25rem; }

  .hero-content{ text-align:left; }
  .hero-buttons{ flex-direction:column; }
  .hero-buttons .btn{ width:100%; }

  .footer-content{ grid-template-columns:1fr; gap:2.2rem; }
  .contact-info{ padding:2.2rem 1.5rem; }
  .form-section{ padding:1.75rem; }
  .cursor-glow{ display:none; }
}

/* Narrow phones: logo + language switch + hamburger all share one row
   with the nav-menu hidden, so tighten everything to avoid crowding. */
@media (max-width:440px){
  .nav-container{ gap:.4rem; }
  .logo{ gap:.4rem; min-width:0; }
  .logo-icon{ height:24px; flex-shrink:0; }
  .logo-word{ font-size:.8rem; white-space:nowrap; }
  .logo-word b{ font-size:.58rem; }
  .lang-switch{ padding:2px; margin-left:0; }
  .lang-btn{ padding:.26rem .48rem; font-size:.62rem; }
}
@media (max-width:360px){
  .logo-word b{ display:none; }
}