/* RazorForge — forged graphite, one red-hot edge. Dark-first; legal pages read as a calm column on top. */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;800&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  --bg: #0c0e12; --card: #161a21; --fg: #e9ecf1; --muted: #9aa3af; --line: #252b34;
  --accent: #ff4d5a; --accent2: #ff8a5c; --link: #ff7a84; --glow: rgba(255, 77, 90, .16); --glow2: rgba(59, 91, 219, .10);
  --display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --body: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f4f2; --card: #ffffff; --fg: #15181d; --muted: #5d6570; --line: #e4e0dc;
    --accent: #e0303f; --accent2: #f06a3c; --link: #c8202f; --glow: rgba(224, 48, 63, .10); --glow2: rgba(59, 91, 219, .06); color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f6f4f2; --card: #ffffff; --fg: #15181d; --muted: #5d6570; --line: #e4e0dc;
  --accent: #e0303f; --accent2: #f06a3c; --link: #c8202f; --glow: rgba(224, 48, 63, .10); --glow2: rgba(59, 91, 219, .06); color-scheme: light;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0; background-color: var(--bg); color: var(--fg);
  font: 400 17px/1.7 var(--body); -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(1200px 600px at 85% -10%, var(--glow), transparent 60%),
                    radial-gradient(900px 500px at -10% 110%, var(--glow2), transparent 60%);
  background-attachment: fixed;
}
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 24px }
a { color: var(--link); text-underline-offset: 3px }
a:hover { color: var(--accent2) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px }

/* Header */
header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: var(--bg); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-block: 16px }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; font: 700 1.02rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase }
.brand:hover { color: var(--fg) }
.brand svg { width: 34px; height: 30px; flex: none }
.brand b { color: var(--accent); font-weight: 700 }
nav { display: flex; flex-wrap: wrap; gap: 4px 6px }
nav a { color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; transition: color .15s, background-color .15s }
nav a:hover { color: var(--fg); background: var(--line) }

/* Content column (legal and support pages) */
main { padding-block: 56px 72px }
main.wrap { max-width: 820px }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; text-wrap: balance }
h1 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.1; margin: .1em 0 .5em }
h2 { font-size: 1.5rem; margin: 2em 0 .6em }
h3 { font: 600 1.15rem/1.35 var(--body); margin: 2.2em 0 .5em; padding-top: 1.4em; border-top: 1px solid var(--line) }
h4 { font: 700 1.05rem/1.4 var(--body); margin: 1.6em 0 .6em; padding: 14px 18px; border-radius: 12px;
     background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent) }
main p { margin: .6em 0 }
main h1 + p { color: var(--muted) }
.langs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; color: transparent; margin: 0 0 28px }
.langs a { color: var(--muted); text-decoration: none; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600 }
.langs a:hover { color: var(--fg); border-color: var(--muted) }
.langs a[aria-current] { color: #fff; background: var(--accent); border-color: var(--accent) }

/* Home */
.hero { padding-block: 88px 64px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center }
.eyebrow { font: 700 .78rem/1.4 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.04; margin: 0 0 22px }
.hero h1 span { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 34em; margin: 0 0 30px }
.cta { display: flex; flex-wrap: wrap; gap: 12px }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 12px; font-weight: 700; text-decoration: none; transition: transform .15s, border-color .15s }
.btn.primary { background: var(--accent); color: #fff }
.btn.primary:hover { color: #fff; transform: translateY(-1px) }
.btn.ghost { border: 1px solid var(--line); color: var(--fg) }
.btn.ghost:hover { color: var(--fg); border-color: var(--muted) }
.mark { aspect-ratio: 1; max-width: 400px; justify-self: center; width: 100% }
.mark svg { width: 100%; height: 100%; filter: drop-shadow(0 30px 60px var(--glow)) }

.section { padding-block: 36px }
.section > h2 { margin-top: 0 }
.app { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px;
       background: var(--card); border: 1px solid var(--line); border-radius: 22px }
.app img { width: 132px; height: 132px; border-radius: 30px; display: block; max-width: 100% }
.app h3 { border: 0; padding: 0; margin: 0 0 4px; font: 700 1.5rem/1.2 var(--display) }
.badge { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
         border: 1px solid var(--accent); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px }
.app p { margin: 6px 0 0; color: var(--muted) }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px }
.chips span { font-size: .85rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--line); color: var(--fg) }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.tile { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--card) }
.tile b { display: block; font: 700 1.02rem/1.3 var(--display); margin-bottom: 8px }
.tile p { margin: 0; color: var(--muted); font-size: .97rem }
.ua { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 28px; color: var(--muted) }
.ua h2 { font-size: 1.2rem; color: var(--fg); margin-top: 0 }

footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; padding-block: 28px }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between }
footer a { color: var(--muted) }

@media (max-width: 760px) {
  body { font-size: 16px }
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: 40px 24px; gap: 24px }
  .mark { max-width: 160px; order: -1; justify-self: start }
  .grid3 { grid-template-columns: minmax(0, 1fr) }
  .app { grid-template-columns: minmax(0, 1fr); padding: 22px }
  .app img { width: 96px; height: 96px; border-radius: 22px }
  header .wrap { padding-block: 12px }
  nav a { padding: 5px 9px; font-size: .84rem }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } .btn { transition: none } }

/* Logo, larger (owner's request): blades + wordmark in every header, and a big lockup on the home page. */
.brand { gap: 14px; letter-spacing: .14em }
.brand svg { width: 48px; height: 40px }
.brand .word { display: grid; gap: 5px; font-size: 1.25rem; line-height: 1 }
.brand .word small { font: 600 .62rem/1 var(--body); letter-spacing: .3em; color: var(--muted) }
.mark { display: grid; justify-items: center; gap: 18px; max-width: 460px; aspect-ratio: auto }
.mark svg { width: 78%; height: auto; aspect-ratio: 1 }
.markword { font: 700 clamp(1.9rem, 4.2vw, 3rem)/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--fg) }
.markword b { color: var(--accent) }
@media (max-width: 760px) {
  .brand svg { width: 40px; height: 34px }
  .brand .word { font-size: 1.08rem }
  .mark { max-width: 100%; justify-self: stretch; justify-items: start; grid-template-columns: auto 1fr; align-items: center }
  .mark svg { width: 96px }
  .markword { font-size: 1.7rem }
}

/* 12.10: no tagline in the header, no big mark on the home page; larger tabs that fill with the logo's colours. */
.hero { grid-template-columns: minmax(0, 1fr); max-width: 820px }
nav { gap: 6px 8px }
nav a {
  position: relative; isolation: isolate; overflow: hidden;
  font-size: 1.08rem; font-weight: 700; padding: 9px 16px; border-radius: 12px;
  transition: color .25s ease, transform .25s ease, box-shadow .25s ease;
}
nav a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(110deg, #ff4d5a 0%, #ff8a5c 100%); box-shadow: inset 0 -3px 0 #d9dee5;
  transform: translateX(-130%) skewX(-18deg); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
nav a:hover, nav a:focus-visible { color: #fff; background: transparent; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255, 77, 90, .35) }
nav a:hover::before, nav a:focus-visible::before { transform: translateX(0) skewX(0) }
@media (max-width: 760px) { nav a { font-size: .92rem; padding: 7px 12px } }
@media (prefers-reduced-motion: reduce) { nav a, nav a::before { transition: none } }

/* Product list (filled from products.json by build_products.py) */
.apps { display: grid; gap: 18px }
.app .meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px }
.app .meta-row:empty { display: none }
.app .meta-row small { color: var(--muted); font-size: .85rem; font-weight: 600 }
.app .meta-row .btn { margin-left: auto; padding: 10px 18px }
.app.released .badge { color: #fff; background: var(--accent) }
.app.soon .badge::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 1px; animation: pulse 1.6s ease-in-out infinite }
@keyframes pulse { 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .app.soon .badge::before { animation: none } }

/* Games (task 345, owner approved "variant A" 29.10): /games/ has its own lockup — the blades, RAZOR FORGE in heavy
   Unbounded, a red line under FORGE and GAMES under it, as at the end of the UFDrone splash. The line flies in from the
   left, then GAMES comes out of a blur; once per page load. The software pages keep their logo as it is. */
:root { --blade: #d9dee5; --razor: #d9dee5 }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --blade: #3a4049; --razor: #2a2f37 } }
:root[data-theme="light"] { --blade: #3a4049; --razor: #2a2f37 }

nav a[aria-current="page"] { color: var(--fg) }
nav a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent); z-index: -1 }

.rfg { display: inline-grid; grid-template-columns: auto auto auto; align-items: center; row-gap: 6px;
       font: 800 22px/1 var(--display); letter-spacing: .03em; text-transform: uppercase }
.rfg svg { width: 38px; height: 31px; margin-right: 11px }
.rfg .blade2 { fill: var(--blade) }
.rfg .r { color: var(--razor) }
.rfg .f { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent }
/* The line takes the width of FORGE; GAMES spans the whole row and sits on the right, so that its letters can come
   together without moving anything else. Both rows are always there: the header does not jump. */
.rfg .l { grid-column: 3; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2));
          transform-origin: left center; animation: rfLineIn .5s cubic-bezier(.2,.8,.2,1) .25s both }
.rfg .g { grid-column: 1 / -1; justify-self: end; font: 500 11px/1 var(--display); letter-spacing: .62em; margin-right: -.62em; color: var(--muted);
          white-space: nowrap; animation: rfGamesIn .45s ease-out .7s both }
.rfg.still .l, .rfg.still .g { animation: none }
@keyframes rfLineIn { 0% { opacity: 0; transform: translateX(-180px) scaleX(.1) } 60% { opacity: 1 } 100% { opacity: 1; transform: none } }
@keyframes rfGamesIn { 0% { opacity: 0; letter-spacing: 1.2em; filter: blur(5px) } 100% { opacity: 1; letter-spacing: .62em; filter: none } }
.brand.games { letter-spacing: normal }
header.games .wrap { padding-block: 10px }
.rfg.big { font-size: 36px; row-gap: 10px }
.rfg.big svg { width: 56px; height: 47px; margin-right: 14px }
.rfg.big .g { font-size: 13px }
@media (max-width: 760px) {
  .rfg { font-size: 19px; row-gap: 5px }
  .rfg svg { width: 32px; height: 27px; margin-right: 10px }
  .rfg .g { font-size: 9px }
  .rfg.big { font-size: 25px; row-gap: 8px }
  .rfg.big svg { width: 40px; height: 33px }
  .rfg.big .g { font-size: 10px }
}

/* Leaving the games pages (browsers with cross-document View Transitions; others simply load the page): the line slides
   off to the right and GAMES fades out. Everything else changes at once, as before. Only the header lockup takes part. */
@view-transition { navigation: auto }
::view-transition-old(root), ::view-transition-new(root) { animation: none }
header .rfg .l { view-transition-name: rf-line }
header .rfg .g { view-transition-name: rf-games }
::view-transition-new(rf-line):only-child, ::view-transition-new(rf-games):only-child { animation: none }
::view-transition-old(rf-line):only-child { transform-origin: right center; animation: rfLineOut .35s ease-in .1s both }
::view-transition-old(rf-games):only-child { animation: rfGamesOut .25s ease-in both }
::view-transition-group(rf-line), ::view-transition-group(rf-games) { animation-duration: 0s }
@keyframes rfLineOut { to { opacity: 0; transform: translateX(60px) scaleX(0) } }
@keyframes rfGamesOut { to { opacity: 0; filter: blur(4px) } }
@media (prefers-reduced-motion: reduce) {
  .rfg .l, .rfg .g { animation: none }
  ::view-transition-old(rf-line), ::view-transition-old(rf-games) { animation: none; opacity: 0 }
}

.games-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; max-width: none }
.games-hero .rfg { justify-self: center }
.games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px }
.game { display: flex; flex-wrap: wrap; gap: 24px; padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: 22px }
.game img { width: 120px; height: 120px; border-radius: 26px; flex: none }
.game > div { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px }
.game h3 { border: 0; padding: 0; margin: 0; font: 700 1.5rem/1.2 var(--display) }
.game p { margin: 0; color: var(--muted) }
.game .badge { margin: 0 }
.game.released .badge { color: #fff; background: var(--accent) }
.game.soon .badge::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 1px; animation: pulse 1.6s ease-in-out infinite }
.game .chips { margin-top: 2px }
.game .links { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px }
.game .links .btn { padding: 10px 18px }
.game.next { flex-direction: column; justify-content: center; gap: 10px; background: transparent; border-style: dashed; min-height: 220px }
.game.next b { font: 700 .76rem/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.game.next h3 { color: var(--muted) }
.studio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.studio > div { padding-top: 16px; border-top: 2px solid var(--line) }
.studio > div:first-child { border-top-color: var(--accent) }
.studio b { display: block; font: 700 1.02rem/1.3 var(--display); margin-bottom: 8px }
.studio p { margin: 0; color: var(--muted); font-size: .97rem }
@media (max-width: 760px) {
  .games-hero { grid-template-columns: minmax(0, 1fr); gap: 28px }
  .games-hero .rfg { display: none } /* on a phone the header lockup right above is enough */
  .studio { grid-template-columns: minmax(0, 1fr) }
  .game { padding: 22px; gap: 18px }
  .game img { width: 88px; height: 88px; border-radius: 20px }
}
@media (prefers-reduced-motion: reduce) { .game.soon .badge::before { animation: none } }

/* The UFDrone page */
.gamepage .top { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-bottom: 8px }
.gamepage .top img { width: 132px; height: 132px; border-radius: 30px }
.gamepage .top h1 { margin: 8px 0 0 }
.gamepage .back { font-weight: 700; text-decoration: none; color: var(--muted) }
.gamepage .back:hover { color: var(--fg) }
.gamepage .cta { margin-top: 28px }

/* On the apps home page: the way to the games section */
.games-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 18px; padding: 24px 28px;
              border: 1px dashed var(--line); border-radius: 22px; color: var(--fg); text-decoration: none; transition: border-color .2s }
.games-link:hover { color: var(--fg); border-color: var(--accent) }
.games-link .rfg { font-size: 19px }
.games-link .rfg svg { width: 32px; height: 27px; margin-right: 10px }
.games-link .rfg .g { font-size: 9px }
.games-link p { margin: 0; flex: 1 1 280px; color: var(--muted) }
.games-link .btn { padding: 10px 18px }
.game .links small { align-self: center; color: var(--muted); font-size: .85rem; font-weight: 600 }
/* 345: with the Games tab the six tabs and the logo still fit in one line on a computer screen. */
@media (min-width: 761px) { nav { gap: 6px 4px } nav a { font-size: 1rem; padding: 9px 13px } }
/* Links to a section (#ufdrone in the policy, #games) stop below the sticky header, not under it. */
[id] { scroll-margin-top: 96px }
@media (max-width: 760px) { [id] { scroll-margin-top: 230px } }
/* 30.10 (owner): no buttons in the first screen; the app and game tiles stand right under the hero text. */
.hero { padding-bottom: 12px }
.hero .lead:last-child { margin-bottom: 0 }
@media (max-width: 760px) { .hero { padding-bottom: 4px } }