:root{
  --bg:#f7faff; --text:#0b1630; --muted:#5d6b87; --card:#ffffff; --border:#e7eef7;
  --primary:#0b7fff; --primary-ink:#fff; --ok:#0a7f37; --warn:#b8860b; --bad:#b00020;
  --ring:0 0 0 3px rgba(11,127,255,.25);
  --shadow:0 8px 22px rgba(10,22,48,.08), 0 2px 6px rgba(10,22,48,.04);
  --radius:14px; --pad:16px; --gap:12px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1020; --text:#e8f0ff; --muted:#aab5d0; --card:#111831; --border:#1f2744;
         --primary:#65a9ff; --primary-ink:#081126; --shadow:0 14px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2); }
}
*{box-sizing:border-box;}
body{margin:0; font:15.5px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text);
     background:radial-gradient(1200px 600px at 20% -10%, #eaf2ff, transparent), var(--bg);}
a{color:var(--primary); text-decoration:none;} a:hover{text-decoration:underline;}
.container{max-width:1040px; margin:0 auto; padding:24px 14px 32px;}
.container.narrow{max-width:840px;}
.container.compact .card.tight{padding:var(--pad);}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); margin-bottom:14px; transition:all 0.3s ease;}
.card.calculator{background:linear-gradient(135deg, #fafbff, #ffffff); border:2px solid #e0f2fe; box-shadow:0 8px 32px rgba(11,127,255,0.12), 0 1px 2px rgba(0,0,0,0.05); transform:translateY(0); transition:all 0.3s ease;}
.card.calculator:hover{transform:translateY(-2px); box-shadow:0 12px 40px rgba(11,127,255,0.18), 0 2px 4px rgba(0,0,0,0.08);}
.prose p{margin:0 0 12px;} .prose h2{margin-top:16px;} .prose ul{padding-left:18px; margin:10px 0;}
.site-header{position:sticky; top:0; z-index:30; backdrop-filter:blur(12px);
  background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(250,251,255,.9));
  border-bottom:1px solid rgba(11,127,255,0.15); display:flex; align-items:center; justify-content:space-between; 
  padding:12px 16px; box-shadow:0 2px 12px rgba(11,127,255,0.08); transition:all 0.3s ease;}
.site-header:hover{box-shadow:0 4px 20px rgba(11,127,255,0.12);}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; color:var(--text); 
       transition:all 0.3s ease; padding:4px 8px; border-radius:12px;}
.brand:hover{background:rgba(11,127,255,0.05); transform:translateY(-1px);}
.brand img{transition:transform 0.3s ease;}
.brand:hover img{transform:rotate(10deg) scale(1.1);}
.top-nav{display:flex; gap:16px; align-items:center;}
.top-nav a{padding:8px 12px; border-radius:8px; font-weight:600; transition:all 0.3s ease; 
           position:relative; color:var(--text);}
.top-nav a:hover{background:linear-gradient(135deg, rgba(11,127,255,0.08), rgba(59,130,246,0.05)); 
                 transform:translateY(-1px); text-decoration:none; color:var(--primary);}
.top-nav a::after{content:''; position:absolute; bottom:0; left:50%; width:0; height:2px; 
                  background:var(--primary); transition:all 0.3s ease; transform:translateX(-50%);}
.top-nav a:hover::after{width:80%;}
.nav-toggle{display:none; background:linear-gradient(135deg, rgba(11,127,255,0.08), rgba(59,130,246,0.05)); 
  border:1px solid rgba(11,127,255,0.2); padding:8px 10px; border-radius:12px; cursor:pointer; 
  transition:all 0.3s ease;}
.nav-toggle:hover{background:linear-gradient(135deg, rgba(11,127,255,0.12), rgba(59,130,246,0.08)); 
  transform:translateY(-1px); box-shadow:0 2px 8px rgba(11,127,255,0.15);}
.nav-toggle .bar{display:block; width:20px; height:2px; background:var(--primary); margin:4px 0; 
  border-radius:2px; transition:all 0.3s ease;}
.nav-toggle:hover .bar{background:var(--primary);}
@media (max-width: 860px){
  .nav-toggle{display:block;}
  .top-nav{position:absolute; right:10px; top:56px; 
    background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(250,251,255,0.98)); 
    border:1px solid rgba(11,127,255,0.15); backdrop-filter:blur(12px);
    box-shadow:0 8px 32px rgba(11,127,255,0.15), 0 2px 8px rgba(0,0,0,0.05); 
    border-radius:16px; padding:16px; display:none; flex-direction:column; gap:4px; min-width:240px;}
  .top-nav[data-open="true"]{display:flex; animation:slideDown 0.3s ease;}
  .top-nav a{padding:12px 16px; margin:2px 0; border-radius:10px;}
}
@media (min-width: 861px){ .nav-toggle{display:none;} .top-nav{display:flex;} }
@keyframes slideDown{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);}}
.hero{display:grid; grid-template-columns:1.2fr 1fr; gap:18px; align-items:center; margin-bottom:14px;}
@media (max-width:900px){ .hero{grid-template-columns:1fr;} }
.hero-text h1{font-size:clamp(1.6rem, 3.4vw, 2.4rem); margin:0 0 4px; line-height:1.14;}
.hero-text h1 .kws{display:block; margin-top:2px; color:var(--muted); font-weight:600; font-size:clamp(.9rem, 1.5vw, .95rem);}
.lead{color:var(--muted); margin:0 0 8px;}
.badge-row{display:flex; gap:8px; padding:0; list-style:none; flex-wrap:wrap;}
.badge{background:linear-gradient(135deg, #eef6ff, #f8fbff); border:1px solid #d7e9ff; padding:7px 12px; border-radius:999px; font-weight:700; font-size:13px; transition:all 0.2s ease;}
.badge:hover{transform:translateY(-1px); box-shadow:0 2px 8px rgba(11,127,255,0.15);}
.chips{display:flex; gap:8px; margin:12px 0; flex-wrap:wrap;}
.chip{background:linear-gradient(135deg, #f0f4ff, #fafbff); border:1px solid #e1e9ff; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:600; color:var(--text);}
.hero-art{height:160px; position:relative; background:linear-gradient(135deg, #e0f2fe, #f0f9ff); border-radius:20px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.weather-bg{position:absolute; width:100%; height:100%; background:radial-gradient(circle at 30% 70%, rgba(11,127,255,0.1), transparent), radial-gradient(circle at 80% 20%, rgba(59,130,246,0.15), transparent); z-index:1;}
.flake{position:absolute; font-size:24px; animation:float 8s ease-in-out infinite; opacity:.7; z-index:2;}
.flake.f1{left:20%; top:20%; animation-delay:0s; animation-duration:6s;} 
.flake.f2{left:70%; top:10%; animation-delay:2s; font-size:18px; animation-duration:8s;} 
.flake.f3{left:50%; top:60%; animation-delay:4s; font-size:20px; animation-duration:7s;}
@keyframes float{ 0%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-20px) rotate(180deg)} 100%{transform:translateY(0) rotate(360deg)} }
.grid{display:grid; gap:12px;} .grid.two{grid-template-columns:1fr 1fr;}
.grid-compact{display:grid; grid-template-columns:1fr auto auto; gap:8px; margin-top:6px; position:relative; align-items:center;}
@media (max-width:720px){ .grid.two{ grid-template-columns:1fr; } .grid-compact{ grid-template-columns:1fr; gap:12px; } }
.field label{display:block; font-weight:700; margin-bottom:4px; font-size:.95rem;}
input, select, button{width:100%; padding:12px 16px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--text); font-size:15px; transition:all 0.2s ease;}
input:focus, select:focus, button:focus{outline:none; box-shadow:var(--ring); border-color:var(--primary);}
input:hover{border-color:#c7d2fe;}
.calculator-header{text-align:center; margin-bottom:20px;}
.calculator-header h2{margin:0 0 8px; color:var(--primary); font-size:1.4rem;}
.calculator-subtitle{color:var(--muted); font-size:0.95rem; margin:0;}
.search-wrapper{position:relative;}
#q{background:linear-gradient(135deg, #fafbff, #ffffff); border:2px solid #e1e9ff; font-size:16px; padding:16px 24px; box-shadow:0 4px 12px rgba(11,127,255,0.08); position:relative; border-radius:16px;}
#q:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(11,127,255,0.15), 0 6px 20px rgba(11,127,255,0.12); transform:translateY(-2px);}
#q::placeholder{color:#94a3b8; font-weight:500;}
.btn{background:#eef3ff; color:#0b3c7f; border:1px solid #dfe9ff; cursor:pointer; font-weight:700; transition:all 0.2s ease; min-height:48px; display:flex; align-items:center; justify-content:center; gap:6px;}
.btn.primary{background:linear-gradient(135deg, #0b7fff, #59b0ff, #3b82f6); color:var(--primary-ink); border:none; box-shadow:0 4px 16px rgba(11,127,255,0.3); font-size:16px; padding:16px 32px; border-radius:16px; font-weight:800; position:relative; overflow:hidden;}
.btn.primary::before{content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition:left 0.6s ease;}
.btn.primary:hover::before{left:100%;}
.btn.geo-btn{background:linear-gradient(135deg, #22c55e, #16a34a); color:white; border:none; font-size:14px; padding:8px 12px; box-shadow:0 2px 8px rgba(34,197,94,0.25);}
.btn.notification-btn{background:linear-gradient(135deg, #f59e0b, #d97706); color:white; border:none; font-size:14px; padding:8px 12px; box-shadow:0 2px 8px rgba(245,158,11,0.25);}
.btn:hover{transform:translateY(-2px); box-shadow:0 4px 12px rgba(11,127,255,0.25);}
.btn.primary:hover{box-shadow:0 6px 24px rgba(11,127,255,0.4); transform:translateY(-3px) scale(1.02);}
.btn.geo-btn:hover{box-shadow:0 4px 12px rgba(34,197,94,0.35);}
.btn.notification-btn:hover{box-shadow:0 4px 12px rgba(245,158,11,0.35);}
.btn:disabled{opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none;}
.status{color:var(--muted); min-height:24px; font-size:.95rem; padding:8px 0; display:flex; align-items:center; gap:8px;}
.status.loading::before{content:"⏳"; animation:spin 1s linear infinite;}
.status.success::before{content:"✅";}
.status.error::before{content:"❌";}
@keyframes spin{0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}}
.result{font-size:2.2rem; font-weight:900; margin:20px 0; letter-spacing:.3px; padding:24px; border-radius:16px; text-align:center; background:linear-gradient(135deg, rgba(11,127,255,0.08), rgba(59,130,246,0.05)); border:2px solid rgba(11,127,255,0.15); position:relative; overflow:hidden;}
.result::before{content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition:left 0.6s ease; z-index:1;}
.result.bump::before{left:100%;}
.result.none{color:#64748b; background:linear-gradient(135deg, rgba(100,116,139,0.12), rgba(148,163,184,0.08)); border-color:rgba(100,116,139,0.25); text-shadow:0 1px 2px rgba(0,0,0,0.1);}
.result.low{color:var(--ok); background:linear-gradient(135deg, rgba(34,197,94,0.12), rgba(16,185,129,0.08)); border-color:rgba(34,197,94,0.25); text-shadow:0 1px 2px rgba(0,0,0,0.1);}
.result.delay{color:#ea580c; background:linear-gradient(135deg, rgba(234,88,12,0.12), rgba(249,115,22,0.08)); border-color:rgba(234,88,12,0.25); text-shadow:0 1px 2px rgba(0,0,0,0.1);}
.result.high{color:var(--warn); background:linear-gradient(135deg, rgba(245,158,11,0.12), rgba(251,191,36,0.08)); border-color:rgba(245,158,11,0.25); text-shadow:0 1px 2px rgba(0,0,0,0.1);}
.result.very-high{color:var(--bad); background:linear-gradient(135deg, rgba(239,68,68,0.12), rgba(248,113,113,0.08)); border-color:rgba(239,68,68,0.25); text-shadow:0 1px 2px rgba(0,0,0,0.1);}

/* Legacy support for comparison section */
.result.ok{color:var(--ok); background:linear-gradient(135deg, rgba(34,197,94,0.12), rgba(16,185,129,0.08)); border-color:rgba(34,197,94,0.25); text-shadow:0 1px 2px rgba(0,0,0,0.1);}
.result.warn{color:var(--warn); background:linear-gradient(135deg, rgba(245,158,11,0.12), rgba(251,191,36,0.08)); border-color:rgba(245,158,11,0.25); text-shadow:0 1px 2px rgba(0,0,0,0.1);}
.result.bad{color:var(--bad); background:linear-gradient(135deg, rgba(239,68,68,0.12), rgba(248,113,113,0.08)); border-color:rgba(239,68,68,0.25); text-shadow:0 1px 2px rgba(0,0,0,0.1);}
.result.bump{animation:bump .65s ease;} @keyframes bump{ 0%{transform:scale(.96)} 30%{transform:scale(1.04)} 100%{transform:scale(1)} }
.drivers{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; font-size:.92rem;}
.drivers .pill{background:#f0f4ff; border:1px solid #d8e4ff; padding:6px 12px; border-radius:999px; font-weight:600; transition:all 0.2s ease;}
.drivers .pill:hover{background:#e0f2fe; transform:translateY(-1px);}
.pulse{animation:pulse 1.2s ease-in-out 2;} @keyframes pulse{ 0%{opacity:.7} 50%{opacity:1} 100%{opacity:.7} }
.skeleton{position:relative; overflow:hidden; background:linear-gradient(90deg, #e8effa 25%, #f5f8ff 37%, #e8effa 63%); background-size:400% 100%; animation:shimmer 1.15s ease-in-out infinite;}
@keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.ad-slot{min-height:78px; border:1px dashed var(--border); border-radius:12px; margin:12px 0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.9rem;}
.ad-slot::after{content:"Ad space";}
.sparkline{margin-top:8px;} #spark{display:block; width:100%; height:auto;}
.spark-path{fill:rgba(11,127,255,.12); stroke:#0b7fff; stroke-width:2;} .spark-axis{stroke:#d8e4ff; stroke-width:1;} .spark-dot{fill:#0b7fff;}
.spark-hover-dot{fill:#0b7fff; stroke:#fff; stroke-width:1; transition:opacity 0.2s ease;}
#sparkNote{margin-top:4px;}
.history{margin-top:16px; padding:16px; background:linear-gradient(135deg, #f8fafc, #ffffff); border:1px solid #e2e8f0; border-radius:12px;}
.hist-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(90px, 1fr)); gap:12px; align-items:end; margin-top:8px;}
.hist-item{background:linear-gradient(135deg, #f1f5f9, #ffffff); border:1px solid #e2e8f0; border-radius:8px; padding:8px; text-align:center; transition:all 0.2s ease; position:relative;}
.hist-item:hover{transform:translateY(-1px); box-shadow:0 2px 8px rgba(11,127,255,0.1);}
.hist-item.no-snow{background:linear-gradient(135deg, #f8fafc, #f1f5f9); border-color:#cbd5e1; opacity:0.7;}
.hist-item.no-snow::after{content:'☀️'; position:absolute; top:4px; right:4px; font-size:12px; opacity:0.6;}
.hist-date{font-size:11px; color:var(--muted); font-weight:600; margin-bottom:4px;}
.hist-amount{font-size:14px; font-weight:700; color:var(--text);}
.no-snow-message{text-align:center; padding:16px; color:var(--muted); font-style:italic; background:linear-gradient(135deg, #fefefe, #f8fafc); border-radius:8px; margin-top:8px;}
.no-snow-message::before{content:'☀️ '; font-size:16px; margin-right:4px;}

/* Loading states and animations */
.loading-skeleton{background:linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size:200% 100%; animation:loading-shimmer 1.5s infinite;}
@keyframes loading-shimmer{0%{background-position:200% 0;} 100%{background-position:-200% 0;}}
.status.loading{animation:pulse-text 1.5s ease-in-out infinite;}
@keyframes pulse-text{0%,100%{opacity:1;} 50%{opacity:0.6;}}

/* Enhanced status messages */
.status{padding:12px 16px; border-radius:8px; background:linear-gradient(135deg, #f8fafc, #ffffff); border:1px solid #e2e8f0; margin:8px 0; transition:all 0.3s ease;}
.status.success{background:linear-gradient(135deg, #f0fdf4, #dcfce7); border-color:#bbf7d0; color:#166534;}
.status.error{background:linear-gradient(135deg, #fef2f2, #fee2e2); border-color:#fecaca; color:#991b1b;}
.status.warning{background:linear-gradient(135deg, #fffbeb, #fef3c7); border-color:#fde68a; color:#92400e;}

/* Improved animation for results */
@keyframes slideUp{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);}}
.result{animation:slideUp 0.5s ease;}

/* Enhanced hover effects */
.card.calculator:hover{transform:translateY(-3px); box-shadow:0 16px 48px rgba(11,127,255,0.15), 0 4px 8px rgba(0,0,0,0.05);}

/* Probability guide styling */
.probability-guide{display:grid; gap:8px; margin:16px 0; font-size:14px;}
.prob-item{padding:12px 16px; border-radius:8px; font-weight:600; text-align:center; border:2px solid; transition:all 0.3s ease;}
.prob-item:hover{transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.prob-item.none{color:#64748b; background:linear-gradient(135deg, rgba(100,116,139,0.12), rgba(148,163,184,0.08)); border-color:rgba(100,116,139,0.25);}
.prob-item.low{color:#059669; background:linear-gradient(135deg, rgba(34,197,94,0.12), rgba(16,185,129,0.08)); border-color:rgba(34,197,94,0.25);}
.prob-item.delay{color:#ea580c; background:linear-gradient(135deg, rgba(234,88,12,0.12), rgba(249,115,22,0.08)); border-color:rgba(234,88,12,0.25);}
.prob-item.high{color:#d97706; background:linear-gradient(135deg, rgba(245,158,11,0.12), rgba(251,191,36,0.08)); border-color:rgba(245,158,11,0.25);}
.prob-item.very-high{color:#dc2626; background:linear-gradient(135deg, rgba(239,68,68,0.12), rgba(248,113,113,0.08)); border-color:rgba(239,68,68,0.25);}
@media (min-width: 768px){.probability-guide{grid-template-columns:repeat(2, 1fr);}}
@media (min-width: 1024px){.probability-guide{grid-template-columns:repeat(3, 1fr);}}
.hist-item{display:flex; flex-direction:column; gap:4px; align-items:stretch;}
.hist-day{color:var(--muted); font-weight:700; font-size:.88rem; text-align:center;}
.hist-bar{height:78px; border:1px solid var(--border); border-radius:10px; background:linear-gradient(180deg, #eff6ff, #e7f1ff); position:relative; overflow:hidden;}
.hist-bar span{position:absolute; left:0; right:0; bottom:0; height:0; background:linear-gradient(180deg, #59b0ff, #0b7fff); border-radius:9px;}
.hist-val{text-align:center; font-weight:800; font-size:.94rem;}

/* Recent searches dropdown */
.recent-searches{
  position:absolute; top:100%; left:0; right:0; z-index:20;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); margin-top:4px; max-height:200px; overflow-y:auto;
}
.recent-item{
  padding:12px; cursor:pointer; border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; gap:2px; transition:background-color 0.15s ease;
}
.recent-item:last-child{border-bottom:none;}
.recent-item:hover{background:#f8faff;}
.recent-item.keyboard-focus{background:#e7f3ff; outline:2px solid var(--primary);}
.recent-query{font-weight:600; color:var(--text);}
.recent-place{font-size:.9rem; color:var(--muted);}

/* Sparkline tooltips */
.spark-tooltip{
  position:absolute; z-index:30; pointer-events:none;
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; box-shadow:var(--shadow); font-size:.9rem;
  animation:tooltipFade 0.2s ease-in;
}
.tooltip-time{font-weight:600; color:var(--text);}
.tooltip-value{color:var(--primary); font-weight:700;}
@keyframes tooltipFade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

/* Responsive improvements for mobile */
@media (max-width:720px){
  .grid-compact{
    grid-template-columns:1fr;
    gap:8px;
  }
  .btn.geo-btn{
    font-size:13px;
    padding:10px;
  }
  .recent-searches{
    left:-14px;
    right:-14px;
  }
}

/* Dark mode improvements */
@media (prefers-color-scheme: dark){
  .recent-item:hover{background:#1a2332;}
  .btn.geo-btn{background:linear-gradient(135deg, #15803d, #166534);}
  .spark-hover-dot{stroke:#111831;}
}

/* Comparison feature */
.comparison-section{margin-top:0;}
.comparison-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.comparison-toggle{width:auto; padding:8px 16px; font-size:14px;}
.comparison-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px;}
.comparison-card{
  background:var(--card); border:1px solid var(--border); border-radius:12px; 
  padding:16px; position:relative; transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.comparison-card:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.comparison-remove{
  position:absolute; top:8px; right:8px; background:transparent; border:none; 
  font-size:18px; cursor:pointer; color:var(--muted); width:24px; height:24px; 
  display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.comparison-remove:hover{background:rgba(176,0,32,0.1); color:var(--bad);}
.comparison-input{margin-bottom:12px;}
.comparison-input input{font-size:14px; padding:8px 10px;}
.comparison-result{
  text-align:center; font-size:1.2rem; font-weight:800; margin:8px 0; 
  padding:8px; border-radius:8px; min-height:40px; display:flex; 
  align-items:center; justify-content:center;
}
.comparison-result.ok{background:rgba(10,127,55,0.1); color:var(--ok);}
.comparison-result.warn{background:rgba(184,134,11,0.1); color:var(--warn);}
.comparison-result.bad{background:rgba(176,0,32,0.1); color:var(--bad);}
.comparison-details{font-size:13px; color:var(--muted); text-align:center;}
.comparison-loading{opacity:0.6;}

@media (max-width:720px){
  .comparison-grid{grid-template-columns:1fr;}
  .comparison-header{flex-direction:column; gap:8px; align-items:stretch;}
  .comparison-toggle{width:100%;}
}

.site-footer{border-top:1px solid rgba(11,127,255,0.15); margin-top:24px; 
  background:linear-gradient(135deg, #fafbff, #ffffff); 
  padding:32px 16px 24px; position:relative; overflow:hidden;}
.site-footer::before{content:''; position:absolute; top:0; left:0; right:0; height:1px; 
  background:linear-gradient(90deg, transparent, rgba(11,127,255,0.3), transparent);}
.site-footer::after{content:''; position:absolute; top:-50px; right:-50px; width:200px; height:200px; 
  background:radial-gradient(circle, rgba(11,127,255,0.03), transparent); border-radius:50%;}
.site-footer .cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); 
  gap:24px 32px; align-items:start; position:relative; z-index:1;}
.site-footer .col{background:rgba(255,255,255,0.6); padding:16px; border-radius:12px; 
  border:1px solid rgba(11,127,255,0.08); transition:all 0.3s ease;}
.site-footer .col:hover{transform:translateY(-2px); box-shadow:0 4px 12px rgba(11,127,255,0.1); 
  background:rgba(255,255,255,0.8);}
.site-footer .col h4{margin:0 0 12px; font-size:1.1rem; color:var(--primary); font-weight:700;}
.footer-nav{display:grid; gap:8px;}
.footer-nav a{padding:6px 8px; border-radius:6px; transition:all 0.3s ease; 
  color:var(--text); font-weight:500; position:relative;}
.footer-nav a:hover{background:rgba(11,127,255,0.08); color:var(--primary); 
  transform:translateX(4px); text-decoration:none;}
.footer-nav a::before{content:'→'; position:absolute; left:-16px; opacity:0; 
  transition:all 0.3s ease; color:var(--primary);}
.footer-nav a:hover::before{opacity:1; left:-2px;}
.site-footer > p{text-align:center; margin-top:24px; padding-top:16px; 
  border-top:1px solid rgba(11,127,255,0.1); color:var(--muted); font-weight:600;}
.muted{color:var(--muted);} .tiny{font-size:.85rem; color:var(--muted);} .hidden{display:none!important;}
.h3{font-size:1.15rem; margin:0 0 6px;} .h4{font-size:1rem; margin:0 0 4px;}