/**
 * CutFlow Public Landing Page - Full-Page 3D Background, Parallax & Motion CSS
 * Scoped strictly to landing page components (.landing-*, .tilt-card-3d, #landing-bg-canvas)
 * Atmosphere: Deep charcoal/black studio background with dynamic 3D background canvas, ambient gold light beams, and Framer-Motion style spring physics.
 */

/* ==========================================================================
   1. FULL-PAGE DYNAMIC BACKGROUND CANVAS & ATMOSPHERIC LIGHTING
   ========================================================================== */

/* Fixed background canvas covering the entire viewport */
#landing-bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
    opacity: 0.85;
}

/* Full-page ambient section light spots */
.section-ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    transition: opacity 0.5s ease;
}

.glow-top-right {
    top: 5%;
    right: -10%;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(192, 157, 99, 0.25) 0%, rgba(192, 157, 99, 0.04) 55%, transparent 75%);
}

.glow-bottom-left {
    bottom: 5%;
    left: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(192, 157, 99, 0.2) 0%, rgba(20, 21, 26, 0.8) 60%, transparent 80%);
}

.glow-center-gold {
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 550px;
    background: radial-gradient(ellipse, rgba(192, 157, 99, 0.18) 0%, transparent 70%);
}

/* Ambient Gold Light Beams crossing sections */
.ambient-light-beam {
    position: absolute;
    width: 150%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(192, 157, 99, 0.35) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    transform: rotate(-12deg);
    animation: beamSweep 15s ease-in-out infinite alternate;
}

@keyframes beamSweep {
    0% { transform: translateY(-30px) rotate(-12deg); opacity: 0.2; }
    100% { transform: translateY(30px) rotate(-12deg); opacity: 0.6; }
}


/* ==========================================================================
   2. FRAMER-MOTION STYLE SPRING PHYSICS & CARD ELEVATION
   ========================================================================== */

/* Universal 3D perspective container */
.has-3d-stage {
    perspective: 1200px;
    transform-style: preserve-3d;
    position: relative;
    z-index: 1;
}

/* Universal 3D Tilt Card Base with Framer-Motion Spring Physics */
.tilt-card-3d {
    position: relative;
    transform-style: preserve-3d;
    transition: 
        transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
        box-shadow 0.4s ease, 
        border-color 0.4s ease, 
        background-color 0.4s ease;
    will-change: transform, box-shadow;
}

.tilt-card-3d:hover {
    box-shadow: 
        0 25px 55px rgba(0, 0, 0, 0.8), 
        0 0 35px rgba(192, 157, 99, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Glare Overlay on 3D Cards */
.card-glare-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 70%);
    pointer-events: none;
    z-index: 5;
    opacity: 0.65;
    transition: opacity 0.35s ease;
}

.tilt-card-3d:hover .card-glare-overlay {
    opacity: 1;
}

.badge-3d-float {
    transform: translateZ(24px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.7), 0 0 15px rgba(192, 157, 99, 0.3);
}


/* ==========================================================================
   3. SECTION BACKGROUND PARALLAX GRAPHICS
   ========================================================================== */

/* Floating background barber graphics scattered in sections */
.section-bg-graphic {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
    transform-style: preserve-3d;
    will-change: transform;
    transition: opacity 0.4s ease;
}

.graphic-scissors-large {
    top: 15%;
    right: 3%;
    width: 220px;
    height: 220px;
    color: rgba(192, 157, 99, 0.3);
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.8));
}

.graphic-comb-large {
    bottom: 10%;
    left: 2%;
    width: 260px;
    height: 80px;
    color: rgba(192, 157, 99, 0.25);
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.8));
}

.graphic-razor-large {
    top: 40%;
    left: 4%;
    width: 200px;
    height: 90px;
    color: rgba(192, 157, 99, 0.28);
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.8));
}

.graphic-ring-large {
    bottom: 25%;
    right: 5%;
    width: 240px;
    height: 240px;
    border: 2px dashed rgba(192, 157, 99, 0.25);
    border-radius: 50%;
    animation: spinRingReverse 60s linear infinite;
}

@keyframes spinRingReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}


/* ==========================================================================
   4. HERO SECTION 3D STAGE & TYPOGRAPHY
   ========================================================================== */

.landing-hero {
    position: relative;
    padding: 5rem 0 4rem;
    overflow: hidden;
    perspective: 1200px;
}

.landing-hero-backdrop {
    position: absolute;
    inset: -100px -50px -50px -50px;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.hero-glow-spot {
    position: absolute;
    border-radius: 50%;
    filter: blur(85px);
    opacity: 0.5;
    pointer-events: none;
}

.hero-glow-spot-1 {
    top: -10%;
    left: 15%;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(192, 157, 99, 0.35) 0%, rgba(192, 157, 99, 0.08) 50%, transparent 70%);
}

.hero-glow-spot-2 {
    bottom: -15%;
    right: 5%;
    width: 750px;
    height: 750px;
    background: radial-gradient(circle, rgba(192, 157, 99, 0.25) 0%, rgba(20, 21, 26, 0.85) 60%, transparent 80%);
}

.hero-perspective-grid {
    position: absolute;
    inset: -20%;
    background-image: 
        linear-gradient(to right, rgba(192, 157, 99, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(192, 157, 99, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: rotateX(60deg) translateZ(-120px) translateY(-50px);
    transform-origin: 50% 0%;
    mask-image: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 75%);
    opacity: 0.8;
}

.hero-3d-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform-style: preserve-3d;
    z-index: 1;
}

.barber-3d-element {
    position: absolute;
    transform-style: preserve-3d;
    will-change: transform;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.barber-pole-ring-3d {
    top: 8%;
    left: 4%;
    width: 130px;
    height: 130px;
}

.pole-ring-graphic {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(192, 157, 99, 0.4);
    background: conic-gradient(
        from 0deg,
        rgba(192, 157, 99, 0.35) 0deg 45deg,
        rgba(255, 255, 255, 0.18) 45deg 90deg,
        rgba(192, 157, 99, 0.35) 90deg 135deg,
        rgba(20, 21, 26, 0.65) 135deg 180deg,
        rgba(192, 157, 99, 0.35) 180deg 225deg,
        rgba(255, 255, 255, 0.18) 225deg 270deg,
        rgba(192, 157, 99, 0.35) 270deg 315deg,
        rgba(20, 21, 26, 0.65) 315deg 360deg
    );
    box-shadow: 0 0 35px rgba(192, 157, 99, 0.28), inset 0 0 15px rgba(0,0,0,0.8);
    position: relative;
    animation: spinRingSlow 40s linear infinite;
}

.pole-ring-graphic::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: #0d0e11;
    border: 1px solid rgba(192, 157, 99, 0.25);
}

@keyframes spinRingSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.scissors-3d-element {
    top: 55%;
    left: 2%;
    width: 95px;
    height: 95px;
    color: rgba(192, 157, 99, 0.65);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.7)) drop-shadow(0 0 12px rgba(192, 157, 99, 0.25));
}

.comb-3d-element {
    top: 5%;
    right: 28%;
    width: 140px;
    height: 45px;
}

.comb-graphic-svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: rgba(192, 157, 99, 0.5);
    stroke-width: 1.5;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.7));
}

.razor-3d-element {
    bottom: 8%;
    left: 36%;
    width: 110px;
    height: 50px;
    color: rgba(192, 157, 99, 0.55);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.7));
}

.clipper-dial-element {
    top: 22%;
    right: 1%;
    width: 160px;
    height: 160px;
    border: 1px dashed rgba(192, 157, 99, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rotateDialReverse 50s linear infinite;
}

.clipper-dial-inner {
    width: 110px;
    height: 110px;
    border: 1px solid rgba(192, 157, 99, 0.45);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192, 157, 99, 0.12) 0%, transparent 70%);
    position: relative;
}

.clipper-dial-inner::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 12px;
    background: var(--color-gold);
    border-radius: 2px;
    box-shadow: 0 0 10px var(--color-gold);
}

.hero-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 10px var(--color-gold);
    opacity: 0.6;
    animation: floatParticle 8s ease-in-out infinite alternate;
}

.particle-1 { top: 20%; left: 25%; animation-delay: 0s; }
.particle-2 { top: 70%; left: 18%; animation-delay: 2s; }
.particle-3 { top: 30%; right: 20%; animation-delay: 4s; opacity: 0.85; }
.particle-4 { top: 80%; right: 35%; animation-delay: 1s; }

@keyframes floatParticle {
    0% { transform: translateY(0px) scale(1); opacity: 0.3; }
    100% { transform: translateY(-25px) scale(1.4); opacity: 0.95; }
}

.landing-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 3.5rem;
    align-items: center;
}

.landing-hero-content {
    position: relative;
    z-index: 3;
}

.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.95rem;
    background: rgba(192, 157, 99, 0.12);
    border: 1px solid rgba(192, 157, 99, 0.35);
    border-radius: 999px;
    color: var(--color-gold);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 0 18px rgba(192, 157, 99, 0.15);
    backdrop-filter: blur(8px);
}

.landing-hero h1 {
    font-size: 3.2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin-bottom: 1.35rem;
    color: #ffffff;
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
}

.landing-hero h1 .gold-gradient-text {
    background: linear-gradient(135deg, #ffffff 0%, #e2c695 50%, var(--color-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.landing-hero p.hero-subtitle {
    font-size: 1.12rem;
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-bottom: 2.25rem;
    max-width: 520px;
}

.landing-stats-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    border-top: 1px solid rgba(192, 157, 99, 0.22);
    padding-top: 1.75rem;
    background: linear-gradient(to bottom, rgba(192, 157, 99, 0.05), transparent);
    border-radius: 8px 8px 0 0;
}

.landing-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-gold);
    letter-spacing: -0.02em;
    text-shadow: 0 0 15px rgba(192, 157, 99, 0.35);
}


/* ==========================================================================
   5. MOCKUP FRAME SHOWCASE
   ========================================================================== */

.mockup-3d-stage {
    position: relative;
    z-index: 3;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.saas-window-frame {
    position: relative;
    background: #121317;
    border: 1px solid rgba(192, 157, 99, 0.28);
    border-radius: var(--radius-lg);
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.85), 
        0 0 35px rgba(192, 157, 99, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    overflow: hidden;
    transform: rotateX(2deg) rotateY(-3deg) translateZ(0);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    will-change: transform, box-shadow;
}

.mockup-3d-stage:hover .saas-window-frame {
    border-color: rgba(192, 157, 99, 0.55);
    box-shadow: 
        0 35px 80px rgba(0, 0, 0, 0.9), 
        0 0 50px rgba(192, 157, 99, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.mockup-glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 60%);
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.mockup-floating-badge {
    position: absolute;
    top: -18px;
    right: 24px;
    z-index: 12;
    background: #17181d;
    border: 1px solid var(--color-gold);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.8), 0 0 15px rgba(192, 157, 99, 0.35);
    transform: translateZ(25px);
    pointer-events: none;
}

.live-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 10px #34d399;
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}


/* ==========================================================================
   6. TRUST & CAPABILITIES BAR 3D REVAMP
   ========================================================================== */

.trust-bar-section {
    position: relative;
    padding: 2.5rem 0;
    margin: 2rem 0;
    perspective: 1000px;
}

.trust-bar-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60px;
    background: radial-gradient(ellipse, rgba(192, 157, 99, 0.15) 0%, transparent 75%);
    pointer-events: none;
    filter: blur(25px);
}

.trust-bar-title {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.trust-capabilities-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.trust-capability-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1.35rem;
    background: #14151a;
    border: 1px solid rgba(192, 157, 99, 0.25);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}

.trust-capability-pill:hover {
    transform: translateY(-3px) translateZ(15px);
    border-color: var(--color-gold);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(192, 157, 99, 0.3);
    color: var(--color-gold);
}

.trust-capability-pill svg {
    color: var(--color-gold);
    filter: drop-shadow(0 0 6px rgba(192, 157, 99, 0.4));
}


/* ==========================================================================
   7. PROBLEM-SOLUTION SECTION 3D REVAMP
   ========================================================================== */

#problem-solution {
    position: relative;
    perspective: 1200px;
}

.problem-solution-container {
    position: relative;
    z-index: 2;
}

.problem-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 3.5rem;
}

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

.problem-card {
    background: #131418;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.85rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.problem-card:hover {
    border-color: rgba(248, 113, 113, 0.45);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 0 25px rgba(248, 113, 113, 0.15);
}

.problem-card-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.problem-card-title svg {
    color: #f87171;
    filter: drop-shadow(0 0 8px rgba(248, 113, 113, 0.4));
}

.solution-banner {
    position: relative;
    background: linear-gradient(135deg, rgba(192, 157, 99, 0.15) 0%, rgba(18, 19, 23, 0.95) 100%);
    border: 1.5px solid var(--color-gold);
    border-radius: var(--radius-lg);
    padding: 2.75rem 2rem;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(192, 157, 99, 0.22);
}

.solution-banner h3 {
    font-size: 1.75rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.65rem;
}

.solution-banner p {
    color: var(--color-text-secondary);
    font-size: 1rem;
    max-width: 620px;
    margin: 0 auto;
}

.solution-crest-3d {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(192, 157, 99, 0.15);
    border: 1.5px solid var(--color-gold);
    color: var(--color-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 0 20px rgba(192, 157, 99, 0.35);
    transform: translateZ(15px);
}


/* ==========================================================================
   8. EDITORIAL FEATURE SECTIONS (01 - 05) 3D MODULES
   ========================================================================== */

.editorial-features {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    perspective: 1200px;
}

.editorial-item {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3.5rem;
    align-items: center;
    padding: 2rem;
    background: #121317;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.editorial-item:hover {
    border-color: rgba(192, 157, 99, 0.3);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.75), 0 0 30px rgba(192, 157, 99, 0.12);
}

.editorial-number {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-gold);
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
}

.editorial-copy h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.85rem;
}

.editorial-copy p {
    color: var(--color-text-secondary);
    font-size: 0.98rem;
    line-height: 1.65;
}

.editorial-visual {
    background: #16171c;
    border: 1px solid rgba(192, 157, 99, 0.22);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    box-shadow: 0 20px 45px rgba(0,0,0,0.6);
}

.editorial-item:hover .editorial-visual {
    border-color: rgba(192, 157, 99, 0.45);
    box-shadow: 0 25px 60px rgba(0,0,0,0.8), 0 0 35px rgba(192, 157, 99, 0.22);
}

.slot-3d-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.slot-3d-btn:hover {
    transform: translateY(-2px) translateZ(10px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.5);
}

.revenue-bar-3d {
    position: relative;
    border-radius: 6px 6px 0 0;
    transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
    box-shadow: 0 -4px 15px rgba(192, 157, 99, 0.25);
}


/* ==========================================================================
   9. WORKFLOW PIPELINES 3D STAGE
   ========================================================================== */

.workflow-pipeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: #121317;
    border: 1px solid rgba(192, 157, 99, 0.25);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
    perspective: 1000px;
}

.workflow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 95px;
    text-align: center;
}

.workflow-node:hover {
    transform: translateY(-5px) translateZ(15px);
}

.workflow-node-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(192, 157, 99, 0.14);
    border: 1.8px solid var(--color-gold);
    color: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 0 20px rgba(192, 157, 99, 0.25);
    transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.workflow-node:hover .workflow-node-icon {
    background: var(--color-gold);
    color: #121316;
    box-shadow: 0 0 30px rgba(192, 157, 99, 0.5);
}

.workflow-node-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
}

.workflow-arrow {
    color: var(--color-gold);
    font-size: 1.2rem;
    opacity: 0.6;
}


/* ==========================================================================
   10. PRICING CARDS 3D MONOLITHS
   ========================================================================== */

#pricing {
    position: relative;
    perspective: 1200px;
}

.pricing-bg-spot {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(192, 157, 99, 0.18) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(60px);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    max-width: 920px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.pricing-card {
    background: #121317;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2.25rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 45px rgba(0,0,0,0.7);
}

.pricing-card:hover {
    border-color: rgba(192, 157, 99, 0.4);
    box-shadow: 0 25px 60px rgba(0,0,0,0.85), 0 0 35px rgba(192, 157, 99, 0.18);
}

.pricing-card.featured {
    background: linear-gradient(145deg, #17181e 0%, #111216 100%);
    border: 1.8px solid var(--color-gold);
    box-shadow: 0 20px 50px rgba(0,0,0,0.85), 0 0 40px rgba(192, 157, 99, 0.25);
}

.pricing-card.featured:hover {
    border-color: var(--color-gold);
    box-shadow: 0 30px 75px rgba(0,0,0,0.95), 0 0 60px rgba(192, 157, 99, 0.4);
}

.pricing-card-badge {
    position: absolute;
    top: -15px;
    right: 24px;
    background: var(--color-gold);
    color: #121316;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(192, 157, 99, 0.45);
    transform: translateZ(25px);
}


/* ==========================================================================
   11. TESTIMONIALS & FAQ 3D ENHANCEMENTS
   ========================================================================== */

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

.landing-testimonial-card {
    background: #121317;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

.landing-testimonial-card:hover {
    border-color: rgba(192, 157, 99, 0.35);
    box-shadow: 0 18px 40px rgba(0,0,0,0.7), 0 0 20px rgba(192, 157, 99, 0.12);
}

.landing-faq-item {
    background: #121317;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    margin-bottom: 0.85rem;
    padding: 1.1rem 1.35rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.landing-faq-item[open] {
    border-color: rgba(192, 157, 99, 0.4);
    background: #16171d;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 20px rgba(192, 157, 99, 0.1);
}

.landing-faq-item summary {
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    outline: none;
    font-size: 0.98rem;
    user-select: none;
}


/* ==========================================================================
   12. FINAL CTA 3D GRAND PORTAL
   ========================================================================== */

.landing-final-cta {
    position: relative;
    background: linear-gradient(135deg, rgba(192, 157, 99, 0.2) 0%, #111216 80%);
    border: 1.8px solid var(--color-gold);
    border-radius: var(--radius-lg);
    padding: 4rem 2rem;
    text-align: center;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.85), 0 0 50px rgba(192, 157, 99, 0.3);
    overflow: hidden;
}

.landing-final-cta h2 {
    font-size: 2.6rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1.25rem;
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
}


/* ==========================================================================
   13. RESPONSIVE MEDIA QUERIES (DESKTOP, TABLET, MOBILE)
   ========================================================================== */

@media (max-width: 1024px) {
    .landing-hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .landing-hero-content {
        text-align: center;
    }

    .landing-hero p.hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .landing-hero-ctas {
        justify-content: center;
    }

    .problem-grid {
        grid-template-columns: 1fr;
    }

    .editorial-item {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    .landing-grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    #landing-bg-canvas {
        opacity: 0.4;
    }

    .section-bg-graphic {
        display: none !important;
    }

    .landing-hero {
        padding: 3rem 0 2.5rem;
    }

    .landing-hero h1 {
        font-size: 2.2rem;
    }

    .barber-3d-element {
        display: none !important;
    }

    .workflow-pipeline {
        gap: 1.25rem;
    }

    .workflow-arrow {
        display: none;
    }

    .mockup-floating-badge {
        font-size: 0.65rem;
        padding: 0.35rem 0.75rem;
        top: -14px;
        right: 12px;
    }

    .landing-final-cta h2 {
        font-size: 1.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #landing-bg-canvas {
        display: none !important;
    }

    .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .barber-3d-element,
    .hero-particle,
    .pole-ring-graphic,
    .clipper-dial-element,
    .live-pulse-dot,
    .section-bg-graphic,
    .ambient-light-beam {
        animation: none !important;
        transform: none !important;
    }

    .tilt-card-3d,
    .saas-window-frame,
    .btn {
        transition: none !important;
        transform: none !important;
    }
}