/* ROOT
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

:root {

   /* Brand */
   --color-primary: #2f3192;
   --color-primary-dark: #252672;
   --color-primary-deep: #171947;

   --color-secondary: #e21a1a;
   --color-secondary-dark: #b91414;

   --color-accent: #e2ad2f;
   --color-accent-light: #f8e7ad;

   --color-teal: #0c8c85;

   /* Neutral */
   --color-white: #ffffff;
   --color-black: #000000;
   --color-text: #3c4054;
   --color-text-dark: #22263a;
   --color-text-muted: #73788c;
   --color-background: #ffffff;
   --color-background-soft: #f7f8fc;
   --color-border: #dfe1eb;
   --color-border-light: #eceef4;

   /* Typography */
   --font-primary: 'Open Sans', Arial, Helvetica, sans-serif;
   --font-heading: 'Poppins', Arial, Helvetica, sans-serif;

   --font-size-sm: 0.875rem;
   --font-size-base: 1rem;

   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;

   --line-height-base: 1.65;
   --line-height-heading: 1.2;

   /* Borders */
   --border-width: 1px;
   --border-radius-md: 0.625rem;
   --border-radius-pill: 50rem;

   /* Transition */
   --transition-fast: 150ms ease;
   --transition-normal: 250ms ease;

   /* Z-index */
   --z-header: 1000;
}


/* BASE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

html { scroll-behavior: smooth; }

body {
   margin: 0;
   font-family: var(--font-primary);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-normal);
   line-height: var(--line-height-base);
   color: var(--color-text);
   background-color: var(--color-background);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
   margin: 0 0 0.5rem;
   font-family: var(--font-heading);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-heading);
   letter-spacing: -0.025em;
   color: var(--color-primary-deep);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

strong { font-weight: var(--font-weight-bold); }

a {
   color: var(--color-primary);
   text-decoration: none;
   transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover { color: var(--color-primary-dark); }

img, svg { max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; }

::selection {
   color: var(--color-primary-deep);
   background-color: var(--color-accent-light);
}

@media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }

   *, *::before, *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
   }
}


/* SECTION HEADINGS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.section-tag {
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   margin-bottom: 0.75rem;
   font-weight: var(--font-weight-bold);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--color-accent);
}

.section-tag::before {
   content: "";
   width: 28px;
   height: 3px;
   border-radius: var(--border-radius-pill);
   background-color: var(--color-accent);
}

.section-title {
   margin-bottom: 1.5rem;
   font-weight: var(--font-weight-extrabold);
   letter-spacing: -0.035em;
   color: var(--color-primary-deep);
}


/* BUTTONS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.btn-main, .btn-outline-main, .btn-outline-light-main, .btn-secondary-main {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.6rem;
   min-height: 46px;
   padding: 0.75rem 1.35rem;
   border: var(--border-width) solid transparent;
   border-radius: var(--border-radius-md);
   font-weight: var(--font-weight-semibold);
   line-height: 1.2;
   text-decoration: none;
   cursor: pointer;
   transition: color var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
}

.btn-main {
   color: var(--color-white);
   border-color: var(--color-primary);
   background-color: var(--color-primary);
}

.btn-main:hover {
   color: var(--color-white);
   border-color: var(--color-primary-dark);
   background-color: var(--color-primary-dark);
   transform: translateY(-2px);
}

.btn-outline-main {
   color: var(--color-primary);
   border-color: var(--color-primary);
   background-color: transparent;
}

.btn-outline-main:hover {
   color: var(--color-white);
   border-color: var(--color-primary);
   background-color: var(--color-primary);
   transform: translateY(-2px);
}

.btn-outline-light-main {
   color: var(--color-white);
   border-color: rgba(255, 255, 255, 0.65);
   background-color: transparent;
}

.btn-outline-light-main:hover {
   color: var(--color-primary-deep);
   border-color: var(--color-white);
   background-color: var(--color-white);
   transform: translateY(-2px);
}

.btn-secondary-main {
   color: var(--color-white);
   border-color: var(--color-secondary);
   background-color: var(--color-secondary);
}

.btn-secondary-main:hover {
   color: var(--color-white);
   border-color: var(--color-secondary-dark);
   background-color: var(--color-secondary-dark);
   transform: translateY(-2px);
}

.btn-main i, .btn-outline-main i, .btn-outline-light-main i, .btn-secondary-main i { transition: transform var(--transition-normal); }
.btn-main:hover i, .btn-outline-main:hover i, .btn-outline-light-main:hover i, .btn-secondary-main:hover i { transform: translateX(3px); }


/* CARDS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.card-main {
   border: var(--border-width) solid var(--color-border);
   border-radius: 1.5rem;
   background-color: var(--color-white);
   box-shadow: 0 10px 32px rgba(23, 25, 71, 0.11);
}

.card-accent {
   position: relative;
   overflow: hidden;
   transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

.card-accent::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 5px;
   height: 100%;
   background: linear-gradient(to bottom, var(--color-secondary), var(--color-accent));
}

.card-accent::after {
   content: "";
   position: absolute;
   top: -35px;
   right: -35px;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background-color: rgba(47, 49, 146, 0.05);
   pointer-events: none;
}

.card-accent:hover {
   border-color: rgba(47, 49, 146, 0.28);
   box-shadow: 0 16px 36px rgba(23, 25, 71, 0.13);
   transform: translateY(-4px);
}


/* MODAL
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.site-modal {
   overflow: hidden;
   border: 0;
   border-radius: 1.5rem;
   box-shadow: 0 24px 60px rgba(23, 25, 71, 0.18);
}

.site-modal .modal-header { padding: 1.5rem; border-bottom: var(--border-width) solid var(--color-border-light); }
.site-modal .modal-body { padding: 1.5rem; }
.site-modal .modal-footer { padding: 1rem 1.5rem; border-top: var(--border-width) solid var(--color-border-light); }
.site-modal .modal-title { margin: 0; }

@media (max-width: 575.98px) {
   .site-modal .modal-header, .site-modal .modal-body { padding: 1.25rem; }
   .site-modal .modal-footer { padding: 1rem 1.25rem; }
}