@import "component-asciinema-player-zKWkWXq.css";

:root {
    --ui-heading-title-color: var(--gray-800);

    --home-subtitle-color: #7a69fa;
    --home-accent-purple: #bc00fe;
    --home-accent-cyan: #00c3ff;
    --home-accent-blue: #007bff;
    --home-accent-teal: #00b09b;
    --home-accent-bg: var(--ui-bg-secondary);
    --home-metrics-bg: #0059b3;
    --home-metrics-heading-color: #87c3ff;
    --home-demo-gradient-start: #0066cc;
    --home-demo-gradient-end: #00cee5;
    --home-community-gradient-start: #0066cc;
    --home-community-gradient-end: #d7a1ff;
    --home-white: #fff;
    --home-purple-shadow: rgba(128, 0, 255, 0.3);
    --hero-highlight-bg: oklch(98.5% 0 0);
    --hero-highlight-border-color: oklch(87% 0 0);
    --hero-highlight-new-bg: var(--link-color);
    --hero-highlight-new-color: var(--home-white);
}

.dark-theme {
    --home-subtitle-color: #a78bfa;
    --home-accent-purple: #d946ef;
    --home-accent-cyan: #67e8f9;
    --home-accent-blue: #60a5fa;
    --home-accent-teal: #2dd4bf;
    --home-accent-bg: transparent;
    --home-metrics-bg: #0a3157;
    --home-metrics-heading-color: #bfdbfe;
    --home-demo-gradient-start: #112e6b;
    --home-demo-gradient-end: #064969;
    --home-community-gradient-start: #153885;
    --home-community-gradient-end: #724e96;
    --home-white: #fff;
    --home-purple-shadow: rgba(168, 85, 247, 0.3);
    --hero-highlight-bg: oklch(21% 0.034 264.665);
    --hero-highlight-border-color: oklch(37.3% 0.034 259.733);
    --hero-highlight-new-bg: oklch(13% 0.028 261.692);
    --hero-highlight-new-color: var(--link-color);
}

#main-content {
    padding: 0;
}

section + section {
    margin-top: 3rem;
}
@media (min-width: 992px) {
    section + section {
        margin-top: 5rem;
    }
}

.ui-heading {
    margin-bottom: 45px;
}
.ui-heading h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    text-wrap: balance;
}
.ui-heading h2.xl {
    font-size: 2rem;
    font-weight: bold;
}
.ui-heading .ui-heading-subtitle {
    color: var(--subtitle-color);
    font-size: 1.05rem;
    margin: 15px 0 0;
    text-wrap: unset;
}
.item-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.25;
}
@media (min-width: 992px) {
    .ui-heading.horizontal {
        align-items: center;
        display: flex;
    }
    .ui-heading:has(h2) {
        margin-bottom: 60px;
    }
    .ui-heading h2 {
        font-size: 2rem;
    }
    .ui-heading.xl h2 {
        display: block;
        font-size: 3.5rem;
        line-height: 1.1;
    }
    .ui-heading .ui-heading-subtitle {
        margin: 0 0 0 45px;
        text-wrap: balance;
    }
    .ui-heading.xl .ui-heading-subtitle {
        font-size: 1.3rem;
    }
    .item-title {
        font-size: 1.3rem;
    }
}
@media (min-width: 1200px) {
    .ui-heading:has(h2) {
        margin-bottom: 75px;
    }
    .ui-heading h2 {
        font-size: 3rem;
        line-height: 1.25;
    }
    .ui-heading.xl h2 {
        font-size: 4.5rem;
    }
    .ui-heading .ui-heading-subtitle {
        font-size: 1.3rem;
    }
    .ui-heading.xl .ui-heading-subtitle {
        font-size: 1.5rem;
    }
    .item-title {
        font-size: 1.5rem;
    }
}

.section-build {
    background-color: var(--home-accent-bg);
    padding: 45px 0 15px;
}
.section-build h1 {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 15px;
}
.section-build .ui-heading-subtitle {
    margin: 0;
}
.section-build .images {
    position: relative;
    margin-bottom: 45px;
}
#cli-animation {
    display: block;
    margin: 0;
    height: 400px;
    max-width: 600px;
    width: 99%;
    padding-bottom: 5px;
    position: relative;
}
.section-build .sf20years {
    position: absolute;
    top: -30px;
    right: -5px;
    background: var(--home-white);
    border-radius: 20px;
    box-shadow: 0 20px 60px var(--home-purple-shadow);
    height: auto;
    max-width: 100px;
}
@media (min-width: 768px) {
    .section-build .ui-heading-subtitle {
        text-wrap: balance;
    }
    #cli-animation {
        max-width: 600px;
    }
    .section-build .sf20years {
        top: -10px;
        right: 35px;
        max-width: 120px;
    }
}
@media (min-width: 992px) {
    .section-build {
        padding: 90px 0 60px;
    }
    .section-build h1 {
        font-size: 3.5rem;
        max-width: 10ch;
    }
    .section-build .images {
        margin-bottom: 0;
    }
    #cli-animation {
        margin: 15px 0 0 -30px;
        width: 600px;
        position: absolute;
        top: -60px;
        right: 60px;
    }
    .section-build .sf20years {
        top: -70px;
        right: 40px;
        max-width: 110px;
    }
}
@media (min-width: 1200px) {
    .section-build {
        padding: 120px 0 90px;
    }
    .section-build h1 {
        font-size: 5.5rem;
        letter-spacing: -0.01em;
        line-height: 1;
        margin: 15px 0 30px;
        max-width: 9ch;
    }
    .section-build h1.ui-heading-title + .ui-heading-subtitle {
        font-size: 1.7rem;
    }
    #cli-animation {
        height: unset;
        top: -10px;
        right: 15px;
    }
    .section-build .sf20years {
        top: -45px;
        right: -5px;
        max-width: 170px;
    }
}
@media (min-width: 1400px) {
    #cli-animation {
        top: -30px;
        right: 0;
    }
    .section-build .sf20years {
        top: -45px;
        right: -45px;
        max-width: 200px;
    }
}

.hero-highlight {
    display: inline-flex;
    align-items: center;
    margin: 0 0 1.5rem;
    padding: 0.4em 0.5em;
    background-color: var(--hero-highlight-bg);
    border: 1.5px solid var(--hero-highlight-border-color);
    border-radius: 1.5em;
}
.hero-highlight .new {
    background-color: var(--hero-highlight-new-bg);
    color: var(--hero-highlight-new-color);
    border-radius: 1em;
    line-height: 1;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    padding: 0.5em 1em;
}
.hero-highlight .content {
    margin: 0 2em 0 0.5em;
}
.hero-highlight:hover .content {
    color: var(--link-color);
    text-decoration: underline;
}
.hero-highlight .icon {
    margin: 0 0.5em 0 0;
    transition: transform 0.2s ease;
}
.hero-highlight:hover .icon {
    transform: translateX(3px);
}

.section-what .ui-heading-subtitle {
    --subtitle-color: var(--home-subtitle-color);
}

.section-what .col {
    margin-bottom: 30px;
}
.section-what .item-icon {
    height: 32px;
    width: 32px;
    margin-right: 6px;
    position: relative;
    top: -4px;
}
.section-what .item-icon path {
    stroke-width: 0.75;
}
.section-what .item-web .item-icon {
    color: var(--home-accent-purple);
}
.section-what .item-cli .item-icon {
    color: var(--home-accent-cyan);
}
.section-what .item-components .item-icon {
    color: var(--home-accent-blue);
}
.section-what .item-api .item-icon {
    color: var(--home-accent-teal);
}
.section-what .item-title {
    display: inline-block;
}

@media (min-width: 992px) {
    .section-what .col {
        margin-bottom: 0;
    }
    .section-what h2 {
        width: 35ch;
    }
    .section-what .item-icon {
        height: 36px;
        width: 36px;
        margin: 0 0 10px 0;
        position: static;
    }
    .section-what .item-title {
        display: block;
    }
}
@media (min-width: 1200px) {
    .section-what .item-icon {
        height: 55px;
        width: 55px;
    }
}

.section-metrics {
    background: var(--home-metrics-bg);
    color: var(--home-white);
    padding: 30px 0 45px;
}
.section-metrics-heading {
    color: var(--home-metrics-heading-color);
    font-size: 1.2rem;
    margin-bottom: 45px;
}
.section-metrics .item-icon {
    height: 21px;
    width: 21px;
    margin-bottom: 5px;
}
@media (min-width: 992px) {
    .section-metrics {
        padding: 60px 0 75px;
    }
    .section-metrics-heading {
        font-size: 1.5rem;
        margin-bottom: 60px;
    }
    .section-metrics .item-icon {
        height: 28px;
        width: 28px;
        margin-bottom: 10px;
    }
}

.section-start .ui-heading .ui-heading-subtitle {
    --subtitle-color: var(--home-accent-blue);
}
@media (min-width: 992px) {
    .section-start .ui-heading h2 {
        max-width: 12ch;
    }
}

.section-start .item-group {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    grid-template-areas:
        'demo'
        'read'
        'fast'
        'casts'
        'training';
}
@media (min-width: 768px) {
    .section-start .item-group {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            'demo demo'
            'read fast'
            'casts training';
    }
}
@media (min-width: 992px) {
    .section-start .item-group {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            'demo read fast'
            'demo casts training';
    }
}

.section-start .item {
    border: 1.5px solid var(--border-color, currentColor);
    padding: 15px 20px;
    border-radius: 10px;
    height: 100%;
}

.section-start .item-demo {
    grid-area: demo;
    color: var(--home-white);
    --border-color: var(--home-white);
    --icon-color: var(--home-white);
}
.section-start .item-demo .item {
    background: linear-gradient(180deg, var(--home-demo-gradient-start) 0%, var(--home-demo-gradient-end) 100%);
    border: 0;
}
.section-start .item-read {
    grid-area: read;
    --border-color: var(--home-accent-blue);
    --icon-color: var(--home-accent-blue);
}
.section-start .item-fast {
    grid-area: fast;
    --border-color: var(--home-accent-purple);
    --icon-color: var(--home-accent-purple);
}
.section-start .item-casts {
    grid-area: casts;
    --border-color: var(--home-accent-cyan);
    --icon-color: var(--home-accent-cyan);
}
.section-start .item-training {
    grid-area: training;
    --border-color: var(--home-accent-teal);
    --icon-color: var(--home-accent-teal);
}
.section-start .item-demo .item-title {
    color: var(--home-white);
    font-size: 1.3rem;
}
.section-start .item-icon {
    color: var(--icon-color, currentColor);
    flex-shrink: 0;
    height: 60px;
    width: 60px;
    margin-top: 30px;
}
.section-start .item-icon path {
    stroke-width: 0.5;
}
.section-start .item-demo .item-icon {
    height: 100px;
    width: 100px;
    margin-left: -30px;
}
.section-start .item-demo .ui-button {
    --ui-button-color: var(--home-demo-gradient-start);
    --ui-button-bg: var(--home-white);
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 20px;
    padding: 1em 2em;
}
@media (min-width: 992px) {
    .section-start .item {
        padding: 20px 30px;
    }
    .section-start .item-icon {
        height: 90px;
        width: 90px;
        margin-top: 30px;
    }
    .section-start .item-demo .item-icon {
        height: 200px;
        width: 200px;
        margin-left: -60px;
    }
    .section-start .item-demo .item-title {
        font-size: 1.4rem;
    }
    .section-start .item-demo .ui-button {
        font-size: 1.2rem;
        margin-top: 45px;
        padding: 1.2em 2.5em;
    }
}
@media (min-width: 1200px) {
    .section-start .item {
        padding: 30px 45px;
    }
    .section-start .item-icon {
        height: 140px;
        width: 140px;
        margin-top: 45px;
    }
    .section-start .item-demo .item-icon {
        height: 300px;
        width: 300px;
        margin-left: -75px;
    }
    .section-start .item-demo .item-title {
        font-size: 1.7rem;
    }
    .section-start .item-demo .ui-button {
        font-size: 1.3rem;
    }
}

.section-strategic .ui-heading-subtitle {
    --subtitle-color: var(--home-accent-teal);
    margin-left: 0;
}
@media (min-width: 992px) {
    .section-strategic h2 {
        max-width: 20ch;
    }
    .section-strategic .ui-heading-subtitle {
        margin-top: 20px;
    }
}
@media (min-width: 1200px) {
    .section-strategic h2 {
        max-width: 10ch;
    }
    .section-strategic .ui-heading-subtitle {
        margin-top: 45px;
        max-width: 32ch;
        text-wrap: unset;
    }
}

.section-strategic-item {
    padding-bottom: 30px;
}
.section-strategic-item + .section-strategic-item {
    border-top: 1px solid var(--ui-border-secondary-color);
    padding-top: 30px;
}
.section-strategic-item .icon-primary {
    color: var(--home-accent-teal);
    flex-shrink: 0;
    height: 48px;
    width: 48px;
    margin-right: 30px;
}
.section-strategic-item .icon-primary.icon-lts path {
    stroke-width: 1.5;
}
.section-strategic-item .icon-primary path {
    stroke-width: 0.5;
}
.section-strategic-item .icon-secondary {
    color: var(--ui-link-color);
    height: 24px;
    width: 24px;
}
@media (min-width: 992px) {
    .section-strategic-item .icon-primary {
        height: 70px;
        width: 70px;
        margin-right: 30px;
    }
    .section-strategic-item .icon-secondary {
        height: 28px;
        width: 28px;
    }
    .section-strategic-item {
        border-top: 1px solid var(--ui-border-secondary-color);
        padding-top: 30px;
    }
    .section-strategic-item:nth-child(2n) {
        padding-left: 30px;
    }
    .section-strategic-item:nth-child(2n + 1) {
        padding-right: 30px;
    }
}
@media (min-width: 1200px) {
    .section-strategic-item .icon-primary {
        height: 100px;
        width: 100px;
        margin-right: 30px;
    }
    .section-strategic-item .icon-secondary {
        height: 36px;
        width: 36px;
    }
    .section-strategic-item:first-of-type {
        border-top: none;
        padding-top: 0;
    }
    .section-strategic-item:nth-child(2n),
    .section-strategic-item:nth-child(2n + 1) {
        padding-left: 0;
        padding-right: 0;
    }
}

.section-sensiolabs {
    background-color: var(--home-accent-bg);
    padding: 60px 0;
}
.section-sensiolabs .ui-heading h2 {
    max-width: 19ch;
}
.section-sensiolabs .ui-heading .ui-heading-subtitle {
    --subtitle-color: var(--ui-link-color);
}

.section-sensiolabs .sf-icon {
    margin-right: 20px;
    flex-shrink: 0;
    height: 50px;
    width: 50px;
}
@media (min-width: 992px) {
    .section-sensiolabs .sf-icon {
        margin-right: 30px;
        height: 70px;
        width: 70px;
    }
    .section-sensiolabs .sf-item-group + .sf-item-group {
        border-top: 1px solid var(--ui-border-secondary-color);
        margin-top: 30px;
        padding-top: 30px;
    }
    .section-sensiolabs .sf-item-upgrade,
    .section-sensiolabs .sf-item-insight {
        border-right: 1px solid var(--ui-border-secondary-color);
        padding-right: 30px;
    }
    .section-sensiolabs .sf-item-cloud,
    .section-sensiolabs .sf-item-services {
        padding-left: 30px;
    }
}
@media (min-width: 1200px) {
    .section-sensiolabs .sf-icon {
        margin-right: 45px;
        height: 100px;
        width: 100px;
    }
    .section-sensiolabs .sf-item-group + .sf-item-group {
        margin-top: 45px;
        padding-top: 45px;
    }
    .section-sensiolabs .sf-item-upgrade,
    .section-sensiolabs .sf-item-insight {
        padding-right: 60px;
    }
    .section-sensiolabs .sf-item-cloud,
    .section-sensiolabs .sf-item-services {
        padding-left: 60px;
    }
}

.section-community {
    background: linear-gradient(180deg, var(--home-community-gradient-start) 0%, var(--home-community-gradient-end) 100%);
    margin: -60px 0 0 !important;
    padding: 60px 0;
}
.section-community h2 {
    color: var(--home-white);
    text-align: center;
}
.section-community .ui-heading-subtitle {
    color: var(--home-white);
    text-align: center;
}
@media (min-width: 992px) {
    .section-community {
        padding: 90px 0;
    }
    .section-community .ui-heading {
        margin-bottom: 60px;
    }
    .section-community h2 {
        margin-bottom: 30px;
    }
}
.section-community .community-items {
    align-items: flex-start;
}
.section-community .community-item {
    background: var(--page-background);
    border-radius: 10px;
    padding: 15px 15px;
}
.section-community .community-contributor {
    margin-top: 15px;
}
.section-community .community-certification {
    margin-top: 15px;
}
.section-community .community-events {
    margin-top: 15px;
}
.section-community .item-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.section-community .item-icon {
    color: var(--ui-link-color);
    display: inline-block;
    height: 24px;
    width: 24px;
}
.section-community .community-events td {
    border-bottom: 1px solid var(--ui-border-secondary-color);
    padding: 10px 5px;
}
@media (min-width: 992px) {
    .section-community .community-item {
        padding: 20px 30px;
    }
    .section-community .community-contributor {
        margin-top: 0;
    }
    .section-community .community-certification {
        margin-top: 0;
    }
    .section-community .community-events {
        margin-top: 30px;
    }
}
@media (min-width: 1200px) {
    .section-community .community-item {
        padding: 20px 30px;
    }
    .section-community .community-contributor {
        margin-top: 20px;
    }
    .section-community .community-certification {
        margin-top: 45px;
    }
    .section-community .community-events {
        margin-top: 0;
    }
}