body[data-system="home"] { --show-pink:#f24b9b; --show-green:#bdff54; --show-ink:#07080b; --show-white:#f4f4f6; background:#08090c; color:var(--show-white); }
body[data-system="home"] #app { min-height:100vh; }
body[data-system="home"] .showcase-root { min-height:100vh; overflow:hidden; background:#08090c; }
body[data-system="home"] .showcase-nav { position:relative; z-index:5; height:76px; max-width:1480px; margin:auto; padding:0 44px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #ffffff18; }
body[data-system="home"] .showcase-logo { display:flex; align-items:center; gap:10px; color:#f8f8fa; text-decoration:none; font-size:19px; font-weight:800; letter-spacing:-.05em; }
body[data-system="home"] .showcase-logo em { color:var(--show-pink); font-style:normal; }
body[data-system="home"] .showcase-logo small { display:block; margin-top:1px; color:#a8a6ac; font-size:9px; font-weight:500; letter-spacing:.04em; }
body[data-system="home"] .showcase-logo-mark { display:grid; place-items:center; width:39px; height:39px; border:1px solid #f24b9b91; border-radius:13px; color:var(--show-pink); background:#f24b9b16; }
body[data-system="home"] .showcase-nav nav { display:flex; gap:36px; }
body[data-system="home"] .showcase-nav nav a,body[data-system="home"] .showcase-footer a { color:#ceccd2; font-size:12px; text-decoration:none; transition:color .2s; }
body[data-system="home"] .showcase-nav nav a:hover,body[data-system="home"] .showcase-footer a:hover { color:var(--show-pink); }
body[data-system="home"] .showcase-nav-cta { display:flex; gap:17px; align-items:center; padding:11px 16px; border-radius:7px; color:#111!important; background:var(--show-green); font-size:11px; font-weight:800; text-decoration:none; transition:transform .2s,box-shadow .2s; }
body[data-system="home"] .showcase-nav-cta:hover { transform:translateY(-2px); box-shadow:0 7px 25px #bdff5440; }
body[data-system="home"] .showcase-root main { position:relative; max-width:1480px; margin:auto; padding:0 44px; }
body[data-system="home"] .showcase-hero { min-height:625px; position:relative; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; isolation:isolate; overflow:hidden; margin:0 -44px; padding:50px 88px 75px; border-bottom:1px solid #ffffff19; background:linear-gradient(90deg,#07080bf5 0%,#07080beb 38%,#07080b4d 72%,#07080bc7 100%),linear-gradient(0deg,#08090c 0%,transparent 27%),url('./assets/sonoran-night.webp') center 46%/cover; }
body[data-system="home"] .showcase-hero:before { content:''; position:absolute; z-index:-1; inset:0; opacity:.24; background:repeating-linear-gradient(0deg,transparent 0 48px,#f24b9b0a 49px 50px),repeating-linear-gradient(90deg,transparent 0 48px,#f24b9b0a 49px 50px); mask-image:linear-gradient(90deg,#000,transparent 85%); }
body[data-system="home"] .hero-copy { position:relative; z-index:2; max-width:650px; padding-bottom:12px; }
body[data-system="home"] .showcase-kicker { display:inline-flex; align-items:center; gap:10px; color:#c7c4cb; font-size:10px; letter-spacing:.2em; font-weight:700; }
body[data-system="home"] .live-mark { width:7px; height:7px; border-radius:50%; background:var(--show-green); box-shadow:0 0 10px #bdff54a1; }
body[data-system="home"] .showcase-hero h1 { max-width:710px; margin:21px 0 16px; font-size:clamp(55px,6.5vw,94px); line-height:.94; letter-spacing:-.075em; }
body[data-system="home"] .showcase-hero h1 em,body[data-system="home"] .logo-lab h2 em { color:var(--show-pink); font-style:normal; }
body[data-system="home"] .showcase-hero p { max-width:470px; margin:0 0 26px; color:#d0ced4; font-size:16px; line-height:1.65; }
body[data-system="home"] .showcase-hero-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:25px; min-width:205px; padding:12px 13px 12px 17px; border-radius:7px; color:#11140c; background:var(--show-green); text-decoration:none; font-size:12px; font-weight:850; box-shadow:0 0 30px #bdff5422; transition:transform .2s,box-shadow .2s; }
body[data-system="home"] .showcase-hero-cta:hover { transform:translateY(-2px); box-shadow:0 7px 32px #bdff5452; }
body[data-system="home"] .showcase-hero-cta span { display:grid; place-items:center; width:25px; height:25px; border-radius:5px; color:#efffdb; background:#151812; font-size:16px; }
body[data-system="home"] .hero-proof { display:flex; align-items:center; gap:12px; margin-top:39px; color:#b7b3bd; font-size:10px; line-height:1.5; }
body[data-system="home"] .hero-proof strong { color:#f6f4f7; font-size:11px; }
body[data-system="home"] .proof-avatars { display:flex; padding-left:5px; }
body[data-system="home"] .proof-avatars b { display:grid; place-items:center; width:28px; height:28px; margin-left:-5px; border:1px solid #120d13; border-radius:50%; color:#fff; background:#9f2c65; font-size:9px; }
body[data-system="home"] .proof-avatars b:nth-child(2) { background:#46424c; }
body[data-system="home"] .proof-avatars b:nth-child(3) { color:#191c12; background:var(--show-green); }
body[data-system="home"] .hero-art { position:relative; min-height:480px; display:grid; place-items:center; isolation:isolate; }
body[data-system="home"] .hero-rift { position:absolute; z-index:-2; width:min(90%,520px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#f24b9b47 0,#f24b9b17 28%,#f24b9b00 66%); filter:blur(8px); animation:rift-breathe 5s ease-in-out infinite alternate; }
body[data-system="home"] .hero-orbit { position:absolute; width:390px; height:465px; border:1px solid #f59bc132; border-radius:50%; transform:rotate(-27deg); box-shadow:0 0 22px #f24b9b13,inset 0 0 25px #f24b9b0e; }
body[data-system="home"] .orbit-two { width:310px; height:410px; transform:rotate(37deg); border-color:#bdff542c; }
body[data-system="home"] .hero-prize { position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; color:#fff; filter:drop-shadow(0 0 12px #f24b9b9c) drop-shadow(0 0 48px #f24b9b6b); animation:prize-float 5s ease-in-out infinite; }
body[data-system="home"] .hero-prize svg { width:150px; height:150px; stroke-width:1.1; color:#fff; }
body[data-system="home"] .hero-prize span { color:#f3cedf; font-size:11px; line-height:1.6; letter-spacing:.36em; text-align:center; }
body[data-system="home"] .hero-spark { position:absolute; color:var(--show-green); font-size:28px; filter:drop-shadow(0 0 10px #bdff54); animation:spark-pulse 3.4s ease-in-out infinite; }
body[data-system="home"] .spark-one { top:15%; right:19%; }
body[data-system="home"] .spark-two { bottom:20%; left:16%; color:var(--show-pink); animation-delay:1s; }
body[data-system="home"] .hero-art-label { position:absolute; right:-3%; bottom:16%; display:grid; gap:5px; padding:13px 16px; border-left:2px solid var(--show-green); background:#0a090dc9; backdrop-filter:blur(8px); }
body[data-system="home"] .hero-art-label b { font-size:11px; letter-spacing:.13em; }
body[data-system="home"] .hero-art-label span { color:#ada9b2; font-size:10px; }
body[data-system="home"] .hero-bottomline { position:absolute; right:45px; bottom:0; left:45px; display:flex; align-items:center; justify-content:center; gap:18px; height:45px; color:#c0bbc5; font-size:8px; letter-spacing:.19em; }
body[data-system="home"] .hero-bottomline i { width:4px; height:4px; border-radius:50%; background:var(--show-pink); }
body[data-system="home"] .experience-section { padding:94px 0 101px; }
body[data-system="home"] .section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:31px; }
body[data-system="home"] .section-heading h2,body[data-system="home"] .logo-lab h2,body[data-system="home"] .final-invite h2 { margin:12px 0 0; font-size:clamp(39px,4.3vw,60px); line-height:1; letter-spacing:-.065em; }
body[data-system="home"] .section-heading>p { max-width:340px; margin:0 0 5px; color:#aba8b2; font-size:13px; line-height:1.65; }
body[data-system="home"] .showcase-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
body[data-system="home"] .showcase-card { overflow:hidden; border:1px solid #38363e; border-radius:15px; background:linear-gradient(160deg,#17171c,#111115); box-shadow:0 18px 50px #0303058a; transition:transform .25s,border-color .25s,box-shadow .25s; }
body[data-system="home"] .showcase-card:hover { transform:translateY(-6px); border-color:#a64070; box-shadow:0 27px 56px #030305b5,0 0 24px #f24b9b17; }
body[data-system="home"] .showcase-preview { position:relative; height:300px; margin:10px 10px 0; display:flex; align-items:flex-start; justify-content:center; overflow:hidden; border:1px solid #39373f; border-radius:10px; background:#09090d; text-decoration:none; }
body[data-system="home"] .player-preview { background:radial-gradient(circle at 50% 40%,#842b57 0%,#26131e 48%,#09090d 82%); }
body[data-system="home"] .player-preview:before { position:absolute; content:''; width:280px; height:280px; top:20px; border-radius:50%; background:#f34b981f; filter:blur(35px); }
body[data-system="home"] .player-preview img { position:relative; display:block; width:164px; height:auto; margin-top:-6px; border:5px solid #050509; border-radius:21px; box-shadow:0 14px 36px #000c; transition:transform .3s; }
body[data-system="home"] .showcase-preview:hover img { transform:translateY(-7px) rotate(-1deg); }
body[data-system="home"] .preview-flag { position:absolute; left:12px; bottom:12px; padding:7px 9px; border:1px solid #ffffff35; border-radius:5px; color:#f0edf1; background:#0b090cbb; backdrop-filter:blur(8px); font-size:8px; letter-spacing:.12em; }
body[data-system="home"] .preview-open { position:absolute; right:10px; top:10px; padding:8px 10px; border-radius:5px; color:#11140c; background:var(--show-green); font-size:9px; font-weight:800; opacity:0; transform:translateY(-3px); transition:.2s; }
body[data-system="home"] .showcase-preview:hover .preview-open,body[data-system="home"] .showcase-preview:focus-visible .preview-open { opacity:1; transform:none; }
body[data-system="home"] .showcase-business .showcase-preview { align-items:stretch; background:radial-gradient(ellipse at 70% 35%,#f24b9b2a,transparent 50%),#08090c; }
body[data-system="home"] .showcase-admin .showcase-preview { align-items:stretch; background:radial-gradient(ellipse at 70% 20%,#f24b9b2a,transparent 50%),#08090c; }
body[data-system="home"] .showcase-preview>img { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .35s; }
body[data-system="home"] .business-dashboard-shot,body[data-system="home"] .admin-dashboard-shot { object-position:top center; }
body[data-system="home"] .showcase-copy { padding:18px 17px 18px; }
body[data-system="home"] .experience-title { display:flex; align-items:center; gap:8px; color:#9e9aa4; font-size:8px; letter-spacing:.13em; }
body[data-system="home"] .role-icon { display:grid; place-items:center; width:30px; height:30px; border:1px solid #f24b9b52; border-radius:8px; color:var(--show-pink); background:#f24b9b12; }
body[data-system="home"] .showcase-copy h3 { margin:12px 0 7px; font-size:24px; letter-spacing:-.045em; }
body[data-system="home"] .showcase-copy p { min-height:40px; margin:0; color:#b8b5be; font-size:11px; line-height:1.6; }
body[data-system="home"] .showcase-tags { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 15px; }
body[data-system="home"] .showcase-tags span { padding:5px 8px; border:1px solid #424047; border-radius:5px; color:#d5d2d9; font-size:8px; }
body[data-system="home"] .showcase-link { display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid #ffffff19; color:#f17aae; text-decoration:none; font-size:11px; font-weight:750; }
body[data-system="home"] .showcase-link b { color:var(--show-green); font-size:17px; }
body[data-system="home"] .logo-lab { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:45px; padding:74px 0 90px; border-top:1px solid #ffffff19; }
body[data-system="home"] .logo-lab h2 { margin:14px 0; font-size:clamp(38px,4.2vw,58px); }
body[data-system="home"] .logo-lab-copy>p { max-width:365px; color:#afacb5; font-size:13px; line-height:1.7; }
body[data-system="home"] .logo-selected { display:flex; align-items:center; gap:13px; max-width:410px; min-height:75px; margin-top:25px; padding:12px 14px; border:1px solid #f24b9b63; border-radius:9px; background:linear-gradient(120deg,#f24b9b15,#fff 150%); }
body[data-system="home"] .logo-selected-mark { display:grid; place-items:center; width:45px; height:45px; flex:0 0 auto; border-radius:10px; color:var(--show-pink); background:#f24b9b19; }
body[data-system="home"] .logo-selected b,body[data-system="home"] .logo-selected small { display:block; }
body[data-system="home"] .logo-selected b { margin-bottom:4px; font-size:12px; }
body[data-system="home"] .logo-selected small { color:#b6b1bc; font-size:10px; line-height:1.4; }
body[data-system="home"] .logo-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
body[data-system="home"] .logo-option { position:relative; min-height:116px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px solid #38363e; border-radius:10px; color:#eeeaf0; background:#121216; cursor:pointer; transition:transform .18s,border-color .18s,background .18s; }
body[data-system="home"] .logo-option:hover { transform:translateY(-3px); border-color:#d65091; background:#1c151c; }
body[data-system="home"] .logo-option.selected { border-color:var(--show-pink); background:linear-gradient(145deg,#f24b9b26,#171419); box-shadow:inset 0 0 0 1px #f24b9b35,0 6px 22px #f24b9b14; }
body[data-system="home"] .logo-option-mark { color:#f5c3db; transition:color .18s,filter .18s; }
body[data-system="home"] .logo-option.selected .logo-option-mark,body[data-system="home"] .logo-option:hover .logo-option-mark { color:var(--show-pink); filter:drop-shadow(0 0 8px #f24b9b5c); }
body[data-system="home"] .logo-option-index { position:absolute; top:8px; left:9px; color:#77737d; font-size:8px; }
body[data-system="home"] .logo-option>b { font-size:9px; font-weight:650; text-align:center; }
body[data-system="home"] .logo-option:focus-visible,body[data-system="home"] a:focus-visible { outline:2px solid var(--show-green); outline-offset:3px; }
body[data-system="home"] .final-invite { position:relative; min-height:265px; display:flex; align-items:center; gap:24px; overflow:hidden; margin:0 0 68px; padding:34px 52px; border:1px solid #503042; border-radius:13px; background:radial-gradient(ellipse at 80% 10%,#f24b9b30,transparent 37%),linear-gradient(115deg,#171219,#0e0d11 75%); }
body[data-system="home"] .final-symbol { display:grid; place-items:center; width:75px; height:75px; flex:0 0 auto; border:1px solid #f24b9b70; border-radius:18px; color:var(--show-pink); background:#f24b9b15; box-shadow:0 0 32px #f24b9b24; }
body[data-system="home"] .final-invite h2 { margin-top:8px; font-size:39px; }
body[data-system="home"] .final-invite>.showcase-hero-cta { position:relative; z-index:1; margin-left:auto; }
body[data-system="home"] .invite-art { position:absolute; width:280px; height:280px; right:16%; top:-100px; border:1px solid #f24b9b35; border-radius:50%; box-shadow:0 0 0 35px #f24b9b08,0 0 0 70px #f24b9b06; }
body[data-system="home"] .showcase-footer { display:flex; justify-content:space-between; gap:16px; padding:19px 0 25px; border-top:1px solid #ffffff1b; color:#a9a5af; font-size:8px; letter-spacing:.12em; }
@keyframes prize-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes rift-breathe { from{transform:scale(.95);opacity:.7} to{transform:scale(1.07);opacity:1} }
@keyframes spark-pulse { 0%,100%{transform:scale(.8) rotate(-12deg);opacity:.6} 50%{transform:scale(1.1) rotate(8deg);opacity:1} }
@media (prefers-reduced-motion:reduce) { body[data-system="home"] *,body[data-system="home"] *:before,body[data-system="home"] *:after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }
@media(max-width:1050px) { body[data-system="home"] .showcase-hero { min-height:570px; padding:45px 52px 65px; } body[data-system="home"] .showcase-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } body[data-system="home"] .showcase-card:last-child { grid-column:1/-1; } body[data-system="home"] .showcase-card:last-child .showcase-preview { height:335px; } body[data-system="home"] .logo-lab { grid-template-columns:1fr; gap:30px; } body[data-system="home"] .logo-lab-copy { display:grid; grid-template-columns:1fr 1fr; align-items:center; column-gap:28px; } body[data-system="home"] .logo-lab-copy .showcase-kicker,body[data-system="home"] .logo-lab-copy h2 { grid-column:1; } body[data-system="home"] .logo-lab-copy>p { grid-column:2; grid-row:1/3; } body[data-system="home"] .logo-selected { grid-column:1/-1; } }
@media(max-width:680px) { body[data-system="home"] .showcase-nav { height:64px; padding:0 15px; } body[data-system="home"] .showcase-nav nav { display:none; } body[data-system="home"] .showcase-logo { font-size:17px; } body[data-system="home"] .showcase-nav-cta { padding:9px 10px; gap:8px; font-size:9px; } body[data-system="home"] .showcase-root main { padding:0 15px; } body[data-system="home"] .showcase-hero { min-height:680px; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px; margin:0 -15px; padding:50px 24px 53px; background-position:55% center; } body[data-system="home"] .showcase-hero h1 { max-width:500px; margin:17px 0 13px; font-size:clamp(48px,12vw,68px); } body[data-system="home"] .showcase-hero p { max-width:430px; font-size:13px; } body[data-system="home"] .hero-proof { margin-top:22px; } body[data-system="home"] .hero-art { position:absolute; z-index:-1; right:-15%; bottom:21px; width:95%; min-height:300px; opacity:.82; } body[data-system="home"] .hero-prize svg { width:93px;height:93px; } body[data-system="home"] .hero-orbit { width:245px;height:295px; } body[data-system="home"] .orbit-two { width:200px;height:270px; } body[data-system="home"] .hero-art-label { right:8%; bottom:10%; } body[data-system="home"] .hero-spark { font-size:19px; } body[data-system="home"] .hero-bottomline { right:15px;left:15px;height:38px;gap:7px;font-size:6px;letter-spacing:.07em;white-space:nowrap; } body[data-system="home"] .experience-section { padding:67px 0 69px; } body[data-system="home"] .section-heading { display:block; margin-bottom:23px; } body[data-system="home"] .section-heading h2 { font-size:41px; } body[data-system="home"] .section-heading>p { margin:14px 0 0;font-size:12px; } body[data-system="home"] .showcase-grid { grid-template-columns:1fr; gap:13px; } body[data-system="home"] .showcase-card:last-child { grid-column:auto; } body[data-system="home"] .showcase-preview,body[data-system="home"] .showcase-card:last-child .showcase-preview { height:270px; } body[data-system="home"] .showcase-copy h3 { font-size:22px; } body[data-system="home"] .logo-lab { padding:59px 0 66px; gap:24px; } body[data-system="home"] .logo-lab-copy { display:block; } body[data-system="home"] .logo-lab h2 { font-size:42px; } body[data-system="home"] .logo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } body[data-system="home"] .logo-option { min-height:105px; } body[data-system="home"] .final-invite { min-height:300px; align-items:flex-start; flex-direction:column; gap:14px; margin-bottom:48px; padding:24px; } body[data-system="home"] .final-symbol { width:55px;height:55px;border-radius:13px; } body[data-system="home"] .final-invite h2 { font-size:35px; } body[data-system="home"] .final-invite>.showcase-hero-cta { margin:4px 0 0; } body[data-system="home"] .invite-art { right:-130px;top:-30px; } body[data-system="home"] .showcase-footer { flex-direction:column;gap:11px;font-size:7px; } }