/* ==========================================================================
   «Почему мы» в стиле каталога анализов: bento-сетка — акцентная карточка слева,
   три преимущества и плитка с оговоркой справа; на тонированной полосе фона.
   Отдельный файл, разметка — service/landing.twig. Заголовок секции переиспользует
   .analizy-catalog-section__intro каталога.
   ========================================================================== */

.analizy-trust-section { position: relative; isolation: isolate; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 76px 0 56px; }
@media (min-width: 1400px) { .analizy-trust-section { width: min(1560px, calc(100% - 80px)); } }

/* тонированная полоса на всю ширину окна (чередование фона, см. analizy-discussions.css) */
.analizy-trust-section::before {
	content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none;
	background:
		radial-gradient(520px 260px at 12% 18%, rgba(8, 116, 249, .07), transparent 70%),
		radial-gradient(480px 260px at 92% 80%, rgba(124, 92, 255, .07), transparent 70%),
		linear-gradient(180deg, rgba(232, 240, 255, 0), #e9f1ff 14%, #edf3ff 86%, rgba(237, 243, 255, 0));
}

/* ---------- Сетка ---------- */
.analizy-trust-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); gap: 16px; }
.atr-card--feature { grid-column: 1; grid-row: 1 / 3; }

.atr-card {
	position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 226px; padding: 26px 26px 24px;
	overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 255, 255, .9); border-radius: 23px; color: #08163b;
	background: #fff; box-shadow: 0 13px 26px rgba(42, 79, 142, .06), inset 0 1px 0 #fff;
	transition: transform .25s ease, box-shadow .25s ease;
}
.atr-card:hover { transform: translateY(-4px); box-shadow: 0 19px 34px rgba(42, 79, 142, .13), inset 0 1px 0 #fff; }
.atr-card::before { content: ''; position: absolute; z-index: -1; right: -70px; top: -80px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(225, 239, 255, .95), rgba(231, 242, 255, .3) 58%, transparent 74%); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.atr-card:hover::before { transform: scale(1.25); }

.atr-ico { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 17px; color: #0874f9; background: #eaf2ff; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background .2s ease, color .2s ease, box-shadow .3s ease; }
.atr-ico svg { width: 27px; height: 27px; }
.atr-card:hover .atr-ico { transform: scale(1.08) rotate(-5deg); color: #fff; background: linear-gradient(135deg, #0874f9, #7c5cff); box-shadow: 0 14px 26px -10px rgba(8, 116, 249, .7); }

.atr-card h3 { margin: 0; color: #08163b; font: 700 20px/1.25 Inter, sans-serif; letter-spacing: -.045em; }
.atr-card p { margin: 0; color: #7482ad; font: 400 14.5px/1.5 Inter, sans-serif; letter-spacing: -.015em; }

/* ---------- Акцентная карточка ---------- */
.atr-card--feature { justify-content: flex-end; gap: 12px; min-height: 468px; padding: 34px; border-color: rgba(120, 160, 255, .3); color: #fff; background: radial-gradient(120% 90% at 100% 0%, rgba(124, 92, 255, .55), transparent 60%), radial-gradient(100% 80% at 0% 100%, rgba(34, 211, 238, .28), transparent 60%), linear-gradient(150deg, #0d7bff 0%, #0a4fd6 55%, #2f3fe0 100%); box-shadow: 0 40px 70px -34px rgba(10, 79, 214, .75), inset 0 1px 0 rgba(255, 255, 255, .3); }
.atr-card--feature::before { display: none; }
.atr-card--feature h3 { color: #fff; font-size: 30px; letter-spacing: -.055em; }
.atr-card--feature p { max-width: 380px; color: rgba(225, 236, 255, .86); font-size: 16px; }
.atr-card--feature:hover { box-shadow: 0 50px 80px -34px rgba(10, 79, 214, .85), inset 0 1px 0 rgba(255, 255, 255, .3); }

.atr-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 11px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 12.5px/1 Inter, sans-serif; }
.atr-pill i { width: 7px; height: 7px; border-radius: 50%; background: #5cf0b0; box-shadow: 0 0 0 4px rgba(92, 240, 176, .25); animation: atr-pulse 2s ease-in-out infinite; }
@keyframes atr-pulse { 50% { box-shadow: 0 0 0 8px rgba(92, 240, 176, 0); } }

/* щит с «рисующейся» галочкой и расходящимися кольцами */
.atr-shield { position: absolute; top: 34px; left: 50%; width: 170px; height: 196px; margin-left: -85px; display: grid; place-items: center; animation: atr-float 6s ease-in-out infinite; }
.atr-shield__svg { position: relative; z-index: 1; width: 128px; height: auto; filter: drop-shadow(0 18px 26px rgba(5, 20, 90, .5)); }
.atr-shield__tick { stroke-dasharray: 100; stroke-dashoffset: 100; }
.svc-reveal.is-visible .atr-shield__tick, .atr-card--feature.is-visible .atr-shield__tick { animation: atr-draw 1s .5s cubic-bezier(.22, 1, .36, 1) forwards; }
.atr-shield__ring { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 50%; opacity: 0; animation: atr-ring 3.6s ease-out infinite; }
.atr-shield__ring:nth-child(2) { animation-delay: 1.8s; }
@keyframes atr-draw { to { stroke-dashoffset: 0; } }
@keyframes atr-ring { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes atr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Плитка с оговоркой ---------- */
.atr-card--notice { min-height: 226px; border-color: #f6e6bd; background: linear-gradient(135deg, #fffaf0, #fff6e2); box-shadow: 0 13px 26px rgba(180, 130, 30, .08), inset 0 1px 0 #fff; }
.atr-card--notice::before { background: radial-gradient(circle at 40% 40%, rgba(255, 236, 190, .9), rgba(255, 240, 205, .3) 58%, transparent 74%); }
.atr-card--notice .atr-ico { color: #c98600; background: #fff0c9; }
.atr-card--notice:hover .atr-ico { background: linear-gradient(135deg, #f5a623, #e8890c); box-shadow: 0 14px 26px -10px rgba(232, 137, 12, .7); }
.atr-card--notice h3 { color: #4a3500; font-size: 16.5px; line-height: 1.3; }
.atr-card--notice p { color: #8a6a1f; font-size: 14px; }

/* ---------- Планшет / телефон ---------- */
@media (max-width: 991px) {
	.analizy-trust-section { width: auto; padding: 56px 16px 44px; }
	.analizy-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.atr-card--feature { grid-column: 1 / 3; grid-row: auto; min-height: 380px; padding: 26px; }
	.atr-card--notice { grid-column: 1 / 3; }
	.atr-card { min-height: 0; padding: 20px; border-radius: 18px; }
	.atr-shield { top: 26px; }
	.atr-card--feature h3 { font-size: 26px; }
}
@media (max-width: 560px) {
	.analizy-trust-grid { grid-template-columns: 1fr; }
	.atr-card--feature, .atr-card--notice { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.atr-card, .atr-card::before, .atr-ico, .atr-shield, .atr-shield__ring, .atr-pill i { animation: none !important; transition: none; }
	.atr-shield__tick { stroke-dashoffset: 0; animation: none !important; }
}

/* Планшет / телефон: щит — в потоке над текстом (у карточки нет фиксированной высоты) */
@media (max-width: 991px) {
	.atr-card--feature { justify-content: flex-start; min-height: 0; }
	.atr-shield { position: relative; top: auto; left: auto; width: 130px; height: 150px; margin: 0 auto 10px; }
	.atr-shield__svg { width: 100px; }
	.atr-shield__ring { width: 100px; height: 100px; margin: -50px 0 0 -50px; }
}
