/* =========================================================
   SINGH IT SOLUTION
   MAIN WEBSITE STYLES
========================================================= */


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

:root {

    --red: #e50914;
    --red-light: #ff1b25;
    --red-dark: #b20710;

    --black: #050505;
    --black-2: #080808;
    --black-3: #0d0d0d;

    --card: #101010;

    --white: #ffffff;

    --text: #eeeeee;
    --muted: #929292;

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

}


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

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


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: var(--black);

    color: var(--white);

    line-height: 1.5;

    overflow-x: hidden;

}


img {
    max-width: 100%;
    display: block;
}


a {
    color: inherit;
}


button,
input,
textarea,
select {
    font: inherit;
}


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

.container {

    width: min(1180px, 92%);

    margin: 0 auto;

}


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

.navbar {

    position: sticky;

    top: 0;

    z-index: 999;

    background:
        rgba(5,5,5,0.94);

    backdrop-filter:
        blur(16px);

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

}


.nav-container {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.logo {

    display: flex;

    align-items: center;

    text-decoration: none;

    flex-shrink: 0;

}


.site-logo {

    width: 78px;

    height: auto;

}


.nav-menu {

    display: flex;

    align-items: center;

    gap: 7px;

}


.nav-link {

    position: relative;

    padding: 10px 13px;

    color: #a7a7a7;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition: 0.25s ease;

}


.nav-link:hover,
.nav-link.active {

    color: #ffffff;

}


.nav-link.active::after {

    content: "";

    position: absolute;

    left: 13px;

    right: 13px;

    bottom: 2px;

    height: 2px;

    background: var(--red);

}


.nav-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-left: 10px;

    padding: 12px 19px;

    color: #ffffff;

    background: var(--red);

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition: 0.3s ease;

}


.nav-btn:hover {

    background: var(--red-light);

    transform: translateY(-2px);

}


/* =========================================================
   NAV DROPDOWN
========================================================= */

.nav-dropdown {

    position: relative;

}


.nav-dropdown-btn {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 10px 13px;

    color: #a7a7a7;

    background: transparent;

    border: 0;

    cursor: pointer;

    font-size: 13px;

    font-weight: 600;

}


.nav-dropdown-btn:hover {

    color: #ffffff;

}


.dropdown-arrow {

    font-size: 12px;

    transition: 0.25s ease;

}


.nav-dropdown.open
.dropdown-arrow {

    transform: rotate(180deg);

}


.nav-dropdown-menu {

    position: absolute;

    top: calc(100% + 14px);

    right: 0;

    width: 330px;

    padding: 8px;

    background: #0b0b0b;

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

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

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(8px);

    transition: 0.25s ease;

}


.nav-dropdown.open
.nav-dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


.nav-dropdown-menu a {

    display: grid;

    grid-template-columns:
        35px 1fr 20px;

    align-items: center;

    gap: 10px;

    padding: 15px;

    color: #ffffff;

    text-decoration: none;

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

}


.nav-dropdown-menu a:last-child {

    border-bottom: 0;

}


.nav-dropdown-menu a:hover {

    background: #151515;

}


.dropdown-number {

    color: var(--red);

    font-size: 10px;

    letter-spacing: 1px;

}


.dropdown-content {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.dropdown-content strong {

    font-size: 12px;

}


.dropdown-content small {

    color: #777777;

    font-size: 10px;

}


.nav-dropdown-menu b {

    color: #666666;

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-btn {

    display: none;

    width: 42px;

    height: 42px;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background: transparent;

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

    cursor: pointer;

    font-size: 20px;

}


/* =========================================================
   COMMON BUTTONS
========================================================= */

.primary-btn,
.secondary-btn {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    text-decoration: none;

    transition: 0.3s ease;

}


.primary-btn {

    color: #ffffff;

    background: var(--red);

}


.primary-btn:hover {

    background: var(--red-light);

    transform: translateY(-3px);

}


.secondary-btn {

    color: #ffffff;

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

}


.secondary-btn:hover {

    border-color: var(--red);

    color: var(--red);

}


.section-tag {

    display: inline-block;

    margin-bottom: 20px;

    color: var(--red);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


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

.home-hero {

    position: relative;

    min-height: 760px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(229,9,20,0.13),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #050505,
            #080808 60%,
            #100000
        );

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

}


.hero-background-grid {

    position: absolute;

    inset: 0;

    opacity: 0.17;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.04) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

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

}


.hero-container {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr 0.9fr;

    gap: 70px;

    align-items: center;

}


.hero-content {

    max-width: 700px;

}


.hero-tag {

    display: inline-block;

    margin-bottom: 24px;

    color: var(--red);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


.hero-content h1 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(50px, 6vw, 82px);

    line-height: 0.98;

    letter-spacing: -3px;

    font-weight: 800;

}


.hero-content h1 span {

    color: var(--red);

}


.hero-content p {

    max-width: 650px;

    margin-top: 30px;

    color: #a0a0a0;

    font-size: 17px;

    line-height: 1.8;

}


.hero-buttons {

    display: flex;

    gap: 14px;

    margin-top: 38px;

    flex-wrap: wrap;

}


.hero-buttons .primary-btn,
.hero-buttons .secondary-btn {

    padding: 16px 23px;

    font-size: 13px;

    font-weight: 700;

}


.hero-trust {

    display: flex;

    gap: 0;

    margin-top: 55px;

}


.hero-trust > div {

    min-width: 115px;

    padding-right: 25px;

    margin-right: 25px;

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

}


.hero-trust > div:last-child {

    border-right: 0;

}


.hero-trust strong {

    display: block;

    color: #ffffff;

    font-size: 20px;

}


.hero-trust span {

    color: #666666;

    font-size: 9px;

    letter-spacing: 1px;

    text-transform: uppercase;

}


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

.hero-visual {

    position: relative;

    width: 500px;

    height: 500px;

    margin: auto;

}


.hero-circle {

    position: absolute;

    left: 50%;

    top: 50%;

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

    border-radius: 50%;

    border:
        1px solid rgba(229,9,20,0.25);

}


.circle-large {

    width: 470px;
    height: 470px;

    border-color:
        rgba(255,255,255,0.07);

}


.circle-medium {

    width: 330px;
    height: 330px;

}


.circle-small {

    width: 210px;
    height: 210px;

    border-color:
        rgba(229,9,20,0.45);

}


.hero-core {

    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 145px;
    height: 145px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle,
            rgba(229,9,20,0.8),
            rgba(229,9,20,0.12) 65%,
            transparent 70%
        );

}


.hero-core::after {

    content: "";

    position: absolute;

    width: 95px;
    height: 95px;

    border-radius: 50%;

    background: #0b0b0b;

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

}


.hero-core span,
.hero-core small {

    position: relative;

    z-index: 2;

}


.hero-core span {

    color: #ffffff;

    font-size: 35px;

    font-weight: 900;

}


.hero-core small {

    color: var(--red);

    font-size: 7px;

    letter-spacing: 2px;

}


.hero-floating-card {

    position: absolute;

    min-width: 150px;

    padding: 13px 16px;

    background:
        rgba(10,10,10,0.94);

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

    box-shadow:
        0 20px 50px rgba(0,0,0,0.4);

}


.hero-floating-card span {

    display: block;

    margin-bottom: 5px;

    color: var(--red);

    font-size: 8px;

    letter-spacing: 2px;

}


.hero-floating-card strong {

    display: block;

    color: #ffffff;

    font-size: 11px;

}


.hero-floating-card small {

    color: #666666;

    font-size: 9px;

}


.card-top {

    top: 55px;

    left: 15px;

}


.card-right {

    top: 190px;

    right: -5px;

}


.card-bottom {

    bottom: 45px;

    left: 45px;

}


/* =========================================================
   SOLUTIONS OVERVIEW
========================================================= */

.solutions-overview {

    padding: 120px 0;

    background: #050505;

}


.section-intro {

    display: grid;

    grid-template-columns:
        1fr 0.65fr;

    gap: 80px;

    align-items: end;

    margin-bottom: 60px;

}


.section-intro h2,
.home-section-header h2,
.business-problem-heading h2,
.technology-heading h2,
.process-heading h2 {

    margin: 0;

    color: #ffffff;

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

    line-height: 1;

    letter-spacing: -2px;

}


.section-intro h2 span,
.home-section-header h2 span,
.business-problem-heading h2 span,
.technology-heading h2 span,
.process-heading h2 span {

    color: var(--red);

}


.section-intro > p {

    margin: 0;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;

}


.solutions-grid {

    display: grid;

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

    gap: 1px;

    background: var(--border);

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

}


.solution-card {

    position: relative;

    min-height: 470px;

    padding: 40px;

    color: #ffffff;

    text-decoration: none;

    background: #0a0a0a;

    overflow: hidden;

    transition: 0.35s ease;

}


.solution-card:hover {

    background: #111111;

    transform: translateY(-6px);

}


.solution-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 0;

    height: 3px;

    background: var(--red);

    transition: 0.35s ease;

}


.solution-card:hover::before {

    width: 100%;

}


.solution-number {

    color: #555555;

    font-size: 10px;

    letter-spacing: 2px;

}


.solution-icon {

    width: 55px;
    height: 55px;

    margin: 40px 0 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--red);

    border:
        1px solid rgba(229,9,20,0.35);

    font-size: 22px;

}


.solution-card h3 {

    max-width: 300px;

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 23px;

}


.solution-card > p {

    color: #8d8d8d;

    font-size: 13px;

    line-height: 1.75;

}


.solution-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 28px;

}


.solution-list span {

    color: #bcbcbc;

    font-size: 11px;

}


.solution-list span::before {

    content: "•";

    margin-right: 8px;

    color: var(--red);

}


.solution-arrow {

    position: absolute;

    right: 30px;

    bottom: 25px;

    color: #555555;

    font-size: 22px;

}


.solution-card:hover .solution-arrow {

    color: var(--red);

    transform:
        translate(4px,-4px);

}


/* =========================================================
   HARDWARE
========================================================= */

.hardware-home-section {

    padding: 120px 0;

    background: #090909;

}


.hardware-header {

    display: grid;

    grid-template-columns:
        1fr 0.7fr;

    gap: 80px;

    align-items: end;

    margin-bottom: 60px;

}


.hardware-tag {

    display: inline-block;

    margin-bottom: 20px;

    color: var(--red);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

}


.hardware-heading h2 {

    margin: 0;

    color: #ffffff;

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

    line-height: 1;

    letter-spacing: -2px;

}


.hardware-heading h2 span {

    color: var(--red);

}


.hardware-intro p {

    color: #929292;

    font-size: 14px;

    line-height: 1.8;

}


.hardware-main-link {

    display: inline-flex;

    gap: 12px;

    margin-top: 25px;

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

}


.hardware-main-link:hover {

    color: var(--red);

}


.hardware-main-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 1px;

    background: var(--border);

}


.hardware-feature-card {

    position: relative;

    min-height: 570px;

    padding: 50px;

    overflow: hidden;

    background: #0c0c0c;

}


.hardware-feature-bg {

    position: absolute;

    inset: 0;

    opacity: 0.15;

    background:
        radial-gradient(
            circle at 80% 20%,
            var(--red),
            transparent 30%
        );

}


.hardware-feature-content {

    position: relative;

    z-index: 2;

}


.hardware-icon-large {

    width: 65px;
    height: 65px;

    display: flex;

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

    color: var(--red);

    border:
        1px solid rgba(229,9,20,0.35);

    font-size: 27px;

    margin-bottom: 35px;

}


.hardware-small-label {

    color: var(--red);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}


.hardware-feature-content h3 {

    max-width: 500px;

    margin: 18px 0;

    color: #ffffff;

    font-size:
        clamp(32px, 4vw, 48px);

    line-height: 1.05;

}


.hardware-feature-content h3 strong {

    color: var(--red);

}


.hardware-feature-content p {

    max-width: 500px;

    color: #858585;

    font-size: 14px;

    line-height: 1.8;

}


.hardware-feature-points {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-top: 35px;

}


.hardware-feature-points div {

    color: #aaaaaa;

    font-size: 11px;

}


.hardware-feature-points span {

    margin-right: 8px;

    color: var(--red);

}


.hardware-feature-number {

    position: absolute;

    right: 30px;

    bottom: 25px;

    color: #222222;

    font-size: 80px;

    font-weight: 900;

}


.hardware-services-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 1px;

    background: var(--border);

}


.hardware-service-card {

    position: relative;

    min-height: 285px;

    padding: 32px;

    color: #ffffff;

    text-decoration: none;

    background: #0a0a0a;

    transition: 0.3s ease;

}


.hardware-service-card:hover {

    background: #111111;

}


.hardware-service-top {

    display: flex;

    justify-content: space-between;

}


.hardware-service-number {

    color: #555555;

    font-size: 9px;

    letter-spacing: 2px;

}


.hardware-service-icon {

    font-size: 22px;

}


.hardware-service-card h3 {

    margin: 55px 0 12px;

    color: #ffffff;

    font-size: 18px;

}


.hardware-service-card p {

    max-width: 230px;

    color: #777777;

    font-size: 12px;

    line-height: 1.7;

}


.service-arrow {

    position: absolute;

    right: 25px;

    bottom: 20px;

    color: #555555;

}


.hardware-service-card:hover
.service-arrow {

    color: var(--red);

}


.hardware-bottom-strip {

    display: grid;

    grid-template-columns:
        220px 1fr;

    margin-top: 1px;

    background: #0b0b0b;

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

}


.hardware-strip-title {

    padding: 25px;

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

}


.hardware-strip-title span {

    display: block;

    color: var(--red);

    font-size: 8px;

    letter-spacing: 2px;

}


.hardware-strip-title strong {

    display: block;

    margin-top: 7px;

    color: #ffffff;

    font-size: 13px;

}


.hardware-strip-items {

    display: grid;

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

}


.hardware-strip-items div {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    color: #777777;

    font-size: 10px;

    text-align: center;

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

}


/* =========================================================
   SOFTWARE + AI HOME
========================================================= */

.home-software-ai {

    padding: 120px 0;

    background: #050505;

}


.home-section-header {

    display: grid;

    grid-template-columns:
        1fr 0.7fr;

    gap: 80px;

    align-items: end;

    margin-bottom: 60px;

}


.home-section-header > p {

    color: #8d8d8d;

    font-size: 14px;

    line-height: 1.8;

}


.software-ai-home-grid {

    display: grid;

    grid-template-columns:
        1.15fr 0.85fr;

    gap: 18px;

}


.software-ai-main-card,
.software-ai-side-card {

    position: relative;

    min-height: 520px;

    padding: 50px;

    overflow: hidden;

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

}


.software-ai-main-card {

    background:
        linear-gradient(
            140deg,
            rgba(229,9,20,0.1),
            #0a0a0a 60%
        );

}


.software-ai-side-card {

    background: #0b0b0b;

}


.card-label {

    color: var(--red);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}


.software-ai-main-card h3 {

    max-width: 600px;

    margin: 25px 0;

    color: #ffffff;

    font-size:
        clamp(35px, 4vw, 55px);

    line-height: 1;

}


.software-ai-main-card h3 span,
.software-ai-side-card h3 span {

    color: var(--red);

}


.software-ai-main-card p,
.software-ai-side-card p {

    max-width: 550px;

    color: #888888;

    font-size: 14px;

    line-height: 1.8;

}


.software-ai-points {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-top: 35px;

}


.software-ai-points span {

    color: #bbbbbb;

    font-size: 11px;

}


.software-ai-points span::before {

    content: "•";

    margin-right: 8px;

    color: var(--red);

}


.software-ai-main-card > a,
.software-ai-side-card > a,
.vision-home-content > a,
.automation-home-content > a {

    display: inline-flex;

    margin-top: 35px;

    color: #ffffff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

}


.software-ai-main-card > a:hover,
.software-ai-side-card > a:hover,
.vision-home-content > a:hover,
.automation-home-content > a:hover {

    color: var(--red);

}


.ai-home-orbit {

    position: relative;

    width: 230px;
    height: 230px;

    margin: 25px auto 35px;

}


.ai-home-orbit::before,
.ai-home-orbit::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    border:
        1px solid rgba(229,9,20,0.3);

}


.ai-home-orbit::before {

    width: 210px;
    height: 210px;

}


.ai-home-orbit::after {

    width: 140px;
    height: 140px;

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

}


.ai-home-core {

    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 70px;
    height: 70px;

    display: flex;

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

    border-radius: 50%;

    color: #ffffff;

    background: var(--red);

    font-weight: 800;

    box-shadow:
        0 0 45px rgba(229,9,20,0.3);

}


.ai-node {

    position: absolute;

    padding: 6px 9px;

    color: #aaaaaa;

    background: #111111;

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

    font-size: 7px;

    letter-spacing: 1px;

}


.ai-node-1 {

    top: 10px;
    left: 0;

}


.ai-node-2 {

    top: 5px;
    right: 0;

}


.ai-node-3 {

    bottom: 10px;
    left: 55px;

}


.software-ai-side-card h3 {

    color: #ffffff;

    font-size: 28px;

    line-height: 1.1;

}


/* =========================================================
   VISION + AUTOMATION HOME
========================================================= */

.home-vision-automation {

    padding: 120px 0;

    background: #090909;

}


.vision-home-layout {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;

}


.vision-home-card,
.automation-home-card {

    min-height: 600px;

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

    overflow: hidden;

}


.vision-home-card {

    background: #050505;

}


.vision-home-visual {

    height: 300px;

    padding: 25px;

}


.vision-home-screen {

    position: relative;

    height: 100%;

    overflow: hidden;

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

    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 20px,
            rgba(255,255,255,0.025) 21px
        ),
        #111111;

}


.screen-label {

    position: absolute;

    top: 15px;
    left: 15px;

    color: var(--red);

    font-size: 8px;

    letter-spacing: 1px;

}


.vision-detection {

    position: absolute;

    padding: 4px 7px;

    color: #ffffff;

    background: var(--red);

    font-size: 7px;

}


.detection-a {

    left: 22%;
    top: 35%;

}


.detection-b {

    right: 20%;
    top: 27%;

}


.vision-scan {

    position: absolute;

    left: 0;
    right: 0;

    top: 55%;

    height: 1px;

    background: var(--red);

    box-shadow:
        0 0 15px var(--red);

}


.vision-screen-center {

    position: absolute;

    left: 50%;
    top: 50%;

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

    color: rgba(255,255,255,0.15);

    font-size: 32px;

    font-weight: 900;

    letter-spacing: 4px;

}


.vision-home-content,
.automation-home-content {

    padding: 40px;

}


.vision-home-content h3,
.automation-home-content h3 {

    max-width: 500px;

    margin: 20px 0;

    color: #ffffff;

    font-size:
        clamp(30px, 4vw, 45px);

    line-height: 1;

}


.vision-home-content h3 span,
.automation-home-content h3 span {

    color: var(--red);

}


.vision-home-content p,
.automation-home-content p {

    color: #858585;

    font-size: 13px;

    line-height: 1.8;

}


.automation-home-card {

    display: flex;

    align-items: center;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(229,9,20,0.12),
            transparent 30%
        ),
        #0b0b0b;

}


.automation-mini-flow {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 35px;

}


.automation-mini-flow span {

    padding: 9px 11px;

    color: #aaaaaa;

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

    font-size: 8px;

    letter-spacing: 1px;

}


.automation-mini-flow b {

    color: var(--red);

    font-size: 13px;

}


/* =========================================================
   BUSINESS PROBLEMS
========================================================= */

.business-problems {

    padding: 120px 0;

    background: #050505;

}


.business-problem-heading {

    max-width: 800px;

    margin-bottom: 60px;

}


.business-problem-heading p {

    max-width: 650px;

    margin-top: 25px;

    color: #898989;

    line-height: 1.8;

}


.problems-grid {

    display: grid;

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

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

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

}


.problem-card {

    min-height: 250px;

    padding: 32px;

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

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

    transition: 0.3s ease;

}


.problem-card:hover {

    background: #0d0d0d;

}


.problem-card > span {

    color: var(--red);

    font-size: 10px;

    letter-spacing: 2px;

}


.problem-card h3 {

    margin: 45px 0 12px;

    color: #ffffff;

    font-size: 20px;

}


.problem-card p {

    color: #777777;

    font-size: 12px;

    line-height: 1.7;

}


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

.technology-section {

    padding: 120px 0;

    background: #090909;

}


.technology-heading {

    max-width: 800px;

    margin-bottom: 60px;

}


.technology-heading p {

    max-width: 650px;

    margin-top: 25px;

    color: #898989;

    line-height: 1.8;

}


.technology-grid {

    display: grid;

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

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

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

}


.technology-grid div {

    min-height: 160px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

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

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

    transition: 0.3s ease;

}


.technology-grid div:hover {

    background: #101010;

}


.technology-grid span {

    color: var(--red);

    font-size: 9px;

    letter-spacing: 2px;

}


.technology-grid strong {

    color: #ffffff;

    font-size: 15px;

}


/* =========================================================
   PROCESS
========================================================= */

.home-process {

    padding: 120px 0;

    background: #050505;

}


.process-heading {

    margin-bottom: 65px;

}


.process-grid {

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;

    align-items: center;

}


.process-step {

    max-width: 190px;

    text-align: center;

    margin: auto;

}


.process-step > span {

    display: block;

    margin-bottom: 18px;

    color: var(--red);

    font-size: 9px;

    letter-spacing: 2px;

}


.process-icon {

    width: 60px;
    height: 60px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border:
        1px solid rgba(229,9,20,0.35);

    color: var(--red);

}


.process-step h3 {

    margin-bottom: 10px;

    color: #ffffff;

    font-size: 16px;

}


.process-step p {

    color: #747474;

    font-size: 11px;

    line-height: 1.7;

}


.process-line {

    width: 45px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(229,9,20,0.7),
            rgba(255,255,255,0.1)
        );

}


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

.home-final-cta {

    padding: 90px 0;

    background: #080808;

}


.final-cta-box {

    position: relative;

    min-height: 390px;

    padding: 70px;

    display: flex;

    align-items: center;

    overflow: hidden;

    border:
        1px solid rgba(229,9,20,0.25);

    background:
        linear-gradient(
            110deg,
            #120000,
            #090909 65%
        );

}


.final-cta-content {

    position: relative;

    z-index: 2;

    max-width: 750px;

}


.final-cta-content h2 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(40px, 5vw, 65px);

    line-height: 1;

    letter-spacing: -2px;

}


.final-cta-content h2 span {

    color: var(--red);

}


.final-cta-content p {

    max-width: 600px;

    margin: 25px 0 30px;

    color: #969696;

    line-height: 1.8;

}


.cta-button {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 16px 25px;

    color: #ffffff;

    background: var(--red);

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

}


.cta-button:hover {

    background: var(--red-light);

}


.final-cta-mark {

    position: absolute;

    right: 70px;

    width: 300px;
    height: 300px;

    display: flex;

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

    border-radius: 50%;

    border:
        1px solid rgba(229,9,20,0.18);

}


.final-cta-mark::before {

    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    border-radius: 50%;

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

}


.final-cta-mark span {

    position: relative;

    z-index: 2;

    color: var(--red);

    font-size: 65px;

    font-weight: 900;

}


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

.site-footer {

    background: #030303;

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

}


.footer-grid {

    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1fr;

    gap: 50px;

    padding: 75px 0 55px;

}


.footer-logo {

    width: 90px;

    margin-bottom: 20px;

}


.footer-brand p {

    max-width: 350px;

    color: #777777;

    font-size: 13px;

    line-height: 1.7;

}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.footer-column h4 {

    margin: 0 0 10px;

    color: #ffffff;

    font-size: 13px;

}


.footer-column a {

    color: #777777;

    text-decoration: none;

    font-size: 13px;

    transition: 0.25s ease;

}


.footer-column a:hover {

    color: var(--red);

}


.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 25px 0;

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

}


.footer-bottom p,
.footer-bottom span {

    margin: 0;

    color: #555555;

    font-size: 10px;

}


/* =========================================================
   RESPONSIVE — 1100
========================================================= */

@media (max-width: 1100px) {


    .hero-container {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .hero-content {

        margin: auto;

    }


    .hero-content p {

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

    }


    .hero-buttons {

        justify-content: center;

    }


    .hero-trust {

        justify-content: center;

    }


    .hero-visual {

        transform: scale(0.8);

        margin-top: -40px;

    }


    .solutions-grid {

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

    }


    .hardware-main-grid {

        grid-template-columns: 1fr;

    }


    .software-ai-home-grid,
    .vision-home-layout {

        grid-template-columns: 1fr;

    }


    .problems-grid {

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

    }


    .technology-grid {

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

    }


    .process-grid {

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

        gap: 25px;

    }


    .process-line {

        display: none;

    }

}


/* =========================================================
   RESPONSIVE — 800
========================================================= */

@media (max-width: 800px) {


    .nav-menu {

        position: absolute;

        left: 0;
        right: 0;

        top: 100%;

        display: none;

        flex-direction: column;

        align-items: stretch;

        padding: 15px;

        background: #080808;

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

    }


    .nav-menu.open {

        display: flex;

    }


    .nav-link {

        padding: 14px;

    }


    .nav-link.active::after {

        left: 14px;
        right: auto;

        width: 25px;

    }


    .nav-btn {

        margin: 8px 0 0;

        text-align: center;

    }


    .nav-dropdown-btn {

        width: 100%;

        justify-content: space-between;

        padding: 14px;

    }


    .nav-dropdown-menu {

        position: static;

        width: 100%;

        display: none;

        opacity: 1;

        visibility: visible;

        transform: none;

        margin-top: 5px;

        box-shadow: none;

    }


    .nav-dropdown.open
    .nav-dropdown-menu {

        display: block;

    }


    .mobile-menu-btn {

        display: flex;

    }


    .home-hero {

        min-height: auto;

        padding: 100px 0 70px;

    }


    .hero-content h1 {

        font-size: 53px;

    }


    .hero-visual {

        width: 400px;
        height: 400px;

        transform: scale(0.72);

        margin:
            -20px auto -70px;

    }


    .section-intro,
    .hardware-header,
    .home-section-header {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .solutions-grid {

        grid-template-columns: 1fr;

    }


    .solution-card {

        min-height: auto;

    }


    .hardware-bottom-strip {

        grid-template-columns: 1fr;

    }


    .hardware-strip-title {

        border-right: 0;

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

    }


    .hardware-strip-items {

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

    }


    .hardware-strip-items div {

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

    }


    .software-ai-main-card,
    .software-ai-side-card {

        min-height: auto;

    }


    .vision-home-card,
    .automation-home-card {

        min-height: auto;

    }


    .process-grid {

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

    }


    .final-cta-box {

        padding: 55px 40px;

    }


    .final-cta-mark {

        opacity: 0.2;

        right: -80px;

    }


    .footer-grid {

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

    }

}


/* =========================================================
   RESPONSIVE — 600
========================================================= */

@media (max-width: 600px) {


    .container {

        width: 90%;

    }


    .site-logo {

        width: 70px;

    }


    .home-hero {

        padding:
            85px 0 55px;

    }


    .hero-content h1 {

        font-size: 43px;

        letter-spacing: -2px;

    }


    .hero-content p {

        font-size: 15px;

    }


    .hero-trust {

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 20px;

    }


    .hero-trust > div {

        min-width: auto;

        padding-right: 0;

        margin-right: 0;

        border-right: 0;

    }


    .hero-visual {

        width: 340px;
        height: 340px;

        transform: scale(0.65);

        margin:
            -35px auto -80px;

    }


    .hero-floating-card {

        min-width: 125px;

    }


    .card-top {

        left: 0;

    }


    .card-right {

        right: -15px;

    }


    .card-bottom {

        left: 25px;

    }


    .solutions-overview,
    .hardware-home-section,
    .home-software-ai,
    .home-vision-automation,
    .business-problems,
    .technology-section,
    .home-process {

        padding: 80px 0;

    }


    .section-intro h2,
    .home-section-header h2,
    .business-problem-heading h2,
    .technology-heading h2,
    .process-heading h2 {

        font-size: 40px;

    }


    .hardware-feature-card {

        padding: 35px;

    }


    .hardware-feature-points {

        grid-template-columns: 1fr;

    }


    .hardware-services-grid {

        grid-template-columns: 1fr;

    }


    .hardware-strip-items {

        grid-template-columns: 1fr;

    }


    .software-ai-main-card,
    .software-ai-side-card {

        padding: 35px;

    }


    .software-ai-points {

        grid-template-columns: 1fr;

    }


    .vision-home-visual {

        height: 240px;

    }


    .vision-home-content,
    .automation-home-content {

        padding: 30px;

    }


    .automation-mini-flow {

        flex-wrap: wrap;

    }


    .problems-grid,
    .technology-grid {

        grid-template-columns: 1fr;

    }


    .process-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .final-cta-box {

        padding: 45px 25px;

    }


    .final-cta-content h2 {

        font-size: 40px;

    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

    }

}