/* ==========================================================================
   IDB Learning — Design System v4
   Navy · Royal Blue · Champagne Gold
   Shared across index / jobs / login / dashboard / course / admin
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Ink */
  --ink:#0B1B33;
  --ink-2:#4E5B73;
  --ink-3:#7A869C;
  --ink-on-dark:#EDF1F8;
  --ink-on-dark-2:#A8B6CE;

  /* Navy surfaces */
  --navy:#0A1A31;
  --navy-deep:#061223;
  --navy-line:rgba(255,255,255,.10);
  --navy-line-2:rgba(255,255,255,.16);

  /* Blue */
  --blue:#1354D4;
  --blue-700:#0E3FA8;
  --blue-800:#0B3184;
  --blue-400:#4C88EE;
  --blue-300:#8FB4F5;
  --blue-100:#D6E3FB;
  --blue-50:#EDF3FE;
  --blue-wash:#F4F8FE;

  /* Champagne — premium accents only (price, rating, founding badges) */
  --gold:#9C6F19;
  --gold-400:#C39433;
  --gold-300:#DFC077;
  --gold-50:#F9F2E1;

  /* Neutrals */
  --bg:#F7F8FB;
  --surface:#FFFFFF;
  --surface-2:#FBFCFE;
  --line:#E6E9F1;
  --line-2:#D3D9E5;

  /* Semantic */
  --ok:#0F7B4F;
  --ok-bg:#E7F6EE;
  --warn:#9A6400;
  --warn-bg:#FDF3DE;
  --danger:#B3261E;
  --danger-bg:#FDECEA;
  --wa:#25D366;
  --wa-700:#1EB456;

  /* Gradients */
  --grad:linear-gradient(118deg,#0E3FA8 0%,#1354D4 52%,#4C88EE 100%);
  --grad-soft:linear-gradient(118deg,#EDF3FE 0%,#F7F8FB 100%);

  /* Elevation */
  --sh-1:0 1px 2px rgba(11,27,51,.05);
  --sh-2:0 1px 2px rgba(11,27,51,.04),0 10px 24px -14px rgba(11,27,51,.20);
  --sh-3:0 2px 4px rgba(11,27,51,.05),0 24px 48px -22px rgba(11,27,51,.30);
  --sh-4:0 4px 8px rgba(11,27,51,.06),0 40px 72px -28px rgba(11,27,51,.38);
  --sh-nav:0 1px 0 rgba(11,27,51,.06),0 10px 30px -22px rgba(11,27,51,.45);
  --ring:0 0 0 3px rgba(19,84,212,.30);

  /* Geometry */
  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;
  --container:1200px;
  --gutter:clamp(18px,5vw,40px);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.16s var(--ease);
  --t:.26s var(--ease);
  --t-slow:.5s var(--ease-out);

  /* Type */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif','Iowan Old Style','Times New Roman',serif;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
s{text-decoration-thickness:1.5px}
::selection{background:var(--blue-100);color:var(--blue-800)}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible,.navy-band :focus-visible{outline-color:var(--blue-300)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- 3. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:820px}
.section{padding-block:clamp(64px,9vw,120px)}
.section-tight{padding-block:clamp(48px,6vw,80px)}

.skip-link{
  position:absolute;left:-9999px;top:12px;z-index:200;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;
}
.skip-link:focus{left:16px}

/* ---------- 4. TYPOGRAPHY ---------- */
.display{
  font-family:var(--serif);font-weight:400;
  letter-spacing:-.015em;line-height:1.04;
}
.display em{font-style:italic}
h1.display{font-size:clamp(40px,6.6vw,72px)}
h2.display{font-size:clamp(30px,4.4vw,50px);line-height:1.06}
h3.display{font-size:clamp(24px,3vw,34px);line-height:1.14}

.grad-text{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.kicker{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);display:flex;align-items:center;gap:10px;
}
.kicker::before{content:'';width:22px;height:1.5px;background:var(--blue);border-radius:2px;flex:none}
.kicker.center{justify-content:center}
.on-dark .kicker,.navy-band .kicker{color:var(--blue-300)}
.on-dark .kicker::before,.navy-band .kicker::before{background:var(--blue-300)}
.kicker.gold{color:var(--gold)}
.kicker.gold::before{background:var(--gold-400)}

.lede{font-size:clamp(16px,1.6vw,18.5px);line-height:1.65;color:var(--ink-2);max-width:62ch}
.on-dark .lede,.navy-band .lede{color:var(--ink-on-dark-2)}
.small{font-size:13.5px;color:var(--ink-2)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- 5. ICONS ---------- */
.ic{
  width:1em;height:1em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-.125em;
}
.ic-fill{fill:currentColor;stroke:none}

/* ---------- 6. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--r-sm);
  font-size:14.5px;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;position:relative;
  border:1.5px solid transparent;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),box-shadow var(--t),transform var(--t-fast);
}
.btn .ic{font-size:17px;transition:transform var(--t)}
.btn:hover .ic.ic-go{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.btn-sm{padding:9.5px 16px;font-size:13.5px;border-radius:var(--r-xs)}
.btn-sm .ic{font-size:15px}
.btn-lg{padding:16px 28px;font-size:15.5px;border-radius:var(--r)}
.btn-block{width:100%}

.btn-primary{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(11,27,51,.10),0 8px 20px -12px rgba(19,84,212,.75)}
.btn-primary:hover{background:var(--blue-700);box-shadow:0 2px 4px rgba(11,27,51,.12),0 14px 28px -14px rgba(19,84,212,.85)}

.btn-dark{background:var(--navy);color:#fff;box-shadow:0 1px 2px rgba(11,27,51,.14),0 8px 20px -14px rgba(11,27,51,.9)}
.btn-dark:hover{background:#13294A}

.btn-outline{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue-700);background:var(--blue-50)}

.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--blue-50);color:var(--blue-700)}

.btn-on-dark{background:rgba(255,255,255,.06);color:#fff;border-color:var(--navy-line-2)}
.btn-on-dark:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.30)}

.btn-white{background:#fff;color:var(--navy);box-shadow:var(--sh-2)}
.btn-white:hover{background:var(--blue-50);color:var(--blue-700)}

.btn-wa{background:var(--wa);color:#06331A}
.btn-wa:hover{background:var(--wa-700);color:#fff}

/* ---------- 7. BADGES / CHIPS ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:650;letter-spacing:.01em;line-height:1.35;
  white-space:nowrap;
}
.badge .ic{font-size:13px;stroke-width:2}
.badge-blue{background:var(--blue-50);color:var(--blue-700)}
.badge-navy{background:var(--navy);color:#fff}
.badge-gold{background:var(--gold-50);color:var(--gold)}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-mute{background:#EFF1F6;color:var(--ink-2)}
.badge-outline{background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2)}
.badge-live{background:var(--blue);color:#fff}

.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;position:relative}
.dot-pulse::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid currentColor;opacity:.6;animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}

/* ---------- 8. CARDS & SURFACES ---------- */
.card-surface{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-2);
}
.hairline{height:1px;background:var(--line);border:0;margin:0}
.navy-band{background:var(--navy);color:var(--ink-on-dark);position:relative;overflow:hidden}
.navy-band h1,.navy-band h2,.navy-band h3{color:#fff}

/* Blueprint grid + glow backdrops */
.bp-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 78%);
}
.bp-grid-light{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(11,27,51,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,27,51,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 62% at 50% 6%,#000 8%,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 62% at 50% 6%,#000 8%,transparent 72%);
}
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}

/* ---------- 9. NAV ---------- */
.nav{
  position:sticky;top:0;z-index:90;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.nav.scrolled{border-bottom-color:var(--line);box-shadow:var(--sh-nav);background:rgba(255,255,255,.92)}
.nav-inner{
  max-width:var(--container);margin-inline:auto;padding:14px var(--gutter);
  display:flex;align-items:center;gap:clamp(14px,3vw,40px);position:relative;
}
.nav-prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--grad);border-radius:0 2px 2px 0;transition:width .1s linear}

.logo{display:flex;align-items:center;gap:11px;margin-right:auto;flex:none}
.logo-mark{
  width:38px;height:38px;border-radius:11px;background:var(--grad);
  display:grid;place-items:center;flex:none;
  box-shadow:0 2px 6px rgba(14,63,168,.32),inset 0 1px 0 rgba(255,255,255,.28);
}
.logo-mark svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-name{font-size:16.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.logo-name .sep{color:var(--blue);font-weight:400}
.logo-tag{font-size:9.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.on-dark .logo-name,.navy-band .logo-name{color:#fff}
.on-dark .logo-name .sep,.navy-band .logo-name .sep{color:var(--blue-300)}
.on-dark .logo-tag,.navy-band .logo-tag{color:var(--ink-on-dark-2)}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  position:relative;padding:8px 13px;border-radius:var(--r-xs);
  font-size:14.5px;font-weight:500;color:var(--ink-2);
  transition:color var(--t-fast),background var(--t-fast);
  display:inline-flex;align-items:center;gap:7px;
}
.nav-links a:hover{color:var(--ink);background:var(--blue-50)}
.nav-links a.active{color:var(--blue-700);background:var(--blue-50);font-weight:600}
.nav-badge{
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--blue);color:#fff;padding:2.5px 7px;border-radius:var(--r-pill);
}
.nav-cta{display:flex;align-items:center;gap:10px;flex:none}

.burger{
  display:none;width:42px;height:42px;border-radius:var(--r-xs);
  border:1px solid var(--line);background:var(--surface);
  flex-direction:column;gap:4.5px;align-items:center;justify-content:center;
}
.burger span{width:17px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform var(--t),opacity var(--t-fast)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.3px) rotate(-45deg)}

.mobile-menu{
  display:none;position:fixed;left:0;right:0;top:67px;z-index:89;
  background:var(--surface);border-bottom:1px solid var(--line);
  box-shadow:var(--sh-3);padding:8px var(--gutter) 24px;
  flex-direction:column;
  transform:translateY(-10px);opacity:0;pointer-events:none;
  transition:transform var(--t),opacity var(--t);
  max-height:calc(100vh - 67px);overflow-y:auto;
}
.mobile-menu.open{transform:none;opacity:1;pointer-events:auto}
.mobile-menu a{
  padding:15px 4px;font-size:16px;font-weight:550;color:var(--ink);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;
}
.mobile-menu .btn{margin-top:18px}

@media (max-width:940px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  .mobile-menu{display:flex}
}

/* ---------- 10. FOOTER ---------- */
.site-footer{background:var(--navy);color:var(--ink-on-dark-2);padding:clamp(48px,7vw,76px) 0 30px;position:relative;overflow:hidden}
.footer-grid{
  max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(28px,5vw,56px);
  position:relative;
}
.footer-blurb{font-size:14px;line-height:1.7;color:var(--ink-on-dark-2);max-width:36ch;margin-top:18px}
.footer-col h4{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.footer-col a{display:block;padding:6px 0;font-size:14px;color:var(--ink-on-dark-2);transition:color var(--t-fast)}
.footer-col a:hover{color:#fff}
.footer-bottom{
  max-width:var(--container);margin:clamp(34px,5vw,50px) auto 0;padding:22px var(--gutter) 0;
  border-top:1px solid var(--navy-line);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--ink-on-dark-2);position:relative;
}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ---------- 11. FORMS ---------- */
.field{display:block;margin-bottom:16px}
.field-label{display:block;font-size:12.5px;font-weight:650;color:var(--ink);margin-bottom:7px}
.input,.select,.textarea{
  width:100%;padding:12.5px 15px;
  background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  font-size:15px;color:var(--ink);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--blue);box-shadow:var(--ring)}
.input:hover:not(:focus),.select:hover:not(:focus){border-color:#BFC7D6}
.select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E5B73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;
}
.input-group{position:relative;display:flex;align-items:center}
.input-group>.ic{position:absolute;left:15px;font-size:18px;color:var(--ink-3);pointer-events:none}
.input-group .input{padding-left:44px}
.form-msg{font-size:13px;padding:11px 14px;border-radius:var(--r-xs);margin-bottom:14px;display:none;line-height:1.5}
.form-msg.show{display:block}
.form-msg.error{background:var(--danger-bg);color:var(--danger)}
.form-msg.success{background:var(--ok-bg);color:var(--ok)}
.fine{font-size:12.5px;color:var(--ink-3);display:flex;align-items:flex-start;gap:7px;line-height:1.5}
.fine .ic{font-size:14px;margin-top:2px}

/* ---------- 12. MODAL ---------- */
.modal{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(6,18,35,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.modal.open{display:flex;animation:fade .2s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  position:relative;width:100%;max-width:460px;max-height:92vh;overflow-y:auto;
  background:var(--surface);border-radius:var(--r-xl);padding:clamp(26px,4vw,36px);
  box-shadow:var(--sh-4);animation:rise .34s var(--ease-out);
}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.sheet-close{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-3);background:var(--bg);
  transition:background var(--t-fast),color var(--t-fast);
}
.sheet-close:hover{background:var(--line);color:var(--ink)}
.sheet-close .ic{font-size:17px}
.sheet h3{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.15;letter-spacing:-.015em;margin:14px 0 8px}
.sheet-lead{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin-bottom:22px}
.sheet-eyebrow{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--r-pill);
  background:var(--gold-50);color:var(--gold);font-size:11.5px;font-weight:700;letter-spacing:.04em;
}
.sheet-eyebrow .ic{font-size:13px}
.ok-badge{
  width:60px;height:60px;border-radius:50%;background:var(--ok-bg);color:var(--ok);
  display:grid;place-items:center;margin:0 auto 18px;
}
.ok-badge .ic{font-size:30px;stroke-width:2.4}
body.modal-open{overflow:hidden}

/* ---------- 13. REVEAL ---------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out) var(--d,0s),transform .7s var(--ease-out) var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* ---------- 14. UTILITIES ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.center{text-align:center}
.wrap-btns{display:flex;flex-wrap:wrap;gap:12px}
.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}

.scroll-thin{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.scroll-thin::-webkit-scrollbar{width:8px;height:8px}
.scroll-thin::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.scroll-thin::-webkit-scrollbar-track{background:transparent}