/* ============================================================
   SADRA — Homepage Redesign v3
   (photo | title | photo hero · interactive plan rows ·
    holding marquee · dark growth chart)
   Scoped to index.html only. Depends on shared styles.css.
   ============================================================ */

/* ---------- 0. Colored title highlights ---------- */
.hp-hl{color:var(--blue)}
/* hero word: shimmering red gradient text */
.hp-hl--grad{
  background:linear-gradient(120deg,#B60F24 0%,#E11D2E 35%,#FF4D6D 55%,#E11D2E 75%,#B60F24 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:hlShimmer 6s ease-in-out infinite;
}
@keyframes hlShimmer{
  0%,100%{background-position:100% 0}
  50%{background-position:0% 0}
}
/* highlighted word inside the red CTA */
.hp-cta-hl{color:#FFD9DE}

/* ---------- 1. HERO (3-column: photo | copy | photo) ---------- */
/* content starts right below the navbar — top-aligned, no dead space */
.hp-hero2{background:linear-gradient(180deg,#FFFFFF 0%,#FAF9F7 100%);
  padding-top:112px;padding-bottom:56px;align-items:flex-start}
.hp-hero2__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hp-hero2__blob{position:absolute;border-radius:50%;filter:blur(90px)}
.hp-hero2__blob--1{width:480px;height:480px;background:rgba(225,29,46,.10);top:-120px;inset-inline-start:-140px;animation:blob1 16s ease-in-out infinite alternate}
.hp-hero2__blob--2{width:420px;height:420px;background:rgba(239,68,68,.08);bottom:-140px;inset-inline-end:-120px;animation:blob2 19s ease-in-out infinite alternate}
.hp-hero2__dots{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(23,23,27,.09) 1.2px,transparent 1.2px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 0%,transparent 72%);
          mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 0%,transparent 72%);
}

/* the grid: right photo — copy — left photo (symmetric, static) */
.hp-hero2__grid{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:clamp(200px,21vw,320px) minmax(0,1fr) clamp(200px,21vw,320px);
  align-items:center;gap:clamp(20px,3.5vw,56px);
}
/* photo stacks: identical geometry, mirrored placement */
.hp-hero2__stack{position:relative;align-self:center}
.hp-hero2__stack--right{grid-column:1}
.hp-hero2__stack--left{grid-column:3}
.hp-hero2 .hero__content{grid-column:2;transform:none}

/* small floating product cutouts around each stack — levitation effect:
   frameless transparent webp; the drop-shadow hugs the product silhouette
   while it bobs, so it reads as truly suspended in mid-air */
.hp-floaty{
  position:absolute;height:clamp(64px,7vw,92px);width:auto;
  animation:miniFloat 7s ease-in-out infinite;
  pointer-events:none;
  will-change:transform,filter;
}
@keyframes miniFloat{
  0%,100%{transform:translateY(0) rotate(0);filter:drop-shadow(0 12px 9px rgba(24,24,27,.24))}
  50%{transform:translateY(-18px) rotate(0);filter:drop-shadow(0 28px 16px rgba(24,24,27,.13))}
}
/* right stack thumbs */
.hp-floaty--r1{top:-26px;left:-34px;animation-delay:0s;animation-name:miniFloatR1}
.hp-floaty--r2{bottom:22%;right:-42px;animation-delay:1.2s;animation-name:miniFloatR2}
.hp-floaty--r3{bottom:-24px;left:6%;animation-delay:2.1s;animation-name:miniFloatR3}
@keyframes miniFloatR1{
  0%,100%{transform:translateY(0) rotate(-6deg);filter:drop-shadow(0 12px 9px rgba(24,24,27,.24))}
  50%{transform:translateY(-18px) rotate(-2deg);filter:drop-shadow(0 28px 16px rgba(24,24,27,.13))}
}
@keyframes miniFloatR2{
  0%,100%{transform:translateY(0) rotate(5deg);filter:drop-shadow(0 12px 9px rgba(24,24,27,.24))}
  50%{transform:translateY(-20px) rotate(2deg);filter:drop-shadow(0 30px 16px rgba(24,24,27,.12))}
}
@keyframes miniFloatR3{
  0%,100%{transform:translateY(0) rotate(4deg);filter:drop-shadow(0 12px 9px rgba(24,24,27,.24))}
  50%{transform:translateY(-16px) rotate(7deg);filter:drop-shadow(0 26px 14px rgba(24,24,27,.14))}
}
/* left stack thumbs (mirrored) */
.hp-floaty--l1{top:-26px;right:-34px;animation-delay:.6s;animation-name:miniFloatL1}
.hp-floaty--l2{bottom:22%;left:-42px;animation-delay:1.8s;animation-name:miniFloatL2}
.hp-floaty--l3{bottom:-24px;right:6%;animation-delay:2.6s;animation-name:miniFloatL3}
@keyframes miniFloatL1{
  0%,100%{transform:translateY(0) rotate(6deg);filter:drop-shadow(0 12px 9px rgba(24,24,27,.24))}
  50%{transform:translateY(-18px) rotate(2deg);filter:drop-shadow(0 28px 16px rgba(24,24,27,.13))}
}
@keyframes miniFloatL2{
  0%,100%{transform:translateY(0) rotate(-5deg);filter:drop-shadow(0 12px 9px rgba(24,24,27,.24))}
  50%{transform:translateY(-20px) rotate(-2deg);filter:drop-shadow(0 30px 16px rgba(24,24,27,.12))}
}
@keyframes miniFloatL3{
  0%,100%{transform:translateY(0) rotate(-4deg);filter:drop-shadow(0 12px 9px rgba(24,24,27,.24))}
  50%{transform:translateY(-16px) rotate(-7deg);filter:drop-shadow(0 26px 14px rgba(24,24,27,.14))}
}
/* centered copy sizing */
.hp-hero2 .hero__title{
  font-size:clamp(2.3rem,5.2vw,4.4rem);
  font-weight:900;line-height:1.22;letter-spacing:0;color:var(--ink);
}
.hp-hero2 .hero__lead{
  font-size:clamp(1.1rem,1.7vw,1.42rem);line-height:1.95;max-width:620px;
}
.hp-hero2 .hero__lead strong{color:var(--blue)}
/* short about-us line under the slogan */
.hp-hero2__about{
  font-size:.95rem;font-weight:500;color:var(--muted);
  line-height:1.95;max-width:540px;margin:18px auto 0;
}

/* minimal 4-item box — lives inside .hero__cta with flex-basis:100%
   so it is exactly as wide as the buttons row */
.hp-hero2 .hero__cta{flex-wrap:wrap}
.hp-hero2__mini{
  flex-basis:100%;margin-top:24px;
  display:flex;align-items:stretch;justify-content:space-between;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-strong);border-radius:16px;
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.hp-hero2__mini-item{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 10px;font-size:.84rem;font-weight:600;color:var(--ink-soft);
  white-space:nowrap;
}
.hp-hero2__mini-item + .hp-hero2__mini-item{border-inline-start:1px solid var(--line)}
.hp-hero2__mini-item svg{width:16px;height:16px;color:var(--blue);flex:none}

/* ---------- 2. PARTNER BRANDS — minimal double marquee inside the hero ---------- */
.hp-hero2{position:relative;padding-bottom:clamp(140px,19vh,190px)}
.hp-brands{
  position:absolute;bottom:clamp(26px,4.5vh,48px);z-index:3;
  width:min(1560px,94%);margin-inline:auto;inset-inline:0;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:20px;
  box-shadow:0 18px 44px -22px rgba(24,24,27,.28);
  padding-block:clamp(14px,2vh,22px);
}

/* edge fades so each row melts into the strip */
.hp-brands .brands__row{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
/* rows are always visible — motion itself is the entrance.
   direction:ltr pins the max-content track to the LEFT edge on both
   fa (rtl) and en (ltr) pages, so the ±50% keyframes below behave
   identically everywhere. */
.hp-brands .brands__row{overflow:hidden;direction:ltr}
.hp-brands .brands__row + .brands__row{margin-top:12px}

/* --- seamless counter-scrolling marquee (GPU transform, keeps running on hover) ---
   track = even number of identical sets, at least 2× viewport wide (JS clones).
   top row: 0 → -50% scrolls content RIGHT→LEFT; bottom row: -50% → 0
   scrolls LEFT→RIGHT. Looping -50% ≡ 0 because both halves are identical. */
.hp-brands .brands__track{
  display:flex;width:max-content;gap:0;
  animation:hpMarqueeR 34s linear infinite;
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}
@keyframes hpMarqueeR{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@keyframes hpMarqueeL{
  from{transform:translate3d(-50%,0,0)}
  to{transform:translate3d(0,0,0)}
}
.hp-brands .brands__row--ltr .brands__track{
  animation-name:hpMarqueeL;
  animation-duration:40s;
}
/* minimal wordmarks: small, light, quietly colored */
.hp-brands .brand{
  display:inline-flex;align-items:center;
  font-size:clamp(1.05rem,1.9vw,1.5rem);font-weight:800;
  color:var(--brand-c,var(--ink));letter-spacing:0;line-height:1;
  padding-block:4px;
  filter:none;opacity:.8;white-space:nowrap;
}
.hp-brands .brand::after{
  content:"";width:5px;height:5px;flex:none;
  background:currentColor;opacity:.5;transform:rotate(45deg);border-radius:1px;
  margin-inline:clamp(22px,3vw,38px);
}

/* rainbow cycles (both rows; works for the cloned sets too) */
.hp-brands .brands__row--rtl .brand:nth-child(7n+1){--brand-c:#1428A0}
.hp-brands .brands__row--rtl .brand:nth-child(7n+2){--brand-c:#A50034}
.hp-brands .brands__row--rtl .brand:nth-child(7n+3){--brand-c:#E20015}
.hp-brands .brands__row--rtl .brand:nth-child(7n+4){--brand-c:#009999}
.hp-brands .brands__row--rtl .brand:nth-child(7n+5){--brand-c:#7C3AED}
.hp-brands .brands__row--rtl .brand:nth-child(7n+6){--brand-c:#EA580C}
.hp-brands .brands__row--rtl .brand:nth-child(7n+7){--brand-c:#CE1126}

.hp-brands .brands__row--ltr .brand:nth-child(7n+1){--brand-c:#005BAA}
.hp-brands .brands__row--ltr .brand:nth-child(7n+2){--brand-c:#00A8E0}
.hp-brands .brands__row--ltr .brand:nth-child(7n+3){--brand-c:#059669}
.hp-brands .brands__row--ltr .brand:nth-child(7n+4){--brand-c:#E30613}
.hp-brands .brands__row--ltr .brand:nth-child(7n+5){--brand-c:#00A651}
.hp-brands .brands__row--ltr .brand:nth-child(7n+6){--brand-c:#F26522}
.hp-brands .brands__row--ltr .brand:nth-child(7n+7){--brand-c:#C8102E}

/* ---------- 3. PLANS v4 (credit-card style) ---------- */
.hp-cards{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.2vw,28px);perspective:1400px;
}

/* the plan card — reads like a real bank credit card */
.hp-ccard{
  position:relative;display:flex;flex-direction:column;
  border-radius:22px;padding:26px 24px 20px;
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
  overflow:hidden;isolation:isolate;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
/* metallic sheen that sweeps across on hover */
.hp-ccard::before{
  content:"";position:absolute;top:-20%;bottom:-20%;width:44%;inset-inline-start:-60%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);z-index:1;pointer-events:none;
  transition:inset-inline-start .8s var(--ease);
}
.hp-ccard:hover{transform:translateY(-12px) rotate(-1.2deg);box-shadow:var(--shadow-xl)}
.hp-ccard:hover::before{inset-inline-start:120%}
.hp-ccard:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* card themes */
.hp-ccard--pearl{background:linear-gradient(145deg,#FFFFFF 0%,#F4F1EC 100%)}
.hp-ccard--steel{background:linear-gradient(145deg,#F7F9FB 0%,#E9EEF4 100%)}
.hp-ccard--sand{background:linear-gradient(145deg,#FCF8F1 0%,#F4EBDC 100%)}
.hp-ccard--crimson{
  background:linear-gradient(145deg,#E11D2E 0%,#8E0B1D 100%);
  border-color:transparent;box-shadow:var(--shadow-xl),var(--shadow-glow);
}

/* golden EMV chip */
.hp-ccard__chip{
  width:42px;height:32px;border-radius:7px;flex:none;
  background:linear-gradient(135deg,#F5D67B 0%,#C9A227 55%,#E8C766 100%);
  box-shadow:inset 0 0 0 1px rgba(120,90,10,.35),inset 0 6px 8px rgba(255,255,255,.5);
  position:relative;margin-bottom:20px;
}
.hp-ccard__chip::before{
  content:"";position:absolute;inset:6px 5px;
  background:
    linear-gradient(transparent 45%,rgba(120,90,10,.4) 45%,rgba(120,90,10,.4) 55%,transparent 55%),
    linear-gradient(90deg,rgba(120,90,10,.4) 1px,transparent 1px);
  background-size:100% 100%,8px 100%;
  border-radius:3px;
}

.hp-ccard__ribbon{
  position:absolute;top:18px;inset-inline-start:20px;
  font-size:.74rem;font-weight:800;letter-spacing:.03em;
  color:var(--blue);background:rgba(255,255,255,.85);
  border:1px solid rgba(225,29,46,.25);
  padding:4px 13px;border-radius:99px;z-index:2;
}
.hp-ccard__ribbon--light{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.hp-ccard__ribbon--neutral{color:var(--ink-soft);background:rgba(255,255,255,.85);border-color:var(--line-strong)}
.hp-ccard__badge{
  position:absolute;top:-13px;inset-inline-end:20px;z-index:3;
  background:#fff;color:var(--blue);
  font-size:.74rem;font-weight:800;padding:5px 15px;border-radius:99px;
  box-shadow:var(--shadow-glow);
  animation:badgePulse 2.6s ease-in-out infinite;
}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

.hp-ccard__title{
  font-size:clamp(1.15rem,1.9vw,1.45rem);font-weight:800;color:var(--ink);
  line-height:1.4;margin-bottom:16px;position:relative;z-index:2;
}
.hp-ccard__list{
  flex:1;display:flex;flex-direction:column;gap:9px;
  padding-top:16px;margin-top:2px;
  border-top:1px dashed rgba(24,24,27,.16);
  position:relative;z-index:2;
}
.hp-ccard__list li{
  position:relative;font-size:.9rem;font-weight:600;color:var(--ink-soft);
  padding-inline-start:24px;line-height:1.65;
}
.hp-ccard__list li::before{
  content:"";position:absolute;inset-inline-start:0;top:.32em;
  width:15px;height:15px;border-radius:50%;
  background:var(--grad-blue-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E11D2E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:10px;background-position:center;background-repeat:no-repeat;
}

.hp-ccard__foot{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-top:20px;position:relative;z-index:2;
}
.hp-ccard__go{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.95rem;font-weight:800;color:var(--blue);
}
.hp-ccard__go svg{width:17px;height:17px;transition:transform .4s var(--ease)}
.hp-ccard:hover .hp-ccard__go svg{transform:translateX(-5px)}
/* overlapping "network" circles — the credit-card signature */
.hp-ccard__circles{position:relative;width:52px;height:32px;flex:none}
.hp-ccard__circles::before,.hp-ccard__circles::after{
  content:"";position:absolute;top:0;width:32px;height:32px;border-radius:50%;
}
.hp-ccard__circles::before{inset-inline-start:0;background:rgba(225,29,46,.85);z-index:1}
.hp-ccard__circles::after{inset-inline-start:20px;background:rgba(24,24,27,.75);mix-blend-mode:multiply}

/* crimson variant overrides */
.hp-ccard--crimson .hp-ccard__title{color:#fff}
.hp-ccard--crimson .hp-ccard__list{border-top-color:rgba(255,255,255,.28)}
.hp-ccard--crimson .hp-ccard__list li{color:rgba(255,255,255,.9)}
.hp-ccard--crimson .hp-ccard__list li::before{
  background:rgba(255,255,255,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:10px;background-position:center;background-repeat:no-repeat;
}
.hp-ccard--crimson .hp-ccard__go{color:#fff}
.hp-ccard--crimson .hp-ccard__circles::before{background:rgba(255,255,255,.9)}
.hp-ccard--crimson .hp-ccard__circles::after{background:rgba(255,255,255,.45);mix-blend-mode:normal}
/* gentler sheen on the dark card */
.hp-ccard--crimson::before{
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
}

/* ---------- 3. STEPS + journey line ---------- */
.hp-steps__wrap{position:relative}
.hp-steps__line{
  position:absolute;top:34px;right:0;left:0;width:100%;height:70px;
  overflow:visible;pointer-events:none;
}
.hp-steps__line-track{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-dasharray:2 8;stroke-linecap:round}
.hp-steps__line-fill{
  fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;
  filter:drop-shadow(0 4px 10px rgba(225,29,46,.35));
}
.hp-steps__node{fill:#fff;stroke:var(--line-strong);stroke-width:2;transition:fill .4s,stroke .4s}
.hp-steps__node.is-lit{fill:var(--blue);stroke:var(--blue)}

.hp-steps__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);
  margin-top:96px;
}
.hp-step{
  background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:38px 32px;position:relative;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.hp-step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(225,29,46,.35)}
.hp-step__icon{
  width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
  background:var(--grad-blue-soft);color:var(--blue);margin-bottom:22px;
}
.hp-step__icon svg{width:30px;height:30px}
.hp-step__num{
  position:absolute;top:26px;inset-inline-end:28px;
  font-size:3rem;font-weight:900;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px rgba(225,29,46,.35);
}
.hp-step__title{font-size:1.3rem;font-weight:800;color:var(--ink);margin-bottom:10px}
.hp-step__text{font-size:1rem;color:var(--ink-soft);line-height:1.9}


/* ---------- 5. GROWTH — animated branch skyline (pure CSS reveal) ---------- */
.hp-growth{background:linear-gradient(180deg,#FAFAF8 0%,#FFFFFF 100%)}
.hp-growth__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:clamp(30px,4.5vh,52px);
}
.hp-growth__title{font-size:clamp(2rem,4.6vw,3.6rem)}
.hp-growth__lead{
  font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-soft);
  font-weight:500;line-height:1.9;margin-top:20px;max-width:640px;
}
.hp-growth__live{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.88rem;font-weight:700;color:var(--ink-soft);
  background:var(--surface-2);
  padding:9px 18px;border-radius:99px;flex:none;
}
.hp-growth__live-dot{
  width:8px;height:8px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 10px rgba(225,29,46,.8);animation:liveBlink 1.4s ease-in-out infinite;
}
@keyframes liveBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* the skyline: 14 storefronts rise out of the street one-by-one (RTL: first is
   rightmost). Everything is keyed off .hp-sky.is-visible — pure CSS, staggered. */
.hp-sky__stage{position:relative;overflow:hidden;padding-bottom:3px}
.hp-sky__row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(3px,.9vw,12px);min-height:clamp(96px,15vw,148px);
}
.hp-shop{
  flex:1 1 0;max-width:calc(30px + var(--i)*1.9px);
  position:relative;z-index:1;
  opacity:0;transform:translateY(108%);
  transition:opacity .5s var(--ease),transform .7s cubic-bezier(.3,1.45,.5,1);
  transition-delay:calc(.25s + var(--i)*.105s);
}
.hp-shop svg{display:block;width:100%;height:auto;color:var(--ink-soft)}
.hp-sky.is-visible .hp-shop{opacity:1;transform:none}
/* the 14th storefront is "today" — brand red with a soft endless pulse */
.hp-shop--now{max-width:56px}
.hp-shop--now svg{color:var(--blue)}
.hp-sky.is-visible .hp-shop--now::after{
  content:"";position:absolute;inset:-6px -8px;border-radius:12px;
  border:1.5px solid rgba(225,29,46,.4);
  animation:shopPulse 2.6s ease-out 2.3s infinite;
}
@keyframes shopPulse{
  0%{opacity:.9;transform:scale(.92)}
  70%{opacity:0;transform:scale(1.18)}
  100%{opacity:0;transform:scale(1.18)}
}

/* the street: draws itself right→left while a glowing rider travels it */
.hp-sky__street{position:relative;height:3px;border-radius:99px;background:rgba(24,24,27,.08)}
.hp-sky__street i{
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,#B60F24,#E11D2E);
  transform:scaleX(0);transform-origin:right;
  transition:transform 2.1s var(--ease) .15s;
}
html[dir="ltr"] .hp-sky__street i{transform-origin:left}
.hp-sky.is-visible .hp-sky__street i{transform:scaleX(1)}
.hp-sky__rider{
  position:absolute;top:50%;inset-inline-start:0;
  width:13px;height:13px;margin-top:-6.5px;border-radius:50%;
  background:#fff;border:3px solid var(--blue);
  box-shadow:0 0 14px rgba(225,29,46,.55);
  opacity:0;
}
.hp-sky.is-visible .hp-sky__rider{animation:skyRide 2.1s var(--ease) .15s forwards}
@keyframes skyRide{
  0%{opacity:0;inset-inline-start:0}
  7%{opacity:1}
  94%{opacity:1}
  100%{opacity:1;inset-inline-start:calc(100% - 13px)}
}

/* year ticks under the street, lighting up as the line passes them */
.hp-sky__years{
  display:flex;justify-content:space-between;margin-top:12px;
}
.hp-sky__years span{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:.84rem;font-weight:800;color:var(--muted);
  font-variant-numeric:tabular-nums;
  opacity:0;transform:translateY(7px);
  transition:opacity .55s var(--ease) var(--t,.2s),transform .55s var(--ease) var(--t,.2s);
}
.hp-sky__years span i{width:1.5px;height:9px;border-radius:2px;background:var(--line-strong)}
.hp-sky.is-visible .hp-sky__years span{opacity:1;transform:none}
.hp-sky__years span:last-child{color:var(--blue)}
.hp-sky__years span:last-child i{background:rgba(225,29,46,.5)}

/* milestones — frameless hairline row (no cards) */
.hp-growth__milestones{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(20px,3vw,44px);margin-top:clamp(40px,6vh,64px);
  padding-top:clamp(28px,4vh,42px);border-top:1px solid var(--line);
}
.hp-mile{
  padding-inline-start:clamp(15px,2vw,22px);
  border-inline-start:2px solid rgba(225,29,46,.16);
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.hp-mile:hover{transform:translateY(-3px);border-inline-start-color:var(--blue)}
.hp-mile__year{
  display:block;font-size:clamp(1.55rem,2.6vw,2.05rem);font-weight:900;line-height:1.25;
  color:transparent;-webkit-text-stroke:1.2px #E11D2E;
  margin-bottom:8px;font-variant-numeric:tabular-nums;
}
@supports not (-webkit-text-stroke: 1px #000){.hp-mile__year{color:#E11D2E}}
.hp-mile__year--now{color:var(--blue);-webkit-text-stroke:0}
.hp-mile__title{font-size:1.04rem;font-weight:800;color:var(--ink);margin-bottom:6px}
.hp-mile__text{font-size:.87rem;color:var(--ink-soft);line-height:1.85}

/* ---------- 5b. GROWTH — live branch network map ----------
   Transparent (alpha-keyed) 3D Iran artwork floating straight on the page
   background — no backdrop box. On top of it a geometry-matched SVG layer
   redraws the arcs (draw-in on scroll), sends light packets from Tehran HQ
   to every city, and every pin gets a radar pulse. All overlay coordinates
   were extracted from the artwork pixels (viewBox 1633x963), so they sit
   exactly on the printed arcs. */
.hp-map{margin-top:clamp(30px,5vh,56px)}
.hp-map__stage{position:relative}
.hp-map__img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 36px 44px rgba(225,29,46,.20))}

/* flows layer — plain red arcs, readable on the light page background */
.hp-map__flows{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;
}
.hp-map__flow{
  fill:none;stroke:#E11D2E;stroke-width:1.7;stroke-linecap:round;opacity:.45;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s var(--ease) var(--fd,.2s),opacity .9s var(--ease) var(--fd,.2s);
}
.hp-map.is-visible .hp-map__flow{stroke-dashoffset:0}
/* packets: SMIL animates their opacity, so the scroll gate uses visibility */
.hp-map__pkt{visibility:hidden}
.hp-map.is-visible .hp-map__pkt{visibility:visible}

/* city pins — endless radar pulse */
.hp-map__ping{
  position:absolute;left:var(--x);top:var(--y);width:4.4%;aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;z-index:3;
}
.hp-map__ping i{
  position:absolute;inset:34%;border-radius:50%;background:#FF5566;
  box-shadow:0 0 10px rgba(255,70,92,.95),0 0 24px rgba(255,45,85,.55);
}
.hp-map__ping::before,.hp-map__ping::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,92,110,.85);
  box-shadow:0 0 16px rgba(255,60,86,.6);opacity:0;
}
.hp-map__ping::before{animation:mapPing 3s cubic-bezier(.2,.55,.4,1) infinite;animation-delay:var(--pd,0s)}
.hp-map__ping::after{animation:mapPing 3s cubic-bezier(.2,.55,.4,1) infinite;animation-delay:calc(var(--pd,0s) + 1.5s)}
@keyframes mapPing{
  0%{transform:scale(.4);opacity:.95}
  70%,100%{transform:scale(1.65);opacity:0}
}

/* HQ (Tehran) — rotating radar sweep + slower double pulse */
.hp-map__hub{
  position:absolute;left:var(--x);top:var(--y);width:11%;aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;z-index:3;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,80,98,.5) 0deg,rgba(255,80,98,.12) 52deg,transparent 95deg 360deg);
  -webkit-mask-image:radial-gradient(circle,#000 0%,rgba(0,0,0,.5) 46%,transparent 68%);
          mask-image:radial-gradient(circle,#000 0%,rgba(0,0,0,.5) 46%,transparent 68%);
  animation:mapSweep 5.5s linear infinite;
}
@keyframes mapSweep{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hp-map__ping--hub{width:8.6%}
.hp-map__ping--hub::before{animation-duration:4.2s}
.hp-map__ping--hub::after{animation-duration:4.2s;animation-delay:2.1s}
.hp-map__ping--hub i{display:none}

@media (max-width:640px){
  .hp-sky__row{gap:3px;min-height:88px}
  .hp-map__ping{width:6.2%}
  .hp-map__ping--hub{width:12%}
  .hp-map__hub{width:14%}
  .hp-map__flow{stroke-width:3}
}

/* ---------- 6. Focus & keyboard ---------- */
.hp-ccard:focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;border-radius:8px;
}

/* ---------- 7. Responsive ---------- */
@media (max-width:1080px){
  /* hero: photos on top row, copy below */
  .hp-hero2__grid{grid-template-columns:1fr 1fr;gap:22px}
  .hp-hero2__stack--right{grid-column:1;grid-row:1}
  .hp-hero2__stack--left{grid-column:2;grid-row:1}
  .hp-hero2 .hero__content{grid-column:1/-1;grid-row:2;margin-top:26px}
  .hp-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .hp-steps__line{display:none}
  .hp-steps__grid{grid-template-columns:1fr;margin-top:0}
}
@media (max-width:600px){
  .hp-hero2 .hero__cta .btn{width:48%;justify-content:center;padding-inline:10px;font-size:.95rem}
  .hp-hero2__mini{flex-wrap:wrap}
  .hp-hero2__mini-item{flex:1 1 46%;border-inline-start:none!important}
  .hp-hero2__mini-item:nth-child(even){border-inline-start:1px solid var(--line)!important}
  .hp-hero2__mini-item:nth-child(n+3){border-top:1px solid var(--line)}
  .hp-floaty{display:none}
  .hp-growth__live{display:none}
  .hp-cards{grid-template-columns:1fr}
}

/* ---------- 8. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .hp-hero2__blob,.hp-ccard__badge,
  .hp-growth__live-dot,
  .hp-floaty{
    animation:none!important;
  }
  .hp-sky__street i{transition:none;transform:scaleX(1)}
  .hp-shop{opacity:1!important;transform:none!important;transition:none}
  .hp-sky__rider{animation:none!important;opacity:1;inset-inline-start:calc(100% - 13px)}
  .hp-sky__years span{opacity:1!important;transform:none!important;transition:none}
  .hp-shop--now::after{animation:none!important}
  .hp-map__ping::before,.hp-map__ping::after,.hp-map__hub{animation:none!important}
  .hp-map__ping::before{opacity:.5;transform:scale(1)}
  .hp-map__ping::after{opacity:0}
  .hp-map__flows{display:none}
  .hp-brands .brands__track{animation:none!important}
  .hp-hl--grad{animation:none!important}
  .hp-brands .brands__row{opacity:1!important;transform:none!important}
}

/* ============================================================
   SADRA GROUP — twin vertical marquee (شرکت‌هایِ گروهِ صدرا)
   Light stage matching the rest of the site; two company
   columns auto-scroll in opposite directions (pure CSS,
   seamless loop), pausing on hover. Center block holds the
   copy + count-up stats.
   ============================================================ */
.hp-partners{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#FAF9F7 30%,#FAF9F7 70%,#FFFFFF 100%)}
.hp-partners::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:radial-gradient(rgba(225,29,46,.06) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000 30%,transparent 75%)}

.partners{position:relative;display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(0,1.5fr) minmax(150px,1fr);
  align-items:center;gap:clamp(22px,4vw,54px);
  padding:clamp(26px,4vw,48px);border-radius:var(--radius-lg);
  border:1px solid var(--line-strong);
  background:var(--glass-bg-strong);
  box-shadow:var(--shadow);
  overflow:hidden;isolation:isolate}
.partners__aura{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.partners__aura--a{width:420px;height:420px;top:-180px;inset-inline-start:-120px;
  background:rgba(225,29,46,.10);animation:partnersDrift 11s ease-in-out infinite alternate}
.partners__aura--b{width:380px;height:380px;bottom:-170px;inset-inline-end:-100px;
  background:rgba(190,18,60,.08);animation:partnersDrift 13s ease-in-out infinite alternate-reverse}
@keyframes partnersDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,26px,0) scale(1.12)}}

/* ---------- vertical columns ---------- */
.partners__col{position:relative;z-index:1;height:clamp(380px,56vh,560px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.partners__track{display:flex;flex-direction:column;gap:14px;
  animation:partnersScroll 26s linear infinite}
.partners__track--rev{animation-name:partnersScrollRev;animation-duration:31s}
@keyframes partnersScroll{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@keyframes partnersScrollRev{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.partners:hover .partners__track{animation-play-state:paused}

.partners__tile{
  flex:none;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:84px;padding:12px 20px;border-radius:16px;
  font-weight:900;font-size:1.15rem;line-height:1.5;
  color:var(--ink);
  background:linear-gradient(180deg,#FFFFFF,#F7F7F9);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease)}
.partners__tile:hover{
  transform:scale(1.05);color:var(--blue);
  border-color:rgba(225,29,46,.45);
  box-shadow:var(--shadow-glow)}

/* one cheerful pastel per group company */
.partners__tile--sadralon{
  background:linear-gradient(180deg,#E0F2FE,#DBEAFE);
  border-color:#BAE6FD;color:#0369A1}
.partners__tile--sadralon:hover{
  color:#075985;border-color:#7DD3FC;
  box-shadow:0 14px 30px -14px rgba(14,165,233,.5)}
.partners__tile--peykh{
  background:linear-gradient(180deg,#DCFCE7,#D1FAE5);
  border-color:#BBF7D0;color:#15803D}
.partners__tile--peykh:hover{
  color:#166534;border-color:#86EFAC;
  box-shadow:0 14px 30px -14px rgba(22,163,74,.5)}
.partners__tile--gold{
  background:linear-gradient(180deg,#FEF9C3,#FDE68A);
  border-color:#FDE68A;color:#B45309}
.partners__tile--gold:hover{
  color:#92400E;border-color:#FCD34D;
  box-shadow:0 14px 30px -14px rgba(217,119,6,.5)}
.partners__tile--stores{
  background:linear-gradient(180deg,#FFE4E6,#FECDD3);
  border-color:#FECDD3;color:#BE123C}
.partners__tile--stores:hover{
  color:#9F1239;border-color:#FDA4AF;
  box-shadow:0 14px 30px -14px rgba(225,29,46,.5)}

/* ---------- center copy ---------- */
.partners__center{position:relative;z-index:1;text-align:center;padding:10px 0}
.partners__title{margin-bottom:10px}
.partners__lead{max-width:44ch;margin:0 auto;color:var(--ink-soft);
  font-size:.98rem;line-height:1.85;font-weight:500}
.partners__stats{display:flex;justify-content:center;gap:clamp(18px,3vw,34px);
  margin-top:26px;flex-wrap:wrap}
.partners__stat{display:flex;flex-direction:column;align-items:center;gap:3px}
.partners__stat-num{
  font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:900;line-height:1.1;color:var(--ink);
  letter-spacing:-.02em}
.partners__stat-label{font-size:.82rem;font-weight:700;color:var(--muted)}

/* ---------- responsive & motion preferences ---------- */
@media (max-width:900px){
  .partners{grid-template-columns:1fr 1.6fr 1fr;gap:14px;padding:20px}
  .partners__tile{min-height:64px;padding:10px 12px;font-size:1rem;border-radius:12px}
  .partners__col{height:clamp(340px,48vh,460px)}
}
@media (max-width:640px){
  .partners{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .partners__center{grid-column:1/-1;order:-1}
  .partners__col{height:300px}
  .partners__tile{min-height:56px;font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  .partners__track,.partners__aura{animation:none}
}

/* ============================================================
   PRODUCT CATEGORIES — pastel grid (فروشگاهِ صدرا)
   Six store category cards, each with its own cheerful
   pastel accent (same palette as the group tiles).
   ============================================================ */
.hp-cats{background:linear-gradient(180deg,#FFFFFF,#FAF9F7 55%,#FFFFFF)}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cat{
  --c1:#FFE4E6;--c2:#FECDD3;--ct:#BE123C;
  position:relative;display:flex;flex-direction:column;
  padding:26px 24px 20px;border-radius:20px;background:#fff;
  border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);
  text-decoration:none;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.cat:hover{transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--ct) 45%,transparent);
  box-shadow:0 22px 44px -18px color-mix(in srgb,var(--ct) 42%,transparent)}
.cat:focus-visible{outline:2px solid var(--ct);outline-offset:3px}
.cat__icon{
  width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:10px;
  background:linear-gradient(135deg,var(--c1),var(--c2));color:var(--ct);
  box-shadow:0 10px 22px -10px color-mix(in srgb,var(--ct) 55%,transparent);
  transition:transform .45s var(--ease)}
.cat__icon svg{width:26px;height:26px}
.cat:hover .cat__icon{transform:scale(1.08) rotate(-5deg)}
.cat__name{font-size:1.15rem;font-weight:900;color:var(--ink);letter-spacing:-.01em}
.cat__desc{font-size:.88rem;color:var(--ink-soft);line-height:1.75;font-weight:500;margin-top:4px}
.cat__count{
  display:inline-flex;align-self:flex-start;margin-top:12px;
  font-size:.75rem;font-weight:800;padding:5px 12px;border-radius:99px;
  background:var(--c1);color:var(--ct);
  border:1px solid color-mix(in srgb,var(--ct) 22%,transparent)}
.cat__go{
  margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:7px;
  font-size:.9rem;font-weight:800;color:var(--muted);transition:color .3s}
.cat:hover .cat__go{color:var(--ct)}
.cat__go svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.cat:hover .cat__go svg{transform:translateX(-4px)}
[dir="ltr"] .cat:hover .cat__go svg{transform:translateX(4px)}
.cat--rose{--c1:#FFE4E6;--c2:#FECDD3;--ct:#BE123C}
.cat--sky{--c1:#E0F2FE;--c2:#DBEAFE;--ct:#0369A1}
.cat--violet{--c1:#EDE9FE;--c2:#DDD6FE;--ct:#6D28D9}
.cat--amber{--c1:#FEF9C3;--c2:#FDE68A;--ct:#B45309}
.cat--green{--c1:#DCFCE7;--c2:#D1FAE5;--ct:#15803D}
.cat--cyan{--c1:#CFFAFE;--c2:#A5F3FC;--ct:#0E7490}
@media (max-width:900px){.cats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cats{grid-template-columns:1fr}}

/* ============================================================
   TESTIMONIALS — auto-rotating slider (مشتریانِ صدرا)
   Slides stacked in one grid cell; active slide fades/rises
   in. Auto-advances every 6s (JS), pauses on hover, arrows +
   dots. Auto-rotation is disabled for reduced motion.
   ============================================================ */
.hp-tst{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF,#FAF9F7 55%,#FFFFFF)}
.hp-tst::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(225,29,46,.06) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000 30%,transparent 78%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 45%,#000 30%,transparent 78%)}
.tst{position:relative;max-width:780px;margin:0 auto;display:grid;isolation:isolate}
.tst__slide{
  grid-area:1/1;opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  pointer-events:none;
  background:var(--glass-bg-strong);border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:clamp(26px,4vw,42px);text-align:center}
.tst__slide.is-active{opacity:1;transform:none;pointer-events:auto;z-index:1}
.tst__stars{display:inline-flex;gap:3px;color:#F59E0B;margin-bottom:16px}
.tst__stars svg{width:18px;height:18px}
.tst__stars svg.is-off{color:#E5E7EB}
.tst__quote{font-size:clamp(1.05rem,2.2vw,1.3rem);font-weight:600;line-height:2;color:var(--ink);max-width:52ch;margin:0 auto}
.tst__who{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px}
.tst__avatar{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  font-weight:900;font-size:1.1rem;flex:none;
  box-shadow:var(--shadow-sm)}
.tst__avatar--rose{background:linear-gradient(135deg,#FFE4E6,#FECDD3);color:#BE123C}
.tst__avatar--sky{background:linear-gradient(135deg,#E0F2FE,#DBEAFE);color:#0369A1}
.tst__avatar--green{background:linear-gradient(135deg,#DCFCE7,#D1FAE5);color:#15803D}
.tst__avatar--amber{background:linear-gradient(135deg,#FEF9C3,#FDE68A);color:#B45309}
.tst__name{text-align:start;line-height:1.5}
.tst__name b{display:block;font-size:.95rem;color:var(--ink)}
.tst__name span{font-size:.8rem;color:var(--muted);font-weight:600}
.tst__nav{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:12px;margin-top:26px}
.tst__dot{
  width:9px;height:9px;border-radius:99px;border:none;cursor:pointer;padding:0;
  background:var(--muted-2);transition:all .4s var(--ease)}
.tst__dot.is-active{width:26px;background:var(--blue)}
.tst__dot:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tst__arrow{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:#fff;border:1px solid var(--line-strong);color:var(--ink-soft);
  transition:all .35s var(--ease)}
.tst__arrow:hover{color:var(--blue);border-color:rgba(225,29,46,.4);box-shadow:var(--shadow-glow)}
.tst__arrow:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tst__arrow svg{width:17px;height:17px}