/* Fervor Magazine — Premium Visual System */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0B1220;
  --bg2:#1A2333;
  --bg3:#243044;
  --card:rgba(26,35,51,.55);
  --card-solid:#1A2333;
  --text:#FFFFFF;
  --muted:#94A3B8;
  --muted-light:#CBD5E1;
  --accent:#22D3EE;
  --accent2:#7C5CFF;
  --light:#F6F8FC;
  --light2:#EAF2FF;
  --orange:#7C5CFF;
  --red:#F43F5E;
  --gold:#FBBF24;
  --radius:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --max:1240px;
  --font:'DM Sans',system-ui,-apple-system,sans-serif;
  --font-display:'Outfit',system-ui,sans-serif;
  --shadow:0 8px 32px rgba(0,0,0,.35);
  --shadow-glow:0 0 40px rgba(34,211,238,.12);
  --glass:rgba(255,255,255,.04);
  --glass-border:rgba(255,255,255,.08);
  --gradient-brand:linear-gradient(135deg,#22D3EE 0%,#7C5CFF 100%);
  --gradient-mesh:radial-gradient(ellipse 80% 60% at 10% 20%,rgba(34,211,238,.14) 0%,transparent 55%),
                   radial-gradient(ellipse 60% 50% at 90% 10%,rgba(124,92,255,.16) 0%,transparent 50%),
                   radial-gradient(ellipse 50% 40% at 70% 90%,rgba(34,211,238,.08) 0%,transparent 45%);
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  max-width:100%;
}

body{
  font-family:var(--font);
  background:var(--bg);
  background-image:var(--gradient-mesh);
  background-attachment:fixed;
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  max-width:100%;
  width:100%;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    linear-gradient(180deg,transparent 0%,rgba(11,18,32,.4) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0px,rgba(255,255,255,.015) 1px,transparent 1px,transparent 80px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0px,rgba(255,255,255,.015) 1px,transparent 1px,transparent 80px);
  pointer-events:none;
  z-index:0;
}

body>*{position:relative;z-index:1}

main,.section,.footer,.hero{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

img{max-width:100%;height:auto;display:block}

a{
  color:var(--accent);
  text-decoration:none;
  transition:color .25s ease,opacity .25s ease;
}

a:hover{color:var(--light2)}

a.btn,
a.btn:hover,
a.btn--primary,
a.btn--primary:hover{
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}

ul{list-style:none}

.skip{
  position:absolute;left:-9999px;top:0;z-index:9999;
  padding:.6rem 1.2rem;
  background:var(--gradient-brand);
  color:var(--bg);
  font-weight:700;
  border-radius:var(--radius);
}

.skip:focus{left:1rem;top:1rem}

/* ─── Header ─── */
.header{
  position:sticky;top:0;z-index:100;
  width:100%;
  background:rgba(11,18,32,.78);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 8px 32px rgba(0,0,0,.22);
  padding:0;
}

.header__bar{
  display:flex;
  align-items:center;
  gap:1rem;
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:.9rem clamp(1rem,3vw,2rem);
}

.header__actions{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-left:auto;
  flex-shrink:0;
}

.logo{
  display:flex;align-items:center;gap:.75rem;
  font-family:var(--font-display);
  font-weight:700;font-size:clamp(.9rem,2.5vw,1.08rem);
  color:var(--text);
  letter-spacing:-.02em;
  padding:.35rem 0;
  flex-shrink:1;
  min-width:0;
}

.logo img{
  width:40px;height:40px;
  filter:drop-shadow(0 0 10px rgba(34,211,238,.45));
  border-radius:10px;
}

.logo:hover{color:var(--accent)}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px;height:44px;
  padding:0;
  background:var(--glass);
  border:1px solid var(--glass-border);
  color:var(--text);
  border-radius:12px;
  cursor:pointer;
  transition:background .2s,border-color .2s;
  flex-shrink:0;
  z-index:102;
}

.nav-toggle:hover{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.3)}

.nav-toggle__bar{
  display:block;
  width:22px;height:2px;
  background:var(--text);
  border-radius:2px;
  transition:transform .3s ease,opacity .3s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:99;
  opacity:0;
  transition:opacity .3s ease;
}

.nav-overlay.is-visible{
  display:block;
  opacity:1;
}

.nav__cta-mobile{display:none}

.nav{
  display:flex;gap:.35rem;flex:1;justify-content:center;align-items:center;
  min-width:0;
  padding:.15rem 0;
}

.nav a{
  padding:.7rem 1.15rem;
  border-radius:50px;
  color:var(--muted);
  font-size:.9rem;font-weight:500;
  letter-spacing:.01em;
  transition:all .25s ease;
  border:1px solid transparent;
}

.nav a:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
  border-color:var(--glass-border);
}

.nav a.is-active{
  color:#fff;
  background:linear-gradient(135deg,#0e7490 0%,#5b21b6 100%);
  font-weight:600;
  box-shadow:0 4px 20px rgba(34,211,238,.28);
}

.header__cta{
  flex-shrink:0;
  padding:.15rem 0;
}

.header__cta .btn{font-size:.88rem;padding:.7rem 1.35rem}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.75rem;
  border-radius:50px;
  font-family:var(--font-display);
  font-weight:600;font-size:.92rem;
  border:none;cursor:pointer;
  transition:transform .2s ease,box-shadow .3s ease,background .3s ease;
  text-align:center;
  letter-spacing:.01em;
  position:relative;
  overflow:hidden;
}

.btn::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 50%);
  opacity:0;
  transition:opacity .3s ease;
}

.btn:hover::before{opacity:1}

.btn:active{transform:scale(.96)}

.btn--primary{
  background:linear-gradient(135deg,#0e7490 0%,#5b21b6 100%);
  color:#fff;
  font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  box-shadow:0 4px 24px rgba(34,211,238,.3),0 0 0 1px rgba(255,255,255,.1) inset;
}

.btn--primary:hover{
  box-shadow:0 8px 36px rgba(124,92,255,.4),0 0 0 1px rgba(255,255,255,.15) inset;
  color:#fff;
}

.btn--outline{
  background:rgba(124,92,255,.06);
  border:1.5px solid rgba(124,92,255,.45);
  color:var(--light2);
  backdrop-filter:blur(8px);
}

.btn--outline:hover{
  background:rgba(124,92,255,.15);
  border-color:var(--accent2);
  color:var(--text);
  box-shadow:0 0 30px rgba(124,92,255,.2);
}

.btn--ghost{
  background:var(--glass);
  border:1px solid var(--glass-border);
  color:var(--muted-light);
  backdrop-filter:blur(8px);
}

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

.btn--sm{padding:.55rem 1.15rem;font-size:.85rem}

/* ─── Layout ─── */
.container{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 clamp(1rem,3vw,1.5rem);
}

.section{
  padding:5.5rem 0;
  position:relative;
}

.section--dark{
  background:linear-gradient(180deg,rgba(26,35,51,.6) 0%,rgba(11,18,32,.3) 100%);
  border-top:1px solid var(--glass-border);
  border-bottom:1px solid var(--glass-border);
}

.section--dark::before{
  content:'';
  position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:min(600px,80%);height:1px;
  background:var(--gradient-brand);
  opacity:.4;
}

.section__label{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(34,211,238,.1);
  border:1px solid rgba(34,211,238,.25);
  color:var(--accent);
  font-family:var(--font-display);
  font-size:.72rem;font-weight:700;
  padding:.4rem 1.1rem;
  border-radius:50px;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:1.25rem;
  backdrop-filter:blur(8px);
}

.section__title{
  font-family:var(--font-display);
  font-size:clamp(2rem,4.5vw,2.85rem);
  font-weight:800;
  margin-bottom:1rem;
  line-height:1.12;
  letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--text) 30%,var(--muted-light) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.section__lead{
  color:var(--muted);
  font-size:1.08rem;
  max-width:620px;
  margin-bottom:2.5rem;
  line-height:1.7;
}

/* ─── Split layouts ─── */
.split{
  display:grid;
  gap:3rem;
  align-items:center;
}

.split--hero{
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4rem);
}

.split--tech{
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
  gap:3rem;
}

.split--about{
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
}

.split--demo{
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start;
  margin-bottom:2.5rem;
}

.split--projects{
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
}

.split--reviews{
  grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);
  align-items:center;
  gap:2.5rem;
}

.split--form{
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
  gap:2.5rem;
}

.split__copy{min-width:0}
.split__media{min-width:0;position:relative}

.section-head{max-width:640px;margin-bottom:2.5rem}
.section-head--offset{margin-left:0;max-width:560px}

/* Bento services */
.bento{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1.25rem;
}

.bento .card{grid-column:span 4}
.bento .card--wide{grid-column:span 8}
.bento .card--accent{
  border-color:rgba(34,211,238,.25);
  background:linear-gradient(145deg,rgba(34,211,238,.1),rgba(124,92,255,.08));
}

.card__mark{
  display:inline-flex;
  align-items:center;justify-content:center;
  min-width:2.4rem;height:2rem;
  padding:0 .55rem;
  margin-bottom:1rem;
  border-radius:8px;
  background:rgba(34,211,238,.12);
  border:1px solid rgba(34,211,238,.22);
  color:var(--accent);
  font-family:var(--font-display);
  font-size:.75rem;font-weight:700;
  letter-spacing:.06em;
}

.card--flat{
  padding:1.35rem;
  background:rgba(255,255,255,.03);
}

.tech-stack{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

.tech-stack .card:nth-child(2),
.tech-stack .card:nth-child(3){transform:translateY(18px)}
.tech-stack .card:hover{transform:translateY(-4px)!important}

.about-visual{
  border-radius:var(--radius-xl);
  overflow:hidden;
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow);
  min-height:320px;
}

.about-visual img{
  width:100%;height:100%;
  object-fit:cover;min-height:320px;
}

.projects-visual{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:1rem;
  align-items:end;
}

.projects-visual img{
  width:100%;
  border-radius:var(--radius-lg);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow);
  object-fit:cover;
  max-height:480px;
}

.projects-visual img:last-child{
  transform:translateY(-28px);
  max-height:400px;
}

.shot-rail{
  margin-top:1rem;
  max-width:420px;
  margin-left:auto;margin-right:0;
}

.shot-rail .slider__slide img{max-height:440px}

.form-intro .section__lead{margin-bottom:1.25rem}

.split--demo .game-block{margin:0}

.nav-toggle{
  font-family:var(--font-display);
  font-size:0;
  letter-spacing:0;
  text-transform:none;
}

.slider__arrow{
  width:auto;min-width:72px;height:44px;
  padding:0 1rem;
  border-radius:50px;
  font-family:var(--font-display);
  font-size:.8rem;font-weight:700;
  letter-spacing:.04em;
}

.review__stars{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--gold);
}

.hero{
  padding:4rem 0 5.5rem;
  position:relative;
  overflow:hidden;
}

.hero::after{
  content:'';
  position:absolute;
  width:500px;height:500px;
  top:-100px;right:-100px;
  background:radial-gradient(circle,rgba(124,92,255,.18) 0%,transparent 70%);
  pointer-events:none;
  animation:floatGlow 8s ease-in-out infinite;
}

@keyframes floatGlow{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-30px,20px) scale(1.05)}
}

.hero__badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(124,92,255,.12);
  border:1px solid rgba(124,92,255,.35);
  color:var(--light2);
  font-size:.78rem;font-weight:600;
  padding:.45rem 1rem;
  border-radius:50px;
  margin-bottom:1.25rem;
  backdrop-filter:blur(10px);
  letter-spacing:.02em;
}

.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,5.5vw,3.6rem);
  font-weight:800;
  line-height:1.08;
  margin-bottom:1.25rem;
  letter-spacing:-.04em;
}

.hero h1 span{
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero__text{
  color:var(--muted);
  font-size:1.12rem;
  margin-bottom:2rem;
  line-height:1.75;
  max-width:520px;
}

.hero__actions{display:flex;gap:1rem;flex-wrap:wrap}

.hero__img{
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow),var(--shadow-glow);
  max-width:100%;
  transform:none;
  transition:transform .5s ease,box-shadow .5s ease;
}

.hero__img::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(34,211,238,.15) 0%,transparent 50%,rgba(124,92,255,.1) 100%);
  z-index:1;pointer-events:none;
}

@media (min-width: 1025px) {
  .hero__img:hover{
    transform:scale(1.02);
    box-shadow:0 20px 60px rgba(34,211,238,.2),0 0 80px rgba(124,92,255,.15);
  }
}

/* ─── Cards ─── */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}

.grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
}

.card{
  background:var(--card);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
  position:relative;
  overflow:hidden;
}

.card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:2px;
  background:var(--gradient-brand);
  opacity:0;
  transition:opacity .35s ease;
}

.card:hover{
  border-color:rgba(34,211,238,.25);
  transform:translateY(-6px);
  box-shadow:0 16px 48px rgba(0,0,0,.3),0 0 40px rgba(34,211,238,.08);
}

.card:hover::before{opacity:1}

.grid-3 .card:nth-child(1){transform:translateY(0)}
.grid-3 .card:nth-child(2){transform:translateY(12px)}
.grid-3 .card:nth-child(3){transform:translateY(0)}
.grid-3 .card:nth-child(4){transform:translateY(8px)}
.grid-3 .card:nth-child(5){transform:translateY(0)}
.grid-3 .card:nth-child(6){transform:translateY(12px)}

.grid-3 .card:hover{transform:translateY(-6px)!important}

.card__icon{
  width:52px;height:52px;
  background:linear-gradient(135deg,rgba(34,211,238,.15),rgba(124,92,255,.15));
  border:1px solid rgba(34,211,238,.2);
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
  margin-bottom:1.15rem;
  box-shadow:0 4px 16px rgba(34,211,238,.1);
}

.card h3{
  font-family:var(--font-display);
  font-size:1.08rem;font-weight:700;
  margin-bottom:.55rem;
  letter-spacing:-.01em;
}

.card p{color:var(--muted);font-size:.9rem;line-height:1.65}

/* ─── Pipeline ─── */
.pipeline{
  display:flex;gap:0;
  position:relative;
  overflow-x:auto;
  padding:2rem 0 1rem;
  scrollbar-width:thin;
  scrollbar-color:var(--accent2) transparent;
}

.pipeline::before{
  content:'';
  position:absolute;
  top:3.4rem;left:5%;right:5%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);
  opacity:.35;
  z-index:0;
}

.pipeline__step{
  flex:1;min-width:130px;
  text-align:center;
  position:relative;
  padding:1rem .75rem;
}

.pipeline__step::after{display:none}

.pipeline__num{
  width:60px;height:60px;
  border-radius:50%;
  background:var(--bg2);
  border:2px solid rgba(34,211,238,.4);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:700;font-size:1.15rem;
  margin:0 auto .85rem;
  position:relative;z-index:1;
  transition:all .35s ease;
  box-shadow:0 0 0 4px rgba(11,18,32,.8),0 4px 20px rgba(34,211,238,.15);
}

.pipeline__step:hover .pipeline__num{
  background:var(--gradient-brand);
  color:var(--bg);
  border-color:transparent;
  transform:scale(1.1);
  box-shadow:0 0 30px rgba(34,211,238,.4);
}

.pipeline__step h4{
  font-family:var(--font-display);
  font-size:.88rem;font-weight:600;
  margin-bottom:.3rem;
}

.pipeline__step p{font-size:.75rem;color:var(--muted)}

/* ─── Game block ─── */
.game-block{
  background:linear-gradient(145deg,rgba(26,35,51,.8),rgba(11,18,32,.6));
  backdrop-filter:blur(20px);
  border:1px solid rgba(34,211,238,.2);
  border-radius:var(--radius-xl);
  padding:clamp(1rem,3vw,2rem);
  margin:2.5rem 0;
  position:relative;
  overflow:hidden;
  max-width:100%;
  box-shadow:0 8px 40px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06);
}

.game-block::before{
  content:'';
  position:absolute;
  top:-50%;right:-20%;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(124,92,255,.12) 0%,transparent 70%);
  pointer-events:none;
}

.game-block__head{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;
  margin-bottom:1.25rem;
  position:relative;
}

.game-block__head h3{
  font-family:var(--font-display);
  font-size:1.3rem;font-weight:700;
  letter-spacing:-.02em;
}

.game-iframe{
  display:block;
  width:100%;
  height:520px;
  border:none;
  border-radius:var(--radius);
  background:#0B1220;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  border:1px solid var(--glass-border);
  overflow:hidden;
}

.disclaimer{
  background:rgba(244,63,94,.06);
  border:1px solid rgba(244,63,94,.2);
  border-radius:var(--radius);
  padding:1.15rem 1.5rem;
  font-size:.85rem;
  color:var(--muted);
  margin:1.75rem 0;
  line-height:1.65;
  backdrop-filter:blur(8px);
}

.disclaimer strong{color:#FB7185}

.responsible{
  display:flex;gap:1rem;flex-wrap:wrap;
  align-items:center;
  margin:1.25rem 0;
}

.responsible a{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.15rem;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:50px;
  font-size:.85rem;font-weight:600;
  color:var(--text);
  backdrop-filter:blur(10px);
  transition:all .25s ease;
}

.responsible a:hover{
  background:rgba(34,211,238,.1);
  border-color:rgba(34,211,238,.3);
  color:var(--accent);
  box-shadow:0 4px 20px rgba(34,211,238,.15);
}

.badge-18{
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;
  border-radius:50%;
  background:linear-gradient(135deg,#F43F5E,#E11D48);
  color:#fff;
  font-family:var(--font-display);
  font-weight:800;font-size:.85rem;
  border:2px solid rgba(255,255,255,.2);
  box-shadow:0 4px 16px rgba(244,63,94,.35);
}

/* ─── Reviews ─── */
.reviews{position:relative;overflow:hidden}

.reviews__track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}

.review{min-width:100%;padding:1rem}

.review__card{
  background:var(--card);
  backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  padding:2.5rem 2rem;
  text-align:center;
  position:relative;
  box-shadow:var(--shadow);
}

.review__card::before{
  content:'"';
  position:absolute;
  top:1rem;left:2rem;
  font-family:var(--font-display);
  font-size:4rem;
  line-height:1;
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  opacity:.3;
}

.review__stars{
  color:var(--gold);
  font-size:1.2rem;
  margin-bottom:1.25rem;
  letter-spacing:.15em;
}

.review__text{
  font-size:1.08rem;
  font-style:italic;
  color:var(--muted-light);
  margin-bottom:1.25rem;
  max-width:580px;
  margin-left:auto;margin-right:auto;
  line-height:1.75;
}

.review__author{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  color:var(--accent);
}

.reviews__nav{display:flex;justify-content:center;gap:.65rem;margin-top:1.5rem}

.reviews__dot{
  width:10px;height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  border:1px solid var(--glass-border);
  cursor:pointer;
  transition:all .3s ease;
  padding:0;
}

.reviews__dot.is-active{
  background:var(--gradient-brand);
  border-color:transparent;
  transform:scale(1.3);
  box-shadow:0 0 12px rgba(34,211,238,.5);
}

/* ─── Forms ─── */
.form{
  background:linear-gradient(160deg,rgba(26,35,51,.7),rgba(11,18,32,.5));
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  padding:2.5rem;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;
  overflow:hidden;
}

.form::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:3px;
  background:var(--gradient-brand);
}

.form__title{
  font-family:var(--font-display);
  font-size:1.6rem;font-weight:800;
  margin-bottom:.6rem;
  letter-spacing:-.02em;
}

.form__sub{color:var(--muted);font-size:.92rem;margin-bottom:1.75rem}

.form__group{margin-bottom:1.15rem}

.form__group label{
  display:block;
  font-size:.82rem;font-weight:600;
  margin-bottom:.4rem;
  color:var(--muted-light);
  letter-spacing:.03em;
  text-transform:uppercase;
}

.form__check{
  display:flex!important;
  align-items:center;
  gap:.65rem;
  margin-bottom:0;
  text-transform:none;
  font-size:.9rem;
  font-weight:500;
  letter-spacing:0;
  color:var(--muted-light);
  cursor:pointer;
  line-height:1.4;
}

.form__check input[type="checkbox"]{
  width:1.1rem;
  height:1.1rem;
  margin:0;
  flex-shrink:0;
  accent-color:var(--accent);
  cursor:pointer;
}

.form__group input,
.form__group textarea,
.form__group select{
  width:100%;
  padding:.85rem 1.1rem;
  background:rgba(11,18,32,.6);
  border:1px solid var(--glass-border);
  border-radius:12px;
  color:var(--text);
  font-family:inherit;font-size:.95rem;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}

.form__group input:focus,
.form__group textarea:focus,
.form__group select:focus{
  outline:none;
  border-color:rgba(34,211,238,.5);
  box-shadow:0 0 0 3px rgba(34,211,238,.12);
  background:rgba(11,18,32,.8);
}

.form__group textarea{resize:vertical;min-height:130px}

.form__note{
  font-size:.82rem;
  color:var(--accent);
  margin-bottom:1.15rem;
  padding:.6rem 1rem;
  background:rgba(34,211,238,.08);
  border-radius:10px;
  border:1px solid rgba(34,211,238,.15);
}

.form__success{
  display:none;
  background:rgba(34,211,238,.1);
  border:1px solid rgba(34,211,238,.3);
  border-radius:12px;
  padding:1rem;
  color:var(--accent);
  margin-top:1.15rem;
  text-align:center;
  font-weight:500;
}

.form__success.is-visible{display:block;animation:fadeInUp .4s ease}

/* ─── Tabs ─── */
.tabs__nav{
  display:flex;gap:.5rem;flex-wrap:wrap;
  margin-bottom:2.5rem;
  padding:.35rem;
  background:rgba(11,18,32,.4);
  border-radius:50px;
  border:1px solid var(--glass-border);
  width:fit-content;
  max-width:100%;
}

.tabs__btn{
  padding:.65rem 1.35rem;
  background:transparent;
  border:1px solid transparent;
  border-radius:50px;
  color:var(--muted);
  font-family:var(--font-display);
  font-weight:600;font-size:.88rem;
  cursor:pointer;
  transition:all .3s ease;
}

.tabs__btn.is-active,
.tabs__btn:hover{
  background:linear-gradient(135deg,#0e7490 0%,#5b21b6 100%);
  color:#fff;
  box-shadow:0 4px 16px rgba(34,211,238,.25);
}

.tabs__panel{display:none;animation:fadeInUp .45s ease}

.tabs__panel.is-active{display:block}

/* ─── Team ─── */
.team-card{
  text-align:center;
  padding:1.5rem 1rem;
  background:var(--card);
  backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  transition:transform .35s ease,box-shadow .35s ease;
}

.team-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(124,92,255,.15);
}

.team-card img{
  width:120px;height:120px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 1.15rem;
  border:3px solid transparent;
  background:linear-gradient(var(--bg2),var(--bg2)) padding-box,
              var(--gradient-brand) border-box;
  box-shadow:0 8px 24px rgba(34,211,238,.2);
}

.team-card h4{
  font-family:var(--font-display);
  font-weight:700;
  margin-bottom:.3rem;
}

.team-card p{color:var(--muted);font-size:.85rem}

/* ─── Blog ─── */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
}

.blog-card{
  background:var(--card);
  backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:all .35s ease;
  position:relative;
}

.blog-card::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;height:3px;
  background:var(--gradient-brand);
  transform:scaleX(0);
  transition:transform .35s ease;
}

.blog-card:hover{
  border-color:rgba(34,211,238,.2);
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}

.blog-card:hover::after{transform:scaleX(1)}

.blog-card__body{padding:1.5rem}

.blog-card__tag{
  font-size:.72rem;
  color:var(--accent);
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:.6rem;
}

.blog-card h3{
  font-family:var(--font-display);
  font-size:1.08rem;font-weight:700;
  margin-bottom:.55rem;
  letter-spacing:-.01em;
}

.blog-card p{color:var(--muted);font-size:.88rem;line-height:1.6}

.blog-search{display:flex;gap:.75rem;margin-bottom:2.5rem}

.blog-search input{
  flex:1;
  padding:.85rem 1.25rem;
  background:var(--card);
  backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:50px;
  color:var(--text);
  font-size:.95rem;
  transition:all .25s ease;
}

.blog-search input:focus{
  outline:none;
  border-color:rgba(34,211,238,.4);
  box-shadow:0 0 0 3px rgba(34,211,238,.1);
}

.blog-search input::placeholder{color:var(--muted)}

/* ─── Contacts ─── */
.contacts-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:2.5rem;
  align-items:start;
  min-width:0;
  max-width:100%;
}

.contact-info{
  background:var(--card);
  backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  padding:clamp(1.25rem,4vw,2.25rem);
  box-shadow:var(--shadow);
  min-width:0;
  max-width:100%;
  overflow:hidden;
}

.contact-info h3{
  font-family:var(--font-display);
  font-size:clamp(1.1rem,3.5vw,1.3rem);
  font-weight:700;
  margin-bottom:1.25rem;
}

.contact-info__item{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.35rem;
  margin-bottom:1rem;
  font-size:.95rem;
  padding:.65rem 0;
  border-bottom:1px solid var(--glass-border);
  min-width:0;
}

.contact-info__item:last-of-type{border-bottom:none}

.contact-info__item strong{
  color:var(--accent);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
}

.contact-info__value{
  min-width:0;
  color:var(--muted-light);
  line-height:1.55;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.contact-info__value a{
  color:var(--light2);
  font-weight:500;
}

.contact-info__value a:hover{color:var(--accent)}

.map-wrap{
  border-radius:var(--radius);
  overflow:hidden;
  margin-top:1.25rem;
  border:1px solid var(--glass-border);
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}

.map-wrap iframe{width:100%;height:250px;border:none;filter:saturate(.9) contrast(1.05)}

.footer__map{
  margin-bottom:2.5rem;
}

.footer__map h4{
  font-family:var(--font-display);
  font-size:.88rem;font-weight:700;
  margin-bottom:1rem;
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.map-wrap--footer iframe{height:280px}

/* ─── Game projects ─── */
.geo-badges{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.75rem 0}

.geo-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem 1.1rem;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:50px;
  font-size:.84rem;font-weight:600;
  backdrop-filter:blur(8px);
  transition:all .25s ease;
}

.geo-badge:hover{
  border-color:rgba(34,211,238,.3);
  box-shadow:0 4px 16px rgba(34,211,238,.1);
}

.sponsor-block{
  background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(124,92,255,.1));
  border:1px solid rgba(124,92,255,.25);
  border-radius:var(--radius-xl);
  padding:2.5rem;
  margin:2.5rem 0;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(12px);
}

.sponsor-block::before{
  content:'';
  position:absolute;
  top:-30%;left:-10%;
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(34,211,238,.1) 0%,transparent 70%);
  pointer-events:none;
}

/* ─── Slider ─── */
.slider{position:relative}

.slider__viewport{
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--glass);
  border:1px solid var(--glass-border);
}

.slider__track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}

.slider__slide{min-width:100%;text-align:center;padding:1.5rem}

.slider__slide img{
  max-height:500px;
  margin:0 auto;
  border-radius:var(--radius);
  border:1px solid var(--glass-border);
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}

.slider__nav{
  display:flex;justify-content:center;align-items:center;
  gap:1.25rem;margin-top:1.5rem;
}

.slider__arrow{
  background:var(--glass);
  border:1px solid var(--glass-border);
  color:var(--text);
  width:44px;height:44px;
  border-radius:50%;
  font-size:1.3rem;
  cursor:pointer;
  transition:all .25s ease;
  backdrop-filter:blur(8px);
}

.slider__arrow:hover{
  background:var(--gradient-brand);
  color:var(--bg);
  border-color:transparent;
  box-shadow:0 4px 20px rgba(34,211,238,.3);
}

.slider__counter{
  font-family:var(--font-display);
  font-size:.85rem;font-weight:600;
  color:var(--muted);
  letter-spacing:.1em;
}

/* ─── Payment & Social ─── */
.payments{display:flex;gap:.65rem;flex-wrap:wrap;margin:1.15rem 0}

.pay-icon{
  padding:.45rem .9rem;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:8px;
  font-size:.78rem;font-weight:600;
  color:var(--muted);
  letter-spacing:.03em;
}

.social{display:flex;gap:.75rem}

.social a{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:50%;
  color:var(--text);
  font-size:1rem;
  transition:all .3s ease;
  backdrop-filter:blur(8px);
}

.social a:hover{
  background:var(--gradient-brand);
  color:var(--bg);
  border-color:transparent;
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(34,211,238,.3);
}

/* ─── Footer ─── */
.footer{
  background:linear-gradient(180deg,rgba(26,35,51,.8) 0%,var(--bg) 100%);
  border-top:1px solid var(--glass-border);
  padding:4rem 0 2rem;
  margin-top:3rem;
  position:relative;
}

.footer::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:1px;
  background:var(--gradient-brand);
  opacity:.3;
}

.footer__grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:2.5rem;
  margin-bottom:2.5rem;
}

.footer__brand p{
  color:var(--muted);
  font-size:.88rem;
  margin:.85rem 0;
  line-height:1.7;
  max-width:340px;
}

.footer h4{
  font-family:var(--font-display);
  font-size:.88rem;font-weight:700;
  margin-bottom:1.15rem;
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.footer ul li{margin-bottom:.55rem}

.footer ul a{
  color:var(--muted);
  font-size:.86rem;
  transition:color .2s ease,padding-left .2s ease;
  display:inline-block;
}

.footer ul a:hover{
  color:var(--accent);
  padding-left:4px;
}

.footer__bottom{
  border-top:1px solid var(--glass-border);
  padding-top:1.75rem;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;
}

.footer__bottom p{color:var(--muted);font-size:.8rem}

.footer__legal{display:flex;gap:1.25rem;flex-wrap:wrap}

.footer__legal a{color:var(--muted);font-size:.8rem}

.footer__legal a:hover{color:var(--accent)}

/* ─── Cookie banner ─── */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:rgba(26,35,51,.85);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--glass-border);
  padding:1.15rem 1.5rem;
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -8px 40px rgba(0,0,0,.3);
}

.cookie-banner.is-visible{transform:translateY(0)}

.cookie-banner__inner{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.25rem;flex-wrap:wrap;
}

.cookie-banner p{
  font-size:.86rem;
  color:var(--muted);
  flex:1;min-width:220px;
  line-height:1.55;
}

.cookie-banner a{color:var(--accent);font-weight:600}

/* ─── AI Chat ─── */
.ai-chat{position:fixed;bottom:1.75rem;right:1.75rem;z-index:150}

.ai-chat__toggle{
  width:58px;height:58px;
  border-radius:50%;
  background:var(--gradient-brand);
  border:none;
  color:var(--bg);
  font-family:var(--font-display);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 6px 28px rgba(34,211,238,.4);
  transition:transform .3s ease,box-shadow .3s ease;
}

.ai-chat__toggle:hover{
  transform:scale(1.08);
  box-shadow:0 8px 36px rgba(124,92,255,.45);
}

.ai-chat__panel{
  display:none;
  position:absolute;bottom:76px;right:0;
  width:360px;max-height:440px;
  background:rgba(26,35,51,.9);
  backdrop-filter:blur(24px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  box-shadow:0 16px 60px rgba(0,0,0,.4),0 0 40px rgba(34,211,238,.08);
  flex-direction:column;
  overflow:hidden;
  animation:slideUp .35s ease;
}

.ai-chat__panel.is-open{display:flex}

@keyframes slideUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

.ai-chat__head{
  padding:1.1rem 1.25rem;
  background:rgba(11,18,32,.5);
  border-bottom:1px solid var(--glass-border);
  font-family:var(--font-display);
  font-weight:700;
  display:flex;justify-content:space-between;align-items:center;
}

.ai-chat__close{
  background:none;border:none;
  color:var(--muted);
  font-size:1.3rem;
  cursor:pointer;
  transition:color .2s;
}

.ai-chat__close:hover{color:var(--text)}

.ai-chat__messages{
  flex:1;overflow-y:auto;
  padding:1.15rem;
  display:flex;flex-direction:column;gap:.75rem;
  max-height:290px;
}

.ai-chat__msg{
  padding:.7rem 1rem;
  border-radius:14px;
  font-size:.86rem;
  line-height:1.5;
  max-width:85%;
  animation:fadeInUp .3s ease;
}

.ai-chat__msg--bot{
  background:rgba(255,255,255,.06);
  border:1px solid var(--glass-border);
  align-self:flex-start;
}

.ai-chat__msg--user{
  background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(124,92,255,.15));
  border:1px solid rgba(34,211,238,.2);
  align-self:flex-end;
}

.ai-chat__input{
  display:flex;gap:.6rem;
  padding:.85rem;
  border-top:1px solid var(--glass-border);
  background:rgba(11,18,32,.4);
}

.ai-chat__input input{
  flex:1;
  padding:.6rem .9rem;
  background:rgba(11,18,32,.6);
  border:1px solid var(--glass-border);
  border-radius:10px;
  color:var(--text);
  font-size:.86rem;
  transition:border-color .2s;
}

.ai-chat__input input:focus{
  outline:none;
  border-color:rgba(34,211,238,.4);
}

.ai-chat__input button{
  padding:.6rem .9rem;
  background:var(--gradient-brand);
  border:none;
  border-radius:10px;
  color:var(--bg);
  font-weight:700;
  cursor:pointer;
  font-size:.84rem;
  transition:box-shadow .2s;
}

.ai-chat__input button:hover{box-shadow:0 4px 16px rgba(34,211,238,.3)}

/* ─── Policy pages ─── */
.policy{
  max-width:780px;
  margin:0 auto;
  padding:4rem 1.5rem;
}

.policy h1{
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,2.6rem);
  font-weight:800;
  margin-bottom:.6rem;
  letter-spacing:-.03em;
}

.policy .updated{
  color:var(--muted);
  font-size:.85rem;
  margin-bottom:2.5rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--glass-border);
}

.policy h2{
  font-family:var(--font-display);
  font-size:1.2rem;font-weight:700;
  margin:2.25rem 0 .85rem;
  color:var(--light2);
  letter-spacing:-.01em;
}

.policy p,.policy li{
  color:var(--muted);
  margin-bottom:.85rem;
  font-size:.95rem;
  line-height:1.75;
}

.policy ul{padding-left:1.5rem;list-style:disc}

.policy a{color:var(--accent);font-weight:500}

/* ─── Google Play ─── */
.gplay{display:inline-block;line-height:0;transition:transform .3s ease,filter .3s ease}

.gplay:hover{transform:scale(1.04);filter:drop-shadow(0 8px 24px rgba(34,211,238,.25))}

.gplay img{height:54px;width:auto}

/* ─── Tags ─── */
.tags{display:flex;gap:.55rem;flex-wrap:wrap;margin:1.25rem 0}

.tag{
  padding:.4rem .95rem;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:50px;
  font-size:.78rem;font-weight:600;
  color:var(--muted);
  backdrop-filter:blur(6px);
  transition:all .25s ease;
}

.tag:hover{border-color:rgba(255,255,255,.15)}

.tag--hot{
  background:linear-gradient(135deg,rgba(34,211,238,.12),rgba(124,92,255,.12));
  border-color:rgba(34,211,238,.3);
  color:var(--accent);
}

/* ─── Animations ─── */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

.section .container>*{
  animation:fadeInUp .6s ease both;
}

.section .section__label{animation-delay:.05s}
.section .section__title{animation-delay:.1s}
.section .section__lead{animation-delay:.15s}

/* ─── Responsive ─── */
@media(max-width:1024px){
  .nav-toggle{display:flex}
  .header__cta{display:none}
  .nav{
    display:none;
    position:fixed;
    top:0;right:0;
    width:min(300px,86vw);
    height:100dvh;
    flex:none;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    padding:5rem 1.15rem 1.5rem;
    background:rgba(11,18,32,.98);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border-left:1px solid var(--glass-border);
    z-index:101;
    overflow-y:auto;
    gap:.25rem;
  }
  .nav.is-open{display:flex}
  .nav a{text-align:left;padding:.85rem 1rem;width:100%}
  .nav__cta-mobile{
    display:block;
    margin-top:.75rem;
    padding-top:.75rem;
    border-top:1px solid var(--glass-border);
  }
  .nav__cta-mobile .btn{width:100%}
  body.nav-open{overflow:hidden}

  .split--hero,
  .split--tech,
  .split--about,
  .split--demo,
  .split--projects,
  .split--reviews,
  .split--form{grid-template-columns:1fr;gap:2rem}

  .split--hero .split__media{order:-1}
  .hero__img{transform:none}
  .hero__img:hover{transform:scale(1.01)}

  .bento .card,
  .bento .card--wide{grid-column:span 6}

  .tech-stack .card:nth-child(2),
  .tech-stack .card:nth-child(3){transform:none}
  .projects-visual img:last-child{transform:none}
  .shot-rail{max-width:100%;margin-right:auto}

  .grid-3,.grid-4,.contacts-grid,.footer__grid,.blog-grid{grid-template-columns:1fr}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3 .card:nth-child(n){transform:none!important}
  .grid-3 .card:hover{transform:translateY(-4px)!important}
  .footer__grid{grid-template-columns:1fr 1fr}
  .tabs__nav{width:100%;border-radius:var(--radius-lg)}
}

@media(min-width:481px){
  .contact-info__item{
    grid-template-columns:88px minmax(0,1fr);
    gap:.35rem .75rem;
    align-items:start;
  }
}

@media(max-width:640px){
  .section{padding:3.5rem 0}
  .header__bar{padding:.85rem 1rem;gap:.75rem}
  .logo{font-size:.95rem}
  .logo img{width:34px;height:34px}
  .map-wrap--footer iframe{height:220px}
  .contacts-page{padding-bottom:5.5rem}
  .contact-info .social{margin-bottom:.5rem}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .bento .card,
  .bento .card--wide{grid-column:span 12}
  .tech-stack{grid-template-columns:1fr}
  .projects-visual{grid-template-columns:1fr 1fr}
  .hero__actions{flex-direction:column}
  .hero__actions .btn{width:100%}
  .pipeline{flex-direction:column;align-items:center}
  .pipeline::before{display:none}
  .footer__grid{grid-template-columns:1fr}
  .ai-chat__panel{width:min(360px,calc(100vw - 2rem));right:0}
  .form{padding:1.75rem}
  .cookie-banner__inner{flex-direction:column;align-items:stretch}
  .cookie-banner .btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}