/* ============================================================================
   Aroundwego — shared night-atlas / cartographic styles
   Used by index.html, marrakech.html, paris.html.
   Brand fonts (Montserrat + Inter) per guideline; JetBrains Mono = map accent.
   ============================================================================ */

:root {
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --azure: #1FA3E8; --azure-light:#5BC0FB; --teal:#15ACB6; --teal-light:#23BDB7;
}

body { background:#0A1827; color:#E7E9EE; font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; }

.font-display { font-family:'Montserrat',sans-serif; }
.font-mono { font-family:'JetBrains Mono',monospace; }
.tracking-tight-display { letter-spacing:-0.035em; }
.leading-relaxed-body { line-height:1.7; }

/* ── Cartographic background: glowing topographic contours + atmosphere + grain ── */
.world {
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    repeating-radial-gradient(circle at 80% 8%,  transparent 0 47px, rgba(91,192,251,0.05) 47px 48px),
    repeating-radial-gradient(circle at 14% 64%, transparent 0 55px, rgba(21,172,182,0.045) 55px 56px),
    repeating-radial-gradient(circle at 58% 116%, transparent 0 68px, rgba(14,61,122,0.06) 68px 69px),
    #0A1827;
}
.world::after { /* atmospheric color wash */
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(55% 45% at 82% 6%, rgba(31,163,232,0.18) 0%, transparent 60%),
    radial-gradient(45% 45% at 8% 30%, rgba(21,172,182,0.14) 0%, transparent 58%),
    radial-gradient(70% 60% at 50% 112%, rgba(14,61,122,0.35) 0%, transparent 62%);
}
.grain {
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.text-gradient {
  background:linear-gradient(105deg,#5BC0FB 0%,#1FA3E8 38%,#23BDB7 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ── Cartographic detail components ── */
.coord { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em; color:rgba(231,233,238,0.38); text-transform:uppercase; }

.marker { display:inline-flex; align-items:center; gap:.75rem; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:#5BC0FB; }
.marker .num { color:#23BDB7; font-weight:700; }
.marker .dash { display:inline-block; width:34px; height:1px; background:linear-gradient(90deg,#23BDB7,transparent); }

/* dotted route connector between sections */
.route { display:flex; justify-content:center; padding:8px 0; }
.route i { position:relative; display:block; width:2px; height:74px;
  background:repeating-linear-gradient(to bottom, rgba(91,192,251,.55) 0 5px, transparent 5px 11px); }
.route i::before, .route i::after { content:''; position:absolute; left:50%; transform:translateX(-50%); border-radius:50%; }
.route i::before { top:-3px; width:6px; height:6px; background:#5BC0FB; }
.route i::after { bottom:-5px; width:11px; height:11px; background:#23BDB7; box-shadow:0 0 0 5px rgba(35,189,183,.18), 0 0 18px rgba(35,189,183,.5); }

/* ── Buttons ── */
.btn-primary {
  background:linear-gradient(120deg,#1FA3E8 0%,#15ACB6 100%);
  transition: transform .35s var(--ease-spring), box-shadow .35s ease, filter .25s ease;
  will-change: transform;
}
.btn-primary:hover { transform:translateY(-2px) scale(1.015); box-shadow:0 28px 64px -16px rgba(31,163,232,0.6); filter:brightness(1.06); }
.btn-primary:active { transform:translateY(0) scale(.98); }
.btn-primary:focus-visible { outline:2px solid #5BC0FB; outline-offset:3px; }

.btn-ghost { transition: transform .3s var(--ease-spring), border-color .25s ease, background-color .25s ease; }
.btn-ghost:hover { transform:translateY(-2px); border-color:rgba(91,192,251,0.6); background:rgba(31,163,232,0.08); }
.btn-ghost:active { transform:translateY(0); }
.btn-ghost:focus-visible { outline:2px solid #5BC0FB; outline-offset:3px; }

/* ── Cards ── */
.card {
  position:relative; background:linear-gradient(180deg, rgba(19,38,59,0.82) 0%, rgba(12,26,46,0.82) 100%);
  border:1px solid rgba(91,192,251,0.10); backdrop-filter:blur(4px);
  transition: transform .4s var(--ease-spring), box-shadow .4s ease, border-color .3s ease;
  will-change: transform;
}
.card:hover { transform:translateY(-6px); border-color:rgba(91,192,251,0.32); box-shadow:0 36px 80px -34px rgba(8,20,32,0.9); }
/* corner-bracket reticle on cards */
.reticle::before, .reticle::after { content:''; position:absolute; width:14px; height:14px; pointer-events:none; opacity:.5; }
.reticle::before { top:10px; left:10px; border-top:1.5px solid #5BC0FB; border-left:1.5px solid #5BC0FB; }
.reticle::after  { bottom:10px; right:10px; border-bottom:1.5px solid #23BDB7; border-right:1.5px solid #23BDB7; }

.icon-chip { background:linear-gradient(135deg, rgba(31,163,232,0.18), rgba(21,172,182,0.18)); border:1px solid rgba(91,192,251,0.22); }

/* city image treatment */
.city-card img { transition: transform .6s var(--ease-spring); }
.city-card:hover img { transform:scale(1.07); }

/* marquee */
.marquee { overflow:hidden; }
.marquee__track { display:flex; width:max-content; animation:scroll-x 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes scroll-x { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* phone float + reticle frame */
.phone-float { animation:floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
.phone-frame { position:relative; }
.phone-frame .bracket { position:absolute; width:28px; height:28px; pointer-events:none; }
.phone-frame .bracket.tl { top:-14px; left:-14px; border-top:2px solid rgba(91,192,251,.6); border-left:2px solid rgba(91,192,251,.6); }
.phone-frame .bracket.tr { top:-14px; right:-14px; border-top:2px solid rgba(35,189,183,.6); border-right:2px solid rgba(35,189,183,.6); }
.phone-frame .bracket.bl { bottom:-14px; left:-14px; border-bottom:2px solid rgba(35,189,183,.6); border-left:2px solid rgba(35,189,183,.6); }
.phone-frame .bracket.br { bottom:-14px; right:-14px; border-bottom:2px solid rgba(91,192,251,.6); border-right:2px solid rgba(91,192,251,.6); }

.nav-link { position:relative; transition:color .25s ease; }
.nav-link::after { content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:linear-gradient(90deg,#1FA3E8,#23BDB7); transition:width .3s var(--ease-spring); }
.nav-link:hover { color:#fff; }
.nav-link:hover::after { width:100%; }

/* ── Orchestrated hero load (staggered) ── */
.load { opacity:0; transform:translateY(20px); animation:load .9s var(--ease-spring) forwards; }
@keyframes load { to { opacity:1; transform:translateY(0); } }

/* ── Scroll reveal ── */
[data-reveal] { opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease-spring) var(--d,0ms), transform .8s var(--ease-spring) var(--d,0ms); }
[data-reveal].in { opacity:1; transform:none; }

/* ── Phone 3-screen flip animation ── */
.phone-screen { position:absolute; inset:0; backface-visibility:hidden; }

@keyframes screen1-anim {
  0%          { opacity:0; transform:rotateY(-80deg) scale(.96); }
  4%, 29%     { opacity:1; transform:rotateY(0deg) scale(1); }
  33%, 100%   { opacity:0; transform:rotateY(80deg) scale(.96); }
}
@keyframes screen2-anim {
  0%, 33%     { opacity:0; transform:rotateY(-80deg) scale(.96); }
  37%, 62%    { opacity:1; transform:rotateY(0deg) scale(1); }
  66%, 100%   { opacity:0; transform:rotateY(80deg) scale(.96); }
}
@keyframes screen3-anim {
  0%, 66%     { opacity:0; transform:rotateY(-80deg) scale(.96); }
  70%, 95%    { opacity:1; transform:rotateY(0deg) scale(1); }
  99%, 100%   { opacity:0; transform:rotateY(80deg) scale(.96); }
}
.screen-1 { animation:screen1-anim 9s ease-in-out infinite; }
.screen-2 { animation:screen2-anim 9s ease-in-out infinite; }
.screen-3 { animation:screen3-anim 9s ease-in-out infinite; }

/* ── Screen indicator dots ── */
.phone-dots { position:absolute; bottom:68px; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:20; }
.phone-dot  { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.3); transition:background .3s; }
.screen-1.screen-active ~ .phone-dots .phone-dot:nth-child(1),
.screen-2.screen-active ~ .phone-dots .phone-dot:nth-child(2),
.screen-3.screen-active ~ .phone-dots .phone-dot:nth-child(3) { background:rgba(91,192,251,0.9); }

/* ── Amber buy CTA (the one button that should dominate the cool palette) ── */
.btn-cta {
  background:linear-gradient(118deg,#F7A41D 0%,#FFC83D 100%);
  color:#0A1827;
  box-shadow:0 16px 44px -16px rgba(247,164,29,0.6);
  transition: transform .35s var(--ease-spring), box-shadow .35s ease, filter .25s ease;
  will-change: transform;
}
.btn-cta:hover { transform:translateY(-2px) scale(1.015); box-shadow:0 26px 66px -16px rgba(247,164,29,0.74); filter:brightness(1.05); }
.btn-cta:active { transform:translateY(0) scale(.98); }
.btn-cta:focus-visible { outline:2px solid #FFC83D; outline-offset:3px; }

/* struck "was" price */
.price-was { text-decoration:line-through; text-decoration-color:rgba(247,164,29,0.7); text-decoration-thickness:2px; }

/* ── Sticky scroll CTA bar (slides up once the hero leaves the viewport) ── */
#stickyCta {
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  transform:translateY(115%); transition:transform .45s var(--ease-spring);
  pointer-events:none;
}
#stickyCta.show { transform:translateY(0); pointer-events:auto; }
@keyframes cta-pulse { 0%,100%{box-shadow:0 14px 40px -16px rgba(247,164,29,0.6);} 50%{box-shadow:0 14px 46px -10px rgba(247,164,29,0.95);} }
#stickyCta.show .cta-pulse { animation:cta-pulse 2.4s ease-in-out infinite; }

/* ── FAQ accordion (native <details>, zero JS) ── */
.faq details { border-bottom:1px solid rgba(255,255,255,0.08); }
.faq summary { cursor:pointer; list-style:none; outline:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:focus-visible { color:#fff; }
.faq .chev { transition:transform .3s var(--ease-spring); }
.faq details[open] .chev { transform:rotate(180deg); }
.faq details[open] .faq-a { animation:faq-in .4s ease both; }
@keyframes faq-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* ── Comparison table ── */
.cmp-yes { color:#23BDB7; }
.cmp-no  { color:rgba(231,233,238,0.26); }
.cmp-col-own { background:linear-gradient(180deg, rgba(31,163,232,0.10), rgba(21,172,182,0.06)); }

@media (prefers-reduced-motion: reduce) {
  *, .marquee__track, .phone-float, .load { animation:none !important; }
  [data-reveal] { opacity:1 !important; transform:none !important; transition:none; }
  .screen-1 { opacity:1 !important; transform:none !important; animation:none !important; }
  .screen-2, .screen-3 { opacity:0 !important; animation:none !important; pointer-events:none; }
  #stickyCta { transition:none; }
  #stickyCta.show .cta-pulse { animation:none; }
}