/* Header Styles */
        

        

        


        

        

        

        

        

        

        /* Constellation Navigation */
        

        

        

        

        

        

        

        /* Hero Section */
        .hero {
            height: 130vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 2rem;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--feather-gradient);
            z-index: -1;
        }

        .hero-content {
            text-align: center;
            max-width: 800px;
            position: relative;
        }

        .hero h1 {
            font-size: clamp(2.5rem, 5vw, 4.5rem);
            margin-bottom: 1.5rem;
            line-height: 1.2;
            background: linear-gradient(to right, var(--alabaster), var(--plasma-blue));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 700;
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 3rem;
            opacity: 0.9;
        }

        .orb-container {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-top: 4rem;
            flex-wrap: wrap;
        }

        .orb {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.5s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 30px rgba(255, 107, 53, 0.3);
        }

        .orb::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), transparent 70%);
            opacity: 0.3;
            border-radius: 50%;
        }

        .orb:nth-child(1) {
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.8), rgba(255, 107, 53, 0.2));
        }

        .orb:nth-child(2) {
            background: linear-gradient(135deg, rgba(0, 245, 255, 0.8), rgba(0, 245, 255, 0.2));
        }

        .orb:nth-child(3) {
            background: linear-gradient(135deg, rgba(248, 249, 250, 0.8), rgba(248, 249, 250, 0.2));
        }

        .orb:hover {
            transform: scale(1.1) translateY(-10px);
            box-shadow: 0 0 50px rgba(255, 107, 53, 0.5);
        }

        .orb-text {
            font-size: 1rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--deep-space);
            z-index: 1;
        }

        /* Value Proposition Section */
        .values {
            padding: 8rem 2rem;
            position: relative;
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 5rem;
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
        }

        .section-title::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(to right, var(--phoenix-orange), var(--plasma-blue));
            border-radius: 3px;
        }

        

        

        @keyframes rotate {
            0% { transform: rotateX(0) rotateY(0); }
            100% { transform: rotateX(360deg) rotateY(360deg); }
        }

        

        
        
        
        
        
        

        /* Face arrière (180°) : texte retourné */





        .value-card {
            max-width: 800px;
            margin: 0 auto 3rem;
            padding: 2rem;
            border-radius: 20px;
            background: rgba(20, 20, 20, 0.5);
            border-left: 3px solid var(--phoenix-orange);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
        }

        .value-card:hover {
            transform: translateY(-5px);
        }

        .value-card h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            color: var(--phoenix-orange);
        }

        .value-card p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        /* Research Showcase */
        .research {
            padding: 8rem 2rem;
            background: var(--feather-gradient);
        }

        .paper-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .living-paper {
            background: rgba(20, 20, 20, 0.8);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease;
            border-top: 2px solid var(--phoenix-orange);
        }

        .living-paper:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(255, 107, 53, 0.3);
        }

        

        

        

        .paper-content {
            padding: 1.5rem;
        }

        .paper-content p {
            margin-bottom: 1rem;
        }

        

        .efficiency-meter {
            height: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            overflow: hidden;
            margin-top: 1rem;
        }

        .efficiency-level {
            height: 100%;
            background: linear-gradient(to right, var(--phoenix-orange), var(--plasma-blue));
            border-radius: 5px;
            width: 0;
            transition: width 1s ease;
        }
        .progress-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--plasma-blue); /* même bleu que la barre */
    margin-bottom: 0.3rem;
    display: block;
}
.project-progress {
    text-align: center;
}



        /* Commercial Solutions */
        .solutions {
            padding: 8rem 2rem;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .product-card {
            background: rgba(20, 20, 20, 0.8);
            border-radius: 15px;
            overflow: hidden;
            transition: all 0.3s ease;
            position: relative;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 245, 255, 0.3);
        }

        .product-image {
            height: 200px;
            background: var(--feather-gradient);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .product-image::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><path d=\"M50 10 L60 40 L80 30 L65 50 L90 50 L65 65 L80 85 L60 70 L50 90 L40 70 L20 85 L35 65 L10 50 L35 50 L20 30 L40 40 Z\" fill=\"%23000\" opacity=\"0.1\"/></svg>");
            background-size: 100px;
            opacity: 0.3;
        }

        .product-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: rgba(0, 245, 255, 0.2);
            color: var(--plasma-blue);
            padding: 0.3rem 0.8rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-family: "IBM Plex Mono", monospace;
            border: 1px solid var(--plasma-blue);
        }

        .product-content {
            padding: 1.5rem;
        }

        .product-content h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .product-content p {
            margin-bottom: 1.5rem;
            opacity: 0.9;
        }

        

        .product-link {
            color: var(--phoenix-orange);
            text-decoration: none;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
        }

        .product-link:hover {
            color: var(--plasma-blue);
        }


        /* Language selector: discreet and non-intrusive */
        
        
        
        
        
        
        /* Footer */
        

        

        

        

        

        

        

        .privacy-badge {
            display: inline-block;
            background: rgba(0, 245, 255, 0.1);
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-family: "IBM Plex Mono", monospace;
            font-size: 0.9rem;
            margin-top: 1rem;
            border: 1px solid var(--plasma-blue);
        }

        

        /* Phoenix Terminal */
        

        

        

        

        

        

        

        

        

        

        

        


        /* KeyWords Finder: lazy local documentation search */
        
        
        
        
        
        
        
        
        
        /* Responsive Adjustments */
        

        


        
        .security-score {
    text-align: center;
    font-weight: bold;
    margin-top: 1rem;
    color: #FF6B35; /* vert, ou couleur de ton choix */
}

    

        /* ==========================================================
           Lightweight motion layer
           Visual-only: it does not change the page structure or sizing.
           ========================================================== */
        
        
        
        
        
        
        

        /* Scroll reveals are activated by JS, so content stays visible without JS. */
        
        

        /* Existing elements, enhanced without adding layout cost. */
        
        
        .orb:nth-child(2) { animation-delay: -1.6s; }
        .orb:nth-child(3) { animation-delay: -3.2s; }
        .orb:hover { animation-play-state: paused; }

        
        .value-card,
        .living-paper,
        .product-card {
            isolation: isolate;
        }
        .value-card::after,
        .living-paper::after,
        .product-card::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            opacity: 0;
            background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.055) 48%, transparent 72%);
            transform: translate3d(-28%, 0, 0);
            transition: opacity 250ms ease, transform 700ms cubic-bezier(.2,.7,.2,1);
            z-index: -1;
        }
        .value-card { position: relative; }
        .value-card:hover::after,
        .living-paper:hover::after,
        .product-card:hover::after {
            opacity: 1;
            transform: translate3d(28%, 0, 0);
        }
        
        .value-card:hover h3 i { transform: translate3d(0, -2px, 0) scale(1.08); }
        

        
        
        
        
        
        

        /* Micro-animation for menu entries when the overlay opens. */
        
        
        
        

        /* Header response uses only opacity/background and stays subtle. */
        
        

        /* Optional pointer parallax. Custom properties avoid repeated style rules. */
        .hero-content {
            translate: var(--hero-x, 0) var(--hero-y, 0);
            transition: translate 180ms ease-out;
        }

        /* Accessibility and battery protection. */
        
        @media (hover: none), (pointer: coarse) {
            .hero-content { translate: 0 0; }
            .value-card::after, .living-paper::after, .product-card::after { display: none; }
        }

        

    

        /* ==========================================================
           Coherent cube presentation
           Each face turns toward the viewer, pauses, then moves on.
           ========================================================== */
        

        
        
        /* Every label remains upright; the cube rotation handles orientation. */
        
        /* Pause on hover/focus so a value can be read for longer. */
        
        

    

        /* ==========================================================
           Alignment and cube speed correction
           ========================================================== */

        /* section-title already uses translateX(-50%) for centering.
           Preserve this horizontal transform during scroll reveal. */
        
        

        /* Faster rhythm: short turns followed by readable pauses. */
        
        

        

    

/* ================================================================
   Phoenorg spatial system and software-card refinement
   Content is unchanged. This layer only improves hierarchy and layout.
   ================================================================ */


/* Consistent section rhythm and readable line lengths */
.values,
.research,
.solutions {
    padding: var(--space-section) clamp(1rem, 4vw, 3rem);
}
.values > .section-title,
.research > .section-title,
.solutions > .section-title {
    margin-bottom: clamp(3rem, 6vw, 5rem);
}
.value-grid,
.paper-container,
.product-grid {
    width: min(100%, var(--content-wide));
    margin-inline: auto;
}

/* Principles become a deliberate, balanced collection */
.value-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}
.value-grid .value-card {
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: clamp(1.4rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 16px;
    border: 1px solid var(--card-line);
    border-left: 3px solid var(--phoenix-orange);
    background: linear-gradient(145deg, rgba(22,22,22,.88), rgba(12,12,12,.70));
}
.value-grid .value-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - .625rem);
    justify-self: center;
}
.value-card h3 {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.2;
}
.value-card h3 i {
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 2.15rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--phoenix-orange);
    background: rgba(255,107,53,.11);
    font-size: .95rem;
}
.value-card p {
    font-size: 1rem;
    max-width: 68ch;
}

/* Software cards: stronger hierarchy, aligned actions and progress */
.paper-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 1.6rem);
    margin-top: 0;
}
.living-paper.software-card {
    min-width: 0;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
    border: 1px solid var(--card-line);
    border-top: 2px solid var(--phoenix-orange);
    border-radius: 16px;
    background: linear-gradient(155deg, rgba(23,23,23,.94), rgba(11,11,11,.82));
    box-shadow: 0 16px 42px rgba(0,0,0,.34);
}
.living-paper.software-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 110px;
    z-index: -1;
    background: radial-gradient(circle at 12% 0%, rgba(255,107,53,.18), transparent 62%);
    pointer-events: none;
}
.living-paper.software-card:hover {
    transform: translateY(-7px);
    border-color: rgba(255,107,53,.34);
    box-shadow: 0 22px 52px rgba(0,0,0,.46), 0 0 24px rgba(255,107,53,.08);
}



.paper-content {
    padding: 1.4rem 1.5rem;
    display: flex;
    flex: 1;
    flex-direction: column;
}
.paper-content > p {
    flex: 1;
    margin-bottom: 1.5rem;
    color: rgba(248,249,250,.82);
    font-size: .96rem;
}
.project-progress {
    margin-top: auto;
    text-align: left;
}
.progress-label {
    color: rgba(248,249,250,.58);
    font-family: "IBM Plex Mono", monospace;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.efficiency-meter {
    height: 7px;
    margin-top: .55rem;
    background: rgba(255,255,255,.08);
}
.efficiency-level {
    box-shadow: 0 0 14px rgba(0,245,255,.16);
}





/* Commercial cards use the same spatial language without pretending content exists */
.product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 1.6rem);
    margin-top: 0;
}
.product-card.commercial-card {
    min-width: 0;
    border: 1px solid var(--card-line);
    border-top: 2px solid var(--plasma-blue);
    border-radius: 16px;
    background: linear-gradient(155deg, rgba(20,20,20,.9), rgba(10,10,10,.76));
    box-shadow: 0 16px 42px rgba(0,0,0,.3);
}
.product-card.commercial-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0,245,255,.30);
    box-shadow: 0 22px 52px rgba(0,0,0,.44), 0 0 24px rgba(0,245,255,.08);
}
.product-image {
    height: clamp(120px, 15vw, 175px);
    border-bottom: 1px solid var(--card-line);
}
.product-content {
    min-height: 106px;
    padding: 1.4rem 1.5rem;
    display: flex;
    align-items: center;
}
.product-content h3 {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}

/* Navigation and footer lists occupy space predictably */




/* Laptop and tablet */
@media (max-width: 980px) {
    .paper-container,
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .software-card:last-child:nth-child(odd),
    .commercial-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - .8rem);
        justify-self: center;
    }
}

/* Mobile */


/* Short viewports, including phones in landscape */



/* ================================================================
   Structured full-screen navigation and Freova-style legal footer
   ================================================================ */



















/* Same concise legal footer treatment as the Freova presentation page. */










/* Clean Phoenorg navigation */



























/* Classic, aligned navigation */




















/* Visitor-focused page flow, preserving Phoenorg content and identity */

#home, #research, #principles, #solutions { scroll-margin-top: 92px; }

/* The opening view is concise and stable. Other site animations remain intact. */
.hero {
    min-height: 100svh;
    height: auto;
    padding: clamp(8rem, 14vh, 10rem) 1.5rem clamp(5rem, 9vh, 7rem);
}
.hero-content {
    width: min(100%, 860px);
    translate: 0 0 !important;
}
.hero-content > img {
    animation: none !important;
    filter: drop-shadow(0 0 28px rgba(255,107,53,.18));
}
.hero h1 {
    max-width: 820px;
    margin-inline: auto;
    letter-spacing: -.035em;
}
.hero p {
    max-width: 680px;
    margin: 0 auto;
    color: rgba(248,249,250,.76);
}

/* Opening actions are useful navigation, not decorative floating orbs. */
.orb-container {
    width: min(100%, 720px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin: 2.4rem auto 0;
}
.orb {
    width: auto;
    height: auto;
    min-height: 64px;
    padding: .85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(248,249,250,.12);
    background: rgba(15,15,15,.72) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.24);
    color: var(--alabaster);
    text-decoration: none;
    animation: none !important;
}
.orb::before {
    inset: auto auto 0 0;
    width: 100%;
    height: 2px;
    border-radius: 0;
    opacity: 1;
    background: linear-gradient(90deg,var(--phoenix-orange),var(--plasma-blue));
}
.orb:hover,
.orb:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(255,107,53,.34);
    box-shadow: 0 15px 36px rgba(0,0,0,.34);
    outline: none;
}
.orb-text {
    color: var(--alabaster);
    font-family: "IBM Plex Mono",monospace;
    font-size: .76rem;
    letter-spacing: .08em;
}

/* Clear sequence between the concrete work, principles and solutions. */
.research,
.values,
.solutions {
    position: relative;
    isolation: isolate;
}
.research { background: var(--feather-gradient); }
.values { background: linear-gradient(180deg,rgba(10,10,10,.22),rgba(10,10,10,.56)); }
.solutions { background: radial-gradient(circle at 50% 0,rgba(0,245,255,.035),transparent 48%); }
.research::before,
.values::before,
.solutions::before {
    position: absolute;
    top: clamp(2rem,4vw,3.2rem);
    left: max(1rem,calc((100% - var(--content-wide))/2));
    color: rgba(248,249,250,.24);
    font: 500 .68rem "IBM Plex Mono",monospace;
    letter-spacing: .12em;
    z-index: -1;
}
.research::before { content: "01 / SOFTWARE"; }
.values::before { content: "02 / PRINCIPLES"; }
.solutions::before { content: "03 / SOLUTIONS"; }
.section-title {
    margin-bottom: clamp(2.8rem,5vw,4.2rem) !important;
}

/* Slightly tighter cards and stronger section continuity. */
.paper-container,
.value-grid,
.product-grid { gap: clamp(1rem,2vw,1.35rem); }
.living-paper.software-card { min-height: 395px; }
.value-grid .value-card { padding: clamp(1.35rem,2.6vw,1.8rem); }

/* Classic menu remains simple, with a quieter legal block. */



@media (max-width: 720px) {
    .hero { padding-inline: 1rem; }
    .orb-container { grid-template-columns: 1fr; }
    .orb { min-height: 56px; }
    .research::before,
    .values::before,
    .solutions::before { left: 1rem; top: 1.5rem; }
}



/* Phoenorg identity entries: open, private, efficient */
.orb-container {
    width: min(100%, 940px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 3rem auto 0;
}
.phoen-entry {
    --entry-accent: var(--phoenix-orange);
    position: relative;
    min-width: 0;
    min-height: 150px;
    padding: 1.25rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 1.15rem;
    overflow: hidden;
    color: var(--alabaster);
    text-align: left;
    text-decoration: none;
    background:
        linear-gradient(145deg, rgba(21,21,21,.92), rgba(8,8,8,.82)),
        var(--carbon-fiber);
    border: 1px solid rgba(248,249,250,.12);
    border-top: 2px solid var(--entry-accent);
    border-radius: 16px;
    box-shadow: 0 16px 38px rgba(0,0,0,.30);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.phoen-entry::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -95px;
    bottom: -115px;
    border: 1px solid color-mix(in srgb, var(--entry-accent) 24%, transparent);
    border-radius: 50%;
    box-shadow:
        0 0 0 28px color-mix(in srgb, var(--entry-accent) 4%, transparent),
        0 0 0 58px color-mix(in srgb, var(--entry-accent) 2%, transparent);
    pointer-events: none;
}
.phoen-entry::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .28;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(to bottom right, #000, transparent 72%);
}
.phoen-entry-solutions { --entry-accent: var(--plasma-blue); }
.phoen-entry-contact { --entry-accent: var(--alabaster); }
.phoen-entry-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--entry-accent);
    border: 1px solid color-mix(in srgb, var(--entry-accent) 42%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--entry-accent) 8%, transparent);
    font-size: .95rem;
    z-index: 1;
}
.phoen-entry-copy {
    align-self: end;
    grid-column: 1 / 3;
    grid-row: 2;
    z-index: 1;
}
.phoen-entry-copy strong {
    display: block;
    color: var(--alabaster);
    font-size: clamp(1.05rem, 1.75vw, 1.28rem);
    font-weight: 500;
    line-height: 1.2;
}
.phoen-entry-copy small {
    display: block;
    margin-top: .45rem;
    color: rgba(248,249,250,.54);
    font: 400 .7rem "IBM Plex Mono", monospace;
    line-height: 1.45;
}
.phoen-entry-arrow {
    color: var(--entry-accent);
    font: 400 1rem "IBM Plex Mono", monospace;
    z-index: 1;
    transition: transform .28s ease;
}
.phoen-entry:hover,
.phoen-entry:focus-visible {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--entry-accent) 46%, transparent);
    box-shadow: 0 24px 52px rgba(0,0,0,.42), 0 0 26px color-mix(in srgb, var(--entry-accent) 8%, transparent);
    outline: none;
}
.phoen-entry:hover .phoen-entry-arrow,
.phoen-entry:focus-visible .phoen-entry-arrow {
    transform: translate(3px, 3px);
}

/* Remove the numerical section markers while preserving the sections and cube. */
.research::before,
.values::before,
.solutions::before {
    content: none !important;
    display: none !important;
}

@media (max-width: 820px) {
    .orb-container { grid-template-columns: 1fr; max-width: 620px; }
    .phoen-entry { min-height: 126px; }
}
@media (max-width: 480px) {
    .orb-container { margin-top: 2.2rem; }
    .phoen-entry { min-height: 118px; padding: 1rem; }
    .phoen-entry-mark { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    .phoen-entry, .phoen-entry-arrow { transition: none; }
}


/* Explicit hero actions */
.phoen-entry-copy strong { font-size: clamp(1rem,1.55vw,1.2rem); }
.phoen-entry-copy small { max-width: 29ch; }
.phoen-entry-solutions {
    border-color: rgba(0,245,255,.24);
    box-shadow: 0 20px 50px rgba(0,0,0,.36), 0 0 28px rgba(0,245,255,.055);
}

/* Commercial solutions receive a clear introduction and stronger hierarchy. */
.solutions {
    padding-top: clamp(6rem,10vw,9rem);
    background:
        radial-gradient(circle at 50% 0,rgba(0,245,255,.09),transparent 34%),
        linear-gradient(180deg,rgba(10,10,10,.98),rgba(13,13,13,.98));
    border-top: 1px solid rgba(0,245,255,.12);
}
.solutions > .section-title {
    font-size: clamp(2.5rem,5vw,4rem);
    margin-bottom: 2rem !important;
}
.solutions-intro {
    width: min(100%,760px);
    margin: 0 auto clamp(3rem,6vw,5rem);
    text-align: center;
}
.solutions-intro p {
    color: rgba(248,249,250,.70);
    font-size: clamp(1rem,1.8vw,1.15rem);
    line-height: 1.75;
}
.solutions-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 1.5rem;
    padding: .7rem 1.15rem;
    border: 1px solid rgba(0,245,255,.34);
    border-radius: 999px;
    color: var(--plasma-blue);
    font: 500 .78rem "IBM Plex Mono",monospace;
    text-decoration: none;
    transition: background .25s ease,color .25s ease,border-color .25s ease;
}
.solutions-contact:hover,.solutions-contact:focus-visible {
    color: var(--deep-space);
    background: var(--plasma-blue);
    border-color: var(--plasma-blue);
    outline: none;
}
.solutions .product-grid {
    position: relative;
    padding: clamp(1rem,2vw,1.5rem);
    border: 1px solid rgba(0,245,255,.10);
    border-radius: 20px;
    background: rgba(255,255,255,.018);
}
.product-card.commercial-card {
    min-height: 250px;
    border-top-width: 3px;
}
.product-card.commercial-card .product-image {
    background:
        radial-gradient(circle at 50% 50%,rgba(0,245,255,.09),transparent 54%),
        rgba(10,10,10,.96);
}
.product-card.commercial-card .product-image::before { opacity: .11; }
.product-card.commercial-card .product-content {
    justify-content: center;
    text-align: center;
}

/* Clean cube rendering: opaque faces, no blurred page background showing through. */
.values {
    background: #0b0b0b;
}





@media(max-width:680px) {
    .solutions-intro { text-align:left; }
    .solutions-contact { width:100%; }
    .solutions .product-grid { padding:.75rem; }
}

/* Progress bars: always display the value supplied by cards.js. */
.efficiency-meter .efficiency-level {
    display: block;
    min-height: 100%;
    opacity: 1;
    visibility: visible;
}