/* Defines index typography variables. */
:root {
    --FontSizeMicro: 11px;
    --FontSizeSmall: 13px;
    --FontSizeBody: 15px;
    --FontSizeMedium: 23px;
    --FontSizeSubheading: 17px;
    --FontSizeTitleSmall: 25px;
    --FontSizeTitleLarge: 35px;
    --FontSizeHeroDesktop: 55px;
}

/* Structures the hero section and sets perspective. */
.HeroSection {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 80px 20px 50px;
    position: relative;
    text-align: center;
}

/* Constrains hero text elements. */
.HeroContainer {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 900px;
    position: relative;
    z-index: 10;
}

/* Styles the dominant hero title. */
.HeroHeading {
    font-size: var(--FontSizeHeroDesktop);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.10;
    margin-bottom: 20px;
}

/* Styles the explanatory hero subtitle. */
.HeroSubtitle {
    color: var(--ColorTextMuted);
    font-size: var(--FontSizeBody);
    line-height: 1.60;
    margin-bottom: 30px;
    max-width: 600px;
}

/* Wraps the hero call to action button. */
.HeroCtaWrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

/* Styles the primary call-to-action button. */
.PrimaryCtaButton {
    align-items: center;
    background: linear-gradient(180deg, #ffffff 0%, #dddddd 100%);
    border: 1px solid #ffffff;
    border-radius: var(--RadiusPill);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.15);
    color: var(--ColorBackground);
    font-size: var(--FontSizeBody);
    font-weight: 600;
    padding: 10px 30px;
    text-decoration: none;
    transition: all var(--TransitionFast);
}

/* Elevates the primary call-to-action button on hover. */
.PrimaryCtaButton:hover {
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.25);
    transform: translateY(-3px);
}

/* Styles the features capabilities section. */
.FeaturesSection {
    margin: 0 auto;
    max-width: 1200px;
    padding: 50px 20px 100px;
    position: relative;
}

/* Lays out the 3 feature cards in a clean row. */
.FeaturesGrid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr 1fr;
}

/* Formats individual feature highlight card. */
.FeatureCard {
    background-color: var(--ColorSurfaceCard);
    border: 1px solid var(--ColorBorderSubtle);
    border-radius: var(--RadiusCard);
    overflow: hidden;
    padding: 30px 25px;
    position: relative;
    transition: transform var(--TransitionNormal), border-color var(--TransitionNormal);
}

/* Elevates feature card on hover. */
.FeatureCard:hover {
    border-color: var(--ColorBorderHover);
    transform: translateY(-5px);
}

/* Positions feature content above hover beam layer. */
.FeatureIcon,
.FeatureHeading,
.FeatureText {
    position: relative;
    z-index: 3;
}

/* Styles feature numerical indicator. */
.FeatureIcon {
    color: #059bfa;
    font-family: var(--FontMono);
    font-size: var(--FontSizeBody);
    font-weight: 700;
    margin-bottom: 15px;
}

/* Formats feature title. */
.FeatureHeading {
    font-size: var(--FontSizeMedium);
    font-weight: 700;
    line-height: 1.20;
    margin-bottom: 10px;
}

/* Formats feature body copy. */
.FeatureText {
    color: var(--ColorTextMuted);
    font-size: var(--FontSizeSmall);
    line-height: 1.60;
}

/* Styles the products ecosystem section. */
.ProductsSection {
    margin: 0 auto;
    max-width: 1200px;
    padding: 100px 20px 50px;
    position: relative;
}

/* Aligns section introductory header elements. */
.SectionHeader {
    margin-bottom: 50px;
    text-align: center;
}

/* Styles the section header badge. */
.SectionBadge {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ColorBorderSubtle);
    border-radius: var(--RadiusPill);
    color: var(--ColorTextMuted);
    display: inline-flex;
    font-size: var(--FontSizeMicro);
    font-weight: 600;
    gap: 10px;
    justify-content: center;
    letter-spacing: 0.05em;
    line-height: 1.0;
    margin-bottom: 10px;
    padding: 5px 15px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Balances horizontal padding for badges containing an indicator dot. */
.SectionBadge:has(.BlogLivePulseDot) {
    padding-left: 10px;
}

/* Formats section main titles. */
.SectionTitle {
    font-size: var(--FontSizeTitleLarge);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.20;
    margin-bottom: 10px;
}

/* Formats section explanatory subtitles. */
.SectionSubtitle {
    color: var(--ColorTextMuted);
    font-size: var(--FontSizeBody);
    margin: 0 auto;
    max-width: 500px;
}

/* Lays out the product cards in a dual column grid. */
.ProductsGrid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr;
}

/* Formats the common product card base. */
.ProductCard {
    background-color: var(--ColorSurfaceCard);
    border: 1px solid var(--ColorBorderSubtle);
    border-radius: var(--RadiusCard);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: transform var(--TransitionNormal), border-color var(--TransitionNormal);
}

/* Enhances the active flagship card appearance. */
.ActiveCard {
    border-color: var(--ColorBorderHover);
}

/* Lifts product card upon mouse hover. */
.ProductCard:hover {
    border-color: #059bfa;
    transform: translateY(-5px);
}

/* Positions status badges on the card header. */
.CardHeaderRow {
    padding: 15px 20px 0;
}

/* Formats live status badge indicator. */
.LiveBadge {
    background-color: rgba(15, 195, 95, 0.10);
    border: 1px solid var(--ColorGreenLive);
    border-radius: var(--RadiusPill);
    color: var(--ColorGreenLive);
    display: inline-block;
    font-size: var(--FontSizeMicro);
    font-weight: 600;
    padding: 0 10px;
}

/* Formats card image thumbnail wrapper. */
.CardThumbnailWrapper {
    background-color: #000000;
    border: 1px solid var(--ColorBorderSubtle);
    border-radius: var(--RadiusMedium);
    line-height: 0;
    margin: 15px 20px 0;
    overflow: hidden;
}

/* Scales thumbnail image slightly for polish. */
.CardThumbnail {
    display: block;
    height: auto;
    transition: transform var(--TransitionNormal);
    width: 100%;
}

/* Animates card image on card hover. */
.ProductCard:hover .CardThumbnail {
    transform: scale(1.05);
}

/* Holds card textual content. */
.CardContent {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 25px 20px;
}

/* Formats product card title. */
.CardTitle {
    font-size: var(--FontSizeMedium);
    font-weight: 700;
    margin-bottom: 10px;
}

/* Formats product description. */
.CardDescription {
    color: var(--ColorTextMuted);
    font-size: var(--FontSizeSmall);
    line-height: 1.50;
    margin-bottom: 20px;
}

/* Displays tags list. */
.CardTagList {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 20px;
}

/* Formats individual product tags. */
.TagPill {
    background-color: var(--ColorSurfaceElevated);
    border: 1px solid var(--ColorBorderSubtle);
    border-radius: var(--RadiusSmall);
    color: var(--ColorTextMuted);
    font-size: var(--FontSizeMicro);
    padding: 0 5px;
}

/* Aligns the card launch action button. */
.CardActionRow {
    margin-top: auto;
}

/* Styles the card launch link. */
.CardLaunchButton {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ColorBorderSubtle);
    border-radius: var(--RadiusMedium);
    color: var(--ColorTextLight);
    display: inline-flex;
    font-size: var(--FontSizeSmall);
    font-weight: 600;
    padding: 10px 20px;
    text-decoration: none;
    transition: all var(--TransitionFast);
}

/* Highlights the launch link on hover. */
.CardLaunchButton:hover {
    background-color: var(--ColorTextLight);
    color: var(--ColorBackground);
}

/* Styles the upcoming product teaser card. */
.ComingCard {
    background: repeating-linear-gradient(0deg, #090909 0px, #090909 10px, #050505 10px, #050505 20px);
    border-style: dashed;
    justify-content: center;
}

/* Centers empty placeholder content. */
.EmptyCenterContent {
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    text-align: center;
}

/* Formats the placeholder icon box. */
.PlaceholderIconBox {
    align-items: center;
    background-color: var(--ColorSurfaceElevated);
    border: 1px solid var(--ColorBorderSubtle);
    border-radius: var(--RadiusPill);
    color: var(--ColorTextMuted);
    display: flex;
    height: 50px;
    justify-content: center;
    margin: 0 auto 20px;
    width: 50px;
}

/* Styles muted footnote in placeholder card. */
.MutedNote {
    color: var(--ColorTextFaint);
    font-size: var(--FontSizeMicro);
    font-weight: 500;
}

/* Structures the redesigned blog highlights section. */
.BlogSection {
    margin: 0 auto;
    max-width: 1200px;
    padding: 80px 20px 100px;
    position: relative;
}

/* Formats the live pulsating indicator dot in the blog badge. */
.BlogLivePulseDot {
    background-color: #059bfa;
    border-radius: var(--RadiusPill);
    box-shadow: 0 0 10px #059bfa;
    display: inline-block;
    flex-shrink: 0;
    height: 5px;
    width: 5px;
}

/* Lays out the editorial spotlight and portal in an asymmetric bento grid. */
.BlogBentoGrid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1.30fr 1.0fr;
}

/* Formats the primary spotlight publication card with ambient glass glow. */
.BlogSpotlightCard {
    background: radial-gradient(circle at top left, rgba(5, 155, 250, 0.10) 0%, rgba(15, 15, 15, 0.90) 50%, #090909 100%);
    border: 1px solid rgba(5, 155, 250, 0.30);
    border-radius: var(--RadiusCard);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.50);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 30px 30px;
    position: relative;
    transition: transform var(--TransitionNormal), border-color var(--TransitionNormal), box-shadow var(--TransitionNormal);
}

/* Elevates the spotlight card upon mouse hover. */
.BlogSpotlightCard:hover {
    border-color: #059bfa;
    box-shadow: 0 25px 60px rgba(5, 155, 250, 0.20);
    transform: translateY(-5px);
}

/* Aligns the top metadata tags row in the spotlight card. */
.SpotlightMetaRow {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* Formats the spotlight release badge. */
.SpotlightBadge {
    background-color: rgba(5, 155, 250, 0.15);
    border: 1px solid #059bfa;
    border-radius: var(--RadiusPill);
    color: #059bfa;
    font-size: var(--FontSizeMicro);
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 5px 15px;
    text-transform: uppercase;
}

/* Formats the spotlight publication date stamp. */
.SpotlightDateBadge {
    color: var(--ColorTextMuted);
    font-family: var(--FontMono);
    font-size: var(--FontSizeMicro);
}

/* Wraps the widescreen visual thumbnail inside the spotlight card. */
.SpotlightVisualContainer {
    background-color: #000000;
    border: 1px solid var(--ColorBorderSubtle);
    border-radius: var(--RadiusMedium);
    line-height: 0;
    margin-bottom: 25px;
    overflow: hidden;
    position: relative;
}

/* Scales the spotlight image smoothly. */
.SpotlightImage {
    display: block;
    height: 250px;
    object-fit: cover;
    transition: transform var(--TransitionNormal);
    width: 100%;
}

/* Zooms the spotlight image slightly on card hover. */
.BlogSpotlightCard:hover .SpotlightImage {
    transform: scale(1.05);
}

/* Formats the dominant spotlight article title. */
.SpotlightTitle {
    color: var(--ColorTextLight);
    font-size: var(--FontSizeTitleSmall);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.20;
    margin-bottom: 15px;
}

/* Formats the summary text in the spotlight card. */
.SpotlightExcerpt {
    color: var(--ColorTextMuted);
    font-size: var(--FontSizeSmall);
    line-height: 1.60;
    margin-bottom: 30px;
}

/* Aligns the footer controls of the spotlight card. */
.SpotlightFooter {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: auto;
}

/* Formats the primary call-to-action button in the spotlight card. */
.SpotlightCtaBtn {
    align-items: center;
    background-color: #059bfa;
    border: 1px solid #059bfa;
    border-radius: var(--RadiusPill);
    color: #ffffff;
    display: inline-flex;
    font-size: var(--FontSizeSmall);
    font-weight: 600;
    padding: 10px 25px;
    text-decoration: none;
    transition: all var(--TransitionFast);
}

/* Elevates the spotlight button on hover. */
.SpotlightCtaBtn:hover {
    background-color: #0480cf;
    transform: translateY(-1px);
}

/* Formats the estimated reading duration tag. */
.SpotlightEstimate {
    color: var(--ColorTextFaint);
    font-size: var(--FontSizeMicro);
    font-weight: 500;
}

/* Structures the cyber-portal archive card. */
.BlogPortalCard {
    background-color: var(--ColorSurfaceDark);
    border: 1px solid var(--ColorBorderSubtle);
    border-radius: var(--RadiusCard);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 30px 25px;
    position: relative;
    transition: transform var(--TransitionNormal), border-color var(--TransitionNormal), box-shadow var(--TransitionNormal);
}

/* Elevates the portal card upon hover. */
.BlogPortalCard:hover {
    border-color: #059bfa;
    box-shadow: 0 25px 60px rgba(5, 155, 250, 0.20);
    transform: translateY(-5px);
}

/* Elevates portal content elements above the hover beam layer. */
.BlogPortalCard > * {
    position: relative;
    z-index: 3;
}

/* Aligns the top telemetry label bar in the portal card. */
.PortalTopRow {
    align-items: center;
    border-bottom: 1px solid var(--ColorBorderSubtle);
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
}

/* Formats the monospace telemetry header label. */
.PortalHeaderLabel {
    color: var(--ColorTextMuted);
    font-family: var(--FontMono);
    font-size: var(--FontSizeMicro);
    letter-spacing: 0.05em;
}

/* Formats the live activity status indicator in the portal card. */
.PortalStatusPill {
    background-color: rgba(15, 195, 95, 0.10);
    border: 1px solid rgb(15, 195, 95);
    border-radius: var(--RadiusPill);
    color: rgb(15, 195, 95);
    font-size: var(--FontSizeMicro);
    font-weight: 600;
    padding: 0 10px;
}

/* Wraps the vertical stream of editorial highlights. */
.PortalStreamList {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

/* Formats individual editorial stream item links. */
.PortalStreamItem {
    background-color: var(--ColorSurfaceCard);
    border: 1px solid var(--ColorBorderSubtle);
    border-radius: var(--RadiusMedium);
    display: block;
    padding: 15px 15px;
    text-decoration: none;
    transition: all var(--TransitionFast);
}

/* Highlights the editorial stream item on hover. */
.PortalStreamItem:hover {
    border-color: #059bfa;
    transform: translateX(3px);
}

/* Formats the headline inside the editorial stream item. */
.StreamItemTitle {
    color: var(--ColorTextLight);
    font-size: var(--FontSizeSmall);
    font-weight: 600;
    margin-bottom: 5px;
}

/* Formats the metadata line inside the editorial stream item. */
.StreamItemMeta {
    color: var(--ColorTextMuted);
    font-family: var(--FontMono);
    font-size: var(--FontSizeMicro);
}

/* Aligns the portal footer action wrapper. */
.PortalFooterAction {
    border-top: 1px solid var(--ColorBorderSubtle);
    padding-top: 20px;
    text-align: center;
}

/* Formats the full directory button spanning the portal card. */
.PortalFullDirectoryBtn {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ColorBorderSubtle);
    border-radius: var(--RadiusMedium);
    color: var(--ColorTextLight);
    display: inline-flex;
    font-size: var(--FontSizeSmall);
    font-weight: 600;
    justify-content: center;
    padding: 10px 20px;
    text-decoration: none;
    transition: all var(--TransitionFast);
    width: 100%;
}

/* Inverts full directory button styling on hover. */
.PortalFullDirectoryBtn:hover {
    background-color: var(--ColorTextLight);
    color: var(--ColorBackground);
}

/* Adapts layout for medium tablet screens. */
@media (max-width: 990px) {
    .ProductsGrid {
        grid-template-columns: 1fr;
    }

    .FeaturesGrid {
        grid-template-columns: 1fr;
    }

    .BlogBentoGrid {
        grid-template-columns: 1fr;
    }
}

/* Adapts layout for mobile viewports. */
@media (max-width: 650px) {
    .HeroSection {
        padding: 40px 15px 40px;
    }

    .HeroHeading {
        font-size: var(--FontSizeMedium);
    }

    .SectionTitle {
        font-size: var(--FontSizeTitleSmall);
    }

    .SectionSubtitle {
        font-size: var(--FontSizeSmall);
    }

    .FeaturesSection {
        padding: 40px 15px 50px;
    }

    .FeaturesGrid {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr;
    }

    .FeatureCard {
        display: block;
        padding: 25px 20px;
    }

    .ProductsSection {
        padding: 60px 15px 40px;
    }

    .ProductsGrid {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr;
    }

    .ProductCard {
        border-radius: var(--RadiusLarge);
        display: block;
    }

    .CardHeaderRow {
        padding: 15px 15px 0;
    }

    .CardThumbnailWrapper {
        margin: 10px 15px 0;
    }

    .CardContent {
        display: block;
        padding: 20px 15px;
    }

    .CardTitle {
        font-size: var(--FontSizeMedium);
    }

    .CardDescription {
        font-size: var(--FontSizeSmall);
        line-height: 1.50;
        margin-bottom: 15px;
    }

    .CardTagList {
        display: block;
        margin-bottom: 15px;
    }

    .CardTagList .TagPill {
        display: inline-block;
        margin-bottom: 5px;
        margin-right: 5px;
    }

    .CardActionRow {
        display: block;
        margin-top: 20px;
    }

    .CardLaunchButton {
        display: block;
        text-align: center;
        width: 100%;
    }

    .ComingCard {
        display: block;
        min-height: 250px;
        padding: 30px 15px;
    }

    .EmptyCenterContent {
        display: block;
        min-height: 250px;
        padding: 30px 15px;
        text-align: center;
    }

    .BlogSection {
        padding: 50px 15px 60px;
    }

    .BlogSpotlightCard {
        padding: 20px 15px;
    }

    .SpotlightVisualContainer {
        margin-bottom: 15px;
    }

    .SpotlightImage {
        height: 180px;
    }

    .SpotlightTitle {
        font-size: var(--FontSizeMedium);
    }

    .SpotlightExcerpt {
        font-size: var(--FontSizeSmall);
        margin-bottom: 20px;
    }

    .SpotlightFooter {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .SpotlightCtaBtn {
        justify-content: center;
        width: 100%;
    }

    .BlogPortalCard {
        padding: 20px 15px;
    }
}