/* ON AIR 앱 소개 페이지 스타일
[자주 고치는 곳]
- 기본 색/배경/그림자 : :root 의 --bg, --ink, --sub, --sh
- 테마 색(--a, --b)은 onair_intro.js 의 THEMES 에서 자동 변경됨
- 신청서 카드 : .fc (배경 그라데이션은 .fc:before)
- 폰트 : 맨 위 @font-face, 굵은 글자 목록은 파일 맨 아래 */
@font-face {
font-family:'Tenada';
src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
font-weight:normal;
font-style:normal;
font-display:swap;
}
@font-face {
font-family:'NEXON Lv1 Gothic OTF';
src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON%20Lv1%20Gothic%20OTF.woff') format('woff');
font-display:swap;
}
@property --a {
syntax:'<color>';
inherits:true;
initial-value:#ffb347;
}
@property --b {
syntax:'<color>';
inherits:true;
initial-value:#ff8c42;
}
:root {
--bg:#E4EBF5;
--ink:#161c2d;
--sub:#5d6880;
--a:#ffb347;
--b:#ff8c42;
--card:rgba(255,255,255,.62);
--line:rgba(255,255,255,.9);
--sh:0 24px 60px -20px rgba(40,55,95,.28);
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px);
transition:--a 1.2s ease,--b 1.2s ease;
}
* {
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}
html {
scroll-behavior:smooth;
scroll-padding-top:76px;
}
body {
margin:0;
background:var(--bg);
color:var(--ink);
font-family:"NEXON Lv1 Gothic OTF","Malgun Gothic",system-ui,sans-serif;
font-size:15px;
line-height:1.65;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
body:before,body:after {
content:"";
position:fixed;
z-index:-1;
border-radius:50%;
filter:blur(90px);
opacity:.55;
transition:background 1s;
pointer-events:none;
}
body:before {
width:520px;
height:520px;
left:-160px;
top:-120px;
background:var(--a);
}
body:after {
width:460px;
height:460px;
right:-140px;
top:40vh;
background:var(--b);
opacity:.35;
}
::-webkit-scrollbar {
width: 7px;
background:var(--bg);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(transparent, #0FFFF0, transparent);
border-radius:7px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(transparent, #FF0000, transparent);
}
button,a {
outline:0;
}
input::placeholder {
color:rgba(22,28,45,.3);
opacity:1;
}
input:focus::placeholder {
color:#FCFDFF;
}
.w {
max-width:1120px;
margin:0 auto;
padding:0 22px;
}
img {
max-width:100%;
display:block;
}
.g {
background:linear-gradient(100deg,var(--a),var(--b));
-webkit-background-clip:text;
background-clip:text;
color:transparent;
transition:.8s;
}
/* nav */
nav {
position:sticky;
top:0;
z-index:20;
background:#e4ebf5eb;
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
box-shadow:0 1px 0 #ffffffb3,0 12px 28px -12px rgba(40,55,95,.38);
}
.nb {
max-width:1120px;
margin:0 auto;
padding:0 22px;
height:64px;
display:flex;
align-items:center;
gap:30px;
}
.nb .sp {
flex:1;
}
.nb a:not(.btn) {
color:var(--sub);
text-decoration:none;
font-size:14px;
white-space:nowrap;
transition:.2s;
}
.nb a:not(.btn):hover {
color:var(--ink);
}
.nb .btn {
padding:11px 20px 8px;
white-space:nowrap;
flex-shrink:0;
}
.logo {
font-size:1.15rem;
font-weight:900;
display:flex;
align-items:center;
gap:5px;
white-space:nowrap;
flex-shrink:0;
cursor: pointer;
}
.logo small {
font-size:.6em;
letter-spacing:1px;
color:var(--sub);
}
.dot {
width:10px;
height:10px;
border-radius:50%;
background:var(--a);
animation:pl 1.7s infinite;
position:relative;
top:-5px;
right:5px;
}
.logo .dot {
position:relative;
top:-5px;
right:5px;
}
.chip .dot {
position:relative;
top:-1px;
left:0px;
width:6px;
height:6px;
}
@keyframes pl {
0% {
box-shadow:0 0 0 0 var(--a);
}
70% {
box-shadow:0 0 0 11px transparent;
}
100% {
box-shadow:0 0 0 0 transparent;
}
}
.btn {
border:0;
cursor:pointer;
font:inherit;
color:#fff;
padding:13px 24px 10px;
border-radius:12px;
background:#161c2d;
transition:transform .2s,background .2s;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
line-height:1.2;
font-size:14px;
}
.btn:hover {
transform:translateY(-1px);
background:#2c3550;
}
.btn.big {
padding:17px 30px 14px;
font-size:15.5px;
border-radius:14px;
}
.btn.line {
background:transparent;
color:var(--ink);
box-shadow:inset 0 0 0 1.5px #161c2d30;
}
.btn.line:hover {
background:#161c2d0d;
}
.btn span {
transition:transform .2s;
}
.btn:hover span {
transform:translateX(3px);
}
/* hero */
.hero {
display:grid;
grid-template-columns:1.05fr 1fr;
gap:20px;
align-items:center;
padding:64px 0 40px;
min-height:86vh;
}
.chip {
display:inline-flex;
gap:8px;
align-items:center;
padding:7px 15px;
border-radius:30px;
background:var(--card);
border:1px solid var(--line);
font-size:.95rem;
font-weight:700;
color:var(--sub);
}
h1 {
font-size:clamp(26px,5vw,52px);
line-height:1.18;
letter-spacing:-1px;
margin:18px 0;
}
.lead {
font-size:clamp(13.5px,1.5vw,15.5px);
color:var(--sub);
max-width:490px;
margin:0 0 30px;
}
.cta {
display:flex;
gap:12px;
flex-wrap:wrap;
}
.stage {
position:relative;
height:600px;
}
.ph {
position:absolute;
border-radius:34px;
background:#0c0f18;
padding:8px;
box-shadow:0 40px 70px -24px rgba(20,30,60,.55),inset 0 0 0 2px #2a3042;
}
.ph img {
border-radius:27px;
transition:opacity .5s;
}
.ph.p {
width:268px;
left:50%;
top:0;
margin-left:-110px;
z-index:2;
animation:fl 6s ease-in-out infinite;
}
.ph.l {
width:470px;
right:-30px;
bottom:30px;
animation:fl 7s ease-in-out -2s infinite;
transform:rotate(-4deg);
}
@keyframes fl {
50% {
translate:0 -16px;
}
}
.tag {
position:absolute;
z-index:3;
padding:9px 15px;
border-radius:16px;
background:var(--card);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border:1px solid var(--line);
font-size:.85rem;
font-weight:700;
box-shadow:var(--sh);
animation:fl 5s ease-in-out infinite;
}
.t1 {
left:0;
top:90px;
}
.t2 {
right:0;
top:20px;
animation-delay:-1.4s;
}
.t3 {
left:10px;
bottom:70px;
animation-delay:-2.6s;
}
.sws {
display:flex;
gap:10px;
margin-top:26px;
}
.sw {
width:34px;
height:34px;
border-radius:50%;
border:3px solid #fff;
cursor:pointer;
box-shadow:0 6px 14px -4px #0004;
transition:transform .25s;
}
.sw.on,.sw:hover {
transform:scale(1.22);
}
/* marquee */
.mq {
overflow:hidden;
padding:18px 0;
margin:30px 0;
border-block:1px solid #161c2d14;
mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.mq div {
display:flex;
gap:46px;
width:max-content;
animation:mq 30s linear infinite;
font-size:16px;
color:#161c2d88;
white-space:nowrap;
}
@keyframes mq {
to {
transform:translateX(-50%);
}
}
section {
padding:70px 0;
}
h2 {
font-size:clamp(23px,3.4vw,34px);
letter-spacing:-.5px;
line-height:1.3;
margin:0 0 12px;
text-align:center;
}
.sub {
text-align:center;
color:var(--sub);
max-width:520px;
margin:0 auto 44px;
}
/* showcase */
.tabs {
display:flex;
justify-content:center;
gap:4px;
width:max-content;
max-width:100%;
margin:0 auto 36px;
padding:5px;
border-radius:16px;
background:#ffffff99;
flex-wrap:wrap;
}
.tab {
border:0;
cursor:pointer;
font:inherit;
padding:10px 20px 7px;
border-radius:11px;
background:transparent;
color:var(--sub);
transition:.25s;
font-size:14px;
}
.tab.on {
background:#161c2d;
color:#fff;
}
.show {
display:flex;
gap:40px;
justify-content:center;
align-items:center;
flex-wrap:wrap;
}
.show .ph {
position:relative;
animation:none;
}
.show .p {
width:270px;
left:0;
margin:0;
}
.show .l {
width:min(520px,92vw);
right:0;
bottom:0;
transform:none;
}
/* bento */
.bento {
display:grid;
grid-template-columns:repeat(6,1fr);
gap:18px;
}
.c {
grid-column:span 2;
padding:28px;
border-radius:30px;
background:var(--card);
border:1px solid var(--line);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-shadow:var(--sh);
transition:transform .35s;
overflow:hidden;
position:relative;
}
.c:hover {
transform:translateY(-6px);
}
.c.w3 {
grid-column:span 3;
}
.c.w4 {
grid-column:span 4;
}
.ic {
width:50px;
height:50px;
border-radius:16px;
display:grid;
place-items:center;
font-size:23px;
margin-bottom:16px;
background:linear-gradient(135deg,var(--a),var(--b));
transition:.8s;
}
.c h3 {
margin:0 0 6px;
font-size:17px;
}
.hd {
display:flex;
align-items:center;
gap:12px;
margin-bottom:12px;
}
.hd .ic {
margin-bottom:0;
flex-shrink:0;
}
.hd h3 {
margin:0;
position:relative;
top:.15em;
}
.c p {
margin:0;
color:var(--sub);
font-size:13.5px;
}
.c small {
color:var(--b);
font-weight:700;
}
.bars {
display:flex;
gap:5px;
align-items:flex-end;
height:54px;
margin-top:18px;
}
.bars i {
flex:1;
border-radius:4px;
background:linear-gradient(0deg,var(--a),var(--b));
animation:eq 1s ease-in-out infinite alternate;
height:20%;
}
@keyframes eq {
to {
height:100%;
}
}
.srv {
display:flex;
align-items:center;
gap:10px;
margin-top:20px;
font-weight:700;
font-size:.85rem;
}
.srv b {
padding:9px 14px;
border-radius:14px;
background:#fff;
box-shadow:0 6px 16px -8px #0003;
animation:sv 6s infinite;
}
.srv b+span+b {
animation-delay:-3s;
}
@keyframes sv {
0%,45% {
outline:2px solid var(--b);
}
55%,100% {
outline:2px solid transparent;
opacity:.55;
}
}
.srv span {
flex:1;
height:2px;
background:repeating-linear-gradient(90deg,var(--b) 0 6px,transparent 6px 12px);
background-size:24px 2px;
animation:dash 1s linear infinite;
}
@keyframes dash {
to {
background-position:24px 0;
}
}
.rt {
display:flex;
gap:8px;
margin-top:18px;
}
.rt i {
font-style:normal;
font-size:12px;
font-weight:700;
padding:6px 12px;
border-radius:20px;
background:#fff;
animation:rt 2.5s infinite;
}
.rt i:nth-child(2) {
animation-delay:.3s;
}
.rt i:nth-child(3) {
animation-delay:.6s;
}
.rt i:nth-child(4) {
animation-delay:.9s;
}
.rt i:nth-child(5) {
animation-delay:1.2s;
}
@keyframes rt {
0%,100% {
transform:none;
}
30% {
transform:translateY(-6px);
background:var(--a);
}
}
/* numbers */
.nums {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
text-align:center;
}
.nums div {
padding:30px 10px;
border-radius:28px;
background:#161c2d;
color:#fff;
}
.nums b {
font-size:clamp(28px,4vw,40px);
line-height:1;
display:block;
font-weight:900;
}
.nums span {
font-size:.85rem;
color:#fffb;
}
footer {
text-align:center;
color:var(--sub);
font-size:.85rem;
padding:34px 0 60px;
}
/* order : 페이지 안 신청서 */
.od {
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
gap:20px;
max-width:980px;
margin:0 auto;
align-items:start;
}
.fc {
position:relative;
overflow:hidden;
padding:30px 28px 26px;
border-radius:30px;
background:var(--card);
border:1px solid var(--line);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-shadow:var(--sh);
}
.fc:before {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:radial-gradient(280px 220px at 0% 0%,color-mix(in srgb,var(--a) 38%,transparent),transparent 72%),radial-gradient(300px 240px at 100% 100%,color-mix(in srgb,var(--b) 30%,transparent),transparent 72%);
}
.fc>* {
position:relative;
}
.fh {
display:flex;
align-items:center;
gap:10px;
margin-bottom:18px;
}
.fh .dot {
top:0;
right:0;
}
.fh b {
font-size:12px;
letter-spacing:3px;
color:var(--sub);
font-weight:400;
}
.fg {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px 12px;
}
.fd {
display:flex;
flex-direction:column;
gap:6px;
min-width:0;
}
.fd.full {
grid-column:1/-1;
}
.fd label {
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px 8px;
font-size:.95rem;
line-height:1.2;
padding-top:.17em;
}
.fd em {
font-family:'NEXON Lv1 Gothic OTF',sans-serif;
font-size:.75rem;
color:var(--sub);
font-style:normal;
}
.rq,.op {
font-family:'NEXON Lv1 Gothic OTF',sans-serif;
font-size:10.5px;
line-height:1;
padding:3px 8px;
border-radius:99px;
}
.rq {
background:color-mix(in srgb,var(--b) 20%,#fff);
color:#161c2d;
}
.op {
background:#161c2d0f;
color:var(--sub);
}
.inp {
width:100%;
font:inherit;
font-size:14px;
padding:12px 14px;
border:0;
border-radius:14px;
background:rgba(255,255,255,.92);
color:#161c2d;
box-shadow:inset 0 0 0 1px #161c2d14;
outline:0;
transition:box-shadow .2s,background .2s;
}
.inp:focus {
background:#fff;
box-shadow:inset 0 0 0 1.5px var(--b),0 0 0 4px color-mix(in srgb,var(--b) 24%,transparent);
}
.inp[aria-invalid="true"] {
box-shadow:inset 0 0 0 1.5px #e5484d,0 0 0 4px #e5484d22;
}
.er {
font-size:12px;
color:#d9363e;
}
.er:empty,.fm:empty {
display:none;
}
.hp {
position:absolute;
left:-9999px;
}
.fc .btn.big {
width:100%;
margin-top:18px;
}
#sb[disabled] {
opacity:.7;
cursor:progress;
transform:none;
}
.fm {
margin:12px 0 0;
text-align:center;
font-size:13px;
color:#d9363e;
}
.dn {
text-align:center;
padding:16px 4px 8px;
}
.dn .ok {
width:76px;
height:76px;
margin:0 auto;
}
.dn .ok circle,.dn .ok path {
fill:none;
stroke:var(--b);
stroke-linecap:round;
stroke-linejoin:round;
}
.dn .ok circle {
stroke-width:3;
stroke-dasharray:252;
stroke-dashoffset:252;
animation:draw .8s .1s ease forwards;
}
.dn .ok path {
stroke-width:4;
stroke-dasharray:60;
stroke-dashoffset:60;
animation:draw .5s .7s ease forwards;
}
@keyframes draw {
to {
stroke-dashoffset:0;
}
}
.dn h3 {
margin:18px 0 8px;
font-size:1.45rem;
}
.dn p {
margin:0;
color:var(--sub);
font-size:14px;
}
.dn p b {
color:var(--ink);
}
.dn .btn {
margin-top:20px;
}
.sd {
display:grid;
gap:14px;
}
.fl {
list-style:none;
margin:0;
padding:0;
display:grid;
gap:12px;
counter-reset:f;
}
.fl li {
position:relative;
padding:16px 18px 16px 62px;
border-radius:22px;
background:var(--card);
border:1px solid var(--line);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-shadow:var(--sh);
color:var(--sub);
font-size:13px;
line-height:1.6;
counter-increment:f;
}
.fl li:before {
content:counter(f);
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
display:grid;
place-items:center;
width:32px;
height:32px;
padding-top:.12em;
border-radius:50%;
background:linear-gradient(135deg,var(--a),var(--b));
color:#1d1204;
font-family:'Tenada','NEXON Lv1 Gothic OTF',sans-serif;
transition:.8s;
}
.fl b {
display:block;
margin-bottom:2px;
font-size:1rem;
font-weight:400;
color:var(--ink);
}
.fl .cpy {
display:block;
margin-top:8px;
border:0;
cursor:pointer;
font:inherit;
font-family:'Tenada','NEXON Lv1 Gothic OTF',sans-serif;
font-size:12px;
padding:calc(7px + .17em) 14px calc(7px - .17em);
border-radius:99px;
background:#161c2d;
color:#fff;
transition:background .2s;
}
.fl .cpy:hover {
background:#2c3550;
}
.tel {
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:calc(16px + .17em) 20px calc(16px - .17em);
border-radius:22px;
background:#161c2d;
color:#fff;
text-decoration:none;
font-size:1.05rem;
transition:transform .2s,background .2s;
}
.tel:hover {
transform:translateY(-2px);
background:#2c3550;
}
@media(max-width:860px) {
.od {
grid-template-columns:1fr;
}
}
@media(max-width:560px) {
.fc {
padding:24px 18px 20px;
border-radius:26px;
}
.fg {
grid-template-columns:1fr;
}
.inp {
font-size:16px;
}
}
/* price */
.pr {
display:grid;
grid-template-columns:1.15fr 1fr;
gap:20px;
max-width:900px;
margin:0 auto;
}
.pc {
padding:34px 30px;
border-radius:30px;
background:var(--card);
border:1px solid var(--line);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-shadow:var(--sh);
}
.pc .k {
font-size:.85rem;
color:var(--sub);
}
.amt {
font-size:clamp(34px,5vw,46px);
line-height:1.1;
margin:6px 0 4px;
}
.amt small {
font-size:18px;
color:var(--ink);
}
.pc ul {
list-style:none;
margin:20px 0 0;
padding:0;
display:grid;
gap:10px;
font-size:14px;
}
.pc li:before {
content:"✓";
display:inline-grid;
place-items:center;
width:20px;
height:20px;
margin-right:10px;
border-radius:50%;
background:linear-gradient(135deg,var(--a),var(--b));
color:#1d1204;
font-size:11px;
transition:.8s;
}
.bank {
background:#161c2d;
color:#fff;
display:flex;
flex-direction:column;
justify-content:center;
}
.bank .k {
color:#ffffffa8;
}
.acc {
font-size:clamp(21px,3vw,26px);
margin:8px 0 2px;
letter-spacing:.5px;
}
.acc small {
font-family:"NEXON Lv1 Gothic OTF","Malgun Gothic",system-ui,sans-serif;
font-size:.85rem;
margin-left:10px;
letter-spacing:5px;
}
.bank p {
margin:12px 0 22px;
font-size:.85rem;
color:#ffffffb8;
}
.bank .btn {
background:#fff;
color:#161c2d;
padding:12px 20px 9px;
font-size:14px;
align-self:flex-start;
}
@media(max-width:760px) {
.pr {
grid-template-columns:1fr;
}
}
/* reveal */
.js .rv {
opacity:0;
transform:translateY(40px);
transition:opacity .8s,transform .8s;
}
.js .rv.in {
opacity:1;
transform:none;
}
@media(max-width:900px) {
.hero {
grid-template-columns:1fr;
text-align:center;
padding-top:40px;
min-height:0;
}
.lead {
margin-inline:auto;
}
.cta,.sws {
justify-content:center;
}
.stage {
height:560px;
max-width:520px;
margin:0 auto;
width:100%;
}
.ph.l {
width:360px;
right:-10px;
bottom:10px;
}
.bento {
grid-template-columns:1fr 1fr;
}
.c,.c.w3,.c.w4 {
grid-column:span 1;
}
.c.w4,.c.w3 {
grid-column:span 2;
}
.nums {
grid-template-columns:1fr 1fr;
}
}
@media(max-width:560px) {
.nb a:not(.btn) {
display:none;
}
.nb {
height:58px;
}
.stage {
height:520px;
}
.ph.p {
width:220px;
margin-left:-124px;
}
.ph.l {
width:290px;
right:-16px;
bottom:30px;
}
.tag {
font-size:12px;
padding:7px 11px;
}
.t1 {
top:60px;
}
.bento {
grid-template-columns:1fr;
}
.c,.c.w3,.c.w4 {
grid-column:span 1;
}
section {
padding:46px 0;
}
}
@media(prefers-reduced-motion:reduce) {
* {
animation:none!important;
transition:none!important;
}
}
h1,h2,h3,.g,.btn,.logo,.nums b,.tab,.chip,.tag,.fd label,.fh b,.dn h3,.fl b,.tel,.c small,.srv b,.rt i,.mq div,.amt,.acc,.pc .k b {
font-family:'Tenada','NEXON Lv1 Gothic OTF',sans-serif;
font-weight:400;
}
/* ===== Tenada 폰트 세로 중앙 보정 (위 여백 +.17em / 아래 -.17em) ===== */
.btn {
padding-top:calc(12px + .17em);
padding-bottom:calc(12px - .17em);
}
.btn.big {
padding-top:calc(16px + .17em);
padding-bottom:calc(16px - .17em);
}
.nb .btn {
padding-top:calc(10px + .17em);
padding-bottom:calc(10px - .17em);
border-radius:999px;
}
.bank .btn {
padding-top:calc(11px + .17em);
padding-bottom:calc(11px - .17em);
}
.tab {
padding-top:calc(9px + .17em);
padding-bottom:calc(9px - .17em);
}
.chip {
padding-top:calc(7px + .17em);
padding-bottom:calc(7px - .17em);
}
.tag {
padding-top:calc(9px + .17em);
padding-bottom:calc(9px - .17em);
}
.srv b {
padding-top:calc(9px + .17em);
padding-bottom:calc(9px - .17em);
}
.rt i {
padding-top:calc(6px + .17em);
padding-bottom:calc(6px - .17em);
}
.g {
padding:.1em 0;
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
.nums b {
line-height:1.3;
}

#button1 {
background:radial-gradient(110px 60px at -10% -20%,color-mix(in srgb,var(--a) 75%,transparent),transparent 70%),radial-gradient(130px 70px at 110% 120%,color-mix(in srgb,var(--b) 70%,transparent),transparent 70%),#161c2d;
}
#button1:hover {
background:radial-gradient(110px 60px at -10% -20%,color-mix(in srgb,var(--a) 85%,transparent),transparent 70%),radial-gradient(130px 70px at 110% 120%,color-mix(in srgb,var(--b) 80%,transparent),transparent 70%),#2c3550;
}

.nb .btn {
background:radial-gradient(60px 30px at -10% -10%,color-mix(in srgb,var(--a) 75%,transparent),transparent 70%),radial-gradient(80px 50px at 120% 120%,color-mix(in srgb,var(--b) 70%,transparent),transparent 70%),#161c2d;
}
.nb .btn:hover {
background:radial-gradient(60px 30px at -10% -10%,color-mix(in srgb,var(--a) 85%,transparent),transparent 70%),radial-gradient(80px 50px at 120% 120%,color-mix(in srgb,var(--b) 80%,transparent),transparent 70%),#2c3550;
}

#sb {
background:radial-gradient(110px 60px at 0% 0%,color-mix(in srgb,var(--a) 75%,transparent),transparent 70%),radial-gradient(130px 70px at 100% 100%,color-mix(in srgb,var(--b) 70%,transparent),transparent 70%),#161c2d;
}
#sb:hover {
background:radial-gradient(110px 60px at 0% 0%,color-mix(in srgb,var(--a) 85%,transparent),transparent 70%),radial-gradient(130px 70px at 100% 100%,color-mix(in srgb,var(--b) 80%,transparent),transparent 70%),#2c3550;
}