:root{
  --red:#cf342f; --blue:#5e7cb0; --gray:#9c9fa4;
  --bg:#f7f8fa; --surface:#ffffff; --surface-2:#eef1f5;
  --text:#17202b; --muted:#657080; --border:#e3e7ed;
  --nav:rgba(247,248,250,.82); --shadow:0 20px 60px rgba(25,35,50,.10);
}
[data-theme="dark"]{
  --bg:#10151d; --surface:#171e28; --surface-2:#202936;
  --text:#f3f5f8; --muted:#a9b2bf; --border:#2c3644;
  --nav:rgba(16,21,29,.84); --shadow:0 20px 60px rgba(0,0,0,.25);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.65}
a{text-decoration:none;color:inherit}.navbar-main{background:var(--nav);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.3s}.navbar-main.scrolled{border-color:var(--border);box-shadow:0 8px 30px rgba(0,0,0,.04)}
.brand-logo{width:46px;height:46px;object-fit:contain;border-radius:10px}.brand-name{font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.nav-link{font-weight:600;color:var(--muted)!important;padding:.8rem 1rem!important}.nav-link:hover,.nav-link.active{color:var(--red)!important}
.theme-toggle{width:42px;height:42px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);display:grid;place-items:center}
.btn-brand{background:var(--red);border-color:var(--red);color:#fff;font-weight:700;padding:.8rem 1.2rem}.btn-brand:hover{background:#b82b27;border-color:#b82b27;color:#fff;transform:translateY(-1px)}
.btn-outline-brand{border:1px solid var(--border);color:var(--text);font-weight:700;background:var(--surface);padding:.8rem 1.2rem}.btn-outline-brand:hover{border-color:var(--blue);color:var(--blue)}
.hero-section{min-height:100vh;position:relative;overflow:hidden;padding-top:80px;background:radial-gradient(circle at 78% 35%,rgba(94,124,176,.16),transparent 28%),var(--bg)}
.hero-grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,black,transparent)}
.hero-orb{position:absolute;border-radius:50%;filter:blur(5px);opacity:.13}.orb-red{width:450px;height:450px;background:var(--red);top:10%;right:-150px}.orb-blue{width:350px;height:350px;background:var(--blue);bottom:-150px;left:-120px}
.eyebrow,.section-kicker{font-size:.75rem;letter-spacing:.14em;font-weight:800;color:var(--red);text-transform:uppercase}.eyebrow{display:flex;align-items:center;gap:.7rem}.eyebrow span{display:block;width:28px;height:2px;background:var(--red)}
.hero-section h1{font-size:clamp(2.7rem,5.4vw,5.4rem);line-height:1.02;letter-spacing:-.055em;font-weight:850;max-width:850px;margin:1.1rem 0}.hero-section h1 span{color:var(--red)}.hero-text{font-size:1.12rem;color:var(--muted);max-width:680px}
.hero-trust>div{border-right:1px solid var(--border);padding-right:1.3rem}.hero-trust strong{display:block;font-size:.95rem}.hero-trust span{font-size:.76rem;color:var(--muted)}
.hero-visual{min-height:470px;position:relative;display:grid;place-items:center}.visual-main{width:min(100%,420px);padding:1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow);transform:rotate(-3deg);position:relative;z-index:2}.visual-top{display:flex;gap:7px;margin-bottom:2rem}.dot{width:9px;height:9px;border-radius:50%}.dot.red{background:var(--red)}.dot.blue{background:var(--blue)}.dot.gray{background:var(--gray)}.code-line{height:10px;background:var(--surface-2);border-radius:8px;margin:.7rem 0}.dashboard-row{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem;margin-top:1.5rem}.chart-box,.metric-box{background:var(--surface-2);padding:1.2rem;border-radius:18px;min-height:145px}.chart-bars{height:100%;display:flex;align-items:end;gap:8px}.chart-bars i{display:block;flex:1;background:var(--blue);border-radius:5px 5px 0 0}.chart-bars i:nth-child(1){height:38%}.chart-bars i:nth-child(2){height:60%}.chart-bars i:nth-child(3){height:48%}.chart-bars i:nth-child(4){height:82%;background:var(--red)}.chart-bars i:nth-child(5){height:70%}.metric-box small,.metric-box span{display:block;color:var(--muted);font-size:.7rem}.metric-box strong{font-size:2rem;display:block;color:var(--red)}
.floating-card{position:absolute;z-index:3;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:16px;padding:.8rem 1rem;display:flex;align-items:center;gap:.6rem;font-size:.78rem;font-weight:750}.floating-card i{font-size:1.15rem}.card-red{top:8%;left:0}.card-red i{color:var(--red)}.card-blue{right:-2%;bottom:12%}.card-blue i{color:var(--blue)}.visual-ring{position:absolute;width:430px;height:430px;border:1px dashed var(--blue);border-radius:50%;opacity:.45}
.scroll-down{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);font-size:.78rem;color:var(--muted);display:flex;gap:.6rem;align-items:center}
.section-padding{padding:105px 0}.section-title{font-size:clamp(2rem,4vw,3.35rem);font-weight:800;letter-spacing:-.045em;line-height:1.1;margin:.7rem 0 1rem}.section-text{color:var(--muted);font-size:1rem}.section-intro{max-width:780px}.about-visual{position:relative;min-height:450px}.about-image{position:absolute;inset:0;background:linear-gradient(145deg,rgba(23,32,43,.15),rgba(23,32,43,.7)),url("../img/img_022.png?auto=format&fit=crop&w=1000&q=80") center/cover;border-radius:28px}.experience-card{position:absolute;bottom:25px;right:-25px;background:var(--surface);border:1px solid var(--border);padding:1.3rem;max-width:210px;border-radius:18px;box-shadow:var(--shadow)}.experience-card strong{color:var(--red);display:block;font-size:1.2rem}.experience-card span{font-size:.78rem;color:var(--muted)}
.feature-check{font-weight:650;font-size:.92rem}.feature-check i{color:var(--red);margin-right:.4rem}.text-link{font-weight:750;color:var(--red);align-items:center;gap:.45rem}.text-link:hover{color:var(--blue)}
.services-section{background:var(--surface-2)}.service-card{height:100%;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:2rem;position:relative;transition:.25s}.service-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.service-card.featured{border-top:4px solid var(--red)}.service-icon{width:54px;height:54px;border-radius:15px;background:rgba(207,52,47,.10);display:grid;place-items:center;color:var(--red);font-size:1.5rem}.service-number{position:absolute;right:2rem;top:2rem;color:var(--gray);font-size:.8rem;font-weight:800}.service-card h3{font-size:1.35rem;margin:1.3rem 0 .8rem;font-weight:800}.service-card p,.service-card li{font-size:.9rem;color:var(--muted)}.service-card ul{padding-left:1rem;margin:1rem 0 1.4rem}.service-card li{margin:.35rem 0}
.solutions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.solution-item{border:1px solid var(--border);background:var(--surface);padding:1.5rem;border-radius:18px;transition:.2s}.solution-item:hover{border-color:var(--blue);transform:translateY(-3px)}.solution-item i{font-size:1.6rem;color:var(--blue)}.solution-item h4{font-weight:800;margin:1rem 0 .35rem}.solution-item p{font-size:.84rem;color:var(--muted);margin:0}
.process-section{background:var(--surface)}.process-list{border-top:1px solid var(--border)}.process-item{display:grid;grid-template-columns:80px 1fr;padding:1.6rem 0;border-bottom:1px solid var(--border)}.process-item>span{color:var(--red);font-weight:800}.process-item h4{font-weight:800;margin:0 0 .4rem}.process-item p{color:var(--muted);margin:0}
.portfolio-section{background:var(--surface-2)}.project-card{height:320px;border-radius:22px;overflow:hidden;position:relative;background-size:cover;background-position:center}.project-one{background-image:url("../img/img_01.png?auto=format&fit=crop&w=1200&q=80")}.project-two{background-image:url("../img/img_03.png?auto=format&fit=crop&w=900&q=80")}.project-three{background-image:url("../img/img_04.png?auto=format&fit=crop&w=900&q=80")}.project-four{background-image:url("../img/img_02.png?auto=format&fit=crop&w=1200&q=80")}.project-overlay{position:absolute;inset:0;padding:2rem;display:flex;justify-content:end;flex-direction:column;background:linear-gradient(to top,rgba(10,15,23,.85),rgba(10,15,23,.04));color:#fff}.project-overlay span{font-size:.7rem;letter-spacing:.12em;font-weight:800;color:#fff;opacity:.75}.project-overlay h3{font-size:1.45rem;font-weight:800;margin:.4rem 0}.project-overlay p{font-size:.86rem;margin:0;opacity:.8}
.insights-section{background:var(--bg)}.blog-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;height:100%}.blog-img{height:220px;background-size:cover;background-position:center}.img-one{background-image:url("https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=900&q=80")}.img-two{background-image:url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=900&q=80")}.img-three{background-image:url("https://images.unsplash.com/photo-1533750516457-a7f992034fec?auto=format&fit=crop&w=900&q=80")}.blog-card span{font-size:.67rem;color:var(--red);font-weight:800;letter-spacing:.08em}.blog-card h4{font-weight:800;font-size:1.15rem;line-height:1.35;margin:.7rem 0 1.1rem}
.cta-section{padding:50px 0;background:var(--bg)}.cta-box{background:linear-gradient(120deg,var(--red),#a52c35 55%,var(--blue));padding:clamp(2rem,5vw,4rem);border-radius:30px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:2rem}.cta-box h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:850;letter-spacing:-.04em;line-height:1.1;max-width:650px}.cta-box p{max-width:650px;opacity:.85}.cta-actions{display:flex;flex-wrap:wrap;gap:.8rem;min-width:max-content}
.footer{padding:75px 0 20px;background:#111720;color:#c4ccd6}.footer .brand-name{color:#fff}.footer p{font-size:.9rem}.footer h6{color:#fff;font-weight:800;margin-bottom:1rem}.footer a{display:block;margin:.5rem 0;font-size:.88rem}.footer a:hover{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;font-size:.78rem}.footer-bottom a{display:inline;margin:0}.socials{display:flex;gap:.5rem}.socials a{width:36px;height:36px;border:1px solid rgba(255,255,255,.14);border-radius:50%;display:grid;place-items:center;margin:0}.socials a:hover{background:var(--red);border-color:var(--red)}
@media(max-width:991px){.navbar-collapse{background:var(--surface);margin-top:1rem;padding:1rem;border:1px solid var(--border);border-radius:16px}.hero-section{padding-top:60px}.solutions-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.section-padding{padding:75px 0}.hero-trust{display:none}.hero-visual{min-height:360px}.visual-ring{width:300px;height:300px}.visual-main{max-width:320px}.floating-card{font-size:.68rem}.card-red{left:-5px}.card-blue{right:-5px}.about-visual{min-height:370px}.experience-card{right:10px}.solutions-grid{grid-template-columns:1fr}.cta-box{display:block}.cta-actions{min-width:0}.project-card{height:280px}.scroll-down{display:none}}

.navbar-brand {
    color: var(--text);
}

.navbar-brand span {
    color: var(--text);
}

/* =========================================
   SOLUTION PLANETZ - REQUEST QUOTE MODAL
   Uses the existing website theme variables
========================================= */

/* -----------------------------------------
   MODAL CONTAINER
----------------------------------------- */

.quote-modal .modal-dialog {
    max-width: 1080px;
}

.quote-modal .modal-content {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

/* Bootstrap backdrop */

.modal-backdrop.show {
    opacity: .72;
}


/* -----------------------------------------
   CLOSE BUTTON
----------------------------------------- */

.quote-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 20;

    width: 42px;
    height: 42px;

    border: 1px solid var(--border);
    border-radius: 50%;

    background-color: var(--surface);
    box-shadow: 0 8px 25px rgba(25, 35, 50, .12);

    opacity: 1;
    transition: all .3s ease;
}

.quote-close:hover {
    background: var(--red);
    transform: rotate(90deg);
    filter: brightness(1.05);
}


/* -----------------------------------------
   LEFT PANEL
----------------------------------------- */

.quote-info {
    position: relative;
    height: 100%;
    min-height: 650px;

    padding: 55px 45px;

    color: #ffffff;

    /* Solution Planetz Brand Theme */
    background:
        linear-gradient(
            145deg,
            #17202b 0%,
            #263447 55%,
            #5e7cb0 100%
        );

    overflow: hidden;
}


/* Decorative shapes */

.quote-info::before {
    content: "";

    position: absolute;
    width: 320px;
    height: 320px;

    top: -130px;
    right: -140px;

    border-radius: 50%;

    background: var(--red);

    opacity: .18;

    filter: blur(10px);
}


.quote-info::after {
    content: "";

    position: absolute;
    width: 250px;
    height: 250px;

    bottom: -120px;
    left: -100px;

    border-radius: 50%;

    border: 45px solid rgba(255,255,255,.06);
}


/* Keep content above decoration */

.quote-info > * {
    position: relative;
    z-index: 2;
}


/* -----------------------------------------
   LOGO
----------------------------------------- */

.quote-logo img {
    max-height: 48px;
    width: auto;
}


/* -----------------------------------------
   BADGE
----------------------------------------- */

.quote-badge {
    display: inline-flex;
    align-items: center;

    padding: 8px 14px;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50px;

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

    color: #ffffff;

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

    letter-spacing: 1.4px;
}


/* -----------------------------------------
   LEFT HEADING
----------------------------------------- */

.quote-info h2 {
    margin-top: 20px;

    color: #ffffff;

    font-size: 2.35rem;
    font-weight: 700;

    line-height: 1.2;
}


.quote-info h2 span {
    display: block;
    color: #dbe6fa;
}


/* Red accent line */

.quote-info h2::after {
    content: "";

    display: block;

    width: 55px;
    height: 4px;

    margin-top: 18px;

    border-radius: 10px;

    background: var(--red);
}


/* Description */

.quote-info > p {
    margin-top: 22px;

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

    line-height: 1.8;
}


/* -----------------------------------------
   SERVICES
----------------------------------------- */

.quote-services {
    margin-top: 38px;
}


.quote-service-item {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 22px;
}


.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    border-radius: 14px;

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

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

    color: #ffffff;

    font-size: 17px;

    transition: all .3s ease;
}


.quote-service-item:hover .service-icon {
    background: var(--red);
    transform: translateY(-3px);
}


.quote-service-item h6 {
    margin-bottom: 3px;

    color: #ffffff;

    font-weight: 600;
}


.quote-service-item small {
    color: rgba(255,255,255,.60);
}


/* -----------------------------------------
   LEFT FOOTER
----------------------------------------- */

.quote-footer-text {
    margin-top: 35px;
    padding-top: 25px;

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

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

    font-size: 13px;
}


.quote-footer-text i {
    color: #ffffff;
}


/* =========================================
   RIGHT PANEL
========================================= */

.quote-form-wrapper {
    padding: 52px;

    background: var(--surface);
}


/* Small heading */

.small-title {
    display: inline-block;

    color: var(--red);

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

    letter-spacing: 1.6px;
}


/* Heading */

.quote-form-header h3 {
    margin-top: 8px;

    color: var(--text);

    font-size: 2rem;
    font-weight: 700;
}


.quote-form-header h3::after {
    content: "";

    display: block;

    width: 45px;
    height: 3px;

    margin-top: 12px;

    border-radius: 10px;

    background: var(--blue);
}


.quote-form-header p {
    margin-top: 18px;
    margin-bottom: 30px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;
}


/* -----------------------------------------
   FORM LABELS
----------------------------------------- */

.quote-form-wrapper .form-label {
    margin-bottom: 7px;

    color: var(--text);

    font-size: 13px;
    font-weight: 600;
}


.quote-form-wrapper .form-label span {
    color: var(--muted);

    font-weight: 400;
}


/* -----------------------------------------
   INPUT GROUP
----------------------------------------- */

.input-group-custom {
    position: relative;
}


.input-group-custom > i {
    position: absolute;

    top: 50%;
    left: 16px;

    transform: translateY(-50%);

    color: var(--blue);

    font-size: 14px;

    z-index: 5;

    transition: color .3s ease;
}


/* Inputs */

.input-group-custom .form-control,
.input-group-custom .form-select {
    min-height: 52px;

    padding-left: 46px;
    padding-right: 15px;

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

    background-color: var(--bg);

    color: var(--text);

    font-size: 14px;

    box-shadow: none;

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


/* Select adjustment */

.input-group-custom .form-select {
    padding-left: 46px;
}


/* Placeholder */

.input-group-custom .form-control::placeholder {
    color: var(--gray);
}


/* Focus */

.input-group-custom:focus-within > i {
    color: var(--red);
}


.input-group-custom .form-control:focus,
.input-group-custom .form-select:focus {
    border-color: var(--blue);

    background: var(--surface);

    box-shadow:
        0 0 0 4px rgba(94, 124, 176, .12);
}


/* -----------------------------------------
   TEXTAREA
----------------------------------------- */

.textarea-group > i {
    top: 19px;

    transform: none;
}


.textarea-group textarea.form-control {
    padding-top: 15px;

    min-height: 120px;

    resize: vertical;
}


/* -----------------------------------------
   SUBMIT BUTTON
----------------------------------------- */

.quote-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 56px;

    border: none;
    border-radius: 12px;

    color: #ffffff;

    font-weight: 600;

    background: var(--red);

    box-shadow:
        0 12px 25px rgba(207, 52, 47, .20);

    transition: all .3s ease;
}


.quote-submit-btn:hover {
    color: #ffffff;

    background: #b92d29;

    transform: translateY(-2px);

    box-shadow:
        0 18px 35px rgba(207, 52, 47, .28);
}


.quote-submit-btn i {
    transition: transform .3s ease;
}


.quote-submit-btn:hover i {
    transform: translateX(5px);
}


/* -----------------------------------------
   RESPONSE NOTE
----------------------------------------- */

.quote-response-note {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 22px;

    color: var(--muted);

    font-size: 12px;
}


.quote-response-note i {
    color: var(--blue);
}


/* =========================================
   DARK MODE
========================================= */

[data-theme="dark"] .quote-modal .modal-content {
    background: var(--surface);
    border-color: var(--border);
}


[data-theme="dark"] .quote-form-wrapper {
    background: var(--surface);
}


[data-theme="dark"] .quote-close {
    background-color: var(--surface);
    border-color: var(--border);

    filter: invert(1);
}


/* Correct the close button on hover */

[data-theme="dark"] .quote-close:hover {
    filter: invert(1);
}


/* Inputs */

[data-theme="dark"] .input-group-custom .form-control,
[data-theme="dark"] .input-group-custom .form-select {
    background: var(--surface-2);

    border-color: var(--border);

    color: var(--text);
}


[data-theme="dark"] .input-group-custom .form-control:focus,
[data-theme="dark"] .input-group-custom .form-select:focus {
    background: var(--surface-2);
}


/* Placeholder */

[data-theme="dark"]
.input-group-custom
.form-control::placeholder {
    color: var(--muted);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991.98px) {

    .quote-info {
        min-height: auto;

        padding: 45px 40px;
    }

    .quote-services {
        display: flex;

        flex-wrap: wrap;

        gap: 15px;
    }

    .quote-service-item {
        width: calc(50% - 10px);

        margin-bottom: 0;
    }

    .quote-footer-text {
        display: none;
    }

}


@media (max-width: 767.98px) {

    .quote-modal .modal-dialog {
        margin: 10px;
    }

    .quote-modal .modal-content {
        border-radius: 20px;
    }

    .quote-info {
        padding: 40px 30px;
    }

    .quote-info h2 {
        font-size: 1.9rem;
    }

    .quote-services {
        display: none;
    }

    .quote-form-wrapper {
        padding: 38px 28px;
    }

    .quote-form-header h3 {
        font-size: 1.7rem;
    }

}


@media (max-width: 575.98px) {

    .quote-info {
        padding: 35px 25px;
    }

    .quote-info > p {
        font-size: 14px;
    }

    .quote-form-wrapper {
        padding: 32px 20px;
    }

    .quote-close {
        top: 12px;
        right: 12px;

        width: 38px;
        height: 38px;
    }

}

/* =========================================
   QUOTE FORM VALIDATION
========================================= */

.field-error {
    display: none;

    margin-top: 6px;
    padding-left: 3px;

    color: var(--red);

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

    line-height: 1.4;
}


.field-error.show {
    display: block;
}


/* Invalid input */

.input-group-custom .form-control.is-invalid,
.input-group-custom .form-select.is-invalid {
    border-color: var(--red) !important;

    background-image: none;

    box-shadow:
        0 0 0 4px rgba(207, 52, 47, .10);
}


/* Focus invalid field */

.input-group-custom .form-control.is-invalid:focus,
.input-group-custom .form-select.is-invalid:focus {
    border-color: var(--red) !important;

    box-shadow:
        0 0 0 4px rgba(207, 52, 47, .15);
}


/* Button loading state */

.quote-submit-btn.loading {
    pointer-events: none;
    opacity: .8;
}


.quote-submit-btn .spinner-border {
    width: 18px;
    height: 18px;

    border-width: 2px;
}