/* =========================================================
   Ibrahim Zidan — Mint Light Professional Theme
   Visual override only
   ========================================================= */

:root{
  --iz-bg:#f3fcf9;
  --iz-bg-soft:#e8f7f2;
  --iz-surface:#ffffff;
  --iz-surface-soft:#f7fffc;

  --iz-text:#173f3a;
  --iz-heading:#073f39;
  --iz-muted:#5e7b76;

  --iz-primary:#087f71;
  --iz-primary-dark:#05675e;
  --iz-primary-light:#26aa95;

  --iz-accent:#54c8b2;
  --iz-line:rgba(8,127,113,.17);
  --iz-line-strong:rgba(8,127,113,.30);

  --iz-shadow-lg:
    0 24px 60px rgba(19,83,74,.12),
    0 5px 16px rgba(19,83,74,.05);

  --iz-shadow-md:
    0 16px 38px rgba(19,83,74,.10),
    0 3px 12px rgba(19,83,74,.04);

  --iz-shadow-sm:
    0 8px 24px rgba(19,83,74,.08);
}

html{
  color-scheme:light;
}

body{
  background:
    radial-gradient(
      circle at 8% 8%,
      rgba(65,195,171,.15),
      transparent 25%
    ),
    radial-gradient(
      circle at 93% 12%,
      rgba(119,223,202,.13),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #f9fffd 0%,
      #edf9f5 48%,
      #f8fffc 100%
    ) !important;

  color:var(--iz-text) !important;
}

body,
p,
li,
label{
  color:var(--iz-text);
}

a{
  color:inherit;
}

::selection{
  background:rgba(8,127,113,.18);
  color:var(--iz-heading);
}

/* =========================================================
   Top bar
   ========================================================= */

.topBar{
  background:rgba(255,255,255,.90) !important;
  border-bottom:1px solid var(--iz-line) !important;

  box-shadow:
    0 8px 26px rgba(19,83,74,.08) !important;

  backdrop-filter:blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(150%) !important;
}

.crumb,
.crumb a{
  color:var(--iz-muted) !important;
}

.crumb a:hover{
  color:var(--iz-primary-dark) !important;
}

.miniBtn{
  background:#ffffff !important;
  color:var(--iz-primary-dark) !important;
  border-color:var(--iz-line-strong) !important;
  box-shadow:0 5px 15px rgba(19,83,74,.05);
}

.miniBtn:hover{
  background:var(--iz-surface-soft) !important;
  border-color:var(--iz-primary) !important;
}

/* =========================================================
   Hero
   ========================================================= */

.heroContent{
  background:
    radial-gradient(
      circle at top left,
      rgba(60,192,168,.17),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(239,251,247,.96)
    ) !important;

  border-color:var(--iz-line-strong) !important;
  box-shadow:var(--iz-shadow-lg) !important;
}

.heroContent::before{
  background:
    linear-gradient(
      135deg,
      transparent,
      rgba(8,127,113,.035)
    ) !important;
}

.eyebrow{
  background:rgba(8,127,113,.10) !important;
  border-color:rgba(8,127,113,.22) !important;
  color:var(--iz-primary-dark) !important;
}

.heroTitle{
  color:var(--iz-heading) !important;
}

.heroText{
  color:var(--iz-muted) !important;
}

.statCard{
  background:rgba(255,255,255,.86) !important;
  border-color:var(--iz-line) !important;
  box-shadow:0 6px 18px rgba(19,83,74,.05);
}

.statNumber{
  color:var(--iz-primary-dark) !important;
}

.statLabel{
  color:var(--iz-muted) !important;
}

.badge{
  background:rgba(8,127,113,.08) !important;
  border-color:rgba(8,127,113,.22) !important;
  color:var(--iz-primary-dark) !important;
}

.heroLinks a{
  color:var(--iz-muted) !important;
}

.heroLinks a:hover{
  color:var(--iz-primary-dark) !important;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn{
  background:#ffffff !important;
  color:var(--iz-primary-dark) !important;
  border-color:var(--iz-line-strong) !important;
  box-shadow:0 6px 17px rgba(19,83,74,.06);
}

.btn:hover{
  border-color:var(--iz-primary) !important;
  box-shadow:0 10px 24px rgba(19,83,74,.10);
}

.btn.primary{
  background:
    linear-gradient(
      135deg,
      var(--iz-primary-dark),
      var(--iz-primary-light)
    ) !important;

  color:#ffffff !important;
  border-color:transparent !important;

  box-shadow:
    0 12px 28px rgba(8,127,113,.22),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.btn.primary:hover{
  box-shadow:
    0 16px 34px rgba(8,127,113,.28),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.btn.secondary{
  background:
    linear-gradient(
      135deg,
      rgba(43,177,151,.13),
      rgba(91,208,185,.09)
    ) !important;

  color:var(--iz-primary-dark) !important;
  border-color:rgba(8,127,113,.25) !important;
}

/* =========================================================
   Main cards
   ========================================================= */

.portraitCard,
.quickPanel,
.panel{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(247,255,252,.97)
    ) !important;

  border-color:var(--iz-line) !important;
  box-shadow:var(--iz-shadow-md) !important;
}

.portraitWrap{
  background:
    linear-gradient(
      180deg,
      #eef9f6,
      #ffffff
    ) !important;
}

.portraitMeta{
  border-top-color:var(--iz-line) !important;
}

.portraitMeta strong,
.quickPanel h2{
  color:var(--iz-heading) !important;
}

.portraitMeta span{
  color:var(--iz-muted) !important;
}

/* =========================================================
   Jump navigation
   ========================================================= */

.jumpNav{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.97),
      rgba(237,250,246,.95)
    ) !important;

  border-color:var(--iz-line) !important;
  box-shadow:var(--iz-shadow-sm) !important;
}

.jumpNav a{
  background:#ffffff !important;
  color:var(--iz-primary-dark) !important;
  border-color:var(--iz-line) !important;
}

.jumpNav a:hover{
  background:rgba(8,127,113,.08) !important;
  border-color:var(--iz-primary) !important;
}

/* =========================================================
   Section headings
   ========================================================= */

.sectionKicker{
  background:rgba(8,127,113,.09) !important;
  border-color:rgba(8,127,113,.22) !important;
  color:var(--iz-primary-dark) !important;
}

.sectionTitle{
  color:var(--iz-heading) !important;
}

.lead{
  color:var(--iz-text) !important;
}

/* =========================================================
   Standard cards
   ========================================================= */

.startCard,
.pillarCard,
.hubCard,
.trustCard,
.finalCard,
.serviceCard,
.articleGroup,
.metric,
.quoteCard,
.comingSoonCard{
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f7fffc
    ) !important;

  border-color:var(--iz-line) !important;
  box-shadow:0 7px 22px rgba(19,83,74,.055);
}

.startCard h3,
.pillarCard h3,
.hubCard h3,
.trustCard h3,
.finalCard h3,
.serviceCard h3{
  color:var(--iz-primary-dark) !important;
}

.startCard p,
.pillarCard p,
.hubCard p,
.trustCard p,
.finalCard p,
.serviceCard p,
.comingSoonCard p{
  color:var(--iz-muted) !important;
}

.textLink{
  color:var(--iz-primary-dark) !important;
}

/* =========================================================
   Featured article
   ========================================================= */

.featuredPanel .featuredArticleCard{
  background:
    radial-gradient(
      circle at top left,
      rgba(8,127,113,.13),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #edf9f5
    ) !important;

  border-color:var(--iz-line-strong) !important;
  box-shadow:var(--iz-shadow-sm);
}

.featuredPanel .featuredArticleCard:hover{
  border-color:var(--iz-primary) !important;
}

.featuredTag{
  background:rgba(8,127,113,.10) !important;
  border-color:rgba(8,127,113,.22) !important;
  color:var(--iz-primary-dark) !important;
}

.featuredContent h3{
  color:var(--iz-heading) !important;
}

.featuredContent p{
  color:var(--iz-text) !important;
}

.featuredCta{
  color:var(--iz-primary-dark) !important;
}

/* =========================================================
   Metrics
   ========================================================= */

.metric strong{
  color:var(--iz-primary-dark) !important;
}

.metric span{
  color:var(--iz-muted) !important;
}

/* =========================================================
   Article groups
   ========================================================= */

.articleGroupHead h3{
  color:var(--iz-heading) !important;
}

.articleFeatured,
.articleLink{
  border-color:var(--iz-line) !important;
}

.articleFeatured:hover,
.articleLink:hover{
  border-color:var(--iz-primary) !important;
}

.articleFeatured{
  background:
    linear-gradient(
      145deg,
      rgba(8,127,113,.09),
      rgba(255,255,255,.98)
    ) !important;
}

.articleFeatured .label{
  background:rgba(8,127,113,.10) !important;
  border-color:rgba(8,127,113,.22) !important;
  color:var(--iz-primary-dark) !important;
}

.articleFeatured h4{
  color:var(--iz-heading) !important;
}

.articleFeatured p{
  color:var(--iz-text) !important;
}

.articleFeatured small,
.articleLink small{
  color:var(--iz-muted) !important;
}

.articleLink{
  background:#ffffff !important;
  color:var(--iz-primary-dark) !important;
  box-shadow:0 5px 16px rgba(19,83,74,.05);
}

.comingSoonCard{
  border-style:dashed !important;
  border-color:rgba(8,127,113,.30) !important;
}

.comingSoonCard strong{
  color:var(--iz-heading) !important;
}

/* =========================================================
   Quotes
   ========================================================= */

.quoteCard{
  color:var(--iz-heading) !important;
  border-inline-start:4px solid var(--iz-primary) !important;
}

/* =========================================================
   Footer
   ========================================================= */

.siteFooter{
  background:
    linear-gradient(
      180deg,
      rgba(230,247,242,.88),
      rgba(216,241,234,.97)
    ) !important;

  border-top-color:var(--iz-line) !important;
}

.footerInner{
  color:var(--iz-muted) !important;
}

/* =========================================================
   WhatsApp
   ========================================================= */

.whatsappFloat{
  box-shadow:
    0 14px 30px rgba(18,140,126,.25) !important;
}

/* =========================================================
   Accessibility
   ========================================================= */

:focus{
  outline:none;
}

:focus-visible{
  outline:3px solid rgba(8,127,113,.25) !important;
  outline-offset:3px !important;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width:620px){

  .heroContent,
  .panel,
  .quickPanel,
  .portraitCard{
    box-shadow:
      0 10px 26px rgba(19,83,74,.08) !important;
  }

  .topBar{
    background:rgba(255,255,255,.96) !important;
  }

  .jumpNav{
    padding:12px !important;
  }
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}