/* =========================================================
   1) TOKENS / VARIABLES
========================================================= */
:root {
  --bg: #05020a;
  --violet: #b000ff;
  --pink: #ff3fd4;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);

  --glass: rgba(255,255,255,.07);
  --glass2: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.14);

  --radius: 24px;
  --radius-sm: 18px;
  --pill: 999px;

  --shadow-soft: 0 18px 60px rgba(0,0,0,.28);
  --shadow-glow: 0 0 70px rgba(176,0,255,.28);

  --space: 96px;
  --gap: 28px;

  --container: min(1200px, 92%);
}

/* =========================================================
   2) BASE / RESET
========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; scroll-behavior: smooth;}

body {
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color: var(--text);
  line-height: 1.25;
  overflow-x: hidden;
    background:  rgba(0, 0, 0, 0.938);
   

  /* MONOLITHIC BACKGROUND (no harsh lines) */
  
}.bg-glow {
  position: fixed;
  z-index: -1;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(95px);
  opacity: 0.52;
  pointer-events: none;
}

/* мягкий розово-фиолетовый слева сверху */
.bg-glow--top-left {
  top: -160px;
  left: -130px;
  background: radial-gradient(circle, rgba(255,63,212,0.95), rgba(255,63,212,0.0) 62%);
}

/* насыщенный фиолетовый справа сверху */
.bg-glow--top-right {
  top: -170px;
  right: -170px;
  background: radial-gradient(circle, rgba(176,0,255,0.95), rgba(176,0,255,0.0) 62%);
}

/* центральный перелив (violet -> pink) */
.bg-glow--center {
  top: 46%;
  left: 54%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(176,0,255,0.75), rgba(255,63,212,0.0) 65%);
}

/* нижний — тёмный фиолетовый (без желтизны) */
.bg-glow--bottom {
  bottom: -220px;
  left: 12%;
  background: radial-gradient(circle, rgba(176,0,255,0.60), rgba(176,0,255,0.0) 70%);
}

/* Noise overlay to kill banding / “lines” */

/* =========================================================
   3) LAYOUT
========================================================= */
.container { width: var(--container); margin: 0 auto; }
.center { text-align: center; }
.narrow { max-width: 860px; margin: 0 auto; }

.section { padding: var(--space) 0; position: relative; }

/* Typography */
h1 {
  font-size: clamp(40px, 6vw, 70px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
p { opacity: .86; line-height: 1.65; }

.section-title { text-align: center; margin-bottom: 56px; }
.lead {  margin: 22px auto 20px; color: var(--muted); font-size: 16px; }
.sublead { margin: -36px auto 42px; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* =========================================================
   4) BUTTONS / LABELS
========================================================= */
.eyebrow {
  display: inline-block;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .70;
  margin-bottom: 14px;
}



.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 36px;
  border-radius: var(--pill);
  background: linear-gradient(135deg, var(--violet), var(--pink));
  color: #fff;
  text-decoration: none;
  font-weight: 700;

  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 40px rgba(176,0,255,.55);
  transition: transform .18s ease, filter .2s ease;
}
.cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cta:active { transform: translateY(0px); }

.cta.secondary {
  background: rgba(255,255,255,.06);
  box-shadow: none;
}

/* Label pills */
.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 650;
}
.label--soft {
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.72);
}
.label--hot {
  background: linear-gradient(135deg, rgba(176,0,255,.55), rgba(255,63,212,.45));
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 0 24px rgba(176,0,255,.30);
}

/* =========================================================
   5) SECTION: GLASS CARDS
========================================================= */
.glass-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}

.glass-card{
  padding: 36px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.glass-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(600px 260px at 30% 0%, rgba(176,0,255,.25), transparent 60%);
  opacity:.55;
  pointer-events:none;
}

.glass-card img{ width: 46px; margin-bottom: 18px; filter: drop-shadow(0 0 18px rgba(176,0,255,.25)); }
.glass-card h3{ font-size: 18px; margin-bottom: 8px; }
.glass-card p{ color: var(--muted); }

/* =========================================================
   6) SECTION: FEATURES (NEW)
========================================================= */
.section-head { text-align: center; }

.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.feature-card{
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 0 70px rgba(176,0,255,.16);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .2s ease, background .2s ease;
}

.feature-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 400px at 80% 10%, rgba(255,63,212,.18), transparent 65%),
    radial-gradient(700px 360px at 10% 90%, rgba(176,0,255,.18), transparent 62%);
  opacity:.65;
  pointer-events:none;
}

.feature-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.07);
}

.feature-card--hot{
  background: linear-gradient(180deg, rgba(176,0,255,.22), rgba(255,255,255,.05));
  box-shadow: 0 0 80px rgba(176,0,255,.22);
}

.feature-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.feature-icon{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(176,0,255,.22), rgba(255,63,212,.12));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 35px rgba(176,0,255,.18);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.feature-icon img{
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(176,0,255,.28));
}

.feature-card h3{ font-size: 18px; margin-bottom: 8px; position: relative; z-index: 1; }
.feature-card p{  position: relative; z-index: 1; }

/* =========================================================
   7) SECTION: FLOW
========================================================= */
.flow{
  max-width: 820px;
  margin: 0 auto;
  display:grid;
  gap: 18px;
}

.flow-step{
  padding: 16px 22px;
  border-radius: 999px;
  text-align:center;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(176,0,255,.22), transparent 65%),
    radial-gradient(560px 220px at 90% 100%, rgba(255,63,212,.16), transparent 60%),
    rgba(255,255,255,.05);
  backdrop-filter: blur(14px) saturate(140%);
}

/* =========================================================
   8) SECTION: SPLIT VISUAL
========================================================= */
.split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items:center;
}

.visual img{
  width:100%;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 80px rgba(176,0,255,.30);
  background: rgba(255,255,255,.03);
}

/* =========================================================
   9) SECTION: CONCEPT
========================================================= */
.concept-grid{
  margin-top: 34px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.concept-item{
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px) saturate(130%);
  color: rgba(255,255,255,.78);
}

/* =========================================================
   10) SECTION: EXPERIENCE CARDS
========================================================= */
.experience-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.exp-card{
  padding: 40px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(176,0,255,.20), rgba(255,255,255,.05));
  box-shadow: 0 0 80px rgba(176,0,255,.24);
}
.exp-card.highlight{
  background: linear-gradient(135deg, rgba(176,0,255,.92), rgba(255,63,212,.72));
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 0 90px rgba(176,0,255,.34);
}
.exp-card span{
  font-weight: 800;
  opacity:.7;
  display:block;
  margin-bottom: 10px;
}

/* =========================================================
   11) SECTION: GALLERY (NEW)
========================================================= */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.gallery-item{
  grid-column: span 4;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 0 70px rgba(176,0,255,.16);
  position: relative;
  transform: translateZ(0);
}

.gallery-item img{
  width:100%;
  height: 100%;
  display:block;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .25s ease, filter .25s ease;
  filter: saturate(1.05) contrast(1.02);
}

.gallery-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 260px at 20% 0%, rgba(176,0,255,.20), transparent 60%),
    radial-gradient(520px 240px at 90% 100%, rgba(255,63,212,.14), transparent 60%);
  opacity:.65;
  pointer-events:none;
}

.gallery-item:hover img{
  transform: scale(1.06);
  filter: saturate(1.12) contrast(1.05);
}

.gallery-item.tall{ grid-column: span 4; }
.gallery-item.tall img{ aspect-ratio: 4 / 5; }
.gallery-item.wide{ grid-column: span 8; }
.gallery-item.wide img{ aspect-ratio: 8 / 3; }

/* =========================================================
   12) RESPONSIVE
========================================================= */
@media (max-width: 1024px){
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .gallery-item { grid-column: span 6; }
  .gallery-item.wide { grid-column: span 12; }
}

@media (max-width: 620px){
  :root { --space: 78px; }

  .section-title { margin-bottom: 42px; }
  .glass-grid { gap: 18px; }
  .feature-grid { grid-template-columns: 1fr; }
  .gallery-grid { gap: 12px; }
  .gallery-item { grid-column: span 12; }
  .gallery-item.tall img,
  .gallery-item.wide img { aspect-ratio: 4 / 3; }
}
#hero {
  padding-block: 50px ;
}



/* partners */
  .partners-sec {
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    border-top: 2px solid var(--violet);
    border-bottom: 2px solid var(--violet);
  }
  .partners-sec > container {
    display: flex;
    flex-direction: column;
  }
  h2 {
    font-size: 40px;
  }
  .partnershead {
    margin-bottom: 100px;
    h2 {
      color: var(--textColor1);
      text-align: center;
    }
    p {
      color: var(--textColor1);
      text-align: center;
      text-wrap: balance;
    }
  }
  .partnersfon {
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
    object-fit: cover;
    object-position: center;
    z-index: -1;
    filter: blur(5px);
    opacity: 0.2;
  }

  .logosWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    && a {
      transition: 0.2s all linear;
    }
    && a:hover {
      transform: scale(105%);
    }
  }

  @media (max-width: 800px) {
    .partnershead {
      margin-bottom: 30px;
    }
    .logosWrap {
      flex-direction: column;
      gap: 20px;
      img {
        width: 200px;
      }
    }
  }

.left a {
  color: #b000ff;
}
.left a:hover {
  color: #ff00f2;
}
/*   SCROLLBAR — AMIGURUMIS NEON   */
::-webkit-scrollbar {
  width: 0.4em;
}

::-webkit-scrollbar-track {
  background-color: rgba(255,255,255,.04);
  border-radius: 100vw;
  margin: 10px 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

::-webkit-scrollbar-thumb {
  border-radius: 100vw;
  background: linear-gradient(180deg, #b000ff, #ff3fd4);
  box-shadow:
    0 0 14px rgba(176,0,255,.28),
    0 0 10px rgba(255,63,212,.16);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #c018ff, #ff5cde);
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #ffffff, #b000ff);
}