/* ============================================================

   RESET

============================================================ */



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: "Inter", Arial, sans-serif;

    background: #ffffff;

    color: #15181d;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

}



body.menu-open {

    overflow: hidden;

}



a {

    color: inherit;

    text-decoration: none;

}



button,

input,

textarea,

select {

    font: inherit;

}



button {

    border: 0;

}



img {

    display: block;

    max-width: 100%;

}





/* ============================================================

   VARIABLES

============================================================ */



:root {



    --orange: #f47721;

    --orange-dark: #d95f0f;

    --orange-light: #fff4ec;



    --black: #111317;

    --dark: #171a20;

    --dark-2: #20242b;



    --text: #181b20;

    --text-secondary: #646a73;



    --border: #e7e8eb;

    --border-dark: rgba(255,255,255,.09);



    --background-soft: #f7f8fa;



    --white: #ffffff;



    --radius-sm: 12px;

    --radius-md: 20px;

    --radius-lg: 30px;



    --container: 1180px;



    --shadow:

        0 20px 70px rgba(23, 27, 33, .08);

}





/* ============================================================

   GENERAL

============================================================ */



.container {

    width: min(

        calc(100% - 48px),

        var(--container)

    );



    margin: 0 auto;

}



.section {

    padding: 120px 0;

}



.section-label {

    display: inline-flex;

    align-items: center;



    color: var(--orange);



    font-size: 12px;

    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;



    margin-bottom: 20px;

}



.section-heading {

    max-width: 750px;

    margin-bottom: 64px;

}



.section-heading.centered {

    text-align: center;

    margin-left: auto;

    margin-right: auto;

}



.section-heading h2,

.section-intro h2,

.values-intro h2,

.history-heading h2 {

    font-size: clamp(38px, 5vw, 66px);

    line-height: 1.03;



    letter-spacing: -.055em;



    color: var(--black);

}



.section-heading h2 span,

.section-intro h2 span,

.values-intro h2 span,

.history-heading h2 span {

    color: var(--orange);

}



.section-heading > p {

    margin-top: 24px;



    color: var(--text-secondary);



    font-size: 18px;

    line-height: 1.75;

}



.btn {

    min-height: 52px;



    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;



    padding: 0 24px;



    border-radius: 12px;



    font-size: 14px;

    font-weight: 700;



    transition:

        transform .25s ease,

        background .25s ease,

        border-color .25s ease,

        color .25s ease;

}



.btn:hover {

    transform: translateY(-2px);

}



.btn-primary {

    color: white;

    background: var(--orange);

}



.btn-primary:hover {

    background: var(--orange-dark);

}



.btn-secondary {

    color: var(--text);

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

    background: rgba(255,255,255,.75);

}



.btn-secondary:hover {

    border-color: #cfd1d5;

    background: white;

}



.btn-secondary-light {

    color: white;

    border: 1px solid rgba(255,255,255,.16);

}



.btn-secondary-light:hover {

    background: rgba(255,255,255,.08);

}





/* ============================================================

   HEADER

============================================================ */



.header {

    position: fixed;



    top: 0;

    left: 0;

    right: 0;



    z-index: 1000;



    border-bottom: 1px solid transparent;



    transition:

        background .25s ease,

        border-color .25s ease,

        box-shadow .25s ease;

}



.header.scrolled {

    background: rgba(255,255,255,.92);

    backdrop-filter: blur(18px);



    border-color: rgba(0,0,0,.06);



    box-shadow:

        0 10px 40px rgba(0,0,0,.04);

}



.header-container {

    height: 80px;



    display: flex;

    align-items: center;

    justify-content: space-between;

}



.brand {

    display: flex;

    align-items: center;

    gap: 11px;

}



.brand-symbol-image {

    width: 42px;

    height: 42px;



    display: block;



    object-fit: contain;



    flex-shrink: 0;

}



.brand-text {

    display: flex;

    align-items: baseline;

    gap: 5px;



    font-size: 18px;



    letter-spacing: -.03em;

}



.brand-text strong {

    font-weight: 800;

}



.brand-text span {

    color: #656b73;

    font-weight: 500;

}



.desktop-nav {

    display: flex;

    align-items: center;

    gap: 30px;

}



.desktop-nav a {

    color: #525861;



    font-size: 13px;

    font-weight: 600;



    transition: color .2s;

}



.desktop-nav a:hover {

    color: var(--orange);

}



.header-actions {

    display: flex;

    align-items: center;

    gap: 14px;

}



.btn-header {

    min-height: 44px;

    padding: 0 18px;



    color: white;

    background: var(--dark);



    font-size: 12px;

}



.btn-header:hover {

    background: var(--orange);

}



.menu-button {

    width: 42px;

    height: 42px;



    display: none;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;



    background: transparent;



    cursor: pointer;

}



.menu-button span {

    width: 21px;

    height: 2px;



    display: block;



    background: var(--dark);



    border-radius: 10px;



    transition: .25s;

}



.menu-button.active span:nth-child(1) {

    transform: translateY(7px) rotate(45deg);

}



.menu-button.active span:nth-child(2) {

    opacity: 0;

}



.menu-button.active span:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg);

}



.mobile-menu {

    display: none;

}





/* ============================================================

   HERO

============================================================ */



.hero {

    min-height: 780px;



    position: relative;

    overflow: hidden;



    display: flex;

    align-items: center;



    padding: 150px 0 80px;



    background:

        linear-gradient(

            180deg,

            #ffffff 0%,

            #fafbfc 100%

        );

}



.hero::before {

    content: "";



    width: 100%;

    height: 100%;



    position: absolute;



    inset: 0;



    background-image:

        linear-gradient(

            rgba(0,0,0,.025) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(0,0,0,.025) 1px,

            transparent 1px

        );



    background-size: 48px 48px;



    mask-image:

        linear-gradient(

            to bottom,

            black,

            transparent 85%

        );



    pointer-events: none;

}



.hero-glow {

    position: absolute;



    border-radius: 50%;



    filter: blur(40px);



    pointer-events: none;

}



.hero-glow-one {

    width: 350px;

    height: 350px;



    right: 4%;

    top: 12%;



    background: rgba(244,119,33,.13);

}



.hero-glow-two {

    width: 400px;

    height: 400px;



    left: -220px;

    bottom: -150px;



    background: rgba(121,127,137,.10);

}



.hero-container {

    position: relative;

    z-index: 2;



    display: grid;

    grid-template-columns:

        minmax(0, 1.02fr)

        minmax(420px, .98fr);



    gap: 70px;



    align-items: center;

}



.eyebrow {

    width: fit-content;



    display: inline-flex;

    align-items: center;

    gap: 9px;



    padding: 7px 11px;



    margin-bottom: 24px;



    border: 1px solid #e7e8eb;

    border-radius: 100px;



    background: rgba(255,255,255,.75);



    color: #5c626b;



    font-size: 11px;

    font-weight: 700;

    letter-spacing: .06em;

    text-transform: uppercase;

}



.eyebrow-dot {

    width: 6px;

    height: 6px;



    border-radius: 50%;



    background: var(--orange);



    box-shadow:

        0 0 0 4px rgba(244,119,33,.12);

}



.hero h1 {

    max-width: 700px;



    color: var(--black);



    font-size: clamp(54px, 6vw, 86px);

    line-height: .95;



    letter-spacing: -.065em;

}



.hero h1 span {

    display: block;



    color: var(--orange);

}



.hero-description {

    max-width: 610px;



    margin-top: 28px;



    color: #656b74;



    font-size: 18px;

    line-height: 1.75;

}



.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;



    margin-top: 34px;

}



.hero-signature {

    max-width: 570px;



    display: grid;

    grid-template-columns: 42px 1fr;

    gap: 18px;



    align-items: center;



    margin-top: 47px;

}



.signature-line {

    width: 42px;

    height: 1px;



    background: var(--orange);

}



.hero-signature p {

    color: #777c84;



    font-size: 12px;

    line-height: 1.6;

    font-weight: 600;

    letter-spacing: .02em;

}





/* ============================================================

   HERO VISUAL

============================================================ */



.hero-visual {

    min-height: 560px;



    position: relative;



    display: flex;

    align-items: center;

    justify-content: center;

}



.visual-orbit {

    position: absolute;



    border-radius: 50%;

    border: 1px solid rgba(244,119,33,.15);

}



.orbit-one {

    width: 470px;

    height: 470px;

}



.orbit-two {

    width: 570px;

    height: 570px;



    border-color: rgba(0,0,0,.05);

}



.hero-panel {

    width: min(100%, 465px);



    position: relative;

    z-index: 3;



    padding: 20px;



    border: 1px solid rgba(255,255,255,.8);

    border-radius: 26px;



    background:

        linear-gradient(

            145deg,

            rgba(255,255,255,.96),

            rgba(247,248,250,.9)

        );



    box-shadow:

        0 40px 100px rgba(21,24,29,.13),

        inset 0 1px 0 white;

}



.hero-panel-header {

    display: flex;

    justify-content: space-between;

    align-items: center;



    padding: 6px 4px 20px;

}



.hero-panel-header > div:first-child {

    display: flex;

    flex-direction: column;

}



.panel-overline {

    color: #8b9097;



    font-size: 10px;

    font-weight: 700;



    letter-spacing: .08em;

    text-transform: uppercase;

}



.hero-panel-header strong {

    margin-top: 3px;



    font-size: 16px;

}



.panel-status {

    display: flex;

    align-items: center;

    gap: 7px;



    padding: 6px 9px;



    border-radius: 100px;



    color: #535960;

    background: #f4f5f6;



    font-size: 9px;

    font-weight: 700;

}



.panel-status span {

    width: 6px;

    height: 6px;



    border-radius: 50%;

    background: #44a367;

}



.central-system {

    padding: 18px;



    border: 1px solid #eceef0;

    border-radius: 18px;



    background: white;

}



.system-core {

    display: flex;

    align-items: center;

    gap: 14px;



    padding-bottom: 18px;



    border-bottom: 1px solid #eceef0;

}



.core-icon {

    width: 48px;

    height: 48px;



    display: flex;

    align-items: center;

    justify-content: center;



    flex-shrink: 0;

}



.core-icon img {

    width: 100%;

    height: 100%;



    display: block;



    object-fit: contain;

}



.system-core > div:last-child {

    display: flex;

    flex-direction: column;

}



.system-core span {

    color: #979ca3;



    font-size: 9px;

    font-weight: 700;



    text-transform: uppercase;

    letter-spacing: .08em;

}



.system-core strong {

    font-size: 17px;

}



.system-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;



    margin-top: 14px;

}



.system-item {

    min-height: 92px;



    display: flex;

    align-items: flex-start;

    gap: 11px;



    padding: 15px;



    border: 1px solid #edeef0;

    border-radius: 13px;



    background: #fafbfc;

}



.system-number {

    color: var(--orange);



    font-size: 9px;

    font-weight: 800;

}



.system-item > div:last-child {

    display: flex;

    flex-direction: column;

}



.system-item strong {

    font-size: 12px;

}



.system-item span {

    margin-top: 3px;



    color: #93979e;



    font-size: 9px;

}



.panel-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;



    padding: 20px 5px 3px;

}



.panel-bottom > div:first-child {

    display: flex;

    flex-direction: column;

}



.panel-bottom span {

    color: #9a9fa6;



    font-size: 9px;

    font-weight: 700;



    text-transform: uppercase;

    letter-spacing: .08em;

}



.panel-bottom strong {

    margin-top: 3px;



    font-size: 12px;

}



.panel-arrow {

    width: 36px;

    height: 36px;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 11px;



    color: white;

    background: var(--dark);

}





/* ============================================================

   MANIFESTO

============================================================ */



.manifesto {

    background: white;

}



.manifesto-grid {

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

}



.section-intro {

    position: sticky;

    top: 120px;



    align-self: start;

}



.manifesto-content {

    padding-top: 35px;

}



.manifesto-content p {

    margin-bottom: 24px;



    color: #6d727a;



    font-size: 17px;

    line-height: 1.8;

}



.manifesto-content .large-text {

    color: #262a2f;



    font-size: 23px;

    line-height: 1.65;

    font-weight: 500;

}



.manifesto-highlight {

    margin-top: 50px;



    padding: 28px 30px;



    border-left: 3px solid var(--orange);



    background: var(--background-soft);

}



.manifesto-highlight span {

    display: block;



    margin-bottom: 8px;



    color: #92979d;



    font-size: 10px;

    font-weight: 800;



    text-transform: uppercase;

    letter-spacing: .1em;

}



.manifesto-highlight strong {

    color: var(--black);



    font-size: 20px;

    line-height: 1.5;

}





/* ============================================================

   ABOUT

============================================================ */



.about {

    background: var(--background-soft);

}



.about-cards {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

}



.about-card {

    min-height: 355px;



    position: relative;



    padding: 30px;



    border: 1px solid #e6e8eb;

    border-radius: 20px;



    background: white;



    transition:

        transform .3s ease,

        box-shadow .3s ease;

}



.about-card:hover {

    transform: translateY(-7px);



    box-shadow:

        0 20px 60px rgba(0,0,0,.07);

}



.about-card.featured {

    color: white;



    background: var(--dark);

    border-color: var(--dark);

}



.card-index {

    position: absolute;



    top: 25px;

    right: 25px;



    color: #c5c8cc;



    font-size: 10px;

    font-weight: 800;

}



.featured .card-index {

    color: #646a72;

}



.card-icon {

    width: 45px;

    height: 45px;



    display: flex;

    align-items: center;

    justify-content: center;



    margin-bottom: 70px;



    border-radius: 12px;



    color: var(--orange);

    background: var(--orange-light);



    font-size: 19px;

}



.featured .card-icon {

    color: white;

    background: var(--orange);

}



.about-card h3 {

    margin-bottom: 15px;



    font-size: 19px;



    letter-spacing: -.02em;

}



.about-card p {

    color: #71767e;



    font-size: 14px;

    line-height: 1.75;

}



.featured p {

    color: #9ea3aa;

}





/* ============================================================

   PURPOSE

============================================================ */



.purpose-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

}



.purpose-card {

    min-height: 440px;



    display: flex;

    flex-direction: column;



    padding: 32px;



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

    border-radius: 22px;



    background: white;

}



.purpose-card-dark {

    color: white;



    background: var(--dark);

    border-color: var(--dark);

}



.purpose-header {

    display: flex;

    justify-content: space-between;

    align-items: center;



    margin-bottom: auto;

}



.purpose-number {

    color: #b5bac0;



    font-size: 10px;

    font-weight: 800;

}



.purpose-type {

    padding: 6px 9px;



    border-radius: 100px;



    color: var(--orange);

    background: var(--orange-light);



    font-size: 9px;

    font-weight: 800;



    text-transform: uppercase;

    letter-spacing: .08em;

}



.purpose-card-dark .purpose-type {

    color: white;

    background: rgba(244,119,33,.15);

}



.purpose-card h3 {

    margin-top: 100px;

    margin-bottom: 17px;



    font-size: 26px;

    line-height: 1.2;



    letter-spacing: -.035em;

}



.purpose-card p {

    color: #767b82;



    font-size: 14px;

    line-height: 1.75;

}



.purpose-card-dark p {

    color: #989da5;

}





/* ============================================================

   VALUES

============================================================ */



.values {

    background: #fafafa;

}



.values-layout {

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 100px;

}



.values-intro {

    position: sticky;

    top: 120px;



    align-self: start;

}



.values-intro p {

    max-width: 450px;



    margin-top: 25px;



    color: #747981;



    font-size: 15px;

    line-height: 1.8;

}



.values-list {

    border-top: 1px solid #dddfe2;

}



.value-item {

    display: grid;

    grid-template-columns: 70px 1fr;

    gap: 20px;



    padding: 32px 0;



    border-bottom: 1px solid #dddfe2;

}



.value-number {

    padding-top: 4px;



    color: #b5b9be;



    font-size: 10px;

    font-weight: 800;

}



.value-item h3 {

    margin-bottom: 6px;



    font-size: 19px;

}



.value-item p {

    max-width: 550px;



    color: #7b8088;



    font-size: 14px;

}





/* ============================================================

   THREEO

============================================================ */



.threeo {

    position: relative;

    overflow: hidden;



    color: white;

    background: #111318;

}



.threeo-glow {

    width: 500px;

    height: 500px;



    position: absolute;



    top: -200px;

    right: -140px;



    border-radius: 50%;



    background: rgba(244,119,33,.12);



    filter: blur(80px);

}



.threeo-heading {

    position: relative;

    z-index: 2;



    display: grid;

    grid-template-columns: 1fr .8fr;

    gap: 80px;



    align-items: end;



    margin-bottom: 70px;

}



.product-tag {

    display: inline-block;



    margin-bottom: 16px;



    color: var(--orange);



    font-size: 10px;

    font-weight: 800;



    text-transform: uppercase;

    letter-spacing: .12em;

}



.threeo-heading h2 {

    font-size: clamp(52px, 7vw, 86px);

    line-height: .95;



    letter-spacing: -.06em;

}



.threeo-heading h2 span {

    color: var(--orange);

}



.threeo-heading p {

    color: #999ea5;



    font-size: 16px;

    line-height: 1.8;

}



.fleet-layout {

    display: grid;

    grid-template-columns: 1.3fr .7fr;

    gap: 18px;

}



.fleet-main-card {

    padding: 24px;



    border: 1px solid rgba(255,255,255,.08);

    border-radius: 24px;



    background:

        linear-gradient(

            145deg,

            #1b1e24,

            #15181d

        );

}



.fleet-card-top {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;



    padding: 5px 4px 25px;

}



.fleet-card-top > div:first-child {

    display: flex;

    flex-direction: column;

}



.fleet-card-top span {

    color: #747a83;



    font-size: 9px;

    font-weight: 800;



    letter-spacing: .1em;

    text-transform: uppercase;

}



.fleet-card-top strong {

    margin-top: 4px;



    font-size: 18px;

}







.fleet-screen {

    min-height: 420px;



    display: grid;

    grid-template-columns: 58px 1fr;



    overflow: hidden;



    border: 1px solid rgba(255,255,255,.07);

    border-radius: 17px;



    background: #f5f6f7;

}



.screen-sidebar {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 19px;



    padding-top: 16px;



    background: #16191e;

}



.fleet-logo-mini {

    width: 60px;

    height: 60px;



    display: flex;

    align-items: center;

    justify-content: center;



    flex-shrink: 0;



    background: transparent;

    border-radius: 0;

}



.threeo-logo-image {

    width: 100%;

    height: 100%;



    display: block;



    object-fit: contain;

}



.screen-logo {

    width: 44px;

    height: 44px;



    display: flex;

    align-items: center;

    justify-content: center;



    margin-bottom: 16px;



    flex-shrink: 0;



    background: transparent;

    border-radius: 0;

}



.threeo-screen-logo-image {

    width: 100%;

    height: 100%;



    display: block;



    object-fit: contain;

}



.screen-menu {

    width: 18px;

    height: 5px;



    border-radius: 5px;



    background: #444950;

}



.screen-menu.active {

    background: var(--orange);

}



.screen-content {

    padding: 25px;

}



.screen-top {

    display: flex;

    justify-content: space-between;



    margin-bottom: 25px;

}



.screen-top div {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.screen-top div span:first-child {

    width: 110px;

    height: 11px;



    border-radius: 6px;



    background: #252a31;

}



.screen-top div span:last-child {

    width: 70px;

    height: 6px;



    border-radius: 5px;



    background: #d6d9dd;

}



.screen-top > span {

    width: 65px;

    height: 25px;



    border-radius: 7px;



    background: var(--orange);

}



.screen-kpis {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

}



.fake-kpi {

    height: 82px;



    position: relative;



    padding: 13px;



    border: 1px solid #e1e3e6;

    border-radius: 10px;



    background: white;

}



.fake-kpi span {

    width: 22px;

    height: 22px;



    position: absolute;



    right: 10px;

    top: 10px;



    border-radius: 7px;



    background: var(--orange-light);

}



.fake-kpi strong {

    width: 48px;

    height: 12px;



    display: block;



    margin-top: 7px;



    border-radius: 5px;



    background: #3b4047;

}



.fake-kpi small {

    width: 65px;

    height: 5px;



    display: block;



    margin-top: 10px;



    border-radius: 5px;



    background: #e1e3e6;

}



.screen-dashboard {

    display: grid;

    grid-template-columns: 1.6fr .7fr;

    gap: 10px;



    margin-top: 12px;

}



.fake-chart,

.fake-list {

    height: 230px;



    border: 1px solid #e1e3e6;

    border-radius: 10px;



    background: white;

}



.fake-chart {

    padding: 22px 18px 18px;

}



.chart-bars {

    height: 100%;



    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 7px;

}



.chart-bars span {

    width: 100%;



    border-radius: 5px 5px 2px 2px;



    background:

        linear-gradient(

            180deg,

            var(--orange),

            rgba(244,119,33,.35)

        );

}



.fake-list {

    display: flex;

    flex-direction: column;

    gap: 11px;



    padding: 18px;

}



.fake-list span {

    height: 35px;



    border-radius: 7px;



    background: #f1f2f4;

}



.fleet-features {

    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;

}



.fleet-feature {

    padding: 22px;



    border: 1px solid rgba(255,255,255,.08);

    border-radius: 18px;



    background: rgba(255,255,255,.025);

}



.fleet-feature > span {

    color: var(--orange);



    font-size: 9px;

    font-weight: 800;

}



.fleet-feature h3 {

    margin-top: 17px;

    margin-bottom: 8px;



    font-size: 16px;

}



.fleet-feature p {

    color: #858a92;



    font-size: 12px;

    line-height: 1.7;

}





/* ============================================================

   PHILOSOPHY

============================================================ */



.philosophy {

    background: var(--orange);

}



.philosophy-box {

    max-width: 1000px;

    margin: 0 auto;



    text-align: center;

}



.philosophy-label {

    margin-bottom: 35px;



    color: rgba(255,255,255,.7);



    font-size: 10px;

    font-weight: 800;



    text-transform: uppercase;

    letter-spacing: .12em;

}



.philosophy blockquote {

    color: white;



    font-size: clamp(34px, 5vw, 61px);

    font-weight: 700;

    line-height: 1.08;



    letter-spacing: -.05em;

}



.philosophy blockquote span {

    color: #372316;

}



.philosophy p {

    max-width: 660px;



    margin: 32px auto 0;



    color: rgba(255,255,255,.78);



    font-size: 15px;

    line-height: 1.8;

}





/* ============================================================

   HISTORY

============================================================ */



.history {

    background: white;

}



.history-layout {

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 100px;

}



.history-heading {

    position: sticky;

    top: 120px;



    align-self: start;

}



.history-heading p {

    margin-top: 25px;



    color: #747981;



    font-size: 15px;

    line-height: 1.8;

}



.timeline {

    position: relative;

}



.timeline::before {

    content: "";



    width: 1px;



    position: absolute;



    top: 10px;

    bottom: 10px;

    left: 8px;



    background: #dedfe2;

}



.timeline-item {

    position: relative;



    display: grid;

    grid-template-columns: 25px 140px 1fr;

    gap: 24px;



    padding-bottom: 60px;

}



.timeline-item:last-child {

    padding-bottom: 0;

}



.timeline-marker {

    width: 17px;

    height: 17px;



    position: relative;

    z-index: 2;



    display: flex;

    align-items: center;

    justify-content: center;



    border: 1px solid #d5d7da;

    border-radius: 50%;



    background: white;

}



.timeline-marker span {

    width: 5px;

    height: 5px;



    border-radius: 50%;



    background: #a9adb3;

}



.timeline-marker.current {

    border-color: var(--orange);

}



.timeline-marker.current span {

    background: var(--orange);

}



.timeline-date {

    padding-top: 1px;



    color: #959aa1;



    font-size: 10px;

    font-weight: 700;



    text-transform: uppercase;

    letter-spacing: .06em;

}



.timeline-content h3 {

    margin-bottom: 10px;



    font-size: 21px;



    letter-spacing: -.025em;

}



.timeline-content p {

    color: #72777f;



    font-size: 14px;

    line-height: 1.8;

}





/* ============================================================

   CTA

============================================================ */



.cta {

    padding-top: 30px;



    background: white;

}



.cta-box {

    position: relative;

    overflow: hidden;



    display: grid;

    grid-template-columns: 1fr auto;

    gap: 50px;



    align-items: end;



    padding: 65px;



    border-radius: 28px;



    background: var(--dark);

}



.cta-box::after {

    content: "";



    width: 450px;

    height: 450px;



    position: absolute;



    top: -280px;

    right: -130px;



    border-radius: 50%;



    background: rgba(244,119,33,.15);



    filter: blur(30px);

}



.cta-content {

    position: relative;

    z-index: 2;

}



.cta-content h2 {

    max-width: 750px;



    color: white;



    font-size: clamp(36px, 5vw, 57px);

    line-height: 1.05;



    letter-spacing: -.05em;

}



.cta-content h2 span {

    color: var(--orange);

}



.cta-content p {

    max-width: 570px;



    margin-top: 22px;



    color: #969ba3;



    font-size: 15px;

    line-height: 1.75;

}



.cta-actions {

    position: relative;

    z-index: 2;



    display: flex;

    flex-direction: column;

    gap: 10px;



    min-width: 220px;

}





/* ============================================================

   FOOTER

============================================================ */



.footer {

    padding: 80px 0 30px;



    background: white;

}



.footer-top {

    display: grid;

    grid-template-columns: 1fr 1.4fr;

    gap: 100px;



    padding-bottom: 70px;

}



.footer-brand p {

    max-width: 350px;



    margin-top: 23px;



    color: #777c84;



    font-size: 13px;

    line-height: 1.7;

}



.footer-navigation {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px;

}



.footer-column {

    display: flex;

    flex-direction: column;

    gap: 12px;



    color: #72777e;



    font-size: 12px;

}



.footer-column strong {

    margin-bottom: 7px;



    color: #22262b;



    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .08em;

}



.footer-column a {

    transition: color .2s;

}



.footer-column a:hover {

    color: var(--orange);

}



.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;



    padding-top: 25px;



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



    color: #969ba2;



    font-size: 10px;

}



.footer-legal {

    display: flex;

    gap: 25px;

}





/* ============================================================

   SCROLL ANIMATION

============================================================ */



.reveal {

    opacity: 0;

    transform: translateY(24px);



    transition:

        opacity .7s ease,

        transform .7s ease;

}



.reveal.visible {

    opacity: 1;

    transform: translateY(0);

}





/* ============================================================

   RESPONSIVE

============================================================ */



@media (max-width: 1050px) {



    .desktop-nav {

        display: none;

    }



    .menu-button {

        display: flex;

    }



    .hero-container {

        grid-template-columns: 1fr;

        gap: 30px;

    }



    .hero-content {

        max-width: 800px;

    }



    .hero-visual {

        min-height: 520px;

    }



    .manifesto-grid,

    .values-layout,

    .history-layout {

        grid-template-columns: 1fr;

        gap: 60px;

    }



    .section-intro,

    .values-intro,

    .history-heading {

        position: static;

    }



    .fleet-layout {

        grid-template-columns: 1fr;

    }



    .fleet-features {

        grid-template-columns: 1fr 1fr;

    }



    .cta-box {

        grid-template-columns: 1fr;

    }



    .cta-actions {

        flex-direction: row;

        flex-wrap: wrap;

    }



    .footer-top {

        grid-template-columns: 1fr;

        gap: 55px;

    }





    /* MOBILE MENU */



    .mobile-menu {

        position: fixed;



        top: 80px;

        left: 0;

        right: 0;



        display: flex;

        flex-direction: column;

        gap: 3px;



        padding: 20px 24px 30px;



        border-bottom: 1px solid #eceef0;



        background: rgba(255,255,255,.98);



        backdrop-filter: blur(18px);



        transform: translateY(-130%);

        opacity: 0;



        pointer-events: none;



        transition:

            transform .3s ease,

            opacity .3s ease;

    }



    .mobile-menu.active {

        transform: translateY(0);

        opacity: 1;



        pointer-events: auto;

    }



    .mobile-menu a {

        padding: 15px 8px;



        border-bottom: 1px solid #f0f1f2;



        color: #3a3e44;



        font-size: 14px;

        font-weight: 600;

    }



}





@media (max-width: 820px) {



    .section {

        padding: 90px 0;

    }



    .about-cards,

    .purpose-grid {

        grid-template-columns: 1fr;

    }



    .about-card,

    .purpose-card {

        min-height: unset;

    }



    .purpose-card h3 {

        margin-top: 80px;

    }



    .threeo-heading {

        grid-template-columns: 1fr;

        gap: 30px;

    }



    .fleet-features {

        grid-template-columns: 1fr;

    }



    .footer-navigation {

        grid-template-columns: 1fr 1fr;

    }



}





@media (max-width: 620px) {



    .container {

        width: min(

            calc(100% - 30px),

            var(--container)

        );

    }



    .header-container {

        height: 70px;

    }



    .btn-header {

        display: none;

    }



    .mobile-menu {

        top: 70px;

    }



    .hero {

        min-height: auto;



        padding-top: 130px;

        padding-bottom: 65px;

    }



    .hero h1 {

        font-size: 52px;

    }



    .hero-description {

        font-size: 16px;

    }



    .hero-actions {

        flex-direction: column;

    }



    .hero-actions .btn {

        width: 100%;

    }



    .hero-signature {

        grid-template-columns: 25px 1fr;



        margin-top: 35px;

    }



    .signature-line {

        width: 25px;

    }



    .hero-visual {

        min-height: 450px;

    }



    .orbit-one {

        width: 370px;

        height: 370px;

    }



    .orbit-two {

        width: 430px;

        height: 430px;

    }



    .hero-panel {

        padding: 15px;

    }



    .system-grid {

        grid-template-columns: 1fr;

    }



    .section-heading h2,

    .section-intro h2,

    .values-intro h2,

    .history-heading h2 {

        font-size: 42px;

    }



    .section-heading {

        margin-bottom: 45px;

    }



    .manifesto-content {

        padding-top: 0;

    }



    .manifesto-content .large-text {

        font-size: 20px;

    }



    .fleet-main-card {

        padding: 14px;

    }



    .fleet-screen {

        min-height: 330px;



        grid-template-columns: 45px 1fr;

    }



    .screen-content {

        padding: 14px;

    }



    .screen-kpis {

        grid-template-columns: 1fr;

    }



    .fake-kpi:nth-child(2),

    .fake-kpi:nth-child(3) {

        display: none;

    }



    .screen-dashboard {

        grid-template-columns: 1fr;

    }



    .fake-list {

        display: none;

    }



    .fake-chart {

        height: 170px;

    }



    .timeline-item {

        grid-template-columns: 25px 1fr;

        gap: 18px;

    }



    .timeline-date {

        grid-column: 2;

    }



    .timeline-content {

        grid-column: 2;

    }



    .cta-box {

        padding: 40px 25px;

    }



    .cta-actions {

        flex-direction: column;

    }



    .cta-actions .btn {

        width: 100%;

    }



    .footer-navigation {

        grid-template-columns: 1fr;

    }



    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }



    .footer-legal {

        flex-direction: column;

        gap: 8px;

    }



}