/* =====================================================================
   APEX ROLEPLAY — style.css
   Vintage Miami · GTA Vice City · Editorial luxury
   Handcrafted, no framework. Author: Apex Web Team.
   ===================================================================== */

/* ------------------------------ TOKENS ------------------------------ */
:root{
  /* Base colours */
  --void:        #08030f;
  --deep:        #0e0620;
  --purple:      #1a0b34;
  --purple-2:    #29124e;
  --plum:        #3a1a5c;

  /* Sunset palette */
  --sunset-1:    #ff6b3d;   /* warm orange */
  --sunset-2:    #ff9558;
  --sunset-3:    #ffbe86;   /* creamy peach */
  --pink:        #ff4d8d;
  --rose:        #d4506f;
  --gold:        #e8b76b;
  --gold-2:      #b8894a;

  /* Ocean & neutrals */
  --ocean:       #2b4a7c;
  --ocean-2:     #4a6fa8;
  --cream:       #f3ead6;
  --cream-2:     #e6d9b8;
  --sand:        #cbb98f;

  /* Text */
  --ink:         #f2e7cf;
  --ink-2:       rgba(242,231,207,.72);
  --ink-3:       rgba(242,231,207,.5);
  --line:        rgba(242,231,207,.12);
  --line-2:      rgba(242,231,207,.06);

  /* Signature gradient */
  --grad-sunset: linear-gradient(115deg,#ff6b3d 0%,#ff4d8d 55%,#8a4fff 100%);
  --grad-warm:   linear-gradient(180deg,#ff9558 0%,#ff4d8d 100%);
  --grad-plum:   linear-gradient(180deg,#1a0b34 0%,#08030f 100%);
  --grad-ocean:  linear-gradient(180deg,#0e0620 0%,#0a1a2e 100%);

  /* Radii + motion */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 34px;
  --r-pill: 999px;

  --ease-luxe: cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in:   cubic-bezier(.7,.0,.84,.0);

  --shadow-1: 0 10px 30px rgba(0,0,0,.35);
  --shadow-2: 0 30px 60px rgba(0,0,0,.45);

  /* Grid */
  --pad: clamp(20px, 5vw, 96px);
  --max: 1320px;
}

/* ------------------------------ RESET ------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--void);
}
body{
  min-height:100vh;
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  background: var(--void);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: none;
}
@media (pointer: coarse){ body{ cursor:auto; } .cursor{ display:none; } }

img,svg{ display:block; max-width:100%; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a{ color: inherit; text-decoration: none; }
::selection{ background: rgba(255,77,141,.35); color: var(--cream); }

/* ------------------------------ TYPOGRAPHY -------------------------- */
h1,h2,h3,h4{ margin: 0; letter-spacing:-.01em; }
h1{ font-family:'Playfair Display', serif; font-weight:500; }
h2{ font-family:'Playfair Display', serif; font-weight:500; }
h3{ font-family:'Playfair Display', serif; font-weight:500; }
p { margin: 0; color: var(--ink-2); }

.reveal{ opacity:0; transform: translateY(24px); transition: opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal.delay-1{ transition-delay:.08s; }
.reveal.delay-2{ transition-delay:.16s; }
.reveal.delay-3{ transition-delay:.24s; }
.reveal.delay-4{ transition-delay:.32s; }
.reveal.delay-5{ transition-delay:.40s; }

/* Word reveal in hero */
.reveal--word{ display:inline-block; overflow:hidden; padding-bottom:.05em; }
.reveal--word > *{ display:inline-block; }

/* ------------------------------ CURSOR ------------------------------ */
.cursor{
  position: fixed; inset: 0 auto auto 0;
  width: 0; height: 0;
  pointer-events: none; z-index: 999;
  mix-blend-mode: difference;
}
.cursor__dot{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:#fff; transform: translate(-50%,-50%);
  transition: transform .18s var(--ease-out);
}
.cursor__ring{
  position:absolute; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  transform: translate(-50%,-50%) scale(1);
  transition: transform .35s var(--ease-out), width .35s var(--ease-out), height .35s var(--ease-out), border-color .35s var(--ease-out);
}
.cursor.is-hover .cursor__ring{ width:64px; height:64px; border-color:rgba(255,180,120,.9); }
.cursor.is-hover .cursor__dot{ transform: translate(-50%,-50%) scale(0); }

/* ------------------------------ LOADER ------------------------------ */
.loader{
  position: fixed; inset: 0; z-index: 1000;
  background: radial-gradient(140% 90% at 50% 40%, #1a0b34 0%, #08030f 60%);
  display: grid; place-items: center;
  transition: opacity .8s var(--ease-out), visibility .8s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ text-align:center; }
.loader__mark svg{ filter: drop-shadow(0 6px 30px rgba(255,77,141,.35)); animation: floaty 3s ease-in-out infinite; }
.loader__label{
  margin-top: 18px; font-family:'Bebas Neue'; letter-spacing: .35em; font-size: 18px;
  background: var(--grad-sunset); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.loader__bar{ margin: 22px auto 0; width: 160px; height:2px; background: rgba(255,255,255,.09); border-radius: 3px; overflow: hidden; }
.loader__bar > span{ display:block; width: 30%; height: 100%; background: var(--grad-sunset); animation: barMove 1.4s var(--ease-out) infinite; }
@keyframes barMove{ 0%{ transform: translateX(-120%); } 100%{ transform: translateX(360%); } }
@keyframes floaty{ 50%{ transform: translateY(-6px); } }

/* ------------------------------ NAV --------------------------------- */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items:center; gap: 24px;
  padding: 22px var(--pad);
  transition: background .5s var(--ease-out), backdrop-filter .5s var(--ease-out), padding .5s var(--ease-out), border-color .5s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck{
  padding: 14px var(--pad);
  background: rgba(10,4,22,.6);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line-2);
}
.nav__brand{ display:flex; align-items:center; gap:12px; }
.nav__brand-mark{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255,180,120,.06), 0 8px 20px rgba(0,0,0,.35);
}
.nav__brand-word{ line-height:1; display:flex; flex-direction:column; gap:4px; }
.nav__brand-word em{ font-family:'Playfair Display'; font-style:italic; font-size:22px; color:var(--cream); }
.nav__brand-word small{
  font-family:'Bebas Neue'; letter-spacing:.35em; font-size:10px; color: var(--ink-3);
}

.nav__menu{ margin-left: 24px; display:flex; gap: 28px; }
.nav__menu a{
  font-size: 13px; color: var(--ink-2); letter-spacing: .04em;
  position: relative; padding: 6px 0;
  transition: color .3s var(--ease-out);
}
.nav__menu a::after{
  content:\"\"; position:absolute; left:0; right:100%; bottom: -2px; height: 1px;
  background: var(--grad-sunset); transition: right .5s var(--ease-out);
}
.nav__menu a:hover{ color: var(--cream); }
.nav__menu a:hover::after{ right: 0; }

.nav__side{ margin-left:auto; display:flex; align-items:center; gap: 18px; }
.lang{ display:flex; align-items:center; gap:6px; font-family:'Bebas Neue'; letter-spacing:.25em; font-size: 12px; color: var(--ink-3); }
.lang button{ color: var(--ink-3); transition: color .3s; }
.lang button.is-active{ color: var(--cream); }
.lang button:hover{ color: var(--cream); }
.lang span{ opacity:.35; }

.nav__burger{ display:none; width:34px; height:34px; border:1px solid var(--line); border-radius:10px; padding:8px; }
.nav__burger span{ display:block; height:1px; background: var(--cream); margin: 4px 0; transition: transform .35s var(--ease-out), opacity .3s; }
.nav.is-open .nav__burger span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ transform: translateY(-5px) rotate(-45deg); }

/* ------------------------------ BUTTONS ----------------------------- */
.btn{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 14px 22px; border-radius: var(--r-pill);
  font-family:'Manrope'; font-weight: 600; font-size: 14px; letter-spacing: .02em;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .5s var(--ease-out), color .5s var(--ease-out), border-color .5s var(--ease-out);
  will-change: transform;
}
.btn--sm{ padding: 10px 16px; font-size: 12px; }
.btn--lg{ padding: 18px 28px; font-size: 15px; }
.btn--primary{
  color:#0a0416;
  background: var(--grad-warm);
  box-shadow: 0 20px 40px -12px rgba(255,90,60,.55), inset 0 0 0 1px rgba(255,255,255,.35);
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 30px 60px -12px rgba(255,90,60,.65), inset 0 0 0 1px rgba(255,255,255,.55); }
.btn--ghost{
  color: var(--cream);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover{ border-color: rgba(255,180,120,.5); color: #fff; }

/* ------------------------------ SECTIONS ---------------------------- */
.section{
  position: relative;
  padding: clamp(90px,10vw,160px) var(--pad);
  max-width: none;
}
.section__head{ max-width: 820px; margin: 0 0 clamp(48px,6vw,88px); }
.section__label{
  display:inline-flex; align-items:center; gap:14px;
  font-family:'Bebas Neue'; letter-spacing:.35em; font-size: 11px; color: var(--ink-3);
  margin-bottom: 22px;
}
.section__label span{
  display:inline-block; padding:6px 10px; border:1px solid var(--line);
  border-radius: var(--r-sm); color: var(--cream); background: rgba(255,255,255,.03);
}
.section__label em{ font-style: normal; }

.section__title{
  font-size: clamp(38px, 6vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.section__title em{ font-style: italic; background: var(--grad-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section__lead{ margin-top: 20px; font-size: clamp(15px, 1.4vw, 17px); color: var(--ink-2); max-width: 640px; }

/* ------------------------------ HERO -------------------------------- */
.hero{
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  padding: 140px var(--pad) 80px;
  overflow: hidden;
  isolation: isolate;
  display:flex; align-items: center;
}
.hero__sky{
  position:absolute; inset:0; z-index:-3;
  background:
    radial-gradient(60% 45% at 50% 78%, rgba(255,110,80,.35) 0%, rgba(255,77,141,.18) 32%, transparent 60%),
    radial-gradient(80% 60% at 50% 92%, rgba(255,180,110,.28) 0%, transparent 60%),
    linear-gradient(180deg, #0a0416 0%, #1a0b34 40%, #2b1443 62%, #6a1f52 80%, #ff6b3d 100%);
}
.hero__sun{
  position:absolute; left:50%; top: 62%;
  width: min(680px, 90vw); aspect-ratio: 1;
  transform: translate(-50%,-50%);
  z-index: -2;
  background: radial-gradient(circle at 50% 50%,
     rgba(255,240,200,1) 0%,
     rgba(255,190,140,.9) 12%,
     rgba(255,120,90,.5) 26%,
     rgba(255,77,141,.15) 46%,
     transparent 60%);
  filter: blur(4px);
  animation: sunPulse 8s ease-in-out infinite;
}
@keyframes sunPulse{ 50%{ opacity:.82; transform: translate(-50%,-50%) scale(1.02); } }
.hero__haze{
  position:absolute; inset:auto 0 0 0; height: 55%;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, transparent 0%, rgba(10,4,22,.4) 45%, rgba(10,4,22,.85) 100%);
  z-index:-2;
  mix-blend-mode: soft-light;
  pointer-events:none;
}
.hero__grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 1px;
  mix-blend-mode: overlay;
  opacity: .35;
}
.hero__palm{
  position: absolute; bottom: -6%; height: 78%; z-index: -1;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.6));
  will-change: transform;
}
.hero__palm--left{ left: -3%; transform: translateY(0); }
.hero__palm--right{ right: -3%; transform: scaleX(-1) translateY(0); }

.hero__particles{ position:absolute; inset:0; z-index:-1; pointer-events:none; }

.hero__inner{ position: relative; z-index: 2; max-width: min(var(--max), 100%); margin: 0 auto; width:100%; }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 14px; border:1px solid var(--line); border-radius: var(--r-pill);
  font-family:'Bebas Neue'; letter-spacing:.35em; font-size: 11px; color: var(--cream-2);
  background: rgba(255,255,255,.03);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero__eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--sunset-1); box-shadow: 0 0 12px var(--sunset-1); animation: dotBlink 2.4s infinite; }
@keyframes dotBlink{ 50%{ opacity:.35; } }

.hero__title{
  font-family:'Playfair Display'; font-weight:500;
  font-size: clamp(64px, 12vw, 200px);
  line-height:.92; letter-spacing: -0.03em;
  margin-top: 26px;
  color: var(--cream);
  text-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.hero__title em{
  font-style: italic;
  background: linear-gradient(115deg,#ffbe86 0%,#ff6b3d 35%,#ff4d8d 70%,#e0b070 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em;
}
.hero__title span{ display:block; }

.hero__subtitle{
  margin-top: 20px;
  font-family:'Playfair Display'; font-style: italic; font-weight: 400;
  font-size: clamp(18px, 2.2vw, 26px);
  color: var(--sand);
}
.hero__lead{
  margin-top: 14px; max-width: 560px; color: var(--ink-2);
  font-size: clamp(15px, 1.35vw, 17px);
}

.hero__cta{ margin-top: 40px; display:flex; gap:14px; flex-wrap:wrap; }

.hero__meta{
  margin-top: 60px; display:flex; gap: clamp(24px, 4vw, 64px); flex-wrap:wrap;
  padding-top: 26px; border-top: 1px solid var(--line-2);
  max-width: 720px;
}
.hero__meta > div{ display:flex; flex-direction:column; gap:4px; }
.hero__meta b{ font-family:'Playfair Display'; font-weight: 500; font-size: 28px; color: var(--cream); letter-spacing:-.02em; }
.hero__meta i{ font-style: normal; font-size: .5em; color: var(--ink-3); margin-left: 2px; }
.hero__meta span{ font-family:'Bebas Neue'; letter-spacing:.3em; font-size: 10px; color: var(--ink-3); }

.hero__scroll{
  position:absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 3; display:flex; flex-direction:column; align-items:center; gap:10px;
  color: var(--ink-3); font-family:'Bebas Neue'; letter-spacing: .3em; font-size: 11px;
}
.hero__scroll span{
  width:1px; height:44px; background: linear-gradient(180deg, transparent, var(--sunset-1));
  position: relative; overflow: hidden;
}
.hero__scroll span::after{
  content:\"\"; position:absolute; top:-40px; left:0; width:100%; height: 24px;
  background: linear-gradient(180deg, transparent, var(--cream));
  animation: scrollDown 2.4s var(--ease-out) infinite;
}
@keyframes scrollDown{ 100%{ top: 100%; } }

/* ------------------------------ MARQUEE ----------------------------- */
.marquee{
  overflow: hidden; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(10,4,22,.4), rgba(20,8,46,.3));
  padding: 22px 0;
}
.marquee__track{
  display:flex; gap: 40px; align-items:center;
  font-family:'Playfair Display'; font-style: italic; font-size: clamp(22px, 3vw, 42px);
  color: var(--cream-2);
  white-space: nowrap; width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee__track > *{ opacity:.85; }
.marquee__track > span:nth-child(even){ color: var(--sunset-1); font-family:'Bebas Neue'; font-style:normal; }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* ------------------------------ GRID -------------------------------- */
.grid{ display:grid; gap: 22px; }
.grid--why{
  grid-template-columns: repeat(3, 1fr);
}
.grid--legal{ grid-template-columns: repeat(3, 1fr); }
.grid--illegal{ grid-template-columns: repeat(3, 1fr); }
.grid--support{ grid-template-columns: repeat(3, 1fr); }

@media (max-width: 960px){
  .grid--why, .grid--legal, .grid--illegal, .grid--support{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .grid--why, .grid--legal, .grid--illegal, .grid--support{ grid-template-columns: 1fr; }
}

/* ------------------------------ CARDS · WHY ------------------------- */
.card{
  position: relative;
  padding: 34px 30px 30px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) padding-box,
    linear-gradient(180deg, rgba(255,180,120,.15), rgba(255,77,141,.05)) border-box;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .7s var(--ease-out), border-color .7s var(--ease-out), background .7s var(--ease-out);
  overflow: hidden;
}
.card::before{
  content:\"\"; position: absolute; inset: 0; border-radius: inherit; pointer-events:none;
  background: radial-gradient(600px 200px at var(--mx,50%) var(--my,0%), rgba(255,120,80,.14), transparent 60%);
  opacity: 0; transition: opacity .6s var(--ease-out);
}
.card:hover{ transform: translateY(-6px); border-color: rgba(255,180,120,.35); }
.card:hover::before{ opacity: 1; }

.card__num{
  position:absolute; top: 18px; right: 22px;
  font-family:'Playfair Display'; font-style: italic; color: var(--gold);
  font-size: 26px; opacity: .55;
}
.card__ico{
  width:48px; height:48px; display:grid; place-items:center;
  border-radius: 14px; border:1px solid var(--line);
  color: var(--sunset-2);
  background: linear-gradient(180deg, rgba(255,180,120,.08), rgba(255,77,141,.04));
  margin-bottom: 26px;
}
.card__ico svg{ width: 24px; height: 24px; }
.card--why h3{ font-size: 24px; color: var(--cream); margin-bottom: 10px; }
.card--why p{ font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* ------------------------------ JOB CARDS --------------------------- */
.job{
  position: relative; padding: 30px 26px; border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  overflow: hidden;
  transition: transform .6s var(--ease-out), border-color .6s var(--ease-out);
}
.job::after{
  content:\"\"; position:absolute; inset:auto -30% -30% -30%; height:80%;
  background: radial-gradient(50% 60% at 50% 40%, rgba(255,110,80,.18), transparent 60%);
  opacity: 0; transition: opacity .6s var(--ease-out); pointer-events:none;
}
.job:hover{ transform: translateY(-6px); border-color: rgba(255,180,120,.35); }
.job:hover::after{ opacity: 1; }

.job__ico{
  width: 54px; height: 54px; display:grid; place-items:center;
  border-radius: 16px; color: var(--sunset-3);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border: 1px solid var(--line);
  margin-bottom: 22px;
  transition: transform .6s var(--ease-out), color .6s var(--ease-out);
}
.job:hover .job__ico{ transform: scale(1.06) rotate(-2deg); color: var(--pink); }
.job__ico svg{ width: 26px; height: 26px; }

.job h3{ font-size: 22px; color: var(--cream); }
.job p{ margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.job__tag{
  margin-top: 22px; display:inline-block; padding: 6px 12px; border-radius: var(--r-pill);
  font-family:'Bebas Neue'; letter-spacing:.3em; font-size: 10px; color: var(--gold);
  border: 1px solid rgba(232,183,107,.28); background: rgba(232,183,107,.06);
}

/* ------------------------------ SECTION VARIANTS -------------------- */
.section--legal{ background: linear-gradient(180deg, transparent 0%, rgba(20,8,46,.5) 100%); }

.section--illegal{
  background:
    radial-gradient(60% 40% at 80% 0%, rgba(255,77,141,.15), transparent 60%),
    radial-gradient(60% 40% at 10% 100%, rgba(138,79,255,.14), transparent 60%),
    linear-gradient(180deg, #0b0518 0%, #060310 100%);
  position: relative;
}
.section--illegal::before{
  content:\"\"; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 200px);
}

/* ------------------------------ DARK CARDS -------------------------- */
.dark-card{
  position: relative; padding: 32px 28px; border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.15));
  overflow: hidden;
  transition: transform .6s var(--ease-out), border-color .6s var(--ease-out);
}
.dark-card__glow{
  position:absolute; inset:auto -20% -30% -20%; height: 70%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,77,141,.24), transparent 60%);
  opacity: 0; transition: opacity .6s var(--ease-out); pointer-events:none;
}
.dark-card:hover{ transform: translateY(-6px); border-color: rgba(255,77,141,.35); }
.dark-card:hover .dark-card__glow{ opacity: 1; }
.dark-card__ico{
  width: 54px; height: 54px; display:grid; place-items:center;
  border-radius: 16px; color: var(--pink);
  border:1px solid rgba(255,77,141,.35);
  background: linear-gradient(180deg, rgba(255,77,141,.08), rgba(138,79,255,.06));
  margin-bottom: 22px;
}
.dark-card h3{ color: var(--cream); font-size: 22px; }
.dark-card p{ margin-top: 8px; font-size: 14px; color: var(--ink-2); }

/* ------------------------------ RULES / ACCORDION ------------------- */
.section--rules{
  background: linear-gradient(180deg, #060310 0%, #0a0416 100%);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.rules{
  max-width: 960px; margin: 0 auto;
  border-top: 1px solid var(--line);
}
.rules__item{
  border-bottom: 1px solid var(--line);
  transition: background .5s var(--ease-out);
}
.rules__head{
  width:100%; display:flex; align-items:center; gap: 22px;
  padding: 26px 4px; text-align:left;
  transition: color .3s var(--ease-out);
}
.rules__num{
  font-family:'Playfair Display'; font-style: italic; color: var(--gold);
  font-size: 22px; min-width: 62px;
}
.rules__label{
  flex: 1;
  font-family:'Playfair Display'; font-size: clamp(20px, 2.2vw, 28px); color: var(--cream);
  letter-spacing: -0.01em;
}
.rules__plus{
  width: 42px; height: 42px; border-radius: 50%;
  display:grid; place-items:center;
  border:1px solid var(--line); color: var(--cream);
  transition: transform .5s var(--ease-out), background .5s var(--ease-out), border-color .5s var(--ease-out);
}
.rules__plus svg{ width: 14px; height: 14px; transition: transform .5s var(--ease-out); }
.rules__item.is-open .rules__plus{ background: var(--grad-warm); border-color: transparent; color:#0a0416; }
.rules__item.is-open .rules__plus svg{ transform: rotate(45deg); }
.rules__item:hover .rules__label{ color: var(--sunset-3); }

.rules__body{
  overflow: hidden;
  max-height: 0;
  transition: max-height .7s var(--ease-out);
}
.rules__body-inner{
  padding: 4px 4px 30px 84px;
  display: grid; gap: 12px;
}
.rules__body-inner li{
  list-style: none; display: grid; grid-template-columns: 60px 1fr; gap: 16px;
  color: var(--ink-2); font-size: 15px; line-height: 1.6;
}
.rules__body-inner li b{ color: var(--gold); font-family:'Bebas Neue'; letter-spacing:.15em; }

/* ------------------------------ DISCORD SECTION --------------------- */
.discord{
  position: relative; padding: clamp(90px,10vw,160px) var(--pad);
  overflow: hidden;
}
.discord__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(50% 40% at 20% 40%, rgba(138,79,255,.18), transparent 60%),
    radial-gradient(50% 40% at 80% 60%, rgba(255,110,80,.15), transparent 60%),
    linear-gradient(180deg, #0a0416 0%, #14082e 100%);
}
.discord__inner{
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 960px){ .discord__inner{ grid-template-columns: 1fr; } }

.discord__copy .section__title{ margin-top: 8px; }
.discord__copy > p{ margin-top: 20px; max-width: 480px; color: var(--ink-2); }
.discord__cta{ margin-top: 32px; display:flex; gap: 18px; align-items:center; flex-wrap:wrap; }
.discord__link{ color: var(--sunset-3); font-family:'Bebas Neue'; letter-spacing:.25em; font-size: 12px; }

.discord__stats{ margin-top: 42px; display:flex; gap: 48px; }
.discord__stats > div{ display:flex; flex-direction:column; gap: 4px; }
.discord__stats b{ font-family:'Playfair Display'; font-size: 30px; color: var(--cream); }
.discord__stats span{ font-family:'Bebas Neue'; letter-spacing:.3em; font-size: 10px; color: var(--ink-3); }

.discord__art{ position: relative; height: 480px; }
.discord__pane{
  position: absolute; inset: 0;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: rgba(20,8,46,.6);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  padding: 20px;
  box-shadow: var(--shadow-2);
}
.discord__pane-top{ display:flex; gap:6px; margin-bottom: 20px; }
.discord__pane-top span{ width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.15); }
.discord__pane-top span:first-child{ background: var(--sunset-1); }
.discord__pane-top span:nth-child(2){ background: var(--gold); }
.discord__pane-list{ display:grid; gap: 8px; }
.discord__pane-list > div{
  display:flex; align-items:center; gap: 10px; padding: 10px 12px;
  border-radius: 10px;
  font-family:'Manrope'; font-size: 13px; color: var(--ink-2);
  transition: background .3s var(--ease-out);
}
.discord__pane-list > div i{ width:6px; height:6px; border-radius:50%; background: var(--line); }
.discord__pane-list > div b{ font-weight:500; color: var(--cream-2); }
.discord__pane-list > div em{
  margin-left:auto; font-style:normal; font-family:'Bebas Neue'; letter-spacing:.2em; font-size: 9px;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--grad-warm); color:#0a0416;
}
.discord__pane-list > div.on{ background: rgba(255,255,255,.04); }
.discord__pane-list > div.on i{ background: var(--sunset-1); }

.discord__pane--float{
  inset: auto -18px 20px auto;
  width: min(80%, 380px); height: auto;
  transform: translateY(0);
  animation: floaty 6s ease-in-out infinite;
}
.msg{ display:flex; gap:12px; }
.msg__av{
  width:36px; height:36px; border-radius:50%;
  background: linear-gradient(135deg, var(--h1,#ff6b3d), var(--h2,#ff4d8d));
  display:grid; place-items:center;
  font-family:'Playfair Display'; font-style:italic; font-size: 14px; color:#08030f;
}
.msg b{ display:block; font-weight:500; color: var(--cream); font-family:'Manrope'; font-size: 13px; }
.msg small{ display:block; font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 3px; }

/* ------------------------------ SUPPORT / TICKETS ------------------- */
.ticket{
  position:relative; padding: 28px; border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  display:flex; flex-direction:column;
  transition: transform .6s var(--ease-out), border-color .6s var(--ease-out), background .6s var(--ease-out);
  overflow:hidden;
}
.ticket__ico{
  width: 52px; height: 52px; display:grid; place-items:center;
  border-radius: 14px; color: var(--cream); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  margin-bottom: 18px;
}
.ticket h3{ color: var(--cream); font-size: 22px; }
.ticket p{ margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.ticket__arrow{
  position:absolute; right: 24px; bottom: 24px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); display:grid; place-items:center;
  color: var(--cream);
  transition: transform .6s var(--ease-out), background .6s var(--ease-out), color .6s var(--ease-out), border-color .6s var(--ease-out);
}
.ticket:hover{ transform: translateY(-6px); border-color: rgba(255,180,120,.35); }
.ticket:hover .ticket__arrow{ background: var(--grad-warm); color:#0a0416; border-color: transparent; transform: rotate(-45deg); }

/* ------------------------------ TEAM SECTION ------------------------ */
.section--team{
  background: linear-gradient(180deg, rgba(10,4,22,1) 0%, rgba(20,8,46,1) 100%);
  border-top: 1px solid var(--line-2);
  position: relative;
}
.team{
  display:flex; flex-direction:column; gap: clamp(48px, 6vw, 80px);
  max-width: var(--max); margin: 0 auto;
}
.team__cat{
  display:grid; grid-template-columns: 260px 1fr; gap: clamp(24px, 4vw, 60px);
  align-items: start;
}
@media (max-width: 900px){ .team__cat{ grid-template-columns: 1fr; } }

.team__cat-head{ position: sticky; top: 100px; }
.team__cat-head .cat-num{
  font-family:'Playfair Display'; font-style: italic; color: var(--gold); font-size: 22px; opacity: .5;
}
.team__cat-head h3{
  font-family:'Playfair Display'; font-size: clamp(28px, 3vw, 36px); color: var(--cream);
  margin-top: 6px;
}
.team__cat-head p{ margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.team__cat-head hr{
  margin-top: 18px; border: 0; height: 1px; width: 60px;
  background: var(--grad-warm);
}

.team__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1080px){ .team__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){ .team__grid{ grid-template-columns: 1fr; } }

.member{
  position:relative; padding: 26px 22px 22px; border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .7s var(--ease-out), border-color .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.member::before{
  content:\"\"; position:absolute; inset:-1px; border-radius: inherit; z-index:-1;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,110,80,.35) 40deg, transparent 80deg, transparent 360deg);
  opacity: 0; transition: opacity .7s var(--ease-out); animation: memberSpin 6s linear infinite paused;
}
@keyframes memberSpin{ to { transform: rotate(360deg); } }
.member:hover{ transform: translateY(-8px); border-color: rgba(255,180,120,.4); box-shadow: 0 40px 60px -20px rgba(255,90,60,.18); }
.member:hover::before{ opacity: 1; animation-play-state: running; }

.member__top{ display:flex; align-items:center; gap: 16px; }
.member__av{
  width: 68px; height: 68px; border-radius: 50%;
  display:grid; place-items:center;
  font-family:'Playfair Display'; font-style: italic; font-size: 24px; color:#08030f;
  background: linear-gradient(135deg, var(--h1,#ff6b3d), var(--h2,#ff4d8d));
  box-shadow: 0 10px 30px rgba(255,90,60,.35), inset 0 0 0 2px rgba(255,255,255,.4);
}
.member__meta b{ display:block; color: var(--cream); font-family:'Playfair Display'; font-weight:500; font-size: 20px; }
.member__meta small{ display:block; font-family:'Bebas Neue'; letter-spacing:.2em; font-size: 10px; color: var(--gold); margin-top: 4px; }

.member__quote{
  margin-top: 20px; font-size: 13px; color: var(--ink-2); line-height: 1.6;
  padding-top: 18px; border-top: 1px dashed var(--line);
  font-style: italic;
}
.member__foot{
  margin-top: 16px; display:flex; align-items:center; justify-content:space-between;
}
.member__discord{
  font-family:'Manrope'; font-size: 12px; color: var(--ink-3);
}
.member__discord b{ color: var(--cream-2); font-weight:500; }
.member__social{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  border:1px solid var(--line); color: var(--cream-2);
  transition: background .4s var(--ease-out), color .4s var(--ease-out), border-color .4s var(--ease-out);
}
.member__social:hover{ background: var(--grad-warm); color:#0a0416; border-color: transparent; }

/* ------------------------------ FOOTER ------------------------------ */
.foot{
  padding: clamp(60px, 8vw, 100px) var(--pad) 30px;
  background: linear-gradient(180deg, #08030f 0%, #050208 100%);
  border-top: 1px solid var(--line-2);
}
.foot__inner{ max-width: var(--max); margin: 0 auto; display:grid; grid-template-columns: 1.1fr 2fr; gap: clamp(30px, 5vw, 80px); }
@media (max-width: 800px){ .foot__inner{ grid-template-columns: 1fr; } }
.foot__brand{ display:flex; align-items:center; gap: 16px; }
.foot__word{ font-family:'Bebas Neue'; letter-spacing:.3em; font-size: 20px; background: var(--grad-sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot__sub{ margin-top: 6px; font-family:'Playfair Display'; font-style: italic; color: var(--ink-3); font-size: 14px; }
.foot__cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 540px){ .foot__cols{ grid-template-columns: repeat(2, 1fr); } }
.foot__cols h4{ font-family:'Bebas Neue'; letter-spacing:.3em; font-size: 12px; color: var(--gold); margin-bottom: 14px; font-weight:400; }
.foot__cols a{ display:block; padding: 6px 0; font-size: 14px; color: var(--ink-2); transition: color .3s; }
.foot__cols a:hover{ color: var(--cream); }
.foot__bottom{
  max-width: var(--max); margin: 40px auto 0; padding-top: 22px;
  border-top: 1px solid var(--line-2);
  display:flex; justify-content:space-between; gap: 20px; flex-wrap:wrap;
  font-size: 12px; color: var(--ink-3); font-family:'Manrope';
}

/* ------------------------------ MOBILE ------------------------------ */
@media (max-width: 900px){
  .nav__menu{ display:none; position:fixed; top: 0; right: 0; width: 76%; height: 100vh;
    flex-direction: column; padding: 100px 40px; gap: 24px;
    background: rgba(10,4,22,.92); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform .6s var(--ease-out);
  }
  .nav.is-open .nav__menu{ display:flex; transform: translateX(0); }
  .nav__burger{ display:block; }
  .nav__side .btn{ display:none; }
  .lang{ order: 5; }
}
@media (max-width: 560px){
  .hero__scroll{ display:none; }
  .hero__palm{ height: 55%; opacity:.7; }
  .hero__meta > div b{ font-size: 22px; }
  .discord__art{ height: 380px; }
}

/* ------------------------------ MOTION SAFETY ----------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}.nav__logo{
    width: 170px;   /* istədiyin ölçüyə görə dəyiş */
    height: auto;
    display: block;
}.foot__logo{
    width:400px;
    height:50vh;
    object-fit:contain;
    margin-right:14px;
    flex-shrink:0;
}

.foot__brand{
    display:flex;
    align-items:center;
}.msg__av-img{
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,255,255,.15);
    flex-shrink:0;
}.msg__av{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
}