/* ==========================================================================
   1. Variables
   ========================================================================== */

:root {
    --color-bg: #081221;
    --color-bg-deep: #050c18;
    --color-bg-soft: #0d192a;
    --color-bg-card: #0b1728;

    --color-text: #f4f7fa;
    --color-text-secondary: #b2bdcb;
    --color-text-muted: #7f8b9c;

    --color-accent: #00a9ed;
    --color-accent-bright: #27baf5;

    --color-border: rgba(164, 185, 211, 0.16);
    --color-border-strong: rgba(164, 185, 211, 0.28);

    --container-max: 1200px;

    --header-height: 76px;

    --radius-sm: 8px;
    --radius-md: 16px;

    --transition-fast: 160ms ease;

    --page-gutter: 24px;
}


/* ==========================================================================
   2. Reset
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 24px);
}

body,
h1,
h2,
h3,
p {
    margin: 0;
}

img,
svg {
    display: block;
    max-width: 100%;
}

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


/* ==========================================================================
   3. Base
   ========================================================================== */

html {
    background: var(--color-bg-deep);
}

body {
    min-width: 320px;
    min-height: 100vh;

    overflow-x: hidden;

    background: var(--color-bg);
    color: var(--color-text);

    font-family:
            Inter,
            ui-sans-serif,
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;

    font-size: 16px;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

section[id] {
    scroll-margin-top: calc(var(--header-height) + 24px);
}


/* ==========================================================================
   4. Accessibility
   ========================================================================== */

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1000;

    padding: 10px 16px;

    border-radius: var(--radius-sm);

    background: var(--color-text);
    color: var(--color-bg);

    font-weight: 700;

    transform: translateY(-150%);
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}


/* ==========================================================================
   5. Layout
   ========================================================================== */

.container {
    width: min(
            calc(100% - (var(--page-gutter) * 2)),
            var(--container-max)
    );

    margin-inline: auto;
}

.section {
    position: relative;

    padding-block: clamp(72px, 10vw, 144px);
}

.section-label,
.eyebrow {
    margin-bottom: 18px;

    color: var(--color-accent);

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.18em;
    line-height: 1.4;

    text-transform: uppercase;
}

.section-title {
    max-width: 760px;

    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 600;

    letter-spacing: -0.035em;
    line-height: 1.08;
}

.section-copy {
    display: grid;
    gap: 24px;

    color: var(--color-text-secondary);

    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.8;
}


/* ==========================================================================
   6. Header
   ========================================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    width: 100%;

    border-bottom: 1px solid var(--color-border);

    background: rgba(5, 12, 24, 0.9);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    min-height: var(--header-height);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    min-height: 44px;
}

.brand__mark {
    width: 22px;
    height: 3px;

    background: var(--color-accent);

    transform: skewX(-35deg);
}

.brand__name {
    font-size: 1rem;
    font-weight: 700;

    letter-spacing: 0.18em;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 3vw, 34px);

    color: var(--color-text-secondary);

    font-size: 0.875rem;
}

.site-nav a {
    display: inline-flex;
    align-items: center;

    min-height: 44px;

    transition: color var(--transition-fast);
}

.site-nav a:hover {
    color: var(--color-text);
}


/* ==========================================================================
   7. Hero
   ========================================================================== */

.hero {
    position: relative;

    display: grid;
    place-items: center;

    min-height: min(820px, 88svh);

    padding-top: calc(var(--header-height) + 44px);
    padding-bottom: 64px;

    overflow: hidden;

    background:
            radial-gradient(
                    circle at 50% 32%,
                    rgba(0, 169, 237, 0.07),
                    transparent 36%
            ),
            var(--color-bg);
}

.hero__grid {
    position: absolute;
    inset: 0;

    opacity: 0.28;

    background-image:
            linear-gradient(
                    rgba(132, 157, 187, 0.08) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(132, 157, 187, 0.08) 1px,
                    transparent 1px
            );

    background-size: 32px 32px;

    mask-image:
            linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, 0.85),
                    rgba(0, 0, 0, 0.25) 68%,
                    transparent 100%
            );

    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.hero__brand {
    position: relative;

    width: min(480px, 82vw);
    height: clamp(70px, 12vw, 130px);

    margin-bottom: clamp(24px, 5vw, 52px);
}

.hero__arc {
    position: absolute;
    left: 50%;

    width: 88%;
    height: 54%;

    border-top: 3px solid;

    border-radius: 50% 50% 0 0;

    transform:
            translateX(-50%)
            rotate(-4deg)
            skewX(-16deg);

    transform-origin: center;
}

.hero__arc--silver {
    top: 0;

    width: 84%;

    border-color: rgba(229, 236, 243, 0.78);

    opacity: 0.7;
}

.hero__arc--white {
    top: 26%;

    width: 92%;

    border-color: rgba(255, 255, 255, 0.92);
}

.hero__arc--blue {
    top: 52%;

    width: 76%;

    border-color: var(--color-accent);
    border-width: 5px;

    transform:
            translateX(-42%)
            rotate(-5deg)
            skewX(-18deg);
}

.hero .eyebrow {
    margin-bottom: 20px;
}

.hero__title {
    font-size: clamp(3.8rem, 12vw, 9rem);
    font-weight: 700;

    letter-spacing: 0.06em;
    line-height: 0.9;
}

.hero__tagline {
    margin-top: clamp(22px, 4vw, 36px);

    color: var(--color-text-secondary);

    font-size: clamp(0.75rem, 1.6vw, 1.125rem);
    font-weight: 400;

    letter-spacing: clamp(0.18em, 0.7vw, 0.35em);

    text-transform: uppercase;
}

.hero__lead {
    max-width: 640px;

    margin-top: clamp(28px, 5vw, 44px);

    color: var(--color-text-secondary);

    font-size: clamp(1.1rem, 2.3vw, 1.5rem);
    font-weight: 400;

    line-height: 1.55;
}


/* ==========================================================================
   8. About
   ========================================================================== */

.section--about {
    border-top: 1px solid var(--color-border);

    background: var(--color-bg-soft);
}

.section-grid {
    display: grid;
    gap: clamp(48px, 8vw, 120px);
}


/* ==========================================================================
   9. Services
   ========================================================================== */

.section--services {
    background: var(--color-bg);
}

.section-heading {
    margin-bottom: clamp(42px, 7vw, 80px);
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;

    gap: 18px;
}

.service-card {
    position: relative;

    min-height: 300px;

    padding: clamp(28px, 4vw, 42px);

    border: 1px solid var(--color-border);

    background:
            linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.025),
                    transparent 55%
            ),
            var(--color-bg-card);

    transition:
            border-color var(--transition-fast),
            transform var(--transition-fast);
}

.service-card:hover {
    border-color: var(--color-border-strong);

    transform: translateY(-3px);
}

.service-card::before {
    content: "";

    position: absolute;
    top: -1px;
    left: -1px;

    width: 52px;
    height: 2px;

    background: var(--color-accent);
}

.service-card__number {
    display: block;

    margin-bottom: clamp(54px, 8vw, 90px);

    color: var(--color-accent);

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.14em;
}

.service-card h3 {
    margin-bottom: 18px;

    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;

    letter-spacing: -0.02em;
}

.service-card p {
    color: var(--color-text-secondary);

    line-height: 1.75;
}


/* ==========================================================================
   10. Approach
   ========================================================================== */

.section--approach {
    border-block: 1px solid var(--color-border);

    background: var(--color-bg-deep);
}

.approach {
    position: relative;

    display: grid;
    gap: clamp(44px, 8vw, 92px);

    padding-block: clamp(24px, 5vw, 54px);

    background:
            radial-gradient(
                    circle at 100% 0,
                    rgba(0, 169, 237, 0.07),
                    transparent 36%
            );
}

.approach__accent {
    position: absolute;
    top: 0;
    left: 0;

    width: clamp(90px, 16vw, 190px);
    height: 3px;

    background: var(--color-accent);
}

.approach__content {
    padding-top: clamp(28px, 4vw, 46px);
}

.approach__content > p:last-child {
    max-width: 740px;

    margin-top: 30px;

    color: var(--color-text-secondary);

    font-size: clamp(1rem, 1.6vw, 1.125rem);

    line-height: 1.8;
}

.approach__values {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.approach__values span {
    display: inline-flex;
    align-items: center;

    min-height: 44px;

    padding: 8px 18px;

    border: 1px solid var(--color-border);

    color: var(--color-text-secondary);

    font-size: 0.875rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ==========================================================================
   11. Contact
   ========================================================================== */

.section--contact {
    background: var(--color-bg);
}

.contact {
    display: grid;
    gap: clamp(48px, 8vw, 120px);
}

.contact__details {
    color: var(--color-text-secondary);
}

.contact__email {
    display: inline-block;

    margin-block: 18px 38px;
    padding-bottom: 4px;

    border-bottom: 1px solid rgba(0, 169, 237, 0.5);

    color: var(--color-text);

    font-size: clamp(1.35rem, 3vw, 2.25rem);
    font-weight: 500;

    letter-spacing: -0.025em;

    transition:
            color var(--transition-fast),
            border-color var(--transition-fast);
}

.contact__email:hover {
    border-color: var(--color-accent-bright);

    color: var(--color-accent);
}

.contact__location {
    color: var(--color-text-muted);

    font-size: 0.925rem;

    line-height: 1.8;
}


/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
    border-top: 1px solid var(--color-border);

    background: var(--color-bg-deep);
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 28px;

    padding-block: 36px;

    color: var(--color-text-muted);

    font-size: 0.8rem;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.site-footer__brand span {
    color: var(--color-text);

    font-weight: 700;

    letter-spacing: 0.14em;
}

.site-footer__brand small {
    color: var(--color-text-muted);

    font-size: 0.7rem;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


/* ==========================================================================
   13. Tablet
   ========================================================================== */

@media (min-width: 768px) {
    :root {
        --page-gutter: 40px;
    }

    .section-grid,
    .contact {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        align-items: start;
    }

    .approach {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        align-items: end;
    }

    .site-footer__inner {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}


/* ==========================================================================
   14. Tablet services layout
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1099px) {
    .service-card {
        display: grid;
        grid-template-columns:
            80px
            minmax(0, 240px)
            minmax(0, 1fr);

        align-items: center;

        gap: 28px;

        min-height: auto;

        padding-block: 36px;
    }

    .service-card__number {
        margin: 0;
    }

    .service-card h3 {
        margin: 0;
    }

    .service-card p {
        margin: 0;
    }
}


/* ==========================================================================
   15. Desktop
   ========================================================================== */

@media (min-width: 1100px) {

    :root {
        --page-gutter: 56px;
    }

    .hero__title {
        letter-spacing: 0.08em;
    }

    .services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .service-card {
        min-height: 340px;
    }
}


/* ==========================================================================
   16. Mobile
   ========================================================================== */

@media (max-width: 767px) {
    :root {
        --header-height: 108px;
    }

    .site-header__inner {
        display: grid;
        grid-template-columns: 1fr;

        gap: 4px;

        min-height: var(--header-height);

        padding-block: 12px 8px;
    }

    .brand {
        justify-self: start;

        min-height: 40px;
    }

    .brand__mark {
        width: 17px;
    }

    .brand__name {
        font-size: 0.875rem;
    }

    .site-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));

        width: 100%;

        gap: 0;

        font-size: 0.75rem;
    }

    .site-nav a {
        justify-content: center;

        min-width: 0;
        min-height: 40px;

        white-space: nowrap;
    }

    .hero {
        min-height: 86svh;

        padding-top: calc(var(--header-height) + 32px);
        padding-bottom: 52px;
    }

    .hero__title {
        letter-spacing: 0.035em;
    }

    .hero__tagline {
        max-width: 310px;

        line-height: 1.7;
    }

    .service-card {
        min-height: auto;
    }

    .service-card__number {
        margin-bottom: 48px;
    }

    .approach {
        gap: 40px;
    }
}


/* ==========================================================================
   17. Small mobile
   ========================================================================== */

@media (max-width: 420px) {
    .site-nav {
        font-size: 0.72rem;
    }

    .hero__title {
        font-size: clamp(3.1rem, 17vw, 4.5rem);
    }

    .hero__brand {
        width: 88vw;
    }

    .approach__values span {
        padding-inline: 14px;

        font-size: 0.78rem;
    }
}


/* ==========================================================================
   18. Very small mobile
   ========================================================================== */

@media (max-width: 360px) {
    .site-nav {
        font-size: 0.68rem;
    }

    .brand__name {
        font-size: 0.82rem;
    }

    .hero__lead {
        font-size: 1rem;
    }
}


/* ==========================================================================
   19. Reduced motion
   ========================================================================== */

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

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