/* Parisar — public site
   The console is equipment and looks like equipment. This is the front door.
   Same type system and the same signal colours, but open, quiet and confident
   rather than dense. The one loud element is the verdict panel in the hero —
   borrowed straight from the product, because the most persuasive thing we
   have is the actual screen a guard looks at. */

body.site { background: #fff; }

.site .wrap { max-width: 1060px; margin: 0 auto; padding: 0 1.1rem; }

/* ------------------------------------------------------------------ nav */

.sitebar {
  display: flex; align-items: center; gap: 0.2rem;
  max-width: 1060px; margin: 0 auto; padding: 1.1rem;
}
.sitebrand {
      font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
    /*justify-content: center;*/
    align-items: center;
}
.sitebrand span { color: var(--gate); }
.sitebar nav { margin-left: auto; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.sitebar nav a {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .06em;
  font-size: .88rem; color: var(--muted); padding: .2rem 0; border-bottom: 2px solid transparent;
}
.sitebar nav a:hover, .sitebar nav a.on { color: var(--ink); border-bottom-color: var(--gate); text-decoration: none; }
@media (max-width: 700px) { .sitebar { flex-direction: column; align-items: flex-start; gap: .8rem; } .sitebar nav { margin-left: 0; } }

/* ----------------------------------------------------------------- hero */

.hero { padding: 2.5rem 0 1rem; }
.hero .eyebrow {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .14em;
  font-size: .82rem; color: var(--gate); font-weight: 600;
}
.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.02; margin: .5rem 0 .8rem; max-width: 16ch;
}
.hero .lead { font-size: 1.15rem; max-width: 54ch; color: #37424E; }
.hero .herogrid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center; }
@media (max-width: 860px) { .hero .herogrid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* The signature: the real gate verdict, not a stock dashboard mockup. */
.demoframe {
  background: var(--ink); border-radius: 6px; padding: .7rem;
  box-shadow: 0 18px 40px -18px rgba(18,22,27,.55);
}
.demoframe .bar {
  display: flex; gap: .3rem; padding: 0 .2rem .55rem;
}
.demoframe .bar i { width: 9px; height: 9px; border-radius: 50%; background: #3A4753; display: block; }
.demoframe .screen { background: var(--paper); border-radius: 3px; padding: .7rem; }
.demoframe .verdict { margin-bottom: .6rem; }
.demoframe .verdict .headline { font-size: clamp(1.8rem, 5vw, 2.4rem); }
.demoframe .row2 {
  display: flex; gap: .5rem; font-family: var(--mono); font-size: .78rem; color: var(--muted);
}
.demoframe .row2 span { background: #fff; border: 1px solid var(--hair); border-radius: 3px; padding: .25rem .45rem; }

/* --------------------------------------------------------------- blocks */

.band { padding: 3rem 0; }
.band.tint { background: var(--paper); }
.band h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); max-width: 20ch; }
.band .sub { color: var(--muted); max-width: 60ch; margin-bottom: 1.6rem; }

.feat { background: #fff; border: 1px solid var(--hair); border-radius: var(--r); padding: 1.1rem; }
.feat h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.feat p { font-size: .92rem; color: #3A4753; margin: 0; }

/* Numbered only where the content really is a sequence. */
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--hair); }
.step:first-child { border-top: none; }
.step .n {
  counter-increment: step; font-family: var(--display); font-weight: 700;
  font-size: 1.6rem; color: var(--gate); line-height: 1;
}
.step .n::before { content: counter(step, decimal-leading-zero); }
.step h3 { margin-bottom: .2rem; }
.step p { margin: 0; color: #3A4753; font-size: .95rem; }

.audience { border: 1px solid var(--hair); border-radius: var(--r); padding: 1.4rem; background: #fff; }
.audience.ind { border-left: 4px solid var(--hold); }
.audience.res { border-left: 4px solid var(--gate); }
.audience ul { padding-left: 1.1rem; margin: .8rem 0; }
.audience li { margin-bottom: .35rem; font-size: .93rem; }

.faq { border-top: 1px solid var(--hair); padding: 1rem 0; }
.faq h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.faq p { margin: 0; color: #3A4753; font-size: .94rem; }

.honest { border-left: 4px solid var(--muted); background: var(--paper); padding: 1rem 1.1rem; border-radius: var(--r); }
.honest ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.honest li { font-size: .92rem; margin-bottom: .3rem; }

.enqform { background: #fff; border: 1px solid var(--hair); border-radius: var(--r); padding: 1.3rem; max-width: 640px; }
.enqform h3 { margin-top: 0; }

.cta { background: var(--ink); color: #fff; border-radius: var(--r); padding: 2rem 1.5rem; text-align: center; }
.cta h2 { color: #fff; margin-bottom: .4rem; }
.cta p { color: #AEBAC6; max-width: 48ch; margin: 0 auto 1.2rem; }

/* --------------------------------------------------------------- footer */

.sitefoot { background: var(--paper); border-top: 1px solid var(--hair); padding: 2.5rem 0 1.5rem; margin-top: 3rem; }
.sitefoot .citylinks { border-top: 1px solid var(--hair); margin-top: 1.5rem; padding-top: 1.2rem; }
.sitefoot .citylinks a { margin-right: .7rem; white-space: nowrap; }
.sitefoot p { color: #3A4753; }

@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lead, .demoframe { animation: rise .5s ease-out both; }
  .hero .lead { animation-delay: .06s; }
  .demoframe  { animation-delay: .12s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}