/* Overwatch — overwatchapp.co
   One system across landing + legal. Dark, precise, one signal color. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("fonts/bitcount.css");
@font-face{
  font-family:'Brunea';
  src:url('fonts/AT-Brunea-Regular.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --bg:#0a0a0b;
  --bg-2:#0e0e10;
  --panel:#131315;
  --panel-2:#17171a;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.06);
  --text:#f4f4f5;
  --muted:#9a9a9f;
  --faint:#66666b;
  --accent:#ff6500;                 /* Sol — vivid orange accent (ported from desktop 2026-07-21) */
  --accent-2:#ff6a44;
  --accent-soft:rgba(255,101,0,.14);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1160px;
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

/* ---- background field: faint technical grid, masked to fade ---- */
.field{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(var(--line-2) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,var(--line-2) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 0%,transparent 78%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 0%,transparent 78%);
  opacity:.7;
}
.glow{
  position:fixed;left:50%;top:-14vh;transform:translateX(-50%);
  width:min(900px,120vw);height:520px;z-index:-2;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,101,0,.16),transparent 70%);
  filter:blur(10px);
}

/* ---- HUD corner registration ticks ---- */
.hud{position:fixed;inset:18px;z-index:40;pointer-events:none}
.hud i{position:absolute;width:14px;height:14px;opacity:.5}
.hud i::before,.hud i::after{content:"";position:absolute;background:var(--faint)}
.hud i::before{width:14px;height:1px;top:0}
.hud i::after{height:14px;width:1px;left:0}
.hud .tl{left:0;top:0}
.hud .tr{right:0;top:0;transform:scaleX(-1)}
.hud .bl{left:0;bottom:0;transform:scaleY(-1)}
.hud .br{right:0;bottom:0;transform:scale(-1)}
@media (max-width:640px){.hud{display:none}}

/* ---- shared layout ---- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono)}
.label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);
}
.accent{color:var(--accent)}
/* brand name in copy: orange "/Overwatch" command token. Each LETTER glitches on its
   own with one of 5 effects (copied 1:1 from the desktop + mobile app logo). */
.owname{font-family:'Brunea','Bitcount',var(--mono);letter-spacing:.03em;font-weight:700;font-size:.9em;
  text-transform:uppercase;color:var(--accent);
  -webkit-text-stroke:.4px var(--accent);
  filter:drop-shadow(0 0 5px rgba(255,101,0,.3))}
.owname::before{content:"/";opacity:.85}
.gl{position:relative;display:inline-block;color:var(--accent)}
.gl-rgb::before,.gl-rgb::after{content:attr(data-ch);position:absolute;left:0;top:0;pointer-events:none;opacity:0}
.gl-rgb::before{color:#ff2d2d}
.gl-rgb::after{color:#29d3ff}
@media (prefers-reduced-motion:no-preference){
  .gl-rgb::before{animation:glRgbA 14s steps(1,end) infinite;animation-delay:inherit}
  .gl-rgb::after{animation:glRgbB 14s steps(1,end) infinite;animation-delay:inherit}
  .gl-jitter{animation:glJitter 12s steps(1,end) infinite}
  .gl-skew{animation:glSkew 13s steps(1,end) infinite}
  .gl-flick{animation:glFlick 15s steps(1,end) infinite}
  .gl-slice{animation:glSlice 13s steps(1,end) infinite}
}
@keyframes glRgbA{
  0%,95%,100%{opacity:0;transform:translate(0,0)}
  96%{opacity:.5;transform:translate(calc(-1 * var(--gx,1px)),0)}
  97.5%{opacity:.32;transform:translate(var(--gx,1px),0)}
  98.5%{opacity:0}
}
@keyframes glRgbB{
  0%,95%,100%{opacity:0;transform:translate(0,0)}
  96%{opacity:.45;transform:translate(var(--gx,1px),0)}
  97.5%{opacity:.28;transform:translate(calc(-1 * var(--gx,1px)),0)}
  98.5%{opacity:0}
}
@keyframes glJitter{
  0%,92%,100%{transform:translateY(0)}
  93%{transform:translateY(calc(-1 * var(--gx,1px)))}
  95%{transform:translateY(var(--gx,1px))}
  97%{transform:translateY(0)}
}
@keyframes glSkew{
  0%,90%,100%{transform:skewX(0)}
  92%{transform:skewX(-6deg)}
  94%{transform:skewX(4deg)}
  96%{transform:skewX(0)}
}
@keyframes glFlick{
  0%,88%,100%{opacity:1}
  89%{opacity:.45}
  90%{opacity:.9}
  91%{opacity:.4}
  92%{opacity:1}
}
@keyframes glSlice{
  0%,90%,100%{clip-path:inset(0 0 0 0);transform:translateX(0)}
  92%{clip-path:inset(35% 0 42% 0);transform:translateX(var(--gx,1px))}
  94%{clip-path:inset(62% 0 8% 0);transform:translateX(calc(-1 * var(--gx,1px)))}
  96%{clip-path:inset(0 0 0 0);transform:translateX(0)}
}

/* ---- nav ---- */
.nav{
  position:sticky;top:0;z-index:30;
  border-bottom:1px solid var(--line);
  background:rgba(10,10,11,.66);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:11px}
.brand .dot{display:none}
.brand b{
  font-family:'Brunea','Bitcount',var(--mono);font-weight:700;font-size:19px;
  letter-spacing:.10em;text-transform:uppercase;color:var(--accent);
}
.brand b::before{content:"/";opacity:.85}
.nav nav{display:flex;align-items:center;gap:26px}
.nav nav a{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;
  color:var(--muted);transition:color .18s}
.nav nav a:hover{color:var(--text)}
/* Nav Download = a real pill button. Its OWN class (navcta) so it never inherits
   the hero's .cta group layout (display:flex + margin-top) that used to shove it
   onto a second line below the sticky header. */
.nav nav a.navcta{
  color:#0b0b0c;background:var(--accent);
  font-weight:600;letter-spacing:.04em;line-height:1;
  padding:9px 16px;border-radius:9px;white-space:nowrap;
  transition:transform .15s ease, box-shadow .18s ease, filter .18s ease;
}
.nav nav a.navcta:hover{
  color:#0b0b0c;transform:translateY(-1px);
  filter:brightness(1.06);box-shadow:0 6px 18px rgba(221,73,41,.34);
}
@media (max-width:640px){.nav nav a.hideSm{display:none}}
/* Narrow phones: brand wordmark + Download pill must both fit at 375px without the
   pill getting shoved past the edge (where overflow-x:hidden would clip it). */
@media (max-width:480px){
  .brand b{font-size:16px;letter-spacing:.06em}
  .nav .row{gap:12px}
  .nav nav a.navcta{padding:8px 13px;font-size:12px}
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  padding:12px 20px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);color:var(--text);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  transition:transform .16s ease,border-color .18s,background .18s;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.2)}
.btn .k{color:var(--faint)}
.btn.primary{
  border-color:transparent;color:#fff;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  box-shadow:0 8px 30px -12px rgba(255,101,0,.7),inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.primary:hover{box-shadow:0 12px 38px -12px rgba(255,101,0,.8),inset 0 1px 0 rgba(255,255,255,.3)}

/* ---- download buttons ---- */
.btn .os{width:16px;height:16px;flex:0 0 auto;fill:currentColor;display:block}
.btn.dl .lbl{font-weight:600}
.btn.soon{cursor:default;opacity:.55}
.btn.soon:hover{transform:none;border-color:var(--line)}
.btn.soon .cs{color:var(--faint);letter-spacing:.06em}

/* ---- simple black store pills ---- */
.btn.store{
  border:none;color:#fff;font-weight:600;letter-spacing:.02em;
  background:#0b0b0c;border-radius:12px;padding:13px 24px;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07);
}
.btn.store:hover{transform:translateY(-1px);background:#161618;border:none}
.btn.store .os{width:18px;height:18px}
.btn.store .lbl,.btn.store .cs{font-weight:600;color:#fff;letter-spacing:.02em}
.btn.store.soon{opacity:.5;cursor:default}
.btn.store.soon:hover{transform:none;background:#0b0b0c}
.btn.store.detected{background:var(--accent);box-shadow:0 10px 30px -12px rgba(255,101,0,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.store.detected:hover{background:var(--accent-2,#ff6a44)}
.dl-note{margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--faint)}
.dl-note b{color:var(--text);font-weight:600}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);margin-top:0;padding:52px 0 60px;background:var(--bg-2)}
footer .cols{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
footer .brand b{font-size:19px}
footer p{color:var(--muted);font-size:13.5px;max-width:320px;margin-top:14px}
footer .lk{display:flex;flex-direction:column;gap:11px}
footer .lk a{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
footer .lk a:hover{color:var(--text)}
footer .fine{margin-top:38px;padding-top:22px;border-top:1px solid var(--line-2);
  color:var(--faint);font-size:12px;font-family:var(--mono);letter-spacing:.03em;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---- legal pages ---- */
.legal{max-width:760px;margin:0 auto;padding:70px 28px 110px}
.legal .eyebrow{font-family:var(--mono);color:var(--accent);letter-spacing:.2em;
  text-transform:uppercase;font-size:12px}
.legal h1{font-size:clamp(30px,5vw,42px);letter-spacing:-.02em;margin:14px 0 6px}
.legal .updated{color:var(--faint);font-family:var(--mono);font-size:13px}
.legal h2{font-size:19px;color:#fff;margin:42px 0 12px;letter-spacing:-.01em}
.legal p,.legal li{color:#c9c9cd;font-size:15.5px}
.legal p{margin:12px 0}
.legal ul{padding-left:20px;margin:12px 0}
.legal li{margin:8px 0}
.legal strong{color:#fff;font-weight:600}
.legal a{color:var(--accent)}
.legal a:hover{text-decoration:underline}
.legal hr{border:none;border-top:1px solid var(--line);margin:44px 0}
.legal .foot{color:var(--faint);font-size:13px;margin-top:44px;line-height:1.6}
.legal .back{display:inline-flex;gap:8px;align-items:center;font-family:var(--mono);
  font-size:12.5px;color:var(--muted);margin-bottom:8px}
.legal .back:hover{color:var(--text)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}