.home-hero-container { padding-top:0; padding-bottom:0; }
.home-hero-container + .container { margin-top:2.5rem; }
.home-hero-1 { position:relative; width:100%; padding-top:5px; color:#fff; }
.home-hero-1::before { content:''; position:absolute; top:0; right:5px; left:5px; height:2px; background:linear-gradient(90deg,transparent 0%,rgba(97,220,255,.55) 5%,#61dcff 50%,rgba(97,220,255,.55) 95%,transparent 100%); box-shadow:0 0 8px rgba(97,220,255,.9); pointer-events:none; }
.home-hero-1 .home-hero-inner { width:100%; min-height:575px; margin:auto; padding:44px 40px; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,400px); gap:35px; align-items:center; overflow:hidden; border-radius:0 0 26px 26px; background:#070623 url('../assets/home-concept/backswirl.webp') center/cover no-repeat; }
.home-hero-1 .home-hero-copy { min-width:0; padding-top:24px; }
.home-hero-1 .home-hero-intro { margin:22px 0 34px; font-size:43px; line-height:1.15; letter-spacing:-1.2px; }
.home-hero-1 h1 { min-height:94px; max-width:730px; margin:0; display:flex; align-items:center; gap:10px; color:#fff; font-size:clamp(25px,2.65vw,38px); line-height:1.22; letter-spacing:-1px; }
.home-hero-1 .home-bracket { color:#c4e5ff; font-size:1.25em; font-weight:600; }
.home-hero-1 #service-title { position:relative; top:4px; display:inline-block; min-width:0; font-weight:600; }
.home-hero-1 .letter { display:inline-block; white-space:pre; }
.home-hero-1 .letter.falling { color:#9fe5ff; font-size:1em; text-shadow:none; }
.home-hero-1 .home-hero-description { min-height:48px; max-width:470px; margin:10px 0 23px; color:#e1e5f4; font-size:16px; line-height:1.7; }
.home-hero-1 .home-hero-action { width:218px; min-height:43px; display:inline-flex; align-items:center; justify-content:center; }
.home-hero-1 .play-panel { position:relative; width:100%; align-self:stretch; min-height:475px; overflow:hidden; border-radius:24px; padding:0; background:rgb(48 8 65 / 50%); backdrop-filter:blur(5px); -webkit-mask:radial-gradient(circle 29px at 50% 100%,transparent 98%,#000 100%); mask:radial-gradient(circle 29px at 50% 100%,transparent 98%,#000 100%); }
.home-hero-1 .play-selector { position:absolute; z-index:5; top:0; right:18px; left:18px; height:49px; display:flex; align-items:end; justify-content:center; gap:6px; border-bottom:1px solid rgba(205,235,255,.2); }
.home-hero-1 .play-selector button { min-height:38px; padding:8px 9px 7px; border:0; border-bottom:2px solid transparent; background:transparent; color:#aab4ca; font-size:10px; font-weight:600; letter-spacing:.02em; white-space:nowrap; transition:color .2s ease,border-color .2s ease,text-shadow .2s ease; }
.home-hero-1 .play-selector button:hover { color:#fff; text-shadow:0 0 12px #a4e6ff; }
.home-hero-1 .play-selector button[aria-selected="true"] { border-bottom-color:#72d9ff; color:#fff; }
.home-hero-1 .shape-widget,.home-hero-1 .shape-dots { position:absolute; inset:0; width:100%; height:100%; }
.home-hero-1 .floating-dot { position:absolute; left:0; top:0; border-radius:50%; background:#fff; box-shadow:0 0 5px #ffffff70; pointer-events:none; will-change:transform,opacity; transition:width .65s ease,height .65s ease; }
.home-hero-1 .ambient-dot { transition:opacity .65s ease; }
.home-hero-1 .shape-button { position:absolute; z-index:1; bottom:77px; left:50%; width:39px; height:39px; padding:0; border:1px solid #c4efff; border-radius:50%; transform:translateX(-50%); background:radial-gradient(circle at 32% 18%,#d5f6ff 0%,#55bdf1 24%,#087cbd 60%,#003d86 100%); box-shadow:0 3px 0 #003964,0 0 20px #81c5f760,inset 0 2px 5px #fff; animation:home-hero-button-pulse 2.4s ease-in-out infinite; transition:filter .2s ease,box-shadow .2s ease,opacity .2s ease; }
.home-hero-1 .shape-button::before,.home-hero-1 .shape-button::after { content:''; position:absolute; inset:-6px; border:1px solid #a3dcff80; border-radius:50%; pointer-events:none; }
.home-hero-1 .shape-button::after { opacity:0; }
.home-hero-1 .shape-button:not(:disabled):hover { filter:brightness(1.28); box-shadow:0 3px 0 #003964,0 0 30px #a8e9ff,inset 0 2px 5px #fff; }
.home-hero-1 .shape-button.is-pulsing::after { animation:home-hero-click-pulse .75s ease-out; }
.home-hero-1 .shape-button:active { transform:translateX(-50%) scale(.9); }
.home-hero-1 .shape-button:disabled { cursor:not-allowed; opacity:.55; filter:grayscale(1) brightness(.85); box-shadow:0 2px 0 #293642,0 0 8px #9aa5ad35,inset 0 2px 5px #fff8; animation:none; }
.home-hero-1 .shape-hint { position:absolute; right:0; bottom:51px; left:0; margin:0; color:#e0f0ff; text-align:center; font-size:11px; letter-spacing:1px; pointer-events:none; }
.home-hero-1 .shape-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.home-hero-1 .invaders-widget { position:absolute; inset:0; }
.home-hero-1 .invaders-widget[hidden] { display:none; }
.home-hero-1 .invaders-canvas { display:block; width:100%; height:100%; touch-action:none; }
.home-hero-1 .invaders-controls { position:absolute; z-index:2; bottom:37px; left:50%; display:flex; align-items:center; justify-content:center; gap:9px; transform:translateX(-50%); }
.home-hero-1 .invaders-controls button { position:relative; width:62px; height:47px; overflow:hidden; border:1px solid #bcecff; border-radius:12px 5px 5px 12px; background:linear-gradient(145deg,rgba(27,143,202,.92),rgba(1,38,88,.96)); color:#fff; box-shadow:0 4px 0 #001a3c,0 0 17px #4ecbff55,inset 0 1px 0 #fff8; font-size:0; line-height:1; touch-action:none; user-select:none; transition:filter .15s ease,box-shadow .15s ease,transform .15s ease; }
.home-hero-1 .invaders-controls button:last-child { border-radius:5px 12px 12px 5px; }
.home-hero-1 .invaders-controls button::before { content:''; position:absolute; top:0; left:-65%; width:45%; height:100%; background:linear-gradient(90deg,transparent,#fff7,transparent); transform:skewX(-18deg); transition:left .35s ease; }
.home-hero-1 .invaders-controls button::after { content:''; position:absolute; top:50%; left:50%; width:14px; height:14px; border-top:5px solid #fff; border-right:5px solid #fff; filter:drop-shadow(0 0 5px #bcecff); }
.home-hero-1 .invaders-controls button:first-child::after { transform:translate(-38%,-50%) rotate(-135deg); }
.home-hero-1 .invaders-controls button:last-child::after { transform:translate(-62%,-50%) rotate(45deg); }
.home-hero-1 .invaders-controls button:hover { filter:brightness(1.25); box-shadow:0 4px 0 #001a3c,0 0 27px #77dcff,inset 0 1px 0 #fff; }
.home-hero-1 .invaders-controls button:hover::before { left:125%; }
.home-hero-1 .invaders-controls button.is-held { transform:translateY(3px) scale(.97); filter:brightness(1.35); box-shadow:0 1px 0 #001a3c,0 0 28px #77dcff,inset 0 0 12px #bcecff88; }
.home-hero-1 .asteroids-widget { position:absolute; inset:0; }
.home-hero-1 .asteroids-widget[hidden] { display:none; }
.home-hero-1 .asteroids-canvas { display:block; width:100%; height:100%; cursor:crosshair; touch-action:none; }
.home-hero-1 .asteroids-instructions { position:absolute; z-index:2; top:55px; right:12px; left:12px; margin:0; color:rgba(220,238,250,.78); font-size:8px; font-weight:600; letter-spacing:.08em; text-align:center; text-transform:uppercase; pointer-events:none; }
.home-hero-1 .touch-instructions { display:none; }
.home-hero-1 .asteroids-controls { position:absolute; z-index:2; right:19px; bottom:35px; left:19px; display:none; justify-content:center; gap:10px; }
.home-hero-1 .asteroids-controls button { min-width:92px; height:46px; border:1px solid #c4efff; border-radius:8px; background:linear-gradient(145deg,rgba(28,150,207,.94),rgba(20,42,105,.97)); color:#fff; box-shadow:0 4px 0 #071538,0 0 18px #66d9ff55,inset 0 1px 0 #fff8; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; touch-action:none; }
.home-hero-1 .asteroids-controls button:last-child { border-color:#ffb9e8; background:linear-gradient(145deg,rgba(220,77,170,.94),rgba(79,28,116,.97)); box-shadow:0 4px 0 #2b0b47,0 0 18px #ff8bd855,inset 0 1px 0 #fff8; }
.home-hero-1 .asteroids-controls button.is-held { transform:translateY(3px); filter:brightness(1.3); box-shadow:0 1px 0 #071538,0 0 25px #8be5ff; }
@media (pointer:coarse) { .home-hero-1 .asteroids-controls { display:flex; } .home-hero-1 .asteroids-canvas { cursor:default; } .home-hero-1 .desktop-instructions { display:none; } .home-hero-1 .touch-instructions { display:inline; } }
@keyframes home-hero-button-pulse { 50% { transform:translateX(-50%) scale(1.08); filter:brightness(1.15); } }
@keyframes home-hero-click-pulse { 0% { opacity:.95; transform:scale(.75); } 100% { opacity:0; transform:scale(4.5); } }
@media (max-width:991px) { .home-hero-1 .home-hero-inner { display:flex; flex-direction:column; gap:32px; padding:28px 22px 35px; } .home-hero-1 .home-hero-copy { width:100%; padding:0; } .home-hero-1 .play-panel { width:100%; min-height:475px; align-self:center; } }
@media (prefers-reduced-motion:reduce) { .home-hero-1 .shape-button,.home-hero-1 .shape-button.is-pulsing::after { animation:none; } }