/*
  Design System
  ---
  This file contains the core design system for the site.
  It includes fluid typography, spacing, and color theming.
*/
/* CSS Custom Properties */
:root {
    /* OKLCH color system */
    --primary-l: 54.6%;
    --primary-c: 0.245;
    --primary-h: 262.881;

    /* Generate variations */
    --primary-50: oklch(95% 0.02 var(--primary-h));
    --primary-100: oklch(90% 0.04 var(--primary-h));
    --primary-200: oklch(85% 0.06 var(--primary-h));
    --primary-300: oklch(75% 0.08 var(--primary-h));
    --primary-400: oklch(65% 0.12 var(--primary-h));
    --primary-500: oklch(var(--primary-l) var(--primary-c) var(--primary-h));
    --primary-600: oklch(55% 0.16 var(--primary-h));
    --primary-700: oklch(45% 0.14 var(--primary-h));
    --primary-800: oklch(35% 0.10 var(--primary-h));
    --primary-900: oklch(25% 0.06 var(--primary-h));

    /* Neutral colors (grayscale) - OKLCH format */
    --neutral-0: rgb(255, 255, 255);
    --neutral-50: rgb(244, 249, 254);
    --neutral-100: rgb(233, 239, 246);
    --neutral-200: rgb(215, 223, 232);
    --neutral-300: rgb(191, 200, 211);
    --neutral-400: rgb(131, 141, 152);
    --neutral-500: rgb(78, 86, 95);
    --neutral-600: rgb(50, 60, 70);
    --neutral-700: rgb(24, 35, 45);
    --neutral-800: rgb(3, 12, 22);
    --neutral-900: rgb(0, 2, 6);


    /* Colors */
    --primary-color: var(--primary-500);
    --primary-hover: var(--primary-700);
    --secondary-color: var(--neutral-500);
    --accent-color: #764ba2;
    --text-primary: var(--neutral-800);
    --text-secondary: var(--neutral-600);
    --text-muted: var(--neutral-400);
    --background-primary: var(--neutral-50);
    --background-secondary: var(--neutral-100);
    --background-dark: var(--neutral-800);
    --background-darker: var(--neutral-900);
    --border-color: var(--neutral-300);
    --border-light: var(--neutral-200);
    --shadow-light: hsl(210, 20%, 0%, 0.05);
    --shadow-medium: hsl(210, 20%, 0%, 0.2);

    /* Spacing */
    --spacing-xxs: 0.125rem;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 5rem;


    /* Typography */
    --font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    --font-size-xs: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);
    --font-size-sm: clamp(0.875rem, 0.5vw + 0.625rem, 1rem);
    --font-size-base: clamp(1rem, 0.5vw + 0.75rem, 1.125rem);
    --font-size-lg: clamp(1.125rem, 1vw + 0.75rem, 1.25rem);
    --font-size-xl: clamp(1.25rem, 1vw + 0.875rem, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    --font-size-3xl: clamp(1.875rem, 2vw + 1.25rem, 2.5rem);
    --font-size-4xl: clamp(2.25rem, 2.5vw + 1.5rem, 3rem);
    --font-size-5xl: clamp(3rem, 3vw + 2rem, 4rem);

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: bold;
    --line-height-base: 1.5;
    --line-height-tight: 1.25;

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 15px;
    --radius-lg: 25px;

    /* Transitions */
    --transition-fast: 0.3s;
    --transition-medium: 0.6s;

    /* Z-index */
    --z-header: 1000;
    --z-mobile-menu: 999;

    /* Breakpoints */
    --breakpoint-mobile: 768px;
    --breakpoint-small: 480px;

    /* Layout */
    --container-max-width: 1400px;
    --container-padding: max(1rem, min(4vw, 1.5rem));
    --grid-gap: max(1rem, min(4vw, 2rem));
    --grid-gap-small: max(.5rem, min(4vw, 1rem));

}
@supports (color: color(display-p3 0 0 0%)) {
:root {
    --neutral-900: rgb(0, 2, 6);

}

@media (color-gamut: p3) {
:root {
    --neutral-900: color(display-p3 0 0.00628 0.02741);

}
}
}
/*






:root {
    !* Font Family *!
    --font-family-base: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    --font-family-headings: var(--font-family-base);

    !* Colours *!
    color-scheme: light dark;

    !* OKLCH color system *!
    --primary-l: 54.6%;
    --primary-c: 0.245;
    --primary-h: 262.881;

    !* Generate variations *!
    --primary-50: oklch(95% 0.02 var(--primary-h));
    --primary-100: oklch(90% 0.04 var(--primary-h));
    --primary-200: oklch(85% 0.06 var(--primary-h));
    --primary-300: oklch(75% 0.08 var(--primary-h));
    --primary-400: oklch(65% 0.12 var(--primary-h));
    --primary-500: oklch(var(--primary-l) var(--primary-c) var(--primary-h));
    --primary-600: oklch(55% 0.16 var(--primary-h));
    --primary-700: oklch(45% 0.14 var(--primary-h));
    --primary-800: oklch(35% 0.10 var(--primary-h));
    --primary-900: oklch(25% 0.06 var(--primary-h));

    !* Neutral colors (grayscale) - OKLCH format *!
    --neutral-50: oklch(98% 0.008 250);
    --neutral-100: oklch(95% 0.012 250);
    --neutral-200: oklch(90% 0.015 250);
    --neutral-300: oklch(83% 0.018 250);
    --neutral-400: oklch(64% 0.020 250);
    --neutral-500: oklch(45% 0.018 250);
    --neutral-600: oklch(35% 0.022 250);
    --neutral-700: oklch(25% 0.025 250);
    --neutral-800: oklch(15% 0.028 250);
    --neutral-900: oklch(8% 0.030 250);

    !* Background colors *!
    --bg-primary: var(--neutral-50);
    --bg-secondary: var(--neutral-100);
    --bg-tertiary: var(--neutral-200);
    --bg-accent: var(--primary-50);

    !* Text colors *!
    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-700);
    --text-muted: var(--neutral-500);
    --text-inverse: var(--neutral-50);

    !* Border colors *!
    --border-light: var(--neutral-200);
    --border-medium: var(--neutral-300);
    --border-dark: var(--neutral-400);

    !* Shadow colors *!
    --shadow-light: hsl(210, 20%, 0%, 0.05);
    --shadow-medium: hsl(210, 20%, 0%, 0.1);
    --shadow-dark: hsl(210, 20%, 0%, 0.2);


    !* Layout *!
    --site-wrapper-width: 2500px;
    --container-default: 1200px;

    !* Font weights *!
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    !* Responsive font sizes using clamp *!
    --font-size-xs: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);
    --font-size-sm: clamp(0.875rem, 0.5vw + 0.625rem, 1rem);
    --font-size-base: clamp(1rem, 0.5vw + 0.75rem, 1.125rem);
    --font-size-lg: clamp(1.125rem, 1vw + 0.75rem, 1.25rem);
    --font-size-xl: clamp(1.25rem, 1vw + 0.875rem, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    --font-size-3xl: clamp(1.875rem, 2vw + 1.25rem, 2.5rem);
    --font-size-4xl: clamp(2.25rem, 2.5vw + 1.5rem, 3rem);
    --font-size-5xl: clamp(3rem, 3vw + 2rem, 4rem);

    !* Line heights *!
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    !* Spacing System (8px base) *!
    --space-xs: 0.25rem;    !* 4px *!
    --space-sm: 0.5rem;     !* 8px *!
    --space-md: 1rem;       !* 16px *!
    --space-lg: 1.5rem;     !* 24px *!
    --space-xl: 2rem;       !* 32px *!
    --space-2xl: 3rem;      !* 48px *!
    --space-3xl: 4rem;      !* 64px *!
    --space-4xl: 6rem;      !* 96px *!
    --space-5xl: 8rem;      !* 128px *!

    !* Responsive spacing using clamp *!
    --space-responsive-xs: clamp(0.25rem, 0.5vw, 0.5rem);
    --space-responsive-sm: clamp(0.5rem, 1vw, 1rem);
    --space-responsive-md: clamp(1rem, 2vw, 2rem);
    --space-responsive-lg: clamp(1.5rem, 3vw, 3rem);
    --space-responsive-xl: clamp(2rem, 4vw, 4rem);
    --space-responsive-2xl: clamp(3rem, 6vw, 6rem);

    !* Border radius *!
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    !* Transitions *!
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    !* Z-index scale *!
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;

    !* Container widths *!
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;

    !* Responsive container padding *!
    --container-padding: clamp(1rem, 4vw, 2rem);

    --hdr-gradient: linear-gradient(
            to right in oklab,
            #1e293b 0%, #0f172a 100%
    );
    --sdr-gradient: linear-gradient(to right, #1e293b 0%, #0f172a 100%);



    !* 2. DARK MODE SUPPORT *!
    !* =================== *!

    @media (prefers-color-scheme: dark) {
        :root {
            !* Override colors for dark mode *!
            --bg-primary: var(--neutral-900);
            --bg-secondary: var(--neutral-800);
            --bg-tertiary: var(--neutral-700);
            --bg-accent: var(--primary-900);

            --text-primary: var(--neutral-50);
            --text-secondary: var(--neutral-300);
            --text-muted: var(--neutral-500);
            --text-inverse: var(--neutral-900);

            --border-light: var(--neutral-700);
            --border-medium: var(--neutral-600);
            --border-dark: var(--neutral-500);

            --shadow-light: hsl(0, 0%, 0%, 0.2);
            --shadow-medium: hsl(0, 0%, 0%, 0.4);
            --shadow-dark: hsl(0, 0%, 0%, 0.6);
        }
    }

}*/
/* Box sizing rules */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}
/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}
/* Set core body defaults */
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
    -webkit-text-decoration-skip: ink;
            text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
                animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
                animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
[class^="container"] {
    max-width: 1400px;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: max(1rem, min(4vw, 1.5rem));
    padding-right: max(1rem, min(4vw, 1.5rem));
    padding-left: max(1rem, min(4vw, 1.5rem));
    padding-left: var(--container-padding);
    padding-right: max(1rem, min(4vw, 1.5rem));
    padding-right: var(--container-padding);
}
.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }
/* Container queries (when supported) */
@container (min-width: 400px) {
    .card {
        padding: 3rem;
        padding: var(--spacing-2xl);
    }
}
/* Logical properties for better internationalization */
.flow > * + * {
    margin-top: 1rem;
    margin-top: var(--spacing-md);
}
/* Grid utilities with responsive behavior */
.card-grid {
    --min: 350px;
    display: grid;
    grid-gap: 1rem;
    grid-gap: var(--spacing-md);
    gap: 1rem;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
[hidden] {
    display: none !important;
}
/* Define the aspect ratios */
.ar-16-9 {
    --aspect-ratio: calc(16 / 9);
}
.ar-9-16 {
    --aspect-ratio: calc(9 / 16);
}
.ar-4-3 {
    --aspect-ratio: calc(4 / 3);
}
.ar-3-4 {
    --aspect-ratio: calc(3 / 4);
}
.ar-1-1 {
    --aspect-ratio: 1;
}
/* Use aspect-ratio property directly */
.ar-16-9,
.ar-9-16,
.ar-4-3,
.ar-3-4,
.ar-1-1 {
    aspect-ratio: 1;
    aspect-ratio: var(--aspect-ratio, 1);
}
/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1) {
    .ar-16-9,
    .ar-9-16,
    .ar-4-3,
    .ar-1-1 {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .ar-16-9::before,
    .ar-9-16::before,
    .ar-4-3::before,
    .ar-1-1::before {
        content: "";
        display: block;
        padding-top: calc(100% / var(--aspect-ratio));
    }

    .ar-16-9 > *,
    .ar-9-16 > *,
    .ar-4-3 > *,
    .ar-1-1 > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
.list-unstyled {
    list-style: none;
    padding: 0;
    margin: 0;
}
.list-inline {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}
.stack {
    display: grid;
    grid-template-areas: "stack";
}
.stack  > * {
        grid-area: stack;
    }
/* Stretch Link */
/* Note. Card must only contain 1 link for this to work. */
.stretch-link {
    position: relative;
}
.stretch-link a::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
.stretch-link a:focus-visible::after {
        outline: 2px solid;
    }
.stretch-link a:hover,.stretch-link a:focus {
        outline: none;
    }
/* Navigation styles */
/* Header - Navbar */
header {
    --logo-max-width: 150px;

    background: rgb(244, 249, 254);

    background: var(--header-bg);
    -webkit-box-shadow: 0 2px 10px hsl(210, 20%, 0%, 0.05);
            box-shadow: 0 2px 10px hsl(210, 20%, 0%, 0.05);
    -webkit-box-shadow: 0 2px 10px var(--shadow-light);
            box-shadow: 0 2px 10px var(--shadow-light);
    position: sticky;
    top: 0;
    z-index: 1000;
    z-index: var(--z-header);
}
header  > .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-top: var(--spacing-md);
        padding-bottom: var(--spacing-md);
    }
/* Logo */
.logo {
    --_logo-width: var(--logo-max-width, 150px);

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-width: 150px;
    max-width: var(--_logo-width);
}
.logo svg {
        width: 100%;
    }
/* Navigation */
@media (max-width: 768px) {
.nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background: #fff;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 20px;
        -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        -webkit-transform: translateX(calc(-100% - 70px));
                transform: translateX(calc(-100% - 70px));
        -webkit-transition: -webkit-transform 0.3s ease;
        transition: -webkit-transform 0.3s ease;
        transition: transform 0.3s ease;
        transition: transform 0.3s ease, -webkit-transform 0.3s ease;
        gap: 20px;
        z-index: 999;
        z-index: var(--z-mobile-menu);
}

        .nav-menu.active {
            -webkit-transform: translateY(0);
                    transform: translateY(0);
        }

        .nav-menu a {
            padding: 15px 0;
            border-bottom: 1px solid #eee;
            font-size: 1.1rem;
        }

            .nav-menu a:last-child {
                border-bottom: none;
            }
    }
.nav-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    list-style: none;
    gap: 2rem;
    gap: var(--spacing-xl);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    padding: 0;
    margin: 0;
}
@media (min-width: 769px) {
.nav-list {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
}
    }
.nav-list a {
        -webkit-text-decoration: none;
        text-decoration: none;
        color: rgb(3, 12, 22);
        color: var(--nav-color);
        -webkit-transition: color 0.3s;
        transition: color 0.3s;
        -webkit-transition: color var(--transition-fast);
        transition: color var(--transition-fast);
        position: relative;
    }
.nav-list a:hover {
            color: rgb(21, 93, 252);
            color: var(--nav-color-hover);
        }
.nav-list a:after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: rgb(21, 93, 252);
            background: var(--nav-color-hover);
            -webkit-transition: width 0.3s;
            transition: width 0.3s;
            -webkit-transition: width var(--transition-fast);
            transition: width var(--transition-fast);
        }
.nav-list a:hover:after {
            width: 100%;
        }
/* Hamburger Menu */
.hamburger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    cursor: pointer;
    padding: 0.5rem;
    padding: var(--spacing-sm);
    border: none;
}
@media (min-width: 769px) {
.hamburger {
        display: none;
}
    }
.hamburger span {
        width: 25px;
        height: 3px;
        background: rgb(3, 12, 22);
        background: var(--nav-toggle-color);
        margin: 3px 0;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        -webkit-transition: var(--transition-fast);
        transition: var(--transition-fast);
    }
.hamburger.active span:nth-child(1) {
            -webkit-transform: rotate(-45deg) translate(-5px, 6px);
                    transform: rotate(-45deg) translate(-5px, 6px);
        }
.hamburger.active span:nth-child(2) {
            opacity: 0;
        }
.hamburger.active span:nth-child(3) {
            -webkit-transform: rotate(45deg) translate(-6px, -7px);
                    transform: rotate(45deg) translate(-6px, -7px);
        }
/* Header additional items */
.nav-actions {
    display: none;
}
@media (min-width: 769px) {
.nav-actions {
        display: block;
}
    }
.theme-toggle {
    background: none;
    background: var(--theme-toggle-bg);
    border: 2px solid red;
    border: 2px solid var(--theme-toggle-border);
    color: red;
    color: var(--theme-toggle-color);
    padding: 0.5rem 1rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);
    font-size: var(--font-size-xs);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transition: all var(--transition-fast) ease;
    transition: all var(--transition-fast) ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.25rem;
    gap: var(--spacing-xs);
}
.theme-toggle:hover {
        background-color: blue;
        background-color: var(--theme-toggle-hover);
        -webkit-transform: translateY(-2px);
                transform: translateY(-2px);
    }
.theme-toggle:focus {
        outline: 2px solid rgb(21, 93, 252);
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
.theme-toggle.mobile {
        margin-top: 1rem;
        margin-top: var(--spacing-md);
        width: 100%;
    }
.theme-toggle img {
        width: 20px;
        height: 20px;
    }
[class*="btn"] {
    --_button-bg: var(--button-bg, var(--primary-color));
    --_button-color: var(--button-color, var(--background-primary));
    --_button-border-color: var(--button-border-color, transparent);
    --_button-padding: var(--button-padding, var(--spacing-md) var(--spacing-xl));
    --_button-font-size: var(--button-font-size, var(--font-size-base));
    --_button-hover: var(--button-hover, var(--primary-hover));
    --_button-focus: var(--button-focus, var(--primary-hover));

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    justify-self: start;
    padding: 1rem 2rem;
    padding: var(--_button-padding);
    border-radius: 8px;
    border-radius: var(--radius-sm);
    -webkit-text-decoration: none;
    text-decoration: none;
    font-size: clamp(1rem, 0.5vw + 0.75rem, 1.125rem);
    font-size: var(--_button-font-size);
    font-weight: bold;
    font-weight: var(--font-weight-bold);
    background: rgb(21, 93, 252);
    background: var(--_button-bg);
    color: rgb(244, 249, 254);
    color: var(--_button-color);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transition: all var(--transition-fast);
    transition: all var(--transition-fast);
    -webkit-box-shadow: hsl(210, 20%, 0%, 0.05);
            box-shadow: hsl(210, 20%, 0%, 0.05);
    -webkit-box-shadow: var(--shadow-light);
            box-shadow: var(--shadow-light);
    border-color: transparent;
    border-color: var(--_button-border-color);
}
[class*="btn"]:hover {
        background: var(--_button-hover);
        -webkit-transform: translateY(-2px);
                transform: translateY(-2px);
        -webkit-box-shadow: 3px 3px 5px hsl(210, 20%, 0%, 0.2);
                box-shadow: 3px 3px 5px hsl(210, 20%, 0%, 0.2);
        -webkit-box-shadow: 3px 3px 5px var(--shadow-medium);
                box-shadow: 3px 3px 5px var(--shadow-medium);
    }
[class*="btn"]:focus{
        outline: 2px solid var(--_button-focus);
        outline-offset: 2px;
    }
[class*="btn"]:has(svg) {
        gap: 1rem;
        gap: var(--spacing-md);
    }
[class*="btn"]  > svg {
        width: 1.25rem;
        height: 1.25rem;
    }
.btn-sml {
    --button-font-size: var(--font-size-xs);
    --button-padding: var(--spacing-xs) var(--spacing-md);
}
.btn-alt {
    --button-bg: var(--neutral-100);
    --button-color: var(--text-primary);
    --button-hover:var(--primary-50);
    --button-focus: var(--primary-color);
}
.badge {
    --_badge-bg: var(--badge-bg, var(--neutral-100));
    --_badge-color: var(--badge-color, var(--text-primary));
    --_badge-hover-bg: var(--badge-hover-bg, var(--primary-100));
    --_badge-border-color: var(--badge-border-color, transparent);
    --_badge-hover-border-color: var(--badge-hover-border-color, transparent);

    background: rgb(233, 239, 246);

    background: var(--_badge-bg);
    border: 1px solid;
    border-color: transparent;
    border-color: var(--_badge-border-color);
    border-radius: 15px;
    border-radius: var(--radius-md);
    color: rgb(3, 12, 22);
    color: var(--_badge-color);
    font-size: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);
    font-size: var(--font-size-xs);
    font-weight: 400;
    font-weight: var(--font-weight-normal);
    padding: 0.125rem 0.5rem;
    padding: var(--spacing-xxs) var(--spacing-sm);
    -webkit-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out var(--transition-fast);
    transition: all ease-in-out var(--transition-fast);
}
.badge:hover {
        background: var(--_badge-hover-bg);
        /* font-weight: var(--font-weight-bold); */
        border-color: var(--_badge-hover-border-color);
    }
.card {
    --_card-bg: var(--card-bg, var(--neutral-0));
    --_card-padding: var(--card-padding, 0);
    --_card-heading-size: var(--card-heading-size, var(--font-size-xl));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;

    background: rgb(255, 255, 255);

    background: var(--_card-bg);
    border-radius: 15px;
    border-radius: var(--radius-md);
    -webkit-box-shadow: 0 3px 10px hsl(210, 20%, 0%, 0.05);
            box-shadow: 0 3px 10px hsl(210, 20%, 0%, 0.05);
    -webkit-box-shadow: 0 3px 10px var(--shadow-light);
            box-shadow: 0 3px 10px var(--shadow-light);
    overflow: clip;

    -webkit-transition: all 0.3s;

    transition: all 0.3s;

    -webkit-transition: all var(--transition-fast);

    transition: all var(--transition-fast);
    -webkit-animation: fadeIn 0.6s ease-out;
            animation: fadeIn 0.6s ease-out;
    -webkit-animation: fadeIn var(--transition-medium) ease-out;
            animation: fadeIn var(--transition-medium) ease-out;
}
.card:hover,.card:focus {
        -webkit-transform: translateY(-5px);
                transform: translateY(-5px);
        -webkit-box-shadow: 0 10px 30px hsl(210, 20%, 0%, 0.05);
                box-shadow: 0 10px 30px hsl(210, 20%, 0%, 0.05);
        -webkit-box-shadow: 0 10px 30px var(--shadow-light);
                box-shadow: 0 10px 30px var(--shadow-light);
    }
.card:hover .card-title,.card:focus .card-title {
            color: rgb(21, 93, 252);
            color: var(--primary-500);
        }
.card-body {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: var(--_card-padding);
}
.card-footer {
    margin-top: auto;
    padding: calc(var(--_card-padding)/2) var(--_card-padding);
}
.card-icon {
    display: grid;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    place-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 8px;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    margin-bottom: var(--spacing-sm);
    background: rgb(208, 223, 249);
    background: var(--primary-100);
    color: rgb(21, 93, 252);
    color: var(--primary-color);
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-transition: background var(--transition-fast);
    transition: background var(--transition-fast);
}
.card-icon svg {
        width: 1.5rem;
        height: 1.5rem;
        -webkit-transition: scale 0.3s;
        transition: scale 0.3s;
        -webkit-transition: scale var(--transition-fast);
        transition: scale var(--transition-fast);
    }
.card-title {
    font-size: var(--_card-heading-size);
}
.tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.5rem;
    gap: var(--spacing-sm);
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
img {
    -webkit-transition: scale 0.6s;
    transition: scale 0.6s;
    -webkit-transition: scale var(--transition-medium);
    transition: scale var(--transition-medium);
}
form {
    display: grid;
    grid-gap: 1.5rem;
    gap: 1.5rem;
}
.form-group {
    display: grid;
    grid-gap: .25lh;
    gap: .25lh;
}
.required::after {
    content: " *";
    color: #ef4444;
    color: var(--color-error);
    font-weight: 600;
}
label {
    display: block;
    font-size: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);
    font-size: var(--font-size-xs);
    font-weight: bold;
    font-weight: var(--font-weight-bold);
    color: rgb(78, 86, 95);
    color: var(--neutral-500);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}
.form-help {
    font-size: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);
    font-size: var(--font-size-xs);
    color: rgb(78, 86, 95);
    color: var(--neutral-500);
    margin: 0;
}
.form-error {
    font-size: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);
    font-size: var(--font-size-xs);
    color: #ef4444;
    color: var(--color-error);
    margin: 0;
    display: none;
}
.form-error[aria-live] {
        display: block;
    }
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    width: 100%;
    border-radius: 8px;
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    border: 1px solid rgb(215, 223, 232);
    border: 1px solid var(--border-light);
    background: white;
    color: rgb(0, 2, 6);
    color: color(display-p3 0 0.00628 0.02741);
    color: var(--neutral-900);
    -webkit-transition: border-color 0.2s ease, outline-color 0.2s ease, -webkit-box-shadow 0.2s ease;
    transition: border-color 0.2s ease, outline-color 0.2s ease, -webkit-box-shadow 0.2s ease;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, outline-color 0.2s ease;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, outline-color 0.2s ease, -webkit-box-shadow 0.2s ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
}
input:focus,textarea:focus,select:focus {
        border-color: rgb(21, 93, 252);
        border-color: var(--primary-500);
        outline: 2px solid rgb(21, 93, 252);
        outline: 2px solid var(--primary-500);
        outline-offset: 2px;
    }
/* CSS-only validation states (progressive enhancement) */
input:not(:-moz-placeholder):valid, textarea:not(:-moz-placeholder):valid {
    border-color: #10b981;
    border-color: var(--color-success);
}
input:not(:-ms-input-placeholder):valid, textarea:not(:-ms-input-placeholder):valid {
    border-color: #10b981;
    border-color: var(--color-success);
}
input:not(:placeholder-shown):valid,
textarea:not(:placeholder-shown):valid {
    border-color: #10b981;
    border-color: var(--color-success);
}
input:not(:-moz-placeholder):invalid, textarea:not(:-moz-placeholder):invalid {
    border-color: #ef4444;
    border-color: var(--color-error);
}
input:not(:-ms-input-placeholder):invalid, textarea:not(:-ms-input-placeholder):invalid {
    border-color: #ef4444;
    border-color: var(--color-error);
}
input:not(:placeholder-shown):invalid,
textarea:not(:placeholder-shown):invalid {
    border-color: #ef4444;
    border-color: var(--color-error);
}
/* Select validation - only after interaction */
select:not([value=""]):valid,
select.has-interaction:valid {
    border-color: #10b981;
    border-color: var(--color-success);
}
/* select:not([value=""]):invalid:not(:focus), */
select.has-interaction:invalid:not(:focus) {
    border-color: #ef4444;
    border-color: var(--color-error);
}
select:focus:invalid {
    border-color: #f59e0b;
    border-color: var(--color-warning);
}
.form-group.has-error {

}
/* JavaScript-enhanced validation states (override CSS when JS is available) */
.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
    border-color: #ef4444;
    border-color: var(--color-error);
}
.form-group.has-error input:focus,
.form-group.has-error textarea:focus,
.form-group.has-error select:focus {
    outline-color: #ef4444;
    outline-color: var(--color-error);
}
.form-group.has-success input,
.form-group.has-success textarea,
.form-group.has-success select {
    border-color: #10b981;
    border-color: var(--color-success);
}
/* Hide CSS validation when JS classes are present */
.form-group.has-error input:not(:-moz-placeholder):valid, .form-group.has-error textarea:not(:-moz-placeholder):valid, .form-group.has-success input:not(:-moz-placeholder):invalid, .form-group.has-success textarea:not(:-moz-placeholder):invalid {
    border-color: inherit;
}
.form-group.has-error input:not(:-ms-input-placeholder):valid, .form-group.has-error textarea:not(:-ms-input-placeholder):valid, .form-group.has-success input:not(:-ms-input-placeholder):invalid, .form-group.has-success textarea:not(:-ms-input-placeholder):invalid {
    border-color: inherit;
}
.form-group.has-error input:not(:placeholder-shown):valid,
.form-group.has-error textarea:not(:placeholder-shown):valid,
.form-group.has-error select:not([value=""]):valid,
.form-group.has-success input:not(:placeholder-shown):invalid,
.form-group.has-success textarea:not(:placeholder-shown):invalid,
.form-group.has-success select:not([value=""]):invalid {
    border-color: inherit;
}
.select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;

}
.select-wrapper::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 1rem;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid rgb(78, 86, 95);
        border-top: 6px solid var(--neutral-500);
        pointer-events: none;
        -webkit-transition: border-top-color 0.2s ease, -webkit-transform 0.2s ease;
        transition: border-top-color 0.2s ease, -webkit-transform 0.2s ease;
        transition: transform 0.2s ease, border-top-color 0.2s ease;
        transition: transform 0.2s ease, border-top-color 0.2s ease, -webkit-transform 0.2s ease;
    }
select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer;
    padding-right: 3rem; /* Space for custom arrow */
    background-image: none;
}
.success-message {
    background: #10b981;
    background: var(--color-success);
    color: white;
    padding: 1rem;
    border-radius: 8px;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    display: none;
}
.success-message.show {
        display: block;
    }
button[type="submit"] {
    position: relative;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
button[type="submit"]:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        -webkit-transform: none;
                transform: none;
        -webkit-box-shadow: none;
                box-shadow: none;
    }
button.loading[type="submit"] {
        color: transparent;
        -webkit-transform: none;
                transform: none;
        -webkit-box-shadow: none;
                box-shadow: none;
    }
button.loading[type="submit"]::after {
            color: rgb(208, 223, 249);
            color: var(--primary-100);
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            border: 2px solid transparent;
            border-top: 2px solid currentColor;
            border-radius: 50%;
            -webkit-animation: spin 1s linear infinite;
                    animation: spin 1s linear infinite;
        }
@-webkit-keyframes spin {
    0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); }
    100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes spin {
    0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); }
    100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); }
}
.select-wrapper.dropdown-open::after {
    -webkit-transform: translateY(-50%) rotate(180deg);
            transform: translateY(-50%) rotate(180deg);
}
.form-general-error {
    background: #ef4444;
    background: var(--color-error);
    color: white;
    padding: 1rem;
    border-radius: 8px;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    display: none;
    font-size: clamp(0.875rem, 0.5vw + 0.625rem, 1rem);
    font-size: var(--font-size-sm);
    border: 1px solid #ef4444;
    border: 1px solid var(--color-error);
}
footer {
    --logo-max-width: 200px;


    background: rgb(18, 32, 62);


    background: var(--primary-900);
    color: rgb(185, 206, 246);
    color: var(--primary-200);
    padding-top: 3rem;
    padding-bottom: 1rem;
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-md);
    text-align: center;
    font-size: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);
    font-size: var(--font-size-xs);
}
footer ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: 1.5rem;
        gap: var(--spacing-lg);
    }
footer a {
        -webkit-text-decoration: none;
        text-decoration: none;
        color: rgb(147, 174, 225);
        color: var(--primary-300);
    }
footer .logo {
        --svg-fill: var(--neutral-200);
        margin-left: auto;
        margin-right: auto;
    }
/* Hero Section */
.hero-section {
    --_background: linear-gradient(135deg, var(--neutral-100) 0%, var(--neutral-200) 50%, var(--neutral-300) 100%);
    /*--_background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);*/
    --_grid-color: var(--secondary-color);
    /*--_grid-color: rgba(0, 255, 136, 0.1);*/
    --_path-color: var(--primary-color);
    /*--_path-color: #00ff88;*/
    background: linear-gradient(135deg, rgb(233, 239, 246) 0%, rgb(215, 223, 232) 50%, rgb(191, 200, 211) 100%);
    background: var(--_background);
    text-align: center;
}
.circuit-bg {
    position: relative;
    overflow: hidden;
    opacity: 0.2;
}
/*background-color: #e5e5f7;
opacity: 0.8;
background-image:  linear-gradient(#444cf7 2px, transparent 2px), linear-gradient(90deg, #444cf7 2px, transparent 2px), linear-gradient(#444cf7 1px, transparent 1px), linear-gradient(90deg, #444cf7 1px, #e5e5f7 1px);
background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;*/
.circuit-grid {
    width: 130%;
    height: 130%;
    -webkit-transform: translate(-50px, -50px);
            transform: translate(-50px, -50px);
    background-image: linear-gradient(var(--_grid-color) 2px, transparent 2px), linear-gradient(90deg, var(--_grid-color) 2px, transparent 2px), linear-gradient(var(--_grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--_grid-color) 1px, transparent 1px);
    background-size: 5rem 5rem, 5rem 5rem, 1rem 1rem, 1rem 1rem;

    /*background-image:*/
    /*        linear-gradient(var(--_grid-color) 1px, transparent 1px),*/
    /*        linear-gradient(90deg, var(--_grid-color) 1px, transparent 1px);*/
    /*background-size: 100px 100px;*/
    -webkit-animation: kenburns 20s ease-in-out infinite alternate, gridPulse 4s ease-in-out infinite;
            animation: kenburns 20s ease-in-out infinite alternate, gridPulse 4s ease-in-out infinite;
}
@-webkit-keyframes gridShift {
    0% {
        -webkit-transform: translate(-50px, -50px);
                transform: translate(-50px, -50px);
    }
    100% {
        -webkit-transform: translate(50px, 50px);
                transform: translate(50px, 50px);
    }
}
@keyframes gridShift {
    0% {
        -webkit-transform: translate(-50px, -50px);
                transform: translate(-50px, -50px);
    }
    100% {
        -webkit-transform: translate(50px, 50px);
                transform: translate(50px, 50px);
    }
}
@-webkit-keyframes gridPulse {
    0% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.4;
    }
}
@keyframes gridPulse {
    0% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.4;
    }
}
@-webkit-keyframes kenburns {
    0% {
        -webkit-transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
                transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        -webkit-transform-origin: center center;
                transform-origin: center center;
    }
    100% {
        -webkit-transform: scale3d(1.2, 1.2, 1) translate3d(-30px, -20px, 0px);
                transform: scale3d(1.2, 1.2, 1) translate3d(-30px, -20px, 0px);
        -webkit-transform-origin: center center;
                transform-origin: center center;
    }
}
@keyframes kenburns {
    0% {
        -webkit-transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
                transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
        -webkit-transform-origin: center center;
                transform-origin: center center;
    }
    100% {
        -webkit-transform: scale3d(1.2, 1.2, 1) translate3d(-30px, -20px, 0px);
                transform: scale3d(1.2, 1.2, 1) translate3d(-30px, -20px, 0px);
        -webkit-transform-origin: center center;
                transform-origin: center center;
    }
}
.circuit-paths {
    position: relative;
    width: 100%;
    height: 100%;
}
.path {
    position: absolute;
    opacity: 0.7;
}
.path:nth-child(1) {
        top: 20%;
        left: 10%;
        -webkit-animation-delay: 0s;
                animation-delay: 0s;
    }
.path:nth-child(2) {
        top: 40%;
        left: 60%;
        -webkit-animation-delay: 1s;
                animation-delay: 1s;
    }
.path:nth-child(3) {
        top: 70%;
        left: 20%;
        -webkit-animation-delay: 2s;
                animation-delay: 2s;
    }
.path:nth-child(4) {
        top: 30%;
        left: 80%;
        -webkit-animation-delay: 0.5s;
                animation-delay: 0.5s;
    }
.path:nth-child(5) {
        top: 60%;
        left: 30%;
        -webkit-animation-delay: 1.7s;
                animation-delay: 1.7s;
    }
.path-horizontal {
    height: 2px;
    width: 200px;
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(var(--_path-color)), to(transparent));
    background: linear-gradient(90deg, transparent, var(--_path-color), transparent);
    -webkit-animation: pathFlow 4s ease-in-out infinite;
            animation: pathFlow 4s ease-in-out infinite;
}
@-webkit-keyframes pathFlow {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px);
                transform: translateX(-50px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(50px);
                transform: translateX(50px);
    }
}
@keyframes pathFlow {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px);
                transform: translateX(-50px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(50px);
                transform: translateX(50px);
    }
}
.path-vertical {
    width: 2px;
    height: 150px;
    background: linear-gradient(135deg, transparent, var(--_path-color), transparent);
    -webkit-animation: pathFlowVertical 4s ease-in-out infinite;
            animation: pathFlowVertical 4s ease-in-out infinite;
}
@-webkit-keyframes pathFlowVertical {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-50px);
                transform: translateY(-50px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(50px);
                transform: translateY(50px);
    }
}
@keyframes pathFlowVertical {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-50px);
                transform: translateY(-50px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(50px);
                transform: translateY(50px);
    }
}
.hero-content {
    position: relative;
    z-index: 1;
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-top: var(--spacing-4xl);
    padding-bottom: var(--spacing-4xl);
    /*max-width: 600px;*/
    /*margin: 0 auto;*/
}
.hero-badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.5rem;
    gap: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 25px;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    margin-bottom: var(--spacing-xl);
    font-size: clamp(0.875rem, 0.5vw + 0.625rem, 1rem);
    font-size: var(--font-size-sm);
}
.badge-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
.badge-icon svg {
        stroke: rgb(21, 93, 252);
        stroke: var(--primary-color);
        width: clamp(1.25rem, 1vw + 0.875rem, 1.5rem);
        width: var(--font-size-xl);
    }
.hero-title {
    font-size: clamp(3rem, 3vw + 2rem, 4rem);
    font-size: var(--font-size-5xl);
    font-weight: bold;
    font-weight: var(--font-weight-bold);
    margin-bottom: 1.5rem;
    margin-bottom: var(--spacing-lg);
    line-height: 1.25;
    line-height: var(--line-height-tight);
}
.highlight {
    color: rgb(21, 93, 252);
    color: var(--primary-color);
}
.hero-description {
    font-size: clamp(1.125rem, 1vw + 0.75rem, 1.25rem);
    font-size: var(--font-size-lg);
    margin-bottom: 2rem;
    margin-bottom: var(--spacing-xl);
    opacity: 0.9;
}
.hero-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
    gap: var(--spacing-md);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.flip-container {
    display: inline-block;
    position: relative;
    min-width: 10ch;
    height: 1.2em;
    vertical-align: top;
    overflow: hidden;
    text-align: right;
}
.flip-words {
    display: inline-block;
    -webkit-animation: scroll-text 16s cubic-bezier(.74, .06, .4, .92) infinite;
            animation: scroll-text 16s cubic-bezier(.74, .06, .4, .92) infinite;
}
.flip-word {
    display: block;
}
@-webkit-keyframes scroll-text {
    0% {
        -webkit-transform: translateY(0%);
                transform: translateY(0%); /* trust */
    }
    16.66% {
        -webkit-transform: translateY(calc(-16.66%));
                transform: translateY(calc(-16.66%)); /* loyalty */
    }
    33.33% {
        -webkit-transform: translateY(calc(-33.33%));
                transform: translateY(calc(-33.33%)); /* respect */
    }
    50% {
        -webkit-transform: translateY(calc(-50%));
                transform: translateY(calc(-50%)); /* value */
    }
    66.66% {
        -webkit-transform: translateY(calc(-66.66%));
                transform: translateY(calc(-66.66%)); /* referrals */
    }
    83.33% {
        -webkit-transform: translateY(calc(-83.33%));
                transform: translateY(calc(-83.33%)); /* trust (at the end) */
    }
    100% {
        -webkit-transform: translateY(calc(-83.33%));
                transform: translateY(calc(-83.33%)); /* trust (at the end) */
    }
}
@keyframes scroll-text {
    0% {
        -webkit-transform: translateY(0%);
                transform: translateY(0%); /* trust */
    }
    16.66% {
        -webkit-transform: translateY(calc(-16.66%));
                transform: translateY(calc(-16.66%)); /* loyalty */
    }
    33.33% {
        -webkit-transform: translateY(calc(-33.33%));
                transform: translateY(calc(-33.33%)); /* respect */
    }
    50% {
        -webkit-transform: translateY(calc(-50%));
                transform: translateY(calc(-50%)); /* value */
    }
    66.66% {
        -webkit-transform: translateY(calc(-66.66%));
                transform: translateY(calc(-66.66%)); /* referrals */
    }
    83.33% {
        -webkit-transform: translateY(calc(-83.33%));
                transform: translateY(calc(-83.33%)); /* trust (at the end) */
    }
    100% {
        -webkit-transform: translateY(calc(-83.33%));
                transform: translateY(calc(-83.33%)); /* trust (at the end) */
    }
}
/* .flip-container {
    display: inline-block;
    position: relative;
    min-width: 12ch; !* Adjust to fit the longest word *!
    height: 1.2em;
    vertical-align: top;
    overflow: hidden;
    !* background: red; *!
}

 .flip-words {
    position: relative;
     display: inline-block;
    height: 100%;
     width: 100%;
     !* background: green; *!
}

.flip-word {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    opacity: 0;
    color: var(--primary-color);
    white-space: nowrap;
    display: flex;
    align-items: center;
    animation: show-hide-text var(--animation-duration) infinite var(--text-timing);
    animation-delay: calc(var(--order) * var(--delay-step));
}

.flip-word::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--wipe-color);
    z-index: 1;
    animation: block-wipe var(--animation-duration) infinite var(--wipe-timing);
    animation-delay: calc(var(--order) * var(--delay-step));
}

!* CSS Custom Properties for Text Animation *!
:root {
    --animation-duration: 12.5s;
    --wipe-color: var(--primary-color);
    --wipe-gradient: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    --text-translate: 20px;
    --delay-step: 2.5s;
    --wipe-timing: cubic-bezier(0.74, 0.06, 0.4, 0.92);
    --text-timing: cubic-bezier(0.74, 0.06, 0.4, 0.92);
    --text-scale: 0.95;
    --text-blur: 2px;
}

!* Assign order to each word *!
.flip-word:nth-child(1) { --order: 0; }
.flip-word:nth-child(2) { --order: 1; }
.flip-word:nth-child(3) { --order: 2; }
.flip-word:nth-child(4) { --order: 3; }
.flip-word:nth-child(5) { --order: 4; }

!*
  Each word's animation slot is 20% of the total 12.5s duration.
  - block-wipe: Wipes in (0% -> 10%), then wipes out (10% -> 20%)
  - show-hide-text: Appears after the block wipes in (at 10.1%), stays until next word starts wiping (18%)
*!
@keyframes show-hide-text {
    0%, 10%, 20%, 100% {
        opacity: 0;
    }
    10.1%, 18% {
        opacity: 1;
    }
}

!* @keyframes block-wipe {
    0% {
        width: 0;
        left: 0;
    }
    10% {
        width: 100%;
        left: 0;
    }
    20% {
        width: 0;
        left: 100%;
    }
    100% {
        width: 0;
        left: 100%;
    }
} *! */
.section-title {
    text-align: center;
    font-size: clamp(2.25rem, 2.5vw + 1.5rem, 3rem);
    font-size: var(--font-size-4xl);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-md);
    color: rgb(3, 12, 22);
    color: var(--text-primary);
}
.section-subtitle {
    text-align: center;
    font-size: clamp(1.125rem, 1vw + 0.75rem, 1.25rem);
    font-size: var(--font-size-lg);
    color: rgb(50, 60, 70);
    color: var(--text-secondary);
    margin-bottom: 3rem;
    margin-bottom: var(--spacing-2xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
/* Section */
.section {
    --_section-bg: var(--section-bg, transparent);
    background: transparent;
    background: var(--_section-bg);
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl);
}
.services {
    --section-bg: var(--background-primary);
}
.service {
    --card-padding: var(--spacing-xl);
}
.service:hover .card-icon,.service:focus .card-icon {
            background: rgb(185, 206, 246);
            background: var(--primary-200);
        }
.service:hover .card-icon svg,.service:focus .card-icon svg {
                scale: 1.1;
            }
.projects {
    --section-bg: var(--background-secondary);
}
.project {
    --badge-bg: var(--neutral-50);
    --badge-color: var(--text-secondary);
    --badge-border-color: var(--primary-200);
    --badge-hover-bg: var(--primary-100);
    --badge-hover-border-color: var(--primary-500);
    --card-padding: var(--spacing-xl);
}
.project:hover .card-header .badge,.project:focus .card-header .badge {
                --badge-bg: var(--primary-100);
                --badge-color: var(--primary-500);
                --badge-border-color: var(--primary-500);
                font-weight: bold;
                font-weight: var(--font-weight-bold);
            }
.project:hover .card-header img,.project:focus .card-header img {
                scale: 1.1;
            }
.project .card-header {
        display: grid;
        grid-template-areas: "image";
        overflow: clip;
    }
.project .card-header img {
            grid-area: image;
            aspect-ratio: 16/9;
            width: 100%;
            -o-object-fit: cover;
               object-fit: cover;
        }
.project .card-header .badge {
            grid-area: image;
            align-self: start;
            justify-self: start;
            place-self: start start;
            z-index: 1;
            margin: 1rem;
            margin: var(--spacing-md);
        }
.contact {
    --section-bg: var(--background-primary);
}
.contact ul {
        --marker-color: var(--primary-500);
        list-style: none;
        padding: 0;
        margin: 0;
    }
.contact li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 8px;
        line-height: 1.5;
    }
.contact li::before {
            content: '';
            -ms-flex-negative: 0;
                flex-shrink: 0; /* Prevent shrinking */
            width: 1rem;
            height: 1rem;
            background-color: var(--marker-color); /* This will work! */
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
                    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
            -webkit-mask-size: contain;
                    mask-size: contain;
            background-repeat: no-repeat;    }
.contact-grid {
    --min: 400px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
    grid-gap: 3rem;
    grid-gap: var(--spacing-2xl);
    gap: 3rem;
    gap: var(--spacing-2xl);
}
.contact-info h3 {
        font-size: clamp(1.25rem, 1vw + 0.875rem, 1.5rem);
        font-size: var(--font-size-xl);
    }
.contact-info h4 {
        font-size: clamp(1.125rem, 1vw + 0.75rem, 1.25rem);
        font-size: var(--font-size-lg);
    }
.contact-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
    gap: var(--spacing-md);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-md);
    color: rgb(3, 12, 22);
    color: var(--text-primary);
}
.contact-item:last-of-type {
        margin-bottom: 2rem;
        margin-bottom: var(--spacing-xl);
    }
.contact-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
.contact-icon svg {
        stroke: rgb(21, 93, 252);
        stroke: var(--primary-color);
        width: clamp(1.25rem, 1vw + 0.875rem, 1.5rem);
        width: var(--font-size-xl);
    }
.contact-form {
    --card-padding: var(--spacing-xl);
}
html {
    font-size: 18px;
    scroll-behavior: smooth;
    font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif, sans-serif;
    font-family: var(--font-family), sans-serif;
    line-height: 1.5;
    line-height: var(--line-height-base);
    color: rgb(3, 12, 22);
    color: var(--text-primary);
}
/*background-color: var(--background-primary);*/
body:has(.active) {
        overflow: hidden;
    }
body:is(body):has(.active):has(.active)::after {
            content: "";
            position: fixed;
            height: 100vh;
            width: 100vw;
            top:0;
            right:0;
            bottom:0;
            left:0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 999;
            z-index: var(--z-mobile-menu);
        }
:root {
    --header-bg: var(--background-primary);
    --logo-max-width: 150px;

    /* Nav */
    --nav-color: var(--text-primary);
    --nav-color-hover: var(--primary-color);
    --nav-toggle-color: var(--text-primary);

    /* Dark/ Light Mode */
    --theme-toggle-bg: none;
    --theme-toggle-hover: blue;
    --theme-toggle-border: red;
    --theme-toggle-color: red;

    /* Buttons */
    --button-bg: var(--primary-color);
    --button-color: var(--background-primary);
    --button-hover: var(--primary-hover);
    --button-focus: var(--primary-color);

    /* Tags */
    --tag-bg: var(--neutral-100);
    --tag-color: var(--text-primary);
    --tag-hover-bg: var(--primary-200);

    --color-error: #ef4444;
    --color-success: #10b981;
    --color-warning: #f59e0b;
}
.contact-form h3 {
        font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
        font-size: var(--font-size-2xl);
        margin-bottom: 1.5rem;
        margin-bottom: var(--spacing-lg);
        color: rgb(3, 12, 22);
        color: var(--text-primary);
    }
/* .form-group {
    margin-bottom: var(--spacing-md);

    input,
    select,
    textarea {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-base);
        transition: border-color var(--transition-fast);

        &:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);
        }
    }
} */
.form-note {
    font-size: clamp(0.875rem, 0.5vw + 0.625rem, 1rem);
    font-size: var(--font-size-sm);
    color: rgb(50, 60, 70);
    color: var(--text-secondary);
    margin-top: 0.5rem;
    margin-top: var(--spacing-sm);
}
/* Loading animations */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
                transform: translateY(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
                transform: translateY(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: rgb(21, 93, 252);
    background: var(--primary-color);
    border-radius: 4px;
}
::-csstools-invalid--webkit-scrollbar-thumb:hover {
        background: rgb(41, 80, 162);
        background: var(--primary-hover);
    }