:root {
      --color-bg:             #0B0D12;
      --color-surface:        #121624;
      --color-surface-2:      #161B2A;
      --color-surface-3:      #1C2233;
      --color-divider:        #2A3145;
      --color-border:         #2A3145;
      --color-text:           #F2F4F8;
      --color-text-muted:     #98A2B3;
      --color-text-faint:     #4A5568;
      --color-text-inverse:   #0B0D12;
      --color-cyan:           #4FD1FF;
      --color-cyan-glow:      rgba(79, 209, 255, 0.15);
      --color-cyan-hover:     #7ADEFF;
      --color-magenta:        #C23BFF;
      --color-magenta-glow:   rgba(194, 59, 255, 0.15);
      --color-magenta-hover:  #D46FFF;
      --color-amber:          #FFB547;
      --color-amber-glow:     rgba(255, 181, 71, 0.15);
      --color-amber-hover:    #FFC96B;
      --color-indigo:         #4A5FA7;
      --font-display: "Space Grotesk", "Helvetica Neue", sans-serif;
      --font-body:    "Inter", "Helvetica Neue", sans-serif;
      --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
      --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
      --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
      --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
      --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
      --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
      --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
      --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);
      --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
      --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
      --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;
      --radius-sm:0.25rem; --radius-md:0.5rem; --radius-lg:0.75rem;
      --radius-xl:1rem; --radius-full:9999px;
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --transition-fast:  120ms cubic-bezier(0.16, 1, 0.3, 1);
      --transition-base:  200ms cubic-bezier(0.16, 1, 0.3, 1);
      --transition-slow:  400ms cubic-bezier(0.16, 1, 0.3, 1);
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
      --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
      --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
      --shadow-cyan:    0 0 24px rgba(79,209,255,0.25);
      --shadow-magenta: 0 0 24px rgba(194,59,255,0.25);
      --shadow-amber:   0 0 24px rgba(255,181,71,0.25);
      --content-default: 960px;
      --content-wide: 1200px;
    }

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth}
    body{min-height:100dvh;background:transparent;color:var(--color-text);font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;overflow-x:hidden}
    img{display:block;max-width:100%}
    h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.15}
    p{text-wrap:pretty;max-width:72ch;margin-inline:auto}
    a{text-decoration:none;color:inherit}
    a,button{transition:color var(--transition-base),background var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}
    button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
    ::selection{background:rgba(79,209,255,0.2);color:var(--color-text)}
    :focus-visible{outline:2px solid var(--color-cyan);outline-offset:3px;border-radius:var(--radius-sm)}

    .btn{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;letter-spacing:0.02em;display:inline-flex;align-items:center;gap:var(--space-2)}
    .btn-primary{background:var(--color-cyan);color:var(--color-bg);border-color:var(--color-cyan)}
    .btn-primary:hover{background:var(--color-cyan-hover);box-shadow:var(--shadow-cyan)}
    @keyframes glow-pulse{0%,100%{box-shadow:0 0 12px rgba(79,209,255,0.2)}50%{box-shadow:0 0 32px rgba(79,209,255,0.5)}}
    .glow-btn{animation:glow-pulse 3s ease-in-out infinite}
    /* Scroll Reveals */
    .reveal{opacity:0;transform:translateY(36px)}
    .reveal.revealed{opacity:1;transform:translateY(0);transition:opacity 2.4s cubic-bezier(0.16,1,0.3,1),transform 2.4s cubic-bezier(0.16,1,0.3,1)}
    .section-eyebrow{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--color-cyan);display:block;width:fit-content;margin:0 auto var(--space-6) auto;padding:var(--space-2) var(--space-4);border:1px solid rgba(79,209,255,0.3);border-radius:var(--radius-full);background:var(--color-cyan-glow);cursor:pointer;transition:border-color 0.3s ease,background 0.3s ease,box-shadow 0.3s ease,transform 0.3s ease;}
    .section-eyebrow:hover{border-color:rgba(79,209,255,0.9);background:rgba(8,16,32,0.93);backdrop-filter:blur(8px);box-shadow:0 0 20px rgba(79,209,255,0.5),0 0 44px rgba(79,209,255,0.18);transform:scale(1.06)}
    .hero-eyebrow{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-cyan);margin-bottom:var(--space-4);display:inline-block;padding:var(--space-2) var(--space-4);border:1px solid rgba(79,209,255,0.3);border-radius:var(--radius-full);background:var(--color-cyan-glow);cursor:pointer;transition:border-color 0.3s ease,background 0.3s ease,box-shadow 0.3s ease,transform 0.3s ease;}
    .hero-eyebrow:hover{border-color:rgba(79,209,255,0.9);background:rgba(8,16,32,0.93);backdrop-filter:blur(8px);box-shadow:0 0 20px rgba(79,209,255,0.5),0 0 44px rgba(79,209,255,0.18);transform:scale(1.06)}

    /* Navigation */
    .site-nav{position:fixed;top:var(--space-4);left:50%;transform:translateX(-50%);width:95%;max-width:var(--content-wide);z-index:100;padding:var(--space-3) var(--space-6);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#000000;border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-full);overflow:hidden;transition:background var(--transition-base),border-color var(--transition-base)}
.site-nav.scrolled .logo-img{height:80px;width:auto;transform:scale(2.2);transform-origin:left center;transition:all var(--transition-base);-webkit-mask-image:radial-gradient(ellipse at left center, black 50%, transparent 75%);mask-image:radial-gradient(ellipse at left center, black 50%, transparent 75%);}
.site-nav.scrolled{background:#000000;border-color:rgba(255,255,255,0.2)}
.logo-container{justify-self:start;margin-left:-24px}
.nav-links{display:flex;gap:var(--space-8);align-items:center;justify-self:center}
.nav-cta{justify-self:end}
    .logo-container{display:flex;align-items:center;gap:var(--space-3)}
    .logo-img{height:80px;width:auto;transform:scale(2.2);transform-origin:left center;transition:all var(--transition-base);-webkit-mask-image:radial-gradient(ellipse at left center, black 50%, transparent 75%);mask-image:radial-gradient(ellipse at left center, black 50%, transparent 75%);}

    .logo-text{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;letter-spacing:-0.02em}
    .logo-text span{color:var(--color-cyan)}
    
    .nav-link{font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);letter-spacing:0.05em;text-transform:uppercase}
    .nav-link:hover{color:var(--color-text)}
    .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:var(--space-2)}
    .hamburger span{display:block;width:22px;height:2px;background:var(--color-text);border-radius:1px;transition:all var(--transition-base)}
    .nav-mobile-cta { display: none; }

    /* Hero */
    .hero{position:relative;display:flex;align-items:flex-start;padding:calc(var(--space-20) + 80px) var(--space-8) var(--space-10);overflow:hidden}
    .hero-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}
    @keyframes hero-breathe{0%,100%{opacity:0.85}50%{opacity:0.25}}
    .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 5%;opacity:0.85;transform:scale(1.1) translateX(-8%);animation:hero-breathe 5s ease-in-out infinite;mask-image:linear-gradient(to bottom,black 50%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 50%,transparent 100%)}
    .hero-bg::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,transparent 0%,var(--color-bg) 95%)}
    .hero-content{position:relative;z-index:10;max-width:var(--content-wide);margin:0 auto;text-align:center}
    .hero-eyebrow{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-cyan);margin-bottom:var(--space-4);display:inline-block;padding:var(--space-2) var(--space-4);border:1px solid rgba(79,209,255,0.3);border-radius:var(--radius-full);background:var(--color-cyan-glow)}
    .live-status{display:inline-flex;align-items:center;align-self:center;gap:6px;padding:4px 12px 4px 8px;background:rgba(0,255,120,0.06);border:1px solid rgba(0,255,120,0.25);border-radius:var(--radius-full);backdrop-filter:blur(8px)}
    .live-dot{position:relative;width:7px;height:7px;border-radius:50%;background:#00e676;flex-shrink:0}
    .live-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:rgba(0,230,118,0.3);animation:live-pulse 1.8s ease-out infinite}
    @keyframes live-pulse{0%{transform:scale(1);opacity:0.8}100%{transform:scale(2.8);opacity:0}}
    .live-label{font-family:var(--font-body);font-size:0.65rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:rgba(0,230,118,0.9)}
    .hero-headline{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:700;letter-spacing:-0.03em;line-height:1.05;margin-bottom:var(--space-10);text-shadow:0 4px 24px rgba(0,0,0,0.5)}
    .hero-headline .accent, .hero-tagline .accent{color:var(--color-cyan);background:linear-gradient(135deg,#4FD1FF 0%,#C23BFF 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
    .sub-hero .hero-headline{opacity:0.75}
    .hero-tagline{font-family:var(--font-body);font-size:var(--text-lg);color:var(--color-text-muted);max-width:65ch;margin:0 auto var(--space-12);line-height:1.6}
    .hero-cta{display:flex;gap:var(--space-6);justify-content:center;flex-wrap:wrap}

    /* Labs */
    .section{padding:var(--space-16) 0;width:95%;max-width:var(--content-wide);margin:0 auto}
    .lab-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);overflow:visible;padding:var(--space-4) 0}
    .lab-card{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);padding:var(--space-8) var(--space-6);position:relative;overflow:hidden;cursor:pointer;transition:all 0.5s cubic-bezier(0.16,1,0.3,1);text-decoration:none;align-items:center;text-align:center;}
    .lab-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px}
    .lab-card.media::before{background:var(--color-magenta)}
    .lab-card.spatial::before{background:var(--color-cyan)}
    .lab-card.product::before{background:var(--color-amber)}
    .lab-card:hover{transform:scale(1.12) translateY(-8px);box-shadow:var(--shadow-lg);z-index:10}
    .lab-card.media:hover{box-shadow:var(--shadow-magenta);border-color:rgba(194,59,255,0.3)}
    .lab-card.spatial:hover{box-shadow:var(--shadow-cyan);border-color:rgba(79,209,255,0.3)}
    .lab-card.product:hover{box-shadow:var(--shadow-amber);border-color:rgba(255,181,71,0.3)}
    .lab-card-icon{width:44px;height:44px;border-radius:var(--radius-lg);margin-bottom:var(--space-4);display:flex;align-items:center;justify-content:center;overflow:hidden}
    .lab-card-icon img{width:100%;height:100%;object-fit:contain}
    .lab-card-icon.media{background:var(--color-magenta-glow)}
    .lab-card-icon.spatial{background:var(--color-cyan-glow)}
    .lab-card-icon.product{background:var(--color-amber-glow)}
    .lab-card-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-2)}
    .lab-card-title.media{color:var(--color-magenta)}
    .lab-card-title.spatial{color:var(--color-cyan)}
    .lab-card-title.product{color:var(--color-amber)}
    .lab-card-desc{font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.7;margin-bottom:var(--space-5)}
    .lab-enter{margin-top:auto;display:inline-block;font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;letter-spacing:0.1em;text-transform:uppercase}
    .lab-enter.media{color:var(--color-magenta)}
    .lab-enter.spatial{color:var(--color-cyan)}
    .lab-enter.product{color:var(--color-amber)}
    .project-explore{margin-top:auto;display:inline-block;font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;letter-spacing:0.12em;text-transform:uppercase;transition:opacity 0.2s ease}
    .project-explore:hover{opacity:0.7}
    .project-explore.magenta{color:var(--color-magenta)}
    .project-explore.cyan{color:var(--color-cyan)}
    .project-explore.amber{color:var(--color-amber)}

    /* Featured Projects */
    .project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-6);overflow:visible;padding:var(--space-4) 0}
    .project-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column;transition:all 0.5s cubic-bezier(0.16,1,0.3,1);text-decoration:none}
    .project-card:hover{transform:scale(1.12) translateY(-8px);z-index:10;border-color:var(--color-cyan);box-shadow:var(--shadow-lg),var(--shadow-cyan)}
    .project-image{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--color-bg)}
    .project-image img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
    .project-card:hover .project-image img{transform:scale(1.05)}
    .project-info{padding:var(--space-6);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);flex-grow:1}
    .project-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--color-text)}
    .project-desc{font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6}
    .project-info .badge{align-self:center}


    /* ATLAS Showcase */
    .marquee-container{position:relative;width:100%;padding:var(--space-4) 0;display:flex}
    
    
    
    .marquee-track{display:flex;gap:var(--space-4);width:max-content;animation:scroll 65s linear infinite}
    .marquee-track:hover{animation-play-state:paused}
    .marquee-item{position:relative;width:600px;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-divider);flex-shrink:0;transition:all 0.5s cubic-bezier(0.16,1,0.3,1);cursor:pointer;z-index:1}
    .marquee-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
    .marquee-item:hover{transform:scale(1.12) translateY(-8px);z-index:10;border-color:var(--color-cyan);box-shadow:var(--shadow-lg),var(--shadow-cyan)}
    .marquee-item:hover img{transform:scale(1.05)}
    .marquee-label{position:absolute;bottom:0;left:0;width:100%;padding:var(--space-8) var(--space-4) var(--space-4);background:linear-gradient(to top,rgba(11,13,18,0.95) 0%,transparent 100%);color:var(--color-cyan);font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;text-align:center;opacity:0;transform:translateY(10px);transition:all 0.4s ease;pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,0.8)}
    .marquee-item:hover .marquee-label{opacity:1;transform:translateY(0)}
    @keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(calc(-50% - (var(--space-4) / 2)))}}
    /* Stats Bar */
    .stats-bar{width:fit-content;max-width:520px;margin:0 auto var(--space-16) auto;padding:2px 0}
    .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(18,22,36,0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(79,209,255,0.15);border-radius:var(--radius-xl);padding:var(--space-2) var(--space-4);box-shadow:0 8px 32px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.05)}
    .stat-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;position:relative}
    .stat-item:not(:last-child)::after{content:'';position:absolute;right:0;top:15%;height:70%;width:1px;background:rgba(79,209,255,0.15)}
    .stat-number{font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;background:linear-gradient(135deg,#4FD1FF 0%,#C23BFF 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-0.02em;line-height:1}
    .stat-label{font-family:var(--font-body);font-size:0.6rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-text-muted)}

    /* Mission & Footer */
    .mission-section{padding:var(--space-16) var(--space-8);max-width:var(--content-wide);margin:0 auto;text-align:center}
    .mission-statement{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;letter-spacing:-0.015em;margin-bottom:var(--space-8);line-height:1.2}
    .mission-statement .accent{color:var(--color-cyan)}
    .domain-ticker{margin-top:var(--space-8);display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
    .domain-ticker-label{font-family:var(--font-body);font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--color-text-muted);text-align:center}
    .domain-ticker-display{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);background:rgba(8,16,32,0.75);border:1px solid rgba(79,209,255,0.2);border-radius:var(--radius-lg);backdrop-filter:blur(12px);box-shadow:0 0 24px rgba(79,209,255,0.06),inset 0 1px 0 rgba(255,255,255,0.04)}
    .domain-ticker-arrow{color:var(--color-cyan);font-size:var(--text-base);font-weight:300;opacity:0.8;flex-shrink:0}
    #domain-text{font-family:'Courier New',Courier,monospace;font-size:var(--text-sm);font-weight:600;background:linear-gradient(135deg,#4FD1FF 0%,#C23BFF 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;min-width:190px;letter-spacing:0.04em;display:inline-block;text-align:center}
    .badge-row{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}
    .badge{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1px solid transparent}
    .badge-cyan{background:var(--color-cyan-glow);color:var(--color-cyan);border-color:rgba(79,209,255,0.3)}
    .badge-magenta{background:var(--color-magenta-glow);color:var(--color-magenta);border-color:rgba(194,59,255,0.3)}
    .badge-amber{background:var(--color-amber-glow);color:var(--color-amber);border-color:rgba(255,181,71,0.3)}
    .badge-muted{background:var(--color-surface-3);color:var(--color-text-muted);border-color:var(--color-divider)}
    .site-footer{border-top:1px solid rgba(255,255,255,0.1);padding:var(--space-6) var(--space-8);margin-top:var(--space-16);background:#000000;position:relative;z-index:10;}
    .footer-content{max-width:var(--content-wide);margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-6)}
    .footer-logo{height:80px;width:auto;transform:scale(2.2);opacity:1;transition:opacity var(--transition-base);-webkit-mask-image:radial-gradient(ellipse at center, black 65%, transparent 80%);mask-image:radial-gradient(ellipse at center, black 65%, transparent 80%);margin-bottom:var(--space-8);}
    .footer-logo:hover{opacity:1}
    .footer-links{display:flex;gap:var(--space-6);margin:var(--space-4) 0}
    .footer-link{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.05em}
    .footer-link:hover{color:var(--color-cyan)}
    .footer-copy{font-size:var(--text-xs);color:var(--color-text-faint)}

    @media(max-width:768px){
      .site-nav{padding:var(--space-3) var(--space-4)}
      .nav-links{display:none}
      .hamburger{display:flex}
      .hero-headline{font-size:var(--text-3xl)}
      .lab-card-grid{grid-template-columns:1fr}
      .mission-section{padding:var(--space-16) var(--space-4)}
      .mission-statement{font-size:var(--text-xl)}
    }
    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
      html{background-color:var(--color-bg);scroll-behavior:auto}
    }
  
    /* Sub-Page Layout Rules */
    .sub-hero {
      min-height: 50vh;
      padding-top: calc(var(--space-20) + 150px);
      padding-bottom: 0;
    }
    .sub-page-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-8);
    }
    .sub-page-card { flex: 1 1 300px; min-width: 300px; max-width: 600px; transform-style: preserve-3d; display: flex; flex-direction: column; }
    .sub-page-card .project-title {
      font-size: var(--text-xl);
    }
    .sub-page-card .project-desc {
      font-size: var(--text-base);
    }
    /* Pin .project-info as flex-column so .live-status always sits at the card bottom */
    .sub-page-card .project-info { display: flex; flex-direction: column; flex: 1; }
    .sub-page-card .project-info .live-status { align-self: center; width: fit-content; }
.sub-projects-section { padding-top: var(--space-6) !important; }
    .sub-projects-section .section-eyebrow {
      margin-bottom: var(--space-8);
    }
.section, .mission-section { position: relative; }
.section::before, .mission-section::before, .section::after, .mission-section::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background-color: var(--color-divider);
    opacity: 0.5;
}
.section::before, .mission-section::before { top: 0; }
.section::after, .mission-section::after { bottom: 0; }
.section + .section::before, .section + .mission-section::before, .mission-section + .section::before { display: none !important; }
main > .section:last-child::after { display: none !important; }

/* Nav Pill Theme Colors */
.site-nav.nav-cyan { border-color: rgba(79, 209, 255, 0.3); box-shadow: 0 4px 24px rgba(79, 209, 255, 0.1); }
.site-nav.nav-cyan.scrolled { border-color: rgba(79, 209, 255, 0.6); box-shadow: 0 4px 24px rgba(79, 209, 255, 0.15); }

.site-nav.nav-magenta { border-color: rgba(194, 59, 255, 0.3); box-shadow: 0 4px 24px rgba(194, 59, 255, 0.1); }
.site-nav.nav-magenta.scrolled { border-color: rgba(194, 59, 255, 0.6); box-shadow: 0 4px 24px rgba(194, 59, 255, 0.15); }

.site-nav.nav-amber { border-color: rgba(255, 181, 71, 0.3); box-shadow: 0 4px 24px rgba(255, 181, 71, 0.1); }
.site-nav.nav-amber.scrolled { border-color: rgba(255, 181, 71, 0.6); box-shadow: 0 4px 24px rgba(255, 181, 71, 0.15); }

/* Dynamic Hover Effects for Nav Pill */
.site-nav.nav-cyan .nav-link:hover { color: var(--color-cyan); text-shadow: 0 0 12px rgba(79, 209, 255, 0.4); }
.site-nav.nav-magenta .nav-link:hover { color: var(--color-magenta); text-shadow: 0 0 12px rgba(194, 59, 255, 0.4); }
.site-nav.nav-amber .nav-link:hover { color: var(--color-amber); text-shadow: 0 0 12px rgba(255, 181, 71, 0.4); }

.site-nav .btn {
    background: rgba(255,255,255,0.05) !important;
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.2) !important;
    animation: none !important;
    box-shadow: none !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.site-nav.nav-cyan .btn {
    color: var(--color-cyan) !important;
    border-color: rgba(79,209,255,0.3) !important;
    background: rgba(79,209,255,0.1) !important;
}
.site-nav.nav-cyan .btn:hover {
    background: rgba(79,209,255,0.2) !important;
    border-color: var(--color-cyan) !important;
    box-shadow: 0 0 15px rgba(79,209,255,0.4) !important;
    color: var(--color-cyan) !important;
}

.site-nav.nav-magenta .btn {
    color: var(--color-magenta) !important;
    border-color: rgba(194,59,255,0.3) !important;
    background: rgba(194,59,255,0.1) !important;
}
.site-nav.nav-magenta .btn:hover {
    background: rgba(194,59,255,0.2) !important;
    border-color: var(--color-magenta) !important;
    box-shadow: 0 0 15px rgba(194,59,255,0.4) !important;
    color: var(--color-magenta) !important;
}

.site-nav.nav-amber .btn {
    color: var(--color-amber) !important;
    border-color: rgba(255,181,71,0.3) !important;
    background: rgba(255,181,71,0.1) !important;
}
.site-nav.nav-amber .btn:hover {
    background: rgba(255,181,71,0.2) !important;
    border-color: var(--color-amber) !important;
    box-shadow: 0 0 15px rgba(255,181,71,0.4) !important;
    color: var(--color-amber) !important;
}

.site-nav.nav-magenta .btn:hover {
    background: var(--color-magenta) !important;
    border-color: var(--color-magenta) !important;
    box-shadow: 0 0 20px rgba(194, 59, 255, 0.6) !important;
    color: #FFFFFF !important;
}

.site-nav.nav-amber .btn:hover {
    background: var(--color-amber) !important;
    border-color: var(--color-amber) !important;
    box-shadow: 0 0 20px rgba(255, 181, 71, 0.6) !important;
    color: #000000 !important;
}
.project-card.media:hover { border-color: var(--color-magenta); box-shadow: var(--shadow-magenta); }
.project-card.spatial:hover { border-color: var(--color-cyan); box-shadow: var(--shadow-cyan); }
.project-card.product:hover { border-color: var(--color-amber); box-shadow: var(--shadow-amber); }
#atlas { padding: var(--space-16) 0; }

/* Anchor Scroll Offset */
section[id], div[id], footer[id] { scroll-margin-top: 140px; }


/* ==========================================================================
   Authentication Flow
   ========================================================================== */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-20) var(--space-4);
    position: relative;
    overflow: hidden;
}

.auth-card {
    background: rgba(11, 13, 18, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-12);
    width: 100%;
    max-width: 440px;
    position: relative;
    z-index: 10;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.auth-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.auth-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
    letter-spacing: -0.02em;
}

.auth-subtitle {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* SSO Buttons */
.sso-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.sso-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.sso-icon {
    width: 20px;
    height: 20px;
}

/* Auth Divider */
.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: var(--space-6) 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-divider:not(:empty)::before { margin-right: var(--space-4); }
.auth-divider:not(:empty)::after { margin-left: var(--space-4); }

/* Forms */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
}

.form-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    display: flex;
    justify-content: space-between;
}

.form-label a {
    color: var(--color-cyan);
    text-decoration: none;
    transition: color var(--transition-base);
}
.form-label a:hover {
    color: #fff;
}

.form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all var(--transition-base);
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-cyan);
    box-shadow: 0 0 0 1px var(--color-cyan), 0 0 12px rgba(79, 209, 255, 0.2);
    background: rgba(0, 0, 0, 0.8);
}

.auth-submit {
    margin-top: var(--space-2);
    width: 100%;
    padding: var(--space-4);
}

.auth-footer {
    margin-top: var(--space-6);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.auth-footer a {
    color: var(--color-cyan);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-base);
}

.auth-footer a:hover {
    color: #fff;
    text-shadow: 0 0 12px rgba(79, 209, 255, 0.6);
}
.social-icon { color: var(--color-text-muted); transition: all var(--transition-base); }
.social-icon:hover { color: #fff; transform: translateY(-2px); }

/* ============================================================
   Launch Countdown Timer Module
   ============================================================ */
:root { --timer-color: 79, 209, 255; }
.launch-timer-section { text-align:center; padding:var(--space-12) 0; position:relative; }
.launch-timer-section::before { content:''; display:block; width:70%; max-width:500px; height:1px; background:linear-gradient(to right,transparent,rgba(255,255,255,0.08),transparent); margin:0 auto var(--space-10); }
.timer-eyebrow { font-family:var(--font-body); font-size:var(--text-sm); font-weight:700; letter-spacing:0.3em; text-transform:uppercase; color:rgb(var(--timer-color)); margin-bottom:var(--space-8); display:flex; align-items:center; justify-content:center; gap:var(--space-4); }
.timer-eyebrow::before,.timer-eyebrow::after { content:''; display:block; width:48px; height:1px; background:currentColor; opacity:0.4; }
.countdown-grid { display:flex; align-items:center; justify-content:center; gap:var(--space-3); margin-bottom:var(--space-10); flex-wrap:wrap; }
.countdown-block { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:var(--space-5) var(--space-7); min-width:100px; position:relative; backdrop-filter:blur(12px); overflow:hidden; }
.countdown-block::after { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(to right,transparent,rgba(var(--timer-color),0.6),transparent); }
.countdown-digits { font-family:var(--font-display); font-size:3.25rem; font-weight:700; letter-spacing:-0.02em; line-height:1; color:#fff; text-shadow:0 0 20px rgba(var(--timer-color),0.7),0 0 50px rgba(var(--timer-color),0.25); display:block; }
@keyframes digit-flip { 0%{transform:translateY(0) scaleY(1);opacity:1} 40%{transform:translateY(6px) scaleY(0.2);opacity:0.3} 60%{transform:translateY(-6px) scaleY(0.2);opacity:0.3} 100%{transform:translateY(0) scaleY(1);opacity:1} }
.countdown-digits.flipping { animation:digit-flip 0.4s cubic-bezier(0.4,0,0.2,1); }
.countdown-unit { font-family:var(--font-body); font-size:0.6rem; font-weight:700; letter-spacing:0.25em; text-transform:uppercase; color:var(--color-text-muted); }
.countdown-sep { font-family:var(--font-display); font-size:2.5rem; font-weight:300; color:rgba(255,255,255,0.2); margin-bottom:var(--space-6); animation:sep-blink 1s ease-in-out infinite; }
@keyframes sep-blink { 0%,100%{opacity:1} 50%{opacity:0.15} }
.waitlist-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:20px; padding:var(--space-6) var(--space-10); max-width:480px; margin:0 auto; backdrop-filter:blur(16px); position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:var(--space-4); }
.waitlist-card::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(to right,transparent,rgba(var(--timer-color),0.5),transparent); }
.waitlist-subline { font-family:var(--font-body); font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.6; text-align:center; margin:0; }
.waitlist-btn {
  background: rgba(var(--timer-color), 0.12) !important;
  border-color: rgba(var(--timer-color), 0.55) !important;
  color: rgb(var(--timer-color)) !important;
  animation: waitlist-glow 2.5s ease-in-out infinite;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
@keyframes waitlist-glow {
  0%, 100% { box-shadow: 0 0 16px rgba(var(--timer-color), 0.35), 0 0 32px rgba(var(--timer-color), 0.1); }
  50%       { box-shadow: 0 0 28px rgba(var(--timer-color), 0.6),  0 0 56px rgba(var(--timer-color), 0.2); }
}
.waitlist-btn:hover {
  background: rgba(var(--timer-color), 0.22) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 40px rgba(var(--timer-color), 0.7), 0 0 80px rgba(var(--timer-color), 0.25) !important;
}

/* ============================================================
   RESPONSIVE — TABLET  (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .lab-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .project-grid   { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   RESPONSIVE — MOBILE  (≤768px)
   ============================================================ */
@media (max-width: 768px) {

  /* ── Nav ── */
  .nav-mobile-cta { display: block; }
  .site-nav { grid-template-columns: 1fr auto; padding: var(--space-2) var(--space-4); }
  .nav-links {
    display: none;
    position: fixed;
    top: 76px;
    left: var(--space-3);
    right: var(--space-3);
    background: rgba(11,13,18,0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6);
    gap: var(--space-5);
    z-index: 99;
    text-align: center;
  }
  .nav-links.mobile-open { display: flex; }
  .nav-link { font-size: var(--text-base); padding: var(--space-2) 0; }
  .nav-cta { display: none; }
  .hamburger { display: flex !important; }
  .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── Hero ── */
  .hero { padding: calc(var(--space-12) + 72px) var(--space-4) var(--space-8); }
  .hero-tagline { font-size: var(--text-sm); max-width: 100%; }
  .hero-cta { flex-direction: column; align-items: center; gap: var(--space-3); }
  .hero-eyebrow { font-size: 0.7rem; }

  /* ── Stats bar ── */
  .stats-bar { width: 92% !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-3) !important; padding: var(--space-4) !important; }
  .stat-number { font-size: 1.75rem !important; }
  .stat-item:not(:last-child)::after { display: none; }

  /* ── Mission ── */
  .mission-section { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .mission-statement { font-size: var(--text-lg) !important; }

  /* ── Cards ── */
  .lab-card-grid { grid-template-columns: 1fr !important; }
  .project-grid   { grid-template-columns: 1fr !important; }
  .sub-page-grid  { grid-template-columns: 1fr !important; }

  /* ── Section ── */
  .section { padding: var(--space-10) 0; width: 92%; }

  /* ── Countdown timer ── */
  .launch-timer-section { padding: var(--space-8) 0; }
  .countdown-grid { gap: var(--space-2); }
  .countdown-block { min-width: 68px; padding: var(--space-3) var(--space-3); border-radius: 12px; }
  .countdown-digits { font-size: 2rem; }
  .countdown-sep { font-size: 1.5rem; margin-bottom: var(--space-4); }
  .timer-eyebrow { font-size: 0.6rem; letter-spacing: 0.2em; }
  .timer-eyebrow::before, .timer-eyebrow::after { width: 20px; }

  /* ── Waitlist card ── */
  .waitlist-card { padding: var(--space-5) var(--space-4); }

  /* ── Marquee ── */
  .marquee-item { width: 180px; height: 120px; }
  .marquee-item img { height: 120px; }

  /* ── Footer ── */
  .footer-links { flex-wrap: wrap; justify-content: center; gap: var(--space-3) !important; }
  .social-links { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE  (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  .site-nav { width: 94%; }
  .hero { padding: calc(var(--space-10) + 72px) var(--space-3) var(--space-6); }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-number { font-size: 1.4rem !important; }
  .countdown-block { min-width: 56px; padding: var(--space-2) var(--space-2); border-radius: 10px; }
  .countdown-digits { font-size: 1.6rem; }
  .countdown-sep { font-size: 1.2rem; }
  .section { width: 95%; }
  .waitlist-card { padding: var(--space-4) var(--space-3); }
  .lab-card { padding: var(--space-5) !important; }
}

/* ============================================================
   ATLAS Vertical Drift Gallery
   ============================================================ */
.atlas-drift-section {
  overflow: hidden;
  height: 540px;
  padding: 0;
  width: 95%;
  max-width: var(--content-wide);
  margin: 0 auto;
  position: relative;
}
/* Fade overlays — paint on top without clipping hover pop-out */
.atlas-drift-section::before,
.atlas-drift-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 50;
}
.atlas-drift-section::before {
  top: 0;
  background: linear-gradient(to bottom, var(--color-bg, #0b0d12) 0%, transparent 100%);
}
.atlas-drift-section::after {
  bottom: 0;
  background: linear-gradient(to top, var(--color-bg, #0b0d12) 0%, transparent 100%);
}
.atlas-drift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 100%;
  padding: 0 var(--space-8);
}
.drift-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  will-change: transform;
  position: relative;
  z-index: 1;
}
.drift-col:has(.drift-item:hover) { z-index: 20; }
.drift-col--fast { animation: drift-up 20s linear infinite; }
.drift-col--med  { animation: drift-up 28s linear infinite; margin-top: -70px; }
.drift-col--slow { animation: drift-up 36s linear infinite; margin-top: -130px; }
@keyframes drift-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.drift-col:hover { animation-play-state: paused; }
.drift-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(79,209,255,0.06);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease, box-shadow 0.35s ease;
  z-index: 1;
}
.drift-item:hover {
  transform: scale(1.12) translateY(-8px);
  border: 2px solid rgba(79,209,255,0.85);
  box-shadow: 0 0 20px rgba(79,209,255,0.5), 0 0 50px rgba(79,209,255,0.25), 0 0 90px rgba(79,209,255,0.1);
  z-index: 20;
}
.drift-item img {
  width: 100%;
  height: 175px;
  object-fit: cover;
  display: block;
  filter: brightness(0.8) saturate(1.1);
  transition: transform 0.5s ease, filter 0.5s ease;
}
.drift-item:hover img {
  transform: scale(1.06);
  filter: brightness(1.1) saturate(1.2);
}
.drift-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(79,209,255,0.8);
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.drift-item:hover .drift-label { opacity: 1; }

/* Mobile: collapse to a fixed-height single strip */
@media (max-width: 768px) {
  .atlas-drift-section { height: 320px; }
  .atlas-drift-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 var(--space-2); }
  .drift-item img { height: 120px; }
}
@media (max-width: 480px) {
  .atlas-drift-section { height: 240px; }
  .drift-item img { height: 90px; }
}