:root {
  --blue: #00a7ff;
  --navy: #f9f7ff;
  --ink: #f4f1ff;
  --muted: #aaa2c6;
  --line: rgba(255, 255, 255, .11);
  --bg: #020817;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 133, 255, .24), transparent 27rem),
    radial-gradient(circle at 88% 18%, rgba(0, 229, 255, .12), transparent 22rem),
    #0c0918;
  color: var(--ink);
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

.nav { background: rgba(12, 9, 24, .76); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.logo { color: #fff; letter-spacing: -.8px; }
.logo i { background: linear-gradient(135deg, #35d1ff, #006eff); box-shadow: 0 0 22px rgba(0, 150, 255, .52); }
.navlinks { color: #c8c0dc; }
.navlinks span { cursor: pointer; transition: color .2s ease; }
.navlinks span:hover { color: #fff; }

.login { color: #f7edff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); }
.primary { background: linear-gradient(135deg, #12c8ff, #006cff); box-shadow: 0 13px 28px rgba(0, 123, 255, .32); transition: transform .2s ease, box-shadow .2s ease; }
.primary:hover { transform: translateY(-2px); box-shadow: 0 18px 35px rgba(0, 123, 255, .48); }

.hero { min-height: 430px; background: transparent; position: relative; }
.hero:after { content: "FERDISTORE"; position: absolute; right: -1vw; bottom: -3vw; color: transparent; -webkit-text-stroke: 1px rgba(214, 182, 255, .13); font-size: clamp(66px, 12vw, 180px); font-weight: 800; letter-spacing: -.09em; pointer-events: none; }
.hero .shell { min-height: 430px; }
.hero h1 { max-width: 720px; font-size: clamp(38px, 5.4vw, 68px); background: linear-gradient(100deg, #fff 10%, #cfb4ff 70%, #7feaff); -webkit-background-clip: text; color: transparent; }
.hero p { color: #c3bad8; font-size: 17px; }
.hero .primary { color: #fff; background: linear-gradient(135deg, #12c8ff, #006cff); }
.orb { border-color: rgba(202, 118, 255, .31); box-shadow: 0 0 110px rgba(105, 59, 255, .3); }

.section { position: relative; }
.section h2 { color: #fff; font-size: 28px; }
.sub { color: var(--muted); }
.game, .panel, .how div {
  background: linear-gradient(145deg, rgba(38, 30, 61, .88), rgba(20, 15, 35, .86));
  border-color: var(--line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .16);
}
.game { color: #fff; overflow: hidden; position: relative; }
.game:before { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255,255,255,.12), transparent 35%); pointer-events: none; }
.game:hover, .game.active { border-color: #46caff; box-shadow: 0 14px 34px rgba(0, 142, 255, .3); }
.game small, .how p, .notice, .summary dl div, .field label, .order small { color: #b6aec9; }
.cover { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 25px color-mix(in srgb, var(--c), transparent 70%); }
.game .cover { background-position: center; background-size: cover; }
.how div { border-radius: 16px; }
.num { color: #46caff; }
.how h3, .panel h3, .summary dd { color: #fff; }

.checkout { background: rgba(8, 6, 17, .38); }
.steps b { color: #46caff; }
.field input, .choice { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12); color: #fff; }
.field input::placeholder { color: #827b98; }
.choice small { color: #aaa2c6; }
.choice.selected { background: rgba(157,78,221,.18); border-color: #bf82ff; }
.summary { border-color: rgba(70, 202, 255, .3); }
.total { border-color: var(--line); }
.total dd { color: #d4a7ff; }
footer { margin-top: 40px; background: linear-gradient(120deg, #041a37, #020817); border-top: 1px solid rgba(26, 157, 255, .27); }

/* Sci-fi FerdiStore landing page */
.nav, .hero { display: none; }
.fs-landing { min-height: 0; position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 74%, rgba(0,121,255,.28), transparent 25%), radial-gradient(ellipse at 50% 35%, rgba(0,82,202,.15), transparent 34%), linear-gradient(135deg, #010511 0%, #030a1e 52%, #01030b 100%); border: 1px solid rgba(135,178,255,.42); border-radius: 29px; margin: 3px auto 0; max-width: 1110px; }
.fs-landing:before { content: ""; position: absolute; z-index: -1; inset: 84px 0 0; opacity: .42; background: radial-gradient(ellipse at 50% 37%, transparent 0 16%, rgba(0,145,255,.19) 16.3% 16.6%, transparent 17%), linear-gradient(transparent 49%, rgba(20,139,255,.2) 50%, transparent 51%), linear-gradient(90deg, transparent 49%, rgba(20,139,255,.15) 50%, transparent 51%); background-size: auto, 44px 44px, 44px 44px; mask-image: linear-gradient(to bottom, #000, #000 63%, transparent); }
.fs-header { height: 82px; position: relative; z-index: 8; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(78,126,205,.14); }
.fs-brand { text-decoration: none; font-style: italic; transform: skew(-9deg); font-size: 26px; letter-spacing: -1.7px; font-weight: 900; color: #f2f6ff; text-shadow: 0 2px 0 #596b8e; }
.fs-brand em { color: #008dff; text-shadow: 0 2px 0 #004e9c; font-style: italic; }
.fs-links { display: flex; align-items: center; gap: 33px; }
.fs-links a { color: #f6f8ff; text-decoration: none; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .2px; padding: 33px 0 18px; border-bottom: 2px solid transparent; }
.fs-links a:hover, .fs-links a.active { color: #00a7ff; border-color: #00a7ff; text-shadow: 0 0 13px #008cff; }
.fs-login { border: 1px solid #00a7ff; background: rgba(0,76,145,.16); border-radius: 9px; padding: 10px 19px; color: #00a7ff; text-transform: uppercase; font-weight: 800; letter-spacing: .7px; }
.fs-menu { display: none; color: #fff; background: transparent; border: 1px solid #5d739e; border-radius: 9px; font-size: 23px; width: 43px; height: 40px; }
.fs-hero { height: 620px; min-height: 620px; position: relative; overflow: hidden; }
.fs-copy { position: absolute; z-index: 4; top: 9%; left: 50%; width: 100%; transform: translateX(-50%); text-align: center; text-transform: uppercase; }
.fs-topup { margin: 0 0 -14px; font-size: clamp(34px, 7vw, 86px); font-weight: 900; letter-spacing: -.09em; color: transparent; -webkit-text-stroke: 1px rgba(43,130,255,.26); }
.fs-copy h1 { margin: 0; line-height: .75; font-weight: 1000; font-size: clamp(76px, 12vw, 160px); letter-spacing: -.09em; font-style: italic; transform: skew(-9deg); }
.fs-copy h1 span { display: block; color: #f6f8ff; text-shadow: 0 3px 0 #9fb1cd, 0 10px 24px #000; }
.fs-copy h1 b { display: block; color: #0ca7ff; text-shadow: 0 3px 0 #0057bf, 0 0 26px rgba(0,157,255,.77); }
.fs-tagline { color: #f5f7ff; font-size: 17px; letter-spacing: 2.5px; font-weight: 700; margin: 27px 0; }
.fs-tagline:before, .fs-tagline:after { content: "—"; color: #00a7ff; margin: 0 16px; text-shadow: 0 0 10px #00a7ff; }
.fs-category { position: absolute; z-index: 5; top: 58%; left: 50%; transform: translateX(-50%); display: flex; gap: clamp(15px, 3.5vw, 38px); }
.fs-category button { color: #fff; border: 0; padding: 0; background: none; min-width: 94px; text-transform: uppercase; font-weight: 700; font-size: 12px; }
.fs-category i { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 10px; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); background: linear-gradient(135deg, #0d1d3b, #071126); border: 1px solid #398cff; box-shadow: inset 0 0 0 1px #134e9e, 0 0 18px rgba(0,129,255,.17); color: #14aaff; font-size: 30px; font-style: normal; }
.fs-category .selected i, .fs-category button:hover i { color: #42d5ff; box-shadow: inset 0 0 22px rgba(0,136,255,.35), 0 0 23px rgba(0,136,255,.45); }
.fs-platform { width: min(590px, 72vw); height: 130px; position: absolute; z-index: 2; bottom: 94px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: repeating-radial-gradient(ellipse at center, #06142d 0 13px, #0a2c59 14px 16px, #00a7ff 17px 19px, #07132a 20px 29px); box-shadow: 0 0 18px #008cff, 0 12px 70px #001f79, inset 0 -25px 40px #000; perspective: 300px; }
.fs-platform:after { content: ""; position: absolute; inset: 22px 17%; border-radius: 50%; border: 2px solid #17bcff; box-shadow: 0 0 25px #009cff, inset 0 0 20px #007eff; }
.fs-core { position: absolute; width: 68px; height: 68px; left: calc(50% - 34px); top: 18px; border-radius: 50%; background: radial-gradient(circle, #fff 0 4%, #67edff 9%, #0099ff 28%, transparent 67%); box-shadow: 0 0 50px 22px rgba(0,160,255,.68); }
.fs-circuit { position: absolute; z-index: 1; top: 95px; width: 23%; height: 72%; opacity: .9; background: linear-gradient(142deg, transparent 30%, #075da5 30.2% 30.4%, transparent 30.7%), linear-gradient(37deg, transparent 42%, #057cff 42.2% 42.5%, transparent 43%), linear-gradient(140deg, transparent 64%, #0059a1 64.2% 64.5%, transparent 65%); }
.fs-circuit-left { left: 0; border-left: 1px solid #1468ae; border-bottom: 1px solid #1468ae; }
.fs-circuit-right { right: 0; transform: scaleX(-1); border-left: 1px solid #1468ae; border-bottom: 1px solid #1468ae; }
.fs-glow { position: absolute; z-index: 1; width: 90px; height: 4px; background: #18c7ff; box-shadow: 0 0 20px 6px #0085ff; transform: rotate(45deg); }
.fs-glow-one { top: 36%; left: 5%; }.fs-glow-two { top: 49%; right: 6%; transform: rotate(-45deg); }
.fs-trust { position: absolute; z-index: 6; display: flex; align-items: stretch; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(750px, 82%); background: rgba(2,11,29,.76); border: 1px solid rgba(114,159,221,.48); border-radius: 9px; backdrop-filter: blur(8px); }
.fs-trust > div { flex: 1; display: flex; gap: 10px; padding: 15px 19px; align-items: center; border-right: 1px solid rgba(114,159,221,.32); }.fs-trust > div:last-child { border-right: 0; }
.fs-trust i { color: #11afff; font-size: 30px; font-style: normal; text-shadow: 0 0 12px #008cff; }.fs-trust p { margin: 0; }.fs-trust b { display: block; color: #f4f8ff; font-size: 13px; }.fs-trust small { display: block; margin-top: 5px; color: #a7b4c8; line-height: 1.4; font-size: 11px; }
.fs-landing + .nav { display: none; }
.section { padding: 38px 0; }.section h2 { color: #dceeff; }.game, .panel, .how div { background: linear-gradient(145deg, #061228, #030b1a); border-color: rgba(28,142,255,.26); }.game:hover { border-color: #00a7ff; box-shadow: 0 10px 26px rgba(0,132,255,.26); }

/* Banner carousel after the landing screen */
.promo { display: block; max-width: 1110px; padding: 62px 24px 26px; }
.promo-heading { margin-bottom: 19px; }.promo-heading span, .promo-kicker { color: #20baff; }.promo-heading h2 { color: #e8f5ff; }.promo-controls button { border-color: rgba(0,169,255,.45); background: #06142b; }.promo-controls button:hover { background: #0a2c52; }
.promo-rail { gap: 20px; padding: 3px 0 15px; }.promo-card { min-width: min(760px, 74vw); min-height: 278px; border: 1px solid rgba(65,168,255,.38); background-color: #051633; }
.promo-violet { background-image: radial-gradient(circle at 78% 50%, rgba(0,212,255,.42), transparent 21%), linear-gradient(125deg, #071731, #064a93); }
.promo-cyan { background-image: radial-gradient(circle at 78% 50%, rgba(0,212,255,.50), transparent 21%), linear-gradient(125deg, #041a35, #086d98); }
.promo-orange { background-image: radial-gradient(circle at 78% 50%, rgba(0,212,255,.45), transparent 21%), linear-gradient(125deg, #0a1730, #234aa2); }
.promo-card:before { border-color: rgba(80,196,255,.4); }.promo-card:after { background: rgba(0,149,255,.14); }.promo-card h3 { text-transform: uppercase; }.promo-card h3 em { color: #70dcff; }.promo-card > button { color: #031529; box-shadow: 0 0 18px rgba(61,197,255,.3); }.promo-art { color: #5eddff; text-shadow: 0 0 24px #008bff; }.promo-dots button.active { background: #18b8ff; }

@media (max-width: 820px) {
  .fs-landing { border-radius: 24px; margin: 3px 6px 0; min-height: 945px; }.fs-header { height: 107px; padding: 0 34px; }.fs-brand { font-size: 25px; line-height: .83; width: 105px; }.fs-brand strong, .fs-brand em { display: block; }.fs-links { display: none; position: absolute; z-index: 10; top: 90px; right: 17px; padding: 13px 20px; width: 190px; background: #06142b; border: 1px solid #1679d4; border-radius: 10px; }.fs-links.open { display: grid; }.fs-links a { padding: 11px 0; }.fs-login { display: none; }.fs-menu { display: block; }.fs-hero { min-height: 838px; height: calc(100svh - 107px); }.fs-copy { top: 18%; }.fs-topup { display: none; }.fs-copy h1 { font-size: clamp(56px, 17vw, 76px); line-height: .8; }.fs-tagline { font-size: 10px; letter-spacing: .28px; margin-top: 18px; }.fs-tagline:before, .fs-tagline:after { margin: 0 6px; }.fs-category { top: 42%; gap: 6px; width: 100%; justify-content: center; }.fs-category button { min-width: 0; width: 62px; font-size: 0; }.fs-category i { width: 54px; height: 54px; margin-bottom: 0; font-size: 23px; }.fs-platform { width: 114%; height: 164px; bottom: 132px; }.fs-platform:after { inset: 34px 24%; }.fs-core { top: 31px; }.fs-circuit { top: 125px; width: 34%; height: 71%; }.fs-glow-one { top: 18%; left: -4%; }.fs-glow-two { top: 60%; right: -8%; }.fs-trust { bottom: 32px; width: 84%; }.fs-trust > div { padding: 13px 8px; gap: 5px; justify-content: center; }.fs-trust i { display: none; }.fs-trust b { font-size: 10px; white-space: nowrap; }.fs-trust small { display: none; }
}

/* Clickable order history and order management dialog. */
#orders .order, #accountOrders .order { cursor: pointer; border-radius: 9px; padding-inline: 10px; transition: background .18s ease, transform .18s ease; }
#orders .order:hover, #accountOrders .order:hover { background: rgba(30, 173, 255, .09); transform: translateX(2px); }
#orders .order:after, #accountOrders .order:after { content: '›'; align-self: center; margin-left: 12px; color: #36c5ff; font-size: 24px; }
.order-modal { position: fixed; z-index: 110; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(0,4,16,.82); backdrop-filter: blur(8px); }
.order-card { position: relative; width: min(520px,100%); max-height: calc(100vh - 36px); overflow-y: auto; padding: 30px; border: 1px solid rgba(63,179,255,.45); border-radius: 19px; color: #d8e4fa; background: linear-gradient(145deg,#0b1b38,#050b19); box-shadow: 0 30px 90px #000; }
.order-card h2 { margin: 5px 0 10px; color: #fff; }.order-status { display: inline-block; padding: 6px 9px; border-radius: 99px; font-size: 10px; font-weight: 800; }.order-status.pending { color: #ffd46a; background: rgba(255,185,38,.13); }.order-status.cancelled { color: #ff9ba4; background: rgba(255,67,82,.13); }.order-status.paid { color: #6fffc1; background: rgba(27,215,137,.13); }
.order-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }.order-summary div, .payment-info { padding: 13px; border: 1px solid rgba(150,190,250,.15); border-radius: 10px; background: rgba(255,255,255,.04); }.order-summary small, .order-summary b { display: block; }.order-summary small { margin-bottom: 5px; color: #91a4c3; }.order-summary b { color: #fff; font-size: 13px; }
.order-card label { display: grid; gap: 6px; margin: 13px 0; font-size: 13px; font-weight: 700; }.order-card input, .order-card select { width: 100%; padding: 11px; border: 1px solid rgba(150,190,250,.25); border-radius: 8px; color: #fff; background: #10213d; font: inherit; }.order-card input:disabled, .order-card select:disabled { opacity: .65; }
.order-actions { display: flex; gap: 9px; margin-top: 18px; }.order-actions button { flex: 1; }.order-cancel { border: 1px solid rgba(255,91,105,.5); border-radius: 9px; color: #ff9ba4; background: rgba(255,67,82,.09); font-weight: 700; }.payment-info { margin-top: 18px; }.payment-info b { color: #55d1ff; }.payment-info p { margin: 7px 0 0; color: #aebdd4; font-size: 12px; line-height: 1.6; }
@media(max-width:520px) { .order-card { padding: 25px 19px; }.order-summary { grid-template-columns: 1fr; }.order-actions { flex-direction: column; }.order-actions button { min-height: 42px; } }
.qris-area { display: grid; justify-items: center; gap: 10px; margin-top: 15px; }.qris-area img { width: min(280px,100%); padding: 10px; border-radius: 12px; background: #fff; }.qris-area small { color: #b9c9dd; text-align: center; }.qris-area .primary,.check-payment { width: 100%; }.check-payment { border: 1px solid rgba(68,198,255,.4); border-radius: 9px; padding: 10px; color: #60d2ff; background: rgba(26,157,255,.09); font-weight: 700; }
.supplier-info { display: grid; gap: 5px; margin-top: 12px; padding: 13px; border: 1px solid rgba(69,205,255,.22); border-radius: 10px; background: rgba(16,142,212,.06); }.supplier-info small { margin-top: 5px; color: #90a5c4; }.supplier-info b { color: #eaf7ff; font-size: 13px; }.supplier-info p { margin: 5px 0; color: #b6c5da; font-size: 12px; }.supplier-info .check-payment { margin-top: 8px; }.supplier-info.error { border-color: rgba(255,91,105,.35); background: rgba(255,67,82,.07); }

/* Multi-page storefront */
.interior-page .fs-landing { min-height: 0; border-radius: 0 0 22px 22px; }.interior-page .fs-hero { display: none; }.interior-page .fs-header { max-width: 1180px; }.page-content { min-height: 62vh; padding-top: 45px; padding-bottom: 70px; }.page-hero { margin-bottom: 28px; }.page-hero p { margin: 0 0 8px; color: #27bfff; font-size: 11px; font-weight: 800; letter-spacing: .15em; }.page-hero h1 { margin: 0 0 10px; color: #f3f8ff; font-size: clamp(32px,5vw,52px); letter-spacing: -2.5px; }.page-hero span { color: #9eb0ca; line-height: 1.7; }
.catalog-tools { display: flex; margin-bottom: 20px; }.catalog-tools label { display: flex; align-items: center; gap: 9px; width: min(480px,100%); padding: 0 14px; border: 1px solid rgba(68,181,255,.28); border-radius: 11px; color: #35c7ff; background: #07162c; }.catalog-tools input { width: 100%; padding: 13px 0; border: 0; outline: 0; color: #fff; background: transparent; font: inherit; }
.catalog-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }.catalog-card { display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 16px; padding: 13px; border: 1px solid rgba(52,162,255,.22); border-radius: 14px; color: inherit; text-decoration: none; background: linear-gradient(145deg,#07162d,#030b18); transition: .18s ease; }.catalog-card:hover { border-color: #1ebaff; transform: translateY(-2px); box-shadow: 0 13px 30px rgba(0,126,255,.18); }.catalog-cover { display: grid; width: 86px; height: 86px; place-items: center; border-radius: 11px; color: #fff; background: var(--c); font-size: 23px; font-weight: 900; }.catalog-card h2 { margin: 0 0 5px; color: #f1f7ff; font-size: 16px; }.catalog-card p { margin: 0 0 7px; color: #899dbb; font-size: 12px; }.catalog-card small { color: #49cfff; }.catalog-card > span { padding-right: 8px; color: #32c6ff; font-size: 12px; font-weight: 800; }
.offer-grid,.contact-grid,.help-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.offer-grid article,.contact-grid article,.help-grid article,.simple-card,.legal-card,.faq-list { padding: 25px; border: 1px solid rgba(52,162,255,.22); border-radius: 16px; color: #aebed5; background: linear-gradient(145deg,#07162d,#030b18); }.offer-grid article:nth-child(1) { background: linear-gradient(135deg,#10295e,#075395); }.offer-grid article:nth-child(2) { background: linear-gradient(135deg,#10284d,#08758a); }.offer-grid article:nth-child(3) { background: linear-gradient(135deg,#281b55,#5843a0); }.offer-grid b { color: #5fdbff; font-size: 10px; letter-spacing: .12em; }.offer-grid h2,.contact-grid h2,.help-grid h2 { margin: 12px 0 8px; color: #fff; font-size: 20px; }.offer-grid p,.contact-grid p,.help-grid p { min-height: 48px; line-height: 1.6; font-size: 13px; }.offer-grid a { color: #68dcff; text-decoration: none; font-weight: 800; font-size: 12px; }
.simple-card.narrow { max-width: 620px; }.simple-card label { display: grid; gap: 8px; color: #e3edff; font-size: 13px; font-weight: 700; }.simple-card input { width: 100%; padding: 13px; border: 1px solid rgba(129,181,244,.27); border-radius: 9px; color: #fff; background: #0b1c36; font: inherit; }.simple-card .primary { margin-top: 14px; }.page-note { color: #8fa2bf; font-size: 12px; line-height: 1.6; }
.help-grid i,.contact-grid i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #4bd1ff; background: rgba(21,164,255,.13); font-style: normal; font-weight: 900; }.contact-grid span { color: #768aa9; font-size: 11px; }.faq-list { margin-top: 18px; }.faq-list > h2,.legal-card h2 { margin: 0 0 14px; color: #fff; }.faq-list details { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.1); }.faq-list summary { color: #e8f2ff; cursor: pointer; font-weight: 700; }.faq-list details p,.legal-card p { color: #9dafc8; line-height: 1.8; font-size: 13px; }.legal-card { max-width: 850px; }.legal-card h2:not(:first-child) { margin-top: 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 35px; }.footer-grid p { max-width: 330px; line-height: 1.7; }.footer-grid b,.footer-grid a { display: block; }.footer-grid b { margin-bottom: 13px; color: #fff; }.footer-grid a { margin: 9px 0; color: #9db0cf; text-decoration: none; }.footer-grid a:hover { color: #45ccff; }.copyright { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); color: #7386a6; }
@media(max-width:820px) { .interior-page .fs-landing { min-height: 0; }.interior-page .fs-header { padding-inline: 18px; }.catalog-grid { grid-template-columns: 1fr; }.offer-grid,.contact-grid,.help-grid { grid-template-columns: 1fr; }.footer-grid { grid-template-columns: 1fr 1fr; }.page-content { padding-top: 32px; }.catalog-card { grid-template-columns: 70px 1fr auto; }.catalog-cover { width: 70px; height: 70px; } }
@media(max-width:480px) { .footer-grid { grid-template-columns: 1fr; }.catalog-card { grid-template-columns: 64px 1fr; }.catalog-cover { width: 64px; height: 64px; }.catalog-card > span { display: none; } }

.promo { padding-top: 12px; position: relative; z-index: 1; }
.promo-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.promo-heading span, .promo-kicker { color: #c183ff; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.promo-heading h2 { margin: 5px 0 0; color: #fff; font-size: clamp(23px, 3vw, 34px); letter-spacing: -1.5px; }
.promo-controls { display: flex; gap: 8px; }
.promo-controls button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: #fff; background: rgba(255,255,255,.07); font-size: 18px; }
.promo-rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 3px 0 12px; }
.promo-rail::-webkit-scrollbar { display: none; }
.promo-card { min-width: min(770px, 72vw); min-height: 270px; border-radius: 22px; padding: 34px; position: relative; overflow: hidden; scroll-snap-align: start; box-shadow: 0 20px 40px rgba(0,0,0,.25); }
.promo-card:before { content: ""; position: absolute; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; right: -80px; top: -120px; }
.promo-card:after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 34px; transform: rotate(32deg); right: 55px; bottom: -85px; background: rgba(255,255,255,.1); }
.promo-violet { background: linear-gradient(125deg, #5420a7, #9c50f1); }
.promo-cyan { background: linear-gradient(125deg, #07536a, #10a5bb); }
.promo-orange { background: linear-gradient(125deg, #892c1c, #eb7b27); }
.promo-card h3 { position: relative; z-index: 1; color: #fff; font-size: clamp(27px, 3.5vw, 42px); line-height: 1.04; letter-spacing: -2px; margin: 10px 0; }
.promo-card h3 em { color: rgba(255,255,255,.68); font-style: normal; }
.promo-card > p:not(.promo-kicker) { position: relative; z-index: 1; margin: 0; color: rgba(255,255,255,.78); }
.promo-card > p b { color: #fff; }
.promo-card > button { position: relative; z-index: 2; margin-top: 23px; border: 0; border-radius: 9px; padding: 10px 14px; background: #fff; color: #241735; font-weight: 800; }
.promo-card > button span { margin-left: 14px; }
.promo-art { position: absolute; right: 42px; bottom: 24px; z-index: 1; color: rgba(255,255,255,.9); font-size: 112px; line-height: .8; font-weight: 800; letter-spacing: -10px; }
.promo-art small { font-size: 45px; letter-spacing: -2px; }
.promo-dots { display: flex; justify-content: center; gap: 7px; margin-top: 2px; }
.promo-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 20px; background: #5a536c; transition: width .2s ease, background .2s ease; }
.promo-dots button.active { width: 25px; background: #c183ff; }

@media (max-width: 820px) {
  .hero, .hero .shell { min-height: 370px; }
  .hero:after { font-size: 78px; bottom: 0; }
  .promo { padding-top: 5px; }
  .promo-heading { align-items: center; }
  .promo-heading h2 { font-size: 23px; line-height: 1.05; max-width: 240px; }
  .promo-controls { display: none; }
  .promo-rail { gap: 12px; margin-right: -16px; padding-right: 16px; }
  .promo-card { min-width: calc(100vw - 48px); min-height: 230px; padding: 25px; border-radius: 18px; }
  .promo-card h3 { font-size: 31px; letter-spacing: -1.5px; }
  .promo-art { right: 23px; bottom: 20px; font-size: 87px; }
  .promo-art small { font-size: 34px; }
}

/* Keep the carousel visible and in the same blue system after base rules. */
.promo { display: block; max-width: 1110px; padding: 62px 24px 26px; }
.promo-heading span, .promo-kicker { color: #20baff; }
.promo-heading h2 { color: #e8f5ff; }
.promo-controls button { border-color: rgba(0,169,255,.45); background: #06142b; }
.promo-rail { gap: 20px; padding: 3px 0 15px; }
.promo-card { min-width: min(760px, 74vw); min-height: 278px; border: 1px solid rgba(65,168,255,.38); background-color: #051633; }
.promo-violet { background-image: radial-gradient(circle at 78% 50%, rgba(0,212,255,.42), transparent 21%), linear-gradient(125deg, #071731, #064a93); }
.promo-cyan { background-image: radial-gradient(circle at 78% 50%, rgba(0,212,255,.50), transparent 21%), linear-gradient(125deg, #041a35, #086d98); }
.promo-orange { background-image: radial-gradient(circle at 78% 50%, rgba(0,212,255,.45), transparent 21%), linear-gradient(125deg, #0a1730, #234aa2); }
.promo-card:before { border-color: rgba(80,196,255,.4); }
.promo-card:after { background: rgba(0,149,255,.14); }
.promo-card h3 em { color: #70dcff; }
.promo-card > button { color: #031529; box-shadow: 0 0 18px rgba(61,197,255,.3); }
.promo-art { color: #5eddff; text-shadow: 0 0 24px #008bff; }
.promo-dots button.active { background: #18b8ff; }

@media (max-width: 820px) {
  .promo { padding: 35px 16px 18px; }
  .promo-rail { gap: 12px; margin-right: -16px; padding-right: 16px; }
  .promo-card { min-width: calc(100vw - 48px); min-height: 230px; }
}

/* Authentication and the private account area */
.register-button { margin-left: 7px; background: #0879dd; }
.account a, .fs-login a { color: inherit; text-decoration: none; }
.auth-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(0, 4, 16, .78); backdrop-filter: blur(8px); }
.auth-card { position: relative; width: min(440px, 100%); padding: 32px; border: 1px solid rgba(63, 179, 255, .45); border-radius: 19px; background: linear-gradient(145deg, #0b1b38, #050b19); box-shadow: 0 30px 90px #000; }
.auth-card h2 { margin: 5px 0 8px; color: #fff; }.auth-kicker { margin: 0; color: #31beff; font-size: 11px; font-weight: 800; letter-spacing: .15em; }.auth-copy { margin: 0 0 20px; color: #abb9d2; font-size: 13px; line-height: 1.5; }.auth-close { position: absolute; right: 13px; top: 10px; border: 0; color: #b9cae6; background: transparent; font-size: 26px; }
.auth-card label, .account-page label { display: grid; gap: 6px; margin: 13px 0; color: #d8e4fa; font-size: 13px; font-weight: 700; }.auth-card input, .account-page input { width: 100%; padding: 11px; border: 1px solid rgba(150, 190, 250, .25); border-radius: 8px; color: #fff; background: rgba(255,255,255,.06); font: inherit; }.auth-card .primary { margin-top: 10px; }.auth-or { display: flex; align-items: center; gap: 10px; margin: 20px 0; color: #8494b1; font-size: 12px; }.auth-or:before,.auth-or:after { content:''; height: 1px; flex: 1; background: rgba(255,255,255,.15); }.google-button { width: 100%; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: 11px; color: #fff; background: rgba(255,255,255,.08); font-weight: 700; }.auth-message { min-height: 18px; margin: 13px 0 0; color: #ffafb5; font-size: 12px; }.auth-switch { margin: 15px 0 0; color: #aebbd3; font-size: 13px; text-align: center; }.auth-switch button { border: 0; padding: 0; color: #43c6ff; background: transparent; font: inherit; font-weight: 800; }
.account-page { max-width: 1000px; padding-top: 34px; padding-bottom: 65px; }.account-brand { display: inline-block; margin-bottom: 28px; color: #71d2ff; text-decoration: none; font-weight: 800; }.account-hero { display: flex; align-items: center; gap: 18px; padding: 27px; border: 1px solid rgba(34, 163, 255, .38); border-radius: 18px; background: linear-gradient(125deg, #062a56, #0a1024); }.account-hero p { margin: 0 0 5px; color: #5cd2ff; font-size: 11px; font-weight: 800; letter-spacing: .12em; }.account-hero h1 { margin: 0; color: #fff; font-size: 28px; }.account-hero span { color: #c1d5f4; font-size: 13px; }.account-hero .login { margin-left: auto; }.account-avatar { display: grid; flex: 0 0 62px; width: 62px; height: 62px; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: #087dde; font-size: 25px; font-weight: 800; }.account-avatar img { width: 100%; height: 100%; object-fit: cover; }.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }.account-grid h2 { margin: 0; color: #fff; font-size: 20px; }.account-grid .primary { margin-top: 7px; }.account-orders { grid-column: 1 / -1; }.account-orders .order { align-items: center; }.account-orders .order > div:last-child { text-align: right; }
@media(max-width:620px) { .account-grid { grid-template-columns: 1fr; }.account-orders { grid-column: auto; }.account-hero { align-items: flex-start; flex-wrap: wrap; }.account-hero .login { margin-left: auto; }.auth-card { padding: 27px 21px; } }

/* Account actions in the visible sci-fi header. */
.fs-auth { display: flex; align-items: center; gap: 8px; }
.fs-register { border: 1px solid #00a7ff; border-radius: 9px; padding: 10px 19px; color: #031529; background: #20baff; text-transform: uppercase; font-weight: 800; letter-spacing: .7px; box-shadow: 0 0 18px rgba(0,169,255,.25); }
.fs-profile { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; }
.fs-profile small, .fs-profile b { display: block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-profile small { color: #62cfff; font-size: 9px; text-transform: uppercase; }
.fs-profile b { margin-top: 2px; font-size: 12px; }
.fs-avatar { display: grid; width: 34px; height: 34px; place-items: center; overflow: hidden; border: 1px solid #26baff; border-radius: 50%; color: #fff; background: #087dde; font-weight: 800; }
.fs-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fs-logout { border: 0; padding: 8px; color: #9eb2cf; background: transparent; font-size: 11px; }

@media (max-width: 820px) {
  .fs-auth { margin-left: auto; margin-right: 9px; }
  .fs-auth .fs-login, .fs-auth .fs-register { display: block; padding: 8px 10px; font-size: 10px; }
  .fs-auth .fs-profile span:not(.fs-avatar), .fs-auth .fs-logout { display: none; }
}