/* ============================================================
   HOME PAGE STYLES
   Hero · Globe · SEO block · Instagram feed
   ============================================================ */

/* ---------- Base panel ---------- */
.panel{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(5rem,10vh,8rem) clamp(1.25rem,5vw,4rem);
  overflow:hidden;
}

/* ---------- Hero glow ---------- */
.hero__glow{
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(38% 38% at 28% 42%, rgba(255,43,214,.20), transparent 70%),
    radial-gradient(38% 38% at 72% 58%, rgba(0,229,255,.16), transparent 70%);
  filter:blur(50px);
  animation:drift 20s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes drift{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to  {transform:translate3d(3%,2%,0) scale(1.08)}
}

/* ---------- Hero inner ---------- */
.hero__inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(1.25rem,3vh,2.25rem);
  text-align:center;
}

.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:clamp(.65rem,1.6vw,1.1rem);
  font-size:clamp(.7rem,1.1vw,.86rem);
  text-transform:uppercase;
  letter-spacing:0;
  color:var(--muted);
  transition:opacity .35s var(--ease);
  min-height:1.2em;
}
.hero__eyebrow.is-updating{opacity:.35}
.hero__eyebrow b{
  font-weight:700;
  letter-spacing:.34em;
  color:#fff;
  text-shadow:
    0 0 2px #fff,
    0 0 8px rgba(255,255,255,.9),
    0 0 20px var(--neon),
    0 0 44px var(--neon),
    0 0 80px rgba(255,43,214,.5);
  animation:flicker 7s infinite;
}
.hero__eyebrow i{
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--neon-2);
  box-shadow:0 0 8px var(--neon-2), 0 0 18px rgba(0,229,255,.7);
  flex-shrink:0;
}
.hero__eyebrow span{
  font-weight:300;
  letter-spacing:.34em;
  color:#eaf6ff;
  text-shadow:
    0 0 2px #fff,
    0 0 10px rgba(255,255,255,.75),
    0 0 24px var(--neon-2),
    0 0 52px rgba(0,229,255,.5);
}

.brand{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  gap:.18em;
  font-size:clamp(2rem,10.5vw,9rem);
  line-height:.95;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.brand__a,.brand__b{display:inline-block;color:#fff}
.brand__a{
  font-weight:700;
  text-shadow:
    0 0 2px #fff,
    0 0 9px rgba(255,255,255,.9),
    0 0 24px var(--neon),
    0 0 52px var(--neon),
    0 0 96px rgba(255,43,214,.55);
  animation:flicker 7s infinite;
}
.brand__b{
  font-weight:300;
  color:#eef0f5;
  text-shadow:
    0 0 2px #fff,
    0 0 10px rgba(255,255,255,.75),
    0 0 28px var(--neon-2),
    0 0 62px rgba(0,229,255,.55);
  animation:flicker 7s infinite .9s;
}
@keyframes flicker{
  0%,18%,22%,25%,53%,57%,100%{opacity:1}
  20%,24%,55%{opacity:.72}
}

.brand-rule{
  width:min(420px,62vw);
  height:1px;
  border:0;
  background:linear-gradient(90deg,transparent,var(--neon),var(--neon-2),transparent);
  box-shadow:0 0 10px rgba(255,43,214,.7), 0 0 26px rgba(255,43,214,.35);
}

.hero__sub{
  max-width:38ch;
  font-size:clamp(.8rem,1.35vw,1rem);
  font-weight:300;
  letter-spacing:.06em;
  color:var(--muted);
  line-height:1.7;
}

/* ---------- Scroll cue ---------- */
.scroll-cue{
  position:absolute;
  bottom:clamp(1.5rem,4vh,3rem);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8rem;
  font-size:.62rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .35s var(--ease);
  z-index:3;
}
.scroll-cue:hover{color:var(--ink)}
.scroll-cue__line{
  position:relative;
  width:1px;
  height:clamp(2rem,6vh,3.5rem);
  background:linear-gradient(to bottom,rgba(255,43,214,.55),transparent);
  overflow:hidden;
}
.scroll-cue__line::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,transparent,#fff);
  animation:cue 2.1s var(--ease) infinite;
}
@keyframes cue{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}

/* ============================================================
   GLOBE
   ============================================================ */
.hero__globe{
  position:absolute;
  top:50%;
  right:0;
  bottom:auto;
  width:min(95vmin, 780px);
  aspect-ratio:1;
  transform:translate(30%, -50%);
  pointer-events:none;
  z-index:1;
  opacity:0;
  animation:globeIn 1.6s var(--ease) .3s forwards;
}
@keyframes globeIn{to{opacity:1}}

.globe__stage{position:relative;width:100%;height:100%}
.globe-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.globe-ring{
  fill:none;
  stroke:rgba(255,43,214,.45);
  stroke-width:1.4;
  filter:
    drop-shadow(0 0 6px rgba(255,43,214,.65))
    drop-shadow(0 0 20px rgba(255,43,214,.35));
}
.globe-path{
  fill:none;
  stroke:rgba(0,229,255,.22);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.globe-path--meridian{stroke:rgba(0,229,255,.16)}
.globe-continent{
  fill:rgba(0,229,255,.075);
  stroke:rgba(0,229,255,.68);
  stroke-width:1.15;
  stroke-linejoin:round;
  stroke-linecap:round;
  filter:
    drop-shadow(0 0 3px rgba(0,229,255,.6))
    drop-shadow(0 0 10px rgba(0,229,255,.3));
}

.globe-cities{position:absolute;inset:0;pointer-events:none}
.globe-city{
  position:absolute;
  width:0;
  height:0;
  transition:opacity .25s linear;
  will-change:left,top,opacity;
}
.globe-city__dot{
  position:absolute;
  left:0;
  top:0;
  transform:translate(-50%,-50%);
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--neon-2);
  box-shadow:
    0 0 8px var(--neon-2),
    0 0 18px rgba(0,229,255,.75),
    0 0 34px rgba(0,229,255,.35);
  transition:all .4s var(--ease);
}
.globe-city.is-focused .globe-city__dot{
  width:10px;
  height:10px;
  background:var(--neon);
  box-shadow:
    0 0 12px var(--neon),
    0 0 28px rgba(255,43,214,.85),
    0 0 56px rgba(255,43,214,.5);
  animation:homePulse 2.4s ease-in-out infinite;
}
@keyframes homePulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%    {transform:translate(-50%,-50%) scale(1.35)}
}
.globe-city__label{
  position:absolute;
  top:22px;
  left:0;
  transform:translateX(-50%) translateY(-6px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.25rem;
  padding:.7rem 1.05rem .65rem;
  background:linear-gradient(180deg, rgba(5,5,7,.55) 0%, rgba(5,5,7,.94) 100%);
  border:1px solid rgba(255,43,214,.35);
  border-radius:2px;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  box-shadow:
    0 0 24px rgba(255,43,214,.28),
    0 0 60px rgba(255,43,214,.12),
    inset 0 0 22px rgba(255,43,214,.06);
  z-index:4;
}
.globe-city.is-focused .globe-city__label{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.globe-city__name{
  font-size:clamp(.8rem,1.2vw,1rem);
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#fff;
  line-height:1;
  text-shadow:
    0 0 2px #fff,
    0 0 10px rgba(255,255,255,.9),
    0 0 22px var(--neon),
    0 0 48px var(--neon),
    0 0 90px rgba(255,43,214,.5);
  animation:neonFlickerText 6.5s infinite;
}
.globe-city__country{
  font-size:clamp(.5rem,.66vw,.6rem);
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:#eaf6ff;
  line-height:1;
  text-shadow:
    0 0 2px #fff,
    0 0 10px rgba(255,255,255,.7),
    0 0 20px var(--neon-2),
    0 0 44px rgba(0,229,255,.5);
}

/* ============================================================
   SEO CONTENT BLOCK · appears below the hero
   ============================================================ */
.panel--seo{
  position:relative;
  z-index:2;
  padding:clamp(4rem,10vh,7rem) clamp(1.25rem,5vw,4rem);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:auto;
  background:transparent;
  overflow:visible;
}
.panel--seo::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(
    120% 90% at 30% 50%,
    rgba(5,5,7,.85) 0%,
    rgba(5,5,7,.72) 40%,
    rgba(5,5,7,.35) 70%,
    transparent 100%
  );
  pointer-events:none;
  z-index:0;
}

.seo-block{
  position:relative;
  z-index:1;
  max-width:820px;
  width:100%;
  margin:0 auto;
}
.seo-block__eyebrow{
  font-size:clamp(.62rem,1vw,.72rem);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--neon-2);
  text-shadow:0 0 14px rgba(0,229,255,.55);
  margin-bottom:1.25rem;
}
.seo-block__title{
  font-size:clamp(1.6rem,3.6vw,2.6rem);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:2rem;
  text-shadow:
    0 0 2px #fff,
    0 0 10px rgba(255,255,255,.7),
    0 0 26px var(--neon),
    0 0 60px rgba(255,43,214,.4);
}
.seo-block__body p{
  font-size:clamp(.9rem,1.15vw,1.02rem);
  line-height:1.85;
  color:rgba(244,244,246,.78);
  margin-bottom:1.2rem;
}
.seo-block__body p:last-child{margin-bottom:0}
.seo-block__body strong{
  color:#fff;
  font-weight:500;
  text-shadow:0 0 10px rgba(255,43,214,.35);
}

.seo-block__facts{
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  text-align:center;
}
.seo-block__fact{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  align-items:center;
}
.seo-block__fact-num{
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  font-weight:200;
  letter-spacing:.02em;
  color:#fff;
  text-shadow:
    0 0 2px #fff,
    0 0 12px rgba(255,255,255,.75),
    0 0 26px var(--neon),
    0 0 60px rgba(255,43,214,.5);
}
.seo-block__fact-lbl{
  font-size:clamp(.55rem,.72vw,.65rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ============================================================
   INSTAGRAM FEED BLOCK · homepage
   ============================================================ */
.panel--instagram{
  position:relative;
  z-index:2;
  padding:clamp(4rem,10vh,7rem) clamp(1.25rem,5vw,4rem);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:auto;
  background:#050507;
  position:relative;
  z-index:2;
  padding:clamp(4rem,10vh,7rem) clamp(1.25rem,5vw,4rem);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:auto;
  background:#050507;
  /* NEW: constrain so the widget can't leak outside this section */
  overflow:hidden;
  contain:layout paint;
}

.ig-feed{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  text-align:center;
}
.ig-feed__eyebrow{
  font-size:clamp(.62rem,1vw,.72rem);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--neon-2);
  text-shadow:0 0 14px rgba(0,229,255,.55);
  margin-bottom:1rem;
}
.ig-feed__title{
  font-size:clamp(1.4rem,3.4vw,2.4rem);
  font-weight:300;
  line-height:1.1;
  letter-spacing:.02em;
  color:#fff;
  margin-bottom:clamp(2rem,5vh,3rem);
}
.ig-feed__title a{
  color:#fff;
  text-decoration:none;
  transition:text-shadow .35s var(--ease);
  text-shadow:
    0 0 2px #fff,
    0 0 12px rgba(255,255,255,.7),
    0 0 32px var(--neon),
    0 0 72px rgba(255,43,214,.5);
}
.ig-feed__title a:hover{
  text-shadow:
    0 0 2px #fff,
    0 0 16px rgba(255,255,255,.9),
    0 0 42px var(--neon),
    0 0 96px rgba(255,43,214,.7);
}

.ig-feed__embed{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:clamp(2rem,4vh,2.5rem);
  width:100%;
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}
.ig-feed__embed behold-widget{
  display:block;
  width:100%;
}

.ig-feed__placeholder{
  padding:3rem 2rem;
  border:1px dashed rgba(255,255,255,.15);
  border-radius:2px;
  color:var(--muted);
  font-size:.75rem;
  letter-spacing:.28em;
  text-transform:uppercase;
}

.ig-feed__cta{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.95rem 2rem;
  border:1px solid var(--neon);
  background:rgba(255,43,214,.06);
  color:#fff;
  font-family:inherit;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  text-decoration:none;
  animation:neonFlickerText 6.5s infinite;
  text-shadow:
    0 0 2px #fff,
    0 0 8px rgba(255,255,255,.85),
    0 0 16px var(--neon);
  box-shadow:
    0 0 18px rgba(255,43,214,.55),
    inset 0 0 14px rgba(255,43,214,.12);
  transition:box-shadow .4s var(--ease), background .4s var(--ease), transform .3s var(--ease);
}
.ig-feed__cta:hover{
  background:rgba(255,43,214,.12);
  box-shadow:
    0 0 30px rgba(255,43,214,.85),
    inset 0 0 22px rgba(255,43,214,.22);
  transform:translateY(-2px);
}
.ig-feed__cta::after{
  content:'→';
  font-size:1rem;
  letter-spacing:0;
  text-shadow:0 0 12px var(--neon);
}
html[dir="rtl"] .ig-feed__cta::after{content:'←'}

/* ============================================================
   MOBILE FIX · Instagram + SEO panels on small screens
   ============================================================ */
@media (max-width: 900px){
      /* Force vertical stacking on mobile */
  .scroller,
  .panel,
  .panel--hero,
  .panel--seo,
  .panel--instagram{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    flex:none !important;
    float:none !important;
  }
  /* Override the flex centering from base .panel on stacked mobile panels */
  .panel{
    display:block !important;
    min-height:auto !important;
    padding:clamp(3rem,8vh,5rem) clamp(1.1rem,4vw,2rem) !important;
    scroll-snap-align:none !important;
    scroll-snap-stop:normal !important;
  }

  /* Hero still needs to be full-screen and centered */
  .panel--hero{
   display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:100vh !important;
    min-height:100svh !important;
    padding:clamp(6rem,14vh,8rem) clamp(1.1rem,4vw,2rem) 6rem !important;
  }
  /* Content panels size to their content, not to viewport */
  .panel--instagram,
  .panel--seo{
    min-height:auto !important;
    padding:clamp(3rem,8vh,5rem) clamp(1.1rem,4vw,2rem) !important;
    display:block !important;
    overflow:visible !important;
  }

  .panel--hero{
    min-height:100vh;
    min-height:100svh;
    padding-top:clamp(6rem,14vh,8rem);
    padding-bottom:6rem;
  }

  /* Remove snap scrolling on small screens */
  .scroller--snap{
    scroll-snap-type:none !important;
  }

  /* Instagram feed */
  .ig-feed{max-width:100%}
  .ig-feed__title{
    font-size:clamp(1.1rem,5vw,1.5rem);
    letter-spacing:.02em;
    word-break:break-word;
  }
  .ig-feed__embed{
    min-height:0;
    margin-bottom:1.5rem;
    width:100%;
  }
  .ig-feed__embed behold-widget{
    display:block;
    width:100%;
    max-width:100%;
  }

  /* SEO block */
  .seo-block{max-width:100%}
  .seo-block__title{
    font-size:clamp(1.3rem,5.2vw,1.9rem);
    line-height:1.15;
    word-break:break-word;
  }
  .seo-block__body p{
    font-size:.88rem;
    line-height:1.7;
  }
  .seo-block__facts{
    gap:1rem;
    margin-top:2rem;
    padding-top:1.5rem;
  }
  .seo-block__fact-num{font-size:1.5rem}
  .seo-block__fact-lbl{
    font-size:.55rem;
    letter-spacing:.24em;
  }

  /* Globe on mobile — hide SVG, keep city labels */
  .globe-svg{display:none}
  .globe-ring{display:none}
}