/* ============================================================
   World Clock — PREMIUM design system
   Deep navy → indigo/violet gradients · glassmorphism ·
   animated gradient buttons · performance-safe motion
   (transform/opacity only; honours prefers-reduced-motion)
   ============================================================ */
:root{
  --bg:#04061a; --bg2:#0a1030; --bg3:#150b38;
  --card:rgba(255,255,255,.055); --card-strong:rgba(255,255,255,.09);
  --card-border:rgba(255,255,255,.13);
  --text:#f2f5ff; --muted:#a5b4dc;
  --accent:#4da3ff; --accent2:#8b5cf6; --accent3:#22d3ee;
  --violet:#6d28d9; --violet2:#7c3aed; --indigo:#4f46e5;
  --good:#3ddc97; --warn:#ffc857;
  --shadow:0 18px 50px rgba(2,6,23,.55);
  --glow:0 24px 54px -18px rgba(109,40,217,.55);
  --radius:20px;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Space Grotesk","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.7,.26,1);
}
body.light{
  --bg:#e9eefc; --bg2:#d7e2fa; --bg3:#e3dcfb;
  --card:rgba(255,255,255,.68); --card-strong:rgba(255,255,255,.88);
  --card-border:rgba(30,41,110,.14);
  --text:#0b1c3a; --muted:#4a6086;
  --shadow:0 16px 40px rgba(37,45,110,.16);
  --glow:0 22px 44px -18px rgba(109,40,217,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body);
  color:var(--text); min-height:100vh; overflow-x:hidden;
  background:linear-gradient(163deg, var(--bg) 0%, var(--bg2) 52%, var(--bg3) 115%);
  background-attachment:fixed;
  transition:color .35s ease;
}
::selection{background:rgba(124,58,237,.5); color:#fff}
:focus-visible{outline:2px solid var(--accent2); outline-offset:2px; border-radius:6px}

/* ---------- animated ambient aurora background ---------- */
body::before, body::after{
  content:""; position:fixed; z-index:0; pointer-events:none; border-radius:50%;
  filter:blur(70px); will-change:transform,opacity;
}
body::before{
  width:58vmax; height:58vmax; top:-22vmax; right:-14vmax;
  background:radial-gradient(circle at 35% 35%, rgba(124,58,237,.5), rgba(79,70,229,.22) 55%, transparent 72%);
  animation:auroraA 30s ease-in-out infinite alternate;
}
body::after{
  width:52vmax; height:52vmax; bottom:-24vmax; left:-14vmax;
  background:radial-gradient(circle at 60% 40%, rgba(34,211,238,.34), rgba(77,163,255,.18) 55%, transparent 72%);
  animation:auroraB 36s ease-in-out infinite alternate;
}
body.light::before{opacity:.45}
body.light::after{opacity:.5}
@keyframes auroraA{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-9vmax,7vmax,0) scale(1.14)}
}
@keyframes auroraB{
  from{transform:translate3d(0,0,0) scale(1.05)}
  to{transform:translate3d(8vmax,-6vmax,0) scale(.94)}
}
header.site, main, footer.site{position:relative; z-index:1}
a{color:var(--accent)}
h1,h2,h3,.logo{font-family:var(--font-display)}

/* ---------- sticky glass header ---------- */
header.site{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.8rem clamp(1rem,4vw,2.5rem);
  background:linear-gradient(120deg, rgba(6,10,32,.82), rgba(16,14,48,.78));
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 10px 34px rgba(2,6,23,.35);
  transition:background-color .35s ease, border-color .35s ease;
}
body.light header.site{
  background:linear-gradient(120deg, rgba(255,255,255,.82), rgba(233,238,252,.78));
  border-bottom-color:rgba(30,41,110,.12); box-shadow:0 10px 30px rgba(37,45,110,.12);
}
.logo{font-size:1.45rem; font-weight:700; letter-spacing:.2px; text-decoration:none; color:var(--text)}
.logo span{background:linear-gradient(92deg,var(--accent),var(--accent2),var(--accent3)); -webkit-background-clip:text; background-clip:text; color:transparent}
nav.main{display:flex; gap:.4rem; flex-wrap:wrap; margin-left:auto}
nav.main a{
  color:var(--text); text-decoration:none; padding:.48rem .85rem; border-radius:999px;
  border:1px solid transparent; font-size:.95rem; font-weight:500;
  transition:background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
nav.main a:hover{border-color:var(--card-border); background:var(--card); transform:translateY(-1px)}
nav.main a.active{
  background:linear-gradient(115deg, rgba(109,40,217,.92), rgba(79,70,229,.92)); color:#fff; border-color:transparent;
  box-shadow:0 10px 22px -8px rgba(109,40,217,.65), inset 0 1px 0 rgba(255,255,255,.25);
}
main{max-width:1240px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem) 3rem}

/* ---------- hero ---------- */
.hero{text-align:center; padding:1.6rem 0 .4rem}
.hero h1{
  font-size:clamp(2rem,4.8vw,3.2rem); margin:.2rem 0 .5rem; line-height:1.1; font-weight:700; letter-spacing:-.015em;
  background:linear-gradient(92deg,#ffffff 5%,#bcd2ff 48%,#cdbcfd 85%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
body.light .hero h1{background-image:linear-gradient(92deg,#0b1c3a 5%,#3730a3 55%,#6d28d9 90%)}
.hero p{color:var(--muted); max-width:720px; margin:0 auto; font-size:1.03rem; line-height:1.6}
article.page h1{
  background:linear-gradient(92deg,#ffffff 5%,#bcd2ff 55%,#cdbcfd 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
body.light article.page h1{background-image:linear-gradient(92deg,#0b1c3a,#3730a3 60%,#6d28d9)}

/* ---------- toolbar & search ---------- */
.toolbar{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:center;
  margin:1.3rem auto .6rem; max-width:940px;
}
.search-wrap{position:relative; flex:1 1 320px; max-width:560px}
.search-wrap input{
  width:100%; padding:.88rem 1rem .88rem 2.6rem; border-radius:14px; border:1px solid var(--card-border);
  background:var(--card); color:var(--text); font-size:1rem; outline:none;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.search-wrap input:focus{border-color:var(--accent2); box-shadow:0 0 0 4px rgba(139,92,246,.28), 0 14px 30px -14px rgba(109,40,217,.55)}
.search-wrap::before{content:"🔍"; position:absolute; left:.8rem; top:50%; transform:translateY(-50%); opacity:.75; z-index:2}
.suggest{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:50; max-height:340px; overflow:auto;
  background:rgba(9,14,38,.94); border:1px solid rgba(139,92,246,.35); border-radius:14px; box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
  transition:opacity .22s ease, transform .22s var(--ease), visibility .22s;
  scrollbar-width:thin;
}
body.light .suggest{background:rgba(255,255,255,.96)}
.suggest.open{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto}
.suggest button{
  display:flex; width:100%; gap:.5rem; align-items:baseline; text-align:left; padding:.62rem .9rem;
  background:none; border:0; border-bottom:1px solid rgba(255,255,255,.06); color:var(--text); cursor:pointer; font-size:.95rem;
  transition:background-color .15s ease;
}
body.light .suggest button{border-bottom-color:rgba(10,40,90,.07)}
.suggest button:hover,.suggest button.sel{background:rgba(139,92,246,.18)}
.suggest .c{font-weight:700}
.suggest .r{color:var(--muted); font-size:.85rem}
.suggest .z{margin-left:auto; color:var(--accent); font-size:.8rem; white-space:nowrap}

/* ---------- animated gradient buttons (.btn-grad pattern) ---------- */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.72rem 1.1rem; border-radius:13px; border:1px solid rgba(255,255,255,.16); cursor:pointer;
  background-image:linear-gradient(115deg,#5b28c7 0%,#6d28d9 34%,#7c3aed 62%,#4f46e5 100%);
  background-size:220% 220%; background-position:0% 50%;
  color:#fff; font-size:.95rem; font-weight:600; text-decoration:none;
  box-shadow:0 12px 28px -10px rgba(91,40,199,.55), inset 0 1px 0 rgba(255,255,255,.25);
  transition:background-position .45s ease, transform .25s var(--ease), box-shadow .3s ease;
}
.btn:hover{
  background-position:95% 50%; transform:translateY(-2px);
  box-shadow:0 18px 36px -12px rgba(79,70,229,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn:active{transform:translateY(0) scale(.98)}
.btn::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform:translateX(-120%); transition:transform .7s ease;
}
.btn:hover::after{transform:translateX(120%)}
.btn.ghost{
  background:var(--card); background-image:none; color:var(--text);
  border-color:var(--card-border); box-shadow:none;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.btn.ghost:hover{border-color:rgba(139,92,246,.6); box-shadow:0 12px 26px -12px rgba(109,40,217,.5); transform:translateY(-2px)}
.btn.ghost::after{display:none}
.btn.small{padding:.46rem .78rem; font-size:.86rem; border-radius:10px}
.switch{display:inline-flex; align-items:center; gap:.45rem; color:var(--muted); font-size:.9rem; cursor:pointer; user-select:none}
.switch input[type="checkbox"]{accent-color:var(--violet2); width:1.05rem; height:1.05rem; cursor:pointer}

/* ---------- live indicators & seconds progress ---------- */
.live-pill{
  display:inline-flex; align-items:center; gap:.38rem; vertical-align:middle;
  font-family:var(--font-body); font-size:.68rem; font-weight:700; letter-spacing:.14em;
  color:#6ee7b7; background:rgba(52,211,153,.13); border:1px solid rgba(52,211,153,.4);
  padding:.18rem .5rem .18rem .42rem; border-radius:999px; margin-left:.55rem;
}
body.light .live-pill{color:#047857}
.live-dot{position:relative; display:inline-block; width:8px; height:8px; border-radius:50%; background:#34d399; flex:none}
.live-dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(52,211,153,.55); animation:dotPulse 1.8s ease-out infinite;
}
@keyframes dotPulse{0%{transform:scale(.5); opacity:1}100%{transform:scale(1.3); opacity:0}}
.secbar{height:4px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; margin:.6rem 0 .15rem}
body.light .secbar{background:rgba(11,28,58,.12)}
.secbar i{
  display:block; height:100%; width:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));
  transform:scaleX(0); transform-origin:left center;
}
.secbar i.css-anim{animation:secGrow 60s linear infinite}
@keyframes secGrow{from{transform:scaleX(0)} to{transform:scaleX(1)}}

/* ---------- clock cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(276px,1fr)); gap:1.05rem; margin-top:1.15rem}
.card{
  background:linear-gradient(160deg, var(--card-strong), var(--card));
  border:1px solid var(--card-border); border-radius:var(--radius); padding:1.05rem 1.15rem 1.1rem;
  -webkit-backdrop-filter:blur(14px) saturate(145%); backdrop-filter:blur(14px) saturate(145%);
  box-shadow:var(--shadow); position:relative;
  transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease, background-color .35s ease;
}
.card::before{
  content:""; position:absolute; top:0; left:8%; right:8%; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}
.card:hover{transform:translateY(-4px); border-color:rgba(139,92,246,.55); box-shadow:var(--glow), var(--shadow)}
.card.base{
  border-color:rgba(139,92,246,.75);
  box-shadow:0 0 0 2px rgba(139,92,246,.55), 0 22px 50px -16px rgba(109,40,217,.6);
}
.card.enter{animation:cardIn .55s var(--ease) both}
.card.leaving{animation:cardOut .2s ease both}
.card.base-flash{animation:baseFlash .85s ease-out 2}
.rise{animation:cardIn .55s var(--ease) both}
article.page .card{animation:cardIn .55s var(--ease) both}
@keyframes cardIn{from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:translateY(0) scale(1)}}
@keyframes cardOut{to{opacity:0; transform:translateY(8px) scale(.96)}}
@keyframes baseFlash{
  0%{box-shadow:0 0 0 0 rgba(139,92,246,.8), var(--shadow)}
  100%{box-shadow:0 0 0 16px rgba(139,92,246,0), var(--shadow)}
}
.card .place{font-weight:700; font-size:1.04rem; padding-right:3.6rem; font-family:var(--font-display); letter-spacing:.01em}
article.page .card .place{padding-right:0}
.card .sub{color:var(--muted); font-size:.85rem; margin-top:.12rem}
.card .clock{
  font-family:var(--font-display); font-size:2.2rem; font-weight:700; letter-spacing:.5px;
  margin:.5rem 0 .12rem; font-variant-numeric:tabular-nums; line-height:1.1;
  background:linear-gradient(180deg,#ffffff 20%,#c7d6ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
body.light .card .clock{background-image:linear-gradient(180deg,#0b1c3a 20%,#31456e 100%)}
.card .date{color:var(--muted); font-size:.93rem}
.card .meta{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.65rem}
.chip{
  font-size:.78rem; padding:.24rem .58rem; border-radius:999px; border:1px solid var(--card-border);
  background:rgba(255,255,255,.05); color:var(--text); white-space:nowrap;
  transition:border-color .2s ease, background-color .2s ease, transform .2s ease;
}
body.light .chip{background:rgba(10,40,90,.05)}
.chip.ahead{border-color:rgba(61,220,151,.55)} .chip.behind{border-color:rgba(255,200,87,.6)}
.chip.day{color:var(--warn)}
body.light .chip.day{color:#b45309}
.card .actions{position:absolute; top:.6rem; right:.6rem; display:flex; gap:.25rem; z-index:2}
.icon-btn{
  width:30px; height:30px; border-radius:9px; border:1px solid transparent; background:transparent; color:var(--muted);
  cursor:pointer; font-size:.95rem; line-height:1;
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
.icon-btn:hover{background:rgba(255,255,255,.12); color:var(--text); transform:translateY(-1px)}
body.light .icon-btn:hover{background:rgba(11,28,58,.08)}
.icon-btn.fav{color:var(--warn)}
.card .foot{display:flex; gap:.4rem; margin-top:.75rem; flex-wrap:wrap}

/* ---------- panels ---------- */
.panel{
  background:linear-gradient(165deg, var(--card-strong), var(--card));
  border:1px solid var(--card-border); border-radius:var(--radius); padding:1.15rem 1.25rem;
  -webkit-backdrop-filter:blur(14px) saturate(145%); backdrop-filter:blur(14px) saturate(145%);
  box-shadow:var(--shadow); margin-top:1.25rem; position:relative;
  transition:border-color .3s ease, background-color .35s ease;
}
.panel::before{
  content:""; position:absolute; top:0; left:6%; right:6%; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
.panel:hover{border-color:rgba(139,92,246,.35)}
.panel h2{margin:.1rem 0 .7rem; font-size:1.3rem; font-weight:700; letter-spacing:-.01em}
.panel h3{margin:1rem 0 .4rem}
.muted{color:var(--muted)} .small{font-size:.88rem}

/* ---------- world map & markers ---------- */
.map-wrap{position:relative; border-radius:14px; overflow:hidden; background:linear-gradient(180deg,#0a1c3f,#071228); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
body.light .map-wrap{background:linear-gradient(180deg,#bcd6fb,#e6f0fd)}
.map-wrap img{display:block; width:100%; height:auto; opacity:.92}
body.light .map-wrap img{filter:invert(.12) hue-rotate(180deg) saturate(.7) brightness(1.05)}
.marker{
  position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:var(--accent); border:2px solid #fff; box-shadow:0 0 0 4px rgba(77,163,255,.28); cursor:pointer; z-index:2;
}
.marker::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid rgba(77,163,255,.55); animation:markerPulse 2.6s ease-out infinite; pointer-events:none;
}
.marker.night{background:#8ea2c9}
.marker.night::after{border-color:rgba(142,162,201,.5)}
@keyframes markerPulse{0%{transform:scale(.5); opacity:.95} 70%{transform:scale(1.2); opacity:0} 100%{transform:scale(1.2); opacity:0}}
.marker .tip{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%); background:#0a1836; color:#eef3ff;
  padding:.25rem .5rem; border-radius:8px; font-size:.75rem; white-space:nowrap; display:none; border:1px solid var(--card-border); z-index:5;
}
.marker:hover .tip{display:block}

/* ---------- day/night bands ---------- */
.band{display:grid; grid-template-columns:repeat(24,1fr); gap:2px; margin:.35rem 0 .85rem}
.band i{height:14px; border-radius:3px; background:linear-gradient(180deg,#2a3f74,#1b2a52); box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.band i.day{background:linear-gradient(180deg,#ffe08a,#ffb84d)}
.band i.eve{background:linear-gradient(180deg,#a78bfa,#7c3aed)}
.band-row{display:grid; grid-template-columns:150px 1fr; gap:.7rem; align-items:center}
.band-row .nm{font-size:.9rem; font-weight:600}

/* ---------- tables & forms ---------- */
table{width:100%; border-collapse:collapse; margin:.6rem 0}
th,td{padding:.58rem .6rem; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; font-size:.95rem}
th{font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:600}
tbody tr{transition:background-color .18s ease}
tbody tr:hover{background:rgba(139,92,246,.09)}
body.light th, body.light td{border-bottom-color:rgba(10,40,90,.1)}
form.conv{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.8rem; align-items:end}
label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:.3rem}
select,input[type="datetime-local"],input[type="date"]{
  width:100%; padding:.68rem .72rem; border-radius:11px; border:1px solid var(--card-border);
  background:var(--card); color:var(--text); font-size:.95rem;
  transition:border-color .25s ease, box-shadow .25s ease;
}
select:focus,input[type="datetime-local"]:focus,input[type="date"]:focus{
  border-color:var(--accent2); box-shadow:0 0 0 4px rgba(139,92,246,.25); outline:none;
}
body.light select, body.light input{background:#fff}
.result-big{font-family:var(--font-display); font-size:1.7rem; font-weight:700; margin:.3rem 0; letter-spacing:.01em}
.date-out{font-size:1.05rem; color:var(--muted)}
#result > *{animation:fadeUp .45s var(--ease) both}
#result > *:nth-child(2){animation-delay:.05s}
#result > *:nth-child(3){animation-delay:.1s}
#result > *:nth-child(4){animation-delay:.15s}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}

/* ---------- footer, chips row, toast ---------- */
footer.site{
  border-top:1px solid var(--card-border); padding:1.5rem clamp(1rem,4vw,2.5rem) 2.2rem; color:var(--muted);
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between; font-size:.9rem;
  background:linear-gradient(180deg, transparent, rgba(6,9,28,.35));
}
body.light footer.site{background:linear-gradient(180deg, transparent, rgba(255,255,255,.3))}
footer.site a{color:var(--muted); transition:color .2s ease}
footer.site a:hover{color:var(--accent)}
.chips-row{display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; margin-top:.45rem; align-items:center}
.fav-chip{cursor:pointer; font-family:var(--font-body)}
.fav-chip:hover{border-color:var(--accent2); transform:translateY(-1px); box-shadow:0 8px 18px -8px rgba(109,40,217,.5)}
.toast{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none;
  background:rgba(9,13,36,.92); color:#eef3ff; border:1px solid rgba(139,92,246,.45); padding:.65rem 1.05rem; border-radius:12px;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:opacity .25s ease, transform .25s var(--ease); z-index:99; box-shadow:var(--shadow); font-size:.92rem;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
article.page{max-width:820px; margin:0 auto}
article.page h1{font-size:2.05rem; letter-spacing:-.01em}
article.page p, article.page li{line-height:1.68; color:var(--text)}
article.page .muted{line-height:1.65}
article.page a{transition:color .2s ease}
article.page a:hover{color:var(--accent2)}
@media (max-width:640px){
  .card .clock{font-size:1.85rem}
  .band-row{grid-template-columns:110px 1fr}
  header.site{justify-content:center}
  nav.main{margin-left:0; justify-content:center}
  .hero{padding-top:1.1rem}
}

/* ---------- footer sister links ---------- */
.sister-links{flex-basis:100%; font-size:.85rem; line-height:1.9; border-top:1px dashed var(--card-border); padding-top:.7rem}
.sister-title{font-weight:600; color:var(--text)}

/* ---------- homepage boxes: comparisons, popular cities, blog ---------- */
.box-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.95rem; margin-top:.9rem}
.mini-card{
  display:block; text-decoration:none; color:var(--text);
  background:linear-gradient(160deg, var(--card-strong), var(--card));
  border:1px solid var(--card-border); border-radius:var(--radius); padding:.95rem 1.05rem;
  -webkit-backdrop-filter:blur(14px) saturate(145%); backdrop-filter:blur(14px) saturate(145%);
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
}
.mini-card:hover{transform:translateY(-3px); border-color:var(--accent2)}
.mini-card .pair{font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.01em}
.mini-card .diff{display:block; margin-top:.4rem; font-size:1.3rem; font-weight:700; font-family:var(--font-display);
  background:linear-gradient(92deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.mini-card .now{display:block; margin-top:.35rem; color:var(--muted); font-size:.85rem}
.mini-card .bigt{display:block; margin-top:.1rem; font-family:var(--font-display); font-weight:700;
  font-size:1.55rem; letter-spacing:.01em; color:var(--text); font-variant-numeric:tabular-nums}
.city-boxes{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem; margin-top:.9rem}
.city-box{
  display:block; text-decoration:none; color:var(--text); text-align:center;
  background:linear-gradient(160deg, var(--card-strong), var(--card));
  border:1px solid var(--card-border); border-radius:var(--radius); padding:.8rem .6rem;
  -webkit-backdrop-filter:blur(14px) saturate(145%); backdrop-filter:blur(14px) saturate(145%);
  transition:transform .3s var(--ease), border-color .3s ease;
}
.city-box:hover{transform:translateY(-3px); border-color:var(--accent2)}
.city-box .nm{font-family:var(--font-display); font-weight:700; font-size:.98rem}
.city-box .tm{display:block; margin-top:.25rem; color:var(--accent); font-size:1.08rem; font-weight:600; font-variant-numeric:tabular-nums}
.info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.05rem; margin-top:1.25rem}
.post-list{display:grid; gap:1rem; margin-top:1rem}
.post-card h3{margin:.1rem 0 .35rem; font-size:1.15rem}
.post-card h3 a{color:var(--text); text-decoration:none}
.post-card h3 a:hover{color:var(--accent)}
.post-card .date{color:var(--muted); font-size:.85rem}
.faq h3{margin-top:1.1rem; font-size:1.02rem}
.city-hero{
  border:1px solid var(--card-border); border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(130deg,#141b4d 0%,#3b1d6e 52%,#0e2a52 100%);
  box-shadow:var(--shadow); position:relative;
}
.city-hero .hero-text{position:relative; z-index:1; padding:2.1rem 1.5rem 1.9rem}
.city-hero .hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.city-hero .hero-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,8,26,.40), rgba(5,8,26,.84))}
.city-hero h1{color:#fff; margin:0; font-size:2.15rem; text-shadow:0 2px 14px rgba(0,0,0,.45)}
.city-hero p{color:rgba(238,243,255,.88); margin:.45rem 0 0; text-shadow:0 1px 8px rgba(0,0,0,.4)}
.city-hero p strong{color:#fff}
@media (max-width:640px){
  .city-boxes{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}
  .box-grid{grid-template-columns:1fr 1fr}
}

/* ---------- reduced motion: disable all animation ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}