/*

 * Copyright (c) 2026 Nikan Esmailpour Motlagh, trading as PCB-Wizard. All rights reserved.
 *
 * Author: Nikan Esmailpour Motlagh
 *
 * Unauthorized copying, modification, distribution, or use of this file,
 * via any medium, is strictly prohibited without prior written permission.

 ▄▄▄▄▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄▄                       ▄         ▄   ▄▄▄▄▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄▄▄  
▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░▌                     ▐░▌       ▐░▌ ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░▌ 
▐░█▀▀▀▀▀▀▀█░▌ ▐░█▀▀▀▀▀▀▀▀▀  ▐░█▀▀▀▀▀▀▀█░▌                    ▐░▌       ▐░▌  ▀▀▀▀█░█▀▀▀▀   ▀▀▀▀▀▀▀▀▀█░▌ ▐░█▀▀▀▀▀▀▀█░▌ ▐░█▀▀▀▀▀▀▀█░▌ ▐░█▀▀▀▀▀▀▀█░▌
▐░▌       ▐░▌ ▐░▌           ▐░▌       ▐░▌                    ▐░▌       ▐░▌      ▐░▌                ▐░▌ ▐░▌       ▐░▌ ▐░▌       ▐░▌ ▐░▌       ▐░▌
▐░█▄▄▄▄▄▄▄█░▌ ▐░▌           ▐░█▄▄▄▄▄▄▄█░▌    ▄▄▄▄▄▄▄▄▄▄▄     ▐░▌   ▄   ▐░▌      ▐░▌       ▄▄▄▄▄▄▄▄▄█░▌ ▐░█▄▄▄▄▄▄▄█░▌ ▐░█▄▄▄▄▄▄▄█░▌ ▐░▌       ▐░▌
▐░░░░░░░░░░░▌ ▐░▌           ▐░░░░░░░░░░▌    ▐░░░░░░░░░░░▌    ▐░▌  ▐░▌  ▐░▌      ▐░▌      ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░▌       ▐░▌
▐░█▀▀▀▀▀▀▀▀▀  ▐░▌           ▐░█▀▀▀▀▀▀▀█░▌    ▀▀▀▀▀▀▀▀▀▀▀     ▐░▌ ▐░█░▌ ▐░▌      ▐░▌      ▐░█▀▀▀▀▀▀▀▀▀  ▐░█▀▀▀▀▀▀▀█░▌ ▐░█▀▀▀▀█░█▀▀  ▐░▌       ▐░▌
▐░▌           ▐░▌           ▐░▌       ▐░▌                    ▐░▌▐░▌ ▐░▌▐░▌      ▐░▌      ▐░▌           ▐░▌       ▐░▌ ▐░▌     ▐░▌   ▐░▌       ▐░▌
▐░▌           ▐░█▄▄▄▄▄▄▄▄▄  ▐░█▄▄▄▄▄▄▄█░▌                    ▐░▌░▌   ▐░▐░▌  ▄▄▄▄█░█▄▄▄▄  ▐░█▄▄▄▄▄▄▄▄▄  ▐░▌       ▐░▌ ▐░▌      ▐░▌  ▐░█▄▄▄▄▄▄▄█░▌
▐░▌           ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░▌                     ▐░░▌     ▐░░▌ ▐░░░░░░░░░░░▌ ▐░░░░░░░░░░░▌ ▐░▌       ▐░▌ ▐░▌       ▐░▌ ▐░░░░░░░░░░▌ 
 ▀             ▀▀▀▀▀▀▀▀▀▀▀   ▀▀▀▀▀▀▀▀▀▀                       ▀▀       ▀▀   ▀▀▀▀▀▀▀▀▀▀▀   ▀▀▀▀▀▀▀▀▀▀▀   ▀         ▀   ▀         ▀   ▀▀▀▀▀▀▀▀▀▀  

*/

/**************************************************************************
* CSS 01. ROOT DESIGN TOKENS
* Global layout, color, surface, shadow, motion, spacing, radius, and icon tokens.
**************************************************************************/

:root {
    /* Layout tokens. */
    --page-container: 1600px;
    --min-viewport: 320px;

    /* Core text color tokens. */
    --white: #ffffff;
    --text: #111827;
    --text-soft: #374151;
    --muted: #6b7280;
    --muted-strong: #4b5563;

    /* Fluid token, from 360px to 1200px token update inside media querie */
    --outer-padding: clamp(20px, calc((60px + 100vw) / 21), 60px);

    /* Fluid tokens, from 360px viewport to 1600px page container cap. */
    --space-s: clamp(6px, calc((168px + 5vw) / 31), 8px);
    --space-m: clamp(8px, calc((212px + 10vw) / 31), 12px);
    --space-l: clamp(12px, calc((336px + 10vw) / 31), 16px);
    --space-xl: clamp(16px, calc((460px + 10vw) / 31), 20px);
    --space-2xl: clamp(24px, calc((690px + 15vw) / 31), 30px);
    --space-3xl: clamp(40px, calc((1168px + 20vw) / 31), 48px);

    --radius-s: clamp(8px, calc((212px + 10vw) / 31), 12px);
    --radius-m: clamp(12px, calc((318px + 15vw) / 31), 18px);
    --radius-l: clamp(20px, calc((548px + 20vw) / 31), 28px);

    /* Spacing tokens. */
    --space-xs: 2px;
    --radius-pill: 999px;

    /* Motion tokens. */
    --transition-fast: 0.22s ease;
    --transition-medium: 0.33s ease;
    --transition-slow: 0.66s ease;

    /* Icon size tokens. */
    --icon-s: 24px;

    /* Alpha value tokens. */
    --a-0: 0%;
    --a-xs: 4%;
    --a-s: 8%;
    --a-m: 12%;
    --a-l: 20%;
    --a-xl: 40%;
    --a-2xl: 60%;
    --a-3xl: 90%;
    --a-solid: 100%;

    /* section divider size */
    --section-divider: clamp(60px, calc((1320px + 150vw) / 31), 120px);
    /* section divider color */
    --purple-rgb: 124, 58, 237;

}

/* Media element defaults. */
img,
video {
    display: block;
    max-width: 100%;
    user-select: none;
}

/* Inline icon element defaults. */
ui-icon {
    display: inline-block;
    user-select: none;
}

/* Global box-model reset. */
*,
*::before,
*::after {
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/**************************************************************************
* CSS 03. TYPOGRAPHY UTILITIES & FONT
* Text scales, shared text colors, and text wrapping helpers.
**************************************************************************/

@font-face {
    font-family: "nunito";
    src: url("/assets/fonts/nunito.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
    /* use OS-installed font, then swap, when loaded. */
}

/* Fluid text scales, from 360px viewport to 1600px page container cap. */
h1 {
    font-size: clamp(2.4rem, calc((51.9rem + 100vw) / 31), 4.9rem);
    font-weight: 800;
    line-height: 1.04;
    color: var(--text);
}

h2 {
    font-size: clamp(1.9rem, calc((52.6rem + 28vw) / 31), 2.6rem);
    font-weight: 700;
    line-height: 1.04;
    color: var(--text);
}

h3 {
  font-size: clamp(1.2rem, calc((32.7rem + 20vw) / 31), 1.7rem);
  font-weight: 700;
    line-height: 1.04;
    color: var(--text);
}

h4 {
    font-size: clamp(1.1rem, calc((32.3rem + 8vw) / 31), 1.3rem);
    font-weight: 600;
    line-height: 1.12;
    color: var(--text);
}

.text-lead {
    font-size: clamp(1.2rem, calc((35.4rem + 8vw) / 31), 1.4rem);
    line-height: 1.2;
    color: var(--text-soft);
}

.text-body {
    font-size: clamp(0.9rem, calc((27rem + 4vw) / 31), 1rem);
    line-height: 1.4;
    color: var(--text-soft);
}

ul {
    font-size: clamp(0.7rem, calc((20.8rem + 4vw) / 31), 0.8rem);
    line-height: 1.6;
    color: var(--text-muted);
}

/**************************************************************************
* CSS 04. GLOBAL STACK SPACING
* Default vertical rhythm for commonly stacked text, tags, grids, and actions.
**************************************************************************/

/* Default text stack spacing. */
h4:not(:last-child) {
    margin-bottom: var(--space-s);
}

:is(p.text-body, p.text-lead):not(:last-child) {
    margin-bottom: var(--space-l);
}

/**************************************************************************
* CSS 02. BASE RESET AND GLOBAL ELEMENTS
* Browser reset, page background, global text behavior, media defaults, and focus states.
**************************************************************************/

html {
    max-width: 100%;
    scroll-behavior: smooth;
}

body {
    min-width: var(--min-viewport);
    font-family: "Nunito", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 480;
    line-height: 1.08;
    color: var(--text);
}

/**************************************************************************
* CSS 18. RESPONSIVE LAYOUT RULES
* Breakpoint-specific layout adjustments and grid collapses.
**************************************************************************/


/* Container padding update */
@media (min-width: 1200px) {
    :root {
        --outer-padding: clamp(60px, calc(15vw - 120px), 120px);
    }
}

/**************************************************************************
* CSS 09. SECTION DIVIDER
* Add a fluid purple divider between each section with a glow
**************************************************************************/

/* Section fluid spacing shell, from 360px viewport to 1600px page container cap. */
main>section {
    position: relative;
    padding-block: var(--section-divider);
}

/* Section divider line. */
main>section+section::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    width: min(calc((100% - var(--outer-padding)) * 0.9), calc(var(--page-container) * 0.9));
    transform: translateX(-50%);
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(var(--purple-rgb), var(--a-m)) 8%,
            rgba(var(--purple-rgb), var(--a-l)) 24%,
            rgba(var(--purple-rgb), var(--a-xl)) 50%,
            rgba(var(--purple-rgb), var(--a-l)) 76%,
            rgba(var(--purple-rgb), var(--a-m)) 92%,
            transparent 100%);
    box-shadow:
        0 0 12px rgba(var(--purple-rgb), var(--a-m)),
        0 0 26px rgba(var(--purple-rgb), var(--a-s));
}



/* Section divider ambient glow. */
main>section+section::after {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--section-divider) * -0.3);
    height: calc(var(--section-divider) * 0.6);
    inset-inline-start: 50%;
    width: min(calc((100% - var(--outer-padding)) * 0.8), calc(var(--page-container) * 0.8));
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
            rgba(var(--purple-rgb), var(--a-l)) 0%,
            /* center */
            rgba(var(--purple-rgb), var(--a-m)) 20%,
            rgba(var(--purple-rgb), var(--a-s)) 40%,
            rgba(var(--purple-rgb), var(--a-xs)) 80%,
            transparent 100%);
    /* edge */
    filter: blur(calc(var(--section-divider) * 0.1));
    opacity: 0.48;
}


/* Alpha value tokens.
    --section-divider: clamp(60px, calc((1320px + 150vw) / 31), 120px);
    --a-0: 0%;
    --a-xs: 4%;
    --a-s: 8%;
    --a-m: 12%;
    --a-l: 20%;
    --a-xl: 40%;
    --a-2xl: 60%;
    --a-3xl: 90%;
    --a-solid: 100%; */