.hero { display: grid; min-height: 690px; grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr); align-items: center; gap: 70px; padding-block: 82px 92px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; color: #9bdcff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow > span { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.eyebrow strong { font-weight: 720; }
.hero h1 { max-width: 690px; margin: 0; font-size: clamp(50px, 5.8vw, 78px); font-weight: 680; letter-spacing: -.065em; line-height: .98; }
.hero-lead { max-width: 650px; margin: 28px 0 0; color: var(--muted); font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 28px 0 0; padding: 0; color: #c5cad9; font-size: 13px; list-style: none; }
.hero-points li { display: flex; align-items: center; gap: 7px; }
.point-check { color: var(--green); font-size: 12px; }

.product-window { position: relative; overflow: hidden; min-height: 470px; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; background: rgba(12, 14, 23, .96); box-shadow: 0 44px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(54,109,255,.08), 0 0 100px rgba(45,92,255,.14); transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); transform-origin: center right; }
.product-window::before { position: absolute; z-index: 0; inset: -50% 35% 45% -15%; border-radius: 50%; background: rgba(42, 117, 255, .12); filter: blur(50px); content: ""; }
.window-topbar { position: relative; z-index: 1; display: flex; height: 58px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(18,21,32,.9); }
.window-brand { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 680; }
.window-brand img { width: 25px; height: 25px; }
.agent-state { display: flex; align-items: center; gap: 7px; color: #aab2c6; font-size: 10px; }
.agent-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(84,214,155,.8); }
.window-body { position: relative; z-index: 1; display: grid; min-height: 412px; grid-template-columns: 122px minmax(0, 1fr); }
.stage-rail { padding: 15px 9px; border-right: 1px solid var(--line); background: rgba(7,9,15,.65); }
[dir="rtl"] .stage-rail { border-right: 0; border-left: 1px solid var(--line); }
.stage-item { display: flex; min-height: 43px; align-items: center; gap: 8px; padding: 0 9px; border-radius: 9px; color: #687087; font-size: 10px; }
.stage-item.is-active { color: white; background: linear-gradient(90deg, rgba(42,107,255,.2), rgba(129,55,236,.08)); }
.stage-number { display: grid; width: 20px; height: 20px; place-items: center; flex: none; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; font-size: 8px; }
.stage-item.is-active .stage-number { border-color: rgba(78,139,255,.5); color: #9fd8ff; }
.preview-main { min-width: 0; padding: 28px 26px; }
.preview-heading { display: grid; gap: 5px; }
.preview-heading > span { color: #788199; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.preview-heading strong { font-size: 17px; font-weight: 620; letter-spacing: -.025em; }
.preview-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.screen-card { min-width: 0; }
.screen-card small { display: block; overflow: hidden; margin-top: 7px; color: #8e96aa; font-size: 8px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.phone-mini { position: relative; overflow: hidden; height: 154px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: linear-gradient(160deg, #171d2c, #0b0e16); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.phone-mini::before { position: absolute; top: 6px; left: 50%; width: 23px; height: 4px; border-radius: 4px; background: #090b10; content: ""; transform: translateX(-50%); }
.phone-mini i { position: absolute; top: 23px; right: 10px; left: 10px; height: 46px; border-radius: 8px; background: linear-gradient(135deg, rgba(38,184,255,.7), rgba(91,47,255,.8)); }
.phone-mini span { position: absolute; top: 78px; right: 10px; left: 10px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.13); box-shadow: 0 14px rgba(255,255,255,.08), 0 28px rgba(255,255,255,.05); }
.phone-mini b { position: absolute; right: 10px; bottom: 10px; left: 10px; height: 17px; border-radius: 6px; background: rgba(61,111,255,.22); }
.phone-2 i { background: linear-gradient(135deg, rgba(35,100,255,.42), rgba(33,37,58,.8)); }
.phone-3 i { height: 63px; background: linear-gradient(135deg, rgba(144,57,255,.66), rgba(35,100,255,.6)); }
.phone-4 i { border-radius: 50%; inset-inline: 24px; height: 46px; }
.preview-progress { display: grid; gap: 10px; margin-top: 25px; padding-top: 19px; border-top: 1px solid var(--line); }
.preview-progress > span { display: flex; align-items: center; gap: 8px; color: #7f879b; font-size: 9px; }
.preview-progress i { width: 14px; height: 14px; border: 1px solid rgba(84,214,155,.35); border-radius: 50%; background: rgba(84,214,155,.08); }

.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.trust-item { display: grid; min-height: 118px; place-content: center; gap: 5px; border-left: 1px solid var(--line); text-align: center; }
[dir="rtl"] .trust-item { border-left: 0; border-right: 1px solid var(--line); }
.trust-item:first-child { border-left: 0; border-right: 0; }
.trust-item strong { font-size: 24px; font-weight: 650; letter-spacing: -.04em; }
.trust-item span { color: var(--subtle); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }

.workflow-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: 22px; background: rgba(14,17,26,.58); }
.workflow-card { position: relative; min-height: 270px; padding: 28px 24px; border-left: 1px solid var(--line); }
[dir="rtl"] .workflow-card { border-left: 0; border-right: 1px solid var(--line); }
.workflow-card:first-child { border-left: 0; border-right: 0; }
.workflow-card::after { position: absolute; right: -4px; bottom: 33px; width: 7px; height: 7px; border-radius: 50%; background: #2f65ff; box-shadow: 0 0 18px rgba(47,101,255,.7); content: ""; }
[dir="rtl"] .workflow-card::after { right: auto; left: -4px; }
.workflow-card:last-child::after { display: none; }
.workflow-number { display: inline-flex; padding: 5px 7px; border: 1px solid rgba(77,133,255,.28); border-radius: 7px; color: #78c9ff; background: rgba(44,101,255,.08); font-size: 10px; }
.workflow-card h3 { margin: 60px 0 12px; font-size: 20px; font-weight: 620; letter-spacing: -.03em; }
.workflow-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.capability-section { display: grid; grid-template-columns: minmax(0, .86fr) minmax(520px, 1.14fr); gap: 90px; }
.capability-intro h2 { max-width: 600px; }
.capability-intro > p { margin-top: 24px; }
.capability-list { display: grid; margin-top: 40px; }
.capability-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 19px 0; border-top: 1px solid var(--line); }
.capability-mark { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; color: #80d5ff; background: rgba(37,113,255,.12); }
.capability-row strong { display: block; font-size: 14px; font-weight: 630; }
.capability-row p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.asset-board { align-self: center; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 25px; background: linear-gradient(155deg, rgba(24,28,42,.94), rgba(10,12,19,.98)); box-shadow: 0 35px 90px rgba(0,0,0,.34); }
.asset-board-heading { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 23px; border-bottom: 1px solid var(--line); }
.asset-board-heading span { color: #76cbff; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.asset-board-heading strong { font-size: 13px; font-weight: 600; }
.asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.asset-card { display: grid; min-height: 150px; align-content: end; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
[dir="rtl"] .asset-card { border-right: 0; border-left: 1px solid var(--line); }
.asset-card:nth-child(3n) { border-right: 0; border-left: 0; }
.asset-card:nth-last-child(-n+3) { border-bottom: 0; }
.asset-shape { display: grid; width: 48px; height: 38px; margin-bottom: 18px; place-items: center; border: 1px solid rgba(71,129,255,.28); border-radius: 11px; color: #90d6ff; background: linear-gradient(135deg, rgba(36,153,255,.18), rgba(125,46,242,.15)); font-size: 9px; font-weight: 700; }
.asset-2 .asset-shape { width: 72px; height: 34px; }
.asset-3 .asset-shape { width: 25px; height: 43px; border-radius: 8px; }
.asset-card strong { font-size: 12px; font-weight: 620; }
.asset-card small { margin-top: 4px; color: var(--subtle); font-size: 9px; }
.export-row { display: grid; min-height: 79px; grid-template-columns: 31px minmax(0, 1fr); align-items: center; gap: 11px; padding: 0 22px; border-top: 1px solid var(--line); background: rgba(50,100,255,.055); }
.export-check { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: var(--green); background: rgba(84,214,155,.09); }
.export-row div { display: grid; gap: 3px; }
.export-row strong { font-size: 12px; font-weight: 620; }
.export-row small { color: var(--muted); font-size: 9px; line-height: 1.4; }

.download-section { display: grid; min-height: 270px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; margin-block: 30px 100px; padding: 42px 48px; border: 1px solid rgba(89,124,255,.26); border-radius: 28px; background: radial-gradient(circle at 10% 20%, rgba(43,175,255,.12), transparent 32%), radial-gradient(circle at 80% 90%, rgba(135,45,246,.13), transparent 38%), #0f121d; box-shadow: 0 35px 90px rgba(0,0,0,.3); }
.download-icon { display: grid; width: 98px; height: 98px; place-items: center; border: 1px solid var(--line); border-radius: 25px; background: rgba(255,255,255,.035); }
.download-icon img { width: 76px; height: 76px; }
.download-copy h2 { font-size: clamp(32px, 3.5vw, 48px); }
.download-copy > p { margin-top: 13px; font-size: 14px; }
.download-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; color: var(--subtle); font-size: 10px; }
.download-meta b { color: #aab5ce; font-weight: 550; }
.download-button { min-width: 168px; }