.phcl-iot-page {
        --phcl-primary: #635bff;
        --phcl-primary-dark: #493fd1;
        --phcl-cyan: #16c7ff;
        --phcl-green: #22c55e;
        --phcl-orange: #f59e0b;
        --phcl-red: #ef4444;
        --phcl-dark: #08111f;
        --phcl-dark-2: #0d1728;
        --phcl-text: #172033;
        --phcl-muted: #64748b;
        --phcl-border: #e5eaf2;
        --phcl-light: #f7f9fc;
        --phcl-white: #ffffff;

        font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, Helvetica, Arial, sans-serif;
        color: var(--phcl-text);
        overflow: hidden;
        background: #fff;
    }

    .phcl-iot-page *,
    .phcl-iot-page *::before,
    .phcl-iot-page *::after {
        box-sizing: border-box;
    }

    .phcl-iot-page a {
        text-decoration: none;
    }

    .phcl-container {
        width: min(1180px, calc(100% - 40px));
        margin: 0 auto;
    }

    /* ==============================
       Hero
    ============================== */

    .phcl-iot-hero {
        position: relative;
        padding: 105px 0 90px;
        background:
            radial-gradient(circle at 85% 20%, rgba(99, 91, 255, .18), transparent 32%),
            radial-gradient(circle at 15% 70%, rgba(22, 199, 255, .12), transparent 28%),
            linear-gradient(135deg, #f8faff 0%, #eef4ff 100%);
    }

    .phcl-iot-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .35;
        background-image:
            linear-gradient(rgba(99, 91, 255, .06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(99, 91, 255, .06) 1px, transparent 1px);
        background-size: 42px 42px;
        mask-image: linear-gradient(to bottom, black, transparent);
    }

    .phcl-iot-hero-inner {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 65px;
    }

    .phcl-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 14px;
        margin-bottom: 22px;
        border: 1px solid rgba(99, 91, 255, .18);
        border-radius: 100px;
        background: rgba(255,255,255,.72);
        color: var(--phcl-primary);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        backdrop-filter: blur(12px);
    }

    .phcl-eyebrow-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 0 5px rgba(34,197,94,.12);
    }

    .phcl-iot-hero h1 {
        margin: 0 0 22px;
        max-width: 680px;
        font-size: clamp(44px, 5vw, 72px);
        line-height: 1.02;
        letter-spacing: -0.055em;
        font-weight: 800;
        color: var(--phcl-dark);
    }

    .phcl-gradient-text {
        background: linear-gradient(90deg, var(--phcl-primary), #13bce5);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .phcl-iot-hero-description {
        max-width: 590px;
        margin: 0 0 30px;
        color: #536174;
        font-size: 18px;
        line-height: 1.75;
    }

    .phcl-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 13px;
        margin-bottom: 30px;
    }

    .phcl-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 50px;
        padding: 0 21px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        transition: .25s ease;
    }

    .phcl-btn-primary {
        color: #fff;
        background: linear-gradient(135deg, var(--phcl-primary), #786fff);
        box-shadow: 0 12px 30px rgba(99,91,255,.25);
    }

    .phcl-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 35px rgba(99,91,255,.32);
    }

    .phcl-btn-outline {
        color: var(--phcl-dark);
        border: 1px solid #dbe1eb;
        background: rgba(255,255,255,.8);
    }

    .phcl-btn-outline:hover {
        border-color: var(--phcl-primary);
        color: var(--phcl-primary);
        transform: translateY(-2px);
    }

    .phcl-trust-line {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #718096;
        font-size: 13px;
    }

    .phcl-trust-icons {
        display: flex;
    }

    .phcl-trust-icons span {
        width: 27px;
        height: 27px;
        display: grid;
        place-items: center;
        margin-left: -5px;
        border: 2px solid #fff;
        border-radius: 50%;
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        background: var(--phcl-primary);
    }

    .phcl-trust-icons span:nth-child(2) {
        background: #0ea5e9;
    }

    .phcl-trust-icons span:nth-child(3) {
        background: #10b981;
    }

    .phcl-trust-icons span:nth-child(4) {
        background: #f59e0b;
    }

    /* ==============================
       Dashboard Mockup
    ============================== */

    .phcl-dashboard-wrap {
        position: relative;
        perspective: 1200px;
    }

    .phcl-dashboard {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 20px;
        background: #0b1424;
        box-shadow:
            0 40px 90px rgba(23,34,56,.25),
            0 10px 30px rgba(99,91,255,.12);
        transform: rotateY(-5deg) rotateX(2deg);
        transition: .5s ease;
    }

    .phcl-dashboard:hover {
        transform: rotateY(0) rotateX(0) translateY(-5px);
    }

    .phcl-dashboard-topbar {
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 17px;
        border-bottom: 1px solid rgba(255,255,255,.07);
        background: #101b2d;
    }

    .phcl-window-dots {
        display: flex;
        gap: 6px;
    }

    .phcl-window-dots span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #334155;
    }

    .phcl-dashboard-brand {
        color: #e9edff;
        font-size: 12px;
        font-weight: 700;
    }

    .phcl-live-badge {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #4ade80;
        font-size: 10px;
        font-weight: 700;
    }

    .phcl-live-badge i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #4ade80;
        box-shadow: 0 0 0 5px rgba(74,222,128,.1);
    }

    .phcl-dashboard-body {
        padding: 18px;
    }

    .phcl-dashboard-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .phcl-dashboard-title strong {
        color: #fff;
        font-size: 15px;
    }

    .phcl-dashboard-title small {
        color: #718096;
        font-size: 9px;
    }

    .phcl-dashboard-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px;
    }

    .phcl-mini-card {
        padding: 13px;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 11px;
        background: #111d30;
    }

    .phcl-mini-card-label {
        color: #718096;
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .phcl-mini-card-value {
        margin-top: 6px;
        color: #fff;
        font-size: 19px;
        font-weight: 800;
    }

    .phcl-mini-card-value span {
        margin-left: 3px;
        color: #64748b;
        font-size: 9px;
        font-weight: 500;
    }

    .phcl-positive {
        color: #4ade80 !important;
    }

    .phcl-dashboard-chart {
        grid-column: span 2;
        height: 160px;
        position: relative;
        margin-top: 10px;
        padding: 14px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 11px;
        background: #111d30;
    }

    .phcl-chart-header {
        display: flex;
        justify-content: space-between;
        color: #94a3b8;
        font-size: 9px;
    }

    .phcl-chart-line {
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 17px;
        height: 100px;
    }

    .phcl-chart-line svg {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .phcl-chart-grid-line {
        stroke: rgba(255,255,255,.05);
        stroke-width: 1;
    }

    .phcl-chart-path {
        fill: none;
        stroke: #7168ff;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 0 7px rgba(113,104,255,.5));
    }

    .phcl-device-status {
        margin-top: 10px;
        padding: 13px;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 11px;
        background: #111d30;
    }

    .phcl-status-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 7px 0;
        border-bottom: 1px solid rgba(255,255,255,.05);
        color: #b8c2d4;
        font-size: 9px;
    }

    .phcl-status-row:last-child {
        border-bottom: 0;
    }

    .phcl-status-left {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .phcl-status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

    .phcl-status-online {
        background: #22c55e;
        box-shadow: 0 0 0 4px rgba(34,197,94,.08);
    }

    .phcl-status-warning {
        background: #f59e0b;
        box-shadow: 0 0 0 4px rgba(245,158,11,.08);
    }

    /* Floating notification */
    .phcl-floating-alert {
        position: absolute;
        right: -35px;
        bottom: 40px;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 190px;
        padding: 12px;
        border: 1px solid #e5e7eb;
        border-radius: 13px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 20px 45px rgba(15,23,42,.15);
        animation: phclFloat 4s ease-in-out infinite;
    }

    .phcl-alert-icon {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        color: #f59e0b;
        background: #fff7df;
        font-size: 15px;
    }

    .phcl-floating-alert strong {
        display: block;
        color: #1e293b;
        font-size: 10px;
    }

    .phcl-floating-alert small {
        color: #94a3b8;
        font-size: 8px;
    }

    @keyframes phclFloat {
        0%,100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }

    /* ==============================
       Stats
    ============================== */

    .phcl-stats {
        position: relative;
        margin-top: -1px;
        padding: 30px 0;
        background: #fff;
        border-bottom: 1px solid var(--phcl-border);
    }

    .phcl-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .phcl-stat {
        padding: 5px 30px;
        text-align: center;
        border-right: 1px solid var(--phcl-border);
    }

    .phcl-stat:last-child {
        border-right: 0;
    }

    .phcl-stat strong {
        display: block;
        color: var(--phcl-dark);
        font-size: 28px;
        letter-spacing: -.04em;
    }

    .phcl-stat span {
        color: var(--phcl-muted);
        font-size: 12px;
    }

    /* ==============================
       Section
    ============================== */

    .phcl-section {
        padding: 100px 0;
    }

    .phcl-section-light {
        background: var(--phcl-light);
    }

    .phcl-section-heading {
        max-width: 720px;
        margin: 0 auto 55px;
        text-align: center;
    }

    .phcl-section-heading .phcl-eyebrow {
        margin-bottom: 16px;
    }

    .phcl-section-heading h2 {
        margin: 0 0 16px;
        color: var(--phcl-dark);
        font-size: clamp(34px, 4vw, 50px);
        line-height: 1.1;
        letter-spacing: -.045em;
    }

    .phcl-section-heading p {
        margin: 0;
        color: var(--phcl-muted);
        font-size: 16px;
        line-height: 1.75;
    }

    /* ==============================
       Feature Cards
    ============================== */

    .phcl-feature-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .phcl-feature-card {
        position: relative;
        overflow: hidden;
        padding: 30px;
        border: 1px solid var(--phcl-border);
        border-radius: 18px;
        background: #fff;
        transition: .3s ease;
    }

    .phcl-feature-card:hover {
        transform: translateY(-6px);
        border-color: rgba(99,91,255,.22);
        box-shadow: 0 20px 45px rgba(15,23,42,.08);
    }

    .phcl-feature-card::after {
        content: "";
        position: absolute;
        width: 110px;
        height: 110px;
        right: -55px;
        bottom: -55px;
        border-radius: 50%;
        background: rgba(99,91,255,.05);
    }

    .phcl-feature-icon {
        width: 50px;
        height: 50px;
        display: grid;
        place-items: center;
        margin-bottom: 20px;
        border-radius: 14px;
        color: var(--phcl-primary);
        background: #f0efff;
        font-size: 21px;
    }

    .phcl-feature-card h3 {
        margin: 0 0 10px;
        color: var(--phcl-dark);
        font-size: 18px;
    }

    .phcl-feature-card p {
        margin: 0;
        color: var(--phcl-muted);
        font-size: 14px;
        line-height: 1.7;
    }

    /* ==============================
       Architecture
    ============================== */

    .phcl-architecture {
        display: grid;
        grid-template-columns: .9fr 1.1fr;
        align-items: center;
        gap: 80px;
    }

    .phcl-architecture-copy h2 {
        margin: 0 0 18px;
        color: var(--phcl-dark);
        font-size: clamp(34px, 4vw, 48px);
        line-height: 1.1;
        letter-spacing: -.045em;
    }

    .phcl-architecture-copy > p {
        margin: 0 0 30px;
        color: var(--phcl-muted);
        font-size: 16px;
        line-height: 1.8;
    }

    .phcl-check-list {
        display: grid;
        gap: 14px;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .phcl-check-list li {
        display: flex;
        gap: 11px;
        align-items: flex-start;
        color: #445065;
        font-size: 14px;
    }

    .phcl-check-list li::before {
        content: "✓";
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #16a34a;
        background: #eaf9ef;
        font-size: 11px;
        font-weight: 800;
    }

    .phcl-architecture-visual {
        position: relative;
        padding: 30px;
        border: 1px solid #dce4f1;
        border-radius: 24px;
        background:
            radial-gradient(circle at 50% 50%, rgba(99,91,255,.10), transparent 50%),
            #f8faff;
    }

    .phcl-flow {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        align-items: center;
        gap: 12px;
    }

    .phcl-flow-box {
        min-height: 130px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px;
        border: 1px solid #dce4ef;
        border-radius: 15px;
        text-align: center;
        background: #fff;
        box-shadow: 0 10px 25px rgba(15,23,42,.05);
    }

    .phcl-flow-icon {
        width: 45px;
        height: 45px;
        display: grid;
        place-items: center;
        margin-bottom: 10px;
        border-radius: 12px;
        color: #fff;
        background: linear-gradient(135deg, var(--phcl-primary), #10bce6);
        font-size: 18px;
    }

    .phcl-flow-box strong {
        color: var(--phcl-dark);
        font-size: 12px;
    }

    .phcl-flow-box small {
        margin-top: 5px;
        color: #94a3b8;
        font-size: 9px;
    }

    .phcl-flow-arrow {
        color: var(--phcl-primary);
        font-size: 20px;
        font-weight: 800;
    }

    /* ==============================
       Live Metrics
    ============================== */

    .phcl-metrics-section {
        background: #08111f;
        color: #fff;
    }

    .phcl-metrics-section .phcl-section-heading h2 {
        color: #fff;
    }

    .phcl-metrics-section .phcl-section-heading p {
        color: #91a0b7;
    }

    .phcl-metric-dashboard {
        display: grid;
        grid-template-columns: 1.3fr .7fr;
        gap: 16px;
    }

    .phcl-metric-panel {
        padding: 25px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 18px;
        background: #0e1a2b;
    }

    .phcl-panel-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }

    .phcl-panel-title strong {
        font-size: 14px;
    }

    .phcl-panel-title span {
        color: #718096;
        font-size: 10px;
    }

    .phcl-big-number {
        margin-bottom: 5px;
        font-size: 38px;
        font-weight: 800;
        letter-spacing: -.04em;
    }

    .phcl-big-number small {
        color: #718096;
        font-size: 13px;
        font-weight: 500;
    }

    .phcl-metric-progress {
        height: 8px;
        overflow: hidden;
        margin: 18px 0 25px;
        border-radius: 20px;
        background: #1c2a3e;
    }

    .phcl-metric-progress span {
        display: block;
        width: 78%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--phcl-primary), var(--phcl-cyan));
    }

    .phcl-metric-list {
        display: grid;
        gap: 12px;
    }

    .phcl-metric-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 0;
        border-bottom: 1px solid rgba(255,255,255,.05);
        color: #a8b4c7;
        font-size: 11px;
    }

    .phcl-metric-item strong {
        color: #fff;
    }

    /* ==============================
       Industries
    ============================== */

    .phcl-industries {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    .phcl-industry {
        position: relative;
        min-height: 180px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 22px;
        overflow: hidden;
        border-radius: 18px;
        background: #111c2e;
        color: #fff;
    }

    .phcl-industry::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .7;
        background:
            radial-gradient(circle at 75% 20%, rgba(99,91,255,.45), transparent 35%),
            linear-gradient(140deg, #13233a, #0a1220);
    }

    .phcl-industry > * {
        position: relative;
        z-index: 1;
    }

    .phcl-industry-icon {
        position: absolute !important;
        top: 20px;
        left: 20px;
        width: 43px;
        height: 43px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 12px;
        background: rgba(255,255,255,.06);
        font-size: 18px;
    }

    .phcl-industry h3 {
        margin: 0 0 5px;
        font-size: 16px;
    }

    .phcl-industry p {
        margin: 0;
        color: #8fa0b8;
        font-size: 11px;
        line-height: 1.6;
    }

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

    .phcl-iot-cta {
        padding: 95px 0;
        background:
            radial-gradient(circle at 10% 30%, rgba(22,199,255,.22), transparent 28%),
            radial-gradient(circle at 90% 70%, rgba(99,91,255,.3), transparent 30%),
            #091322;
    }

    .phcl-cta-box {
        position: relative;
        overflow: hidden;
        padding: 65px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 25px;
        text-align: center;
        background: rgba(255,255,255,.035);
    }

    .phcl-cta-box::before {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        background: rgba(99,91,255,.12);
        filter: blur(50px);
    }

    .phcl-cta-box > * {
        position: relative;
    }

    .phcl-cta-box h2 {
        max-width: 750px;
        margin: 0 auto 17px;
        color: #fff;
        font-size: clamp(34px, 4vw, 52px);
        line-height: 1.08;
        letter-spacing: -.045em;
    }

    .phcl-cta-box p {
        max-width: 620px;
        margin: 0 auto 30px;
        color: #8fa0b8;
        font-size: 16px;
        line-height: 1.75;
    }

    /* ==============================
       Responsive
    ============================== */

    @media (max-width: 1000px) {
        .phcl-iot-hero-inner,
        .phcl-architecture {
            grid-template-columns: 1fr;
        }

        .phcl-dashboard-wrap {
            max-width: 650px;
            width: 100%;
            margin: 20px auto 0;
        }

        .phcl-feature-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .phcl-industries {
            grid-template-columns: repeat(2, 1fr);
        }

        .phcl-metric-dashboard {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 700px) {
        .phcl-container {
            width: min(100% - 28px, 1180px);
        }

        .phcl-iot-hero {
            padding: 70px 0 65px;
        }

        .phcl-iot-hero h1 {
            font-size: 43px;
        }

        .phcl-iot-hero-description {
            font-size: 16px;
        }

        .phcl-dashboard {
            transform: none;
        }

        .phcl-floating-alert {
            right: 8px;
            bottom: 15px;
        }

        .phcl-stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px 0;
        }

        .phcl-stat:nth-child(2) {
            border-right: 0;
        }

        .phcl-feature-grid {
            grid-template-columns: 1fr;
        }

        .phcl-section {
            padding: 70px 0;
        }

        .phcl-flow {
            grid-template-columns: 1fr;
        }

        .phcl-flow-arrow {
            transform: rotate(90deg);
            text-align: center;
        }

        .phcl-industries {
            grid-template-columns: 1fr;
        }

        .phcl-cta-box {
            padding: 45px 22px;
        }

        .phcl-dashboard-grid {
            grid-template-columns: 1fr 1fr;
        }

        .phcl-dashboard-chart {
            grid-column: span 2;
        }
    }

    @media (max-width: 480px) {
        .phcl-hero-actions {
            flex-direction: column;
        }

        .phcl-btn {
            width: 100%;
        }

        .phcl-dashboard-body {
            padding: 11px;
        }

        .phcl-dashboard-grid {
            gap: 6px;
        }

        .phcl-mini-card {
            padding: 10px;
        }

        .phcl-mini-card-value {
            font-size: 16px;
        }
    }