:root {
  --ink: #0b1827;
  --navy: #0c1a2a;
  --blue: #0e6cf4;
  --blue-dark: #0757cb;
  --orange: #ffae32;
  --paper: #f5f8fc;
  --muted: #617084;
  --line: #dfe6ee;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }

.site-nav { min-height: 74px; background: rgba(8, 21, 35, 0.94); border-bottom: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(14px); }
.brand-mark { color: #fff !important; font-size: 1.65rem; font-weight: 800; letter-spacing: -0.06em; }
.brand-e { color: var(--blue); }
.brand-domain { font-weight: 500; color: #93a2b6; letter-spacing: -0.03em; }
.site-nav .nav-link { padding: 0.6rem 0.7rem !important; color: #c8d2df; font-size: 0.9rem; font-weight: 600; }
.site-nav .nav-link:hover { color: #fff; }
.navbar-toggler { color: #fff; font-size: 1.7rem; }

.btn { border-radius: 8px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { --bs-btn-bg: var(--blue); --bs-btn-border-color: var(--blue); --bs-btn-hover-bg: var(--blue-dark); --bs-btn-hover-border-color: var(--blue-dark); box-shadow: 0 10px 28px rgba(14, 108, 244, .24); }
.btn-nav { padding: .62rem 1.05rem; font-size: .9rem; }
.btn-lg { padding: .92rem 1.35rem; font-size: 1rem; }
.btn i { margin-left: .45rem; }

.hero-section { position: relative; overflow: hidden; min-height: 800px; padding: 145px 0 105px; color: #fff; background: radial-gradient(circle at 84% 20%, rgba(14,108,244,.28), transparent 30%), linear-gradient(122deg, #081523 0%, #0b1e33 60%, #0a243d 100%); }
.hero-section::after { content: ""; position: absolute; width: 470px; height: 470px; right: -260px; bottom: -230px; border: 70px solid rgba(53,184,255,.05); border-radius: 50%; }
.hero-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg, #000, transparent 75%); }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.25rem; color: var(--blue); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { color: #6fc9ff; }
.hero-copy h1 { max-width: 720px; margin: 0; font-size: clamp(2.75rem, 5vw, 4.55rem); line-height: 1.03; font-weight: 800; letter-spacing: -.055em; }
.hero-copy h1 span { color: #73c9ff; }
.hero-lead { max-width: 620px; margin: 1.6rem 0 0; color: #bac8d8; font-size: 1.16rem; line-height: 1.72; }
.hero-actions { margin-top: 2.1rem; }
.hero-actions .btn-outline-light { color: #eaf2fa; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.03); }
.hero-actions .btn-outline-light:hover { color: #fff; background: rgba(255,255,255,.1); }
.hero-actions .btn-outline-light i { margin: 0 .45rem 0 0; }
.hero-trust { margin-top: 2rem; color: #a9b8ca; font-size: .84rem; font-weight: 600; }
.hero-trust i { margin-right: .35rem; color: #52d49d; }

.product-window { overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: #f7f9fc; box-shadow: 0 35px 90px rgba(0,0,0,.38), 0 0 0 9px rgba(255,255,255,.03); }
.hero-window { transform: perspective(1400px) rotateY(-4deg) rotateX(1deg); }
.window-topbar { display: grid; grid-template-columns: 70px 1fr 34px; align-items: center; gap: .6rem; height: 44px; padding: 0 .8rem; background: #e7edf4; border-bottom: 1px solid #d5dde8; }
.window-dots { display: flex; gap: 5px; }
.window-dots span { width: 8px; height: 8px; border-radius: 50%; background: #b8c2cf; }
.window-dots span:first-child { background: #ff7b72; }
.window-dots span:nth-child(2) { background: #f5c451; }
.window-dots span:nth-child(3) { background: #5ac788; }
.window-address { overflow: hidden; padding: .38rem .6rem; color: #768397; background: #fff; border: 1px solid #d7dee7; border-radius: 5px; font-size: .65rem; text-align: center; white-space: nowrap; }
.window-address i { margin-right: .3rem; color: #69b08b; }
.window-avatar { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 6px; color: #fff; background: var(--blue); font-size: .58rem; font-weight: 800; }
.app-shell { display: flex; min-height: 430px; color: var(--ink); }
.app-sidebar { display: flex; width: 62px; padding: 1rem 0; flex-direction: column; align-items: center; gap: 1.35rem; color: #718197; background: #0d2035; }
.app-sidebar i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 6px; font-size: .9rem; }
.app-sidebar i.active { color: #fff; background: var(--blue); }
.mini-brand { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: .4rem; color: #fff; border: 1px solid rgba(255,255,255,.15); font-weight: 800; }
.mini-brand span { color: var(--blue); }
.app-content { min-width: 0; flex: 1; padding: 1.35rem; }
.app-heading { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid #dfe6ee; }
.app-heading small, .setup-note small { display: block; margin-bottom: .2rem; color: #7b899b; font-size: .55rem; font-weight: 800; letter-spacing: .09em; }
.app-heading h2 { margin: 0; font-size: 1.22rem; font-weight: 800; letter-spacing: -.03em; }
.app-heading h2 span { margin-left: .35rem; color: var(--blue); }
.mock-action { display: inline-flex; align-items: center; padding: .5rem .65rem; color: #fff; border-radius: 6px; background: var(--blue); font-size: .62rem; font-weight: 800; white-space: nowrap; }
.mock-action i { margin-right: .3rem; }
.part-meta { padding: 1rem 0; }
.part-meta > div { display: flex; flex-direction: column; }
.part-meta small { color: #8290a2; font-size: .55rem; }
.part-meta strong { color: #223247; font-size: .72rem; }
.app-table { overflow: hidden; border: 1px solid #d9e2ec; border-radius: 6px; }
.table-row { display: grid; grid-template-columns: .55fr .75fr 2fr 1.15fr; color: #47576a; background: #fff; font-size: .64rem; }
.table-row span { padding: .48rem .45rem; border-bottom: 1px solid #e5ebf1; }
.table-row:last-child span { border-bottom: 0; }
.table-head { color: #fff; background: var(--blue); font-weight: 800; }
.table-head span { border: 0; }
.setup-note { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; padding: .7rem; border-left: 3px solid var(--orange); background: #fff8ec; }
.setup-note i { color: #e69116; }
.setup-note strong { display: block; color: #39495d; font-size: .67rem; }

.pain-strip { position: relative; z-index: 2; margin-top: -1px; background: #fff; }
.pain-strip .container { transform: translateY(38px); box-shadow: 0 18px 55px rgba(26,48,78,.12); }
.pain-title { padding: 2.1rem 2.2rem; color: #fff; background: var(--blue); }
.pain-title span { color: #c5e4ff; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pain-title h2 { margin: .6rem 0 0; font-size: 1.45rem; line-height: 1.28; font-weight: 800; }
.pain-item { display: flex; min-height: 170px; padding: 2rem 1.6rem; flex-direction: column; justify-content: center; background: #fff; border-right: 1px solid #e5eaf0; }
.pain-item:last-child { border: 0; }
.pain-item i { margin-bottom: .8rem; color: var(--blue); font-size: 1.45rem; }
.pain-item p { margin: 0; color: #45566a; font-size: .91rem; line-height: 1.55; font-weight: 600; }

.section-padding { padding: 125px 0; }
.features-section { background: var(--paper); }
.section-heading { max-width: 740px; }
.section-heading h2, .section-title { margin: 0; color: var(--ink); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.14; font-weight: 800; letter-spacing: -.045em; }
.section-heading p, .section-intro { margin-top: 1.2rem; color: var(--muted); font-size: 1.02rem; line-height: 1.72; }
.feature-card { padding: 2rem; background: #fff; border: 1px solid var(--line); border-top: 3px solid transparent; box-shadow: 0 8px 25px rgba(21,48,78,.04); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-5px); border-top-color: var(--blue); box-shadow: 0 16px 40px rgba(21,48,78,.1); }
.feature-icon { display: grid; width: 50px; height: 50px; margin-bottom: 1.5rem; place-items: center; color: var(--blue); background: #eaf3ff; font-size: 1.25rem; }
.feature-card h3 { margin: 0 0 .75rem; font-size: 1.12rem; font-weight: 800; }
.feature-card p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.68; }

.tools-section { overflow: hidden; color: #fff; background: radial-gradient(circle at 12% 20%, rgba(14,108,244,.22), transparent 30%), linear-gradient(120deg, #091725, #102a45); }
.tools-title { max-width: 610px; margin: 0; color: #fff; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.14; font-weight: 800; letter-spacing: -.045em; }
.tools-lead { margin: 1.25rem 0 0; color: #b8c8d9; font-size: 1rem; line-height: 1.75; }
.tool-benefits { display: grid; gap: 1rem; margin-top: 2rem; }
.tool-benefits article { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.05rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; }
.tool-benefit-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; color: #79ceff; background: rgba(14,108,244,.22); border-radius: 7px; }
.tool-benefits h3 { margin: 0 0 .25rem; color: #fff; font-size: 1rem; font-weight: 800; }
.tool-benefits p { margin: 0; color: #aebfd1; font-size: .86rem; line-height: 1.55; }
.tool-panel { padding: 1.5rem; color: var(--ink); background: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; box-shadow: 0 35px 80px rgba(0,0,0,.3); }
.tool-panel-head { display: flex; align-items: flex-start; justify-content: space-between; }
.tool-panel-head small { color: var(--blue); font-size: .6rem; font-weight: 800; letter-spacing: .1em; }
.tool-panel-head h3 { margin: .2rem 0 0; font-size: 1.35rem; font-weight: 800; }
.tool-count { padding: .45rem .65rem; color: #1764c7; background: #e9f3ff; border-radius: 999px; font-size: .68rem; font-weight: 800; }
.tool-toolbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .7rem; margin: 1.25rem 0 1rem; }
.tool-toolbar > div { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .75rem .85rem; color: #8995a4; background: #f5f7fa; border: 1px solid #e0e6ed; border-radius: 7px; font-size: .7rem; }
.tool-toolbar > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-table { overflow: hidden; border: 1px solid #dce4ec; border-radius: 7px; }
.tool-row { display: grid; grid-template-columns: .45fr 2.4fr .65fr .45fr 1fr; align-items: center; gap: .45rem; min-height: 55px; padding: .55rem .7rem; color: #6a788a; background: #fff; border-bottom: 1px solid #e4e9ef; font-size: .68rem; }
.tool-row:last-child { border-bottom: 0; }
.tool-row strong { overflow: hidden; color: #25354a; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.tool-row-head { min-height: auto; color: #fff; background: #343a40; border: 0; font-weight: 800; }
.status-pill { width: fit-content; padding: .3rem .5rem; border-radius: 999px; font-size: .6rem; font-weight: 800; white-space: nowrap; }
.status-pill.in-stock { color: #167a54; background: #e4f7ef; }
.status-pill.in-machine { color: #1764c7; background: #e8f2ff; }
.status-pill.checking { color: #9b6812; background: #fff2d9; }
.inventory-actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: #66768a; font-size: .68rem; font-weight: 700; }
.inventory-actions i { margin-right: .35rem; color: var(--blue); }

.process-section { background: #fff; }
.process-grid { position: relative; }
.process-grid::before { content: ""; position: absolute; top: 35px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, #bcd6f9 18%, #bcd6f9 82%, transparent); }
.process-card { position: relative; padding-right: 1.4rem; }
.step-number { position: relative; display: grid; width: 70px; height: 70px; margin-bottom: 1.6rem; place-items: center; color: #fff; background: var(--blue); border: 9px solid #e9f2ff; border-radius: 50%; font-size: .9rem; font-weight: 800; }
.process-card h3 { font-size: 1.25rem; font-weight: 800; }
.process-card p { margin: .8rem 0 0; color: var(--muted); line-height: 1.7; }

.product-section { overflow: hidden; background: var(--paper); }
.product-list { display: grid; gap: 1.1rem; margin: 2rem 0; padding: 0; list-style: none; }
.product-list li { display: flex; align-items: flex-start; gap: .8rem; color: #48586b; line-height: 1.55; }
.product-list i { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; color: #fff; background: var(--blue); border-radius: 50%; font-size: .8rem; }
.product-list strong { color: var(--ink); }
.text-link { color: var(--blue); font-weight: 800; }
.text-link i { margin-left: .35rem; }
.knowledge-panel { position: relative; padding: 1.55rem; background: #fff; border: 1px solid #dce5ef; border-radius: 12px; box-shadow: 0 30px 70px rgba(15,38,68,.16); }
.knowledge-panel::before { content: ""; position: absolute; z-index: -1; inset: -30px -200px -30px 45%; background: var(--blue); opacity: .08; }
.panel-header { display: flex; align-items: center; justify-content: space-between; }
.panel-header small { color: var(--blue); font-size: .6rem; font-weight: 800; letter-spacing: .1em; }
.panel-header h3 { margin: .2rem 0 0; font-size: 1.3rem; font-weight: 800; }
.panel-header .mock-action { padding: .65rem .8rem; }
.search-box { display: flex; align-items: center; gap: .65rem; margin: 1.4rem 0 1rem; padding: .85rem 1rem; color: #8995a4; background: #f6f8fb; border: 1px solid #e1e7ee; border-radius: 7px; font-size: .78rem; }
.record-list { border: 1px solid #e0e7ef; border-radius: 7px; overflow: hidden; }
.record-row { display: grid; grid-template-columns: 42px 1.7fr .65fr .7fr 20px; align-items: center; gap: .75rem; padding: .85rem; background: #fff; border-bottom: 1px solid #e6ebf1; color: #8a96a4; font-size: .75rem; }
.record-row:last-child { border-bottom: 0; }
.record-row.featured { background: #f7fbff; }
.record-thumb { display: grid; width: 38px; height: 38px; place-items: center; color: var(--blue); background: #e9f3ff; font-size: 1rem; }
.record-main { display: flex; min-width: 0; flex-direction: column; }
.record-main strong { overflow: hidden; color: #233349; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.record-main span { color: #8995a4; font-size: .66rem; }
.op-tag { width: fit-content; padding: .25rem .45rem; color: #1764c7; background: #e9f2ff; font-weight: 800; }
.material { color: #637286; font-weight: 700; }
.panel-footer { display: flex; justify-content: space-between; margin-top: 1rem; color: #8290a0; font-size: .67rem; }
.panel-footer i { margin-right: .25rem; color: #37a67b; }

.audience-section { padding: 90px 0; color: #fff; background: linear-gradient(120deg, #0b1a2a, #102c49); }
.section-kicker.light { color: #70c7ff; }
.audience-section h2 { max-width: 500px; margin: 0; font-size: clamp(2rem, 3.5vw, 2.85rem); line-height: 1.16; font-weight: 800; letter-spacing: -.04em; }
.audience-items { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(255,255,255,.12); }
.audience-items > div { display: flex; align-items: center; gap: .85rem; min-height: 100px; padding: 1.2rem; border-right: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); color: #d8e3ef; font-size: .88rem; font-weight: 700; }
.audience-items > div:nth-child(2n) { border-right: 0; }
.audience-items > div:nth-last-child(-n+2) { border-bottom: 0; }
.audience-items i { color: #67c6ff; font-size: 1.25rem; }

.cta-section { padding: 95px 0; background: #fff; }
.cta-card { position: relative; overflow: hidden; padding: 3.6rem; color: #fff; background: var(--blue); border-radius: 12px; box-shadow: 0 24px 60px rgba(14,108,244,.23); }
.cta-card h2 { max-width: 760px; margin: 0; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.13; font-weight: 800; letter-spacing: -.045em; }
.cta-card p { max-width: 720px; margin: 1rem 0 0; color: #cfe5ff; font-size: 1.02rem; line-height: 1.65; }
.cta-card .btn-light { color: #0b5ed7; box-shadow: 0 12px 28px rgba(0,0,0,.14); }
.cta-card small { color: #dbeeff; }
.cta-gear { position: absolute; color: rgba(255,255,255,.07); line-height: 1; }
.gear-one { top: -55px; right: 20%; font-size: 180px; }
.gear-two { right: -35px; bottom: -70px; font-size: 150px; }

footer { padding: 2rem 0; color: #8a97a8; background: #07121e; font-size: .84rem; }
footer a { color: #c4cedb; }
.footer-brand { font-size: 1.35rem; }

@media (max-width: 991.98px) {
  .site-nav .navbar-collapse { padding: .8rem 0 1.2rem; }
  .hero-section { padding: 130px 0 95px; }
  .hero-copy { text-align: center; }
  .hero-copy h1, .hero-lead { margin-left: auto; margin-right: auto; }
  .hero-actions, .hero-trust { justify-content: center; }
  .hero-window { max-width: 650px; margin: 1.5rem auto 0; transform: none; }
  .pain-strip .container { width: calc(100% - 2rem); }
  .pain-title { text-align: center; }
  .process-grid::before { display: none; }
  .process-card { display: grid; grid-template-columns: 70px 1fr; column-gap: 1.2rem; }
  .process-card .step-number { grid-row: 1 / span 2; }
  .process-card p { grid-column: 2; }
  .audience-section h2 { margin-bottom: 1.5rem; }
  .tool-panel { max-width: 760px; margin: 1.5rem auto 0; }
}

@media (max-width: 767.98px) {
  .site-nav { min-height: 66px; }
  .hero-section { min-height: auto; padding: 115px 0 80px; }
  .hero-copy h1 { font-size: 2.65rem; }
  .hero-lead { font-size: 1.02rem; }
  .hero-actions .btn { width: 100%; }
  .hero-trust { gap: .75rem 1rem !important; }
  .window-topbar { grid-template-columns: 50px 1fr 29px; }
  .window-address { font-size: .56rem; }
  .app-sidebar { width: 48px; gap: 1rem; }
  .app-content { padding: 1rem; }
  .app-heading .mock-action { font-size: 0; }
  .app-heading .mock-action i { margin: 0; font-size: .8rem; }
  .part-meta strong { font-size: .64rem; }
  .pain-strip .container { transform: translateY(25px); }
  .pain-item { min-height: auto; padding: 1.4rem 1.6rem; border-right: 0; border-bottom: 1px solid #e5eaf0; }
  .section-padding { padding: 90px 0; }
  .section-heading h2, .section-title { font-size: 2.15rem; }
  .feature-card { padding: 1.55rem; }
  .tool-panel { padding: 1rem; }
  .tool-toolbar { grid-template-columns: 1fr auto; }
  .tool-toolbar .mock-action { font-size: 0; }
  .tool-toolbar .mock-action i { margin: 0; font-size: .8rem; }
  .tool-row { grid-template-columns: .45fr 2fr .65fr 1fr; }
  .tool-row > span:nth-child(4), .tool-row > strong + span + span { display: none; }
  .inventory-actions { flex-direction: column; gap: .55rem; }
  .record-row { grid-template-columns: 40px 1fr .7fr 16px; }
  .record-row .material { display: none; }
  .audience-items { grid-template-columns: 1fr; }
  .audience-items > div, .audience-items > div:nth-child(2n) { min-height: 78px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .audience-items > div:last-child { border-bottom: 0; }
  .cta-section { padding: 70px 0; }
  .cta-card { padding: 2.2rem 1.5rem; text-align: center; }
  footer { text-align: center; }
}

@media (max-width: 420px) {
  .hero-copy h1 { font-size: 2.3rem; }
  .app-content { padding: .75rem; }
  .app-heading h2 { font-size: 1rem; }
  .table-row { grid-template-columns: .5fr .7fr 1.65fr 1fr; font-size: .55rem; }
  .setup-note strong { font-size: .58rem; }
  .panel-header { align-items: flex-start; }
  .panel-header .mock-action { font-size: 0; }
  .panel-header .mock-action i { margin: 0; font-size: .8rem; }
  .record-row { gap: .45rem; padding: .7rem .55rem; }
  .tool-row { grid-template-columns: .55fr 2fr .75fr; gap: .3rem; padding: .5rem; font-size: .61rem; }
  .tool-row > span:nth-child(3) { display: none; }
  .tool-row strong { font-size: .66rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}