@layer components{.service-banner{--sb: 12 231 106;--sb2: 51 244 134;position:relative;overflow:hidden;isolation:isolate}.service-banner[data-theme=web]{--sb: 12 231 106;--sb2: 51 244 134}.service-banner[data-theme=apps]{--sb: 34 211 238;--sb2: 12 231 106}.service-banner[data-theme=games]{--sb: 192 132 252;--sb2: 12 231 106}.service-banner[data-theme=seo]{--sb: 12 231 106;--sb2: 45 212 191}.service-banner[data-theme=social]{--sb: 244 114 182;--sb2: 12 231 106}.service-banner[data-theme=ads]{--sb: 251 191 36;--sb2: 12 231 106}.service-banner[data-theme=overview]{--sb: 12 231 106;--sb2: 51 244 134}.sb-hero-grid{display:grid;gap:2.5rem;align-items:center;padding-bottom:3.5rem}@media (min-width: 1024px){.sb-hero-grid{grid-template-columns:1fr 1fr;gap:4rem;padding-bottom:4rem}}.sb-aurora{position:absolute;inset:-20% -10% auto;height:70%;background:radial-gradient(ellipse 50% 60% at 20% 40%,rgb(var(--sb) / .28),transparent 70%),radial-gradient(ellipse 45% 50% at 80% 20%,rgb(var(--sb2) / .22),transparent 65%),radial-gradient(ellipse 40% 40% at 50% 80%,rgb(var(--sb) / .12),transparent 70%);filter:blur(8px);animation:sb-glow 10s ease-in-out infinite;pointer-events:none}.sb-scene{position:relative;width:100%;aspect-ratio:1.05;max-height:440px;min-height:min(70vw,320px);contain:layout style paint;pointer-events:none}.sb-scene-wrap{min-height:min(70vw,320px)}@media (min-width: 1024px){.sb-scene-wrap{min-height:320px}}.sb-scene--mini{aspect-ratio:1.25;max-height:220px;min-height:180px}.sb-scene--mini .sb-chip{font-size:.6rem;padding:.28rem .5rem}.sb-phone-l{left:12%;top:8%;animation:sb-float-tilt-l 5.5s ease-in-out infinite}.sb-phone-r{right:10%;top:16%;animation:sb-float-tilt-r 6.5s ease-in-out infinite;animation-delay:-2.2s}.sb-orb{position:absolute;border-radius:999px;filter:blur(28px);animation:sb-glow 8s ease-in-out infinite}.sb-orb-a{width:46%;height:46%;left:8%;top:10%;background:rgb(var(--sb) / .45)}.sb-orb-b{width:38%;height:38%;right:4%;bottom:8%;background:rgb(var(--sb2) / .38);animation-delay:-3s}.sb-float{animation:sb-float 5.5s ease-in-out infinite}.sb-float-d{animation:sb-float 6.5s ease-in-out infinite;animation-delay:-2.2s}.sb-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:.4rem;border-radius:999px;border:1px solid rgb(255 255 255 / .12);background:rgb(15 23 42 / .78);padding:.38rem .7rem;font-size:.68rem;font-weight:600;letter-spacing:.01em;color:#e5e7eb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px -12px #0009}.sb-window{position:absolute;inset:14% 10% 18%;z-index:2;overflow:hidden;border-radius:1rem;border:1px solid rgb(255 255 255 / .12);background:linear-gradient(180deg,rgb(15 23 42 / .92),rgb(3 7 18 / .92));box-shadow:0 24px 50px -20px #000000b3,0 0 0 1px rgb(var(--sb) / .15)}.sb-window-bar{display:flex;align-items:center;gap:.35rem;border-bottom:1px solid rgb(255 255 255 / .08);padding:.55rem .75rem}.sb-window-bar i{width:.5rem;height:.5rem;border-radius:999px;display:block}.sb-url{margin-left:.5rem;flex:1;border-radius:.4rem;background:rgb(255 255 255 / .05);padding:.2rem .55rem;font-family:var(--font-mono);font-size:.62rem;color:#94a3b8}.sb-code{padding:.85rem 1rem;display:grid;gap:.45rem}.sb-line{height:.42rem;border-radius:99px;background:linear-gradient(90deg,rgb(var(--sb) / .7),rgb(var(--sb2) / .55));width:0;animation:sb-code 4.8s ease-in-out infinite}.sb-scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgb(var(--sb2)),transparent);box-shadow:0 0 12px rgb(var(--sb2) / .8);animation:sb-scan 3.6s linear infinite}.sb-phone{position:absolute;z-index:2;width:38%;aspect-ratio:1 / 2.05;border-radius:1.35rem;border:2px solid rgb(255 255 255 / .16);background:linear-gradient(180deg,rgb(15 23 42 / .95),rgb(2 6 23 / .95));box-shadow:0 22px 40px -18px #000000bf;overflow:hidden}.sb-phone-notch{position:absolute;top:.45rem;left:50%;transform:translate(-50%);width:38%;height:.38rem;border-radius:99px;background:rgb(255 255 255 / .12)}.sb-app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;padding:1.6rem .7rem .7rem}.sb-app-grid span{aspect-ratio:1;border-radius:.55rem;background:linear-gradient(135deg,rgb(var(--sb) / .85),rgb(var(--sb2) / .6));animation:sb-glow 3.2s ease-in-out infinite}.sb-ring{position:absolute;inset:18%;border-radius:999px;border:1.5px solid rgb(var(--sb) / .35);animation:sb-pulse-ring 2.8s ease-out infinite}.sb-play{position:absolute;inset:34%;border-radius:999px;background:linear-gradient(135deg,rgb(var(--sb)),rgb(var(--sb2)));display:grid;place-items:center;box-shadow:0 0 40px rgb(var(--sb) / .55);animation:sb-glow 4s ease-in-out infinite}.sb-bars{position:absolute;inset:auto 12% 14%;z-index:2;display:flex;align-items:flex-end;gap:.4rem;height:38%}.sb-bars b{flex:1;transform-origin:bottom;border-radius:.25rem .25rem 0 0;background:linear-gradient(180deg,rgb(var(--sb2)),rgb(var(--sb)));animation:sb-bar 3.2s ease-in-out infinite}.sb-node{position:absolute;z-index:3;width:2.4rem;height:2.4rem;border-radius:.85rem;display:grid;place-items:center;background:rgb(15 23 42 / .9);border:1px solid rgb(255 255 255 / .12);color:rgb(var(--sb2));font-size:.72rem;font-weight:800;letter-spacing:.02em;box-shadow:0 8px 24px -10px #000000b3}.sb-line-link{position:absolute;z-index:1;height:1px;background:linear-gradient(90deg,transparent,rgb(var(--sb) / .6),transparent);transform-origin:left center;animation:sb-shimmer 2.8s linear infinite;background-size:200% 100%}.sb-heart{position:absolute;z-index:4;font-size:.85rem;color:#fb7185;animation:sb-drift 4.5s ease-in infinite}.sb-marquee-wrap{position:relative;overflow:hidden;min-height:2.75rem;border-top:1px solid rgb(255 255 255 / .06);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.sb-marquee{display:flex;width:max-content;gap:0;animation:sb-marquee 28s linear infinite}.sb-marquee span{padding:.85rem 1.35rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#94a3b8d9;white-space:nowrap}.sb-marquee span:after{content:"✦";margin-left:1.35rem;color:rgb(var(--sb) / .7)}@keyframes sb-float{0%,to{transform:translateY(0)}50%{transform:translateY(-14px)}}@keyframes sb-float-tilt-l{0%,to{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-12px)}}@keyframes sb-float-tilt-r{0%,to{transform:rotate(9deg) translateY(0)}50%{transform:rotate(9deg) translateY(-14px)}}@keyframes sb-glow{0%,to{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes sb-code{0%,8%{width:0}38%,to{width:var(--w, 72%)}}@keyframes sb-scan{0%{top:18%;opacity:0}12%{opacity:1}88%{opacity:1}to{top:86%;opacity:0}}@keyframes sb-pulse-ring{0%{transform:scale(.72);opacity:.55}to{transform:scale(1.35);opacity:0}}@keyframes sb-bar{0%,12%{transform:scaleY(.18)}55%,to{transform:scaleY(1)}}@keyframes sb-drift{0%{transform:translate(0) scale(.7);opacity:0}18%{opacity:1}to{transform:translate(var(--dx, 12px),-90px) scale(1.1);opacity:0}}@keyframes sb-marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes sb-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes sb-orbit{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.sb-aurora,.sb-orb,.sb-float,.sb-float-d,.sb-line,.sb-scan,.sb-ring,.sb-play,.sb-bars b,.sb-app-grid span,.sb-heart,.sb-marquee,.sb-line-link,.sb-phone-l,.sb-phone-r{animation:none!important}.sb-line{width:var(--w, 72%)}.sb-bars b{transform:scaleY(1)}}}