/* =====================================================================
   ERLA — Awwwards-style landing. Mobile-first, dark premium.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --bg:        #08070d;
  --bg-soft:   #0e0d16;
  --surface:   #14121f;
  --surface-2: #1b1830;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  --text:   #f5f4f8;
  --muted:  #9d9bb3;
  --faint:  #6b6982;

  --violet: #6c4cff;
  --violet-2:#9a7bff;
  --mint:   #19e3b1;
  --wa:     #25d366;

  --grad: linear-gradient(120deg,#6c4cff 0%,#a24bff 45%,#19e3b1 100%);

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --maxw: 1180px;
  --pad:  clamp(16px, 5vw, 40px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Unbounded", var(--font);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
::selection{ background:var(--violet); color:#fff; }

/* ambient glow background */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(620px 420px at 12% -5%, rgba(108,76,255,.22), transparent 70%),
    radial-gradient(560px 420px at 100% 8%, rgba(25,227,177,.12), transparent 70%);
}

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.ico{ width:1.2em; height:1.2em; flex:none; }

/* ---------- Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--bg); transition:opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__mark{
  font-family:var(--display); font-weight:900; font-size:clamp(2.4rem,9vw,5rem);
  letter-spacing:.04em; background:var(--grad); -webkit-background-clip:text;
  background-clip:text; color:transparent; animation:pulse 1.2s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.35; transform:scale(.97) } 50%{ opacity:1; transform:scale(1) } }

/* ---------- Buttons ---------- */
.btn{
  --bh:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:var(--bh); padding:0 1.5rem; border-radius:999px;
  font-weight:600; font-size:.96rem; letter-spacing:.01em; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  will-change:transform;
}
.btn:active{ transform:scale(.96); }
.btn--accent{ background:var(--grad); color:#fff; box-shadow:0 8px 30px -8px rgba(108,76,255,.7); }
.btn--accent:hover{ box-shadow:0 12px 38px -8px rgba(108,76,255,.9); transform:translateY(-2px); }
.btn--wa{ background:var(--wa); color:#04210f; box-shadow:0 8px 30px -10px rgba(37,211,102,.75); }
.btn--wa:hover{ transform:translateY(-2px); box-shadow:0 12px 38px -8px rgba(37,211,102,.9); }
.btn--ghost{ background:rgba(255,255,255,.06); border:1px solid var(--line-2); color:var(--text); backdrop-filter:blur(8px); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }

/* ---------- Badges / tags ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.5em 1em; border-radius:999px; font-size:.8rem; font-weight:600;
  letter-spacing:.02em; color:var(--violet-2);
  background:rgba(108,76,255,.12); border:1px solid rgba(108,76,255,.3);
}
.tag{
  display:inline-block; font-family:var(--display); font-weight:500;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mint); margin-bottom:1rem;
}

/* ---------- Navigation ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s, backdrop-filter .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(8,7,13,.72); backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:1rem; }
.nav__logo{ font-family:var(--display); font-weight:700; font-size:1.25rem; letter-spacing:.02em; display:inline-flex; align-items:center; gap:.4em; }
.nav__logo-mark{ color:var(--violet-2); font-size:.7em; }
.nav__links{ display:none; gap:2rem; }
.nav__links a{ font-size:.95rem; color:var(--muted); transition:color .2s; position:relative; }
.nav__links a:hover{ color:var(--text); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--grad); transition:width .25s var(--ease); }
.nav__links a:hover::after{ width:100%; }
.nav__actions{ display:flex; align-items:center; gap:.7rem; }
.nav__book{ display:none; --bh:42px; font-size:.88rem; padding:0 1.1rem; }

/* language toggle */
.langtoggle{ display:inline-flex; padding:3px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line); }
.langtoggle__btn{
  padding:.35em .7em; border-radius:999px; font-size:.78rem; font-weight:600;
  color:var(--muted); transition:color .2s, background .2s;
}
.langtoggle__btn.is-active{ background:var(--grad); color:#fff; }

/* burger */
.nav__burger{ width:42px; height:42px; display:grid; place-content:center; gap:5px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid var(--line); }
.nav__burger span{ display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.nav__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile menu drawer */
.nav__links{ }
@media (max-width:899px){
  .nav__links{
    position:fixed; inset:68px 0 auto 0; flex-direction:column; gap:0;
    background:rgba(10,9,18,.96); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    padding:1rem var(--pad) 1.6rem; transform:translateY(-120%); opacity:0;
    transition:transform .4s var(--ease), opacity .3s; pointer-events:none;
  }
  .nav__links.is-open{ display:flex; transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav__links a{ padding:.95rem 0; font-size:1.1rem; color:var(--text); border-bottom:1px solid var(--line); }
  .nav__links a::after{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero__overlay{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,7,13,.55) 0%, rgba(8,7,13,.35) 35%, rgba(8,7,13,.92) 100%);
}
.hero__content{ padding-block:8rem 5.5rem; max-width:760px; }
.hero__title{
  font-family:var(--display); font-weight:900; line-height:1.02;
  font-size:clamp(2.6rem, 11vw, 6rem); letter-spacing:-.01em; margin:1.1rem 0;
}
.hero__subtitle{ font-size:clamp(1rem,3.6vw,1.25rem); color:var(--muted); max-width:46ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.hero__stats{ display:flex; flex-wrap:wrap; gap:2rem 2.6rem; margin-top:3rem; }
.stat{ display:flex; flex-direction:column; }
.stat b{ font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,6vw,2.7rem); line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span{ font-size:.85rem; color:var(--muted); margin-top:.3rem; }
.hero__scroll{ position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); width:26px; height:42px; border:2px solid var(--line-2); border-radius:14px; display:none; }
.hero__scroll span{ position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--text); animation:scroll 1.6s var(--ease) infinite; }
@keyframes scroll{ 0%{ opacity:0; transform:translateY(0) } 40%{ opacity:1 } 80%,100%{ opacity:0; transform:translateY(14px) } }

/* ---------- Section base ---------- */
.section{ padding-block:clamp(4rem,11vw,7.5rem); position:relative; }
.section__head{ max-width:680px; margin-bottom:3rem; }
.section__title{ font-family:var(--display); font-weight:700; line-height:1.06; font-size:clamp(1.9rem,6.5vw,3.3rem); letter-spacing:-.01em; }
.section__lead{ margin-top:1rem; color:var(--muted); font-size:clamp(1rem,3vw,1.12rem); }

/* ---------- About ---------- */
.about__grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
.feature{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.6rem; transition:transform .3s var(--ease), border-color .3s, background .3s;
  position:relative; overflow:hidden;
}
.feature::before{ content:""; position:absolute; inset:0; background:var(--grad); opacity:0; transition:opacity .3s; mix-blend-mode:overlay; }
.feature:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.feature:hover::before{ opacity:.08; }
.feature__num{ font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--violet-2); }
.feature h3{ font-size:1.2rem; margin:.7rem 0 .5rem; }
.feature p{ color:var(--muted); font-size:.95rem; }
.about__photos{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.about__photos img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); border:1px solid var(--line); }

/* ---------- Catalog ---------- */
.catalog__controls{ display:flex; flex-direction:column; gap:1rem; margin-bottom:1.4rem; }
.filters{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{
  padding:.6em 1.1em; border-radius:999px; font-size:.9rem; font-weight:600;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  transition:color .2s, background .2s, border-color .2s, transform .15s;
}
.chip:active{ transform:scale(.95); }
.chip.is-active{ color:#fff; background:var(--grad); border-color:transparent; }
.search{ display:flex; align-items:center; gap:.6rem; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:0 1.1rem; transition:border-color .2s; }
.search:focus-within{ border-color:var(--violet); }
.search .ico{ color:var(--faint); }
.search input{ flex:1; background:none; border:none; outline:none; color:var(--text); font-size:.95rem; height:50px; min-width:0; }
.search input::placeholder{ color:var(--faint); }
.catalog__count{ color:var(--muted); font-size:.9rem; margin-bottom:1.2rem; }
.catalog__count #catalogCount{ color:var(--text); font-weight:700; }

.catalog__groups{ display:flex; flex-direction:column; gap:clamp(2rem,6vw,3.2rem); }
.catalog__group-head{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem; }
.catalog__group-title{ font-family:var(--display); font-weight:700; font-size:clamp(1.15rem,4vw,1.5rem); display:inline-flex; align-items:center; gap:.6rem; }
.catalog__group-badge{ font-size:.72rem; font-weight:700; letter-spacing:.06em; padding:.32em .65em; border-radius:999px; }
.catalog__group-badge.ps5{ background:rgba(108,76,255,.18); color:var(--violet-2); border:1px solid rgba(108,76,255,.35); }
.catalog__group-badge.ps4{ background:rgba(25,227,177,.14); color:var(--mint); border:1px solid rgba(25,227,177,.3); }
.catalog__group-count{ font-size:.82rem; color:var(--faint); border:1px solid var(--line); border-radius:999px; padding:.22em .75em; }
.catalog__grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
.console{
  text-align:left; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.3rem; position:relative; overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s; width:100%;
}
.console::after{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.console:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.console:hover::after{ transform:scaleX(1); }
.console__top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.console__name{ font-family:var(--display); font-weight:700; font-size:1.25rem; }
.console__badge{ font-size:.7rem; font-weight:700; letter-spacing:.08em; padding:.35em .7em; border-radius:999px; }
.console__badge.ps5{ background:rgba(108,76,255,.18); color:var(--violet-2); border:1px solid rgba(108,76,255,.35); }
.console__badge.ps4{ background:rgba(25,227,177,.14); color:var(--mint); border:1px solid rgba(25,227,177,.3); }
.console__games{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0; }
.gtag{ font-size:.78rem; padding:.3em .7em; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--muted); }
.gtag--more{ color:var(--violet-2); background:rgba(108,76,255,.1); border-color:rgba(108,76,255,.25); }
.console__foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.4rem; }
.console__count{ font-size:.82rem; color:var(--faint); }
.console__open{ font-size:.85rem; font-weight:600; color:var(--violet-2); display:inline-flex; align-items:center; gap:.3em; }
.catalog__empty{ text-align:center; color:var(--muted); padding:3rem 0; }

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; z-index:150; display:grid; place-items:end center; }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(4,3,8,.7); backdrop-filter:blur(4px); animation:fade .3s; }
.modal__card{
  position:relative; width:100%; max-width:560px; max-height:86svh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:1.8rem; animation:slideup .4s var(--ease);
}
@media (min-width:600px){ .modal{ place-items:center; } .modal__card{ border-radius:var(--r-lg); animation:fade .3s; } }
@keyframes fade{ from{ opacity:0 } }
@keyframes slideup{ from{ transform:translateY(100%) } }
.modal__close{ position:absolute; top:1rem; right:1rem; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.07); font-size:1.5rem; line-height:1; color:var(--muted); }
.modal__platform{ font-size:.72rem; font-weight:700; letter-spacing:.1em; color:var(--violet-2); text-transform:uppercase; }
.modal__name{ font-family:var(--display); font-weight:700; font-size:1.7rem; margin:.3rem 0; }
.modal__sub{ color:var(--muted); font-size:.9rem; margin-bottom:1.2rem; }
.modal__games{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:1.5rem; }
.modal__games li{ font-size:.88rem; padding:.55em .8em; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; color:var(--text); }
.modal__book{ width:100%; }

/* ---------- Prices ---------- */
.prices__grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
.price{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition:transform .3s var(--ease), border-color .3s; position:relative; overflow:hidden;
}
.price:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.price.is-featured{ border-color:rgba(108,76,255,.5); background:linear-gradient(160deg, rgba(108,76,255,.12), var(--surface) 60%); }
.price__title{ font-weight:600; font-size:1.02rem; }
.price__star{ display:inline-block; margin-left:.4em; color:var(--violet-2); font-size:.8em; }
.price__val{ font-family:var(--display); font-weight:700; font-size:1.4rem; white-space:nowrap; }
.price__val small{ font-family:var(--font); font-size:.7rem; color:var(--muted); font-weight:500; display:block; text-align:right; }

/* ---------- How ---------- */
.how__grid{ display:grid; grid-template-columns:1fr; gap:1rem; counter-reset:step; }
.step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem; transition:transform .3s var(--ease), border-color .3s; }
.step:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.step__num{ display:grid; place-content:center; width:46px; height:46px; border-radius:14px; font-family:var(--display); font-weight:700; background:var(--grad); color:#fff; margin-bottom:1rem; }
.step h3{ font-size:1.15rem; margin-bottom:.4rem; }
.step p{ color:var(--muted); font-size:.93rem; }

/* ---------- Gallery marquee ---------- */
.gallery{ padding-bottom:clamp(4rem,11vw,7.5rem); }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee__track{ display:flex; gap:1rem; width:max-content; animation:marquee 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track img{ width:clamp(220px,60vw,360px); aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); border:1px solid var(--line); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- Location ---------- */
.location__inner{ display:grid; gap:2rem; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.8rem,6vw,3.5rem); }
.location__addr{ font-family:var(--display); font-weight:700; font-size:1.4rem; margin-bottom:.3rem; }
.location__note{ color:var(--muted); margin-bottom:1.6rem; }
.location__pin{ display:none; color:var(--violet); }
.location__pin svg{ width:120px; height:120px; margin-inline:auto; filter:drop-shadow(0 10px 30px rgba(108,76,255,.5)); }

/* ---------- Contacts ---------- */
.contacts__grid{ display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1.5rem; }
.contact{
  display:flex; align-items:center; gap:1rem; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:1.2rem 1.4rem;
  transition:transform .3s var(--ease), border-color .3s;
}
.contact:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.contact__ico{ width:46px; height:46px; flex:none; display:grid; place-content:center; border-radius:14px; background:rgba(255,255,255,.05); color:var(--violet-2); }
.contact__ico svg{ width:22px; height:22px; }
.contact.is-wa .contact__ico{ background:rgba(37,211,102,.14); color:var(--wa); }
.contact__label{ font-size:.8rem; color:var(--muted); }
.contact__val{ font-weight:600; font-size:1.05rem; }
.contacts__socials{ display:flex; flex-wrap:wrap; gap:.7rem; }
.social{ display:inline-flex; align-items:center; gap:.5em; padding:.7em 1.1em; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:.9rem; color:var(--muted); transition:color .2s, border-color .2s, transform .15s; }
.social:hover{ color:var(--text); border-color:var(--line-2); transform:translateY(-2px); }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); padding-block:2.5rem; }
.footer__inner{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; }
.footer__rights{ color:var(--muted); font-size:.9rem; }
.footer__made{ color:var(--faint); font-size:.85rem; }

/* ---------- Floating WhatsApp ---------- */
.fab{
  position:fixed; right:clamp(14px,4vw,28px); bottom:clamp(14px,4vw,28px); z-index:90;
  width:58px; height:58px; border-radius:50%; background:var(--wa); color:#04210f;
  display:grid; place-content:center; box-shadow:0 10px 30px -6px rgba(37,211,102,.6);
  transition:transform .25s var(--ease); animation:fab-in .5s var(--ease) .8s both;
}
.fab svg{ width:30px; height:30px; }
.fab:hover{ transform:scale(1.1); }
.fab::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa); animation:ring 2.2s var(--ease) infinite; }
@keyframes ring{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.7); opacity:0 } }
@keyframes fab-in{ from{ transform:scale(0); opacity:0 } }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- Breakpoints ---------- */
@media (min-width:600px){
  .about__grid{ grid-template-columns:1fr 1fr; }
  .catalog__grid{ grid-template-columns:1fr 1fr; }
  .how__grid{ grid-template-columns:1fr 1fr; }
  .catalog__controls{ flex-direction:row; align-items:center; justify-content:space-between; }
  .search{ min-width:280px; }
  .hero__scroll{ display:block; }
}
@media (min-width:900px){
  .nav__links{ display:flex; }
  .nav__book{ display:inline-flex; }
  .nav__burger{ display:none; }
  .about__grid{ grid-template-columns:repeat(4,1fr); }
  .catalog__grid{ grid-template-columns:repeat(3,1fr); }
  .prices__grid{ grid-template-columns:1fr 1fr; }
  .how__grid{ grid-template-columns:repeat(4,1fr); }
  .location__inner{ grid-template-columns:1.4fr 1fr; }
  .location__pin{ display:block; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}