@charset "UTF-8";
@import "/css/cairo.css";

/* ==========================================================================
   Root-Variablen (Design + Nav-Verhalten)
   ========================================================================== */
:root {
    /* Body */
    --bs-body-font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bs-body-color: #111;
    --bs-body-bg: #fff;

    /* Nav-Verhalten/Look */
    --nav-gap: 24px;                 /* Abstand zum oberen Rand, wenn fixiert */
    --nav-appear-offset: 30px;       /* wie viel NACH der Original-Position erst erscheinen */
    --nav-pad-y: 16px;               /* zusätzliches Padding Y */
    --nav-pad-x: 24px;               /* zusätzliches Padding X */
    --nav-border: #EBEBEB;           /* graue Border */
    --nav-radius: 12px;
    --nav-shadow: 0 6px 18px rgba(0,0,0,.06);
    --nav-fade-duration: 550ms;      /* 550–800ms angenehm */
    --nav-fade-ease: cubic-bezier(.22,.61,.36,1);
    --nav-mobile-margin: 16px;       /* seitlicher Rand auf kleinen Screens (per JS genutzt) */
}

/* ==========================================================================
   Reset / Base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--bs-body-font-family);
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

ul[class],
ol[class] { list-style: none; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

a { text-decoration: none; color: #fff; font-weight: 500; }

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
img.flag { display: inline; }

input, button, textarea, select { font: inherit; color: inherit; }
textarea { resize: vertical; }
button { cursor: pointer; background: none; border: none; }

@media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Typografie-Helfer
   ========================================================================== */
/* .custom   { font-family: 'Poppins', sans-serif; } */
.custom__c{ text-align: center; margin: 0 auto; }
.custom__sm{ font-size: 32px; }
.custom__md{ font-size: 38px !important; }

/* ==========================================================================
   Layout
   ========================================================================== */
.container { max-width: 1305px; margin: 0 auto; padding: 0 20px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    background-color: #1CC0F0;
    padding: 14px 57px;
    border-radius: 9px;
    align-items: center;
    display: inline-flex;
    gap: 12px;
    transition: all 0.5s ease-in-out;
}
.btn:hover { background-color: #51d9ff; }
.btn_purple { background-color: #DE3CEA; }

/* ==========================================================================
   Sections / Text
   ========================================================================== */
.section__p { color: #5E7F8D; font-size: 18px; line-height: 120%; font-weight: 400; }
.section__p.custom.justify { text-align: justify; }

.section__p-is_feature {
    padding-left: 28px; position: relative; color: #5E7F8D;
    font-size: 18px; line-height: 120%; font-weight: 400; margin-bottom: 20px;
}
.section__p-is_feature:last-of-type { margin-bottom: 48px; }
.section__p-is_feature::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 20px; height: 2px; background-color: #1CC0F0;
    transform: translateY(-50%); border-radius: 2px;
}

.section__title { color: #173746; font-size: 32px; line-height: 120%; font-weight: 500; max-width: 1080px; }
.services__title { margin-bottom: 32px; }

/* ==========================================================================
   Header / Hero
   ========================================================================== */
.header {
    background: url('/img/bg.svg') center / cover no-repeat;
    padding-top: 40px;
    text-align: center;
    margin-bottom: 120px;
}
@media (min-width: 1000px) { .header { background-size: 1000px auto; } }

.nav___wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 286px;
}

.links_item { margin-left: 64px; color: #273F4A; }
.links_item:last-child { padding-right: 5px; }
.hero_logo { margin: 0 auto 33px; }

.hero__title {
    color: #173746; font-size: 64px; line-height: 120%; font-weight: 500;
    margin: 0 auto 24px; max-width: 1080px;
}
.hero__text  {
    color: #5E7F8D; font-size: 18px; line-height: 120%; font-weight: 400;
    margin: 0 auto 33px; max-width: 671px;
}
.seen_p { margin: 64px auto 32px; color: #5E7F8D; font-size: 16px; line-height: 120%; font-weight: 400; }
.logos_flex { display: flex; align-items: center; justify-content: space-between; }

/* ==========================================================================
   Services
   ========================================================================== */
.services__flex { display: flex; align-items: center; justify-content: space-between; }
.datatory__content { max-width: 509px; align-self: start; }
.services__flex:first-of-type { margin-bottom: 160px; }
.services { margin-bottom: 120px; }

/* ==========================================================================
   Consulting
   ========================================================================== */
.consulting { margin-bottom: 120px; }
.consulting__p { max-width: 647px; text-align: center; margin: 20px auto 80px; }
.consulting__flex { display: flex; justify-content: space-between; align-items: center; }

.data, .energy {
    padding: 32px 32px 48px; border: 1px solid #EBEBEB; border-radius: 12px; max-width: 625px; min-height: 400px;
}
.data__icon, .energy__icon { box-shadow: 4px 4px 14px 8px rgba(34, 60, 80, 0.05); border-radius: 999px; }
.icon__flex { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.consulting__p-inner { margin: 0 0 40px; text-align: left; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { text-align: center; margin-bottom: 120px; }

.contact__wrapper {
    position: relative; background: url('../img/hero_lines.svg') center / cover no-repeat;
    margin: 0 auto; border-radius: 22px; border: 1px solid #EBEBEB;
    padding: 86px 128px 100px; overflow: hidden;
}
.contact__p { max-width: 741px; margin: 20px auto 40px; }
.blur1 { position: absolute; right: 0; bottom: 0; z-index: -2; }
.blur2 { position: absolute; top: 0; left: 0; z-index: -2; }

.contact__btn {
    background-color: #1CC0F0; padding: 14px 57px; border-radius: 9px;
    align-items: center; display: inline-flex; gap: 12px;
}
.contact__btn::before { content: url('../img/mail.svg'); width: 20px; height: 20px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { align-content: start; text-align: left; padding: 64px 0 48px; color: #5E7F8D; }
.footer__logo { display: inline-flex; margin: 0 auto; }
.footer__cr {
    font-size: 15px;
    line-height: 120%;
    font-weight: 300;
}

.footer__navs {
    justify-content: start; display: flex; gap: 32px; padding-bottom: 64px;
}

ul.footer_navs {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.footer_navs li {
    display: block;
}

ul.footer_navs li a {
    color: #5E7F8D; font-size: 16px; line-height: 120%; font-weight: 400;
}

.bottom-ruler { border-bottom: 1px solid #EBEBEB; margin-bottom: 32px; }
.navs__link { color: #5E7F8D; }

.flex__bottom { display: flex; align-items: center; justify-content: space-between; }
copyrights,
.copyrights_l {
    display: inline-flex; color: #667085; font-size: 16px; line-height: 120%; font-weight: 400;
}
.copyrights_l { margin-left: 16px; }

/* ==========================================================================
   NAV: sprungfrei + Fade-in (Original bleibt im Flow), fixe Kopie oben
   ========================================================================== */
/* Original-Navi bleibt im Flow (keine Layout-Änderung) */
.nav___wrapper { /* Layout siehe oben */ }

/* Wenn „gepinnt“: Original unsichtbar, aber im Flow (KEIN SPRUNG) */
.nav___wrapper.is-pinned { visibility: hidden; }

/* Fixe Kopie (per JS erzeugt: .nav-float) */
.nav-float {
    position: fixed;
    top: var(--nav-gap);
    z-index: 3000;
    display: none;                   /* JS schaltet auf flex */
    align-items: center;
    justify-content: space-between;

    background: #fff;
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius);
    padding: var(--nav-pad-y) var(--nav-pad-x);
    box-shadow: var(--nav-shadow);

    opacity: 0;
    transform: translateY(-6px);
    transition:
            opacity  var(--nav-fade-duration) var(--nav-fade-ease),
            transform var(--nav-fade-duration) var(--nav-fade-ease);
    will-change: opacity, transform;
}
.nav-float.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.nav-float .links_item { color: #273F4A; }

/* Alternative (falls du die echte Leiste fixierst): Basis + Fade */
.header .nav___wrapper {
    position: static;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: auto;
}
.header .nav___wrapper.is-fixed {
    position: fixed;
    top: var(--nav-gap);
    z-index: 2000;
    left: 0;               /* JS setzt exakte left/width */
    width: 100%;
    background-color: #fff;
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius);
    padding: var(--nav-pad-y) var(--nav-pad-x);
    box-shadow: var(--nav-shadow);

    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    visibility: hidden;
    transition:
            opacity  var(--nav-fade-duration) var(--nav-fade-ease),
            transform var(--nav-fade-duration) var(--nav-fade-ease);
}
.header .nav___wrapper.is-fixed.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

/* Platzhalter gegen Layout-Shift (wird per JS in der Höhe gesetzt) */
.nav-placeholder { height: 0; }

/* Mobile: etwas mehr Innenabstand der schwebenden Kopie */
@media (max-width: 768px){
    .nav-float{
        padding: calc(var(--nav-pad-y) + 2px) calc(var(--nav-pad-x) + 2px);
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1280px) {
    .consulting__flex { gap: 3%; }
    .hero__title { font-size: 48px; }
    .logos_flex { flex-wrap: wrap; justify-content: center; gap: 20px; }
    .datatory__img { max-width: 45%; }
    .agentory__img { max-width: 45%; }
    .header { background-size: 133%; }
}

@media (max-width: 1100px) {
    .datatory__content:last-of-type { max-width: 483px; padding-left: 30px; }
    .header { background-size: 143%; }
}

@media (max-width: 1024px) {
    .links_item { margin-left: 24px; }
    .services__flex { flex-wrap: wrap; justify-content: center; }
    .datatory__img, .agentory__img { max-width: 100%; }
    .datatory__content { max-width: 609px !important; }
    .datatory__img { margin-top: 40px; }
    .agentory__img { margin-bottom: 40px; }
    .icon__flex { flex-wrap: wrap; }
    .contact__wrapper { padding: 32px 38px 32px; }
    .nav___wrapper { margin-bottom: 90px; }
    .header, .services, .consulting, .contact { margin-bottom: 100px; }
    .header { background-size: 153%; }
}

@media (max-width: 768px) {
    .consulting__flex { flex-wrap: wrap; gap: 32px; }
    .nav__links_wrapper { display: none; }
    .header, .services, .consulting, .contact { margin-bottom: 90px; }
    .header { background-size: 227%; }
}

@media (max-width: 600px) {
    .footer__navs { flex-wrap: wrap; max-width: 400px; margin: 0 auto 24px; padding-bottom: 24px; }
    .flex__bottom { flex-wrap: wrap; justify-content: center; gap: 20px; }
    .hero__title { font-size: 32px; }
    .hero_logo { max-width: 19%; }
    .header, .services, .consulting, .contact { margin-bottom: 80px; }
    .services__flex { margin-bottom: 40px !important; }
    .consulting__p { margin-bottom: 40px; }
    .header { background-size: 240%; }
}

@media (max-width: 480px) {
    .header { background-size: 450%; }
}

@media (max-width: 375px) { /* intentionally empty */ }