/* ==========================================================================
   LUCKYCARDSPIN — GLOBAL DESIGN SYSTEM
   A premium Indian card-gaming platform.
   Palette derived from the brand artwork itself: deep royal violet,
   warm antique gold, and a jewel rose accent — luck & luxury, not
   the generic "black + neon" casino cliché.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------- *
 * 1. DESIGN TOKENS
 * ---------------------------------------------------------------------- */
:root{
  /* -- Core palette (named) -------------------------------------------- */
  --ink:        #0B0710;   /* base background — near-black, violet undertone */
  --ink-2:      #150B22;   /* secondary band background */
  --surface:    #1E1130;   /* card / panel surface */
  --surface-hi: #2A1943;   /* elevated / hovered surface */
  --gold:       #E7A83E;   /* primary accent — antique gold */
  --gold-soft:  #F4D89B;   /* light gold — gradient tops, glow */
  --gold-deep:  #9C6B1E;   /* shadowed gold for depth */
  --amethyst:   #A855D6;   /* secondary accent — royal violet */
  --amethyst-deep: #4B1D72; /* deep violet for backgrounds/gradients */
  --rose:       #D2477A;   /* tertiary accent — jewel rose (live/hot/alerts) */
  --ivory:      #F6EFE3;   /* primary text on dark */
  --muted:      #AA9DC4;   /* secondary / muted text */
  --muted-dim:  #756A8E;   /* tertiary / faint text */
  --line:       rgba(231,168,62,0.16); /* hairline borders */
  --line-soft:  rgba(246,239,227,0.08);

  /* -- Gradients --------------------------------------------------------- */
  --grad-gold:    linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 52%, var(--gold-deep) 100%);
  --grad-royal:   linear-gradient(160deg, var(--amethyst-deep) 0%, var(--ink) 70%);
  --grad-hero:    radial-gradient(120% 100% at 85% 15%, rgba(168,85,214,0.30) 0%, transparent 55%),
                   radial-gradient(90% 80% at 8% 88%, rgba(231,168,62,0.18) 0%, transparent 50%),
                   var(--ink);
  --grad-text:    linear-gradient(95deg, var(--gold-soft) 0%, var(--gold) 45%, var(--amethyst) 100%);
  --grad-card:    linear-gradient(165deg, rgba(246,239,227,0.06) 0%, rgba(246,239,227,0.015) 100%);

  /* -- Typography ---------------------------------------------------------*/
  --font-display: "Arial", Sans-serif;
  --font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Space Grotesk", "Segoe UI", sans-serif;

  --fs-xs:   clamp(0.72rem, 0.7rem + 0.1vw, 0.8rem);
  --fs-sm:   clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
  --fs-base: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  --fs-md:   clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
  --fs-lg:   clamp(1.3rem, 1.15rem + 0.6vw, 1.7rem);
  --fs-xl:   clamp(1.65rem, 1.4rem + 1.1vw, 2.3rem);
  --fs-2xl:  clamp(2.1rem, 1.7rem + 1.7vw, 3.1rem);
  --fs-3xl:  clamp(2.6rem, 2rem + 2.6vw, 4.2rem);
  --fs-hero: clamp(3rem, 2.1rem + 4.2vw, 6rem);

  /* -- Spacing scale ------------------------------------------------------*/
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;
  --section-pad: clamp(4.5rem, 4rem + 3vw, 8.5rem);
  --section-gap: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);

  /* -- Shape / elevation ----------------------------------------------- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-full: 999px;
  --shadow-sm: 0 4px 18px rgba(4,2,10,0.35);
  --shadow-md: 0 14px 40px rgba(4,2,10,0.45);
  --shadow-lg: 0 30px 80px rgba(4,2,10,0.55);
  --shadow-gold: 0 10px 34px rgba(231,168,62,0.28);
  --shadow-amethyst: 0 10px 34px rgba(168,85,214,0.30);

  /* -- Motion ------------------------------------------------------------*/
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.22s;
  --dur-base: 0.45s;
  --dur-slow: 0.85s;

  /* -- Layout --------------------------------------------------------- */
  --container-w: 1280px;
  --container-xl: 1440px;
  --nav-h: 84px;
  --nav-h-scrolled: 66px;

  /* -- Z-index scale ---------------------------------------------------- */
  --z-bg: 0; --z-content: 10; --z-nav: 500; --z-overlay: 800; --z-preloader: 9999; --z-toast: 950;
}

/* ---------------------------------------------------------------------- *
 * 2. RESET
 * ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
*{ margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x: hidden;
  width: 100%;
}
html.no-scroll, body.no-scroll{ overflow:hidden; }

body{
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  width: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, svg{ display:block; max-width:100%; height:auto; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select{ font: inherit; color: inherit; }
ul, ol{ list-style: none; }
table{ border-collapse: collapse; }

::selection{ background: var(--amethyst); color: var(--ivory); }

/* Scrollbar */
::-webkit-scrollbar{ width: 11px; }
::-webkit-scrollbar-track{ background: var(--ink); }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--amethyst-deep), var(--gold-deep)); border-radius: 10px; border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background: var(--gold); }
* { scrollbar-width: thin; scrollbar-color: var(--gold-deep) var(--ink); }

/* Accessible focus */
:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------- *
 * 3. TYPOGRAPHY
 * ---------------------------------------------------------------------- */
h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ivory);
}
h5, h6{ font-family: var(--font-body); font-weight: 700; }

p{ color: var(--muted); }
p a{ color: var(--gold); text-underline-offset: 3px; }
p a:hover{ text-decoration: underline; }

.text-gradient{
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow.center{ justify-content:center; }
.eyebrow.on-light{ color: var(--amethyst-deep); }

.section-head{
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4.5rem);
}
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{
  font-size: var(--fs-3xl);
  margin-top: 0.6em;
}
.section-head p{
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  color: var(--muted);
  max-width: 56ch;
}
.section-head.center p{ margin-inline:auto; }

/* ---------------------------------------------------------------------- *
 * 4. LAYOUT UTILITIES
 * ---------------------------------------------------------------------- */
.container{
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 1rem + 3vw, 3rem);
}
.container-xl{
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 1rem + 3vw, 3rem);
}
.section{ position: relative; padding-block: var(--section-pad); overflow: clip; }
.section-tight{ padding-block: clamp(3rem, 2.6rem + 2vw, 5rem); }

.bg-ink{ background: var(--ink); }
.bg-ink-2{ background: var(--ink-2); }
.bg-royal{ background: var(--grad-royal); }
.bg-surface{ background: var(--surface); }

.grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045;
  mix-blend-mode: overlay;
  pointer-events:none;
}

.divider-hair{
  height:1px;
  width:100%;
  background: linear-gradient(90deg, transparent, var(--line) 50%, transparent);
}

/* Scalloped chip-edge divider — the site's signature detail */
.scallop{
  position:relative;
  height: 26px;
  width:100%;
  -webkit-mask-image: radial-gradient(circle at 13px 0, transparent 12.5px, #000 13px);
  mask-image: radial-gradient(circle at 13px 0, transparent 12.5px, #000 13px);
  -webkit-mask-size: 26px 26px;
  mask-size: 26px 26px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
.scallop-down{
  -webkit-mask-image: radial-gradient(circle at 13px 26px, transparent 12.5px, #000 13px);
  mask-image: radial-gradient(circle at 13px 26px, transparent 12.5px, #000 13px);
}

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0; padding:0; margin:-1px;
}

.marquee-mask{
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* ---------------------------------------------------------------------- *
 * 5. PRELOADER
 * ---------------------------------------------------------------------- */
.preloader{
  position:fixed; inset:0;
  z-index: var(--z-preloader);
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: opacity 0.6s var(--ease-premium), visibility 0.6s var(--ease-premium);
}
.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader__mark{
  position:relative;
  width: 84px; height: 84px;
  display:flex; align-items:center; justify-content:center;
}
.preloader__ring{
  position:absolute; inset:0;
  border-radius:50%;
  border: 2px solid var(--line-soft);
  border-top-color: var(--gold);
  border-right-color: var(--amethyst);
  animation: spin 1.1s linear infinite;
}
.preloader__suit{ width:28px; height:28px; color: var(--gold); animation: pulse-fade 1.4s ease-in-out infinite; }
.preloader__label{
  position:absolute; bottom: -38px; left:50%; transform:translateX(-50%);
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing:0.3em; text-transform:uppercase; color: var(--muted);
  white-space:nowrap;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes pulse-fade{ 0%,100%{ opacity:0.5; transform:scale(0.92);} 50%{ opacity:1; transform:scale(1);} }

/* ---------------------------------------------------------------------- *
 * 6. HEADER / NAVBAR
 * ---------------------------------------------------------------------- */
.site-header{
  position: fixed; top:0; left:0; right:0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display:flex; align-items:center;
  transition: height var(--dur-base) var(--ease-premium), background var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base);
  border-bottom: 1px solid transparent;
}
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(11,7,16,0.55);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: backdrop-filter var(--dur-base), background var(--dur-base);
  z-index:-1;
}
.site-header.is-scrolled{
  height: var(--nav-h-scrolled);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.site-header.is-scrolled::before{
  background: rgba(11,7,16,0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav-inner{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-5);
}

.brand{
  display:flex; align-items:center; gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ivory);
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.brand__mark{
  width: 40px; height: 40px;
  flex-shrink:0;
}
.brand__mark svg{ width:100%; height:100%; }
.brand__word{ display:flex; flex-direction:column; line-height:1; }
.brand__word b{ background: var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.brand__tag{
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.32em;
  color: var(--muted-dim);
  text-transform: uppercase;
  margin-top: 3px;
}

.nav-links{
  display:flex; align-items:center; gap: clamp(1.4rem, 1rem + 1.5vw, 2.5rem);
}
.nav-links a{
  position:relative;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  padding-block: 0.4rem;
  transition: color var(--dur-fast);
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:2px;
  background: var(--grad-gold);
  transition: right var(--dur-base) var(--ease-premium);
  border-radius:2px;
}
.nav-links a:hover{ color: var(--ivory); }
.nav-links a:hover::after{ right:0; }
.nav-links a.is-active{ color: var(--gold); }
.nav-links a.is-active::after{ right:0; }

.nav-cta{ display:flex; align-items:center; gap: var(--sp-4); flex-shrink:0; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width: 42px; height:42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  flex-shrink:0;
  position:relative;
  z-index: 60;
}
.nav-toggle span{
  display:block; height:2px; width:20px; margin-inline:auto;
  background: var(--ivory);
  transition: transform var(--dur-fast) var(--ease-premium), opacity var(--dur-fast), background var(--dur-fast);
}
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0;
  z-index: 55;
  background: linear-gradient(175deg, #170B26 0%, var(--ink) 60%);
  display:flex; flex-direction:column;
  padding: calc(var(--nav-h) + 1rem) var(--sp-6) var(--sp-8);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-premium);
  overflow-y:auto;
}
.mobile-nav.is-open{ transform: translateX(0); }
.mobile-nav__links{ display:flex; flex-direction:column; gap: 0.4rem; margin-top: var(--sp-6); }
.mobile-nav__links a{
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.4rem + 2vw, 2.4rem);
  font-weight: 600;
  color: var(--ivory);
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-nav__links a span{ font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted-dim); }
.mobile-nav__links a.is-active{ color: var(--gold); }
.mobile-nav__foot{ margin-top:auto; padding-top: var(--sp-6); display:flex; flex-direction:column; gap: var(--sp-4); }
.mobile-nav__social{ display:flex; gap: var(--sp-3); }

/* ---------------------------------------------------------------------- *
 * 7. BUTTONS
 * ---------------------------------------------------------------------- */
.btn{
  position:relative;
  display:inline-flex !important; align-items:center; justify-content:center; gap:0.6em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  padding: 1.05em 1.9em;
  border-radius: var(--radius-full);
  cursor:pointer;
  white-space:nowrap;
  isolation:isolate;
  transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-base), background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.btn svg{ width:1.05em; height:1.05em; flex-shrink:0; }
.btn:active{ transform: scale(0.97); }

.btn-primary{
  background: var(--grad-gold);
  color: #1D1206;
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover{ box-shadow: 0 14px 42px rgba(231,168,62,0.42); transform: translateY(-2px); }

.btn-ghost{
  background: rgba(246,239,227,0.04);
  color: var(--ivory);
  border: 1px solid rgba(246,239,227,0.22);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{ background: rgba(246,239,227,0.09); border-color: rgba(246,239,227,0.4); transform: translateY(-2px); }

.btn-outline{
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold-deep);
}
.btn-outline:hover{ background: rgba(231,168,62,0.1); border-color: var(--gold); transform: translateY(-2px); }

.btn-violet{
  background: linear-gradient(135deg, var(--amethyst) 0%, var(--amethyst-deep) 100%);
  color: var(--ivory);
  box-shadow: var(--shadow-amethyst);
}
.btn-violet:hover{ box-shadow: 0 14px 42px rgba(168,85,214,0.45); transform: translateY(-2px); }

.btn-block{ width:100%; }
.btn-lg{ padding: 1.2em 2.3em; font-size: var(--fs-base); }
.btn-sm{ padding: 0.75em 1.4em; font-size: var(--fs-xs); }

.btn-icon-circle{
  width: 3.1em; height:3.1em; padding:0; border-radius:50%;
}

/* magnetic shine sweep */
.btn-primary::before, .btn-violet::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease-smooth);
  z-index:1;
}
.btn-primary:hover::before, .btn-violet:hover::before{ transform: translateX(120%); }
.btn-primary > *, .btn-violet > *{ position:relative; z-index:2; }

/* ---------------------------------------------------------------------- *
 * 8. BADGES / TAGS / TRUST STRIP
 * ---------------------------------------------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight:500;
  letter-spacing:0.04em;
  color: var(--ivory);
  background: rgba(246,239,227,0.06);
  border: 1px solid var(--line-soft);
  padding: 0.55em 1em;
  border-radius: var(--radius-full);
}
.badge svg{ width:1.1em; height:1.1em; color: var(--gold); flex-shrink:0; }
.badge.badge-live{ border-color: rgba(210,71,122,0.4); }
.badge.badge-live::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background: var(--rose);
  box-shadow: 0 0 0 0 rgba(210,71,122,0.6);
  animation: live-pulse 1.8s infinite;
}
@keyframes live-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(210,71,122,0.55); }
  70%{ box-shadow: 0 0 0 8px rgba(210,71,122,0); }
  100%{ box-shadow: 0 0 0 0 rgba(210,71,122,0); }
}

.trust-row{ display:flex; flex-wrap:wrap; gap: 0.7rem; }

/* ---------------------------------------------------------------------- *
 * 9. CARDS
 * ---------------------------------------------------------------------- */
.glass-card{
  position:relative;
  background: var(--grad-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow:hidden;
  transition: transform var(--dur-base) var(--ease-premium), border-color var(--dur-base), box-shadow var(--dur-base);
}
.glass-card:hover{
  transform: translateY(-6px);
  border-color: var(--line);
  box-shadow: var(--shadow-md);
}

/* card-corner "peel" — signature detail echoing a lifted card corner */
.corner-card{ position:relative; }
.corner-card::after{
  content:"";
  position:absolute; top:0; right:0;
  width:0; height:0;
  border-style:solid;
  border-width: 0 24px 24px 0;
  border-color: transparent var(--gold-deep) transparent transparent;
  opacity:0.9;
  transition: border-width var(--dur-base) var(--ease-premium);
}
.corner-card:hover::after{ border-width: 0 34px 34px 0; border-color: transparent var(--gold) transparent transparent; }

.icon-tile{
  width: 58px; height:58px;
  border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(150deg, rgba(231,168,62,0.16), rgba(168,85,214,0.1));
  border: 1px solid var(--line);
  color: var(--gold);
  margin-bottom: var(--sp-5);
}
.icon-tile svg{ width:26px; height:26px; }

/* ---------------------------------------------------------------------- *
 * 10. CHIP-DISC STAT (signature component)
 * ---------------------------------------------------------------------- */
.chip-disc{
  position:relative;
  width: clamp(170px, 12vw, 170px);
  height: clamp(120px, 11vw, 156px);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-inline:auto;
  background: radial-gradient(circle at 32% 28%, #2E1B49 0%, #170B26 72%);
  box-shadow: inset 0 0 0 2px rgba(231,168,62,0.35), inset 0 14px 26px rgba(0,0,0,0.5), 0 16px 34px rgba(0,0,0,0.45);
}
.chip-disc::before{
  content:"";
  position:absolute; inset:-11px;
  border-radius:50%;
  background: repeating-conic-gradient(var(--gold) 0deg 13deg, transparent 13deg 27deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  opacity:0.85;
}
.chip-disc__num{
  font-family: var(--font-mono);
  font-weight:700;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  color: var(--ivory);
  line-height:1;
}
.chip-disc__num span{ color: var(--gold); }

/* ---------------------------------------------------------------------- *
 * 11. FAQ ACCORDION
 * ---------------------------------------------------------------------- */
.faq-list{ display:flex; flex-direction:column; gap: var(--sp-4); }
.faq-item{
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(246,239,227,0.025);
  overflow:hidden;
  transition: border-color var(--dur-base);
}
.faq-item.is-active{ border-color: var(--line); background: rgba(246,239,227,0.045); }
.faq-question{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-4);
  padding: 1.35rem 1.6rem;
  text-align:left;
  font-family: var(--font-body);
  font-weight:600;
  font-size: var(--fs-md);
  color: var(--ivory);
}
.faq-question .q-icon{
  flex-shrink:0;
  width: 34px; height:34px;
  border-radius:50%;
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition: background var(--dur-base), border-color var(--dur-base);
}
.faq-question .q-icon::before, .faq-question .q-icon::after{
  content:"";
  position:absolute;
  background: var(--gold);
  transition: transform var(--dur-base) var(--ease-premium);
}
.faq-question .q-icon::before{ width:12px; height:2px; }
.faq-question .q-icon::after{ width:2px; height:12px; }
.faq-item.is-active .q-icon{ background: var(--grad-gold); border-color:transparent; }
.faq-item.is-active .q-icon::before, .faq-item.is-active .q-icon::after{ background:#1D1206; }
.faq-item.is-active .q-icon::after{ transform: rotate(90deg) scaleY(0); }
.faq-answer-wrap{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-premium);
}
.faq-item.is-active .faq-answer-wrap{ grid-template-rows: 1fr; }
.faq-answer-inner{ overflow:hidden; }
.faq-answer{ padding: 0 1.6rem 1.5rem; color: var(--muted); font-size: var(--fs-base); max-width: 68ch; }

/* ---------------------------------------------------------------------- *
 * 12. FOOTER
 * ---------------------------------------------------------------------- */
.site-footer{
  position:relative;
  background: #0D0716;
  border-top: 1px solid var(--line-soft);
  padding-top: clamp(3.5rem, 3rem + 2.5vw, 6rem);
  overflow:clip;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
}
.footer-brand p{ margin-top: var(--sp-4); max-width: 34ch; font-size: var(--fs-sm); }
.footer-social{ display:flex; gap:0.6rem; margin-top: var(--sp-6); }
.social-btn{
  width: 40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: all var(--dur-fast);
}
.social-btn svg{ width:17px; height:17px; }
.social-btn:hover{ color: var(--ink); background: var(--grad-gold); border-color:transparent; transform: translateY(-3px); }

.footer-col h6{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-5);
}
.footer-col ul{ display:flex; flex-direction:column; gap: 0.85rem; }
.footer-col a{ font-size: var(--fs-sm); color: var(--muted); transition: color var(--dur-fast), padding-left var(--dur-fast); }
.footer-col a:hover{ color: var(--gold); padding-left:4px; }
.footer-col .contact-line{ display:flex; gap:0.6rem; align-items:flex-start; font-size: var(--fs-sm); color:var(--muted); }
.footer-col .contact-line svg{ width:16px; height:16px; color:var(--gold); flex-shrink:0; margin-top:3px; }

.footer-bottom{
  border-top: 1px solid var(--line-soft);
  padding-block: var(--sp-5);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--muted-dim);
}
.footer-bottom .legal-links{ display:flex; gap: var(--sp-5); flex-wrap:wrap; }
.footer-responsible{
  display:flex; align-items:center; gap:0.6rem;
  font-size: var(--fs-xs);
  color: var(--muted-dim);
  border-top: 1px solid var(--line-soft);
  padding-block: var(--sp-4);
  margin-top: 0;
}
.footer-responsible strong{ color: var(--muted); }
.footer-suit-row{ position:absolute; right:-40px; top:20px; display:flex; gap:1.4rem; opacity:0.05; font-size:9rem; pointer-events:none; }

/* ---------------------------------------------------------------------- *
 * 13. BACK TO TOP
 * ---------------------------------------------------------------------- */
.back-to-top{
  position:fixed; right: clamp(1rem,3vw,2.2rem); bottom: clamp(1rem,3vw,2.2rem);
  width: 50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(30,17,48,0.85);
  border: 1px solid var(--line);
  color: var(--gold);
  backdrop-filter: blur(10px);
  z-index: 400;
  opacity:0; visibility:hidden; transform: translateY(14px);
  transition: all var(--dur-base) var(--ease-premium);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background: var(--grad-gold); color:#1D1206; border-color:transparent; }
.back-to-top svg{ width:18px; height:18px; }

/* ---------------------------------------------------------------------- *
 * 14. SCROLL REVEAL SYSTEM
 * ---------------------------------------------------------------------- */
.reveal, .reveal-left, .reveal-right, .reveal-scale{
  opacity:0;
  transition: opacity var(--dur-slow) var(--ease-premium), transform var(--dur-slow) var(--ease-premium);
  transition-delay: var(--rd, 0s);
}
.reveal{ transform: translateY(46px); }
.reveal-left{ transform: translateX(-52px); }
.reveal-right{ transform: translateX(52px); }
.reveal-scale{ transform: scale(0.9); }
.reveal.in-view, .reveal-left.in-view, .reveal-right.in-view, .reveal-scale.in-view{
  opacity:1; transform:none;
}

/* ambient floating motion for decorative art */
.float-y{ animation: float-y 6s ease-in-out infinite; }
.float-y-slow{ animation: float-y 9s ease-in-out infinite; }
.float-y-delay{ animation: float-y 7s ease-in-out infinite; animation-delay: -3s; }
@keyframes float-y{
  0%,100%{ transform: translateY(0) rotate(var(--rot,0deg)); }
  50%{ transform: translateY(-22px) rotate(var(--rot,0deg)); }
}

.spin-glow{
  background: conic-gradient(from 0deg, var(--amethyst) 0%, transparent 16%, var(--gold) 34%, transparent 52%, var(--amethyst) 70%, transparent 88%, var(--amethyst) 100%);
  filter: blur(70px);
  opacity:0.55;
  animation: spin-slow 30s linear infinite;
  border-radius:50%;
}
@keyframes spin-slow{ to{ transform: rotate(360deg); } }

.shimmer-text{
  background: linear-gradient(100deg, var(--muted) 30%, var(--ivory) 45%, var(--muted) 60%);
  background-size: 220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation: shimmer 4.5s linear infinite;
}
@keyframes shimmer{ to{ background-position: -220% 0; } }

/* marquee ticker */
.marquee-wrap{ overflow:hidden; width:100%; }
.marquee-track{
  display:flex; width:max-content;
  animation: marquee 34s linear infinite;
  gap: var(--sp-8);
}
.marquee-track.reverse{ animation-direction: reverse; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.marquee-wrap:hover .marquee-track{ animation-play-state: paused; }

/* ---------------------------------------------------------------------- *
 * 15. FORM ELEMENTS (shared)
 * ---------------------------------------------------------------------- */
.field{ position:relative; margin-bottom: var(--sp-5); }
.field label{
  display:block;
  font-size: var(--fs-xs);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
  font-weight:600;
}
.field input, .field textarea, .field select{
  width:100%;
  background: rgba(246,239,227,0.04);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.95em 1.1em;
  color: var(--ivory);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.field textarea{ resize:vertical; min-height:130px; }
.field input::placeholder, .field textarea::placeholder{ color: var(--muted-dim); }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none;
  border-color: var(--gold);
  background: rgba(246,239,227,0.07);
  box-shadow: 0 0 0 4px rgba(231,168,62,0.12);
}
.field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AA9DC4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 1.1em center; background-size:16px; padding-right:2.6em; }
.field-error{ font-size: var(--fs-xs); color: var(--rose); margin-top:0.5rem; display:none; }
.field.has-error input, .field.has-error textarea{ border-color: var(--rose); }
.field.has-error .field-error{ display:block; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-4); }

/* ---------------------------------------------------------------------- *
 * 16. MISC UTILITIES
 * ---------------------------------------------------------------------- */
.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.flex-wrap{ flex-wrap:wrap; }
.gap-sm{ gap: var(--sp-3); }
.gap-md{ gap: var(--sp-5); }
.text-center{ text-align:center; }
.mt-0{ margin-top:0 !important; }
.hide-mobile{ display:initial; }
.show-mobile{ display:none; }

/* ---------------------------------------------------------------------- *
 * 17. SHARED: PHONE FRAME / FLOATING BADGE / NUMBERED STEPS
 *     (used on Home + Download)
 * ---------------------------------------------------------------------- */
.phone-frame{
  position:relative;
  width: min(78%, 320px);
  aspect-ratio: 1024/1536;
  border-radius: 42px;
  border: 8px solid #17101F;
  background:#0d0714;
  box-shadow: 0 40px 90px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(231,168,62,0.25);
  overflow:hidden;
}
.phone-frame img{ width:100%; height:100%; object-fit:cover; }
.phone-frame--lg{ width:min(85%,360px); }
.phone-frame__notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:38%; height:22px; background:#17101F; border-radius:0 0 14px 14px; z-index:2;
}

.floating-badge{
  position:absolute;
  display:flex; align-items:center; gap:0.5rem;
  background: rgba(21,11,34,0.85);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight:600;
  box-shadow: var(--shadow-md);
  white-space:nowrap;
}
.floating-badge svg{ width:15px; height:15px; color: var(--gold); flex-shrink:0; }
.floating-badge--rating{ top:12%; left:-6%; }
.floating-badge--downloads{ bottom:10%; right:-8%; }

.how-steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  position:relative;
}
.how-steps::before{
  content:"";
  position:absolute; top:1.1rem; left:6%; right:6%;
  height:1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 20px);
}
.how-step{ position:relative; }
.how-step__num{
  display:block;
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight:700;
  background: var(--ink-2);
  color: var(--gold);
  width:2.2em; margin-bottom: var(--sp-5);
  position:relative; z-index:1;
}
.how-step h3{ font-size: var(--fs-lg); margin-bottom:0.4em; }
.how-step p{ font-size: var(--fs-sm); max-width:30ch; }

/* ---------------------------------------------------------------------- *
 * 18. PAGE HERO (About / Download / Contact)
 * ---------------------------------------------------------------------- */
.page-hero{
  position:relative;
  padding-top: calc(var(--nav-h) + 5rem);
  padding-bottom: 5rem;
  isolation:isolate;
  overflow:clip;
}
.page-hero__bg{ position:absolute; inset:0; z-index:0; background: var(--grad-hero); }
.page-hero .grain{ z-index:1; }
.page-hero__inner{ position:relative; z-index:2; max-width:760px; }
.page-hero h1{ font-size: var(--fs-3xl); margin-top:0.5em; margin-bottom:0.5em; }
.page-hero p{ font-size: var(--fs-md); max-width:56ch; }

.breadcrumb{
  display:flex; align-items:center; gap:0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing:0.05em;
  color: var(--muted-dim);
  margin-bottom: var(--sp-6);
}
.breadcrumb a{ color: var(--muted); transition: color var(--dur-fast); }
.breadcrumb a:hover{ color: var(--gold); }
.breadcrumb span:last-child{ color: var(--gold); }

/* ---------------------------------------------------------------------- *
 * 19. RESPONSIVE
 * ---------------------------------------------------------------------- */

@media (max-width: 1080px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .footer-grid{ grid-template-columns: 1fr 1fr; row-gap: var(--sp-7); }
  .footer-brand{ grid-column: 1 / -1; }
  .how-steps{ grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-8); }
  .how-steps::before{ display:none; }
}

@media (max-width: 720px){
  :root{ --nav-h:72px; --nav-h-scrolled:62px; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .field-row{ grid-template-columns:1fr; }
  .hide-mobile{ display:none !important; }
  .show-mobile{ display:initial; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .page-hero{ padding-top: calc(var(--nav-h) + 2.5rem); padding-bottom: 3rem; }
}

@media (max-width: 640px){
  .how-steps{ grid-template-columns: 1fr; gap: var(--sp-6); }
  .floating-badge{ font-size: 0.62rem; padding: 0.55rem 0.85rem; }
  .floating-badge--rating{ left:-2%; top:6%; }
  .floating-badge--downloads{ right:-2%; }
}

@media (max-width: 480px){
  .footer-grid{ grid-template-columns: 1fr; gap: var(--sp-6); }
  .btn-lg{ padding:1em 1.6em; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale{ opacity:1; transform:none; }
}