:root{
color-scheme:dark;
--bg:#0b1324;
--surface:#111b31;
--surface-2:#16223c;
--ink:#f1f5ff;
--ink-2:#c3cde2;
--ink-3:#8b98b3;
--line:#22304d;
--line-2:#1a2742;
--brand:#2563eb;
--brand-2:#1d4ed8;
--brand-ink:#ffffff;
--brand-soft:rgba(37,99,235,.16);
--accent:#93b4ff;
--money:#4ade80;
--money-soft:rgba(74,222,128,.1);
--focus:#93b4ff;
--wrap:1100px;
--shadow:0 1px 2px rgba(0,0,0,.25);
--shadow-lg:0 14px 34px -14px rgba(0,0,0,.6);
}

.ic-bolt{-webkit-mask-image:url(/icons/bolt.svg);mask-image:url(/icons/bolt.svg)}
.ic-phone{-webkit-mask-image:url(/icons/phone.svg);mask-image:url(/icons/phone.svg)}
.ic-receipt{-webkit-mask-image:url(/icons/receipt.svg);mask-image:url(/icons/receipt.svg)}

body{font-size:17px;line-height:1.65;-webkit-font-smoothing:auto;font-weight:400}
h1,h2,h3{color:var(--ink);font-weight:700;letter-spacing:-.015em}
h2{font-size:clamp(24px,3vw,31px);line-height:1.25;margin-bottom:14px}
h3{font-size:clamp(18px,2.2vw,20px);line-height:1.3}
.block p{font-size:17px;color:var(--ink-2)}
.block p strong{font-weight:700}
a:hover{text-decoration-color:var(--accent)}

.top{background:rgba(11,19,36,.92);border-bottom:1px solid var(--line-2);box-shadow:none}
.brand-a{
font-weight:800;font-size:19px;letter-spacing:.02em;text-transform:uppercase;
text-decoration:none;margin-right:auto;color:var(--ink);white-space:nowrap;
}
.nav a{color:var(--ink-2);font-weight:600}
.nav a:hover{background:transparent;color:var(--ink)}
.nav a[aria-current="page"]{background:transparent;color:var(--ink)}
.btn-a{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:8px 14px;border-radius:12px;
border:2px solid var(--brand-2);background:var(--brand);color:#fff;
font:inherit;font-weight:700;font-size:15px;text-decoration:none;
cursor:pointer;transition:transform .2s ease,background-color .2s ease;
}
.btn-a:hover{transform:translateY(-1px);background:var(--brand-2);color:#fff}
.btn-ghost{background:transparent;border-color:var(--brand);color:var(--accent)}
.btn-ghost:hover{background:var(--brand);color:#fff}
.top .btn-ghost{flex:none}


.hero h1{font-size:clamp(32px,4.8vw,48px);font-weight:800;line-height:1.12;letter-spacing:-.025em;margin:0 0 14px}
.hero .lede{font-size:clamp(17px,1.9vw,19px);font-weight:400;line-height:1.6;color:var(--ink-2)}
.stamp{background:var(--brand-soft);color:var(--accent)}

.calc{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg)}
.calc-head{background:transparent;border-bottom:1px solid var(--line-2)}
.calc-title img{width:22px;height:22px}
.swap{border:2px solid var(--brand);background:transparent;color:var(--accent);border-radius:12px}
.swap:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.unit{background:var(--surface-2);color:var(--ink-2);min-width:62px}
.unit-robux{width:28px;height:28px}
.calc[data-direction="robux"] .unit-txt{display:none}
.calc[data-direction="money"] .unit-robux{display:none}
.input-row input{background:var(--bg)}
.input-row input:focus{border-color:var(--brand)}
.input-row:focus-within .unit{border-color:var(--brand);color:var(--ink)}
.chip{background:transparent;border-color:var(--line)}
.chip:hover{border-color:var(--brand);color:var(--ink);background:var(--brand-soft)}
.modes{background:var(--bg)}
.mode[aria-pressed="true"]{background:var(--brand);color:#fff;box-shadow:none}
.result{background:var(--bg);border:1px solid var(--line)}
.result-label{color:var(--ink-3)}
.result-row{display:flex;align-items:center;gap:12px}
.result-value{color:var(--ink);min-width:0}
.result-flag{
width:36px;height:36px;flex:none;border-radius:50%;object-fit:cover;
box-shadow:0 0 0 2px rgba(255,255,255,.14);
}
.result-robux{width:36px;height:36px;flex:none}
.calc[data-direction="robux"] .result-robux{display:none}
.calc[data-direction="money"] .result-flag{display:none}

.hero{padding:40px 0 4px}
.hero h1{margin-bottom:12px}
.hero .lede{max-width:880px}

.calc-conv .calc-body{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;align-items:start}
.calc-conv .field,.calc-conv .modes{grid-column:1}
.calc-conv .result{
grid-column:2;grid-row:1 / span 2;margin-top:0;align-self:stretch;
display:flex;flex-direction:column;justify-content:center;
}

.pop{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.pop-card{padding:16px 18px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.pop-card h3{margin:0 0 6px;font-size:18px}
.block .pop-card p{margin:0;font-size:15.5px;line-height:1.55}

section.band{
background:var(--surface);
box-shadow:0 0 0 100vmax var(--surface);
clip-path:inset(0 -100vmax);
padding:40px 0 42px;margin-top:40px;
}
section.band .table-card,section.band details,section.band .step{background:var(--bg)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.step{
position:relative;overflow:hidden;
padding:24px 20px 22px 84px;border-radius:14px;
background:var(--bg);border:1px solid var(--line);
transition:transform .2s ease;
}
.step:hover{transform:translateY(-4px)}
.step-n{
position:absolute;left:14px;top:50%;transform:translateY(-50%);
font-size:96px;font-weight:800;line-height:1;color:rgba(59,130,246,.45);
}
.step h3{margin:0 0 6px;font-size:18px;font-weight:700}
.block .step p{margin:0;font-size:15.5px;line-height:1.55}

.features{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.feature{
display:block;padding:18px 20px;border-radius:15px;
background:var(--surface);border:1px solid var(--line);
text-decoration:none;transition:transform .2s ease,border-color .2s ease;
}
.feature:hover{transform:translateY(-3px);border-color:var(--brand)}
.feature-ic{
width:46px;height:46px;border-radius:50%;
background:var(--brand-soft);color:var(--accent);
display:grid;place-items:center;font-size:21px;margin-bottom:12px;
}
.feature b{display:block;font-size:19px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.feature span.txt{display:block;font-size:15.5px;line-height:1.55;color:var(--ink-2)}

.link-card .flag{background:var(--brand-soft);color:var(--accent);border-color:transparent}
.link-card:hover{border-color:var(--brand)}
.link-card:hover .ic-arrow{color:var(--accent)}
summary:hover{color:var(--accent)}
td.pos{color:var(--money)}

.foot{background:var(--surface);border-top:1px solid var(--line-2)}
.foot .brand-a{display:inline-block;margin:0 0 12px}
.foot-col a:hover{color:var(--accent)}
.foot-base{
border-top:0;margin-top:34px;padding:16px 0;
background:var(--brand);box-shadow:0 0 0 100vmax var(--brand);clip-path:inset(0 -100vmax);
margin-bottom:-34px;
}
.foot-legal,.foot-copy{color:#fff}

@media (max-width:900px){
.steps{grid-template-columns:1fr}
.pop{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
.calc-conv .calc-body{display:block}
.calc-conv .result{margin-top:22px}
}
@media (max-width:860px){
.top .btn-ghost{padding:7px 11px;font-size:14px}
}
@media (max-width:460px){
.brand-a{font-size:16px}
.top-in{gap:10px}
.top .btn-ghost{font-size:13px;padding:6px 9px;border-radius:10px}
}
@media (max-width:560px){
.features,.pop{grid-template-columns:1fr}
.step{padding-left:76px}
.step-n{font-size:80px}
}
@media (prefers-reduced-motion:reduce){
.step:hover,.feature:hover,.btn-a:hover{transform:none}
}