/* ============================================
   PUNCTIPES LIMITED — Corporate Website
   ============================================ */

:root {
  --color-bg: #0a0a0f;
  --color-bg-elevated: #12121a;
  --color-bg-card: #16161f;
  --color-bg-section-alt: #0e0e16;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.15);
  --color-text: #e8e8ec;
  --color-text-secondary: #8a8a9a;
  --color-text-muted: #5a5a6a;
  --color-accent: #4d7cff;
  --color-accent-glow: rgba(77, 124, 255, 0.15);
  --color-accent-subtle: rgba(77, 124, 255, 0.08);
  --color-white: #ffffff;

  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --container: 1200px;
  --gap: 24px;
  --section-padding: 100px;
  --radius: 12px;
  --radius-sm: 8px;

  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset & Base ---- */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}

/* ---- Skip link ---- */

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 2000;
  padding: 12px 24px;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: 13px;
  border-radius: var(--radius-sm);
  transition: top 0.2s;
}

.skip-link:focus {
  top: 16px;
}

/* ---- Focus visible ---- */

*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.form-group input:focus-visible,
.form-group textarea:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}

/* ---- Utilities ---- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gap);
}

.section-number {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  display: inline;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-white);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.section-intro {
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text-secondary);
  max-width: 720px;
}

/* ---- Scroll Reveal ---- */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html { scroll-behavior: auto; }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-title .word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-overlay {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-streak { display: none; }
  .hero-beams { display: none; }
  .cursor-glow { display: none; }
}

/* ---- Navigation ---- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 var(--gap);
  transition: var(--transition);
}

.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}

.nav.scrolled::before {
  border-bottom-color: var(--color-border);
}

.nav-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-white);
  text-transform: uppercase;
}

.nav-logo svg {
  width: 28px;
  height: 28px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition: color var(--transition);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--transition);
}

.nav-links a:hover {
  color: var(--color-white);
}

.nav-links a:hover::after {
  width: 100%;
}

/* Active tab — same treatment as :hover, but persistent instead of transient. */
.nav-links a.is-active {
  color: var(--color-white);
}

.nav-links a.is-active::after {
  width: 100%;
}

.nav-cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-accent);
  padding: 10px 24px;
  border-radius: 6px;
  transition: var(--transition);
}

/* Desktop shows only the "Get in touch" CTA button; this list item is the
   mobile-only way back to /contact once that button is hidden below. */
.nav-contact-mobile {
  display: none;
}

.nav-cta:hover {
  background: #3d6ce6;
  box-shadow: 0 4px 24px var(--color-accent-glow);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  border-radius: 1px;
  transition: var(--transition);
}

.nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ---- Hero ---- */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  bottom: 48px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.2s ease, transform 1.2s ease, bottom 0.4s ease;
}

.hero-overlay.show {
  opacity: 1;
  transform: translateY(0);
}

.hero-overlay.cookie-bump.show {
  transform: translateY(-120px);
}

.hero-tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-accent);
  padding: 16px 36px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  opacity: 0;
  transition: var(--transition);
}

.btn-primary:hover {
  background: #3d6ce6;
  box-shadow: 0 8px 32px var(--color-accent-glow);
  transform: translateY(-1px);
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 16px 0;
  transition: color var(--transition);
}

.btn-secondary:hover {
  color: var(--color-white);
}

.btn-secondary .arrow {
  transition: transform var(--transition);
}

.btn-secondary:hover .arrow {
  transform: translateX(4px);
}

/* ---- Section shared ---- */

section {
  padding: var(--section-padding) 0;
  position: relative;
}

.section-header {
  margin-bottom: 48px;
}

.section-divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}

/* ---- About ---- */

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: 56px;
}

.about-text p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--color-text-secondary);
  margin-bottom: 20px;
}

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-content: start;
  padding-top: 8px;
}

.stat-item {
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-slow);
}

.stat-item:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg-card);
}

.stat-item:hover::before {
  transform: scaleX(1);
}

.stat-title {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}

.stat-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ---- Services (alt background for rhythm) ---- */

#services {
  background: var(--color-bg-section-alt);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* On Home this grid is the last thing in its section, so the section's own
   padding + the divider after it already provide space. Reused on /services
   as a direct sibling of a heading and (below) a plain paragraph, neither
   of which it can rely on for spacing — same margin as .capability-grid /
   .delivery-grid, so all three read as the same kind of block. */
.content-page .services-grid {
  margin: 24px 0 40px;
}

.service-card {
  padding: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}

.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-accent-subtle) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition);
}

.service-card:hover {
  border-color: rgba(77, 124, 255, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.service-card:hover::after {
  opacity: 1;
}

.service-card > * {
  position: relative;
  z-index: 1;
}

.service-index {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-accent-subtle);
  border: 1px solid rgba(77, 124, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--color-accent);
}

.service-name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.service-desc {
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

/* Visible affordance that a card is clickable — matters on touch, where
   there's no hover state to hint at it, and the card's own lift/glare
   effects are otherwise the only signal. */
.service-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  transition: gap 0.3s;
}

.service-card:hover .service-more {
  gap: 10px;
}

/* ==========================================================================
   Insight cards — /insights, its featured article, the Home teaser, and
   each article page's "Related articles". Same card language as
   .service-card (border, lift, glare — same JS glare/ripple selector
   lists) so Insights reads as part of the same design system.
   ========================================================================== */

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.insight-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-card);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  color: inherit;
  text-decoration: none;
}

.insight-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-accent-subtle) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition);
}

.insight-card:hover {
  border-color: rgba(77, 124, 255, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.insight-card:hover::after {
  opacity: 1;
}

.insight-card > * {
  position: relative;
  z-index: 1;
}

.insight-category {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}

.insight-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.insight-excerpt {
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text-secondary);
  flex-grow: 1;
}

.insight-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.insight-date {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.insight-read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-accent);
  white-space: nowrap;
  transition: gap 0.3s;
}

.insight-card:hover .insight-read {
  gap: 10px;
}

/* Byline on the article page itself (date + real, computed reading time) —
   distinct from .insight-meta, which is the card-footer version used in
   listings and has its own border-top/justify-content treatment. */
.insight-byline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 20px;
}

/* The one featured article on /insights and Home — same card, spans the
   full row and reads a size up, so it's clearly the "start here" pick
   rather than one more grid item. */
.insight-card--featured {
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
  padding: 40px;
  margin-bottom: 24px;
}

.insight-card--featured .insight-featured-body {
  flex: 1;
}

.insight-card--featured .insight-title {
  font-size: 24px;
}

.insight-card--featured .insight-excerpt {
  font-size: 15px;
  max-width: 640px;
}

@media (max-width: 900px) {
  .insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .insight-card--featured {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .insights-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Hero Beams (Raycast-style) ---- */

.hero-beams {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.beam {
  position: absolute;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--color-accent) 50%, transparent 100%);
  opacity: 0;
  animation: beam-fall linear infinite;
}

.beam-1 { left: 15%; height: 120px; animation-duration: 3.5s; animation-delay: 0s; }
.beam-2 { left: 35%; height: 80px; animation-duration: 4.2s; animation-delay: 0.8s; }
.beam-3 { left: 55%; height: 150px; animation-duration: 3.8s; animation-delay: 1.5s; }
.beam-4 { left: 75%; height: 100px; animation-duration: 4.5s; animation-delay: 2.2s; }
.beam-5 { left: 90%; height: 60px; animation-duration: 3.2s; animation-delay: 3s; }

@keyframes beam-fall {
  0% { top: -15%; opacity: 0; }
  10% { opacity: 0.4; }
  50% { opacity: 0.15; }
  90% { opacity: 0.3; }
  100% { top: 105%; opacity: 0; }
}

/* ---- How We Build (terminal cards) ---- */

.terminal-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.term-card {
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.term-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
}

.term-card:hover::before {
  transform: scaleX(1);
}

.term-bar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.term-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.term-dot-r { background: #ff5f57; opacity: 0.4; }
.term-dot-y { background: #febc2e; opacity: 0.4; }
.term-dot-g { background: #28c840; opacity: 0.4; }

.term-bar-name {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  margin-left: 6px;
  letter-spacing: 0.04em;
}

.term-body {
  flex: 1;
  padding: 22px 20px 20px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.85;
  min-height: 210px;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background var(--transition);
}

.term-body:hover {
  background: var(--color-bg-elevated);
}

.term-prompt {
  display: flex;
  align-items: center;
}

.term-ps1 { color: var(--color-accent); }
.term-sep { color: var(--color-text-muted); margin: 0 4px; }
.term-cmd { color: var(--color-text); }

.term-cursor {
  display: inline-block;
  width: 7px;
  height: 12px;
  background: var(--color-accent);
  margin-left: 2px;
  vertical-align: middle;
  animation: term-blink 1s step-end infinite;
  flex-shrink: 0;
}

@keyframes term-blink { 50% { opacity: 0; } }

.term-output { padding-left: 2px; }
.term-output .t-ok { color: #4ade80; }
.term-output .t-arrow { color: #fbbf24; }
.term-output .t-faint { color: var(--color-text-muted); }

.term-hint {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  opacity: 1;
  transition: opacity 0.3s;
  pointer-events: none;
}

.term-card.ran .term-hint { opacity: 0; }

.term-footer {
  border-top: 1px solid var(--color-border);
  padding: 20px 20px 26px;
}

.term-flabel {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.term-ftitle {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
  color: var(--color-white);
  line-height: 1.2;
}

.term-fdesc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.75;
  transition: color 0.3s;
}

.term-card:hover .term-fdesc {
  color: var(--color-text-secondary);
}

/* ---- Why Us (alt background) ---- */

#why-us {
  background: var(--color-bg-section-alt);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.why-card {
  padding: 36px;
  border-left: 2px solid var(--color-border);
  transition: var(--transition);
  background: var(--color-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  position: relative;
  overflow: hidden;
}

.why-card:hover {
  border-left-color: var(--color-accent);
  background: var(--color-bg-card);
}

.why-card > *:not(.card-glare) {
  position: relative;
  z-index: 3;
}

.why-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  color: var(--color-accent);
}

.why-name {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 10px;
}

.why-desc {
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

/* ---- Contact ---- */

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.contact-info h2 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.contact-info p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin-bottom: 40px;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.contact-detail svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.contact-info .stat-title {
  margin-top: 24px;
}

.contact-form {
  padding: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-elevated);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: var(--transition);
  line-height: 1.5;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-muted);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.form-group input.invalid,
.form-group textarea.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.form-error {
  font-size: 12px;
  color: #ef4444;
  margin-top: 6px;
  display: none;
}

.form-group input.invalid ~ .form-error,
.form-group textarea.invalid ~ .form-error {
  display: block;
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

.form-submit {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-accent);
  padding: 16px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  border: none;
  cursor: pointer;
}

.form-submit:hover {
  background: #3d6ce6;
  box-shadow: 0 8px 32px var(--color-accent-glow);
}

.form-consent {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.form-consent a {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Back to top ---- */

.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: var(--transition);
  cursor: pointer;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* ---- Cookie Banner ---- */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
  padding: 20px var(--gap);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-banner.visible {
  transform: translateY(0);
}

.cookie-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cookie-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  flex: 1;
}

.cookie-text a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
  border: none;
}

.cookie-btn-accept {
  background: var(--color-accent);
  color: var(--color-white);
}

.cookie-btn-accept:hover {
  background: #3d6ce6;
}

.cookie-btn-decline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.cookie-btn-decline:hover {
  border-color: var(--color-border-hover);
  color: var(--color-white);
}

/* ---- Footer ---- */

.footer {
  padding: 32px 0;
  border-top: 1px solid var(--color-border);
}

.footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer-brand-name {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: -0.01em;
}

.footer-tagline {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 320px;
}

.footer-legal-entity {
  font-style: normal;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.footer-legal-entity strong {
  display: block;
  color: var(--color-text-secondary);
  font-weight: 600;
}

.footer-brand-email {
  font-size: 13px;
  color: var(--color-text-secondary);
  transition: color var(--transition);
}

.footer-brand-email:hover {
  color: var(--color-white);
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.footer-col a {
  font-size: 13px;
  color: var(--color-text-secondary);
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--color-white);
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-copy {
  font-size: 13px;
  color: var(--color-text-muted);
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-size: 13px;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.footer-legal a:hover {
  color: var(--color-text-secondary);
}

/* ---- Touch ripple ---- */

.touch-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 124, 255, 0.25) 0%, transparent 60%);
  pointer-events: none;
  z-index: 10;
  animation: ripple-expand 0.6s ease-out forwards;
}

@keyframes ripple-expand {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* ---- Cursor glow ---- */

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 124, 255, 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}

/* ---- Card glare (soft cursor-following highlight, no tilt) ---- */

.card-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  transition: background 0.3s ease;
}

.service-card,
.why-card {
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  :root {
    --section-padding: 72px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .terminal-cards {
    grid-template-columns: 1fr;
  }

  .about-content {
    gap: 40px;
  }

  .contact-wrapper {
    gap: 40px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding: 56px;
    --gap: 20px;
  }

  .section-header {
    margin-bottom: 32px;
  }

  .section-title {
    margin-bottom: 16px;
  }

  .hero-overlay {
    bottom: 32px;
  }

  .hero-tagline {
    font-size: 10px;
    margin-bottom: 18px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 24px 0;
    overflow-y: auto;
    background: rgba(10, 10, 15, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    font-size: 18px;
    color: var(--color-white);
  }

  .nav-cta {
    display: none;
  }

  .nav-contact-mobile {
    display: block;
  }

  .nav-toggle {
    display: flex;
  }

  .about-content {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 0;
  }

  .about-stats {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .stat-item {
    padding: 20px;
  }

  .services-grid,
  .why-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .service-card {
    padding: 28px;
  }

  .service-icon {
    margin-bottom: 14px;
  }

  .service-index {
    margin-bottom: 14px;
  }

  .term-body {
    min-height: 180px;
  }

  .why-card {
    padding: 28px;
  }

  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-info p {
    margin-bottom: 24px;
  }

  .contact-form {
    padding: 28px;
  }

  .footer {
    padding: 24px 0;
  }

  .footer-row {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .footer-cols {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }

  .footer-brand,
  .footer-col {
    align-items: center;
  }

  .footer-tagline {
    max-width: none;
  }

  .cookie-inner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .cookie-banner {
    padding: 14px var(--gap);
  }

  .cookie-text {
    font-size: 11px;
    line-height: 1.5;
  }

  .cookie-btn {
    font-size: 10px;
    padding: 8px 16px;
  }

  .back-to-top {
    bottom: 20px;
    right: 20px;
  }
}

@media (max-width: 480px) {
  .about-stats {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: 24px;
  }
}

/* ==========================================================================
   Legal & content pages (terms / privacy / cookies / about / services / contact)

   Legal pages have no hero (a plain back-link + h1, matching the convention
   shared with the other domains), so .legal-page keeps its own top-padding
   to clear the fixed nav. Content pages get a .page-hero instead — see
   below — so .content-page only needs bottom padding + shared typography.
   ========================================================================== */

.legal-page {
  padding: 140px 0 80px;
}

.content-page {
  padding: var(--section-padding) 0 80px;
}

/* Minimalist page hero — About, Services, Contact and each service page.
   No imagery or animation (that's Home's job); just a quiet band of tint +
   a border to separate the page's own intro from the flowing content below,
   and enough top-padding to clear the fixed nav. */
.page-hero {
  padding: 152px 0 48px;
  background: var(--color-bg-section-alt);
  border-bottom: 1px solid var(--color-border);
}

.page-hero .section-header {
  margin-bottom: 0;
}

/* ==========================================================================
   Breadcrumbs — Services overview + each service page.
   ========================================================================== */

.breadcrumbs {
  margin-bottom: 20px;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.breadcrumbs li:not(:last-child)::after {
  content: '/';
  margin: 0 8px;
  color: var(--color-text-muted);
}

.breadcrumbs a {
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.breadcrumbs a:hover {
  color: var(--color-white);
}

.breadcrumbs li[aria-current="page"] {
  color: var(--color-text-secondary);
}

/* ==========================================================================
   FAQ accordion — Services overview + each service page.
   ========================================================================== */

/* Centered as a block — like .cta-final right below it — rather than left,
   which would zig-zag against the flowing left-aligned content above it.
   FAQ is the one section that reads fine either way, since each item is
   already its own self-contained bordered box, not flowing prose. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.content-page > .container > h2:has(+ .faq-list) {
  text-align: center;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0 20px;
  background: var(--color-bg-card);
}

.faq-item summary {
  cursor: pointer;
  padding: 18px 0;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-white);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform var(--transition);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  padding-bottom: 18px;
  margin: 0;
}

.legal-page h1 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.legal-page .updated {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 48px;
}

.legal-page h2,
.content-page h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-white);
  margin: 40px 0 16px;
}

.legal-page h3,
.content-page h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
  margin: 24px 0 12px;
}

.legal-page p,
.legal-page li,
.content-page p,
.content-page li {
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
}

.legal-page ul,
.legal-page ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

.legal-page ol {
  list-style: none;
  padding-left: 0;
}

.legal-page ol > li {
  margin-bottom: 24px;
}

/* A visible break before each top-level section ("What we can build",
   "Related services", "Frequently asked questions", etc.) — these are
   direct children of .container (not nested in .prose), so the rule only
   marks real section boundaries, not every h2 inside a block of prose. */
.content-page > .container > h2 {
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
  /* Overrides the 16px from .content-page h2 — grids/steps below already
     bring their own 24px margin-top and collapse to no visible change, but
     "Related services" / FAQ / a plain .prose paragraph don't, so without
     this they sat noticeably closer to their heading than every other
     section on the page. */
  margin-bottom: 24px;
}

.legal-page a,
.prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-page .notice {
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}

.legal-content {
  max-width: 720px;
}

/* .prose holds flowing paragraphs only now — lists/steps/capabilities moved
   to their own full-width grids below, which is what actually fixed the
   "empty right half of the page" look. Centering the text block on top of
   that just left it floating out of line with the left-aligned headings
   and grids around it, so it stays left-aligned like everything else. */
.prose {
  max-width: 720px;
}

/* ==========================================================================
   Content-page component grids — capability checklists, the three-part
   "front-end / back-end / full-stack" style breakdowns, and numbered
   process steps all used to live as plain lists squeezed into .prose's
   720px measure. Pulled out as their own full-width grids so a content
   page has actual boxes to look at, not just a column of gray text.
   ========================================================================== */

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0 40px;
}

.capability-item {
  position: relative;
  padding: 16px 18px 16px 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-card);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  transition: border-color var(--transition);
}

.capability-item:hover {
  border-color: rgba(77, 124, 255, 0.25);
}

.capability-item::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 22px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Reuses .capability-grid/.capability-item's checklist look for the contact
   page's "What to include" list, single-column since it lives in the
   narrower contact-info column rather than a full-width .content-page
   section. Combined-class selector so it wins over .capability-grid's own
   grid-template-columns regardless of source order. */
.capability-grid.capability-grid--single {
  grid-template-columns: 1fr;
  margin-top: 0;
}

.delivery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 40px;
}

.delivery-card {
  padding: 22px 24px;
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-bg-card);
}

.delivery-card h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 10px;
}

.delivery-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0;
}

.process-steps {
  list-style: none;
  padding-left: 0;
  margin: 24px 0 40px;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 40px;
}

.process-steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 44px;
}

.process-steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
}

@media (max-width: 900px) {
  .capability-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .delivery-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .capability-grid {
    grid-template-columns: 1fr;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 32px;
  transition: color 0.3s;
}

.back-link:hover {
  color: var(--color-white);
}

.cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 32px;
  font-size: 14px;
}

.cookie-table th,
.cookie-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.cookie-table th {
  color: var(--color-white);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cookie-table code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-accent);
  background: rgba(77, 124, 255, 0.08);
  padding: 2px 6px;
  border-radius: 3px;
}

/* ==========================================================================
   Error page (404)
   ========================================================================== */

.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.error-code {
  font-family: var(--font-mono);
  font-size: clamp(80px, 15vw, 160px);
  font-weight: 700;
  color: rgba(77, 124, 255, 0.15);
  line-height: 1;
  margin-bottom: 16px;
}

.error-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 12px;
}

.error-text {
  font-size: 15px;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
}

.error-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  transition: color 0.3s;
}

.error-link:hover {
  color: var(--color-white);
}

/* ==========================================================================
   Arrow / "more" links — reused across Home, About, Services, Contact for
   "More about us", "View all services", "Related services", etc.
   ========================================================================== */

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 24px;
  transition: gap 0.3s, color 0.3s;
}

.text-link:hover {
  gap: 10px;
  color: var(--color-white);
}

.related-services {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}

.related-services .text-link {
  margin-top: 0;
}

/* ==========================================================================
   Service cards as links (each card now opens its own service page)
   ========================================================================== */

a.service-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   Compact final CTA (Home) — the full contact form lives on /contact now;
   Home keeps a short call to action instead. See recomendation/structure.md.
   ========================================================================== */

.cta-final {
  background: var(--color-bg-section-alt);
  text-align: center;
}

.cta-final-inner {
  max-width: 640px;
  margin: 0 auto;
}

.cta-final-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  color: var(--color-white);
  margin: 16px 0;
  letter-spacing: -0.02em;
}

.cta-final-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin-bottom: 32px;
}

.cta-final-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cta-final-email {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-secondary);
  transition: color 0.3s;
}

.cta-final-email:hover {
  color: var(--color-white);
}

/* ==========================================================================
   Page actions — a left-aligned button row for content pages (About,
   Services overview, service detail pages). .hero-actions is the same idea
   but centered for the Hero, so this isn't a duplicate of that component.
   ========================================================================== */

.page-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 56px;
}

/* Tighter coupling to the intro paragraph right above it inside a hero,
   vs. the 56px used when .page-actions closes out a page's content. */
.page-hero .page-actions {
  margin-top: 32px;
}