/* CyberWipe UI Kit v2 — Brutalist Terminal Ops */
/* Fonts are self-hosted in vendor/fonts/ and linked from index.html. */

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

:root {
  /* Font trial 2026-07-15: Helvetica across the app (was Space Mono / Space
     Grotesk — swap these two tokens back to revert). Labels styled "mono"
     keep their tracking/uppercase treatment, just in Helvetica. */
  --mono: 'Roboto Condensed', 'Space Mono', 'Courier New', monospace;
  --sans: 'Roboto Condensed', 'Space Grotesk', system-ui, sans-serif;
  --green: #3ecf8e;
  --green-raw: #00FF66;
  --teal: #5eead4;
  --bg: #060a12;
  --surface: #0a0e17;
  --surface-2: #0f1628;
  --border: #1a2235;
  --red: #FF3366;
  --amber: #fbbf24;
  --blue: #60a5fa;
  --purple: #a78bfa;
  --fg: #e8ecf4;
  /* Lifted for legibility: the old #6b7280 / #4b5563 were too low-contrast on
     the dark surfaces at the small sizes this UI uses. These keep the
     muted/dim hierarchy while being readable. */
  --muted: #9aa5b8;
  --dim: #6b7688;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  letter-spacing: -0.011em;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }

/* ======== LAYOUT ======== */
.contain { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.page { min-height: 100vh; position: relative; }
.nav-h { height: 72px; }

/* ======== TYPOGRAPHY — opinionated, not generic ======== */
.t-display {
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.t-display em {
  font-style: italic;
  color: var(--green);
  text-shadow: 0 0 40px rgba(62,207,142,0.3);
}
.t-section {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  border-left: 3px solid var(--green);
  padding-left: 12px;
}
.t-h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--fg);
}
.t-h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.t-body { font-size: 17px; color: var(--muted); line-height: 1.7; }
.t-mono { font-family: var(--mono); }
.t-label {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.t-green { color: var(--green); }
.t-red { color: var(--red); }
.t-amber { color: var(--amber); }

/* Gradient text — animated shimmer */
.glow-text {
  background: linear-gradient(90deg, var(--green), var(--teal), var(--green));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ======== BUTTONS ======== */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: var(--green); color: #030509;
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 2px solid var(--green);
  box-shadow: 4px 4px 0 var(--green-raw);
  transition: all 75ms linear;
}
.btn-primary:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--green-raw); }
.btn-primary:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--green-raw); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: transparent; color: var(--muted);
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 2px solid var(--border);
  box-shadow: 4px 4px 0 var(--border);
  transition: all 75ms linear;
}
.btn-outline:hover { border-color: var(--green); color: var(--green); box-shadow: 4px 4px 0 var(--green-raw); }

.btn-soft {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  background: rgba(62,207,142,0.08); color: var(--green);
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  border: 1px solid rgba(62,207,142,0.2); border-radius: 0;
  transition: all 0.2s ease;
}
.btn-soft:hover { background: rgba(62,207,142,0.15); border-color: rgba(62,207,142,0.4); }

/* ======== FORM ======== */
.input {
  width: 100%; padding: 14px 16px;
  background: var(--surface); color: var(--fg);
  font-family: var(--sans); font-size: 15px;
  border: 1px solid var(--border); border-radius: 0;
  outline: none; transition: border-color 0.2s;
}
.input::placeholder { color: var(--dim); }
.input:focus { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.input.err { border-color: var(--red); }
select.input { background-color: var(--surface); color: var(--fg); cursor: pointer; }
select.input option { background: var(--surface); color: var(--fg); }

/* ======== CARDS ======== */
.card-brutal {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px;
  position: relative;
  transition: all 75ms linear;
}
.card-brutal::before {
  content: ''; position: absolute; inset: 0;
  border: 1px solid transparent;
  box-shadow: 4px 4px 0 var(--border);
  transition: all 75ms linear; pointer-events: none;
}
.card-brutal:hover { transform: translate(-3px,-3px); }
.card-brutal:hover::before { box-shadow: 7px 7px 0 var(--green-raw); border-color: var(--green); }

/* ======== SECTION DIVIDERS ======== */
.divider {
  height: 1px; max-width: 1200px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(62,207,142,0.2) 50%, transparent);
}
.divider-solid { height: 1px; background: var(--border); }

/* ======== CAPABILITY GRID — distinctive asymmetric layout ======== */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.cap-cell {
  background: var(--surface);
  padding: 32px 28px;
  transition: all 75ms linear;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.cap-cell:hover {
  background: var(--surface-2);
  transform: translate(-3px,-3px);
  box-shadow: 3px 3px 0 var(--green-raw);
  z-index: 2;
}
.cap-cell .idx {
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  letter-spacing: 0.1em; margin-bottom: 48px;
}
.cap-cell .status {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  position: absolute; top: 28px; right: 28px;
}
.cap-cell h3 {
  font-family: var(--mono); font-size: 17px; font-weight: 400;
  color: var(--fg); margin-bottom: 6px;
}
.cap-cell p { font-size: 15px; color: var(--muted); line-height: 1.6; }

/* ======== HOW IT WORKS — sticky scroll ======== */
.hiw-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 200vh;
  position: relative;
}
.hiw-sticky {
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  overflow: hidden;
}
.hiw-phases {
  padding: 40px 48px 200px 48px;
}
.hiw-phase {
  min-height: 50vh;
  padding: 48px 0;
  display: flex;
  align-items: flex-start;
}
.hiw-phase-card {
  padding: 32px;
  border-left: 3px solid var(--border);
  transition: all 0.6s cubic-bezier(0.22,1,0.36,1);
}
.hiw-phase-card.active { border-left-color: var(--green); }
.hiw-phase-card.inactive { opacity: 0.25; }

/* ======== PRICING — asymmetric emphasis ======== */
.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.price-cell {
  background: var(--surface);
  padding: 32px 24px;
  display: flex; flex-direction: column;
  transition: all 75ms linear;
  position: relative;
}
.price-cell:hover {
  background: var(--surface-2);
  transform: translate(-2px,-2px);
  box-shadow: 2px 2px 0 var(--green-raw);
  z-index: 2;
}
.price-cell.pop {
  background: var(--bg);
  border-left: 3px solid var(--green);
  box-shadow: inset 0 0 60px rgba(62,207,142,0.03);
}

/* ======== ANIMATIONS ======== */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes cwNoteIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* cwScanY keyframe removed 2026-07-17 — its only consumer (PatternPlayer's
   sweeping scan line) was removed at user request. */

.anim-pulse { animation: pulse 2s ease-in-out infinite; }
.anim-blink { animation: blink 1s step-end infinite; }
.anim-float { animation: float 3s ease-in-out infinite; }

/* Neural dots */
.neural-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.neural-bg .d {
  position: absolute; border-radius: 0;
  background: var(--green);
  opacity: 0.06;
  animation: neuralDrift linear infinite;
}
@keyframes neuralDrift {
  0% { transform: translate(0,0); opacity: 0.04; }
  50% { transform: translate(var(--mx),var(--my)); opacity: 0.1; }
  100% { transform: translate(0,0); opacity: 0.04; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* Focus */
*:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Branded text selection */
::selection { background: var(--green); color: #030509; }

/* Light theme: swap in the logo variant drawn for light backgrounds. */
body[data-theme="light"] img[src*="logo-mark"] { content: url("assets/logo-mark-light.png"); }

/* ======== HERO — two-column with terminal window ======== */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 56px;
  align-items: center;
}
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Target-acquisition corner brackets on capability cells */
.cap-cell::before, .cap-cell::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--green);
  opacity: 0;
  transition: opacity 120ms linear, transform 120ms linear;
  pointer-events: none;
}
.cap-cell::before { top: 8px; left: 8px; border-right: none; border-bottom: none; transform: translate(5px,5px); }
.cap-cell::after { bottom: 8px; right: 8px; border-left: none; border-top: none; transform: translate(-5px,-5px); }
.cap-cell:hover::before, .cap-cell:hover::after { opacity: 1; transform: translate(0,0); }

/* ======== REDUCED MOTION ======== */
/* The site is animation-dense (boot sequence, scanlines, parallax, char
   reveals, pulsing dots). For users who ask the OS for reduced motion, all of
   it collapses to instant states. Canvas loops (CursorWeb) check the same
   media query in JS and skip mounting entirely. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ======== RESPONSIVE ======== */
/* The site previously shipped with zero viewport breakpoints — every grid
   held its desktop column count down to phone widths. Two tiers: ~900px
   (tablet, 2-up) and ~640px (phone, 1-up). */
@media (max-width: 900px) {
  .cap-grid   { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  /* How-It-Works on narrow screens: phases stacked, all fully visible. */
  .hiw-wrap   { grid-template-columns: 1fr; min-height: 0; }
  .hiw-sticky { position: static; height: 38vh; }
  .hiw-phases { padding: 20px 20px 40px; }
  .hiw-phase  { min-height: 0; padding: 14px 0; }
  .hiw-phase-card.inactive { opacity: 1; }
  /* The coloured edge marks the current phase. */
  .hiw-phase-card { transition: border-color 0.3s ease; }
}
@media (max-width: 640px) {
  .cap-grid   { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
}
/* ── Navbar on phones: links in a slide-out panel, logo + CONTACT in the bar ── */
@media (max-width: 700px) {
  /* Sticky instead of fixed + spacer. */
  nav { position: sticky !important; top: 0 !important; }
  nav .contain { height: 60px !important; }
  .nav-h { display: none; }
  .nav-linkuri { display: none !important; }
  nav [data-nav-desktop] { display: none !important; }
  .nav-hamburger { display: flex !important; }
}
@media (min-width: 701px) {
  .nav-hamburger, .nav-panou { display: none !important; }
}
.nav-hamburger { display: none; }
.nav-panou {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 8px 0 12px;
}
.nav-panou-link {
  display: flex;
  align-items: center;
  min-height: 48px;          /* comfortable touch target */
  padding: 0 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--border);
}
.nav-panou-jos {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 2px;
}
.nav-panou-login {
  flex: 1;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.nav-panou-tema {
  width: 46px;
  height: 46px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Forms on phones: 16px fields (no iOS focus zoom), larger checkboxes ── */
@media (max-width: 700px) {
  .input,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="search"], input[type="url"],
  input[type="number"], textarea, select {
    font-size: 16px !important;
  }
  input[type="checkbox"], input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
  }
}

/* Article list on phones: one column. */
@media (max-width: 700px) {
  .blog-rand {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 22px 20px !important;
  }
  .blog-rand > :last-child { text-align: left !important; }
  .blog-corp { padding: 0 20px 30px !important; }
}

/* No keyboard-shortcut hint on touch screens. */
@media (max-width: 820px), (hover: none), (pointer: coarse) {
  .paleta-hint { display: none !important; }
}

/* ---------- Phase 5 F1 — Print rules for Brand Protection Report ---------- */
/* Hide [data-print-region] in normal flow; reveal it (and only it) during print. */
[data-print-region] { display: none !important; }
@media print {
  /* Reset page margins (the report has its own 24mm/20mm padding) */
  @page { margin: 0; size: A4 portrait; }
  /* Reset html / body for clean print output */
  html, body { background: #ffffff !important; color: #0a0e17 !important; margin: 0 !important; padding: 0 !important; }
  /* Hide everything by default */
  body > * { visibility: hidden !important; }
  /* Reveal the print region and pull it back into the document flow */
  [data-print-region] {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    overflow: visible !important;
  }
  /* Show every descendant inside the print region */
  [data-print-region] * { visibility: visible !important; }
}


/* ── Responsive rules for buttons, display type and the footer ── */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .t-display   { font-size: clamp(26px, 6vw, 72px); letter-spacing: -0.02em; }
}
@media (max-width: 480px) {
  .footer-grid      { grid-template-columns: 1fr !important; }
  .footer-news-form { flex-direction: column !important; background: transparent !important; gap: 8px !important; }
  .footer-news-form .input       { width: 100% !important; }
  .footer-news-form .btn-primary { width: 100%; justify-content: center; }
  .btn-primary, .btn-outline     { padding: 12px 20px; font-size: 11px; }
}

/* ======== STATUS BADGES ON THE LIGHT THEME ========
   Solid colour from `--pill` (set inline) with white text. Dark theme unaffected. */
body[data-theme="light"] .status-pill {
  background: var(--pill) !important;
  color: #fff !important;
  border-color: transparent !important;
}
body[data-theme="light"] .status-chip {
  background: var(--pill) !important;
  color: #fff !important;
  border-color: transparent !important;
}
/* dot and count stay white on a filled background */
body[data-theme="light"] .status-chip .status-dot  { background: #fff !important; opacity: 0.85; }
body[data-theme="light"] .status-chip .status-count { color: #fff !important; opacity: 0.85; }
/* an active filter shows a dark outline, not a colour change */
body[data-theme="light"] .status-chip.on {
  outline: 2px solid rgba(14,16,18,0.55);
  outline-offset: 1px;
}