/* Hero: Clear Clock's own screens behind the copy, live: world clocks on the real time in each city, a timer running
   down, a stopwatch counting laps. Blended into the page; parallax in hero.js. */
.hero { isolation: isolate; min-height: 100svh; display: grid; align-items: center; background: var(--bg); }
.hero > .hero-copy { z-index: 2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 56% 46% at 50% 54%, var(--bg) 50%, transparent 100%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; z-index: 1; pointer-events: none; background: linear-gradient(transparent, var(--bg)); }
.hero > .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; transform: translate3d(0, var(--py, 0), 0); will-change: transform; }
.cwall { height: 100%; max-width: 1440px; margin: 0 auto; padding: 80px 24px 24px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; gap: 22px; align-content: center; opacity: .75; }
.ck { background: var(--surface, #f5f5f7); border: 1px solid var(--line, #e5e5ea); border-radius: 20px; padding: 18px 22px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; overflow: hidden; }
.ck-txt { display: grid; gap: 4px; min-width: 0; }
.ck-k { font-size: 13px; font-weight: 600; color: var(--sub); }
.ck-big { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.ck-sub { font-size: 14px; color: var(--sub); font-variant-numeric: tabular-nums; }
.ck svg { width: 132px; height: 132px; display: block; }
.ck .face { fill: var(--bg); stroke: var(--line, #e5e5ea); stroke-width: 2; }
.ck .tick { stroke: var(--sub); stroke-width: 3; stroke-linecap: round; }
.ck .h, .ck .m { stroke: var(--text); stroke-linecap: round; }
.ck .h { stroke-width: 6; } .ck .m { stroke-width: 4; }
.ck .s { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.ck .hub { fill: var(--accent); }
.ck .ring-bg { fill: none; stroke: var(--line, #e5e5ea); stroke-width: 10; }
.ck .ring { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 66px 66px; }
.ck.night .face { fill: var(--text); } .ck.night .h, .ck.night .m { stroke: var(--bg); } .ck.night .tick { stroke: var(--bg); opacity: .6; }
@media (max-width: 900px) { .cwall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cwall { grid-template-columns: 1fr; padding: 72px 16px 16px; grid-auto-rows: 170px; align-content: start; opacity: .55; } .ck svg { width: 112px; height: 112px; } .hero::before { background: radial-gradient(ellipse 120% 46% at 50% 54%, var(--bg) 62%, transparent 100%); } }
@media (max-width: 600px) { .nav { grid-template-columns: auto 1fr; } .nav-brand { grid-column: 1; } .nav-end { grid-column: 2; justify-self: end; } }