/* ==========================================================================
   MOTS-c 20mg — theme + unique sections (loads product_page_base.css)
   Warm "cellular energy" — amber/coral/violet on indigo. Unique: energy-core
   hero, what-is, 3-mechanism cards, effects. Fact strip uses shared .pdp-facts.
   ========================================================================== */

.pdp-page.theme-mots {
    --pdp-bg: #0b0716;
    --pdp-bg2: #130a24;
    --pdp-ink: #f5eeff;
    --pdp-muted: #b0a0d0;
    --pdp-accent: #ffb340;
    --pdp-accent2: #ff5d7a;
    --pdp-accent-ink: #2a0f18;
    --pdp-line: rgba(255,255,255,.08);
    --pdp-card: rgba(255,255,255,.04);
    --pdp-glass: rgba(19,10,36,.6);
    --pdp-alt-mid: #150b28;
    --m-violet: #8b6cff;
    --pdp-hero-bg:
        radial-gradient(100% 80% at 50% 0%, rgba(139,108,255,.18), transparent 55%),
        radial-gradient(80% 70% at 80% 100%, rgba(255,93,122,.12), transparent 55%),
        linear-gradient(180deg, var(--pdp-bg2), var(--pdp-bg));
    --pdp-cta-bg:
        radial-gradient(90% 120% at 0% 0%, rgba(255,93,122,.14), transparent 55%),
        linear-gradient(180deg, #150b28, var(--pdp-bg));
}

/* hero motif — energy core + orbits */
.theme-mots .mtc-core { position: absolute; width: 56%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--pdp-accent) 0%, var(--pdp-accent2) 42%, rgba(139,108,255,.2) 70%, transparent 75%); filter: blur(6px); animation: mtc-pulse 5.5s ease-in-out infinite; }
@keyframes mtc-pulse { 0%,100% { transform: scale(.94); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
.theme-mots .mtc-orbit { position: absolute; border: 1px solid var(--pdp-line); border-radius: 50%; }
.theme-mots .mtc-orbit--1 { width: 78%; aspect-ratio: 1; animation: mtc-spin 22s linear infinite; }
.theme-mots .mtc-orbit--2 { width: 96%; aspect-ratio: 1; animation: mtc-spin 34s linear infinite reverse; }
.theme-mots .mtc-orbit::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--pdp-accent); box-shadow: 0 0 12px var(--pdp-accent); }
.theme-mots .mtc-orbit--2::after { background: var(--m-violet); box-shadow: 0 0 12px var(--m-violet); }
@keyframes mtc-spin { to { transform: rotate(360deg); } }
.theme-mots .mtc-vial { position: relative; z-index: 2; max-height: 78%; max-width: 62%; filter: drop-shadow(0 30px 50px rgba(0,0,0,.55)); animation: mtc-float 7s ease-in-out infinite; }
@keyframes mtc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* what-is */
.theme-mots .mtc-about { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.theme-mots .mtc-about-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.theme-mots .mtc-about-points li { position: relative; padding-left: 34px; line-height: 1.5; }
.theme-mots .mtc-about-points li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--pdp-accent), var(--pdp-accent2)); opacity: .25; }
.theme-mots .mtc-about-points li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--pdp-accent); }
.theme-mots .mtc-about-visual { position: relative; display: grid; place-items: center; aspect-ratio: 4/3; border-radius: 24px; border: 1px solid var(--pdp-line); background: radial-gradient(circle at 50% 40%, rgba(255,179,64,.14), transparent 60%), var(--pdp-card); overflow: hidden; }
.theme-mots .mtc-about-visual img { max-width: 62%; max-height: 82%; filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); }

/* 3 mechanisms */
.theme-mots .mtc-mech { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.theme-mots .mtc-mcard { position: relative; padding: 32px 26px; border-radius: 22px; border: 1px solid var(--pdp-line); background: var(--pdp-card); overflow: hidden; transition: transform .25s ease, border-color .25s ease; }
.theme-mots .mtc-mcard:hover { transform: translateY(-5px); border-color: rgba(255,179,64,.5); }
.theme-mots .mtc-mcard::before { content: ""; position: absolute; top: -40%; right: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,93,122,.25), transparent 65%); }
.theme-mots .mtc-mcard .n { font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--pdp-accent); }
.theme-mots .mtc-mcard h3 { font-size: 1.28rem; margin: 12px 0 10px; position: relative; }
.theme-mots .mtc-mcard p { color: var(--pdp-muted); line-height: 1.55; margin: 0; position: relative; }

/* effects */
.theme-mots .mtc-effects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.theme-mots .mtc-effect { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border-radius: 16px; background: var(--pdp-card); border: 1px solid var(--pdp-line); }
.theme-mots .mtc-effect .spark { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(255,179,64,.2), rgba(255,93,122,.2)); color: var(--pdp-accent); }
.theme-mots .mtc-effect span { font-weight: 600; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
    .theme-mots .mtc-core, .theme-mots .mtc-orbit, .theme-mots .mtc-vial { animation: none !important; }
}
@media (max-width: 900px) {
    .theme-mots .mtc-about { grid-template-columns: 1fr; }
    .theme-mots .mtc-about-visual { order: -1; }
    .theme-mots .mtc-mech { grid-template-columns: 1fr; }
    .theme-mots .mtc-effects { grid-template-columns: 1fr; }
}

/* "Як працює MOTS-c" — премиальная подача инфографики.
   Убираем глухую карточку-рамку, фото делаем крупнее и «дороже»:
   тёплый амбиентный свет из-под картинки + тонкая градиентная кайма. */
.theme-mots .pdp-how {
    grid-template-columns: 1.02fr .98fr;
    gap: 60px;
    align-items: center;
}
/* не разрывать "MOTS-c" по дефису в заголовке */
.theme-mots .pdp-how .pdp-h2 .g { white-space: nowrap; }

.theme-mots .pdp-how-visual {
    position: relative;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
    box-shadow: none;
    place-items: stretch;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
/* амбиентное свечение из-под фото — картинка «излучает» свет в секцию */
.theme-mots .pdp-how-visual::before {
    content: "";
    position: absolute;
    inset: -14% -12% -20%;
    z-index: 0;
    background:
        radial-gradient(58% 55% at 42% 46%, rgba(255,140,60,.40), transparent 70%),
        radial-gradient(52% 60% at 74% 62%, rgba(139,108,255,.30), transparent 72%);
    filter: blur(44px);
    opacity: .95;
    pointer-events: none;
}
.theme-mots .pdp-how-visual img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    filter: none;
    border-radius: 22px;
    box-shadow:
        0 44px 90px -30px rgba(0,0,0,.85),
        0 8px 24px -12px rgba(255,120,50,.28);
}
/* тонкая светящаяся градиентная кайма поверх фото (1px, без «коробки») */
.theme-mots .pdp-how-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 22px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,179,64,.65), rgba(255,93,122,.28) 42%, rgba(139,108,255,.55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.theme-mots .pdp-how-visual:hover { transform: translateY(-6px); }

@media (max-width: 900px) {
    .theme-mots .pdp-how { grid-template-columns: 1fr; gap: 40px; }
    .theme-mots .pdp-how-visual { max-width: 560px; width: 100%; margin-inline: auto; }
}