*{box-sizing:border-box}
:root{--f:'Roboto Condensed',sans-serif;--p:#A855F7;--pk:#EC4899;--bl:#3B82F6;--gn:#10B981;--am:#F59E0B;--cy:#06B6D4}
html{overflow-x:hidden}
body{margin:0;background:#050507;font-family:var(--f);color:#fff;overflow-x:hidden}

@keyframes l3-fade-up{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
@keyframes l3-grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes l3-glow{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes l3-flow{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}
@keyframes l3-pulse{0%,100%{border-color:rgba(168,85,247,.12)}25%{border-color:rgba(236,72,153,.18)}50%{border-color:rgba(59,130,246,.18)}75%{border-color:rgba(16,185,129,.18)}}
@keyframes l3-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@keyframes l3-heartbeat{0%,100%{transform:scale(1)}4%{transform:scale(1.015)}8%{transform:scale(1)}12%{transform:scale(1.01)}16%{transform:scale(1)}}
@keyframes l3-shimmer{0%{left:-100%}100%{left:200%}}

.l3-r{opacity:1;transform:none}
.l3-r.l3-v{opacity:1;transform:none}
.l3-d1,.l3-d2,.l3-d3,.l3-d4,.l3-d5{}

.l3-card{transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease}
.l3-card:hover{transform:translateY(-5px);box-shadow:0 16px 48px rgba(168,85,247,.08);border-color:rgba(168,85,247,.18)!important}

.l3-cta{position:relative;overflow:hidden;transition:all .3s;cursor:pointer;text-decoration:none;display:inline-block}
.l3-cta::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transition:left .6s}
.l3-cta:hover::after{left:200%}
.l3-cta:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(168,85,247,.35)}

.l3-ghost{transition:all .3s;cursor:pointer;text-decoration:none;display:inline-block}
.l3-ghost:hover{border-color:rgba(168,85,247,.4)!important;color:#C084FC!important;box-shadow:0 0 20px rgba(168,85,247,.06)}

.l3-flow-line{position:relative;overflow:hidden}
.l3-flow-line::after{content:'';position:absolute;top:0;left:0;width:25%;height:100%;background:linear-gradient(90deg,transparent,rgba(168,85,247,.35),transparent);animation:l3-flow 3s ease-in-out infinite}

/* Horizontal scroll galleries */
.l3-scroll{display:flex;gap:14px;overflow-x:auto;padding:0 24px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.l3-scroll::-webkit-scrollbar{display:none}
.l3-scroll-card{flex-shrink:0;border-radius:14px;overflow:hidden;position:relative;scroll-snap-align:center;border:2px solid transparent;transition:border-color .3s,transform .3s,box-shadow .3s;background:#111;animation:l3-heartbeat 5s ease-in-out infinite,l3-pulse 6s ease-in-out infinite}
.l3-scroll-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 40px rgba(168,85,247,.12);border-color:rgba(168,85,247,.3)}

/* Hero Genesis icon animations */
@keyframes l3-hero-ring{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes l3-hero-ring-r{0%{transform:rotate(0deg)}100%{transform:rotate(-360deg)}}
@keyframes l3-hero-breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@keyframes l3-hero-spark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.3)}}
@keyframes l3-hero-aura{0%,100%{transform:scale(.9);opacity:.3}50%{transform:scale(1.15);opacity:.08}}
@keyframes l3-hero-aura2{0%,100%{transform:scale(.85);opacity:.2}50%{transform:scale(1.2);opacity:.05}}
@keyframes l3-hero-orbit{0%{transform:rotate(0deg) translateX(90px) rotate(0deg)}100%{transform:rotate(360deg) translateX(90px) rotate(-360deg)}}
@keyframes l3-hero-orbit2{0%{transform:rotate(0deg) translateX(110px) rotate(0deg)}100%{transform:rotate(-360deg) translateX(110px) rotate(360deg)}}
@keyframes l3-hero-emerge{0%{opacity:0;transform:scale(.7) translateY(30px)}100%{opacity:1;transform:scale(1) translateY(0)}}

/* Character alive animations */
@keyframes l3-heartbeat{0%,100%{transform:scale(1)}4%{transform:scale(1.02)}8%{transform:scale(1)}12%{transform:scale(1.015)}16%{transform:scale(1)}}
@keyframes l3-border-glow{0%,100%{border-color:rgba(168,85,247,.12);box-shadow:0 0 15px rgba(168,85,247,.04)}25%{border-color:rgba(236,72,153,.2);box-shadow:0 0 20px rgba(236,72,153,.06)}50%{border-color:rgba(59,130,246,.2);box-shadow:0 0 20px rgba(59,130,246,.06)}75%{border-color:rgba(16,185,129,.2);box-shadow:0 0 20px rgba(16,185,129,.06)}}
@keyframes l3-gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes l3-shimmer-sweep{0%{transform:translateX(-100%) rotate(25deg)}100%{transform:translateX(200%) rotate(25deg)}}
@keyframes l3-dna-pulse{0%,100%{opacity:.3;transform:scale(.95)}50%{opacity:.6;transform:scale(1.05)}}
.l3-alive{animation:l3-border-glow 6s ease-in-out infinite,l3-heartbeat 5s ease-in-out infinite;position:relative;overflow:hidden}
.l3-alive::after{content:'';position:absolute;top:-50%;left:-50%;width:50%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.02),transparent);animation:l3-shimmer-sweep 5s ease-in-out infinite;pointer-events:none}

/* Pipeline hero comparison */
@keyframes l3-count-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes l3-pipe-glow{0%,100%{box-shadow:0 0 20px rgba(168,85,247,.05)}50%{box-shadow:0 0 40px rgba(168,85,247,.15)}}
@keyframes l3-multiply{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
.l3-pipe-hero{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin-bottom:36px}
.l3-pipe-stat{text-align:center;padding:24px 20px;border-radius:16px;position:relative;overflow:hidden}
.l3-pipe-vs{font-size:14px;font-weight:800;color:#555;letter-spacing:3px;text-transform:uppercase}
.l3-social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.l3-social-col-title{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;text-align:center}
.l3-post-pill{font-size:9px;padding:4px 10px;border-radius:6px;font-weight:600;text-align:center;margin-bottom:4px}
.l3-math-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px}
@media(max-width:600px){.l3-pipe-hero{grid-template-columns:1fr!important;gap:12px!important}.l3-pipe-vs{padding:4px 0!important}.l3-social-grid{grid-template-columns:1fr!important}}

/* Burger menu */
.l3-burger{display:none;background:none;border:none;cursor:pointer;padding:8px;z-index:200}
.l3-burger span{display:block;width:22px;height:2px;background:#999;margin:5px 0;transition:all .3s}
.l3-burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.l3-burger.open span:nth-child(2){opacity:0}
.l3-burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.l3-mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:rgba(5,5,7,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:40px 24px}
.l3-mobile-menu.open{display:flex}
.l3-mobile-menu a{font-family:var(--f);font-size:18px!important;color:#ccc!important;text-decoration:none;font-weight:600}
.l3-mobile-menu a:hover{color:#fff!important}
.l3-lang-mobile{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;justify-content:center}
@media(max-width:900px){.l3-burger{display:block}}
@media(max-width:767px){.l3-canvas-wrap{display:none!important}}
/* Responsive */
@media(max-width:900px){
.l3-grid-2{grid-template-columns:1fr!important}.l3-grid-2-keep{grid-template-columns:1fr 1fr!important}
.l3-grid-3{grid-template-columns:1fr 1fr!important}
.l3-grid-4{grid-template-columns:1fr 1fr!important}
.l3-pipe-grid{grid-template-columns:1fr 1fr!important}
.l3-hero-title{font-size:38px!important}
.l3-hero-sub{font-size:15px!important}
.l3-sect-t{font-size:28px!important}
.l3-hero-btns{flex-direction:column!important;align-items:center!important}
.l3-nav-links{display:none!important}
.l3-stats-bar{gap:16px!important;flex-wrap:wrap!important}
.l3-maeva-inner{flex-direction:column!important;text-align:center!important}
.l3-scroll{padding:0 16px 12px!important}
}
.l3-import-flow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;max-width:800px;margin:0 auto}
@media(max-width:700px){
.l3-import-arrow{display:none!important}
.l3-import-card{flex:1 1 100%!important;max-width:100%!important}
}
@media(max-width:600px){
.l3-hero-title{font-size:32px!important}
.l3-sect-t{font-size:24px!important}
.l3-grid-2{grid-template-columns:1fr!important}.l3-grid-2-keep{grid-template-columns:1fr 1fr!important}
.l3-grid-3{grid-template-columns:1fr 1fr!important}
.l3-grid-4{grid-template-columns:1fr 1fr!important}
.l3-pipe-grid{grid-template-columns:1fr 1fr!important}
.l3-stats-bar{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important}
.l3-scroll-card{width:150px!important;height:240px!important}
section{padding:40px 16px!important}
.l3-card-banner-text{font-size:16px!important}
.l3-tool-banner{padding:20px 12px!important}
.l3-tool-icon{font-size:28px!important;margin-bottom:6px!important}
}
@media(max-width:400px){
.l3-hero-title{font-size:28px!important}
.l3-sect-t{font-size:22px!important}
.l3-grid-3{grid-template-columns:1fr 1fr!important}
.l3-grid-4{grid-template-columns:1fr 1fr!important}
.l3-card-banner-text{font-size:14px!important}
.l3-tool-banner{padding:18px 10px!important}
.l3-tool-icon{font-size:24px!important;margin-bottom:4px!important}
.l3-pipe-grid{grid-template-columns:1fr!important}
}