/* ============================
   PinCat Brand UI – Full CSS
   ============================ */

/* ====== Базовые переменные PinCat */
:root {
    /* Brand */
    --pc-accent: #2f7cff; /* PinCat Blue */
    --pc-accent-2: #00e5ff; /* PinCat Cyan */
    --pc-accent-sec: #6b5cff; /* Security Violet (вторичный) */

    /* Ink / text */
    --pc-ink: #0a1022;

    /* Glass */
    --pc-glass-light: rgba(255, 255, 255, .62);
    --pc-glass-dark: rgba(14, 18, 32, .55);

    /* Shadows */
    --pc-shadow-soft: 0 12px 34px rgba(15, 30, 90, .10);
    --pc-shadow-hover: 0 18px 42px rgba(47, 124, 255, .18);

    /* Borders */
    --pc-border-light: rgba(47, 124, 255, .18);
    --pc-border-dark: rgba(47, 124, 255, .14);
}

/* ====== Градиентный бренд-текст */
.brand-gradient {
    background: linear-gradient(135deg, var(--brand-from), var(--brand-to));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ====== Мягкая стеклянная карточка */
.glass {
    background: var(--pc-glass-light);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--pc-border-light);
    box-shadow: var(--pc-shadow-soft);
}

.dark .glass {
    background: var(--pc-glass-dark);
    border-color: var(--pc-border-dark);
}

/* ====== Лёгкий «подъём» при ховере */
.lift {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--pc-shadow-hover);
}

/* ====== Анимированный «блик» (cyber) */
.shine {
    position: relative;
    overflow: hidden;
}

.shine::after {
    content: "";
    position: absolute;
    inset: -120% -20% auto auto;
    width: 42%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .35), transparent);
    transform: rotate(18deg);
    transition: transform .6s ease, opacity .6s ease;
    opacity: 0;
}

.shine:hover::after {
    transform: translateX(-140%) rotate(18deg);
    opacity: 1;
}

/* ====== Фон: «gradient mesh» + зерно */
.mesh-bg {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 560px;
    z-index: -1;
    filter: blur(26px);
    background: radial-gradient(42% 50% at 12% 18%, rgba(47, 124, 255, .35) 0%, rgba(47, 124, 255, 0) 60%),
    radial-gradient(38% 48% at 82% 28%, rgba(0, 229, 255, .30) 0%, rgba(0, 229, 255, 0) 60%),
    radial-gradient(30% 42% at 52% 72%, rgba(107, 92, 255, .22) 0%, rgba(107, 92, 255, 0) 60%);
}

.grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 .08 0 0 0'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: .12;
    mix-blend-mode: overlay;
}

/* ====== Цифры-метрики */
.stat-num {
    letter-spacing: -.02em;
    line-height: 1;
    text-shadow: 0 8px 26px rgba(47, 124, 255, .22);
}

/* ====== Логотипы: серый -> цветной */
.logo-img {
    filter: grayscale(100%);
    opacity: .80;
    transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}

.logo-img:hover {
    filter: none;
    opacity: 1;
    transform: translateY(-2px);
}

/* ====== Чипсы-индустрий */
.chip {
    border: 1px solid rgba(47, 124, 255, .28);
    background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .62));
}

.dark .chip {
    background: linear-gradient(180deg, rgba(18, 22, 38, .78), rgba(18, 22, 38, .62));
    border-color: rgba(47, 124, 255, .22);
}

/* =========================
   READABILITY FIX (PinCat)
   ВСТАВЬ В САМЫЙ КОНЕЦ CSS
   ========================= */

/* 1) Базовый текст — без “серости” */
:root {
    --pc-text: #0b1020; /* почти чёрный */
    --pc-muted: rgba(11, 16, 32, .78);
    --pc-title: #070a14;
}

body {
    color: var(--pc-text) !important;
}

/* 2) Тёмная тема: ярче текст */
.dark body {
    color: rgba(255, 255, 255, .92) !important;
}

.dark :root {
    --pc-muted: rgba(255, 255, 255, .72);
}

/* 3) Любые тексты внутри glass — всегда читаемые */
.glass,
.glass * {
    color: var(--pc-text);
}

.dark .glass,
.dark .glass * {
    color: rgba(255, 255, 255, .92);
}

/* 4) Заголовки чётче */
h1, h2, h3, h4 {
    color: var(--pc-title);
    letter-spacing: -0.01em;
}

.dark h1, .dark h2, .dark h3, .dark h4 {
    color: rgba(255, 255, 255, .96);
}

/* 5) Убираем “убийц контраста” */
p, span, li, a, .nav-link {
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* 6) Мутный текст — контролируемо */
.text-muted, .muted, small {
    color: var(--pc-muted) !important;
}

/* 7) Если где-то случайно повесился brand-gradient на обычный текст */
.brand-gradient {
    -webkit-text-fill-color: transparent;
}

/* а вот если brand-gradient попал на контейнер (и текст стал прозрачным) — спасаем */
.brand-gradient * {
    -webkit-text-fill-color: initial;
    color: inherit;
}

/* =========================
   P TEXT VISIBILITY FIX
   ========================= */

/* Light: делаем p темнее и без прозрачности */
p {
    color: rgba(11, 16, 32, 0.92) !important; /* #0b1020 */
    opacity: 1 !important;
}

/* Если у тебя есть “prose” или “subtitle” классы — часто именно они делают серым */
.prose p,
.subtitle p,
.lead p,
.text-muted p {
    color: rgba(11, 16, 32, 0.88) !important;
    opacity: 1 !important;
}

/* Dark: p светлее */
.dark p {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* p внутри стеклянных карточек */
.glass p {
    color: rgba(11, 16, 32, 0.90) !important;
}

.dark .glass p {
    color: rgba(255, 255, 255, 0.90) !important;
}

/* =========================
   TEXT VISIBILITY FIX
   p + span
   ========================= */

/* LIGHT THEME */
p,
span {
    color: rgba(11, 16, 32, 0.92) !important; /* читаемый почти чёрный */
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* DARK THEME */
.dark p,
.dark span {
    color: rgba(255, 255, 255, 0.90) !important;
}

/* Внутри glass-карточек */
.glass p,
.glass span {
    color: rgba(11, 16, 32, 0.90) !important;
}

.dark .glass p,
.dark .glass span {
    color: rgba(255, 255, 255, 0.90) !important;
}

/* Если используется prose / typography */
.prose p,
.prose span {
    color: rgba(11, 16, 32, 0.92) !important;
}

.dark .prose p,
.dark .prose span {
    color: rgba(255, 255, 255, 0.90) !important;
}

/* =========================
   SAFETY: brand-gradient
   ========================= */

/* градиент — ТОЛЬКО для текста с этим классом */
.brand-gradient {
    -webkit-text-fill-color: transparent;
}

/* если brand-gradient случайно повесили на контейнер */
.brand-gradient p,
.brand-gradient span {
    -webkit-text-fill-color: initial !important;
    color: inherit !important;
}

/* ===== iOS Chips ===== */
.chip {
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;

    color: rgba(17, 24, 39, .85);
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(255, 255, 255, .55);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 6px 18px rgba(0, 0, 0, .06),
    inset 0 1px 0 rgba(255, 255, 255, .6);

    transition: transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    color .2s ease;
}

.chip:hover {
    transform: translateY(-2px);
    background: rgba(83, 153, 231, .12);
    color: rgba(83, 153, 231, 1);
    box-shadow: 0 10px 28px rgba(83, 153, 231, .18),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}

.chip:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(83, 153, 231, .14);
}