/* Landing Pages Stylesheet - Mobile First */

/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
    font-family  : 'Stack Sans Notch';
    src          : url('../fonts/stack-sans-notch-v5-latin-regular.woff2') format('woff2');
    font-weight  : 400;
    font-style   : normal;
    font-display : swap;
}

@font-face {
    font-family  : 'Stack Sans Text';
    src          : url('../fonts/stack-sans-text-v1-latin-regular.woff2') format('woff2');
    font-weight  : 400;
    font-style   : normal;
    font-display : swap;
}

/* ==========================================================================
   Variables (Mobile Base)
   ========================================================================== */

:root {
    --microsblack  : #1C1B29;
    --microslight  : #F7F7E9;
    --microsblue   : #28AEF9;
    --card-bg      : rgba(40, 174, 249, 0.08);

    --font-heading : 'Stack Sans Notch', sans-serif;
    --font-body    : 'Stack Sans Text', sans-serif;

    --max-width    : 1280px;
    --padding-x    : 20px;
    --section-gap  : 40px;
}

/* ==========================================================================
   Base (Mobile)
   ========================================================================== */

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

html {
    font-size               : 16px;
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
}

body {
    font-family      : var(--font-body);
    font-size        : 17px;
    line-height      : 1.5;
    color            : var(--microslight);
    background-color : var(--microsblack);
}

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

a {
    color           : var(--microslight);
    text-decoration : underline;
}

a:hover {
    color : var(--microsblue);
}

/* ==========================================================================
   Typography (Mobile)
   ========================================================================== */

.h1 {
    font-family : var(--font-heading);
    font-size   : 32px;
    line-height : 0.9;
    font-weight : 400;
}

.h2 {
    font-family : var(--font-heading);
    font-size   : 28px;
    line-height : 1.1;
    font-weight : 400;
}

.h3 {
    font-family : var(--font-heading);
    font-size   : 24px;
    line-height : 1.2;
    font-weight : 400;
}

.text-blue {
    color : var(--microsblue);
}

.text-light {
    color : var(--microslight);
}

.text-small {
    font-size   : 13px;
    line-height : 1.5;
}

/* ==========================================================================
   Layout (Mobile)
   ========================================================================== */

.lp-wrapper {
    width      : 100%;
    min-height : 100vh;
}

.lp-container {
    width     : 100%;
    max-width : var(--max-width);
    margin    : 0 auto;
    padding   : 0 var(--padding-x);
}

.lp-main {
    display        : flex;
    flex-direction : column;
    gap            : var(--section-gap);
    padding-top    : 50px;
    padding-bottom : 50px;
}

/* ==========================================================================
   Header (Mobile)
   ========================================================================== */

.lp-header {
    padding-bottom : 30px;
}

.lp-logo {
    width      : 180px;
    height     : 50px;
    object-fit : contain;
}

/* ==========================================================================
   Hero (Mobile)
   ========================================================================== */

.lp-hero {
    margin-bottom : 0;
}

.lp-hero__title {
    font-family : var(--font-heading);
    font-size   : 32px;
    line-height : 0.9;
    color       : var(--microslight);
}

.lp-hero__title .text-blue {
    color : var(--microsblue);
}

/* ==========================================================================
   Intro (Mobile)
   ========================================================================== */

.lp-intro {
    display        : flex;
    flex-direction : column;
    gap            : 10px;
}

.lp-intro__title {
    font-family : var(--font-heading);
    font-size   : 28px;
    line-height : 1.1;
    max-width   : 511px;
}

.lp-intro__subtitle {
    font-size : 19px;
}

/* ==========================================================================
   Video (Mobile)
   ========================================================================== */

.lp-video {
    position       : relative;
    width          : 100%;
    padding-bottom : 56.25%; /* 16:9 aspect ratio */
    background     : var(--microsblack);
    margin-bottom  : 64px; /* Extra spacing after video per Figma */
}

.lp-video iframe {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    border   : 0;
}

/* ==========================================================================
   Content Sections (Mobile)
   ========================================================================== */

.lp-section {
    display        : flex;
    flex-direction : column;
    gap            : 30px;
    align-items    : center;
}

.lp-section--reverse {
    flex-direction : column;
}

.lp-section__content {
    flex           : 1;
    max-width      : 100%;
    display        : flex;
    flex-direction : column;
}

.lp-section__title {
    font-family   : var(--font-heading);
    font-size     : 28px;
    line-height   : 1.1;
    color         : var(--microsblue);
    margin-bottom : 24px;
}

.lp-section__text {
    font-size      : 19px;
    line-height    : 1.5;
    padding-bottom : 20px;
}

.lp-section__media {
    flex            : 1;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.lp-section__image {
    max-width : 100%;
    height    : auto;
}

/* Fusie 2 image with gradient overlay */
.lp-section__media--gradient {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 100%;
    background      : linear-gradient(90deg, rgba(40, 174, 249, 0.2) 0%, rgba(40, 174, 249, 0) 80.769%),
    linear-gradient(90deg, rgba(40, 174, 249, 0.08) 0%, rgba(40, 174, 249, 0.08) 100%);
}

.lp-section__media--gradient img {
    max-height : 292px;
    width      : auto;
}

/* Icon section */
.lp-section__icon {
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.lp-section__icon img {
    width  : 216px;
    height : 171px;
}

/* ==========================================================================
   Cards (Mobile)
   ========================================================================== */

.lp-cards {
    display        : flex;
    flex-direction : column;
    gap            : 16px;
}

.lp-card {
    flex            : 1;
    background      : var(--card-bg);
    padding         : 40px 30px 40px 24px;
    display         : flex;
    flex-direction  : column;
    justify-content : space-between;
}

.lp-card__title {
    font-family   : var(--font-heading);
    font-size     : 24px;
    line-height   : 1.2;
    color         : var(--microsblue);
    margin-bottom : 28px;
}

.lp-card__text {
    font-size   : 19px;
    line-height : 1.5;
}

/* ==========================================================================
   Footer (Mobile)
   ========================================================================== */

.lp-footer {
    padding : 64px 0 60px;
}

.lp-footer__content {
    display        : flex;
    flex-direction : column;
    align-items    : flex-start;
    gap            : 30px;
}

.lp-footer__left {
    display        : flex;
    flex-direction : column;
    align-items    : flex-start;
    gap            : 24px;
}

.lp-footer__logo {
    width      : 50px;
    height     : 50px;
    object-fit : contain;
}

.lp-footer__info {
    font-size   : 13px;
    line-height : 1.5;
}

.lp-footer__info strong {
    font-weight : 700;
}

.lp-footer__links {
    display   : flex;
    gap       : 24px;
    font-size : 13px;
}

.lp-footer__links a {
    color           : var(--microslight);
    text-decoration : underline;
}

/* ==========================================================================
   Responsive - Small Tablet (min-width: 481px)
   ========================================================================== */

@media (min-width : 481px) {
    .lp-hero__title,
    .h1 {
        font-size : 40px;
    }

    .lp-logo {
        width : 220px;
    }
}

/* ==========================================================================
   Responsive - Tablet (min-width: 768px)
   ========================================================================== */

@media (min-width : 768px) {
    :root {
        --padding-x   : 30px;
        --section-gap : 48px;
    }

    body {
        font-size : 19px;
    }

    .lp-main {
        padding-bottom : 100px;
    }

    .lp-hero__title,
    .h1 {
        font-size : 56px;
    }

    .h2,
    .lp-section__title,
    .lp-intro__title {
        font-size : 36px;
    }

    .lp-footer__content {
        flex-direction  : row;
        justify-content : space-between;
        align-items     : flex-end;
        gap             : 0;
    }

    .lp-footer__left {
        flex-direction : row;
        align-items    : flex-end;
    }
}

/* ==========================================================================
   Responsive - Desktop (min-width: 1024px)
   ========================================================================== */

@media (min-width : 1024px) {
    :root {
        --padding-x   : 40px;
        --section-gap : 64px;
    }

    .lp-hero__title,
    .h1 {
        font-size : 80px;
    }

    .lp-section {
        flex-direction : row;
        gap            : 50px;
    }

    .lp-section--reverse {
        flex-direction : row-reverse;
    }

    .lp-section__content {
        max-width : 640px;
    }

    .lp-cards {
        flex-direction : row;
        gap            : 10px;
    }
}