/* tanits.be v2 additions */

/* Hero eyebrow */
.hero-eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 1rem;
    opacity: 0.9;
}

/* Hero h1 second line */
.hero-h1-sub {
    display: block;
    font-size: 0.82em;
    font-weight: 700;
    margin-top: 0.2em;
}

/* Hero CTA buttons — equal width */
.hero-cta-grid {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.hero-cta-grid .edu-btn {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

.hero-cta-grid .banner-btn,
.hero-cta-grid .pricing-btn {
    display: contents;
}

@media (max-width: 575px) {
    .hero-cta-grid {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
}

/* Hero trust line */
.hero-trust-line {
    font-size: 0.92rem;
    color: var(--color-body);
    margin-top: 0.5rem;
    margin-bottom: 0;
    opacity: 0.85;
}

/* ============================================================
   HOW IT WORKS — PREMIUM STEP CARDS
   ============================================================ */

.how-it-works-row {
    position: relative;
}

.how-it-works-step {
    background: var(--color-white);
    border-radius: 5px;
    padding: 40px 24px 36px;
    position: relative;
    height: 100%;
    text-align: center;
    box-shadow: var(--shadow-darker);
    transition: transform 0.3s var(--anim-easing),
                box-shadow 0.3s ease;
}

.how-it-works-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.how-it-works-step .step-number {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(26, 182, 157, 0.15) 0%, rgba(132, 94, 247, 0.10) 100%);
    border: 1.5px solid rgba(26, 182, 157, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.4rem;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.how-it-works-step .step-number span {
    display: block;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--color-primary) !important;
    line-height: 1;
    text-align: center;
}

[data-theme="dark"] .how-it-works-step .step-number,
.dark-mode .how-it-works-step .step-number {
    background: linear-gradient(135deg, rgba(26, 182, 157, 0.22) 0%, rgba(132, 94, 247, 0.16) 100%);
    border-color: rgba(26, 182, 157, 0.35);
}

[data-theme="dark"] .how-it-works-step .step-number span,
.dark-mode .how-it-works-step .step-number span {
    color: #3fd9bf !important;
}

.how-it-works-step h4 {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.9rem;
    color: #181818;
}

.how-it-works-step p {
    font-size: 1.5rem;
    line-height: 1.4;
    color: #484848;
    margin-bottom: 0;
}

/* Language switcher – inline in header-right */
.header-lang {
    display: flex;
    align-items: center;
    margin-left: 0.85rem;
}

.lang-dropdown {
    position: relative;
}

.lang-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.25rem 0.25rem 0.35rem;
    line-height: 1;
    color: inherit;
}

.lang-dropdown-flag {
    font-size: 2.2rem;
    line-height: 1;
    display: block;
    transition: transform 0.18s ease;
}

.lang-dropdown-trigger:hover .lang-dropdown-flag {
    transform: scale(1.1);
}

.lang-dropdown-arrow {
    color: currentColor;
    opacity: 0.6;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    margin-top: 1px;
}

.lang-dropdown.is-open .lang-dropdown-arrow {
    transform: rotate(180deg);
}

.lang-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 36px rgba(0,0,0,0.14);
    list-style: none;
    margin: 0;
    padding: 0.65rem;
    min-width: auto;
    z-index: 9999;
    overflow: hidden;
}

.lang-dropdown.is-open .lang-dropdown-menu {
    display: block;
}

.lang-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 3.6rem;
    padding: 0;
    font-size: 0;
    font-weight: 700;
    color: #333;
    text-decoration: none !important;
    transition: background 0.15s;
    border-radius: 8px;
}

.lang-dropdown-item-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.35rem;
    line-height: 1;
    flex-shrink: 0;
}

.lang-dropdown-item:hover {
    background: #f4f6f8;
    color: #111;
}

.lang-dropdown-item--active {
    color: var(--color-primary);
    font-weight: 700;
}

/* Mobile language switcher */
.lang-mobile-item {
    font-size: 1rem;
    text-decoration: none !important;
    opacity: 0.6;
    color: inherit;
    font-weight: 500;
}

.lang-mobile-item.lang-mobile-item--active {
    opacity: 1;
    font-weight: 700;
}

/* color-shade for lead magnet backgrounds */
:root {
    --color-shade: #f0f4f5;
    --anim-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --anim-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] .color-shade-bg,
.dark-mode .color-shade-bg {
    --color-shade: #1c242f;
}

/* ============================================================
   HERO ANIMATED GRADIENT
   ============================================================ */

@keyframes heroGradientDrift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes heroOrb {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(40px, -30px) scale(1.08); }
    66%  { transform: translate(-25px, 20px) scale(0.95); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes heroOrbTwo {
    0%   { transform: translate(0, 0) scale(1); }
    40%  { transform: translate(-50px, 30px) scale(1.05); }
    80%  { transform: translate(30px, -40px) scale(0.92); }
    100% { transform: translate(0, 0) scale(1); }
}

.hero-banner.hero-style-13::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(26, 182, 157, 0.12) 0%, rgba(26, 182, 157, 0.04) 50%, transparent 70%);
    animation: heroOrb 14s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.hero-banner.hero-style-13::after {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -5%;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(132, 94, 247, 0.08) 0%, rgba(132, 94, 247, 0.02) 50%, transparent 70%);
    animation: heroOrbTwo 18s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.hero-banner.hero-style-13 .container {
    position: relative;
    z-index: 1;
}


/* ============================================================
   HERO TEXT ENTRANCE — REFINED
   ============================================================ */

@keyframes eyebrowReveal {
    0%   { opacity: 0; transform: translateY(12px); letter-spacing: 0.12em; }
    100% { opacity: 0.9; transform: translateY(0); letter-spacing: 0.08em; }
}

.hero-eyebrow {
    animation: eyebrowReveal 0.7s var(--anim-easing) 0.1s both;
}

/* ============================================================
   HERO THUMBNAIL FLOAT
   ============================================================ */

@keyframes floatY {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-14px); }
}

.banner-thumbnail .thumbnail {
    animation: floatY 6s ease-in-out infinite;
}


/* ============================================================
   PLATFORM COMPACT CARDS — GLASSMORPHISM
   ============================================================ */

.platform-card-compact {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(26, 182, 157, 0.14);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    transition: transform 0.35s var(--anim-easing),
                box-shadow 0.35s var(--anim-easing),
                border-color 0.3s ease,
                background 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
}

.platform-card-compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), #845ef7);
    border-radius: 16px 16px 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--anim-easing);
}

.platform-card-compact:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 52px rgba(26, 182, 157, 0.13), 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: rgba(26, 182, 157, 0.3);
    background: rgba(255, 255, 255, 0.9);
}

.platform-card-compact:hover::before {
    transform: scaleX(1);
}

.platform-card-compact .platform-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(26, 182, 157, 0.12) 0%, rgba(132, 94, 247, 0.08) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    font-size: 22px;
    color: var(--color-primary);
    transition: transform 0.3s var(--anim-spring), background 0.3s ease;
    flex-shrink: 0;
}

.platform-card-compact:hover .platform-card-icon {
    transform: scale(1.12) rotate(-3deg);
    background: linear-gradient(135deg, rgba(26, 182, 157, 0.2) 0%, rgba(132, 94, 247, 0.14) 100%);
}

.platform-card-compact h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

.platform-card-compact p {
    font-size: 0.95rem;
    color: #606060;
    line-height: 1.65;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.platform-card-compact .platform-card-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary);
    opacity: 0.8;
    transition: opacity 0.2s ease, gap 0.25s var(--anim-easing);
}

.platform-card-compact:hover .platform-card-arrow {
    opacity: 1;
    gap: 0.65rem;
}

[data-theme="dark"] .platform-card-compact,
.dark-mode .platform-card-compact {
    background: rgba(28, 36, 47, 0.8);
    border-color: rgba(26, 182, 157, 0.18);
}

[data-theme="dark"] .platform-card-compact:hover,
.dark-mode .platform-card-compact:hover {
    background: rgba(40, 50, 65, 0.95);
}

/* ============================================================
   CTA BUTTONS
   ============================================================ */

/* Fix: téma fehér szöveget ad sárga hover háttérre – olvashatatlan lenne */
.header-style-7.header-business .header-action li.header-btn a.edu-btn:hover,
.edu-categorie-area a.edu-btn:hover,
.testimonial-area-4 a.edu-btn:hover {
    color: var(--color-heading) !important;
}

/* ============================================================
   PROBLEM CARDS — equal height + button pinned to bottom
   ============================================================ */

.problem-cards-row {
    align-items: stretch;
}

.problem-card-col {
    display: flex;
}

.problem-card-col .categorie-grid.categorie-style-6 {
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.problem-card-col .categorie-grid.categorie-style-6 .icon {
    text-align: center;
}

.problem-card-col .categorie-grid.categorie-style-6 .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
}

.problem-card-col .categorie-grid.categorie-style-6 .content .title {
    text-align: center;
}

.problem-card-col .categorie-grid.categorie-style-6 .content p {
    flex-grow: 1;
    margin-bottom: 0;
    text-align: center;
}

.problem-card-btn {
    margin-top: 1.25rem;
    width: 100%;
}

.problem-card-btn .edu-btn {
    display: block;
    width: 100%;
    text-align: center;
}

.edu-btn.btn-secondary1 {
    transition: transform 0.25s var(--anim-spring),
                box-shadow 0.3s ease,
                border-color 0.2s ease;
}

.edu-btn.btn-secondary1:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   STATS SECTION — FIX COLORS ON TEAL BACKGROUND
   ============================================================ */

.counterup-area-6 .section-title .title {
    color: #fff !important;
}

.counterup-area-6 .section-title .post-title {
    color: rgba(255, 255, 255, 0.82) !important;
}

.counterup-area-6 .section-title .shape-line i::before {
    filter: brightness(0) invert(1);
}

.counterup-area-6 {
    padding: 60px 0 50px !important;
    margin: 0 !important;
}

.counterup-area-6 .edu-counterup.counterup-style-6 {
    transition: transform 0.3s var(--anim-easing);
}

.counterup-area-6 .edu-counterup.counterup-style-6:hover {
    transform: translateY(-4px);
}

.counterup-style-6 .count-number {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.counterup-style-6 .title {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* ============================================================
   ACCORDION FAQ — SMOOTH TRANSITION
   ============================================================ */

.accordion-button {
    transition: color 0.2s ease, background-color 0.2s ease;
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

.accordion-collapse {
    transition: height 0.35s var(--anim-easing) !important;
}

/* ============================================================
   SECTION ENTRIES — STAGGER ENHANCEMENT
   ============================================================ */

[data-sal="slide-up"] {
    transition-timing-function: var(--anim-easing) !important;
}

/* ============================================================
   UNIFIED CARD HOVER — modules (pricing-table), problems cards
   and how-it-works steps all lift the same way
   ============================================================ */

.pricing-table,
.categorie-grid.categorie-style-6 {
    transition: transform 0.3s var(--anim-easing),
                box-shadow 0.3s ease;
}

.pricing-table:hover,
.categorie-grid.categorie-style-6:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   LEAD MAGNET SECTION — SUBTLE PULSE ON CTA
   ============================================================ */

@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(26, 182, 157, 0.25); }
    50%       { box-shadow: 0 8px 24px rgba(26, 182, 157, 0.45); }
}

/* ============================================================
   RELATED LINKS SECTION
   ============================================================ */

.related-links a {
    transition: color 0.2s ease, opacity 0.2s ease;
    opacity: 0.8;
}

.related-links a:hover {
    opacity: 1;
    color: var(--color-primary);
}

/* ============================================================
   SITEMAP FOOTER SECTION — PREMIUM READABLE VERSION
   ============================================================ */

.sitemap-footer-section {
    padding: 64px 0 56px;
    background: #f4f7f6;
    border-top: 1px solid rgba(26, 182, 157, 0.12);
}

.sitemap-inner {
    position: relative;
}

.sitemap-group {
    padding: 0;
}

.sitemap-group-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(0,0,0,0.07);
}

.sitemap-group-dot { display: none; }

.sitemap-group-label {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2a2a2a;
}

.sitemap-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-group ul li {
    margin-bottom: 0.7rem;
}

.sitemap-group ul li a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none !important;
    transition: color 0.2s ease, gap 0.2s var(--anim-easing);
    line-height: 1.5;
}

.sitemap-group ul li a::before {
    content: '→';
    font-size: 0.85em;
    color: var(--color-primary);
    flex-shrink: 0;
    transition: transform 0.2s var(--anim-easing);
}

.sitemap-group--secondary ul li a::before {
    color: #845ef7;
}

.sitemap-group ul li a:hover {
    color: var(--color-primary);
    gap: 0.85rem;
}

.sitemap-group ul li a:hover::before {
    transform: translateX(3px);
}

[data-theme="dark"] .sitemap-footer-section,
.dark-mode .sitemap-footer-section {
    background: #0d1520;
    border-top-color: rgba(26, 182, 157, 0.15);
}

[data-theme="dark"] .sitemap-group-label,
.dark-mode .sitemap-group-label {
    color: #c0c0c0;
}

[data-theme="dark"] .sitemap-group ul li a,
.dark-mode .sitemap-group ul li a {
    color: rgba(255,255,255,0.85);
}

[data-theme="dark"] .sitemap-group-header,
.dark-mode .sitemap-group-header {
    border-bottom-color: rgba(255,255,255,0.08);
}

/* ============================================================
   PLATFORM SECTION — LIGHT BACKGROUND
   ============================================================ */

.platform-section-bg {
    background: #f4f8f7;
    position: relative;
    overflow: hidden;
}

.platform-section-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(26, 182, 157, 0.25), transparent);
    pointer-events: none;
}

.platform-section-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(26, 182, 157, 0.25), transparent);
    pointer-events: none;
}

/* Platform cards — centered, no top line */
.platform-card-compact {
    background: #fff;
    border: 1.5px solid rgba(26, 182, 157, 0.18);
    border-radius: 20px;
    padding: 2.5rem 2rem 2.25rem;
    transition: transform 0.35s var(--anim-easing),
                box-shadow 0.35s var(--anim-easing),
                border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    box-shadow: 0 2px 16px rgba(26, 182, 157, 0.06);
}

.platform-card-compact::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(26, 182, 157, 0.05) 0%, rgba(132, 94, 247, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: inherit;
}

.platform-card-compact:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 56px rgba(26, 182, 157, 0.16), 0 4px 16px rgba(0, 0, 0, 0.06);
    border-color: rgba(26, 182, 157, 0.45);
}

.platform-card-compact:hover::before {
    opacity: 1;
}

/* Module badge */
.platform-card-badge {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: rgba(26, 182, 157, 0.10);
    border-radius: 5px;
    padding: 0.3em 0.8em;
    margin-bottom: 1.4rem;
}

.platform-card-compact .platform-card-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(26, 182, 157, 0.15) 0%, rgba(132, 94, 247, 0.10) 100%);
    border: 1.5px solid rgba(26, 182, 157, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.4rem;
    font-size: 30px;
    color: var(--color-primary);
    transition: transform 0.3s var(--anim-spring), background 0.3s ease;
    flex-shrink: 0;
}

.platform-card-compact:hover .platform-card-icon {
    transform: scale(1.12) rotate(-5deg);
    background: linear-gradient(135deg, rgba(26, 182, 157, 0.28) 0%, rgba(132, 94, 247, 0.18) 100%);
}

.platform-card-compact h4 {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
    line-height: 1.2;
    color: #181818 !important;
}

.platform-card-compact p {
    font-size: 1.5rem;
    color: #3a3a3a !important;
    line-height: 1.4;
    margin-bottom: 1.4rem;
    flex-grow: 1;
}

.platform-card-compact .platform-card-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: gap 0.22s var(--anim-easing);
}

.platform-card-compact:hover .platform-card-arrow {
    gap: 0.7rem;
}

[data-theme="dark"] .platform-card-compact,
.dark-mode .platform-card-compact {
    background: #1c242f;
    border-color: rgba(26, 182, 157, 0.2);
}

[data-theme="dark"] .platform-card-compact h4,
.dark-mode .platform-card-compact h4 {
    color: #fff !important;
}

[data-theme="dark"] .platform-card-compact p,
.dark-mode .platform-card-compact p {
    color: rgba(255,255,255,0.70) !important;
}

[data-theme="dark"] .platform-card-compact,
.dark-mode .platform-card-compact {
    background: #1c242f;
    border-color: rgba(26, 182, 157, 0.18);
}

[data-theme="dark"] .platform-card-compact h4,
.dark-mode .platform-card-compact h4 {
    color: #fff !important;
}

[data-theme="dark"] .platform-card-compact p,
.dark-mode .platform-card-compact p {
    color: rgba(255,255,255,0.65) !important;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 991px) {
    .hero-banner.hero-style-13::before,
    .hero-banner.hero-style-13::after {
        width: 300px;
        height: 300px;
    }

    .banner-thumbnail .thumbnail {
        animation: none;
    }

    .platform-card-compact {
        padding: 1.5rem 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-banner.hero-style-13::before,
    .hero-banner.hero-style-13::after,
    .banner-thumbnail .thumbnail,
    .hero-eyebrow {
        animation: none;
    }

    .categorie-grid.categorie-style-6,
    .platform-card-compact,
    .edu-btn,
    .how-it-works-step,
    .pricing-table {
        transition: none;
    }
}

/* ===== Module pills (platform section) ===== */
.module-pill {
    display: inline-block;
    font-size: 1.1rem !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    border-radius: 999px;
    padding: 0.6em 1.3em;
    margin-bottom: 1.5rem;
    white-space: nowrap;
}

/* Core / required base module — solid teal */
.module-pill--core {
    color: var(--color-white);
    background: var(--color-primary);
    box-shadow: 0 4px 12px rgba(26, 182, 157, 0.30);
}

/* Optional add-on — soft tinted teal */
.module-pill--addon {
    color: var(--color-primary);
    background: rgba(26, 182, 157, 0.10);
}

[data-theme="dark"] .module-pill--addon,
.dark-mode .module-pill--addon {
    background: rgba(26, 182, 157, 0.16);
    color: #3fd9bf;
}

/* ===== Unified card icon (gradient box) =====
   ONE consistent icon style for ALL card icons across the whole site:
   - platform cards (.module-card-icon)
   - problems cards & every subpage feature card (.categorie-style-6 .icon)
   Overrides the theme's soft colored circle so the look is identical everywhere. */
.module-card-icon,
.categorie-grid.categorie-style-6 .icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(26, 182, 157, 0.15) 0%, rgba(132, 94, 247, 0.10) 100%);
    border: 1.5px solid rgba(26, 182, 157, 0.22);
    color: var(--color-primary);
    font-size: 30px;
    line-height: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Normalize glyph size (beats inline font-size on subpage <i> elements) */
.module-card-icon i,
.categorie-grid.categorie-style-6 .icon i {
    font-size: 30px !important;
    color: inherit;
}

/* Highlighted core module — slightly larger */
.essential-lms-card .module-card-icon,
.essential-lms-card .module-card-icon i {
    width: 84px;
    height: 84px;
    font-size: 36px !important;
}

/* Lift EVERY icon/number box identically on card hover */
.pricing-table:hover .module-card-icon,
.categorie-grid.categorie-style-6:hover .module-card-icon,
.categorie-grid.categorie-style-6:hover .icon,
.how-it-works-step:hover .step-number {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(26, 182, 157, 0.22);
}

/* Keep the gradient on hover (beat the theme's solid color-fill on subpage icons) */
.categorie-grid.categorie-style-6:hover .icon {
    background: linear-gradient(135deg, rgba(26, 182, 157, 0.15) 0%, rgba(132, 94, 247, 0.10) 100%);
    color: var(--color-primary);
}
[data-theme="dark"] .categorie-grid.categorie-style-6:hover .icon,
.dark-mode .categorie-grid.categorie-style-6:hover .icon {
    background: linear-gradient(135deg, rgba(26, 182, 157, 0.22) 0%, rgba(132, 94, 247, 0.16) 100%);
    color: #3fd9bf;
}

[data-theme="dark"] .module-card-icon,
[data-theme="dark"] .categorie-grid.categorie-style-6 .icon,
.dark-mode .module-card-icon,
.dark-mode .categorie-grid.categorie-style-6 .icon {
    background: linear-gradient(135deg, rgba(26, 182, 157, 0.22) 0%, rgba(132, 94, 247, 0.16) 100%);
    border-color: rgba(26, 182, 157, 0.35);
    color: #3fd9bf;
}

/* ============================================================
   SUBPAGE FEATURE CARDS (.feature-card-v2)
   Match the index problem-card reference exactly: vertical layout,
   centered content, gradient icon box on top, equal height in a row.
   The theme's default .categorie-style-6 is a left-aligned flex ROW,
   so we mirror what .problem-card-col does for the index cards.
   ============================================================ */
.categorie-grid.categorie-style-6.feature-card-v2 {
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

.categorie-grid.categorie-style-6.feature-card-v2 .content {
    width: 100%;
}

.categorie-grid.categorie-style-6.feature-card-v2 .content .title,
.categorie-grid.categorie-style-6.feature-card-v2 .content p {
    text-align: center;
}

/* Reusable feature checklist — clean, centered 2-column list (onboarding flow, audit reporting, …) */
.feature-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2.5rem;
}

.feature-checklist li {
    font-size: 1.08rem;
    font-weight: 500;
}

.feature-checklist li + li {
    margin-top: 0;
}

@media (max-width: 575px) {
    .feature-checklist {
        grid-template-columns: 1fr;
    }
}

/* ===== Platform card titles (Essentials / Flow / Engage / AI) — black ===== */
.platform-section-bg .pricing-table .pricing-header .title {
    color: var(--color-heading);
}
[data-theme="dark"] .platform-section-bg .pricing-table .pricing-header .title,
.dark-mode .platform-section-bg .pricing-table .pricing-header .title {
    color: var(--dark-color-heading);
}

/* ===== Homepage module block: no divider line between description and CTA =====
   Only the homepage variant drops the header border; the /platform page keeps it. */
.home-platform-modules .pricing-table .pricing-header {
    border-bottom: none !important;
}

/* ===== Module cards: equal height + CTA aligned to the bottom =====
   Cards match the tallest one in the row, and the CTA sits at the bottom of
   every card. Tighter padding (30px) matches the subpage feature cards instead
   of the airy default (50px top / 45px bottom). Applies on homepage and /platform. */
.platform-section-bg .pricing-table {
    height: 100%;
    padding: 30px 30px;
    display: flex;
    flex-direction: column;
}

.platform-section-bg .row > [class*="col-"] {
    display: flex;
}

.platform-section-bg .row > [class*="col-"] > .pricing-table {
    width: 100%;
}

.platform-section-bg .pricing-table .pricing-header {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.platform-section-bg .pricing-table .pricing-header p {
    margin-bottom: 0;
}

.platform-section-bg .pricing-table .pricing-body {
    margin-top: 1.2rem;
}

/* The last block in each card is the CTA wrapper; keep it at the bottom with a
   compact gap instead of stretching the description area. */
.platform-section-bg .pricing-table > div:last-child {
    margin-top: 1.25rem !important;
    text-align: center;
}

.platform-section-bg .col-lg-4 .pricing-table > div:last-child .edu-btn.btn-small {
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: center;
    padding-left: 1.35rem;
    padding-right: 1.35rem;
}

/* ===== Counter (stats) labels — larger, more readable ===== */
.counterup-area-6 .counterup-style-6 .title {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
}

/* ===== Product screenshot gallery =====
   The original grid rules (.edu-gallery flex-wrap, .p-gallery-grid-wrap widths) live in
   app.css but are scoped to .edu-gallery-area. The gallery partial does not always
   have that ancestor (e.g. platform, tudasbazis), so we re-apply the flex here without
   any height/object-fit override — those would crop screenshots and must not be added. */
.gallery-grid-wrap .edu-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.audit-gallery-section {
    margin-top: 1.5rem;
    margin-bottom: clamp(4rem, 7vw, 7.5rem);
}

.audit-gallery-section .gallery-grid-wrap {
    margin-top: 0 !important;
}

@media only screen and (max-width: 767px) {
    .audit-gallery-section {
        margin-bottom: 3.5rem;
    }
}