/* Shared FIKRA accent palette. Keep buttons solid for clear, readable labels. */
:root {
  --fikra-accent: #005bea;
  --fikra-accent-hover: #0047bd;
  --fikra-glow-violet: #7465e8;
  --fikra-glow-cyan: #75d5f0;
  --relume-library-lite--cw-pink: var(--fikra-accent);
}
.proposal-cta:hover, .fikra-header-book:hover, .fikra-footer-cta:hover,
.fikra-action:hover:not(:disabled), .seo-cta:hover { background: var(--fikra-accent-hover); }
/* Local, static grain: no image dependency or additional animation. */
#home .fikra-vsl { position: relative; isolation: isolate; background: transparent; }
#home .fikra-vsl::before, #home .fikra-vsl::after {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
  inset: -38px -18px; border-radius: 40px;
}
#home .fikra-vsl::before {
  background: radial-gradient(ellipse at 15% 38%, #7465e842, transparent 64%),
              radial-gradient(ellipse at 88% 65%, #75d5f05c, transparent 62%);
  filter: blur(18px);
}
#home .fikra-vsl::after {
  background: url('/assets/brand-grain.svg'); opacity: .13;
  mask-image: radial-gradient(ellipse, #000 38%, transparent 72%);
}
.fikra-vsl-placeholder {
  background: radial-gradient(ellipse at 0 100%, #7465e81c, transparent 65%),
              radial-gradient(ellipse at 100% 100%, #75d5f01a, transparent 65%);
}
@media(max-width:479px) {
  #home .fikra-vsl::before, #home .fikra-vsl::after { inset: -24px -8px; }
}
.navbar-logo-left .cta-button-with-image { background: var(--fikra-accent); }
.navbar-logo-left .cta-button-with-image:hover { background: var(--fikra-accent-hover); }
.proposal-final .proposal-kicker { color: var(--fikra-glow-cyan); }

#home h1 .hero-delivery { display:block; color:var(--fikra-accent); }

/* Larger hero headline, retaining comfortable wrapping on narrow screens. */
#home .editorial-hero-copy h1 { max-width:1050px; margin-inline:auto; text-align:center; font-size:clamp(48px,5vw,72px); }
@media(max-width:767px) { #home .editorial-hero-copy h1 { font-size:clamp(42px,10.5vw,60px); } }

#home .editorial-hero-copy .proposal-kicker { margin-inline:auto; text-align:center; }

/* Solutions follow the hero and use the site's existing paper and blue palette. */
#home .fikra-solutions-jump { display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 8px; color: var(--fikra-accent); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.fikra-solutions { background: #f7f6f2; }
.fikra-solutions-intro { color: #534f47; }
.fikra-solutions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.fikra-solution { min-width: 0; background: #fffdf9; border-color: #dedad1; padding: 28px; }
.fikra-solution-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 24px; border: 1px solid #005bea26; border-radius: 8px; background: #005bea0a; color: var(--fikra-accent); }
.proposal .fikra-solution h3 { font-size: 21px; line-height: 1.4; }
.fikra-solutions-actions { margin-top: 32px; }
html[dir="rtl"] .fikra-solutions { text-align: right; }
@media (max-width: 900px) { .fikra-solutions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fikra-solutions-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 28px; } .fikra-solution { padding: 24px; } .fikra-solution-icon { margin-bottom: 18px; } }
.fikra-payment-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 22px; }
.fikra-payment-logos img { display: block; width: auto; height: 48px; max-width: 100%; object-fit: contain; }
.proposal .fikra-solution .fikra-payment-note { margin-top: 14px; font-size: 12px; line-height: 1.6; color: #69645c; }

.fikra-solution-icon svg { display: block; flex: none; }
.fikra-solution-link { display: inline-block; margin-top: 20px; color: var(--fikra-accent); font-size: 14px; font-weight: 600; line-height: 1.6; text-decoration: underline; text-underline-offset: 4px; }
.fikra-about { background: #f0f3f6; }
.fikra-about .proposal-container { max-width: 980px; }
.fikra-about .proposal-intro { max-width: 780px; }
.fikra-outcomes-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin: 36px 0; }
.fikra-outcome-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid #d8dfe8; border-radius: 16px; background: #fff; }
.proposal .fikra-outcome-card h3 { margin: 0 0 16px; font-size: 23px; line-height: 1.45; }
.proposal .fikra-outcome-card > p { margin: 0 0 26px; font-size: 16px; line-height: 1.8; color: #534f47; }
.fikra-outcome-proof { margin-top: auto; padding-top: 20px; border-top: 1px solid #d8dfe8; }
.fikra-outcome-proof > span { color: #005bea; font-size: 13px; font-weight: 600; }
.proposal .fikra-outcome-proof blockquote { margin: 12px 0; padding: 0; border: 0; font-size: 16px; line-height: 1.8; }
.fikra-outcome-proof cite { font-size: 14px; font-style: normal; font-weight: 700; }
@media (max-width: 767px) { .fikra-outcomes-grid { grid-template-columns: minmax(0,1fr); gap: 16px; } }

/* Shopify platform introduction within the ecommerce solutions section. */
.fikra-shopify-platform { display: grid; grid-template-columns: 240px minmax(0,1fr); align-items: center; gap: 44px; margin-top: 32px; padding: 36px 40px; border: 1px solid #dedad1; border-radius: 14px; background: #fffdf9; }
.fikra-shopify-logo { display: flex; align-items: center; justify-content: center; padding: 24px 12px; border-radius: 8px; }
.fikra-shopify-logo:focus-visible { outline: 2px solid var(--fikra-accent); outline-offset: 5px; }
.fikra-shopify-logo img { display: block; width: 210px; max-width: 100%; height: auto; }
.proposal .fikra-shopify-platform .proposal-kicker { margin: 0 0 12px; color: var(--fikra-accent); }
.proposal .fikra-shopify-platform h3 { margin: 0 0 14px; font-size: clamp(24px,2.4vw,32px); line-height: 1.35; }
.proposal .fikra-shopify-platform > div > p:last-child { max-width: 640px; margin: 0; color: #534f47; font-size: 16px; line-height: 1.7; }
@media (max-width: 767px) {
  .fikra-shopify-platform { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 28px 24px; }
  .fikra-shopify-logo { justify-self: start; padding: 12px 0; }
  .fikra-shopify-logo img { width: 180px; }
}