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

/* ==============================
   0) ROOT VARIABLES
   ============================== */

:root {
   /* ==============================
     BRAND IDENTITY (Vibrant & Professional)
     ============================== */
   --brand-primary: #1a1a4b;
   --brand-accent: #f15a24;
   --brand-ink: #1a1a4b;

   /* Legacy shortcuts (keep for compatibility) */
   --brand: var(--brand-accent);
   --accent: #f37a4a;

   /* ==============================
     NEUTRALS
     ============================== */
   --white: #ffffff;
   --black: #000000;
   --bg: #ffffff;
   /* page background */
   --bg-alt: #f8fafc;
   /* subtle section alternate */
   --surface: #ffffff;
   /* card / panels */
   --ink: #1e293b;
   /* body text - refined Slate 800 */
   --muted: #64748b;
   /* secondary text - refined Slate 500 */
   --border: #e2e8f0;
   /* light border - refined Slate 200 */

   /* ==============================
     TYPOGRAPHY
     ============================== */
   --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI,
      Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

   --fs-300: .875rem;
   --fs-400: clamp(0.95rem, 1.5vw, 1rem); /* Subtle scaling for readability */
   --fs-500: clamp(1rem, 2vw, 1.125rem);
   --fs-600: clamp(1.2rem, 3vw, 1.5rem); /* Increased slightly for impact */
   --fs-700: clamp(1.75rem, 4vw, 2.5rem);
   --fs-800: clamp(2.5rem, 6vw, 3.75rem);
   --fs-900: clamp(3rem, 8vw, 4.5rem);

   /* ==============================
     LAYOUT & SPACING
     ============================== */
   --container: 1200px;
   --container-wide: 1800px;
   --gutter: clamp(1rem, 3vw, 1.5rem); /* Fluid gutters */

   --space-1: .25rem;
   --space-2: .5rem;
   --space-3: .75rem;
   --space-4: clamp(0.85rem, 1.5vw, 1rem);
   --space-5: clamp(1.25rem, 2vw, 1.5rem);
   --space-6: clamp(1.5rem, 4vw, 2.5rem);
   --space-8: clamp(2.5rem, 6vw, 4rem);
   --space-10: clamp(3.5rem, 8vw, 6rem); /* Dramatic reduction on mobile, expansive on desktop */

   --radius: 12px; /* Slightly tighter for a modern look */

   /* ==============================
     HERO THEME (visual background)
     ============================== */
   --hero-bg-start: #f8fafc;
   --hero-bg-end: #ffffff;
   --mesh-a: color-mix(in srgb, var(--brand-primary) 15%, transparent);
   --mesh-b: color-mix(in srgb, var(--brand-accent) 12%, transparent);

   /* ==============================
     EFFECTS / DECORATION
     ============================== */
   --sheen: rgba(255, 255, 255, 0.4);
   --frame-outline-start: color-mix(in srgb, var(--brand-primary) 40%, var(--brand-accent) 10%);
   --frame-outline-end: color-mix(in srgb, var(--brand-accent) 50%, var(--brand-primary) 5%);
   --frame-ambient: color-mix(in srgb, var(--brand-primary) 12%, transparent);

   /* Illustration strokes / glow */
   --illustration-stroke-1: color-mix(in srgb, var(--brand-primary) 40%, var(--white));
   --illustration-stroke-2: color-mix(in srgb, var(--brand-accent) 45%, var(--white));
   --illustration-stroke-3: color-mix(in srgb, var(--brand-primary) 35%, var(--brand-accent) 25%);
   --illustration-glow: color-mix(in srgb, var(--brand-primary) 15%, transparent);

   /* ==============================
     COMPONENTS — Chips / Badges
     ============================== */
   --chip-bg: #f1f5f9;
   --chip-border: #e2e8f0;
   --badge-bg: color-mix(in srgb, var(--brand-accent) 8%, var(--white));
   --badge-shadow: color-mix(in srgb, var(--brand-accent) 10%, transparent);

   /* ==============================
     COMPONENTS — Buttons
     ============================== */
   --on-brand: #ffffff;

   /* Primary button (vibrant accent) */
   --btn-primary-grad-start: #ff6b30;
   --btn-primary-grad-end: #f1561e;
   --btn-primary-hover-start: #ff7d4a;
   --btn-primary-hover-end: #ff6b30;

   /* Secondary button */
   --btn-secondary-bg: #f8fafc;
   --btn-secondary-bg-h: #f1f5f9;

   /* ==============================
     SHADOWS (Multi-layered for realism)
     ============================== */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

   --shadow-1: var(--shadow-md);
   --shadow-2: var(--shadow-xl);

   --shadow-ink: color-mix(in srgb, var(--brand-primary) 8%, transparent);
   --shadow-brand-1: color-mix(in srgb, var(--brand-accent) 20%, transparent);
   --shadow-brand-2: color-mix(in srgb, var(--brand-accent) 25%, transparent);

   /* ==============================
     INTERACTIONS
     ============================== */
   --focus-brand: color-mix(in srgb, var(--brand-accent) 40%, transparent);

   /* ==============================
     HEADER / OFFSETS
     ============================== */
   --header-h: 72px; /* Increased slightly for better nav clarity */
   --anchor-gap: 16px;

   /* ==============================
     FOOTER (Light Theme)
     ============================== */
   --footer-bg: #f8fafc; /* Soft Slate 50 */
   --footer-ink: #1e293b; /* Slate 800 */
   --footer-muted: #64748b; /* Slate 500 */
   --footer-accent: var(--brand-accent);
   --footer-border: #e2e8f0; /* Slate 200 */
}

/* ==============================
   1) RESET / BASE
   ============================== */
*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   /* Increased offset to Ensure section titles have breathing room under sticky header */
   scroll-padding-top: calc(var(--header-h));
   overflow-x: hidden;
}

html,
body {
   height: 100%;
}

body {
   margin: 0;
   font: 400 var(--fs-400)/1.7 var(--font-ui);
   color: var(--ink);
   background: var(--bg);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

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

a {
   color: inherit;
   text-decoration: none;
}

p {
   margin: 0 0 var(--space-4);
}

h1,
h2,
h3 {
   margin: 0 0 var(--space-4);
   color: var(--brand-ink);
   line-height: 1.2;
}

h1 {
   font-weight: 800;
   font-size: var(--fs-800);
}

h2 {
   font-weight: 800;
   font-size: var(--fs-700);
}

h3 {
   font-weight: 700;
   font-size: var(--fs-600);
}

.center {
   text-align: center;
}

.muted {
   color: var(--muted);
}

.mtop {
   margin-top: var(--space-8);
}

/* Trademark Utility - Professional & Subtle */
.tm-mark {
   vertical-align: top;
   font-size: 0.5em; /* Cleaner size */
   margin-left: 0; /* Removed gap */
   font-weight: 700;
   opacity: 0.7;
   line-height: 1;
   position: relative;
   top: 0.75em; /* Pushes it down */
   left: -0.25em; /* Pulled closer */
}

/* Skip link */
.skip-link {
   position: absolute;
   left: -999px;
   top: 0;
   padding: .5rem .75rem;
   background: #000;
   color: #fff;
   z-index: 9999;
}

.skip-link:focus {
   left: .5rem;
   top: .5rem;
}

/* ==============================
   2) LAYOUT CONTAINERS
   ============================== */
.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

/* Wide/media container for heroes, galleries, charts */
.container-wide{
  max-width: var(--container-wide);
  margin-inline: auto;
  /* padding-inline: var(--gutter); */
  box-sizing: border-box;
}

/* Conservative step-ups for larger viewports */
@media (min-width: 1440px){
  :root{ --container: 1280px; }  /* small bump */
}
@media (min-width: 1920px){
  :root{ --container: 1360px; }  /* stop growing here */
}
@media (min-width: 2560px){
  :root{
    --container: 1360px;         /* keep core content readable on 2K/4K */
    --container-wide: 1760px;    /* let only wide rails breathe */
  }
}

/* Tiny screens: slightly tighter gutters (keep your existing behavior) */
@media (max-width: 400px){
  :root{ --gutter: 14px; }
}
/* ==============================
   3) SECTION WRAPPERS (BANDS)
   ============================== */
.band {
   padding: var(--space-10) 0;
   background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
   border-bottom: 1px solid var(--border); /* Subtle separation */
}

.band--alt {
   background-color: #0A1F44;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg fill-opacity='0.14'%3E%3Ccircle fill='%230A1F44' cx='400' cy='400' r='600'/%3E%3Ccircle fill='%230d2c67' cx='400' cy='400' r='500'/%3E%3Ccircle fill='%2310398a' cx='400' cy='400' r='400'/%3E%3Ccircle fill='%231243af' cx='400' cy='400' r='300'/%3E%3Ccircle fill='%23124dd5' cx='400' cy='400' r='200'/%3E%3Ccircle fill='%231E5AEF' cx='400' cy='400' r='100'/%3E%3C/g%3E%3C/svg%3E");
   background-attachment: fixed;
   background-size: cover;
}

.band--cta {
   background: linear-gradient(180deg, #EEF3FF, #fff);
}

.badge {
   display: inline-block;
   font-size: var(--fs-300);
   border: 1px solid var(--border);
   border-radius: 999px;
   padding: .25rem .5rem;
   color: var(--muted);
}


/* ==============================
   2) CONTAINERS MQ
   ============================== */
@media (min-width:1600px) {

   .container,
   .container-wide {
      --container-gutter: clamp(20px, 2.5vw, 48px);
   }


}

@media (max-width:400px) {

   .container,
   .container-wide {
      --container-gutter: 14px;
   }
}