/*
 * DealUno × HK — Operator visual system
 * Shared visual language with Deal Operator while keeping DealUno's own product UI.
 */

:root {
  --ink: #0a2043;
  --ink-2: #06152f;
  --paper: #ffffff;
  --paper-2: #edf4ff;
  --white: #ffffff;
  --acid: #68d8ff;
  --acid-2: #0755f5;
  --violet: #0755f5;
  --cyan: #68d8ff;
  --muted: #52647e;
  --line: #dae4f2;
  --dark-line: #38557a;

  --brand: #0755f5;
  --brand-deep: #0639bd;
  --operator-navy: #06152f;
  --operator-navy-2: #082752;
  --operator-cyan: #68d8ff;
  --operator-surface: #f5f8fd;
  --operator-soft: #edf4ff;
  --operator-card: #f4f8ff;
  --operator-border: #dae4f2;
  --operator-text: #0a2043;
  --operator-muted: #52647e;
}

::selection {
  background: #b9e8ff;
  color: #06152f;
}

body {
  background: #fff;
  color: var(--operator-text);
}

:is(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid #4096ff;
  outline-offset: 4px;
}

/* Header — same calm product-family language as Deal Operator. */
.topbar {
  height: 80px;
  padding: 0 max(28px, calc((100vw - 1240px) / 2));
  background: rgba(255,255,255,.97);
  color: var(--operator-text);
  border-bottom: 1px solid var(--operator-border);
  backdrop-filter: blur(18px);
}

.topbar nav {
  gap: 28px;
}

.topbar nav a {
  color: #435570;
  font-weight: 600;
}

.topbar nav a:hover,
.topbar nav a[aria-current="page"],
.topbar nav a.active-link {
  color: var(--brand);
}

.header-cta,
.button.primary {
  background: var(--brand);
  color: #fff;
  border-radius: 8px;
  box-shadow: none;
}

.header-cta:hover,
.button.primary:hover {
  background: var(--brand-deep);
  transform: none;
}

.mobile-nav summary {
  color: #435570;
}

/* Main DealUno hero: Deal Operator palette, DealUno product presentation. */
.hero,
.product-hero,
.about-hero {
  background: linear-gradient(145deg, var(--operator-navy), var(--operator-navy-2));
  color: #fff;
}

.hero {
  min-height: 0;
  padding-top: 76px;
}

.hero-grid {
  background-image:
    linear-gradient(#68d8ff08 1px, transparent 1px),
    linear-gradient(90deg, #68d8ff08 1px, transparent 1px);
  background-size: 84px 84px;
  opacity: 1;
  mask-image: linear-gradient(#0009, transparent 86%);
}

.hero-glow {
  opacity: .09;
  filter: blur(110px);
}

.glow-a {
  background: #0755f5;
}

.glow-b {
  background: #68d8ff;
}

.hero .eyebrow,
.product-hero .eyebrow,
.about-hero .eyebrow {
  color: #c5d5eb;
}

.hero .eyebrow i,
.product-hero .eyebrow i,
.about-hero .eyebrow i {
  background: var(--operator-cyan);
  box-shadow: none;
}

.hero h1 span,
.product-hero h1 span,
.about-hero h1 em,
.about-hero h1 span {
  color: var(--operator-cyan);
}

.hero-lead,
.product-hero > p:not(.eyebrow),
.product-hero > div > p:not(.eyebrow),
.about-hero > p:not(.eyebrow) {
  color: #c0cde0;
}

.hero-actions .text-link,
.product-hero .text-link,
.about-hero .quiet-link {
  color: #e1edff;
  border-color: #7996bb;
}

.hero-trust {
  color: #b9cbe3;
}

.hero-trust span {
  border-color: #38557a;
}

/* Product preview */
.app-shell,
.cockpit-demo {
  background: #0d284c;
  border-color: #38557a;
  box-shadow: 0 28px 90px #000b2040;
}

.app-top {
  background: #f7faff;
  color: #455d7d;
  border-color: #d5e3f7;
}

.app-top .session-live {
  color: #4b6381;
}

.app-nav,
.demo-body aside {
  border-color: #38557a;
}

.app-nav span.active {
  background: var(--brand);
  color: #fff;
}

.lead-panel,
.script-panel,
.phone-panel,
.demo-script,
.demo-body aside {
  background: #0d284c;
}

.script-panel,
.phone-panel,
.lead-facts,
.promise-card,
.demo-body aside,
.demo-toolbar,
.demo-actions {
  border-color: #38557a;
}

.tabs button.active {
  background: #173d68;
}

.promise-card {
  background: #102f58;
}

.quick-actions a,
.quick-actions button {
  background: #173d68;
  border-color: #2b527f;
}

.quick-actions a:hover,
.quick-actions button:hover {
  background: #1c4778;
  border-color: #68d8ff;
}

.label-right {
  background: #ddf4ff;
  color: #173c70;
}

/* Light editorial sections */
.statement,
.process-overview,
.product-links,
.package-teaser,
.radar-section,
.detail-section,
.role-section,
.reviewed-origin,
.demo-path,
.faq,
.origin,
.build-principles {
  background: #fff;
}

.section-tag,
.moment-type,
.product-page .section-tag {
  color: #486386;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.statement h2 em,
.compact-heading h2 span,
.moments-head h2 span,
.onboarding h2 span,
.origin h2 span,
.build-principles h2 span,
.demo-path h2 span {
  color: #2860ae;
}

.statement > div > p,
.compact-heading > p:last-child,
.product-page section > div > p,
.origin-grid p {
  color: var(--operator-muted);
}

/* Cards and product modules */
.feature-links > a,
.package-preview,
.radar-example,
.radar-visual,
.callback-example,
.mail-example,
.performance-board,
.factor-example,
.radar-setup-options,
.detail-grid article,
.role-flow li,
.auth-card {
  background: var(--operator-card);
  border-color: #d5e3f7;
  border-radius: 12px;
  box-shadow: none;
}

.feature-links > a:hover,
.role-flow li:hover {
  background: #eaf2ff;
  border-color: var(--brand);
}

.feature-kicker,
.role-name,
.radar-stages > li > span,
.detail-grid article > span {
  color: #3971ba;
}

.mini-score,
.mini-time {
  background: #e8f2ff;
  border-color: #c8defb;
}

.mini-score strong,
.mini-time strong {
  color: #0755ce;
}

.feature-link-label,
.inline-demo,
.page-next {
  color: #0755ce;
  border-color: #87ace9;
}

.hero-strip {
  background: #eff5ff;
  border-bottom: 1px solid #d4e2f7;
  color: #173c70;
}

.hero-strip > div span + span {
  border-color: #c2d4ed;
}

/* Dark workflow sections */
.system,
.pricing,
.chapters {
  background: linear-gradient(155deg, #06152f, #0b2850);
  color: #fff;
}

.system .section-tag,
.pricing .section-tag,
.chapters .section-tag {
  color: #91a9c8;
}

.system .section-intro h2 span,
.pricing h1 span,
.pricing h2 span,
.chapters h2 em {
  color: var(--operator-cyan);
}

.journey-steps button {
  background: #0d284c;
  border-color: #38557a;
  color: #dfe9f6;
}

.journey-steps [aria-selected="true"] {
  background: var(--brand);
  border-color: #558eff;
  color: #fff;
}

.journey-steps [aria-selected="true"] span,
.journey-steps [aria-selected="true"] small {
  color: #e0ecff;
}

.journey-panel {
  background: #f7faff;
}

.journey-result {
  background: #e8f2ff;
  border-color: var(--brand);
  color: #173c70;
}

/* Lead Radar */
.score-display,
.radar-visual-bottom,
.example-top {
  border-color: #d5e3f7;
}

.score-display strong,
.radar-contact b,
.radar-stages > li > span {
  color: #0755ce;
}

.score-scale i.filled,
.radar-dot,
.radar-sweep {
  background-color: var(--brand);
}

.radar-grid i,
.radar-grid {
  border-color: #bad7fc;
}

.radar-center {
  background: var(--brand);
  color: #fff;
}

/* Service / explanatory bands */
.service-band,
.team-performance,
.story-principles {
  background: var(--operator-soft);
  border-color: #c8defb;
}

.team-performance {
  color: var(--operator-text);
}

.metric-row article,
.chart {
  border-color: #cbdcf2;
  background-color: #fff;
}

.metric-row span {
  background: #e6f0ff;
  color: #205ab9;
}

.chart-bars i:nth-last-child(-n+2) {
  background: var(--brand);
}

.coach-note {
  background: #102f58;
}

.role-tabs button.active {
  background: var(--brand);
  border-color: var(--brand);
}

/* Pricing */
.reviewed-pricing .pricing-head > p:last-child,
.pricing-footnote,
.price-context,
.annual-option {
  color: #b7c8df;
}

.plan,
.offer-card {
  background: #fff;
  border: 1px solid #dfe7f3;
  color: var(--operator-text);
}

.plan.featured,
.offer-card.featured {
  background: #ecf5ff;
  border-color: #6ac8ff;
  box-shadow: 0 18px 60px #008bff18;
}

.choice {
  background: var(--brand);
  color: #fff;
}

.featured .plan-name small {
  background: #d7e8ff;
  color: #18509f;
}

.plan > a,
.offer-card > a {
  background: #112c51;
  color: #fff;
  border-radius: 8px;
}

.featured > a {
  background: var(--brand);
  color: #fff;
}

.plan > a:hover,
.offer-card > a:hover {
  background: var(--brand-deep);
}

.plan li:before {
  color: var(--brand);
}

.plan-details {
  border-color: #d5e3f7;
}

/* CTAs */
.final-cta,
.about-cta,
.page-cta {
  background: #e9f3ff;
  color: var(--operator-text);
}

.final-cta h2 span,
.about-cta h2 em,
.page-cta h2 span {
  color: var(--brand);
}

.final-cta .eyebrow,
.final-cta > p:not(.eyebrow),
.final-cta > small,
.about-cta > p:not(.section-label),
.page-cta > p {
  color: #405f83;
}

.final-cta .eyebrow i {
  background: var(--brand);
}

.dark-button,
.page-cta .button.primary {
  background: var(--brand);
  color: #fff;
  border-radius: 8px;
}

.dark-button:hover,
.page-cta .button.primary:hover {
  background: var(--brand-deep);
}

/* Footer */
footer {
  background: #fff;
  color: var(--operator-text);
  border-top: 1px solid #d4e3f7;
}

footer > p,
footer > small,
footer > div a {
  color: #526882;
}

footer > div a:hover {
  color: var(--brand);
}

/* Mobile keeps the same hierarchy without shrinking the identity. */
@media (max-width: 1100px) {
  .topbar {
    padding-inline: 28px;
  }
  .topbar nav {
    gap: 20px;
  }
}

@media (max-width: 800px) {
  .topbar {
    height: 72px;
    padding-inline: 20px;
    gap: 14px;
  }

  .hero {
    padding-top: 56px;
  }

  .product-hero,
  .about-hero {
    padding-top: 58px;
  }
}

@media (max-width: 520px) {
  .topbar {
    padding-inline: 16px;
  }

  .header-cta {
    font-size: 11px;
    padding: 11px 12px;
  }

  .hero {
    padding-top: 46px;
  }

  .hero h1,
  .product-hero h1 {
    letter-spacing: -.055em;
  }

  .hero-actions {
    gap: 15px;
  }

  .hero-actions .button {
    min-width: 230px;
  }

  .feature-links > a,
  .package-preview,
  .radar-example,
  .callback-example,
  .mail-example,
  .performance-board {
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}