:root {
  --ink: #10131b;
  --muted: #5e6575;
  --line: rgba(16, 19, 27, .11);
  --paper: #f7f8fb;
  --white: #ffffff;
  --violet: #5f49e8;
  --violet-dark: #3d2cb1;
  --mint: #7ff2c8;
  --coral: #ff735f;
  --amber: #f3b43f;
  --shadow: 0 30px 90px rgba(33, 27, 82, .16);
}
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", system-ui, sans-serif;
  overflow-x: hidden;
  position: relative;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.ambient { position: absolute; pointer-events: none; filter: blur(10px); border-radius: 50%; z-index: -1; max-width: 100vw; overflow: hidden; }
.ambient-one { width: 540px; height: 540px; top: -260px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(119, 91, 255, .2), transparent 68%); }
.ambient-two { width: 420px; height: 420px; top: 330px; right: 0; background: radial-gradient(circle, rgba(87, 230, 194, .16), transparent 68%); }

/* Header & Navigation */
.nav { min-height: 88px; display: flex; align-items: center; justify-content: space-between; position: relative; }
.brand { display: inline-flex; align-items: center; min-width: 0; }
.brand > img { display: block; width: 190px; height: auto; max-height: 54px; object-fit: contain; object-position: left center; }
.footer-brand > img { width: 165px; }

.desktop-nav-menu { display: flex; align-items: center; gap: 30px; }
.nav-links { display: flex; gap: 30px; color: var(--muted); font-size: 14px; }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: var(--ink); }

.button { border: 0; display: inline-flex; justify-content: center; align-items: center; border-radius: 12px; min-height: 48px; padding: 0 20px; font-weight: 700; cursor: pointer; transition: .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 40px; padding-inline: 16px; font-size: 14px; }
.button-ghost { border: 1px solid var(--line); background: rgba(255,255,255,.55); backdrop-filter: blur(12px); }
.button-primary { background: var(--ink); color: white; box-shadow: 0 12px 25px rgba(16, 19, 27, .18); }
.button-secondary { background: white; border: 1px solid var(--line); }

/* Mobile Nav Toggle Icon */
.mobile-nav-toggle {
  display: none;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  z-index: 100;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(16, 19, 27, 0.06);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mobile-nav-toggle:hover {
  background: #f4f5f8;
}
.mobile-nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Nav Drawer & Backdrop */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(320px, 85vw);
  height: 100vh;
  height: 100dvh;
  background: #ffffff;
  padding: 75px 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  box-shadow: -10px 0 40px rgba(16, 19, 27, 0.25);
  z-index: 99999;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.mobile-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-drawer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: #f4f5f8;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 10px;
}

.mobile-nav-links a {
  color: #10131b;
  font-size: 18px;
  font-weight: 700;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s ease;
}

.mobile-nav-links a:hover {
  color: var(--violet);
}

.mobile-nav-cta {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
}

.mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 19, 27, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99990;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mobile-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

body.nav-open {
  overflow: hidden;
}

/* Hero Section */
.hero { padding: 94px 0 75px; text-align: center; }
.eyebrow, .section-kicker { text-transform: uppercase; letter-spacing: .13em; font-weight: 800; font-size: 12px; color: var(--violet); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; background: rgba(95, 73, 232, .08); border: 1px solid rgba(95, 73, 232, .14); border-radius: 999px; }
.pulse-dot { width: 8px; height: 8px; background: var(--violet); border-radius: 50%; box-shadow: 0 0 0 5px rgba(95, 73, 232, .1); }
h1, h2, h3 { font-family: "Manrope", sans-serif; }
.hero h1 { margin: 28px auto 20px; max-width: 980px; font-size: clamp(40px, 6.5vw, 82px); line-height: .99; letter-spacing: -.065em; }
.hero h1 span { color: var(--violet); }
.hero-copy { max-width: 760px; margin: 0 auto; color: var(--muted); font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }
.microcopy { margin: 15px 0 0; color: #858b98; font-size: 13px; }

/* Product Frame & Dashboard */
.product-frame { margin: 70px auto 0; text-align: left; background: #fff; border: 1px solid rgba(23, 25, 36, .13); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.frame-topbar { height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 17px; background: #f4f5f8; border-bottom: 1px solid var(--line); color: #818696; font-size: 11px; }
.window-dots { display: flex; gap: 6px; }.window-dots i { width: 8px; height: 8px; background: #c7cad3; border-radius: 50%; }
.frame-status { justify-self: end; display: flex; align-items: center; gap: 7px; }.frame-status span { width: 7px; height: 7px; background: #20bb78; border-radius: 50%; }
.dashboard-grid { display: grid; grid-template-columns: 205px 1fr; min-height: 590px; }
.sidebar { background: #11141d; color: #d8dbe3; padding: 22px 14px; }
.side-logo { display: flex; gap: 9px; align-items: center; font-weight: 800; margin: 3px 10px 26px; }.side-logo img { width: 24px; height: 24px; object-fit: contain; border-radius: 7px; box-shadow: 0 5px 14px rgba(0,0,0,.22); }
.sidebar a { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 11px 10px; margin: 4px 0; font-size: 12px; color: #8f96a8; }.sidebar a b { color: #737b90; width: 16px; text-align: center; }.sidebar a em { margin-left: auto; font-style: normal; background: #634ff3; color: white; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; }
.sidebar a.active { background: #202432; color: white; }.side-divider { height: 1px; background: rgba(255,255,255,.08); margin: 18px 8px; }
.dashboard-main { padding: 28px; background: #f8f9fb; }
.dash-header { display: flex; justify-content: space-between; align-items: center; }.dash-header small { color: #8f95a3; }.dash-header h2 { margin: 3px 0 0; font-size: 24px; letter-spacing: -.03em; }.dash-header button { border: 1px solid var(--line); background: white; border-radius: 8px; padding: 9px 12px; color: #626878; font-size: 11px; }
.metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; }.metrics-row article { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }.metrics-row small { color: #858b98; font-size: 10px; }.metrics-row strong { display: block; font: 700 22px/1.3 "Manrope"; margin: 4px 0; }.metrics-row span { color: #777e8d; font-size: 10px; }.metrics-row .down { color: #c34d44; }
.incident { display: grid; grid-template-columns: 38px 1fr 145px; gap: 14px; align-items: start; background: white; border: 1px solid var(--line); border-left: 4px solid #adb2bf; border-radius: 12px; padding: 16px; margin-bottom: 10px; }
.incident.critical { border-left-color: var(--coral); }.incident.warning { border-left-color: var(--amber); }.incident-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #f2f3f6; font-weight: 800; }.critical .incident-icon { background: #fff0ed; color: #dc513f; }.warning .incident-icon { background: #fff7e6; color: #b57a0d; }
.incident-title { display: flex; gap: 8px; align-items: center; font-size: 12px; }.incident-title span { font-size: 8px; padding: 3px 6px; border-radius: 999px; background: #fff0ed; color: #c44838; }.incident-copy p { margin: 7px 0 10px; color: #727887; font-size: 10px; line-height: 1.5; }.tags { display: flex; gap: 6px; flex-wrap: wrap; }.tags span { background: #f3f4f7; color: #6b7180; padding: 4px 7px; border-radius: 6px; font-size: 8px; }
.confidence { border-left: 1px solid var(--line); padding-left: 15px; }.confidence small, .confidence span { display: block; color: #8e94a2; font-size: 8px; }.confidence b { display: block; margin: 5px 0; font-size: 10px; }

/* Sections */
.logo-strip { display: flex; align-items: center; justify-content: space-between; padding: 26px 0 85px; color: #777e8d; font: 700 14px "Manrope"; }.logo-strip span { font-family: "DM Sans"; font-weight: 500; font-size: 12px; color: #9a9fab; }
.problem { padding: 115px 0; border-top: 1px solid var(--line); }.problem h2, .difference h2 { font-size: clamp(32px, 5vw, 58px); line-height: 1.08; letter-spacing: -.05em; margin: 17px 0 18px; }.section-lead { max-width: 680px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 55px; }.problem-grid article { padding: 30px; background: white; border: 1px solid var(--line); border-radius: 16px; }.number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(95,73,232,.09); color: var(--violet); font-weight: 800; font-size: 11px; }.problem-grid h3 { margin: 22px 0 10px; font-size: 20px; letter-spacing: -.03em; }.problem-grid p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 14px; }
.how { background: #11141d; color: white; padding: 120px 0; }.how-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 95px; align-items: center; }.how .section-kicker { color: var(--mint); }.how h2 { font-size: clamp(32px, 4.7vw, 56px); line-height: 1.08; letter-spacing: -.05em; margin: 17px 0; }.how-copy > p { color: #a9afbd; font-size: 17px; line-height: 1.7; }.how ol { margin: 35px 0 0; padding: 0; list-style: none; }.how li { display: grid; grid-template-columns: 36px 1fr; gap: 15px; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.09); }.how li > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #272b39; color: var(--mint); font-weight: 800; font-size: 11px; }.how li strong { font-family: "Manrope"; }.how li p { margin: 5px 0 0; color: #9299aa; line-height: 1.55; font-size: 13px; }
.signal-card { background: #1b1f2b; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 25px; box-shadow: 0 25px 70px rgba(0,0,0,.25); }.signal-head { display: flex; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.09); font-weight: 700; }.signal-head small { color: #8e95a7; font-weight: 400; }.timeline { padding-top: 10px; }.timeline > div { display: grid; grid-template-columns: 13px 42px 1fr; gap: 10px; position: relative; padding: 14px 0; }.timeline > div:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 24px; height: 37px; width: 1px; background: #34394a; }.timeline i { width: 11px; height: 11px; background: #454b5e; border-radius: 50%; margin-top: 3px; }.timeline time { color: #737b91; font-size: 10px; margin-top: 2px; }.timeline p { margin: 0; font-size: 12px; }.timeline p span { display: block; color: #8e95a7; font-size: 10px; margin-top: 5px; }.timeline .highlight { margin: 0 -12px; padding: 15px 12px; background: rgba(95,73,232,.17); border-radius: 10px; }.timeline .highlight i { background: var(--mint); box-shadow: 0 0 0 5px rgba(127,242,200,.08); }
.difference { padding: 120px 0; }.comparison { display: grid; grid-template-columns: 1fr 1fr; margin-top: 48px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: white; }.compare-col { padding: 38px; }.compare-col + .compare-col { border-left: 1px solid var(--line); }.compare-col.new { background: linear-gradient(145deg, rgba(95,73,232,.05), rgba(127,242,200,.05)); }.compare-col h3 { margin: 0 0 25px; font-size: 20px; }.compare-col p { padding: 15px 0; margin: 0; border-top: 1px solid var(--line); color: var(--muted); }.compare-col p span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; margin-right: 10px; font-weight: 800; }.old p span { background: #f3f4f6; color: #9a9fab; }.new p span { background: rgba(95,73,232,.1); color: var(--violet); }
.design-partners { padding: 105px 0; background: var(--violet); color: white; }.partner-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }.section-kicker.light { color: var(--mint); }.design-partners h2 { margin: 15px 0; font-size: clamp(32px, 5vw, 57px); line-height: 1.08; letter-spacing: -.05em; }.design-partners p { color: rgba(255,255,255,.75); line-height: 1.7; }.design-partners ul { list-style: none; padding: 0; margin: 28px 0 0; }.design-partners li { margin: 13px 0; }.design-partners li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; background: rgba(127,242,200,.17); color: var(--mint); border-radius: 7px; font-weight: 800; }
.partner-form { background: white; color: var(--ink); border-radius: 18px; padding: 28px; box-shadow: 0 28px 70px rgba(30,15,95,.25); }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.partner-form label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 15px; }.partner-form input, .partner-form select, .partner-form textarea { width: 100%; border: 1px solid #dde0e7; border-radius: 10px; padding: 12px 13px; margin-top: 7px; outline: none; background: #fafbfc; font-size: 14px; }
.partner-form input:focus, .partner-form select:focus, .partner-form textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(95,73,232,.1); }.partner-form textarea { resize: vertical; }.consent { display: flex !important; gap: 9px; align-items: flex-start; color: #646b7a; font-weight: 500 !important; }.consent input { width: auto; margin: 2px 0 0; }.button-light { width: 100%; background: var(--ink); color: white; }.form-note { text-align: center; font-size: 10px; color: #8b91a0 !important; margin-bottom: 0; }
.footer { min-height: 110px; display: flex; align-items: center; gap: 30px; color: #7e8492; font-size: 12px; }.footer p:nth-of-type(1) { margin-left: auto; }

/* Responsive Media Queries */
@media (max-width: 900px) {
  .desktop-nav-menu { display: none; }
  .mobile-nav-toggle { display: flex; }

  .desktop-br { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .metrics-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .incident { grid-template-columns: 34px 1fr; }
  .confidence { grid-column: 2; border-left: 0; padding-left: 0; margin-top: 6px; }
  .logo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px; justify-items: center; }
  .logo-strip span { grid-column: 1 / -1; text-align: center; width: 100%; }
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .how-inner { grid-template-columns: 1fr; gap: 50px; }
  .partner-grid { grid-template-columns: 1fr; gap: 50px; }
  .comparison { grid-template-columns: 1fr; }
  .compare-col + .compare-col { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .shell { width: min(100% - 32px, 1180px); }
  .nav { min-height: 76px; }
  .brand > img { width: 155px; max-height: 46px; }
  .hero { padding: 60px 0 50px; }
  .hero h1 { font-size: clamp(32px, 8.5vw, 48px); letter-spacing: -.04em; margin: 20px auto 16px; }
  .hero-copy { font-size: 15px; line-height: 1.6; }
  .hero-actions { flex-direction: column; width: 100%; max-width: 380px; margin: 28px auto 0; }
  .hero-actions .button { width: 100%; min-height: 48px; }
  .metrics-row { grid-template-columns: 1fr; }
  .problem-grid { grid-template-columns: 1fr; }
  .product-frame { margin-top: 40px; border-radius: 14px; }
  .dashboard-main { padding: 16px; }
  .dash-header button { display: none; }
  .incident { padding: 14px; }
  .incident-title { flex-wrap: wrap; }
  .incident-copy p { font-size: 11px; }
  .tags span { font-size: 9px; padding: 3px 7px; }
  .frame-topbar { grid-template-columns: auto 1fr; }
  .frame-topbar > span { display: none; }
  .problem, .difference { padding: 75px 0; }
  .how { padding: 75px 0; }
  .signal-card { padding: 18px; }
  .timeline > div { grid-template-columns: 11px 36px 1fr; gap: 8px; }
  .timeline time { font-size: 9px; }
  .timeline p { font-size: 11px; }
  .compare-col { padding: 26px 20px; }
  .design-partners { padding: 75px 0; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .partner-form { padding: 22px 18px; }
  .partner-form input, .partner-form select, .partner-form textarea { font-size: 16px; min-height: 46px; }
  .partner-form textarea { min-height: 100px; }
  .footer { flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 35px 0; }
  .footer p:nth-of-type(1) { margin-left: 0; }
}

@media (max-width: 380px) {
  .shell { width: min(100% - 24px, 1180px); }
  .hero h1 { font-size: 28px; }
  .eyebrow { font-size: 10px; padding: 7px 10px; }
}