/* ============================================================
   ADDRESS CIRCLE — presentation.css v13
   Fixed: S2 image sizes, S4 pixel-perfect, modern animations
   Mogrash titles | Gotham body | Cairo Arabic | no bold
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
ul,ol,li,nav{list-style:none!important;padding-left:0!important}

/* ── GLOBAL FONT RULES ── */
h1,h2,h3,h4,h5,h6,
.s4-title,.s8-hdr,
.s2-num10,.s2-hash1,
.s7-main{
  font-family:'Mogrash','Playfair Display',sans-serif !important;
  font-weight:400 !important;
}
body,p,span,div,a,li,button,
.sfooter,.stopbar-lbl,
.s2-word,.s2-sub,
.s3-tl-num,.s3-tr-text,.s3-bl-text,.s3-br-num,.s3-desc,
.bct,.bct em,.bct-uae,
.s5-tagline,.s5-sub,.s5-btxt,
.earn-text,
.s7-months,.s7-item,
.ji-label,.jd,
.s9-label,.s9-email{
  font-family:'Gotham','Montserrat',sans-serif !important;
  font-weight:400 !important;
}
.ar-text,#deck-ar *{
  font-family:'Cairo',sans-serif !important;
  font-weight:400 !important;
}
strong,b{font-weight:400 !important}

:root{
  --red:#c42218;--red2:#e02b1e;
  --black:#050302;--black2:#0a0504;
  --white:#fff;
  --w80:rgba(255,255,255,.80);--w60:rgba(255,255,255,.60);
  --w40:rgba(255,255,255,.40);--w20:rgba(255,255,255,.20);

  --size-footer:11px;
  --size-stopbar_lbl:1vw;
  --size-s1_logo:10vh;
  --size-s2_tagline:1.8vw;
  --size-s2_num10:9.5vw;
  --size-s2_hash1:9.5vw;
  --size-s2_sub:1.3vw;
  --size-s3_tl_num:5.2vw;
  --size-s3_tr_text:4.8vw;
  --size-s3_bl_text:4.5vw;
  --size-s3_br_num:4.8vw;
  --size-s3_desc:1.05vw;
  --size-s4_title:4vw;
  --size-s4_cards:1vw;
  --size-s4_uae:2vw;
  --size-s5_logo_h:40vh;
  --size-s5_tagline:2vw;
  --size-s5_sub:1.3vw;
  --size-s5_bullet:1.3vw;
  --size-s6_logo_h:14vh;
  --size-s6_earn:3.8vw;
  --size-s7_logo_h:5.5vmin;
  --size-s7_main:3.8vw;
  --size-s7_months:1.2vw;
  --size-s7_corners:1.2vw;
  --size-s8_hdr:3.2vw;
  --size-s8_circle:0.8vw;
  --size-s8_step_desc:0.8vw;
  --size-s8_icon_h:9vmin;
  --size-s9_contact:2vw;
  --size-s9_label:1.2vw;

  --pad-h:clamp(20px,4vw,60px);
  --pad-top:clamp(14px,2.5vh,26px);
  --pad-bot:clamp(14px,2.5vh,24px);
  --radius-card:clamp(14px,1.8vw,24px);
}

html{overflow:hidden;height:100%}
body{background:var(--black);color:var(--white);width:100vw;height:100vh;overflow:hidden;cursor:none;user-select:none;padding:0!important;margin:0!important;-webkit-font-smoothing:antialiased}
@media(hover:none){#cur,#cur2{display:none}body{cursor:auto}}
#cur{position:fixed;width:12px;height:12px;background:var(--red2);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:screen}
#cur2{position:fixed;width:36px;height:36px;border:1px solid rgba(196,34,24,.45);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:left .07s,top .07s}
#particles{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ── Language Switcher ── */
#lang-switch{position:fixed;top:clamp(14px,2.5vh,26px);left:50%;transform:translateX(-50%);z-index:500;display:flex;align-items:center;gap:10px;background:rgba(5,3,2,.75);border:1px solid rgba(196,34,24,.3);border-radius:30px;padding:5px 18px;backdrop-filter:blur(8px)}
.lang-btn{background:none;border:none;cursor:pointer;font-size:12px;letter-spacing:.12em;color:var(--w40);transition:color .3s;padding:4px 0}
.lang-btn.active{color:var(--red2)}
.lang-btn:hover{color:var(--white)}
.lang-div{color:var(--w20);font-size:11px}

/* ── Decks ── */
#deck-en,#deck-ar{position:fixed;inset:0;z-index:1;width:100%;height:100%;position:relative}
.deck{display:none}
.deck.active-deck{display:block}
.slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .65s cubic-bezier(.4,0,.2,1);overflow:hidden;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
.slide.active{opacity:1;pointer-events:all}
.slide::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.038'/%3E%3C/svg%3E");background-size:200px;pointer-events:none;z-index:2}

/* Nav */
#nav{position:fixed;bottom:clamp(14px,2.2vh,28px);left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:300;list-style:none!important;padding:0;margin:0}
.ndot{width:6px;height:6px;border-radius:50%;background:var(--w20);cursor:pointer;transition:all .3s;list-style:none!important}
.ndot.on{background:var(--red2);transform:scale(1.9)}
#arr-l,#arr-r{position:fixed;top:50%;transform:translateY(-50%);z-index:300;background:none;border:none;cursor:pointer;color:var(--w40);font-size:clamp(14px,1.8vw,22px);padding:14px;transition:color .3s;touch-action:manipulation}
#arr-l:hover,#arr-r:hover{color:var(--red2)}
#arr-l{left:6px}#arr-r{right:6px}
#slide-num{position:fixed;bottom:clamp(14px,2.2vh,28px);right:clamp(14px,2vw,34px);z-index:300;font-size:var(--size-footer);letter-spacing:.35em;color:var(--w40)}

/* Shared bars */
.sfooter{position:absolute;bottom:0;left:0;right:0;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-h) var(--pad-bot);font-size:var(--size-footer);letter-spacing:.18em;color:var(--w40)}
.stopbar{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:var(--pad-top) var(--pad-h) 0}
.stopbar-lbl{font-size:var(--size-stopbar_lbl);letter-spacing:.1em;color:var(--w60)}
.stopbar-logo{height:clamp(18px,2.8vh,32px);width:auto;object-fit:contain}
.s4-topbar{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;justify-content:flex-end;padding:var(--pad-top) var(--pad-h) 0}

/* Arabic RTL overrides */
#deck-ar .stopbar{direction:rtl}
#deck-ar .sfooter{direction:rtl}
#deck-ar .s4-inner{direction:rtl}
#deck-ar .s5-upper{direction:rtl}
#deck-ar .s5-tag-block{text-align:right}
#deck-ar .s6-content{direction:rtl}
#deck-ar .s6-right{align-items:flex-start;text-align:right}
#deck-ar .s8-inner{direction:rtl}
#deck-ar .s8-headers::after{left:auto;right:50%}
#deck-ar .s8-row{flex-direction:row-reverse}
#deck-ar .s3-grid{direction:rtl}
#deck-ar .s3-cell{text-align:right}

/* ═══════════════════════════════════
   ANIMATIONS
═══════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes glow-breathe{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes pulse-ring{0%,100%{box-shadow:0 0 40px rgba(196,34,24,.5),0 0 80px rgba(196,34,24,.2)}50%{box-shadow:0 0 70px rgba(196,34,24,.9),0 0 130px rgba(196,34,24,.4)}}
@keyframes card-pop{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}

/* S7 corner animation */
.s7-anim{opacity:0;transition:opacity .55s ease,transform .55s cubic-bezier(.34,1.2,.64,1)}
.s7-anim[data-dir="tl"]{transform:translate(-50px,-40px)}
.s7-anim[data-dir="bl"]{transform:translate(-50px,40px)}
.s7-anim[data-dir="tr"]{transform:translate(50px,-40px)}
.s7-anim[data-dir="br"]{transform:translate(50px,40px)}
.s7-anim.arrived{opacity:1;transform:translate(0,0)}
.s7-anim[data-dir="tl"].arrived{transition-delay:0s}
.s7-anim[data-dir="tr"].arrived{transition-delay:.12s}
.s7-anim[data-dir="bl"].arrived{transition-delay:.24s}
.s7-anim[data-dir="br"].arrived{transition-delay:.36s}

/* S4 card pop-in */
.bcard-pop{opacity:0;animation:card-pop .5s cubic-bezier(.34,1.3,.64,1) forwards}

/* ══════════ S1 ══════════ */
#en-s1,#ar-s1{background:var(--black)}
.s1-glow{position:absolute;width:56vw;height:56vw;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(170,22,10,.9) 0%,rgba(110,12,6,.5) 35%,transparent 68%);top:-20vw;left:-18vw;animation:glow-breathe 7s ease-in-out infinite;z-index:1}
.s1-content{position:relative;z-index:3;text-align:center;animation:fadeUp 1s ease both}
.s1-logo-img{height:var(--size-s1_logo);width:auto;object-fit:contain;max-width:80vw;max-height:60vh}

/* ══════════ S2 — FIXED ══════════ */
#en-s2,#ar-s2{background:radial-gradient(ellipse 70% 75% at 14% 52%,rgba(150,18,8,.85) 0%,rgba(40,5,2,.5) 42%,transparent 68%),var(--black)}

.s2-content{
  position:relative;z-index:3;
  width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:0 clamp(16px,5vw,80px);
  gap:clamp(10px,1.8vh,22px);
  animation:fadeUp .8s ease both;
}
.s2-tai-wrap{margin-bottom:clamp(2px,0.5vh,8px)}
.tai-img{height:clamp(32px,5.5vh,68px);width:auto;object-fit:contain;max-width:55vw}

/* The main line — inline flex, all on one row, no wrapping on desktop */
.s2-main-line{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;            /* stay on one line */
  gap:clamp(5px,.7vw,12px);
  line-height:1;
  width:100%;
  overflow:visible;
}
.ar-line{direction:rtl}

/* Small label words */
.s2-word{
  font-size:clamp(9px,var(--size-s2_tagline),20px);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--white);
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  flex-shrink:0;
}
#ar-s2 .s2-word{text-transform:none;letter-spacing:.02em;font-size:clamp(10px,1.6vw,20px)}

/* ── #1 and 10 as images — FIXED max-width 4vw ── */
.s2-num10-img,
.s2-hash1-img{
  /* Height scales with viewport — matches the big italic numbers */
  height:clamp(40px,var(--size-s2_num10),130px);
  /* MAX WIDTH FIXED at 4vw per request — prevents overflow */
  max-width:clamp(40px,calc(var(--size-s2_num10) * 0.8),130px);
  width:auto;
  object-fit:contain;
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0;
}

/* Text fallbacks */
.s2-num10,.s2-hash1{
  font-style:italic;
  font-size:clamp(40px,var(--size-s2_num10),130px);
  line-height:.85;
  color:var(--white);
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0;
}

/* Subtitle */
.s2-sub{
  font-size:clamp(9px,var(--size-s2_sub),18px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--white);
}
#ar-s2 .s2-sub{text-transform:none;letter-spacing:.02em;font-size:clamp(11px,1.5vw,18px)}

/* ══════════ S3 ══════════ */
#en-s3,#ar-s3{background:var(--black2)}
.s3-circles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.s3-c1{position:absolute;width:52vw;height:52vw;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(190,24,12,.92) 0%,rgba(120,12,4,.55) 38%,transparent 68%);top:-14vw;left:-16vw}
.s3-c2{position:absolute;width:32vw;height:32vw;border-radius:50%;background:radial-gradient(circle,rgba(160,20,8,.7) 0%,transparent 70%);top:28%;left:4%}
.s3-c3{position:absolute;width:30vw;height:30vw;border-radius:50%;border:1px solid rgba(196,34,24,.12);top:5%;right:22%}
.s3-grid{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:100%;height:100%;padding:clamp(50px,8vh,80px) 0 clamp(42px,6.5vh,60px)}
.s3-cell{display:flex;flex-direction:column;justify-content:center;padding:clamp(12px,2vh,28px) clamp(24px,4vw,60px)}
.s3-tl-num{font-size:clamp(18px,var(--size-s3_tl_num),80px);line-height:1.05;color:var(--white);margin-bottom:clamp(6px,1.2vh,16px);letter-spacing:-.01em}
.s3-tr-text{font-size:clamp(16px,var(--size-s3_tr_text),78px);line-height:1.08;color:var(--white);letter-spacing:-.01em}
.s3-red{color:var(--red2)}
.s3-bl-text{font-size:clamp(14px,var(--size-s3_bl_text),68px);line-height:1.1;color:var(--white);letter-spacing:-.01em}
.s3-br-num{font-size:clamp(16px,var(--size-s3_br_num),75px);line-height:1;color:var(--white);margin-bottom:clamp(6px,1.2vh,16px);letter-spacing:-.01em}
.s3-desc{font-size:clamp(8px,var(--size-s3_desc),15px);color:var(--w60);line-height:1.65;max-width:440px}

/* ════════════════════════════════════════
   S4 — JOINING THE CIRCLE v2
   Split: big title left | numbered list right
   ════════════════════════════════════════ */
#en-s4,#ar-s4{
  background:var(--black);
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* Decorative SVG positioned absolutely */
.s4-bg-svg{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}

/* Top-right logo bar */
.s4-topbar{
  position:absolute;top:0;left:0;right:0;z-index:4;
  display:flex;align-items:center;justify-content:flex-end;
  padding:var(--pad-top) var(--pad-h) 0;
}

/* ════════════════════════════════════════════════
   S4 v3 — JOINING THE CIRCLE
   Modern: centered title → 7 animated benefit cards
   in a staggered hex-like grid, morphing red plasma bg
   ════════════════════════════════════════════════ */
#en-s4,#ar-s4{
  background:var(--black);
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* ── Animated plasma / aurora background ── */
.s4-bg-svg{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
.s4-orb1{
  animation:s4-float1 8s ease-in-out infinite;
  transform-origin:center;
}
.s4-orb2{
  animation:s4-float2 11s ease-in-out infinite;
  transform-origin:center;
}
.s4-orb3{
  animation:s4-float3 14s ease-in-out infinite;
  transform-origin:center;
}
@keyframes s4-float1{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,-30px) scale(1.08)}
  66%{transform:translate(-20px,25px) scale(.95)}
}
@keyframes s4-float2{
  0%,100%{transform:translate(0,0) scale(1)}
  40%{transform:translate(-35px,20px) scale(1.05)}
  70%{transform:translate(28px,-18px) scale(.97)}
}
@keyframes s4-float3{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(20px,30px) scale(1.1)}
}

/* Top-right logo */
.s4-topbar{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:flex-end;
  padding:var(--pad-top) var(--pad-h) 0;
}

/* ── Main layout wrapper ── */
.s4v2-wrap{
  position:relative;z-index:3;
  width:100%;height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:clamp(52px,8vh,80px) clamp(24px,5vw,72px) clamp(44px,7vh,68px);
  gap:clamp(14px,2.5vh,28px);
}

/* ── Header: eyebrow + title ── */
.s4v2-header{
  text-align:center;
  opacity:0;
  animation:s4-drop .7s cubic-bezier(.22,1,.36,1) .05s forwards;
}
@keyframes s4-drop{
  from{opacity:0;transform:translateY(-20px)}
  to{opacity:1;transform:translateY(0)}
}
.s4v2-eyebrow{
  display:inline-block;
  font-size:clamp(9px,1vw,13px);
  letter-spacing:.4em;text-transform:uppercase;
  color:var(--red2);
  margin-bottom:clamp(6px,1vh,12px);
  position:relative;
}
.s4v2-eyebrow::before,.s4v2-eyebrow::after{
  content:'';display:inline-block;vertical-align:middle;
  width:clamp(20px,3vw,48px);height:1px;
  background:linear-gradient(90deg,transparent,var(--red2));
  margin:0 clamp(6px,1vw,14px);
}
.s4v2-eyebrow::after{
  background:linear-gradient(90deg,var(--red2),transparent);
}
.s4v2-title{
  font-size:clamp(26px,4vw,58px) !important;
  font-family:'Mogrash','Playfair Display',sans-serif !important;
  font-style:italic;font-weight:400 !important;
  line-height:1.05;color:var(--white);
  margin:0;
}
#ar-s4 .s4v2-title{font-style:normal}

/* ── 7-card grid ── */
.s4v2-grid{
  display:grid;
  /* Row 1: 4 cards | Row 2: 3 cards centred */
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:1fr 1fr;
  gap:clamp(8px,1.2vw,16px);
  width:100%;
}

/* Last 3 cards (row 2): shift to centre using col-start */
.s4v2-grid .s4v2-card:nth-child(5){grid-column:1;}
.s4v2-grid .s4v2-card:nth-child(6){grid-column:2;}
.s4v2-grid .s4v2-card:nth-child(7){grid-column:3;}

/* ── Individual card ── */
.s4v2-card{
  position:relative;overflow:hidden;
  background:rgba(8,3,3,.78);
  border:1px solid rgba(255,255,255,.06);
  border-radius:clamp(14px,1.8vw,22px);
  padding:clamp(14px,2.2vh,24px) clamp(14px,1.8vw,22px);
  display:flex;flex-direction:column;
  justify-content:space-between;
  min-height:clamp(90px,13vh,130px);
  cursor:default;

  /* entrance state */
  opacity:0;
  transform:translateY(22px) scale(.96);
  transition:
    opacity .5s ease,
    transform .5s cubic-bezier(.34,1.3,.64,1),
    border-color .35s,
    background .35s,
    box-shadow .35s;
}
.s4v2-card.s4-vis{
  opacity:1;transform:translateY(0) scale(1);
}
/* Shimmer overlay on hover */
.s4v2-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(196,34,24,.18) 0%,transparent 60%);
  opacity:0;transition:opacity .35s;
}
/* Glow border on hover */
.s4v2-card:hover{
  border-color:rgba(196,34,24,.45);
  background:rgba(14,4,4,.88);
  box-shadow:0 0 28px rgba(196,34,24,.18), inset 0 0 20px rgba(196,34,24,.06);
}
.s4v2-card:hover::before{opacity:1}

/* Animated red dot top-left corner */
.s4v2-card::after{
  content:'';
  position:absolute;top:14px;left:14px;
  width:6px;height:6px;border-radius:50%;
  background:var(--red2);
  opacity:0;
  transform:scale(0);
  transition:opacity .3s, transform .3s;
  box-shadow:0 0 8px var(--red2);
}
.s4v2-card:hover::after{opacity:1;transform:scale(1)}

/* Card number — bottom-right, large and faded */
.s4v2-card-num{
  position:absolute;bottom:-8px;right:10px;
  font-family:'Mogrash','Playfair Display',sans-serif !important;
  font-size:clamp(42px,6vw,88px);
  font-style:italic;
  color:rgba(196,34,24,.09);
  line-height:1;
  pointer-events:none;
  transition:color .35s;
  user-select:none;
}
.s4v2-card:hover .s4v2-card-num{color:rgba(196,34,24,.17)}

/* Card title */
.s4v2-card-title{
  font-family:'Gotham','Montserrat',sans-serif !important;
  font-size:clamp(10px,1.1vw,15px);
  font-weight:400 !important;
  color:var(--white);
  line-height:1.35;
  letter-spacing:.04em;
  text-transform:uppercase;
  position:relative;z-index:1;
}
/* Arabic card title */
#ar-s4 .s4v2-card-title{
  font-family:'Cairo',sans-serif !important;
  text-transform:none;letter-spacing:.01em;
  font-size:clamp(11px,1.2vw,16px);
  text-align:right;
}

/* ── Responsive ── */
@media(max-width:1199px){
  .s4v2-title{font-size:clamp(24px,3.8vw,50px) !important}
  .s4v2-card-title{font-size:clamp(9.5px,1.2vw,14px)}
  .s4v2-card{min-height:clamp(80px,11vh,115px)}
}
@media(max-width:767px){
  .s4v2-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:none}
  .s4v2-grid .s4v2-card:nth-child(5){grid-column:auto}
  .s4v2-grid .s4v2-card:nth-child(6){grid-column:auto}
  .s4v2-grid .s4v2-card:nth-child(7){grid-column:auto}
  .s4v2-card{min-height:clamp(70px,10vh,100px)}
  .s4v2-card-title{font-size:clamp(9px,1.8vw,13px)}
  .s4v2-title{font-size:clamp(22px,4.5vw,40px) !important}
}
@media(max-width:599px){
  .s4v2-grid{grid-template-columns:1fr 1fr}
  .s4v2-card-title{font-size:clamp(9px,2.2vw,12px)}
}

/* ══════════ S5 ══════════ */
#en-s5,#ar-s5{background:var(--black)}
.s5-waves{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%}
.s5-content{position:relative;z-index:3;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(50px,8vh,74px) var(--pad-h) clamp(50px,8vh,74px)}
.s5-upper{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(24px,4vw,60px);flex:1}
.sw-img{height:var(--size-s5_logo_h);width:auto;object-fit:contain;display:block;max-height:45vh;max-width:40vw}
.s5-tag-block{display:flex;flex-direction:column;gap:clamp(8px,1.5vh,16px);justify-content:center}
.s5-tagline{font-size:clamp(13px,var(--size-s5_tagline),28px);color:var(--white);line-height:1.3;letter-spacing:.01em}
.s5-sub{font-size:clamp(11px,var(--size-s5_sub),18px);color:var(--w80);line-height:1.4;letter-spacing:.01em}
.s5-bullets{display:flex;flex-direction:row;gap:clamp(20px,4vw,60px);align-items:flex-start;list-style:none!important;padding-top:clamp(16px,2.5vh,28px);border-top:1px solid rgba(255,255,255,.08)}
.ar-bullets{flex-direction:row-reverse}
.s5-bullet{display:flex;align-items:center;gap:clamp(8px,1.2vw,16px);opacity:0;transform:translateY(8px);transition:all .4s ease;list-style:none!important;flex:1}
.s5-bullet.vis{opacity:1;transform:translateY(0)}
.s5-dot{width:clamp(22px,3vw,38px);height:clamp(22px,3vw,38px);object-fit:contain;flex-shrink:0}
.s5-btxt{font-size:clamp(11px,var(--size-s5_bullet),18px);color:var(--white);line-height:1.35}

/* ══════════ S6 ══════════ */
#en-s6,#ar-s6{background:#000;overflow:hidden}
.s6-lines{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.s6-content{position:relative;z-index:3;width:100%;height:100%;display:flex;align-items:stretch;padding:clamp(50px,8vh,74px) var(--pad-h) clamp(42px,7vh,66px)}
.s6-left{flex:0 0 45%;display:flex;flex-direction:column;justify-content:center;padding-right:clamp(14px,2.5vw,38px)}
.express-img{max-width:100%;height:var(--size-s6_logo_h);max-height:35vh;object-fit:contain;display:block}
.s6-right{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;text-align:right}
.earn-text{font-size:clamp(16px,var(--size-s6_earn),60px);color:var(--white);line-height:1.25}

/* ══════════ S7 ══════════ */
#en-s7,#ar-s7{background:#060202;overflow:hidden}
.s7-lines{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.s7-layout{position:relative;z-index:3;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.s7-circle{position:relative;width:clamp(210px,36vmin,420px);height:clamp(210px,36vmin,420px);border-radius:50%;border:2px solid var(--red2);box-shadow:0 0 50px rgba(196,34,24,.65),0 0 100px rgba(196,34,24,.28),inset 0 0 60px rgba(196,34,24,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(14px,2.5vmin,26px);background:radial-gradient(circle,rgba(80,10,4,.5) 0%,rgba(10,2,2,.6) 70%,transparent 100%);animation:pulse-ring 3.5s ease-in-out infinite;flex-shrink:0;gap:6px}
.s7-express-img{max-width:58%;height:var(--size-s7_logo_h);max-height:20%;object-fit:contain;display:block}
.s7-main{line-height:.9;font-size:clamp(18px,var(--size-s7_main),54px);letter-spacing:-.01em}
.s7-top,.s7-mid{color:var(--white);display:block}
.s7-months{font-size:clamp(8px,var(--size-s7_months),17px);color:var(--white);display:block;margin-top:4px;letter-spacing:.02em}
.s7-corners{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.s7-item{position:absolute;font-size:clamp(9px,var(--size-s7_corners),15px);color:var(--white);line-height:1.35;max-width:clamp(110px,14vw,175px)}
.s7-item.tl{top:26%;left:18%}
.s7-item.bl{bottom:24%;left:18%}
.s7-item.tr{top:26%;right:18%;text-align:right}
.s7-item.br{bottom:24%;right:18%;text-align:right}
#ar-s7 .s7-item.tl{text-align:right}
#ar-s7 .s7-item.bl{text-align:right}
#ar-s7 .s7-item.tr{text-align:left}
#ar-s7 .s7-item.br{text-align:left}

/* ══════════ S8 ══════════ */
#en-s8,#ar-s8{
  background:radial-gradient(ellipse 55% 55% at 8% 55%,rgba(120,14,6,.65) 0%,transparent 55%),var(--black);
  align-items:center;
  justify-content:center;
}
/* Centre the whole block vertically */
.s8-inner{
  position:relative;z-index:3;
  width:100%;max-width:1360px;
  padding:0 clamp(16px,3vw,48px);
}

/* Two-column headers — each centered in its half */
.s8-headers{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-bottom:clamp(18px,3vh,34px);
  position:relative;
}
.s8-headers::after{
  content:'';position:absolute;
  top:0;bottom:0;left:50%;
  width:1px;background:rgba(255,255,255,.18);
}
.s8-hdr{
  font-size:clamp(22px,var(--size-s8_hdr),56px);
  color:var(--white);
  line-height:1;
  padding:0 clamp(8px,1.5vw,20px);
  /* each header centered within its column */
  text-align:center;
}
.s8-hdr:first-child{
  text-align:center;
  padding-left:0;
}

/* 7-step row with connector line */
.s8-row{
  display:flex;
  align-items:flex-start;
  gap:0;
  position:relative;
}

/* Horizontal connector line through circle centres */
.s8-row::before{
  content:'';
  position:absolute;
  /* vertically centred on the circles */
  top:calc(clamp(60px,7.5vmin,96px) / 2);
  left:calc(clamp(60px,7.5vmin,96px) / 2);
  right:calc(clamp(60px,7.5vmin,96px) / 2);
  height:1.5px;
  background:linear-gradient(90deg,
    rgba(196,34,24,.8)  0%,
    rgba(196,34,24,.6) 43%,
    rgba(196,34,24,.15) 43.1%,
    rgba(196,34,24,.15) 44%,
    rgba(196,34,24,.6) 44.1%,
    rgba(196,34,24,.5) 100%);
}

/* Each step column */
.jstep{
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;
  gap:clamp(8px,1.4vh,14px);
  position:relative;z-index:1;
  text-align:center;
  padding:0 clamp(1px,.2vw,3px);
  cursor:default;transition:all .3s;
  min-width:0; /* prevent overflow */
}
.jstep:hover .ji{transform:scale(1.07)}

/* ── Circle ── */
.ji{
  /* Sized to fit 7 across without overflow */
  width:clamp(60px,7.5vmin,96px);
  height:clamp(60px,7.5vmin,96px);
  border-radius:50%;
  /* Steps 1–3: bright red */
  background:#c42218;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(2px,0.5vmin,6px);
  transition:transform .3s;
  overflow:hidden;
  flex-shrink:0;
  padding:clamp(6px,1vmin,12px);
}
/* Steps 4–7: darker maroon */
.ji.ji-dark{
  background:#6b0f06;
}

/* Icon — white, top portion */
.ji-img{
  width:clamp(16px,2.6vmin,34px);
  height:clamp(16px,2.6vmin,34px);
  object-fit:contain;
  display:block;
  filter:brightness(0) invert(1);
  flex-shrink:0;
}

/* Bold label — bottom portion, ALL CAPS */
.ji-label{
  font-size:clamp(5.5px,.75vmin,9.5px);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--white);
  line-height:1.15;
  text-align:center;
  word-break:break-word;
  hyphens:auto;
}
#ar-s8 .ji-label{text-transform:none;letter-spacing:0}

/* Description below circle */
.jd{
  font-size:clamp(6.5px,var(--size-s8_step_desc),10.5px);
  color:var(--w60);
  line-height:1.4;
  max-width:clamp(70px,8.5vw,115px);
  text-align:center;
}

/* ══════════ S9 ══════════ */
#en-s9,#ar-s9{background:radial-gradient(ellipse 65% 65% at 16% 55%,rgba(140,15,6,.7) 0%,rgba(40,5,2,.4) 48%,transparent 68%),var(--black)}
.s9-glow{position:absolute;width:56vw;height:56vw;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(140,18,8,.6) 0%,rgba(80,8,4,.3) 40%,transparent 70%);top:-20vw;left:-18vw;animation:glow-breathe 7s ease-in-out infinite;z-index:1}
.s9-content{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fadeUp .8s ease both}
.s9-contact-block{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.8vh,20px)}
.s9-label{font-size:clamp(11px,var(--size-s9_label),18px);letter-spacing:.4em;text-transform:uppercase;color:var(--w60)}
.s9-email{font-size:clamp(16px,var(--size-s9_contact),32px);color:var(--white);text-decoration:none;letter-spacing:.02em;transition:color .3s,text-shadow .3s;display:block}
.s9-email:hover{color:var(--red2);text-shadow:0 0 30px rgba(196,34,24,.5)}

/* ════════════════ RESPONSIVE ════════════════ */
@media(max-width:1199px){
  :root{
    --size-s2_tagline:2vw;
    --size-s3_tl_num:6vw;--size-s3_tr_text:5.5vw;--size-s3_bl_text:5.2vw;--size-s3_br_num:5.5vw;--size-s3_desc:1.3vw;
    --size-s4_title:4.8vw;--size-s4_cards:1.15vw;
    --size-s5_tagline:2.2vw;--size-s5_sub:1.5vw;--size-s5_bullet:1.5vw;
    --size-s6_earn:4.5vw;--size-s7_main:4.5vw;--size-s8_hdr:3.8vw;
  }
}
@media(max-width:767px){
  :root{
    --pad-h:18px;
    --size-s2_tagline:2.6vw;--size-s2_num10:14vw;--size-s2_hash1:14vw;--size-s2_sub:1.8vw;
    --size-s3_tl_num:5vw;--size-s3_tr_text:4.5vw;--size-s3_bl_text:4vw;--size-s3_br_num:4.5vw;--size-s3_desc:1.6vw;
    --size-s4_title:5.5vw;--size-s4_cards:1.5vw;--size-s4_uae:3vw;
    --size-s5_logo_h:28vh;--size-s5_tagline:2.6vw;--size-s5_sub:1.8vw;--size-s5_bullet:2vw;
    --size-s6_earn:5vw;--size-s7_main:5vw;--size-s8_hdr:4.5vw;
    --size-footer:9px;--size-s9_contact:3vw;
  }
  /* S2 — allow wrap on mobile */
  .s2-main-line{flex-wrap:wrap}
  /* S3 */
  .s3-grid{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr)}
  .s3-c1{width:80vw;height:80vw;top:-20vw;left:-20vw}
  /* S4 */
  .s4-row{grid-template-columns:1fr 1fr}
  .s4-row:first-of-type .bcard:last-child{grid-column:span 2}
  .s4-row-uae .bcard-uae{width:50%}
  /* S5 */
  .s5-upper{grid-template-columns:1fr;text-align:center;gap:12px}
  .sw-img{margin:0 auto;max-width:70vw;max-height:22vh}
  .s5-tag-block{align-items:center;text-align:center}
  .s5-bullets,.ar-bullets{flex-wrap:wrap;gap:14px}
  .s5-bullet{flex:0 0 45%}
  /* S6 */
  .s6-content{flex-direction:column;justify-content:center;gap:16px;padding-top:58px}
  .s6-left{flex:none;padding-right:0;align-items:center}
  .s6-right{align-items:center;text-align:center}
  /* S7 */
  .s7-item{font-size:1.8vw}
  .s7-item.tl,.s7-item.bl{left:10%}
  .s7-item.tr,.s7-item.br{right:10%}
  /* S8 */
  .s8-row{flex-wrap:wrap}
  .jstep{flex:0 0 25%;margin-bottom:16px}
  .s8-hdr{font-size:clamp(18px,3.8vw,40px);text-align:center}
}
@media(max-width:599px){
  :root{
    --pad-h:14px;
    --size-s2_tagline:3.5vw;--size-s2_num10:18vw;--size-s2_hash1:18vw;--size-s2_sub:2.5vw;
    --size-s3_tl_num:6.5vw;--size-s3_tr_text:6vw;--size-s3_bl_text:5.5vw;--size-s3_br_num:6vw;--size-s3_desc:2.2vw;
    --size-s4_title:6.5vw;--size-s4_cards:2vw;--size-s4_uae:3.8vw;
    --size-s5_logo_h:20vh;--size-s5_tagline:3.2vw;--size-s5_sub:2.2vw;--size-s5_bullet:2.6vw;
    --size-s6_earn:6vw;--size-s7_main:6vw;--size-s8_hdr:5.5vw;
    --size-footer:8px;--size-s9_contact:4vw;
  }
  .s2-main-line{flex-wrap:wrap;gap:4px}
  .s3-cell{padding:10px 16px}
  .s4-row{grid-template-columns:1fr}
  .s4-row-uae .bcard-uae{width:70%}
  .s5-bullets,.ar-bullets{flex-direction:column;gap:12px;border-top:none;padding-top:0}
  .s5-bullet{flex:none;width:100%}
  .s6-content{flex-direction:column}
  .s7-item{font-size:2.2vw}
  .s7-item.tl,.s7-item.bl{left:4%}
  .s7-item.tr,.s7-item.br{right:4%}
  .s8-headers{grid-template-columns:1fr;gap:2px}
  .s8-headers::after{display:none}
  .s8-hdr{font-size:5.5vw;padding:0;text-align:center}
  .jstep{flex:0 0 33.33%}
  .stopbar-logo{height:clamp(13px,2.2vh,20px)}
  .tai-img{height:clamp(22px,4vh,40px)}
}