:root {
  --ink: #0b1725;
  --navy: #102b45;
  --navy-2: #173b5f;
  --paper: #f5f7fa;
  --white: #ffffff;
  --line: #dbe2e9;
  --muted: #586878;
  --teal: #0bb7a4;
  --teal-dark: #078376;
  --coral: #f07058;
  --amber: #f0b353;
  --shadow: 0 18px 46px rgba(19, 40, 61, 0.12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.55; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1240px, calc(100% - 48px));
  min-height: 88px;
  margin: 0 auto;
  color: var(--white);
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.45rem; font-weight: 850; letter-spacing: 0; }
.brand-mark { display: inline-flex; align-items: flex-end; gap: 3px; height: 28px; }
.brand-mark span { display: block; width: 6px; border-radius: 3px; background: var(--teal); }
.brand-mark span:nth-child(1) { height: 12px; }
.brand-mark span:nth-child(2) { height: 20px; background: var(--amber); }
.brand-mark span:nth-child(3) { height: 28px; background: var(--coral); }

.site-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); font-size: 0.94rem; font-weight: 750; }
.site-nav a { opacity: 0.86; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--teal); opacity: 1; }
.text-action { padding: 0; border: 0; background: transparent; color: inherit; font-weight: 750; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.5); background: transparent; color: inherit; }
.menu-toggle span { display: block; width: 19px; height: 2px; margin: 4px auto; background: currentColor; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 7px; background: var(--teal); color: #062e2d; font-weight: 850; letter-spacing: 0; }
.button:hover { background: #19c6b2; }
.button-small { min-height: 38px; padding: 0 15px; }
.button-quiet { border-color: rgba(255,255,255,.5); background: transparent; color: var(--white); }
.button-quiet:hover { border-color: var(--teal); background: transparent; color: var(--teal); }
.button-dark { background: var(--navy); color: var(--white); }
.button-dark:hover { background: var(--navy-2); }
.button-light { background: var(--white); color: var(--navy); }
.button-light:hover { background: #edf2f5; }

.hero { position: relative; min-height: 765px; overflow: hidden; background: var(--navy); color: var(--white); }
.hero-image, .hero-shade { position: absolute; inset: 0; }
.hero-image { background: url("assets/mesajora-hero.png") center/cover no-repeat; }
.hero-shade { background: rgba(7, 24, 39, .57); }
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(400px, .78fr); align-items: center; gap: clamp(44px, 8vw, 118px); width: min(1240px, calc(100% - 48px)); min-height: 765px; margin: 0 auto; padding: 142px 0 72px; }
.hero-copy { max-width: 650px; }
.eyebrow { margin: 0 0 14px; color: var(--amber); font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow-dark { color: var(--teal-dark); }
h1, h2, h3, p { margin-top: 0; overflow-wrap: anywhere; }
h1 { max-width: 680px; margin-bottom: 22px; font-size: clamp(3rem, 5.2vw, 5.4rem); line-height: .98; letter-spacing: 0; }
h2 { margin-bottom: 18px; font-size: clamp(2rem, 3.7vw, 3.45rem); line-height: 1.04; letter-spacing: 0; }
h3 { margin-bottom: 8px; font-size: 1.15rem; line-height: 1.16; }
.hero-lead { max-width: 610px; margin-bottom: 30px; color: rgba(255,255,255,.84); font-size: 1.11rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trust-line { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; color: rgba(255,255,255,.8); font-size: .86rem; font-weight: 700; }
.trust-line span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--teal); }

.hero-console { padding: 22px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(10, 29, 46, .83); box-shadow: 0 26px 70px rgba(0,0,0,.25); backdrop-filter: blur(8px); }
.console-topline, .conversation-heading, .handoff, .api-event, .tool-list-header, .tool-chat-head, .builder-head, .builder-rule { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.console-topline { color: rgba(255,255,255,.75); font-size: .8rem; font-weight: 750; }
.status-dot { width: 9px; height: 9px; margin-right: -8px; border-radius: 50%; background: var(--teal); }
.console-live { padding: 4px 8px; border: 1px solid rgba(11,183,164,.5); border-radius: 20px; color: var(--teal); font-size: .7rem; }
.console-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 22px 0; background: rgba(255,255,255,.13); }
.console-summary div { min-height: 92px; padding: 13px; background: rgba(255,255,255,.06); }
.console-summary strong, .console-summary span { display: block; }
.console-summary strong { color: var(--white); font-size: 1.35rem; }
.console-summary span { margin-top: 4px; color: rgba(255,255,255,.65); font-size: .73rem; }
.conversation { padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.055); }
.conversation-heading { margin-bottom: 12px; color: rgba(255,255,255,.63); font-size: .72rem; }
.conversation-heading b { color: var(--white); font-size: .83rem; }
.incoming, .assistant-message { width: fit-content; max-width: 91%; margin-bottom: 9px; padding: 9px 11px; border-radius: 8px; font-size: .79rem; line-height: 1.42; }
.incoming { background: rgba(255,255,255,.13); }
.assistant-message { margin-left: auto; background: rgba(11,183,164,.17); }
.assistant-message span { display: block; margin-bottom: 3px; color: var(--teal); font-size: .67rem; font-weight: 850; }
.handoff { margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.6); font-size: .7rem; }
.handoff b { color: var(--amber); font-size: .74rem; }
.api-event { margin-top: 14px; color: rgba(255,255,255,.65); font-size: .72rem; }
.api-event code { color: var(--teal); }
.api-event span { padding: 2px 5px; border-radius: 3px; background: rgba(11,183,164,.16); color: var(--teal); }
.api-event small { margin-left: auto; }

.signal-strip { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(4, 1fr); gap: 0; width: min(1240px, calc(100% - 48px)); margin: -44px auto 0; position: relative; z-index: 2; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow); }
.signal-strip p, .signal-strip div { margin: 0; min-height: 88px; padding: 22px; border-right: 1px solid var(--line); }
.signal-strip p { color: var(--navy); font-weight: 800; }
.signal-strip div { color: var(--muted); font-size: .82rem; font-weight: 750; }
.signal-strip span { display: block; margin-bottom: 6px; color: var(--teal-dark); font-size: .7rem; font-weight: 900; }

.section { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: clamp(72px, 10vw, 124px) 0; }
.section-heading { max-width: 740px; }
.section-heading > p:last-child, .developer-copy > p:last-child, .ai-copy > p:last-of-type { color: var(--muted); font-size: 1.05rem; }
.product-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .6fr); gap: 28px; align-items: stretch; margin-top: 42px; }
.inbox-tool { display: grid; grid-template-columns: 150px 210px minmax(260px, 1fr); min-height: 440px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--white); box-shadow: var(--shadow); }
.tool-sidebar { display: flex; flex-direction: column; gap: 6px; padding: 19px 12px; border-right: 1px solid var(--line); background: #f0f4f6; font-size: .77rem; }
.tool-sidebar b { margin-bottom: 14px; color: var(--navy); font-size: .84rem; }
.tool-sidebar span { display: flex; justify-content: space-between; padding: 8px; color: var(--muted); }
.tool-sidebar .selected { border-radius: 5px; background: var(--navy); color: var(--white); }
.tool-sidebar em { font-style: normal; }
.tool-list { padding: 16px 11px; border-right: 1px solid var(--line); }
.tool-list-header { margin-bottom: 10px; color: var(--muted); font-size: .73rem; font-weight: 800; }
.tool-list-header button, .tool-chat-head button { padding: 0; border: 0; background: transparent; color: var(--teal-dark); font-size: .72rem; font-weight: 850; }
.tool-list article { position: relative; display: grid; gap: 4px; padding: 11px 8px; border-bottom: 1px solid #edf0f2; }
.tool-list article.active { border-left: 3px solid var(--teal); background: #effbf9; }
.tool-list article b { font-size: .78rem; }
.tool-list article span { color: var(--muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-list article small { color: #8592a0; font-size: .63rem; }
.tool-chat { display: flex; flex-direction: column; gap: 12px; padding: 17px; background: #fbfcfd; }
.tool-chat-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tool-chat-head div { display: grid; }
.tool-chat-head b { font-size: .85rem; }
.tool-chat-head span { color: var(--muted); font-size: .7rem; }
.chat-user, .chat-ai { width: fit-content; max-width: 90%; margin: 0; padding: 10px 11px; border-radius: 7px; font-size: .78rem; }
.chat-user { align-self: flex-start; background: #edf1f4; }
.chat-ai { align-self: flex-end; background: #dcf6f1; }
.chat-ai span { display: block; margin-bottom: 4px; color: var(--teal-dark); font-size: .66rem; font-weight: 900; }
.chat-compose { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 8px 9px 8px 12px; border: 1px solid var(--line); background: var(--white); color: #8793a0; font-size: .69rem; }
.chat-compose button { padding: 6px 9px; border: 0; border-radius: 4px; background: var(--navy); color: var(--white); font-size: .68rem; font-weight: 800; }
.product-notes { display: grid; gap: 0; border-top: 1px solid var(--line); }
.product-notes article { padding: 22px 0; border-bottom: 1px solid var(--line); }
.product-notes span { display: block; margin-bottom: 10px; color: var(--coral); font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.product-notes p { margin: 0; color: var(--muted); font-size: .9rem; }

.ai-section { display: grid; grid-template-columns: minmax(0, .88fr) minmax(360px, .82fr); gap: clamp(42px, 8vw, 112px); align-items: center; border-top: 1px solid var(--line); }
.ai-copy { max-width: 620px; }
.check-list { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--navy); font-weight: 750; }
.check-list li { display: flex; gap: 10px; align-items: start; }
.check-list li::before { content: "+"; color: var(--teal-dark); font-size: 1.2rem; line-height: 1.25; font-weight: 800; }
.ai-builder { padding: 24px; border: 1px solid #c5ded9; border-radius: 8px; background: #ecf7f5; box-shadow: var(--shadow); }
.builder-head { padding-bottom: 17px; border-bottom: 1px solid #c5ded9; }
.builder-head div { display: grid; gap: 4px; }
.builder-head span { color: var(--muted); font-size: .73rem; font-weight: 750; }
.builder-head b { color: var(--navy); }
.badge { padding: 4px 9px; border-radius: 20px; background: #c5f0e8; color: var(--teal-dark); font-size: .7rem; font-weight: 850; }
.ai-builder label { display: grid; gap: 8px; margin: 20px 0; color: var(--navy); font-size: .76rem; font-weight: 850; }
.ai-builder textarea { resize: none; padding: 11px; border: 1px solid #c5ded9; border-radius: 5px; background: var(--white); color: var(--muted); line-height: 1.45; }
.source-list { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 15px 0; border-top: 1px solid #c5ded9; border-bottom: 1px solid #c5ded9; color: var(--navy); font-size: .76rem; font-weight: 800; }
.source-list b { color: var(--teal-dark); font-size: .71rem; }
.source-list small { grid-column: 1 / -1; padding: 7px 9px; border: 1px solid #c5ded9; border-radius: 4px; background: rgba(255,255,255,.58); color: var(--muted); font-size: .74rem; font-weight: 650; }
.builder-rule { padding-top: 16px; color: var(--muted); font-size: .74rem; }
.builder-rule b { color: var(--navy); }

.developer-section { display: grid; grid-template-columns: minmax(0, .9fr) minmax(380px, .72fr); gap: clamp(42px, 8vw, 112px); align-items: center; border-top: 1px solid var(--line); }
.code-panel { overflow: auto; margin: 0; padding: 28px; border: 1px solid #1b3148; border-radius: 8px; background: #0d1e30; color: #dce8f0; box-shadow: var(--shadow); font-size: .85rem; line-height: 1.75; }
.code-muted { color: var(--amber); }.code-key { color: #80d7cf; }.code-string { color: #f2bd7a; }.code-success { color: #69d8ad; }

.pricing-section { border-top: 1px solid var(--line); }.centered { margin: 0 auto; text-align: center; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 42px; }
.pricing-grid article { display: flex; flex-direction: column; min-height: 262px; padding: 27px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.pricing-grid article.featured { border-color: var(--teal); background: #f0fbf9; box-shadow: var(--shadow); }
.pricing-grid span { margin-bottom: 20px; color: var(--teal-dark); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.pricing-grid p { color: var(--muted); }.pricing-grid button { align-self: flex-start; margin-top: auto; padding: 0; border: 0; background: transparent; color: var(--navy); font-weight: 850; }
.pricing-grid button:hover { color: var(--teal-dark); }

.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 34px; width: min(1240px, calc(100% - 48px)); margin: 0 auto 64px; padding: clamp(36px, 5vw, 62px); background: var(--navy); color: var(--white); }
.cta-band .eyebrow { margin-bottom: 10px; }.cta-band h2 { margin-bottom: 12px; }.cta-band p:last-child { max-width: 700px; margin: 0; color: rgba(255,255,255,.75); }

.site-footer { display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 22px; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 30px 0 46px; color: var(--muted); font-size: .86rem; }
.footer-brand { color: var(--navy); }.site-footer p { margin: 0; }.site-footer div { display: flex; flex-wrap: wrap; gap: 12px 18px; font-weight: 750; }.site-footer small { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--line); }

.demo-dialog { position: relative; width: min(520px, calc(100% - 36px)); padding: 34px; border: 0; border-radius: 10px; color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.demo-dialog::backdrop { background: rgba(7, 19, 31, .72); }.demo-dialog h2 { font-size: 2rem; }.demo-dialog > p:not(.eyebrow) { color: var(--muted); }
.dialog-close { position: absolute; top: 14px; right: 15px; width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); font-size: 1.7rem; line-height: 1; }
.demo-dialog form { display: grid; gap: 13px; margin-top: 24px; }.demo-dialog label { display: grid; gap: 6px; color: var(--navy); font-size: .78rem; font-weight: 850; }.demo-dialog input { height: 44px; padding: 0 11px; border: 1px solid var(--line); border-radius: 5px; outline: none; }.demo-dialog input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(11,183,164,.12); }.demo-dialog .button { margin-top: 5px; }.form-note { min-height: 22px; margin: 12px 0 0; color: var(--teal-dark); font-weight: 750; }

@media (max-width: 960px) {
  .hero-inner, .ai-section, .developer-section { grid-template-columns: 1fr; }
  .hero { min-height: auto; }.hero-inner { min-height: auto; padding: 142px 0 72px; }.hero-copy { max-width: 720px; }.hero-console { max-width: 650px; }
  .signal-strip { grid-template-columns: repeat(2, 1fr); }.signal-strip p { grid-column: 1 / -1; }.signal-strip div:nth-child(3) { border-right: 0; }
  .product-layout { grid-template-columns: 1fr; }.product-notes { grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 0; }.product-notes article { padding: 0; border-top: 1px solid var(--line); }
  .site-footer { grid-template-columns: 1fr 1fr; }.site-footer div { justify-content: flex-end; }
}

@media (max-width: 720px) {
  .site-header { width: calc(100% - 36px); min-height: 72px; }.menu-toggle { display: block; }.site-nav { position: absolute; top: 68px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; background: #102b45; box-shadow: var(--shadow); }.site-nav.is-open { display: flex; }.site-nav a, .text-action, .site-nav .button { padding: 12px; text-align: left; }.site-nav .button { justify-content: center; text-align: center; }.brand { font-size: 1.25rem; }
  .hero-inner, .section, .signal-strip, .cta-band, .site-footer { width: calc(100% - 36px); }.hero-inner { padding-top: 118px; }.hero { min-height: 780px; }.hero-image { background-position: 65% center; }.hero-shade { background: rgba(7, 24, 39, .72); } h1 { font-size: clamp(2.7rem, 13vw, 4.15rem); }.hero-lead { font-size: 1rem; }.hero-console { padding: 14px; }.console-summary div { min-height: 77px; padding: 10px; }.console-summary strong { font-size: 1.08rem; }.api-event small { display: none; }
  .signal-strip { grid-template-columns: 1fr 1fr; margin-top: -24px; }.signal-strip p, .signal-strip div { min-height: 72px; padding: 15px; }.signal-strip div { border-bottom: 1px solid var(--line); }.signal-strip div:nth-last-child(-n + 2) { border-bottom: 0; }
  .inbox-tool { grid-template-columns: 1fr; }.tool-sidebar { display: none; }.tool-list { border-right: 0; }.tool-chat { min-height: 330px; border-top: 1px solid var(--line); }.product-notes { grid-template-columns: 1fr; }.product-notes article { padding: 20px 0; }.ai-builder, .code-panel { padding: 19px; }.pricing-grid { grid-template-columns: 1fr; }.cta-band { display: grid; margin-bottom: 38px; }.site-footer { grid-template-columns: 1fr; }.site-footer div { justify-content: flex-start; }.site-footer small { grid-column: auto; }.demo-dialog { padding: 28px 22px; }
}