/* ============================================================
   JINNI SERVICES — "Luminous Jinni" design system
   A single dominant style layer. Overrides inherited Bootstrap +
   Breadfast theme without removing them, so existing PHP markup
   keeps working while every visible surface gets a new identity.

   Palette: mint (#66C2A4) family — derived from the Jinni logo.
   Type:    IBM Plex Sans + IBM Plex Sans Arabic + IBM Plex Mono.
   ============================================================ */

:root{
  /* ---- Brand mint (derived from logo #66C2A4) ---- */
  /* Variable names kept as --cyan-* for backwards compatibility — values are the new mint scale. */
  --cyan-900:#1F4B3F;
  --cyan-800:#2D6957;
  --cyan-700:#3F8B71;
  --cyan-600:#4FA989;
  --cyan-500:#66C2A4;  /* primary brand */
  --cyan-400:#7ED2AE;
  --cyan-300:#98DDBE;
  --cyan-200:#C2EBD8;
  --cyan-100:#E1F5EC;
  --cyan-50:#F3FBF8;

  /* Forward-compatible mint aliases (use these in new code) */
  --mint-900:var(--cyan-900);
  --mint-800:var(--cyan-800);
  --mint-700:var(--cyan-700);
  --mint-600:var(--cyan-600);
  --mint-500:var(--cyan-500);
  --mint-400:var(--cyan-400);
  --mint-300:var(--cyan-300);
  --mint-200:var(--cyan-200);
  --mint-100:var(--cyan-100);
  --mint-50:var(--cyan-50);

  /* ---- Neutrals ---- */
  --cream:#f6f7f9;
  --paper:#fbfcfd;
  --ivory:#ffffff;
  --ink:#0d2024;
  --ink-soft:#2a4146;
  --ink-mute:#5f727f;

  /* ---- Accents (kept restrained, complementary to mint) ---- */
  --accent-warm:#f0a868;     /* peach — warm complement */
  --accent-rose:#e88c8c;     /* dusty rose */
  --accent-mint:var(--cyan-500); /* sync to primary */

  /* Re-bind legacy tokens used elsewhere in markup */
  --brand:           var(--cyan-500);
  --brand-dark:      var(--cyan-700);
  --brand-deep:      var(--cyan-900);
  --brand-light:     var(--cyan-100);
  --brand-secondary: var(--cyan-50);
  --beige:           var(--cream);
  --dark-grey:       var(--ink);

  /* Glass + shadow (shadows tinted with new deep mint rgb 31,75,63) */
  --glass:rgba(255,255,255,0.55);
  --glass-strong:rgba(255,255,255,0.75);
  --glass-stroke:rgba(255,255,255,0.7);
  --shadow-sm:0 1px 2px rgba(31,75,63,.06), 0 2px 8px rgba(31,75,63,.04);
  --shadow-md:0 4px 16px rgba(31,75,63,.08), 0 16px 40px rgba(31,75,63,.06);
  --shadow-lg:0 20px 60px rgba(31,75,63,.12), 0 40px 120px rgba(31,75,63,.08);

  /* Radii */
  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --r-xl:42px;

  /* Type */
  --font-display:"IBM Plex Sans Arabic","IBM Plex Sans","Plex Sans","Work Sans",system-ui,sans-serif;
  --font-body:"IBM Plex Sans Arabic","IBM Plex Sans","Plex Sans","Work Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","Geist Mono",ui-monospace,monospace;
}

/* Arabic pages render in Cairo (display + body); Latin labels keep Plex Mono. */
html[lang="ar"]{
  --font-display:"Cairo","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-body:"Cairo","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","Cairo",ui-monospace,monospace;
}

/* ---- Global resets / smoothing ---- */
*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink-soft);
  background:var(--paper);
  overflow-x:hidden;
  line-height:1.6;
  letter-spacing:-0.005em;
}
body.has-floating-nav{ padding-top:0; }
img{ max-width:100%; }
::selection{ background:var(--cyan-200); color:var(--cyan-900); }

/* Display headings — generous, tight tracking */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--cyan-900);
  letter-spacing:-0.025em;
  font-weight:600;
  line-height:1.05;
}
h1 em, h2 em, h3 em, h4 em{
  font-style:italic;
  font-weight:300;
  background:linear-gradient(120deg, var(--cyan-500) 10%, var(--cyan-700) 50%, var(--accent-warm) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ============================================================
   AURORA BACKGROUND + GRAIN
   ============================================================ */
.aurora{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 50% at 15% 10%, rgba(152,221,190,.55), transparent 60%),
    radial-gradient(50% 40% at 85% 5%, rgba(240,168,104,.20), transparent 60%),
    radial-gradient(70% 50% at 50% 100%, rgba(102,194,164,.30), transparent 65%),
    linear-gradient(180deg, var(--ivory) 0%, var(--paper) 40%, var(--cyan-100) 100%);
}
.aurora::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(40% 30% at 30% 30%, rgba(126,210,174,.40), transparent 50%),
    radial-gradient(35% 30% at 70% 60%, rgba(102,194,164,.22), transparent 50%);
  filter:blur(40px);
  animation:bf-drift 22s ease-in-out infinite alternate;
}
@keyframes bf-drift{
  0%  { transform:translate(0,0) scale(1); }
  50% { transform:translate(4%,-3%) scale(1.08); }
  100%{ transform:translate(-3%,4%) scale(.96); }
}
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.02 0 0 0 0 0.16 0 0 0 0 0.18 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   FLOATING GLASS NAV
   ============================================================ */
.heroSection.brand-secondary-bg{ background:transparent !important; }

.bf-nav{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:100;
  padding:6px 8px 6px 20px;
  background:var(--glass-strong);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-stroke);
  border-radius:100px;
  box-shadow:0 4px 20px rgba(31,75,63,.08), 0 12px 40px rgba(31,75,63,.06);
  display:flex; align-items:center; gap:14px;
  transition:transform .5s cubic-bezier(.2,.9,.3,1), box-shadow .3s;
  max-width:calc(100% - 32px);
  white-space:nowrap;
  height:56px;
}
.bf-nav.is-hidden{ transform:translateX(-50%) translateY(-150%); }
.bf-nav .bf-logo{
  display:flex; align-items:center; flex-shrink:0;
  text-decoration:none;
  padding-right:6px;
  border-right:1px solid rgba(31,75,63,.08);
}
[dir="rtl"] .bf-nav .bf-logo{
  padding-right:0; padding-left:6px;
  border-right:none; border-left:1px solid rgba(31,75,63,.08);
}
.bf-nav .bf-logo img{ height:24px; width:auto; display:block; }
.bf-nav-links{
  display:flex; gap:2px; list-style:none; margin:0; padding:0;
  align-items:center;
}
.bf-nav-links a{
  text-decoration:none; color:var(--ink-soft);
  font-size:14px; font-weight:500;
  padding:8px 14px; border-radius:100px;
  transition:color .2s ease, background-color .2s ease;
  white-space:nowrap;
  line-height:1;
}
.bf-nav-links a:hover{ background:var(--cyan-100); color:var(--cyan-900); }
.bf-nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--cyan-900); color:var(--ivory);
  padding:0 18px;
  height:44px;
  border-radius:100px; border:none;
  font-family:var(--font-body); font-size:14px; font-weight:500;
  text-decoration:none; cursor:pointer;
  transition:background-color .25s ease, transform .25s ease, box-shadow .25s ease;
  white-space:nowrap;
  flex-shrink:0;
  line-height:1;
}
.bf-nav-cta span{ display:inline-block; white-space:nowrap; }
.bf-nav-cta:hover{ background:var(--cyan-700); transform:translateY(-1px); box-shadow:0 8px 20px rgba(63,139,113,.30); color:var(--ivory); }
.bf-nav-lang{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-size:13px; font-weight:500;
  padding:0 14px; height:36px;
  border-radius:100px;
  background:transparent; color:var(--cyan-800);
  text-decoration:none;
  transition:background-color .2s, color .2s;
  white-space:nowrap;
}
.bf-nav-lang:hover{ background:var(--cyan-100); color:var(--cyan-900); }
.bf-nav-toggle{
  display:none; background:transparent; border:none;
  width:40px; height:40px; border-radius:50%;
  color:var(--cyan-900); align-items:center; justify-content:center;
  cursor:pointer;
  margin-left:auto;
}
[dir="rtl"] .bf-nav-toggle{ margin-left:0; margin-right:auto; }
@media (max-width:1024px){
  .bf-nav-links a{ padding:8px 10px; font-size:13px; }
  .bf-nav{ gap:8px; padding:6px 6px 6px 16px; }
}
@media (max-width:880px){
  .bf-nav-links, .bf-nav-lang, .bf-nav-cta{ display:none; }
  .bf-nav-toggle{ display:inline-flex; }
  .bf-nav{ padding:6px 6px 6px 18px; gap:8px; height:54px; }
}

/* Mobile sheet */
.bf-mobile{
  position:fixed; inset:0; z-index:200;
  background:rgba(13,32,36,.5);
  backdrop-filter:blur(8px);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.bf-mobile.is-open{ opacity:1; pointer-events:auto; }
.bf-mobile .sheet{
  position:absolute; top:18px; left:18px; right:18px;
  background:var(--ivory);
  border:1px solid var(--glass-stroke);
  border-radius:24px;
  padding:18px;
  box-shadow:var(--shadow-lg);
  transform:translateY(-12px);
  transition:transform .35s cubic-bezier(.2,.9,.3,1);
}
.bf-mobile.is-open .sheet{ transform:translateY(0); }
.bf-mobile .sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.bf-mobile .sheet-head img{ height:28px; }
.bf-mobile .sheet ul{ list-style:none; padding:0; margin:0; }
.bf-mobile .sheet li a{
  display:block; padding:12px 8px; text-decoration:none;
  color:var(--cyan-900); font-weight:500;
  border-bottom:1px solid rgba(63,139,113,.08);
}
.bf-mobile .sheet li:last-child a{ border-bottom:none; }
.bf-mobile .sheet-close{
  border:none; background:transparent; font-size:18px; color:var(--cyan-900);
  width:36px; height:36px; border-radius:50%; cursor:pointer;
}

/* ============================================================
   BUTTONS — replace bootstrap/breadfast styles
   ============================================================ */
.btn-primary,
.breadfast-btn-primary,
.productsSectionBtn,
.bf-btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  background:var(--cyan-900) !important;
  color:var(--ivory) !important;
  border:none !important;
  border-radius:100px !important;
  font-family:var(--font-body);
  font-size:15px; font-weight:500;
  letter-spacing:.01em;
  cursor:pointer; text-decoration:none;
  transition:all .35s cubic-bezier(.2,.9,.3,1);
  position:relative; overflow:hidden;
  box-shadow:0 4px 14px rgba(31,75,63,.18);
}
.btn-primary:hover,
.breadfast-btn-primary:hover,
.productsSectionBtn:hover,
.bf-btn-primary:hover{
  background:var(--cyan-700) !important;
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(63,139,113,.35);
  color:var(--ivory) !important;
}
.bf-btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:100px;
  background:transparent; color:var(--cyan-900);
  border:1.5px solid rgba(31,75,63,.18);
  font-family:var(--font-body); font-size:15px; font-weight:500;
  text-decoration:none; cursor:pointer;
  transition:all .3s ease;
}
.bf-btn-ghost:hover{
  background:var(--cyan-900); color:var(--ivory);
  border-color:var(--cyan-900); transform:translateY(-2px);
}

/* Legacy outline buttons (bcard / chef / travel / careers) */
.bcard-btn,.chef-btn,.travel-btn,.careersBtn{
  display:inline-flex !important; align-items:center; gap:10px;
  color:var(--cyan-900) !important;
  border:1.5px solid rgba(31,75,63,.2) !important;
  border-radius:100px !important;
  padding:14px 24px !important;
  font-weight:500 !important;
  background:transparent !important;
  text-decoration:none !important;
  transition:all .3s ease !important;
}
.bcard-btn:hover,.chef-btn:hover,.travel-btn:hover,.careersBtn:hover{
  background:var(--cyan-900) !important;
  color:var(--ivory) !important;
  border-color:var(--cyan-900) !important;
  transform:translateY(-2px);
}

/* ============================================================
   SECTION HEADS — used in bento, blog, etc.
   ============================================================ */
section{ position:relative; }
.section-head{ max-width:900px; margin:0 auto 28px; padding:0 6vw; }
.section-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:.18em;
  color:var(--cyan-700); margin-bottom:18px;
}
.section-tag::before{
  content:""; width:24px; height:1px; background:var(--cyan-700);
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(34px, 5.2vw, 70px);
  line-height:1.02; letter-spacing:-.035em;
  font-weight:600; color:var(--cyan-900);
}
.section-desc{
  margin-top:22px; font-size:18px; color:var(--ink-soft);
  max-width:600px; line-height:1.6;
}

/* ============================================================
   HERO
   ============================================================ */
.bf-hero{
  position:relative;
  padding:140px 6vw 80px;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.bf-hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 14px 6px 8px; border-radius:100px;
  background:var(--glass); border:1px solid var(--glass-stroke);
  font-size:13px; color:var(--ink-soft); font-weight:500;
  backdrop-filter:blur(10px); margin-bottom:28px;
  width:fit-content;
  animation:bf-fadeUp .9s cubic-bezier(.2,.9,.3,1) both;
}
.bf-hero-eyebrow .dot{
  width:16px; height:16px; border-radius:50%;
  background:var(--cyan-500); position:relative;
  box-shadow:0 0 0 4px rgba(102,194,164,.22);
  flex-shrink:0;
}
.bf-hero-eyebrow .dot::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid var(--cyan-500); animation:bf-pulse 2s infinite;
}
@keyframes bf-pulse{
  0%  { transform:scale(1); opacity:1; }
  100%{ transform:scale(2.2); opacity:0; }
}

.bf-hero-title{
  font-family:var(--font-display);
  font-size:clamp(40px, 7.2vw, 96px);
  line-height:1.02; letter-spacing:-.045em;
  font-weight:600; color:var(--cyan-900);
  max-width:1100px;
  margin:0 0 .25em 0;
}
.bf-hero-title em{
  font-style:normal; font-weight:500;
  background:linear-gradient(120deg, var(--cyan-500) 10%, var(--cyan-700) 50%, var(--accent-warm) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bf-hero-words{ display:inline-block; overflow:hidden; padding:0 .05em; }
.bf-hero-words span{
  display:inline-block;
  animation:bf-wordRise 1.1s cubic-bezier(.2,.9,.3,1) both;
}
.bf-hero-words span:nth-child(1){animation-delay:.10s}
.bf-hero-words span:nth-child(2){animation-delay:.20s}
.bf-hero-words span:nth-child(3){animation-delay:.30s}
.bf-hero-words span:nth-child(4){animation-delay:.40s}
.bf-hero-words span:nth-child(5){animation-delay:.50s}
.bf-hero-words span:nth-child(6){animation-delay:.60s}
.bf-hero-words span:nth-child(7){animation-delay:.70s}
.bf-hero-words span:nth-child(8){animation-delay:.80s}
@keyframes bf-wordRise{
  from{ transform:translateY(110%) rotate(3deg); opacity:0; }
  to  { transform:translateY(0) rotate(0); opacity:1; }
}
@keyframes bf-fadeUp{
  from{ transform:translateY(20px); opacity:0; }
  to  { transform:translateY(0); opacity:1; }
}

.bf-hero-lower{
  display:grid; grid-template-columns:1.1fr 1fr; gap:60px;
  margin-top:50px; align-items:end;
}
.bf-hero-lead{
  font-size:clamp(17px, 1.4vw, 21px); color:var(--ink-soft);
  max-width:520px; line-height:1.55;
  animation:bf-fadeUp 1s .8s both;
}
.bf-hero-download-label{
  margin-top:32px; font-family:var(--font-mono);
  font-size:12px; text-transform:uppercase; letter-spacing:.18em;
  color:var(--cyan-700);
  animation:bf-fadeUp 1s .9s both;
}
.bf-hero-actions{
  display:flex; gap:14px; margin-top:14px; flex-wrap:wrap;
  animation:bf-fadeUp 1s 1s both;
}

/* Hero floating cards */
.bf-hero-visual{
  position:relative; height:440px;
  animation:bf-fadeUp 1.2s .6s both;
}
.bf-float-card{
  position:absolute; border-radius:var(--r-lg);
  background:var(--glass-strong); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-stroke); box-shadow:var(--shadow-lg);
  padding:18px; overflow:hidden;
}
.bf-float-card.c1{
  top:20px; right:0; width:200px;
  animation:bf-float1 8s ease-in-out infinite;
}
.bf-float-card.c2{
  top:150px; right:210px; width:230px;
  animation:bf-float2 7s ease-in-out infinite;
  background:var(--cyan-900); color:var(--ivory);
  border-color:rgba(255,255,255,.1);
}
.bf-float-card.c3{
  top:280px; right:30px; width:215px;
  animation:bf-float3 9s ease-in-out infinite;
}

/* Compact treatment for the two hero stat cards (c1 / c3) */
.bf-float-card.c1,
.bf-float-card.c3{ padding:14px; }
.bf-float-card.c1 .bf-metric-value,
.bf-float-card.c3 .bf-metric-value{ font-size:28px; }
.bf-float-card.c1 .bf-metric-label,
.bf-float-card.c3 .bf-metric-label{ font-size:10px; margin-bottom:4px; }
.bf-float-card.c1 .bf-metric-foot,
.bf-float-card.c3 .bf-metric-foot{ font-size:11px; margin-top:6px; }
.bf-float-card.c3 > div:last-child{ margin-top:10px; padding-top:10px; font-size:11px; }
.bf-float-card.c3 [style*="width:54px"]{ width:42px !important; height:42px !important; }
.bf-float-card.c3 [style*="width:54px"] [style*="width:42px"]{ width:32px !important; height:32px !important; font-size:14px !important; }
@keyframes bf-float1{ 0%,100%{ transform:translateY(0) rotate(2deg); } 50%{ transform:translateY(-14px) rotate(2deg); } }
@keyframes bf-float2{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-18px) rotate(-3deg); } }
@keyframes bf-float3{ 0%,100%{ transform:translateY(0) rotate(1deg); } 50%{ transform:translateY(-10px) rotate(1deg); } }

.bf-metric-label{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; opacity:.7; margin-bottom:6px; font-family:var(--font-mono); }
.bf-metric-value{ font-family:var(--font-display); font-size:38px; letter-spacing:-.03em; line-height:1; font-weight:600; }
.bf-metric-foot{ font-size:12px; opacity:.7; margin-top:8px; display:flex; align-items:center; gap:6px; }
.bf-spark{ height:34px; margin-top:10px; display:flex; align-items:end; gap:3px; }
.bf-spark div{ flex:1; background:var(--cyan-500); border-radius:2px; animation:bf-bar 2s ease-in-out infinite; }
.bf-spark div:nth-child(1){height:30%; animation-delay:0s}
.bf-spark div:nth-child(2){height:55%; animation-delay:.1s}
.bf-spark div:nth-child(3){height:40%; animation-delay:.2s}
.bf-spark div:nth-child(4){height:70%; animation-delay:.3s}
.bf-spark div:nth-child(5){height:85%; animation-delay:.4s}
.bf-spark div:nth-child(6){height:60%; animation-delay:.5s}
.bf-spark div:nth-child(7){height:95%; animation-delay:.6s}
.bf-spark div:nth-child(8){height:75%; animation-delay:.7s}
@keyframes bf-bar{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(1.3); } }

.bf-scroll-cue{
  position:absolute; bottom:28px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  font-size:11px; text-transform:uppercase; letter-spacing:.22em;
  color:var(--ink-soft); opacity:.7;
}
.bf-scroll-cue .arrow{ display:inline-block; animation:bf-bounce 2s infinite; }
@keyframes bf-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

@media(max-width:960px){
  .bf-hero{ padding:120px 5vw 60px; }
  .bf-hero-lower{ grid-template-columns:1fr; gap:40px; }
  .bf-hero-visual{ height:360px; }
  .bf-float-card.c1{ width:200px; right:0; }
  .bf-float-card.c2{ right:150px; width:180px; }
  .bf-float-card.c3{ width:210px; right:20px; }
}

/* ============================================================
   PARTNERS MARQUEE (replaces multi-row products slider)
   ============================================================ */
.productsSection,
.bf-marquee-section{
  background:transparent !important;
  padding:60px 0 60px;
  overflow:hidden;
  position:relative;
}
.bf-marquee-section .partners-label{
  text-align:center; font-family:var(--font-mono);
  font-size:12px; text-transform:uppercase; letter-spacing:.3em;
  color:var(--ink-soft); margin-bottom:32px;
}

.bf-marquee-section .slider-wrapper{
  display:grid;
  grid-auto-rows:132px;          /* each row is exactly one slide-height tall */
  row-gap:14px;
  padding:14px 0;
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
.bf-marquee-section .slider{
  display:flex;
  width:100%;
  height:132px;
  overflow:hidden;
  direction:ltr;                  /* keep marquee mechanics LTR even under RTL pages */
}
.bf-marquee-section .slide-track{
  display:flex; gap:14px;
  width:max-content;
  animation:bf-marquee 60s linear infinite;
  will-change:transform;
}
.bf-marquee-section .slide-track.row-2{ animation-duration:75s; animation-direction:reverse; }
.bf-marquee-section .slide-track.row-3{ animation-duration:55s; }
.bf-marquee-section .slide-track.row-4{ animation-duration:70s; animation-direction:reverse; }
.bf-marquee-section .slide-track.row-5{ animation-duration:65s; }
.bf-marquee-section .slide{
  flex:0 0 auto;
  width:118px; height:118px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ivory);
  border:1px solid var(--glass-stroke);
  border-radius:20px;
  box-shadow:0 4px 14px rgba(31,75,63,.05);
}
.bf-marquee-section .slide img{ max-width:78%; max-height:78%; object-fit:contain; }
@keyframes bf-marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
/* RTL: keep direction natural for the language */
[dir="rtl"] .bf-marquee-section .slide-track{ animation-direction:reverse; }
[dir="rtl"] .bf-marquee-section .slide-track.row-2{ animation-direction:normal; }
[dir="rtl"] .bf-marquee-section .slide-track.row-4{ animation-direction:normal; }

.bf-marquee-section .productsGalleryContainer{ display:none; }

/* The two-column copy block that follows the marquee */
.bf-products-copy{
  padding:60px 6vw 40px;
  display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:end;
}
.bf-products-copy h3{
  font-family:var(--font-display);
  font-size:clamp(34px, 4.5vw, 64px);
  line-height:1.02; letter-spacing:-.035em;
  font-weight:600; color:var(--cyan-900);
  margin:0;
}
.bf-products-copy p{ font-size:18px; color:var(--ink-soft); line-height:1.6; margin:0 0 22px 0; }
@media(max-width:880px){ .bf-products-copy{ grid-template-columns:1fr; gap:24px; } }

/* ============================================================
   WHY JINNI — bento
   ============================================================ */
.deliveryTipsSetion,
.bf-bento-section{
  background:transparent !important;
  padding:56px 6vw;
}
.bf-bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:auto;
  gap:18px;
  max-width:1280px; margin:0 auto;
}
.bf-bento-cell{
  background:var(--glass-strong); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-stroke);
  border-radius:var(--r-lg); padding:34px;
  position:relative; overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.9,.3,1), box-shadow .5s;
  display:flex; flex-direction:column; gap:18px;
  min-height:240px;
}
.bf-bento-cell:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.bf-bento-cell .icon{
  width:54px; height:54px; border-radius:16px;
  display:grid; place-items:center; color:var(--ivory);
  background:var(--cyan-700);
  box-shadow:0 8px 20px rgba(63,139,113,.30);
}
.bf-bento-cell h3{
  font-family:var(--font-display); font-size:26px;
  letter-spacing:-.02em; font-weight:600; color:var(--cyan-900);
  margin:0;
}
.bf-bento-cell p{ font-size:15px; color:var(--ink-soft); margin:0; }
.bf-bento-cell.featured{
  grid-column:span 3; grid-row:span 2;
  background:linear-gradient(135deg, var(--cyan-900) 0%, var(--cyan-700) 100%);
  color:var(--ivory);
  border-color:rgba(255,255,255,.1);
  min-height:480px;
}
.bf-bento-cell.featured h3{ color:var(--ivory); font-size:42px; line-height:1; }
.bf-bento-cell.featured p{ color:rgba(255,255,255,.78); font-size:17px; max-width:340px; }
.bf-bento-cell.featured .icon{ background:rgba(255,255,255,.15); backdrop-filter:blur(10px); }
.bf-bento-cell.featured::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 80% at 100% 100%, rgba(152,221,190,.45), transparent),
    radial-gradient(40% 60% at 0% 0%, rgba(240,168,104,.22), transparent);
  z-index:1;
}
.bf-bento-cell.featured.has-bg .bg-layer{
  position:absolute; inset:0; pointer-events:none;
  background-image:var(--bg-image);
  background-size:contain;
  background-position:right center;
  background-repeat:no-repeat;
  opacity:.85;
  filter:saturate(1.05);
  z-index:0;
  mask-image:linear-gradient(to left, #000 30%, transparent 80%);
  -webkit-mask-image:linear-gradient(to left, #000 30%, transparent 80%);
}
[dir="rtl"] .bf-bento-cell.featured.has-bg .bg-layer{
  background-position:left center;
  mask-image:linear-gradient(to right, #000 30%, transparent 80%);
  -webkit-mask-image:linear-gradient(to right, #000 30%, transparent 80%);
}
.bf-bento-cell.featured.has-bg .icon,
.bf-bento-cell.featured.has-bg .bf-orbit{ position:relative; z-index:2; }
.bf-bento-cell.small{ grid-column:span 3; }
.bf-orbit{
  position:absolute; right:-40px; bottom:-40px;
  width:180px; height:180px; border-radius:50%;
  border:1px dashed rgba(255,255,255,.28);
  pointer-events:none;
}
.bf-orbit::before, .bf-orbit::after{ content:""; position:absolute; border-radius:50%; }
.bf-orbit::before{ inset:20px; border:1px dashed rgba(255,255,255,.22); }
.bf-orbit::after{
  width:12px; height:12px; background:var(--cyan-300);
  top:0; left:50%; transform:translateX(-50%);
  box-shadow:0 0 16px var(--cyan-300);
  animation:bf-orbit 8s linear infinite;
  transform-origin:50% 90px;
}
@keyframes bf-orbit{ to{ transform:translateX(-50%) rotate(360deg); } }
@media(max-width:880px){
  .bf-bento{ grid-template-columns:1fr; }
  .bf-bento-cell.featured, .bf-bento-cell.small{ grid-column:span 1; }
  .bf-bento-cell.featured{ grid-row:auto; min-height:auto; padding:28px; gap:14px; }
  .bf-bento-cell.featured h3{ font-size:30px; line-height:1.08; }
  .bf-bento-cell.featured p{ max-width:none; font-size:15px; }
  /* Photo becomes a faint full-bleed backdrop so the white text stays legible
     and the card no longer stretches tall to fit the contained image. */
  .bf-bento-cell.featured.has-bg .bg-layer{
    background-size:cover;
    background-position:center 18%;
    opacity:.22;
    -webkit-mask-image:none; mask-image:none;
  }
  [dir="rtl"] .bf-bento-cell.featured.has-bg .bg-layer{
    background-position:center 18%;
    -webkit-mask-image:none; mask-image:none;
  }
  .bf-orbit{ width:140px; height:140px; right:-30px; bottom:-30px; }
}

/* Legacy delivery cards (in case original markup is preserved anywhere) */
.deliveryTipsItem{
  background:var(--glass-strong) !important;
  border:1px solid var(--glass-stroke) !important;
  border-radius:var(--r-lg) !important;
  padding:1.4rem 1.6rem !important;
  box-shadow:var(--shadow-sm) !important;
}
.deliveryTipsItem .card-title{ color:var(--cyan-900) !important; font-family:var(--font-display); font-weight:600; }

/* ============================================================
   FEATURE BLOCK (bcard / chef)
   ============================================================ */
.BcardSection, .chefOnDemandSection, .bg-color-container{
  background:transparent !important;
  padding:40px 6vw;
}
.bf-feature{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.bf-feature.reverse{ direction:rtl; }
.bf-feature.reverse > *{ direction:ltr; }
[dir="rtl"] .bf-feature.reverse{ direction:ltr; }
[dir="rtl"] .bf-feature.reverse > *{ direction:rtl; }

.bf-feature h3{
  font-family:var(--font-display);
  font-size:clamp(36px, 4.8vw, 64px);
  line-height:1.02; letter-spacing:-.035em;
  font-weight:600; color:var(--cyan-900);
  margin:0 0 18px 0;
}
.bf-feature .lead{ font-size:18px; line-height:1.6; color:var(--ink-soft); margin:0 0 30px 0; }
.bf-feature .image-wrap{
  position:relative; aspect-ratio:4/3;
  border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.bf-feature .image-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.bf-feature .image-overlay-card{
  position:absolute; bottom:24px; left:24px; right:24px;
  background:var(--glass-strong); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-stroke);
  border-radius:var(--r-md); padding:16px 18px;
  display:flex; align-items:center; gap:14px;
}
.bf-feature .image-overlay-card .icon{
  width:42px; height:42px; border-radius:12px;
  background:var(--cyan-500); color:var(--ivory);
  display:grid; place-items:center; flex-shrink:0;
}
.bf-feature .image-overlay-card .text{ font-size:13px; color:var(--ink-soft); }
.bf-feature .image-overlay-card .text strong{ display:block; color:var(--cyan-900); font-weight:600; font-family:var(--font-display); }
.bf-feature .image-tag{
  position:absolute; top:18px; left:18px;
  display:inline-flex; align-items:center; gap:6px;
  background:var(--glass-strong); backdrop-filter:blur(16px);
  border:1px solid var(--glass-stroke);
  padding:6px 12px; border-radius:100px;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-900);
}
@media(max-width:880px){ .bf-feature{ grid-template-columns:1fr; gap:40px; } }

/* ============================================================
   STATS BAND + EDITORIAL QUOTE (replaces travel)
   ============================================================ */
.travelSection,
.bf-stats-quote-section{
  background:transparent !important;
  padding:30px 6vw 40px;
  background-image:none !important;
  min-height:auto;
}
.bf-stats-band{
  max-width:1280px; margin:0 auto;
  padding:44px 40px;
  background:linear-gradient(135deg, var(--cyan-900) 0%, var(--cyan-700) 100%);
  color:var(--ivory);
  border-radius:var(--r-xl);
  display:grid; grid-template-columns:repeat(4,1fr); gap:40px;
  position:relative; overflow:hidden;
}
.bf-stats-band.bf-stats-band-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:760px){
  .bf-stats-band, .bf-stats-band.bf-stats-band-3{ grid-template-columns:1fr; gap:28px; padding:40px 28px; }
}
.bf-stats-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(50% 80% at 100% 0%, rgba(152,221,190,.35), transparent),
    radial-gradient(40% 70% at 0% 100%, rgba(240,168,104,.18), transparent);
}
.bf-stat{ position:relative; z-index:1; }
.bf-stat-value{
  font-family:var(--font-display); font-size:64px;
  letter-spacing:-.04em; line-height:1; font-weight:600;
}
.bf-stat-value sup{ font-size:24px; color:var(--cyan-300); margin-left:4px; vertical-align:super; }
[dir="rtl"] .bf-stat-value sup{ margin-left:0; margin-right:4px; }
.bf-stat-label{ font-family:var(--font-mono); font-size:12px; opacity:.72; margin-top:12px; text-transform:uppercase; letter-spacing:.16em; }

/* ---- Reviews grid (replaces the single quote) ---- */
.bf-reviews-head{
  max-width:900px; margin:90px auto 30px;
  padding:0 6vw;
  text-align:center;
}
.bf-reviews-head .section-tag{ justify-content:center; }
.bf-reviews-head .section-tag::before,
.bf-reviews-head .section-tag::after{ content:""; width:24px; height:1px; background:var(--cyan-700); }
.bf-reviews-head .section-tag::after{ display:inline-block; }
.bf-reviews-head .section-title{ margin:0 auto; }
.bf-reviews-head .section-desc{ margin:18px auto 0; }

.bf-reviews-grid{
  max-width:1280px; margin:24px auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.bf-review-card{
  position:relative;
  background:var(--glass-strong); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-stroke);
  border-radius:var(--r-lg);
  padding:32px 28px 26px;
  display:flex; flex-direction:column; gap:18px;
  box-shadow:var(--shadow-sm);
  transition:transform .4s cubic-bezier(.2,.9,.3,1), box-shadow .4s;
  overflow:hidden;
}
.bf-review-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.bf-review-card::after{
  content:""; position:absolute; right:-30px; bottom:-30px;
  width:130px; height:130px; border-radius:50%;
  background:radial-gradient(circle, rgba(102,194,164,.10), transparent 70%);
  pointer-events:none;
}
[dir="rtl"] .bf-review-card::after{ right:auto; left:-30px; }
.bf-review-quote{
  width:34px; height:34px; color:var(--cyan-300);
  flex-shrink:0;
}
.bf-review-stars{
  display:flex; gap:3px; color:var(--accent-warm);
  margin-top:-6px;
}
.bf-review-text{
  font-family:var(--font-display);
  font-size:17px; line-height:1.55; color:var(--cyan-900);
  font-weight:400; letter-spacing:-.005em;
  margin:0;
}
.bf-review-attr{
  margin-top:auto; display:flex; align-items:center; gap:14px;
  padding-top:18px; border-top:1px solid rgba(63,139,113,.10);
}
.bf-review-avatar{
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg, var(--cyan-500), var(--cyan-700));
  display:grid; place-items:center; color:var(--ivory);
  font-family:var(--font-display); font-size:18px; font-weight:600;
  flex-shrink:0;
}
.bf-review-name{ font-weight:600; color:var(--cyan-900); font-family:var(--font-display); font-size:15px; }
.bf-review-role{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-mute); margin-top:2px; }

@media(max-width:980px){ .bf-reviews-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:660px){ .bf-reviews-grid{ grid-template-columns:1fr; } .bf-reviews-head{ margin-top:70px; } }

/* Reviews marquee — one continuous row reusing the partners' bf-marquee keyframe.
   The track is two identical halves and the -50% translate lands exactly on the
   start of the second half, so the loop is seamless front-to-end. Spacing lives
   in each card's margin (NOT a flex gap) so the strip tiles perfectly — a flex
   gap isn't doubled cleanly and would cause a small jump every cycle.
   Mechanics are forced LTR so it animates identically in English and Arabic. */
.bf-reviews-marquee{
  position:relative; margin:28px auto 0; overflow:hidden;
  direction:ltr;                 /* force LTR mechanics in both languages */
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
}
.bf-reviews-marquee .rev-row{ display:flex; direction:ltr; }
.bf-reviews-marquee .rev-track{
  display:flex; width:max-content;
  padding:16px 0;
  direction:ltr;
  animation:bf-marquee 80s linear infinite;
  will-change:transform;
}
.bf-reviews-marquee:hover .rev-track{ animation-play-state:paused; }
.bf-reviews-marquee .bf-review-card{
  flex:0 0 auto;
  width:clamp(300px, 30vw, 380px);
  margin-right:22px;             /* spacing as margin → perfectly tile-able */
  padding:26px 26px 22px;
}
/* No vertical lift inside a moving track — it would judder against the scroll */
.bf-reviews-marquee .bf-review-card:hover{ transform:none; box-shadow:var(--shadow-md); }
.bf-reviews-marquee .bf-review-text{ font-size:16px; }
[dir="rtl"] .bf-reviews-marquee .bf-review-card{ direction:rtl; text-align:right; }
@media(max-width:660px){
  .bf-reviews-marquee .bf-review-card{ width:82vw; }
}

@media(max-width:880px){
  .bf-stats-band{ grid-template-columns:repeat(2,1fr); gap:32px; padding:40px 28px; }
  .bf-stat-value{ font-size:46px; }
}

/* ============================================================
   CAREERS — two card grid
   ============================================================ */
.careersSection,
.bf-careers-section{
  background:transparent !important;
  padding:40px 6vw;
}
.bf-careers-grid{
  max-width:1280px; margin:24px auto 0;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.bf-career-card{
  background:var(--glass-strong); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-stroke);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:grid; grid-template-columns:200px 1fr;
  transition:transform .4s cubic-bezier(.2,.9,.3,1), box-shadow .4s;
  text-decoration:none; color:inherit;
}
.bf-career-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); color:inherit; }
.bf-career-card .thumb{ position:relative; overflow:hidden; }
.bf-career-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.bf-career-card .thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(31,75,63,.10) 0%, transparent 60%);
}
.bf-career-card .body{ padding:32px; display:flex; flex-direction:column; justify-content:space-between; gap:14px; }
.bf-career-card .body h4{
  font-family:var(--font-display); font-size:24px;
  letter-spacing:-.02em; font-weight:600; color:var(--cyan-900);
  margin:0;
}
.bf-career-card .body p{ font-size:15px; color:var(--ink-soft); margin:0; }
.bf-career-card .body .link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:500; color:var(--cyan-700);
  font-size:14px; margin-top:8px;
}
.bf-career-card:hover .body .link{ color:var(--cyan-900); }
@media(max-width:880px){
  .bf-careers-grid{ grid-template-columns:1fr; }
  .bf-career-card{ grid-template-columns:140px 1fr; }
}

/* ============================================================
   CTA BAND (ready-shopping)
   ============================================================ */
.readyShoppingSection,
.bf-cta-section{
  background:transparent !important;
  padding:20px 6vw 36px;
}
.bf-cta-band{
  max-width:1280px; margin:0 auto;
  padding:56px 48px;
  background:linear-gradient(135deg, var(--ivory) 0%, var(--cyan-100) 100%);
  border-radius:var(--r-xl);
  position:relative; overflow:hidden;
  border:1px solid var(--glass-stroke);
  display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center;
}
.bf-cta-band::before{
  content:""; position:absolute; top:-50%; right:-15%;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(63,139,113,.18), transparent 70%);
  animation:bf-drift 18s ease-in-out infinite alternate;
  pointer-events:none;
}
.bf-cta-band > *{ position:relative; z-index:1; }
.bf-cta-band h3{
  font-family:var(--font-display);
  font-size:clamp(34px, 4.8vw, 64px);
  line-height:1.02; letter-spacing:-.035em;
  font-weight:600; color:var(--cyan-900);
  margin:0 0 18px 0;
}
.bf-cta-band p{ font-size:17px; color:var(--ink-soft); margin:0 0 28px 0; }
.bf-cta-image{
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.bf-cta-image img{
  max-height:340px; width:auto; object-fit:contain;
  filter:drop-shadow(0 30px 40px rgba(31,75,63,.18));
}
/* ---- "The Jinni crew": a fanned trio of polaroid-style team cards ---------
   Replaces the old baked collage. Each portrait sits in a tilted white frame
   with a brand-trait chip, floats continuously, fans in on reveal, and lifts
   on hover. Built entirely in CSS so it scales crisply and animates smoothly. */
.bf-crew-stage{
  position:relative; width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:14px 0 30px;
  perspective:1200px;
}
.bf-crew-glow{
  position:absolute; inset:auto; width:78%; height:78%; left:11%; top:8%;
  background:radial-gradient(ellipse at 50% 45%,
              rgba(102,194,164,.34) 0%, rgba(102,194,164,.12) 38%,
              rgba(255,170,90,.10) 60%, transparent 74%);
  filter:blur(26px); z-index:0;
  animation:bf-crew-breathe 7s ease-in-out infinite;
}
@keyframes bf-crew-breathe{
  0%,100%{ transform:scale(1);    opacity:.9; }
  50%    { transform:scale(1.08); opacity:1;  }
}
.bf-crew-ring{
  position:absolute; width:300px; height:300px; z-index:0; top:50%; left:50%;
  translate:-50% -50%;
  border-radius:50%;
  border:1.5px dashed rgba(63,139,113,.28);
  -webkit-mask:radial-gradient(circle, transparent 58%, #000 60%);
  mask:radial-gradient(circle, transparent 58%, #000 60%);
  animation:bf-crew-spin 48s linear infinite;
}
@keyframes bf-crew-spin{ to{ transform:rotate(360deg); } }

.bf-crew{
  list-style:none; margin:0; padding:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
}
.bf-crew-card{
  position:relative; flex:0 0 auto;
  width:clamp(118px, 12.5vw, 158px);
  transform:translateY(var(--ty,0)) rotate(var(--rot,0deg));
  transition:transform .55s cubic-bezier(.2,.9,.3,1);
}
.bf-crew-card.c1{ --rot:-8deg; --ty:18px; z-index:1; margin-right:-30px; }
.bf-crew-card.c2{ --rot:0deg;  --ty:-14px; z-index:3; }
.bf-crew-card.c3{ --rot:8deg;  --ty:18px; z-index:2; margin-left:-30px; }

/* staggered fan-in once the band is revealed */
.bf-cta-band.in .bf-crew-card{ animation:bf-crew-in .85s cubic-bezier(.2,.9,.3,1) backwards; }
.bf-cta-band.in .bf-crew-card.c1{ animation-delay:.08s; }
.bf-cta-band.in .bf-crew-card.c2{ animation-delay:.22s; }
.bf-cta-band.in .bf-crew-card.c3{ animation-delay:.36s; }
@keyframes bf-crew-in{
  from{ opacity:0; transform:translateY(60px) rotate(0deg) scale(.88); }
  to  { opacity:1; transform:translateY(var(--ty)) rotate(var(--rot)) scale(1); }
}

/* inner wrapper carries the continuous float so it composes with the fan rotation */
.bf-crew-float{ animation:bf-crew-bob 7s ease-in-out infinite; }
.bf-crew-card.c2 .bf-crew-float{ animation-duration:8.6s; animation-delay:.4s; }
.bf-crew-card.c3 .bf-crew-float{ animation-duration:7.7s; animation-delay:.9s; }
@keyframes bf-crew-bob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-9px); }
}

.bf-crew-photo{
  position:relative; aspect-ratio:3/4;
  border-radius:18px; overflow:hidden;
  background:var(--cyan-100);
  border:3px solid #fff;
  box-shadow:0 22px 40px -18px rgba(31,75,63,.55),
             0 4px 10px -4px rgba(31,75,63,.30);
  transition:transform .5s cubic-bezier(.2,.9,.3,1), box-shadow .5s;
}
.bf-crew-photo img{
  position:absolute; inset:0;
  width:100%; height:100%; max-height:none;
  object-fit:cover; object-position:50% 18%;
  filter:none;
  transition:transform .7s cubic-bezier(.2,.9,.3,1);
}
.bf-crew-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(9,31,24,0) 52%, rgba(9,31,24,.46) 100%);
}
/* light sweep across each frame */
.bf-crew-shine{
  position:absolute; top:-40%; left:-70%; width:55%; height:200%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform:rotate(18deg); pointer-events:none;
  animation:bf-crew-shine 6s ease-in-out infinite;
}
.bf-crew-card.c2 .bf-crew-shine{ animation-delay:2s; }
.bf-crew-card.c3 .bf-crew-shine{ animation-delay:4s; }
@keyframes bf-crew-shine{
  0%   { left:-70%; opacity:0; }
  12%  { opacity:.9; }
  38%  { left:150%; opacity:0; }
  100% { left:150%; opacity:0; }
}

/* brand-trait chip */
.bf-crew-chip{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  z-index:2; white-space:nowrap;
  padding:5px 12px; border-radius:999px;
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.6);
  transition:transform .45s cubic-bezier(.2,.9,.3,1);
}
.bf-crew-chip.mint { background:var(--accent-mint, #9ddcbe); color:var(--cyan-900); }
.bf-crew-chip.dark { background:#23313b; color:#fff; border-color:rgba(255,255,255,.18); }
.bf-crew-chip.amber{ background:var(--accent-warm, #ffaa5a); color:#3a2406; }

/* hover: lift the frame, zoom the photo, nudge the chip up */
.bf-crew-card:hover{ z-index:6; }
.bf-crew-card:hover .bf-crew-photo{
  transform:translateY(-10px) scale(1.04);
  box-shadow:0 30px 54px -20px rgba(31,75,63,.6);
}
.bf-crew-card:hover .bf-crew-photo img{ transform:scale(1.09); }
.bf-crew-card:hover .bf-crew-chip{ transform:translateX(-50%) translateY(-4px); }

.bf-crew-spark{
  position:absolute; z-index:5; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, rgba(152,221,190,.9) 42%, transparent 72%);
  filter:drop-shadow(0 0 6px rgba(152,221,190,.85));
  animation:bf-crew-twinkle 3.6s ease-in-out infinite;
}
.bf-crew-spark.s1{ top:10%;  left:14%; animation-delay:.1s; }
.bf-crew-spark.s2{ top:24%;  right:12%; width:7px; height:7px; animation-delay:1.1s; }
.bf-crew-spark.s3{ bottom:20%; left:20%; width:8px; height:8px; animation-delay:2.0s; }
.bf-crew-spark.s4{ bottom:30%; right:16%; width:6px; height:6px; animation-delay:2.7s; }
@keyframes bf-crew-twinkle{
  0%,100%{ transform:scale(.3); opacity:0; }
  50%    { transform:scale(1);  opacity:1; }
}

@media(max-width:880px){
  .bf-cta-band{ grid-template-columns:1fr; padding:50px 30px; gap:30px; }
  .bf-cta-image{ order:-1; }
  .bf-crew-card{ width:clamp(120px, 30vw, 168px); }
}

/* ============================================================
   SERVICES (blog rebranded)
   ============================================================ */
.blogPostsSection,
.bf-services-section{
  background:transparent !important;
  padding:30px 6vw 40px;
  overflow-x:clip;            /* contain the off-screen-left start of the cards */
}
/* ---- Services grid: 8 interactive, click-to-expand cards ----------------- */
.svc-grid{
  max-width:1280px; margin:26px auto 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.svc-card{
  position:relative; overflow:hidden;
  container-type:inline-size;
  display:flex; flex-direction:column; align-items:flex-start; gap:11px;
  width:100%; text-align:left; cursor:pointer;
  font:inherit; color:inherit; -webkit-tap-highlight-color:transparent;
  background:var(--glass-strong); backdrop-filter:blur(16px) saturate(170%);
  border:1px solid var(--glass-stroke);
  border-radius:var(--r-lg);
  padding:24px 22px 18px; min-height:180px;
  box-shadow:0 14px 30px -22px rgba(31,75,63,.45);
  transition:box-shadow .45s ease, border-color .45s ease;
  --svc-accent:var(--cyan-500); --svc-deep:var(--cyan-700);
}
.svc-card.tone-mint { --svc-accent:#66C2A4; --svc-deep:#3F8B71; }
.svc-card.tone-teal { --svc-accent:#3F8B71; --svc-deep:#1F4B3F; }
.svc-card.tone-amber{ --svc-accent:#FFB36B; --svc-deep:#E07B39; }
.svc-card.tone-deep { --svc-accent:#2C7A63; --svc-deep:#14342B; }
.svc-card:focus-visible{ outline:2px solid var(--svc-deep); outline-offset:3px; }

/* top accent bar grows on hover / open */
.svc-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--svc-accent), var(--svc-deep));
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.9,.3,1);
}
.svc-card:hover::before, .svc-card.is-open::before{ transform:scaleX(1); }

/* ghost watermark icon in the corner */
.svc-ghost{
  position:absolute; right:-18px; bottom:-24px; width:130px; height:130px;
  color:var(--svc-accent); opacity:.08; pointer-events:none;
  transition:transform .6s cubic-bezier(.2,.9,.3,1), opacity .45s;
}
.svc-ghost svg{ width:100%; height:100%; }
.svc-card:hover .svc-ghost{ transform:rotate(-12deg) scale(1.12); opacity:.14; }

/* big index number, top corner */
.svc-num{
  position:absolute; top:16px; right:20px;
  font-family:var(--font-display); font-weight:700; font-size:22px;
  color:var(--svc-accent); opacity:.30; letter-spacing:-.02em;
}

/* large service logo that melts into the card */
.svc-icon{
  position:relative; z-index:4;
  width:76px; height:76px;
  display:grid; place-items:center;
  background:transparent;
  filter:drop-shadow(0 12px 20px rgba(31,75,63,.26));
  transform:translate3d(0,0,0) scale(1) rotate(0deg);
  transition:transform .62s cubic-bezier(.34,1.32,.42,1),
             filter .45s ease;
  will-change:transform;
}
/* soft tonal halo blends the logo edge into the card */
.svc-icon::before{
  content:""; position:absolute; inset:-12px; border-radius:50%;
  background:radial-gradient(circle at 50% 46%, var(--svc-accent) 0%, transparent 68%);
  opacity:.20; filter:blur(7px); z-index:0;
  transition:opacity .45s ease;
}
.svc-icon img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:50%;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 70%, transparent 84%);
          mask-image:radial-gradient(circle at 50% 50%, #000 70%, transparent 84%);
}

/* hover: logo glides to the card's horizontal centre, grows & lifts.
   cqw is the card's CONTENT box (excludes 22px L/R padding), so
   50cqw = cardWidth/2 - 22px. The logo centre rests 38px from the
   content edge (half its 76px width), giving an exact-centre shift of
   (cardWidth/2 - 60) = 50cqw - 38px. */
.svc-card:hover .svc-icon,
.svc-card:focus-visible .svc-icon{
  transform:translate3d(calc(50cqw - 38px), -8px, 0) scale(1.5) rotate(-4deg);
  filter:drop-shadow(0 24px 30px rgba(31,75,63,.34));
}
[dir="rtl"] .svc-card:hover .svc-icon,
[dir="rtl"] .svc-card:focus-visible .svc-icon{
  transform:translate3d(calc(38px - 50cqw), -8px, 0) scale(1.5) rotate(4deg);
}
.svc-card:hover .svc-icon::before,
.svc-card:focus-visible .svc-icon::before{ opacity:.42; }

@media (prefers-reduced-motion: reduce){
  .svc-icon{ transition:filter .3s ease; }
  .svc-card:hover .svc-icon,
  .svc-card:focus-visible .svc-icon,
  [dir="rtl"] .svc-card:hover .svc-icon,
  [dir="rtl"] .svc-card:focus-visible .svc-icon{ transform:none; }
}

.svc-name{
  font-family:var(--font-display); font-weight:600; font-size:18px;
  line-height:1.2; color:var(--cyan-900); letter-spacing:-.01em;
}
.svc-meta{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--svc-deep);
}
.svc-desc{
  font-size:13px; line-height:1.55; color:var(--ink-soft);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .55s ease, opacity .4s ease, margin .4s ease;
}
.svc-card.is-open .svc-desc{ max-height:280px; opacity:1; margin-top:2px; }
.svc-toggle{
  margin-top:auto; display:inline-flex; align-items:center; gap:6px;
  padding-top:10px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--svc-deep);
}
.svc-toggle svg{ transition:transform .4s ease; }
.svc-card.is-open .svc-toggle svg{ transform:rotate(180deg); }

/* The cell is the (non-transformed) grid item the IntersectionObserver watches;
   the card inside is what flies in, so an off-screen card never hides its own
   trigger. */
.svc-cell{ display:flex; min-width:0; }
.svc-cell .svc-card{ flex:1 1 auto; }

/* Card starts "thrown" off the left edge, then slides into place one-by-one as
   the cell scrolls into view (JS adds .in to the cell, staggered per card).
   Distance is % of card width, so it reads as "from the left" on any screen. */
.svc-cell .svc-card{ opacity:0; transform:translateX(-135%) rotate(-2.5deg); will-change:transform, opacity; }
[dir="rtl"] .svc-cell .svc-card{ transform:translateX(135%) rotate(2.5deg); }
.svc-cell.in .svc-card{
  opacity:1; transform:translateX(0) rotate(0);
  transition:transform 1.05s cubic-bezier(.2,.86,.34,1.08),
             opacity .8s ease,
             box-shadow .45s ease, border-color .45s ease;
}
.svc-cell.in .svc-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 50px -26px rgba(31,75,63,.5);
  border-color:var(--svc-accent);
  transition:transform .4s cubic-bezier(.2,.9,.3,1), box-shadow .4s, border-color .4s;
}

/* RTL mirrors */
/* In an RTL flex column the cross-axis is reversed, so flex-START resolves to
   the RIGHT edge — that's what lines the icon, title and meta to the right. */
[dir="rtl"] .svc-card{ text-align:right; align-items:flex-start; }
[dir="rtl"] .svc-num{ right:auto; left:20px; }
[dir="rtl"] .svc-ghost{ right:auto; left:-18px; }
[dir="rtl"] .svc-card::before{ transform-origin:right; }

@media(max-width:1040px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .svc-grid{ grid-template-columns:1fr; } }

/* ---- Services accordion: two premium category bands, collapsed by default ---- */
.svc-accordion{ max-width:1180px; margin:30px auto 0; display:flex; flex-direction:column; gap:18px; }

.svc-section{ --sa:var(--cyan-500); --sd:var(--cyan-700); --stint:#E6F6EF; --sglow:rgba(102,194,164,.20); --sline:rgba(102,194,164,.42); }
.svc-section.tone-mint { --sa:#66C2A4; --sd:#3F8B71; --stint:#E6F6EF; --sglow:rgba(102,194,164,.22); --sline:rgba(102,194,164,.45); }
.svc-section.tone-amber{ --sa:#F0A868; --sd:#CF7E34; --stint:#FCF1E4; --sglow:rgba(240,168,104,.24); --sline:rgba(240,168,104,.48); }

.svc-section-btn{
  position:relative; overflow:hidden; isolation:isolate;
  width:100%; display:flex; align-items:center; gap:22px;
  padding:26px 32px; cursor:pointer; text-align:left; font:inherit;
  color:var(--cyan-900);
  background:
    radial-gradient(135% 150% at 0% 0%, var(--sglow), transparent 58%),
    var(--glass-strong);
  backdrop-filter:blur(18px) saturate(180%);
  border:1px solid var(--glass-stroke); border-radius:var(--r-lg);
  box-shadow:0 18px 42px -28px rgba(31,75,63,.55);
  transition:transform .5s cubic-bezier(.2,.9,.3,1), box-shadow .5s ease, border-color .5s ease;
}
.svc-section-btn:hover{ transform:translateY(-3px); border-color:var(--sline); box-shadow:0 32px 58px -30px rgba(31,75,63,.62); }
.svc-section-btn:focus-visible{ outline:2px solid var(--sd); outline-offset:3px; }
.svc-section.is-open .svc-section-btn{ border-color:var(--sline); }
[dir="rtl"] .svc-section-btn{ text-align:right; background:radial-gradient(135% 150% at 100% 0%, var(--sglow), transparent 58%), var(--glass-strong); }

/* top accent bar grows on hover / open */
.svc-section-btn::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px; z-index:2;
  background:linear-gradient(90deg, var(--sa), var(--sd));
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s cubic-bezier(.2,.9,.3,1);
}
.svc-section-btn:hover::before, .svc-section.is-open .svc-section-btn::before{ transform:scaleX(1); }
[dir="rtl"] .svc-section-btn::before{ transform-origin:right; }

/* faint ghost watermark, centred in the row so it never clashes with the CTA */
.svc-section .svc-ghost{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:140px; height:140px; color:var(--sa); opacity:.08; z-index:0; pointer-events:none;
  transition:transform .7s cubic-bezier(.2,.9,.3,1), opacity .5s ease;
}
.svc-section .svc-ghost svg{ width:100%; height:100%; }
.svc-section-btn:hover .svc-ghost{ transform:rotate(-10deg) scale(1.12); opacity:.14; }

/* tilted gradient icon badge (echoes the service cards) */
.svc-section-badge{
  position:relative; z-index:1; flex:none;
  width:64px; height:64px; border-radius:20px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, var(--sa), var(--sd));
  box-shadow:0 16px 28px -12px var(--sline);
  transform:rotate(-6deg);
  transition:transform .5s cubic-bezier(.2,.9,.3,1);
}
.svc-section-btn:hover .svc-section-badge,
.svc-section.is-open .svc-section-badge{ transform:rotate(3deg) scale(1.05); }

.svc-section-text{ position:relative; z-index:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.svc-section-kicker{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--sd);
}
.svc-section-name{ font-family:var(--font-display); font-weight:600; font-size:25px; line-height:1.08; letter-spacing:-.015em; color:var(--cyan-900); }
.svc-section-sub{ font-size:13.5px; line-height:1.4; color:var(--ink-mute); }

.svc-section-action{ position:relative; z-index:1; margin-inline-start:auto; display:flex; align-items:center; gap:18px; flex:none; }
.svc-section-count{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--ink-mute); white-space:nowrap; }
.svc-section-count b{ font-size:18px; font-weight:600; color:var(--cyan-900); }

/* "View services" pill — the clear click-to-expand affordance */
.svc-section-cta{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  padding:11px 16px 11px 20px; border-radius:999px;
  font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:-.01em;
  color:var(--sd); background:var(--stint); border:1px solid var(--sline);
  box-shadow:0 6px 16px -10px var(--sline);
  transition:background .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, transform .5s cubic-bezier(.2,.9,.3,1);
}
.svc-section-btn:hover .svc-section-cta{
  background:linear-gradient(135deg, var(--sa), var(--sd)); color:#fff; border-color:transparent;
  box-shadow:0 14px 26px -12px var(--sline); transform:translateY(-1px);
}
.svc-section.is-open .svc-section-cta{
  background:linear-gradient(135deg, var(--sa), var(--sd)); color:#fff; border-color:transparent;
}
.svc-cta-chev{ display:grid; place-items:center; }
.svc-cta-chev svg{ transition:transform .5s cubic-bezier(.2,.9,.3,1); }
.svc-section.is-open .svc-cta-chev svg{ transform:rotate(180deg); }
.svc-cta-less{ display:none; }
.svc-section.is-open .svc-cta-more{ display:none; }
.svc-section.is-open .svc-cta-less{ display:inline; }
[dir="rtl"] .svc-section-cta{ padding:11px 20px 11px 16px; }

/* Collapsible panel — JS animates max-height; cards inside keep their slide-in */
.svc-panel{ overflow:hidden; max-height:0; opacity:0; transition:max-height .6s cubic-bezier(.2,.86,.34,1), opacity .45s ease; }
.svc-panel[hidden]{ display:none; }
.svc-panel .svc-grid{ margin:22px 0 8px; }

@media(max-width:680px){
  .svc-section-btn{ padding:18px 18px; gap:14px; }
  .svc-section-badge{ width:52px; height:52px; border-radius:16px; }
  .svc-section-name{ font-size:19px; }
  .svc-section-sub{ display:none; }
  .svc-section-count{ display:none; }
  .svc-section-cta{ padding:9px 14px; font-size:13px; }
  .svc-section .svc-ghost{ display:none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footerSection,
.bf-footer{
  background:var(--cyan-900) !important;
  color:var(--ivory);
  padding:80px 6vw 30px;
  position:relative; overflow:hidden;
}
.bf-footer::before{
  content:""; position:absolute; top:-30%; left:-10%;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(152,221,190,.10), transparent 70%);
  pointer-events:none;
}
.bf-footer-grid{
  position:relative; z-index:1;
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:60px;
  padding-bottom:50px;
}
.bf-footer-brand img{ height:38px; }
.bf-footer-tag{
  margin-top:22px; font-family:var(--font-display);
  font-size:24px; line-height:1.25; letter-spacing:-.02em;
  color:var(--ivory); max-width:340px; font-weight:500;
}
.bf-footer-socials{
  margin-top:24px; display:flex; gap:10px; padding:0; list-style:none;
}
.bf-footer-socials a{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08);
  color:var(--ivory);
  text-decoration:none;
  transition:all .2s ease;
}
.bf-footer-socials a:hover{ background:var(--cyan-500); transform:translateY(-2px); }
.bf-footer-col h4{
  font-family:var(--font-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:.2em;
  color:rgba(255,255,255,.55); margin:0 0 18px 0; font-weight:500;
}
.bf-footer-col ul{ list-style:none; margin:0; padding:0; }
.bf-footer-col ul li{ margin-bottom:10px; }
.bf-footer-col ul a{
  text-decoration:none; color:var(--ivory);
  font-size:15px; transition:color .25s;
}
.bf-footer-col ul a:hover{ color:var(--cyan-300); }
.bf-footer-download h4{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.2em; color:rgba(255,255,255,.55); margin:0 0 18px 0; font-weight:500; }
.bf-footer-base{
  position:relative; z-index:1;
  max-width:1280px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  padding-top:30px; border-top:1px solid rgba(255,255,255,.10);
  font-size:13px; color:rgba(255,255,255,.6);
  flex-wrap:wrap; gap:14px;
}
.bf-footer-base .links{ display:flex; gap:24px; }
.bf-footer-base a{ color:rgba(255,255,255,.6); text-decoration:none; }
.bf-footer-base a:hover{ color:var(--cyan-300); }
@media(max-width:980px){
  .bf-footer-grid{ grid-template-columns:1fr 1fr; gap:40px; }
}
@media(max-width:560px){
  .bf-footer-grid{ grid-template-columns:1fr; }
  .bf-footer-base{ flex-direction:column; align-items:flex-start; }
}

/* Store badges */
.storesActionsList{ list-style:none; padding:0; margin:0; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.storeBadge{ height:46px; width:auto; border-radius:8px; transition:transform .2s; }
.storesActionsList a:hover .storeBadge{ transform:translateY(-2px); }

/* ============================================================
   SCROLL REVEAL utility
   ============================================================ */
.bf-reveal{
  opacity:0; transform:translateY(36px);
  transition:opacity .9s cubic-bezier(.2,.9,.3,1), transform .9s cubic-bezier(.2,.9,.3,1);
}
.bf-reveal.in{ opacity:1; transform:translateY(0); }

/* Decorative star */
.bf-star{
  display:inline-block; vertical-align:middle;
  width:.7em; height:.7em; margin:0 .1em;
  animation:bf-spin 12s linear infinite;
}
@keyframes bf-spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   HIDE LEGACY ARTIFACTS we no longer want shown
   ============================================================ */
.heroSection .heroSectionImg,
.heroSection .pgHeader,
.heroSection .heroSectionSlogan,
.heroSection .footerHeading{ display:none; }
.heroSection .navbarWrapper{ display:none; }
.heroSection{ padding:0 !important; min-height:0; background:transparent !important; }
.heroSection::before, .heroSection::after{ display:none; }

/* Hide the old polaroid block — we redesign travel completely */
.travelSection .polaroid,
.travelSection .img-polaroids-section,
.travelSection .text-section{ display:none; }

/* Hide the legacy ready-shopping content (replaced by bf-cta-band) */
.readyShoppingSection .readyShoppingSectionImgWrapper,
.readyShoppingSection .readyShoppingSectionContent,
.readyShoppingSection > .container > .row{ display:none; }

/* Hide legacy careers + blog markup (replaced) */
.careersSection > .container > .row.careersCards,
.careersSection > .container > a{ display:none; }
.blogPostsSection > .container > a,
.blogPostsSection .blogPostsWrapper{ display:none; }

/* Hide legacy delivery-tips list (replaced by bento) */
.deliveryTipsSetion .deliveryManImg,
.deliveryTipsSetion .deliveryTipsList,
.deliveryTipsSetion > .container > .row{ display:none; }

/* Hide legacy products copy block (replaced) */
.productsSection > .container.py-5{ display:none; }
.productsSection .productsGalleryContainer{ display:none; }

/* Hide legacy footer guts (replaced) */
.footerSection > .container > .row,
.footerSection > hr,
.footerSection > .container > .row.justify-content-center{ display:none; }

/* ============================================================
   RTL adjustments
   ============================================================ */
[dir="rtl"] .section-tag::before{ display:none; }
[dir="rtl"] .section-tag::after{
  content:""; width:24px; height:1px; background:var(--cyan-700);
}
[dir="rtl"] .bf-hero-words span{ direction:rtl; }
[dir="rtl"] .bf-float-card.c1{ right:auto; left:0; }
[dir="rtl"] .bf-float-card.c2{ right:auto; left:210px; }
[dir="rtl"] .bf-float-card.c3{ right:auto; left:30px; }
[dir="rtl"] .bf-orbit{ right:auto; left:-40px; }
[dir="rtl"] .bf-feature .image-tag{ left:auto; right:18px; }
[dir="rtl"] .bf-cta-band::before{ right:auto; left:-15%; }
[dir="rtl"] .bf-service-card .thumb .cat-pill{ left:auto; right:14px; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .aurora::before{ animation:none; }
  .bf-marquee-section .slide-track{ animation:none; }
  .bf-reviews-marquee .rev-track{ animation:none; }
  .bf-reviews-marquee .rev-row{ overflow-x:auto; }
}

/* ============================================================
   HERO — SPLIT LAYOUT (copy + cinematic portrait, one viewport)
   ============================================================ */
.bf-hero-split{
  min-height:100vh;
  padding:120px 6vw 80px;
  justify-content:center;
}
.bf-hero-split .bf-hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
  gap:60px;
  align-items:center;
  width:100%;
}
.bf-hero-split .bf-hero-copy{
  display:flex; flex-direction:column;
  min-width:0;
}
.bf-hero-split .bf-hero-title{
  font-size:clamp(34px, 4.4vw, 64px);
  line-height:1.04;
  max-width:none;
  margin:0 0 24px 0;
}
.bf-hero-split .bf-hero-lead{
  font-size:clamp(15px, 1.15vw, 18px);
  max-width:520px; line-height:1.55;
  margin:0;
  animation:bf-fadeUp 1s .8s both;
}
.bf-hero-split .bf-hero-download-label{ margin-top:28px; }
.bf-hero-split .bf-hero-actions{ margin-top:14px; }

@media(max-width:960px){
  .bf-hero-split{ padding:100px 5vw 60px; min-height:auto; }
  .bf-hero-split .bf-hero-grid{
    grid-template-columns:1fr;
    gap:48px;
  }
  .bf-hero-split .bf-hero-visual{ order:2; }
  .bf-hero-split .bf-hero-title{ font-size:clamp(34px, 8vw, 56px); }
}

.bf-hero-stage{
  height:min(560px, 70vh);
  min-height:440px;
  perspective:1400px;
  isolation:isolate;
}

/* Soft radial atmosphere behind the portrait */
.bf-stage-glow{
  position:absolute; inset:auto 0 0 auto;
  width:560px; height:560px; top:50%; right:50%;
  transform:translate(50%,-50%);
  background:radial-gradient(circle at 50% 50%,
              rgba(102,194,164,.40) 0%,
              rgba(102,194,164,.15) 30%,
              rgba(255,170,90,.10) 55%,
              transparent 70%);
  filter:blur(40px);
  z-index:0;
  animation:bf-stage-breathe 7s ease-in-out infinite;
}
@keyframes bf-stage-breathe{
  0%,100%{ transform:translate(50%,-50%) scale(1);   opacity:.85; }
  50%   { transform:translate(50%,-50%) scale(1.08); opacity:1;   }
}

/* Faint orbit lines for cinematic depth */
.bf-stage-orbit{
  position:absolute; top:50%; right:50%;
  width:620px; height:620px;
  transform:translate(50%,-50%);
  border-radius:50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(102,194,164,.0) 0deg 14deg,
      rgba(102,194,164,.08) 14deg 16deg
    );
  mask:radial-gradient(circle, transparent 240px, #000 242px, #000 305px, transparent 308px);
  -webkit-mask:radial-gradient(circle, transparent 240px, #000 242px, #000 305px, transparent 308px);
  animation:bf-orbit-spin 60s linear infinite;
  z-index:0;
  opacity:.7;
}
@keyframes bf-orbit-spin{
  to{ transform:translate(50%,-50%) rotate(360deg); }
}

/* The portrait itself */
.bf-stage-portrait{
  position:absolute;
  top:50%; right:50%;
  transform:translate(50%,-50%);
  width:min(440px, 80%);
  aspect-ratio:1/1;
  z-index:2;
  animation:
    bf-portrait-in 1.8s cubic-bezier(.2,.9,.3,1) both,
    bf-portrait-float 8s ease-in-out 1.8s infinite;
}
@keyframes bf-portrait-in{
  0%  { opacity:0; transform:translate(50%,-50%) scale(.7) rotateX(14deg); filter:blur(20px) saturate(140%); }
  60% { opacity:1; filter:blur(0) saturate(110%); }
  100%{ opacity:1; transform:translate(50%,-50%) scale(1)  rotateX(0);     filter:blur(0) saturate(100%); }
}
@keyframes bf-portrait-float{
  0%,100%{ transform:translate(50%,-50%) translateY(0)    rotate(0); }
  50%   { transform:translate(50%,-50%) translateY(-14px) rotate(.6deg); }
}

.bf-stage-img{
  position:relative; z-index:2;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.55);
  box-shadow:
    0 30px 60px -20px rgba(31,75,63,.45),
    0 12px 28px -10px rgba(102,194,164,.45),
    inset 0 0 0 1px rgba(255,255,255,.30);
  background:linear-gradient(135deg, var(--cyan-100), var(--ivory));
}

/* Concentric rotating rings */
.bf-stage-ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:1.5px dashed rgba(102,194,164,.45);
  pointer-events:none;
}
.bf-stage-ring.r1{ inset:-22px; border-style:solid; border-color:rgba(102,194,164,.20); animation:bf-ring-spin 28s linear infinite; }
.bf-stage-ring.r2{ inset:-44px; border-color:rgba(255,170,90,.35);  animation:bf-ring-spin 42s linear reverse infinite; }
.bf-stage-ring.r3{
  inset:-72px; border:1px solid rgba(31,75,63,.10);
  background:conic-gradient(from 0deg, transparent 0 80%, rgba(102,194,164,.45) 90%, transparent 100%);
  -webkit-mask:radial-gradient(circle, transparent calc(50% - 1.5px), #000 calc(50% - 1px), #000 50%, transparent calc(50% + 1px));
          mask:radial-gradient(circle, transparent calc(50% - 1.5px), #000 calc(50% - 1px), #000 50%, transparent calc(50% + 1px));
  animation:bf-ring-spin 16s linear infinite;
}
@keyframes bf-ring-spin{ to{ transform:rotate(360deg); } }

/* Sparkles on the rim */
.bf-sparkle{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, rgba(255,255,255,.6) 30%, transparent 70%);
  box-shadow:0 0 14px 4px rgba(255,255,255,.7), 0 0 24px 8px rgba(102,194,164,.45);
  pointer-events:none; z-index:3;
  animation:bf-sparkle-twinkle 3.4s ease-in-out infinite;
}
.bf-sparkle.s1{ top:6%;  left:14%; animation-delay:.0s; }
.bf-sparkle.s2{ top:22%; right:-2%; animation-delay:.9s; width:8px; height:8px; }
.bf-sparkle.s3{ bottom:8%; left:24%; animation-delay:1.6s; width:12px; height:12px; }
.bf-sparkle.s4{ bottom:24%; right:8%; animation-delay:2.2s; }
.bf-sparkle.s5{ top:48%; left:-3%; animation-delay:1.2s; width:6px; height:6px; }
@keyframes bf-sparkle-twinkle{
  0%,100%{ transform:scale(.6); opacity:.4; }
  50%   { transform:scale(1.2); opacity:1; }
}

/* Re-pin floating cards so they orbit the portrait */
.bf-hero-stage .bf-float-card.c1{ top:24px;   right:-10px; z-index:4; }
.bf-hero-stage .bf-float-card.c3{ bottom:18px; left:-10px; right:auto; top:auto; z-index:4; }
[dir="rtl"] .bf-hero-stage .bf-float-card.c1{ right:auto; left:-10px; }
[dir="rtl"] .bf-hero-stage .bf-float-card.c3{ left:auto;  right:-10px; }

/* ============================================================
   HERO — APP STORE BUTTONS (Android + iOS)
   ============================================================ */
.bf-hero-actions{ gap:14px 16px; }
.bf-app-btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:12px 22px 12px 16px;
  border-radius:14px;
  background:var(--cyan-900);
  color:var(--ivory);
  text-decoration:none;
  font-family:var(--font-display);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 16px 32px -14px rgba(31,75,63,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .35s cubic-bezier(.2,.9,.3,1),
             box-shadow .35s ease,
             background .35s ease;
  position:relative; overflow:hidden;
}
.bf-app-btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,.16) 50%,
    transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s ease;
  pointer-events:none;
}
.bf-app-btn:hover{
  transform:translateY(-3px);
  background:#163C32;
  box-shadow:
    0 22px 40px -16px rgba(31,75,63,.7),
    0 0 0 2px var(--cyan-500),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.bf-app-btn:hover::after{ transform:translateX(120%); }
.bf-app-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(102,194,164,.55);
}
.bf-app-btn-icon{ width:28px; height:28px; flex:0 0 auto; }
.bf-app-btn-text{ display:flex; flex-direction:column; line-height:1.1; text-align:start; }
.bf-app-btn-text .lbl{ font-size:11px; opacity:.8; letter-spacing:.04em; font-weight:400; }
.bf-app-btn-text .store{ font-size:17px; font-weight:600; letter-spacing:-.01em; }

@media(max-width:960px){
  .bf-hero-stage{ height:460px; }
  .bf-stage-portrait{ width:min(320px, 75%); }
  .bf-stage-glow{ width:420px; height:420px; }
  .bf-stage-orbit{ width:460px; height:460px; }
  .bf-hero-stage .bf-float-card.c1{ width:190px; top:8px; }
  .bf-hero-stage .bf-float-card.c3{ width:200px; bottom:8px; }
}
@media(max-width:560px){
  .bf-app-btn{ flex:1 1 auto; justify-content:center; }
}

/* ============================================================
   CLEANING TYPES (4-card grid, no pricing)
   ============================================================ */
.bf-clean-section{
  background:transparent !important;
  padding:30px 6vw 40px;
}
.bf-clean-grid{
  max-width:1280px; margin:24px auto 0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
}
.bf-clean-card{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  padding:28px 24px 26px;
  background:var(--glass-strong);
  backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-stroke);
  box-shadow:0 12px 28px -16px rgba(31,75,63,.30);
  transition:transform .5s cubic-bezier(.2,.9,.3,1),
             box-shadow .5s ease,
             border-color .5s ease;
  display:flex; flex-direction:column; gap:18px;
  isolation:isolate;
}
.bf-clean-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px;
  background:linear-gradient(140deg, rgba(102,194,164,.55) 0%, transparent 50%, rgba(255,170,90,.45) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s ease; pointer-events:none;
  z-index:1;
}
.bf-clean-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 44px -22px rgba(31,75,63,.45);
  border-color:transparent;
}
.bf-clean-card:hover::before{ opacity:1; }
.bf-clean-icon{
  width:52px; height:52px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--cyan-100), rgba(152,221,190,.45));
  color:var(--cyan-900);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.bf-clean-icon svg{ width:26px; height:26px; }
.bf-clean-meta{
  font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.18em;
  color:var(--cyan-700);
}
.bf-clean-title{
  font-family:var(--font-display);
  font-size:22px; letter-spacing:-.02em;
  font-weight:600; color:var(--cyan-900);
  margin:6px 0 0 0; line-height:1.2;
}
.bf-clean-text{
  font-size:14px; line-height:1.55; color:var(--ink-soft);
  margin:0;
}
.bf-clean-cta{
  position:relative; z-index:2;
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px 9px 16px;
  border-radius:100px;
  background:var(--cyan-900);
  color:var(--ivory);
  text-decoration:none;
  font-family:var(--font-display);
  font-size:13.5px; font-weight:600; letter-spacing:.01em;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 20px -10px rgba(31,75,63,.5);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.9,.3,1),
             box-shadow .35s ease,
             padding .35s ease;
}
.bf-clean-cta::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg, var(--accent-warm) 0%, var(--cyan-500) 100%);
  opacity:0; transition:opacity .4s ease;
  z-index:-1;
}
.bf-clean-cta-label{ position:relative; z-index:1; }
.bf-clean-cta-arrow{
  position:relative; z-index:1;
  width:22px; height:22px; border-radius:50%;
  background:var(--cyan-500);
  color:var(--cyan-900);
  display:grid; place-items:center;
  transition:transform .4s cubic-bezier(.2,.9,.3,1),
             background .35s ease;
}
.bf-clean-card:hover .bf-clean-cta{
  transform:translateY(-2px);
  padding-right:18px;
  box-shadow:0 14px 26px -10px rgba(240,168,104,.55),
             0 6px 16px -8px rgba(31,75,63,.4);
}
.bf-clean-card:hover .bf-clean-cta::before{ opacity:1; }
.bf-clean-card:hover .bf-clean-cta-arrow{
  transform:translateX(3px) rotate(-3deg);
  background:#fff;
}
[dir="rtl"] .bf-clean-cta{ padding:9px 16px 9px 14px; }
[dir="rtl"] .bf-clean-card:hover .bf-clean-cta{ padding-left:18px; padding-right:14px; }
[dir="rtl"] .bf-clean-card:hover .bf-clean-cta-arrow{ transform:translateX(-3px) rotate(3deg); }

.bf-clean-spark{
  position:absolute; bottom:-30px; right:-30px;
  width:120px; height:120px; pointer-events:none; z-index:0;
}
.bf-clean-spark span{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(102,194,164,.45), transparent 65%);
  filter:blur(8px);
}
.bf-clean-spark span:nth-child(1){ width:60px; height:60px; top:20px; right:20px; }
.bf-clean-spark span:nth-child(2){ width:30px; height:30px; bottom:30px; right:50px; opacity:.7; }
.bf-clean-spark span:nth-child(3){ width:18px; height:18px; bottom:14px; right:14px; background:radial-gradient(circle, rgba(255,170,90,.6), transparent 60%); }
[dir="rtl"] .bf-clean-spark{ right:auto; left:-30px; }
[dir="rtl"] .bf-clean-spark span:nth-child(1){ right:auto; left:20px; }
[dir="rtl"] .bf-clean-spark span:nth-child(2){ right:auto; left:50px; }
[dir="rtl"] .bf-clean-spark span:nth-child(3){ right:auto; left:14px; }
@media(max-width:1024px){ .bf-clean-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:540px){  .bf-clean-grid{ grid-template-columns:1fr; gap:18px; } }

/* ============================================================
   PROMISE STRIP (4 brand promises)
   ============================================================ */
.bf-promise-section{
  background:transparent !important;
  padding:12px 6vw 20px;
}
.bf-promise-strip{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
  padding:22px 28px;
  background:linear-gradient(135deg, rgba(255,255,255,.65) 0%, rgba(195,235,216,.5) 100%);
  border:1px solid var(--glass-stroke);
  backdrop-filter:blur(20px) saturate(180%);
  border-radius:var(--r-xl);
  box-shadow:0 12px 30px -20px rgba(31,75,63,.35);
}
.bf-promise-item{
  display:flex; align-items:center; gap:14px;
  padding:10px 14px;
  border-radius:14px;
  transition:background .35s ease;
}
.bf-promise-item:hover{ background:rgba(255,255,255,.6); }
.bf-promise-item + .bf-promise-item{
  border-inline-start:1px solid rgba(31,75,63,.10);
}
.bf-promise-icon{
  width:42px; height:42px; flex:0 0 auto;
  border-radius:12px;
  background:var(--cyan-900); color:var(--cyan-300);
  display:grid; place-items:center;
}
.bf-promise-icon svg{ width:22px; height:22px; }
.bf-promise-title{
  font-family:var(--font-display); font-size:15px; font-weight:600;
  color:var(--cyan-900); letter-spacing:-.01em; line-height:1.2;
}
.bf-promise-body{
  font-size:12.5px; color:var(--ink-soft); margin-top:2px;
}
@media(max-width:960px){
  .bf-promise-strip{ grid-template-columns:repeat(2, 1fr); }
  .bf-promise-item + .bf-promise-item{ border-inline-start:none; }
  .bf-promise-item:nth-child(n+3){ border-top:1px solid rgba(31,75,63,.10); padding-top:14px; }
}
@media(max-width:520px){
  .bf-promise-strip{ grid-template-columns:1fr; padding:18px 16px; }
  .bf-promise-item:nth-child(n+2){ border-top:1px solid rgba(31,75,63,.10); border-inline-start:none; padding-top:14px; }
}

/* ============================================================
   DISINFECTION SECTION
   ============================================================ */
.bf-disinf-section{
  background:transparent !important;
  padding:30px 6vw 40px;
}
.bf-disinf-panel{
  max-width:1280px; margin:0 auto;
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.35fr 1fr; gap:40px;
  padding:44px 44px;
  background:linear-gradient(135deg, #1F4B3F 0%, #2D6957 55%, #3F8B71 100%);
  border-radius:var(--r-xl);
  color:var(--ivory);
  box-shadow:0 30px 60px -30px rgba(31,75,63,.55);
}
.bf-disinf-aura{
  position:absolute; top:-40%; right:-15%; width:600px; height:600px;
  background:radial-gradient(circle, rgba(152,221,190,.30) 0%, transparent 65%);
  filter:blur(40px); pointer-events:none; z-index:0;
  animation:bf-drift 14s ease-in-out infinite alternate;
}
.bf-disinf-orbit{
  position:absolute; bottom:-220px; left:-180px;
  width:520px; height:520px; border-radius:50%;
  border:1px dashed rgba(152,221,190,.25);
  pointer-events:none; z-index:0;
  animation:bf-orbit-spin 70s linear infinite;
}
.bf-disinf-copy{ position:relative; z-index:1; }
.bf-disinf-tag{
  background:rgba(152,221,190,.16);
  color:var(--cyan-300);
  border:1px solid rgba(152,221,190,.30);
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 14px 6px 10px;
}
.bf-disinf-tag .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--cyan-300);
  box-shadow:0 0 12px var(--cyan-300);
  animation:bf-pulse 2s infinite;
}
.bf-disinf-title{
  font-family:var(--font-display);
  font-size:clamp(28px, 3.4vw, 44px);
  font-weight:600; line-height:1.08; letter-spacing:-.03em;
  margin:20px 0 14px 0; color:#fff;
}
.bf-disinf-title em{
  font-style:italic; font-weight:300;
  background:linear-gradient(120deg, var(--cyan-300) 10%, #fff 60%, var(--accent-warm) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bf-disinf-lead{
  font-size:15.5px; line-height:1.6;
  color:rgba(255,255,255,.78);
  max-width:560px;
  margin:0 0 28px 0;
}
.bf-disinf-block{ margin-top:22px; }
.bf-disinf-block-head{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  font-size:11px; text-transform:uppercase; letter-spacing:.18em;
  color:rgba(255,255,255,.7);
  margin-bottom:12px;
}
.bf-disinf-block-head .num{
  color:var(--cyan-300);
  background:rgba(152,221,190,.15);
  padding:3px 8px; border-radius:6px;
}
.bf-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.bf-chip{
  font-size:12.5px; letter-spacing:.01em;
  padding:7px 13px; border-radius:100px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  transition:background .3s ease, transform .3s ease;
}
.bf-chip:hover{ background:rgba(152,221,190,.18); transform:translateY(-2px); }
.bf-chem-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.bf-chem{
  padding:14px 16px; border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  display:flex; flex-direction:column; gap:4px;
}
.bf-chem-meta{
  font-family:var(--font-mono);
  font-size:11px; color:var(--cyan-300);
  letter-spacing:.06em;
}
.bf-chem-name{ font-size:14px; color:#fff; font-weight:500; }
.bf-disinf-cta{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:30px;
  padding:13px 24px;
  background:var(--cyan-300); color:var(--cyan-900);
  border-radius:100px;
  font-family:var(--font-display); font-weight:600; font-size:15px;
  text-decoration:none;
  box-shadow:0 12px 28px -10px rgba(152,221,190,.55);
  transition:transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s ease, background .35s ease;
}
.bf-disinf-cta:hover{
  transform:translateY(-3px);
  background:#C2EBD8; color:var(--cyan-900);
  box-shadow:0 18px 36px -12px rgba(152,221,190,.7);
}

.bf-disinf-visual{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px;
}
.bf-disinf-shield{
  position:relative;
  width:240px; height:240px;
  display:grid; place-items:center;
  animation:bf-portrait-float 7s ease-in-out infinite;
}
.bf-disinf-shield svg{ width:180px; height:180px; filter:drop-shadow(0 16px 30px rgba(102,194,164,.4)); }
.bf-disinf-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px dashed rgba(152,221,190,.35);
  pointer-events:none;
}
.bf-disinf-ring.r1{ animation:bf-ring-spin 30s linear infinite; }
.bf-disinf-ring.r2{ inset:-16px; border-color:rgba(255,170,90,.30); animation:bf-ring-spin 45s linear reverse infinite; }
.bf-disinf-ring.r3{ inset:-32px; border-style:solid; border-color:rgba(255,255,255,.08); }
.bf-disinf-badge{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 28px;
  border-radius:100px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
}
.bf-disinf-badge .line{
  font-family:var(--font-display); font-size:24px; letter-spacing:-.02em; color:#fff;
}
.bf-disinf-badge .line strong{ color:var(--cyan-300); font-weight:600; }
.bf-disinf-badge .sub{
  font-family:var(--font-mono);
  font-size:10.5px; text-transform:uppercase; letter-spacing:.18em;
  color:rgba(255,255,255,.65);
}

@media(max-width:960px){
  .bf-disinf-panel{ grid-template-columns:1fr; padding:44px 28px; gap:40px; }
  .bf-disinf-visual{ order:-1; }
  .bf-disinf-shield{ width:200px; height:200px; }
  .bf-disinf-shield svg{ width:150px; height:150px; }
  .bf-chem-row{ grid-template-columns:1fr; }
}

/* ============================================================
   CORPORATE STACK (6 bento cards)
   ============================================================ */
.bf-corp-section{
  background:transparent !important;
  padding:24px 6vw 40px;
}
.bf-corp-grid{
  max-width:1280px; margin:24px auto 0;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.bf-corp-card{
  position:relative; overflow:hidden;
  padding:24px 22px 22px;
  border-radius:var(--r-lg);
  background:var(--glass-strong);
  backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-stroke);
  box-shadow:0 12px 28px -16px rgba(31,75,63,.30);
  display:flex; flex-direction:column;
  transition:transform .5s cubic-bezier(.2,.9,.3,1),
             box-shadow .5s ease;
  isolation:isolate;
}
.bf-corp-card.accent{
  background:linear-gradient(135deg, var(--cyan-900) 0%, var(--cyan-700) 100%);
  color:var(--ivory);
  border-color:rgba(255,255,255,.08);
}
.bf-corp-card.accent .bf-corp-title{ color:#fff; }
.bf-corp-card.accent .bf-corp-body{ color:rgba(255,255,255,.78); }
.bf-corp-card.accent .bf-corp-icon{
  background:rgba(152,221,190,.15);
  color:var(--cyan-300);
}
.bf-corp-card.accent .bf-corp-num{ color:rgba(255,255,255,.4); }
.bf-corp-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 44px -22px rgba(31,75,63,.45);
}
.bf-corp-shimmer{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .9s ease;
  z-index:0;
}
.bf-corp-card:hover .bf-corp-shimmer{ transform:translateX(120%); }
.bf-corp-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
  position:relative; z-index:1;
}
.bf-corp-icon{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--cyan-100), rgba(152,221,190,.45));
  color:var(--cyan-900);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.bf-corp-icon svg{ width:22px; height:22px; }
.bf-corp-num{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.1em;
  color:var(--cyan-700);
  opacity:.55;
}
.bf-corp-title{
  font-family:var(--font-display);
  font-size:20px; letter-spacing:-.02em;
  font-weight:600; color:var(--cyan-900);
  margin:0 0 8px 0; line-height:1.2;
  position:relative; z-index:1;
}
.bf-corp-body{
  font-size:14px; line-height:1.55; color:var(--ink-soft);
  margin:0;
  position:relative; z-index:1;
}
@media(max-width:900px){
  .bf-corp-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
}
@media(max-width:560px){
  .bf-corp-grid{ grid-template-columns:1fr; gap:12px; }
  .bf-corp-card{ padding:20px 18px 18px; }
  .bf-corp-title{ font-size:18px; }
}

/* ============================================================
   CONTACT SECTION (info cards + interactive map)
   ============================================================ */
.bf-contact-section{
  background:transparent !important;
  padding:30px 6vw 40px;
}
.bf-contact-layout{
  max-width:1280px; margin:24px auto 0;
  display:grid; grid-template-columns:minmax(0, 55fr) minmax(0, 45fr);
  gap:32px;
  align-items:stretch;
}
.bf-contact-info{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  align-content:start;
}
.bf-contact-card{
  position:relative; overflow:hidden;
  padding:22px 22px 20px;
  border-radius:var(--r-lg);
  background:var(--glass-strong);
  backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-stroke);
  box-shadow:0 12px 28px -18px rgba(31,75,63,.30);
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:10px;
  transition:transform .4s cubic-bezier(.2,.9,.3,1),
             box-shadow .4s ease,
             border-color .4s ease;
}
.bf-contact-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 36px -20px rgba(31,75,63,.45);
  border-color:rgba(102,194,164,.40);
  color:inherit;
}
.bf-contact-card.primary{
  grid-column:span 2;
  background:linear-gradient(135deg, var(--cyan-900) 0%, var(--cyan-700) 100%);
  color:var(--ivory);
  border-color:rgba(255,255,255,.10);
}
.bf-contact-card.primary::after{
  content:""; position:absolute; top:-40%; right:-15%;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(152,221,190,.30), transparent 65%);
  filter:blur(20px); pointer-events:none;
}
.bf-contact-card.primary .bf-contact-icon{
  background:rgba(152,221,190,.18);
  color:var(--cyan-300);
}
.bf-contact-card.primary .bf-contact-label{ color:rgba(255,255,255,.7); }
.bf-contact-card.primary .bf-contact-value{ color:#fff; }
.bf-contact-card.primary .bf-contact-meta{ color:rgba(255,255,255,.65); }
.bf-contact-card.hours{ grid-column:span 2; }

.bf-contact-card-head{
  display:flex; align-items:center; gap:12px;
}
.bf-contact-icon{
  width:42px; height:42px; flex:0 0 auto;
  border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--cyan-100), rgba(152,221,190,.45));
  color:var(--cyan-900);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.bf-contact-label{
  font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.18em;
  color:var(--cyan-700);
}
.bf-contact-value{
  font-family:var(--font-display);
  font-size:20px; letter-spacing:-.01em; font-weight:600;
  color:var(--cyan-900); line-height:1.25;
  word-break:break-word;
}
.bf-contact-value.email{ font-size:16px; }
.bf-contact-value.address{ font-size:17px; }
.bf-contact-meta{
  font-size:12.5px; color:var(--ink-soft);
  margin-top:2px;
}

.bf-hours-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
  border-top:1px solid rgba(31,75,63,.10);
  gap:14px;
}
.bf-hours-row:first-of-type{ border-top:none; padding-top:4px; }
.bf-hours-tag{
  font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--cyan-700);
}
.bf-hours-time{
  font-family:var(--font-display); font-size:14px;
  color:var(--cyan-900); font-weight:600;
  background:var(--cyan-100); padding:5px 10px; border-radius:8px;
  white-space:nowrap;
}

.bf-contact-socials{
  grid-column:span 2;
  padding:18px 22px;
  background:var(--glass);
  backdrop-filter:blur(14px);
  border:1px solid var(--glass-stroke);
  border-radius:var(--r-lg);
}
.bf-contact-socials-label{
  font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.18em;
  color:var(--cyan-700);
  margin-bottom:12px;
}
.bf-contact-socials-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.bf-social-tile{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 10px;
  border-radius:12px;
  text-decoration:none;
  font-family:var(--font-display); font-weight:500; font-size:14px;
  background:#fff;
  border:1px solid rgba(31,75,63,.10);
  color:var(--cyan-900);
  transition:transform .35s cubic-bezier(.2,.9,.3,1),
             box-shadow .35s ease,
             background .35s ease,
             color .35s ease;
}
.bf-social-tile:hover{ transform:translateY(-3px); color:#fff; }
.bf-social-tile.whatsapp:hover{ background:#25D366; box-shadow:0 14px 24px -10px rgba(37,211,102,.5); }
.bf-social-tile.facebook:hover{ background:#1877F2; box-shadow:0 14px 24px -10px rgba(24,119,242,.5); }
.bf-social-tile.instagram:hover{ background:linear-gradient(135deg,#F58529,#DD2A7B 50%,#8134AF); box-shadow:0 14px 24px -10px rgba(221,42,123,.55); }

/* ---- Locations media panel (replaces the old Google map) ----------------- */
.bf-locations{
  position:relative; isolation:isolate;
  min-height:520px;
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--glass-stroke);
  box-shadow:0 28px 60px -28px rgba(31,75,63,.55);
}
.bf-loc-media{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.bf-loc-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 38%;
  transform:scale(1.06);
  animation:bf-loc-kenburns 26s ease-in-out infinite alternate;
}
@keyframes bf-loc-kenburns{
  0%  { transform:scale(1.06) translate(0,0); }
  100%{ transform:scale(1.18) translate(-2.5%,-3%); }
}
/* brand-tinted scrim: depth at the base for legibility + a teal/warm wash */
.bf-loc-scrim{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(180deg, rgba(9,31,24,.06) 0%, rgba(9,31,24,0) 26%, rgba(9,31,24,.52) 68%, rgba(7,26,20,.90) 100%),
    linear-gradient(125deg, rgba(31,75,63,.50) 0%, rgba(102,194,164,.06) 52%, rgba(255,170,90,.12) 100%);
}
/* faint film grain for texture */
.bf-loc-grain{
  position:absolute; inset:0; z-index:3; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* diagonal light sweep — a nod to the squeegee/clean-glass motif in the photo */
.bf-loc-sheen{
  position:absolute; top:-60%; left:-60%; z-index:4;
  width:42%; height:220%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transform:rotate(20deg); filter:blur(8px);
  animation:bf-loc-sheen 7.5s ease-in-out infinite;
}
@keyframes bf-loc-sheen{
  0%  { left:-60%; opacity:0; }
  10% { opacity:.85; }
  42% { left:150%; opacity:0; }
  100%{ left:150%; opacity:0; }
}
.bf-loc-spark{
  position:absolute; z-index:4; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, rgba(152,221,190,.9) 40%, transparent 70%);
  filter:drop-shadow(0 0 6px rgba(152,221,190,.8));
  animation:bf-loc-twinkle 3.6s ease-in-out infinite;
}
.bf-loc-spark.s1{ top:16%; left:22%; animation-delay:.2s; }
.bf-loc-spark.s2{ top:30%; right:18%; width:6px; height:6px; animation-delay:1.3s; }
.bf-loc-spark.s3{ top:54%; left:30%; width:7px; height:7px; animation-delay:2.4s; }
@keyframes bf-loc-twinkle{
  0%,100%{ transform:scale(.4); opacity:0; }
  50%    { transform:scale(1);  opacity:1; }
}
/* overlay content pinned to the base */
.bf-loc-overlay{
  position:absolute; inset:auto 0 0 0; z-index:6;
  padding:26px 24px 24px;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.bf-loc-tag{
  font-family:var(--font-mono); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.22em;
  color:var(--cyan-900);
  background:rgba(255,255,255,.88); backdrop-filter:blur(8px);
  padding:6px 12px; border-radius:999px;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.45);
}
.bf-loc-title{
  margin:0; color:#fff;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(24px, 2.3vw, 32px); letter-spacing:-.02em; line-height:1.05;
  text-shadow:0 2px 22px rgba(0,0,0,.40);
}
.bf-loc-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.bf-loc-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.38);
  backdrop-filter:blur(12px) saturate(160%);
  color:#fff; font-family:var(--font-display); font-weight:600; font-size:15px;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.6);
  transition:transform .35s cubic-bezier(.2,.9,.3,1), background .35s ease;
}
.bf-loc-chip:hover{ transform:translateY(-2px); background:rgba(255,255,255,.24); }
.bf-loc-chip svg{ color:var(--cyan-300); }
.bf-loc-live{
  width:7px; height:7px; border-radius:50%;
  background:var(--cyan-300); margin-inline-start:2px;
  box-shadow:0 0 0 0 rgba(152,221,190,.7);
  animation:bf-loc-livepulse 2.2s ease-out infinite;
}
@keyframes bf-loc-livepulse{
  0%  { box-shadow:0 0 0 0 rgba(152,221,190,.7); }
  70% { box-shadow:0 0 0 8px rgba(152,221,190,0); }
  100%{ box-shadow:0 0 0 0 rgba(152,221,190,0); }
}
/* staggered entrance once the panel is revealed */
.bf-locations .bf-loc-tag,
.bf-locations .bf-loc-title,
.bf-locations .bf-loc-chips{ opacity:0; transform:translateY(14px); }
.bf-locations.in .bf-loc-tag  { animation:bf-loc-rise .6s .12s cubic-bezier(.2,.9,.3,1) forwards; }
.bf-locations.in .bf-loc-title{ animation:bf-loc-rise .6s .24s cubic-bezier(.2,.9,.3,1) forwards; }
.bf-locations.in .bf-loc-chips{ animation:bf-loc-rise .6s .38s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes bf-loc-rise{ to{ opacity:1; transform:translateY(0); } }

[dir="rtl"] .bf-contact-card.primary::after{ right:auto; left:-15%; }

@media(max-width:960px){
  /* Stack: info on top, the locations panel becomes a wide banner below */
  .bf-contact-layout{ grid-template-columns:1fr; gap:24px; }
  .bf-locations{ min-height:340px; }
  .bf-loc-img{ object-position:50% 30%; }
}
@media(max-width:560px){
  .bf-contact-info{ grid-template-columns:1fr; }
  .bf-contact-card.primary,
  .bf-contact-card.hours,
  .bf-contact-socials{ grid-column:auto; }
  .bf-contact-socials-row{ grid-template-columns:1fr; }
  .bf-social-tile{ justify-content:flex-start; padding:12px 16px; }
  .bf-locations{ min-height:300px; }
  .bf-loc-overlay{ padding:20px 18px 18px; }
  /* Stack each hours row so the time pill never overflows the card */
  .bf-hours-row{ flex-direction:column; align-items:flex-start; gap:7px; }
  .bf-hours-time{ white-space:normal; font-size:13px; line-height:1.35; }
}

/* ============================================================
   MOBILE VERTICAL RHYTHM — compress sections 3+ on phones
   (hero + products-marquee keep their own paddings)
   ============================================================ */
@media(max-width:760px){
  .deliveryTipsSetion, .bf-bento-section,
  .BcardSection, .chefOnDemandSection, .bg-color-container,
  .travelSection, .bf-stats-quote-section,
  .careersSection, .bf-careers-section,
  .blogPostsSection, .bf-services-section,
  .bf-clean-section, .bf-disinf-section,
  .bf-corp-section, .bf-contact-section,
  .readyShoppingSection, .bf-cta-section{
    padding-top:24px;
    padding-bottom:30px;
  }
  .bf-promise-section{ padding-top:8px; padding-bottom:16px; }
  .section-head{ margin-bottom:18px; }
  .bf-stats-band{ padding:30px 22px; gap:24px; }
  .bf-disinf-panel{ padding:30px 22px; gap:28px; }
  .bf-cta-band{ padding:36px 22px; gap:24px; }
  .bf-clean-grid,
  .bf-corp-grid,
  .bf-careers-grid,
  .bf-services-grid,
  .svc-grid,
  .bf-contact-layout{ margin-top:16px; gap:14px; }
  .bf-promise-strip{ padding:14px 14px; gap:6px; }
  .bf-feature{ gap:24px; }
}
@media(max-width:480px){
  .deliveryTipsSetion, .bf-bento-section,
  .BcardSection, .chefOnDemandSection, .bg-color-container,
  .travelSection, .bf-stats-quote-section,
  .careersSection, .bf-careers-section,
  .blogPostsSection, .bf-services-section,
  .bf-clean-section, .bf-disinf-section,
  .bf-corp-section, .bf-contact-section,
  .readyShoppingSection, .bf-cta-section{
    padding-top:20px;
    padding-bottom:24px;
  }
  .section-head{ margin-bottom:14px; }
  .bf-stats-band, .bf-disinf-panel, .bf-cta-band{ border-radius:18px; }
}

/* ============================================================
   JINNI GENIE SPLASH SCREEN
   Story: assembled logo → genie awakens & towers → settles → reveal
   ============================================================ */
html.jinni-splash-lock,
html.jinni-splash-lock body{ overflow:hidden !important; }

/* Freeze hero-section animations until the splash finishes.
   Every animation inside .bf-hero is paused at its initial keyframe
   while the splash is on screen, then resumes naturally the moment
   the splash starts fading out (the JS removes .jinni-splash-lock
   right before adding .jinni-splash-dismissed). */
html.jinni-splash-lock .bf-hero,
html.jinni-splash-lock .bf-hero *{
  animation-play-state:paused !important;
}

.jinni-splash{
  position:fixed; inset:0;
  z-index:99999;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(102,194,164,.18), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(240,168,104,.10), transparent 55%),
    linear-gradient(135deg, #F3FBF8 0%, #FFFFFF 50%, #E1F5EC 100%);
  overflow:hidden;
  isolation:isolate;
  transition:opacity .7s cubic-bezier(.6,0,.2,1), visibility .7s linear;
  cursor:pointer;
}
.jinni-splash-dismissed{
  opacity:0; visibility:hidden; pointer-events:none;
}

/* Backdrop dot grid for texture */
.jinni-splash-bg{
  position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(31,75,63,.06) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(circle at center, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle at center, #000 30%, transparent 75%);
  animation:jinni-bg-shift 12s linear infinite;
}
@keyframes jinni-bg-shift{
  to{ background-position:24px 24px; }
}

/* Central breathing aura behind the logo */
.jinni-splash-aura{
  position:absolute; top:50%; left:50%;
  width:min(720px, 90vw); height:min(720px, 90vw);
  transform:translate(-50%, -50%);
  background:radial-gradient(circle,
    rgba(102,194,164,.42) 0%,
    rgba(152,221,190,.20) 28%,
    rgba(240,168,104,.10) 55%,
    transparent 72%);
  filter:blur(50px);
  animation:jinni-aura-breathe 2.4s ease-in-out infinite;
  z-index:0;
}
@keyframes jinni-aura-breathe{
  0%,100%{ transform:translate(-50%,-50%) scale(.95); opacity:.85; }
  50%   { transform:translate(-50%,-50%) scale(1.15); opacity:1;   }
}

.jinni-splash-stage{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:48px;
  padding:0 5vw;
}

/* ---- Logo composition: text + overlaid animated genie ---- */
.jinni-logo{
  position:relative;
  width:min(560px, 82vw);
  max-width:90vw;
  aspect-ratio: 2000 / 540;
  /* Genie sits in the missing-"i" gap between J and the first n */
  --genie-x: 27%;
  --genie-w: 17%;

  /* Final pose when the genie has fully grown.
     Scale grows the wrap outward FROM ITS CENTER (transform-origin 50% 50%)
     so it expands toward viewport center, not toward the top.
     -- rise-x : horizontal shift to land at viewport center
        ( ≈ 0.145 × logoWidth — derived from wrap's offset-from-center )
     -- rise-y : small downward nudge to offset the loader bar below logo
     -- rise-s : final scale (kept moderate so the genie doesn't overflow) */
  --rise-x: calc(min(560px, 82vw) * 0.145);
  --rise-y: 4vh;
  --rise-s: 3.6;
  z-index:10; /* genie must float above the loader bar */
}
.jinni-logo-text{
  width:100%; height:100%; object-fit:contain;
  display:block; user-select:none;
  opacity:0;
  filter:drop-shadow(0 12px 30px rgba(31,75,63,.12));
  animation:
    jinni-text-in  .8s cubic-bezier(.2,.9,.3,1) .15s forwards,
    jinni-text-out .8s cubic-bezier(.4,0,.6,1) 1.2s forwards;
}
@keyframes jinni-text-in{
  from{ opacity:0; transform:translateY(10px); letter-spacing:.04em; }
  to  { opacity:1; transform:translateY(0);    letter-spacing:0; }
}
@keyframes jinni-text-out{
  0%  { opacity:1; transform:translateY(0)   scale(1); filter:blur(0); }
  100%{ opacity:0; transform:translateY(-4px) scale(.96); filter:blur(2px); }
}

.jinni-logo-genie-wrap{
  position:absolute;
  top:-10%;
  left:var(--genie-x);
  width:var(--genie-w);
  height:120%;
  display:flex; align-items:flex-end; justify-content:center;
  /* Grow from the wrap's CENTER so it expands evenly toward viewport middle */
  transform-origin:50% 50%;
  animation: jinni-wrap-rise 1.6s cubic-bezier(.4,0,.25,1) 1.1s forwards;
  will-change:transform;
}
@keyframes jinni-wrap-rise{
  0%  { transform:translate(0, 0) scale(1); }
  100%{ transform:translate(var(--rise-x), var(--rise-y)) scale(var(--rise-s)); }
}
[dir="rtl"] .jinni-logo-genie-wrap{
  /* Text image stays in LTR raster orientation, so genie position holds. */
}

.jinni-logo-genie{
  position:relative; z-index:3;
  height:88%; width:auto; object-fit:contain;
  transform-origin:50% 100%;
  opacity:0;
  user-select:none;
  filter:drop-shadow(0 14px 24px rgba(31,75,63,.30));
  animation: jinni-genie-pop .7s cubic-bezier(.18,.9,.32,1.4) .5s forwards;
}
@keyframes jinni-genie-pop{
  from{ opacity:0; transform:scale(.55) translateY(20%); }
  to  { opacity:1; transform:scale(1)   translateY(0); }
}

/* Magical orbiting rings — appear during the rise */
.jinni-orbit{
  position:absolute; top:50%; left:50%;
  width:260%; aspect-ratio:1/1;
  transform:translate(-50%,-50%) scale(0);
  border:1.5px dashed rgba(102,194,164,.6);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  animation:
    jinni-orbit-expand 1.3s cubic-bezier(.2,.9,.3,1) 1.1s forwards,
    jinni-orbit-spin   6s   linear                    1.1s infinite;
}
.jinni-orbit-2{
  width:330%;
  border-color:rgba(240,168,104,.45);
  animation-duration:1.5s, 9s;
  animation-delay:1.25s, 1.25s;
}
@keyframes jinni-orbit-expand{
  0%  { transform:translate(-50%,-50%) scale(.2); opacity:0; }
  35% { transform:translate(-50%,-50%) scale(1);  opacity:.9; }
  100%{ transform:translate(-50%,-50%) scale(1.45); opacity:0; }
}
@keyframes jinni-orbit-spin{
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}

/* Wide soft halo under the towering genie */
.jinni-glow{
  position:absolute; top:30%; left:50%;
  width:280%; aspect-ratio:1/1;
  transform:translate(-50%,-50%) scale(.3);
  background:radial-gradient(circle,
    rgba(102,194,164,.55) 0%,
    rgba(152,221,190,.25) 35%,
    transparent 65%);
  border-radius:50%;
  filter:blur(22px);
  opacity:0;
  pointer-events:none;
  animation:jinni-glow-bloom 1.8s ease-out 1s forwards;
}
@keyframes jinni-glow-bloom{
  0%  { transform:translate(-50%,-50%) scale(.3); opacity:0; }
  35% { transform:translate(-50%,-50%) scale(1.6); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(2.2); opacity:0; }
}

/* Smoke wisps rising from beneath the genie */
.jinni-smoke{
  position:absolute; bottom:0; left:50%;
  transform:translateX(-50%);
  width:160%; height:140%;
  pointer-events:none; z-index:1;
}
.jinni-smoke span{
  position:absolute; bottom:0;
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle, rgba(152,221,190,.7) 0%, transparent 70%);
  filter:blur(6px);
  opacity:0;
  animation:jinni-smoke-rise 2.2s ease-out infinite;
}
.jinni-smoke span:nth-child(1){ left:38%; animation-delay:1.0s; }
.jinni-smoke span:nth-child(2){ left:50%; animation-delay:1.25s; width:24px; height:24px; }
.jinni-smoke span:nth-child(3){ left:60%; animation-delay:1.5s; }
.jinni-smoke span:nth-child(4){ left:46%; animation-delay:1.75s; width:14px; height:14px; }
@keyframes jinni-smoke-rise{
  0%  { transform:translate(0,0) scale(.6); opacity:0; }
  20% { opacity:.9; }
  100%{ transform:translate(var(--drift,0), -160px) scale(.2); opacity:0; }
}
.jinni-smoke span:nth-child(1){ --drift:-8px; }
.jinni-smoke span:nth-child(3){ --drift: 8px; }
.jinni-smoke span:nth-child(4){ --drift:-4px; }

/* Sparkle particles burst when genie reaches full size */
.jinni-sparks{
  position:absolute; top:30%; left:50%;
  width:300%; aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  pointer-events:none; z-index:2;
}
.jinni-sparks span{
  position:absolute; top:50%; left:50%;
  width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, rgba(102,194,164,.7) 50%, transparent 70%);
  box-shadow:0 0 10px rgba(102,194,164,.8), 0 0 20px rgba(240,168,104,.4);
  opacity:0;
  --tx:0px; --ty:0px;
  animation:jinni-spark-fly 1.2s ease-out 1.4s forwards;
}
.jinni-sparks span:nth-child(1){ --tx: 80px; --ty:-90px; animation-delay:1.35s; }
.jinni-sparks span:nth-child(2){ --tx:-90px; --ty:-60px; animation-delay:1.45s; }
.jinni-sparks span:nth-child(3){ --tx: 60px; --ty: 80px; animation-delay:1.55s; }
.jinni-sparks span:nth-child(4){ --tx:-70px; --ty: 70px; animation-delay:1.40s; }
.jinni-sparks span:nth-child(5){ --tx:100px; --ty: 20px; animation-delay:1.60s; width:4px; height:4px; }
.jinni-sparks span:nth-child(6){ --tx:-110px; --ty:-30px; animation-delay:1.50s; width:8px; height:8px; }
@keyframes jinni-spark-fly{
  0%  { transform:translate(-50%,-50%) scale(.2); opacity:0; }
  20% { opacity:1; }
  100%{ transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.4); opacity:0; }
}

/* ---- Loading bar + tagline ---- */
.jinni-loader{
  position:relative;
  z-index:1; /* sits below the towering genie */
  display:flex; flex-direction:column; align-items:center; gap:14px;
  opacity:0;
  animation:
    jinni-loader-in  .6s ease-out          .6s forwards,
    jinni-loader-out .8s cubic-bezier(.4,0,.6,1) 1.2s forwards;
}
.jinni-loader-track{
  position:relative;
  width:240px; max-width:60vw; height:3px;
  background:rgba(31,75,63,.10);
  border-radius:100px;
  overflow:hidden;
}
.jinni-loader-fill{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    var(--cyan-500) 0%,
    var(--accent-warm) 60%,
    var(--cyan-700) 100%);
  border-radius:100px;
  transform:translateX(-100%);
  animation:jinni-loader-progress 2.1s cubic-bezier(.4,0,.2,1) .55s forwards;
}
@keyframes jinni-loader-progress{
  0%  { transform:translateX(-100%); }
  100%{ transform:translateX(0); }
}
.jinni-loader-text{
  font-family:var(--font-mono);
  font-size:11px; text-transform:uppercase; letter-spacing:.32em;
  color:var(--cyan-700);
}
@keyframes jinni-loader-in{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes jinni-loader-out{
  0%  { opacity:1; transform:translateY(0)  scale(1); filter:blur(0); }
  100%{ opacity:0; transform:translateY(6px) scale(.96); filter:blur(2px); }
}

/* ---- Responsive tuning ---- */

/* Tablet & narrow desktop */
@media(max-width:900px){
  .jinni-splash-aura{ width:min(560px, 100vw); height:min(560px, 100vw); filter:blur(40px); }
  .jinni-splash-stage{ gap:40px; }
}

/* Phone — portrait */
@media(max-width:600px){
  .jinni-logo{
    width:86vw;
    --rise-x: calc(86vw * 0.145);
    --rise-y: 3vh;
    --rise-s: 3.2;
  }
  .jinni-splash-stage{ gap:32px; padding:0 4vw; }
  .jinni-splash-aura{ width:min(440px, 95vw); height:min(440px, 95vw); filter:blur(32px); }
  .jinni-loader-track{ width:min(200px, 55vw); }
  .jinni-loader-text{ font-size:10px; letter-spacing:.28em; }
  .jinni-splash-bg{ background-size:18px 18px; }
}

/* Phone — small (≤380px) */
@media(max-width:380px){
  .jinni-logo{
    width:90vw;
    --rise-x: calc(90vw * 0.145);
    --rise-y: 2vh;
    --rise-s: 2.8;
  }
  .jinni-splash-stage{ gap:24px; }
  .jinni-loader-track{ width:160px; }
}

/* Phone landscape — limit vertical bloat */
@media(max-height:520px) and (orientation:landscape){
  .jinni-logo{
    width:min(380px, 50vw);
    --rise-x: calc(min(380px, 50vw) * 0.145);
    --rise-y: 0;
    --rise-s: 2.4;
  }
  .jinni-splash-stage{ gap:20px; }
  .jinni-splash-aura{ width:min(480px, 70vh); height:min(480px, 70vh); }
}

/* Ultra-wide / large desktop — cap so it doesn't look tiny */
@media(min-width:1600px){
  .jinni-logo{
    width:640px;
    --rise-x: calc(640px * 0.145);
    --rise-y: 5vh;
    --rise-s: 4;
  }
  .jinni-splash-aura{ width:820px; height:820px; }
}

/* Accessibility — reduced motion: skip the show, just fade through */
@media (prefers-reduced-motion: reduce){
  .jinni-splash{ transition:opacity .3s ease; }
  .jinni-splash-aura,
  .jinni-orbit,
  .jinni-orbit-2,
  .jinni-glow,
  .jinni-smoke,
  .jinni-sparks{ display:none; }
  .jinni-logo-text{ animation:none; opacity:1; }
  .jinni-logo-genie{ animation:none; opacity:1; transform:scale(1); }
  .jinni-logo-genie-wrap{ animation:none; transform:none; }
  .jinni-loader-fill{ animation:none; transform:translateX(0); }
}