/* ---- RyBTec Design Upgrade (non-breaking) ---- */

/* Fluid type scale */
:root{
  --radius:14px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 10px 25px rgba(0,0,0,.12);
}
h1{font-size:clamp(28px, 4vw, 42px)}
h2{font-size:clamp(22px, 3vw, 32px)}
h3{font-size:clamp(18px, 2.2vw, 22px)}

/* Container breathing room */
.section{padding:56px 0}
.section .lead{max-width:70ch}

/* Buttons (unify look) */
.btn,.hero .primary,.hero .secondary,.cta{
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  will-change: transform;
}
.btn:hover,.hero .primary:hover,.cta:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}

/* Cards */
.card{border-radius:var(--radius);box-shadow:0 2px 8px rgba(0,0,0,.04)}
.card:hover{box-shadow:var(--shadow-lg)}

/* Images */
.card img,.hero .media{border-radius:16px}

/* Grids */
.grid3{gap:22px}
.posts{gap:22px}

/* Badge & meta helpers */
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:#f3f4f6;border:1px solid var(--border);font-weight:600;font-size:12px}
.meta{color:var(--muted);font-size:12px}

/* Promo */
.promo{border-radius:18px;box-shadow:var(--shadow-lg)}

/* Header: mobile nav */
.nav-toggle{display:none}
@media (max-width:900px){
  .topbar{height:auto;padding:12px 0;gap:10px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border);border-radius:10px;background:#fff}
  nav[data-collapsed="true"] ul{display:none}
  nav ul{flex-direction:column;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;width:100%}
}

/* Footer */
footer{border-top:1px solid var(--border);padding:32px 0;margin-top:40px}

/* Motion & dark mode */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0b0f14;--text:#e5e7eb;--muted:#a3aab4;--border:#1f2937}
  header, .card, .post, .promo, .hero .secondary{background:#0f141b}
  .cta,.hero .primary{color:#fff}
}

/* --- Extras: logos, benefits, faq, testimonial --- */
.logos{display:grid;gap:12px;align-items:center;justify-items:center;text-align:center}
.logos__row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;margin:0;padding:0;width:100%}
.logos__row img{max-height:36px;opacity:.8;filter:grayscale(100%);transition:opacity .2s ease, filter .2s ease}
.logos__row img:hover{opacity:1;filter:none}
@media (max-width:900px){ .logos__row{grid-template-columns:repeat(2,1fr)} }

.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;margin:0;padding:0}
.benefits li{border:1px solid var(--border);border-radius:var(--radius);padding:18px;background:#fff;box-shadow:var(--shadow-sm)}
.benefits__icon{font-size:28px;line-height:1}
.benefits h3{margin:6px 0 2px}
@media (max-width:900px){ .benefits{grid-template-columns:1fr} }

.faq{border:1px solid var(--border);border-radius:var(--radius);padding:14px;background:#fff;box-shadow:var(--shadow-sm);margin-bottom:10px}
.faq > summary{cursor:pointer;font-weight:700;outline:none}
.faq[open]{box-shadow:var(--shadow-lg)}
.faq p{margin:10px 0 0;color:var(--muted)}

.testimonial{border:1px solid var(--border);border-radius:18px;padding:18px;background:#fff;box-shadow:var(--shadow-lg)}
.testimonial blockquote{margin:0 0 12px;font-size:18px;line-height:1.5}
.testimonial__meta{display:flex;align-items:center;gap:12px}
.testimonial__meta img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}