@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Mulish:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   Bussinesstan Design System — compiled bundle
   Source: claude.ai/design project "Bussinesstan Design System".
   tokens/fonts + colors + states + typography + spacing + breakpoints +
   radius + shadow + motion + layers + base + utilities, concatenated in the
   order styles.css imports them. Edit the source project, not this file.

   Font substitution: Cocogoose -> Poppins, Proxima Nova -> Mulish.
   Drop licensed .woff2 into assets/fonts/ and swap the @import above to restore.
   ========================================================================== */

/* ---------- Colors ---------- */
:root{
  --navy:#0C163D;      /* Brand Navy — primary text, dark bands */
  --blue:#315CFD;      /* Action Blue — CTA, links, focus */
  --mist:#EBF5FF;      /* Mist Blue — soft section background */
  --slate:#415A79;     /* Slate — secondary copy */
  --white:#FFFFFF;     /* Canvas White */
  --gold:#F8D580;      /* Warm Gold — warm media accents */
  --teal:#28DCD1;      /* Signal Teal — energetic highlight */
  --coral:#EB6366;     /* Human Coral — selective human accent */

  --blue-hover:#2247D6;
  --blue-active:#1A38B0;
  --navy-soft:#1A2A57;
  --mist-border:#D6E6F7;
  --border:#DCE3EF;
  --border-strong:#B9C6DC;
  --slate-70:rgba(65,90,121,0.7);
  --navy-08:rgba(12,22,61,0.08);
  --navy-12:rgba(12,22,61,0.12);

  --text-primary:var(--navy);
  --text-secondary:var(--slate);
  --text-inverse:var(--white);
  --link:var(--blue);
  --link-hover:var(--blue-hover);
  --surface-canvas:var(--white);
  --surface-soft:var(--mist);
  --surface-dark:var(--navy);
  --surface-card:var(--white);
  --cta:var(--blue);
  --cta-hover:var(--blue-hover);
  --cta-text:var(--white);
  --focus-ring:var(--blue);
}
.theme-canvas{ --surface:var(--white); --text:var(--navy); --text-muted:var(--slate); --hairline:var(--border); }
.theme-mist{ --surface:var(--mist); --text:var(--navy); --text-muted:var(--slate); --hairline:var(--mist-border); }
.theme-navy{ --surface:var(--navy); --text:var(--white); --text-muted:rgba(235,245,255,0.72); --hairline:rgba(235,245,255,0.16);
  --text-primary:var(--white); --text-secondary:rgba(235,245,255,0.72); --link:var(--teal); --link-hover:#5DE9E0; }

/* ---------- Semantic states ---------- */
:root{
  --info-surface:#EBF0FF; --info-border:#C2D0FE; --info-solid:#315CFD; --info-text:#1A38B0;
  --success-surface:#E4FBF9; --success-border:#A9EFEA; --success-solid:#28DCD1; --success-text:#07655F;
  --warning-surface:#FEF6E4; --warning-border:#F8DFA6; --warning-solid:#F8D580; --warning-text:#7A5C0B;
  --danger-surface:#FDECEC; --danger-border:#F6C3C4; --danger-solid:#EB6366; --danger-text:#B02F32;
  --neutral-surface:#EBF5FF; --neutral-border:#D6E6F7; --neutral-solid:#415A79; --neutral-text:#2C4460;
  --disabled-surface:#F1F4F9; --disabled-border:#DCE3EF; --disabled-text:#8A99AE;
}

/* ---------- Typography ---------- */
:root{
  --font-display:'Poppins','Cocogoose',system-ui,sans-serif; /* hero + expressive card copy ONLY */
  --font-system:'Mulish','Proxima Nova',system-ui,-apple-system,'Segoe UI',sans-serif;

  --fw-regular:400; --fw-semibold:600; --fw-bold:700;

  --text-hero-size:48px;   --text-hero-lh:48px;
  --text-h2-size:48px;     --text-h2-lh:60px;
  --text-h3-size:30px;     --text-h3-lh:45px;
  --text-h4-size:24px;     --text-h4-lh:28px;
  --text-lead-size:20px;   --text-lead-lh:28px;
  --text-body-size:16px;   --text-body-lh:24px;
  --text-small-size:14px;  --text-small-lh:20px;
  --text-eyebrow-size:13px; --text-eyebrow-lh:16px;

  --tracking-eyebrow:0.08em;
  --tracking-tight:-0.01em;
}

/* ---------- Spacing & layout ---------- */
:root{
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:40px; --space-8:48px; --space-9:64px;
  --space-10:80px; --space-11:120px;

  --container-max:1280px;
  --content-width:1120px;
  --section-pad:80px;
  --gutter:24px;
}

/* ---------- Breakpoints ---------- */
:root{
  --bp-sm:640px; --bp-md:900px; --bp-lg:1120px; --bp-xl:1280px;
  --section-pad-fluid:clamp(48px, 6vw, 80px);
  --gutter-fluid:clamp(16px, 2.5vw, 24px);
}

/* ---------- Radius ---------- */
:root{
  --radius-button:8px; --radius-sm:12px; --radius-md:16px;
  --radius-lg:24px; --radius-xl:32px; --radius-pill:999px;
}

/* ---------- Elevation ---------- */
:root{
  --shadow-none:none;
  --shadow-soft:0 1px 3px rgba(12,22,61,0.06);
  --shadow-card:0 1px 2px rgba(12,22,61,0.05), 0 10px 30px rgba(12,22,61,0.06);
  --shadow-lifted:0 2px 6px rgba(12,22,61,0.08), 0 18px 48px rgba(12,22,61,0.10);
  --shadow-menu:0 12px 32px rgba(12,22,61,0.14);
  --focus-shadow:0 0 0 3px rgba(49,92,253,0.35);
}

/* ---------- Motion ---------- */
:root{
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --ease-in-out:ease-in-out;
  --dur-interactive:300ms; --dur-hover:300ms; --dur-reveal:500ms;
  --dur-menu:150ms; --dur-header:800ms;
  --transition-interactive:all var(--dur-interactive) var(--ease-standard);
  --transition-transform:transform var(--dur-hover) var(--ease-in-out);
  --transition-fade:opacity var(--dur-reveal) var(--ease-in-out);
  --hover-scale:1.02;
}

/* ---------- Layers ---------- */
:root{
  --layer-base:0; --layer-raised:10; --layer-sticky:20; --layer-header:50;
  --layer-dropdown:60; --layer-overlay:80; --layer-modal:90; --layer-toast:100; --layer-tooltip:110;
  --opacity-disabled:0.5; --opacity-muted:0.72; --opacity-ghost:0.08;
  --overlay-scrim:rgba(12,22,61,0.55);
  --blur-panel:blur(10px);
}

/* ---------- Base element layer ---------- */
*{box-sizing:border-box}
body{
  font-family:var(--font-system);
  font-size:var(--text-body-size);
  line-height:var(--text-body-lh);
  color:var(--text-primary);
  background:var(--surface-canvas);
  font-weight:var(--fw-regular);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-system);color:var(--text-primary);font-weight:var(--fw-bold);letter-spacing:var(--tracking-tight);text-wrap:balance}
h2{font-size:var(--text-h2-size);line-height:var(--text-h2-lh)}
h3{font-size:var(--text-h3-size);line-height:var(--text-h3-lh)}
h4{font-size:var(--text-h4-size);line-height:var(--text-h4-lh)}
p{color:var(--text-secondary);text-wrap:pretty}
a{color:var(--link);text-decoration:none;transition:color var(--dur-interactive) var(--ease-standard)}
a:hover{color:var(--link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
:where(h1,h2,h3,h4) strong{color:inherit}
img{max-width:100%}
::selection{background:var(--blue);color:var(--white)}

.font-display{font-family:var(--font-display)}
.eyebrow{font-size:var(--text-eyebrow-size);line-height:var(--text-eyebrow-lh);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:var(--fw-bold);color:var(--blue)}
.lead{font-size:var(--text-lead-size);line-height:var(--text-lead-lh);font-weight:var(--fw-regular);color:var(--text-secondary)}
.small{font-size:var(--text-small-size);line-height:var(--text-small-lh)}

.container{max-width:var(--container-max);margin-inline:auto;padding-inline:24px}
.content{max-width:var(--content-width);margin-inline:auto}
.section{padding-block:var(--section-pad)}

/* ---------- Utilities & prose ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.focus-ring:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.stack{display:flex;flex-direction:column}
.stack-2{gap:var(--space-2)}.stack-3{gap:var(--space-3)}.stack-4{gap:var(--space-4)}.stack-5{gap:var(--space-5)}.stack-6{gap:var(--space-6)}
.row{display:flex;align-items:center}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.section-fluid{padding-block:var(--section-pad-fluid)}

.band-canvas{background:var(--white);color:var(--navy)}
.band-mist{background:var(--mist);color:var(--navy)}
.band-navy{background:var(--navy);color:var(--white)}
.band-navy p{color:rgba(235,245,255,0.72)}
.band-navy a{color:var(--teal)}

.prose{max-width:72ch;color:var(--slate);font-size:var(--text-body-size);line-height:1.7}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:32px;line-height:42px;color:var(--navy);margin-top:2em;margin-bottom:0}
.prose h3{font-size:24px;line-height:32px;color:var(--navy);margin-top:1.6em;margin-bottom:0}
.prose h4{font-size:19px;line-height:26px;color:var(--navy);margin-top:1.4em;margin-bottom:0}
.prose p{margin:0;color:var(--slate)}
.prose strong{color:var(--navy);font-weight:var(--fw-bold)}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--blue-hover)}
.prose ul,.prose ol{margin:0;padding-left:1.3em}
.prose li+li{margin-top:.5em}
.prose ul li::marker{color:var(--blue)}
.prose blockquote{margin:0;padding:4px 0 4px 24px;border-left:3px solid var(--teal);color:var(--navy);font-size:var(--text-lead-size);line-height:var(--text-lead-lh)}
.prose img,.prose figure img{border-radius:var(--radius-md)}
.prose figcaption{font-size:var(--text-small-size);color:var(--slate);margin-top:8px}
.prose hr{border:none;border-top:1px solid var(--border);margin-block:2em}
.prose code{background:var(--mist);color:var(--navy);padding:2px 6px;border-radius:4px;font-size:.9em}
.prose table{width:100%;border-collapse:collapse;font-size:var(--text-small-size)}
.prose th{text-align:left;color:var(--navy);font-weight:var(--fw-bold);border-bottom:2px solid var(--border);padding:10px 12px}
.prose td{border-bottom:1px solid var(--border);padding:10px 12px}

.text-navy{color:var(--navy)}.text-slate{color:var(--slate)}.text-blue{color:var(--blue)}.text-inverse{color:var(--white)}
.text-center{text-align:center}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tabular{font-variant-numeric:tabular-nums}