/* SONIC FUSION X · clean, level, responsive design · one stylesheet, no legacy overrides */
:root {
  color-scheme: dark;
  --bg: #080e19; --surface: #111b2c; --surface-hover:#152137; --surface-2:#0e1728;
  --line:#26364f; --line-strong:#344c6a; --ink:#f4f8ff; --sub:#c4d2e5;
  --muted:#a7b7cf; --cyan:#5ed8f6; --violet:#a994ff; --green:#74e0ba;
  --max: 1280px; --radius:16px;
}
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:92px; }
body { margin:0; font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg); overflow-wrap:break-word; }
img,svg { max-width:100%; height:auto; }
a { color:var(--cyan); text-underline-offset:3px; }
a:hover { color:#c4f5ff; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.container { width:min(calc(100% - 64px),var(--max)); margin-inline:auto; }
.skip-link { position:absolute;top:-100px;left:12px;z-index:200; background:white;color:black;padding:12px 18px; }
.skip-link:focus {top:12px;}
/* Header: real, tightly cropped logo at its natural aspect ratio */
.top-strip {display:none;}
.site-header {position:sticky;top:0;z-index:50;background:rgba(8,14,25,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);}
.header-inner {display:flex;align-items:center;justify-content:space-between;min-height:86px;gap:22px;}
.brand-logo {display:inline-flex;align-items:center;flex:0 0 auto;max-width:260px;text-decoration:none;line-height:0;}
.brand-logo img {display:block;width:235px;max-width:100%;height:auto;object-fit:contain;}
.desktop-nav {display:flex;align-items:center;justify-content:center;gap:clamp(9px,1.15vw,17px);flex:1 1 auto;min-width:0;}
.desktop-nav a {font-size:12px;font-weight:650;text-decoration:none;white-space:nowrap;color:#becde1;padding:11px 0;border-bottom:2px solid transparent;}
.desktop-nav a[aria-current="page"],.desktop-nav a:hover {color:#f7fbff;border-bottom-color:var(--cyan);}
.header-cta {background:var(--cyan);color:#071323;text-decoration:none;border-radius:10px;padding:11px 15px;font-size:12px;font-weight:800;white-space:nowrap;}
.header-cta:hover {background:#b5f4ff;color:#071323;}
.mobile-nav {display:none;position:relative;}
.mobile-nav summary {list-style:none;cursor:pointer;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);padding:9px 12px;color:#f0f7ff;font-weight:750;font-size:14px;}
.mobile-nav summary::-webkit-details-marker {display:none;}
.mobile-nav nav {position:absolute;top:calc(100% + 10px);right:0;min-width:245px;max-height:70vh;overflow-y:auto;padding:10px;background:#111e32;border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 24px 55px #0009;display:grid;z-index:60;}
.mobile-nav nav a {padding:11px 13px;font-size:14px;color:#d6e5fa;text-decoration:none;border-radius:8px;}
.mobile-nav nav a:hover,.mobile-nav nav a[aria-current="page"] {background:#1c3150;color:#fff;}
/* Hero is intentionally single-column. There is no uneven 'right side box'. */
.hero {background:radial-gradient(ellipse at 87% 8%,rgba(103,86,183,.11),transparent 44%),radial-gradient(ellipse at 5% 80%,rgba(41,166,201,.09),transparent 44%),#0b1322;border-bottom:1px solid var(--line);}
.hero-layout {display:block;padding-top:79px;padding-bottom:74px;}
.hero-copy {max-width:920px;}
.hero-display {display:none;}
.breadcrumbs {display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin-bottom:30px;}
.breadcrumbs a {color:#b8c8dc;text-decoration:none;}
.eyebrow {display:inline-flex;align-items:center;gap:11px;text-transform:uppercase;font-size:12px;line-height:1.3;font-weight:800;letter-spacing:.13em;color:var(--cyan);}
.eyebrow-line {display:inline-block;width:24px;height:2px;background:var(--violet);}
h1,h2,h3,p,ul,ol {margin-top:0;}
h1,h2,h3 {line-height:1.18;letter-spacing:-.035em;}
h1 {font-size:clamp(39px,5vw,67px);font-weight:780;max-width:930px;margin:20px 0 24px;color:#fff;text-wrap:balance;}
h2 {font-size:clamp(27px,3.2vw,40px);font-weight:750;margin:0 0 17px;text-wrap:balance;}
h3 {font-size:21px;font-weight:720;margin:0 0 12px;}
p {color:var(--sub);line-height:1.72;}
.hero-lead {font-size:clamp(17px,1.55vw,20px);line-height:1.7;color:#cbd9ed;max-width:760px;}
.hero-actions {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:30px 0 24px;}
.button {display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 19px;border-radius:10px;font-size:14px;font-weight:780;line-height:1.25;text-align:center;text-decoration:none;border:1px solid transparent;}
.button.primary {background:linear-gradient(110deg,#56d5f4,#a596fc);color:#081322;}
.button.primary:hover {background:#a3e7ff;color:#081322;}
.button.ghost {background:transparent;border-color:#475e7b;color:#e6f0ff;}
.button.ghost:hover {background:#19293e;border-color:#78d3ed;color:white;}
.hero-pills {list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;}
.hero-pills li {padding:6px 12px;border:1px solid #344e6c;border-radius:100px;color:#cad9ed;font-size:12px;background:#122039;}
/* Main content, with strict section rhythm */
.main-body {padding-bottom:85px;}
.content-section {padding:72px 0;border-bottom:1px solid #22324a;}
.section-heading {max-width:810px;margin-bottom:30px;}
.section-heading .eyebrow {margin-bottom:12px;}
.section-heading p {font-size:17px;margin-bottom:0;}
.feature-grid,.sfx-inv .cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;}
.feature-grid.cols-2,.sfx-inv .cards {grid-template-columns:repeat(2,minmax(0,1fr));}
.feature,.sfx-inv .card {min-width:0;min-height:100%;height:100%;display:flex;flex-direction:column;padding:27px 25px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transform:none;box-shadow:none;}
.feature h3,.sfx-inv .card h3 {font-size:20px;line-height:1.24;margin:0 0 11px;}
.feature p,.sfx-inv .card p {margin:0;color:#b9c9df;font-size:15px;line-height:1.68;}
.feature-kicker,.sfx-inv .tag {color:var(--cyan);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;display:block;margin-bottom:17px;}
/* All split blocks are straight and share a common top edge. */
.split {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:24px;}
.split > * {min-width:0;margin:0;}
.prose p {font-size:16px;}
.prose.narrow {max-width:820px;}
.side-panel,.chat-preview,.example-panel,.demo-reply,.contact-form {background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;min-width:0;transform:none;box-shadow:none;}
.side-panel h3 {margin-bottom:14px;}
.side-panel a {overflow-wrap:anywhere;}
.side-panel p:last-child {margin-bottom:0;}
.chat-preview {padding:21px;background:#0d1728;border-radius:12px;}
.chat-question {background:#213a5c;border:1px solid #2e5278;padding:14px 16px;color:#f4fbff;border-radius:11px;font-size:14px;font-weight:750;}
.chat-answer {background:#142643;border:1px solid #2c4667;padding:16px;border-radius:11px;color:#d7e5f6;font-size:14px;}
.checklist {list-style:none;padding:0;display:grid;gap:12px;}
.checklist li {position:relative;padding-left:28px;color:var(--sub);font-size:15px;}
.checklist li:before {content:'✓';color:var(--green);font-weight:900;position:absolute;left:0;top:0;}
.steps {list-style:none;padding:0;display:grid;gap:12px;max-width:970px;}
.steps li {display:flex;align-items:flex-start;gap:19px;background:var(--surface);border:1px solid var(--line);padding:22px;border-radius:14px;}
.step-index {display:block;min-width:32px;color:var(--cyan);font-size:17px;line-height:1.4;font-weight:800;}
.steps h3 {font-size:18px;margin:0 0 5px;}
.steps p {font-size:15px;margin:0;}
.link-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;}
.crosslink {display:flex;align-items:center;justify-content:space-between;gap:20px;min-width:0;height:100%;padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:#eff7ff;margin:0;}
.crosslink:hover {background:var(--surface-hover);border-color:#6088aa;color:white;}
.crosslink span:first-child {display:grid;gap:4px;}
.crosslink strong {font-size:16px;line-height:1.4;}
.crosslink small {font-size:13px;color:#a9bed8;line-height:1.45;}
.crosslink .arr {flex:0 0 auto;color:var(--cyan);font-size:20px;}
.example-panel {background:var(--surface-2);padding:29px;}
.example-panel h3 {margin:10px 0 13px;}
.table-scroll,.sfx-inv .table-wrap {width:100%;overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:11px;}
table {border-collapse:collapse;width:100%;min-width:500px;}
caption {color:#dceafc;text-align:left;font-weight:750;padding:13px 15px;}
th,td {text-align:left;padding:12px 16px;border-bottom:1px solid #263a52;font-size:14px;vertical-align:top;}
th {background:#1a2a44;color:#ecf7ff;font-weight:740;}
td {background:#101c2f;color:#c8d8eb;}
tr:last-child td {border-bottom:0;}
.fineprint {color:#99acc6;font-size:13px;line-height:1.6;}
/* Inventory SEO remains real HTML, not an iframe or image */
.sfx-inv section {padding:44px 0;border-bottom:1px solid var(--line);}
.sfx-inv section h2 {font-size:clamp(27px,3vw,35px);margin-bottom:16px;}
.sfx-inv section h3 {font-size:20px;margin:20px 0 10px;}
.sfx-inv section p {max-width:960px;}
.sfx-inv ul {color:var(--sub);padding-left:25px;}
.sfx-inv li {margin-bottom:8px;}
.sfx-inv .cards {margin:25px 0;gap:18px;}
.sfx-inv .card h3 {margin:0 0 9px;}
.sfx-inv .card p {margin:0;}
.sfx-inv .example {background:#101b2e;border:1px solid var(--line-strong);border-radius:16px;padding:26px;margin-top:24px;}
.sfx-inv .example h3 {margin-top:0;}
.sfx-inv .small {font-size:13px;color:var(--muted);}
.sfx-inv .formula {background:#192943;border-left:3px solid var(--cyan);padding:13px 16px;border-radius:4px;color:#eff8ff;}
.faq-list {display:grid;gap:12px;}
.faq-list details {background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.faq-list summary {cursor:pointer;list-style:none;position:relative;padding:17px 50px 17px 21px;font-size:16px;font-weight:700;color:#f3f8ff;}
.faq-list summary::-webkit-details-marker {display:none;}
.faq-list summary::after {content:'+';position:absolute;right:18px;top:10px;font-size:25px;color:var(--cyan);font-weight:400;}
.faq-list details[open] summary::after {content:'−';}
.faq-list .details-body {padding:1px 22px 20px;}
.faq-list .details-body p:last-child {margin-bottom:0;}
.faq-list ol {color:var(--sub);padding-left:22px;}
.faq-list li {margin-bottom:6px;}
/* AI demo */
.demo-shell {display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);gap:20px;align-items:stretch;}
.demo-choices {display:flex;flex-direction:column;gap:10px;}
.demo-choice {border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:15px;text-align:left;font-size:14px;font-weight:700;color:#d2e1f3;}
.demo-choice:hover,.demo-choice[aria-pressed="true"] {background:#1d3554;border-color:var(--cyan);color:white;}
.demo-reply {padding:24px;}
.demo-reply h3 {margin-bottom:13px;}
.demo-steps {color:var(--sub);padding-left:23px;}
.demo-steps li {padding:4px 0;}
/* Contact form */
.contact-form {display:grid;gap:12px;}
.contact-form label {font-size:13px;font-weight:750;color:#e5effc;}
.contact-form input,.contact-form textarea {width:100%;min-width:0;padding:12px 14px;border:1px solid #3b526f;border-radius:10px;background:#091525;color:#f8fcff;}
.contact-form .button {margin-top:9px;}
.form-status {font-size:13px;margin:0;}
.final-cta {display:flex;justify-content:space-between;align-items:center;gap:32px;padding:35px 38px;margin-top:62px;background:linear-gradient(110deg,#15263c,#171d39);border:1px solid var(--line-strong);border-radius:18px;}
.final-cta h2 {font-size:clamp(26px,3vw,35px);margin:12px 0;}
.final-cta p {margin:0;max-width:700px;}
.final-cta .button {flex-shrink:0;}
/* Footer */
.site-footer {background:#0b1423;border-top:1px solid var(--line);padding:52px 0 24px;}
.footer-main {display:grid;grid-template-columns:1.55fr .8fr .8fr 1fr;gap:34px;align-items:start;}
.footer-brand .brand-logo img {width:243px;}
.footer-brand p {max-width:330px;font-size:14px;margin-top:18px;}
.footer-main nav,.footer-main>div:last-child {display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.footer-main h2 {font-size:15px;margin:0 0 10px;letter-spacing:0;}
.footer-main nav a,.footer-main>div:last-child a {color:#adc2db;font-size:13px;text-decoration:none;}
.footer-main nav a:hover,.footer-main>div:last-child a:hover {color:var(--cyan);}
.footer-main>div:last-child p {font-size:13px;margin:4px 0;}
.footer-bottom {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px;border-top:1px solid var(--line);padding-top:18px;margin-top:42px;color:#91a5c0;font-size:12px;}
@media(max-width:1180px){
  .desktop-nav,.header-cta {display:none;}
  .mobile-nav {display:block;}
  .header-inner {min-height:79px;}
}
@media(max-width:880px){
  .container {width:min(calc(100% - 44px),var(--max));}
  .hero-layout {padding:65px 0;}
  .feature-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .split {grid-template-columns:1fr;}
  .footer-main {grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-brand {grid-column:1/-1;}
  .final-cta {align-items:flex-start;flex-direction:column;}
  .demo-shell {grid-template-columns:1fr;}
}
@media(max-width:580px){
  .container {width:min(calc(100% - 34px),var(--max));}
  .brand-logo img {width:197px;}
  .header-inner {min-height:72px;}
  .hero-layout {padding:52px 0 51px;}
  h1 {font-size:clamp(35px,9vw,47px);}
  .hero-actions {display:grid;}
  .hero-actions .button {width:100%;}
  .content-section {padding:48px 0;}
  .feature-grid,.feature-grid.cols-2,.sfx-inv .cards,.link-grid {grid-template-columns:1fr;}
  .feature,.sfx-inv .card {padding:23px;}
  .side-panel,.chat-preview,.example-panel,.demo-reply,.contact-form {padding:21px;}
  .demo-choices {display:grid;grid-template-columns:1fr;}
  .final-cta {padding:25px;}
  .final-cta .button {width:100%;}
  .footer-main {grid-template-columns:1fr;gap:25px;}
  .footer-brand {grid-column:auto;}
  .footer-bottom {flex-direction:column;align-items:flex-start;}
}
@media(prefers-reduced-motion:reduce){html {scroll-behavior:auto;}}
/* Crosslinks outside the tile grid should never stretch to the full section height. */
.crosslink {height:auto;}
.link-grid > .crosslink {height:100%;}
.prose .crosslink {margin-top:18px;}

/* Official symbol + crisp native-text wordmark, replacing the low-resolution raster lettering. */
.brand-logo {display:inline-flex;align-items:center;gap:11px;max-width:none;min-width:0;flex:0 0 auto;line-height:1.0;text-decoration:none;color:#f5f8ff;}
.brand-logo .brand-emblem {display:block;width:54px;height:54px;min-width:54px;max-width:none;object-fit:contain;}
.brand-wordmark {display:flex;flex-direction:column;justify-content:center;align-items:flex-start;white-space:nowrap;line-height:1.06;}
.brand-title {display:block;color:#fafcff;font-size:23px;font-weight:790;letter-spacing:-.055em;line-height:1.03;}
.brand-x {font-weight:850;color:#46cdff;}
.brand-subtitle {display:block;margin-top:6px;color:#b5c9e2;font-size:9px;font-weight:750;letter-spacing:.18em;line-height:1.0;}
.site-header .brand-logo:hover .brand-title {color:#ffffff;}
.footer-brand .brand-logo .brand-emblem {width:61px;height:61px;min-width:61px;}
.footer-brand .brand-logo .brand-title {font-size:26px;}
.footer-brand .brand-logo .brand-subtitle {font-size:10px;}
@media(max-width:580px) {
  .brand-logo {gap:8px;}
  .brand-logo .brand-emblem {width:43px;height:43px;min-width:43px;}
  .brand-title {font-size:19px;letter-spacing:-.05em;}
  .brand-subtitle {font-size:8px;letter-spacing:.13em;margin-top:5px;}
  .footer-brand .brand-logo .brand-emblem {width:51px;height:51px;min-width:51px;}
  .footer-brand .brand-logo .brand-title {font-size:22px;}
}
@media(max-width:360px) {
  .brand-logo .brand-emblem {width:39px;height:39px;min-width:39px;}
  .brand-title {font-size:17px;}
  .brand-subtitle {font-size:7px;}
}