.world-clock-section{padding:70px 0;background:#f4f8fb}.world-clock-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.world-clock-card{padding:20px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 24px #102a430a;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.world-clock-card:hover{transform:translateY(-4px);border-color:#a8cce5;box-shadow:0 15px 34px #102a431a}.world-clock-card.featured{border-color:#8bc5ec;background:linear-gradient(145deg,#fff,#edf8ff)}.clock-heading{display:flex;align-items:center;gap:10px;margin-bottom:18px}.clock-heading strong,.clock-heading small{display:block}.clock-heading strong{font-size:14px}.clock-heading small{color:var(--muted);font-size:11px}.clock-flag{font-size:28px;line-height:1}.analog-clock{position:relative;width:min(150px,100%);aspect-ratio:1;margin:0 auto 16px;border:7px solid #dbeaf4;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #b9d6e8,0 7px 18px #102a4314}.clock-markers{position:absolute;inset:5px;border-radius:50%;background:repeating-conic-gradient(from -1deg,#487895 0 2deg,transparent 2deg 30deg);mask:radial-gradient(circle,transparent 0 82%,#000 83%);-webkit-mask:radial-gradient(circle,transparent 0 82%,#000 83%)}.clock-hand{position:absolute;left:50%;bottom:50%;z-index:2;width:3px;height:30%;border-radius:3px;background:#102a43;transform-origin:50% 100%;transform:translate(-50%) rotate(0)}.hour-hand{height:23%;width:5px}.minute-hand{height:32%}.second-hand{height:35%;width:2px;background:#e9563f}.clock-pin{position:absolute;z-index:4;left:50%;top:50%;width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:var(--blue);transform:translate(-50%,-50%)}.clock-center-name{position:absolute;z-index:1;left:50%;top:62%;width:76%;transform:translate(-50%);overflow:hidden;color:#54758b;font-size:9px;font-weight:700;text-align:center;text-overflow:ellipsis;white-space:nowrap}.digital-time,.clock-date{display:block;text-align:center}.digital-time{color:var(--blue);font-size:20px;font-weight:800;letter-spacing:.04em}.clock-date{margin-top:2px;color:var(--muted);font-size:10px}.clock-directory{padding:55px 0 80px}.clock-filter{display:flex;align-items:end;gap:14px;margin:28px 0 14px;padding:18px;border:1px solid var(--line);border-radius:12px;background:#fff}.clock-filter label{display:grid;flex:1;gap:7px;font-size:12px;font-weight:700}.clock-filter input{height:46px;padding:0 14px;border:1px solid #cbdce8;border-radius:8px;outline:0}.clock-filter input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #0878d11c}.clock-filter button{height:46px;padding:0 20px;border:0;border-radius:8px;background:#eaf4fb;color:var(--blue);font-weight:700}.clock-result-count{margin-bottom:20px;color:var(--muted);font-size:12px}.clock-empty{padding:45px;border:1px dashed #b7ccda;border-radius:12px;text-align:center;color:var(--muted)}.clock-directory .world-clock-grid{grid-template-columns:repeat(4,1fr)}@media (max-width:1000px){.world-clock-grid,.clock-directory .world-clock-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:720px){.world-clock-grid,.clock-directory .world-clock-grid{grid-template-columns:repeat(2,1fr)}.world-clock-grid .world-clock-card:nth-child(n+5){display:none}}@media (max-width:480px){.world-clock-section{padding:50px 0}.world-clock-grid,.clock-directory .world-clock-grid{grid-template-columns:1fr}.world-clock-grid .world-clock-card:nth-child(n+4){display:none}.clock-filter{align-items:stretch;flex-direction:column}.clock-filter button{width:100%}}.page-hero{padding:28px 0 56px;background:linear-gradient(135deg,#f4f9fc,#edf7fd)}.page-hero .crumbs{margin-bottom:30px}.page-hero h1{margin:8px 0 12px;font-size:clamp(34px,5vw,52px)}.page-hero p{max-width:730px;color:var(--muted);font-size:16px}.crumbs ol{display:flex;align-items:center;gap:9px;margin:0;padding:0;list-style:none;color:var(--muted);font-size:13px}.crumbs li{display:flex;align-items:center}.crumbs li+li:before{content:"›";margin-right:9px;color:#8da7b8}.crumbs a:hover{color:var(--blue)}.clock-pagination{display:flex;justify-content:center;gap:7px;margin-top:30px}.clock-pagination button{min-width:40px;height:40px;padding:0 11px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font-weight:700}.clock-pagination button:hover,.clock-pagination button.active{border-color:var(--blue);background:var(--blue);color:#fff}@media (max-width: 720px){.clock-directory .world-clock-card:nth-child(n){display:block}.clock-directory .world-clock-card[hidden]{display:none}}