/* ============================================================
   KUMULUS — Design System
   Dark · atmospheric · electric-blue · glassmorphism
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- storm palette (default direction) ---- */
  --bg-0:#06080F;
  --bg-1:#0A0E1B;
  --bg-2:#0F1525;
  --bg-3:#141B30;

  --ink:#EAF0FF;
  --ink-2:#AAB6D4;
  --ink-3:#6E7A99;
  --ink-4:#454F6B;

  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.07);
  --glass-3:rgba(255,255,255,.10);
  --blur:22px;

  --accent:#3D8BFF;
  --accent-2:color-mix(in oklab, var(--accent) 62%, white);
  --accent-ink:#04101F;
  --accent-glow:color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-soft:color-mix(in srgb, var(--accent) 14%, transparent);

  --warn:#F6A623;     /* medium  */
  --crit:#FF4D5E;     /* critical */
  --ok:#37D9A0;       /* nominal */
  --sun:#FF9D4D;      /* tropical warm accent */

  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:38px; --r-pill:999px;

  --sh-sm:0 2px 8px rgba(0,0,0,.35);
  --sh-md:0 18px 40px -18px rgba(0,0,0,.7);
  --sh-lg:0 40px 90px -30px rgba(0,0,0,.8);
  --sh-glow:0 0 0 1px var(--accent-soft), 0 20px 60px -20px var(--accent-glow);

  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --maxw:1240px;
}

/* glass off (variation: solid) */
[data-glass="solid"]{
  --glass:#10172A;
  --glass-2:#141D33;
  --glass-3:#19233D;
  --blur:0px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg-0);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------- atmosphere (layered animated background) ---------- */
.atmosphere{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bg-0)}
.atmosphere::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(60% 50% at 72% 8%, var(--accent-soft), transparent 60%),
    radial-gradient(50% 40% at 18% 0%, rgba(127,178,255,.10), transparent 60%),
    radial-gradient(70% 60% at 50% 120%, rgba(255,157,77,.10), transparent 60%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0) 60%);
}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;mix-blend-mode:screen;animation:drift 26s ease-in-out infinite}
.blob.b1{width:46vw;height:46vw;left:-8vw;top:-12vw;background:radial-gradient(circle,var(--accent),transparent 65%)}
.blob.b2{width:38vw;height:38vw;right:-6vw;top:6vh;background:radial-gradient(circle,#7FB2FF,transparent 65%);animation-delay:-8s;opacity:.32}
.blob.b3{width:42vw;height:42vw;left:30vw;bottom:-18vw;background:radial-gradient(circle,var(--sun),transparent 65%);opacity:.22;animation-delay:-14s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4vw,3vh) scale(1.08)}66%{transform:translate(-3vw,-2vh) scale(.96)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
@media (prefers-reduced-motion:reduce){.blob{animation:none}}
.no-motion .blob{animation:none}

/* ---------- type ---------- */
.display{font-family:var(--font-display);font-weight:700;line-height:1.02;letter-spacing:-.02em}
.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2)}
.mono{font-family:var(--font-mono)}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.grad-ink{background:linear-gradient(120deg,var(--ink),var(--ink-2) 60%,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- glass surfaces ---------- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
  backdrop-filter:blur(var(--blur)) saturate(140%);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-md);
}
.glass-2{background:var(--glass-2)}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-md);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));}
.hairline{border-color:var(--line)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-body);font-weight:600;
  font-size:15px;padding:.8em 1.3em;border-radius:var(--r-pill);border:1px solid transparent;
  cursor:pointer;transition:.22s cubic-bezier(.2,.7,.2,1);text-decoration:none;white-space:nowrap;color:var(--ink)}
.btn svg,.btn .wicon{width:1.15em;height:1.15em}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px -10px var(--accent-glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px var(--accent-glow),0 0 0 4px var(--accent-soft)}
.btn-ghost{background:var(--glass-2);border-color:var(--line-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-ghost:hover{background:var(--glass-3);transform:translateY(-2px)}
.btn-sm{font-size:13px;padding:.6em 1em}

/* ---------- chips / badges ---------- */
.chip{display:inline-flex;align-items:center;gap:.5em;font-size:12px;font-weight:600;
  padding:.42em .8em;border-radius:var(--r-pill);background:var(--glass-2);border:1px solid var(--line);color:var(--ink-2)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.lvl{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:.4em .7em;border-radius:8px}
.lvl-crit{background:rgba(255,77,94,.14);color:#FF8A95;border:1px solid rgba(255,77,94,.32)}
.lvl-med{background:rgba(246,166,35,.14);color:#FFC96B;border:1px solid rgba(246,166,35,.32)}
.lvl-ok{background:rgba(55,217,160,.13);color:#6BE9C0;border:1px solid rgba(55,217,160,.3)}
.lvl-info{background:var(--accent-soft);color:var(--accent-2);border:1px solid var(--accent-soft)}

/* ---------- weather icons ---------- */
.wicon{width:48px;height:48px;display:inline-block;vertical-align:middle;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.wicon-xl{width:160px;height:160px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}
.wicon-lg{width:96px;height:96px}
.wicon-sm{width:32px;height:32px}
.wicon-xs{width:22px;height:22px}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.row{display:flex;gap:16px}
.col{display:flex;flex-direction:column}
.between{justify-content:space-between}
.center{align-items:center}
.metric{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.metric .v{font-family:var(--font-display);font-weight:700;font-size:18px}
.metric .k{font-size:11px;color:var(--ink-3);font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase}

/* scrollbars */
*::-webkit-scrollbar{height:8px;width:8px}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
*::-webkit-scrollbar-track{background:transparent}

/* reveal on load */
.reveal{opacity:0;transform:translateY(18px);animation:reveal .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes reveal{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}.d4{animation-delay:.29s}.d5{animation-delay:.37s}.d6{animation-delay:.45s}

/* language switch + topbar shared */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand .mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--accent),var(--accent-2));box-shadow:0 8px 22px -8px var(--accent-glow);position:relative;overflow:hidden}
.brand .mark svg{width:20px;height:20px}
/* bare brand mark (horizontal lockup) — icon only, no chip */
.brand .mark{background:none;box-shadow:none;border-radius:0;width:30px;height:30px}
/* Odin logo */
.mark img,.ob-mark img{height:54%;width:auto;object-fit:contain;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
/* bare lockup icon fills the (chip-less) mark */
.brand .mark img{height:28px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.foot .brand .mark img{height:24px}
.side .mark img{height:52%}
.brand .wordmark{height:19px;width:auto;display:block;object-fit:contain}
.foot .brand .wordmark{height:17px}
/* dashboard header brand */
.head-left{display:flex;align-items:center;gap:16px;min-width:0}
.head-logo{display:block;flex-shrink:0}
.head-logo img{height:23px;width:auto;display:block}
.head-div{width:1px;height:30px;background:var(--line);flex-shrink:0}
/* mobile in-app brand chip */
.brand-chip{background:linear-gradient(150deg,var(--accent),var(--accent-2));border:none!important;box-shadow:0 6px 16px -8px var(--accent-glow)}
.brand-chip img{height:54%;width:auto;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.langswitch{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:var(--glass-2);font-family:var(--font-mono);font-size:12px}
.langswitch button{background:none;border:none;color:var(--ink-3);padding:.45em .8em;cursor:pointer;font-weight:600;transition:.2s}
.langswitch button.on{background:var(--accent);color:var(--accent-ink)}