/* --- PROJECT CASE STUDY v3.8 --- */
.project-case {
    --project-accent: var(--neon);
    --project-accent-rgb: 0, 243, 255;
    position: relative;
    color: #f7fbff;
    font-family: 'Inter', sans-serif;
}
.project-theme-dark-barber { --project-accent: #f5f7fa; --project-accent-rgb: 245,247,250; }
.project-theme-tbg { --project-accent: #dce7ef; --project-accent-rgb: 220,231,239; }
.project-theme-affittala { --project-accent: #ff6678; --project-accent-rgb: 255,102,120; }
.project-theme-weblow { --project-accent: #00f3ff; --project-accent-rgb: 0,243,255; }

/* Explicit heading colors prevent theme/global rules from turning text dark. */
.project-case h1,
.project-case h2,
.project-case h3,
.project-case .project-section-heading h2,
.project-case .project-bottom-cta h2,
.project-case .project-panel h2,
.project-case .project-feature h3,
.project-case .project-audience-card h3,
.project-case .project-flow-step h3 {
    color: #f7fbff !important;
    opacity: 1 !important;
}

.project-shell { max-width: 1240px; margin: 0 auto; padding: 46px 24px 80px; }
.project-back {
    display: inline-flex; align-items:center; gap:8px; margin-bottom:34px;
    color:#93a1b1; text-decoration:none; font:700 .72rem 'JetBrains Mono', monospace;
    letter-spacing:1.4px; transition:.25s ease;
}
.project-back:hover { color:var(--project-accent); transform:translateX(-4px); }

/* HERO */
.project-hero {
    display:grid; grid-template-columns: 1.18fr .82fr; min-height:480px;
    border:1px solid rgba(var(--project-accent-rgb),.34); border-radius:24px; overflow:hidden;
    background:linear-gradient(135deg, rgba(8,12,20,.97), rgba(5,7,12,.88));
    box-shadow:0 30px 90px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.03);
}
.project-hero-copy { padding:64px 58px; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; }
.project-kicker, .project-panel-label {
    color:var(--project-accent); font:700 .72rem 'JetBrains Mono', monospace;
    letter-spacing:1.7px; text-transform:uppercase;
}
.project-hero h1 {
    margin:15px 0 14px; font:700 clamp(2.8rem, 5vw, 5rem) 'Rajdhani', sans-serif;
    line-height:.94; letter-spacing:1px; text-transform:uppercase;
    text-shadow:0 0 30px rgba(var(--project-accent-rgb),.08);
}
.project-status {
    display:inline-flex; align-items:center; gap:9px; width:max-content; margin:4px 0 24px;
    padding:7px 12px; border:1px solid rgba(0,255,136,.42); border-radius:999px;
    color:#00ff88; background:rgba(0,255,136,.08); font:700 .68rem 'JetBrains Mono',monospace; letter-spacing:1px;
}
.project-status span { width:7px; height:7px; border-radius:50%; background:#00ff88; box-shadow:0 0 14px #00ff88; }
.project-lead { max-width:710px; margin:0; color:#cbd4df; font-size:1.03rem; line-height:1.8; }
.project-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.project-primary, .project-secondary {
    display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px;
    border-radius:7px; text-decoration:none; text-transform:uppercase;
    font:700 .78rem 'Rajdhani',sans-serif; letter-spacing:1.2px; transition:.25s ease;
}
.project-primary { background:var(--project-accent); color:#05070a; border:1px solid var(--project-accent); }
.project-primary:hover { transform:translateY(-2px); box-shadow:0 0 30px rgba(var(--project-accent-rgb),.28); background:#fff; border-color:#fff; }
.project-theme-affittala .project-primary { color:#fff; }
.project-secondary { color:#d7dee7; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.035); }
.project-secondary:hover { border-color:rgba(var(--project-accent-rgb),.65); color:var(--project-accent); }

/* HERO VISUAL / 3D ORBITAL SYSTEM v3.9 */
.project-hero-visual {
    --scene-rx: 0deg;
    --scene-ry: 0deg;
    --panel-rx: 0deg;
    --panel-ry: 0deg;
    --glow-x: 50%;
    --glow-y: 42%;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    perspective: 1050px;
    background:
        radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(var(--project-accent-rgb),.18), transparent 31%),
        radial-gradient(circle at 50% 58%, rgba(0,243,255,.055), transparent 52%),
        #05070c;
    border-left: 1px solid rgba(255,255,255,.08);
    transition: background-position .25s ease;
}
.project-hero-visual::before {
    content: '';
    position: absolute;
    inset: -15%;
    z-index: 0;
    pointer-events: none;
    opacity: .2;
    background-image:
        linear-gradient(rgba(var(--project-accent-rgb),.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--project-accent-rgb),.09) 1px, transparent 1px);
    background-size: 34px 34px;
    transform: perspective(850px) rotateX(66deg) translateY(17%) scale(1.28);
    transform-origin: 50% 65%;
    mask-image: linear-gradient(to bottom, transparent 5%, #000 32%, #000 72%, transparent 100%);
}
.project-hero-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5,7,12,.72), transparent 16%, transparent 84%, rgba(5,7,12,.7)),
        linear-gradient(180deg, rgba(5,7,12,.45), transparent 18%, transparent 80%, rgba(5,7,12,.6));
}

.project-3d-scene {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    transform-style: preserve-3d;
    transform: rotateX(var(--scene-rx)) rotateY(var(--scene-ry));
    transition: transform .18s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}

/* Receding luminous grid: gives the scene a real floor/depth cue. */
.project-3d-grid {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 135%;
    height: 115%;
    opacity: .18;
    background-image:
        linear-gradient(rgba(var(--project-accent-rgb),.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--project-accent-rgb),.14) 1px, transparent 1px);
    background-size: 38px 38px;
    transform-style: preserve-3d;
    transform: translate(-50%, -39%) rotateX(72deg) translateZ(-190px) scale(1.2);
    transform-origin: 50% 80%;
    mask-image: radial-gradient(ellipse at center, #000 22%, rgba(0,0,0,.8) 48%, transparent 74%);
}

.project-3d-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    transform: translate(-50%,-50%) translateZ(-90px);
    background: radial-gradient(circle, rgba(var(--project-accent-rgb),.14), rgba(var(--project-accent-rgb),.025) 42%, transparent 70%);
    box-shadow: 0 0 95px rgba(var(--project-accent-rgb),.09);
    animation: projectCorePulse 5.5s ease-in-out infinite;
}

/* Each plane is tilted in 3D; the rotating track makes nodes pass through perspective. */
.project-orbit-plane {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-style: preserve-3d;
    backface-visibility: visible;
}
.project-orbit-plane-a { transform: translate(-50%,-50%) rotateX(68deg) rotateY(-8deg) translateZ(-78px); }
.project-orbit-plane-b { transform: translate(-50%,-50%) rotateX(72deg) rotateY(56deg) rotateZ(18deg) translateZ(4px); }
.project-orbit-plane-c { transform: translate(-50%,-50%) rotateX(70deg) rotateY(-54deg) rotateZ(-22deg) translateZ(102px); }

.project-orbit-track {
    position: relative;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 1px solid rgba(var(--project-accent-rgb),.23);
    box-shadow:
        inset 0 0 28px rgba(var(--project-accent-rgb),.045),
        0 0 22px rgba(var(--project-accent-rgb),.035);
    transform-style: preserve-3d;
}
.project-orbit-plane-a .project-orbit-track { animation: projectOrbitSpin 17s linear infinite; }
.project-orbit-plane-b .project-orbit-track {
    width: 420px;
    height: 420px;
    border-style: dashed;
    border-color: rgba(0,243,255,.24);
    animation: projectOrbitSpinReverse 12s linear infinite;
}
.project-orbit-plane-c .project-orbit-track {
    width: 350px;
    height: 350px;
    border-color: rgba(var(--project-accent-rgb),.16);
    animation: projectOrbitSpin 9s linear infinite;
}

.project-orbit-node {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translate(-50%,-50%) translateZ(14px);
    background: var(--project-accent);
    box-shadow: 0 0 8px var(--project-accent), 0 0 24px var(--project-accent), 0 0 46px rgba(var(--project-accent-rgb),.45);
}
.project-node-primary { left: 50%; top: 0; }
.project-node-secondary {
    left: 91%;
    top: 72%;
    width: 7px;
    height: 7px;
    background: #00f3ff;
    box-shadow: 0 0 9px #00f3ff, 0 0 28px rgba(0,243,255,.72);
}
.project-orbit-plane-b .project-orbit-node { left: 14%; top: 22%; }
.project-orbit-plane-c .project-orbit-node { left: 82%; top: 15%; }

/* Floating depth particles */
.project-3d-particles { position:absolute; inset:0; transform-style:preserve-3d; }
.project-3d-particles i {
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:rgba(255,255,255,.8);
    box-shadow:0 0 10px rgba(255,255,255,.55);
    animation: projectParticleFloat 5s ease-in-out infinite alternate;
}
.project-3d-particles i:nth-child(1){left:18%;top:24%;transform:translateZ(-130px);animation-delay:-1.4s;}
.project-3d-particles i:nth-child(2){left:77%;top:18%;transform:translateZ(80px);animation-delay:-3.1s;background:var(--project-accent);}
.project-3d-particles i:nth-child(3){left:12%;top:70%;transform:translateZ(45px);animation-delay:-2.2s;background:#00f3ff;}
.project-3d-particles i:nth-child(4){left:84%;top:68%;transform:translateZ(-75px);animation-delay:-.7s;}
.project-3d-particles i:nth-child(5){left:29%;top:83%;transform:translateZ(110px);animation-delay:-4.2s;background:var(--project-accent);}
.project-3d-particles i:nth-child(6){left:69%;top:84%;transform:translateZ(-35px);animation-delay:-2.8s;}
.project-3d-particles i:nth-child(7){left:37%;top:13%;transform:translateZ(25px);animation-delay:-1.1s;background:#00f3ff;}
.project-3d-particles i:nth-child(8){left:91%;top:42%;transform:translateZ(120px);animation-delay:-3.6s;background:var(--project-accent);}

/* Central card is a separate 3D object, preserving all existing logos. */
.project-logo-float {
    position: relative;
    z-index: 6;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transform: rotateX(var(--panel-rx)) rotateY(var(--panel-ry)) translateZ(78px);
    transition: transform .18s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}
.project-logo-float::before {
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    width:min(72%, 355px);
    height:58%;
    min-height:145px;
    border:1px solid rgba(var(--project-accent-rgb),.2);
    border-radius:24px;
    transform:translate(-50%,-50%) translateZ(-28px) translateY(14px);
    background:rgba(var(--project-accent-rgb),.025);
    box-shadow:0 28px 65px rgba(0,0,0,.38);
}
.project-logo-panel {
    position:relative;
    z-index:3;
    width:min(74%, 360px);
    min-height:190px;
    padding:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    overflow:hidden;
    background:linear-gradient(145deg, rgba(9,12,18,.94), rgba(3,5,9,.88));
    border:1px solid rgba(255,255,255,.14);
    border-radius:22px;
    box-shadow:
        0 35px 80px rgba(0,0,0,.48),
        0 0 0 1px rgba(var(--project-accent-rgb),.045),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
    box-sizing:border-box;
    transform-style:preserve-3d;
    transform:translateZ(14px);
    animation:projectLogoFloat 5.8s ease-in-out infinite;
}
.project-logo-panel::before {
    content:'';
    position:absolute;
    inset:-1px;
    z-index:0;
    pointer-events:none;
    border-radius:inherit;
    background:
        radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255,255,255,.18), transparent 24%),
        linear-gradient(115deg, transparent 34%, rgba(255,255,255,.08) 48%, transparent 62%);
    opacity:.52;
    mix-blend-mode:screen;
}
.project-logo-panel::after {
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    border-radius:inherit;
    box-shadow:inset 0 0 34px rgba(var(--project-accent-rgb),.035);
}
.project-logo-panel img,
.project-logo-panel .weblow-project-mark,
.project-logo-panel small { position:relative; z-index:2; transform:translateZ(22px); }
.project-logo-panel img { width:auto; height:auto; max-width:100%; max-height:190px; object-fit:contain; display:block; }
.project-logo-shadow {
    position:absolute;
    left:50%;
    top:calc(50% + 115px);
    width:250px;
    height:34px;
    transform:translateX(-50%) translateZ(-10px);
    border-radius:50%;
    background:rgba(var(--project-accent-rgb),.18);
    filter:blur(22px);
    opacity:.42;
    animation:projectShadowPulse 5.8s ease-in-out infinite;
}

/* Theme-specific logo sizing stays exactly controlled. */
.project-theme-dark-barber .project-logo-panel { width:min(76%, 390px); min-height:190px; background:linear-gradient(145deg,#07090d,#020305); }
.project-theme-dark-barber .project-logo-panel img { width:100%; max-width:350px; max-height:190px; object-fit:contain; }
.project-theme-tbg .project-logo-panel { width:min(62%, 300px); min-height:188px; padding:16px; background:linear-gradient(145deg,#050505,#000); }
.project-theme-tbg .project-logo-panel img { width:100%; max-width:250px; max-height:250px; object-fit:contain; }
.project-theme-affittala .project-logo-panel {
    width:min(76%, 390px);
    min-height:158px;
    padding:26px 34px;
    background:linear-gradient(145deg,#ffffff,#f1f2f5);
    border-color:rgba(255,255,255,.84);
    box-shadow:0 35px 80px rgba(0,0,0,.28), 0 0 55px rgba(255,102,120,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.project-theme-affittala .project-logo-panel::before { opacity:.22; mix-blend-mode:multiply; }
.project-theme-affittala .project-logo-panel img { width:100%; max-width:330px; max-height:92px; object-fit:contain; }
.project-logo-text { min-height:190px; }
.weblow-project-mark { font:800 2.5rem 'Rajdhani',sans-serif; letter-spacing:2px; }
.weblow-project-mark span { color:var(--project-accent); }
.project-logo-text small { margin-top:8px; color:#7d8a99; font:700 .7rem 'JetBrains Mono',monospace; letter-spacing:2px; }

.project-3d-hud {
    position:absolute;
    right:18px;
    bottom:16px;
    z-index:8;
    display:flex;
    align-items:center;
    gap:8px;
    color:rgba(201,214,226,.52);
    font:700 .58rem 'JetBrains Mono',monospace;
    letter-spacing:1.25px;
    text-transform:uppercase;
}
.project-3d-hud-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--project-accent);
    box-shadow:0 0 12px var(--project-accent);
    animation:projectHudBlink 2.1s ease-in-out infinite;
}

@keyframes projectOrbitSpin { to { transform:rotate(360deg); } }
@keyframes projectOrbitSpinReverse { to { transform:rotate(-360deg); } }
@keyframes projectCorePulse { 50% { transform:translate(-50%,-50%) translateZ(-90px) scale(1.08); opacity:.72; } }
@keyframes projectParticleFloat { to { margin-top:-13px; opacity:.34; } }
@keyframes projectLogoFloat { 0%,100% { transform:translateZ(14px) translateY(0); } 50% { transform:translateZ(22px) translateY(-8px); } }
@keyframes projectShadowPulse { 50% { width:222px; opacity:.28; filter:blur(27px); } }
@keyframes projectHudBlink { 50% { opacity:.35; } }

/* When JS is available, pointer parallax is enabled without changing layout. */
.project-hero-visual.project-3d-interactive { cursor: default; }
.project-hero-visual.project-3d-interactive .project-logo-panel { transition:border-color .25s ease, box-shadow .25s ease; }
.project-hero-visual.project-3d-interactive:hover .project-logo-panel {
    border-color:rgba(var(--project-accent-rgb),.32);
    box-shadow:0 42px 95px rgba(0,0,0,.5), 0 0 42px rgba(var(--project-accent-rgb),.08), inset 0 1px 0 rgba(255,255,255,.1);
}

/* METRICS */
.project-metrics {
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:28px 0;
    border:1px solid rgba(255,255,255,.09); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.08);
}
.project-metric { min-height:108px; display:flex; align-items:center; gap:18px; padding:24px 28px; background:rgba(7,10,16,.96); }
.project-metric strong { color:var(--project-accent); font:700 1.35rem 'JetBrains Mono',monospace; }
.project-metric span { color:#d2dae4; font:700 .73rem 'JetBrains Mono',monospace; letter-spacing:1px; }

/* SHARED PANELS */
.project-panel,
.project-explainer,
.project-flow-section,
.project-features,
.project-bottom-cta {
    border:1px solid rgba(255,255,255,.11); border-radius:18px; background:rgba(8,11,17,.84);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.project-panel-label { opacity:1; }
.project-section-heading h2,
.project-panel h2,
.project-bottom-cta h2 {
    margin:11px 0 16px; font:700 2rem 'Rajdhani',sans-serif; text-transform:uppercase;
}

/* WHAT IT DOES */
.project-explainer { padding:42px; margin-top:26px; }
.project-section-heading-wide { max-width:960px; }
.project-section-heading-wide h2 { margin-bottom:16px; font-size:2.35rem; }
.project-section-heading-wide > p { margin:0; color:#c5ced9; line-height:1.82; font-size:1rem; max-width:1020px; }
.project-audience-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:30px; }
.project-audience-card {
    position:relative; min-height:180px; padding:30px 30px 28px 72px;
    border:1px solid rgba(var(--project-accent-rgb),.16); border-radius:14px;
    background:linear-gradient(145deg, rgba(var(--project-accent-rgb),.045), rgba(255,255,255,.012));
}
.project-audience-index {
    position:absolute; left:28px; top:31px; color:var(--project-accent);
    font:700 1rem 'JetBrains Mono',monospace;
}
.project-audience-card h3 { margin:0 0 12px; font:700 1.35rem 'Rajdhani',sans-serif; letter-spacing:.5px; }
.project-audience-card p { margin:0; color:#aeb9c5; line-height:1.72; font-size:.92rem; }

/* MISSION + STACK */
.project-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:26px; margin-top:26px; }
.project-panel { padding:38px; }
.project-panel p { color:#b9c3ce; line-height:1.8; margin:0; font-size:.98rem; }
.project-stack-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.project-stack-list span {
    padding:8px 11px; border:1px solid rgba(var(--project-accent-rgb),.27); border-radius:6px;
    color:#d0d8e1; background:rgba(var(--project-accent-rgb),.05);
    font:700 .68rem 'JetBrains Mono',monospace;
}

/* FLOW */
.project-flow-section { margin-top:26px; padding:42px; }
.project-section-heading { margin-bottom:28px; }
.project-section-heading h2 { margin-bottom:0; font-size:2.35rem; }
.project-flow-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.project-flow-step {
    position:relative; min-height:215px; padding:26px 24px;
    border:1px solid rgba(255,255,255,.08); border-radius:14px;
    background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
}
.project-flow-number { color:var(--project-accent); font:700 1.05rem 'JetBrains Mono',monospace; }
.project-flow-line { width:48px; height:2px; margin:17px 0 20px; background:var(--project-accent); box-shadow:0 0 12px rgba(var(--project-accent-rgb),.45); opacity:.75; }
.project-flow-step h3 { margin:0 0 10px; font:700 1.22rem 'Rajdhani',sans-serif; letter-spacing:.5px; }
.project-flow-step p { margin:0; color:#9fabb8; line-height:1.65; font-size:.88rem; }

/* FEATURES */
.project-features { margin-top:26px; padding:42px; }
.project-feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.project-feature {
    position:relative; min-height:190px; padding:30px;
    border:1px solid rgba(255,255,255,.08); border-radius:14px;
    background:linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    overflow:hidden; transition:.25s ease;
}
.project-feature:hover { transform:translateY(-4px); border-color:rgba(var(--project-accent-rgb),.42); box-shadow:0 16px 45px rgba(0,0,0,.22); }
.project-feature-index { color:rgba(var(--project-accent-rgb),.65); font:700 1rem 'JetBrains Mono',monospace; }
.project-feature h3 { margin:18px 0 10px; font:700 1.35rem 'Rajdhani',sans-serif; letter-spacing:.6px; }
.project-feature p { margin:0; color:#aab5c1; line-height:1.68; font-size:.9rem; }

/* CTA */
.project-bottom-cta {
    display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:26px; padding:38px 42px;
    border-color:rgba(var(--project-accent-rgb),.27);
    background:linear-gradient(110deg, rgba(var(--project-accent-rgb),.07), rgba(8,11,17,.88));
}
.project-bottom-cta h2 { margin-bottom:5px; font-size:1.8rem; }
.project-bottom-cta p { margin:0; color:#9facb9; font-size:.9rem; line-height:1.5; }

@media (max-width: 1080px) {
    .project-flow-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 980px) {
    .project-hero { grid-template-columns:1fr; }
    .project-hero-visual { min-height:390px; border-left:0; border-top:1px solid rgba(255,255,255,.08); }
    .project-grid { grid-template-columns:1fr; }
    .project-audience-grid { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
    .project-shell { padding:28px 16px 60px; }
    .project-hero-copy { padding:42px 26px; }
    .project-hero h1 { font-size:2.8rem; }
    .project-hero-visual { min-height:320px; }
    .orbit-one { width:340px; height:340px; }
    .orbit-two { width:285px; height:285px; }
    .project-logo-panel,
    .project-theme-dark-barber .project-logo-panel,
    .project-theme-tbg .project-logo-panel,
    .project-theme-affittala .project-logo-panel { width:min(72%, 270px); min-height:150px; padding:18px; }
    .project-theme-dark-barber .project-logo-panel img { max-height:145px; }
    .project-theme-tbg .project-logo-panel img { max-height:165px; max-width:190px; }
    .project-theme-affittala .project-logo-panel img { max-height:70px; max-width:230px; }
    .project-metrics { grid-template-columns:1fr; }
    .project-metric { min-height:82px; }
    .project-explainer, .project-flow-section, .project-features { padding:28px 22px; }
    .project-section-heading h2, .project-section-heading-wide h2 { font-size:1.85rem; }
    .project-audience-card { padding:26px 24px 26px 62px; }
    .project-flow-grid { grid-template-columns:1fr; }
    .project-flow-step { min-height:0; }
    .project-feature-grid { grid-template-columns:1fr; }
    .project-bottom-cta { align-items:flex-start; flex-direction:column; padding:30px 24px; }
}


/* v3.8 - prospect-facing case study content */
.project-section-heading-wide > p,
.project-flow-section .project-section-heading-wide > p,
.project-features .project-section-heading-wide > p {
    margin: 0;
    color: #c7d0dc !important;
    line-height: 1.82;
    font-size: 1rem;
    max-width: 1040px;
}

.project-fit-block {
    margin-top: 26px;
    padding: 28px;
    border: 1px solid rgba(var(--project-accent-rgb), .22);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--project-accent-rgb), .075), rgba(255,255,255,.018));
}
.project-fit-heading,
.project-ideal-heading,
.project-outcome-label,
.project-support-label {
    color: var(--project-accent);
    font: 700 .72rem 'JetBrains Mono', monospace;
    letter-spacing: 1.45px;
    text-transform: uppercase;
}
.project-fit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
}
.project-fit-item {
    min-height: 132px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: rgba(4,7,12,.54);
}
.project-fit-item > span {
    display: block;
    margin-bottom: 14px;
    color: var(--project-accent);
    font: 700 .9rem 'JetBrains Mono', monospace;
}
.project-fit-item p,
.project-ideal-item p,
.project-outcome p,
.project-support-card p {
    color: #b8c3cf !important;
}
.project-fit-item p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.68;
}

.project-support-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 18px;
    margin-top: 18px;
}
.project-support-card {
    min-height: 180px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: rgba(5,8,14,.72);
}
.project-support-card h3 {
    margin: 13px 0 12px;
    color: #f7fbff !important;
    font: 700 1.45rem 'Rajdhani', sans-serif;
    text-transform: uppercase;
}
.project-support-card p {
    margin: 0;
    line-height: 1.76;
    font-size: .94rem;
}
.project-support-card .project-stack-list { margin-top: 18px; }

.project-flow-section .project-section-heading,
.project-features .project-section-heading { margin-bottom: 28px; }
.project-flow-grid { margin-top: 28px; }
.project-feature-grid { margin-top: 28px; }

.project-outcome {
    display: grid;
    grid-template-columns: 230px 1fr;
    align-items: start;
    gap: 24px;
    margin-top: 18px;
    padding: 26px 28px;
    border: 1px solid rgba(var(--project-accent-rgb), .2);
    border-radius: 14px;
    background: rgba(var(--project-accent-rgb), .045);
}
.project-outcome p {
    margin: 0;
    line-height: 1.76;
    font-size: .94rem;
}

.project-ideal {
    margin-top: 22px;
    padding: 28px;
    border: 1px solid rgba(var(--project-accent-rgb), .2);
    border-radius: 14px;
    background: linear-gradient(130deg, rgba(var(--project-accent-rgb),.055), rgba(255,255,255,.012));
}
.project-ideal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
}
.project-ideal-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 18px;
    border-radius: 10px;
    background: rgba(5,8,14,.52);
    border: 1px solid rgba(255,255,255,.06);
}
.project-ideal-item > span {
    color: var(--project-accent);
    font: 700 1rem 'JetBrains Mono', monospace;
    line-height: 1.5;
}
.project-ideal-item p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.65;
}

@media (max-width: 980px) {
    .project-fit-grid,
    .project-ideal-grid { grid-template-columns: 1fr; }
    .project-support-grid { grid-template-columns: 1fr; }
    .project-fit-item { min-height: 0; }
    .project-outcome { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 720px) {
    .project-fit-block,
    .project-ideal { padding: 22px; }
    .project-support-card { padding: 24px; min-height: 0; }
}


/* v3.9 3D safety / responsive overrides */
@media (max-width: 980px) {
    .project-hero-visual { perspective:900px; }
    .project-orbit-track { width:430px; height:430px; }
    .project-orbit-plane-b .project-orbit-track { width:365px; height:365px; }
    .project-orbit-plane-c .project-orbit-track { width:305px; height:305px; }
}
@media (max-width: 720px) {
    .project-hero-visual { min-height:340px; perspective:760px; }
    .project-3d-grid { opacity:.11; }
    .project-orbit-track { width:330px; height:330px; }
    .project-orbit-plane-b .project-orbit-track { width:285px; height:285px; }
    .project-orbit-plane-c .project-orbit-track { width:235px; height:235px; }
    .project-orbit-plane-a { transform:translate(-50%,-50%) rotateX(68deg) rotateY(-7deg) translateZ(-55px); }
    .project-orbit-plane-b { transform:translate(-50%,-50%) rotateX(71deg) rotateY(52deg) rotateZ(18deg) translateZ(0); }
    .project-orbit-plane-c { transform:translate(-50%,-50%) rotateX(70deg) rotateY(-48deg) rotateZ(-22deg) translateZ(70px); }
    .project-logo-float { transform:rotateX(var(--panel-rx)) rotateY(var(--panel-ry)) translateZ(52px); }
    .project-logo-float::before { display:none; }
    .project-logo-shadow { top:calc(50% + 94px); width:190px; }
    .project-3d-hud { display:none; }
    .project-3d-particles i:nth-child(n+6) { display:none; }
}
@media (prefers-reduced-motion: reduce) {
    .project-3d-scene,
    .project-logo-float { transition:none !important; transform:none !important; }
    .project-orbit-track,
    .project-3d-core,
    .project-3d-particles i,
    .project-logo-panel,
    .project-logo-shadow,
    .project-3d-hud-dot { animation:none !important; }
    .project-orbit-plane-a { transform:translate(-50%,-50%) rotateX(68deg) rotateY(-8deg) translateZ(-50px); }
    .project-orbit-plane-b { transform:translate(-50%,-50%) rotateX(72deg) rotateY(56deg) rotateZ(18deg); }
    .project-orbit-plane-c { transform:translate(-50%,-50%) rotateX(70deg) rotateY(-54deg) rotateZ(-22deg) translateZ(60px); }
}