:root {
  color-scheme: dark;
  --bg: #080c16;
  --bg-raised: #0d1421;
  --panel: #101a2a;
  --panel-soft: #121e30;
  --line: #21324b;
  --line-bright: #31517c;
  --text: #f4f7ff;
  --muted: #9aa9c0;
  --blue: #3174ff;
  --blue-bright: #4f8cff;
  --cyan: #67e2ff;
  --lime: #c8fa54;
  --rose: #ff739d;
  --font-body: "Manrope", sans-serif;
  --font-display: "Space Grotesk", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 98px; }
body { min-width: 320px; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; -webkit-font-smoothing: antialiased; }
body.has-overlay { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
::selection { background: #3174ff88; color: #fff; }

.promo-bar { min-height: 31px; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 5px 16px; background: #1d5ee8; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .85px; text-align: center; }
.promo-bar p { margin: 0; }
.promo-bar p span { padding: 0 5px; color: #b9f6ff; }
.preview-tag { color: #d3e5ff; font-size: 8px; font-weight: 700; }

.site-header { position: sticky; z-index: 8; top: 0; min-height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; padding: 0 max(calc((100vw - 1220px) / 2), 5vw); border-bottom: 1px solid #ffffff0c; background: #090e18ed; backdrop-filter: blur(16px); }
.brand { width: max-content; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.brand > span:last-child > span { color: var(--cyan); }
.brand-symbol { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #4384ff78; border-radius: 9px; background: linear-gradient(145deg, #19386f, #101b31); box-shadow: 0 0 19px #2873ff23; transform: rotate(-4deg); }
.brand-symbol span { width: 11px; height: 11px; border: 3px solid var(--cyan); border-right-color: transparent; transform: rotate(45deg); }
.main-nav { display: flex; align-items: center; gap: 30px; }
.nav-link { padding: 27px 0 25px; color: #aab8cc; font-size: 11px; font-weight: 700; transition: color .18s; }
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-link.active { box-shadow: inset 0 -2px var(--blue); }
.header-actions { display: flex; align-items: center; justify-content: end; gap: 8px; }
.icon-button { width: 37px; height: 37px; display: inline-grid; flex: none; place-items: center; border: 1px solid #26354a; border-radius: 10px; background: #101826; color: #c4d1e5; cursor: pointer; transition: border-color .2s, color .2s, background .2s, transform .2s; }
.icon-button:hover { transform: translateY(-1px); border-color: #477ee0; background: #142039; color: #fff; }
.icon-button svg, .cart-trigger svg, .add-cart-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.cart-trigger { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #3472f2; border-radius: 10px; background: #1f5fe4; color: #fff; font-size: 10px; font-weight: 800; cursor: pointer; transition: background .2s, transform .2s; }
.cart-trigger:hover { transform: translateY(-1px); background: #3978f2; }
.cart-trigger svg { width: 16px; }
.cart-count { min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 4px; border-radius: 7px; background: #fff; color: #1649b0; font-size: 9px; }
.mobile-menu-toggle { display: none; }
.search-panel { position: absolute; z-index: 9; top: calc(100% + 8px); right: max(calc((100vw - 1220px) / 2), 5vw); width: min(400px, calc(100vw - 36px)); display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line-bright); border-radius: 12px; background: #101a2a; box-shadow: 0 20px 50px #0008; }
.search-panel[hidden] { display: none; }
.search-panel label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.search-panel input { min-width: 0; height: 39px; flex: 1; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #090f1a; color: #fff; font-size: 12px; }

.hero-section { position: relative; max-width: 1440px; margin: 0 auto; padding: 30px 5vw 27px; }
.hero-frame { position: relative; min-height: 420px; overflow: hidden; border: 1px solid #28456c; border-radius: 17px; background: radial-gradient(ellipse at 78% 42%, #173c81 0, #102344 30%, #0d1626 67%, #0b111d 100%); box-shadow: 0 22px 70px #0003, 0 0 40px #1c6bff0c; }
.hero-slide { position: absolute; inset: 0; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 25px; padding: 40px 8.5%; opacity: 0; pointer-events: none; transform: translateX(18px); transition: opacity .45s ease, transform .45s ease; }
.hero-slide.is-active { position: relative; opacity: 1; pointer-events: auto; transform: translateX(0); }
.slide-copy { position: relative; z-index: 2; max-width: 470px; }
.slide-kicker, .eyebrow { display: flex; align-items: center; gap: 9px; color: #89bbff; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.slide-kicker i, .eyebrow span { width: 17px; height: 2px; display: inline-block; background: var(--cyan); }
.slide-copy h1 { margin: 19px 0 13px; font-family: var(--font-display); font-size: clamp(39px, 4.8vw, 62px); font-weight: 700; line-height: 1.01; letter-spacing: 0; }
.slide-copy h1 span { color: var(--cyan); text-shadow: 0 0 27px #37bfff51; }
.slide-copy > p { max-width: 395px; margin: 0 0 21px; color: #aebbd0; font-size: 12px; line-height: 1.75; }
.primary-button { min-height: 43px; display: inline-flex; align-items: center; justify-content: space-between; gap: 27px; padding: 0 16px; border: 1px solid #4c88ff; border-radius: 9px; background: linear-gradient(110deg, #2b68f3, #327eff); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .55px; box-shadow: 0 8px 24px #286eff35; cursor: pointer; transition: transform .2s, filter .2s, box-shadow .2s; }
.primary-button:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 12px 29px #286eff52; }
.primary-button span { font-size: 15px; }
.hero-signals { display: flex; flex-wrap: wrap; gap: 13px 19px; margin-top: 24px; color: #96a7c0; font-size: 8px; font-weight: 700; }
.hero-signals span { display: inline-flex; align-items: center; gap: 6px; }
.hero-signals b { color: var(--cyan); font-size: 8px; }
.slide-art { min-height: 300px; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid #5ebdff32; border-radius: 15px; background: linear-gradient(137deg, #163a7a 0%, #0e6bb0 54%, #0b95b0 100%); box-shadow: inset 0 0 65px #5ce1ff12; }
.slide-art::before { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(#d8edff 1px, transparent 1px), linear-gradient(90deg, #d8edff 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse, #000 15%, transparent 82%); content: ""; }
.art-orbit { position: absolute; width: 245px; aspect-ratio: 1; border: 1px solid #b7efff7a; border-radius: 50%; box-shadow: 0 0 40px #20bfff17, inset 0 0 35px #20bfff13; }
.orbit-a { transform: rotateX(64deg) rotate(-25deg); }
.orbit-b { width: 194px; border-style: dashed; border-color: #d5ff797a; transform: rotateX(64deg) rotate(31deg); }
.hero-coin { z-index: 1; width: 125px; aspect-ratio: 1; display: grid; place-items: center; border: 8px solid #e7faff; border-radius: 28px; background: linear-gradient(145deg, #73e7ff, #2780ff 66%, #1550d2); box-shadow: 10px 13px 0 #0c367c, 0 0 46px #4bddff79; transform: rotate(-12deg); animation: coin-hover 5s ease-in-out infinite; }
.hero-coin span { width: 42px; height: 42px; border: 12px solid #f2feff; border-radius: 3px; transform: rotate(45deg); }
.coin-pile { position: absolute; display: flex; flex-direction: column-reverse; align-items: center; }
.coin-pile i { width: 76px; height: 17px; display: block; margin-top: -5px; border: 2px solid #fff0a4; border-radius: 50%; background: linear-gradient(#ffd976 20%, #f4a932 68%, #db8027); box-shadow: inset 0 -3px #d47a26; }
.pile-a { left: 16%; bottom: 74px; transform: rotate(-16deg); }
.pile-b { right: 14%; top: 66px; transform: rotate(13deg) scale(.8); }
.art-cross { position: absolute; z-index: 2; color: #d5ff77; font-size: 25px; text-shadow: 0 0 16px #caff5c; }
.cross-a { top: 34px; left: 40px; }
.cross-b { right: 36px; bottom: 42px; color: #b5f1ff; font-size: 19px; }
.art-caption { position: absolute; right: 14px; bottom: 11px; left: 14px; display: flex; justify-content: space-between; color: #d0eaff; font-size: 7px; font-weight: 800; letter-spacing: 1px; }
.deal-art { background: linear-gradient(142deg, #151d3b, #164eaf 58%, #087fa8); }
.deal-glow { position: absolute; width: 210px; aspect-ratio: 1; border-radius: 50%; background: #2e82ff44; filter: blur(36px); }
.deal-chip { position: absolute; z-index: 1; display: grid; gap: 5px; padding: 13px 17px; border: 1px solid #adceff76; border-radius: 11px; background: #142342c9; box-shadow: 0 14px 28px #061a3a62; transform: rotate(-8deg); }
.deal-chip small { color: #b7ceef; font-size: 8px; font-weight: 800; }
.deal-chip strong { color: #d2ff61; font-family: var(--font-display); font-size: 26px; }
.chip-one { top: 28px; left: 14%; }
.chip-two { z-index: 2; top: 111px; right: 12%; transform: rotate(7deg); }
.chip-three { bottom: 44px; left: 23%; transform: rotate(-2deg); }
.deal-token { position: absolute; top: 69px; left: 43%; width: 86px; aspect-ratio: 1; display: grid; place-items: center; border: 6px solid #deecff; border-radius: 25px; background: #40cfff; color: #12336b; font-family: var(--font-display); font-size: 43px; font-weight: 700; transform: rotate(14deg); }
.methods-art { background: linear-gradient(140deg, #131d38, #15468b 58%, #0b879a); }
.method-path { position: absolute; width: 74%; height: 42%; border-top: 1px dashed #9fe8ff94; border-radius: 50%; transform: rotate(-13deg); }
.method-orb { z-index: 1; position: absolute; width: 82px; display: grid; justify-items: center; gap: 6px; }
.method-orb > span { width: 65px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #e8f6ff; border-radius: 19px; background: linear-gradient(140deg, #55cfff, #386bff); color: #fff; font-family: var(--font-display); font-size: 28px; font-weight: 700; box-shadow: 0 10px 27px #061b3b85, 0 0 25px #56dfff40; transform: rotate(-8deg); }
.method-orb small { color: #d8e8ff; font-size: 7px; font-weight: 800; letter-spacing: .7px; }
.orb-plus { top: 30px; left: 14%; }
.orb-alt { top: 112px; left: calc(50% - 41px); }
.orb-alt > span { background: linear-gradient(140deg, #d7ff6b, #68bb63); color: #173022; transform: rotate(8deg); }
.orb-pass { top: 32px; right: 12%; }
.orb-pass > span { background: linear-gradient(140deg, #ffad76, #ef5c72); transform: rotate(9deg); }
.carousel-arrow { position: absolute; z-index: 3; top: 50%; width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid #8cb9fa45; border-radius: 50%; background: #0a1424b8; color: #e5f1ff; cursor: pointer; transform: translateY(-50%); transition: background .2s, border-color .2s; }
.carousel-arrow:hover { border-color: #66dfff; background: #1f5ee8; }
.carousel-arrow svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.carousel-arrow.previous { left: 11px; }
.carousel-arrow.next { right: 11px; }
.carousel-dots { display: flex; justify-content: center; gap: 7px; margin-top: 15px; }
.carousel-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: #34445d; cursor: pointer; transition: width .25s, background .25s; }
.carousel-dot.is-active { width: 24px; background: var(--blue); }

.trust-strip { display: flex; justify-content: center; gap: clamp(30px, 7vw, 105px); padding: 21px 5vw; border-top: 1px solid #ffffff08; border-bottom: 1px solid #ffffff0a; background: #0b111c; }
.trust-strip > div { display: flex; align-items: center; gap: 11px; }
.trust-mark { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid #316ee453; border-radius: 10px; background: #142447; color: #8fbcff; font-size: 9px; font-weight: 800; }
.trust-cyan { border-color: #37b5d351; background: #10313e; color: #74e9ff; }
.trust-lime { border-color: #99c93455; background: #24341c; color: #d2ff74; }
.trust-strip strong, .trust-strip small { display: block; }
.trust-strip strong { font-size: 10px; }
.trust-strip small { margin-top: 4px; color: #8291a8; font-size: 8px; }

.section-wrap { width: min(1160px, calc(100% - 10vw)); margin-right: auto; margin-left: auto; }
.catalog { padding-top: 76px; padding-bottom: 81px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.eyebrow { margin: 0; }
.eyebrow > span { width: 15px; height: 2px; background: var(--cyan); }
.section-heading h2, .faq-heading h2 { margin: 12px 0 0; font-family: var(--font-display); font-size: clamp(26px, 3vw, 35px); line-height: 1.12; letter-spacing: 0; }
.section-heading h2 span { color: var(--cyan); }
.section-aside { max-width: 260px; margin: 0 0 3px; color: #98a8bf; font-size: 10px; line-height: 1.7; }
.catalog-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 27px; padding-bottom: 15px; border-bottom: 1px solid #202b3b; }
.method-switch { display: flex; flex-wrap: wrap; gap: 7px; }
.method-tab { min-height: 37px; display: inline-flex; align-items: center; gap: 11px; padding: 0 12px; border: 1px solid #28364a; border-radius: 9px; background: #0d1420; color: #acb9cc; font-size: 10px; font-weight: 800; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.method-tab small { color: #8091a9; font-size: 8px; font-weight: 600; }
.method-tab:hover { border-color: #4a83ee; color: #fff; }
.method-tab.is-active { border-color: #397eff; background: #173674; color: #fff; box-shadow: 0 0 18px #2367f51a; }
.method-tab.is-active small { color: #b9d5ff; }
.catalog-note { color: #74839a; font-size: 8px; text-align: right; }
.products-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-top: 18px; }
.package-card { min-width: 0; overflow: hidden; border: 1px solid #243249; border-radius: 14px; background: linear-gradient(180deg, #111a29, #0d1420 80%); box-shadow: 0 10px 24px #00000020; animation: card-in .35s both; animation-delay: calc(var(--card-index) * 55ms); transition: transform .22s, border-color .22s, box-shadow .22s; }
.package-card[hidden] { display: none; }
.package-card:hover { transform: translateY(-4px); border-color: #4a80d3; box-shadow: 0 18px 38px #0005, 0 0 25px #286cff16; }
.package-card.is-featured { border-color: #3268c7; }
.package-topline { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 9px 12px; color: #97a8c0; font-size: 7px; font-weight: 800; letter-spacing: .55px; }
.package-badge { max-width: 62%; overflow: hidden; padding: 4px 6px; border: 1px solid #325175; border-radius: 4px; background: #17263a; color: #b7d9ff; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.package-badge.sale-badge { border-color: #7f6a38; background: #302918; color: #ffe08a; }
.package-art { height: 118px; position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 68%, #225ab4 0, #143565 39%, #102038 78%); }
.package-art::before { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(#b9d9ff22 1px, transparent 1px), linear-gradient(90deg, #b9d9ff22 1px, transparent 1px); background-size: 18px 18px; content: ""; }
.package-card:nth-child(2) .package-art { background: radial-gradient(ellipse at 52% 65%, #317dce 0, #163b69 42%, #102038 80%); }
.package-card:nth-child(3) .package-art { background: radial-gradient(ellipse at 50% 60%, #42439c 0, #272849 43%, #121a2b 80%); }
.package-card:nth-child(4) .package-art { background: radial-gradient(ellipse at 50% 63%, #276e9f 0, #17425f 42%, #101d2a 80%); }
.package-art-ring { position: absolute; width: 113px; aspect-ratio: 1; border: 1px dashed #a2d9ff80; border-radius: 50%; box-shadow: 0 0 0 12px #7bc4ff0c, 0 0 30px #318cff44; transform: rotateX(62deg) rotate(-14deg); }
.package-art-coin { z-index: 1; width: 55px; aspect-ratio: 1; display: grid; place-items: center; border: 4px solid #e9f8ff; border-radius: 15px; background: linear-gradient(140deg, #70ddff, #3479f7); box-shadow: 5px 7px 0 #17459a, 0 0 24px #46cfff77; transform: rotate(-11deg); }
.package-art-coin span { width: 21px; height: 21px; border: 6px solid #f1fdff; border-radius: 2px; transform: rotate(45deg); }
.package-amount-label { position: absolute; z-index: 2; right: 13px; bottom: 12px; display: grid; color: #fff; font-family: var(--font-display); font-size: 13px; font-weight: 700; text-align: right; text-shadow: 0 1px 8px #0009; }
.package-amount-label small { margin-top: 2px; color: #b6d8f8; font-family: var(--font-body); font-size: 7px; letter-spacing: 1.1px; }
.package-art-caption { position: absolute; top: 11px; left: 12px; color: #b0cae9; font-size: 6px; font-weight: 800; letter-spacing: 1px; }
.package-details { padding: 13px 12px 12px; }
.package-title-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.package-method { color: #7bb6ff; font-size: 7px; font-weight: 800; letter-spacing: .8px; }
.package-title-row h3 { margin: 3px 0 0; font-family: var(--font-display); font-size: 15px; line-height: 1.2; }
.delivery-mark { width: 25px; height: 25px; display: grid; flex: none; place-items: center; border: 1px solid #31527d; border-radius: 7px; background: #162641; color: var(--cyan); font-size: 14px; }
.package-details > p { min-height: 31px; margin: 7px 0 11px; color: #92a0b5; font-size: 8px; line-height: 1.55; }
.package-price-row { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 9px 0; border-top: 1px solid #202c3c; }
.package-price-row > div { min-width: 0; display: grid; gap: 2px; }
.package-price-row strong { font-family: var(--font-display); font-size: 17px; line-height: 1.1; }
.package-price-row small, .old-price { color: #8492a7; font-size: 7px; }
.old-price { text-decoration: line-through; }
.savings { color: #d1f882; font-size: 7px; }
.discount-pill { flex: none; padding: 5px 6px; border: 1px solid #364c34; border-radius: 5px; background: #192b20; color: #d1f882; font-size: 7px; font-weight: 800; }
.package-actions { display: grid; grid-template-columns: 1fr 36px; gap: 7px; margin-top: 5px; }
.buy-button, .add-cart-button { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #397bff; border-radius: 8px; background: #225fdf; color: #fff; font-size: 8px; font-weight: 800; letter-spacing: .5px; cursor: pointer; transition: transform .16s, background .16s, box-shadow .16s; }
.buy-button:hover, .add-cart-button:hover { transform: translateY(-1px); background: #367bff; box-shadow: 0 7px 19px #226dff35; }
.buy-button:active, .add-cart-button:active { transform: scale(.97); }
.buy-button span { font-size: 13px; }
.add-cart-button { border-color: #31415a; background: #151f2e; color: #b9cae2; }
.add-cart-button svg { width: 15px; }
.no-results { margin: 25px 0 0; color: var(--muted); font-size: 12px; }
.no-results[hidden] { display: none; }

.discount-section { padding: 57px 5vw; border-top: 1px solid #ffffff09; border-bottom: 1px solid #ffffff09; background: radial-gradient(ellipse at 86% 60%, #112957 0, #0b1321 39%, #0a0f19 76%); }
.discount-inner { width: min(1120px, 100%); display: grid; grid-template-columns: 1fr .78fr; align-items: center; gap: 55px; margin: auto; }
.discount-copy h2 { margin: 15px 0 12px; font-family: var(--font-display); font-size: clamp(27px, 3.1vw, 37px); line-height: 1.12; }
.discount-copy h2 span { color: var(--cyan); }
.discount-copy > p:not(.eyebrow) { max-width: 455px; margin: 0; color: #97a7bf; font-size: 10px; line-height: 1.8; }
.text-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 17px; color: #9bdfff; font-size: 9px; font-weight: 800; }
.text-link:hover { color: #fff; }
.discount-ladder { display: grid; gap: 8px; padding: 17px; border: 1px solid #2c4c7d; border-radius: 13px; background: #101c2d; box-shadow: 0 0 33px #126dff16; }
.discount-ladder > div { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-bottom: 1px solid #253750; }
.discount-ladder > div:last-of-type { border-bottom: 0; }
.discount-ladder span { color: #a9b9d0; font-size: 9px; font-weight: 800; letter-spacing: .4px; }
.discount-ladder strong { color: #d2fb73; font-family: var(--font-display); font-size: 19px; }
.discount-ladder small { padding: 7px 10px 0; color: #7f91aa; font-size: 7px; }

.why-section { padding-top: 74px; padding-bottom: 76px; }
.benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.benefit-grid article { min-height: 150px; padding: 16px; border: 1px solid #202d40; border-radius: 12px; background: linear-gradient(155deg, #101927, #0d1420); transition: border-color .2s, transform .2s; }
.benefit-grid article:hover { transform: translateY(-3px); border-color: #3d70bb; }
.benefit-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #345da0; border-radius: 8px; background: #172c51; color: #8ebaff; font-size: 16px; }
.benefit-icon.cyan { border-color: #276b7c; background: #12323e; color: var(--cyan); }
.benefit-icon.lime { border-color: #536a30; background: #29351d; color: #dbfa82; }
.benefit-icon.violet { border-color: #55417b; background: #28203d; color: #c0a3ff; }
.benefit-grid h3 { margin: 14px 0 6px; font-size: 10px; }
.benefit-grid p { margin: 0; color: #8998ae; font-size: 8px; line-height: 1.7; }

.faq-section { padding: 57px 0 66px; border-top: 1px solid #ffffff09; background: #0b1019; }
.faq-inner { display: grid; grid-template-columns: .8fr 1fr; gap: 70px; }
.faq-heading h2 { font-size: 28px; }
.faq-heading > p:last-child { max-width: 285px; color: #8d9ab0; font-size: 9px; line-height: 1.75; }
.faq-list details { border-top: 1px solid #263246; }
.faq-list details:last-child { border-bottom: 1px solid #263246; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; color: #e0e8f5; font-size: 9px; font-weight: 700; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--cyan); font-size: 15px; transition: transform .2s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: -3px 0 14px; color: #96a5bb; font-size: 8px; line-height: 1.75; }

.site-footer { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 24px; padding: 34px max(calc((100vw - 1160px) / 2), 5vw) 14px; border-top: 1px solid #263143; background: #080c13; }
.footer-main > p { margin: 10px 0; color: #8795a9; font-size: 9px; }
.footer-social { display: flex; gap: 7px; }
.footer-social button { padding: 5px 7px; border: 1px solid #27364e; border-radius: 5px; background: #101824; color: #9eb1cc; font-size: 7px; cursor: pointer; }
.footer-column { display: grid; align-content: start; gap: 9px; }
.footer-column > strong { margin-bottom: 2px; color: #e6edf7; font-size: 9px; }
.footer-column a, .footer-column button, .footer-column span { width: max-content; padding: 0; border: 0; background: none; color: #8795aa; font-size: 8px; text-align: left; cursor: pointer; }
.footer-column a:hover, .footer-column button:hover { color: var(--cyan); }
.footer-column small { max-width: 150px; color: #65748b; font-size: 7px; line-height: 1.6; }
.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 15px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #1e2837; color: #647187; font-size: 7px; }

.drawer-backdrop { position: fixed; z-index: 19; inset: 0; background: #030711c9; backdrop-filter: blur(3px); animation: fade-in .2s both; }
.cart-drawer { position: fixed; z-index: 20; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; padding: 25px; border-left: 1px solid #2a3b56; background: #0d1420; box-shadow: -22px 0 65px #0007; transform: translateX(102%); transition: transform .28s ease; }
.cart-drawer.is-open { transform: translateX(0); }
.drawer-head { display: flex; align-items: start; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid #243249; }
.drawer-head .eyebrow { color: #80b3ff; font-size: 8px; }
.drawer-head h2 { margin: 7px 0 0; font-family: var(--font-display); font-size: 22px; }
.drawer-head h2 small { margin-left: 5px; color: #8695ad; font-family: var(--font-body); font-size: 9px; font-weight: 600; }
.cart-items { overflow-y: auto; }
.cart-line { display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid #253146; }
.cart-line-art { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #3673df; border-radius: 9px; background: #183565; color: #86e9ff; font-size: 19px; }
.cart-line-art.alt { border-color: #799b3e; background: #29391d; color: #d8fa83; }
.cart-line-art.gamepass { border-color: #a65362; background: #3d202d; color: #ff9bb2; }
.cart-line-details > span, .cart-line-details > small { display: block; }
.cart-line-details > span { font-size: 9px; font-weight: 800; }
.cart-line-details > small { margin-top: 4px; color: #8797af; font-size: 7px; }
.cart-line > strong { font-size: 9px; }
.quantity-control { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.quantity-control button { width: 22px; height: 22px; border: 1px solid #32435d; border-radius: 6px; background: #141f30; color: #e9f2ff; font-size: 13px; cursor: pointer; }
.quantity-control > span { min-width: 11px; color: #ccd9eb; font-size: 8px; text-align: center; }
.quantity-control .remove-item { width: auto; margin-left: 3px; padding: 0 4px; border: 0; background: transparent; color: #e98a9e; font-size: 7px; }
.cart-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cart-empty[hidden], .cart-summary[hidden] { display: none; }
.empty-bag { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #38598d; border-radius: 14px; background: #17294a; color: var(--cyan); font-size: 24px; }
.cart-empty strong { margin-top: 14px; font-size: 11px; }
.cart-empty p { color: #8b9ab0; font-size: 8px; }
.cart-empty .text-link { border: 0; background: none; cursor: pointer; }
.cart-summary { margin-top: auto; padding-top: 15px; border-top: 1px solid #26344a; }
.cart-summary > div, .checkout-totals > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; color: #aebbd0; font-size: 9px; }
.cart-summary > div strong, .checkout-totals > div strong { color: #f5f8ff; font-size: 10px; }
.cart-summary .discount-value, .checkout-totals .discount-value { color: #d3f889; }
.cart-summary .cart-total, .checkout-grand-total { margin-top: 6px; padding-top: 12px; border-top: 1px solid #2b3950; color: #fff; font-weight: 800; }
.cart-summary .cart-total strong, .checkout-grand-total strong { font-size: 16px; }
.cart-summary > p { margin: 8px 0 12px; color: #7f8da3; font-size: 7px; }
.full-button { width: 100%; }

.checkout-dialog, .info-dialog { position: fixed; width: min(490px, calc(100% - 28px)); max-height: min(90vh, 780px); overflow-y: auto; padding: 25px; border: 1px solid #304768; border-radius: 16px; background: #0f1725; color: var(--text); box-shadow: 0 28px 90px #0009, 0 0 35px #287bff17; }
.checkout-dialog::backdrop, .info-dialog::backdrop { background: #030711d9; backdrop-filter: blur(4px); }
.checkout-dialog[open], .info-dialog[open] { animation: dialog-enter .2s ease-out both; }
.checkout-dialog form { display: grid; }
.dialog-close { position: absolute; top: 17px; right: 17px; }
.checkout-dialog .eyebrow, .info-dialog .eyebrow { padding-right: 40px; color: #86b8ff; font-size: 8px; }
.checkout-dialog h2, .info-dialog h2 { margin: 13px 0 7px; font-family: var(--font-display); font-size: 24px; }
.dialog-disclaimer { margin: 0 0 13px; color: #98a8bf; font-size: 8px; line-height: 1.65; }
.checkout-items { display: grid; gap: 7px; max-height: 150px; overflow-y: auto; padding: 7px 0; }
.checkout-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 10px; border: 1px solid #25364f; border-radius: 8px; background: #121e30; }
.checkout-item span, .checkout-item small { display: block; }
.checkout-item strong, .checkout-item b { font-size: 9px; }
.checkout-item small { margin-top: 4px; color: #8b9bb2; font-size: 7px; }
.checkout-totals { margin: 5px 0 13px; padding: 6px 0; border-bottom: 1px solid #28374d; }
.checkout-grand-total strong { font-size: 15px !important; }
.field-label { margin: 2px 0 6px; font-size: 8px; font-weight: 800; }
.field-label small { color: #8292a9; font-size: 7px; font-weight: 500; }
.text-input { height: 39px; padding: 0 11px; border: 1px solid #2b3d58; border-radius: 8px; background: #0a101b; color: #fff; font-size: 9px; }
.text-input::placeholder { color: #75859c; }
.payment-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 13px 0; padding: 0; border: 0; }
.payment-options legend { margin-bottom: 7px; color: #e4ebf6; font-size: 8px; font-weight: 800; }
.payment-options legend small { color: #8392a9; font-weight: 500; }
.payment-options label { cursor: pointer; }
.payment-options input { position: absolute; opacity: 0; }
.payment-option { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 0 10px; border: 1px solid #2c3b52; border-radius: 8px; background: #121c2a; }
.payment-options input:checked + .payment-option { border-color: #3979f5; background: #162c50; box-shadow: inset 0 0 0 1px #3979f533; }
.payment-option b { font-size: 8px; }
.payment-option small { color: #8493a9; font-size: 7px; }
.consent-label { display: flex; align-items: start; gap: 7px; margin: 0 0 13px; color: #9aa9be; font-size: 7px; line-height: 1.5; }
.consent-label input { margin: 1px 0 0; accent-color: var(--blue); }
.info-dialog { width: min(390px, calc(100% - 28px)); padding-top: 28px; }
.info-dialog > p { color: #9aa9be; font-size: 9px; line-height: 1.75; }
.secondary-button { min-height: 37px; margin-top: 9px; padding: 0 13px; border: 1px solid #344966; border-radius: 8px; background: #152239; color: #dce9fa; font-size: 8px; font-weight: 800; cursor: pointer; }
.toast { position: fixed; z-index: 30; right: 18px; bottom: 18px; max-width: min(360px, calc(100% - 36px)); padding: 12px 15px; border: 1px solid #395c91; border-radius: 10px; background: #14213a; color: #f5f8ff; font-size: 9px; line-height: 1.6; box-shadow: 0 12px 35px #0007; opacity: 0; pointer-events: none; transform: translateY(9px); transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

@keyframes coin-hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes card-in { from { opacity: 0; translate: 0 9px; } to { opacity: 1; translate: 0 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-enter { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 1060px) {
  .site-header { gap: 19px; padding-right: 4vw; padding-left: 4vw; }
  .main-nav { gap: 19px; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .package-art { height: 130px; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 78px; }
  .promo-bar { min-height: 27px; gap: 0; padding: 4px 8px; font-size: 7px; letter-spacing: .4px; }
  .preview-tag { display: none; }
  .site-header { min-height: 62px; grid-template-columns: 36px 1fr auto; gap: 8px; padding: 0 12px; }
  .mobile-menu-toggle { width: 34px; height: 34px; display: inline-grid; }
  .site-header > .brand { grid-column: 2; grid-row: 1; }
  .site-header > .mobile-menu-toggle { grid-column: 1; grid-row: 1; }
  .site-header > .header-actions { grid-column: 3; grid-row: 1; }
  .mobile-menu-toggle svg { width: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
  .brand { gap: 7px; font-size: 18px; }
  .brand-symbol { width: 27px; height: 27px; border-radius: 8px; }
  .header-actions { gap: 5px; }
  .header-actions > .icon-button { width: 32px; height: 32px; border-radius: 9px; }
  .header-actions > .icon-button svg { width: 15px; }
  .cart-trigger { width: 36px; height: 34px; min-height: 34px; justify-content: center; padding: 0 4px; border-radius: 9px; }
  .cart-word { display: none; }
  .cart-count { position: absolute; min-width: 15px; height: 15px; margin: -24px 0 0 22px; border: 1px solid #0b1422; border-radius: 6px; font-size: 7px; }
  .main-nav { position: absolute; z-index: 9; top: calc(100% + 1px); right: 0; left: 0; display: none; gap: 0; padding: 7px 14px 13px; border-bottom: 1px solid #293b57; background: #0d1421; box-shadow: 0 15px 24px #0007; }
  .main-nav.menu-open { display: grid; }
  .nav-link { padding: 12px 6px; border-bottom: 1px solid #1c293b; font-size: 10px; }
  .nav-link.active { box-shadow: none; color: var(--cyan); }
  .search-panel { top: calc(100% + 7px); right: 10px; width: calc(100vw - 20px); }
  .hero-section { padding: 14px 12px 17px; }
  .hero-frame { min-height: 0; border-radius: 14px; }
  .hero-slide { grid-template-columns: 1fr; gap: 16px; padding: 23px 18px 18px; }
  .slide-copy { max-width: none; }
  .slide-kicker { font-size: 8px; }
  .slide-copy h1 { margin: 13px 0 8px; font-size: clamp(32px, 9vw, 43px); }
  .slide-copy > p { max-width: 390px; margin-bottom: 14px; font-size: 10px; line-height: 1.65; }
  .primary-button { min-height: 39px; padding: 0 13px; font-size: 8px; }
  .hero-signals { gap: 7px 12px; margin-top: 13px; font-size: 7px; }
  .hero-signals span { gap: 4px; }
  .hero-signals b { font-size: 7px; }
  .slide-art { min-height: clamp(150px, 43vw, 215px); border-radius: 11px; }
  .hero-coin { width: 83px; border-width: 6px; border-radius: 21px; }
  .hero-coin span { width: 30px; height: 30px; border-width: 9px; }
  .art-orbit { width: 175px; }
  .orbit-b { width: 139px; }
  .coin-pile i { width: 57px; height: 14px; }
  .pile-a { left: 11%; bottom: 42px; }
  .pile-b { right: 9%; top: 39px; }
  .cross-a { top: 17px; left: 19px; font-size: 18px; }
  .cross-b { right: 18px; bottom: 31px; font-size: 15px; }
  .art-caption { right: 9px; bottom: 8px; left: 9px; font-size: 6px; }
  .carousel-arrow { top: auto; bottom: 11px; width: 27px; height: 27px; transform: none; }
  .carousel-arrow svg { width: 14px; }
  .carousel-arrow.previous { left: 10px; }
  .carousel-arrow.next { right: 10px; }
  .carousel-dots { margin-top: 10px; }
  .trust-strip { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 13px 17px; }
  .trust-mark { width: 29px; height: 29px; border-radius: 8px; font-size: 8px; }
  .trust-strip strong { font-size: 8px; }
  .trust-strip small { margin-top: 2px; font-size: 7px; }
  .section-wrap { width: calc(100% - 32px); }
  .catalog { padding-top: 43px; padding-bottom: 48px; }
  .section-heading { align-items: start; flex-direction: column; gap: 8px; }
  .section-heading h2 { margin-top: 8px; font-size: 27px; }
  .section-aside { font-size: 9px; }
  .catalog-controls { align-items: start; flex-direction: column; gap: 9px; margin-top: 18px; padding-bottom: 12px; }
  .method-switch { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .method-tab { min-height: 42px; flex-direction: column; justify-content: center; gap: 2px; padding: 3px; border-radius: 8px; font-size: 9px; }
  .method-tab small { font-size: 7px; }
  .catalog-note { font-size: 7px; text-align: left; }
  .products-grid { grid-template-columns: 1fr; gap: 11px; padding-top: 13px; }
  .package-card { display: grid; grid-template-columns: 39% 1fr; border-radius: 12px; }
  .package-card[hidden] { display: none; }
  .package-topline { min-height: 31px; grid-column: 1 / -1; padding: 7px 10px; font-size: 7px; }
  .package-art { height: auto; min-height: 177px; grid-row: 2; }
  .package-art-ring { width: 88px; }
  .package-art-coin { width: 46px; border-radius: 13px; }
  .package-art-coin span { width: 18px; height: 18px; border-width: 5px; }
  .package-amount-label { right: 7px; bottom: 9px; font-size: 10px; }
  .package-amount-label small { font-size: 6px; }
  .package-art-caption { top: 8px; left: 8px; font-size: 5px; }
  .package-details { min-width: 0; grid-row: 2; padding: 9px 9px 9px 11px; }
  .package-method { font-size: 6px; }
  .package-title-row h3 { font-size: 12px; }
  .delivery-mark { width: 21px; height: 21px; }
  .package-details > p { min-height: 28px; margin: 5px 0 7px; font-size: 7px; }
  .package-price-row { min-height: 37px; padding: 6px 0; }
  .package-price-row strong { font-size: 15px; }
  .package-price-row small, .old-price, .savings { font-size: 6px; }
  .discount-pill { padding: 4px; font-size: 6px; }
  .package-actions { grid-template-columns: 1fr 31px; gap: 5px; margin-top: 4px; }
  .buy-button, .add-cart-button { min-height: 32px; border-radius: 7px; font-size: 7px; }
  .add-cart-button { width: 31px; }
  .add-cart-button svg { width: 13px; }
  .discount-section { padding: 34px 16px; }
  .discount-inner { grid-template-columns: 1fr; gap: 18px; }
  .discount-copy h2 { margin: 11px 0 8px; font-size: 26px; }
  .discount-copy > p:not(.eyebrow) { font-size: 9px; }
  .discount-ladder { gap: 4px; padding: 10px; border-radius: 11px; }
  .discount-ladder > div { padding: 8px; }
  .discount-ladder span { font-size: 8px; }
  .discount-ladder strong { font-size: 16px; }
  .discount-ladder small { padding: 5px 8px 0; font-size: 6px; }
  .why-section { padding-top: 45px; padding-bottom: 48px; }
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 17px; }
  .benefit-grid article { min-height: 124px; padding: 11px; border-radius: 10px; }
  .benefit-icon { width: 27px; height: 27px; border-radius: 7px; }
  .benefit-grid h3 { margin-top: 10px; font-size: 8px; }
  .benefit-grid p { font-size: 7px; }
  .faq-section { padding: 40px 0 45px; }
  .faq-inner { grid-template-columns: 1fr; gap: 15px; }
  .faq-heading h2 { font-size: 24px; }
  .faq-heading > p:last-child { margin-bottom: 0; font-size: 8px; }
  .faq-list summary { padding: 12px 0; font-size: 8px; }
  .faq-list details p { font-size: 7px; }
  .site-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 15px; padding: 25px 18px 12px; }
  .footer-main { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 6px; font-size: 7px; }
  .cart-drawer { width: min(420px, 100%); padding: 19px; }
  .checkout-dialog, .info-dialog { padding: 21px 17px; border-radius: 13px; }
}

.activity-section { padding-top: 57px; padding-bottom: 63px; }
.activity-section .section-heading { align-items: end; }
.activity-section .section-heading h2 span { color: var(--cyan); }
.activity-demo-mark { padding: 6px 9px; border: 1px solid #42659a; border-radius: 5px; background: #142440; color: #a9c9f6; font-size: 7px; font-weight: 800; letter-spacing: .7px; }
.activity-disclaimer { max-width: 650px; margin: 12px 0 0; color: #8f9eb3; font-size: 9px; line-height: 1.7; }
.activity-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-top: 20px; }
.activity-card { min-width: 0; padding: 14px; border: 1px solid #263955; border-radius: 11px; background: linear-gradient(150deg, #111b2b, #0c1420 82%); box-shadow: 0 8px 20px #0002; animation: card-in .32s both; animation-delay: calc(var(--activity-index) * 45ms); transition: transform .2s, border-color .2s, box-shadow .2s; }
.activity-card:hover { transform: translateY(-3px); border-color: #4778be; box-shadow: 0 13px 27px #0004, 0 0 20px #2878ff14; }
.activity-card-top { display: flex; align-items: start; justify-content: space-between; gap: 6px; }
.activity-alias { overflow: hidden; color: #eff5ff; font-family: var(--font-display); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.activity-example-badge { flex: none; padding: 4px 5px; border: 1px solid #354866; border-radius: 4px; background: #152237; color: #9db4d3; font-size: 6px; font-weight: 800; letter-spacing: .35px; }
.activity-stars { margin-top: 11px; color: #ffd76b; font-size: 13px; letter-spacing: 1px; line-height: 1; }
.activity-card blockquote { min-height: 40px; margin: 9px 0 13px; color: #b0bdd0; font-size: 8px; line-height: 1.7; }
.activity-order { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 8px; padding-top: 10px; border-top: 1px solid #223047; }
.activity-order strong { color: #e9f3ff; font-size: 8px; }
.activity-order span { color: #8cadd4; font-size: 7px; }
.activity-refresh-note { display: flex; align-items: center; gap: 7px; margin: 13px 0 0; color: #77889f; font-size: 7px; }
.activity-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #88baff; box-shadow: 0 0 8px #4590ff7d; }

@media (max-width: 1060px) {
  .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .activity-section { padding-top: 43px; padding-bottom: 45px; }
  .activity-section .section-heading { align-items: start; }
  .activity-section .section-heading h2 { max-width: 280px; font-size: 24px; }
  .activity-demo-mark { margin-top: 3px; font-size: 6px; }
  .activity-disclaimer { margin-top: 9px; font-size: 8px; }
  .activity-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
  .activity-card { padding: 12px; border-radius: 10px; }
  .activity-alias { font-size: 10px; }
  .activity-example-badge { font-size: 6px; }
  .activity-stars { margin-top: 8px; font-size: 12px; }
  .activity-card blockquote { min-height: 0; margin: 7px 0 10px; font-size: 8px; }
  .activity-order { padding-top: 8px; }
  .activity-refresh-note { font-size: 7px; line-height: 1.6; }
}

@media (max-width: 360px) {
  .site-header { grid-template-columns: 32px 1fr auto; gap: 5px; padding: 0 8px; }
  .brand { gap: 5px; font-size: 16px; }
  .brand-symbol { width: 24px; height: 24px; }
  .header-actions { gap: 3px; }
  .header-actions > .icon-button { width: 29px; height: 31px; }
  .cart-trigger { width: 33px; }
  .method-tab small { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.delivery-section { padding-top: 64px; padding-bottom: 60px; }
.delivery-section .section-heading h2 { max-width: 600px; }
.delivery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.delivery-card { min-width: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 18px; border: 1px solid #29466e; border-radius: 13px; background: linear-gradient(150deg, #111c2d, #0c1420 76%); box-shadow: 0 10px 30px #0002; transition: transform .22s, border-color .22s, box-shadow .22s; }
.delivery-card::before { position: absolute; top: -65px; right: -50px; width: 160px; aspect-ratio: 1; border-radius: 50%; background: #2676ff1a; filter: blur(20px); content: ""; pointer-events: none; }
.delivery-card:hover { transform: translateY(-4px); border-color: #4e8df0; box-shadow: 0 16px 36px #0004, 0 0 25px #327bff16; }
.delivery-card-head { position: relative; display: flex; align-items: center; gap: 9px; min-height: 37px; }
.delivery-icon { width: 36px; height: 36px; display: grid; flex: none; place-items: center; border: 1px solid #3c75cc; border-radius: 10px; background: #17325d; color: #8cecff; font-family: var(--font-display); font-size: 20px; font-weight: 700; box-shadow: 0 0 18px #347eff20; }
.alt-icon { border-color: #65893a; background: #25351e; color: #d5f58a; }
.gamepass-icon { border-color: #944c68; background: #3b2034; color: #ff9cbc; }
.gamepass-icon svg { width: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.delivery-kicker { color: #96b7e5; font-size: 9px; font-weight: 800; letter-spacing: .8px; }
.delivery-chip { margin-left: auto; padding: 5px 7px; border: 1px solid #2d4d77; border-radius: 5px; background: #13233a; color: #a9c7ef; font-size: 7px; font-weight: 800; letter-spacing: .45px; text-align: center; }
.alt-method .delivery-chip { border-color: #526b36; background: #1e2b1b; color: #c9e99a; }
.gamepass-method .delivery-chip { border-color: #714158; background: #2d1c2a; color: #f2a5bd; }
.delivery-card h3 { position: relative; margin: 19px 0 8px; font-family: var(--font-display); font-size: 18px; }
.delivery-card > p:not(.alt-instruction) { min-height: 77px; margin: 0; color: #a6b4c8; font-size: 10px; line-height: 1.75; }
.delivery-highlight { display: grid; gap: 5px; margin-top: 15px; padding: 11px 12px; border: 1px solid #263d5d; border-radius: 8px; background: #101d30; }
.delivery-highlight strong { color: #b4eaff; font-family: var(--font-display); font-size: 14px; }
.delivery-highlight span { color: #95a6bc; font-size: 9px; line-height: 1.65; }
.alt-method .delivery-highlight { border-color: #3c5732; background: #172318; }
.alt-method .delivery-highlight strong { color: #d5f58a; }
.gamepass-method .delivery-highlight { border-color: #593447; background: #211722; }
.gamepass-method .delivery-highlight strong { color: #ffabc0; }
.delivery-card .alt-instruction { margin: 9px 0 0; padding-left: 9px; border-left: 2px solid #9abe55; color: #b9ca9c; font-size: 8px; line-height: 1.6; }
.delivery-link { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 36px; margin-top: auto; padding-top: 13px; color: #9ecbff; font-size: 9px; font-weight: 800; }
.delivery-link span { font-size: 14px; transition: transform .18s; }
.delivery-link:hover { color: #fff; }
.delivery-link:hover span { transform: translateX(3px); }
.delivery-note { display: flex; align-items: start; gap: 8px; margin: 14px 0 0; color: #8292a8; font-size: 9px; line-height: 1.65; }
.delivery-note span { width: 15px; height: 15px; display: grid; flex: none; place-items: center; border: 1px solid #32465f; border-radius: 50%; color: #9bc8ff; font-size: 8px; }

@media (max-width: 1060px) {
  .delivery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delivery-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .delivery-section { padding-top: 45px; padding-bottom: 43px; }
  .delivery-section .section-heading h2 { max-width: 360px; font-size: 25px; }
  .delivery-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 17px; }
  .delivery-card, .delivery-card:last-child { grid-column: auto; padding: 14px; border-radius: 12px; }
  .delivery-card-head { gap: 8px; }
  .delivery-icon { width: 33px; height: 33px; border-radius: 9px; }
  .delivery-kicker { font-size: 9px; }
  .delivery-chip { max-width: 125px; padding: 5px 6px; font-size: 7px; }
  .delivery-card h3 { margin: 13px 0 7px; font-size: 16px; }
  .delivery-card > p:not(.alt-instruction) { min-height: 0; font-size: 10px; line-height: 1.7; }
  .delivery-highlight { margin-top: 12px; padding: 10px 11px; }
  .delivery-highlight strong { font-size: 13px; }
  .delivery-highlight span { font-size: 9px; }
  .delivery-card .alt-instruction { font-size: 9px; }
  .delivery-link { min-height: 35px; padding-top: 10px; font-size: 9px; }
  .delivery-note { font-size: 9px; }
}