/* JollyTango Global Styles - Updated */
:root{
  --ink:#1D1D1F;
  --body:#555557;
  --line:#E5E7EB;
  --bg:#FAFAFA;
  --accent:#F15A24;
  --link:#34A3A1;
  --gradient: linear-gradient(90deg, #FF8A00 0%, #F7C440 35%, #5AC88F 65%, #1DBFD2 100%);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Baloo 2', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--body); background:var(--bg); font-size:19px; line-height:1.5;
}
a{color:var(--link); text-decoration:none} a:hover{text-decoration:underline}
b, strong { color: var(--ink); }

/* Header over hero */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  position:absolute; top:0; left:0; right:0; z-index:20;
  background:transparent;
}
.brand{display:flex; gap:10px; align-items:center}
.brand a{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none}
.brand img{height:50px; width:50px; border-radius:8px}
.brand span{font-weight:700; letter-spacing:.2px; font-size:20px; color:#fff}

/* Header for non-hero pages */
header.solid{
  position:relative;
  background:#fff;
  border-bottom:1px solid var(--line);
}
header.solid .brand span{color:var(--ink)}

/* Language dropdown */
.lang-select{position:relative; display:inline-block}
.lang-select select{
  appearance:none; font:inherit; padding:6px 36px 6px 12px;
  border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink);
  cursor: pointer;
}
.lang-select::after{
  content:""; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:12px; height:8px; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:12px 8px;
}

/* Hero */
.hero{margin:0}
.hero-frame{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden}
@supports not (aspect-ratio:16/9){ .hero-frame{padding-top:56.25%} .hero-bg,.hero-overlay,.hero-inner{position:absolute; inset:0} }
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55))}
.hero-inner{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:64px 16px 16px}
.hero h1{
  font-weight:700; font-size:clamp(32px,7vw,64px); line-height:1.2; margin:0 0 12px; color:#FFFFFF;
  text-shadow:0 2px 6px rgba(0,0,0,0.5);
}
.hero p{
  font-size:22px; margin:0 0 20px; color:#FFFFFF;
  text-shadow:0 2px 6px rgba(0,0,0,0.5);
}
.hero .contact-info{
  font-size:clamp(16px,2.5vw,18px); margin:0 0 10px; color:#FFFFFF;
  text-shadow:0 2px 6px rgba(0,0,0,0.5);
}
.hero .contact-info a{color:#FFFFFF; text-decoration:underline}
.hero .contact-info strong{color:#FFFFFF}
.stores{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
.stores img{height:52px; width:auto}

/* Features */
h1, h2, h3, h4, h5, h6, .feature-title{color:var(--ink);}
.features{max-width:1200px; margin:0 auto; padding:56px 20px}
.features h2{font-weight:700; font-size:clamp(26px,4.4vw,36px); text-align:center; margin:0 0 8px; line-height:1.3}
.features .sub{color:var(--body); text-align:center; margin:8px auto 28px; max-width:900px; font-size:19px; line-height:1.6}
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feature-card{border-radius:14px; padding:18px; text-align:center; color:#fff}
.feature-card.air{background:#3DA5BF}
.feature-card.land{background:#45BF76}
.feature-card.ocean{background:#45BBBF}

/* Image area + colored rule under image */
.visual{
  position:relative;
  width:100%;
  aspect-ratio:6/7;
  border-radius:12px 12px 0 0;
  overflow:hidden;
  margin-bottom:14px;
}
.visual img{width:100%; height:100%; object-fit:cover; display:block}
.visual::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#FFFFFF;
}
.feature-card.air .visual::after{ background:#2e8fa7; }
.feature-card.land .visual::after{ background:#36a964; }
.feature-card.ocean .visual::after{ background:#36a4a8; }

.feature-title{font-weight:700; margin-top:6px; font-size:20px; line-height:1.4; color:#fff}
.feature-desc{font-size:19px; color:#fff; opacity:0.95; margin-top:10px; line-height:1.5}

/* Split section */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; max-width:1200px; margin:56px auto; padding:0 20px; align-items:center}
.split h3{font-size:clamp(26px,4vw,36px); font-weight:700; margin:0 0 20px; color:var(--ink); line-height:1.3}
.split ul{padding-left:24px; margin:0; list-style-type:square; color:#34A3A1}
.split ul li{margin:12px 0; color:var(--body)}
.square{aspect-ratio:1/1; position:relative; overflow:hidden; border-radius:14px}
.square img{width:100%; height:100%; object-fit:cover}

/* CTA band - WITH GRADIENT */
.cta{
  text-align:center; 
  padding:56px 20px; 
  background:var(--gradient);
  color:#FFFFFF;
}
.cta h2{
  font-weight:700; 
  font-size:clamp(28px,4.5vw,40px); 
  margin:0 0 12px; 
  line-height:1.3;
  color:#FFFFFF;
}
.cta p{
  margin:12px auto 28px; 
  max-width:680px; 
  font-size:19px;
  color:#FFFFFF;
  opacity:0.95;
}
.cta .buttons{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
.cta .buttons img{height:52px; width:auto}

/* Footer */
footer{padding:32px 20px; background:var(--ink); color:#B3B3B5; font-size:16px}
.footwrap{max-width:1200px; margin:0 auto; text-align:center}
.footwrap>div{margin:8px 0}
.legal-links{display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin:16px 0}
footer a{color:#34A3A1} footer a:hover{color:#fff}

/* Content pages (privacy, terms) */
.content-page{max-width:800px; margin:0 auto; padding:40px 20px}
.content-page h1{font-size:clamp(32px,5vw,48px); margin:80px 0 24px}
.content-page h2{font-size:clamp(24px,3.5vw,32px); margin:32px 0 16px}
.content-page h3{font-size:clamp(20px,3vw,24px); margin:24px 0 12px}
.content-page p, .content-page li{line-height:1.6}
.content-page ul, .content-page ol{padding-left:24px}

/* Mobile responsiveness */
@media (max-width:768px){
  header{padding:12px 16px}
  .brand img{height:42px; width:42px}
  .brand span{font-size:18px}
  .lang-select select{padding:4px 32px 4px 10px; font-size:15px}
  .features-grid{grid-template-columns:1fr; gap:16px}
  .split{grid-template-columns:1fr; gap:32px}
  .split .square{max-width:500px; margin:0 auto}
  .stores img, .cta .buttons img{height:44px}
  .content-page h1{margin-top:60px}
}

/* Mobile hero aspect ratio fix */
@media (max-width:600px){
  .hero-frame{aspect-ratio:10/9}
  @supports not (aspect-ratio:10/9){
    .hero-frame{padding-top:111.11%}
  }
  .hero-inner{padding-top:76px}
  .stores{gap:12px}
  .stores img{height:40px}
}

/* Tooltip for Google Play launch date */
.play-button-wrapper {
  position: relative;
  display: inline-block;
}

.play-button-wrapper .tooltip {
  visibility: hidden;
  opacity: 0;
  background-color: #1D1D1F;
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  border-radius: 8px;
  position: absolute;
  z-index: 100;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.play-button-wrapper .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #1D1D1F transparent transparent transparent;
}

.play-button-wrapper .tooltip.show {
  visibility: visible;
  opacity: 1;
}

.play-button-wrapper a {
  cursor: pointer;
}