.hourly-page{background:linear-gradient(#0f172a 0%,#1e293b 50%,#0f172a 100%);min-height:100vh;padding:30px 0 60px;position:relative;overflow:hidden}.hourly-bg{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.gradient-orb{filter:blur(80px);opacity:.4;border-radius:50%;position:absolute}.orb-1{background:linear-gradient(135deg,#3b82f6,#8b5cf6);width:400px;height:400px;animation:20s ease-in-out infinite float-orb;top:-100px;right:-100px}.orb-2{background:linear-gradient(135deg,#06b6d4,#3b82f6);width:300px;height:300px;animation:25s ease-in-out infinite reverse float-orb;bottom:20%;left:-100px}.orb-3{background:linear-gradient(135deg,#f59e0b,#ef4444);width:250px;height:250px;animation:18s ease-in-out infinite float-orb;top:50%;right:10%}@keyframes float-orb{0%,to{transform:translate(0)scale(1)}25%{transform:translate(30px,-30px)scale(1.1)}50%{transform:translate(-20px,20px)scale(.9)}75%{transform:translate(20px,30px)scale(1.05)}}.time-lines{width:100%;height:100%;position:absolute;top:0;left:0}.time-line{background:linear-gradient(#0000,#3b82f6,#0000);width:1px;position:absolute;top:0;bottom:0}.hourly-page .container{z-index:2;max-width:1200px;position:relative}.hourly-hero{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:40px;padding:40px 0;display:flex}.hero-content{flex:1;min-width:300px}.hero-badge{color:#60a5fa;background:#3b82f633;border:1px solid #3b82f64d;border-radius:50px;align-items:center;gap:8px;margin-bottom:20px;padding:8px 16px;font-size:13px;font-weight:600;display:inline-flex}.hero-title{color:#fff;margin:0 0 10px;font-size:42px;font-weight:900;line-height:1.2}.hero-title .city-name{background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;display:block}.hero-subtitle{color:#94a3b8;max-width:400px;margin:0 0 30px;font-size:16px}.current-time-box{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;align-items:center;gap:15px;padding:15px 25px;display:inline-flex}.time-icon{color:#fff;background:linear-gradient(135deg,#fbbf24,#f59e0b);border-radius:12px;justify-content:center;align-items:center;width:50px;height:50px;font-size:22px;display:flex}.time-info{flex-direction:column;display:flex}.time-label{color:#64748b;text-transform:uppercase;font-size:11px;font-weight:600}.time-value{color:#fff;font-size:28px;font-weight:900}.time-date{border-left:1px solid #ffffff1a;flex-direction:column;align-items:center;padding-left:15px;display:flex}.time-date span:first-child{color:#3b82f6;font-size:24px;font-weight:900}.time-date span:last-child{color:#64748b;text-transform:uppercase;font-size:11px}.hero-preview{flex-shrink:0}.preview-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);text-align:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:24px;min-width:220px;padding:30px}.preview-now{justify-content:center;align-items:center;gap:15px;margin-bottom:15px;display:flex}.preview-now img{object-fit:contain;width:80px;height:80px}.preview-temp{color:#fff;font-size:56px;font-weight:900;line-height:1}.preview-desc{color:#60a5fa;background:#3b82f633;border-radius:20px;margin-bottom:12px;padding:8px 16px;font-size:13px;font-weight:600;display:inline-block}.preview-feels{color:#64748b;font-size:13px}.preview-feels strong{color:#94a3b8}.quick-stats{grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:50px;display:grid}.stat-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff08;border:1px solid #ffffff0f;border-radius:16px;align-items:center;gap:15px;padding:20px;transition:all .3s;display:flex}.stat-card:hover{background:#ffffff0f;transform:translateY(-3px)}.stat-icon{color:#fff;border-radius:12px;justify-content:center;align-items:center;width:50px;height:50px;font-size:20px;display:flex}.stat-icon.high{background:linear-gradient(135deg,#ef4444,#dc2626)}.stat-icon.low{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.stat-icon.avg{background:linear-gradient(135deg,#10b981,#059669)}.stat-icon.hours{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}.stat-info{flex-direction:column;display:flex}.stat-label{color:#64748b;font-size:12px;font-weight:500}.stat-value{color:#fff;font-size:22px;font-weight:900}.timeline-section{margin-bottom:50px}.section-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.section-header h2{color:#fff;align-items:center;gap:10px;margin:0;font-size:20px;font-weight:800;display:flex}.section-header h2 i{color:#3b82f6}.section-header p{color:#64748b;margin:0;font-size:13px}.timeline-scroll{-webkit-overflow-scrolling:touch;padding-bottom:15px;overflow-x:auto}.timeline-scroll::-webkit-scrollbar{height:6px}.timeline-scroll::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.timeline-scroll::-webkit-scrollbar-thumb{background:#3b82f6;border-radius:3px}.timeline-track{gap:10px;padding:10px 0;display:flex}.timeline-item{text-align:center;background:#ffffff08;border:1px solid #ffffff0f;border-radius:16px;flex-shrink:0;min-width:90px;padding:15px 20px;transition:all .3s}.timeline-item:hover,.timeline-item.active{background:#3b82f626;border-color:#3b82f64d;transform:translateY(-5px)}.tl-time{color:#94a3b8;margin-bottom:10px;font-size:14px;font-weight:700}.timeline-item.active .tl-time{color:#60a5fa}.tl-icon img{object-fit:contain;width:40px;height:40px;margin-bottom:8px}.tl-temp{color:#fff;font-size:20px;font-weight:900}.day-sections{margin-bottom:50px}.day-block{margin-bottom:40px}.day-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;display:flex}.day-info{align-items:baseline;gap:12px;display:flex}.day-name{color:#fff;font-size:22px;font-weight:900}.day-date{color:#64748b;font-size:14px}.day-range{gap:15px;display:flex}.range-high,.range-low{align-items:center;gap:5px;font-size:14px;font-weight:700;display:flex}.range-high{color:#ef4444}.range-low{color:#3b82f6}.hours-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;display:grid}.hour-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;background:#ffffff08;border:1px solid #ffffff0f;border-radius:20px;padding:20px 15px;transition:all .3s}.hour-card:hover{background:#ffffff0f;border-color:#3b82f64d;transform:translateY(-5px)}.hour-time{color:#e2e8f0;margin-bottom:12px;font-size:16px;font-weight:800}.hour-icon img{object-fit:contain;width:55px;height:55px;margin-bottom:12px}.hour-temp{color:#fff;margin-bottom:8px;font-size:28px;font-weight:900}.hour-desc{color:#94a3b8;white-space:nowrap;text-overflow:ellipsis;background:#ffffff0d;border-radius:10px;max-width:100%;margin-bottom:12px;padding:6px 10px;font-size:10px;font-weight:600;display:inline-block;overflow:hidden}.hour-bar{background:#ffffff1a;border-radius:2px;height:4px;overflow:hidden}.bar-fill{background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:2px;height:100%;transition:width .5s}.weather-tips{margin-bottom:50px}.tips-grid{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.tip-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff08;border:1px solid #ffffff0f;border-radius:20px;align-items:flex-start;gap:20px;padding:25px;transition:all .3s;display:flex}.tip-card:hover{background:#ffffff0f;transform:translateY(-3px)}.tip-icon{color:#fff;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:50px;height:50px;font-size:20px;display:flex}.tip-content h4{color:#fff;margin:0 0 8px;font-size:16px;font-weight:700}.tip-content p{color:#64748b;margin:0;font-size:13px;line-height:1.5}.action-section{flex-wrap:wrap;justify-content:center;gap:15px;display:flex}.action-btn{color:#fff;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:14px;align-items:center;gap:10px;padding:15px 30px;font-size:15px;font-weight:700;text-decoration:none;transition:all .3s;display:inline-flex}.action-btn:hover{color:#fff;transform:translateY(-3px);box-shadow:0 10px 30px #3b82f64d}.action-btn.secondary{background:#ffffff0d;border:1px solid #ffffff1a}.action-btn.secondary:hover{background:#ffffff1a;box-shadow:0 10px 30px #0003}@media (max-width:992px){.quick-stats{grid-template-columns:repeat(2,1fr)}.tips-grid{grid-template-columns:1fr}.hero-title{font-size:32px}}@media (max-width:768px){.hourly-hero{text-align:center;flex-direction:column}.hero-subtitle{max-width:100%}.current-time-box{justify-content:center}.preview-card{min-width:100%}.section-header{text-align:center;flex-direction:column;gap:5px}.day-header{text-align:center;flex-direction:column;gap:10px}.day-info{flex-direction:column;gap:5px}.hours-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:576px){.hourly-page{padding:20px 0 40px}.hero-title{font-size:26px}.quick-stats{grid-template-columns:1fr 1fr;gap:10px}.stat-card{text-align:center;flex-direction:column;gap:10px;padding:15px}.hours-grid{grid-template-columns:repeat(2,1fr);gap:8px}.hour-card{padding:15px 10px}.hour-icon img{width:40px;height:40px}.hour-temp{font-size:22px}.current-time-box{flex-wrap:wrap;padding:15px}.time-date{border-top:1px solid #ffffff1a;border-left:none;flex-direction:row;gap:8px;width:100%;padding-top:10px;padding-left:0}.tip-card{text-align:center;flex-direction:column}.action-btn{justify-content:center;width:100%}}