/* Abra Media bright editorial system, close to the Bungee reference */
:root {
  --abra-ink: #0e0e12;
  --abra-muted: #5a6271;
  --abra-soft: #ffffff;
  --abra-panel: rgba(255, 255, 255, 0.78);
  --abra-panel-strong: rgba(255, 255, 255, 0.96);
  --abra-line: rgba(14, 14, 18, 0.12);
  --abra-blue: #2563eb;
  --abra-cyan: #06b6d4;
  --abra-green: #06b6d4;
  --abra-magenta: #c026d3;
  --abra-violet: #7c3aed;
  --abra-pink: #ec4899;
  --abra-yellow: #ec4899;
  --abra-deep: #0e0e12;
  --abra-carbon: #1a1a22;
  --abra-gradient: linear-gradient(135deg, #c026d3 0%, #7c3aed 46%, #2563eb 100%);
  --abra-bright-gradient: linear-gradient(135deg, rgba(192,38,211,.2), rgba(124,58,237,.15) 44%, rgba(37,99,235,.2));
  --abra-shadow: 0 30px 80px rgba(14, 14, 18, 0.16);
  --abra-shadow-soft: 0 18px 44px rgba(14, 14, 18, 0.11);
}

html,
body { width: 100%; max-width: 100%; overflow-x: hidden; background: #fff; }
body {
  background:
    radial-gradient(circle at 10% 0%, rgba(236, 72, 153, 0.18), transparent 30%),
    radial-gradient(circle at 82% 4%, rgba(6, 182, 212, 0.18), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f6f7fb 52%, #ffffff 100%);
  color: var(--abra-ink);
}

.site-main,
.ct-container,
.entry-content,
.hero-section[data-type="type-1"] { max-width: none !important; width: 100% !important; }
.entry-content > * { max-width: none; }

.abra-page {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background:
    radial-gradient(circle at 16% 8%, rgba(192, 38, 211, 0.16), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(37, 99, 235, 0.16), transparent 30%),
    linear-gradient(180deg, #fff 0%, #f7f8fc 45%, #fff 100%);
}

.abra-section,
.abra-hero { width: 100%; }
.abra-wrap { width: min(100% - 40px, 1380px); max-width: 1380px; }

.abra-services,
.abra-service-websites,
.abra-service-eshop,
.abra-service-marketing-seo,
.abra-service-email-marketing,
.abra-service-social-ads {
  background:
    radial-gradient(circle at 7% 4%, rgba(192, 38, 211, 0.23), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(37, 99, 235, 0.2), transparent 34%),
    radial-gradient(circle at 54% 72%, rgba(6, 182, 212, 0.14), transparent 32%),
    linear-gradient(145deg, #ffffff 0%, #f1f4ff 48%, #ffffff 100%);
}

.abra-hero { min-height: 88vh; padding-top: clamp(78px, 9vw, 128px); }
.abra-hero .abra-wrap.with-media { grid-template-columns: minmax(0, 1.02fr) minmax(340px, .98fr); }
.abra-lead { max-width: 760px; color: #4f5666; font-size: clamp(1.05rem, 1.65vw, 1.28rem); }
.abra-kicker,
.abra-editorial-label { color: var(--abra-magenta); font-family: inherit; text-transform: uppercase; }
.abra-kicker::before {
  content: "";
  flex: 0 0 38px;
  width: 38px;
  height: 8px;
  border-radius: 0;
  background:
    radial-gradient(circle, var(--abra-magenta) 0 4px, transparent 4.5px) 0 50% / 12px 8px no-repeat,
    radial-gradient(circle, var(--abra-violet) 0 4px, transparent 4.5px) 14px 50% / 12px 8px no-repeat,
    radial-gradient(circle, var(--abra-blue) 0 4px, transparent 4.5px) 28px 50% / 12px 8px no-repeat;
  box-shadow: none;
}

.abra-card, .abra-tile { background: rgba(255,255,255,.8); border-color: rgba(14,14,18,.12); box-shadow: var(--abra-shadow-soft); }
.abra-band { background: rgba(14, 14, 18, 0.035); border-color: rgba(14,14,18,.1); }
.abra-card p, .abra-tile p, .abra-list li, .abra-section-copy { color: var(--abra-muted); }
.abra-btn, .abra-btn:where(a) { background: #fff; color: var(--abra-ink); border-color: rgba(14,14,18,.14); box-shadow: var(--abra-shadow-soft); transition: transform .25s ease, box-shadow .25s ease; }
.abra-btn.primary, .abra-btn.primary:where(a) { background: var(--abra-gradient); color: #fff; box-shadow: 0 20px 54px rgba(192, 38, 211, .28); }
.abra-btn:hover { transform: translateY(-2px); }
.abra-final-cta { color: #fff; background: var(--abra-gradient); }
.abra-final-cta .abra-btn { background: #fff; color: var(--abra-ink); }
.abra-visual img { border-color: rgba(255,255,255,.9); background: rgba(255,255,255,.82); box-shadow: 0 38px 90px rgba(14,14,18,.18); aspect-ratio: 16 / 10; object-fit: cover; }
.abra-gradient-text { background: var(--abra-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

.abra-marquee-grid { display: grid; grid-template-columns: 1.25fr .75fr 1fr; gap: 18px; margin-top: 36px; }
.abra-media-tile { min-height: 280px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(14,14,18,.12); background: var(--abra-bright-gradient); box-shadow: var(--abra-shadow); position: relative; }
.abra-media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abra-media-tile span { position: absolute; left: 18px; bottom: 18px; padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.86); color: var(--abra-ink); font-family: inherit; font-size: .72rem; }
.abra-media-tile.large { min-height: 440px; }

.abra-service-row { display: grid; grid-template-columns: 120px minmax(0, .95fr) minmax(260px, .75fr); gap: 26px; align-items: start; padding: clamp(26px, 4vw, 48px) 0; border-top: 1px solid rgba(14,14,18,.14); }
.abra-service-row:last-child { border-bottom: 1px solid rgba(14,14,18,.14); }
.abra-service-row .num { font-family: inherit; color: var(--abra-magenta); font-size: .88rem; }

.abra-service-row p { margin: 12px 0 0; color: var(--abra-muted); line-height: 1.72; }

.abra-list { list-style: none; padding-left: 0; display: grid; gap: 12px; }
.abra-list li { position: relative; min-height: 34px; padding: 12px 14px 12px 50px; border: 1px solid rgba(14,14,18,.1); border-radius: var(--abra-radius); background: rgba(255,255,255,.62); color: var(--abra-muted); }
.abra-list li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); border-radius: 50%; background: var(--abra-gradient); box-shadow: 0 12px 24px rgba(192,38,211,.22); }
.abra-list li::after { content: ""; position: absolute; left: 22px; top: 50%; width: 7px; height: 11px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-62%) rotate(45deg); }
.abra-rich-copy { display: grid; gap: 16px; max-width: 920px; }
.abra-rich-copy p { margin: 0; color: var(--abra-muted); line-height: 1.78; font-size: 1.06rem; }
.abra-metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.abra-metric-row div { padding: 20px; border-radius: var(--abra-radius); border: 1px solid rgba(14,14,18,.11); background: rgba(255,255,255,.76); box-shadow: var(--abra-shadow-soft); }
.abra-metric-row strong { display: block; color: var(--abra-ink); font-size: 1.45rem; }
.abra-metric-row span { color: var(--abra-muted); }
.abra-faq .rank-math-list-item { background: rgba(255,255,255,.78); border-color: rgba(14,14,18,.12); }

@media (max-width: 900px) {
  .abra-wrap { width: min(100% - 28px, 1380px); }
  .abra-marquee-grid, .abra-service-row, .abra-metric-row { grid-template-columns: 1fr; }
  .abra-media-tile, .abra-media-tile.large { min-height: 240px; }
}