:root {
  --navy-950: #06101e;
  --navy-900: #0a1628;
  --navy-800: #10233d;
  --slate-700: #334155;
  --slate-600: #526176;
  --slate-500: #6b7a90;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --surface: #f7f9fc;
  --white: #ffffff;
  --blue: #3157f6;
  --blue-dark: #2344d7;
  --cyan: #22d3ee;
  --green: #13b981;
  --orange: #f59e0b;
  --gradient: linear-gradient(135deg, #3157f6 0%, #1488f7 54%, #22d3ee 100%);
  --gradient-soft: linear-gradient(145deg, rgba(49, 87, 246, .12), rgba(34, 211, 238, .08));
  --shadow-sm: 0 8px 30px rgba(15, 35, 64, .08);
  --shadow-lg: 0 24px 70px rgba(15, 35, 64, .15);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --container: 1180px;
  --header-height: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 18px); }

body {
  margin: 0;
  color: var(--navy-900);
  background: var(--white);
  font-family: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.modal-open, body.menu-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
svg { width: 1.1em; height: 1.1em; stroke-width: 1.9; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.12; }
p { color: var(--slate-600); }

:focus-visible { outline: 3px solid rgba(49, 87, 246, .34); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 9999; left: 20px; top: -60px; padding: 10px 16px; border-radius: 10px; background: var(--navy-950); color: white; transition: top .2s; }
.skip-link:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 112px 0; }
.section-small { padding: 76px 0; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: var(--gradient); box-shadow: 0 10px 24px rgba(49, 87, 246, .24); }
.button-primary:hover { box-shadow: 0 14px 32px rgba(49, 87, 246, .34); }
.button-secondary { color: var(--navy-900); background: white; border-color: var(--slate-200); box-shadow: 0 6px 20px rgba(15, 35, 64, .05); }
.button-secondary:hover { border-color: #b8c5d6; box-shadow: var(--shadow-sm); }
.button-light { color: var(--navy-950); background: white; }
.button-white { color: var(--blue-dark); background: white; box-shadow: 0 12px 30px rgba(1, 10, 32, .18); }
.button-outline-light { color: white; border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .08); }
.button-small { min-height: 43px; padding-inline: 17px; font-size: .82rem; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--navy-900); font-size: .9rem; font-weight: 750; }
.text-link:hover { color: var(--blue); }
.section-kicker { display: inline-block; margin-bottom: 14px; color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.section-kicker.light { color: #a8efff; }

/* Navigation */
.site-header { position: fixed; z-index: 1000; inset: 0 0 auto; height: var(--header-height); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s; }
.site-header.scrolled { background: rgba(255, 255, 255, .88); border-color: rgba(226, 232, 240, .9); box-shadow: 0 7px 30px rgba(15, 35, 64, .06); backdrop-filter: blur(18px); }
.nav-shell { display: flex; align-items: center; height: 100%; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.12rem; font-weight: 800; letter-spacing: -.035em; }
.brand > span:last-child > span { color: var(--blue); }
.brand-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border: 1px solid rgba(49, 87, 246, .25); border-radius: 10px; background: linear-gradient(145deg, #f2f5ff, #d9fbff); overflow: hidden; }
.brand-mark::before, .brand-mark::after, .brand-mark > span::before { content: ""; position: absolute; border-radius: 4px; background: var(--gradient); transform: rotate(45deg); }
.brand-mark::before { width: 7px; height: 18px; left: 8px; top: 6px; }
.brand-mark::after { width: 7px; height: 13px; right: 7px; top: 6px; opacity: .62; }
.brand-mark > span::before { width: 7px; height: 7px; right: 7px; bottom: 5px; opacity: .3; }
.desktop-nav { display: flex; align-items: center; gap: 35px; margin: auto; }
.desktop-nav a { position: relative; color: var(--slate-600); font-size: .84rem; font-weight: 650; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -9px; height: 2px; background: var(--gradient); transition: right .25s; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--navy-900); }
.desktop-nav a.active::after { right: 0; }
.menu-toggle { display: none; width: 44px; height: 44px; margin-left: auto; padding: 11px; border: 1px solid var(--slate-200); border-radius: 11px; background: white; cursor: pointer; }
.menu-toggle span { display: block; width: 100%; height: 2px; margin: 4px 0; border-radius: 3px; background: var(--navy-900); transition: transform .25s, opacity .25s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { position: absolute; inset: var(--header-height) 16px auto; padding: 14px; border: 1px solid var(--slate-200); border-radius: 16px; background: white; box-shadow: var(--shadow-lg); }
.mobile-menu a:not(.button) { display: block; padding: 12px 10px; color: var(--slate-700); font-weight: 650; }
.mobile-menu .button { width: 100%; margin-top: 8px; }

/* Hero */
.hero { position: relative; display: flex; align-items: center; min-height: 820px; padding-top: 145px; overflow: hidden; background: radial-gradient(circle at 84% 35%, #edf9ff 0, rgba(237,249,255,0) 38%), linear-gradient(180deg, #fbfdff 0%, #fff 90%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(49,87,246,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(49,87,246,.055) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(3px); pointer-events: none; }
.hero-orb-one { width: 420px; height: 420px; right: -190px; top: 45px; border: 1px solid rgba(49,87,246,.13); box-shadow: 0 0 0 70px rgba(49,87,246,.025), 0 0 0 140px rgba(34,211,238,.022); }
.hero-orb-two { width: 12px; height: 12px; left: 8%; top: 31%; background: var(--cyan); box-shadow: 0 0 24px var(--cyan); }
.hero-grid { position: relative; display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: 68px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px; padding: 7px 12px; border: 1px solid rgba(49,87,246,.15); border-radius: 100px; color: var(--blue-dark); background: rgba(255,255,255,.78); box-shadow: 0 5px 20px rgba(49,87,246,.06); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pulse-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.pulse-dot::after { content: ""; position: absolute; inset: -4px; border: 1px solid var(--green); border-radius: 50%; animation: pulse 2.2s infinite; }
.hero h1 { max-width: 670px; margin-bottom: 24px; font-size: clamp(3.25rem, 5.6vw, 5.6rem); font-weight: 800; letter-spacing: -.07em; }
.hero h1 span { color: transparent; background: var(--gradient); background-clip: text; -webkit-background-clip: text; }
.hero-lead { max-width: 630px; margin-bottom: 14px; color: var(--slate-700); font-size: 1.18rem; font-weight: 650; line-height: 1.55; }
.hero-description { max-width: 600px; margin-bottom: 30px; font-size: .98rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 23px; margin-top: 31px; color: var(--slate-500); font-size: .78rem; font-weight: 650; }
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof svg { color: var(--blue); }
.hero-visual { position: relative; min-height: 570px; perspective: 1200px; }
.visual-grid { position: absolute; inset: 4% -15% -4% 8%; border-radius: 50%; opacity: .35; background: repeating-radial-gradient(circle at center, rgba(49,87,246,.16) 0 1px, transparent 1px 30px); transform: rotate(-8deg); }
.command-card { position: absolute; z-index: 2; width: 520px; max-width: 90%; right: 1%; top: 46%; transform: translateY(-50%) rotateY(-5deg) rotateX(2deg); padding: 22px; border: 1px solid rgba(255,255,255,.9); border-radius: 23px; background: rgba(255,255,255,.86); box-shadow: 0 40px 90px rgba(26,54,96,.2), inset 0 0 0 1px rgba(203,213,225,.55); backdrop-filter: blur(20px); }
.command-top, .command-heading, .chart-header, .dash-title, .trace-table > div { display: flex; align-items: center; justify-content: space-between; }
.command-top { padding-bottom: 16px; border-bottom: 1px solid var(--slate-200); }
.mini-brand { display: flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 800; }
.mini-brand .brand-mark { width: 22px; height: 22px; border-radius: 7px; }
.live-pill { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 20px; color: #16825e; background: #e9fbf4; font-size: .53rem; font-weight: 750; }
.live-pill span { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.command-heading { padding: 20px 0 13px; }
.command-heading div { display: grid; gap: 3px; }
.command-heading small, .command-metrics span, .command-metrics small, .mini-products small, .dash-title small, .dash-metrics small { color: var(--slate-500); font-size: .58rem; font-style: normal; }
.command-heading strong { font-size: 1rem; }
.command-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: white; background: var(--gradient); }
.command-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.command-metrics > div { display: grid; gap: 2px; padding: 14px; border: 1px solid var(--slate-200); border-radius: 12px; background: rgba(248,250,252,.85); }
.command-metrics strong { font-size: 1.28rem; }
.activity-chart { margin: 10px 0; padding: 13px; border: 1px solid var(--slate-200); border-radius: 12px; }
.chart-header { font-size: .63rem; font-weight: 700; }
.chart-header small { color: var(--slate-500); font-size: .52rem; }
.chart-bars { display: flex; align-items: end; gap: 5px; height: 55px; margin-top: 8px; }
.chart-bars i { flex: 1; height: 35%; border-radius: 3px 3px 0 0; background: linear-gradient(#4a6aff, #a4d9fa); }
.chart-bars i:nth-child(2), .chart-bars i:nth-child(9) { height: 58%; }.chart-bars i:nth-child(3), .chart-bars i:nth-child(8) { height: 77%; }.chart-bars i:nth-child(4), .chart-bars i:nth-child(11) { height: 48%; }.chart-bars i:nth-child(5) { height: 87%; }.chart-bars i:nth-child(6) { height: 63%; }.chart-bars i:nth-child(7) { height: 98%; }.chart-bars i:nth-child(10) { height: 70%; }.chart-bars i:nth-child(12) { height: 90%; }
.mini-products { display: grid; gap: 7px; }
.mini-products > div { display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: 10px; background: var(--surface); }
.product-glyph { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: white; font-size: .8rem; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.glyph-lens { background: linear-gradient(135deg, #7858ff, #3157f6); }.glyph-form { background: linear-gradient(135deg, #00b5c8, #35d5ca); }.glyph-auth { background: linear-gradient(135deg, #101d34, #3157f6); }.glyph-leads { background: linear-gradient(135deg, #ff7867, #f8b443); }.glyph-village { background: linear-gradient(135deg, #12a975, #40cf96); }.glyph-apk { background: linear-gradient(135deg, #6b7280, #a1a9b5); }
.mini-products p { display: grid; flex: 1; margin: 0; line-height: 1.25; }
.mini-products b { font-size: .66rem; }
.mini-products em { padding: 3px 7px; border-radius: 10px; color: var(--blue-dark); background: #e9edff; font-size: .49rem; font-style: normal; font-weight: 750; }
.float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.85); border-radius: 14px; background: rgba(255,255,255,.88); box-shadow: 0 18px 40px rgba(25,52,90,.16); backdrop-filter: blur(15px); animation: float 5s ease-in-out infinite; }
.float-card-left { left: 0; top: 22%; }.float-card-right { right: -5%; bottom: 8%; animation-delay: -2.3s; }
.float-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--blue); background: #eaf0ff; }
.float-card > span:last-child { display: grid; line-height: 1.3; }.float-card b { font-size: .67rem; }.float-card small { color: var(--slate-500); font-size: .52rem; }
.avatar-stack { display: flex; }.avatar-stack i { display: grid; place-items: center; width: 25px; height: 25px; margin-left: -5px; border: 2px solid white; border-radius: 50%; color: white; background: var(--blue); font-size: .5rem; font-style: normal; font-weight: 800; }.avatar-stack i:nth-child(2) { background: #08a6b8; }.avatar-stack i:nth-child(3) { background: #8b5cf6; }

/* Trust & statistics */
.trust-strip { border-block: 1px solid var(--slate-200); background: #fbfcfe; }
.trust-list { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 80px; }
.trust-list span { display: inline-flex; align-items: center; gap: 8px; color: var(--slate-500); font-size: .7rem; font-weight: 700; white-space: nowrap; }.trust-list svg { color: var(--blue); font-size: 1.05rem; }
.stats-section { background: white; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--slate-200); }
.stat { display: grid; gap: 4px; padding: 29px 34px; border-right: 1px solid var(--slate-200); }.stat:last-child { border-right: 0; }
.stat strong { color: var(--navy-900); font-size: clamp(1.65rem, 2.5vw, 2.3rem); letter-spacing: -.05em; }.stat span { color: var(--slate-500); font-size: .7rem; font-weight: 650; }

/* Products */
.products-section { background: var(--surface); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 44px; }
.section-heading h2, .about-copy h2, .contact-copy h2 { margin-bottom: 0; font-size: clamp(2.25rem, 4.2vw, 3.8rem); }
.section-heading p { max-width: 545px; margin-bottom: 3px; font-size: .91rem; }
.section-heading.centered { display: block; max-width: 760px; margin-inline: auto; text-align: center; }.section-heading.centered p { margin: 18px auto 0; }
.product-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid #dbe3ed; }
.filter-scroll { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }.filter-scroll::-webkit-scrollbar { display: none; }
.filter-button { flex: 0 0 auto; padding: 9px 14px; border: 1px solid transparent; border-radius: 9px; color: var(--slate-500); background: transparent; font-size: .72rem; font-weight: 700; cursor: pointer; transition: .2s; }
.filter-button:hover { color: var(--navy-900); background: white; }.filter-button.active { color: white; background: var(--navy-900); box-shadow: 0 6px 16px rgba(6,16,30,.14); }
.search-box { display: flex; flex: 0 0 245px; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid #dbe3ed; border-radius: 10px; color: var(--slate-500); background: white; }
.search-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(49,87,246,.1); }.search-box input { width: 100%; border: 0; outline: 0; color: var(--navy-900); background: transparent; font-size: .78rem; }
.results-count { min-height: 21px; margin: 19px 0 10px; color: var(--slate-500); font-size: .68rem; font-weight: 650; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.product-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #e1e7ef; border-radius: 20px; background: white; box-shadow: 0 8px 26px rgba(15,35,64,.045); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.product-card:hover { transform: translateY(-7px); border-color: #cbd8e7; box-shadow: 0 24px 52px rgba(15,35,64,.12); }
.product-preview { position: relative; height: 190px; margin: 9px; overflow: hidden; border-radius: 14px; background: var(--preview-gradient, linear-gradient(145deg,#e9edff,#eefcff)); }
.product-preview-image { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preview-llmlens { --preview-gradient: linear-gradient(145deg, #dcd9ff 0%, #d7e7ff 52%, #d9fbff 100%); --modal-gradient: var(--preview-gradient); }
.preview-alurform { --preview-gradient: linear-gradient(145deg, #c8fbf1 0%, #d7fbff 52%, #eaf8ff 100%); --modal-gradient: var(--preview-gradient); }
.preview-authenticator { --preview-gradient: linear-gradient(145deg, #cdd8ee 0%, #e3eaff 55%, #d9f2ff 100%); --modal-gradient: var(--preview-gradient); }
.preview-leads-app { --preview-gradient: linear-gradient(145deg, #ffe2dc 0%, #fff0d4 55%, #fff8e9 100%); --modal-gradient: var(--preview-gradient); }
.preview-desa-digital { --preview-gradient: linear-gradient(145deg, #cdf5e4 0%, #def9dc 53%, #effce8 100%); --modal-gradient: var(--preview-gradient); }
.preview-apk-extractor { --preview-gradient: linear-gradient(145deg, #e3e7ec 0%, #edf1f5 55%, #dceafa 100%); --modal-gradient: var(--preview-gradient); }
.preview-grid { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px); background-size: 22px 22px; }
.preview-window { position: absolute; inset: 27px -18px -18px 43px; padding: 13px; border: 1px solid rgba(255,255,255,.82); border-radius: 12px 0 0 0; background: rgba(255,255,255,.88); box-shadow: 0 12px 38px rgba(13,32,61,.13); transform: rotate(-1deg); }
.preview-top { display: flex; gap: 4px; margin-bottom: 11px; }.preview-top i { width: 5px; height: 5px; border-radius: 50%; background: #cbd5e1; }
.preview-content { display: grid; grid-template-columns: 46px 1fr; gap: 9px; height: 100%; }.preview-sidebar { border-radius: 6px; background: rgba(15,35,64,.07); }.preview-main { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 32px 1fr; gap: 6px; }.preview-main i { border-radius: 5px; background: rgba(49,87,246,.12); }.preview-main i:last-child { grid-column: 1 / -1; background: linear-gradient(180deg,rgba(49,87,246,.08),rgba(34,211,238,.14)); }
.product-badge { position: absolute; z-index: 2; top: 12px; right: 12px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.65); border-radius: 20px; color: var(--badge-color, var(--blue-dark)); background: var(--badge-bg, rgba(255,255,255,.86)); backdrop-filter: blur(12px); font-size: .56rem; font-weight: 800; text-transform: uppercase; }
.product-body { display: flex; flex: 1; flex-direction: column; padding: 16px 21px 21px; }
.product-identity { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }.product-identity .product-glyph { width: 39px; height: 39px; border-radius: 11px; }.product-identity > div { display: grid; line-height: 1.25; }.product-identity h3 { margin: 0; font-size: 1.08rem; }.product-category { color: var(--blue); font-size: .57rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.product-logo-image { flex: 0 0 auto; width: 39px; height: 39px; border-radius: 11px; object-fit: contain; }
.product-logo-large { width: 48px; height: 48px; border-radius: 13px; }
.product-description { min-height: 72px; margin-bottom: 13px; font-size: .76rem; line-height: 1.55; }
.feature-list { display: grid; gap: 7px; margin: 0 0 20px; padding: 0; list-style: none; }.feature-list li { display: flex; align-items: center; gap: 8px; color: var(--slate-700); font-size: .67rem; font-weight: 620; }.feature-list svg { padding: 2px; border-radius: 50%; color: white; background: var(--blue); font-size: .9rem; }
.product-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--slate-100); }.product-status { display: inline-flex; align-items: center; gap: 6px; color: var(--slate-500); font-size: .6rem; font-weight: 700; }.product-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--status-color, var(--green)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-color, var(--green)) 15%, transparent); }
.product-status.status-available { --status-color: #13b981; }
.product-status.status-beta { --status-color: #7c5cff; }
.product-status.status-coming { --status-color: #f59e0b; }
.product-actions { display: flex; gap: 6px; }.product-actions a, .product-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 0 10px; border: 1px solid var(--slate-200); border-radius: 8px; color: var(--navy-900); background: white; font-size: .6rem; font-weight: 750; cursor: pointer; }.product-actions a { color: white; border-color: var(--navy-900); background: var(--navy-900); }.product-actions a[aria-disabled="true"] { color: var(--slate-500); border-color: var(--slate-200); background: var(--slate-100); cursor: not-allowed; }
.empty-state { padding: 70px 20px; text-align: center; }.empty-state > span { display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 18px; color: var(--blue); background: #eaf0ff; font-size: 1.5rem; }.empty-state h3 { margin-bottom: 8px; }.empty-state p { margin-bottom: 21px; font-size: .85rem; }

/* Featured product */
.featured-section { background: white; }
.featured-placeholder { position: relative; display: grid; place-items: center; min-height: 390px; overflow: hidden; padding: 56px 24px; border: 1px solid rgba(49,87,246,.15); border-radius: 30px; text-align: center; background: radial-gradient(circle at 50% 0%,rgba(34,211,238,.15),transparent 38%),linear-gradient(145deg,#07111f,#10284a); box-shadow: var(--shadow-lg); }
.featured-placeholder::before { content: ""; position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom,black,transparent); }
.featured-placeholder > * { position: relative; z-index: 1; }
.featured-placeholder-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,.15); border-radius: 17px; color: #86e7fa; background: rgba(255,255,255,.08); font-size: 1.4rem; }
.featured-placeholder .featured-label { margin-bottom: 17px; }
.featured-placeholder h2 { margin-bottom: 14px; color: white; font-size: clamp(2rem,4vw,3.2rem); }
.featured-placeholder p { max-width: 610px; margin: 0; color: #9fb0c7; font-size: .83rem; }
.featured-shell { position: relative; display: grid; grid-template-columns: .82fr 1.18fr; min-height: 570px; overflow: hidden; border-radius: 30px; color: white; background: radial-gradient(circle at 75% 30%, rgba(58,130,255,.4), transparent 40%), linear-gradient(135deg,#06101e 0%,#0c1c38 65%,#0b3152 100%); box-shadow: var(--shadow-lg); }
.featured-shell::before { content: ""; position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg,transparent,black); }
.featured-copy { position: relative; z-index: 2; padding: 58px 20px 58px 58px; }
.featured-label { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 30px; padding: 6px 10px; border: 1px solid rgba(131,217,255,.22); border-radius: 20px; color: #93e6ff; background: rgba(49,87,246,.13); font-size: .61rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.featured-product-name { display: flex; align-items: center; gap: 14px; margin-bottom: 23px; }.featured-product-name .product-glyph { width: 49px; height: 49px; font-size: 1.05rem; }.featured-product-name small { color: #94a3b8; font-size: .61rem; font-weight: 750; text-transform: uppercase; }.featured-product-name h2 { margin: 2px 0 0; font-size: 2.6rem; }
.featured-copy > p { max-width: 460px; color: #aebbcf; font-size: .83rem; }
.check-list { display: grid; gap: 15px; margin: 27px 0 31px; padding: 0; list-style: none; }.check-list li { display: flex; gap: 10px; color: white; font-size: .72rem; }.check-list li > svg { flex: 0 0 auto; margin-top: 2px; padding: 2px; border-radius: 50%; color: var(--navy-950); background: #67e8f9; }.check-list span { display: grid; color: #91a0b6; }.check-list strong { color: white; font-size: .75rem; }
.featured-preview { position: relative; z-index: 2; min-width: 0; padding: 68px 0 44px 35px; }
.dashboard-window { height: 100%; min-height: 430px; overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 17px 0 0 17px; color: var(--navy-900); background: #f8fafc; box-shadow: -24px 26px 70px rgba(0,0,0,.35); transform: perspective(1000px) rotateY(-2deg); }
.window-bar { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 13px; color: #8491a3; background: #eff3f8; }.window-bar span { display: flex; gap: 4px; }.window-bar span i { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; }.window-bar small { font-size: .49rem; }.window-bar em { width: 34px; }
.dashboard-body { display: flex; height: calc(100% - 32px); }.dashboard-body aside { display: flex; flex: 0 0 56px; flex-direction: column; align-items: center; gap: 22px; padding-top: 17px; color: #8593a6; background: white; border-right: 1px solid #e6ebf1; }.dashboard-body aside b { display: grid; place-items: center; width: 27px; height: 27px; margin-bottom: 5px; border-radius: 8px; color: white; background: var(--gradient); }.dashboard-body aside svg { width: 14px; }.dashboard-content { flex: 1; min-width: 0; padding: 18px; }.dash-title b { display: block; font-size: .9rem; }.dash-title button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid #e1e7ef; border-radius: 6px; color: var(--slate-600); background: white; font-size: .49rem; }
.dash-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 14px 0; }.dash-metrics span { display: grid; gap: 2px; padding: 11px; border: 1px solid #e3e8ef; border-radius: 8px; background: white; }.dash-metrics b { font-size: .9rem; }.dash-metrics em { color: var(--green); font-size: .46rem; font-style: normal; }
.dash-chart, .trace-table { padding: 12px; border: 1px solid #e3e8ef; border-radius: 9px; background: white; }.line-chart { position: relative; height: 92px; margin-top: 8px; overflow: hidden; background: repeating-linear-gradient(to bottom, transparent 0 22px, #eff3f7 22px 23px); }.line-chart span { position: absolute; inset: 22px -5px 5px; background: linear-gradient(180deg,rgba(49,87,246,.2),transparent); clip-path: polygon(0 75%,10% 54%,20% 64%,31% 31%,40% 46%,50% 16%,60% 35%,70% 27%,80% 47%,90% 12%,100% 25%,100% 100%,0 100%); }.line-chart::after { content: ""; position: absolute; inset: 22px -5px 5px; background: #3157f6; clip-path: polygon(0 74%,10% 52%,20% 62%,31% 29%,40% 44%,50% 14%,60% 33%,70% 25%,80% 45%,90% 10%,100% 23%,100% 27%,90% 14%,80% 49%,70% 29%,60% 37%,50% 18%,40% 48%,31% 33%,20% 66%,10% 56%,0 78%); }.line-chart i { position: absolute; z-index: 2; width: 6px; height: 6px; border: 2px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }.line-chart i:nth-child(2){left:30%;top:39px}.line-chart i:nth-child(3){left:49%;top:23px}.line-chart i:nth-child(4){left:69%;top:32px}.line-chart i:nth-child(5){left:89%;top:20px}
.trace-table { margin-top: 9px; }.trace-table > div { margin-bottom: 4px; font-size: .56rem; }.trace-table > div small { color: var(--blue); }.trace-table p { display: grid; grid-template-columns: 1fr 35px 45px; align-items: center; gap: 6px; margin: 0; padding: 7px 0; border-top: 1px solid #eff3f7; font-size: .48rem; }.trace-table p span { display: flex; align-items: center; gap: 5px; color: var(--slate-700); }.trace-table p small { color: var(--slate-500); }.trace-table p em { color: var(--green); font-style: normal; }.status-dot { width: 5px; height: 5px; border-radius: 50%; }.status-dot.good { background: var(--green); }.status-dot.warn { background: var(--orange); }

/* Ecosystem */
.ecosystem-section { overflow: hidden; background: var(--surface); }
.ecosystem-diagram { position: relative; display: grid; grid-template-columns: 1fr 290px 1fr; grid-template-rows: 1fr 1fr; align-items: center; gap: 54px 80px; min-height: 580px; max-width: 1040px; margin: 40px auto 0; }
.ecosystem-core { position: relative; z-index: 3; grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 220px; height: 220px; margin: auto; border: 1px solid rgba(49,87,246,.18); border-radius: 50%; background: white; box-shadow: 0 25px 70px rgba(33,69,119,.15), 0 0 0 30px rgba(49,87,246,.03), 0 0 0 60px rgba(34,211,238,.025); }.ecosystem-core .brand-mark { width: 54px; height: 54px; margin-bottom: 11px; border-radius: 16px; }.ecosystem-core strong { font-size: 1.18rem; }.ecosystem-core small { color: var(--slate-500); font-size: .6rem; }.core-ring { position: absolute; inset: -20px; border: 1px dashed rgba(49,87,246,.22); border-radius: 50%; animation: rotate 30s linear infinite; }
.ecosystem-point { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 14px; padding: 22px; border: 1px solid var(--slate-200); border-radius: 16px; background: white; box-shadow: var(--shadow-sm); }.ecosystem-point > span { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: var(--blue); background: #eaf0ff; }.ecosystem-point h3 { margin: 2px 0 6px; font-size: .92rem; }.ecosystem-point p { margin: 0; font-size: .69rem; line-height: 1.55; }.point-one,.point-three { text-align: left; }.point-two,.point-four { grid-column: 3; }.point-one,.point-two { grid-row: 1; align-self:end; }.point-three,.point-four { grid-row:2; align-self:start; }
.connection-lines { position: absolute; inset: 0; z-index: 0; }.connection-lines span { position: absolute; height: 1px; width: 34%; background: linear-gradient(90deg,transparent,rgba(49,87,246,.35),transparent); }.connection-lines span:nth-child(1){left:18%;top:40%;transform:rotate(18deg)}.connection-lines span:nth-child(2){right:18%;top:40%;transform:rotate(-18deg)}.connection-lines span:nth-child(3){left:18%;bottom:40%;transform:rotate(-18deg)}.connection-lines span:nth-child(4){right:18%;bottom:40%;transform:rotate(18deg)}
.orbit-products { position: absolute; z-index: 4; inset: 50% auto auto 50%; width: 390px; height: 390px; border: 1px solid rgba(49,87,246,.08); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }.orbit-products i { position: absolute; display: grid; place-items: center; width: 31px; height: 31px; border: 3px solid var(--surface); border-radius: 9px; color: white; font-size: .55rem; font-style: normal; font-weight: 800; }.orbit-products i:nth-child(1){left:42px;top:42px}.orbit-products i:nth-child(2){right:44px;top:40px}.orbit-products i:nth-child(3){right:-5px;top:179px}.orbit-products i:nth-child(4){right:45px;bottom:39px}.orbit-products i:nth-child(5){left:44px;bottom:40px}.orbit-products i:nth-child(6){left:-5px;top:179px}

/* About & why */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; }
.about-visual { position: relative; min-height: 490px; }.about-visual::before { content: ""; position: absolute; width: 370px; height: 370px; left: 40px; top: 50px; border-radius: 50%; background: var(--gradient-soft); filter: blur(1px); }
.about-panel { position: absolute; border: 1px solid rgba(255,255,255,.8); border-radius: 22px; box-shadow: var(--shadow-lg); }.main-panel { z-index: 2; inset: 35px 10px 45px 20px; padding: 55px 45px; color: white; background: radial-gradient(circle at 85% 15%,rgba(44,148,255,.45),transparent 35%),linear-gradient(145deg,#07111f,#102b4f); transform: rotate(-2.5deg); }.main-panel strong { display: block; margin: 28px 0 55px; font-size: 2.4rem; line-height: 1.15; letter-spacing: -.05em; }.main-panel em { color: #72ddf7; font-style: normal; }.main-panel small { color: #8192aa; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.build-track { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-bottom: 13px; }.build-track i { height: 5px; border-radius: 3px; background: #3157f6; }.build-track i:nth-child(2){background:#2784f6}.build-track i:nth-child(3){background:#22b6ee}.build-track i:nth-child(4){background:#22d3ee}
.detail-panel { z-index: 4; display: grid; width: 190px; right: -16px; bottom: 25px; padding: 19px; color: var(--navy-900); background: rgba(255,255,255,.92); backdrop-filter: blur(15px); }.detail-panel svg { margin-bottom: 19px; color: var(--blue); font-size: 1.4rem; }.detail-panel b { font-size: .75rem; }.detail-panel span { color: var(--slate-500); font-size: .6rem; }.about-code { position: absolute; z-index: 4; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: repeat(3,8px); gap: 7px 10px; left: -15px; top: 72px; width: 170px; padding: 15px; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: rgba(7,17,31,.88); box-shadow: 0 15px 35px rgba(0,0,0,.2); }.about-code span { grid-row: 1/4; display:grid;place-items:center;border-radius:8px;color:white;background:var(--gradient);font-size:.7rem;font-weight:800}.about-code i{border-radius:5px;background:#30425d}.about-code i:nth-child(3){width:70%}.about-code i:nth-child(4){width:85%}
.about-copy > p { margin: 23px 0 28px; font-size: .9rem; }.algostudio-note { display: flex; gap: 15px; margin-bottom: 28px; padding: 18px; border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; background: var(--surface); }.algo-mark { display: grid; flex: 0 0 auto; place-items:center;width:39px;height:39px;border-radius:10px;color:white;background:var(--navy-900);font-weight:800}.algo-mark span{color:var(--cyan)}.algostudio-note p { display: grid; margin: 0; font-size: .7rem; }.algostudio-note strong { margin-bottom: 3px; color: var(--navy-900); font-size: .75rem; }.about-actions { display: flex; align-items: center; gap: 25px; }
.why-section { background: var(--surface); }.why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 17px; }.why-card { position: relative; min-height: 260px; padding: 25px; border: 1px solid #e1e7ef; border-radius: 18px; background: white; transition: transform .3s, box-shadow .3s; }.why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }.why-card > span { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 45px; border-radius: 12px; color: var(--blue); background: #eaf0ff; }.why-card > small { position: absolute; right: 22px; top: 24px; color: #c8d1dc; font-size: .67rem; font-weight: 800; }.why-card h3 { margin-bottom: 10px; font-size: 1rem; }.why-card p { margin: 0; font-size: .7rem; line-height: 1.6; }

/* CTA & contact */
.cta-shell { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 40px; overflow: hidden; padding: 60px; border-radius: 28px; color: white; background: linear-gradient(120deg,#2344d7 0%,#3157f6 47%,#058cb8 100%); box-shadow: 0 25px 60px rgba(49,87,246,.25); }.cta-shell::before { content:"";position:absolute;inset:0;opacity:.15;background-image:radial-gradient(circle at 1px 1px,white 1px,transparent 0);background-size:26px 26px;mask-image:linear-gradient(90deg,transparent,black)}.cta-shell > div { position: relative; z-index: 2; }.cta-shell h2 { margin-bottom: 17px; font-size: clamp(2.1rem,4vw,3.4rem); }.cta-shell p { max-width: 680px; margin: 0; color: #d9e7ff; font-size: .84rem; }.cta-actions { display: flex; flex: 0 0 auto; gap: 10px; }.cta-glow { position:absolute;width:330px;height:330px;right:-80px;top:-160px;border:1px solid rgba(255,255,255,.25);border-radius:50%;box-shadow:0 0 0 50px rgba(255,255,255,.035),0 0 0 100px rgba(255,255,255,.025)}
.contact-section { background: white; }.contact-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 100px; }.contact-copy > p { max-width: 450px; margin: 23px 0 35px; font-size: .88rem; }.contact-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 25px; }.contact-list > a, .contact-list > div { display: flex; align-items: center; gap: 11px; padding: 11px 0; }.contact-list > a > span, .contact-list > div > span { display: grid; flex:0 0 auto; place-items:center;width:36px;height:36px;border-radius:10px;color:var(--blue);background:#eaf0ff}.contact-list div div, .contact-list a div { display: grid; line-height: 1.4; }.contact-list small { color: var(--slate-500); font-size: .57rem; }.contact-list strong { font-size: .69rem; }.contact-list a:hover strong { color: var(--blue); }
.contact-form { padding: 34px; border: 1px solid var(--slate-200); border-radius: 22px; background: var(--surface); box-shadow: 0 20px 55px rgba(15,35,64,.08); }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.form-field { display: grid; gap: 7px; margin-bottom: 16px; }.form-field label { color: var(--slate-700); font-size: .68rem; font-weight: 750; }.form-field label span { color: #e04c61; }.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid #d7e0ea; border-radius: 10px; outline: 0; color: var(--navy-900); background: white; font-size: .77rem; transition: border .2s, box-shadow .2s; }.form-field input, .form-field select { height: 45px; padding: 0 12px; }.form-field textarea { min-height: 120px; padding: 12px; resize: vertical; }.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(49,87,246,.1); }.form-field.invalid input, .form-field.invalid textarea { border-color: #e04c61; }.field-error { min-height: 0; color: #c9344c; font-size: .58rem; }.form-field.invalid .field-error { min-height: 13px; }.button-submit { width: 100%; }.form-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 13px 0 0; color: var(--slate-500); font-size: .56rem; }

/* Footer, modal, toast */
.site-footer { padding: 70px 0 24px; color: #d6dfec; background: var(--navy-950); }.footer-grid { display: grid; grid-template-columns: 1.8fr repeat(3,1fr); gap: 60px; padding-bottom: 55px; }.brand-light { color: white; }.brand-light .brand-mark { border-color: rgba(255,255,255,.12); background:#10233d}.footer-brand p { max-width: 340px; margin: 20px 0 24px; color: #8291a7; font-size: .72rem; }.social-links { display: flex; gap: 8px; }.social-links a { display:grid;place-items:center;width:34px;height:34px;border:1px solid #25344a;border-radius:9px;color:#9eacc0;transition:.2s}.social-links a:hover{color:white;border-color:#45617f;background:#10233d}.footer-column { display:grid;align-content:start;gap:12px}.footer-column h2 { margin-bottom: 8px; color: white; font-size: .74rem; letter-spacing:0}.footer-column a { display:flex;align-items:center;gap:4px;color:#8291a7;font-size:.67rem;transition:color .2s}.footer-column a:hover{color:white}.footer-column svg{font-size:.8rem}.footer-bottom { display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:23px;border-top:1px solid #1d2a3c;color:#6f7e92;font-size:.59rem}.footer-bottom p{margin:0;color:inherit}.footer-bottom a{color:#a7b5c8}
.modal { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 24px; }.modal[hidden] { display: none; }.modal-backdrop { position: absolute; inset: 0; background: rgba(2,8,18,.72); backdrop-filter: blur(8px); animation: fadeIn .2s; }.modal-panel { position: relative; z-index:2;width:min(920px,100%);max-height:min(760px,calc(100vh - 48px));overflow:auto;border-radius:24px;background:white;box-shadow:0 35px 100px rgba(0,0,0,.38);animation:modalIn .28s ease-out}.modal-close { position:sticky;z-index:3;float:right;top:17px;margin:17px 17px -58px 0;display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.3);border-radius:50%;color:white;background:rgba(6,16,30,.45);backdrop-filter:blur(10px);cursor:pointer}.modal-hero { position:relative;display:grid;place-items:center;height:300px;overflow:hidden;background:var(--modal-gradient,var(--gradient-soft))}.modal-hero::before{content:"";position:absolute;inset:0;opacity:.25;background-image:linear-gradient(rgba(255,255,255,.75) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.75) 1px,transparent 1px);background-size:30px 30px}.modal-dashboard { position:absolute;inset:55px 10% -30px;padding:18px;border:1px solid rgba(255,255,255,.85);border-radius:16px;background:rgba(255,255,255,.9);box-shadow:0 20px 50px rgba(15,35,64,.18);transform:rotate(-1deg)}.modal-dashboard div:first-child{width:45%;height:10px;border-radius:5px;background:rgba(49,87,246,.18)}.modal-dashboard div:nth-child(2){display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.modal-dashboard span{height:65px;border-radius:8px;background:rgba(49,87,246,.1)}.modal-dashboard div:last-child{height:95px;margin-top:10px;border-radius:8px;background:linear-gradient(180deg,rgba(49,87,246,.13),rgba(34,211,238,.07))}.modal-content-body{padding:35px}.modal-identity{display:flex;align-items:center;gap:13px;margin-bottom:18px}.modal-identity .product-glyph{width:48px;height:48px}.modal-identity h2{margin:0;font-size:1.8rem}.modal-identity small{color:var(--blue);font-size:.61rem;font-weight:750;text-transform:uppercase}.modal-description{font-size:.83rem}.modal-meta{display:flex;gap:10px;margin:20px 0}.modal-meta span{padding:6px 10px;border-radius:20px;color:var(--slate-600);background:var(--slate-100);font-size:.6rem;font-weight:700}.modal-content-body h3{margin:25px 0 12px;font-size:.8rem}.modal-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:26px}.modal-feature-grid span{display:flex;align-items:center;gap:8px;padding:13px;border:1px solid var(--slate-200);border-radius:10px;color:var(--slate-700);font-size:.65rem;font-weight:650}.modal-feature-grid svg{color:var(--blue)}
.toast { position:fixed;z-index:2500;right:22px;bottom:22px;display:flex;align-items:center;gap:12px;width:min(390px,calc(100% - 44px));padding:15px;border:1px solid #d7efe6;border-radius:14px;background:white;box-shadow:var(--shadow-lg);animation:toastIn .3s ease-out}.toast[hidden]{display:none}.toast>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:white;background:var(--green)}.toast>div{flex:1}.toast strong{font-size:.75rem}.toast p{margin:2px 0 0;font-size:.62rem}.toast button{display:grid;place-items:center;border:0;color:var(--slate-500);background:transparent;cursor:pointer}.back-to-top { position:fixed;z-index:800;right:22px;bottom:22px;display:grid;place-items:center;width:43px;height:43px;border:0;border-radius:12px;color:white;background:var(--navy-900);box-shadow:0 12px 25px rgba(6,16,30,.22);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s}.back-to-top.visible{opacity:1;visibility:visible;transform:none}.toast:not([hidden]) ~ .back-to-top{bottom:102px}
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible { opacity:1; transform:none; }.product-card.reveal:nth-child(2),.why-card.reveal:nth-child(2){transition-delay:.08s}.product-card.reveal:nth-child(3),.why-card.reveal:nth-child(3){transition-delay:.16s}.why-card.reveal:nth-child(4){transition-delay:.24s}

@keyframes pulse { 0%,100%{transform:scale(.7);opacity:.2}50%{transform:scale(1.4);opacity:.65} }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)} }
@keyframes rotate { to{transform:rotate(360deg)} }
@keyframes fadeIn { from{opacity:0} }
@keyframes modalIn { from{opacity:0;transform:translateY(15px) scale(.985)} }
@keyframes toastIn { from{opacity:0;transform:translateY(15px)} }

@media (max-width: 1100px) {
  .hero-grid { gap: 30px; }.hero h1 { font-size: clamp(3rem,5vw,4.4rem); }.command-card { right:-2%;width:490px}.float-card-right{right:-1%}
  .product-grid { grid-template-columns: repeat(2,1fr); }.why-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid,.contact-grid{gap:60px}.ecosystem-diagram{gap:45px 45px}.ecosystem-point{padding:18px}
  .cta-shell{align-items:flex-start;flex-direction:column}.footer-grid{gap:35px}
}

@media (max-width: 860px) {
  :root { --header-height: 68px; }
  .section{padding:86px 0}.section-small{padding:60px 0}.desktop-nav,.nav-cta{display:none}.menu-toggle{display:block}.site-header{background:rgba(255,255,255,.88);border-color:rgba(226,232,240,.8);backdrop-filter:blur(15px)}
  .hero { min-height:auto;padding-top:125px;padding-bottom:80px}.hero-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy p{margin-inline:auto}.eyebrow{margin-inline:auto}.hero-actions,.hero-proof{justify-content:center}.hero-visual{min-height:560px;max-width:650px;width:100%;margin:5px auto 0}.command-card{left:50%;right:auto;transform:translate(-50%,-50%);top:50%}.float-card-left{left:3%}.float-card-right{right:2%}
  .trust-list{overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.trust-list::-webkit-scrollbar{display:none}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--slate-200)}
  .section-heading{display:block}.section-heading p{margin-top:17px}.product-toolbar{align-items:stretch;flex-direction:column}.search-box{flex-basis:42px;width:100%}
  .featured-shell{grid-template-columns:1fr}.featured-copy{padding:48px 44px 20px}.featured-preview{padding:30px 0 45px 44px}.dashboard-window{min-height:400px}
  .ecosystem-diagram{grid-template-columns:1fr 1fr;grid-template-rows:auto 260px auto;gap:18px;min-height:auto}.ecosystem-core{grid-column:1/3;grid-row:2}.point-one,.point-two{grid-row:1;align-self:stretch}.point-one{grid-column:1}.point-two{grid-column:2}.point-three,.point-four{grid-row:3;align-self:stretch}.point-three{grid-column:1}.point-four{grid-column:2}.connection-lines{display:none}.orbit-products{width:350px;height:350px}.orbit-products i:nth-child(3),.orbit-products i:nth-child(6){top:159px}
  .about-grid,.contact-grid{grid-template-columns:1fr}.about-visual{max-width:600px;width:100%;margin:auto}.about-copy{max-width:680px}.contact-copy{max-width:680px}.contact-list{max-width:500px}.footer-grid{grid-template-columns:2fr 1fr 1fr}.footer-brand{grid-column:1/4}.footer-brand p{max-width:520px}
}

@media (max-width: 600px) {
  .container{width:min(calc(100% - 28px),var(--container))}.section{padding:72px 0}.section-small{padding:48px 0}
  .brand{font-size:1.03rem}.hero{padding-top:112px}.hero h1{font-size:clamp(2.55rem,13vw,3.6rem)}.hero-lead{font-size:1rem}.hero-description{font-size:.85rem}.hero-actions{flex-direction:column}.hero-actions .button{width:100%}.hero-proof{gap:12px 17px}
  .hero-visual{min-height:470px}.command-card{max-width:96%;padding:15px}.float-card-left{left:-1%;top:12%}.float-card-right{right:-1%;bottom:1%}.command-metrics>div{padding:10px}.activity-chart{padding:10px}.chart-bars{height:45px}.mini-products>div{padding:7px}.float-card{padding:9px}.float-card-right .avatar-stack{display:none}
  .trust-list{min-height:68px}.stats-grid{grid-template-columns:1fr 1fr}.stat{padding:23px 16px}.stat strong{font-size:1.55rem}.stat span{font-size:.58rem}
  .section-heading{margin-bottom:30px}.section-heading h2,.about-copy h2,.contact-copy h2{font-size:2.2rem}.product-grid{grid-template-columns:1fr}.product-preview{height:200px}.product-description{min-height:0}
  .featured-shell{border-radius:22px}.featured-copy{padding:38px 24px 15px}.featured-product-name h2{font-size:2.1rem}.featured-preview{padding:22px 0 30px 15px}.dashboard-window{min-height:345px}.dashboard-body aside{flex-basis:40px}.dashboard-body aside svg{display:none}.dashboard-content{padding:10px}.dash-metrics span{padding:7px}.dash-metrics b{font-size:.67rem}.trace-table p{grid-template-columns:1fr 29px 36px}
  .ecosystem-diagram{display:flex;flex-direction:column}.ecosystem-core{order:-1;width:190px;height:190px;margin:35px auto}.ecosystem-point{width:100%}.orbit-products{width:280px;height:280px;top:130px}.orbit-products i:nth-child(1){left:28px;top:28px}.orbit-products i:nth-child(2){right:28px;top:28px}.orbit-products i:nth-child(3){right:-4px;top:124px}.orbit-products i:nth-child(4){right:28px;bottom:28px}.orbit-products i:nth-child(5){left:28px;bottom:28px}.orbit-products i:nth-child(6){left:-4px;top:124px}
  .about-visual{min-height:420px}.main-panel{inset:25px 2px 40px 10px;padding:45px 28px}.main-panel strong{font-size:2rem}.detail-panel{right:-3px;width:165px}.about-code{left:-2px;width:145px}.about-actions{align-items:stretch;flex-direction:column;gap:18px}.about-actions .button{width:100%}.about-actions .text-link{justify-content:center}
  .why-grid{grid-template-columns:1fr}.why-card{min-height:220px}.why-card>span{margin-bottom:30px}
  .cta-shell{padding:40px 24px}.cta-shell h2{font-size:2rem}.cta-actions{width:100%;flex-direction:column}.cta-actions .button{width:100%}
  .contact-list{grid-template-columns:1fr}.contact-grid{gap:50px}.contact-form{padding:24px 17px}.form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:38px 25px}.footer-brand{grid-column:1/3}.footer-column:last-child{grid-column:1/3}.footer-bottom{align-items:flex-start;flex-direction:column}
  .modal{padding:10px}.modal-panel{max-height:calc(100vh - 20px);border-radius:18px}.modal-hero{height:230px}.modal-dashboard{inset:55px 6% -20px}.modal-content-body{padding:25px 19px}.modal-feature-grid{grid-template-columns:1fr}.modal-content-body .button{width:100%}
}

@media (max-width: 360px) {
  .hero h1{font-size:2.38rem}.hero-visual{min-height:440px}.command-card{padding:11px}.command-heading{padding:13px 0 9px}.command-icon{display:none}.activity-chart{display:none}.mini-products{margin-top:8px}.float-card-left{top:4%}.stat{padding:20px 11px}.product-body{padding-inline:17px}.product-actions a,.product-actions button{padding-inline:8px}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}