/* replai art direction: a reputation studio, not a generic SaaS page. */
:root { --ink-night: #061226; --ink-midnight: #0a1c3a; --electric: #72a5ff; --acid: #c7ff87; --paper: #f5f3ed; --paper-blue: #eaf1ff; }

body {
  background:
    linear-gradient(180deg, var(--ink-night) 0, #0d2247 720px, var(--paper) 720px, var(--paper) 100%);
}

.page-glow { display: none; }

.site-header {
  position: relative;
  z-index: 4;
}

/* Give compact header labels enough air to scan at a glance. */
.site-nav {
  gap: 32px;
}

.site-nav a,
.sign-in,
.site-header .button-small {
  letter-spacing: .012em;
  word-spacing: .18em;
}

.nav-actions {
  gap: 22px;
}

.site-header .brand,
.site-nav a,
.sign-in { color: #f5f8ff; }

.site-nav a { opacity: .76; }
.site-nav a:hover,
.sign-in:hover { color: var(--acid); opacity: 1; }

.site-header .brand-mark {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.brand-mark {
  display: block;
  width: 40px;
  height: 35px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.brand-mark svg,
.app-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.duo-mark { overflow: visible; }
.duo-mark .bubble-back { fill: #8d83eb; }
.duo-mark .bubble-front { fill: var(--acid); }
.duo-mark circle { fill: #092045; }

.app-brand .app-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 19px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-style: normal;
}

.site-footer .brand-mark { width: 29px; height: 25px; }

.site-header .button-small {
  border: 1px solid rgba(199, 255, 135, .65);
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--acid);
}

.site-header .button-small:hover {
  background: var(--acid);
  box-shadow: 0 10px 22px rgba(199, 255, 135, .17);
  color: #0c2134;
}

.hero {
  position: relative;
  overflow: visible;
}

.hero::before {
  position: absolute;
  z-index: -1;
  inset: -76px -100vw -54px;
  background-image:
    linear-gradient(rgba(147, 185, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147, 185, 255, .055) 1px, transparent 1px);
  background-size: 42px 42px;
  content: '';
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

.hero::after {
  position: absolute;
  z-index: -1;
  top: 28px;
  right: 4%;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(89, 133, 255, .32), transparent 67%);
  content: '';
  filter: blur(4px);
}

.hero .eyebrow { color: #a7bce8; }
.hero h1 { color: #f5f7ff; }
.hero h1 em {
  color: var(--acid);
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  letter-spacing: -3px;
}
.hero h1 em:after { height: 5px; background: #c7ff8766; bottom: 1px; }
.hero-intro { color: #b4c2dc; }

.hero-copy::after {
  display: block;
  margin-top: 24px;
  color: #6f89bd;
  font: 500 8px "DM Mono", monospace;
  letter-spacing: 1.4px;
  content: 'SIGNAL IN. THOUGHTFUL RESPONSE OUT.';
}

.hero .button {
  border-radius: 7px;
  background: var(--acid);
  box-shadow: 0 12px 28px rgba(199, 255, 135, .18);
  color: #0b2031;
}
.hero .button:hover { box-shadow: 0 17px 33px rgba(199, 255, 135, .27); }
.hero .text-link { color: #d3e0fa; }
.button {
  min-height: 48px;
  padding-inline: 20px;
  font-size: 14px;
  letter-spacing: -.15px;
}
.text-link {
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: 13px;
}
.text-link:hover { color: var(--electric); }
.hero-proof { color: #aabbd8; }
.hero-proof strong { color: #edf3ff; }
.proof-avatars span { border-color: #0e2042; }

.hero-stage { transform: translateY(8px); }
.stage-label { color: #aebfe3; }
.hero-app {
  border: 1px solid rgba(209, 225, 255, .86);
  border-radius: 15px;
  box-shadow: 20px 24px 0 rgba(91, 130, 210, .13), 0 28px 70px rgba(0, 6, 20, .45);
}
.review-float {
  border-color: rgba(134, 168, 235, .42);
  border-radius: 6px;
  background: #102448eF;
  box-shadow: 0 17px 32px rgba(0, 6, 18, .36);
}
.review-float p { color: #e9f0ff; }
.review-float div { color: #ffc666; }
.review-float b { color: #a6c5ff; }
.review-float b.alert { color: #ffb4bd; }

.logo-strip { border-color: rgba(175, 202, 255, .2); color: #9fb2d6; }
.logo-strip div { color: #c4d0e7; }
.logo-strip i { background: #7189b7; }

.control-demo,
.how-it-works,
.modes,
.benefits,
.faq { background: var(--paper); }

.control-demo::before,
.how-it-works::before,
.benefits::before { border-color: #dadbd4; }
.control-demo::before { background: #e7eefb; }
.how-it-works::before { background: #f8f7f2; }
.benefits::before { background: #e7f0fb; }

.section-heading h2,
.how-heading h2,
.modes h2,
.benefits h2,
.faq h2 { color: #122647; }

.section-heading h2::first-line,
.how-heading h2::first-line { font-family: Fraunces, Georgia, serif; font-weight: 600; }

.eyebrow.dark { color: #4f70a9; }
.steps article,
.benefit-grid article,
.mode-switcher { border-radius: 5px; border-color: #ccd4df; box-shadow: none; }
.steps article { background: transparent; }
.steps article:hover,
.benefit-grid article:hover { border-color: #5782c8; box-shadow: 6px 6px 0 #c9daf2; }
.benefit-grid article { background: rgba(255, 255, 255, .35); }
.step-number { color: #6e8dbf; }
.step-icon,.benefit-grid article span { border-radius: 4px; }

.workflow-panel { border-radius: 5px; box-shadow: 8px 8px 0 #b8cbe9; }
.workflow-tabs { padding-inline: 15px; }
.workflow-tabs button.selected { border-color: var(--acid); }
.next-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  border: 1px solid #87a9dd;
  border-radius: 4px;
  padding: 7px 9px;
  color: #cde0ff;
}
.next-step:hover { border-color: var(--acid); color: var(--acid); }

.modes { background: #e2ebf8; }
.mode-switcher { background: #f6f3ec; box-shadow: 8px 8px 0 #b2c6e6; }
.mode-card { border-radius: 5px; }

.faq-list { border-top-color: #b9c4d3; }
.faq-list details { border-bottom-color: #b9c4d3; }
.faq-list summary { color: #172d50; }

.final-cta {
  border: 1px solid #1e4780;
  border-radius: 6px;
  background-color: #0b2041;
  background-image:
    linear-gradient(rgba(134, 174, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(134, 174, 255, .09) 1px, transparent 1px),
    radial-gradient(circle at 80% 10%, rgba(121, 93, 242, .76), transparent 35%);
  background-size: 30px 30px, 30px 30px, auto;
  box-shadow: 10px 10px 0 #b0c6e9;
}
.final-cta .light-button { border-radius: 5px; background: var(--acid); color: #102442; }
.final-cta>div:last-child span { color: #e2ebff; font-weight: 600; }

.experience-lab { margin-top: 0; }
.experience-lab .lab-stage { border-radius: 6px; }
.experience-lab .lab-workbench,
.experience-lab .lab-rail,
.experience-lab .lab-control { border-radius: 0; }

.site-footer { background: var(--paper); }

@media (max-width: 900px) {
  body { background: linear-gradient(180deg, var(--ink-night) 0, #0d2247 920px, var(--paper) 920px, var(--paper) 100%); }
  .site-nav { gap: 18px; }
  .nav-actions { gap: 14px; }
  .site-nav a,
  .sign-in,
  .site-header .button-small { word-spacing: .1em; }
}

@media (max-width: 650px) {
  body { background: linear-gradient(180deg, var(--ink-night) 0, #0d2247 760px, var(--paper) 760px, var(--paper) 100%); }
  .site-header .brand { color: #f5f8ff; }
  .menu-button { color: #e6efff; }
  .site-nav.menu-open { background: #0d2143f5; border-color: #42699f; }
  .site-nav.menu-open a { color: #e5efff; }
  .hero::before { inset: -68px -100vw -39px; }
  .hero-copy::after { margin-top: 17px; }
  .review-float { display: none; }
}

/* Make the Experience Lab's action moment unmistakable. */
.lab-generate {
  min-height: 42px;
  border: 1px solid #d1ff9d;
  border-radius: 5px;
  background: #c7ff87;
  box-shadow: 0 10px 24px rgba(199, 255, 135, .17);
  color: #0b2031;
  font-size: 11px;
}
.lab-generate:hover { box-shadow: 0 14px 30px rgba(199, 255, 135, .28); }
.lab-draft-ready footer button:last-child {
  min-height: 30px;
  padding-inline: 10px;
  background: #c7ff87;
  color: #0b2031;
  font-weight: 800;
}
.lab-draft-ready footer button:first-child { color: #d2e1fc; font-weight: 700; }
.lab-mode.active { box-shadow: inset 3px 0 0 #c7ff87; }

/* Display type needs room to breathe: keep the editorial density, restore word space. */
.hero h1,
.section-heading h2,
.how-heading h2,
.modes h2,
.benefits h2,
.faq h2,
.final-cta h2,
.lab-heading h2,
.workflow-copy h3,
.lab-control h3,
.mode-card h3 {
  word-spacing: .12em;
}

/* The lab is a light visual pause; its dark workspace holds the hands-on focus. */
.experience-lab {
  color: #132f50;
  background:
    radial-gradient(circle at 8% 25%, rgba(174, 207, 255, .8), transparent 27%),
    radial-gradient(circle at 93% 83%, rgba(208, 255, 191, .58), transparent 25%),
    linear-gradient(135deg, #edf4ff 0%, #f9fbff 54%, #f0f8ed 100%);
}
.experience-lab::before {
  background-image:
    linear-gradient(rgba(48, 91, 150, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 91, 150, .07) 1px, transparent 1px);
  background-size: 32px 32px;
}
.lab-orb-one { background: radial-gradient(circle, rgba(117, 163, 255, .38) 0, transparent 66%); }
.lab-orb-two { background: radial-gradient(circle, rgba(174, 239, 154, .42) 0, transparent 67%); }
.lab-heading .eyebrow { color: #496fa8; }
.lab-heading h2 { color: #102d50; }
.lab-heading > p:last-child { color: #506984; }

.lab-stage {
  border-color: #b9cee9;
  background: #081831;
  box-shadow: 12px 14px 0 rgba(96, 136, 192, .16), 0 22px 46px rgba(37, 70, 118, .22);
  backdrop-filter: blur(18px);
}
.lab-rail { border-right-color: #c7dcff1c; background: #07142d; }
.lab-rail-label,
.lab-control-label { color: #82a6e4; }
.lab-review { color: #d6e2f8; }
.lab-review:hover { background: #ffffff0b; }
.lab-review.active {
  border-color: #8db6ff46;
  background: linear-gradient(115deg, #427ce238, #8b6ff12b);
  box-shadow: inset 0 1px #ffffff0c;
}
.lab-review strong { color: #f1f5ff; }
.lab-review small,
.lab-rail-note { color: #8fa4c8; }
.lab-rail-note { border-top-color: #ffffff14; }
.lab-rail-note i { color: #a48bff; }

.lab-workbench {
  background:
    radial-gradient(circle at 72% 27%, #1b4f9b57 0, transparent 38%),
    linear-gradient(145deg, #0e2143, #0a1934);
}
.lab-workbench-head { color: #91add9; }
.lab-workbench-head #lab-status { color: #a1b4d4; }
.lab-customer strong { color: #fff; }
.lab-customer small { color: #96a9cb; }
.lab-workbench blockquote { color: #f4f7ff; }
.lab-signal { border-color: #aecbff22; background: #06142c69; }
.lab-signal > div > span { color: #7c9fd6; }
.lab-signal-chips i { background: #8bb7ff1a; color: #bed5ff; }
.lab-signal > b { color: #bbcced; }
.lab-draft { border-color: #b8d3ff2c; background: #0d203ec4; }
.lab-draft-empty strong { color: #c9d9f4; }
.lab-draft-empty p { color: #849bc1; }
.lab-draft-ready header,
.lab-draft-ready footer { color: #96aed4; }
.lab-draft-ready > p { color: #d5e1f5; }
.lab-draft-ready footer { border-top-color: #ffffff16; }
.lab-draft-ready footer button:first-child { color: #d2e1fc; }
.lab-actions p { color: #7790b5; }
.lab-actions kbd { border-color: #8da5ca45; background: #ffffff0b; color: #aac1e6; }

.lab-control { border-left-color: #c7dcff1c; background: #0b1a35; }
.lab-control h3 { color: #f1f5ff; }
.lab-control > p { color: #98acca; }
.lab-mode { border-color: #ffffff14; background: #ffffff05; color: #c2d1ea; }
.lab-mode:hover { border-color: #9ebfff45; background: #ffffff0a; }
.lab-mode.active { border-color: #9ebfff63; background: linear-gradient(115deg, #467be82a, #896bf22a); box-shadow: inset 3px 0 0 #c7ff87; }
.lab-mode > i { background: #85afff23; color: #b6d2ff; }
.lab-mode:nth-child(2) > i { background: #c5a3ff20; color: #d4baff; }
.lab-mode b { color: #f0f4ff; }
.lab-mode small { color: #8fa3c7; }
.lab-control-foot { border-top-color: #ffffff14; }
.lab-control-foot span { color: #a7bddc; }
.lab-control-foot span i { background: #73e4ab; box-shadow: 0 0 0 3px #73e4ab20; }
.lab-control-foot button { color: #abc4ed; }
.lab-caption { color: #526e8f; }
.lab-caption span { color: #234c7d; }