:root {
       --bg0: #05060a;
       --bg1: #070914;

       --panel: rgba(255, 255, 255, 0.045);
       --stroke: rgba(255, 255, 255, 0.10);

       --red: #ff2f55;
       --blue: #2a7cff;

       --text: #e9f1ff;
       --muted: #a9b4c7;

       --radius: 18px;
       --shadow: 0 22px 70px rgba(0, 0, 0, 0.62);
       --max: 1180px;

       --ff: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
       --ffDisplay: "Bebas Neue", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
   }

   * {
       box-sizing: border-box
   }

   html,
   body {
       height: 100%
   }

   body {
       margin: 0;
       font-family: var(--ff);
       color: var(--text);
       background: linear-gradient(135deg, rgba(7, 9, 20, 1), rgba(5, 6, 10, 1));
       background-size: 220% 220%;
       animation: pageBG 18s ease-in-out infinite;
       overflow-x: hidden;
   }

   @keyframes pageBG {

       0%,
       100% {
           background-position: 0% 50%
       }

       50% {
           background-position: 100% 50%
       }
   }

   /* ===== accessibility: skip link ===== */
   .skip {
       position: absolute;
       left: 12px;
       top: 10px;
       padding: 10px 12px;
       border-radius: 12px;
       background: rgba(0, 0, 0, 0.78);
       border: 1px solid rgba(255, 255, 255, 0.16);
       color: var(--text);
       text-decoration: none;
       font-weight: 950;
       transform: translateY(-160%);
       transition: transform .18s ease;
       z-index: 9999;
   }

   .skip:focus {
       transform: translateY(0);
       outline: none;
       box-shadow: 0 0 0 3px rgba(42, 124, 255, 0.25);
   }

   /* ===== layered animated background ===== */
   .bg3,
   .bg2,
   .bg {
       position: fixed;
       inset: -45%;
       pointer-events: none;
       z-index: -6;
       transform: rotate(-10deg);
       filter: blur(140px);
       opacity: .55;
       animation: drift 16s ease-in-out infinite alternate;
   }

   .bg3 {
       opacity: .38;
       background:
           radial-gradient(1200px 600px at 18% 55%, rgba(42, 124, 255, 0.16), transparent 62%),
           radial-gradient(1200px 600px at 82% 45%, rgba(255, 47, 85, 0.14), transparent 62%);
       animation-duration: 22s;
   }

   .bg2 {
       opacity: .50;
       background:
           radial-gradient(1100px 520px at 70% 75%, rgba(255, 47, 85, 0.16), transparent 62%),
           radial-gradient(1100px 520px at 30% 70%, rgba(42, 124, 255, 0.18), transparent 62%),
           radial-gradient(900px 520px at 50% 30%, rgba(255, 255, 255, 0.06), transparent 62%);
       animation-duration: 19s;
   }

   .bg {
       opacity: .70;
       background:
           radial-gradient(900px 420px at 18% 18%, rgba(42, 124, 255, 0.22), transparent 60%),
           radial-gradient(900px 420px at 82% 20%, rgba(255, 47, 85, 0.20), transparent 62%),
           radial-gradient(900px 420px at 48% 85%, rgba(42, 124, 255, 0.12), transparent 60%);
       animation-duration: 15s;
   }

   @keyframes drift {
       from {
           transform: translate3d(-2%, 1%, 0) rotate(-12deg);
           filter: blur(140px) hue-rotate(0deg);
       }

       to {
           transform: translate3d(2%, -1%, 0) rotate(-8deg);
           filter: blur(140px) hue-rotate(14deg);
       }
   }

   .grain {
       position: fixed;
       inset: 0;
       z-index: -3;
       pointer-events: none;
       opacity: .055;
       background-image: repeating-radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 7px);
       mix-blend-mode: overlay;
       filter: blur(.2px);
   }

   .spark {
       position: fixed;
       inset: 0;
       z-index: -2;
       pointer-events: none;
       opacity: .22;
       background:
           radial-gradient(2px 2px at 10% 20%, rgba(98, 176, 255, .55), transparent 60%),
           radial-gradient(2px 2px at 30% 70%, rgba(255, 107, 134, .45), transparent 60%),
           radial-gradient(2px 2px at 70% 30%, rgba(98, 176, 255, .40), transparent 60%),
           radial-gradient(2px 2px at 85% 65%, rgba(255, 107, 134, .35), transparent 60%),
           radial-gradient(2px 2px at 55% 40%, rgba(255, 255, 255, .22), transparent 60%);
       animation: shimmer 9s ease-in-out infinite alternate;
   }

   @keyframes shimmer {
       from {
           transform: translate3d(0, 0, 0);
           opacity: .16
       }

       to {
           transform: translate3d(0, -14px, 0);
           opacity: .28
       }
   }


   /* full-screen animated rain canvas */
   #rain {
       position: fixed;
       inset: 0;
       z-index: -1;
       pointer-events: none;
       opacity: .75;
       mix-blend-mode: screen;
   }

   /* ===== layout ===== */
   .wrap {
       max-width: var(--max);
       margin: 0 auto;
       padding: 22px 18px 70px;
   }

   header {
       position: sticky;
       top: 0;
       z-index: 50;
       backdrop-filter: blur(14px);
       background: linear-gradient(180deg, rgba(6, 7, 12, 0.82), rgba(6, 7, 12, 0.42));
       border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }

   .topbar {
       max-width: var(--max);
       margin: 0 auto;
       padding: 14px 18px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 14px;
   }

   .brand {
       display: flex;
       align-items: center;
       gap: 12px;
       min-width: 220px;
   }

   .brand img {
       width: 40px;
       height: 40px;
       object-fit: contain;
       filter: drop-shadow(0 0 14px rgba(255, 47, 85, 0.24));
   }

   .brand .name {
       display: flex;
       flex-direction: column;
       line-height: 1.05;
   }

   .brand .name strong {
       letter-spacing: .14em;
       text-transform: uppercase;
       font-size: 13px;
   }

   .brand .name span {
       color: var(--muted);
       font-size: 12px;
   }

   nav {
       display: flex;
       align-items: center;
       gap: 10px;
       flex: 1;
       justify-content: center;
       flex-wrap: wrap;
   }

   .navlink {
       color: var(--muted);
       text-decoration: none;
       font-weight: 900;
       font-size: 13px;
       padding: 10px 12px;
       border-radius: 999px;
       border: 1px solid transparent;
       transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
       display: inline-flex;
       gap: 8px;
       align-items: center;
   }

   .navlink:hover {
       color: var(--text);
       border-color: rgba(255, 255, 255, 0.10);
       background: rgba(255, 255, 255, 0.04);
       transform: translateY(-1px);
   }

   .navlink.active {
       color: var(--text);
       border-color: rgba(255, 255, 255, 0.16);
       background: rgba(255, 255, 255, 0.06);
   }

   .actions {
       display: flex;
       align-items: center;
       gap: 10px;
       justify-content: flex-end;
       min-width: 220px;
   }

   .btn {
       border: 0;
       cursor: pointer;
       font-weight: 950;
       letter-spacing: .02em;
       border-radius: 999px;
       padding: 10px 14px;
       background: transparent;
       color: var(--text);
       border: 1px solid rgba(255, 255, 255, 0.14);
       transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
       display: inline-flex;
       align-items: center;
       gap: 10px;
       user-select: none;
   }

   .btn:hover {
       transform: translateY(-1px);
       box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
       filter: brightness(1.03);
   }

   .btn:active {
       transform: none;
       box-shadow: none;
       filter: brightness(.98);
   }

   .btn.primary {
       color: #071018;
       border-color: transparent;
       background: linear-gradient(90deg, var(--red), var(--blue));
       box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
   }

   .btn.ghost {
       background: rgba(0, 0, 0, 0.25);
       border-color: rgba(255, 255, 255, 0.12);
       color: var(--muted);
   }

   .btn.ghost:hover {
       color: var(--text);
       background: rgba(255, 255, 255, 0.05)
   }

   .btn.small {
       padding: 8px 12px;
       font-size: 13px
   }

   .chip {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       font-size: 11px;
       color: var(--muted);
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: rgba(0, 0, 0, 0.25);
       padding: 6px 10px;
       border-radius: 999px;
   }

   .dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: var(--blue);
       box-shadow: 0 0 12px rgba(42, 124, 255, 0.55);
   }

   .dot.red {
       background: var(--red);
       box-shadow: 0 0 12px rgba(255, 47, 85, 0.45);
   }


   .brandTagline {
       display: inline-block;
       font-size: 12px;
       letter-spacing: .02em;
       background: linear-gradient(90deg, rgba(255, 47, 85, 1), rgba(42, 124, 255, 1), rgba(255, 47, 85, 1));
       background-size: 220% 220%;
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
       opacity: .95;
       animation: taglineShift 5.2s ease-in-out infinite;
       text-shadow: 0 0 18px rgba(42, 124, 255, 0.14);
   }

   @keyframes taglineShift {

       0%,
       100% {
           background-position: 0% 50%;
           filter: brightness(1);
       }

       50% {
           background-position: 100% 50%;
           filter: brightness(1.15);
       }
   }


   /* ===== mobile nav ===== */
   .burger {
       display: none;
   }

   .drawer {
       position: fixed;
       inset: 0;
       display: none;
       z-index: 120;
       background: rgba(0, 0, 0, 0.64);
       backdrop-filter: blur(10px);
       padding: 18px;
   }

   .drawer.show {
       display: block;
   }

   .drawerPanel {
       max-width: 420px;
       border-radius: 22px;
       border: 1px solid rgba(255, 255, 255, 0.12);
       background:
           radial-gradient(900px 340px at 20% 10%, rgba(42, 124, 255, 0.16), transparent 55%),
           radial-gradient(900px 340px at 80% 10%, rgba(255, 47, 85, 0.16), transparent 55%),
           linear-gradient(180deg, rgba(15, 16, 22, 0.96), rgba(9, 10, 14, 0.96));
       box-shadow: 0 40px 130px rgba(0, 0, 0, 0.85);
       overflow: hidden;
       padding: 14px;
   }

   .drawerPanel .row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 10px;
   }

   .drawerNav {
       display: flex;
       flex-direction: column;
       gap: 8px;
       padding: 10px 0 4px;
   }

   .drawerNav a {
       text-decoration: none;
       color: var(--text);
       padding: 12px 12px;
       border-radius: 14px;
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: rgba(255, 255, 255, 0.03);
       font-weight: 950;
   }

   /* ===== reveal animations ===== */
   .reveal {
       opacity: 0;
       transform: translateY(10px);
       transition: opacity .55s ease, transform .55s ease;
   }

   .reveal.on {
       opacity: 1;
       transform: none;
   }

   /* ===== hero ===== */
   .hero {
       margin-top: 22px;
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.32));
       border-radius: 26px;
       box-shadow: var(--shadow);
       overflow: hidden;
       position: relative;
   }

   .hero::before {
       content: "";
       position: absolute;
       inset: 0;
       background:
           radial-gradient(700px 260px at 22% 22%, rgba(42, 124, 255, 0.18), transparent 58%),
           radial-gradient(700px 260px at 82% 18%, rgba(255, 47, 85, 0.18), transparent 56%);
       pointer-events: none;
   }

   .hero::after {
       content: "";
       position: absolute;
       inset: -1px;
       background:
           linear-gradient(180deg, rgba(5, 6, 10, 0.22), rgba(5, 6, 10, 0.78)),
           url("/assets/imgs/VEGLEGES_NAGY_MERETU_LOGO.png") center/cover no-repeat;
       opacity: .10;
       mix-blend-mode: screen;
       pointer-events: none;
   }

   .heroGrid {
       position: relative;
       display: grid;
       grid-template-columns: 1.2fr .8fr;
       gap: 18px;
       padding: 28px;
       align-items: stretch;
       z-index: 1;
   }

   .kickerRow {
       display: flex;
       gap: 10px;
       align-items: center;
       flex-wrap: wrap;
       margin-bottom: 14px;
   }

   .h1 {
       font-size: 56px;
       line-height: 0.92;
       letter-spacing: 0.02em;
       margin: 0;
       text-transform: uppercase;
   }

   .h1 .a {
       color: var(--text)
   }

   .h1 .b {
       background: linear-gradient(90deg, var(--red), var(--blue), var(--red));
       background-size: 220% 220%;
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
       animation: textShift 4.2s ease-in-out infinite;
   }

   @keyframes textShift {

       0%,
       100% {
           background-position: 0% 50%
       }

       50% {
           background-position: 100% 50%
       }
   }

   /* ===== hero title clean effect ===== */
   .heroTitleFX {
       font-family: var(--ffDisplay);
       letter-spacing: 0.01em;
   }

   .heroTitleFX .a,
   .heroTitleFX .b {
       position: relative;
       display: inline-block;
       -webkit-text-stroke: 1px rgba(255, 255, 255, 0.10);
       text-shadow:
           0 0 22px rgba(42, 124, 255, 0.18),
           0 0 20px rgba(255, 47, 85, 0.14),
           0 10px 42px rgba(0, 0, 0, 0.55);
   }

   .heroTitleFX .a::after,
   .heroTitleFX .b::after {
       content: "";
       position: absolute;
       inset: -0.15em -0.35em;
       background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.18), transparent 65%);
       transform: translateX(-60%) skewX(-12deg);
       opacity: 0;
       mix-blend-mode: screen;
       pointer-events: none;
       filter: blur(0.2px);
       animation: titleSheen 4.6s ease-in-out infinite;
   }

   @keyframes titleSheen {

       0%,
       18% {
           opacity: 0;
           transform: translateX(-70%) skewX(-12deg);
       }

       30% {
           opacity: .55;
       }

       48% {
           opacity: .10;
       }

       62% {
           opacity: .45;
           transform: translateX(70%) skewX(-12deg);
       }

       100% {
           opacity: 0;
           transform: translateX(70%) skewX(-12deg);
       }
   }

   .heroTitleFX {
       animation: titleBreathe 3.8s ease-in-out infinite;
   }

   @keyframes titleBreathe {

       0%,
       100% {
           filter: brightness(1);
           transform: translateY(0);
       }

       50% {
           filter: brightness(1.08);
           transform: translateY(-1px);
       }
   }

   .headlineGlow {
       display: inline-block;
       text-shadow:
           0 0 18px rgba(42, 124, 255, 0.18),
           0 0 18px rgba(255, 47, 85, 0.14);
       animation: headlineFlicker 4.8s ease-in-out infinite;
   }

   @keyframes headlineFlicker {

       0%,
       100% {
           filter: brightness(1);
           transform: translateY(0);
       }

       45% {
           filter: brightness(1.05);
       }

       50% {
           filter: brightness(1.22);
       }

       52% {
           filter: brightness(0.98);
       }

       62% {
           filter: brightness(1.12);
           transform: translateY(-1px);
       }

       70% {
           filter: brightness(1.02);
           transform: translateY(0);
       }
   }

   .sub {
       color: var(--muted);
       font-size: 16px;
       max-width: 62ch;
       margin: 12px 0 16px;
   }

   .statRow {
       display: flex;
       gap: 10px;
       flex-wrap: wrap;
       margin: 16px 0 18px;
   }

   .stat {
       flex: 1 1 160px;
       min-width: 160px;
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: rgba(0, 0, 0, 0.26);
       border-radius: 16px;
       padding: 12px 12px;
   }

   .stat strong {
       display: block;
       font-size: 14px
   }

   .stat span {
       display: block;
       color: var(--muted);
       font-size: 12px;
       margin-top: 4px
   }

   .ctaRow {
       display: flex;
       gap: 12px;
       flex-wrap: wrap;
       align-items: center
   }

   .heroRight {
       border-radius: 20px;
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.48));
       overflow: hidden;
       /* kicsit kompaktabb jobb oldal */
       padding: 10px;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       gap: 8px;
   }



   .heroRight>* {
       margin: 0;
   }

   .heroLogo {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 12px 10px 6px;
   }

   .logoOrb {
       width: 220px;
       aspect-ratio: 1/1;
       border-radius: 999px;
       border: 1px solid rgba(255, 255, 255, 0.12);
       background:
           radial-gradient(800px 280px at 20% 20%, rgba(42, 124, 255, 0.18), transparent 60%),
           radial-gradient(800px 280px at 80% 20%, rgba(255, 47, 85, 0.18), transparent 60%),
           rgba(0, 0, 0, 0.22);
       display: grid;
       place-items: center;
       box-shadow: 0 26px 90px rgba(0, 0, 0, 0.55);
       overflow: hidden;
       position: relative;
       animation: floaty 7s ease-in-out infinite;
   }

   .logoOrb::after {
       content: "";
       position: absolute;
       inset: -2px;
       background:
           radial-gradient(420px 180px at 30% 30%, rgba(255, 255, 255, 0.10), transparent 60%),
           linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.18));
       opacity: .7;
       pointer-events: none;
   }


   .logoOrb img {
       width: 92%;
       height: auto;
       position: relative;
       z-index: 1;
       filter: drop-shadow(0 0 26px rgba(42, 124, 255, 0.16)) drop-shadow(0 0 20px rgba(255, 47, 85, 0.18));
   }

   @keyframes floaty {
       0% {
           transform: translateY(0)
       }

       50% {
           transform: translateY(-10px)
       }

       100% {
           transform: translateY(0)
       }
   }

   .serverCard {
       border-radius: 18px;
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: rgba(255, 255, 255, 0.03);
       padding: 14px;
   }

   .serverCard .row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 10px;
       flex-wrap: wrap;
   }

   /* Ha nem kell a nagy "széthúzás" (pl. IP + másolás, státusz + játékosok) */
   .serverCard .row.tight {
       justify-content: flex-start;
       gap: 8px;
   }

   .mono {
       font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
       font-size: 12px;
       color: var(--muted);
       background: rgba(0, 0, 0, 0.25);
       border: 1px solid rgba(255, 255, 255, 0.08);
       padding: 8px 10px;
       border-radius: 12px;
       display: inline-flex;
       gap: 8px;
       align-items: center;
   }

   .mono b {
       color: var(--text)
   }

   .hint {
       font-size: 12px;
       color: var(--muted);
       margin-top: 10px;
       line-height: 1.45;
       animation: softPulse 2.8s ease-in-out infinite;
       opacity: .92;
   }

   @keyframes softPulse {

       0%,
       100% {
           transform: translateY(0);
           opacity: .86
       }

       50% {
           transform: translateY(-1px);
           opacity: 1
       }
   }

   /* ===== sections ===== */

   /* ===== Gallery / Élményképek ===== */
   .gallery {
       margin-top: 14px;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 12px;
   }

   .gItem {
       border-radius: 18px;
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: rgba(0, 0, 0, 0.22);
       overflow: hidden;
       position: relative;
       padding: 0;
       cursor: pointer;
       transition: transform .15s ease, filter .15s ease, border-color .15s ease;
       box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
   }

   .gItem:hover {
       filter: brightness(1.06);
       transform: translateY(-2px);
       border-color: rgba(255, 255, 255, 0.16);
   }

   .gItem img {
       width: 100%;
       height: 210px;
       object-fit: cover;
       display: block;
       transform: scale(1.01);
   }

   .gCap {
       position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
       padding: 10px 12px;
       background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.82));
       display: flex;
       flex-direction: column;
       gap: 2px;
   }

   .gCap strong {
       font-size: 12px;
       letter-spacing: .14em;
       text-transform: uppercase;
   }

   .gCap span {
       font-size: 12px;
       color: rgba(233, 241, 255, 0.72);
       line-height: 1.35;
   }

   .gModalImg {
       width: min(1120px, 92vw);
       max-height: 78vh;
       object-fit: contain;
       border-radius: 18px;
       border: 1px solid rgba(255, 255, 255, 0.16);
       background: rgba(0, 0, 0, 0.55);
       box-shadow: 0 40px 130px rgba(0, 0, 0, 0.85);
   }

   .gModalBar {
       width: min(1120px, 92vw);
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 10px;
       margin-top: 10px;
       color: var(--muted);
       font-size: 12px;
   }

   @media (max-width: 980px) {
       .gallery {
           grid-template-columns: 1fr;
       }

       .gItem img {
           height: 220px;
       }
   }


   /* ===== GALLERY ===== */
   .galleryGrid {
       margin-top: 14px;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 12px;
   }

   @media (max-width: 980px) {
       .galleryGrid {
           grid-template-columns: 1fr;
       }
   }

   .gItem {
       border-radius: 18px;
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: rgba(0, 0, 0, 0.22);
       overflow: hidden;
       position: relative;
       cursor: zoom-in;
       transition: transform .15s ease, filter .15s ease, border-color .15s ease;
   }

   .gItem:hover {
       transform: translateY(-2px);
       filter: brightness(1.06);
       border-color: rgba(255, 255, 255, 0.16);
   }

   .gItem img {
       width: 100%;
       height: 220px;
       object-fit: cover;
       display: block;
       opacity: .96;
   }

   .gCap {
       position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
       padding: 10px 12px;
       background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.82));
       display: flex;
       align-items: flex-end;
       justify-content: space-between;
       gap: 10px;
   }

   .gCap strong {
       font-size: 12px;
       letter-spacing: .14em;
       text-transform: uppercase;
   }

   .gCap span {
       font-size: 12px;
       color: rgba(233, 241, 255, 0.72);
   }

   /* Lightbox */
   .lbImg {
       width: min(1120px, 92vw);
       max-height: 78vh;
       object-fit: contain;
       border-radius: 18px;
       border: 1px solid rgba(255, 255, 255, 0.16);
       background: rgba(0, 0, 0, 0.35);
       box-shadow: 0 40px 140px rgba(0, 0, 0, 0.85);
   }

   .lbBar {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 10px;
       margin-bottom: 10px;
   }

   .lbTitle {
       font-weight: 1000;
       letter-spacing: .10em;
       text-transform: uppercase;
       color: rgba(233, 241, 255, 0.92);
       font-size: 12px;
   }

   /* ===== gallery ===== */
   .galleryWrap {
       margin-top: 14px;
   }

   .galleryInfo {
       margin: 0;
       color: var(--muted);
       font-size: 14px;
       line-height: 1.55;
   }

   .galleryGrid {
       margin-top: 14px;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 12px;
   }

   @media (max-width: 980px) {
       .galleryGrid {
           grid-template-columns: 1fr;
       }
   }

   .gItem {
       position: relative;
       border-radius: 18px;
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: rgba(0, 0, 0, 0.22);
       overflow: hidden;
       cursor: zoom-in;
       box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
       transition: transform .15s ease, filter .15s ease, border-color .15s ease;
       min-height: 180px;
   }

   .gItem:hover {
       transform: translateY(-2px);
       filter: brightness(1.05);
       border-color: rgba(255, 255, 255, 0.16);
   }

   .gItem img {
       width: 100%;
       height: 100%;
       display: block;
       object-fit: cover;
       transform: scale(1.02);
   }

   .gCap {
       position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
       padding: 10px 12px;
       background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78));
       display: flex;
       flex-direction: column;
       gap: 2px;
   }

   .gCap strong {
       font-size: 12px;
       letter-spacing: .14em;
       text-transform: uppercase;
   }

   .gCap span {
       font-size: 12px;
       color: rgba(233, 241, 255, 0.72);
   }

   /* Lightbox */
   .gLightboxImg {
       width: min(1100px, calc(100vw - 28px));
       max-height: min(78vh, 760px);
       object-fit: contain;
       display: block;
       border-radius: 18px;
       border: 1px solid rgba(255, 255, 255, 0.14);
       background: rgba(0, 0, 0, 0.35);
       box-shadow: 0 40px 140px rgba(0, 0, 0, 0.85);
   }

   .gLightboxBar {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 10px;
       margin-top: 10px;
   }

   .gLightboxText {
       color: var(--muted);
       font-size: 12px;
   }

   section {
       scroll-margin-top: 84px
   }

   .grid {
       margin-top: 18px;
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       gap: 14px;
   }

   .card {
       border-radius: var(--radius);
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: rgba(0, 0, 0, 0.25);
       padding: 18px;
       box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
       position: relative;
       overflow: hidden;
   }

   .card::before {
       content: "";
       position: absolute;
       inset: -2px;
       background:
           radial-gradient(500px 160px at 10% 10%, rgba(42, 124, 255, 0.12), transparent 60%),
           radial-gradient(500px 160px at 90% 20%, rgba(255, 47, 85, 0.10), transparent 60%);
       pointer-events: none;
       opacity: .75;
   }

   .card>* {
       position: relative
   }

   .card h2 {
       margin: 0 0 8px;
       font-size: 18px;
       letter-spacing: 0.02em;
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .card p {
       margin: 0;
       color: var(--muted);
       font-size: 14px;
       line-height: 1.55
   }

   .pill {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       margin-top: 12px;
       border-radius: 999px;
       border: 1px solid rgba(255, 255, 255, 0.10);
       padding: 7px 10px;
       font-size: 12px;
       color: var(--muted);
       background: rgba(255, 255, 255, 0.03);
   }

   .wide {
       margin-top: 14px;
       border-radius: 22px;
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.28));
       padding: 20px;
       overflow: hidden;
       box-shadow: var(--shadow);
       position: relative;
   }

   .wide::before {
       content: "";
       position: absolute;
       inset: -60%;
       background:
           linear-gradient(90deg, rgba(255, 47, 85, 0.12), transparent 55%),
           linear-gradient(270deg, rgba(42, 124, 255, 0.12), transparent 55%);
       filter: blur(90px);
       opacity: .55;
       transform: rotate(-8deg);
       pointer-events: none;
   }

   .wide>* {
       position: relative
   }

   .wideTop {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 14px;
       flex-wrap: wrap;
   }

   .wide h3 {
       margin: 0 0 6px;
       font-size: 22px;
       letter-spacing: .02em;
   }

   .wide .muted {
       color: var(--muted);
       font-size: 14px;
       margin: 0
   }

   .list {
       margin-top: 14px;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 10px;
   }

   .li {
       border-radius: 16px;
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: rgba(0, 0, 0, 0.22);
       padding: 12px 12px;
       display: flex;
       gap: 10px;
       align-items: flex-start;
       transition: transform .15s ease, filter .15s ease;
   }

   .li:hover {
       transform: translateY(-2px);
       filter: brightness(1.03);
   }

   .li .ico {
       width: 34px;
       height: 34px;
       border-radius: 12px;
       display: grid;
       place-items: center;
       background: rgba(255, 255, 255, 0.04);
       border: 1px solid rgba(255, 255, 255, 0.10);
       font-weight: 950;
       flex: 0 0 auto;
   }

   .li strong {
       display: block;
       font-size: 14px;
       margin-bottom: 2px
   }

   .li span {
       display: block;
       font-size: 12px;
       color: var(--muted);
       line-height: 1.45
   }


   /* ===== micro hover animations (subtle) ===== */
   .heroLogoFull,
   .serverCard {
       transition: transform .16s ease, filter .16s ease, border-color .16s ease, box-shadow .16s ease;
       will-change: transform;
   }

   .heroLogoFull:hover,
   .serverCard:hover {
       transform: translateY(-2px);
       filter: brightness(1.04);
       border-color: rgba(255, 255, 255, 0.16);
       box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
   }

   /* keep hover subtle on mobile/touch */
   @media (pointer: coarse) {

       .heroLogoFull:hover,
       .serverCard:hover {
           transform: none;
           filter: none;
           box-shadow: none;
       }
   }

   /* extra premium effects */
   .card,
   .product,
   .li,
   .heroRight,
   .serverCard {
       transform-style: preserve-3d;
       will-change: transform;
   }

   .shine {
       position: relative;
       overflow: hidden;
   }

   .shine::after {
       content: "";
       position: absolute;
       inset: -40%;
       background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.10), transparent 60%);
       transform: translateX(-55%) rotate(12deg);
       opacity: 0;
       transition: opacity .2s ease;
       pointer-events: none;
   }

   .shine:hover::after {
       opacity: 1;
       animation: shineSweep 1.2s ease;
   }

   @keyframes shineSweep {
       from {
           transform: translateX(-65%) rotate(12deg);
       }

       to {
           transform: translateX(55%) rotate(12deg);
       }
   }

   .btn.primary {
       position: relative;
       overflow: hidden;
   }

   .btn.primary::after {
       content: "";
       position: absolute;
       inset: -120% -60%;
       background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.18), transparent 55%);
       transform: translateX(-20%);
       opacity: .0;
       transition: opacity .2s ease;
       pointer-events: none;
   }

   .btn.primary:hover::after {
       opacity: .9;
       animation: btnGlow 1.1s ease;
   }

   @keyframes btnGlow {
       from {
           transform: translateX(-35%);
       }

       to {
           transform: translateX(35%);
       }
   }



   .payGrid {
       display: grid;
       grid-template-columns: 1.25fr .75fr;
       gap: 12px;
   }

   @media (max-width: 980px) {
       .payGrid {
           grid-template-columns: 1fr;
       }
   }

   /* ===== SHOP ===== */
   .shopHeader {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 14px;
       flex-wrap: wrap;
   }

   .shopGrid {
       margin-top: 14px;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 12px;
   }

   .product {
       border-radius: 18px;
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: rgba(0, 0, 0, 0.22);
       overflow: hidden;
       position: relative;
       padding: 14px;
       transition: transform .15s ease, filter .15s ease;
   }

   .product:hover {
       filter: brightness(1.04);
       transform: translateY(-2px);
   }

   .pTop {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 10px;
   }

   .tag {
       font-size: 11px;
       color: var(--muted);
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: rgba(255, 255, 255, 0.03);
       padding: 6px 10px;
       border-radius: 999px;
   }

   .price {
       font-weight: 1000;
       background: linear-gradient(90deg, var(--red), var(--blue));
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
       letter-spacing: .02em;
   }

   .pTitle {
       margin: 10px 0 6px;
       font-size: 16px;
       font-weight: 1000;
   }

   .pDesc {
       margin: 0;
       color: var(--muted);
       font-size: 13px;
       line-height: 1.5;
   }

   .pActions {
       margin-top: 12px;
       display: flex;
       gap: 10px;
       flex-wrap: wrap;
       align-items: center;
       justify-content: space-between;
   }

   /* ===== modals ===== */
   .backdrop {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.72);
       display: none;
       align-items: center;
       justify-content: center;
       z-index: 200;
       padding: 18px;
   }

   .backdrop.show {
       display: flex;
   }

   .modal {
       width: 560px;
       max-width: 100%;
       border-radius: 22px;
       border: 1px solid rgba(255, 255, 255, 0.12);
       background:
           radial-gradient(900px 340px at 20% 10%, rgba(42, 124, 255, 0.14), transparent 55%),
           radial-gradient(900px 340px at 80% 10%, rgba(255, 47, 85, 0.14), transparent 55%),
           linear-gradient(180deg, rgba(15, 16, 22, 0.96), rgba(9, 10, 14, 0.96));
       box-shadow: 0 40px 130px rgba(0, 0, 0, 0.85);
       overflow: hidden;
       transform: translateY(10px) scale(.99);
       opacity: 0;
       transition: transform .18s ease, opacity .18s ease;
   }

   .backdrop.show .modal {
       transform: none;
       opacity: 1;
   }

   .modalInner {
       padding: 18px;
   }

   .modalHead {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 10px;
       margin-bottom: 10px;
   }

   .modalTitle {
       display: flex;
       flex-direction: column;
       gap: 4px;
   }

   .modalTitle h2 {
       margin: 0;
       font-size: 18px;
       letter-spacing: .02em;
   }

   .modalTitle p {
       margin: 0;
       font-size: 12px;
       color: var(--muted);
       line-height: 1.4;
   }

   .tabs {
       display: flex;
       gap: 10px;
       flex-wrap: wrap;
       margin: 12px 0 12px;
   }

   .tab {
       padding: 9px 12px;
       border-radius: 999px;
       border: 1px solid rgba(255, 255, 255, 0.12);
       background: rgba(0, 0, 0, 0.18);
       color: var(--muted);
       font-weight: 1000;
       cursor: pointer;
       font-size: 13px;
   }

   .tab.active {
       color: #061018;
       border-color: transparent;
       background: linear-gradient(90deg, var(--red), var(--blue));
   }

   form {
       display: flex;
       flex-direction: column;
       gap: 12px;
       margin-top: 10px
   }

   label {
       font-size: 12px;
       color: var(--muted);
       font-weight: 900;
       letter-spacing: .03em
   }

   .field {
       display: flex;
       flex-direction: column;
       gap: 7px;
   }

   .in {
       padding: 12px 12px;
       border-radius: 14px;
       border: 1px solid rgba(255, 255, 255, 0.12);
       background: rgba(0, 0, 0, 0.28);
       color: var(--text);
       outline: none;
       font-weight: 850;
   }

   .in:focus {
       border-color: rgba(98, 176, 255, 0.55);
       filter: brightness(1.05);
   }

   .row2 {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 10px;
   }

   .help {
       color: var(--muted);
       font-size: 12px;
       line-height: 1.45;
       margin-top: -4px;
   }

   .msg {
       display: none;
       border-radius: 14px;
       border: 1px solid rgba(255, 255, 255, 0.12);
       background: rgba(255, 255, 255, 0.04);
       padding: 10px 12px;
       font-size: 13px;
       color: var(--muted);
   }

   .msg.show {
       display: block;
   }

   .msg.ok {
       border-color: rgba(42, 124, 255, 0.35);
       color: rgba(210, 235, 255, 0.92);
   }

   .msg.bad {
       border-color: rgba(255, 47, 85, 0.35);
       color: rgba(255, 219, 227, 0.92);
   }

   .divider {
       height: 1px;
       background: rgba(255, 255, 255, 0.10);
       margin: 14px 0;
   }

   .profile {
       display: none;
       gap: 12px;
       align-items: center;
       justify-content: space-between;
   }

   .profile.show {
       display: flex;
   }

   .avatar {
       width: 42px;
       height: 42px;
       border-radius: 14px;
       border: 1px solid rgba(255, 255, 255, 0.12);
       background: linear-gradient(135deg, rgba(255, 47, 85, 0.16), rgba(42, 124, 255, 0.16));
       display: grid;
       place-items: center;
       font-weight: 1000;
       letter-spacing: .04em;
   }

   .profile .who {
       display: flex;
       flex-direction: column;
       line-height: 1.1
   }

   .profile .who strong {
       font-size: 13px
   }

   .profile .who span {
       font-size: 12px;
       color: var(--muted)
   }

   .pwRow {
       display: flex;
       gap: 10px;
       align-items: center;
   }

   .pwRow .in {
       flex: 1;
   }

   .iconBtn {
       width: 44px;
       height: 44px;
       border-radius: 14px;
       border: 1px solid rgba(255, 255, 255, 0.12);
       background: rgba(0, 0, 0, 0.22);
       color: var(--text);
       cursor: pointer;
       display: grid;
       place-items: center;
       font-weight: 1000;
       transition: filter .15s ease, transform .15s ease;
   }

   .iconBtn:hover {
       filter: brightness(1.08);
       transform: translateY(-1px);
   }

   /* cart list */
   .cartList {
       display: flex;
       flex-direction: column;
       gap: 10px;
       margin-top: 12px;
   }

   .cartItem {
       border-radius: 16px;
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: rgba(0, 0, 0, 0.22);
       padding: 12px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 10px;
       flex-wrap: wrap;
   }

   .cartItem .left {
       display: flex;
       flex-direction: column;
       gap: 3px;
   }

   .cartItem .name {
       font-weight: 1000;
   }

   .cartItem .meta {
       font-size: 12px;
       color: var(--muted);
   }

   .qty {
       display: flex;
       gap: 8px;
       align-items: center;
   }

   .qty button {
       width: 34px;
       height: 34px;
       border-radius: 12px;
   }

   .totalRow {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 10px;
       margin-top: 12px;
       padding-top: 12px;
       border-top: 1px solid rgba(255, 255, 255, 0.10);
   }

   /* ===== toast ===== */
   .toasts {
       position: fixed;
       right: 14px;
       bottom: 14px;
       z-index: 999;
       display: flex;
       flex-direction: column;
       gap: 10px;
       pointer-events: none;
   }

   .toast {
       pointer-events: none;
       border-radius: 16px;
       border: 1px solid rgba(255, 255, 255, 0.12);
       background: rgba(15, 16, 22, 0.86);
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
       padding: 12px 12px;
       width: min(420px, calc(100vw - 28px));
       transform: translateY(10px);
       opacity: 0;
       animation: pop .18s ease forwards;
   }

   @keyframes pop {
       to {
           transform: none;
           opacity: 1;
       }
   }

   .toast .trow {
       display: flex;
       gap: 10px;
       align-items: flex-start;
   }

   .toast .badge {
       width: 32px;
       height: 32px;
       border-radius: 12px;
       display: grid;
       place-items: center;
       border: 1px solid rgba(255, 255, 255, 0.12);
       background: rgba(255, 255, 255, 0.03);
       flex: 0 0 auto;
       font-weight: 1000;
   }

   .toast.ok .badge {
       background: rgba(42, 124, 255, 0.10);
       border-color: rgba(42, 124, 255, 0.28);
   }

   .toast.bad .badge {
       background: rgba(255, 47, 85, 0.10);
       border-color: rgba(255, 47, 85, 0.26);
   }

   .toast .tt {
       font-weight: 1000;
   }

   .toast .td {
       font-size: 13px;
       color: var(--muted);
       margin-top: 2px;
       line-height: 1.35;
   }

   /* ===== custom cursor ===== */
   .ownerTitle {
       margin: 0;
       display: inline-block;
       letter-spacing: .04em;
       text-transform: uppercase;
       background: linear-gradient(90deg, rgba(255, 47, 85, 1), rgba(42, 124, 255, 1), rgba(255, 47, 85, 1));
       background-size: 240% 240%;
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
       text-shadow: 0 0 22px rgba(42, 124, 255, 0.22);
       animation: ownerGlow 3.8s ease-in-out infinite;
   }

   @keyframes ownerGlow {

       0%,
       100% {
           background-position: 0% 50%;
           filter: brightness(1);
       }

       50% {
           background-position: 100% 50%;
           filter: brightness(1.18);
       }
   }

   /* ===== footer ===== */
   footer {
       margin-top: 18px;
       padding: 18px 6px 0;
       color: var(--muted);
       font-size: 12px;
       text-align: center;
   }


   /* ===== Intro overlay ===== */
   .intro {
       position: fixed;
       inset: 0;
       display: grid;
       place-items: center;
       background: radial-gradient(900px 420px at 20% 20%, rgba(42, 124, 255, 0.22), transparent 60%),
           radial-gradient(900px 420px at 80% 20%, rgba(255, 47, 85, 0.22), transparent 62%),
           rgba(5, 6, 10, 0.92);
       z-index: 10000;
       backdrop-filter: blur(14px);
       opacity: 1;
       transition: opacity .45s ease, visibility .45s ease;
   }

   .intro.hide {
       opacity: 0;
       visibility: hidden;
       pointer-events: none;
   }

   .introInner {
       display: flex;
       align-items: center;
       gap: 14px;
       padding: 16px 18px;
       border-radius: 22px;
       border: 1px solid rgba(255, 255, 255, 0.14);
       background: rgba(0, 0, 0, 0.28);
       box-shadow: 0 40px 140px rgba(0, 0, 0, 0.75);
       transform: translateY(8px) scale(.98);
       animation: introIn .72s cubic-bezier(.2, .9, .2, 1) forwards;
   }

   @keyframes introIn {
       to {
           transform: none;
       }
   }

   .introLogo {
       width: 64px;
       height: 64px;
       object-fit: contain;
       filter: drop-shadow(0 0 18px rgba(255, 47, 85, 0.18)) drop-shadow(0 0 18px rgba(42, 124, 255, 0.16));
   }

   .introBrand {
       font-weight: 1000;
       letter-spacing: .18em;
       text-transform: uppercase;
       font-size: 12px;
       color: rgba(233, 241, 255, 0.92);
   }

   .introPremium {
       margin-top: 2px;
       font-weight: 1100;
       font-size: 22px;
       letter-spacing: .04em;
       text-transform: uppercase;
       background: linear-gradient(90deg, var(--red), var(--blue), var(--red));
       background-size: 220% 220%;
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
       animation: textShift 2.8s ease-in-out infinite;
       text-shadow: 0 0 18px rgba(42, 124, 255, 0.18);
   }


   .introHint {
       margin-top: 8px;
       font-size: 12px;
       color: rgba(233, 241, 255, 0.78);
       letter-spacing: .06em;
       text-transform: uppercase;
       opacity: .92;
       animation: introHintPulse 1.9s ease-in-out infinite;
       user-select: none;
   }

   @keyframes introHintPulse {

       0%,
       100% {
           transform: translateY(0);
           opacity: .72
       }

       50% {
           transform: translateY(-1px);
           opacity: 1
       }
   }


   .introInner {
       border: 1px solid rgba(255, 255, 255, 0.16);
       background: rgba(0, 0, 0, 0.30);
   }

   .introBarWrap {
       margin-top: 10px;
       height: 6px;
       border-radius: 999px;
       background: rgba(255, 255, 255, 0.06);
       border: 1px solid rgba(255, 255, 255, 0.10);
       overflow: hidden;
   }

   .introBar {
       height: 100%;
       width: 38%;
       border-radius: 999px;
       background: linear-gradient(90deg, var(--red), var(--blue));
       filter: saturate(1.05);
       animation: introBarMove 1.25s ease-in-out infinite alternate;
   }

   @keyframes introBarMove {
       from {
           transform: translateX(-10%);
           width: 34%;
           opacity: .75;
       }

       to {
           transform: translateX(165%);
           width: 44%;
           opacity: 1;
       }
   }

   /* Intro premium text: subtle glitch / scan */
   .introPremium {
       position: relative;
   }

   .introPremium::after {
       content: "";
       position: absolute;
       inset: -2px -6px;
       background:
           linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.10) 45%, transparent 70%),
           linear-gradient(180deg, rgba(42, 124, 255, 0.10), rgba(255, 47, 85, 0.08));
       mix-blend-mode: screen;
       opacity: .0;
       pointer-events: none;
       transform: translateX(-30%);
       animation: introScan 2.6s ease-in-out infinite;
       border-radius: 10px;
       filter: blur(0.2px);
   }

   @keyframes introScan {

       0%,
       20% {
           opacity: 0;
           transform: translateX(-35%);
       }

       35% {
           opacity: .55;
       }

       55% {
           opacity: .12;
       }

       70% {
           opacity: .45;
           transform: translateX(35%);
       }

       100% {
           opacity: 0;
           transform: translateX(35%);
       }
   }

   /* ===== Hero right: full logo fill ===== */
   .heroLogoFull {
       position: relative;
       border-radius: 18px;
       border: 1px solid rgba(255, 255, 255, 0.10);
       overflow: hidden;
       min-height: 260px;
       display: block;
       box-shadow: 0 26px 90px rgba(0, 0, 0, 0.55);
   }

   .heroLogoImg {
       width: 100%;
       height: 100%;
       display: block;
       object-fit: cover;
       transform: scale(1.02);
       filter: drop-shadow(0 0 26px rgba(42, 124, 255, 0.10)) drop-shadow(0 0 20px rgba(255, 47, 85, 0.10));
   }

   .heroLogoFX {
       position: absolute;
       inset: -2px;
       background:
           radial-gradient(420px 180px at 30% 30%, rgba(255, 255, 255, 0.12), transparent 60%),
           linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.48));
       mix-blend-mode: screen;
       pointer-events: none;
       opacity: .95;
   }

   /* ===== Owner upgrade ===== */
   .ownerBadge {
       margin-left: 8px;
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 4px 8px;
       border-radius: 999px;
       font-size: 11px;
       font-weight: 1000;
       letter-spacing: .02em;
       color: #071018;
       background: linear-gradient(90deg, var(--red), var(--blue));
       vertical-align: middle;
       box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
   }

   .ownerBadge.alt {
       background: linear-gradient(90deg, var(--blue), var(--red));
   }

   .li.ownerCard {
       position: relative;
   }

   .li.ownerCard::after {
       content: "";
       position: absolute;
       inset: -2px;
       background: radial-gradient(320px 120px at 20% 10%, rgba(255, 255, 255, 0.10), transparent 60%),
           radial-gradient(320px 120px at 80% 20%, rgba(255, 255, 255, 0.08), transparent 62%);
       opacity: 0;
       transition: opacity .18s ease;
       pointer-events: none;
   }

   .li.ownerCard:hover::after {
       opacity: 1;
   }

   /* ===== Tilt helpers ===== */
   .tilt {
       transform-style: preserve-3d;
   }

   .tilt>* {
       transform: translateZ(0.1px);
   }


   /* ===== responsive ===== */
   @media (max-width: 980px) {
       .heroGrid {
           grid-template-columns: 1fr;
           padding: 20px
       }

       .h1 {
           font-size: 44px
       }

       .grid {
           grid-template-columns: 1fr
       }

       .list {
           grid-template-columns: 1fr
       }

       .shopGrid {
           grid-template-columns: 1fr
       }

       nav {
           display: none
       }

       .burger {
           display: inline-flex
       }

       .actions {
           min-width: 0
       }

       .brand {
           min-width: 0
       }

       .row2 {
           grid-template-columns: 1fr
       }

       .cartBtn {
           top: 74px;
       }
   }

   @media (prefers-reduced-motion: reduce) {
       * {
           animation: none !important;
           transition: none !important;
           scroll-behavior: auto !important
       }

       .bg,
       .bg2,
       .bg3,
       .grain,
       .spark {
           display: none
       }
   }


   /* ===== stability / scroll fix ===== */
   html,
   body {
       height: auto;
       min-height: 100%;
   }

   body {
       overscroll-behavior-y: none;
   }

   /* Reduce repaint glitches on some browsers */
   header {
       transform: translateZ(0);
       -webkit-backdrop-filter: blur(14px);
   }

   .bg,
   .bg2,
   .bg3,
   #rain,
   .grain,
   .spark {
       backface-visibility: hidden;
       will-change: transform, opacity;
       transform: translate3d(0, 0, 0) rotate(-10deg);
       contain: paint;
   }

   #rain {
       mix-blend-mode: normal;
       opacity: .55;
   }

   .grain {
       mix-blend-mode: normal;
       opacity: .04;
   }

   /* If user prefers reduced motion, keep everything visible and stable */
   @media (prefers-reduced-motion: reduce) {
       .reveal {
           opacity: 1 !important;
           transform: none !important;
       }

       .bg,
       .bg2,
       .bg3,
       #rain,
       .grain,
       .spark {
           animation: none !important;
       }
   }

   /* ===== hero about highlights (moved under CTA) ===== */
   .aboutHighlights {
       margin-top: 14px;
   }

   .aboutHead {
       display: flex;
       align-items: flex-end;
       justify-content: space-between;
       gap: 12px;
       margin-bottom: 10px;
   }

   .aboutTitle {
       margin: 0;
       font-size: 22px;
       letter-spacing: -.02em;
   }

   .aboutGridMini {
       display: grid;
       grid-template-columns: 1.15fr .85fr;
       gap: 12px;
   }

   @media (max-width: 980px) {
       .aboutGridMini {
           grid-template-columns: 1fr;
       }
   }

   .miniCard {
       border: 1px solid rgba(255, 255, 255, 0.10);
       background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
       border-radius: 18px;
       padding: 14px 14px 10px;
       box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
   }

   .miniTop {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-bottom: 10px;
   }

   .miniBadge {
       font-size: 12px;
       font-weight: 900;
       letter-spacing: .08em;
       text-transform: uppercase;
       padding: 7px 10px;
       border-radius: 999px;
       background: rgba(255, 47, 85, 0.10);
       border: 1px solid rgba(255, 47, 85, 0.20);
       color: #ffd7df;
   }

   .miniRow {
       display: flex;
       gap: 10px;
       padding: 10px 8px;
       border-radius: 14px;
   }

   .miniRow+.miniRow {
       margin-top: 6px;
   }

   .miniRow:hover {
       background: rgba(255, 255, 255, 0.04);
   }

   .miniIco {
       width: 26px;
       height: 26px;
       display: grid;
       place-items: center;
       font-size: 18px;
       flex: 0 0 26px;
   }

   /* ===== back to top ===== */
   .toTop {
       position: fixed;
       right: 16px;
       bottom: 16px;
       z-index: 60;
       opacity: 0;
       transform: translateY(10px);
       pointer-events: none;
       transition: opacity .2s ease, transform .2s ease;
   }

   .toTop.on {
       opacity: 1;
       transform: none;
       pointer-events: auto;
   }


   /* ===== GIF live overlay ===== */
   .gifWrap {
       position: relative;
   }

   .heroGif {
       width: 100%;
       height: 180px;
       object-fit: cover;
       display: block;
       opacity: .95;
   }

   .gifOverlay {
       position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
       padding: 10px 12px;
       background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
       display: flex;
       flex-direction: column;
       gap: 2px;
   }

   .gifTitle {
       font-weight: 1000;
       font-size: 13px;
       letter-spacing: .14em;
       text-transform: uppercase;
       color: #e9f1ff;
   }

   .gifSub {
       font-size: 12px;
       color: rgba(233, 241, 255, 0.78);
   }


   /* ===== GIF below filler ===== */
   .heroGif {
       width: 100%;
       height: 180px;
       object-fit: cover;
       display: block;
       opacity: .95;
   }

   .gifBelow {
       text-align: center;
       padding: 8px 6px 2px;
   }

   .gifBelowText {
       font-size: 12px;
       color: rgba(233, 241, 255, 0.65);
       letter-spacing: .04em;
   }


   /* ===== TikTok button (refined, animated) ===== */
   .tiktokBtn {
       font-size: 12px;
       /* picit kisebb */
       font-weight: 1000;
       padding: 9px 16px;
       /* kompaktabb */
       border-radius: 999px;
       text-decoration: none;
       color: #ffffff;
       background: linear-gradient(90deg, #ff2f55, #2a7cff, #ff2f55);
       background-size: 220% 220%;
       box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
       border: 1px solid rgba(255, 255, 255, 0.14);
       transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       letter-spacing: .08em;
       text-transform: uppercase;
       animation: tiktokPulse 3.8s ease-in-out infinite;
   }

   .tiktokBtn:hover {
       transform: translateY(-1px) scale(1.02);
       filter: brightness(1.12);
       box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
       animation-play-state: paused;
   }

   @keyframes tiktokPulse {

       0%,
       100% {
           background-position: 0% 50%;
           box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
       }

       50% {
           background-position: 100% 50%;
           box-shadow: 0 12px 28px rgba(42, 124, 255, 0.45);
       }
   }


   /* ===== Ambient city vibe button ===== */
   .ambientBtn {
       position: fixed;
       left: 16px;
       bottom: 16px;
       z-index: 80;
       border-radius: 999px;
       border: 1px solid rgba(255, 255, 255, 0.14);
       background: rgba(0, 0, 0, 0.30);
       color: rgba(233, 241, 255, 0.92);
       padding: 9px 12px;
       font-weight: 950;
       letter-spacing: .06em;
       text-transform: uppercase;
       font-size: 11px;
       cursor: pointer;
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
       box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
       transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
   }

   .ambientBtn:hover {
       transform: translateY(-1px);
       filter: brightness(1.06);
       background: rgba(255, 255, 255, 0.05);
       border-color: rgba(255, 255, 255, 0.18);
   }

   .ambientBtn.on {
       background: rgba(42, 124, 255, 0.14);
       border-color: rgba(42, 124, 255, 0.28);
   }

   @media (pointer: coarse) {
       .ambientBtn {
           display: none !important;
       }
   }


   /* ===== Live lights (subtle moving glow) ===== */
   .liveLights {
       position: fixed;
       inset: -20%;
       z-index: -2;
       /* same layer family as spark, above grain */
       pointer-events: none;
       opacity: .16;
       filter: blur(80px);
       mix-blend-mode: screen;
       background:
           radial-gradient(520px 240px at 18% 30%, rgba(42, 124, 255, 0.28), transparent 65%),
           radial-gradient(520px 240px at 82% 35%, rgba(255, 47, 85, 0.24), transparent 65%),
           radial-gradient(640px 300px at 55% 80%, rgba(42, 124, 255, 0.18), transparent 70%);
       background-size: 140% 140%;
       animation: liveLightsDrift 18s ease-in-out infinite alternate;
       transform: translate3d(0, 0, 0);
       backface-visibility: hidden;
       will-change: transform, opacity, filter, background-position;
       contain: paint;
   }

   @keyframes liveLightsDrift {
       0% {
           transform: translate3d(-1.2%, .6%, 0) rotate(-2deg);
           opacity: .12;
           filter: blur(86px);
           background-position: 0% 40%;
       }

       50% {
           opacity: .18;
           filter: blur(78px);
           background-position: 55% 55%;
       }

       100% {
           transform: translate3d(1.2%, -0.6%, 0) rotate(2deg);
           opacity: .14;
           filter: blur(88px);
           background-position: 100% 60%;
       }
   }

   @media (prefers-reduced-motion: reduce) {
       .liveLights {
           animation: none !important;
           opacity: .10;
       }
   }

   @media (pointer: coarse) {

       .cursorDot,
       .cursorRing {
           display: none !important;
       }
   }

   /* ===== Fancy cursor (desktop only) ===== */
   @media (pointer: fine) {
       body.hasFancyCursor {
           cursor: none !important;
       }

       a,
       button,
       .btn,
       [role="button"],
       summary {
           cursor: none !important;
       }
   }

   .cursorDot,
   .cursorRing {
       position: fixed;
       left: 0;
       top: 0;
       z-index: 9999;
       pointer-events: none;
       opacity: 0;
       transform: translate(-50%, -50%);
       transition: opacity .14s ease;
   }

   .cursorDot {
       width: 9px;
       height: 9px;
       border-radius: 999px;
       background: linear-gradient(90deg, var(--red), var(--blue));
       box-shadow:
           0 0 0 2px rgba(0, 0, 0, 0.25),
           0 10px 28px rgba(0, 0, 0, 0.45);
       mix-blend-mode: screen;
   }

   .cursorRing {
       width: 34px;
       height: 34px;
       border-radius: 999px;
       border: 1px solid rgba(255, 255, 255, 0.22);
       background: rgba(0, 0, 0, 0.06);
       box-shadow: 0 18px 70px rgba(0, 0, 0, 0.55);
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
       transition: transform .18s ease, border-color .18s ease, background .18s ease;
   }

   .cursorRing.hover {
       transform: translate(-50%, -50%) scale(1.12);
       border-color: rgba(255, 255, 255, 0.34);
       background: rgba(255, 255, 255, 0.04);
   }

   .cursorRing.down {
       transform: translate(-50%, -50%) scale(0.92);
       border-color: rgba(255, 255, 255, 0.44);
   }

   .cursorRing.text {
       width: 26px;
       height: 40px;
       border-radius: 14px;
   }

   .cursorRing.pulse {
       animation: cursorPulse .34s ease-out 1;
   }

   @keyframes cursorPulse {
       0% {
           transform: translate(-50%, -50%) scale(0.96);
       }

       55% {
           transform: translate(-50%, -50%) scale(1.22);
       }

       100% {
           transform: translate(-50%, -50%) scale(1.08);
       }
   }

   /* ===== Scroll progress (tiny, premium) ===== */
   .scrollProg {
       position: fixed;
       left: 0;
       top: 0;
       height: 3px;
       width: 100%;
       z-index: 9998;
       pointer-events: none;
       background: linear-gradient(90deg, rgba(255, 47, 85, 0.0), rgba(255, 47, 85, 0.12), rgba(42, 124, 255, 0.12), rgba(42, 124, 255, 0.0));
       opacity: .75;
   }

   .scrollProg::after {
       content: "";
       position: absolute;
       left: 0;
       top: 0;
       height: 100%;
       width: var(--p, 0%);
       background: linear-gradient(90deg, var(--red), var(--blue));
       box-shadow: 0 0 14px rgba(42, 124, 255, 0.28);
   }

   /* ===== Stable cursor (CSS only) ===== */
   body {
       cursor: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%0A%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ff2f55%22/%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232a7cff%22/%3E%0A%3C/linearGradient%3E%0A%3C/defs%3E%0A%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%224.5%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.65%29%22%20stroke-width%3D%221%22/%3E%0A%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%229%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%20stroke-width%3D%221%22/%3E%0A%3C/svg%3E') 10 10, auto;
   }

   a,
   button,
   .btn,
   [role="button"] {
       cursor: pointer;
   }

   @media (pointer: coarse) {
       body {
           cursor: auto;
       }
   }



   /* ===== HERO TITLE: premium reveal + afterglow (override) ===== */
   .heroTitleFX {
       font-family: var(--ffDisplay);
       letter-spacing: .02em;
   }

   /* default: no constant flicker; keep it clean until reveal triggers */
   .headlineGlow {
       position: relative;
       display: inline-block;
       will-change: transform, filter, opacity;
       transform-origin: left center;
       animation: none !important;
       text-shadow:
           0 0 22px rgba(42, 124, 255, 0.18),
           0 0 20px rgba(255, 47, 85, 0.14),
           0 10px 42px rgba(0, 0, 0, 0.55);
   }

   /* when the reveal gets .on (IntersectionObserver), animate in */
   .reveal.on .heroTitleFX .headlineGlow {
       animation:
           heroWipeIn .78s cubic-bezier(.2, .9, .2, 1) both,
           heroAfterGlow 5.2s ease-in-out .9s infinite;
   }

   /* second line slightly later */
   .reveal.on .heroTitleFX .b.headlineGlow {
       animation-delay: .12s, 1.05s;
   }

   /* sheen sweep */
   .reveal.on .heroTitleFX .headlineGlow::after {
       content: "";
       position: absolute;
       inset: -0.18em -0.45em;
       background: linear-gradient(120deg,
               transparent 35%,
               rgba(255, 255, 255, 0.22) 50%,
               transparent 65%);
       transform: translateX(-70%) skewX(-12deg);
       opacity: 0;
       mix-blend-mode: screen;
       pointer-events: none;
       filter: blur(.2px);
       animation: heroSheen 2.8s ease-in-out .45s infinite;
   }

   .reveal.on .heroTitleFX .b.headlineGlow::after {
       animation-delay: .65s;
   }

   @keyframes heroWipeIn {
       0% {
           opacity: 0;
           transform: translateY(18px) scale(.99);
           filter: blur(10px) brightness(.9);
           letter-spacing: .08em;
       }

       55% {
           opacity: 1;
           filter: blur(0px) brightness(1.08);
       }

       100% {
           opacity: 1;
           transform: translateY(0) scale(1);
           filter: blur(0px) brightness(1);
           letter-spacing: .02em;
       }
   }

   @keyframes heroAfterGlow {

       0%,
       100% {
           filter: brightness(1);
           transform: translateY(0);
       }

       50% {
           filter: brightness(1.12);
           transform: translateY(-1px);
       }
   }

   @keyframes heroSheen {

       0%,
       18% {
           opacity: 0;
           transform: translateX(-80%) skewX(-12deg);
       }

       35% {
           opacity: .55;
       }

       55% {
           opacity: .10;
       }

       70% {
           opacity: .45;
           transform: translateX(80%) skewX(-12deg);
       }

       100% {
           opacity: 0;
           transform: translateX(80%) skewX(-12deg);
       }
   }

   @media (prefers-reduced-motion: reduce) {

       .reveal.on .heroTitleFX .headlineGlow,
       .reveal.on .heroTitleFX .headlineGlow::after {
           animation: none !important;
       }
   }