:root{
  --navy:#041125;
  --navy-2:#071a35;
  --panel:rgba(3,13,30,.74);
  --panel-border:rgba(120,174,255,.28);
  --text:#f7fbff;
  --muted:#b7c5db;
  --blue:#2994ff;
  --blue-2:#67bbff;
  --shadow:0 20px 60px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:#020914;
}
button,input{font:inherit}
button{cursor:pointer}
.topbar{
  position:fixed; inset:0 0 auto 0; height:92px; z-index:40;
  display:flex; align-items:center; gap:34px; padding:15px 24px;
  background:linear-gradient(to bottom,rgba(2,8,21,.92),rgba(2,8,21,.66),transparent);
  backdrop-filter: blur(10px);
}
.brand{display:flex;align-items:center;gap:14px;color:white;text-decoration:none;min-width:360px}
.brand-mark{font-size:42px;filter:drop-shadow(0 0 14px rgba(41,148,255,.45))}
.brand-name{font-size:24px;font-weight:800;letter-spacing:.7px}
.brand-tagline{font-family:Georgia,serif;font-style:italic;font-size:17px;margin-top:2px}
.nav{display:flex;gap:12px;align-items:center;flex:1}
.nav a{
  color:#f2f6ff;text-decoration:none;padding:12px 11px;border-radius:10px;
  display:flex;gap:7px;align-items:center;white-space:nowrap
}
.nav a:hover,.nav a.active{background:rgba(41,148,255,.10);box-shadow:inset 0 -2px 0 var(--blue)}
.header-actions{display:flex;gap:10px;align-items:center}
.ghost-btn,.install-btn{
  color:white;border:1px solid rgba(130,170,240,.22);border-radius:14px;padding:12px 15px;background:rgba(6,17,39,.55)
}
.install-btn{background:linear-gradient(180deg,#187be8,#0753c7);box-shadow:0 0 24px rgba(41,148,255,.35)}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;color:white;font-size:29px}
.hero{
  min-height:940px;position:relative;overflow:hidden;padding-top:115px;
  background:
    radial-gradient(circle at 80% 24%,rgba(24,102,188,.22),transparent 24%),
    radial-gradient(circle at 18% 78%,rgba(11,79,154,.38),transparent 28%),
    linear-gradient(135deg,#020817,#071a34 56%,#020914);
}
.stars{
  position:absolute;inset:0;opacity:.7;
  background-image:
    radial-gradient(circle at 20% 20%,white 0 1px,transparent 1.5px),
    radial-gradient(circle at 75% 10%,white 0 1px,transparent 1.5px),
    radial-gradient(circle at 40% 30%,#79c2ff 0 1px,transparent 1.5px),
    radial-gradient(circle at 90% 42%,white 0 1px,transparent 1.5px);
  background-size:210px 210px,280px 280px,170px 170px,330px 330px;
}
.earth{
  position:absolute;left:50%;top:85px;transform:translateX(-50%);
  width:min(52vw,770px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 68% 24%,rgba(255,255,255,.8) 0 1%,transparent 3%),
    radial-gradient(circle at 65% 46%,rgba(56,165,255,.3),transparent 25%),
    radial-gradient(circle at 34% 40%,#0d5da8 0 12%,#05396f 25%,#041f46 48%,#020d21 72%);
  box-shadow:0 0 50px rgba(63,170,255,.75),0 0 130px rgba(19,103,197,.35);
  border:2px solid rgba(99,191,255,.7)
}
.earth:before{
  content:"";position:absolute;inset:5%;border-radius:50%;
  background:
    radial-gradient(ellipse at 58% 42%,rgba(210,176,105,.72) 0 2%,transparent 3%),
    radial-gradient(ellipse at 62% 48%,rgba(180,151,82,.58) 0 4%,transparent 5%),
    radial-gradient(ellipse at 50% 54%,rgba(218,186,109,.62) 0 6%,transparent 7%),
    radial-gradient(ellipse at 35% 31%,rgba(83,129,78,.5) 0 9%,transparent 10%);
  filter:blur(.4px)
}
.earth-glow{position:absolute;inset:-8%;border-radius:50%;box-shadow:inset -40px -50px 100px rgba(0,0,0,.6)}
.plane{position:absolute;left:7%;top:220px;font-size:150px;transform:rotate(-10deg);filter:drop-shadow(0 18px 16px rgba(0,0,0,.45))}
.ship{position:absolute;left:8%;bottom:145px;font-size:135px;filter:drop-shadow(0 18px 12px rgba(0,0,0,.5))}
.train{position:absolute;right:5%;bottom:210px;font-size:160px;filter:drop-shadow(0 18px 12px rgba(0,0,0,.5))}
.river{
  position:absolute;right:-7%;bottom:-6%;width:48%;height:45%;transform:rotate(-8deg);
  background:linear-gradient(110deg,transparent 0 18%,rgba(48,136,218,.18) 25%,rgba(84,186,255,.85) 48%,rgba(7,64,126,.65) 65%,transparent 77%);
  filter:blur(12px)
}
.hero-content{position:relative;z-index:5;width:min(720px,calc(100% - 32px));margin:90px auto 0;text-align:center}
.eyebrow{font-size:12px;letter-spacing:.22em;color:#8bc9ff;font-weight:800}
h1{font-size:clamp(52px,6vw,86px);line-height:.94;margin:15px 0 8px;letter-spacing:-2px;text-shadow:0 5px 25px rgba(0,0,0,.5)}
h1 span{color:#47a8ff}
.hero-subtitle{font:italic 25px Georgia,serif;margin:0 0 20px}
.search-bar{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  background:rgba(2,12,27,.86);border:1px solid var(--panel-border);border-radius:17px;
  padding:8px 8px 8px 17px;box-shadow:var(--shadow);backdrop-filter:blur(18px)
}
.search-icon{font-size:25px}
.search-bar input{width:100%;background:transparent;border:0;outline:0;color:white;font-size:17px}
.search-bar input::placeholder{color:#c6d0df}
.search-bar button{border:0;border-radius:14px;padding:13px 19px;color:#fff;background:linear-gradient(180deg,#1884ed,#0757cf);font-weight:700}
.search-results{
  margin-top:8px;background:#06142a;border:1px solid var(--panel-border);border-radius:14px;padding:8px;text-align:left;
  box-shadow:var(--shadow)
}
.search-results button{display:block;width:100%;border:0;background:transparent;color:white;padding:11px;border-radius:10px;text-align:left}
.search-results button:hover{background:rgba(41,148,255,.16)}
.glass-panel{
  margin-top:13px;background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;padding:15px 18px;box-shadow:var(--shadow);backdrop-filter:blur(22px)
}
.glass-panel h2{font-size:17px;margin:0 0 12px}
.quick-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.quick-grid button{
  border:0;background:transparent;color:white;border-radius:12px;padding:7px 3px;font-size:13px
}
.quick-grid button:hover{background:rgba(41,148,255,.12)}
.quick-grid span{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 auto 5px;
  border:1px solid rgba(71,156,255,.27);border-radius:10px;font-size:25px
}
.section-head{display:flex;align-items:center;justify-content:space-between}
.text-btn{border:0;background:transparent;color:#52abff}
.destination-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.destination-card{
  min-height:146px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.10);
  position:relative;background:linear-gradient(150deg,#0d6fa6,#082d58);text-align:left;color:white;padding:0
}
.destination-card:nth-child(2){background:linear-gradient(150deg,#0b7d9c,#6e4c26)}
.destination-card:nth-child(3){background:linear-gradient(150deg,#67324c,#1b325d)}
.destination-card .card-scene{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78),transparent 62%)}
.destination-card .card-icon{position:absolute;right:12px;top:12px;font-size:46px;opacity:.88}
.destination-card .card-copy{position:absolute;left:14px;right:14px;bottom:12px}
.destination-card h3{margin:0;font-size:24px}
.destination-card p{margin:3px 0 0;color:#f1f5fb}
.destination-card small{float:right;color:#ffd86e}
.feature-strip{
  width:min(920px,calc(100% - 30px));margin:-34px auto 0;position:relative;z-index:8;
  display:grid;grid-template-columns:repeat(4,1fr);background:rgba(3,14,31,.94);
  border:1px solid var(--panel-border);border-radius:22px;box-shadow:var(--shadow);padding:18px
}
.feature-strip article{display:flex;gap:12px;align-items:center;padding:2px 16px;border-right:1px solid rgba(255,255,255,.08)}
.feature-strip article:last-child{border-right:0}
.feature-icon{font-size:30px}
.feature-strip h3{margin:0 0 4px;font-size:16px}.feature-strip p{margin:0;color:var(--muted);font-size:13px}
.content-section{padding:110px 24px;background:linear-gradient(#020914,#06152d)}
.content-wrap{max-width:1120px;margin:auto}
.section-title{text-align:center;max-width:700px;margin:auto}
.section-title h2{font-size:40px;margin:6px 0 12px}.section-title p{color:var(--muted);line-height:1.6}
.info-grid{margin-top:42px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.info-grid article{padding:20px;border:1px solid rgba(124,171,233,.18);border-radius:16px;background:rgba(6,22,48,.72)}
.info-grid h3{margin:0 0 8px}.info-grid p{margin:0;color:var(--muted);line-height:1.45;font-size:14px}
dialog{
  width:min(720px,calc(100% - 30px));border:1px solid var(--panel-border);border-radius:22px;
  background:#06142b;color:white;padding:28px;box-shadow:0 30px 90px rgba(0,0,0,.65)
}
dialog::backdrop{background:rgba(0,5,14,.75);backdrop-filter:blur(4px)}
.dialog-close{position:absolute;right:14px;top:12px;background:transparent;color:white;border:0;font-size:28px}
.dialog-hero{display:flex;gap:16px;align-items:center}.dialog-hero .emoji{font-size:54px}
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.detail-grid article{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px;background:rgba(255,255,255,.03)}
.detail-grid h4{margin:0 0 6px}.detail-grid p{margin:0;color:#cbd6e5;line-height:1.45}
.language-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.language-grid button{padding:13px;border-radius:12px;border:1px solid var(--panel-border);background:rgba(255,255,255,.04);color:white}
.toast{position:fixed;right:20px;bottom:20px;z-index:100;background:#0b2448;color:white;padding:13px 18px;border:1px solid var(--panel-border);border-radius:12px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(8px);transition:.25s}
.toast.show{opacity:1;transform:none}
body.light{--text:#071224;--muted:#425168;background:#eaf2fb}.light .topbar{background:rgba(235,245,255,.85)}.light .brand,.light .nav a,.light .ghost-btn{color:#071224}.light .hero{background:linear-gradient(135deg,#dbeeff,#8dc7ff)}.light .content-section{background:#eaf2fb}.light .glass-panel,.light .feature-strip{background:rgba(242,248,255,.83)}.light .search-bar{background:rgba(242,248,255,.88)}.light .search-bar input{color:#071224}.light .search-bar input::placeholder{color:#53657f}.light .quick-grid button,.light .info-grid article,.light .feature-strip{color:#071224}.light .info-grid article{background:white}
@media (max-width:1100px){
  .brand{min-width:auto}.brand-name{font-size:19px}.brand-tagline{font-size:14px}.nav{gap:3px}.header-actions .ghost-btn span{display:none}
  .plane{left:2%;font-size:100px}.train{font-size:120px}.ship{font-size:100px}
}
@media (max-width:860px){
  .topbar{height:78px;padding:10px 15px}.brand-name{font-size:17px}.brand-tagline{font-size:13px}.brand-mark{font-size:32px}
  .menu-toggle{display:block}.nav{
    display:none;position:absolute;top:75px;left:12px;right:12px;background:#06142b;border:1px solid var(--panel-border);border-radius:15px;padding:10px;flex-direction:column;align-items:stretch
  }.nav.open{display:flex}.header-actions{display:none}
  .hero{min-height:980px;padding-top:80px}.earth{width:88vw;top:120px}.plane{top:220px;font-size:75px}.ship{bottom:225px;font-size:90px}.train{bottom:180px;font-size:100px}
  .hero-content{margin-top:245px}.quick-grid{grid-template-columns:repeat(4,1fr)}.destination-grid{grid-template-columns:1fr}
  .feature-strip{grid-template-columns:1fr 1fr}.feature-strip article{border-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding:12px}
  .info-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:540px){
  h1{font-size:49px}.hero-subtitle{font-size:21px}.hero{min-height:1190px}.hero-content{margin-top:245px}
  .search-bar{grid-template-columns:auto 1fr}.search-bar button{grid-column:1/-1;width:100%}
  .quick-grid{grid-template-columns:repeat(2,1fr)}.feature-strip{grid-template-columns:1fr;margin-top:14px}
  .info-grid,.detail-grid,.language-grid{grid-template-columns:1fr}.content-section{padding:70px 16px}
  .section-title h2{font-size:32px}.brand-tagline{display:none}
}


/* ===== Approved Travel Companion visual ===== */
.hero{
  min-height:980px;
  position:relative;
  overflow:hidden;
  padding-top:115px;
  background:#020817 !important;
}
.hero-visual{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(to bottom, rgba(2,8,23,.03), rgba(2,8,23,.08) 48%, rgba(2,8,23,.28) 100%),
    url("travel-companion-hero.jpeg") center top / cover no-repeat;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent 62%, rgba(1,8,20,.20));
}
.hero-content{
  position:relative;
  z-index:5;
  width:min(720px,calc(100% - 32px));
  margin:165px auto 0;
  text-align:center;
}
.search-bar{background:rgba(2,12,27,.72)}
.glass-panel{background:rgba(3,13,30,.62)}

@media (max-width:860px){
  .hero{min-height:1160px;padding-top:80px}
  .hero-visual{
    background-position:48% top;
    background-size:auto 100%;
  }
  .hero-content{margin-top:305px}
}
@media (max-width:540px){
  .hero{min-height:1280px}
  .hero-visual{
    background-position:49% top;
    background-size:auto 100%;
  }
  .hero-content{margin-top:300px}
}