/* ============================================================
   LAGHBANI CONSULTING — Colors & Type Foundation
   Your gateway to German Education
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face { font-family: "Outfit"; src: url("fonts/Outfit/Outfit-Light.woff2") format("woff2"), url("fonts/Outfit/Outfit-Light.ttf") format("truetype");      font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit/Outfit-Light.woff2") format("woff2"), url("fonts/Outfit/Outfit-Light.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit/Outfit-Light.woff2") format("woff2"), url("fonts/Outfit/Outfit-Light.ttf") format("truetype");      font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit/Outfit-Regular.woff2") format("woff2"), url("fonts/Outfit/Outfit-Regular.ttf") format("truetype");    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit/Outfit-Medium.woff2") format("woff2"), url("fonts/Outfit/Outfit-Medium.ttf") format("truetype");     font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit/Outfit-SemiBold.woff2") format("woff2"), url("fonts/Outfit/Outfit-SemiBold.ttf") format("truetype");   font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit/Outfit-Bold.woff2") format("woff2"), url("fonts/Outfit/Outfit-Bold.ttf") format("truetype");       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit/Outfit-ExtraBold.woff2") format("woff2"), url("fonts/Outfit/Outfit-ExtraBold.ttf") format("truetype");  font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit/Outfit-Black.woff2") format("woff2"), url("fonts/Outfit/Outfit-Black.ttf") format("truetype");      font-weight: 900; font-style: normal; font-display: swap; }

/* Alexandria — the Arabic counterpart to Outfit. Outfit carries no Arabic glyphs, so wherever
   Outfit is used, Arabic characters fall through to Alexandria automatically (Latin stays Outfit).
   One variable file covers the whole 100–900 weight range. */
@font-face { font-family: "Alexandria"; src: url("fonts/Alexandria/Alexandria-VariableFont_wght.woff2") format("woff2"), url("fonts/Alexandria/Alexandria-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* Display / logotype face — geometric unicase. Use SPARINGLY: wordmark, hero numerals.
   OTF (CFF) chosen over TTF: ~44% smaller and only ever rendered large, where TrueType hinting is moot.
   Weight map — Thin 200 · Light 300 · Medium 500 (also the 400 default) · Bold 700. */
@font-face { font-family: "Dazzle Unicase"; src: url("fonts/Dazzle-Unicase/fonnts.com-Dazzle_Unicase_Thin.woff2") format("woff2"), url("fonts/Dazzle-Unicase/fonnts.com-Dazzle_Unicase_Thin.otf") format("opentype");   font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Dazzle Unicase"; src: url("fonts/Dazzle-Unicase/fonnts.com-Dazzle_Unicase_Light.woff2") format("woff2"), url("fonts/Dazzle-Unicase/fonnts.com-Dazzle_Unicase_Light.otf") format("opentype");  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Dazzle Unicase"; src: url("fonts/Dazzle-Unicase/fonnts.com-Dazzle_Unicase_Medium.woff2") format("woff2"), url("fonts/Dazzle-Unicase/fonnts.com-Dazzle_Unicase_Medium.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Dazzle Unicase"; src: url("fonts/Dazzle-Unicase/fonnts.com-Dazzle_Unicase_Medium.woff2") format("woff2"), url("fonts/Dazzle-Unicase/fonnts.com-Dazzle_Unicase_Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Dazzle Unicase"; src: url("fonts/Dazzle-Unicase/fonnts.com-Dazzle_Unicase_Bold.woff2") format("woff2"), url("fonts/Dazzle-Unicase/fonnts.com-Dazzle_Unicase_Bold.otf") format("opentype");   font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ============ BRAND CORE PALETTE ============ */
  --brand-ink:    #1e2b42; /* deep navy — primary brand, text, authority */
  --brand-blue:   #5C82CA; /* signal blue — interactive, links, focus */
  --brand-gold:   #bc9e5e; /* muted gold — premium accent, milestones */
  --brand-cream:  #f6f2ea; /* warm paper — surfaces, warmth */
  --brand-mist:   #f7f8fd; /* cool white — app background */

  /* ============ INK SCALE (navy-based neutrals) ============ */
  --ink-900: #16203a;
  --ink-800: #1e2b42; /* brand ink */
  --ink-700: #2c3a55;
  --ink-600: #3f4f6e;
  --ink-500: #5a6a85;
  --ink-400: #8794a8;
  --ink-300: #b3bdcc;
  --ink-200: #d7dde6;
  --ink-100: #e9edf3;
  --ink-050: #f2f5f9;

  /* ============ BLUE SCALE ============ */
  --blue-700: #2f4f93;
  --blue-600: #4068b3;
  --blue-500: #5C82CA; /* brand blue */
  --blue-400: #8aa6db;
  --blue-200: #c5d4ee;
  --blue-100: #e4ebf8;
  --blue-050: #f1f5fc;

  /* ============ GOLD SCALE ============ */
  --gold-700: #8f7536;
  --gold-600: #a88c4a;
  --gold-500: #bc9e5e; /* brand gold */
  --gold-300: #d6c194;
  --gold-100: #efe7d2;
  --gold-050: #f7f2e7;

  /* ============ SURFACES ============ */
  --surface-app:    var(--brand-mist);   /* page background (cool) */
  --surface-warm:   var(--brand-cream);  /* warm sections / alt bands */
  --surface-card:   #ffffff;             /* cards, panels */
  --surface-ink:    var(--ink-800);      /* dark inverted sections */
  --surface-sunken: var(--ink-050);

  /* ============ FOREGROUND / TEXT ============ */
  --fg1: var(--ink-800);  /* primary text / headings */
  --fg2: var(--ink-600);  /* secondary text / body */
  --fg3: var(--ink-400);  /* tertiary / captions / meta */
  --fg-on-ink:  #f4f6fa;  /* text on navy */
  --fg-on-ink-2: #aab6cb; /* secondary text on navy */
  --fg-brand:   var(--blue-500);
  --fg-gold:    var(--gold-600);

  /* ============ LINES / BORDERS ============ */
  --line-1: #e7ebf1;   /* hairline dividers (default) */
  --line-2: #d7dde6;   /* card borders */
  --line-3: #c2cad7;   /* stronger / hover */
  --line-on-ink: rgba(255,255,255,0.12);
  --border-thin: 1px solid var(--line-2);

  /* ============ SEMANTIC ============ */
  --success: #2f8f63;
  --success-bg: #e7f3ec;
  --warning: #b8862f;
  --warning-bg: #f6edd9;
  --danger:  #c0533f;
  --danger-bg: #f7e8e3;
  --info: var(--blue-500);
  --info-bg: var(--blue-050);
  --focus-ring: rgba(92,130,202,0.40);

  /* ============ RADII ============ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ============ SHADOWS (soft, low, premium — never heavy) ============ */
  --shadow-xs: 0 1px 2px rgba(30,43,66,0.05);
  --shadow-sm: 0 1px 3px rgba(30,43,66,0.06), 0 1px 2px rgba(30,43,66,0.04);
  --shadow-md: 0 4px 16px rgba(30,43,66,0.07), 0 1px 3px rgba(30,43,66,0.05);
  --shadow-lg: 0 12px 36px rgba(30,43,66,0.10), 0 2px 8px rgba(30,43,66,0.05);
  --shadow-ink: 0 18px 50px rgba(22,32,58,0.30);

  /* ============ SOFT-BENTO CARD SYSTEM ============
     Shared recipe for content cards/panels: borderless (faint hairline),
     deeper radius, a soft lift shadow, and a springy hover raise. Tune here
     once to retune every card site-wide. Icon "chips" get a soft blue ground. */
  --card-radius: 20px;
  --card-hairline: 1px solid rgba(30,43,66,0.05);
  --card-shadow: 0 1px 2px rgba(30,43,66,0.04), 0 14px 32px -12px rgba(30,43,66,0.15);
  --card-shadow-hover: 0 2px 4px rgba(30,43,66,0.05), 0 22px 46px -14px rgba(30,43,66,0.22);
  --card-lift: -5px;
  --chip-bg: var(--blue-050);
  --chip-fg: var(--blue-600);
  --chip-radius: 13px;

  /* ============ GLASS + EASING (shared glassmorphism primitives) ============ */
  --glass-bg: rgba(255,255,255,0.62);   /* frosted pane fill */
  --glass-brd: rgba(255,255,255,0.55);  /* frosted pane hairline */
  --glass-blur: 18px;                   /* backdrop blur radius */
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* ============ SPACING (4px base, 8px rhythm) ============ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ============ TYPE FAMILIES ============ */
  --font-sans: "Outfit", "Alexandria", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Dazzle Unicase", "Outfit", "Alexandria", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ============ TYPE SCALE (semantic) ============ */
  /* Hierarchy via size + weight only — never color noise or decoration. */
  --display-size: clamp(44px, 6vw, 76px);
  --display-weight: 600;
  --display-spacing: -0.02em;
  --display-leading: 1.1;

  --h1-size: clamp(34px, 4vw, 52px);
  --h1-weight: 600;
  --h1-spacing: -0.02em;
  --h1-leading: 1.16;

  --h2-size: clamp(26px, 3vw, 36px);
  --h2-weight: 600;
  --h2-spacing: -0.015em;
  --h2-leading: 1.2;

  --h3-size: clamp(20px, 2vw, 24px);
  --h3-weight: 600;
  --h3-spacing: -0.01em;
  --h3-leading: 1.25;

  --h4-size: 18px;
  --h4-weight: 600;
  --h4-spacing: -0.005em;
  --h4-leading: 1.3;

  --body-lg-size: 19px;
  --body-lg-leading: 1.6;

  --body-size: 16px;
  --body-weight: 400;
  --body-leading: 1.6;

  --small-size: 14px;
  --small-leading: 1.5;

  --caption-size: 13px;
  --caption-leading: 1.45;

  /* Eyebrow / overline — uppercase label, used for stage markers */
  --eyebrow-size: 12px;
  --eyebrow-weight: 600;
  --eyebrow-spacing: 0.14em;

  --mono-size: 14px;
}

/* ============================================================
   SEMANTIC TEXT CLASSES (optional helpers)
   ============================================================ */
.lc-display { font-family: var(--font-sans); font-size: var(--display-size); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); line-height: var(--display-leading); color: var(--fg1); }
.lc-h1 { font-family: var(--font-sans); font-size: var(--h1-size); font-weight: var(--h1-weight); letter-spacing: var(--h1-spacing); line-height: var(--h1-leading); color: var(--fg1); }
.lc-h2 { font-family: var(--font-sans); font-size: var(--h2-size); font-weight: var(--h2-weight); letter-spacing: var(--h2-spacing); line-height: var(--h2-leading); color: var(--fg1); }
.lc-h3 { font-family: var(--font-sans); font-size: var(--h3-size); font-weight: var(--h3-weight); letter-spacing: var(--h3-spacing); line-height: var(--h3-leading); color: var(--fg1); }
.lc-h4 { font-family: var(--font-sans); font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-leading); color: var(--fg1); }
.lc-body-lg { font-family: var(--font-sans); font-size: var(--body-lg-size); font-weight: 400; line-height: var(--body-lg-leading); color: var(--fg2); }
.lc-body { font-family: var(--font-sans); font-size: var(--body-size); font-weight: 400; line-height: var(--body-leading); color: var(--fg2); }
.lc-small { font-family: var(--font-sans); font-size: var(--small-size); line-height: var(--small-leading); color: var(--fg2); }
.lc-caption { font-family: var(--font-sans); font-size: var(--caption-size); line-height: var(--caption-leading); color: var(--fg3); }
.lc-eyebrow { font-family: var(--font-sans); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-spacing); text-transform: uppercase; color: var(--fg-gold); }
.lc-mono { font-family: var(--font-mono); font-size: var(--mono-size); color: var(--fg2); font-variant-numeric: tabular-nums; }

/* ============================================================
   POP SHAPES — playful glossy 3D-style accents (decorative only)
   Reusable site-wide. Drop a .pop-layer inside any position:relative
   section, then add .pop .pop-sphere / -pill / -cube / -ring spans.
   Tune each shape inline: --c1/--c2 (colours), width/height, top/left/
   right/bottom, --pd (float speed), --pr (tilt), --px/--py (drift).
   ============================================================ */
.pop-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.pop { position: absolute; will-change: transform; animation: popFloat var(--pd,14s) var(--ease-soft,ease-in-out) infinite; }
@keyframes popFloat {
  0%, 100% { transform: translate(0,0) rotate(var(--pr,0deg)); }
  50% { transform: translate(var(--px,10px), var(--py,-20px)) rotate(calc(var(--pr,0deg) + 6deg)); }
}
.pop-sphere { border-radius: 50%; background:
  radial-gradient(circle at 33% 27%, rgba(255,255,255,.92), rgba(255,255,255,0) 40%),
  linear-gradient(150deg, var(--c1,#6f8fd8), var(--c2,#2f4f93));
  box-shadow: inset -6px -9px 20px rgba(0,0,0,.28), 0 20px 38px rgba(30,43,66,.22); }
.pop-pill { border-radius: 999px; background:
  radial-gradient(130% 90% at 28% 22%, rgba(255,255,255,.9), rgba(255,255,255,0) 46%),
  linear-gradient(150deg, var(--c1,#d8b765), var(--c2,#a8854a));
  box-shadow: inset -4px -7px 16px rgba(0,0,0,.24), 0 18px 34px rgba(30,43,66,.20); }
.pop-cube { border-radius: 24%; background:
  radial-gradient(130% 100% at 26% 22%, rgba(255,255,255,.85), rgba(255,255,255,0) 44%),
  linear-gradient(155deg, var(--c1,#2bbf9e), var(--c2,#0e8e68));
  box-shadow: inset -5px -8px 18px rgba(0,0,0,.22), 0 18px 34px rgba(30,43,66,.20); }
.pop-ring { border-radius: 50%; }
.pop-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 130deg, var(--c1,#9a7bd6), var(--c2,#5b3fa0), var(--c1,#9a7bd6));
  -webkit-mask: radial-gradient(circle, transparent 45%, #000 46%);
          mask: radial-gradient(circle, transparent 45%, #000 46%);
  box-shadow: 0 18px 32px rgba(30,43,66,.22); }
.pop-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.55), transparent 30%);
  -webkit-mask: radial-gradient(circle, transparent 45%, #000 46%);
          mask: radial-gradient(circle, transparent 45%, #000 46%); }
@media (max-width: 720px) { .pop-layer { display: none; } }
@media (prefers-reduced-motion: reduce) { .pop { animation: none; } }

/* When scrolled, the floating pill (.nav-inner) carries its own shadow, so the
   full-width nav container stays invisible. No full-width elevation/line here. */
.nav.nav-scrolled { box-shadow: none; }
/* Keep the nav "Book a consultation" button as round as the nav pill for consistency. */
.nav-cta .btn { border-radius: var(--r-pill); }