/* ════════════════════════════════════════════════════════════════════════
   Cikado-io — общий подвал для демо-проектов портфолио
   ────────────────────────────────────────────────────────────────────────
   Самодостаточный файл: подключает Poppins, изолирует подвал собственным
   reset'ом (scoped под .freymi-portfolio-footer), поэтому выглядит идентично
   подвалу на главной странице Cikado-io независимо от стилей конкретного демо.

   Источник правды: styles/footer.css на главной. При изменениях — синхронить.
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700;1,800&display=swap');

/* ── Scoped reset: нейтрализуем влияние стилей демо (Tailwind preflight и пр.) ── */
.freymi-portfolio-footer,
.freymi-portfolio-footer *,
.freymi-portfolio-footer *::before,
.freymi-portfolio-footer *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    letter-spacing: normal;
    text-transform: none;
}
.freymi-portfolio-footer a { text-decoration: none; color: inherit; }
.freymi-portfolio-footer img { display: block; max-width: 100%; }
.freymi-portfolio-footer ul,
.freymi-portfolio-footer li { list-style: none; }
.freymi-portfolio-footer button { font: inherit; }

/* ── Контейнер подвала (= footer.site-footer на главной) ── */
.freymi-portfolio-footer {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    padding: 48px 16px 72px;
    color: #1b1b1b;
    background:
        radial-gradient(circle at 16% 8%, rgba(216, 230, 227, 0.16), transparent 28%),
        linear-gradient(135deg, #101010 0%, #171717 48%, #242424 100%);
}
@media (min-width: 768px)  { .freymi-portfolio-footer { padding: 64px 28px 88px; } }
@media (min-width: 1024px) { .freymi-portfolio-footer { padding: 72px 28px 100px; } }

/* ── Карточка внутри тёмного фона ── */
.freymi-portfolio-footer .footer-shell {
    width: 100%;
    padding: 56px 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 34px;
    background:
        radial-gradient(circle at 78% 74%, rgba(216, 230, 227, 0.18), transparent 30%),
        #f4f4f1;
    box-shadow: 0 34px 120px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
@media (min-width: 768px)  { .freymi-portfolio-footer .footer-shell { padding: 64px 56px; } }
@media (min-width: 1024px) { .freymi-portfolio-footer .footer-shell { padding: 72px; } }

/* ── Верхняя зона: CTA + ссылки ── */
.freymi-portfolio-footer .footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}
@media (min-width: 1024px) {
    .freymi-portfolio-footer .footer-top {
        grid-template-columns: minmax(360px, 1.15fr) minmax(480px, 1fr);
        gap: 76px;
    }
}

.freymi-portfolio-footer .footer-logo {
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

.freymi-portfolio-footer .logo-img--footer {
    height: clamp(34px, 3.6vw, 48px);
    width: auto;
}

.freymi-portfolio-footer .footer-kicker {
    margin-top: 40px;
    color: #626262;
    font-size: 14px;
    font-weight: 600;
}

.freymi-portfolio-footer .footer-cta h2 {
    max-width: 640px;
    margin-top: 16px;
    color: #151515;
    font-size: clamp(36px, 5vw, 78px);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: 0;
}

/* ── Email-форма ── */
.freymi-portfolio-footer .footer-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    max-width: 560px;
    margin-top: 32px;
    padding: 8px;
    border: 1px solid #e3e3df;
    border-radius: 100px;
    background: white;
}

.freymi-portfolio-footer .footer-form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    border: none;
    outline: none;
    padding: 0 20px;
    border-radius: 100px;
    background: transparent;
    color: #151515;
    font-size: 15px;
    font-weight: 500;
}

.freymi-portfolio-footer .footer-form input::placeholder { color: #9a9a9a; }

.freymi-portfolio-footer .footer-form button {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    height: 52px;
    border: none;
    border-radius: 100px;
    padding: 0 26px;
    background: #151515;
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin-top: 0;
    box-shadow: 0 8px 24px rgba(27, 27, 27, .16);
    transition: background 220ms ease, color 220ms ease;
}

.freymi-portfolio-footer .footer-form button:hover { background: #2a2a2a; color: white; }

.freymi-portfolio-footer .footer-note {
    max-width: 560px;
    margin-top: 14px;
    color: #a0a09b;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
}

/* ── Колонки ссылок ── */
.freymi-portfolio-footer .footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
    padding-top: 0;
}
@media (min-width: 1024px) {
    .freymi-portfolio-footer .footer-links { padding-top: 64px; gap: 48px; }
}

.freymi-portfolio-footer .footer-column {
    display: grid;
    gap: 18px;
    align-content: start;
}

.freymi-portfolio-footer .footer-column p {
    color: #151515;
    font-size: 14px;
    font-weight: 800;
}

.freymi-portfolio-footer .footer-column a {
    width: fit-content;
    color: #525252;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    transition: color 200ms ease;
}

.freymi-portfolio-footer .footer-column a:hover,
.freymi-portfolio-footer .footer-column .footer-accent-link { color: #151515; }

/* ── Нижняя зона: big brand + meta ── */
.freymi-portfolio-footer .footer-bottom { margin-top: 64px; }
@media (max-width: 767px) { .freymi-portfolio-footer .footer-bottom { margin-top: 40px; } }

.freymi-portfolio-footer .footer-brand {
    display: block;
    width: 100%;
    line-height: 0;
}

.freymi-portfolio-footer .footer-brand-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    opacity: 1;
    mix-blend-mode: normal;
    transform: translateX(-0.25%);
    transform-origin: left center;
}

.freymi-portfolio-footer .footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(21, 21, 21, 0.10);
}

.freymi-portfolio-footer .footer-meta span,
.freymi-portfolio-footer .footer-meta a {
    color: #686868;
    font-size: 13.5px;
    font-weight: 600;
}

.freymi-portfolio-footer .footer-meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 100px;
    background: #151515;
    color: white;
    transition: background 220ms ease;
}

.freymi-portfolio-footer .footer-meta a:hover { background: #2a2a2a; color: white; }

/* ── Mobile (<640px) ── */
@media (max-width: 640px) {
    .freymi-portfolio-footer .footer-shell { padding: 28px 22px; border-radius: 26px; }
    .freymi-portfolio-footer .logo-img--footer { height: clamp(32px, 10vw, 42px); }
    .freymi-portfolio-footer .footer-kicker { margin-top: 22px; font-size: 13px; }
    .freymi-portfolio-footer .footer-form { gap: 6px; padding: 6px; }
    .freymi-portfolio-footer .footer-form input,
    .freymi-portfolio-footer .footer-form button { height: 46px; font-size: 14px; }
    .freymi-portfolio-footer .footer-form input  { padding: 0 14px; }
    .freymi-portfolio-footer .footer-form button { flex: 0 0 106px; padding: 0 16px; }
    .freymi-portfolio-footer .footer-note { font-size: 12px; }
    .freymi-portfolio-footer .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
    .freymi-portfolio-footer .footer-column { gap: 6px; padding-top: 14px; border-top: 1px solid rgba(21, 21, 21, 0.10); }
    .freymi-portfolio-footer .footer-column:last-child {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
    }
    .freymi-portfolio-footer .footer-column p { grid-column: 1 / -1; margin-bottom: 2px; font-size: 13px; }
    .freymi-portfolio-footer .footer-column a { width: 100%; font-size: 12.5px; }
    .freymi-portfolio-footer .footer-brand-img { width: 112%; max-width: none; }
    .freymi-portfolio-footer .footer-meta { gap: 12px; flex-direction: column; align-items: flex-start; }
    .freymi-portfolio-footer .footer-meta a { align-self: stretch; justify-content: center; min-height: 42px; }
}

@media (max-width: 360px) {
    .freymi-portfolio-footer .footer-form button { flex-basis: 94px; padding: 0 12px; }
    .freymi-portfolio-footer .footer-brand-img { width: 118%; }
    .freymi-portfolio-footer .footer-column:last-child { grid-template-columns: 1fr; }
}