:root{--violet:#8b7dff;--cyan:#5edfff;--coral:#ff8c7a;--yellow:#ffd166}
body{background:#07111d;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 78% 22%,rgba(87,99,255,.24),transparent 28%),radial-gradient(circle at 10% 78%,rgba(22,205,180,.13),transparent 32%),linear-gradient(145deg,#07111d 0%,#0a1728 58%,#07121c 100%)}
.sky{position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px);background-size:90px 90px;opacity:.16;mask-image:linear-gradient(to bottom,#000,transparent 70%)}
.star{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 18px #fff;animation:twinkle 3s ease-in-out infinite}.star-a{top:16%;left:9%}.star-b{top:31%;right:8%;animation-delay:1s}.star-c{top:8%;left:55%;animation-delay:2s}
.ambient{opacity:.18;animation:drift 10s ease-in-out infinite alternate}.ambient-one{background:var(--violet)}.ambient-two{background:#3fffc0;animation-delay:-4s}
.nav{position:relative;z-index:20}.nav:after{content:"";position:absolute;left:0;bottom:-1px;width:28%;height:1px;background:linear-gradient(90deg,var(--mint),transparent)}
.brand-mark{border:0;color:#07121c;background:linear-gradient(135deg,var(--mint),var(--cyan));box-shadow:0 0 28px rgba(94,223,255,.28);transform:rotate(-7deg)}
.nav-actions{display:flex;align-items:center;gap:22px}.nav-pill{font-size:11px;color:#cdd8dd;border:1px solid var(--line);border-radius:99px;padding:8px 13px;background:rgba(255,255,255,.035)}
.hero{max-width:none;min-height:700px;padding:84px 0 105px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);gap:55px;align-items:center}.hero-content{position:relative;z-index:5}.hero .eyebrow span{display:inline-block;width:22px;height:2px;background:var(--mint);vertical-align:middle;margin-right:8px;box-shadow:0 0 10px var(--mint)}
.hero h1{font-size:clamp(58px,7.4vw,104px);text-wrap:balance;text-shadow:0 18px 70px rgba(0,0,0,.34)}.hero h1 em{background:linear-gradient(90deg,var(--mint),var(--cyan),#c4aaff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy{max-width:660px}
.hero-visual{position:relative;height:530px;display:grid;place-items:center;perspective:900px}.weather-orb{position:relative;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle at 32% 25%,#7cdeff 0,#327da4 24%,#203761 58%,#192340 78%);box-shadow:inset -35px -38px 75px rgba(2,8,30,.65),inset 18px 20px 40px rgba(255,255,255,.14),0 45px 100px rgba(0,0,0,.38),0 0 80px rgba(99,125,255,.18);animation:orbFloat 6s ease-in-out infinite}.weather-orb:after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(255,255,255,.14)}
.orb-sun{position:absolute;top:74px;right:68px;width:78px;height:78px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbd0,#ffd166 45%,#ff9f43);box-shadow:0 0 45px rgba(255,209,102,.72)}
.orb-cloud{position:absolute;height:36px;border-radius:40px;background:linear-gradient(#effcff,#a9d5e5);box-shadow:0 8px 20px #10264880;animation:cloud 5s ease-in-out infinite}.orb-cloud:before,.orb-cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.orb-cloud:before{width:52px;height:52px;left:20px;bottom:0}.orb-cloud:after{width:67px;height:67px;left:58px;bottom:0}.cloud-one{width:150px;left:52px;top:188px;z-index:2}.cloud-two{width:105px;right:34px;top:245px;opacity:.65;transform:scale(.72);animation-delay:-2s}
.orbit{position:absolute;border:1px solid rgba(154,241,202,.15);border-radius:50%;animation:spin 20s linear infinite}.orbit-one{width:430px;height:430px}.orbit-two{width:510px;height:300px;transform:rotate(55deg);border-color:rgba(139,125,255,.18);animation-duration:27s;animation-direction:reverse}.orbit-one:after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--mint);left:49%;top:-5px;box-shadow:0 0 18px var(--mint)}
.float-card{position:absolute;z-index:4;padding:16px 19px;border:1px solid rgba(255,255,255,.17);background:linear-gradient(135deg,rgba(23,44,63,.86),rgba(12,25,40,.74));box-shadow:0 20px 45px rgba(0,0,0,.24);backdrop-filter:blur(14px);border-radius:18px;animation:cardFloat 5s ease-in-out infinite}.float-card span{display:block;color:var(--mint);font:700 9px Manrope;letter-spacing:.16em}.float-card strong{display:block;font:700 15px Manrope;margin:5px 0}.float-card small{color:var(--muted)}.float-temp{left:-6px;top:110px}.float-air{right:-5px;bottom:92px;display:flex;align-items:center;gap:12px;animation-delay:-2s}.float-air i{width:11px;height:11px;border-radius:50%;background:var(--mint);box-shadow:0 0 18px var(--mint)}
.search{z-index:100;border:1px solid rgba(255,255,255,.7);transition:.25s;box-shadow:0 22px 70px rgba(0,0,0,.32),0 0 0 0 rgba(154,241,202,0)}.search:focus-within{transform:translateY(-2px);box-shadow:0 25px 80px rgba(0,0,0,.38),0 0 0 5px rgba(154,241,202,.12)}.search>button[type="submit"]{background:linear-gradient(135deg,#123f36,#162d4f);transition:.25s}.search>button[type="submit"]:hover{transform:translateY(-1px);background:linear-gradient(135deg,#195849,#253e70)}.search.is-loading>button[type="submit"]{opacity:.7;pointer-events:none}.search.is-loading>button[type="submit"] span{display:inline-block;animation:spin 1s linear infinite}
.suggestions{z-index:10000;padding:7px!important;background:#f7faf8!important;border:1px solid rgba(255,255,255,.85);box-shadow:0 22px 65px rgba(0,0,0,.48);overflow:hidden}.suggestions[hidden]{display:none!important}.search .suggestions button{position:relative;display:grid!important;grid-template-columns:1fr auto;gap:3px 16px;width:100%;padding:12px 44px 12px 14px!important;color:#17272d!important;background:transparent!important;border:0!important;border-radius:10px!important;text-align:left!important;cursor:pointer!important;pointer-events:auto!important;opacity:1!important;transform:none!important;box-shadow:none!important}.search .suggestions button+button{border-top:1px solid #e1e8e4!important}.search .suggestions button:hover,.search .suggestions button:focus-visible{background:#e1f5eb!important;outline:0}.suggestions strong{font:700 14px Manrope;color:#13242a}.suggestions span{grid-row:2;color:#66767d;font-size:11px}.suggestions i{position:absolute;right:16px;top:50%;color:#269c76;font-style:normal;font-size:19px;transform:translateY(-50%);transition:.2s}.suggestions button:hover i{transform:translate(3px,-50%)}
.quick-cities{display:flex;align-items:center;gap:8px;color:#6f808a;font-size:11px}.quick-cities button{color:#b9c6cb;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:7px 11px;border-radius:99px;cursor:pointer;transition:.2s}.quick-cities button:hover{color:#07121c;background:var(--mint);border-color:var(--mint);transform:translateY(-2px)}.status.loading{color:var(--mint)}.error-message{display:inline-block;color:#ffc0b8;background:rgba(255,91,91,.1);border:1px solid rgba(255,140,122,.2);border-radius:10px;padding:9px 12px}
.dashboard:not([hidden]){animation:reveal .65s ease both}.card{position:relative;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}.card:hover{transform:translateY(-4px);border-color:rgba(154,241,202,.24);box-shadow:0 27px 70px rgba(0,0,0,.27)}.current-card:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-80px;top:-100px;background:radial-gradient(circle,rgba(94,223,255,.23),transparent 68%)}.metric:nth-child(2) .metric-icon,.metric:nth-child(5) .metric-icon{color:var(--cyan)}.metric:nth-child(3) .metric-icon,.metric:nth-child(6) .metric-icon{color:var(--orange)}.day:hover img,.hour:hover img{transform:scale(1.15) rotate(4deg)}.day img,.hour img{transition:.3s}.pill{background:rgba(154,241,202,.08)}#map{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
body[data-weather="rain"]:before,body[data-weather="drizzle"]:before{background:radial-gradient(circle at 75% 20%,rgba(72,146,230,.26),transparent 30%),linear-gradient(145deg,#07111d,#132a42)}body[data-weather="clear"]:before{background:radial-gradient(circle at 78% 20%,rgba(255,183,77,.19),transparent 31%),linear-gradient(145deg,#07111d,#12233b)}body[data-weather="snow"]:before{background:radial-gradient(circle at 78% 20%,rgba(196,226,255,.25),transparent 31%),linear-gradient(145deg,#091522,#193049)}
@keyframes orbFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}@keyframes cloud{0%,100%{transform:translateX(0)}50%{transform:translateX(15px)}}@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}@keyframes drift{to{transform:translate(40px,-25px) scale(1.1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes reveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.hero{grid-template-columns:1fr;min-height:auto}.hero-visual{height:400px}.weather-orb{width:270px;height:270px}.orb-sun{top:52px;right:52px}.cloud-one{top:155px}.cloud-two{top:190px}.orbit-one{width:350px;height:350px}.orbit-two{width:410px;height:250px}.float-temp{left:12%}.float-air{right:10%}}
@media(max-width:620px){.nav-pill{display:none}.hero{padding-top:56px;gap:15px}.hero h1{font-size:54px}.hero-visual{height:330px}.weather-orb{width:220px;height:220px}.orb-sun{width:58px;height:58px;top:44px;right:40px}.cloud-one{top:128px;left:28px;transform:scale(.8)}.cloud-two{top:158px}.orbit-one{width:280px;height:280px}.orbit-two{width:320px;height:190px}.float-temp{left:0;top:60px}.float-air{right:0;bottom:40px}.float-card{padding:11px 13px}.quick-cities{flex-wrap:wrap}.quick-cities>span{width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}