/* --- DESIGN SYSTEM (Apple Glass Dark) --- */
 :root {
     --bg-body: #000000;
     --glass-surface: rgba(30, 30, 30, 0.6);
     --glass-border: rgba(255, 255, 255, 0.12);
     --glass-highlight: rgba(255, 255, 255, 0.08);

     --primary: #2AABEE;
     /* Telegram Blue */
     --primary-glow: rgba(42, 171, 238, 0.6);

     --client: #A855F7;
     /* Purple */
     --freelancer: #10B981;
     /* Emerald */
     --stars: #EAB308;
     /* Gold */

     --text-main: #FFFFFF;
     --text-muted: rgba(255, 255, 255, 0.6);

     --dock-bg: rgba(20, 20, 20, 0.7);
     --dock-border: rgba(255, 255, 255, 0.15);

     --ease-apple: cubic-bezier(0.25, 1, 0.5, 1);
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     -webkit-tap-highlight-color: transparent;
 }

 body {
     background-color: var(--bg-body);
     color: var(--text-main);
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     overflow-x: hidden;
     width: 100%;
     min-height: 100vh;
 }

 /* --- BACKGROUND CANVAS --- */
 #bg-canvas {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     pointer-events: none;
 }

 /* --- MAIN APP CONTAINER --- */
 #app-container {
     position: relative;
     width: 100%;
     overflow-x: hidden;
 }

 /* --- VIEWS CONTAINER (Horizontal Sliding) --- */
 .views-wrapper {
     position: relative;
     width: 100%;
 }

 .views-container {
     display: flex;
     flex-direction: column;
     width: 100%;
 }

 .view {
     width: 100%;
     min-height: 100vh;
     padding: 50px 20px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .container {
     width: 100%;
     max-width: 900px;
     margin: auto;
     /* Center vertically and horizontally */
     position: relative;
     padding-bottom: 60px;
     /* Extra internal padding */
 }

 /* --- GLASS COMPONENTS --- */
 .glass-card {
     background: var(--glass-surface);
     backdrop-filter: blur(40px);
     -webkit-backdrop-filter: blur(40px);
     border: 1px solid var(--glass-border);
     border-radius: 32px;
     padding: 30px;
     /* Reduced padding */
     box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
     position: relative;
     overflow: hidden;
 }

 .glass-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
 }

 /* --- TYPOGRAPHY & ELEMENTS --- */
 h1 {
     font-size: clamp(36px, 5vw, 56px);
     font-weight: 800;
     letter-spacing: -1px;
     line-height: 1.1;
     margin-bottom: 12px;
     text-align: center;
 }

 h2 {
     font-size: 28px;
     font-weight: 700;
     margin-bottom: 12px;
 }

 p {
     font-size: 16px;
     color: var(--text-muted);
     line-height: 1.5;
     margin-bottom: 24px;
     text-align: center;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }

 .text-gradient {
     background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 14px 32px;
     border-radius: 100px;
     font-weight: 600;
     font-size: 15px;
     cursor: pointer;
     transition: all 0.3s var(--ease-apple);
     text-decoration: none;
     position: relative;
     border: 1px solid rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     overflow: hidden;
 }

 .btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
 }

 .btn-primary {
     background: linear-gradient(135deg, rgba(42, 171, 238, 0.9), rgba(42, 171, 238, 0.7));
     color: white;
     border-color: rgba(42, 171, 238, 0.5);
     box-shadow: 0 8px 32px -8px var(--primary-glow),
         inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 40px -8px var(--primary-glow),
         inset 0 1px 0 rgba(255, 255, 255, 0.3);
     background: linear-gradient(135deg, rgba(42, 171, 238, 1), rgba(42, 171, 238, 0.8));
 }

 .btn-primary:active {
     transform: translateY(0);
 }

 .btn-outline {
     background: rgba(255, 255, 255, 0.05);
     border-color: rgba(255, 255, 255, 0.15);
     color: var(--text-main);
 }

 .btn-outline:hover {
     background: rgba(255, 255, 255, 0.1);
     border-color: rgba(255, 255, 255, 0.3);
     box-shadow: 0 8px 24px -8px rgba(255, 255, 255, 0.1);
 }

 .badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 6px 14px;
     border-radius: 100px;
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.1);
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 16px;
     /* Reduced margin */
 }

 .logo {
     display: block;
     width: 240px;
     height: auto;
     margin: 0 auto 20px;
 }

 @media screen and (min-width: 769px) {
     .logo {
         width: 450px;
         margin: 0 auto 40px;
     }
 }

 /* --- FLOATING CTA BUTTON --- */
 .floating-cta {
     position: fixed;
     width: 232px;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 100;

     display: flex;
     align-items: center;
     gap: 20px;

     padding: 14px 22px;
     background: var(--dock-bg);
     backdrop-filter: blur(40px);
     -webkit-backdrop-filter: blur(40px);

     border: 1px solid var(--dock-border);
     border-radius: 999px;

     color: white;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;

     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
     transition: all 0.3s var(--ease-apple);
 }

 .floating-cta i {
     font-size: 16px;
     color: var(--primary);
 }

 .floating-cta:hover {
     transform: translateX(-50%) translateY(-2px);
     background: rgba(255, 255, 255, 0.15);
 }

 .floating-cta:active {
     transform: translateX(-50%) translateY(0);
 }

 /* --- SPECIFIC VIEWS --- */

 /* Home */
 .phone-mockup {
     width: 260px;
     height: 520px;
     /* Reduced size */
     background: #000;
     border-radius: 40px;
     border: 6px solid #333;
     margin: 24px auto 0;
     /* Reduced margin */
     position: relative;
     overflow: hidden;
     box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
     transform: rotateX(10deg);
 }

 .screen {
     width: 100%;
     height: 100%;
     background: #1c1c1e;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #555;
 }

 /* Lists */
 .feature-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 16px;
     width: 100%;
     margin-top: 24px;
 }

 .feature-card {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     padding: 24px;
     border-radius: 20px;
     text-align: left;
     position: relative;
     overflow: hidden;
     transition: all 0.3s var(--ease-apple);
 }

 .feature-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
 }

 .feature-card:hover {
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(255, 255, 255, 0.2);
     transform: translateY(-4px);
     box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.3);
 }

 .feature-card i {
     font-size: 24px;
     margin-bottom: 12px;
     color: var(--primary);
 }

 .feature-card h3 {
     font-size: 16px;
     margin-bottom: 8px;
 }

 .feature-card p {
     font-size: 13px;
     text-align: left;
     margin: 0;
     opacity: 0.8;
 }

 /* Bento */
 .bento-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
     width: 100%;
 }

 .bento-item {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 24px;
     padding: 28px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-height: 180px;
     position: relative;
     overflow: hidden;
     transition: all 0.3s var(--ease-apple);
 }

 .bento-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
 }

 .bento-item:hover {
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(255, 255, 255, 0.2);
     transform: translateY(-4px);
     box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.3);
 }

 .bento-item.wide {
     grid-column: span 2;
 }

 .bento-item h3 {
     margin-top: 12px;
     font-size: 18px;
 }

 /* Pricing */
 .pricing-row {
     display: flex;
     gap: 16px;
     justify-content: center;
     width: 100%;
     margin-top: 24px;
 }

 .price-box {
     flex: 1;
     padding: 32px;
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 24px;
     text-align: center;
     position: relative;
     overflow: hidden;
     transition: all 0.3s var(--ease-apple);
 }

 .price-box::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
 }

 .price-box:hover {
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(255, 255, 255, 0.2);
     transform: translateY(-4px);
     box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.3);
 }

 .price-box.pro {
     background: linear-gradient(180deg, rgba(42, 171, 238, 0.1), rgba(0, 0, 0, 0)), rgba(255, 255, 255, 0.05);
     border-color: rgba(42, 171, 238, 0.3);
 }

 .price-box.pro:hover {
     background: linear-gradient(180deg, rgba(42, 171, 238, 0.15), rgba(0, 0, 0, 0)), rgba(255, 255, 255, 0.08);
     border-color: rgba(42, 171, 238, 0.5);
 }

 /* --- HERO BADGES ROW --- */
 .hero-badges-row {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     gap: 0px;
     flex-wrap: wrap;
     margin: 24px 0;
 }

 .hero-badges-row .subtitle {
     margin-bottom: 0;
     text-transform: none;
     letter-spacing: 0;
     padding: 8px 24px 8px 0px;
     color: var(--text-main);
 }

 .hero-badges-row .subtitle i {
     color: var(--primary);
     margin-right: 6px;
 }

 /* Specific icon colors */
 .hero-badges-row .subtitle:nth-child(2) i {
     color: var(--stars);
 }

 .hero-badges-row .subtitle:nth-child(3) i {
     color: #2AABEE;
     /* Telegram Blue */
 }

 /* --- RESPONSIVE --- */
 @media (max-width: 768px) {
     h1 {
         font-size: 36px;
     }

     .glass-card {
         padding: 24px;
         width: 100%;
         border-radius: 24px;
     }

     .dock {
         padding: 8px;
         gap: 4px;
         border-radius: 20px;
     }

     .dock-item {
         width: 50px;
         height: 50px;
     }

     .dock-item i {
         font-size: 20px;
     }

     .dock-item span {
         display: none;
     }

     /* Hide labels on mobile */

     .pricing-row {
         flex-direction: column;
     }

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

     .bento-item.wide {
         grid-column: auto;
     }

     .view {
         padding-bottom: 140px;
         justify-content: flex-start;
         padding-top: 24px;
     }

     .phone-mockup {
         width: 200px;
         height: 400px;
     }
 }

 /* --- NETWORK INFOVIZ (Mobile Only) --- */
 .referral-promo {
     display: none;
 }


 .referral-promo {
     display: block;
     margin: 40px 0 20px;
     width: 100%;
     position: relative;
 }

 .network-viz {
     position: relative;
     width: 260px;
     height: 260px;
     margin: 0 auto;
 }

 /* Center Node (User) */
 .center-node {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, #1c1c1e, #2c2c2e);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10;
     box-shadow: 0 0 30px rgba(42, 171, 238, 0.2);
 }

 .center-node i {
     font-size: 24px;
     color: white;
 }

 /* Orbit Rings (Static) */
 .orbit-ring {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     border: 1px dashed rgba(255, 255, 255, 0.1);
     border-radius: 50%;
 }

 .orbit-ring.r1 {
     width: 140px;
     height: 140px;
     border-color: rgba(255, 255, 255, 0.05);
 }

 .orbit-ring.r2 {
     width: 220px;
     height: 220px;
     border-color: rgba(255, 255, 255, 0.08);
 }

 .orbit-ring.r3 {
     width: 300px;
     height: 300px;
     border-color: rgba(255, 255, 255, 0.05);
 }

 /* Node Wrapper: Handles Positioning/Rotation */
 .node-wrapper {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Satellites (Referrals) */
 .sat-node {
     position: absolute;
     /* Relative to wrapper center */
     width: 32px;
     height: 32px;
     background: rgba(40, 40, 40, 0.9);
     backdrop-filter: blur(4px);
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     z-index: 2;
 }

 .sat-node i {
     font-size: 12px;
     color: var(--text-muted);
 }

 /* Particles (Income Items) */
 .inc-particle {
     position: absolute;
     font-size: 10px;
     font-weight: 700;
     padding: 4px 8px;
     border-radius: 8px;
     opacity: 0;
     white-space: nowrap;
     pointer-events: none;
     z-index: 1;
     /* Note: Animation handles transforms */
 }

 .inc-particle.type-perc {
     color: #60A5FA;
     background: rgba(30, 58, 138, 0.6);
     /* Blueish dark */
     border: 1px solid rgba(96, 165, 250, 0.3);
     box-shadow: 0 2px 8px rgba(96, 165, 250, 0.2);
 }

 .inc-particle.type-star {
     color: var(--stars);
     background: rgba(234, 179, 8, 0.15);
     border: 1px solid rgba(234, 179, 8, 0.3);
     box-shadow: 0 2px 8px rgba(234, 179, 8, 0.2);
 }

 /* Flow Animation: Wrapper Rotated, we translate along Y or X to center */
 /* Since wrapper is rotate(deg), translate(0, -radius) places node on ring.
        Particle starts at (0, -radius) and moves to (0,0) */

 @keyframes flow-in {
     0% {
         opacity: 0;
         transform: translateY(var(--radius)) scale(0.5);
     }

     20% {
         opacity: 1;
         transform: translateY(var(--radius)) scale(1);
     }

     90% {
         opacity: 1;
         transform: translateY(0) scale(0.5);
     }

     100% {
         opacity: 0;
         transform: translateY(0) scale(0.1);
     }
 }

 /* Actually, better logic: 
        Node is at `transform: rotate(A) translateY(-R) rotate(-A)`.
        Particle is child of Node? No, wrapper.
        If Wrapper is `rotate(A)`, then `translateY(-R)` is the node position.
        Center is `translateY(0)`.
        
        Let's animate `translateY` from `-R` to `0`.
    */

 .node-wrapper .inc-particle {
     animation: flow-to-center 3s ease-in-out infinite;
 }

 @keyframes flow-to-center {
     0% {
         opacity: 0;
         transform: translateY(calc(var(--dist) * -1)) rotate(calc(var(--ang) * -1)) scale(0.5);
     }

     20% {
         opacity: 1;
         transform: translateY(calc(var(--dist) * -1)) rotate(calc(var(--ang) * -1)) scale(1);
     }

     90% {
         opacity: 1;
         transform: translateY(0) rotate(calc(var(--ang) * -1)) scale(0.5);
     }

     100% {
         opacity: 0;
         transform: translateY(0) rotate(calc(var(--ang) * -1)) scale(0.2);
     }
 }

 /* Stagger animations */
 .node-wrapper:nth-child(2n) .inc-particle {
     animation-delay: 1s;
 }

 .node-wrapper:nth-child(3n) .inc-particle {
     animation-delay: 2s;
 }

 .node-wrapper:nth-child(5n) .inc-particle {
     animation-delay: 1.5s;
 }

 .ref-text-minimal {
     text-align: center;
     margin-top: -10px;
     position: relative;
     z-index: 20;
 }

 .ref-text-minimal h3 {
     font-size: 18px;
     margin-bottom: 6px;
     background: linear-gradient(to right, #fff, #aaa);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .ref-text-minimal p {
     font-size: 13px;
     max-width: 240px;
 }


 @keyframes pop-up {

     0%,
     100% {
         opacity: 0;
         transform: translateY(10px) scale(0.8);
     }

     20%,
     80% {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 @keyframes spin {
     from {
         transform: translate(-50%, -50%) rotate(0deg);
     }

     to {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }

 /* --- HERO DEMO ANIMATION --- */
 .hero-demo-wrapper {
     width: 300px;
     height: 200px;
     margin: 12px auto 40px;
     perspective: 1000px;
     position: relative;
 }

 .hero-card {
     width: 100%;
     height: 100%;
     background: rgba(30, 30, 30, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 24px;
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     position: relative;
     overflow: hidden;
     box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
     display: flex;
     flex-direction: column;
 }

 /* HEADER */
 .hero-header {
     height: 40px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     display: flex;
     align-items: center;
     padding: 0 16px;
     font-size: 12px;
     color: var(--text-muted);
     justify-content: space-between;
 }

 /* CONTENT AREA */
 .hero-content {
     flex: 1;
     position: relative;
     padding: 16px;
 }

 .step-layer {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     padding: 16px;
     opacity: 0;
     pointer-events: none;
     transition: all 0.4s ease;
     transform: scale(0.95);
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .step-layer.active {
     opacity: 1;
     pointer-events: all;
     transform: scale(1);
 }

 /* STEP 1: TASK LIST */
 .task-input-mock {
     display: flex;
     gap: 10px;
     align-items: center;
     background: rgba(255, 255, 255, 0.05);
     padding: 10px;
     border-radius: 12px;
     margin-bottom: 10px;
 }

 .task-cursor {
     width: 2px;
     height: 14px;
     background: var(--primary);
     animation: blink 1s infinite;
 }

 .mock-item {
     height: 8px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 4px;
     margin-bottom: 8px;
     width: 100%;
 }

 /* STEP 2: SEARCH */
 .search-radar {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     border: 1px solid var(--primary);
     margin: 0 auto;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .search-radar::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: conic-gradient(from 0deg, transparent 0deg, rgba(42, 171, 238, 0.4) 360deg);
     animation: spin 1.5s linear infinite;
     left: 50%;
     top: 50%;
 }

 .search-text {
     text-align: center;
     margin-top: 12px;
     font-size: 12px;
     color: var(--primary);
 }

 /* STEP 3: WORK */
 .work-indicator {
     display: flex;
     gap: 4px;
     display: flex;
     gap: 6px;
     justify-content: center;
     margin-top: 10px;
 }

 .working-status {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 12px;
     justify-content: flex-start;
     width: 100%;
 }

 /* FOUND NOTIFICATION */
 .found-notification {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 12px;
     width: 100%;
     animation: foundIn 0.5s var(--ease-apple) forwards;
 }

 .found-icon {
     width: 50px;
     height: 50px;
     background: var(--freelancer);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     color: white;
     box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
 }

 .found-text {
     font-size: 14px;
     font-weight: 700;
     color: var(--freelancer);
 }

 /* WORKING CONTAINER */
 .working-container {
     display: none;
     flex-direction: column;
     align-items: center;
     width: 100%;
 }

 .working-container.show {
     display: flex;
     animation: fadeInSlide 0.4s ease;
 }

 /* PROGRESS BAR */
 .progress-wrapper {
     position: relative;
     width: 100%;
     margin-bottom: 20px;
 }

 .progress-bar-bg {
     height: 24px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.08);
 }

 .progress-fill {
     height: 100%;
     width: 0%;
     background: linear-gradient(90deg, var(--freelancer), #34d399);
     transition: width 0.1s linear;
 }

 .progress-text {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 10px;
     font-weight: 700;
     color: white;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
     pointer-events: none;
 }

 @keyframes foundIn {
     from {
         opacity: 0;
         transform: scale(0.8);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 .freelancer-avatar {
     width: 36px;
     height: 36px;
     background: linear-gradient(135deg, #2c2c2e, #1c1c1e);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: var(--freelancer);
     font-size: 16px;
 }

 .working-info {
     flex: 1;
     text-align: left;
 }

 .working-title {
     font-size: 11px;
     font-weight: 600;
     color: white;
     margin-bottom: 2px;
 }

 .working-time {
     font-size: 10px;
     color: var(--text-muted);
 }

 @keyframes fadeInSlide {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .work-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--freelancer);
     animation: bounce 0.6s infinite alternate;
 }

 .work-dot:nth-child(2) {
     animation-delay: 0.1s;
 }

 .work-dot:nth-child(3) {
     animation-delay: 0.2s;
 }

 .code-mock-line {
     height: 6px;
     background: rgba(16, 185, 129, 0.2);
     border-radius: 2px;
     margin-bottom: 6px;
     width: 0%;
     animation: typeLine 2s steps(20) infinite;
 }

 /* STEP 4: REVIEW */
 .file-grid-mock {
     display: flex;
     gap: 10px;
     margin-bottom: 10px;
 }

 .file-mock {
     width: 40px;
     height: 40px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 10px;
 }

 .btn-confirm-mock {
     background: var(--primary);
     color: white;
     border: none;
     padding: 8px;
     border-radius: 8px;
     font-size: 12px;
     font-weight: 600;
     width: 100%;
     cursor: pointer;
     text-align: center;
 }

 .btn-edits-mock {
     background: transparent;
     color: var(--primary);
     border: 1px solid var(--primary);
     padding: 8px;
     border-radius: 8px;
     font-size: 11px;
     font-weight: 600;
     width: 100%;
     cursor: pointer;
     text-align: center;
     margin-top: 8px;
     transition: all 0.3s ease;
 }

 .btn-edits-mock:hover {
     background: rgba(42, 171, 238, 0.1);
 }

 .snackbar-mock {
     position: absolute;
     top: -26px;
     left: 16px;
     right: 16px;
     background: rgba(42, 171, 238, 0.9);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     color: white;
     padding: 8px 12px;
     border-radius: 12px;
     font-size: 11px;
     font-weight: 500;
     display: flex;
     align-items: center;
     gap: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     transform: translateY(10px);
     opacity: 0;
     transition: all 0.5s var(--ease-apple);
     z-index: 10;
 }

 .snackbar-mock.show {
     transform: translateY(0);
     opacity: 1;
 }

 .snackbar-mock i {
     font-size: 14px;
 }

 /* AUTO CURSOR */
 .auto-cursor {
     position: absolute;
     top: 150%;
     /* Start below */
     left: 80%;
     font-size: 24px;
     color: rgba(255, 255, 255, 0.9);
     filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
     opacity: 0;
     pointer-events: none;
     z-index: 100;
     transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .auto-cursor.click-animation {
     transform: scale(0.9);
     filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
 }

 /* STEP 1 EDIT MOCK */
 .edit-input-mock {
     display: none;
     gap: 10px;
     align-items: center;
     background: rgba(168, 85, 247, 0.05);
     padding: 10px;
     border-radius: 12px;
     margin-top: 5px;
     margin-bottom: 10px;
     border: 1px dashed rgba(168, 85, 247, 0.3);
 }

 .edit-input-mock.show {
     display: flex;
 }

 #typeText,
 #typeEdits {
     white-space: pre-wrap;
 }

 /* STEP 5: SUCCESS */
 .success-icon {
     font-size: 40px;
     color: var(--freelancer);
     text-align: center;
     margin-bottom: 10px;
     animation: pop-up 0.5s ease;
 }

 .btn-restart {
     background: transparent;
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: var(--text-muted);
     padding: 6px 12px;
     border-radius: 100px;
     font-size: 11px;
     margin: 0 auto;
     display: block;
     cursor: pointer;
 }

 @keyframes blink {
     50% {
         opacity: 0;
     }
 }

 @keyframes typeLine {
     0% {
         width: 0;
     }

     50% {
         width: 80%;
     }

     100% {
         width: 80%;
     }
 }

 @keyframes bounce {
     to {
         transform: translateY(-4px);
     }
 }

 /* --- BENEFITS SECTION --- */
 .benefits-section {
     margin-top: 60px;
     display: flex;
     flex-wrap: wrap;
     gap: 24px;
     justify-content: center;
 }

 .benefit-item {
     display: flex;
     align-items: center;
     gap: 16px;
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.08);
     /* Faint border */
     border-radius: 30px;
     padding: 16px 17px;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     width: 100%;
     max-width: 340px;
     /* Limit width on desktop */
     transition: all 0.3s ease;
 }

 .benefit-item:hover {
     background: rgba(255, 255, 255, 0.06);
     transform: translateY(-2px);
     border-color: rgba(255, 255, 255, 0.15);
 }

 .icon-box.glass {
     width: 48px;
     height: 48px;
     border-radius: 14px;
     background: rgba(255, 255, 255, 0.05);
     /* slightly lighter inner */
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.02);
 }

 .icon-box i {
     font-size: 20px;
     color: var(--primary);
     /* Default color */
 }

 /* Specific icon colors if needed, but primary blue looks clean mostly */
 /* Let's vary them slightly for visual interest based on context if we want, or keep consistent */
 .benefit-item:nth-child(2) .icon-box i {
     color: var(--stars);
 }

 /* Star icon */
 .benefit-item:nth-child(3) .icon-box i {
     color: var(--freelancer);
 }

 /* Shield */
 .benefit-item:nth-child(5) .icon-box i {
     color: var(--client);
 }

 /* Award/Quality */

 .benefit-text {
     text-align: left;
 }

 .benefit-text h4 {
     margin: 0 0 4px 0;
     font-size: 15px;
     font-weight: 600;
     color: #fff;
 }

 .benefit-text p {
     margin: 0;
     font-size: 13px;
     color: rgba(255, 255, 255, 0.6);
     line-height: 1.4;
     text-align: left;
     /* Overrides global p styling if set to center */
     max-width: none;
     /* Reset global p max-width */
 }

 /* --- MOBILE LAYOUT ADJUSTMENTS --- */
 @media (max-width: 768px) {

     /* Center text and buttons generally in containers */
     .container {
         text-align: center;
     }

     /* Force centering of buttons */
     .btn {
         margin-left: auto;
         margin-right: auto;
         display: inline-flex;
     }

     /* Force centering of badges */
     .badge {
         margin-left: auto;
         margin-right: auto;
         display: inline-flex;
     }

     /* Center benefits items */
     .benefits-section {
         flex-direction: column;
         align-items: center;
     }

     .benefit-item {
         max-width: 100%;
         /* Full width on mobile if desired, or keep card look */
         justify-content: flex-start;
         /* Keep icon and text aligned left internally */
         text-align: left;
         /* Internal text left aligned */
     }
 }

 /* --- DESKTOP LAYOUT (2 Columns) --- */
 @media (min-width: 769px) {
     .home-grid {
         display: grid;
         grid-template-columns: 1fr 340px;
         /* Main content + Fixed width Benefits */
         gap: 60px;
         align-items: center;
         /* Center vertically relative to each other if desired, or flex-start */
         justify-content: space-between;
         width: 100%;
     }

     .home-left {
         text-align: left;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
     }

     .home-left .logo {
         margin-left: 0;
         margin-right: 0;
     }

     .home-left h1 {
         text-align: left;
     }

     .home-left p {
         text-align: left;
         margin-left: 0;
         margin-right: 0;
     }

     /* Adjust Hero Demo placement if needed */
     .hero-demo-wrapper {
         margin-left: 0;
         margin-right: 0;
     }

     /* Benefits on the Right */
     .home-right {
         display: flex;
         flex-direction: column;
         justify-content: center;
         will-change: transform;
     }

     /* Override benefits styling for vertical stack on desktop */
     .benefits-section {
         flex-direction: column;
         gap: 16px;
         margin-top: 0;
     }

     .benefit-item {
         max-width: 100%;
         /* Fill the column width */
     }

     .home-grid.reversed {
         grid-template-columns: 340px 1fr;
     }

     .home-grid.reversed .home-right {
         order: -1;
     }

     .home-grid.reversed .home-left {
         order: 1;
     }
 }

 .mobile-btn {
     display: none;
 }

 .desktop-btn {
     display: inline-block;
 }

 @media (max-width: 768px) {
     .mobile-btn {
         display: inline-block;
     }

     .desktop-btn {
         display: none;
     }
 }

 .icons-grid {
     display: flex;
     gap: 16px;
     margin-top: 20px;
 }

 @media (max-width: 768px) {
     .icons-grid {
         justify-content: center;
     }

     .hero-badges-row {
         justify-content: center;
     }
 }

 .icons-grid img {
     width: 24px;
     height: 24px;
     object-fit: contain;
 }


 .freelancer-popup {
     position: fixed;
     inset: 0;
     background: rgba(6, 10, 20, 0.92);
     backdrop-filter: blur(24px);
     -webkit-backdrop-filter: blur(24px);
     z-index: 9999;
     opacity: 0;
     pointer-events: none;
     transition: opacity .35s ease;
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }

 .freelancer-popup.show {
     opacity: 1;
     pointer-events: auto;
 }

 .freelancer-popup-content {
     max-width: 880px;
     width: 100%;
     margin: 0 auto;
     padding: 60px 20px 100px;
     overflow-y: auto;
     flex: 1;
     -webkit-overflow-scrolling: touch;
 }

 .popup-close {
     position: fixed;
     top: 20px;
     right: 20px;
     width: 44px;
     height: 44px;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 50%;
     color: #fff;
     font-size: 18px;
     cursor: pointer;
     z-index: 10000;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s var(--ease-apple);
 }

 .popup-close:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: scale(1.1);
 }

 .popup-title {
     font-size: clamp(24px, 4vw, 32px);
     font-weight: 800;
     margin-bottom: 8px;
     text-align: center;
     line-height: 1.2;
 }

 .popup-subtitle {
     font-size: 14px;
     margin-bottom: 32px;
     opacity: 0.75;
     text-align: center;
     line-height: 1.5;
 }

 .popup-benefits {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
     gap: 12px;
     margin-bottom: 40px;
 }

 .popup-benefit {
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     padding: 16px 14px;
     border-radius: 16px;
     font-size: 12px;
     text-align: left;
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 8px;
     transition: all 0.3s var(--ease-apple);
 }

 .popup-benefit:hover {
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(255, 255, 255, 0.2);
     transform: translateY(-2px);
 }

 .popup-benefit i {
     font-size: 20px;
     color: var(--primary);
     margin-bottom: 0;
 }

 .popup-passive-title {
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 8px;
     text-align: center;
 }

 .popup-passive-text {
     font-size: 13px;
     margin-bottom: 32px;
     opacity: 0.7;
     text-align: center;
     line-height: 1.5;
 }

 .popup-referral-section {
     text-align: center;
     margin-top: 40px;
 }

 .popup-referral-title {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 8px;
 }

 .popup-referral-text {
     font-size: 13px;
     margin-bottom: 24px;
     opacity: 0.7;
     line-height: 1.5;
 }

 .popup-footer {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(to top, rgba(6, 10, 20, 0.95) 0%, rgba(6, 10, 20, 0.8) 70%, transparent 100%);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     padding: 20px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     z-index: 10001;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .popup-start-btn {
     width: 100%;
     max-width: 400px;
     padding: 16px 32px;
     font-size: 16px;
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     margin: 0;
 }

 @media (max-width: 768px) {
     .freelancer-popup-content {
         padding: 50px 16px 100px;
     }

     .popup-close {
         top: 16px;
         right: 16px;
         width: 40px;
         height: 40px;
         font-size: 16px;
     }

     .popup-title {
         font-size: 24px;
         margin-bottom: 6px;
     }

     .popup-subtitle {
         font-size: 13px;
         margin-bottom: 24px;
     }

     .popup-benefits {
         grid-template-columns: repeat(2, 1fr);
         gap: 10px;
         margin-bottom: 32px;
     }

     .popup-benefit {
         padding: 14px 10px;
         font-size: 11px;
     }

     .popup-benefit i {
         font-size: 18px;
     }

     .popup-passive-title {
         font-size: 18px;
     }

     .popup-passive-text {
         font-size: 12px;
         margin-bottom: 24px;
     }

     .popup-referral-section {
         margin-top: 32px;
     }

     .popup-referral-title {
         font-size: 16px;
     }

     .popup-referral-text {
         font-size: 12px;
         margin-bottom: 20px;
     }

     .popup-footer {
         padding: 16px;
     }

     .popup-start-btn {
         padding: 14px 24px;
         font-size: 15px;
     }

     .popup-referral-section .network-viz {
         width: 220px;
         height: 220px;
         margin: 0 auto 16px;
     }

     .popup-referral-section .center-node {
         width: 50px;
         height: 50px;
     }

     .popup-referral-section .center-node i {
         font-size: 20px;
     }

     .popup-referral-section .orbit-ring.r1 {
         width: 120px;
         height: 120px;
     }

     .popup-referral-section .orbit-ring.r2 {
         width: 180px;
         height: 180px;
     }

     .popup-referral-section .orbit-ring.r3 {
         width: 240px;
         height: 240px;
     }

     .popup-referral-section .sat-node {
         width: 28px;
         height: 28px;
     }

     .popup-referral-section .sat-node i {
         font-size: 11px;
     }
 }

 /* Network viz inside popup - desktop */
 .freelancer-popup .network-viz {
     width: 240px;
     height: 240px;
     margin: 0 auto 20px;
 }

 .freelancer-popup .ref-text-minimal {
     display: none;
 }

 /* --- SOCIAL ICONS ROW --- */
 .social-icons-row {
     display: flex;
     justify-content: center;
     gap: 16px;
     margin: 20px 0 30px;
     width: 100%;
 }

 .social-icon-btn {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     background: var(--glass-surface);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid var(--glass-border);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-main);
     font-size: 18px;
     text-decoration: none;
     transition: all 0.3s var(--ease-apple);
     position: relative;
     overflow: hidden;
 }

 .social-icon-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
 }

.social-icon-btn i {
    transition: transform 0.3s var(--ease-apple);
}

.social-icon-btn img {
    width: 18px;
    height: 18px;
    display: block;
    filter: brightness(0) invert(1);
    transition: transform 0.3s var(--ease-apple);
}

 .social-icon-btn:hover {
     transform: translateY(-4px);
     background: rgba(255, 255, 255, 0.1);
     border-color: rgba(255, 255, 255, 0.3);
     box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.5),
         0 0 15px rgba(255, 255, 255, 0.1);
 }

.social-icon-btn:hover i {
    transform: scale(1.1);
}

.social-icon-btn:hover img {
    transform: scale(1.1);
}

.social-icon-btn:active {
    transform: translateY(-2px);
}

.legal-links {
    margin-top: -60px;
    margin-bottom: 80px;
    display: flex;
    justify-content: center;
    gap: 18px;
}

.legal-link {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    transition: all 0.25s var(--ease-apple);
}

.legal-link:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.55);
}

.legal-popup {
    position: fixed;
    inset: 0;
    background: rgba(6, 10, 20, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 10020;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.legal-popup.show {
    opacity: 1;
    pointer-events: auto;
}

.legal-popup-dialog {
    width: min(980px, 100%);
    height: min(86vh, 860px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(14, 20, 33, 0.88);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.legal-popup-header {
    height: 56px;
    padding: 0 14px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

.legal-popup-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.92);
}

.legal-popup-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legal-popup-open {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: all 0.25s var(--ease-apple);
}

.legal-popup-open:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
}

.legal-popup .popup-close {
    position: static;
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.legal-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
}

@media (max-width: 768px) {
    .legal-links {
        margin-top: -54px;
        margin-bottom: 70px;
    }

    .legal-popup {
        padding: 10px;
    }

    .legal-popup-dialog {
        height: min(92vh, 860px);
        border-radius: 14px;
    }
}