/*
Theme Name: MA Digital Agency
Theme URI: https://madigitalagency.org/
Author: MA Digital Agency
Description: Conversion-focused WordPress block theme for MA Digital Agency. Built without Elementor.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: ma-digital-agency
*/

:root { --ma-shadow: 0 18px 50px rgba(15,23,42,.08); }
html { scroll-behavior: smooth; }
body { margin:0; }
.ma-site { overflow:hidden; }
.ma-header { position:sticky; top:0; z-index:100; backdrop-filter: blur(12px); background:rgba(255,255,255,.94); border-bottom:1px solid #e8edf5; }
.ma-nav { min-height:76px; padding:0 20px; }
.ma-nav .wp-block-site-logo img { max-height:44px; width:auto; }
.ma-menu-area { gap:22px; }
.ma-nav .wp-block-navigation { flex-shrink:0; }
.ma-logo { letter-spacing:-.04em; }
.ma-logo-mark { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:9px; background:#2563EB; color:#fff; font-weight:800; margin-right:9px; }
.ma-nav a { text-decoration:none; color:#334155; font-weight:600; font-size:14px; }
.ma-nav a:hover { color:#2563EB; }
.ma-btn { display:inline-flex; align-items:center; justify-content:center; padding:13px 19px; border-radius:10px; font-weight:750; text-decoration:none; line-height:1; }
.ma-btn-primary { background:#2563EB; color:#fff !important; box-shadow:0 10px 24px rgba(37,99,235,.22); }
.ma-btn-primary:hover { background:#1D4ED8; }
.ma-btn-outline { border:1px solid #CBD5E1; color:#111827 !important; background:#fff; }
.ma-btn-outline:hover { border-color:#2563EB; color:#2563EB !important; }
.ma-hero { background:radial-gradient(circle at 75% 25%, rgba(37,99,235,.14), transparent 34%), linear-gradient(180deg,#f8fbff 0%,#fff 100%); }
.ma-eyebrow { color:#2563EB; font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:12px; }
.ma-hero h1 { max-width:850px; margin-top:14px; margin-bottom:22px; }
.ma-lead { max-width:720px; color:#526174; font-size:19px; }
.ma-hero-card { min-height:420px; border:1px solid #dbe5f3; border-radius:26px; background:linear-gradient(145deg,#0B1220,#172554); box-shadow:0 30px 80px rgba(15,23,42,.20); position:relative; overflow:hidden; }
.ma-hero-card:before { content:""; position:absolute; width:320px; height:320px; border-radius:50%; background:rgba(37,99,235,.28); right:-80px; top:-80px; filter:blur(4px); }
.ma-dashboard { position:absolute; left:9%; right:9%; top:12%; bottom:10%; background:#fff; border-radius:18px; padding:18px; box-shadow:0 20px 50px rgba(0,0,0,.2); }
.ma-mini-bar { height:10px; width:44%; border-radius:10px; background:#dbeafe; margin-bottom:20px; }
.ma-chart { height:180px; border-radius:14px; background:linear-gradient(180deg,#eff6ff,#fff); position:relative; overflow:hidden; }
.ma-chart:after { content:""; position:absolute; left:7%; right:7%; top:48%; height:90px; border-top:4px solid #2563EB; border-radius:50%; transform:rotate(-7deg); }
.ma-stat-row { display:flex; gap:12px; margin-top:14px; }
.ma-stat { flex:1; background:#f8fafc; border-radius:12px; padding:13px; }
.ma-stat strong { display:block; font-size:20px; }
.ma-stat span { font-size:11px; color:#64748b; }
.ma-trust { border-top:1px solid #e7edf5; border-bottom:1px solid #e7edf5; background:#fff; }
.ma-trust-item { padding:18px 10px; text-align:center; }
.ma-trust-item strong { display:block; font-size:27px; letter-spacing:-.03em; }
.ma-trust-item span { color:#64748b; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.ma-section { padding-top:88px; padding-bottom:88px; }
.ma-section-light { background:#f6f8fc; }
.ma-section-dark { background:#0B1220; color:#fff; }
.ma-section-dark .ma-muted { color:#aab6c8; }
.ma-card { height:100%; border:1px solid #e2e8f0; border-radius:18px; background:#fff; padding:28px; box-shadow:0 12px 36px rgba(15,23,42,.05); transition:transform .2s ease, box-shadow .2s ease; }
.ma-card:hover { transform:translateY(-4px); box-shadow:var(--ma-shadow); }
.ma-number { font-size:13px; color:#2563EB; font-weight:850; letter-spacing:.1em; }
.ma-icon { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:#eff6ff; color:#2563EB; font-weight:900; margin-bottom:18px; }
.ma-card p { color:#64748b; }
.ma-service-grid .ma-card { padding:24px; }
.ma-list { list-style:none; padding:0; margin:18px 0 0; }
.ma-list li { padding:6px 0; color:#526174; }
.ma-list li:before { content:"✓"; color:#14B8A6; font-weight:900; margin-right:9px; }
.ma-process-step { position:relative; padding-left:72px; }
.ma-process-num { position:absolute; left:0; top:0; width:50px; height:50px; border-radius:14px; background:#eff6ff; color:#2563EB; display:flex; align-items:center; justify-content:center; font-weight:900; }
.ma-result { border-left:1px solid rgba(255,255,255,.14); padding-left:26px; }
.ma-result strong { font-size:44px; line-height:1; display:block; }
.ma-result span { color:#aab6c8; }
.ma-cta { border-radius:28px; background:linear-gradient(135deg,#2563EB,#0F3FAE); color:#fff; padding:60px; overflow:hidden; position:relative; }
.ma-cta:after { content:""; position:absolute; width:320px; height:320px; right:-130px; top:-130px; border-radius:50%; background:rgba(255,255,255,.10); }
.ma-testimonial { background:#fff; border:1px solid #e2e8f0; border-radius:18px; padding:28px; height:100%; }
.ma-stars { color:#F59E0B; letter-spacing:2px; }
.ma-faq details { border-bottom:1px solid #e2e8f0; padding:20px 0; }
.ma-faq summary { cursor:pointer; font-weight:750; }
.ma-footer { background:#070D18; color:#d7dfeb; }
.ma-footer a { color:#cbd5e1; text-decoration:none; }
.ma-footer a:hover { color:#fff; }
.ma-footer-bottom { border-top:1px solid rgba(255,255,255,.12); }
@media (max-width: 900px) {
  .ma-menu-area { gap:10px; }
  .ma-nav-cta { display:none; }
  .ma-hero-card { min-height:330px; }
  .ma-dashboard { top:9%; bottom:9%; }
  .ma-section { padding-top:64px; padding-bottom:64px; }
  .ma-cta { padding:38px 28px; }
}
@media (max-width: 600px) {
  .ma-hero h1 { font-size:40px !important; }
  .ma-lead { font-size:17px; }
  .ma-hero-card { min-height:280px; }
  .ma-chart { height:110px; }
  .ma-stat strong { font-size:16px; }
}