/* Pagina inicial: busca em destaque, categorias, destaques e profissionais. */

.hero-home { position: relative; overflow: hidden; padding: 64px 0 36px; }
@media (max-width: 719px) { .hero-home { padding: 34px 0 20px; } }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: float 16s ease-in-out infinite; }
.b1 { width: 420px; height: 420px; left: -120px; top: -120px; background: color-mix(in srgb, var(--g1) 60%, transparent); }
.b2 { width: 380px; height: 380px; right: -100px; top: 40px; background: color-mix(in srgb, var(--g3) 45%, transparent); animation-delay: -5s; }
.b3 { width: 300px; height: 300px; left: 40%; bottom: -160px; background: color-mix(in srgb, var(--g2) 40%, transparent); animation-delay: -9s; }
.grid-lines { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--line) 50%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line) 50%, transparent) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent); -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent); opacity: .5; }
@keyframes float { 50% { transform: translate(30px, 24px) scale(1.06); } }

.hero-inner { text-align: center; display: grid; justify-items: center; }
.hero-home h1 { margin: 0; max-width: 900px; font-size: clamp(34px, 6vw, 64px); line-height: 1.04; letter-spacing: -2px; font-weight: 800; }
/* Degrade em ciclo (volta a cor inicial) e horizontal: a repeticao emenda sem
   faixa e o brilho corre sem fim. */
.grad { background: linear-gradient(90deg, var(--g1), var(--g2) 25%, var(--g3) 50%, var(--g2) 75%, var(--g1)); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% auto; animation: shine 6s linear infinite; }
@keyframes shine { to { background-position: 200% center; } }
.hero-home .lead { max-width: 640px; margin: 16px 0 26px; color: var(--muted); font-size: clamp(15px, 1.8vw, 18px); }

/* Super busca com moldura animada (igual ao campo do app). */
.super-search { position: relative; width: 100%; max-width: 860px; border-radius: 26px; padding: 3px; }
.ss-ring { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.ss-ring::before { content: ''; position: absolute; inset: -150%; background: conic-gradient(from 0deg, var(--g1), var(--g2), var(--g3), var(--g1)); animation: spin 5s linear infinite; }
.ss-ring::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 30px 60px -30px var(--g2); }
.ss-box { position: relative; display: flex; align-items: stretch; gap: 6px; padding: 8px; border-radius: 23px; background: var(--surface); }
.ss-field { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 14px; border-radius: 17px; }
.ss-field > ion-icon { font-size: 22px; color: var(--accent-text); }
.ss-what { flex: 1.6; min-width: 0; }
.ss-what input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 17px; font-weight: 600; color: var(--text); }
.ss-what input::placeholder { color: var(--faint); font-weight: 500; }
.ss-what input::-webkit-search-cancel-button { display: none; }
.ss-where { flex: 1; min-width: 0; border: 0; background: var(--soft); cursor: pointer; text-align: left; }
.ss-where:hover { filter: brightness(.98); }
.ss-where-text { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.ss-where-text small { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ss-where-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.ss-where .chev { font-size: 16px; color: var(--faint); }
.ss-go { min-height: 58px; border-radius: 17px; padding: 0 26px; font-size: 16px; }
.ss-suggest { position: absolute; left: 3px; right: 3px; top: calc(100% + 8px); z-index: 30; padding: 8px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); text-align: left; border: 1px solid var(--line); animation: drop .15s ease; }
.ss-suggest button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 10px 12px; border-radius: 12px; cursor: pointer; font-weight: 600; text-align: left; }
.ss-suggest button:hover, .ss-suggest button.on { background: var(--soft); }
.ss-suggest ion-icon { color: var(--accent-text); font-size: 18px; }
.ss-suggest mark { background: none; color: var(--accent-text); font-weight: 800; }
.ss-suggest .kind { margin-left: auto; font-size: 11.5px; color: var(--faint); font-weight: 700; }
@media (max-width: 719px) {
  .ss-box { flex-direction: column; }
  .ss-what, .ss-where { flex: none; }
  .ss-go { width: 100%; }
}

.typing-hint { margin-top: 14px; color: var(--muted); font-size: 14px; font-weight: 600; }
.typing-hint #typing-word { color: var(--accent-text); font-weight: 800; }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.quick-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; max-width: 860px; }
.trust { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust ion-icon { color: var(--success); font-size: 18px; }

/* Categorias */
.cat-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
@media (max-width: 480px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } }
.cat { position: relative; overflow: hidden; display: grid; gap: 7px; align-content: start; min-height: 112px; padding: 13px 14px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); transition: transform .2s ease, box-shadow .2s ease; transition-delay: var(--d, 0ms); }
.cat::after { content: ''; position: absolute; right: -30px; bottom: -30px; width: 110px; height: 110px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, transparent); transition: transform .3s ease; }
.cat:hover { transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; }
.cat:hover::after { transform: scale(1.25); }
.cat-ic { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-size: 24px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)); box-shadow: 0 10px 20px -12px var(--c); }
.cat-name { position: relative; z-index: 1; font-weight: 800; font-size: 15px; line-height: 1.25; letter-spacing: -.2px; }
.cat-count { position: relative; z-index: 1; font-size: 12px; color: var(--muted); font-weight: 600; }

.rail-nav { display: flex; gap: 6px; }
@media (max-width: 719px) { .rail-nav { display: none; } }

/* Como funciona */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: s; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.steps li { position: relative; padding: 24px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-sm); }
.steps .n { position: absolute; right: 20px; top: 14px; font-size: 54px; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--accent) 12%, transparent); }
.steps ion-icon { font-size: 26px; color: #fff; width: 52px; height: 52px; padding: 13px; border-radius: 16px; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 12px 24px -14px var(--g2); }
.steps h3 { margin: 14px 0 6px; font-size: 18px; }
.steps p { margin: 0; color: var(--muted); }

/* Para profissionais */
.pros-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; padding: 40px; border-radius: 34px; color: #fff; background: radial-gradient(120% 120% at 0% 0%, #1e3a8a, #0B1220 60%); box-shadow: var(--shadow); }
.pros-card::before { content: ''; position: absolute; width: 480px; height: 480px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 58, 237, .55), transparent 70%); }
.pros-text { position: relative; }
.pros-card .eyebrow { color: #7dd3fc; }
.pros-card h2 { margin: 0; font-size: clamp(24px, 3vw, 36px); line-height: 1.12; letter-spacing: -1px; }
.pros-card p { color: rgba(255, 255, 255, .78); }
.pros-card .muted { color: rgba(255, 255, 255, .6); }
.checks { list-style: none; padding: 0; margin: 16px 0 20px; display: grid; gap: 8px; }
.checks li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.checks ion-icon { color: #4ADE80; font-size: 20px; }
.pros-art { position: relative; display: grid; place-items: center; }
/* Celular com proporcao real de smartphone (19,5:9), ilha, botoes laterais e barra de gestos. */
.phone { position: relative; width: 270px; aspect-ratio: 9 / 19.5; padding: 11px; border-radius: 46px; background: linear-gradient(145deg, #2a3142, #0b0f1a 40%); box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .9), inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 5px #0b0f1a; transform: rotate(4deg); animation: bob 6s ease-in-out infinite; }
@keyframes bob { 50% { transform: rotate(4deg) translateY(-10px); } }
.ph-btn { position: absolute; width: 3px; border-radius: 2px; background: #2a3142; }
.ph-vol-up { left: -3px; top: 22%; height: 46px; }
.ph-vol-down { left: -3px; top: 32%; height: 46px; }
.ph-power { right: -3px; top: 26%; height: 72px; }
.phone-screen { position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 9px; padding: 12px 14px 10px; border-radius: 36px; background: #F0F4FB; color: #0D1520; }
.ph-island { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 88px; height: 25px; border-radius: 20px; background: #000; }
.ph-status { display: flex; justify-content: space-between; align-items: center; padding: 1px 8px 0 12px; font-size: 12px; height: 26px; }
.ph-status span { display: inline-flex; gap: 4px; font-size: 13px; }
.ph-app { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 14px; }
.ph-app b { flex: 1; }
.ph-app > ion-icon { font-size: 18px; color: #1e51c1; }
.ph-logo { width: 26px; height: 26px; border-radius: 8px; display: block; padding: 2px; background: #fff; box-shadow: 0 2px 8px rgba(0, 38, 83, .15); }
.ph-tabs { margin-top: auto; display: flex; justify-content: space-around; padding: 10px 6px; border-radius: 18px; background: #fff; box-shadow: 0 6px 16px -10px rgba(30, 64, 175, .5); font-size: 19px; color: #9aa3b2; }
.ph-tabs ion-icon:first-child { color: #2563EB; }
.ph-home { align-self: center; width: 96px; height: 4px; border-radius: 3px; background: #0D1520; opacity: .8; }
.ph-top { display: flex; align-items: center; gap: 8px; }
.ph-top b { flex: 1; }
.ph-dot { width: 10px; height: 10px; border-radius: 50%; background: #22D3EE; box-shadow: 0 0 0 4px rgba(34, 211, 238, .25); }
.ph-slot { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: #fff; font-size: 12px; }
.ph-slot > span { font-weight: 800; color: #1e51c1; }
.ph-slot b { display: block; font-size: 12.5px; }
.ph-slot small { color: #6c737c; }
.ph-slot.on { background: linear-gradient(135deg, #22D3EE, #2563EB); color: #fff; }
.ph-slot.on > span, .ph-slot.on small { color: rgba(255, 255, 255, .9); }
.ph-chart { display: flex; align-items: flex-end; gap: 6px; height: 64px; padding: 8px; border-radius: 14px; background: #fff; }
.ph-chart i { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(#7C3AED, #2563EB); }
@media (max-width: 860px) { .pros-card { grid-template-columns: 1fr; padding: 28px 22px; } .pros-art { display: none; } }

/* Perguntas */
.faq-list { display: grid; gap: 10px; max-width: 860px; }
.faq details { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); padding: 0 18px; }
.faq summary { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 18px 0; cursor: pointer; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary ion-icon { font-size: 20px; color: var(--accent-text); transition: transform .2s ease; }
.faq details[open] summary ion-icon { transform: rotate(45deg); }
.faq details p { margin: 0 0 18px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Mini apresentacao (leva para /apresentacao). So CSS: roda em loop sem JS.
   -------------------------------------------------------------------------- */
.demo-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: center; padding: 36px; border-radius: var(--r-xl); overflow: hidden; color: #EEF3FB;
  background: radial-gradient(90% 120% at 100% 0%, rgba(124, 58, 237, .45), transparent 60%), radial-gradient(80% 120% at 0% 100%, rgba(34, 211, 238, .28), transparent 60%), #0B1220; box-shadow: var(--shadow); }
.demo-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #B4BFD3; }
.demo-dot { width: 8px; height: 8px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); animation: demoRec 1.6s infinite; }
@keyframes demoRec { 70% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.demo-text h2 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.03em; color: #fff; }
.demo-text > p { margin: 0 0 18px; color: #B4BFD3; font-size: 15.5px; }
.demo-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.demo-links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #EEF3FB; font-weight: 700; font-size: 13.5px; text-decoration: none; transition: background .2s; }
.demo-links a:hover { background: rgba(255, 255, 255, .16); text-decoration: none; }
.demo-go { min-height: 48px; padding: 0 22px; }
.demo-screen { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: 22px; overflow: hidden; background: #F0F4FB; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .12); color: #0D1520; text-decoration: none; }
.demo-screen:hover { text-decoration: none; }
.demo-bars { position: absolute; z-index: 3; left: 14px; right: 14px; top: 12px; display: flex; gap: 4px; }
.demo-bars i { flex: 1; height: 4px; border-radius: 2px; background: rgba(13, 21, 32, .12); overflow: hidden; position: relative; }
.demo-bars i::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3)); animation: demoBar 12s linear infinite; }
.demo-bars i:nth-child(2)::after { animation-name: demoBar2; }
.demo-bars i:nth-child(3)::after { animation-name: demoBar3; }
@keyframes demoBar { 0% { transform: scaleX(0); } 33.3%, 100% { transform: scaleX(1); } }
@keyframes demoBar2 { 0%, 33.3% { transform: scaleX(0); } 66.6%, 100% { transform: scaleX(1); } }
@keyframes demoBar3 { 0%, 66.6% { transform: scaleX(0); } 99.9% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.demo-frame { position: absolute; inset: 0; padding: 30px 22px 18px; display: flex; flex-direction: column; gap: 8px; opacity: 0; animation: demoF 12s infinite; }
.demo-frame.f2 { animation-delay: 4s; }
.demo-frame.f3 { animation-delay: 8s; }
@keyframes demoF { 0% { opacity: 0; transform: translateX(20px); } 3%, 30% { opacity: 1; transform: none; } 33.3%, 100% { opacity: 0; transform: translateX(-20px); } }
.demo-frame > span { opacity: 0; animation: demoIn 12s infinite; animation-delay: inherit; }
.demo-frame > span:nth-child(2) { animation-name: demoIn2; }
.demo-frame > span:nth-child(3) { animation-name: demoIn3; }
.demo-frame > span:nth-child(4) { animation-name: demoIn4; }
.demo-frame > span:nth-child(5) { animation-name: demoIn5; }
@keyframes demoIn { 0%, 2% { opacity: 0; transform: translateY(10px); } 5%, 31% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; } }
@keyframes demoIn2 { 0%, 6% { opacity: 0; transform: translateY(10px); } 9%, 31% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; } }
@keyframes demoIn3 { 0%, 9% { opacity: 0; transform: translateY(10px); } 12%, 31% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; } }
@keyframes demoIn4 { 0%, 12% { opacity: 0; transform: translateY(10px); } 15%, 31% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; } }
@keyframes demoIn5 { 0%, 15% { opacity: 0; transform: translateY(10px); } 18%, 31% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; } }
.dm-search { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 14px; background: #fff; border: 2px solid #2563EB; font-size: 14px; }
.dm-search ion-icon { color: #2563EB; font-size: 17px; }
.dm-type { display: inline-block; overflow: hidden; white-space: nowrap; border-right: 2px solid #2563EB; width: 0; animation: demoType 12s steps(8) infinite; animation-delay: inherit; }
@keyframes demoType { 0%, 3% { width: 0; } 10%, 100% { width: 8ch; } }
.dm-card { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(13, 21, 32, .06); font-size: 13px; }
.dm-card i { width: 30px; height: 30px; border-radius: 9px; background: var(--c); flex-shrink: 0; }
.dm-card span { flex: 1; display: grid; line-height: 1.25; }
.dm-card small, .dm-slot span { color: #5F6772; font-size: 11.5px; }
.dm-card em { font-style: normal; font-weight: 800; font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: #DCFCE7; color: #15803D; }
.dm-cap { margin-top: auto; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: #0D1520; color: #fff; font-weight: 700; font-size: 12.5px; }
.dm-notif { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px -12px rgba(13, 21, 32, .4); font-size: 13px; }
.dm-notif ion-icon { width: 30px; height: 30px; padding: 6px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.dm-notif span { display: grid; line-height: 1.25; }
.dm-notif small { color: #5F6772; }
.dm-slot { display: flex; gap: 10px; align-items: center; font-size: 12.5px; }
.dm-slot small { width: 38px; font-weight: 800; color: #5F6772; }
.dm-slot span { flex: 1; padding: 7px 10px; border-radius: 12px; background: #fff; border-left: 4px solid var(--c); display: grid; line-height: 1.25; }
.dm-slot b { color: #0D1520; font-size: 12.5px; }
.dm-chart { display: flex; align-items: flex-end; gap: 6px; height: 44px; }
.dm-chart i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #60A5FA, #2563EB); }
.dm-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.dm-brand i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #14B8A6, #0F766E); font-size: 18px; animation: demoHue 12s infinite; animation-delay: inherit; }
.dm-hero { display: grid; gap: 10px; padding: 18px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, #0F766E, #14B8A6); animation: demoHue 12s infinite; animation-delay: inherit; }
.dm-hero b { font-size: 19px; line-height: 1.15; letter-spacing: -.02em; }
.dm-hero em { justify-self: start; font-style: normal; font-weight: 800; font-size: 12.5px; padding: 7px 12px; border-radius: 10px; background: #fff; color: #0F766E; }
@keyframes demoHue { 0%, 12% { filter: none; } 18%, 22% { filter: hue-rotate(90deg); } 26%, 100% { filter: hue-rotate(200deg); } }
.dm-sw { display: flex; gap: 8px; }
.dm-sw i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 1px #DCE0E7; }
.demo-play { position: absolute; z-index: 4; right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2) 55%, var(--g3)); box-shadow: 0 14px 30px -10px rgba(37, 99, 235, .9); transition: transform .25s; }
.demo-screen:hover .demo-play { transform: scale(1.1); }
@media (max-width: 860px) {
  .demo-card { grid-template-columns: 1fr; padding: 24px 18px; gap: 22px; }
  .demo-screen { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-frame, .demo-frame > span, .demo-bars i::after, .dm-type, .dm-brand i, .dm-hero { animation: none !important; }
  .demo-frame.f1, .demo-frame.f1 > span { opacity: 1; }
  .dm-type { width: 8ch; }
}

/* Vitrine Destaque logo abaixo da busca (stories.js). */
.home-stories { width: 100%; max-width: 760px; margin: 18px auto 0; text-align: left; }

/* Novidades: cada cartao abre o capitulo da apresentacao (/apresentacao/<deck>#<capitulo>). */
.news-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .news-grid { grid-template-columns: 1fr; gap: 10px; } }
.news-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.news-card::after { content: ''; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, var(--c) 12%, transparent); pointer-events: none; }
.news-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow); }
.news-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--c); color: #fff; font-size: 24px; box-shadow: 0 12px 24px -14px var(--c); }
.news-tag { margin-top: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.news-card h3 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.news-card p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; flex: 1; }
.news-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 800; font-size: 13.5px; color: var(--accent-text); }
.news-go ion-icon { font-size: 18px; }
@media (max-width: 560px) {
  .news-card { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 2px; padding: 14px; }
  .news-ic { grid-row: span 4; width: 44px; height: 44px; font-size: 21px; border-radius: 13px; }
  .news-tag { margin-top: 0; }
  .news-card h3 { font-size: 16px; }
  .news-card p { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .news-card, .news-card:hover { transition: none; transform: none; } }

.pros-plans { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }