:root {
  --bg: #070b14;
  --bg-deep: #05080f;
  --surface: rgba(18, 24, 38, 0.7);
  --surface-solid: #121826;
  --surface-hover: #171f30;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f5f7fb;
  --muted: #8d98ab;
  --faint: #5f6a7c;
  --accent: #86a9ff;
  --accent-strong: #5b82ed;
  --accent-soft: rgba(134, 169, 255, 0.12);
  --success: #72d6a2;
  --warning: #e3b874;
  --shadow: rgba(0, 0, 0, 0.42);
  --clock-1: #182337;
  --clock-2: #0b111d;
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --container-max: 1280px;
  --container-wide: 1440px;
  --space-section: 108px;
  --transition-fast: 160ms;
  --transition-normal: 220ms;
  --transition-theme: 450ms;
  --layer-header: 30;
  --layer-menu: 40;
  --layer-toast: 100;
  --breakpoint-desktop: 1080px;
  --breakpoint-tablet: 820px;
  --breakpoint-mobile: 560px;
}

:root[data-theme="light"] {
  --bg: #f4f5f7; --bg-deep: #e9ebef; --surface: rgba(255,255,255,.78); --surface-solid: #fff; --surface-hover: #f4f6fa;
  --line: rgba(22,31,48,.1); --line-strong: rgba(22,31,48,.18); --text: #101522; --muted: #626d7e; --faint: #929aa8;
  --accent: #3f6fd5; --accent-strong: #2f5fc5; --accent-soft: rgba(63,111,213,.1); --shadow: rgba(24,31,46,.12); --clock-1:#f9fafc; --clock-2:#dfe4ec;
}

:root[data-theme="blue"] {
  --bg:#06111e; --bg-deep:#030a12; --surface:rgba(11,31,51,.72); --surface-solid:#0d2238; --surface-hover:#102b47;
  --line:rgba(105,181,255,.12); --line-strong:rgba(105,181,255,.22); --text:#eef7ff; --muted:#7f9bb3; --faint:#53718a;
  --accent:#57b6ff; --accent-strong:#318fd5; --accent-soft:rgba(87,182,255,.11); --clock-1:#0f314d; --clock-2:#071522;
}

:root[data-theme="gold"] {
  --bg:#0d0b08; --bg-deep:#070604; --surface:rgba(27,23,17,.75); --surface-solid:#1b1711; --surface-hover:#241e15;
  --line:rgba(227,184,116,.12); --line-strong:rgba(227,184,116,.24); --text:#f7f2e9; --muted:#a79b89; --faint:#756b5d;
  --accent:#e3b874; --accent-strong:#bb8b43; --accent-soft:rgba(227,184,116,.11); --clock-1:#2a2116; --clock-2:#110e0a;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  background: radial-gradient(circle at 72% 12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 28%), linear-gradient(145deg, var(--bg) 0%, var(--bg-deep) 100%);
  color: var(--text);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
  margin: 0;
  min-height: 100vh;
  transition: background .45s ease, color .3s ease;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main { min-height: 100vh; overflow: hidden; position: relative; }

.site-header {
  align-items: center; backdrop-filter: blur(18px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line);
  display: flex; height: 78px; justify-content: space-between; margin: 0 auto; max-width: 1440px; padding: 0 38px; position: sticky; top: 0; z-index: 30;
}
.logo { align-items: center; display: flex; font-size: 14px; font-weight: 690; gap: 10px; letter-spacing: -.02em; white-space: nowrap; }
.logo-orbit { border: 1px solid color-mix(in srgb,var(--accent) 55%,transparent); border-radius: 50%; display: grid; height: 28px; place-items: center; position: relative; width: 28px; }
.logo-orbit:before { border: 1px solid color-mix(in srgb,var(--accent) 20%,transparent); border-radius: 50%; content: ""; inset: 5px; position: absolute; }
.logo-orbit i { background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px var(--accent); height: 4px; width: 4px; }
.site-header nav { display: flex; gap: 28px; }
.site-header nav a { color: var(--muted); font-size: 12px; transition: color .2s ease; }
.site-header nav a:hover { color: var(--text); }
.header-tools { align-items: center; display: flex; gap: 9px; position: relative; }
.header-action, .icon-button, .secondary-button { background: color-mix(in srgb,var(--surface-solid) 62%,transparent); border: 1px solid var(--line); border-radius: 11px; cursor: pointer; font-size: 12px; padding: 10px 14px; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.header-action:hover, .icon-button:hover, .secondary-button:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.icon-button { height: 38px; padding: 0; width: 38px; }
.theme-icon span { border: 1px solid var(--muted); border-radius: 50%; display: block; height: 15px; margin: auto; overflow: hidden; position: relative; width: 15px; }
.theme-icon span:after { background: var(--muted); content: ""; height: 100%; position: absolute; right: 0; top: 0; width: 50%; }
.theme-menu { background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 22px 60px var(--shadow); display: grid; gap: 3px; padding: 7px; position: absolute; right: 0; top: 48px; width: 190px; z-index: 40; }
.theme-menu button { align-items: center; background: transparent; border: 0; border-radius: 9px; color: var(--muted); cursor: pointer; display: flex; font-size: 12px; gap: 10px; padding: 10px; text-align: left; }
.theme-menu button:hover, .theme-menu button.active { background: var(--accent-soft); color: var(--text); }
.theme-menu i { background: #080c16; border: 1px solid var(--line-strong); border-radius: 50%; height: 12px; width: 12px; }
.theme-menu i[data-swatch="light"] { background: #f2f3f6; }.theme-menu i[data-swatch="blue"] { background: #0b2a45; }.theme-menu i[data-swatch="gold"] { background: #a77c3e; }

.search { max-width: 290px; position: relative; width: 100%; }
.search input { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--text); font-size: 12px; height: 44px; padding: 0 16px 0 40px; width: 100%; }
.search input::placeholder { color: var(--faint); }
.search-glyph { border: 1.5px solid var(--muted); border-radius: 50%; height: 12px; left: 16px; position: absolute; top: 15px; width: 12px; z-index: 2; }
.search-glyph:after { background: var(--muted); content: ""; height: 1.5px; position: absolute; right: -5px; top: 10px; transform: rotate(45deg); width: 6px; }
.search-results { background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 22px 70px var(--shadow); left: 0; overflow: hidden; padding: 6px; position: absolute; right: 0; top: 50px; z-index: 35; }
.search-results button { align-items: center; background: transparent; border: 0; border-radius: 9px; cursor: pointer; display: flex; justify-content: space-between; padding: 10px; text-align: left; width: 100%; }
.search-results button:hover { background: var(--accent-soft); }.search-results button span:first-child { display: grid; gap: 3px; }.search-results strong { font-size: 12px; font-weight: 560; }.search-results small, .search-results button>span:last-child { color: var(--muted); font-size: 10px; }.search-results p { color: var(--muted); font-size: 12px; margin: 16px; }
.search-compact { max-width: 230px; }.search-compact input { background: transparent; height: 38px; }

.hero { display: grid; grid-template-columns: 1.08fr .92fr; margin: 0 auto; max-width: 1440px; min-height: 660px; padding: 78px 64px 68px; position: relative; }
.ambient { border-radius: 50%; filter: blur(85px); opacity: .14; pointer-events: none; position: absolute; }
.ambient-one { background: var(--accent); height: 270px; right: 7%; top: 10%; width: 270px; }.ambient-two { background: #29a892; bottom: 4%; height: 190px; left: -8%; opacity: .06; width: 190px; }
.hero-grid-line { background: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 58px 58px; inset: 0; mask-image: linear-gradient(to right,transparent 5%,#000 45%,transparent 85%); opacity: .16; pointer-events: none; position: absolute; }
.hero-copy { align-self: center; position: relative; z-index: 2; }.status { align-items: center; color: var(--muted); display: flex; font-size: 10px; gap: 8px; letter-spacing: .02em; margin-bottom: 42px; }.status span { background: var(--success); border-radius: 50%; box-shadow: 0 0 12px color-mix(in srgb,var(--success) 75%,transparent); height: 6px; width: 6px; }.status-wait span { background: var(--warning); animation: pulse 1.6s ease infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.eyebrow { color: var(--accent); font-size: 9px; font-weight: 720; letter-spacing: .22em; margin: 0 0 16px; }
h1, h2, h3, p { text-wrap: pretty; }
h1 { font-size: clamp(48px,4.8vw,70px); font-weight: 440; letter-spacing: -.055em; line-height: .99; margin: 0; }
.lede { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 22px 0 40px; max-width: 500px; }
.digital-clock { font-family: var(--font-geist-mono),ui-monospace,monospace; font-size: clamp(54px,6.6vw,96px); font-variant-numeric: tabular-nums; font-weight: 430; letter-spacing: -.075em; line-height: .9; text-shadow: 0 0 42px var(--accent-soft); white-space: nowrap; }
.date-line { align-items: center; color: color-mix(in srgb,var(--text) 75%,transparent); display: flex; font-size: 12px; gap: 18px; margin-top: 20px; text-transform: capitalize; }.timezone { border-left: 1px solid var(--line); color: var(--muted); padding-left: 18px; }
.hero-controls { align-items: center; display: flex; gap: 20px; margin-top: 34px; }.hero-actions { display: flex; gap: 10px; }
.format-toggle { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; display: flex; padding: 3px; }.format-toggle button { background: transparent; border: 0; border-radius: 7px; color: var(--faint); cursor: pointer; font-size: 10px; height: 31px; width: 34px; }.format-toggle button.active { background: var(--surface-hover); color: var(--text); }
.primary-button { background: linear-gradient(135deg,color-mix(in srgb,var(--accent) 90%,white),var(--accent-strong)); border: 0; border-radius: 11px; color: #08101f; cursor: pointer; font-size: 12px; font-weight: 700; padding: 13px 17px; transition: filter .2s ease, transform .2s ease; }.primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }.primary-button span { margin-left: 10px; }.secondary-button { padding: 12px 17px; }

.hero-clock { align-items: center; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.clock-wrap { background: linear-gradient(145deg,var(--line-strong),transparent); border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: 0 38px 100px var(--shadow),inset 0 1px 1px color-mix(in srgb,var(--text) 16%,transparent),0 0 0 11px color-mix(in srgb,var(--text) 1.5%,transparent); height: min(33vw,420px); min-height: 320px; min-width: 320px; padding: 17px; position: relative; transition: .35s ease; width: min(33vw,420px); }
.clock-face { background: radial-gradient(circle at 42% 34%,var(--clock-1) 0,var(--clock-2) 72%); border: 1px solid var(--line); border-radius: 50%; height: 100%; overflow: hidden; position: relative; width: 100%; }.clock-face:before { background: linear-gradient(120deg,color-mix(in srgb,var(--text) 8%,transparent),transparent 28%); border-radius: 50%; content: ""; inset: 0; position: absolute; }
.tick { height: 50%; left: calc(50% - .5px); position: absolute; top: 0; transform-origin: 50% 100%; width: 1px; }.tick:after { background: color-mix(in srgb,var(--text) 18%,transparent); content: ""; height: 4px; left: 0; position: absolute; top: 12px; width: 1px; }.tick-hour:after { background: color-mix(in srgb,var(--text) 75%,transparent); height: 13px; top: 10px; width: 2px; }
.hand { border-radius: 10px; bottom: 50%; left: calc(50% - 2px); position: absolute; transform-origin: 50% 100%; transition: transform .05s linear; width: 4px; }.hour { background: linear-gradient(to top,color-mix(in srgb,var(--text) 55%,var(--muted)),var(--text)); height: 25%; }.minute { background: linear-gradient(to top,color-mix(in srgb,var(--text) 52%,var(--muted)),var(--text)); height: 35%; width: 3px; }.second { background: var(--accent); box-shadow: 0 0 9px var(--accent-soft); height: 39%; left: calc(50% - .5px); width: 1px; }.pin { background: var(--text); border: 4px solid var(--accent); border-radius: 50%; box-shadow: 0 0 14px var(--accent-soft); height: 14px; left: calc(50% - 7px); position: absolute; top: calc(50% - 7px); width: 14px; }
.brand-mark { color: color-mix(in srgb,var(--text) 55%,transparent); font-size: 9px; font-weight: 700; left: 50%; letter-spacing: .14em; position: absolute; text-transform: uppercase; top: 29%; transform: translateX(-50%); }.clock-caption { bottom: 25%; color: color-mix(in srgb,var(--text) 25%,transparent); font-size: 6px; left: 50%; letter-spacing: .2em; position: absolute; transform: translateX(-50%); white-space: nowrap; }
.clock-number { color: color-mix(in srgb,var(--text) 48%,transparent); display: none; font-family: var(--font-geist-mono),ui-monospace,monospace; font-size: clamp(10px,1.05vw,15px); font-variant-numeric: tabular-nums; font-weight: 430; line-height: 1; position: absolute; transform: translate(-50%,-50%); z-index: 2; }.clock-number-major { color: color-mix(in srgb,var(--text) 82%,transparent); font-size: clamp(12px,1.25vw,18px); font-weight: 560; }.clock-wrap[data-dial="numbers"] .clock-number { display: block; }.clock-wrap[data-dial="numbers"] .tick:not(.tick-hour):after { opacity: .35; }.clock-wrap[data-dial="numbers"] .brand-mark { top: 33%; }.clock-wrap[data-dial="numbers"] .clock-caption { bottom: 29%; }
.clock-wrap[data-dial="minimal"] { background: transparent; box-shadow: 0 32px 80px var(--shadow); padding: 8px; }.clock-wrap[data-dial="minimal"] .clock-face { background: color-mix(in srgb,var(--surface-solid) 82%,transparent); }.clock-wrap[data-dial="minimal"] .tick:not(.tick-hour):after { display: none; }.clock-wrap[data-dial="glass"] .clock-face { backdrop-filter: blur(22px); background: radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--accent) 17%,transparent),color-mix(in srgb,var(--surface-solid) 55%,transparent) 64%); }.clock-wrap[data-dial="glass"] { box-shadow: 0 40px 100px var(--shadow),inset 0 0 50px var(--accent-soft),0 0 0 11px color-mix(in srgb,var(--accent) 3%,transparent); }
.dial-selector { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 26px; }.dial-selector:before { background: var(--line); content: ""; height: 1px; margin-right: 9px; width: 30px; }.dial-selector>span { color: var(--faint); font-size: 8px; letter-spacing: .13em; margin-right: 5px; text-transform: uppercase; }.dial-selector button { background: transparent; border: 0; border-radius: 6px; color: var(--faint); cursor: pointer; font-size: 9px; padding: 7px 8px; }.dial-selector button.active { background: var(--surface); color: var(--text); }

.quick-stats { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4,1fr); margin: 0 auto; max-width: 1440px; }.quick-stats>div { padding: 23px 34px; }.quick-stats>div+div { border-left: 1px solid var(--line); }.quick-stats span,.quick-stats small { color: var(--muted); display: block; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }.quick-stats strong { display: block; font-size: 17px; font-weight: 530; margin: 9px 0 7px; }.quick-stats .success { color: var(--success); }.quick-stats .pending { color: var(--warning); }

.section { margin: 0 auto; max-width: 1280px; padding: 108px 42px 0; }.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 38px; }.section-heading h2,.info-card h2,.seo-copy h2 { font-size: clamp(30px,3.3vw,46px); font-weight: 450; letter-spacing: -.04em; line-height: 1.05; margin: 0; }.section-heading>p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; max-width: 330px; }
.world-grid { display: grid; gap: 12px; grid-template-columns: repeat(4,1fr); }.world-card { background: linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-solid) 80%,transparent)); border: 1px solid var(--line); border-radius: 19px; min-height: 256px; padding: 20px; transition: border-color .25s ease,transform .25s ease,background .25s ease; }.world-card:hover { background: var(--surface-hover); border-color: var(--line-strong); transform: translateY(-3px); }.world-card-top { align-items: center; color: var(--faint); display: flex; font-size: 8px; justify-content: space-between; letter-spacing: .12em; }.day-state { align-items: center; display: flex; gap: 6px; }.day-state i { background: var(--warning); border-radius: 50%; box-shadow: 0 0 8px color-mix(in srgb,var(--warning) 50%,transparent); height: 5px; width: 5px; }.day-state.night i { background: var(--accent); box-shadow: 0 0 8px var(--accent-soft); }.world-city { align-items: center; display: flex; justify-content: space-between; margin-top: 24px; }.world-city h3 { font-size: 17px; font-weight: 540; letter-spacing: -.02em; margin: 0 0 5px; }.world-city p,.world-diff { color: var(--muted); font-size: 10px; margin: 0; }.clock-compact { box-shadow: none; height: 48px; min-height: 48px; min-width: 48px; padding: 2px; width: 48px; }.clock-compact .tick:after { height: 3px; top: 3px; }.clock-compact .hand { left: calc(50% - .75px); width: 1.5px; }.clock-compact .second { left: calc(50% - .25px); width: .5px; }.clock-compact .pin { border-width: 1px; height: 4px; left: calc(50% - 2px); top: calc(50% - 2px); width: 4px; }.world-time { font-family: var(--font-geist-mono),monospace; font-size: 35px; font-variant-numeric: tabular-nums; letter-spacing: -.06em; margin-top: 28px; }.world-diff { border-top: 1px solid var(--line); margin-top: 15px; padding-top: 12px; }.text-link { align-items: center; color: var(--muted); display: flex; font-size: 11px; gap: 10px; justify-content: center; margin: 28px auto 0; width: max-content; }.text-link span { color: var(--accent); }

.compare-panel { background: linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-solid) 80%,transparent)); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }.compare-cities { align-items: stretch; display: grid; grid-template-columns: 1fr 120px 1fr; }.compare-cities label { display: grid; padding: 34px 38px; }.compare-cities label>span { color: var(--muted); font-size: 9px; letter-spacing: .12em; margin-bottom: 14px; text-transform: uppercase; }.compare-cities select { appearance: none; background: var(--surface-hover); border: 1px solid var(--line); border-radius: 10px; color: var(--text); cursor: pointer; font-size: 13px; max-width: 260px; padding: 12px; }.compare-cities strong { font-family: var(--font-geist-mono),monospace; font-size: 48px; font-weight: 430; letter-spacing: -.06em; margin: 30px 0 9px; }.compare-cities small { color: var(--muted); font-size: 10px; }.difference-badge { align-items: center; border-left: 1px solid var(--line); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }.difference-badge span { color: var(--accent); font-family: var(--font-geist-mono),monospace; font-size: 30px; }.difference-badge small { color: var(--muted); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.timeline-wrap { border-top: 1px solid var(--line); padding: 28px 38px 34px; }.timeline-title,.timeline-labels { color: var(--muted); display: flex; font-size: 9px; justify-content: space-between; letter-spacing: .08em; text-transform: uppercase; }.timeline-title span:last-child { align-items: center; display: flex; gap: 7px; }.timeline-title i { background: var(--success); border-radius: 50%; height: 5px; width: 5px; }.timeline { display: grid; grid-template-columns: repeat(12,1fr); margin: 18px 0 9px; }.timeline>div { background: color-mix(in srgb,var(--surface-solid) 76%,transparent); border-left: 1px solid var(--line); display: grid; height: 52px; place-content: center; text-align: center; }.timeline>div:first-child { border-radius: 8px 0 0 8px; }.timeline>div:last-child { border-radius: 0 8px 8px 0; }.timeline>div.good { background: color-mix(in srgb,var(--success) 13%,var(--surface-solid)); }.timeline span { font-size: 9px; }.timeline small { color: var(--accent); font-size: 8px; margin-top: 5px; }.timeline-labels { color: var(--faint); font-size: 7px; }

.sun-grid { display: grid; gap: 12px; grid-template-columns: repeat(4,1fr); }.sun-grid>div { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; display: grid; min-height: 186px; padding: 25px; }.sun-grid i { border: 1px solid var(--warning); border-radius: 50%; box-shadow: 0 0 20px color-mix(in srgb,var(--warning) 12%,transparent); height: 27px; position: relative; width: 27px; }.sun-grid i:after { background: var(--warning); content: ""; height: 1px; left: -6px; position: absolute; top: 20px; width: 38px; }.sun-grid .sunset-symbol { transform: rotate(180deg); }.sun-grid .noon-symbol:after { display: none; }.sun-grid .day-symbol { border-color: var(--accent); border-radius: 6px; }.sun-grid .day-symbol:before,.sun-grid .day-symbol:after { background: var(--accent); content: ""; height: 1px; left: 5px; position: absolute; top: 12px; width: 15px; }.sun-grid .day-symbol:after { transform: rotate(90deg); }.sun-grid span { align-self: end; color: var(--muted); font-size: 9px; letter-spacing: .1em; margin-top: 30px; text-transform: uppercase; }.sun-grid strong { font-family: var(--font-geist-mono),monospace; font-size: 27px; font-weight: 430; margin-top: 8px; }

.info-section { display: grid; gap: 14px; grid-template-columns: 1.1fr .9fr; }.info-card,.seo-copy { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 40px; }.info-card { background: radial-gradient(circle at 85% 20%,var(--accent-soft),transparent 35%),var(--surface); }.info-card>p:not(.eyebrow),.seo-copy p { color: var(--muted); font-size: 13px; line-height: 1.75; }.info-card>p:not(.eyebrow) { max-width: 550px; }.accuracy-row { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: 9px; justify-content: space-between; margin-top: 32px; padding-top: 20px; text-transform: uppercase; }.accuracy-row span:first-child { align-items: center; display: flex; gap: 8px; }.accuracy-row i { background: var(--success); border-radius: 50%; height: 5px; width: 5px; }.seo-copy h2 { font-size: 27px; }.seo-copy p:last-child { margin-bottom: 0; }
.faq-section { padding-bottom: 108px; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { align-items: center; cursor: pointer; display: flex; font-size: 15px; justify-content: space-between; list-style: none; padding: 22px 2px; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--accent); font-size: 20px; font-weight: 300; transition: transform .25s ease; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list details p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: -2px 0 24px; max-width: 760px; }

footer { border-top: 1px solid var(--line); margin: 0 auto; max-width: 1440px; padding: 58px 42px 30px; }.footer-top { align-items: center; display: flex; justify-content: space-between; }.footer-top p { color: var(--muted); font-size: 11px; }.footer-links { display: grid; gap: 50px; grid-template-columns: repeat(3,1fr); margin: 55px 0; max-width: 760px; }.footer-links div { display: grid; gap: 12px; }.footer-links strong { font-size: 10px; letter-spacing: .1em; margin-bottom: 5px; text-transform: uppercase; }.footer-links a { color: var(--muted); font-size: 11px; }.footer-links a:hover { color: var(--text); }.footer-bottom { border-top: 1px solid var(--line); color: var(--faint); display: flex; font-size: 9px; justify-content: space-between; padding-top: 24px; text-transform: uppercase; }
.toast { background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 20px 60px var(--shadow); font-size: 12px; left: 50%; padding: 13px 18px; position: fixed; top: 90px; transform: translateX(-50%); z-index: 100; }

.theme-menu { opacity: 0; pointer-events: none; transform: translateY(-7px) scale(.98); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; visibility: hidden; }
.theme-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); visibility: visible; }
.breadcrumbs { align-items: center; color: var(--faint); display: flex; flex-wrap: wrap; font-size: 10px; gap: 9px; margin: 0 auto; max-width: 1280px; padding: 22px 42px 0; }
.breadcrumbs a { color: var(--muted); }.breadcrumbs a:hover { color: var(--text); }.breadcrumbs i { color: var(--line-strong); font-style: normal; }
.comparison-links { display: flex; flex-wrap: wrap; gap: 8px; margin: -18px 0 20px; }.comparison-links a { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; padding: 8px 12px; }.comparison-links a:hover { border-color: var(--line-strong); color: var(--text); }
.seo-zone { color: var(--accent); font-family: var(--font-geist-mono),monospace; font-size: 11px; }
.accuracy-details { display: grid; gap: 1px; grid-template-columns: repeat(2,1fr); margin-top: 28px; overflow: hidden; }.accuracy-details>span { background: color-mix(in srgb,var(--surface-solid) 72%,transparent); color: var(--faint); display: grid; font-size: 8px; gap: 7px; letter-spacing: .08em; padding: 14px; text-transform: uppercase; }.accuracy-details strong { color: var(--text); font-size: 10px; font-weight: 520; letter-spacing: 0; text-transform: none; }
.seo-copy h2 { margin: 30px 0 12px; }.seo-copy h2:first-child { margin-top: 0; }.seo-copy a,.utc-article a,.footer-legal a { color: var(--accent); }.seo-copy a:hover,.utc-article a:hover,.footer-legal a:hover { text-decoration: underline; }
.footer-legal { border-top: 1px solid var(--line); color: var(--faint); font-size: 10px; line-height: 1.7; padding: 24px 0; }
.fullscreen-meta { display: none; }
.utc-article { padding-bottom: 0; }.utc-article>h2 { font-size: clamp(28px,3vw,42px); font-weight: 450; letter-spacing: -.035em; margin: 54px 0 16px; }.utc-article>p { color: var(--muted); font-size: 14px; line-height: 1.8; max-width: 860px; }.utc-examples { display: grid; gap: 10px; grid-template-columns: repeat(3,1fr); max-width: 860px; }.utc-examples a { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: flex; justify-content: space-between; padding: 18px; }.utc-examples strong { color: var(--text); font-family: var(--font-geist-mono),monospace; font-weight: 500; }
.utc-converter { background: linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-solid) 80%,transparent)); border: 1px solid var(--line); border-radius: 22px; display: grid; gap: 1px; grid-template-columns: 1fr 1fr 1.2fr; margin-top: 25px; max-width: 960px; overflow: hidden; }.utc-converter label,.utc-converter>div { background: color-mix(in srgb,var(--surface-solid) 45%,transparent); color: var(--muted); display: grid; font-size: 9px; gap: 11px; letter-spacing: .09em; padding: 25px; text-transform: uppercase; }.utc-converter input,.utc-converter select { background: var(--surface-hover); border: 1px solid var(--line); border-radius: 9px; color: var(--text); padding: 12px; }.utc-converter strong { color: var(--text); font-family: var(--font-geist-mono),monospace; font-size: 34px; font-weight: 430; letter-spacing: -.04em; }.utc-converter small { color: var(--muted); font-size: 9px; letter-spacing: 0; text-transform: none; }
.contacts-hero { align-items: center; display: grid; gap: 70px; grid-template-columns: 1fr 1fr; margin: 0 auto; max-width: 1280px; min-height: 470px; padding: 76px 42px 30px; }.contacts-hero h1 { font-size: clamp(64px,8vw,118px); }.contacts-hero>div>p:last-child { color: var(--muted); font-size: 16px; line-height: 1.7; }.contact-orbit { border: 1px solid var(--line-strong); border-radius: 50%; height: 280px; justify-self: center; position: relative; width: 280px; }.contact-orbit:before,.contact-orbit:after { border: 1px solid var(--line); border-radius: 50%; content: ""; inset: 34px; position: absolute; }.contact-orbit:after { inset: 86px; }.contact-orbit span { background: var(--accent); border-radius: 50%; box-shadow: 0 0 35px var(--accent); height: 14px; left: calc(50% - 7px); position: absolute; top: calc(50% - 7px); width: 14px; }.contact-orbit i { background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px var(--accent); height: 7px; left: 49px; position: absolute; top: 51px; width: 7px; }.contact-orbit i:nth-child(2) { left: auto; right: 15px; top: 130px; }.contact-orbit i:nth-child(3) { bottom: 17px; left: 116px; top: auto; }
.contacts-section { padding-top: 35px; padding-bottom: 108px; }.contact-grid { display: grid; gap: 12px; grid-template-columns: repeat(2,1fr); }.contact-card { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; display: flex; gap: 20px; min-height: 155px; padding: 25px; transition: border-color .2s ease,transform .2s ease; }.contact-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }.contact-card>b { color: var(--accent); font-size: 20px; font-weight: 400; margin-left: auto; }.contact-monogram { align-items: center; background: var(--accent-soft); border: 1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius: 14px; color: var(--accent); display: flex; flex: 0 0 52px; font-size: 13px; font-weight: 700; height: 52px; justify-content: center; }.contact-card small { color: var(--faint); font-size: 8px; letter-spacing: .12em; }.contact-card h2 { font-size: 23px; font-weight: 500; letter-spacing: -.03em; margin: 7px 0; }.contact-card p,.contact-card div>a { color: var(--muted); font-size: 11px; margin: 0; }.copy-email { background: transparent; border: 0; color: var(--accent); cursor: pointer; font-size: 10px; margin-left: 9px; padding: 0; }
.hero:fullscreen { background: var(--bg); grid-template-columns: 1fr .7fr; max-width: none; padding: 7vh 8vw; }.hero:fullscreen .hero-grid-line { display: none; }.hero:fullscreen h1,.hero:fullscreen .lede,.hero:fullscreen .hero-controls { display: none; }.hero:fullscreen .fullscreen-meta { display: grid; gap: 9px; margin-bottom: 6vh; }.hero:fullscreen .fullscreen-meta strong { font-size: clamp(28px,4vw,58px); font-weight: 450; letter-spacing: -.04em; }.hero:fullscreen .fullscreen-meta span { color: var(--muted); font-size: 14px; text-transform: capitalize; }.hero:fullscreen .digital-clock { font-size: clamp(90px,10vw,180px); }.hero:fullscreen .clock-wrap { height: min(38vw,60vh); width: min(38vw,60vh); }.hero:fullscreen .status { margin-bottom: 5vh; }

@media (max-width: 1080px) {
  .search-compact { display: none; }.site-header { padding: 0 26px; }.hero { padding-left: 38px; padding-right: 38px; }.clock-wrap { min-height: 290px; min-width: 290px; }.world-grid { grid-template-columns: repeat(2,1fr); }.world-card { min-height: 230px; }.info-section { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .site-header nav { display: none; }.hero { grid-template-columns: 1fr; padding: 54px 26px 64px; text-align: center; }.status,.date-line,.hero-controls { justify-content: center; }.lede { margin-left: auto; margin-right: auto; }.hero-clock { margin-top: 62px; }.clock-wrap { height: min(76vw,390px); width: min(76vw,390px); }.quick-stats { grid-template-columns: repeat(2,1fr); }.quick-stats>div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }.quick-stats>div:nth-child(4) { border-top: 1px solid var(--line); }.section { padding-left: 24px; padding-right: 24px; padding-top: 84px; }.section-heading { align-items: flex-start; flex-direction: column; gap: 20px; }.section-heading .search { max-width: none; }.compare-cities { grid-template-columns: 1fr; }.difference-badge { border: 0; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); flex-direction: row; gap: 7px; padding: 18px; }.compare-cities label { padding: 28px; }.compare-cities select { max-width: none; }.timeline-wrap { padding: 24px; }.sun-grid { grid-template-columns: repeat(2,1fr); }.utc-examples,.utc-converter { grid-template-columns: 1fr; }.contacts-hero,.russia-hero { grid-template-columns: 1fr; min-height: 0; padding: 68px 24px 28px; }.contact-orbit { height: 220px; width: 220px; }.contact-grid { grid-template-columns: 1fr; }.russia-timeline { grid-template-columns: repeat(2,1fr); }.hero:fullscreen { grid-template-columns: 1fr; overflow: auto; text-align: center; }.hero:fullscreen .hero-clock { margin-top: 3vh; }.hero:fullscreen .status { justify-content: center; margin-bottom: 4vh; }
}
@media (max-width: 560px) {
  .site-header { height: 68px; padding: 0 17px; }.header-action { font-size: 10px; padding: 9px 11px; }.logo { font-size: 12px; }.hero { min-height: auto; padding: 42px 20px 56px; }.status { font-size: 9px; margin-bottom: 32px; }.eyebrow { font-size: 8px; }h1 { font-size: 46px; }.lede { font-size: 13px; margin-bottom: 34px; }.digital-clock { font-size: clamp(42px,14vw,60px); letter-spacing: -.085em; }.date-line { align-items: center; flex-direction: column; gap: 7px; }.timezone { border-left: 0; padding-left: 0; }.hero-controls { flex-direction: column; }.hero-actions { flex-direction: column; width: 100%; }.primary-button,.secondary-button { min-height: 46px; width: 100%; }.clock-wrap { height: min(82vw,340px); min-height: 270px; min-width: 270px; width: min(82vw,340px); }.clock-number { font-size: 10px; }.clock-number-major { font-size: 13px; }.dial-selector:before,.dial-selector>span { display: none; }.quick-stats { grid-template-columns: 1fr; }.quick-stats>div { padding: 21px 24px; }.quick-stats>div+div,.quick-stats>div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }.section { padding-left: 18px; padding-right: 18px; padding-top: 72px; }.section-heading h2,.info-card h2,.seo-copy h2 { font-size: 33px; }.world-grid,.russia-timeline { grid-template-columns: 1fr; }.world-card { min-height: 220px; }.compare-cities strong { font-size: 44px; }.timeline { overflow: hidden; }.timeline>div { min-width: 28px; }.timeline-wrap { overflow-x: auto; }.timeline-title,.timeline-labels,.timeline { min-width: 470px; }.sun-grid { grid-template-columns: 1fr; }.sun-grid>div { min-height: 150px; }.info-card,.seo-copy { padding: 28px 24px; }.accuracy-details { grid-template-columns: 1fr; }.accuracy-row { align-items: flex-start; flex-direction: column; gap: 10px; }.faq-section { padding-bottom: 72px; }.faq-list summary { font-size: 13px; gap: 18px; }.footer-top,.footer-bottom { align-items: flex-start; flex-direction: column; gap: 15px; }.footer-links { gap: 30px; grid-template-columns: 1fr 1fr; }.footer-links div:last-child { grid-column: 1 / -1; }.breadcrumbs { padding-left: 18px; padding-right: 18px; }.theme-menu { max-width: calc(100vw - 28px); right: -2px; }.contacts-hero h1,.russia-hero h1 { font-size: 52px; }.contact-card { padding: 20px; }.russia-now { min-height: 220px; padding: 25px; }.russia-now strong { font-size: 14vw; }.hero:fullscreen { padding: 6vh 18px; }.hero:fullscreen .digital-clock { font-size: 17vw; }.hero:fullscreen .clock-wrap { height: min(70vw,34vh); min-height: 220px; min-width: 220px; width: min(70vw,34vh); }
}
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }