/* ==========================================
   RR88 Design System
   Industrial IoT Monitoring Platform
========================================== */


/* ---------- Design tokens ---------- */

:root {

    --bg-main: #07111f;
    --bg-secondary: #0d1828;
    --bg-card: #132133;

    --primary: #2f80ed;
    --primary-light: #56a0ff;

    --text-main: #ffffff;
    --text-secondary: #b8c6d5;
    --text-muted: #8fa1b5;

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

    --shadow:
        0 30px 80px rgba(0,0,0,0.45);


    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;


    --container:
        1280px;

}



/* ---------- Reset ---------- */


* {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {


    margin:
        0;


    background:
        var(--bg-main);


    color:
        var(--text-main);


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


}



/* ---------- Header ---------- */


.header {


    height:
        82px;


    max-width:
        var(--container);


    margin:
        auto;


    padding:
        0 40px;


    display:
        flex;


    align-items:
        center;


    justify-content:
        space-between;



}

.logo {

    display: flex;

    align-items: center;

    text-decoration: none;

}


.logo img {

    height: 42px;

    width: auto;

    display: block;

}



.main-nav {


    display:
        flex;


    gap:
        40px;


}



.main-nav a {


    color:
        var(--text-secondary);


    text-decoration:
        none;


    font-size:
        15px;


    transition:
        .2s;


}



.main-nav a:hover {


    color:
        white;


}



.header-actions {


    display:
        flex;


    align-items:
        center;


    gap:
        20px;


}



.lang-button {


    border:
        none;


    background:
        transparent;


    color:
        var(--text-secondary);


    cursor:
        pointer;


    font-size:
        14px;


}



.client-button {


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


    background:
        transparent;


    color:
        white;


    padding:
        12px 24px;


    border-radius:
        var(--radius-sm);


    cursor:
        pointer;


    transition:
        .25s;


}



.client-button:hover {


    background:
        var(--primary);


}



/* ---------- Hero ---------- */

.hero {

    position: relative;

    min-height:
        calc(100vh - 82px);

    overflow: hidden;

}


.hero-background {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 0;

    filter: brightness(.45);

}



.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,17,31,.95) 0%,
            rgba(7,17,31,.75) 45%,
            rgba(7,17,31,.35) 100%
        );

    z-index: 1;

}



.hero-container {

    position: relative;

    z-index: 2;

    max-width:
        var(--container);

    min-height:
        calc(100vh - 82px);

    margin:
        auto;

    padding:
        60px 40px;


    display:
        flex;

    align-items:
        center;

}



.hero-content {

    max-width:
        650px;

}



.hero h1 {

    font-size:
        clamp(42px,5vw,64px);

    line-height:
        1.08;

    letter-spacing:
        -1px;

    margin:
        0 0 30px;

}



.hero p {

    color:
        var(--text-secondary);

    font-size:
        20px;

    line-height:
        1.65;

    margin-bottom:
        40px;

}


/* ---------- Buttons ---------- */


.hero-buttons {


    display:
        flex;


    gap:
        16px;


    margin-bottom:
        50px;


}



.primary-button,
.secondary-button {


    padding:
        15px 32px;


    border-radius:
        var(--radius-sm);


    font-size:
        16px;


    cursor:
        pointer;


}

.primary-button,
.secondary-button {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

}


.primary-button {


    border:
        none;


    background:
        var(--primary);


    color:
        white;


}



.primary-button:hover {


    background:
        var(--primary-light);


}



.secondary-button {


    background:
        transparent;


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


    color:
        white;


}



/* ---------- Hero Features ---------- */


.features {


    display:
        flex;


    gap:
        30px;


    flex-wrap:
        wrap;


}



.feature {


    color:
        var(--text-secondary);


    font-size:
        15px;


}


.feature span {


    color:
        var(--primary);


    margin-right:
        8px;


}






/* ---------- Footer ---------- */


.footer {


    max-width:
        var(--container);


    margin:
        auto;


    padding:
        30px 40px;


    display:
        flex;


    justify-content:
        space-between;


    color:
        var(--text-muted);


    font-size:
        14px;


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


}



/* ---------- Responsive ---------- */


@media(max-width:1000px) {


.hero-container {

    padding:
        50px 30px;

}



.dashboard-preview {

    display:
        none;

}

.main-nav {
	display: none;
}


}



@media(max-width:600px) {


    .header {

        padding:
            0 20px;

    }



    .hero-container {

        padding:
            40px 20px;

        min-height:
            calc(100vh - 82px);

        align-items:
            center;

    }



    .hero h1 {

        font-size:
            38px;

        line-height:
            1.15;

        margin-bottom:
            20px;

    }



    .hero p {

        font-size:
            17px;

        line-height:
            1.6;

        margin-bottom:
            30px;

    }



    .hero-buttons {

        flex-direction:
            column;

        gap:
            12px;

        margin-bottom:
            35px;

    }



    .primary-button,
    .secondary-button {

        width:
            100%;

        padding:
            14px 24px;

    }



    .features {

        flex-direction:
            column;

        gap:
            15px;

    }



    .feature {

        font-size:
            14px;

    }



    .dashboard-preview {

        display:
            none;

    }



    .hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(7,17,31,.92),
                rgba(7,17,31,.75)
            );

    }



    .footer {

        flex-direction:
            column;

        gap:
            15px;

    }
	
	.main-nav {
        display: none;
    }

}

.dashboard-preview {

    position: absolute;

    right: 40px;

    bottom: 40px;

    width: 520px;

    border-radius:
        var(--radius-lg);

    overflow:
        hidden;

    background:
        var(--bg-card);

    box-shadow:
        var(--shadow);

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

    transform:
        translateY(20px);

}

.dashboard-preview img {

    display: block;

    width: 100%;

    height: auto;

}


/* =====================================
   Solutions
===================================== */


.solutions {

    max-width:
    var(--container);

    margin:
    auto;

    padding:
    100px 40px;

}



.section-header {

    max-width:
    760px;

    margin:
    0 auto 60px;

    text-align:
    center;

}



.section-header h2 {


    font-size:
    42px;

    margin-bottom:
    20px;


}



.section-header p {


    color:
    var(--text-secondary);

    font-size:
    18px;

    line-height:
    1.6;


}



.solutions-grid {


    display:
    grid;


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


    gap:
    30px;


}




.solution-card {


    background:
    var(--bg-card);


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


    border-radius:
    var(--radius-lg);


    overflow:
    hidden;


    transition:
    .25s;


}




.solution-card:hover {


    transform:
    translateY(-8px);


    border-color:
    rgba(47,128,237,.6);


}




.solution-card img {


    width:
    100%;


    height:
    230px;


    object-fit:
    cover;


}




.solution-content {


    padding:
    30px;


}




.solution-content h3 {


    font-size:
    28px;


    margin:
    0 0 15px;


}



.solution-content p {


    color:
    var(--text-secondary);


    line-height:
    1.6;


}




.solution-content ul {


    margin-top:
    25px;


    padding-left:
    18px;


}




.solution-content li {


    margin-bottom:
    10px;


    color:
    #dce7f3;


}




@media(max-width:1000px){


.solutions-grid {


    grid-template-columns:
    1fr;


}


}

/* =====================================
   How RR88 Works
===================================== */


.technology {


    background:
    var(--bg-secondary);


    padding:
    110px 40px;


    margin-top:
    60px;


}




.technology-flow {


    max-width:
    1200px;


    margin:
    70px auto 0;


    display:
    flex;


    align-items:
    center;


    justify-content:
    center;


}



.technology-step {


    width:
    240px;


    text-align:
    center;


}



.step-icon {


    width:
    70px;


    height:
    70px;


    margin:
    0 auto 25px;


    display:
    flex;


    align-items:
    center;


    justify-content:
    center;


    border-radius:
    50%;


    background:
    rgba(47,128,237,.15);


    border:
    1px solid rgba(47,128,237,.5);


    color:
    var(--primary-light);


    font-weight:
    700;


}



.technology-step h3 {


    font-size:
    22px;


    margin-bottom:
    15px;


}



.technology-step p {


    color:
    var(--text-secondary);


    font-size:
    15px;


    line-height:
    1.6;


}



.flow-line {


    width:
    60px;


    height:
    1px;


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


}



@media(max-width:1000px){


.technology-flow {


    flex-direction:
    column;


    gap:
    30px;


}



.flow-line {


    width:
    1px;


    height:
    50px;


}



}

/* =====================================
   RR88 Platform Preview
===================================== */


.platform {


    max-width:
    var(--container);


    margin:
    auto;


    padding:
    120px 40px;


    display:
    grid;


    grid-template-columns:
    0.9fr 1.1fr;


    gap:
    70px;


    align-items:
    center;


}



.section-header.left {


    text-align:
    left;


    margin:
    0 0 40px;


}



.platform-features {


    display:
    grid;


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


    gap:
    25px;


}



.platform-feature {


    padding:
    25px;


    background:
    var(--bg-card);


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


    border-radius:
    var(--radius-md);


}



.platform-feature h3 {


    margin:
    0 0 12px;


    font-size:
    20px;


}



.platform-feature p {


    color:
    var(--text-secondary);


    line-height:
    1.5;


    font-size:
    15px;


}



.platform-image {


    position:
    relative;


}



.platform-image::before {


    content:
    "";


    position:
    absolute;


    inset:
    -30px;


    background:
    radial-gradient(
        circle,
        rgba(47,128,237,.25),
        transparent 65%
    );


    z-index:
    -1;


}



.platform-image img {


    width:
    100%;


    border-radius:
    var(--radius-lg);


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


    box-shadow:
    var(--shadow);


}




@media(max-width:1000px){


.platform {


    grid-template-columns:
    1fr;


}



.platform-features {


    grid-template-columns:
    1fr;


}


}

/* =====================================
   Why RR88
===================================== */


.why-rr88 {


    background:
    var(--bg-secondary);


    padding:
    120px 40px;


}




.benefits-grid {


    max-width:
    var(--container);


    margin:
    60px auto 0;


    display:
    grid;


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


    gap:
    30px;


}




.benefit-card {


    background:
    var(--bg-card);


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


    border-radius:
    var(--radius-lg);


    padding:
    35px;


    transition:
    .25s;


}




.benefit-card:hover {


    transform:
    translateY(-6px);


    border-color:
    rgba(47,128,237,.5);


}




.benefit-number {


    color:
    var(--primary-light);


    font-size:
    14px;


    font-weight:
    700;


    letter-spacing:
    2px;


    margin-bottom:
    25px;


}




.benefit-card h3 {


    font-size:
    24px;


    margin:
    0 0 15px;


}




.benefit-card p {


    color:
    var(--text-secondary);


    line-height:
    1.6;


}




@media(max-width:1000px){


.benefits-grid {


    grid-template-columns:
    1fr;


}


}

/* =====================================
   Use Cases
===================================== */

.use-cases{

    max-width:var(--container);

    margin:auto;

    padding:120px 40px;

}

.usecase-grid{

    display:grid;

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

    gap:35px;

    margin-top:60px;

}

.usecase{

    display:flex;

    background:var(--bg-card);

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

    border-radius:18px;

    overflow:hidden;

    transition:.25s;

}

.usecase:hover{

    transform:translateY(-6px);

    border-color:rgba(47,128,237,.5);

}

.usecase-image{

    width:42%;

}

.usecase-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.usecase-content{

    width:58%;

    padding:30px;

}

.tag{

    display:inline-block;

    background:rgba(47,128,237,.12);

    color:var(--primary-light);

    padding:6px 12px;

    border-radius:30px;

    font-size:12px;

    letter-spacing:.5px;

    margin-bottom:18px;

}

.usecase-content h3{

    margin:0 0 15px;

    font-size:28px;

}

.usecase-content p{

    color:var(--text-secondary);

    line-height:1.7;

}

@media(max-width:1000px){

.usecase-grid{

grid-template-columns:1fr;

}

.usecase{

flex-direction:column;

}

.usecase-image{

width:100%;

height:240px;

}

.usecase-content{

width:100%;

}

}

/* =====================================
   Request Demo
===================================== */


.contact {

    max-width:
    var(--container);

    margin:
    120px auto;

    padding:
    0 40px;

}



.contact-container {

    display:
    grid;

    grid-template-columns:
    0.8fr 1.2fr;

    gap:
    80px;

    background:
    var(--bg-card);

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

    border-radius:
    var(--radius-lg);

    padding:
    70px;

}



.section-label {

    color:
    var(--primary-light);

    font-size:
    13px;

    letter-spacing:
    3px;

    font-weight:
    600;

}



.contact-intro h2 {

    margin-top:
    25px;

    font-size:
    42px;

    line-height:
    1.2;

}



.contact-intro p {

    color:
    var(--text-secondary);

    font-size:
    18px;

    line-height:
    1.7;

}



.demo-form {

    display:
    flex;

    flex-direction:
    column;

    gap:
    20px;

}



.form-row {

    display:
    grid;

    grid-template-columns:
    1fr 1fr;

    gap:
    20px;

}



.form-group {

    display:
    flex;

    flex-direction:
    column;

    gap:
    8px;

}



.form-group label {

    color:
    var(--text-secondary);

    font-size:
    14px;

}



.form-group input,
.form-group textarea {


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


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


    border-radius:
    8px;


    padding:
    14px;


    color:
    white;


    font-family:
    inherit;


    font-size:
    15px;


}



.form-group textarea {

    resize:
    vertical;

}



.form-group input:focus,
.form-group textarea:focus {


    outline:
    none;


    border-color:
    var(--primary);


}



.honeypot {

    display:
    none;

}



.form-result {

    margin-top:
    15px;

    color:
    var(--text-secondary);

}



@media(max-width:1000px){


.contact-container {

    grid-template-columns:
    1fr;

    padding:
    40px;

}


.form-row {

    grid-template-columns:
    1fr;

}


}