/* =====================================================
   FIXXX - MAIN DESIGN SYSTEM
   style.css
   Part 1/3
===================================================== */


/* =====================
   ROOT VARIABLES
===================== */

:root {

    --bg-primary: #050816;
    --bg-secondary: #0b1124;

    --surface:
        rgba(255,255,255,0.07);

    --surface-hover:
        rgba(255,255,255,0.12);

    --border:
        rgba(255,255,255,0.12);

    --text-primary:
        #ffffff;

    --text-secondary:
        #a7b3cc;


    --blue:
        #4f8cff;

    --purple:
        #7c3aed;

    --cyan:
        #00d4ff;


    --gradient:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        );


    --container:
        1180px;


    --radius:
        24px;


    --shadow:
        0 25px 80px rgba(0,0,0,.45);

}





/* =====================
   RESET
===================== */


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}



body {

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


    background:

    radial-gradient(
        circle at 10% 10%,
        rgba(79,140,255,.18),
        transparent 35%
    ),

    radial-gradient(
        circle at 90% 80%,
        rgba(124,58,237,.18),
        transparent 35%
    ),

    var(--bg-primary);



    color:
    var(--text-primary);


    overflow-x:hidden;


    line-height:1.6;

}



img {

    max-width:100%;
    display:block;

}


a {

    color:inherit;
    text-decoration:none;

}


button,
input,
textarea {

    font-family:inherit;

}





/* =====================
   GLOBAL CONTAINER
===================== */


.container {

    width:min(
        var(--container),
        90%
    );

    margin:auto;

}





/* =====================
   TYPOGRAPHY
===================== */


h1 {

    font-size:
    clamp(
        3rem,
        6vw,
        5.5rem
    );


    line-height:
    1.05;


    letter-spacing:
    -3px;


    font-weight:
    800;

}



h2 {

    font-size:
    clamp(
        2.2rem,
        4vw,
        3.5rem
    );


    line-height:
    1.1;


    letter-spacing:
    -1.5px;

}



h3 {

    font-size:
    1.4rem;

}



p {

    color:
    var(--text-secondary);


    font-size:
    1.05rem;

}





/* =====================
   HEADER
===================== */


.header {

    position:
    fixed;


    top:0;
    left:0;


    width:100%;


    z-index:1000;


    background:

    rgba(
        5,
        8,
        22,
        .65
    );


    backdrop-filter:
    blur(20px);


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

}



.navigation {

    height:
    90px;


    display:flex;


    align-items:center;


    justify-content:
    space-between;

}




/* =====================
   LOGO
===================== */


.logo {

    display:flex;


    align-items:center;


    gap:14px;


    font-size:
    1.8rem;


    font-weight:
    800;


    letter-spacing:
    1px;

}



.logo-mark {

    width:
    42px;


    height:
    42px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:
    var(--gradient);


    border-radius:
    12px;


    box-shadow:
    0 0 40px
    rgba(
        79,
        140,
        255,
        .5
    );

}



.logo-mark svg {

    width:
    28px;


    fill:
    white;

}





/* =====================
   NAVIGATION
===================== */


.menu {

    display:flex;


    align-items:center;


    gap:
    35px;


    list-style:none;

}



.menu a {

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


    transition:
    .3s;

}



.menu a:hover {

    color:white;

}





.nav-button {


    padding:
    12px 25px;


    border-radius:
    50px;


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


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


    transition:
    .3s;

}



.nav-button:hover {

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


    transform:
    translateY(-2px);

}





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


.hero {

    min-height:
    100vh;


    display:flex;


    align-items:center;


    position:
    relative;


    padding-top:
    100px;


    overflow:hidden;

}



.hero-grid {

    display:grid;


    grid-template-columns:
    1fr 1fr;


    gap:
    70px;


    align-items:center;

}





/* =====================
   BACKGROUND EFFECTS
===================== */


.hero-background {

    position:absolute;


    inset:0;


    z-index:-1;


}



.gradient-orb {


    position:absolute;


    border-radius:50%;


    filter:
    blur(120px);

}



.orb-one {


    width:
    500px;


    height:
    500px;


    background:
    rgba(
        79,
        140,
        255,
        .35
    );


    top:
    -200px;


    left:
    -150px;

}



.orb-two {


    width:
    450px;


    height:
    450px;


    background:
    rgba(
        124,
        58,
        237,
        .35
    );


    bottom:
    -150px;


    right:
    -100px;

}



.grid-overlay {


    position:absolute;


    inset:0;


    background-image:

    linear-gradient(
        rgba(255,255,255,.03)
        1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.03)
        1px,
        transparent 1px
    );


    background-size:
    60px 60px;


    mask-image:
    linear-gradient(
        to bottom,
        black,
        transparent
    );

}

/* =====================================================
   FIXXX - MAIN DESIGN SYSTEM
   style.css
   Part 2/3
===================================================== */



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


.hero-content {

    position:relative;

}



.badge {


    display:inline-flex;


    align-items:center;


    gap:12px;


    padding:
    10px 18px;


    border-radius:
    50px;


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


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


    margin-bottom:
    30px;


    font-size:
    .9rem;


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


    backdrop-filter:
    blur(15px);

}



.badge span {


    width:
    9px;


    height:
    9px;


    background:
    #22c55e;


    border-radius:
    50%;


    box-shadow:
    0 0 15px
    #22c55e;


}





.hero-content h1 {


    margin-bottom:
    30px;


}



.hero-content h1::after {


    content:"";


    display:block;


    width:
    180px;


    height:
    8px;


    margin-top:
    20px;


    border-radius:
    10px;


    background:
    var(--gradient);


}





.hero-content p {


    max-width:
    560px;


    font-size:
    1.2rem;


    margin-bottom:
    40px;


}







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


.hero-actions {


    display:flex;


    gap:
    20px;


    flex-wrap:
    wrap;


}




.button {


    display:inline-flex;


    align-items:center;


    justify-content:center;


    padding:
    17px 34px;


    border-radius:
    50px;


    font-weight:
    600;


    transition:
    .35s;


    border:
    1px solid
    transparent;


}




.button.primary {


    background:
    var(--gradient);


    color:white;


    box-shadow:


    0 20px 50px
    rgba(
        79,
        140,
        255,
        .35
    );


}



.button.primary:hover {


    transform:
    translateY(-5px);


    box-shadow:


    0 30px 70px
    rgba(
        79,
        140,
        255,
        .55
    );


}





.button.secondary {


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


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


}



.button.secondary:hover {


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


    transform:
    translateY(-5px);


}






/* =====================
   GLASS COMPONENT
===================== */


.glass {


    background:
    var(--surface);


    backdrop-filter:
    blur(25px);


    -webkit-backdrop-filter:
    blur(25px);


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


    box-shadow:
    var(--shadow);


}







/* =====================
   PRODUCT DASHBOARD
===================== */


.hero-product {


    position:
    relative;


}




.glass-window {


    padding:
    25px;


    border-radius:
    32px;


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


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


    backdrop-filter:
    blur(30px);


    box-shadow:


    0 40px 120px
    rgba(
        0,
        0,
        0,
        .5
    );


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


}





.window-header {


    display:flex;


    gap:
    8px;


    margin-bottom:
    25px;


}



.window-header span {


    width:
    12px;


    height:
    12px;


    border-radius:
    50%;


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


}






.dashboard {


    display:flex;


    min-height:
    380px;


    background:
    rgba(
        0,
        0,
        0,
        .25
    );


    border-radius:
    20px;


    overflow:hidden;


}





.dashboard-sidebar {


    width:
    75px;


    padding:
    25px 15px;


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


}



.sidebar-item {


    height:
    12px;


    border-radius:
    10px;


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


    margin-bottom:
    20px;


}



.sidebar-item.active {


    background:
    var(--blue);


    box-shadow:
    0 0 20px
    var(--blue);


}





.dashboard-content {


    padding:
    35px;


    flex:1;


}



.dashboard-content h3 {


    margin-bottom:
    25px;


}





.dashboard-cards {


    display:grid;


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


    gap:
    15px;


}





.mini-card {


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


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


    padding:
    20px;


    border-radius:
    18px;


    color:
    var(--text-secondary);


}



.mini-card strong {


    display:block;


    color:white;


    font-size:
    1.8rem;


}





.chart {


    margin-top:
    30px;


    height:
    90px;


    display:flex;


    align-items:end;


    gap:
    12px;


}



.chart div {


    flex:1;


    background:
    var(--gradient);


    border-radius:
    10px 10px 0 0;


}



.chart div:nth-child(1){
height:35%;
}


.chart div:nth-child(2){
height:70%;
}


.chart div:nth-child(3){
height:50%;
}


.chart div:nth-child(4){
height:90%;
}


.chart div:nth-child(5){
height:65%;
}







/* =====================
   STATS
===================== */


.stats {


    padding:
    60px 0;


}




.stats-grid {


    display:grid;


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


    gap:
    25px;


}





.stat {


    text-align:center;


    padding:
    35px 20px;


    border-radius:
    var(--radius);


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


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


}





.stat strong {


    display:block;


    font-size:
    3rem;


    font-weight:
    800;


    background:
    var(--gradient);


    -webkit-background-clip:
    text;


    -webkit-text-fill-color:
    transparent;


}



.stat span {


    color:
    var(--text-secondary);


}





/* =====================
   SECTION HEADINGS
===================== */


.section-heading {


    text-align:center;


    max-width:
    750px;


    margin:
    0 auto 70px;


}



.section-heading span {


    color:
    var(--cyan);


    text-transform:
    uppercase;


    letter-spacing:
    3px;


    font-size:
    .8rem;


    font-weight:
    700;


}



.section-heading h2 {


    margin:
    15px 0;


}




.section-heading.left {


    text-align:left;


}







/* =====================
   ABOUT
===================== */


.about-card {


    padding:
    55px;


    border-radius:
    32px;


}



.about-card p {


    font-size:
    1.2rem;


    margin-bottom:
    25px;


}







/* =====================
   SERVICES
===================== */


.services {


    padding:
    120px 0;


}




.services-grid {


    display:grid;


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


    gap:
    30px;


}



.service-card {


    padding:
    40px;


    border-radius:
    28px;


    transition:
    .35s;


}




.service-card:hover {


    transform:
    translateY(-12px);


    background:
    var(--surface-hover);


}




.service-icon {


    font-size:
    3rem;


    margin-bottom:
    25px;


}



.service-card h3 {


    margin-bottom:
    15px;


}



.service-card p {


    margin-bottom:
    25px;


}



.service-card a {


    color:
    var(--cyan);


    font-weight:
    600;


}

/* =====================================================
   FIXXX - MAIN DESIGN SYSTEM
   style.css
   Part 3/3
===================================================== */


/* =====================
   WHY FIXXX
===================== */


.why {

    padding:
    120px 0;

}



.why-grid {

    display:grid;


    grid-template-columns:
    1fr 1fr;


    gap:
    70px;


    align-items:center;

}



.benefits {

    list-style:none;


    margin-top:
    35px;


}



.benefits li {

    padding:
    16px 0;


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


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


    font-size:
    1.1rem;

}



.why-panel {

    padding:
    45px;


    border-radius:
    32px;

}



.panel-row {

    display:flex;


    justify-content:
    space-between;


    align-items:center;


    margin-bottom:
    15px;


}



.panel-row span {

    color:
    var(--text-secondary);

}



.panel-row strong {

    font-size:
    1.5rem;


}



.progress {

    height:
    10px;


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


    border-radius:
    20px;


    overflow:hidden;


    margin-bottom:
    35px;

}



.progress div {

    height:
    100%;


    width:
    90%;


    background:
    var(--gradient);


    border-radius:
    inherit;


}






/* =====================
   TECHNOLOGY
===================== */


.technology {

    padding:
    120px 0;

}



.technology-window {

    padding:
    35px;


    border-radius:
    32px;

}



.tech-header {

    display:flex;


    justify-content:
    space-between;


    align-items:center;


    padding-bottom:
    25px;


    margin-bottom:
    30px;


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


}



.tech-header span {


    padding:
    6px 14px;


    border-radius:
    50px;


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


    color:
    #22c55e;


    font-size:
    .8rem;


    font-weight:
    700;


}



.tech-grid {


    display:grid;


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


    gap:
    20px;


}



.tech-grid div {


    padding:
    30px;


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


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


    border-radius:
    20px;


}



.tech-grid h4 {


    margin-bottom:
    10px;


    color:
    white;


}






/* =====================
   TIMELINE
===================== */


.timeline {

    padding:
    120px 0;

}



.timeline-list {


    position:
    relative;


    max-width:
    900px;


    margin:auto;


}



.timeline-list::before {


    content:"";


    position:absolute;


    left:
    30px;


    top:
    0;


    bottom:
    0;


    width:
    2px;


    background:
    var(--gradient);


}



.timeline-item {


    display:flex;


    gap:
    35px;


    margin-bottom:
    55px;


    align-items:flex-start;


}



.timeline-number {


    min-width:
    62px;


    height:
    62px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:
    50%;


    background:
    var(--gradient);


    font-weight:
    700;


    position:
    relative;


    z-index:
    2;


    box-shadow:
    0 0 30px
    rgba(
        79,
        140,
        255,
        .4
    );


}



.timeline-item h3 {


    margin-bottom:
    10px;


}






/* =====================
   REFERENCES
===================== */


.references {


    padding:
    120px 0;


}



.reference-grid {


    display:grid;


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


    gap:
    30px;


}



.reference-card {


    padding:
    35px;


    border-radius:
    28px;


}



.stars {


    color:
    #facc15;


    letter-spacing:
    4px;


    margin-bottom:
    20px;


}



.reference-card p {


    font-size:
    1.05rem;


    margin-bottom:
    25px;


}



.reference-card strong {


    color:
    white;


}






/* =====================
   FAQ
===================== */


.faq {


    padding:
    120px 0;

}



.faq-list {


    max-width:
    850px;


    margin:auto;


}



.faq-item {


    margin-bottom:
    20px;


    border-radius:
    20px;


    overflow:hidden;


}



.faq-item button {


    width:
    100%;


    padding:
    25px;


    display:flex;


    justify-content:
    space-between;


    align-items:center;


    background:
    transparent;


    color:white;


    border:none;


    cursor:pointer;


    font-size:
    1.1rem;


    text-align:left;


}



.faq-item button span {


    font-size:
    1.8rem;


    color:
    var(--cyan);


}



.faq-answer {


    padding:
    0 25px 25px;


    display:none;


}



.faq-answer p {


    font-size:
    1rem;


}






/* =====================
   CONTACT
===================== */


.contact {


    padding:
    120px 0;


}



.contact-box {


    padding:
    60px;


    border-radius:
    35px;


    display:grid;


    grid-template-columns:
    1fr 1fr;


    gap:
    60px;


}



.contact-box h2 {


    margin:
    20px 0;


}



.contact-box form {


    display:flex;


    flex-direction:
    column;


    gap:
    18px;


}



.contact-box input,
.contact-box textarea {


    width:
    100%;


    padding:
    18px 20px;


    border-radius:
    15px;


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


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


    color:white;


    outline:none;


}



.contact-box textarea {


    min-height:
    150px;


    resize:
    vertical;


}



.contact-box input::placeholder,
.contact-box textarea::placeholder {


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


}







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


footer {


    padding:
    40px 0;


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


    color:
    var(--text-secondary);


    text-align:center;


}






/* =====================
   FLOATING ANIMATION
===================== */


@keyframes floating {


    0% {

        transform:
        translateY(0);

    }


    50% {

        transform:
        translateY(-15px);

    }


    100% {

        transform:
        translateY(0);

    }


}






/* =====================
   REVEAL DEFAULT STATE
===================== */


.reveal {


    opacity:
    0;


    transform:
    translateY(40px);


    transition:
    1s ease;


}



.reveal.active {


    opacity:
    1;


    transform:
    translateY(0);


}


/* Particle background */

.particle-canvas {

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:-3;

    opacity:.45;

}