/*
========================================================
AI Calling Landingpage
Eigene Styles für die KI Seite
========================================================
*/


/*
========================================================
Grundlayout
========================================================
*/

body{
    background:#050816;
}

/*
========================================================
Navbar Buttons
========================================================
*/

.nav-cta-group{
    display:flex !important;
    align-items:center;
    gap:14px;

    margin-left:28px;
    padding-top:10px;
}

.nav-btn{
    height:46px;
    padding:0 24px !important;

    display:inline-flex !important;
    align-items:center;
    justify-content:center;

    border-radius:999px !important;

    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:1.6px;
    text-transform:uppercase;

    transition:all .28s ease !important;
}

.nav-btn:hover{
    transform:translateY(-2px);
}

.nav-btn-primary{
    color:#fff !important;

    border:1px solid rgba(139,92,246,.55) !important;

    background:
        linear-gradient(
            135deg,
            #7c4dff 0%,
            #8b5cf6 100%
        ) !important;

    box-shadow:
        0 10px 30px rgba(124,77,255,.22);
}

.nav-btn-primary:hover{
    box-shadow:
        0 16px 40px rgba(124,77,255,.34);

    border-color:#9f7cff !important;
}

.nav-btn-secondary{
    color:#fff !important;

    background:rgba(255,255,255,.02) !important;

    border:1px solid rgba(255,255,255,.12) !important;

    backdrop-filter:blur(10px);
}

.nav-btn-secondary:hover{
    border-color:rgba(139,92,246,.45) !important;

    background:rgba(139,92,246,.08) !important;
}

/*
========================================================
Kontaktinfos Navbar
========================================================
*/

.nav-contact-info{
    display:inline-block !important;

    padding:25px 0 0 10px !important;

    font-size:12px;
    font-weight:600;

    line-height:20px;

    text-transform:none;

    vertical-align:middle;
}

.nav-contact-info a{
    color:#ffffff;

    text-decoration:none;

    transition:.25s ease;
}

.nav-contact-info a:hover{
    color:#8b5cf6;
}

.nav-contact-divider{
    margin:0 10px;

    color:rgba(255,255,255,.35);
}

/*
========================================================
Hero Bereich
========================================================
*/

.ai-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:
        radial-gradient(circle at 78% 35%, rgba(124,77,255,.32), transparent 28%),
        radial-gradient(circle at 15% 90%, rgba(0,102,255,.15), transparent 28%),
        linear-gradient(90deg,#020617 0%, #020817 40%, #120b33 100%);
}

.ai-hero::before{
    content:"";
    position:absolute;
    inset:0;

    background:url("../images/grid.png");
    background-size:cover;

    opacity:.045;
    pointer-events:none;
}

.ai-hero::after{
    content:"";
    position:absolute;
    right:-250px;
    top:-120px;

    width:950px;
    height:950px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(139,92,246,.20) 0%,
        rgba(139,92,246,.10) 35%,
        transparent 72%);

    filter:blur(55px);
}

.hero-content{
    position:relative;
    z-index:5;

    padding-right:50px;
    padding-top:40px;
}

.ai-subtitle{
    color:#8b5cf6;

    font-size:17px;
    font-weight:700;

    letter-spacing:3px;
    text-transform:uppercase;

    margin-bottom:28px;

    display:block;
}

.ai-title{
    font-size:68px;
    line-height:1.1;
    font-weight:700;

    color:#fff;

    margin-bottom:30px;
}

.ai-title span{
    color:#8b5cf6;
}

.ai-description{
    font-size:22px;
    line-height:1.85;

    color:#cfd4e3;

    max-width:650px;

    margin-bottom:45px;
}


/*
========================================================
Hero Buttons
========================================================
*/

.hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;

    margin-bottom:70px;
}

.hero-btn-primary{
    background:linear-gradient(135deg,#7c4dff,#8b5cf6);

    border:none !important;
    color:#fff !important;

    box-shadow:
        0 10px 30px rgba(124,77,255,.25);

    transition:.3s;
}

.hero-btn-primary:hover{
    transform:translateY(-2px);

    box-shadow:
        0 15px 40px rgba(124,77,255,.35);
}

.hero-btn-secondary{
    background:transparent !important;

    border:1px solid rgba(255,255,255,.18) !important;

    color:#fff !important;

    transition:.3s;
}

.hero-btn-secondary:hover{
    transform:translateY(-2px);

    border-color:#8b5cf6 !important;

    background:rgba(124,77,255,.08) !important;
}


/*
========================================================
Hero Telefon
========================================================
*/

.hero-phone-area{
    position:relative;

    height:820px;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    padding-right:20px;
}

.hero-phone-area::before{
    content:"";
    position:absolute;

    width:760px;
    height:760px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(124,77,255,.40) 0%,
        rgba(124,77,255,.14) 35%,
        rgba(0,102,255,.06) 58%,
        transparent 72%);

    filter:blur(45px);
}

.hero-phone-area::after{
    content:"";
    position:absolute;
    inset:0;

    background:url("../images/grid.png");
    background-size:cover;

    opacity:.08;

    mix-blend-mode:screen;
}

.hero-phone{
    position:relative;
    z-index:5;

    width:420px;
    max-width:none;

    transform:
        translateX(70px)
        translateY(10px);

    filter:
        drop-shadow(0 0 40px rgba(124,77,255,.22))
        drop-shadow(0 0 100px rgba(124,77,255,.10));
}


/*
========================================================
Partner Box im Hero
========================================================
*/

.hero-partner-box{
    margin-top:75px;
    max-width:520px;

    padding:28px 34px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            rgba(18,24,50,0.88),
            rgba(8,12,30,0.82)
        );

    border:1px solid rgba(255,255,255,0.06);

    backdrop-filter: blur(10px);

    box-shadow:
        0 0 40px rgba(76, 29, 149, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.03);
}

.hero-partner-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;
    flex-wrap:wrap;
}

.hero-partner-label{
    font-size:16px;
    font-weight:600;

    letter-spacing:1.5px;
    text-transform:uppercase;

    color:#8b5cf6;
}

.hero-partner-logo{
    height:50px;
    width:auto;

    opacity:0.95;
}

.hero-partner-divider{
    width:100%;
    height:1px;

    margin:22px 0;

    background:
        linear-gradient(
            to right,
            rgba(139,92,246,0.35),
            rgba(255,255,255,0.02)
        );
}

.hero-partner-text{
    margin:0;

    font-size:14px;
    line-height:1.9;

    color:#c4cad9;
}


/*
========================================================
Produktkarten
========================================================
*/

.ai-card{
    background:rgba(13,18,40,0.7);

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

    border-radius:18px;

    padding:40px 35px;

    height:100%;

    position:relative;
    overflow:hidden;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.ai-card:hover{
    transform:translateY(-6px);

    border-color:rgba(139,92,246,.45);

    box-shadow:0 0 30px rgba(124,77,255,.15);
}

.ai-icon{
    width:70px;
    height:70px;

    border-radius:50%;

    background:rgba(124,77,255,.12);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;

    color:#8b5cf6;

    margin-bottom:30px;
}

.ai-card h3{
    color:#fff;

    font-size:28px;

    margin-bottom:18px;
}

.ai-card p{
    color:#b8bfd3;

    line-height:1.8;

    margin-bottom:25px;
}


/*
========================================================
Coming Soon Badge
========================================================
*/

.coming-soon-badge{
    position:absolute;

    top:55px;
    right:60px;

    padding:8px 14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;

    letter-spacing:1.2px;
    text-transform:uppercase;

    color:#cdb7ff;

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,0.22),
            rgba(124,77,255,0.10)
        );

    border:1px solid rgba(139,92,246,0.25);

    backdrop-filter: blur(8px);

    box-shadow:
        0 0 20px rgba(139,92,246,0.12);
}


/*
========================================================
Listen / Checks
========================================================
*/

.ai-check{
    list-style:none;

    padding:0;
    margin:0;
}

.ai-check li{
    color:#d6d9e5;

    margin-bottom:12px;
}

.ai-check li i{
    color:#8b5cf6;

    margin-right:10px;
}


/*
========================================================
Highlight Bereich
========================================================
*/

.ai-highlight{
    background:
        linear-gradient(135deg, rgba(14,20,45,.95), rgba(10,15,35,.95));

    border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.ai-feature{
    text-align:center;

    padding:20px;
}

.ai-feature i{
    font-size:42px;

    color:#8b5cf6;

    margin-bottom:20px;

    display:block;
}

.ai-feature h4{
    color:#fff;

    margin-bottom:12px;
}

.ai-feature p{
    color:#b9c0d1;

    line-height:1.7;
}


/*
========================================================
Partner Bereich
========================================================
*/

.partner-connector{
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    padding-top:350px;
}

.partner-x{
    width:120px;
    height:120px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:60px;
    font-weight:300;

    color:#8b5cf6;

    background:
        radial-gradient(
            circle at top,
            rgba(139,92,246,.22),
            rgba(139,92,246,.08)
        );

    border:1px solid rgba(139,92,246,.22);

    box-shadow:
        0 0 40px rgba(139,92,246,.12),
        inset 0 1px 0 rgba(255,255,255,.05);

    backdrop-filter: blur(10px);
}


/*
========================================================
Profilkarten
========================================================
*/

.ai-profile-card{
    background:rgba(13,18,40,0.75);

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

    border-radius:20px;

    padding:45px;

    height:100%;
}

.ai-profile-card img{
    width:100%;
    height:420px;

    object-fit:cover;
    object-position:center top;

    border-radius:14px;

    margin-top:25px;
}

.ai-profile-card h2{
    color:#fff;

    font-size:54px;

    margin-bottom:0;
}

.ai-profile-card h4{
    color:#8b5cf6;

    margin-bottom:35px;
}

.ai-profile-list{
    list-style:none;

    padding:0;
    margin:0;
}

.ai-profile-list li{
    color:#d5daea;

    padding:18px 0;

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

    font-size:18px;
}

.ai-profile-list li i{
    color:#8b5cf6;

    margin-right:14px;
}


/*
========================================================
CTA Bereich
========================================================
*/

.ai-cta{
    padding:90px 0;

    background:
        radial-gradient(circle at center, rgba(124,77,255,.2), transparent 40%),
        #060915;

    text-align:center;
}

.ai-cta h2{
    font-size:54px;

    color:#fff;

    margin-bottom:25px;
}

.ai-cta p{
    font-size:20px;

    color:#c6cbda;

    margin-bottom:40px;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:18px;
    flex-wrap:wrap;

    margin-top:40px;
}


/*
========================================================
Footer
========================================================
*/

.footer-meta{
    margin-top:70px;

    text-align:center;

    font-size:11px;

    letter-spacing:.8px;

    text-transform:uppercase;

    color:rgba(255,255,255,.22);
}


/*
========================================================
Responsive
========================================================
*/

@media(max-width:991px){

    .nav-cta-group{
        flex-direction:column;
        align-items:flex-start;

        gap:10px;

        margin-left:0;
        padding:15px;
    }

    .nav-btn{
        width:100%;
    }

    .ai-hero{
        padding:140px 0 80px;
        min-height:auto;
    }

    .hero-content{
        padding-right:0;
        text-align:center;
    }

    .ai-title{
        font-size:52px;
        line-height:1.15;
    }

    .ai-description{
        font-size:19px;

        margin-left:auto;
        margin-right:auto;
    }

    .hero-phone-area{
        height:auto;
        margin-top:40px;
    }

    .hero-phone{
        width:360px;
        max-width:100%;
    }

    .ai-profile-card{
        margin-bottom:30px;
    }

    .partner-connector{
        display:none;
    }
}

@media(max-width:767px){

    .ai-title{
        font-size:38px;
    }

    .ai-description{
        font-size:17px;
    }

    .ai-cta h2{
        font-size:38px;
    }

    .coming-soon-badge{
        top:20px;
        right:20px;
    }
}


/*
========================================================
Animationen & Lebendigkeit
========================================================
*/

/* Floating Phone */
@keyframes ai-float {
    0%, 100% { transform: translateX(70px) translateY(10px); }
    50%       { transform: translateX(70px) translateY(-18px); }
}
@keyframes ai-float-mobile {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-12px); }
}

.hero-phone {
    animation: ai-float 5.5s ease-in-out infinite;
}

/* Partner-X Glow-Puls */
.partner-x {
    animation: partner-pulse 3s ease-in-out infinite;
}
@keyframes partner-pulse {
    0%, 100% { box-shadow: 0 0 40px rgba(139,92,246,.12), inset 0 1px 0 rgba(255,255,255,.05); }
    50%       { box-shadow: 0 0 70px rgba(139,92,246,.32), inset 0 1px 0 rgba(255,255,255,.05); }
}

/* Scroll-In Basis */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Feature-Karten Hover */
.ai-feature {
    border-radius: 16px;
    border: 1px solid transparent;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.ai-feature:hover {
    transform: translateY(-7px);
    border-color: rgba(139,92,246,.22);
    background: rgba(139,92,246,.05);
}
.ai-feature i {
    transition: transform 0.3s ease;
}
.ai-feature:hover i {
    transform: scale(1.15);
}

/* Profil-Karten Hover */
.ai-profile-card {
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.ai-profile-card:hover {
    transform: translateY(-5px);
    border-color: rgba(139,92,246,.30);
    box-shadow: 0 24px 60px rgba(124,77,255,.14);
}


/*
========================================================
Responsive — Tablet (≤ 991px) Ergänzungen
========================================================
*/
@media(max-width:991px) {
    .hero-phone {
        animation: ai-float-mobile 5.5s ease-in-out infinite;
    }
    .hero-buttons {
        justify-content: center;
    }
    .ai-subtitle {
        text-align: center;
    }
    .hero-partner-box {
        margin-left: auto;
        margin-right: auto;
    }
}


/*
========================================================
Responsive — Mobile (≤ 767px) Ergänzungen
========================================================
*/
@media(max-width:767px) {
    .hero-phone {
        width: 280px;
        max-width: 80vw;
    }
    .hero-phone-area {
        justify-content: center;
        margin-top: 30px;
        padding-right: 0;
    }
    .hero-partner-box {
        max-width: 100%;
        padding: 22px 20px;
        margin-top: 40px;
    }
    .hero-partner-top {
        gap: 14px;
    }
    .hero-partner-logo {
        height: 36px;
    }
    .ai-card {
        margin-bottom: 20px;
    }
    .ai-profile-card img {
        height: 280px;
    }
    .partner-title {
        font-size: 30px !important;
        line-height: 1.25;
    }
    .partner-description {
        font-size: 16px;
    }
    .ai-feature {
        margin-bottom: 12px;
    }
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .cta-buttons .btn {
        width: 100%;
        max-width: 320px;
    }
}


/*
========================================================
Responsive — Klein-Mobile (≤ 480px)
========================================================
*/
@media(max-width:480px) {
    .ai-title {
        font-size: 30px;
        line-height: 1.2;
    }
    .ai-subtitle {
        font-size: 13px;
        letter-spacing: 2px;
        margin-bottom: 18px;
    }
    .ai-description {
        font-size: 15px;
        margin-bottom: 30px;
    }
    .hero-phone {
        width: 210px;
    }
    .hero-buttons .btn {
        width: 100%;
    }
    .hero-buttons {
        flex-direction: column;
        gap: 12px;
    }
    .hero-partner-box {
        padding: 18px 16px;
    }
    .hero-partner-label {
        font-size: 12px;
        letter-spacing: 1px;
    }
    .hero-partner-text {
        font-size: 13px;
    }
    .ai-cta h2 {
        font-size: 26px;
    }
    .ai-cta p {
        font-size: 15px;
    }
    .coming-soon-badge {
        font-size: 10px;
        padding: 5px 10px;
        top: 14px;
        right: 14px;
    }
    .ai-card {
        padding: 28px 20px;
    }
    .ai-icon {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }
    .ai-profile-card {
        padding: 28px 20px;
    }
    .ai-profile-card h2 {
        font-size: 36px;
    }
    .ai-profile-card img {
        height: 230px;
    }
    .ai-cta {
        padding: 60px 0;
    }
}