:root{
  --ink:#05070a;
  --ink2:#090d13;
  --ink3:#0d141d;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,159,10,.34);
  --gold:#ffb02e;
  --gold-lt:#ffd087;
  --gold-dp:#ff8a00;
  --amber:#ff9f0a;
  --amber-dp:#ff7800;
  --amber-glow:rgba(255,128,0,.30);
  --cool:#45d6ff;
  --txt:#fffaf2;
  --sub:#b7bec8;
  --mut:#6f7782;
  --w:1320px;
  --r:22px;
}

body{
  background:
    radial-gradient(900px 700px at 78% 4%,rgba(255,112,0,.11),transparent 68%),
    radial-gradient(720px 600px at 8% 38%,rgba(0,183,255,.08),transparent 70%),
    #05070a;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.32;
  background-image:url("./promo-road.jpg");
  background-size:cover;
  background-position:center;
  mix-blend-mode:luminosity;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.42),transparent 74%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 20%,#000,transparent 72%);
}
/* Keep the keyboard skip-link accessible without placing it thousands of
   pixels outside an RTL canvas (which makes mobile browsers shrink the page). */
.skip{
  inset-inline-start:8px!important;
  transform:translateY(-220%);
  transition:transform .18s ease;
}
.skip:focus{transform:translateY(0)}
.grid-bg{background-size:72px 72px;opacity:.42}
.spot{background:radial-gradient(520px circle at var(--mx,-600px) var(--my,-600px),rgba(255,148,20,.13),transparent 64%)}
.w,.hero-in,nav .in{max-width:var(--w)}

nav{padding:22px 0}
nav.on{
  background:rgba(5,7,10,.74);
  backdrop-filter:blur(26px) saturate(1.45);
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.24);
}
.brand{font-family:var(--sans);font-size:17px;font-weight:800;letter-spacing:-.02em}
.brand .mk{width:32px;height:32px;filter:drop-shadow(0 0 16px rgba(255,159,10,.42))}
.nlinks{padding:4px 8px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(6,9,13,.34);backdrop-filter:blur(12px)}
.nlinks a{padding:0 8px;font-size:13px}
.tourbtn,.coffee,.lang{backdrop-filter:blur(16px)}
.tourbtn{border-radius:14px;padding:10px 17px;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 12px 34px rgba(255,120,0,.25)}

.hero{
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:138px 0 88px;
}
.hero-in{grid-template-columns:1.08fr .92fr;gap:76px}
.hero-copy{position:relative}
.hero-copy::before{
  content:"ROUTE  /  EXPLORE  /  ARRIVE";
  position:absolute;
  inset-inline-start:0;
  top:-64px;
  color:rgba(255,255,255,.16);
  font:700 10px/1 var(--mono);
  letter-spacing:.35em;
}
.eyebrow{
  padding:9px 13px;
  border:1px solid rgba(255,159,10,.25);
  border-radius:999px;
  background:rgba(255,159,10,.07);
  box-shadow:0 0 30px rgba(255,112,0,.08) inset;
}
.eyebrow::before{width:7px;height:7px;border-radius:50%;box-shadow:0 0 12px var(--amber)}
.hero h1{
  max-width:760px;
  font-family:var(--sans);
  font-size:clamp(52px,7vw,94px);
  font-weight:900;
  line-height:.93;
  letter-spacing:-.065em;
  margin-top:25px;
  text-wrap:balance;
}
.hero h1 .amber{
  color:transparent;
  background:linear-gradient(115deg,#fff2d1 0%,#ffb129 38%,#ff6500 100%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 14px 34px rgba(255,101,0,.20));
}
.hero .sub-en{font-size:11px;letter-spacing:.24em;margin-top:20px}
.hero .lead{font-size:clamp(17px,1.45vw,21px);line-height:1.65;max-width:52ch}
.hbtns{margin-top:36px}
.btn{border-radius:15px;padding:15px 25px;font-weight:800}
.btn-a{
  background:linear-gradient(135deg,#ffc34d,#ff8200);
  box-shadow:0 18px 44px -14px rgba(255,111,0,.72),inset 0 1px rgba(255,255,255,.42);
}
.btn-a:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 24px 54px -14px rgba(255,111,0,.78)}
.btn-g{background:rgba(255,255,255,.045);backdrop-filter:blur(16px)}
.hcaps{padding-top:25px;border-top:1px solid rgba(255,255,255,.08)}

.rb{max-width:510px;perspective:1200px}
.rb-frame{
  position:relative;
  border-radius:34px;
  padding:22px;
  background:linear-gradient(155deg,rgba(18,25,35,.94),rgba(5,8,12,.86));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 70px 120px -45px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,159,10,.08) inset,
    0 0 80px rgba(255,111,0,.10);
  backdrop-filter:blur(24px);
  transform:rotateY(-5deg) rotateX(2deg);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);
}
[dir="rtl"] .rb-frame{transform:rotateY(5deg) rotateX(2deg)}
.rb-frame:hover{transform:rotateY(0) rotateX(0) translateY(-8px);box-shadow:0 90px 150px -45px #000,0 0 100px rgba(255,111,0,.16)}
.rb-frame::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 26%,transparent 68%,rgba(255,127,0,.38));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  pointer-events:none;
}
.rb-head{padding:5px 10px 18px}
.rb-head .t{font-family:var(--sans);font-size:15px;font-weight:800}
.rb-svg{filter:drop-shadow(0 28px 38px rgba(0,0,0,.35))}
.route-line{stroke-width:4;filter:drop-shadow(0 0 10px rgba(255,133,0,.68))}

.sec{padding:clamp(86px,10vw,150px) 0}
.sec::before{
  content:"";
  position:absolute;
  left:50%;
  right:auto;
  top:0;
  width:min(90vw,1240px);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);
}
.sec-h{margin-bottom:62px}
.sec-h h2{
  font-family:var(--sans);
  font-weight:850;
  letter-spacing:-.045em;
  font-size:clamp(34px,4.8vw,62px);
}
.lead{font-size:16.5px}
.card,.il-vibe-card,.gbox,.pbox,.fig,.phone,.vid-wrap{
  border-color:rgba(255,255,255,.10);
  background:linear-gradient(145deg,rgba(17,24,34,.84),rgba(7,10,15,.72));
  box-shadow:0 28px 70px -45px rgba(0,0,0,.95),inset 0 1px rgba(255,255,255,.045);
  backdrop-filter:blur(18px);
}
.cards{gap:22px}
.card,.il-vibe-card{border-radius:24px;padding:28px 25px}
.card:hover,.il-vibe-card:hover{
  transform:translateY(-8px);
  border-color:rgba(255,159,10,.42);
  box-shadow:0 34px 64px -34px rgba(255,103,0,.24),inset 0 1px rgba(255,255,255,.07);
}
.card .ic{width:50px;height:50px;border-radius:15px;background:linear-gradient(145deg,rgba(255,176,55,.18),rgba(255,105,0,.08))}
.card h3,.il-vibe-card h3{font-family:var(--sans);font-weight:800;letter-spacing:-.02em}
.pbox{
  border-radius:32px;
  padding:72px 44px;
  background:
    radial-gradient(700px 300px at 50% 0,rgba(255,126,0,.24),transparent 65%),
    linear-gradient(150deg,rgba(20,27,38,.92),rgba(6,9,13,.9));
}
.pbox .price{font-family:var(--sans);font-weight:900;letter-spacing:-.055em}
.steps-mini{display:grid;gap:12px;margin-top:24px}
.step-mini{display:flex;align-items:center;gap:15px;padding:14px 16px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.025)}
.step-num{font:800 11px/1 var(--mono);color:var(--amber);border:1px solid rgba(255,159,10,.28);border-radius:10px;padding:10px;background:rgba(255,159,10,.07)}
.step-mini b{display:block;font-weight:800;font-size:15px}
.step-mini small{display:block;color:var(--sub);font-size:13px;margin-top:2px}
.proof-sec{background:linear-gradient(180deg,rgba(255,159,10,.035),transparent)}
.proof-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding:52px;border:1px solid rgba(255,255,255,.10);border-radius:32px;background:linear-gradient(145deg,rgba(17,24,34,.88),rgba(6,9,13,.82));box-shadow:0 40px 100px -50px #000}
.proof-grid h2{margin:14px 0 18px;font-family:var(--sans);font-weight:850;letter-spacing:-.045em}
.proof-cta{margin-top:24px}
.proof-map{position:relative;min-height:330px;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:radial-gradient(circle at 60% 50%,rgba(255,128,0,.12),transparent 52%),rgba(1,4,8,.45);overflow:hidden}
.proof-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px}
.proof-map svg{position:absolute;inset:84px 26px 20px;width:calc(100% - 52px);height:calc(100% - 104px)}
.proof-line{fill:none;stroke:var(--amber);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(255,128,0,.75))}
.proof-map circle{fill:#070a0e;stroke:var(--amber);stroke-width:4}
.proof-stat{position:relative;z-index:1;display:inline-flex;flex-direction:column;margin:22px 0 0 22px;padding:11px 16px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(6,9,13,.78);backdrop-filter:blur(12px)}
.proof-stat b{font:900 24px/1 var(--sans);color:var(--txt)}
.proof-stat span{font-size:11px;color:var(--sub);margin-top:5px}

footer{background:rgba(3,5,8,.62);backdrop-filter:blur(18px)}

@media(max-width:960px){
  .hero{min-height:auto}
  .hero-in{gap:54px}
  .rb{max-width:430px}
  .rb-frame,[dir="rtl"] .rb-frame{transform:none}
  .proof-grid{grid-template-columns:1fr;padding:34px}
}
@media(max-width:560px){
  nav{padding:12px 0}
  nav .in,.hero-in,.w{padding-inline:18px}
  .brand{font-size:15px}
  .brand .mk{width:28px;height:28px}
  .hero{padding-top:108px}
  .hero-copy::before{display:none}
  .hero h1{font-size:clamp(44px,15vw,66px)}
  .hero .lead{font-size:16px}
  .rb-frame{padding:14px;border-radius:26px}
  .hcaps{gap:12px}
  .hcap{width:100%}
  .sec{padding:78px 0}
  .sec-h h2{font-size:38px}
  .pbox{padding:48px 22px}
  .proof-grid{padding:24px;gap:30px}
  .proof-map{min-height:300px}
  .proof-stat{margin:14px 0 0 10px;padding:9px 12px}
}

/* Mobile-first hardening: keep the page at the real device width and make the
   primary journey readable without browser zoom. */
@media(max-width:680px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{font-size:17px;line-height:1.65}
  nav{padding:9px 0}
  nav .in{width:100%;padding-inline:14px;gap:9px}
  .brand{flex:1;min-width:0;font-size:16px}
  .brand span{overflow:hidden;text-overflow:ellipsis}
  .nav-r{flex:none;gap:7px}
  .lang button{font-size:13px;padding:7px 9px}
  .tourbtn{min-height:46px;padding:9px 12px;font-size:13px}
  .burger{display:none!important}

  .hero{
    min-height:auto;
    padding:98px 0 58px;
    align-items:flex-start;
  }
  .hero-in{
    width:100%;
    padding-inline:16px;
    grid-template-columns:minmax(0,1fr);
    gap:30px;
  }
  .hero-copy,.rb{width:100%;min-width:0}
  .rb{order:-1;max-width:100%}
  .rb-frame{width:100%;padding:13px;border-radius:23px}
  .hero h1{
    font-size:clamp(42px,13.5vw,58px);
    line-height:.98;
    letter-spacing:-.05em;
    overflow-wrap:anywhere;
  }
  .hero .lead{font-size:18px;line-height:1.65;max-width:none}
  .hero .sub-en{font-size:11px;line-height:1.55}
  .hbtns{display:grid;grid-template-columns:1fr;gap:11px;margin-top:26px}
  .hbtns .btn{
    width:100%;
    min-height:56px;
    padding:14px 18px;
    justify-content:center;
    font-size:17px;
  }
  .hcaps{display:grid;grid-template-columns:1fr;gap:11px;margin-top:25px}
  .hcap{width:100%;font-size:15px}

  .w{width:100%;padding-inline:16px}
  .sec{padding:64px 0}
  .sec-h{margin-bottom:30px}
  .sec-h h2{font-size:clamp(34px,10vw,44px);line-height:1.08}
  .lead{font-size:17px;line-height:1.65}
  .cards,.dwrap,.cbox,.split,.proof-grid,.il-vibes,.il-feats{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .card,.il-vibe-card{padding:24px 20px}
  .card h3,.il-vibe-card h3{font-size:21px}
  .card p,.il-vibe-card p{font-size:16px}
  .phone,.vid-wrap,.fig{max-width:100%}
  .pbox{padding:42px 18px;border-radius:24px}
  .pbtns{display:grid!important;grid-template-columns:1fr;gap:11px}
  .pbtns .btn{width:100%;justify-content:center;min-height:56px}
  .proof-grid{padding:20px;border-radius:24px}
  .proof-map{min-height:260px}
  footer .w{padding-inline:18px}
}

@media(max-width:380px){
  nav .in{padding-inline:10px}
  .brand{font-size:14px}
  .lang button{padding-inline:7px}
  .tourbtn{padding-inline:9px}
  .hero h1{font-size:40px}
}