/* ==========================================================================
   ФАБРИКА КОНТЕНТА — Premium dark-luxury layer
   Грузится ПОСЛЕ styles.css. Превращает светлый шаблон в тёмный люкс.
   Направление: graphite + magenta→coral gradient + electric lime, glass, glow.
   ========================================================================== */

:root {
  /* Палитра (тёмный люкс) */
  --bg:            #0A0912;
  --bg-alt:        #0E0C18;
  --bg-dark:       #08070E;
  --bg-dark-card:  #14111F;
  --text:          #F5F3FA;
  --text-muted:    #A29EB5;
  --text-light:    #7E7A90;
  --text-on-dark:  #ECEAF3;
  --border:        rgba(255,255,255,0.10);
  --border-light:  rgba(255,255,255,0.06);

  --accent:        #FF2D8B;
  --accent-hover:  #FF4D9E;
  --accent-light:  rgba(255,45,139,0.14);
  --accent-glow:   rgba(255,45,139,0.30);
  --coral:         #FF6A3D;
  --lime:          #C8FF3E;

  --grad-hot:      linear-gradient(100deg, #FF2D8B 0%, #E11D74 44%, #FF6A3D 100%);
  --grad-line:     linear-gradient(90deg, transparent, rgba(255,45,139,.6), transparent);
  --display:       'Unbounded', 'Manrope', -apple-system, sans-serif;

  --radius:    18px;
  --radius-xl: 26px;
  --glass:     rgba(255,255,255,0.045);
  --glass-2:   rgba(255,255,255,0.07);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
}

/* --- База + атмосфера --- */
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
}
/* Радиальная подсветка фона (mesh) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 600px at 82% -8%, rgba(255,45,139,0.16), transparent 60%),
    radial-gradient(820px 560px at 8% 12%, rgba(255,106,61,0.10), transparent 58%),
    radial-gradient(700px 700px at 50% 108%, rgba(200,255,62,0.05), transparent 60%);
}
/* Зерно/grain поверх всего */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

/* Секции прозрачны (фон даёт body); чередование — лёгкие тонировки */
.section { background: transparent; }
.section--alt { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005)); }
.section--dark { background: var(--bg-dark); }

/* --- Типографика --- */
.hero h1,
.section-header h2,
.day1-prep__title,
.initiation__title,
.pricing__amount-inline,
.speaker__info h2,
.team__info h2,
.urgency h2,
.upsell h2 {
  font-family: var(--display);
  letter-spacing: -0.025em;
  color: var(--text);
}
.hero h1 {
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.04em;
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
  /* НИКАКИХ переносов внутри слов */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.section-header h2 { font-weight: 700; font-size: clamp(1.7rem, 1rem + 2.2vw, 2.7rem); }
.day1-prep__title, .initiation__title { font-weight: 700; }

.section-header h2, .speaker__info h2, .team__info h2 { color: var(--text); }
.section-subtitle { color: var(--text-muted) !important; }

/* Градиентный highlight */
.highlight, .initiation__word, .pricing__amount-inline {
  background: var(--grad-hot);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --- Кнопки --- */
.btn--primary {
  background-image: var(--grad-hot);
  background-color: #E11D74; border: none; color: #fff;
  box-shadow: 0 10px 30px rgba(255,45,139,0.34), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: filter .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--primary:hover { filter: brightness(1.07) saturate(1.06); transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(255,45,139,0.5), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn--outline { border: 1.5px solid rgba(255,255,255,0.22); color: var(--text); background: rgba(255,255,255,0.03); }
.btn--outline:hover { border-color: var(--accent); color: #fff; background: rgba(255,45,139,0.08); }
.btn--white { background: #fff; color: #0A0912; }

/* --- Теги секций --- */
.section-tag {
  background: rgba(255,45,139,0.12);
  color: #FF7AB8;
  border: 1px solid rgba(255,45,139,0.25);
}
.section--dark .section-tag { background: rgba(255,45,139,0.18); color: #FF8AC4; }

/* --- Header (glass) --- */
.header { background: rgba(10,9,18,0.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-light); }
.header__nav-link { color: var(--text-muted); }
.header__nav-link:hover { color: #fff; }

/* ========================================================================
   ОБЩИЙ glass-стиль для всех карточек
   ======================================================================== */
.glow-card,
.problem__card,
.program__card,
.roi__card,
.results__card,
.audience__card,
.expect__card,
.pricing__card,
.faq__item,
.venue__card,
.community__card,
.power__card,
.upsell__step,
.day1-prep__day,
.hero__meta-item,
.testimonials__card .testimonials__video {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.glow-card:hover,
.problem__card:hover,
.program__card:hover,
.roi__card:hover,
.results__card:hover,
.audience__card:hover,
.expect__card:hover,
.power__card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,45,139,0.45);
  box-shadow: 0 22px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,45,139,0.15), 0 0 40px rgba(255,45,139,0.12);
  background: var(--glass-2);
}

/* Заголовки/текст внутри карточек на тёмном */
.glow-card h3, .problem__card h3, .program__card h3, .roi__card h3, .roi__title,
.results__card h3, .audience__card h3, .expect__card h3, .power__card h3,
.pricing__card-title, .venue__info h3, .community__info h3, .upsell__step h4,
.day1-prep__day-num, .faq__question span { color: var(--text); }
.glow-card p, .problem__card li, .program__card li, .roi__text, .results__card p,
.audience__card p, .expect__card p, .power__card p, .community__info p,
.day1-prep__day-desc, .faq__answer p, .faq__answer li, .venue__info p,
.pricing__list li, .pricing__compare td { color: var(--text-muted); }
.problem__card ul, .program__card ul { color: var(--text-muted); }

/* --- Credentials (glass-полоса) --- */
.credentials__inner { background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-xl); backdrop-filter: blur(10px); }
.credentials__text strong { color: var(--text); }
.credentials__text span { color: var(--text-muted); }
.credentials__divider { background: var(--border); }
.credentials__badge-ah { color: var(--text); }

/* --- Trust bar --- */
.trust-bar__logo { color: var(--text-muted); border-color: var(--border); background: var(--glass); }
.trust-bar__lead, .trust-bar__milestone { color: var(--text); }
.trust-bar__caption { color: var(--text-muted); }

/* ========================================================================
   HERO
   ======================================================================== */
.hero { position: relative; overflow: hidden; }
.hero__grid { grid-template-columns: 1.12fr 0.88fr; align-items: center; }
.hero__grid > *, .hero__content, .hero__content > * { min-width: 0; }

/* Эпичный кикер над заголовком */
.hero__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .02em;
  color: #fff; margin-bottom: 18px;
  padding: 8px 16px 8px 12px; border-radius: 100px;
  background: linear-gradient(100deg, rgba(255,45,139,0.18), rgba(255,106,61,0.10));
  border: 1px solid rgba(255,45,139,0.35);
  box-shadow: 0 0 30px rgba(255,45,139,0.25);
}
.hero__kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); animation: kickerPulse 1.8s ease-in-out infinite; }
@keyframes kickerPulse { 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.5; transform:scale(.8) } }

.hero__badge { background: var(--glass-2); border: 1px solid var(--border); color: var(--text); backdrop-filter: blur(8px); }
.hero__badge-price { color: var(--lime); }
.hero__sub { color: var(--text-muted); }
.hero__sub strong { color: #fff; }
/* Ключевые метрики в подзаголовке — lime-акцент */
.hero__sub strong:nth-of-type(2),
.hero__sub strong:nth-of-type(3),
.hero__sub strong:nth-of-type(4) { color: var(--lime); }

.hero__meta-item { background: var(--glass); border: 1px solid var(--border); border-radius: 14px; }
.hero__meta-item--accent { background: linear-gradient(180deg, rgba(255,45,139,0.14), rgba(255,106,61,0.05)); border-color: rgba(255,45,139,0.30); }
.hero__meta-label { color: var(--text-light); }
.hero__meta-value { color: var(--text); }

.countdown { background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(8px); }
.countdown__label { color: var(--text-muted); }
.countdown__box { background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
.countdown__num { color: #fff; }
.countdown__unit { color: var(--text-light); }

/* Hero визуал (AI-конвейер вместо нейросети) */
.hero__art {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 40px 90px rgba(0,0,0,0.6), 0 0 60px rgba(255,45,139,0.18);
  animation: heroFloat 7s ease-in-out infinite;
  background: #0A0912;
}
.hero__art img, .hero__art-video { display: block; width: 100%; height: auto; }
/* мягкая виньетка по краям, чтобы влиться в фон */
.hero__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 80px 20px rgba(10,9,18,0.55);
  border-radius: 28px;
}
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Плавающие glass-чипы с метриками поверх визуала */
.hero__art-chip {
  position: absolute; z-index: 3;
  font-family: var(--display); font-weight: 600; font-size: 14px;
  color: #fff; padding: 10px 14px; border-radius: 14px;
  background: rgba(20,17,31,0.72); border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px); box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.hero__art-chip b { background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__art-chip--1 { top: 12%; left: -8%; animation: chipFloat 5.5s ease-in-out infinite; }
.hero__art-chip--2 { bottom: 16%; right: -6%; animation: chipFloat 6.5s ease-in-out infinite reverse; }
@keyframes chipFloat { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-12px) } }
@media (max-width: 768px) { .hero__art-chip { display: none; } }

/* ========================================================================
   NUMBERS / ROI — премиум-фикс + крупные градиентные числа
   ======================================================================== */
.roi__num {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1.04;
  display: inline-block; white-space: nowrap;
  padding: 0 .06em 0 0;            /* защита от клипа правого глифа */
  background: var(--grad-hot);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-box-decoration-break: clone;
}
.roi__card { padding: 34px 30px; }
.roi__card::before {
  content: ""; display: block; width: 44px; height: 3px; border-radius: 3px;
  background: var(--grad-hot); margin-bottom: 18px;
}
.roi__caption { color: var(--text-muted); }

/* ========================================================================
   PROBLEM — контраст «агентство (минус) vs фабрика (плюс/glow)»
   ======================================================================== */
.problem__card--negative { background: rgba(239,68,68,0.05); border-color: rgba(239,68,68,0.22); }
.problem__card--positive {
  background: linear-gradient(180deg, rgba(200,255,62,0.07), rgba(255,45,139,0.04));
  border-color: rgba(200,255,62,0.30);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 0 40px rgba(200,255,62,0.08);
}
.problem__bottom { color: var(--text); }

/* ========================================================================
   PROGRAM (день-карта)
   ======================================================================== */
.day1-prep__card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); backdrop-filter: blur(12px);
}
.day1-prep__badge { background: rgba(255,45,139,0.16); color: #FF8AC4; border: 1px solid rgba(255,45,139,0.3); }
.day1-prep__lead { color: var(--text-muted); }
.day1-prep__day { background: rgba(255,255,255,0.04); }
.day1-prep__day--main { border-color: rgba(255,45,139,0.35); background: linear-gradient(180deg, rgba(255,45,139,0.08), rgba(255,255,255,0.02)); }
.day1-prep__day-date { color: var(--lime); }
.day1-prep__guarantee { background: rgba(200,255,62,0.06); border: 1px solid rgba(200,255,62,0.22); }
.day1-prep__guarantee-text, .day1-prep__guarantee-text b { color: var(--text); }
.program__card-num { background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--display); font-weight: 800; }

/* ========================================================================
   PRICING
   ======================================================================== */
.pricing__card--includes { border-color: rgba(255,45,139,0.4); box-shadow: 0 22px 55px rgba(0,0,0,0.5), 0 0 50px rgba(255,45,139,0.12); }
.pricing__check { color: var(--lime); }
.pricing__compare th { color: var(--text); border-color: var(--border); }
.pricing__compare td { border-color: var(--border-light); }
.pricing__compare-highlight td { background: rgba(255,45,139,0.12); color: #fff !important; }
.pricing__compare-highlight strong { color: #fff; }
.pricing__compare-note { color: var(--text-light); }
.pricing__guarantee-box { background: rgba(200,255,62,0.06); border: 1px solid rgba(200,255,62,0.22); color: var(--text); }
.pricing__guarantee { color: var(--text-muted); }
.pricing__list--neutral li, .pricing__list--payment li { color: var(--text-muted); }
.pricing__list--payment strong, .pricing__guarantee-box strong { color: var(--text); }

/* ========================================================================
   FAQ
   ======================================================================== */
.faq__item { padding: 0 4px; }
.faq__question { color: var(--text); }
.faq__chevron { color: var(--accent); }
.faq__answer a { color: var(--accent); }

/* ========================================================================
   FORMATS / AUDIENCE иконки
   ======================================================================== */
.audience__emoji svg, .formats svg { filter: drop-shadow(0 0 10px rgba(255,45,139,0.4)); }

/* ========================================================================
   SPEAKER / TEAM
   ======================================================================== */
.speaker__title, .team__member-role { color: var(--accent); }
.speaker__stat, .speaker__bio p, .team__member p, .team__together { color: var(--text-muted); }
.speaker__stat strong { color: var(--text); }
.speaker__photo, .team__photo { box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 50px rgba(255,45,139,0.12); border-radius: 20px; }
.team__member h3 { color: var(--text); }
.award { background: var(--glass); border: 1px solid var(--border); }
.award__text h4 { color: var(--text); }
.award__text p { color: var(--text-muted); }

/* ========================================================================
   INITIATION
   ======================================================================== */
.initiation { background: var(--bg-dark); }
.initiation__lead, .initiation__manifest { color: var(--text-muted); }
.initiation__manifest b { color: #fff; }
.initiation__side { background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius); }
.initiation__side--after { border-color: rgba(200,255,62,0.3); box-shadow: 0 0 50px rgba(200,255,62,0.08); }
.initiation__list span { color: var(--text); }
.initiation__list em { color: var(--text-light); }
.initiation__list--glow em { color: var(--lime); }
.initiation__core { background-image: var(--grad-hot); box-shadow: 0 0 50px rgba(255,45,139,0.55); }
.initiation__badge { background: rgba(255,45,139,0.16); color: #FF8AC4; border: 1px solid rgba(255,45,139,0.3); }

/* ========================================================================
   VENUE / COMMUNITY / URGENCY / FOOTER
   ======================================================================== */
.venue__detail { color: var(--text-muted); }
.venue__detail b { color: var(--text); }
.urgency__text { color: var(--text-muted); }
.community__card:hover { border-color: rgba(255,45,139,0.45); }
.community__join { color: var(--accent); }
.community__meta-line { color: var(--text-muted); }
.footer { background: var(--bg-dark); border-top: 1px solid var(--border-light); }
.footer__links a { color: var(--text-muted); }
.footer__links a:hover { color: #fff; }
.footer__text { color: var(--text-light); }

/* ========================================================================
   STICKY CTA — стекло + ЦЕНА
   ======================================================================== */
.sticky-cta { background: rgba(14,12,24,0.82); border: 1px solid var(--border); backdrop-filter: blur(16px); box-shadow: 0 -10px 40px rgba(0,0,0,0.5); }
.sticky-cta__price { color: var(--lime); font-weight: 800; }
.sticky-cta__meta { color: var(--text-muted); }

/* ========================================================================
   Responsive
   ======================================================================== */
@media (max-width: 768px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(1.7rem, 5.5vw, 2.4rem); }
  /* Видео-фабрика — показываем и на мобильном (это центральный wow) */
  .hero__visual { display: block !important; }
  .hero__art { max-width: 400px; margin: 6px auto 0; animation: none; }
}

/* ==========================================================================
   ФИКСЫ контраста/багов поверх базового CSS (выше специфичность)
   ========================================================================== */

/* FIX 1 — крупные градиентные числа (база делала 36px-бейдж → клип) */
.roi__num {
  display: inline-block !important;
  width: auto !important; height: auto !important;
  border-radius: 0 !important;
  background: var(--grad-hot) !important;
  font-family: var(--display) !important; font-weight: 800 !important;
  font-size: clamp(2.4rem, 1.4rem + 2.4vw, 3.4rem) !important;
  line-height: 1.02 !important; margin: 0 0 14px !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  white-space: nowrap; padding: 0 .08em 0 0;
}

/* FIX 2 — карточки прайса были белыми (.pricing__grid .pricing__card, спец. 0,2,0) */
.pricing__grid .pricing__card {
  background: var(--glass) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,0.42) !important;
  backdrop-filter: blur(10px);
}
.pricing__grid .pricing__card--includes {
  border-color: rgba(255,45,139,0.40) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,0.5), 0 0 50px rgba(255,45,139,0.12) !important;
}
.pricing__card-title { color: var(--text) !important; }
.pricing__list li { color: var(--text-muted) !important; }
.pricing__list--includes li, .pricing__list li b { color: var(--text) !important; }
.pricing__compare th { color: var(--text) !important; }
.pricing__compare td { color: var(--text-muted) !important; }

/* FIX 3 — hero meta: чище, value белым жирным */
.hero__meta-item { padding: 14px 16px; }
.hero__meta-label { color: var(--text-light) !important; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.hero__meta-value { color: #fff !important; font-weight: 700; }

/* FIX 4 — бейдж Astana Hub (был «пустым») */
.credentials__badge-ah {
  background: rgba(200,255,62,0.08); border: 1px solid rgba(200,255,62,0.30);
  border-radius: 100px; padding: 9px 16px; display: inline-flex; align-items: center; gap: 8px;
}
.credentials__badge-ah span { color: var(--text) !important; font-weight: 600; white-space: nowrap; }

/* FIX 5 — карточки участников команды: стекло + контраст */
.team__member {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 22px; backdrop-filter: blur(8px);
}
.team__member + .team__member { margin-top: 16px; }
.team__member h3 { color: #fff !important; }
.team__member-role { color: var(--lime) !important; font-weight: 700; }
.team__member p { color: var(--text-muted) !important; }

/* ==========================================================================
   ГАЛЕРЕЯ КРЕАТИВОВ (раздел «Форматы») — реальное портфолио
   ========================================================================== */
.creo-gallery {
  columns: 3; column-gap: 18px; margin-top: 8px;
}
@media (max-width: 900px) { .creo-gallery { columns: 2; } }
@media (max-width: 520px) { .creo-gallery { columns: 2; column-gap: 12px; } }

.creo-shot {
  position: relative; break-inside: avoid; margin: 0 0 18px;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.creo-shot img { display: block; width: 100%; height: auto; transition: transform .5s var(--ease); }
.creo-shot figcaption {
  position: absolute; inset: auto 0 0 0; padding: 30px 14px 14px;
  background: linear-gradient(0deg, rgba(8,7,14,0.82), transparent);
  display: flex;
}
.creo-tag {
  font-family: var(--display); font-weight: 600; font-size: 12.5px; color: #fff;
  background: rgba(255,45,139,0.85); padding: 6px 12px; border-radius: 100px;
  backdrop-filter: blur(4px); box-shadow: 0 4px 14px rgba(255,45,139,0.4);
}
.creo-shot:hover {
  transform: translateY(-4px); border-color: rgba(255,45,139,0.5);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 50px rgba(255,45,139,0.18);
}
.creo-shot:hover img { transform: scale(1.05); }

.creo-note {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 26px auto 0; max-width: 720px; text-align: center;
  font-size: 15px; color: var(--text-muted);
}
.creo-note__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); animation: kickerPulse 1.8s ease-in-out infinite; }

.creo-cats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px;
}
@media (max-width: 900px) { .creo-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .creo-cats { grid-template-columns: 1fr; } }
.creo-cat {
  background: var(--glass); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 20px; backdrop-filter: blur(8px);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.creo-cat:hover { transform: translateY(-4px); border-color: rgba(255,45,139,0.4); box-shadow: 0 18px 44px rgba(0,0,0,0.45); }
.creo-cat__n {
  display: block; font-family: var(--display); font-weight: 800; font-size: 2.4rem; line-height: 1;
  background: var(--grad-hot); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; margin-bottom: 10px;
}
.creo-cat__t { display: block; font-weight: 700; color: var(--text); font-size: 17px; margin-bottom: 8px; }
.creo-cat__d { display: block; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }