/* ===========================
   CERTIFIED (UPDATED) - FIXED
   - Logo gold ring color synced
   - Logos section motion delay removed (fix slow)
   =========================== */

:root{
  --c-text:#0f172a;
  --c-muted:#475569;

  /* Brand palette (Charcoal + Gold) */
  --c-charcoal:#0f1115;
  --c-charcoal2:#171b22;

  /* ✅ Gold used generally */
  --c-gold:#D0A030;
  --c-gold2:#C09020;

  /* ✅ Gold EXACT for logo ring (same tone as your droplet logo ring) */
  --c-logo-gold:#B08A3A;

  --c-bg:#f7f8fa;
  --c-card:#ffffff;
  --c-border: rgba(15,23,42,.08);
}

/* Hero */
.c-page-hero{
  padding: 120px 0 70px;
  background: var(--c-charcoal2);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.c-page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 50% 10%, rgba(255,255,255,.08) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.26) 45%, rgba(0,0,0,.52) 100%);
  pointer-events:none;
}
.c-page-hero > .container{ position:relative; z-index:1; }

.c-page-hero .c-hero-title{
  font-size: 48px;
  font-weight: 900;
  margin: 0 0 16px;
}
.c-page-hero .c-hero-subtitle{
  font-size: 20px;
  max-width: 900px;
  line-height: 1.8;
  opacity: .95;
  margin: 0;
}

/* Letters section */
.c-letters{
  padding: 85px 0;
  background: var(--c-bg);
}
.c-letters-head{
  text-align: center;
  margin-bottom: 40px;
}
.c-letters-title{
  font-size: 44px;
  font-weight: 900;
  margin: 0 0 10px;
  color: var(--c-text);
}
.c-letters-subtitle{
  font-size: 18px;
  line-height: 1.8;
  margin: 0;
  color: #334155;
}

/* Grid */
.c-letters-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* Card */
.c-letter-card{
  background: var(--c-card);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
  border: 1px solid rgba(15, 23, 42, .06);
  display: flex;
  flex-direction: column;
}
.c-letter-media{
  padding: 26px;
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, rgba(208,160,48,.08), #ffffff);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.c-letter-media img{
  width: 260px;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
}

/* Card body */
.c-letter-body{
  padding: 28px 26px 22px;
  flex: 1;
}
.c-quote{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  opacity: .25;
  font-size: 44px;
  line-height: 1;
}
.c-letter-text{
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.95;
  color: var(--c-text);
}
.c-letter-en{
  margin: 0;
  color: #64748b;
  font-size: 15px;
  line-height: 1.9;
}

/* Card footer */
.c-letter-footer{
  padding: 18px 26px 26px;
  border-top: 1px solid rgba(15, 23, 42, .06);
}
.c-letter-name{
  font-weight: 800;
  color: var(--c-text);
  font-size: 18px;
}
.c-letter-role{
  color: var(--c-gold2);
  font-weight: 800;
  margin-top: 4px;
}
.c-letter-date{
  color: #64748b;
  margin-top: 6px;
  font-size: 14px;
}

/* ===========================
   BEST SECTION (WHITE CARDS + SVG ICONS)
   =========================== */

.c-best.c-best--darkcards{
  padding: 85px 0;
  background: #ffffff;
}

.c-best-grid.c-best-grid--dark{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

/* Card (WHITE) */
.c-best-card{
  background: #ffffff;
  border-radius: 18px;
  padding: 26px 22px;
  box-shadow: 0 18px 50px rgba(2, 6, 23, .08);
  border: 1px solid rgba(15, 23, 42, .08);
  color: var(--c-text);
  min-height: 190px;
}

/* Icon box (for SVG) */
.c-best-icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);

  /* ✅ إطار بنفس لون الشعار */
  border: 2px solid var(--c-logo-gold);
  box-shadow:
    0 10px 22px rgba(0,0,0,.10),
    0 0 0 6px rgba(176,138,58,.10);
}
.c-best-icon svg{
  width: 26px;
  height: 26px;
  display: block;
}

/* Color variants (brand-coherent) */
.c-best-icon--blue{
  background: linear-gradient(180deg, var(--c-gold), var(--c-gold2));
}
.c-best-icon--purple{
  background: linear-gradient(180deg, var(--c-charcoal2), var(--c-charcoal));
}
.c-best-icon--teal{
  background: linear-gradient(180deg, #B8860B, var(--c-gold2));
}
.c-best-icon--indigo{
  background: linear-gradient(180deg, #2a2f38, var(--c-charcoal2));
}

.c-best-card-title{
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 10px;
}
.c-best-card-text{
  color: #475569;
  line-height: 1.9;
  margin: 0;
  font-size: 16px;
}

/* Responsive */
@media (max-width: 1100px){
  .c-best-grid.c-best-grid--dark{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px){
  .c-best-grid.c-best-grid--dark{
    grid-template-columns: 1fr;
  }
}

/* ===========================
   BLUE END CARD (Trusted by)
   + Logos Grid
   =========================== */

.c-blue-end{
  padding: 85px 0;
  background: var(--c-bg);
}

.c-blue-card{
  border-radius: 26px;
  padding: 44px 34px;
  background: #ffffff; 
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 22px 70px rgba(15,23,42,.10);
}


.c-blue-title{
  margin: 0 0 12px;
  font-size: 36px;
  font-weight: 900;
  color: var(--c-text);
}

.c-blue-text{
  margin: 0;
  max-width: 980px;
  line-height: 1.9;
  color: #334155;
  font-weight: 700;
}

/* Logos grid */
.c-logos{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.c-logo-item{
  background: #ffffff; 
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 18px 16px;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 45px rgba(15,23,42,.08);
  overflow: hidden;
  position: relative;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}


.c-logo-item::before{
  content: none;
}


.c-logo-item img{
  width: 100%;
  height: 52px;
  object-fit: contain;
  display: block;
  filter: saturate(1.02) contrast(1.02);
  position: relative;
  z-index: 1;
}

/* ✅ شعار لا يظهر — نعطيه وضوح */
.c-logo-item img[src*="orc.png"],
.c-logo-item img[src*="ORC.png"]{
  filter: invert(1) saturate(1.1) contrast(1.15);
}

/* Hover polish */
.c-logo-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 55px rgba(15,23,42,.12);
  border-color: rgba(176,138,58,.28);
}

/* Responsive */
@media (max-width: 980px){
  .c-logos{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .c-logos{ grid-template-columns: 1fr; }
  .c-logo-item img{ height: 46px; }
}

/* ===========================
   MOTION (FAST + FIX SLOW LOGOS)
   =========================== */

.js-reveal,
.js-card{
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .42s cubic-bezier(.2,.75,.2,1),
    transform .42s cubic-bezier(.2,.75,.2,1);
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity;
}

/* ✅ دخول العناصر */
.is-in{
  opacity: 1;
  transform: none;
}

/* ✅ حل البطء في سكشن الشعارات تحديداً:
   نلغي أي delay متراكم للـ logos فقط */
.c-logos .js-card{
  transition-delay: 0ms !important;
}

/* remove top gaps */
main,
section:first-of-type{
  margin-top: 0 !important;
  padding-top: 0 !important;
}