:root{
  --navy:#05091f;
  --cyan:#00fff0;
  --blue:#00a8ff;
  --pink:#ff2fa7;
  --pink2:#ff82de;
  --yellow:#ffe342;
  --gold:#ffc928;
  --white:#f8fbff;
  --muted:#a7bdd4;
  --display:"Cinzel",Georgia,serif;
  --body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--navy)}
body{
  margin:0;
  color:var(--white);
  background:#05091f;
  font-family:var(--body);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.page{
  min-height:100vh;
  background:
    radial-gradient(circle at 30% 45%,rgba(0,255,240,.18),transparent 34vw),
    radial-gradient(circle at 85% 38%,rgba(255,47,167,.16),transparent 32vw),
    linear-gradient(135deg,#030613,#071431 52%,#040611);
}
.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  border:1px solid rgba(0,255,240,.18);
  isolation:isolate;
}
.grid-noise{
  position:absolute;
  inset:0;
  opacity:.12;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:34px 34px;
  z-index:1;
}
.aurora{
  position:absolute;
  width:45vw;
  height:45vw;
  border-radius:50%;
  filter:blur(85px);
  opacity:.20;
  pointer-events:none;
  z-index:0;
  animation:floatGlow 9s ease-in-out infinite alternate;
}
.aurora-one{left:-12vw;top:18vh;background:var(--cyan)}
.aurora-two{right:-15vw;top:18vh;background:var(--pink);animation-delay:-3s}
@keyframes floatGlow{to{transform:translate3d(4vw,5vh,0) scale(1.08)}}
.current{
  position:absolute;
  z-index:20;
  pointer-events:none;
}
.top-current,.bottom-current{
  left:1.1vw;
  right:1.1vw;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--pink),var(--yellow),var(--cyan),transparent);
  background-size:260% 100%;
  animation:flowX 4.8s linear infinite;
  box-shadow:0 0 14px var(--cyan),0 0 32px rgba(255,47,167,.45);
}
.top-current{top:1vw}
.bottom-current{bottom:1vw}
.left-current,.right-current{
  top:1.1vw;
  bottom:1.1vw;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--pink),var(--cyan),var(--yellow),var(--pink),transparent);
  background-size:100% 260%;
  animation:flowY 5.8s linear infinite;
  box-shadow:0 0 14px var(--cyan),0 0 32px rgba(0,255,240,.45);
}
.left-current{left:1vw}
.right-current{right:1vw}
@keyframes flowX{to{background-position:260% 0}}
@keyframes flowY{to{background-position:0 260%}}
.header{
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  padding:24px clamp(22px,4vw,66px) 4px;
}
.logo-mark{
  width:142px;
  height:142px;
  display:grid;
  place-items:center;
}
.logo-mark img{
  width:138px;
  height:138px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 12px rgba(0,255,240,.65));
}
.nav{
  justify-self:center;
  display:flex;
  gap:24px;
  align-items:center;
  padding:15px 28px;
  border:1px solid rgba(0,255,240,.42);
  border-radius:999px;
  background:rgba(3,10,29,.62);
  box-shadow:0 0 24px rgba(0,255,240,.16);
}
.nav a{
  color:rgba(255,255,255,.9);
  font-weight:900;
  font-size:15px;
  transition:.2s;
}
.nav a:not(:last-child)::after{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-left:24px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 12px var(--yellow);
  vertical-align:middle;
}
.nav a:hover{color:var(--cyan);text-shadow:0 0 10px var(--cyan)}
.hero-grid{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:minmax(340px,.92fr) minmax(520px,1.08fr);
  gap:clamp(22px,4vw,70px);
  align-items:center;
  padding:12px clamp(22px,4vw,66px) 42px;
}
.map-panel{
  position:relative;
  min-height:650px;
  display:grid;
  place-items:center;
}
.map-label{
  position:absolute;
  left:0;
  top:34%;
  z-index:4;
  color:var(--cyan);
  font-size:18px;
  line-height:1.45;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-shadow:0 0 10px var(--cyan),0 0 30px rgba(0,255,240,.68);
}
.real-map{
  width:min(100%,560px);
  height:auto;
  overflow:visible;
  filter:drop-shadow(0 0 26px rgba(0,255,240,.78));
  animation:mapPulse 4.2s ease-in-out infinite;
}
.map-panel:hover .real-map{
  animation:mapShake .24s linear 1,mapPulse 4.2s ease-in-out infinite;
}
@keyframes mapPulse{50%{filter:drop-shadow(0 0 38px rgba(0,255,240,1)) drop-shadow(0 0 82px rgba(0,255,240,.32))}}
@keyframes mapShake{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(1px,-1px)}
  50%{transform:translate(-1px,1px)}
  75%{transform:translate(1px,1px)}
}
.ocean-lines path{
  fill:none;
  stroke:rgba(0,255,240,.32);
  stroke-width:1.1;
  stroke-dasharray:9 18;
  animation:dashWater 9s linear infinite;
}
@keyframes dashWater{to{stroke-dashoffset:-220}}
.radar circle,.radar path{
  fill:none;
  stroke:rgba(0,255,240,.18);
  stroke-width:1.2;
}
.radar text{
  fill:var(--cyan);
  font:700 32px var(--display);
  text-shadow:0 0 12px var(--cyan);
}
.sailboats path{
  fill:none;
  stroke:rgba(0,255,240,.62);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 8px var(--cyan));
}
.island-fill{
  fill:url(#islandFill);
  stroke:var(--gold);
  stroke-width:5.2;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 7px var(--gold)) drop-shadow(0 0 26px rgba(0,255,240,.85));
}
.shehia-line{
  fill:none;
  stroke:rgba(0,255,240,.22);
  stroke-width:.8;
  vector-effect:non-scaling-stroke;
}
.gold-route{
  fill:none;
  stroke:rgba(255,201,40,.94);
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-dasharray:6 12;
  animation:goldRun 5.8s linear infinite;
  filter:drop-shadow(0 0 6px var(--gold));
}
@keyframes goldRun{to{stroke-dashoffset:-160}}
.map-pin circle{
  fill:var(--yellow);
  stroke:var(--cyan);
  stroke-width:2;
  filter:drop-shadow(0 0 9px var(--yellow));
}
.map-pin text{
  fill:var(--yellow);
  font:900 14px var(--body);
  letter-spacing:.08em;
  filter:drop-shadow(0 0 7px var(--yellow));
}
.pin-line{
  fill:none;
  stroke:var(--yellow);
  stroke-width:2;
  filter:drop-shadow(0 0 8px var(--yellow));
}
.content-panel{
  text-align:center;
  padding-top:24px;
  min-width:0;
  overflow:hidden;
}
.overline{
  margin:0 0 8px;
  color:var(--yellow);
  font-size:24px;
  letter-spacing:.46em;
  text-transform:uppercase;
  text-shadow:0 0 12px var(--yellow),0 0 36px rgba(255,227,66,.6);
}
h1{
  position:relative;
  margin:0 auto;
  width:100%;
  max-width:860px;
  font-family:var(--display);
  font-size:clamp(50px,5.15vw,92px);
  line-height:.92;
  letter-spacing:.045em;
  color:var(--cyan);
  text-transform:uppercase;
  text-align:center;
  white-space:normal;
  overflow-wrap:normal;
  text-shadow:0 0 10px rgba(0,255,240,.95),0 0 26px rgba(0,255,240,.75),0 0 60px rgba(0,255,240,.45);
}
h1::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  color:transparent;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.88),transparent);
  background-size:190% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:electricSweep 2.6s linear infinite;
}
@keyframes electricSweep{to{background-position:220% 0}}
.ornament{
  width:260px;
  height:24px;
  margin:12px auto 12px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  mask:linear-gradient(#000 0 0) center/100% 1px no-repeat;
  filter:drop-shadow(0 0 8px var(--gold));
}
.content-panel h2{
  margin:0 0 14px;
  color:var(--white);
  font-size:26px;
  text-shadow:0 0 12px rgba(255,255,255,.36);
}
.intro{
  max-width:750px;
  margin:0 auto 26px;
  color:rgba(255,255,255,.78);
  font-size:18px;
  line-height:1.75;
}
.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(0,255,240,.24);
  border-bottom:1px solid rgba(255,47,167,.24);
  margin:20px 0 26px;
}
.card{
  padding:24px 16px 20px;
  min-height:210px;
  transition:.22s;
}
.card:not(:last-child){border-right:1px solid rgba(0,255,240,.16)}
.card:hover{
  background:rgba(255,255,255,.035);
  transform:translateY(-4px);
  animation:mapShake .22s linear 1;
}
.icon{
  display:block;
  width:52px;
  height:52px;
  margin:0 auto 12px;
  position:relative;
}
.icon-door:before{content:"";position:absolute;inset:6px 12px;border:3px solid var(--pink2);border-bottom:none;border-radius:18px 18px 0 0;box-shadow:0 0 12px var(--pink)}
.icon-door:after{content:"";position:absolute;left:6px;right:6px;bottom:8px;height:3px;background:var(--pink2);box-shadow:0 0 12px var(--pink)}
.icon-sun:before{content:"";position:absolute;inset:13px;border:3px solid var(--yellow);border-radius:50%;box-shadow:0 0 15px var(--yellow)}
.icon-sun:after{content:"";position:absolute;inset:0;background:repeating-conic-gradient(var(--yellow) 0 8deg,transparent 8deg 22deg);mask:radial-gradient(circle,transparent 0 23px,#000 24px)}
.icon-wave:before{content:"";position:absolute;left:4px;right:4px;bottom:8px;height:22px;border-bottom:4px solid var(--cyan);border-radius:50%;box-shadow:0 0 12px var(--cyan)}
.icon-wave:after{content:"";position:absolute;left:15px;top:4px;width:24px;height:34px;border:3px solid var(--cyan);border-bottom:none;border-radius:50% 50% 0 0;box-shadow:0 0 12px var(--cyan)}
.icon-leaf:before{content:"";position:absolute;inset:8px 12px;border:3px solid var(--pink2);border-radius:100% 0 100% 0;transform:rotate(-24deg);box-shadow:0 0 13px var(--pink)}
.icon-leaf:after{content:"";position:absolute;left:26px;top:9px;width:3px;height:39px;background:var(--pink2);transform:rotate(35deg);box-shadow:0 0 9px var(--pink)}
.card b{
  display:block;
  margin:0 0 10px;
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.card p{
  margin:0 auto;
  max-width:190px;
  color:rgba(255,255,255,.78);
  font-size:13.5px;
  line-height:1.55;
}
.card.pink b{color:var(--pink2);text-shadow:0 0 10px var(--pink)}
.card.yellow b{color:var(--yellow);text-shadow:0 0 10px var(--yellow)}
.card.cyan b{color:var(--cyan);text-shadow:0 0 10px var(--cyan)}
.cta-row{
  display:flex;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
}
.btn{
  position:relative;
  min-width:270px;
  padding:18px 24px;
  border-radius:18px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  overflow:hidden;
  transition:.22s;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-110%);
  animation:buttonCurrent 3s linear infinite;
}
@keyframes buttonCurrent{to{transform:translateX(110%)}}
.cyan-btn{border:1px solid var(--cyan);color:var(--cyan);box-shadow:0 0 22px rgba(0,255,240,.34),inset 0 0 18px rgba(0,255,240,.08)}
.pink-btn{border:1px solid var(--pink);color:var(--pink2);box-shadow:0 0 22px rgba(255,47,167,.34),inset 0 0 18px rgba(255,47,167,.08)}
.btn:hover{transform:translateY(-3px);filter:brightness(1.18)}
.note,.soon,.contact{
  position:relative;
  z-index:4;
  width:min(1160px,calc(100% - 34px));
  margin:0 auto;
}
.note{
  padding:42px 0 20px;
  text-align:center;
}
.eyebrow{
  color:var(--yellow);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:900;
  text-shadow:0 0 12px var(--yellow);
}
.note h2{
  margin:8px auto 0;
  max-width:880px;
  color:var(--cyan);
  font-size:clamp(30px,4vw,58px);
  line-height:1.05;
  font-family:var(--display);
  text-shadow:0 0 16px var(--cyan);
}
.soon{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  padding:18px;
  border:1px solid rgba(0,255,240,.36);
  border-radius:24px;
  background:rgba(5,9,31,.58);
  box-shadow:0 0 30px rgba(0,255,240,.16);
}
.soon article{
  padding:18px 12px;
  border-radius:18px;
  transition:.22s;
  cursor:pointer;
}
.soon article:hover{
  background:rgba(0,255,240,.06);
  transform:translateY(-4px);
  animation:mapShake .22s linear 1;
}
.soon b{display:block;color:var(--white);font-size:14px}
.soon span{display:block;color:var(--cyan);font-size:12px;margin-top:6px}
.contact{
  margin-top:26px;
  margin-bottom:24px;
  display:grid;
  grid-template-columns:1fr 100px 1fr;
  gap:18px;
  align-items:center;
  padding:20px 26px;
  border:1px solid rgba(255,47,167,.38);
  border-radius:22px;
  background:rgba(5,9,31,.64);
  box-shadow:0 0 30px rgba(0,255,240,.15);
}
.contact a{
  font-weight:900;
  font-size:clamp(16px,2vw,22px);
  text-shadow:0 0 12px rgba(0,255,240,.48);
}
.contact a:last-child{text-align:right}
.contact span{
  height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--pink));
  box-shadow:0 0 16px var(--cyan);
}
.modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  place-items:center;
  padding:20px;
  background:rgba(2,5,15,.72);
  backdrop-filter:blur(10px);
}
.modal.open{display:grid}
.modal-card{
  position:relative;
  width:min(470px,100%);
  padding:34px;
  border:1px solid var(--cyan);
  border-radius:24px;
  text-align:center;
  background:linear-gradient(135deg,rgba(5,9,31,.96),rgba(10,25,57,.96));
  box-shadow:0 0 60px rgba(0,255,240,.28),inset 0 0 28px rgba(255,47,167,.12);
}
.modal-card button{
  position:absolute;
  right:14px;
  top:9px;
  border:0;
  background:transparent;
  color:var(--pink);
  font-size:34px;
  cursor:pointer;
}
.modal-card p{margin:0 0 10px;color:var(--yellow);letter-spacing:.22em;text-transform:uppercase;font-weight:900}
.modal-card h2{margin:0 0 12px;color:var(--cyan);font-size:42px;text-shadow:0 0 18px var(--cyan)}
.modal-card span{color:rgba(255,255,255,.78)}
@media(max-width:1180px){
  .hero-grid{grid-template-columns:1fr}
  .map-panel{min-height:560px}
  .content-panel{padding-top:0}
  .soon{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .header{grid-template-columns:1fr auto; padding:24px 20px 8px}
  .logo-mark{
  width:142px;
  height:142px;
  display:grid;
  place-items:center;
}
  .nav{display:none}
  .language-switcher{grid-column:1 / -1; justify-self:center; flex-wrap:wrap}
  .hero-grid{padding:14px 20px 34px}
  .map-panel{min-height:480px}
  .map-label{font-size:14px}
  .overline{font-size:18px;letter-spacing:.42em}
  h1{font-size:clamp(34px,10vw,46px);letter-spacing:.025em}
  .content-panel h2{font-size:21px}
  .intro{font-size:16px}
  .cards{grid-template-columns:1fr;border:0;gap:10px}
  .card{border:1px solid rgba(0,255,240,.18);border-radius:18px;min-height:auto}
  .card:not(:last-child){border-right:1px solid rgba(0,255,240,.18)}
  .soon{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr;text-align:center}
  .contact a:last-child{text-align:center}
  .contact span{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

.language-switcher{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px;
  border:1px solid rgba(255,201,40,.38);
  border-radius:999px;
  background:rgba(3,10,29,.66);
  box-shadow:0 0 18px rgba(255,201,40,.12);
}
.language-switcher button{
  border:0;
  background:transparent;
  color:rgba(255,255,255,.72);
  font-weight:900;
  font-size:11px;
  letter-spacing:.06em;
  cursor:pointer;
  border-radius:999px;
  padding:7px 8px;
  transition:.2s;
}
.language-switcher button:hover,
.language-switcher button.active{
  color:#05091f;
  background:var(--gold);
  box-shadow:0 0 12px rgba(255,201,40,.75);
}
html[dir="rtl"] .content-panel,
html[dir="rtl"] .note{
  direction:rtl;
}

.thin-route{
  stroke-width:1.35;
  stroke-dasharray:4 10;
  opacity:.92;
}
.extra-pin text{
  font-size:12px;
}
.tiny-plane{
  fill:none;
  stroke:var(--cyan);
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
  filter:drop-shadow(0 0 8px var(--cyan));
}