:root { --surface-line: rgba(122, 178, 255, .18); }

.nav { min-height: 84px; border-bottom: 1px solid rgba(137, 184, 255, .08); }
.nav-icon, .button-icon, .trust-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon { width: 17px; height: 17px; flex: 0 0 auto; }
.button-icon { width: 17px; height: 17px; margin-right: 6px; vertical-align: -3px; }
.outline-button { display: inline-flex; align-items: center; justify-content: center; }
.support-button { display: inline-flex; align-items: center; gap: 7px; }
.trust { position: relative; margin-top: 8px; padding-top: 34px; border-top: 1px solid rgba(137, 184, 255, .10); }
.trust article { padding: 0 30px 0 0; }
.trust-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(96, 167, 255, .55); border-radius: 14px; color: #8ec7ff; background: rgba(28, 116, 210, .13); }
.trust-icon svg { width: 23px; height: 23px; }
.trust h2 { margin-top: 18px; }
.hero h1 { letter-spacing: -2.8px; }
.hero-description { max-width: 525px; }
.hero-art { filter: saturate(.93) contrast(1.03); }
.product-card { border-radius: 13px; }
.product-card:hover { box-shadow: 0 18px 35px rgba(0, 13, 39, .36); }
.cart-drawer { width: min(430px, 100vw); }
.cart-button { display: inline-flex; align-items: center; gap: 7px; }
.cart-count { margin-left: 0; }
.close-button { display: grid; place-items: center; }
.payment-card img { width: 22px; height: 22px; object-fit: contain; }

.category-section { padding-top: 94px; padding-bottom: 72px; }
.text-link { color: #87c7ff; font: 700 14px Outfit, sans-serif; text-decoration: none; }
.text-link span { margin-left: 7px; }
.category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 30px; }
.category-card { position: relative; min-height: 196px; padding: 22px; overflow: hidden; border: 1px solid var(--surface-line); border-radius: 16px; background: linear-gradient(145deg, rgba(15, 47, 94, .94), rgba(5, 17, 43, .97)); color: #fff; text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.category-card::before { content: ""; position: absolute; width: 135px; height: 135px; right: -52px; top: -52px; border: 1px solid rgba(128, 193, 255, .18); border-radius: 50%; }
.category-card:hover { transform: translateY(-5px); border-color: rgba(96, 169, 255, .72); background: linear-gradient(145deg, rgba(18, 61, 119, .98), rgba(6, 18, 48, .98)); }
.category-card > span:last-of-type { position: absolute; left: 22px; bottom: 22px; display: grid; gap: 5px; }
.category-card strong { font: 700 18px Outfit, sans-serif; }
.category-card small { color: #a9bad4; font-size: 12px; }
.category-card i { position: absolute; right: 20px; bottom: 20px; color: #7fc4ff; font-style: normal; font-size: 20px; }
.category-icon { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(150, 211, 255, .24); border-radius: 16px; color: #b8e0ff; background: rgba(6, 18, 47, .52); }
.category-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.category-card.gaming .category-icon { color: #9de9bb; }
.category-card.vpn .category-icon { color: #a1b9ff; }
.category-card.tools .category-icon { color: #f1c090; }
.review-section { display: grid; grid-template-columns: .9fr 1.35fr; gap: 70px; align-items: center; padding: 82px 0 94px; border-top: 1px solid rgba(137, 184, 255, .1); }
.review-intro h2 { max-width: 360px; margin: 10px 0 13px; font: 700 clamp(30px, 3vw, 43px) Outfit, sans-serif; letter-spacing: -1.8px; }
.review-intro p:not(.eyebrow) { max-width: 420px; color: #a9b7cc; line-height: 1.7; margin-bottom: 23px; }
.review-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.review-points article { min-height: 180px; padding: 22px; border: 1px solid rgba(125, 180, 255, .16); border-radius: 14px; background: rgba(8, 23, 53, .54); }
.review-points span { display: block; color: #62b3ff; font: 700 12px Outfit, sans-serif; letter-spacing: 1.4px; }
.review-points strong { display: block; margin: 27px 0 9px; font: 700 16px Outfit, sans-serif; }
.review-points p { margin: 0; color: #9eacc5; font-size: 13px; line-height: 1.55; }
.catalog-intro { padding: 90px 0 52px; }
.catalog-intro h1 { margin: 9px 0 12px; font: 700 clamp(42px, 5vw, 68px) Outfit, sans-serif; letter-spacing: -3.5px; }
.catalog-intro > p:last-child { max-width: 530px; color: #a8b7cb; font-size: 17px; line-height: 1.65; }
.catalog-page .products-section { padding-top: 16px; min-height: 660px; }

/* Fullscreen, pinned scenes controlled by the page scroll. */
.home-page .site-shell { overflow: clip; }
.home-page .nav { position: fixed; z-index: 40; top: 0; left: 0; width: 100%; padding-inline: max(40px, calc((100vw - 1190px) / 2)); transform: none; }
.scroll-story { position: relative; height: 405svh; background: #020817; }
.story-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 72% 42%, #0a2a62 0, #05152e 35%, #020817 72%); }
.story-stage::after { content: ""; position: absolute; z-index: 8; inset: auto 0 0; height: 22%; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(1, 5, 15, .78)); }
.story-scene { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; overflow: hidden; opacity: 0; pointer-events: none; will-change: opacity, transform; transform: scale(1.055); }
.story-scene.is-active { pointer-events: auto; }
.story-inner { position: relative; z-index: 3; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; min-height: 100svh; padding-top: 88px; }
.story-copy { position: relative; z-index: 4; will-change: transform, opacity; }
.story-copy h1, .story-copy h2 { margin: 0; max-width: 650px; font: 700 clamp(48px, 5vw, 72px)/1.04 Outfit, sans-serif; letter-spacing: -4px; }
.story-copy h1 span, .story-copy h2 span { color: #248dff; }
.story-scene-hero .hero-heading-line { display: block; color: #f7f9ff; }
.story-scene-hero .story-copy { width: 100%; }
.story-scene-hero .story-copy h1 { width: min(590px, 100%); }
.story-scene-hero #rotatingProduct { display: block; width: 100%; min-height: 1.05em; color: #248dff; text-align: left; white-space: nowrap; opacity: 1; transform: translateY(0); transition: opacity .36s ease, transform .36s cubic-bezier(.22, 1, .36, 1); }
.story-scene-hero #rotatingProduct.is-changing { opacity: 0; transform: translateY(16px); }
.story-copy > p:not(.eyebrow) { max-width: 500px; margin: 25px 0 31px; color: #a8b6ca; font-size: 15px; line-height: 1.75; }
.story-scene-hero .story-visual { height: 76svh; max-height: 720px; will-change: transform, opacity; }
.story-scene-hero .story-visual img { width: min(760px, 61vw); }
.story-scene-catalog { background: radial-gradient(circle at 74% 52%, rgba(43, 107, 220, .52), transparent 31%), linear-gradient(145deg, #041126 0%, #071f48 52%, #020817 100%); }
.story-glow { position: absolute; width: 60vw; height: 60vw; right: -16vw; top: -25vw; border: 1px solid rgba(70, 154, 255, .14); border-radius: 50%; box-shadow: 0 0 0 8vw rgba(26, 111, 224, .035), 0 0 0 16vw rgba(26, 111, 224, .025); }
.brand-mosaic { position: relative; width: min(610px, 48vw); height: min(610px, 72svh); }
.brand-tile { position: absolute; display: grid; place-items: center; width: 148px; height: 148px; border: 1px solid rgba(131, 194, 255, .2); border-radius: 28px; background: rgba(4, 17, 43, .82); box-shadow: 0 28px 60px rgba(0, 4, 17, .32); backdrop-filter: blur(12px); }
.brand-tile img { max-width: 64%; max-height: 58%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .3)); }
.tile-netflix { left: 12%; top: 5%; transform: rotate(-5deg); }
.tile-spotify { right: 7%; top: 18%; transform: rotate(6deg); }
.tile-minecraft { left: 35%; top: 36%; width: 174px; height: 174px; }
.tile-claude { left: 3%; bottom: 4%; transform: rotate(4deg); }
.tile-hbo { right: 3%; bottom: 3%; transform: rotate(-4deg); }
.tile-hbo img { max-width: 79%; }
.story-scene-support { background: radial-gradient(circle at 75% 47%, rgba(24, 105, 220, .2), transparent 31%), linear-gradient(145deg, #030b1b, #061833 58%, #020817); }
.support-layout { display: grid; grid-template-columns: 1fr; align-content: center; gap: 64px; }
.support-copy { display: grid; grid-template-columns: 1.15fr .75fr; gap: clamp(55px, 9vw, 140px); align-items: end; width: 100%; }
.support-copy h2 { font-size: clamp(54px, 5.6vw, 78px); }
.support-copy-body > p { margin: 0 0 27px; color: #a8b6ca; font-size: 15px; line-height: 1.75; }
.order-rail { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-top: 1px solid rgba(130, 183, 243, .25); border-bottom: 1px solid rgba(130, 183, 243, .16); }
.order-rail article { min-height: 178px; padding: 27px 34px 30px 0; }
.order-rail article + article { padding-left: 34px; border-left: 1px solid rgba(130, 183, 243, .16); }
.order-rail span { display: block; margin-bottom: 39px; color: #5fb6ff; font: 700 11px Outfit, sans-serif; letter-spacing: 1.4px; }
.order-rail strong { display: block; font: 700 18px Outfit, sans-serif; }
.order-rail p { margin: 9px 0 0; color: #8f9fb6; font-size: 12px; line-height: 1.55; }
.order-path { display: grid; grid-template-columns: 1fr auto 1fr auto 1.25fr; align-items: center; gap: 26px; width: 100%; padding: 34px 0; border-top: 1px solid rgba(130, 183, 243, .22); border-bottom: 1px solid rgba(130, 183, 243, .14); }
.order-path span { font: 700 clamp(18px, 2vw, 27px) Outfit, sans-serif; letter-spacing: -.7px; }
.order-path i { color: #529fdf; font-style: normal; font-size: 22px; }
.feedback-list { align-self: stretch; border-top: 1px solid rgba(125, 180, 240, .18); }
.feedback-list > div { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; align-items: center; min-height: 92px; border-bottom: 1px solid rgba(125, 180, 240, .13); }
.feedback-list strong { font: 700 16px Outfit, sans-serif; }
.feedback-list span { color: #94a5bd; font-size: 13px; line-height: 1.55; }
.policy-band { background: rgba(5, 18, 42, .44); border-color: rgba(125, 180, 240, .11); }
.policy-content { min-height: 228px; }
.story-centered { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.story-centered .story-copy { text-align: center; }
.story-centered h2 { margin: 0; font: 700 clamp(54px, 6vw, 86px)/.98 Outfit, sans-serif; letter-spacing: -5px; }
.story-centered > p:not(.eyebrow) { max-width: 570px; margin: 24px auto 30px; color: #a8b6ca; line-height: 1.75; }
.story-logo { width: 78px; height: 78px; margin-bottom: 24px; object-fit: contain; filter: drop-shadow(0 16px 28px rgba(83, 72, 255, .45)); }
.support-rings { position: absolute; width: min(68vw, 920px); aspect-ratio: 1; border: 1px solid rgba(71, 156, 255, .13); border-radius: 50%; box-shadow: 0 0 0 9vw rgba(45, 125, 240, .025), 0 0 0 18vw rgba(45, 125, 240, .018); }
.story-progress { position: absolute; z-index: 12; right: 28px; top: 50%; width: 2px; height: 128px; overflow: hidden; border-radius: 4px; background: rgba(121, 174, 231, .18); transform: translateY(-50%); }
.story-progress span { display: block; width: 100%; height: 100%; background: #5dbbff; transform: scaleY(0); transform-origin: top; will-change: transform; }
.scroll-cue { position: absolute; z-index: 12; left: max(40px, calc((100vw - 1190px) / 2)); bottom: 24px; display: inline-flex; align-items: center; gap: 12px; color: #7890ae; font: 700 10px Outfit, sans-serif; letter-spacing: 1.5px; text-decoration: none; text-transform: uppercase; transition: opacity .25s ease; }
.scroll-cue i { position: relative; display: block; width: 1px; height: 48px; overflow: hidden; background: rgba(123, 177, 235, .2); }
.scroll-cue i::after { content: ""; position: absolute; inset: -100% 0 auto; height: 100%; background: #5dbbff; animation: scroll-line 1.8s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes scroll-line { 0% { transform: translateY(0); } 55%, 100% { transform: translateY(200%); } }

.motion-ready [data-reveal] { opacity: 0; transform: translate3d(0, 42px, 0); transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); }
.motion-ready [data-reveal].is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }
.motion-ready .trust article:nth-child(2), .motion-ready .category-card:nth-child(2), .motion-ready .review-points article:nth-child(2) { transition-delay: .08s; }
.motion-ready .trust article:nth-child(3), .motion-ready .category-card:nth-child(3), .motion-ready .review-points article:nth-child(3) { transition-delay: .16s; }
.motion-ready .category-card:nth-child(4) { transition-delay: .24s; }
.motion-ready .category-card:nth-child(5) { transition-delay: .32s; }
.nav { z-index: 6; transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
.nav.is-scrolled { background: rgba(2, 9, 24, .92); border-bottom-color: rgba(116, 180, 255, .1); box-shadow: 0 1px 0 rgba(116, 180, 255, .08); backdrop-filter: blur(14px); }

@media (max-width: 800px) {
  .nav { min-height: 72px; }
  .nav-actions { margin-left: auto; }
  .nav-links { display: none; }
  .support-button span { display: none; }
  .support-button { width: 42px; justify-content: center; padding: 0; }
  .cart-button { padding: 0 12px; }
  .cart-drawer { width: min(430px, 92vw); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .review-section { grid-template-columns: 1fr; gap: 35px; }
  .home-page .nav { width: 100%; padding-inline: 20px; }
  .scroll-story { height: 355svh; }
  .story-inner { grid-template-columns: 1fr; text-align: center; padding-top: 96px; }
  .story-copy { z-index: 5; }
  .story-copy h1, .story-copy h2 { margin-inline: auto; font-size: clamp(42px, 9vw, 62px); letter-spacing: -3px; }
  .story-scene-hero #rotatingProduct { text-align: center; }
  .story-copy > p:not(.eyebrow) { margin-inline: auto; }
  .story-scene-hero .story-visual { position: absolute; inset: auto 50% -4svh auto; width: 100%; opacity: .38; transform: translateX(50%); }
  .story-scene-hero .story-visual img { width: min(680px, 110vw); margin: 0; }
  .brand-mosaic { position: absolute; inset: 44% auto auto 50%; width: min(620px, 96vw); height: 48svh; transform: translateX(-50%); opacity: .38; }
  .brand-tile { width: 105px; height: 105px; border-radius: 22px; }
  .tile-minecraft { width: 124px; height: 124px; }
  .story-scene-catalog .story-copy { top: -17svh; }
  .support-layout { gap: 36px; padding-top: 104px; padding-bottom: 30px; }
  .support-copy { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .support-copy h2 { margin-left: 0; text-align: left; }
  .support-copy-body > p { max-width: 560px; }
  .order-rail article { min-height: 150px; padding: 23px 18px 24px 0; }
  .order-rail article + article { padding-left: 18px; }
  .order-rail span { margin-bottom: 28px; }
  .order-path { grid-template-columns: 1fr auto 1fr auto 1.15fr; gap: 14px; }
  .order-path span { font-size: 17px; }
  .story-progress { right: 12px; }
  .scroll-cue { display: none; }
}

@media (max-width: 520px) {
  .brand-name { font-size: 13px; }
  .cart-button { font-size: 12px; }
  .hero h1 { letter-spacing: -1.8px; }
  .trust article { padding-right: 0; }
  .category-grid, .review-points { grid-template-columns: 1fr; }
  .category-card { min-height: 155px; }
  .catalog-intro { padding-top: 56px; }
  .story-copy h1, .story-copy h2, .story-centered h2 { font-size: 42px; letter-spacing: -2.6px; }
  .story-logo { width: 60px; height: 60px; }
  .order-rail { grid-template-columns: 1fr; }
  .order-rail article { min-height: 0; padding: 18px 0; }
  .order-rail article + article { padding-left: 0; border-left: 0; border-top: 1px solid rgba(130, 183, 243, .13); }
  .order-rail span { margin-bottom: 12px; }
  .order-path { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; text-align: left; }
  .order-path i { transform: rotate(90deg); transform-origin: center; }
  .feedback-list > div { grid-template-columns: 1fr; gap: 5px; padding: 18px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue i::after { animation: none; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  .story-scene { opacity: 0; transform: none !important; }
  .story-scene:first-of-type { opacity: 1; }
  .scroll-story { height: 100svh; }
  .story-scene-hero #rotatingProduct { transition: none; }
}