:root {
    --primary: #ff00cc;
    --secondary: #7c3aed;
    --dark: #05020a;
    --glass: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.08);
    --text: #e2e8f0;
}

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
body { background: var(--dark); color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; scroll-behavior: smooth; }
.container { max-width: 1300px; margin: 0 auto; padding: 0 30px; }

/* Blobs */
.blob-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.blob { position: absolute; width: 600px; height: 600px; background: var(--secondary); filter: blur(150px); opacity: 0.15; border-radius: 50%; animation: move 25s infinite alternate; }
.b2 { background: var(--primary); right: -100px; bottom: -100px; animation-delay: -5s; }
@keyframes move { from { transform: translate(0,0); } to { transform: translate(150px, 150px); } }

/* Nav */
.pro-nav { position: fixed; top: 0; width: 100%; padding: 20px 0; z-index: 1000; background: rgba(5, 2, 10, 0.8); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
.nav-flex { display: flex; justify-content: space-between; align-items: center; }
.logo-img { height: 90px; }
.nav-menu { display: flex; gap: 40px; list-style: none; }
.nav-link { color: #888; text-decoration: none; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }
.contact-trigger { background: linear-gradient(90deg, var(--primary), var(--secondary)); color: white; padding: 12px 25px; border-radius: 100px; text-decoration: none; font-weight: 700; font-size: 13px; }

/* Hero */
.hero-pro { padding: 180px 0 100px; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 50px; align-items: center; }
.hero-label { color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 20px; display: block; }
.hero-title { font-size: clamp(40px, 5vw, 80px); line-height: 1.1; margin-bottom: 25px; }
.text-gradient { background: linear-gradient(90deg, #fff, var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-subtitle { font-size: 18px; color: #888; margin-bottom: 40px; line-height: 1.6; }
.hero-main-img { width: 100%; border-radius: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); border: 1px solid var(--border); }

/* Components */
.py-100 { padding: 100px 0; }
.bg-darker { background: #030107; }
.section-tag { color: var(--secondary); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px; }
.section-title { font-size: 40px; margin-bottom: 50px; }

.solutions-grid, .tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.sol-card, .tech-item { background: var(--glass); padding: 40px; border-radius: 24px; border: 1px solid var(--border); transition: 0.4s; }
.sol-card:hover { transform: translateY(-10px); border-color: var(--primary); }

/* Form */
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.contact-form-box { background: var(--glass); padding: 40px; border-radius: 30px; border: 1px solid var(--border); }
.input-group { margin-bottom: 20px; }
.input-group label { display: block; font-size: 13px; margin-bottom: 8px; color: #888; }
.input-group input, .input-group textarea { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--border); padding: 15px; border-radius: 12px; color: #fff; font-family: inherit; }
.btn-main { background: var(--primary); border: none; padding: 16px 32px; border-radius: 12px; color: #fff; font-weight: 700; cursor: pointer; }
.btn-ghost { background: transparent; border: 1px solid var(--border); padding: 16px 32px; border-radius: 12px; color: #fff; font-weight: 700; cursor: pointer; }
.w-full { width: 100%; }

/* Cursor */
.cursor-dot { position: fixed; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; pointer-events: none; z-index: 10000; transform: translate(-50%, -50%); }
.cursor-outline { position: fixed; width: 40px; height: 40px; border: 2px solid var(--primary); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); }

.footer { padding: 40px 0; text-align: center; color: #444; font-size: 12px; border-top: 1px solid var(--border); }

@media (max-width: 900px) {
    .hero-grid, .contact-wrapper { grid-template-columns: 1fr; }
    * { cursor: auto !important; }
    .cursor-dot, .cursor-outline { display: none; }
}
/* ... Keep the previous variables and general styles ... */

.pro-select {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    padding: 15px;
    border-radius: 12px;
    color: #fff;
    font-family: inherit;
    appearance: none; /* Modern look */
}

/* Add a blueprint-grid effect to sections */
section {
    background-image: radial-gradient(var(--border) 1px, transparent 1px);
    background-size: 40px 40px;
}

.hero-main-img {
    filter: brightness(0.8) contrast(1.1); /* Makes the construction imagery look more 'pro' */

}
/* --- RESPONSIVE ADJUSTMENTS --- */

/* For Tablets (Screens smaller than 1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }
    
    .hero-grid, .contact-wrapper, .hero-pro .hero-grid {
        grid-template-columns: 1fr; /* Stack columns vertically */
        text-align: center;
    }

    .hero-content {
        margin-bottom: 40px;
    }

    .hero-title {
        font-size: 3.5rem;
    }
}

/* For Mobile Phones (Screens smaller than 768px) */
@media (max-width: 768px) {
    /* Disable custom cursor on mobile (it doesn't work with touch) */
    .cursor-dot, .cursor-outline {
        display: none !important;
    }
    
    * {
        cursor: auto !important; /* Revert to default touch behavior */
    }

    /* Navbar Mobile Fix */
    .nav-menu {
        display: none; /* Hide standard menu for a hamburger menu later */
    }

    .hero-title {
        font-size: 2.5rem;
    }

    /* Stack BOQ Table for Mobile */
    .table-container {
        overflow-x: auto; /* Allow horizontal scrolling for large engineering tables */
    }

    .pro-table {
        min-width: 800px; /* Ensures table data doesn't squish */
    }

    /* Buttons should be full width on mobile for easier tapping */
    .cta-group {
        flex-direction: column;
    }

    .btn-main, .btn-ghost {
        width: 100%;
    }
}

/* Fix for the Internal Management System (IMS) Sidebar */
@media (max-width: 900px) {
    body {
        flex-direction: column; /* Move sidebar to top or bottom */
    }

    .sidebar {
        width: 100%;
        height: auto;
        padding: 20px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .nav-menu {
        flex-direction: row;
        overflow-x: auto;
        gap: 20px;
    }

    .main-view {
        padding: 20px;
    }
}