/* ============================================================
   cyber.css — Arcline cybersecurity theme
   Loaded LAST so it overrides the light tokens in home-v2.css
   and the per-page stylesheets. Dark, auditable, terminal-cool.
   ============================================================ */

/* ── 1. DESIGN TOKENS (dark cybersecurity palette) ── */
:root {
  --white:         #0b141d;   /* surfaces / cards */
  --bg:            #060b10;   /* page & alt-section background */
  --bg-card:       #0b141d;
  --border:        #1a2b3b;
  --border-subtle: #12202c;
  --text:          #9db2c7;
  --text-strong:   #e9f1f9;
  --text-muted:    #647b91;
  --accent:        #00d4ff;   /* cyan — the "arc" */
  --accent-dark:   #00b6e0;
  --accent-light:  #072530;
  --accent-border: #0b4356;
  --cyan:          #00d4ff;
  --green:         #34d97b;   /* "secure" green */
  --green-bg:      #07291a;
  --dark:          #02060a;   /* footer / CTA */
  --dark-2:        #0b141d;
  --dark-text:     #9db2c7;
  --dark-muted:    #647b91;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
  --shadow:    0 1px 3px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.45);
  --shadow-md: 0 10px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 18px 44px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,212,255,0.07);
  --glow:      0 0 0 1px rgba(0,212,255,0.25), 0 0 22px rgba(0,212,255,0.18);
  --t: 0.18s ease;
}

/* ── 2. BASE ── */
html { color-scheme: dark; }

body {
  background: #060b10;
  color: var(--text);
  background-image:
    radial-gradient(ellipse 90% 50% at 50% -12%, rgba(0,212,255,0.06), transparent 60%);
  background-attachment: fixed;
}

::selection { background: rgba(0,212,255,0.28); color: #eafcff; }

/* Subtle cyan scrollbar */
* { scrollbar-width: thin; scrollbar-color: #1a2b3b #060b10; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #1a2b3b; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #0b4356; }
*::-webkit-scrollbar-track { background: #060b10; }

/* ── 3. MONO VOICE (labels, numbers, eyebrows, tags) ── */
.eyebrow,
.sec-label,
.section-label-light,
.section-header__label,
.svc-group-header__label,
.svc-card-detail__num,
.quicknav__num,
.process-num,
.proof-bar__item,
.footer__col-title,
.hero__tag,
.nav__price-hint,
.pricing-card__featured-tag,
.svc-tag,
.story-stat__val,
.value-num,
.founder-card__item-label,
.team-card__initials,
.roadmap-phase__badge,
.roadmap-phase__range,
.addon-table__head,
.comp-table__head-label,
.form-label,
.faq-category-label {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

.eyebrow, .sec-label, .section-label-light, .section-header__label {
  color: var(--cyan) !important;
}

.section-title,
.sec-title,
.section-header__title { color: var(--text-strong); }

.section-sub,
.sec-subtitle,
.section-header__desc { color: var(--text); }

/* ── 4. NAV ── */
.nav {
  background: rgba(6, 11, 16, 0.82);
  border-bottom: 1px solid #12202c;
}
.nav__logo { color: #e9f1f9; }
.nav__links a { color: var(--text); }
.nav__links a:hover,
.nav__links a.active { color: var(--cyan); background: #0b141d; }
.nav__links a.active { color: var(--cyan); }
.nav__hamburger span { background: #e9f1f9; }
.nav__mobile { background: #060b10; border-top: 1px solid #12202c; }
.nav__mobile a { color: #e9f1f9; border-bottom: 1px solid #12202c; }
.nav__mobile a.active { color: var(--cyan); }

/* ── 5. BUTTONS ── */
.btn--primary {
  background: linear-gradient(180deg, #00d4ff, #00a8d6);
  color: #02131a;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 0 18px rgba(0,212,255,0.25);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #2adcff, #00b6e0);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 28px rgba(0,212,255,0.4);
  transform: translateY(-1px);
}
.btn--outline {
  color: #b8d2e5;
  border: 1.5px solid #1a2b3b;
}
.btn--outline:hover { border-color: #00d4ff; color: #e9f1f9; background: rgba(0,212,255,0.06); }
.btn--ghost:hover { color: #e9f1f9; background: #0b141d; }
.btn--dark-outline { color: #b8d2e5; border-color: rgba(0,212,255,0.35); }
.btn--dark-outline:hover { border-color: #00d4ff; background: rgba(0,212,255,0.08); }

/* ── 6. HERO (homepage) ── */
.hero {
  background: #060b10;
  background-image:
    linear-gradient(rgba(0,212,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.hero::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,212,255,0.10) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 78%);
}
.hero__tag {
  background: #072530;
  color: var(--cyan);
  border: 1px solid #0b4356;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.14em;
}
.hero__tag::before { content: '>_ '; opacity: 0.7; }
.hero__title { color: #eef5fb; }
.hero__title em {
  color: var(--cyan);
  text-shadow: 0 0 30px rgba(0,212,255,0.35);
}
.hero__subtitle { color: var(--text); }
.hero__trust { border-top: 1px solid #12202c; }
.hero__trust-item { color: var(--text-muted); }
.hero__trust-item .check { color: var(--green); text-shadow: 0 0 12px rgba(52,217,123,0.5); }

/* ── 7. PROOF BAR ── */
.proof-bar { background: #04090d; border-top: 1px solid #12202c; border-bottom: 1px solid #12202c; }
.proof-bar__item { color: var(--text-muted); }
.proof-bar__dot { background: var(--cyan); box-shadow: 0 0 8px rgba(0,212,255,0.8); }

/* ── 8. SECTION HEADERS / PAIN CARDS ── */
.section--alt { background: #04090d; }
.pain-card {
  background: #0b141d;
  border: 1px solid #1a2b3b;
}
.pain-card:hover { border-color: #0b4356; box-shadow: var(--shadow-md); }
.pain-card__quote { color: #e9f1f9; }
.pain-card__quote::before,
.pain-card__quote::after { color: var(--cyan); }
.pain-card__label { color: var(--cyan); }
.pain-card__solution { color: var(--text); }

/* ── 9. SERVICE CARDS (homepage grid) ── */
.svc-card {
  background: #0b141d;
  border: 1px solid #1a2b3b;
}
.svc-card:hover {
  border-color: #0b4356;
  box-shadow: var(--shadow-lg);
}
.svc-card__icon { background: #072530; color: var(--cyan); }
.svc-card__title { color: #e9f1f9; }
.svc-card__desc { color: var(--text); }
.svc-card__link { color: var(--cyan); }

/* ── 10. PROCESS STEPS ── */
.process-steps::before { background: #1a2b3b; }
.process-step { color: var(--text); }
.process-num { background: #0b4356; color: #d8fbff; box-shadow: 0 0 14px rgba(0,212,255,0.3); }
.process-step:first-child .process-num { background: #00a8d6; color: #02131a; }
.process-step:last-child .process-num { background: var(--green); color: #02130b; }
.process-title { color: #e9f1f9; }
.process-desc { color: var(--text); }

/* ── 11. GUARANTEES ── */
.guarantee-card { background: #0b141d; border: 1px solid #1a2b3b; }
.guarantee-card__check { background: #07291a; color: var(--green); box-shadow: 0 0 14px rgba(52,217,123,0.3); }
.guarantee-card__title { color: #e9f1f9; }
.guarantee-card__desc { color: var(--text); }

/* ── 12. ABOUT PREVIEW + PRICING PREVIEW ── */
.about-card { background: #04090d; border: 1px solid #1a2b3b; }
.about-card__name { color: #e9f1f9; }
.about-card__role { color: var(--cyan); border-bottom: 1px solid #1a2b3b; }
.about-fact__label { color: var(--text-muted); }
.about-fact__val { color: #cfe0ee; }
.about-text { color: var(--text); }

.pricing-preview-card { background: #0b141d; border: 1px solid #1a2b3b; }
.pricing-preview-card:hover { border-color: #0b4356; box-shadow: var(--shadow-md); }
.pricing-preview-card__label { color: var(--text-muted); }
.pricing-preview-card__price { color: #eef5fb; }
.pricing-preview-card__desc { color: var(--text); border-top: 1px solid #1a2b3b; }

/* ── 13. PAGE HEROS (inner pages) ── */
.page-hero,
.page-hero-light {
  background: #060b10;
  background-image:
    radial-gradient(ellipse 70% 60% at 50% -10%, rgba(0,212,255,0.08), transparent 70%),
    linear-gradient(rgba(0,212,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.035) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}
.page-hero {
  padding: 3.5rem 0 3rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.page-hero__eyebrow { color: var(--cyan); }
.page-hero__title { color: #eef5fb; }
.page-hero__subtitle { color: var(--text); }
.breadcrumb { color: var(--text-muted); }
.breadcrumb a { color: var(--cyan); }

/* ── 14. SERVICES PAGE ── */
.quicknav__chip {
  background: #0b141d;
  border: 1px solid #1a2b3b;
  color: var(--text);
}
.quicknav__chip:hover { border-color: #0b4356; color: #e9f1f9; }
.quicknav__num { color: var(--cyan); }

.svc-group-header { border-bottom: 1px solid #1a2b3b; }
.svc-group-header__label { color: var(--cyan); }
.svc-group-header__count { color: var(--text-muted); }

.svc-card-detail { background: #0b141d; border: 1px solid #1a2b3b; }
.svc-card-detail:hover { border-color: #0b4356; }
.svc-card-detail__num { color: var(--cyan); }
.svc-card-detail__name { color: #e9f1f9; }
.svc-card-detail__desc { color: var(--text); }
.svc-for-label { color: var(--cyan); }
.svc-for-val { color: #cfe0ee; }
.svc-engagement { color: var(--text-muted); }
.svc-outcomes-label { color: #e9f1f9; }
.svc-outcome-check { color: var(--green); }
.svc-outcome-text { color: var(--text); }

.svc-tag { background: #0b141d; border: 1px solid #1a2b3b; color: var(--text-muted); }
.svc-tag--project { color: var(--cyan); border-color: #0b4356; }
.svc-tag--managed { color: var(--green); border-color: #14532d; }
.svc-tag--retainer { color: #e7c36a; border-color: #4d3d14; }

.not-sure-banner { background: #072530; border: 1px solid #0b4356; }
.not-sure-banner__text { color: #cfe0ee; }

.comp-table th, .comp-table td { border-color: #1a2b3b; }
.comp-table thead th { background: #0b141d; }
.comp-check { color: var(--green); }

.stack-section { background: #04090d; }
.stack-row { border-color: #1a2b3b; }
.stack-row__key { color: var(--cyan); }
.stack-row__val { color: #cfe0ee; }

/* ── 15. PRICING PAGE ── */
.billing-toggle {
  background: #0b141d;
  border: 1px solid #1a2b3b;
  margin-bottom: 2.25rem;
}
.billing-opt { color: var(--text); }
.billing-opt.active { background: #00d4ff; color: #02131a; }

.svc-tabs { border-bottom: 1px solid #1a2b3b; }
.svc-tab { color: var(--text-muted); }
.svc-tab:hover { color: #e9f1f9; }
.svc-tab.active { color: var(--cyan); border-color: #00d4ff; }

.pricing-card { background: #0b141d; border: 1px solid #1a2b3b; }
.pricing-card:hover { border-color: #0b4356; box-shadow: var(--shadow-md); }
.pricing-card--featured { border-color: #00a8d6; box-shadow: 0 0 0 1px rgba(0,212,255,0.25), 0 12px 34px rgba(0,0,0,0.45); }
.pricing-card__name {
  color: #e9f1f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
.pricing-card--featured .pricing-card__name { color: var(--cyan); }
.pricing-card__featured-tag {
  background: #00d4ff;
  color: #02131a;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.65rem;
  padding: 0.12em 0.55em;
}
.pricing-card__currency,
.pricing-card__amount { color: #eef5fb; }
.pricing-card__period,
.pricing-card__billed { color: var(--text-muted); }
.pricing-card__desc { color: var(--text); border-bottom: 1px solid #1a2b3b; }
.pf { color: var(--text); }
.pf:not(.pf--off) .pf__check { color: var(--green); }
.pf--off { color: var(--text-muted); }
.pricing-card__game-rec { color: var(--cyan); border-top: 1px solid #1a2b3b; }
.tab-note { color: var(--text-muted); }
.tab-note a { color: var(--cyan); }

.it-info-box { background: #0b141d; border: 1px solid #1a2b3b; }
.it-info-box__range { color: var(--text); }
.it-svc-row { border-bottom: 1px solid #1a2b3b; }
.it-svc-row__name { color: #e9f1f9; }
.it-svc-row__desc { color: var(--text); }

.addon-table__head { color: var(--text-muted); }
.addon-row { border-color: #1a2b3b; }
.addon-name { color: #e9f1f9; }
.addon-desc, .addon-price { color: var(--text); }

.faq-q { color: #e9f1f9; }
.faq-a { color: var(--text); }

.cta-banner { background: #04090d; }
.cta-banner__title { color: #eef5fb; }
.cta-banner__sub { color: var(--text); }

/* ── 16. ABOUT / INNER PAGES ── */
.story-title { color: #e9f1f9; }
.story-text { color: var(--text); }
.story-stat { background: #0b141d; border: 1px solid #1a2b3b; }
.story-stat__val { color: var(--cyan); }
.story-stat__label { color: var(--text-muted); }

.mission-quote { border-left: 3px solid #00d4ff; }
.mission-quote p { color: #cfe0ee; }
.mission-quote footer { color: var(--text-muted); }

.value-card { background: #0b141d; border: 1px solid #1a2b3b; }
.value-num { color: var(--cyan); }
.value-title { color: #e9f1f9; }
.value-desc { color: var(--text); }

.roadmap-phase { background: #0b141d; border: 1px solid #1a2b3b; }
.roadmap-phase__badge { background: #072530; color: var(--cyan); }
.roadmap-phase__range { color: var(--text-muted); }
.roadmap-phase__items li { color: var(--text); }
.roadmap-phase__items li.done { color: var(--green); }

.founder-card { background: #0b141d; border: 1px solid #1a2b3b; }
.founder-card__name { color: #e9f1f9; }
.founder-card__role { color: var(--cyan); }
.founder-card__item-label { color: var(--text-muted); }
.founder-card__item-val { color: #cfe0ee; }
.team-card { background: #0b141d; border: 1px solid #1a2b3b; }
.team-card__name { color: #e9f1f9; }
.team-card__role { color: var(--cyan); }
.team-card__desc { color: var(--text); }
.team-card__initials { background: #072530; color: var(--cyan); }

.channel-card { background: #0b141d; border: 1px solid #1a2b3b; }
.channel-title { color: #e9f1f9; }
.channel-desc { color: var(--text); }
.channel-action { color: var(--cyan); }
.email-row { border-color: #1a2b3b; }
.email-dept { color: var(--text-muted); }
.email-addr { color: #cfe0ee; }

.form-head__title { color: #e9f1f9; }
.form-input, .form-select, .form-textarea {
  background: #0b141d;
  border: 1px solid #1a2b3b;
  color: #e9f1f9;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: #00d4ff;
  box-shadow: 0 0 0 3px rgba(0,212,255,0.15);
}
.form-input::placeholder, .form-textarea::placeholder { color: #647b91; }
.form-label { color: #cfe0ee; }

/* ── 17. FINAL CTA + FOOTER ── */
.cta-final {
  background: #02060a;
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 120%, rgba(0,212,255,0.08), transparent 70%);
}
.cta-final__eyebrow { color: var(--cyan); }
.cta-final__title { color: #eef5fb; }
.cta-final__sub { color: #7d94a8; }
.cta-final__note { color: #5b7186; }
.cta-final .btn--outline { color: #b8d2e5; border-color: rgba(0,212,255,0.35); }
.cta-final .btn--outline:hover { border-color: #00d4ff; background: rgba(0,212,255,0.08); }

.footer {
  background: #02060a;
  border-top: 1px solid #12202c;
}
.footer__logo { color: #eef5fb; }
.footer__tagline { color: #7d94a8; }
.footer__col-title { color: #5b7186; }
.footer__link { color: #7d94a8; }
.footer__link:hover { color: #00d4ff; }
.footer__copy { color: #5b7186; }
.footer__legal a { color: #5b7186; }
.footer__legal a:hover { color: #9db2c7; }
.footer__crafted { color: #3c5264; border-top: 1px solid #0b141d; }
.footer__crafted a { color: #647b91; }
.footer__crafted a:hover { color: #00d4ff; }

/* ── 18. GENERIC LIGHT→DARK FIXUPS (sub-CSS hardcodes) ── */
.svc-card:hover, .industry-card:hover, .pricing-card:hover { border-color: #0b4356; }
.svc-tag { background: #0b141d; }

/* Light badges used on dark surfaces → dark equivalents */
.roadmap-phase--launch .roadmap-phase__badge { background: #07291a; color: var(--green); }
.roadmap-phase--launch { border-top-color: var(--green); }

/* ── 19. MOTION ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── 20. CONTRAST & GLOW FIXUPS ── */
.it-svc-row__cta { color: #02131a; }
.it-svc-row__cta:hover { background: var(--accent-dark); color: #02131a; }

.process-step__num,
.referral-step__num {
  background: #0b4356;
  color: #d8fbff;
  box-shadow: 0 0 14px rgba(0,212,255,0.3);
}

.page-hero::before,
.page-hero-light::before {
  background: radial-gradient(ellipse 70% 80% at 50% -20%, rgba(0,212,255,0.08), transparent 65%);
}

.billing-opt.active .billing-save {
  background: rgba(2, 19, 26, 0.25);
  color: #02131a;
}