/* GeoNames TAK page — green · brown · golden */
:root {
  --tak-green: #3d4f28;
  --tak-green-mid: #556b2f;
  --tak-green-bright: #6b7f45;
  --tak-green-soft: rgba(85, 107, 47, 0.14);
  --tak-olive: #8a9a5b;
  --tak-cream: #eef2e6;
  --tak-brown: #5c4630;
  --tak-brown-deep: #3a2c1c;
  --tak-golden: #c9a84c;
  --tak-golden-soft: #d4b86a;
  --tak-cta-yellow: #c9a84c;
}

.tak-page {
  --brass: var(--tak-golden);
}

/* —— GeoLibre-style sat banner (cursor torch) —— */
.gn-tak-banner {
  --torch-x: 58%;
  --torch-y: 52%;
  --torch-size: min(280px, 38vmin);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  min-height: min(72vh, 620px);
  padding: 56px 40px 72px;
  background: #1a160e;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid #2a2218;
  cursor: crosshair;
}

.gn-tak-banner__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.gn-tak-banner__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 22, 14, 0.35) 0%, transparent 35%, rgba(61, 79, 40, 0.28) 100%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(92, 70, 48, 0.35), transparent 70%);
  pointer-events: none;
  z-index: 2;
}

.gn-tak-banner__sat-dim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(0.7) sepia(0.35) hue-rotate(18deg) contrast(1.05) brightness(0.26);
  opacity: 0.6;
}

.gn-tak-banner__reveal {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(circle var(--torch-size) at var(--torch-x) var(--torch-y), #000 0%, #000 72%, transparent 100%);
  mask-image: radial-gradient(circle var(--torch-size) at var(--torch-x) var(--torch-y), #000 0%, #000 72%, transparent 100%);
}

.gn-tak-banner__sat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(0.95) sepia(0.22) hue-rotate(12deg) contrast(1.08) brightness(0.92);
}

.gn-tak-banner__glow {
  position: absolute;
  width: calc(var(--torch-size) * 2);
  height: calc(var(--torch-size) * 2);
  left: var(--torch-x);
  top: var(--torch-y);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(201, 168, 76, 0.22) 0%,
    rgba(85, 107, 47, 0.1) 42%,
    transparent 70%
  );
  mix-blend-mode: screen;
}

.gn-tak-banner__reticle {
  position: absolute;
  left: var(--torch-x);
  top: var(--torch-y);
  width: calc(var(--torch-size) * 2);
  height: calc(var(--torch-size) * 2);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.gn-tak-banner__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(212, 184, 106, 0.65);
  box-shadow: 0 0 0 1px rgba(26, 22, 14, 0.35), inset 0 0 24px rgba(61, 79, 40, 0.2);
}

.gn-tak-banner__bracket {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid rgba(238, 242, 230, 0.9);
}

.gn-tak-banner__bracket--tl { left: 6%; top: 6%; border-top-width: 2px; border-left-width: 2px; }
.gn-tak-banner__bracket--tr { right: 6%; top: 6%; border-top-width: 2px; border-right-width: 2px; }
.gn-tak-banner__bracket--bl { left: 6%; bottom: 6%; border-bottom-width: 2px; border-left-width: 2px; }
.gn-tak-banner__bracket--br { right: 6%; bottom: 6%; border-bottom-width: 2px; border-right-width: 2px; }

.gn-tak-banner__lockbox {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 28px;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--tak-golden);
  background: rgba(201, 168, 76, 0.08);
}

.gn-tak-banner__coords {
  position: absolute;
  left: 8%;
  bottom: 10%;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: rgba(238, 242, 230, 0.78);
  text-align: left;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.gn-tak-banner__coords b {
  display: block;
  color: var(--tak-golden-soft);
  font-weight: 600;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 2px;
}

.gn-tak-banner__degree {
  position: absolute;
  right: 10%;
  top: 12%;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(212, 184, 106, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.gn-tak-banner__copy {
  position: relative;
  z-index: 2;
  max-width: min(720px, 92vw);
}

.gn-tak-banner__logo {
  width: clamp(72px, 10vw, 96px);
  height: clamp(72px, 10vw, 96px);
  object-fit: contain;
  border-radius: 12px;
  background: #0a0e14;
  margin: 0 auto 18px;
  display: block;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.gn-tak-banner__badge {
  display: block;
  width: min(340px, 72vw);
  height: auto;
  margin: 0 auto 22px;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.55));
}

.tak-phone-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(16px, 2.5vw, 28px);
}

.tak-phone-row .mock-phone--tak-ios {
  width: min(200px, 42vw);
}

.tak-mark-end {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.tak-mark-end img {
  width: min(280px, 70vw);
  height: auto;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.35));
}

.gn-tak-banner h1 {
  margin: 0 0 14px;
  font-size: clamp(32px, 6.5vw, 72px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #eef2e6;
}

.gn-tak-banner h1 em {
  font-style: normal;
  color: var(--tak-golden);
  font-weight: 600;
}

.gn-tak-banner__subline {
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(212, 184, 106, 0.72);
}

.gn-tak-banner__cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Green · brown · golden CTA bar */
.gn-cta-bar {
  display: inline-flex;
  align-items: stretch;
  height: 44px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(26, 22, 14, 0.4);
}

.gn-cta-bar__learn,
.gn-cta-bar__order {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  height: 44px;
  padding: 0 22px;
  margin: 0;
  border: 1px solid var(--tak-brown-deep);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}

.gn-cta-bar__learn {
  background: var(--tak-golden);
  color: #1a160e;
  border-right-width: 0;
}

.gn-cta-bar__learn:hover {
  background: var(--tak-golden-soft);
  color: #1a160e;
}

.gn-cta-bar__order {
  background: var(--tak-green);
  color: var(--tak-cream);
}

.gn-cta-bar__order:hover {
  background: var(--tak-green-mid);
  color: #fff;
}

/* —— Phone / CTA styles live in devices.css (shared with homepage) —— */
.tak-phone-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(18px, 2.8vw, 32px);
}


.gn-tak-banner__foot {
  position: absolute;
  left: 24px;
  bottom: 18px;
  z-index: 3;
  margin: 0;
  max-width: 340px;
  text-align: left;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 768px) {
  .gn-tak-banner {
    min-height: min(58vh, 480px);
    padding: 40px 16px 96px;
    --torch-x: 50%;
    --torch-y: 40%;
    --torch-size: min(160px, 44vmin);
  }

  .gn-tak-banner h1 {
    font-size: clamp(28px, 8vw, 42px);
  }

  .gn-tak-banner__bracket,
  .gn-tak-banner__coords,
  .gn-tak-banner__degree {
    display: none;
  }

  .gn-tak-banner__foot {
    left: 16px;
    right: 16px;
    bottom: 14px;
    max-width: none;
    font-size: 12px;
  }
}

/* —— Legacy army banner kept unused; body sections below —— */

/* —— Hero banner (GeoLibre-style army green) —— */
.tak-banner {
  position: relative;
  overflow: hidden;
  min-height: min(78vh, 700px);
  display: flex;
  align-items: center;
  padding: clamp(88px, 11vw, 130px) 0 clamp(52px, 7vw, 80px);
  background:
    radial-gradient(ellipse 70% 80% at 85% 20%, rgba(138, 154, 91, 0.35), transparent 55%),
    radial-gradient(ellipse 50% 60% at 10% 90%, rgba(61, 79, 40, 0.55), transparent 50%),
    linear-gradient(165deg, #2a361c 0%, #3d4f28 38%, #556b2f 72%, #2f3c1f 100%);
  color: #f3f6ef;
  border-bottom: 1px solid rgba(243, 246, 239, 0.12);
}

.tak-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(243, 246, 239, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 246, 239, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 85%);
  pointer-events: none;
}

.tak-banner__mark {
  position: absolute;
  right: clamp(-40px, -2vw, 40px);
  top: 50%;
  transform: translateY(-48%);
  width: min(420px, 42vw);
  height: auto;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}

.tak-banner__lock {
  position: absolute;
  top: max(96px, 12vh);
  right: clamp(20px, 5vw, 64px);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 246, 239, 0.55);
  text-align: right;
  line-height: 1.55;
}

.tak-banner__lock strong {
  display: block;
  color: var(--tak-olive);
  font-weight: 600;
  margin-bottom: 4px;
}

.tak-banner__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(180px, 0.55fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.tak-banner__inner {
  position: relative;
  z-index: 1;
  max-width: 44rem;
}

.tak-banner__brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 22px;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.6vw, 14px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tak-olive);
}

.tak-banner__brand img {
  width: clamp(72px, 10vw, 104px);
  height: clamp(72px, 10vw, 104px);
  object-fit: contain;
  border-radius: 12px;
  background: #0a0e14;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.tak-banner__badge-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tak-banner__badge {
  width: min(100%, 340px);
  height: auto;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.45));
}

.tak-banner h1 {
  margin: 0 0 18px;
  font-size: clamp(2.6rem, 7vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #f7faf3;
}

.tak-banner h1 em {
  font-style: normal;
  color: var(--tak-olive);
  display: inline;
}

@media (max-width: 900px) {
  .tak-banner__layout {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .tak-banner__brand {
    justify-content: center;
    text-align: left;
  }

  .tak-banner__inner {
    max-width: none;
  }

  .tak-banner__mark {
    opacity: 0.1;
    width: min(280px, 70vw);
  }

  .tak-banner__lock {
    display: none;
  }

  .tak-banner__badge {
    width: min(240px, 70vw);
  }

  .tak-banner .hero-ctas {
    justify-content: center;
  }
}


.tak-banner__lead {
  margin: 0 0 28px;
  max-width: 46ch;
  font-size: 1.1rem;
  line-height: 1.55;
  color: rgba(243, 246, 239, 0.78);
}

.tak-banner .hero-ctas .btn-brass {
  background: var(--tak-olive);
  color: #1a2212;
}

.tak-banner .hero-ctas .btn-brass:hover {
  background: #a3b36e;
  color: #12180c;
}

.tak-banner .hero-ctas .btn-ghost {
  border-color: rgba(243, 246, 239, 0.35);
  color: #f3f6ef;
}

.tak-banner .hero-ctas .btn-ghost:hover {
  background: rgba(243, 246, 239, 0.1);
  border-color: var(--tak-olive);
  color: #fff;
}

/* —— Body sections —— */
.tak-sec {
  padding: clamp(48px, 7vw, 88px) 0;
  border-top: 1px solid var(--line-soft);
}

.tak-sec--soft {
  background:
    linear-gradient(180deg, var(--tak-green-soft), transparent 40%),
    var(--bg);
}

/* Intro blurb: tight — no empty void before Desktop */
#overview {
  padding: clamp(20px, 3vw, 28px) 0 clamp(12px, 2vw, 16px);
}

#overview .tak-sec__head {
  margin-bottom: 0;
}

/* Laptop + mobile: tighter + light cool gradient */
#tab-screen,
#phones {
  padding: clamp(20px, 3vw, 32px) 0;
  border-top: 1px solid rgba(20, 28, 40, 0.07);
  background: linear-gradient(180deg, #f5f7fa 0%, #eef1f5 48%, #fafbfc 100%);
}

#tak-admin {
  padding: clamp(24px, 3.5vw, 40px) 0;
  border-top: 1px solid rgba(20, 28, 40, 0.07);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201, 168, 76, 0.08), transparent 55%),
    linear-gradient(180deg, #fafbfc 0%, #f0f3f7 100%);
}

#tak-admin .tak-sec__head {
  margin-bottom: 18px;
}

.tak-admin-frame {
  width: min(920px, 100%);
}

.tak-glow-frame {
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #fff;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 22px rgba(255, 255, 255, 0.22),
    0 0 40px rgba(255, 255, 255, 0.1),
    0 16px 36px rgba(0, 0, 0, 0.22);
}

.tak-glow-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.tak-glow-frame .tak-devices__cap {
  margin: 0;
  padding: 12px 14px 4px;
  text-align: center;
  background: #fff;
  color: #5c4630;
}

html[data-theme="light"] .tak-glow-frame {
  border-color: #fff;
  box-shadow:
    0 0 0 1px rgba(20, 28, 40, 0.06),
    0 0 20px rgba(255, 255, 255, 0.9),
    0 0 28px rgba(201, 168, 76, 0.1),
    0 12px 28px rgba(20, 28, 40, 0.1);
}

html[data-theme="light"] .tak-glow-frame .tak-devices__cap {
  color: var(--muted);
}

#tab-screen .tak-sec__head,
#phones .tak-sec__head {
  margin-bottom: 14px;
}

#phones .tak-phone-row {
  gap: clamp(12px, 2vw, 22px);
}

html[data-theme="dark"] #tab-screen,
html[data-theme="dark"] #phones {
  border-top-color: rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, #1c1e22 0%, #16181c 50%, #121418 100%);
}

html[data-theme="dark"] #tak-admin {
  border-top-color: rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201, 168, 76, 0.1), transparent 55%),
    linear-gradient(180deg, #16181c 0%, #121418 100%);
}

.tak-sec__head {
  max-width: 40rem;
  margin: 0 0 32px;
}

.tak-sec__head .eyebrow {
  color: var(--tak-green-bright);
}

html[data-theme="light"] .tak-sec__head .eyebrow {
  color: var(--tak-green-mid);
}

.tak-sec__head h2 {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  line-height: 1.1;
}

.tak-sec__head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 48ch;
}

.tak-caps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.tak-cap {
  padding: 20px 18px 22px;
  border: 1px solid rgba(201, 168, 76, 0.18);
  background:
    linear-gradient(165deg, rgba(201, 168, 76, 0.06), transparent 42%),
    var(--panel);
  border-top: 2px solid var(--tak-golden);
  text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.tak-cap:hover {
  border-color: rgba(201, 168, 76, 0.4);
  transform: translateY(-2px);
}

.tak-cap__icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: auto;
  margin: 0 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tak-golden-soft);
  box-shadow: none;
}

.tak-cap__icon svg {
  width: 48px;
  height: 48px;
  display: block;
}

.tak-cap h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--text);
}

.tak-cap p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
}

html[data-theme="light"] .tak-cap {
  background:
    linear-gradient(165deg, rgba(201, 168, 76, 0.08), transparent 42%),
    #fff;
  border-color: rgba(90, 110, 58, 0.18);
}

html[data-theme="light"] .tak-cap__icon {
  background: transparent;
  border: 0;
  color: #556b2f;
  box-shadow: none;
}

/* Screenshot gallery */
.tak-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.tak-gallery figure {
  margin: 0;
}

.tak-gallery img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-soft);
  background: #0a0e14;
}

.tak-gallery figcaption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.tak-gallery__wide {
  grid-column: span 2;
}

/* Videos */
.tak-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.tak-video {
  margin: 0;
}

.tak-video video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 480px;
  object-fit: cover;
  background: #0a0e14;
  border: 1px solid var(--line-soft);
}

.tak-video figcaption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.tak-edge {
  margin-top: 28px;
  padding: 22px 24px;
  border-left: 4px solid var(--tak-green-mid);
  background: var(--tak-green-soft);
}

.tak-edge h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.tak-edge p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 56ch;
}

.tak-edge ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.tak-edge li {
  position: relative;
  padding-left: 16px;
  color: var(--text);
  font-size: 0.95rem;
}

.tak-edge li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tak-green-mid);
}

.tak-note {
  margin: 28px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
  max-width: 56ch;
}

.tak-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px clamp(20px, 3vw, 32px);
  border: 1px solid rgba(85, 107, 47, 0.45);
  background:
    linear-gradient(135deg, rgba(85, 107, 47, 0.18), transparent 55%),
    var(--panel);
}

.tak-related h3 {
  margin: 0 0 6px;
  font-size: 1.35rem;
}

.tak-related p {
  margin: 0;
  color: var(--muted);
  max-width: 42ch;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .tak-caps,
  .tak-gallery,
  .tak-videos {
    grid-template-columns: 1fr 1fr;
  }

  .tak-gallery__wide {
    grid-column: span 2;
  }

  .tak-banner__lock {
    display: none;
  }
}

@media (max-width: 640px) {
  .tak-caps,
  .tak-gallery,
  .tak-videos {
    grid-template-columns: 1fr;
  }

  .tak-gallery__wide {
    grid-column: span 1;
  }

  .tak-banner {
    min-height: auto;
    padding-top: 100px;
  }

  .tak-video video {
    max-height: 420px;
  }
}