/* =====================================
   FULLBOTZ AI LANDING
===================================== */

:root{

    --primary:#0F172A;
    --secondary:#1E293B;

    --ai:#06B6D4;
    --ai2:#8B5CF6;

    --success:#22C55E;

    --white:#FFFFFF;

    --text:#CBD5E1;

    --radius:24px;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Cairo',sans-serif;

    background:#020617;

    color:white;

    overflow-x:hidden;

}

/* =====================================
   NAVBAR
===================================== */

.navbar{

    padding:20px 0;

    background:transparent;

    transition:.4s;

}

.navbar-scrolled{

    background:
    rgba(2,6,23,.92);

    backdrop-filter:blur(20px);

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

}

.navbar-brand img{

    height:60px;

}

/* =====================================
   HERO
===================================== */

.hero-section{

    min-height:100vh;

    position:relative;

    overflow:hidden;

    background:
    radial-gradient(
    circle at top right,
    rgba(139,92,246,.25),
    transparent 35%
    ),

    radial-gradient(
    circle at bottom left,
    rgba(6,182,212,.20),
    transparent 35%
    ),

    #020617;

}

.ai-glow{

    position:absolute;

    width:600px;
    height:600px;

    background:
    radial-gradient(
    circle,
    rgba(6,182,212,.25),
    transparent
    );

    top:-150px;
    right:-150px;

    filter:blur(40px);

}

.hero-content{

    position:relative;

    z-index:2;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

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

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

    backdrop-filter:blur(15px);

    padding:12px 22px;

    border-radius:50px;

    margin-bottom:30px;

    color:#8B5CF6;

    font-weight:700;

}

.hero-content h1{

    font-size:72px;

    font-weight:900;

    line-height:1.2;

}

.hero-content h1 span{

    background:
    linear-gradient(
    90deg,
    #06B6D4,
    #8B5CF6
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero-content p{

    margin-top:25px;

    color:#CBD5E1;

    font-size:22px;

    line-height:2;

    max-width:650px;

}

.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-top:35px;

}

.btn-primary-custom{

    background:
    linear-gradient(
    90deg,
    #06B6D4,
    #8B5CF6
    );

    color:white;

    border:none;

    text-decoration:none;

    padding:16px 34px;

    border-radius:16px;

    font-weight:700;

    transition:.3s;

}

.btn-primary-custom:hover{

    transform:
    translateY(-4px);

    color:white;

}

.btn-outline-custom{

    border:
    2px solid rgba(255,255,255,.2);

    color:white;

    text-decoration:none;

    padding:16px 34px;

    border-radius:16px;

    font-weight:700;

}

.btn-outline-custom:hover{

    background:white;

    color:#020617;

}

.hero-tags{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:35px;

}

.hero-tags div{

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

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

    backdrop-filter:blur(12px);

    padding:12px 18px;

    border-radius:50px;

}

/* =====================================
   HERO IMAGE
===================================== */

.hero-image{

    position:relative;

    z-index:2;

    text-align:center;

}

.hero-image img{

    width:100%;

    max-width:650px;

    animation:
    floating 6s ease-in-out infinite;

}

@keyframes floating{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0);
    }

}

/* =====================================
   SECTION TITLE
===================================== */

.section-header{

    text-align:center;

    margin-bottom:80px;

}

.section-header h2{

    font-size:56px;

    font-weight:900;

}

.section-header p{

    color:#94A3B8;

    margin-top:15px;

    font-size:20px;

}

/* =====================================
   PROBLEM SECTION
===================================== */

.problem-section{

    padding:140px 0;

    background:#0B1220;

}

.problem-card{

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

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

    backdrop-filter:blur(15px);

    border-radius:28px;

    padding:35px 25px;

    text-align:center;

    height:100%;

    transition:.35s;

}

.problem-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(6,182,212,.35);

}

.problem-card{

    font-size:40px;

}

.problem-card h4{

    margin-top:20px;

    font-weight:700;

    font-size:20px;

}

/* =====================================
   DIFFERENCE
===================================== */

.difference-section{

    padding:140px 0;

    background:#020617;

}

.difference-box{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.bad-points,
.good-points{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    justify-content:center;

}

.bad-points div{

    background:
    rgba(239,68,68,.12);

    border:
    1px solid rgba(239,68,68,.25);

    padding:18px 24px;

    border-radius:18px;

}

.good-points div{

    background:
    rgba(34,197,94,.12);

    border:
    1px solid rgba(34,197,94,.25);

    padding:18px 24px;

    border-radius:18px;

}

.arrow{

    font-size:60px;

    margin:50px 0;

    color:#06B6D4;

}

/* =====================================
   FEATURES
===================================== */

.features-section{

    padding:140px 0;

    background:#0B1220;

}

.feature-card{

    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.03)
    );

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

    backdrop-filter:blur(20px);

    border-radius:30px;

    padding:40px;

    text-align:center;

    height:100%;

    transition:.35s;

}

.feature-card:hover{

    transform:
    translateY(-10px);

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

}

.feature-card{

    font-size:45px;

}

.feature-card h4{

    margin-top:20px;

    font-weight:800;

}

/* =====================================
   INBOX SECTION
===================================== */

.inbox-section{

    padding:140px 0;

    background:#020617;

}

.inbox-image{

    border-radius:30px;

    box-shadow:
    0 25px 70px rgba(0,0,0,.35);

}

.inbox-section h2{

    font-size:52px;

    font-weight:900;

    margin-bottom:30px;

}

.inbox-list{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.inbox-list div{

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

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

    border-radius:18px;

    padding:18px 22px;

    font-size:18px;

}

/* =====================================
   HANDOFF SECTION
===================================== */

.handoff-section{

    padding:140px 0;

    background:#0B1220;

}

.timeline{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}

.timeline-item{

    width:180px;

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

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

    border-radius:24px;

    text-align:center;

    padding:35px 20px;

    font-size:42px;

    transition:.3s;

}

.timeline-item:hover{

    transform:
    translateY(-8px);

}

.timeline-item p{

    margin-top:15px;

    font-size:18px;

}

/* =====================================
   BENEFITS
===================================== */

.benefits-section{

    padding:140px 0;

    background:#020617;

}

.benefit-card{

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

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

    border-radius:28px;

    text-align:center;

    padding:40px;

    height:100%;

    transition:.35s;

}

.benefit-card:hover{

    transform:
    translateY(-10px);

}

.benefit-card{

    font-size:42px;

}

.benefit-card h4{

    margin-top:20px;

    font-weight:800;

}

/* =====================================
   HOW IT WORKS
===================================== */

.how-section{

    padding:140px 0;

    background:#0B1220;

}

.timeline-vertical{

    max-width:700px;

    margin:auto;

}

.step{

    position:relative;

    padding:25px 30px;

    margin-bottom:25px;

    border-radius:24px;

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

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

    font-size:20px;

    font-weight:700;

    transition:.3s;

}

.step:hover{

    transform:
    translateX(-8px);

    border-color:
    rgba(6,182,212,.35);

}

/* =====================================
   DECISION SECTION
===================================== */

.decision-section{

    padding:140px 0;

    background:
    linear-gradient(
    135deg,
    #111827,
    #020617
    );

}

.decision-section h2{

    font-size:56px;

    font-weight:900;

    margin-bottom:25px;

}

.decision-section p{

    color:#94A3B8;

    font-size:22px;

}

.loss-boxes{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:20px;

    margin-top:50px;

}

.loss-boxes div{

    background:
    rgba(239,68,68,.12);

    border:
    1px solid rgba(239,68,68,.25);

    border-radius:18px;

    padding:18px 25px;

    font-weight:700;

}

/* =====================================
   WHY FULLBOTZ
===================================== */

.why-section{

    padding:140px 0;

    background:#0B1220;

}

.circle-system{

    position:relative;

    width:500px;

    height:500px;

    margin:auto;

}

.center-circle{

    position:absolute;

    top:50%;
    left:50%;

    transform:
    translate(-50%,-50%);

    width:180px;
    height:180px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #06B6D4,
    #8B5CF6
    );

    display:flex;

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

    text-align:center;

    font-size:28px;

    font-weight:900;

    box-shadow:
    0 20px 60px rgba(139,92,246,.35);

}

.small-circle{

    position:absolute;

    width:130px;
    height:130px;

    border-radius:50%;

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

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

    display:flex;

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

    text-align:center;

    font-weight:700;

}

.small-circle:nth-child(2){

    top:0;
    left:50%;

    transform:
    translateX(-50%);

}

.small-circle:nth-child(3){

    bottom:0;
    left:50%;

    transform:
    translateX(-50%);

}

.small-circle:nth-child(4){

    top:50%;
    right:0;

    transform:
    translateY(-50%);

}

.small-circle:nth-child(5){

    top:50%;
    left:0;

    transform:
    translateY(-50%);

}

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

.cta-section{

    padding:160px 0;

    background:
    linear-gradient(
    135deg,
    #06B6D4,
    #8B5CF6
    );

    text-align:center;

}

.cta-section h2{

    font-size:60px;

    font-weight:900;

}

.cta-section p{

    font-size:24px;

    margin:25px 0 40px;

}

.cta-section .btn{

    padding:18px 40px;

    border-radius:18px;

    font-weight:800;

    font-size:18px;

}

/* =====================================
   FOOTER
===================================== */

.footer{

    background:#020617;

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

    padding:50px 0;

}

.footer h5{

    font-weight:900;

    margin-bottom:15px;

}

.footer p{

    color:#94A3B8;

}

/* =====================================
   WHATSAPP FLOAT
===================================== */

.whatsapp-float{

    position:fixed;

    left:20px;
    bottom:20px;

    width:72px;
    height:72px;

    border-radius:50%;

    background:#22C55E;

    color:white;

    display:flex;

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

    text-decoration:none;

    font-size:34px;

    z-index:99999;

    box-shadow:
    0 0 30px rgba(34,197,94,.45);

    animation:
    pulse 2s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:
        0 0 0 0 rgba(34,197,94,.55);

    }

    70%{

        box-shadow:
        0 0 0 20px rgba(34,197,94,0);

    }

    100%{

        box-shadow:
        0 0 0 0 rgba(34,197,94,0);

    }

}

/* =====================================
   MOBILE
===================================== */

@media(max-width:991px){

.hero-content{

    text-align:center;

}

.hero-content h1{

    font-size:42px;

}

.hero-content p{

    font-size:18px;

}

.hero-buttons{

    justify-content:center;

}

.hero-tags{

    justify-content:center;

}

.hero-image{

    margin-top:50px;

}

.section-header h2{

    font-size:34px;

}

.inbox-section h2{

    font-size:34px;

    margin-top:40px;

}

.timeline{

    flex-direction:column;

    align-items:center;

}

.circle-system{

    width:100%;

    height:auto;

    display:flex;

    flex-direction:column;

    gap:20px;

}

.center-circle{

    position:relative;

    top:auto;
    left:auto;

    transform:none;

    margin:auto;

}

.small-circle{

    position:relative;

    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;

    transform:none !important;

    width:100%;

    height:auto;

    border-radius:20px;

    padding:20px;

}

.cta-section h2{

    font-size:36px;

}

.decision-section h2{

    font-size:36px;

}

}