@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

:root {
    --bg-frame: #ffffff;
    /* White outer border/frame seen in image? Actually the image has a white border. Let's assume white frame. */
    --bg-dark: #111111;
    --text-dark: #111111;
    --text-light: #ffffff;
    --radius-outer: 40px;
}

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

body {
    font-family: 'Outfit', sans-serif;
    background-color: #f0f0f0;
    /* Outer world background */
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    /* Allow scrolling */
    padding: 0;
}

.app-container {
    width: 100%;
    min-height: 100vh;
    padding: 1rem;
    display: flex;
    padding-top: 0rem;
    padding-bottom: 0rem;
    flex-direction: column;
    /* Stack sections vertically */
    align-items: center;
    gap: 2rem;
}

.app-frame {
    background: #ffffff;
    width: 100%;
    max-width: 1400px;
    height: 98vh;
    /* Fixed height for the dashboard feel */
    border-radius: var(--radius-outer);
    padding: 0.5rem;
    /* Small white gap acting as border */
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

/* --- Top Hero Section --- */
.hero-section {
    width: 100%;
    height: 55%;
    /* Top half */
    background: url('../images/powercube-hero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 32px 32px 32px 32px;
    /* All round initially, we need the "reverse notch" logic */
    position: relative;
    /* To create the inverted curve at bottom right, we might need a mask or pseudo element. 
       Actually, the design shows the HERO having a rounded bottom-left, but a specific structure on bottom-right.
       Looking closely: The Hero is full width, but the bottom-right corner seems to "flow" into the white notch?
       Let's simplify: 
       Hero is a rounded rect. 
       But the white section BITES into the Hero.
       OR the Hero BITES into the white section.
       Actually, looking at the layout: The top black section has a rounded corner at bottom-left. 
       At bottom-right, it seems to have a rounded corner too. 
       But the notch is separate.
    */
    border-bottom-right-radius: 200px;
    /* Big curve for the style */
}

/* Header Overlay */
.overlay-header {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
    align-items: flex-start;
}

.header-left {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.logo-box {
    width: 70px;
    height: 50px;
    background: black;
    color: white;
    font-family: monospace;
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}

.menu-btn {
    width: 60px;
    height: 50px;
    background: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-right {
    display: flex;
    gap: 1rem;
}

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.side-nav {
    position: absolute;
    right: 2rem;
    top: 40%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nav-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s;
}

.nav-dot.active {
    background: white;
    color: black;
    font-weight: bold;
}

/* --- Notch --- */
.notch-connector {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    /* The design has a black circle sitting explicitly on the junction */
}

.notch-circle-black {
    width: 100px;
    height: 100px;
    background: #000;
    border: 8px solid #fff;
    /* The white border simulates the gap */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Bottom Section --- */
.bottom-split {
    flex: 1;
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    overflow: hidden;
}

/* Left Grid (Images) */
.bottom-left-grid {
    flex: 0 0 50%;
    /* Takes half width */
    display: flex;
    gap: 1rem;
}

.card-dark-kitchen {
    flex: 1;
    background: url('../images/itm-iot.png') center/cover;
    border-radius: 32px;
    position: relative;
    padding: 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.card-dark-room {
    flex: 1;
    background: url('../images/minimal.png') center/cover;
    border-radius: 32px;
    position: relative;
    padding: 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.pill-btn {
    background: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 99px;
    font-weight: 600;
    cursor: pointer;
}

.card-content-bottom-center {
    display: flex;
    gap: 1rem;
}

.circle-btn-white {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Right Content (White) */
.bottom-right-content {
    flex: 1;
    background: white;
    /* Matches frame */
    /* Wait, if frame is white and this is white, it blends. 
       The image shows the bottom right is CLEAN white space. */
    border-radius: 32px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    color: black;
}

/* We need to mimic the 'inverted curve' top left of this white block.
   This is tricky in CSS. The hero has a curve bottom-right.
   The notch sits between. 
   Basically:
   Hero: border-bottom-right-radius: 200px? No, the hero curve is CONVEX.
   The Reference shows the White Area effectively "cutting into" the black area. 
   Wait, looking at image: 
   The Black Top Area has a convex/outward curve at bottom-right corner of the left part? No.
   It looks like the Black Top area has a "Droplet" shape downwards?
   Actually, simpler approach:
   Top Hero is mostly rectangular. 
   Bottom Right White area pushes UP into the black area with a convex curve? 
   OR Top Left of White area has a big border-radius.
   Let's try Top Left of White Area border-radius: 100px.
*/
.bottom-right-content {
    border-top-left-radius: 100px;
    /* Crucial for the shape */
}

/* And we need to ensure the element TO THE LEFT (The hero's bottom right) matches. 
   Actually the Top Hero is one block. 
   The bottom right white text is the bottom-right block.
   The Hero needs to NOT cover that area.
   In my structure, Hero is row 1. Bottom is row 2.
   To make it look like they merge/flow:
   We can make the Hero encompass the whole background? No.
   Let's Stick to: 
   Top Hero: Bottom-Right Radius: 0? 
   Bottom-Right Content: Top-Left Radius: 150px.
   And we pull the bottom-right content UP?
   CSS Grid is better for this.
   Let's stick to Flex, but maybe negative margin on the white block?
   Actually, the design shows the Notch connecting them.
   Let's keep separate blocks. Top Hero rect. Bottom Right Content top-left radius. 
   It won't overlap perfectly unless we force it.
   Visual hack: Set Top Hero background color to Black (which matches image).
   Set Bottom Right Content background White.
   Give Bottom Right Content `margin-top: -80px`?
   Let's try standard block layout first.
*/
.bottom-right-content {
    /* To simulate the organic curve, we need a negative margin or absolute positioning. 
       But simpler: shape the containers. */
    position: relative;
    z-index: 5;
}

/* Typography */
.simple-list {
    list-style: none;
    text-align: right;
    margin-bottom: 2rem;
    color: #666;
    font-size: 0.9rem;
    line-height: 2;
}

.simple-list li::before {
    content: "— ";
    color: #999;
    margin-right: 0.5rem;
}

.small-tagline {
    color: #666;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.main-headline {
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -1px;
    font-family: 'Outfit', sans-serif;
    /* Condensed robust font */
}

.footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-icons {
    display: flex;
    gap: 0.5rem;
}

.social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #eee;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.explore-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: url('../images/interior_room_minimal.png') center/cover;
    /* Just reusing a dark image */
    background: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 0.8rem;
    position: relative;
    overflow: hidden;
}

/* --- VRSCAPE Section (White Sci-Fi) --- */
.vr-section {
    width: 100%;
    max-width: 1400px;
    background: #ffffff;
    border-radius: 0px 0px 40px 40px;
    padding: 0;
    /* No padding, we use full width for notches */
    position: relative;
    overflow: hidden;
    color: black;
    font-family: 'Outfit', sans-serif;
    margin-bottom: 2rem;
    height: 700px;
    /* Fixed height for dashboard feel */
}

/* Top Notch (Black Trapezoid) */
.vr-top-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 60px;
    background: black;
    /* Inverted Trapezoid Shape */
    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

/* Logo Image */
.vr-logo-img {
    height: 45px;
    width: auto;
    object-fit: contain;
}

/* Side Notches */
.vr-side-notch {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 150px;
    background: black;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.vr-notch-left {
    left: 0;
    clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
}

.vr-notch-right {
    right: 0;
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
}

/* Menu Bar - Redesigned to be Sleek Top Right */
/* Menu Bar - Split Layout */
.vr-menu-split {
    position: absolute;
    top: 1.5rem;
    /* Aligned with Notch center verticality */
    display: flex;
    gap: 3rem;
    z-index: 25;
}

.vr-menu-left {
    right: 50%;
    margin-right: 220px;
    /* 400px Notch / 2 + 20px Gap */
}

.vr-menu-right {
    left: 50%;
    margin-left: 220px;
    /* 400px Notch / 2 + 20px Gap */
}

.vr-menu-item {
    padding: 0.5rem 0;
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
    position: relative;
    background: transparent;
}

.vr-menu-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: black;
    transition: width 0.3s ease;
}

.vr-menu-item:hover {
    color: black;
    background: transparent;
}

.vr-menu-item:hover::after {
    width: 100%;
}

.vr-menu-item.active {
    background: transparent;
    color: black;
}

.vr-menu-item.active::after {
    width: 100%;
}

/* Hamburger - Hidden */
.vr-hamburger {
    display: none;
}

/* Main Content Area */
.vr-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Background Giant Text */
/* Background Giant Text - Moving Border Light */
.vr-bg-text {
    position: absolute;
    width: 100%;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 8rem;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
    /* Dim base border */
    z-index: 1;
    letter-spacing: 10px;
    top: 30%;
}

.vr-bg-text::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: transparent;
    -webkit-text-stroke: 1px #00bfff;
    /* Bright glowing border */
    z-index: 2;
    /* Masking for properties */
    /* Masking for properties */
    -webkit-mask-image: linear-gradient(to right, #000, #000);
    mask-image: linear-gradient(to right, #000, #000);
    -webkit-mask-size: 0% 100%;
    mask-size: 0% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: border-reveal 4s ease-out forwards;
}

@keyframes border-reveal {
    0% {
        -webkit-mask-size: 0% 100%;
        mask-size: 0% 100%;
    }

    100% {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
}

/* Wrapper for Parallax */
.vr-model-wrapper {
    height: 80%;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.1s ease-out;
    /* Smooth parallax */
}

/* Central Image */
.vr-model-img {
    height: 100%;
    /* Fill wrapper */
    position: relative;
    /* Fade at bottom */
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    animation: levitate 5s ease-in-out infinite;
}

@keyframes levitate {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Floating Arrows */
.vr-arrow-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.2rem;
    position: absolute;
    top: 55%;
    z-index: 10;
    transition: all 0.2s;
}

.vr-arrow-btn:hover {
    border-color: black;
}

.vr-left-arrow {
    left: 20%;
}

.vr-right-arrow {
    right: 20%;
}

/* Bottom Left Text */
.vr-bottom-left {
    position: absolute;
    bottom: 4rem;
    left: 4rem;
    z-index: 10;
}

.vr-headline {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 700;
    color: black;
}

/* Bottom Right Info */
.vr-bottom-right {
    position: absolute;
    bottom: 4rem;
    right: 4rem;
    text-align: right;
    max-width: 300px;
    z-index: 10;
}

.vr-desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.5rem;
}

.vr-order-btn {
    padding: 0.8rem 2.5rem;
    border: 1px solid black;
    background: transparent;
    border-radius: 99px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.vr-order-btn:hover {
    background: black;
    color: white;
}

/* Responsive VR Section */
@media (max-width: 1024px) {
    .vr-bg-text {
        font-size: 4rem;
        top: 20%;
    }

    .vr-model-img {
        height: 60%;
    }

    .vr-arrow-btn {
        display: none;
    }

    .vr-top-notch {
        width: 200px;
    }

    .vr-side-notch {
        display: none;
    }

    .vr-headline {
        font-size: 1.8rem;
    }

    .vr-bottom-left {
        left: 2rem;
        bottom: 2rem;
    }

    .vr-bottom-right {
        right: 2rem;
        bottom: 2rem;
    }
}

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&display=swap');

/* --- Neurotek Section (Cyberpunk) --- */
.neuro-section {
    width: 100%;
    max-width: 1400px;
    background: #ddd;
    /* Very Dark Grey/Black */
    border-radius: 40px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    color: rgb(104, 102, 102);
    font-family: 'Outfit', sans-serif;
    margin-bottom: 2rem;
}

/* Header */
.neuro-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    padding: 0 1rem;
}



.neuro-nav {
    display: flex;
    gap: 2rem;
    font-size: 0.9rem;
    color: #141414;
}

.neuro-nav span {
    cursor: pointer;
    transition: color 0.3s;
}

.neuro-nav span:hover {
    color: #00bfff;
}

.neuro-search {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 0.8rem 1.5rem;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: #aaa;
    min-width: 250px;
    justify-content: space-between;
}

.arrow-circle-white {
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-weight: bold;
}

/* Main Grid */
/* Main Grid Refined */
.neuro-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    height: 600px;
    gap: 0;
    /* Remove gap, handle padding in children for seamless look */
}

/* Left Sidebar: Tabs (Navigation) */
.neuro-sidebar-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
    padding-left: 2rem;
    border-right: 1px solid #222;
}

.neuro-sidebar-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #171717;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    padding-left: 1rem;
    font-weight: 700;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 99px 0 0 99px;
    /* Connected feel */
    transition: all 0.3s;
    background: transparent;
    opacity: 0.5;
    border: none;
}

.tab-btn:hover {
    background: rgba(30, 29, 29, 0.558);
    opacity: 0.8;
}

.tab-btn.active {
    opacity: 1;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent);
    border-right: 2px solid #00bfff;
}

.tab-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 1px solid #444;
    transition: all 0.3s;
    flex-shrink: 0;
}

.tab-text {
    font-size: 0.75rem;
    color: #000000;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.3s;
}

/* Active State Styles */
.tab-btn.active .tab-icon {
    border-color: #00bfff;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
}

.tab-btn.active .tab-text {
    color: #00bfff;
    font-weight: 700;
}

/* Center Hero: Slider */
/* Center Hero: Slider */
.neuro-hero {
    position: relative;
    background: #1a1a1a;
    border-radius: 40px;
    overflow: hidden;
    margin-right: 1rem;
    /* Add spacing from window edge if needed */
}

.neuro-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(50px);
    transition: all 0.5s ease-out;
    padding: 3rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index: 1;
}

.neuro-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    z-index: 2;
}

/* Text Layer */
.neuro-headline {
    position: relative;
    font-family: 'Orbitron', sans-serif;
    font-size: 3.5rem;
    line-height: 1.1;
    color: white;
    z-index: 10;
    text-transform: uppercase;
    max-width: 600px;
    margin-bottom: 2rem;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Robot Image Layer - Right Side Background */
.neuro-slide .neuro-robot-img {
    position: absolute;
    right: -5%;
    top: 50%;
    transform: translateY(-50%);
    height: 110%;
    width: auto;
    object-fit: contain;
    z-index: 0;
    opacity: 0.8;
    mask-image: linear-gradient(to left, black 80%, transparent 100%);
    /* Mask not supported in all browsers seamlessly, simplified: */
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%);
    mask-image: linear-gradient(to right, transparent, black 20%);
}

/* Info Block (Formerly Card) - Now Main Text */
.breakthrough-card {
    position: relative;
    width: 50%;
    background: transparent;
    border: none;
    padding: 0;
    z-index: 10;
    display: block;
}

.breakthrough-text h4 {
    font-size: 1rem;
    letter-spacing: 2px;
    color: #00bfff;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-family: 'Orbitron', sans-serif;
}

.breakthrough-text p {
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.6;
    max-width: 450px;
}

/* Right Sidebar: Static List */
.neuro-sidebar-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 1rem;
    border-left: 1px solid #333;
}

.service-list-title {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: absolute;
    right: 1.5rem;
    top: 3rem;
    /* Moved title to decorative position or modify layout */
}

/* Re-thinking Right Sidebar: List should be readable */
.neuro-sidebar-right {
    position: relative;
    border-left: none;
    align-items: center;
    text-align: right;
}

.service-list-title {
    position: static;
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 0.8rem;
    color: #00bfff;
    margin-bottom: 1rem;
    width: 100%;
    text-align: left;
}

.neuro-service-list {
    list-style: none;
    width: 100%;
}

.neuro-service-list li {
    font-size: 0.9rem;
    color: #888;
    padding: 0.5rem 0;
    border-bottom: 1px solid #222;
    transition: color 0.3s;
    cursor: default;
    text-align: left;
}

.neuro-service-list li:hover {
    color: white;
}

/* Responsive */
@media (max-width: 1024px) {
    .neuro-grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    .neuro-sidebar-left,
    .neuro-sidebar-right {
        flex-direction: row;
        width: 100%;
        padding: 1rem;
        justify-content: center;
    }

    .neuro-hero {
        height: 500px;
        border-radius: 40px;
    }

    .breakthrough-card {
        right: 1rem;
        bottom: 1rem;
        width: 250px;
    }
}

/* --- Product Section (PowerCube) --- */
.product-section {
    width: 100%;
    max-width: 1400px;
    margin-bottom: 2rem;
    padding: 2rem;
}

.product-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    /* Hero takes more space */
    gap: 1.5rem;
    height: 700px;
    /* Tall/Fixed height for the split */
}

/* Left Hero Block */
.p-hero-card {
    position: relative;
    background: url('../images/itm-lms.png') center/cover;
    border-radius: 40px;
    /* The complex cutout is at bottom right. 
       We can Use border-bottom-right-radius: 200px?
       And place the black block there?
       Ref: The black block is OUTSIDE the image? No.
       The frame is grey. The image is on the left.
       The black block with text "PowerCube X" is separate? 
       Actually, looks like the Image Card has a "concave" cutout at bottom right.
       And a black card sits there.
       CSS Masking is hard.
       Simpler: Overlay a SVG shape creating the concave corner.
       OR: Use a big border radius on the image card (bottom-right: 150px).
       And place the black card behind it? No.
       Let's stick to: Image Card has Bottom-Right Border Radius 150px.
       The "PowerCube X" card is separate and fits in that corner?
       No, the reference has the PowerCube X card WITH a concave top-left?
       Let's look at the grey frame.
       The grey frame background flows BETWEEN them.
       So:
       Hero Image Card: border-bottom-right-radius: 120px.
       Right Column: Just vertical stack.
       Bottom Right of Left Col: A small black card? 
       Let's try:
       Left Column is a Grid itself.
       Rows: 1fr (Image), auto (Description?).
       Actually: The Hero Image takes up nearly full height left.
       But bottom right corner is cut.
       And a "PowerCube X" description block sits there.
    */
    border-bottom-right-radius: 180px;
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.p-logo-circle {
    width: 60px;
    height: 60px;
    background: #000;
    border-radius: 50%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: auto;
}

.p-search-bar {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    color: #888;
    padding: 0.8rem 2rem;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 300px;
}

.p-hero-text {
    margin-top: auto;
    font-family: 'Outfit', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 2rem;
}

/* The Black Info Block "PowerCube X" */
/* This needs to sit in the bottom right corner of the Left Column visually.
   We can make the Left Column a Grid:
   Grid Template Areas:
   "image image"
   "image info"
   But image is non-rectangular.
   Hack: 
   Place .p-info-block absolute bottom right of the grid cell?
   But it needs to clear the radius.
   Actually, seeing the reference: 
   The Image Card has the cut.
   The Info Block sits in the cut.
   The Info Block is Black.
   The Frame is Grey.
   So visual result: Grey curve separates Image and Info Block.
*/
.p-info-block {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 250px;
    height: 250px;
    background: #111;
    border-radius: 40px;
    border-top-left-radius: 120px;
    /* Use inverse radius to fit? */
    /* Wait, if Image has Bottom Right Radius 180px.
       Info Block needs Top Left Radius 180px? 
       To create the "Path" between them, we just space them?
       If they touch, we need inverse.
       Reference shows a grey gap.
       So Image: Border-radius-bottom-right: 160px.
       Info Block: Border-radius-top-left: 160px.
       They sit in grid cells.
    */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    color: white;
}

.p-info-block h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.p-info-block p {
    font-size: 0.75rem;
    color: #a2a1a1;
    line-height: 1.4;
}

.p-order-btn {
    margin-top: 1rem;
    align-self: flex-start;
    padding: 0.6rem 1.5rem;
    background: white;
    color: black;
    border: none;
    border-radius: 99px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.p-order-btn:hover {
    background: #e0e0e0;
    transform: translateY(-2px);
}

/* Right Column */
.p-right-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.p-product-card {
    flex: 1;
    background: #000;
    border-radius: 40px;
    position: relative;
    overflow: hidden;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Images for right cards */
.p-card-midnight {
    background: url('../images/ecommerce-dashboard.png') center/cover;
}

.p-card-sandstone {
    background: url('../images/pharmacy-dashboard.png') center/cover;
}

.p-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 60%);
    z-index: 1;
}

.p-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: white;
}

.p-price {
    font-size: 1.2rem;
    font-weight: 600;
}

.p-name {
    font-size: 1rem;
    color: #ccc;
    margin-bottom: 0.2rem;
}

.p-edition {
    font-size: 0.8rem;
    color: #666;
}

/* Demo Button for Product Cards */
.p-demo-btn {
    padding: 0.6rem 1.5rem;
    background: white;
    color: black;
    border: none;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.p-demo-btn:hover {
    background: #e0e0e0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

/* Icons top right */
.p-icons {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    display: flex;
    gap: 0.5rem;
}

.p-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
}

/* Mobile & Tablet Combined Fixes */
@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    .p-hero-card {
        height: 500px;
        border-bottom-right-radius: 40px;
    }

    .p-info-block {
        position: relative;
        width: 100%;
        height: auto;
        border-radius: 40px;
        margin-top: 1rem;
        right: auto;
        bottom: auto;
    }

    .p-right-col {
        height: auto;
    }

    .p-product-card {
        height: 300px;
    }

    /* Neuro Services Responsive */
    .neuro-grid {
        grid-template-columns: 1fr;
        height: auto;
        gap: 1.5rem;
    }

    .neuro-sidebar-left {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #333;
        padding: 1rem 0;
        flex-direction: row;
        overflow-x: auto;
        justify-content: flex-start;
        align-items: center;
        gap: 1rem;
        padding-left: 1rem;
    }

    .neuro-sidebar-title {
        display: none;
    }

    .tab-btn {
        width: auto;
        flex-shrink: 0;
        padding: 0.6rem 1.2rem;
        border-radius: 99px;
        border: 1px solid #333;
        background: black;
    }

    .tab-btn.active {
        border-right: 1px solid #333;
        border-color: #00bfff;
        background: #111;
        /* Reset border-radius logic from desktop sidebar */
        border-radius: 99px;
    }

    .neuro-hero {
        height: auto;
        min-height: 500px;
        margin-right: 0;
    }

    .neuro-slide {
        position: relative;
        /* Allow stacking natural flow */
        transform: none;
        opacity: 1;
        visibility: visible;
        display: none;
        /* Hide inactive slides */
        padding: 2rem;
    }

    .neuro-slide.active {
        display: flex;
        /* Show active slide */
        z-index: 2;
    }

    .neuro-headline {
        font-size: 2.2rem;
    }

    .neuro-slide .neuro-robot-img {
        right: -20%;
        opacity: 0.4;
    }

    .breakthrough-card {
        width: 100%;
    }

    /* Navbar overlaps fix */
    .vr-menu-split {
        display: none;
        /* Hide split text menu on tablet/mobile to scale UI */
    }

    .vr-hamburger {
        display: block;
        /* Show hamburger */
        position: absolute;
        top: 2rem;
        right: 2rem;
        z-index: 100;
        color: white;
        font-size: 1.5rem;
    }
}

/* Tablet & Smaller Desktop Adjustments Re-declared to override any conflicts */
@media (max-width: 1024px) {
    .app-frame {
        height: auto;
        min-height: 95vh;
        padding-bottom: 2rem;
    }

    .hero-section {
        height: 400px;
        border-bottom-right-radius: 60px;
    }

    .bottom-split {
        flex-direction: column;
    }

    .bottom-left-grid {
        flex: auto;
        width: 100%;
        height: 300px;
    }

    .bottom-right-content {
        width: 100%;
        border-top-left-radius: 40px;
        margin-top: 0;
        padding: 2rem;
    }

    .notch-connector {
        top: 400px;
    }

    .main-headline {
        font-size: 2.5rem;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .app-container {
        padding: 0.5rem;
        height: auto;
        /* Allow full page scroll */
        display: block;
        /* Remove centering flex */
    }

    body {
        height: auto;
        /* Allow body scroll */
        display: block;
        padding-bottom: 2rem;
    }

    .app-frame {
        padding: 0.5rem;
        border-radius: 20px;
        height: auto;
    }

    .hero-section {
        height: 300px;
        border-radius: 20px;
    }

    .neuro-headline {
        font-size: 2rem;
    }

    .breakthrough-text h4 {
        font-size: 0.9rem;
    }

    .breakthrough-text p {
        font-size: 0.9rem;
    }

    .neuro-slide .neuro-robot-img {
        right: -50%;
        opacity: 0.3;
    }


    .overlay-header {
        padding: 1rem;
    }

    .side-nav,
    .notch-connector {
        display: none;
    }

    .bottom-split {
        margin-top: 1rem;
        gap: 1rem;
    }

    .bottom-left-grid {
        flex-direction: column;
        height: auto;
        gap: 1rem;
    }

    .card-dark-kitchen,
    .card-dark-room {
        height: 250px;
        border-radius: 24px;
        width: 100%;
    }

    .bottom-right-content {
        border-radius: 24px;
        padding: 1.5rem;
        border-top-left-radius: 24px;
    }

    .main-headline {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .footer-row {
        flex-direction: row;
        align-items: center;
    }
}

/* --- Footer Section --- */
.main-footer {
    width: 100%;
    max-width: 1400px;
    background: #080808;
    color: white;
    border-radius: 40px 40px 0px 0px;
    padding: 3rem 3rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3rem;
}

.footer-brand {
    flex: 1;
    min-width: 250px;
}

.footer-logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
}

.footer-tagline {
    color: #888;
    line-height: 1.6;
    font-size: 0.95rem;
}

.footer-nav {
    display: flex;
    gap: 4rem;
    flex: 2;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-col h4 {
    font-size: 1rem;
    color: white;
    margin-bottom: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.footer-col a {
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-col a:hover {
    color: white;
}

.footer-subscribe {
    flex: 1;
    min-width: 250px;
}

.footer-subscribe h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.sub-box {
    display: flex;
    gap: 0.5rem;
}

.sub-box input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    color: white;
    font-family: 'Outfit', sans-serif;
}

.sub-box input:focus {
    outline: none;
    border-color: #666;
}

.sub-btn {
    background: white;
    color: black;
    border: none;
    padding: 0 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.sub-btn:hover {
    opacity: 0.9;
}

.footer-divider {
    height: 1px;
    background: #222;
    width: 100%;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #555;
    flex-wrap: wrap;
    gap: 1rem;
}

.legal-links {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.legal-links a {
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
}

.legal-links a:hover {
    color: #888;
}

/* Footer Responsive */
@media (max-width: 1024px) {
    .footer-top {
        flex-direction: column;
    }

    .footer-nav {
        justify-content: flex-start;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .footer-nav {
        flex-direction: column;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .sub-box {
        flex-direction: column;
    }

    .sub-box input {
        width: 100%;
    }

    .sub-btn {
        width: 100%;
        padding: 0.8rem;
    }
}


/* --- ITM Philosophy Section (Redesign) --- */
.itm-section {
    width: 100%;
    max-width: 1400px;
    margin-top: 2rem;
    margin-bottom: 2rem;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('../images/robot-bust.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 40px;
    padding: 6rem 4rem;
    color: white;
    font-family: 'Outfit', sans-serif;
    position: relative;
    overflow: hidden;
    border: 1px solid #222;
}

/* Background Elements */
.itm-bg-glow {
    position: absolute;
    top: -50%;
    left: 20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    filter: blur(80px);
    z-index: 0;
}


/* Repeated Background Text */
.itm-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0.03;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    transform: rotate(-5deg) scale(1.2);
}

.bg-line {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 5rem;
    white-space: nowrap;
    text-transform: uppercase;
    color: white;
    line-height: 1;
}

/* Alternate direction or shift for visual interest if desired, but simple stack works */
.bg-line:nth-child(even) {
    margin-left: -100px;
}

.itm-container {
    position: relative;
    z-index: 1;
}

/* Header */
.itm-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 5rem;
    flex-wrap: wrap;
    gap: 2rem;
}

.itm-tag {
    display: inline-block;
    background: #222;
    color: #aaa;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    border: 1px solid #333;
}

.itm-big-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 4rem;
    line-height: 1.1;
    font-weight: 700;
    background: linear-gradient(180deg, #fff 0%, #666 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.itm-desc-box {
    max-width: 500px;
}

.itm-desc-box p {
    color: #999;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Bento Grid */
.itm-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 1.5rem;
}

.itm-card {
    background: rgba(28, 28, 28, 0.7);
    border: 1px solid #222;
    padding: 2rem;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    height: 100%;
}

.itm-card:hover {
    border-color: #444;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.itm-card-large {
    grid-column: span 1;
    grid-row: span 2;
    background: #161616;
}

.itm-card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #fff;
    opacity: 0.8;
}

.itm-card h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

.itm-card h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    color: white;
}

.itm-number {
    font-family: 'Orbitron', sans-serif;
    color: #333;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: auto;
}

.itm-card p {
    color: #777;
    font-size: 0.95rem;
    line-height: 1.5;
}

.itm-card-footer {
    margin-top: 2rem;
}

.itm-card-footer span {
    font-size: 0.8rem;
    color: #444;
    border: 1px solid #222;
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
}


/* --- Tech Stack ( The Arsenal ) --- */
.tech-stack-section {
    width: 100%;
    max-width: 1400px;
    margin: 4rem 0;
    padding: 0 4rem;
}

.tech-stack-section .section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    color: #111;
    margin-bottom: 3rem;
    border-left: 4px solid #111;
    padding-left: 1rem;
    text-transform: uppercase;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.tech-category {
    background: #fff;
    border: 1px solid #eee;
    padding: 2rem;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tech-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.tech-cat-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #333;
    letter-spacing: 0.5px;
}

.tech-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.tech-item {
    position: relative;
    width: 50px;
    height: 50px;
    background: #f5f5f5;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.tech-item:hover {
    background: #111;
    color: white;
}

.tech-icon-text {
    font-family: 'Orbitron', sans-serif;
}

.tooltip {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: white;
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.tech-item:hover .tooltip {
    opacity: 1;
}

/* Responsive Tech Stack */
@media (max-width: 1024px) {
    .tech-grid {
        grid-template-columns: 1fr;
    }

    .tech-stack-section {
        padding: 0 2rem;
    }
}

.itm-card-quote blockquote {
    color: black;
    font-size: 1.5rem;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    line-height: 1.4;
}

.itm-card-quote .tm-sig {
    margin-top: 1rem;
    color: #444;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    text-align: right;
}

/* Responsive */
@media (max-width: 1024px) {
    .itm-bento-grid {
        grid-template-columns: 1fr 1fr;
    }

    .itm-card-large {
        grid-row: span 1;
        grid-column: span 2;
    }

    .itm-card-quote {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .itm-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    .itm-big-title {
        font-size: 2.5rem;
    }

    .itm-bento-grid {
        grid-template-columns: 1fr;
    }

    .itm-card-large,
    .itm-card-quote {
        grid-column: span 1;
    }

    .itm-section {
        padding: 4rem 2rem;
    }
}

.itm-line {
    width: 60px;
    height: 4px;
    background: #444;
    margin-bottom: 1rem;

    /* Tech Tokens Icons */
    .tech-item img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        transition: filter 0.2s;
    }

    .tech-item:hover img {
        filter: invert(1);
    }

    .itm-subtitle {
        font-size: 1.2rem;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 4px;
    }

    .itm-content-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: start;
    }

    .itm-block {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .itm-card-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        border-left: 2px solid white;
        padding-left: 1rem;
    }

    .overview-block p {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #ccc;
        font-weight: 300;
    }

    .philosophy-block .itm-intro {
        font-size: 1.2rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .highlight {
        color: white;
        font-weight: 600;
        border-bottom: 1px dashed #666;
    }

    .itm-values-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin: 1rem 0 2rem 0;
    }

    .itm-values-list li {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
        font-size: 1.05rem;
        color: #ddd;
    }

    .bullet-icon {
        color: #666;
    }

    .itm-quote {
        background: rgba(255, 255, 255, 0.05);
        padding: 1.5rem;
        border-radius: 12px;
        border-left: 4px solid #444;
        font-style: italic;
        color: #aaa;
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .itm-quote strong {
        color: white;
        font-style: normal;
    }

    /* Responsive ITM Section */
    @media (max-width: 1024px) {
        .itm-content-grid {
            grid-template-columns: 1fr;
            gap: 3rem;
        }

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

    @media (max-width: 768px) {
        .itm-section {
            padding: 4rem 2rem;
        }

        .itm-title {
            font-size: 2rem;
        }
    }