:root {
  --ink: #0b1220;
  --ink-2: #121d33;
  --blue: #2563eb;
  --blue-2: #3b82f6;
  --cyan: #22d3ee;
  --paper: #f7f9fc;
  --surface: #ffffff;
  --muted: #667085;
  --line: #e5eaf1;
  --radius: 22px;
  --shadow: 0 24px 70px rgba(11, 18, 32, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; background: white; padding: 12px 18px; border-radius: 8px; }
.skip-link:focus { top: 16px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(247, 249, 252, .88);
  border-bottom: 1px solid rgba(229, 234, 241, .85);
  backdrop-filter: blur(16px);
}
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 34px; }
.brand { width: 154px; margin-right: auto; }
.brand img { width: 100%; height: auto; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a { color: #455166; text-decoration: none; font-size: .94rem; font-weight: 600; }
.main-nav a:hover { color: var(--blue); }

.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 0 22px; text-decoration: none; font-weight: 750; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 40px; padding-inline: 17px; font-size: .92rem; }
.button-primary { color: white; background: linear-gradient(135deg, var(--blue), #1d4ed8); box-shadow: 0 10px 24px rgba(37, 99, 235, .25); }
.button-primary:hover { box-shadow: 0 14px 30px rgba(37, 99, 235, .33); }
.button-ghost { border: 1px solid #cfd7e4; background: rgba(255,255,255,.7); }
.button-link { padding-inline: 6px; }
.button-link span { color: var(--blue); font-size: 1.25rem; }
.button-light { background: white; color: var(--ink); }

.hero { position: relative; overflow: hidden; padding: 100px 0 88px; background: radial-gradient(circle at 73% 30%, rgba(59,130,246,.11), transparent 29%), var(--paper); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .34; background-image: linear-gradient(rgba(11,18,32,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(11,18,32,.055) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to right, black, transparent 75%); }
.hero-grid { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 64px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--blue); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow span { width: 26px; height: 2px; background: currentColor; }
.eyebrow.light { color: #8fb5ff; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 680px; margin-bottom: 24px; font-size: clamp(3.05rem, 5vw, 5.2rem); line-height: .98; letter-spacing: -.055em; }
.hero-lead { max-width: 650px; color: #536077; font-size: 1.16rem; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 18px 26px; margin: 34px 0 0; padding: 0; list-style: none; color: #536077; font-size: .9rem; font-weight: 650; }
.hero-points li::before { content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; color: var(--blue); background: #e8efff; border-radius: 50%; font-size: .72rem; }

.product-stage { position: relative; min-height: 530px; display: grid; place-items: center; }
.stage-glow { position: absolute; width: 420px; height: 420px; background: linear-gradient(135deg, rgba(37,99,235,.24), rgba(34,211,238,.12)); border-radius: 45% 55% 63% 37%; filter: blur(10px); transform: rotate(-12deg); }
.product-shot { position: relative; z-index: 2; width: 100%; margin: 0; overflow: hidden; background: white; border: 1px solid rgba(204,214,228,.95); border-radius: 22px; box-shadow: var(--shadow); transform: perspective(1000px) rotateY(-3deg) rotateX(1deg); }
.product-shot img { width: 100%; aspect-ratio: 1.6 / 1; object-fit: cover; object-position: top left; }
.shot-bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; color: #8c97a8; background: #f6f8fb; border-bottom: 1px solid var(--line); font-size: .66rem; }
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: #c7cfdb; }.shot-bar i:first-child { background: #ff8e7e; }.shot-bar i:nth-child(2) { background: #f6c75b; }.shot-bar i:nth-child(3) { background: #58c98d; }.shot-bar span { margin-left: 6px; }
.app-window { position: relative; z-index: 2; width: 100%; max-width: 590px; overflow: hidden; background: #fff; border: 1px solid rgba(204,214,228,.95); border-radius: 24px; box-shadow: var(--shadow); transform: perspective(1000px) rotateY(-4deg) rotateX(1deg); }
.app-topbar { height: 62px; display: flex; align-items: center; gap: 14px; padding: 0 20px; color: white; background: var(--ink); }
.app-mark { display: grid; place-items: center; width: 31px; height: 31px; background: var(--blue); border-radius: 9px; font-weight: 900; }
.app-title { font-size: .86rem; font-weight: 700; }
.app-user { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border: 1px solid #33415d; border-radius: 50%; font-size: .7rem; }
.app-body { min-height: 356px; display: grid; grid-template-columns: 58px 1fr; }
.app-sidebar { padding-top: 25px; background: #111b30; }
.app-sidebar span { display: block; width: 20px; height: 20px; margin: 0 auto 24px; border: 2px solid #5a6884; border-radius: 6px; }
.app-sidebar span.active { border-color: var(--cyan); box-shadow: 0 0 0 5px rgba(34,211,238,.1); }
.app-content { padding: 26px; background: #f7f9fc; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.metric { position: relative; min-height: 88px; padding: 16px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 14px; }
.metric small, .metric strong { position: relative; z-index: 1; display: block; }
.metric small { color: #8390a3; font-size: .66rem; }
.metric strong { margin-top: 7px; font-size: .84rem; }
.metric i { position: absolute; right: -13px; bottom: -13px; width: 50px; height: 50px; border-radius: 50%; opacity: .16; }
.metric .blue { background: var(--blue); }.metric .cyan { background: #0891b2; }.metric .green { background: #059669; }
.chart-card { margin-top: 14px; padding: 18px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.chart-head { display: flex; justify-content: space-between; font-size: .75rem; font-weight: 750; }.chart-head small { color: #8b96a7; font-weight: 500; }
.bars { height: 105px; display: flex; align-items: flex-end; gap: 10px; padding-top: 22px; border-bottom: 1px solid var(--line); }
.bars i { flex: 1; height: var(--h); background: linear-gradient(to top, var(--blue), #6ea3ff); border-radius: 5px 5px 0 0; }
.activity-card { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 13px 15px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.activity-icon { display: grid; place-items: center; width: 30px; height: 30px; color: #047857; background: #dff8ec; border-radius: 9px; font-size: .76rem; }
.activity-card strong, .activity-card small { display: block; }.activity-card strong { font-size: .73rem; }.activity-card small { color: #8b96a7; font-size: .6rem; }.activity-card b { margin-left: auto; color: #8894a7; font-size: .6rem; }
.floating-card { position: absolute; z-index: 4; min-width: 155px; padding: 14px 18px; color: white; background: rgba(11,18,32,.96); border: 1px solid rgba(255,255,255,.13); border-radius: 14px; box-shadow: 0 15px 40px rgba(11,18,32,.24); }
.floating-card b, .floating-card span { display: block; }.floating-card b { color: #80a9ff; font-size: .76rem; }.floating-card span { margin-top: 2px; font-size: .7rem; }
.floating-stock { right: -16px; top: 36px; }.floating-pos { left: -22px; bottom: 34px; }

.value-strip { background: var(--ink); color: white; }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.value-grid div { padding: 26px 28px; border-left: 1px solid #2b3750; }.value-grid div:last-child { border-right: 1px solid #2b3750; }
.value-grid strong, .value-grid span { display: block; }.value-grid strong { font-size: .95rem; }.value-grid span { margin-top: 3px; color: #8f9bb1; font-size: .76rem; }

.section { padding: 112px 0; }
.intro-grid, .section-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; }
h2 { margin-bottom: 0; font-size: clamp(2.35rem, 4vw, 4rem); line-height: 1.08; letter-spacing: -.045em; }
.intro-grid > p, .section-heading > p { margin-bottom: 4px; color: var(--muted); font-size: 1.07rem; line-height: 1.75; }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 62px; }
.benefit { min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.benefit-dark { color: white; background: var(--ink); border-color: var(--ink); box-shadow: 0 20px 50px rgba(11,18,32,.14); }
.number { color: #9aa6b8; font-size: .78rem; font-weight: 800; letter-spacing: .12em; }.benefit-dark .number { color: #789df0; }
.benefit h3 { margin-bottom: 12px; font-size: 1.35rem; line-height: 1.25; }.benefit p { margin-bottom: 0; color: var(--muted); }.benefit-dark p { color: #a9b4c8; }

.showcase-section { padding: 40px 0 112px; background: var(--paper); }
.showcase-heading { max-width: 820px; margin-bottom: 48px; text-align: center; }
.showcase-heading .eyebrow { justify-content: center; }
.showcase-heading > p:last-child { max-width: 700px; margin: 22px auto 0; color: var(--muted); font-size: 1.06rem; }
.showcase-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 22px; align-items: stretch; }
.showcase-card { margin: 0; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 12px 35px rgba(11,18,32,.08); }
.showcase-image { overflow: hidden; background: #eef2f7; border-bottom: 1px solid var(--line); }
.showcase-card img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .5s ease; }
.showcase-card:hover img { transform: scale(1.018); }
.showcase-pos .showcase-image { aspect-ratio: 1.65 / 1; }
.showcase-tables .showcase-image { aspect-ratio: .98 / 1; }
.showcase-tables img { object-fit: cover; object-position: top left; }
.showcase-card figcaption { min-height: 126px; padding: 24px 26px; }
.showcase-card figcaption span { display: block; margin-bottom: 7px; color: var(--blue); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.showcase-card figcaption strong { display: block; font-size: 1.15rem; line-height: 1.4; }

.modules-section { color: white; background: var(--ink); }
.modules-section .section-heading > p { color: #a6b1c5; }
.module-grid { display: grid; grid-template-columns: 1.1fr .9fr .9fr; gap: 18px; margin-top: 60px; }
.module-card { min-height: 345px; display: flex; flex-direction: column; overflow: hidden; padding: 28px; color: var(--ink); background: #f7f9fc; border-radius: 20px; }
.module-card.featured { color: white; background: linear-gradient(150deg, #1d4ed8, #2563eb 55%, #0ea5e9); }
.module-tag { align-self: flex-start; margin-bottom: 40px; padding: 5px 10px; color: #365273; background: #e4ebf4; border-radius: 99px; font-size: .7rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.featured .module-tag { color: white; background: rgba(255,255,255,.15); }
.module-card h3 { margin-bottom: 12px; font-size: 1.55rem; line-height: 1.2; }.module-card p { color: #647187; }.featured p { color: #dce9ff; }
.receipt { align-self: center; width: 155px; margin-top: auto; padding: 20px; color: var(--ink); background: white; border-radius: 12px 12px 4px 4px; box-shadow: 0 20px 35px rgba(0,0,0,.15); transform: rotate(-4deg) translateY(12px); }
.receipt span { display: block; width: 100%; height: 5px; margin-bottom: 9px; background: #dbe2ec; border-radius: 4px; }.receipt span.short { width: 65%; }.receipt b { display: block; height: 1px; margin: 15px 0; border-top: 1px dashed #9da8b8; }
.module-lines { display: grid; gap: 10px; margin-top: auto; }.module-lines i { height: 30px; background: white; border: 1px solid #e0e6ef; border-radius: 8px; }.module-lines i:nth-child(2) { width: 82%; }.module-lines i:nth-child(3) { width: 64%; }
.module-stock { margin-top: auto; }.module-stock b { font-size: 3.8rem; line-height: 1; letter-spacing: -.06em; }.module-stock span { display: block; color: #748196; font-size: .78rem; }
.module-card.wide { min-height: 240px; grid-column: 2 / 4; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 30px; background: white; }
.module-card.wide .module-tag { margin-bottom: 26px; }.module-card.wide p { margin-bottom: 0; }
.mini-chart { height: 140px; display: flex; align-items: end; gap: 12px; padding: 20px; background: #f4f7fb; border-radius: 14px; }.mini-chart i { flex: 1; background: linear-gradient(to top, #174cca, #6ca1ff); border-radius: 6px 6px 2px 2px; }.mini-chart i:nth-child(1){height:35%}.mini-chart i:nth-child(2){height:55%}.mini-chart i:nth-child(3){height:45%}.mini-chart i:nth-child(4){height:80%}.mini-chart i:nth-child(5){height:68%}
.compliance-note { margin-top: 24px; color: #8390a7; font-size: .78rem; }

.dark-heading { align-items: center; }.sectors { margin-top: 56px; border-top: 1px solid #dbe1ea; }
.sector { display: grid; grid-template-columns: 65px 1fr 1fr; align-items: center; gap: 24px; padding: 25px 8px; border-bottom: 1px solid #dbe1ea; transition: padding .2s ease, background .2s ease; }
.sector:hover { padding-inline: 20px; background: white; }.sector > span { color: var(--blue); font-size: .72rem; font-weight: 850; }.sector h3, .sector p { margin: 0; }.sector h3 { font-size: 1.2rem; }.sector p { color: var(--muted); }

.security-section { padding-top: 0; }
.security-card { min-height: 360px; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 45px; padding: 52px; color: white; background: linear-gradient(135deg, #0b1220, #142442); border-radius: 28px; box-shadow: var(--shadow); }
.security-card h2 { max-width: 680px; font-size: clamp(2.15rem, 3.5vw, 3.5rem); }.security-card p:not(.eyebrow) { max-width: 680px; margin: 20px 0 0; color: #acb8cd; }
.security-mark { display: grid; place-items: center; width: 160px; height: 160px; border: 1px solid #344766; border-radius: 50%; box-shadow: inset 0 0 0 18px rgba(37,99,235,.08); }.security-mark span { display: grid; place-items: center; width: 88px; height: 88px; color: white; background: var(--blue); border-radius: 24px; font-size: 2.5rem; font-weight: 900; transform: rotate(45deg); }.security-mark span::first-letter { transform: rotate(-45deg); }

.cta-section { padding: 30px 0 112px; }.cta-inner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; padding-top: 68px; border-top: 1px solid #dbe1ea; }.cta-inner h2 { max-width: 820px; }
.site-footer { padding: 32px 0; color: #8e99ac; background: var(--ink); }.footer-inner { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 30px; }.footer-inner img { width: 135px; filter: brightness(0) invert(1); opacity: .85; }.footer-inner p { margin: 0; font-size: .82rem; }.footer-inner p:nth-child(2) { text-align: center; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }.hero-copy { max-width: 760px; }.product-stage { min-height: 470px; }.intro-grid, .section-heading { grid-template-columns: 1fr; gap: 22px; }.showcase-grid { grid-template-columns: 1fr; }.showcase-tables .showcase-image { aspect-ratio: 1.65 / 1; }.module-grid { grid-template-columns: 1fr 1fr; }.module-card.featured { grid-row: span 2; }.module-card.wide { grid-column: 2; display: flex; }.security-card { grid-template-columns: 130px 1fr; }.security-mark { width: 120px; height: 120px; }.security-card .button { grid-column: 2; justify-self: start; }.value-grid { grid-template-columns: 1fr 1fr; }.value-grid div { border-bottom: 1px solid #2b3750; }
}

@media (max-width: 720px) {
  .container { width: min(100% - 28px, 1160px); }.site-header { position: static; }.header-inner { min-height: 68px; }.brand { width: 132px; }.main-nav { display: none; }.hero { padding: 68px 0 54px; }.hero-grid { gap: 24px; } h1 { font-size: clamp(2.75rem, 13vw, 4rem); }.hero-lead { font-size: 1.04rem; }.hero-actions { align-items: stretch; flex-direction: column; }.button { width: 100%; }.button-link { justify-content: flex-start; }.hero-points { display: grid; gap: 10px; }.product-stage { min-height: 345px; margin-top: 16px; }.product-shot { transform: none; border-radius: 17px; }.product-shot img { aspect-ratio: 1.45 / 1; }.floating-card { display: none; }.stage-glow { width: 280px; height: 280px; }.value-grid { grid-template-columns: 1fr 1fr; }.value-grid div { padding: 18px 15px; }.section { padding: 78px 0; } h2 { font-size: 2.35rem; }.benefits-grid { grid-template-columns: 1fr; margin-top: 38px; }.benefit { min-height: 230px; }.showcase-section { padding: 10px 0 78px; }.showcase-grid { gap: 16px; }.showcase-pos .showcase-image, .showcase-tables .showcase-image { aspect-ratio: 1.2 / 1; }.showcase-card figcaption { min-height: auto; }.module-grid { grid-template-columns: 1fr; }.module-card.featured { grid-row: auto; }.module-card.wide { grid-column: 1; min-height: 330px; }.module-card { min-height: 310px; }.sector { grid-template-columns: 40px 1fr; gap: 12px; }.sector p { grid-column: 2; }.security-card { grid-template-columns: 1fr; padding: 34px 24px; }.security-mark { width: 98px; height: 98px; }.security-mark span { width: 64px; height: 64px; font-size: 1.8rem; }.security-card .button { grid-column: 1; }.cta-inner { grid-template-columns: 1fr; }.footer-inner { grid-template-columns: 1fr; text-align: center; }.footer-inner img { margin-inline: auto; }.footer-inner p:nth-child(2) { text-align: center; }
}

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