:root {
  --ink: #1b3045;
  --muted: #708296;
  --blue: #6b8cac;
  --blue-deep: #294863;
  --blue-pale: #edf3f8;
  --gold: #b39658;
  --gold-deep: #886b31;
  --gold-pale: #f5eee0;
  --line: rgba(58, 84, 110, .14);
  --surface: rgba(251, 253, 255, .82);
  --shadow: 0 22px 58px rgba(43, 66, 91, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 77% 11%, rgba(190, 211, 231, .34), transparent 30%),
    radial-gradient(circle at 8% 43%, rgba(222, 207, 173, .13), transparent 24%),
    linear-gradient(180deg, #f8fafc 0%, #edf2f7 49%, #f6f8fa 100%);
  font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
}

button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.ambient { position: fixed; pointer-events: none; border-radius: 999px; filter: blur(16px); z-index: -1; }
.ambient-one { width: 480px; height: 480px; right: -160px; top: 28%; background: rgba(102, 158, 232, .11); }
.ambient-two { width: 360px; height: 360px; left: -130px; top: 65%; background: rgba(233, 184, 61, .08); }

.site-header {
  position: fixed;
  inset: 18px 24px auto;
  z-index: 20;
  height: 68px;
  max-width: 1500px;
  margin: auto;
  padding: 0 14px 0 20px;
  display: grid;
  grid-template-columns: 260px 1fr auto;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 18px;
  background: rgba(250, 252, 254, .83);
  box-shadow: 0 10px 34px rgba(41, 62, 84, .08), inset 0 0 0 1px rgba(74, 101, 128, .07);
  backdrop-filter: blur(24px) saturate(140%);
}

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font-size: 18px; font-weight: 650; letter-spacing: -.25px; }
.brand-copy small { font-size: 10px; color: #8794a6; letter-spacing: .08em; }
.brand-mark { position: relative; width: 34px; height: 34px; display: inline-block; filter: drop-shadow(0 6px 8px rgba(206, 157, 35, .2)); }
.brand-mark > * { position: absolute; display: block; background: linear-gradient(145deg, #c7ab70, #8f7136); border-radius: 5px; }
.brand-mark span { width: 8px; height: 28px; left: 2px; top: 3px; transform: rotate(-7deg); }
.brand-mark i { width: 8px; height: 25px; right: 2px; top: 3px; transform: rotate(7deg); }
.brand-mark b { width: 9px; height: 24px; left: 13px; top: 6px; transform: rotate(45deg); transform-origin: center; clip-path: polygon(0 0,100% 0,100% 50%,50% 100%,0 50%); }
.brand-mark.mini { transform: scale(.78); transform-origin: left center; margin-right: -4px; }

nav { display: flex; align-items: center; justify-content: center; gap: 6px; }
nav a { position: relative; padding: 10px 17px; color: #68798b; text-decoration: none; font-size: 13px; font-weight: 560; border-radius: 12px; transition: color .25s ease, background .25s ease; }
nav a:hover { color: var(--ink); background: rgba(82, 125, 185, .07); }
nav a.active { color: var(--ink); }
nav a.active::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 2px; height: 1px; border-radius: 10px; background: #a88746; box-shadow: 0 2px 7px rgba(153, 119, 53, .18); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.preview-state, .header-cta { border: 0; cursor: pointer; }
.preview-state { min-width: 176px; height: 44px; padding: 0 12px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; column-gap: 8px; align-items: end; text-align: left; border: 1px solid rgba(85, 121, 168, .16); border-radius: 13px; background: rgba(255,255,255,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.state-dot { grid-row: 1 / 3; align-self: center; width: 9px; height: 9px; border-radius: 50%; background: #42bf94; box-shadow: 0 0 0 5px rgba(66, 191, 148, .1); }
.preview-state > span:not(.state-dot) { align-self: end; font-size: 11px; font-weight: 750; color: #415269; }
.preview-state small { align-self: start; font-size: 8px; color: #9aa5b3; }
.preview-state.guest .state-dot { background: #8ea1b8; box-shadow: 0 0 0 5px rgba(142,161,184,.1); }
.header-cta, .primary-action { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 30px; overflow: hidden; border-radius: 12px; border: 1px solid rgba(174, 143, 80, .58); background: linear-gradient(145deg, #2c4b65, #203b53); color: #f8fbfd; box-shadow: 0 10px 24px rgba(35, 60, 82, .16), inset 0 1px 0 rgba(255,255,255,.13); font-weight: 630; }
.header-cta { height: 44px; padding: 0 18px; }
.header-cta::before, .primary-action::before { content: ""; position: absolute; inset: -70% auto -70% -40%; width: 24%; transform: rotate(16deg); background: rgba(255,255,255,.3); filter: blur(9px); }
.header-cta::before { animation: buttonSheen 9s ease-in-out infinite; }

main { position: relative; }
.hero { position: relative; min-height: 830px; padding: 148px max(6vw, 70px) 80px; display: grid; grid-template-columns: minmax(470px, .94fr) minmax(560px, 1.06fr); align-items: center; overflow: hidden; }
.hero-grid, .video-grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(71,104,139,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(71,104,139,.1) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at 68% 40%, #000 0%, transparent 65%); }
.hero::after { content: ""; position: absolute; width: 760px; height: 760px; right: 4%; top: 7%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.87), rgba(190,210,230,.17) 44%, transparent 69%); filter: blur(7px); pointer-events: none; }
.hero-copy { position: relative; z-index: 3; max-width: 660px; }
.eyebrow, .section-kicker { color: #8b744a; font-size: 10px; font-weight: 650; letter-spacing: .19em; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 23px; }
.eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: #4dc19c; box-shadow: 0 0 0 6px rgba(77,193,156,.11); }
h1 { margin: 0; display: grid; gap: 8px; color: #1c334a; font-size: clamp(50px, 4.8vw, 76px); font-weight: 610; line-height: 1.01; letter-spacing: -.045em; }
h1 span:last-child { font-size: .7em; font-weight: 590; letter-spacing: -.035em; }
.brand-gradient { width: max-content; padding-right: 8px; color: transparent; background: linear-gradient(100deg, #876a36 0%, #b69a60 48%, #6f5932 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 8px 20px rgba(111,89,50,.1)); }
.hero-lead { margin: 31px 0 13px; font-size: 21px; font-weight: 430; line-height: 1.5; color: #41566b; letter-spacing: -.015em; }
.hero-lead strong { color: #806a41; font-weight: 600; }
.hero-description { margin: 0; color: #748397; font-size: 15px; line-height: 1.8; }
.hero-actions { display: flex; gap: 14px; margin-top: 34px; }
.primary-action, .demo-action { height: 58px; padding: 0 25px; border: 0; cursor: pointer; }
.primary-action { min-width: 218px; font-size: 14px; }
.demo-action { display: inline-flex; align-items: center; gap: 11px; border: 1px solid rgba(55,88,122,.18); border-radius: 12px; background: rgba(252,253,254,.7); color: #395a76; box-shadow: 0 8px 24px rgba(58,81,107,.06), inset 0 1px 0 rgba(255,255,255,.9); font-weight: 580; }
.play-dot { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #edf5ff; color: #4b87de; font-size: 10px; box-shadow: 0 0 0 5px rgba(73,134,221,.07); }
.trust-row { display: flex; gap: 25px; margin-top: 27px; color: #8290a2; font-size: 11px; }
.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row i { width: 5px; height: 5px; border-radius: 50%; background: #d7a52b; box-shadow: 0 0 0 4px rgba(215,165,43,.1); }

.hero-visual { position: relative; z-index: 2; min-height: 560px; perspective: 1100px; transform-style: preserve-3d; }
.visual-halo { position: absolute; left: 50%; top: 51%; width: 510px; height: 255px; transform: translate(-50%,-50%) rotateX(62deg); border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.88), rgba(177,200,224,.14) 45%, transparent 70%); filter: blur(5px); }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(69,104,142,.2); border-radius: 50%; transform-style: preserve-3d; box-shadow: inset 0 0 30px rgba(82,114,149,.04); will-change: transform; }
.orbit::before { content: ""; position: absolute; inset: 12%; border: 1px dashed rgba(194,144,25,.23); border-radius: inherit; }
.orbit-one { width: 510px; height: 260px; margin: -130px 0 0 -255px; transform: rotateX(63deg) rotateZ(-8deg); }
.orbit-two { width: 380px; height: 380px; margin: -190px 0 0 -190px; transform: rotateX(72deg) rotateZ(48deg); border-color: rgba(160,130,72,.3); box-shadow: 0 0 30px rgba(149,119,63,.05); }
.orbit-three { width: 650px; height: 325px; margin: -162px 0 0 -325px; transform: rotateX(67deg) rotateZ(15deg); border-style: dashed; }
.orbit span { position: absolute; width: 9px; height: 9px; margin: -4px; border-radius: 50%; background: #fff; border: 2px solid #6d9fe3; box-shadow: 0 0 0 5px rgba(104,158,228,.1), 0 0 18px #75a6e6; }
.orbit span:nth-child(1) { left: 3%; top: 47%; }
.orbit span:nth-child(2) { left: 58%; top: 2%; border-color: #d9a62d; box-shadow: 0 0 0 5px rgba(217,166,45,.1), 0 0 18px #e6bb53; }
.orbit span:nth-child(3) { left: 95%; top: 53%; }
.orbit span:nth-child(4) { left: 44%; top: 98%; border-color: #d9a62d; }
.core-shell { position: absolute; left: 50%; top: 50%; width: 174px; height: 174px; margin: -87px 0 0 -87px; display: grid; place-items: center; border: 1px solid rgba(80,116,154,.22); border-radius: 50%; background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(224,233,242,.64)); box-shadow: 0 26px 68px rgba(49,76,105,.14), inset 0 0 34px rgba(255,255,255,.9), 0 0 0 11px rgba(255,255,255,.3); backdrop-filter: blur(12px); will-change: transform; }
.core-shell::before { content: ""; position: absolute; inset: 17px; border-radius: 50%; border: 1px dashed rgba(74,125,194,.24); }
.core-glow { position: absolute; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, rgba(255,224,128,.62), rgba(91,145,215,.12) 54%, transparent 72%); filter: blur(3px); }
.core-mark { position: relative; z-index: 2; color: #8b703a; font-size: 50px; font-weight: 650; letter-spacing: -.1em; text-shadow: 0 7px 18px rgba(111,89,50,.12); }
.core-shell small { position: absolute; bottom: 25px; font-size: 7px; font-weight: 800; letter-spacing: .16em; color: #75879d; }
.signal { position: absolute; z-index: 5; min-width: 115px; height: 43px; padding: 0 12px 0 8px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(67,100,135,.15); border-radius: 13px; background: rgba(252,253,254,.69); box-shadow: 0 10px 23px rgba(53,77,103,.07), inset 0 1px 0 rgba(255,255,255,.92); backdrop-filter: blur(16px); color: #526579; font-size: 10px; font-weight: 570; }
.signal i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: #eef5fe; color: #447fd0; font-size: 15px; font-style: normal; }
.signal-one { left: 1%; top: 57%; }
.signal-two { left: 13%; top: 24%; }
.signal-three { right: 2%; top: 29%; }
.signal-four { right: 8%; bottom: 16%; }
.signal-five { left: 49%; top: 5%; }
.data-spire { position: absolute; bottom: 30%; width: 10px; border-radius: 8px 8px 1px 1px; background: linear-gradient(180deg, rgba(86,137,208,.15), rgba(76,129,202,.75)); box-shadow: 0 8px 13px rgba(58,100,160,.12); transform: rotateX(-8deg); }
.spire-one { left: 26%; height: 70px; }
.spire-two { left: 30%; height: 108px; }
.spire-three { right: 22%; height: 93px; }
.spire-four { right: 28%; height: 54px; }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; z-index: 4; display: flex; align-items: center; gap: 9px; transform: translateX(-50%); color: #93a1b2; font-size: 9px; letter-spacing: .14em; }
.scroll-cue span { position: relative; width: 20px; height: 31px; border: 1px solid rgba(90,124,167,.35); border-radius: 12px; }
.scroll-cue span::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 3px; background: #d2a02d; }
.scroll-cue span::after { animation: scrollDot 1.35s ease-in-out infinite; }

@keyframes buttonSheen {
  0%, 48% { transform: translateX(0) rotate(16deg); opacity: 0; }
  55% { opacity: .75; }
  72%, 100% { transform: translateX(520px) rotate(16deg); opacity: 0; }
}

@keyframes scrollDot {
  0% { transform: translateY(0); opacity: .15; }
  35% { opacity: 1; }
  100% { transform: translateY(11px); opacity: 0; }
}

.section-shell { width: min(1420px, calc(100% - 48px)); margin: 0 auto; }
.capabilities { padding: 94px 0 110px; }
.section-heading { display: grid; grid-template-columns: 1fr 430px; align-items: end; gap: 50px; margin-bottom: 35px; }
.section-heading h2, .workflow-copy h2, .tutorial-copy h2 { margin: 10px 0 0; color: #20364b; font-size: clamp(32px, 2.8vw, 46px); font-weight: 610; line-height: 1.16; letter-spacing: -.035em; }
.section-heading p, .workflow-copy p, .tutorial-copy p { margin: 0; color: #718096; line-height: 1.8; font-size: 14px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card { position: relative; min-height: 252px; padding: 24px; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; cursor: pointer; text-align: left; border: 1px solid rgba(58,85,113,.13); border-radius: 19px; background: rgba(252,253,254,.76); box-shadow: 0 14px 38px rgba(44,68,94,.07), inset 0 1px 0 rgba(255,255,255,.96); transition: border-color .35s ease, background-color .35s ease; will-change: transform; }
.feature-card::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,219,116,.2), transparent 35%); transition: opacity .25s ease; }
.feature-card:hover::before { opacity: 1; }
.feature-top { display: flex; justify-content: space-between; align-items: flex-start; }
.feature-icon { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(67,105,145,.14); border-radius: 15px; background: linear-gradient(145deg, #fafcfe, #e9f0f6); color: #5e7f9f; box-shadow: 0 8px 19px rgba(46,74,104,.07), inset 0 1px 0 #fff; font-size: 17px; font-weight: 650; }
.bot-icon { color: #8a6d36; background: linear-gradient(145deg, #fcfbf7, #f3ecde); border-color: rgba(150,117,54,.15); }
.expert-icon { color: #536ed4; }
.image-icon { color: #278aa5; }
.selection-icon { color: #5967c4; }
.feature-number { color: #9ba8b8; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.feature-title { position: relative; margin-top: 28px; color: #23384d; font-size: 19px; font-weight: 620; letter-spacing: -.02em; }
.feature-copy { position: relative; margin-top: 9px; color: #738197; font-size: 13px; line-height: 1.65; }
.feature-meta { position: relative; margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(89,126,175,.12); color: #8d99a8; font-size: 10px; font-weight: 700; }
.feature-meta i { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(143,111,51,.24); border-radius: 50%; color: #886c37; background: rgba(251,249,244,.8); font-style: normal; font-size: 15px; will-change: transform; }
.card-shine { position: absolute; z-index: 0; top: -50%; left: -35%; width: 25%; height: 180%; background: rgba(255,255,255,.75); filter: blur(9px); transform: rotate(18deg); opacity: 0; }

.workflow { padding: 108px 0; display: grid; grid-template-columns: 390px 1fr; gap: 70px; align-items: center; }
.workflow-copy p { margin-top: 20px; }
.workflow-panel { position: relative; min-height: 400px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 9px; border: 1px solid rgba(60,87,116,.13); border-radius: 25px; background: rgba(251,253,254,.7); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.96); backdrop-filter: blur(20px); overflow: hidden; padding: 55px 38px; }
.workflow-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(221,235,253,.3), transparent 45%, rgba(255,237,182,.18)); }
.flow-line { position: absolute; z-index: 0; left: 11%; right: 11%; top: 49.5%; height: 2px; background: rgba(100,137,187,.16); }
.flow-line span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, #7896b2, #a58a54); box-shadow: 0 0 10px rgba(87,116,145,.16); will-change: transform; }
.flow-step { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; }
.flow-step strong { margin-bottom: 25px; color: #9aa8b9; font-size: 9px; letter-spacing: .1em; }
.flow-step i { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid rgba(82,127,190,.18); border-radius: 50%; background: #f5f9ff; color: #6d8fbd; box-shadow: 0 9px 25px rgba(56,96,151,.08), 0 0 0 8px rgba(255,255,255,.75); font-style: normal; font-weight: 850; }
.flow-step h3 { margin: 28px 0 7px; font-size: 14px; }
.flow-step p { margin: 0; color: #8a97a8; font-size: 9px; }
.flow-step.active i { color: #fff; border-color: transparent; background: linear-gradient(145deg,#6096df,#326cb9); box-shadow: 0 12px 28px rgba(60,112,184,.24), 0 0 0 8px rgba(88,141,214,.1); }
.flow-step.active h3 { color: #b27a08; }

.tutorial { padding: 80px 0 130px; }
.tutorial-card { display: grid; grid-template-columns: 1.15fr .85fr; align-items: stretch; overflow: hidden; min-height: 470px; border: 1px solid rgba(59,87,116,.13); border-radius: 27px; background: rgba(251,253,254,.75); box-shadow: 0 28px 70px rgba(42,65,90,.09), inset 0 1px 0 rgba(255,255,255,.96); backdrop-filter: blur(22px); }
.video-stage { position: relative; min-height: 470px; overflow: hidden; background: radial-gradient(circle at 55% 47%, rgba(255,255,255,.98), rgba(205,225,249,.7) 42%, rgba(227,237,250,.83)); }
.video-grid { opacity: .55; mask-image: radial-gradient(circle at 50%,#000,transparent 70%); }
.video-play { position: absolute; left: 50%; top: 50%; z-index: 4; width: 74px; height: 74px; margin: -37px; border: 1px solid rgba(173,143,84,.5); border-radius: 50%; cursor: pointer; color: #fff; background: linear-gradient(145deg,#385872,#28445d); box-shadow: 0 18px 35px rgba(39,69,96,.21), 0 0 0 10px rgba(255,255,255,.54), 0 0 0 11px rgba(74,104,135,.12); will-change: transform; }
.video-label { position: absolute; left: 24px; bottom: 22px; color: #687b93; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.tutorial-copy { padding: 66px 62px; display: flex; flex-direction: column; justify-content: center; }
.tutorial-copy p { margin-top: 22px; max-width: 430px; }
.tutorial-button { width: max-content; min-width: 190px; height: 52px; margin-top: 29px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid rgba(62,108,173,.22); border-radius: 13px; cursor: pointer; color: #2e5f9e; background: #f7fbff; font-weight: 800; box-shadow: 0 9px 24px rgba(48,93,151,.08); }
.tutorial-copy small { margin-top: 14px; color: #9aa5b4; font-size: 9px; }

footer { width: min(1420px,calc(100% - 48px)); margin: 0 auto; padding: 34px 0 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid rgba(75,113,164,.13); color: #7c8a9c; font-size: 11px; }
.footer-brand { display: flex; align-items: center; color: var(--ink); font-size: 16px; }
footer p { margin: 0; }
footer a { justify-self: end; color: #597596; text-decoration: none; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; background: rgba(31,49,75,.28); backdrop-filter: blur(12px); }
.login-modal { position: relative; width: min(450px,100%); padding: 36px; border: 1px solid rgba(255,255,255,.82); border-radius: 26px; background: rgba(250,252,255,.94); box-shadow: 0 40px 100px rgba(28,56,94,.25), inset 0 1px 0 #fff; }
.modal-close { position: absolute; right: 15px; top: 15px; width: 34px; height: 34px; border: 1px solid rgba(81,119,170,.16); border-radius: 50%; cursor: pointer; background: #fff; color: #7c899a; }
.login-badge { width: 48px; height: 48px; margin-bottom: 21px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg,#f7dc82,#d5a12a); color: #3a2907; font-size: 22px; font-weight: 900; box-shadow: 0 12px 25px rgba(190,135,16,.2); }
.login-modal h2 { margin: 9px 0; font-size: 28px; letter-spacing: -.04em; }
.login-modal > p { margin: 0 0 25px; color: #748197; font-size: 12px; line-height: 1.7; }
.login-modal label { display: grid; gap: 8px; margin-top: 14px; color: #56687e; font-size: 11px; font-weight: 700; }
.login-modal input { width: 100%; height: 47px; padding: 0 13px; outline: 0; border: 1px solid rgba(78,118,171,.2); border-radius: 12px; background: rgba(255,255,255,.84); color: var(--ink); }
.login-modal input:focus { border-color: rgba(67,120,196,.55); box-shadow: 0 0 0 4px rgba(67,120,196,.08); }
.modal-login { width: 100%; margin-top: 21px; }
.login-modal > small { display: block; margin-top: 13px; color: #9ca7b4; text-align: center; font-size: 9px; }

.toast { position: fixed; right: 25px; bottom: 25px; z-index: 60; min-width: 330px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; visibility: hidden; opacity: 0; transform: translateY(18px); border: 1px solid rgba(73,122,189,.17); border-radius: 16px; background: rgba(250,253,255,.93); box-shadow: 0 25px 60px rgba(35,68,112,.18); backdrop-filter: blur(16px); }
.toast-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #e7f8f1; color: #249b75; font-weight: 900; }
.toast > span:last-child { display: grid; gap: 3px; }
.toast strong { font-size: 12px; }
.toast small { color: #8b97a6; font-size: 9px; }

@media (max-width: 1120px) {
  .site-header { grid-template-columns: 200px 1fr auto; }
  nav a { padding-inline: 9px; }
  .preview-state { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 150px; }
  .hero-copy { max-width: 760px; }
  .hero-visual { margin-top: 15px; }
  .feature-grid { grid-template-columns: repeat(2,1fr); }
  .workflow { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .site-header { inset: 10px 10px auto; height: 60px; grid-template-columns: 1fr auto; border-radius: 17px; padding-left: 13px; }
  .brand-copy small, nav, .header-cta span:first-child { display: none; }
  .header-cta { width: 42px; padding: 0; }
  .hero { min-height: auto; padding: 120px 20px 65px; }
  h1 { font-size: 49px; }
  h1 span:last-child { font-size: .66em; line-height: 1.1; }
  .hero-lead { font-size: 19px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .primary-action, .demo-action { width: 100%; }
  .trust-row { flex-wrap: wrap; gap: 12px 19px; }
  .hero-visual { min-height: 430px; transform: scale(.82); transform-origin: center top; margin: 10px -80px -65px; }
  .scroll-cue { display: none; }
  .section-shell { width: calc(100% - 28px); }
  .capabilities, .workflow { padding: 72px 0; }
  .section-heading { grid-template-columns: 1fr; gap: 17px; }
  .section-heading h2, .workflow-copy h2, .tutorial-copy h2 { font-size: 34px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 230px; }
  .workflow { gap: 35px; }
  .workflow-panel { min-height: auto; grid-template-columns: 1fr; gap: 25px; padding: 32px 24px; }
  .flow-line { left: 55px; right: auto; top: 70px; bottom: 70px; width: 2px; height: auto; }
  .flow-line span { width: 100%; height: 100%; transform: scaleY(0); transform-origin: center top; }
  .flow-step { grid-template-columns: 26px 60px 1fr; grid-template-rows: auto auto; column-gap: 14px; justify-items: start; text-align: left; }
  .flow-step strong { grid-row: 1 / 3; align-self: center; margin: 0; }
  .flow-step i { grid-row: 1 / 3; width: 54px; height: 54px; }
  .flow-step h3 { margin: 7px 0 0; }
  .flow-step p { margin-top: 4px; }
  .tutorial { padding: 45px 0 90px; }
  .tutorial-card { grid-template-columns: 1fr; }
  .video-stage { min-height: 360px; }
  .tutorial-copy { padding: 38px 27px 45px; }
  footer { grid-template-columns: 1fr auto; gap: 14px; }
  footer p { display: none; }
  .toast { left: 14px; right: 14px; bottom: 14px; min-width: 0; }
}

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

/* Product-led hero concept: real Miaora workflow instead of abstract decoration. */
.hero {
  grid-template-columns: minmax(440px, .82fr) minmax(610px, 1.18fr);
  gap: clamp(34px, 4vw, 72px);
  background:
    radial-gradient(circle at 79% 39%, rgba(210,228,248,.58), transparent 31%),
    radial-gradient(circle at 18% 78%, rgba(244,232,201,.32), transparent 28%),
    linear-gradient(180deg, #f9fbfd 0%, #f5f9fd 72%, #f8fafc 100%);
}
.hero::after { width: 820px; height: 680px; right: -6%; top: 13%; opacity: .62; }
.hero-grid { opacity: .08; mask-image: linear-gradient(90deg, transparent 18%, #000 68%, transparent); }
.hero-copy { max-width: 600px; }
.hero-visual {
  position: relative;
  z-index: 3;
  min-height: 635px;
  display: grid;
  place-items: center;
  perspective: none;
  transform-style: flat;
  will-change: transform;
}
.hero-visual::before {
  content: "";
  position: absolute;
  width: 92%;
  height: 76%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109,151,200,.16), rgba(150,183,221,.06) 46%, transparent 71%);
  filter: blur(26px);
}
.agent-demo {
  position: relative;
  width: min(660px, 100%);
  overflow: hidden;
  border: 1px solid rgba(68,94,123,.18);
  border-radius: 25px;
  background: rgba(250,252,254,.95);
  box-shadow: 0 38px 86px rgba(32,56,82,.17), 0 3px 12px rgba(32,56,82,.05), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
}
.agent-demo::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 22px;
  right: 22px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #b99b5a 23%, #d4bc82 50%, #7e9dbe 78%, transparent);
}
.agent-demo-bar {
  height: 70px;
  padding: 0 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(66,92,120,.11);
  background: rgba(255,255,255,.82);
}
.agent-identity { display: flex; align-items: center; gap: 11px; }
.agent-avatar, .process-agent {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(153,123,65,.2);
  color: #725a2b;
  background: linear-gradient(145deg, #f8edce, #e8d19a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  font-weight: 760;
}
.agent-avatar { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }
.agent-identity > span:last-child { display: grid; gap: 3px; }
.agent-identity strong { color: #1f3449; font-size: 13px; font-weight: 690; letter-spacing: -.01em; }
.agent-identity small { color: #8995a3; font-size: 9px; }
.agent-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(61,151,117,.13);
  border-radius: 999px;
  color: #527264;
  background: #f5faf8;
  font-size: 9px;
  font-weight: 620;
}
.agent-live i { width: 6px; height: 6px; border-radius: 50%; background: #49b98f; box-shadow: 0 0 0 4px rgba(73,185,143,.1); }
.agent-demo-body { padding: 18px; display: grid; gap: 12px; background: linear-gradient(180deg, rgba(245,248,252,.7), rgba(249,251,253,.92)); }
.user-request { display: flex; align-items: flex-start; justify-content: flex-end; gap: 9px; }
.user-request p {
  max-width: 78%;
  margin: 0;
  padding: 12px 15px;
  border-radius: 15px 4px 15px 15px;
  color: #f8fbff;
  background: linear-gradient(145deg, #34536d, #243f58);
  box-shadow: 0 9px 19px rgba(37,66,91,.13);
  font-size: 11px;
  line-height: 1.55;
  will-change: transform, opacity;
}
.user-avatar { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(69,94,122,.12); border-radius: 9px; background: #fff; color: #6a7d90; font-size: 9px; font-weight: 700; }
.agent-process {
  padding: 15px;
  border: 1px solid rgba(66,93,122,.12);
  border-radius: 17px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 8px 23px rgba(45,70,95,.045), inset 0 1px 0 #fff;
}
.process-heading { display: flex; align-items: center; gap: 10px; }
.process-agent { width: 31px; height: 31px; border-radius: 9px; font-size: 11px; }
.process-heading > div { min-width: 0; display: grid; gap: 3px; }
.process-heading strong { color: #263c51; font-size: 11px; font-weight: 670; }
.process-heading small { color: #7e8d9d; font-size: 8px; }
.process-time { margin-left: auto; color: #9aa6b2; font-size: 8px; }
.process-track { height: 3px; margin: 13px 0; overflow: hidden; border-radius: 99px; background: #e9eff5; }
.process-track span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(1);
  transform-origin: left center;
  border-radius: inherit;
  background: linear-gradient(90deg, #6287ac, #b69a5d);
  will-change: transform;
}
.process-steps { display: grid; gap: 7px; }
.process-step {
  min-height: 39px;
  padding: 5px 8px;
  display: grid;
  grid-template-columns: 26px 1fr 20px;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  color: #8b98a6;
  transition: color .25s ease, background-color .25s ease;
}
.process-step > i { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(79,107,137,.12); border-radius: 8px; color: #8d9baa; background: #f5f8fb; font-size: 7px; font-style: normal; font-weight: 730; }
.process-step > span { display: grid; gap: 2px; }
.process-step strong { font-size: 9px; font-weight: 650; }
.process-step small { color: #a0aab5; font-size: 7px; }
.process-step b { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: transparent; background: #edf2f6; font-size: 8px; }
.process-step.is-active { color: #294c6b; background: #f1f6fc; }
.process-step.is-active > i { color: #355f85; border-color: rgba(69,106,144,.2); background: #e7f0fa; }
.process-step.is-active b { color: #54789a; background: #dce9f5; }
.process-step.is-complete { color: #3e5e52; }
.process-step.is-complete > i { color: #4d7767; border-color: rgba(70,139,111,.12); background: #edf7f3; }
.process-step.is-complete b { color: #fff; background: #56a685; }
.agent-result {
  padding: 15px;
  border: 1px solid rgba(162,129,66,.22);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,253,247,.98), rgba(250,252,255,.96));
  box-shadow: 0 10px 26px rgba(77,65,41,.06), inset 0 1px 0 #fff;
  transform-origin: center top;
  will-change: transform, opacity;
}
.result-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #7b663b; font-size: 8px; font-weight: 650; }
.result-topline > span { display: inline-flex; align-items: center; gap: 6px; }
.result-topline i { width: 6px; height: 6px; border-radius: 50%; background: #b89955; box-shadow: 0 0 0 4px rgba(184,153,85,.09); }
.result-topline small { color: #8795a3; font-size: 8px; font-weight: 520; }
.result-main { display: grid; grid-template-columns: 86px 1fr; align-items: center; gap: 12px; }
.product-visual { overflow: hidden; border: 1px solid rgba(73,104,136,.1); border-radius: 13px; background: #f2f6fa; }
.product-visual svg { display: block; width: 100%; height: auto; }
.result-copy > span { color: #8292a2; font-size: 7px; }
.result-copy h3 { margin: 5px 0 4px; color: #21384d; font-size: 13px; font-weight: 690; letter-spacing: -.02em; }
.result-copy p { margin: 0; color: #7f8e9e; font-size: 8px; line-height: 1.5; }
.result-metrics { margin-top: 11px; padding-top: 10px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(73,102,132,.1); }
.result-metrics > span { padding-left: 12px; display: grid; gap: 3px; border-left: 1px solid rgba(73,102,132,.09); }
.result-metrics > span:first-child { padding-left: 0; border-left: 0; }
.result-metrics small { color: #95a0ab; font-size: 7px; }
.result-metrics strong { color: #2a465e; font-size: 13px; font-weight: 690; }
.result-action {
  width: 100%;
  height: 36px;
  margin-top: 11px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #284760;
  cursor: pointer;
  font-size: 9px;
  font-weight: 650;
}
.agent-demo-footer { min-height: 43px; padding: 0 20px; display: flex; align-items: center; gap: 20px; border-top: 1px solid rgba(66,92,120,.1); color: #81909f; background: rgba(255,255,255,.77); font-size: 8px; }
.agent-demo-footer span { display: inline-flex; align-items: center; gap: 6px; }
.agent-demo-footer i { width: 6px; height: 6px; border-radius: 50%; }
.ozon-dot { background: #5588c1; }.supply-dot { background: #d5a23d; }.profit-dot { background: #51a581; }
.proof-float {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  border: 1px solid rgba(66,92,120,.13);
  background: rgba(255,255,255,.9);
  box-shadow: 0 17px 42px rgba(40,64,89,.12), inset 0 1px 0 #fff;
  backdrop-filter: blur(14px);
  will-change: transform, opacity;
}
.proof-profit { left: -14px; bottom: 72px; min-width: 132px; padding: 11px 13px; justify-content: space-between; border-radius: 13px; }
.proof-profit span { color: #8592a0; font-size: 8px; }.proof-profit strong { color: #2e725b; font-size: 12px; }
.proof-ready { right: -58px; top: 94px; min-width: 150px; padding: 10px 12px; gap: 9px; border-radius: 14px; }
.proof-ready > i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #b29250; font-size: 10px; font-style: normal; }
.proof-ready > span { display: grid; gap: 2px; }.proof-ready strong { color: #2c4359; font-size: 9px; }.proof-ready small { color: #929eaa; font-size: 7px; }

@media (max-width: 1120px) {
  .hero { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { width: min(720px,100%); min-height: 630px; margin: 0 auto; }
}

@media (max-width: 760px) {
  .hero-visual { min-height: auto; margin: 26px 0 0; transform: none; }
  .agent-demo { width: 100%; border-radius: 20px; }
  .agent-demo-bar { height: 62px; padding: 0 14px; }
  .agent-live { padding: 7px 8px; }
  .agent-demo-body { padding: 12px; gap: 10px; }
  .user-request p { max-width: calc(100% - 38px); font-size: 10px; }
  .agent-process, .agent-result { padding: 12px; border-radius: 14px; }
  .process-time, .result-copy p { display: none; }
  .result-main { grid-template-columns: 72px 1fr; }
  .result-metrics > span { padding-left: 7px; }
  .result-metrics strong { font-size: 11px; }
  .agent-demo-footer { padding: 0 13px; gap: 12px; }
  .proof-float { display: none; }
}

/* Scroll-cinematic direction: deep hero, pinned scenes, product-led motion. */
.site-header {
  border-color: rgba(255,255,255,.1);
  background: rgba(8,20,34,.78);
  box-shadow: 0 18px 50px rgba(0,8,19,.26), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(20px) saturate(125%);
}
.brand-copy strong { color: #f8fbff; }
.brand-copy small { color: #8798aa; }
.site-header nav a { color: #91a1b3; }
.site-header nav a:hover, .site-header nav a.active { color: #fff; }
.site-header nav a::after { background: #c0a66b; }
.site-header .preview-state { border-color: rgba(255,255,255,.1); color: #edf4fa; background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.site-header .preview-state small { color: #7e91a5; }
.site-header .header-cta { color: #11263a; border-color: rgba(232,211,161,.6); background: linear-gradient(145deg,#f2dfaa,#c9aa68); box-shadow: 0 12px 32px rgba(197,162,91,.17), inset 0 1px 0 rgba(255,255,255,.65); }

.hero {
  min-height: 100svh;
  grid-template-columns: minmax(440px,.82fr) minmax(610px,1.18fr);
  background:
    radial-gradient(circle at 77% 40%, rgba(71,113,164,.27), transparent 30%),
    radial-gradient(circle at 17% 76%, rgba(168,132,65,.12), transparent 30%),
    linear-gradient(145deg,#07121f 0%,#0b1a2a 58%,#071522 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 53%, rgba(255,255,255,.025) 53% 70%, transparent 70%);
  pointer-events: none;
}
.hero::after { background: radial-gradient(circle,rgba(83,135,195,.2),rgba(36,66,101,.08) 46%,transparent 69%); opacity: .86; }
.hero-grid { opacity: .17; background-image: linear-gradient(rgba(126,159,194,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(126,159,194,.09) 1px,transparent 1px); mask-image: linear-gradient(90deg,transparent 10%,#000 60%,transparent); }
.hero .eyebrow { color: #b9a06b; }
.hero .eyebrow span { background: #61d0a9; box-shadow: 0 0 0 6px rgba(97,208,169,.1); }
.hero h1 { color: #f5f8fb; font-size: clamp(55px,5vw,78px); font-weight: 560; line-height: 1.02; letter-spacing: -.055em; }
.hero h1 span:last-child { font-size: .82em; font-weight: 540; line-height: 1.06; }
.hero .brand-gradient { color: transparent; background: linear-gradient(100deg,#f0d79a 0%,#c5a461 50%,#f4e3b7 100%); -webkit-background-clip: text; background-clip: text; filter: none; }
.hero .hero-lead { color: #d3dce5; font-weight: 420; }
.hero .hero-lead strong { color: #dfc483; }
.hero .hero-description { max-width: 570px; color: #8fa0b2; }
.hero .primary-action { color: #102438; border: 1px solid rgba(232,211,161,.56); background: linear-gradient(145deg,#efd898,#c9a75e); box-shadow: 0 16px 38px rgba(186,147,72,.16), inset 0 1px 0 rgba(255,255,255,.62); }
.hero .demo-action { color: #eaf1f7; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.hero .play-dot { color: #d9bc78; background: rgba(255,255,255,.08); box-shadow: 0 0 0 5px rgba(255,255,255,.025); }
.hero .trust-row { color: #718499; }
.hero .trust-row i { background: #c9a75e; box-shadow: 0 0 0 4px rgba(201,167,94,.08); }
.hero .scroll-cue { color: #687d92; }
.hero .scroll-cue span { border-color: rgba(226,206,158,.42); }
.hero-visual { transform-origin: center center; }
.hero-visual::before { background: radial-gradient(circle,rgba(79,129,188,.2),rgba(44,78,117,.08) 46%,transparent 71%); }
.agent-demo { box-shadow: 0 48px 110px rgba(0,7,18,.44),0 3px 18px rgba(0,7,18,.18),inset 0 1px 0 #fff; }

.capabilities {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: 120px max(5vw,54px) 80px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 14%, rgba(122,164,212,.17), transparent 28%),
    linear-gradient(180deg,#f8fafc,#eef4fa 100%);
}
.capabilities .section-heading { width: min(1280px,100%); margin: 0 auto 48px; }
.capabilities .section-heading h2 { max-width: 720px; font-size: clamp(40px,4vw,62px); font-weight: 570; }
.capabilities .section-heading p { max-width: 410px; }
.capabilities .feature-grid {
  width: max-content;
  margin-left: max(0px,calc((100vw - 1280px)/2));
  display: flex;
  gap: 24px;
  will-change: transform;
}
.capabilities .feature-card {
  flex: 0 0 clamp(350px,31vw,440px);
  width: clamp(350px,31vw,440px);
  min-height: 470px;
  padding: 28px;
  border-radius: 25px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 28px 64px rgba(31,56,82,.11),inset 0 1px 0 #fff;
}
.capabilities .feature-title { margin-top: 30px; font-size: 25px; font-weight: 610; }
.capabilities .feature-copy { max-width: 310px; font-size: 14px; }
.feature-preview {
  position: relative;
  min-height: 154px;
  margin-top: 24px;
  padding: 14px;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(70,98,127,.11);
  border-radius: 17px;
  background: linear-gradient(145deg,#f7fafd,#eef4f9);
  will-change: transform;
}
.agent-preview { display: grid; align-content: center; gap: 9px; }
.preview-prompt { justify-self: end; max-width: 78%; padding: 9px 11px; border-radius: 12px 4px 12px 12px; color: #fff; background: #284861; font-size: 9px; }
.preview-thinking { display: flex; align-items: center; gap: 4px; color: #718498; font-size: 8px; }
.preview-thinking i { width: 5px; height: 5px; border-radius: 50%; background: #b89b5d; }.preview-thinking b { margin-left: 5px; font-weight: 560; }
.preview-answer { padding: 10px 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 6px; border-radius: 12px; background: #fff; box-shadow: 0 8px 18px rgba(52,78,104,.07); }
.preview-answer b { color: #2b4d69; font-size: 20px; }.preview-answer small { color: #8291a0; font-size: 8px; }.preview-answer em { color: #44846e; font-size: 8px; font-style: normal; }
.expert-preview { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.expert-preview > span { padding: 10px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(73,102,132,.1); border-radius: 11px; background: #fff; }
.expert-preview i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #596f8a; background: #edf3f9; font-size: 8px; font-style: normal; }.expert-preview b { color: #516579; font-size: 8px; font-weight: 590; }
.image-preview { display: grid; grid-template-columns: 1fr 26px 1fr; align-items: center; gap: 6px; }
.image-before,.image-after { position: relative; height: 123px; overflow: hidden; border-radius: 12px; background: linear-gradient(145deg,#e6edf4,#cfdbe7); }
.image-after { background: radial-gradient(circle at 50% 64%,#e9d092 0 16%,transparent 17%),linear-gradient(145deg,#e6f1fb,#a9c7e5); }
.image-before i,.image-after i { position: absolute; z-index: 2; left: 7px; top: 7px; padding: 4px 6px; border-radius: 6px; color: #51667a; background: rgba(255,255,255,.78); font-size: 7px; font-style: normal; }
.image-before b,.image-after b { position: absolute; left: 50%; bottom: 17px; width: 46px; height: 56px; transform: translateX(-50%); border-radius: 12px 12px 8px 8px; background: #668db4; box-shadow: 0 9px 17px rgba(47,75,104,.17); }
.image-after b { background: #d6b25f; }.image-arrow { color: #8ca0b4; text-align: center; }
.selection-preview { display: grid; align-content: center; gap: 8px; }
.selection-preview > span { padding: 9px; display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 9px; border-radius: 11px; background: #fff; box-shadow: 0 6px 16px rgba(51,77,103,.05); }
.selection-preview i { width: 31px; height: 31px; border-radius: 9px; background: linear-gradient(145deg,#dbe9f7,#8db3d8); }.selection-preview span:nth-child(2) i { background: linear-gradient(145deg,#f0e5c8,#caaa69); }.selection-preview span:nth-child(3) i { background: linear-gradient(145deg,#d9eee6,#80b69f); }
.selection-preview b { color: #516478; font-size: 8px; font-weight: 590; }.selection-preview em { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #355c7c; font-size: 8px; font-style: normal; }
.capabilities .feature-meta { margin-top: 20px; }

.workflow { position: relative; min-height: 100svh; }
.workflow::before { content: ""; position: absolute; inset: 5% -8%; z-index: -1; border-radius: 60px; background: linear-gradient(145deg,rgba(245,234,207,.5),rgba(233,241,249,.62)); }
.tutorial { min-height: 92svh; display: grid; align-items: center; }
.tutorial-card { box-shadow: 0 45px 100px rgba(32,57,83,.16); }

@media (max-width: 1120px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-bottom: 110px; }
  .capabilities { min-height: auto; padding-inline: 34px; }
  .capabilities .feature-grid { width: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(2,1fr); }
  .capabilities .feature-card { width: auto; min-height: 430px; }
}

@media (max-width: 760px) {
  .hero { padding-top: 110px; background: linear-gradient(160deg,#07121f,#0d2032); }
  .hero h1 { font-size: 47px; }
  .hero h1 span:last-child { font-size: .78em; }
  .capabilities { padding: 78px 14px; }
  .capabilities .section-heading { margin-bottom: 28px; }
  .capabilities .section-heading h2 { font-size: 36px; }
  .capabilities .feature-grid { grid-template-columns: 1fr; gap: 15px; }
  .capabilities .feature-card { min-height: 410px; width: 100%; flex-basis: auto; }
}

@media (min-width: 900px) and (max-width: 1120px) {
  .hero {
    min-height: 100svh;
    padding: 116px 34px 54px;
    grid-template-columns: minmax(320px,.74fr) minmax(470px,1.26fr);
    gap: 12px;
  }
  .hero-copy { max-width: 390px; }
  .hero h1 { font-size: clamp(47px,5.6vw,61px); }
  .hero h1 span:last-child { font-size: .76em; }
  .hero .hero-lead { margin-top: 24px; font-size: 17px; }
  .hero .hero-description { font-size: 12px; }
  .hero .hero-actions { margin-top: 25px; }
  .hero .primary-action,.hero .demo-action { height: 51px; padding-inline: 12px; }
  .hero .primary-action { min-width: 170px; }
  .hero .demo-action { min-width: 130px; gap: 6px; font-size: 11px; white-space: nowrap; }
  .hero .demo-action .play-dot { width: 25px; height: 25px; }
  .hero .trust-row { gap: 14px; font-size: 8px; }
  .hero-visual { width: 100%; min-height: 610px; margin: 0; }
  .hero-visual .agent-demo { transform: scale(.78); transform-origin: center center; }
  .hero-visual .proof-float { display: none; }
  .capabilities {
    min-height: 100svh;
    padding: 102px 34px 68px;
  }
  .capabilities .section-heading { grid-template-columns: 1fr 350px; margin-bottom: 34px; }
  .capabilities .section-heading h2 { font-size: 46px; }
  .capabilities .feature-grid {
    width: max-content;
    margin-left: 0;
    display: flex;
    grid-template-columns: none;
  }
  .capabilities .feature-card {
    flex: 0 0 360px;
    width: 360px;
    min-height: 430px;
  }
}

/* Premium ocean-blue material and image-led product storytelling. */
.site-header {
  border-color: rgba(158, 190, 219, .13);
  background: linear-gradient(135deg, rgba(13, 31, 47, .88), rgba(8, 22, 35, .78));
  box-shadow: 0 22px 62px rgba(1, 8, 16, .34), inset 0 1px 0 rgba(211, 230, 247, .1);
}

.hero {
  background:
    radial-gradient(ellipse at 77% 32%, rgba(77, 128, 174, .3) 0%, rgba(37, 78, 115, .12) 35%, transparent 61%),
    radial-gradient(ellipse at 17% 82%, rgba(190, 151, 79, .15) 0%, rgba(100, 75, 39, .045) 37%, transparent 63%),
    linear-gradient(128deg, #091722 0%, #10283a 43%, #0c1e2d 73%, #081620 100%);
  box-shadow: inset 0 -110px 150px rgba(2, 9, 15, .3), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.hero::before {
  background:
    linear-gradient(112deg, transparent 0 48%, rgba(255, 255, 255, .027) 48% 65%, transparent 65%),
    repeating-linear-gradient(125deg, rgba(225, 239, 251, .012) 0 1px, transparent 1px 8px);
  opacity: .78;
  mix-blend-mode: soft-light;
}

.hero::after {
  width: 900px;
  height: 740px;
  background:
    radial-gradient(circle at 65% 42%, rgba(93, 153, 210, .23), transparent 35%),
    radial-gradient(circle at 43% 80%, rgba(199, 158, 83, .085), transparent 32%);
  filter: blur(13px);
  opacity: .92;
}

.hero-grid {
  opacity: .1;
  background-image:
    linear-gradient(rgba(148, 181, 211, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 181, 211, .075) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 72% 44%, #000 0%, rgba(0, 0, 0, .7) 36%, transparent 73%);
}

.agent-demo {
  box-shadow: 0 56px 130px rgba(1, 8, 18, .5), 0 0 0 1px rgba(142, 183, 218, .055), 0 4px 20px rgba(0, 7, 18, .2), inset 0 1px 0 #fff;
}

.capabilities .feature-grid {
  gap: clamp(22px, 2.2vw, 36px);
  margin-left: max(28px, calc((100vw - clamp(720px, 72vw, 1040px)) / 2));
}

.capabilities .feature-card {
  flex: 0 0 clamp(720px, 72vw, 1040px);
  width: clamp(720px, 72vw, 1040px);
  min-height: 590px;
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: 24px;
  text-align: left;
  border-color: rgba(72, 104, 136, .14);
  background: rgba(252, 253, 254, .88);
  box-shadow: 0 34px 85px rgba(28, 54, 80, .14), inset 0 1px 0 #fff;
}

.capabilities .feature-top,
.capabilities .feature-title,
.capabilities .feature-copy,
.capabilities .feature-preview,
.capabilities .feature-meta {
  grid-column: 1 / -1;
}

.capabilities .feature-title { margin-top: 22px; font-size: 29px; }
.capabilities .feature-copy { max-width: 560px; font-size: 14px; }

.image-led-preview {
  min-height: 360px;
  margin-top: 22px;
  padding: 0;
  isolation: isolate;
  border-color: rgba(69, 98, 127, .15);
  border-radius: 22px;
  background: #dce8f3;
  box-shadow: 0 22px 52px rgba(33, 61, 88, .12);
}

.image-led-preview::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(5, 17, 29, .78));
}

.image-led-preview img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: block;
  object-fit: contain;
  background: linear-gradient(145deg, #dce8f3, #eef4f9);
  transform: scale(1.015);
  transition: transform .8s cubic-bezier(.2, .75, .2, 1), filter .8s ease;
}

.feature-card:hover .image-led-preview img { transform: scale(1.045); filter: saturate(1.04) contrast(1.015); }

.preview-caption {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 21px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
}

.preview-caption small { font-size: 10px; font-weight: 700; letter-spacing: .12em; opacity: .72; }
.preview-caption b { max-width: 420px; font-size: 19px; font-weight: 590; line-height: 1.35; text-align: right; }

.capabilities .feature-meta { margin-top: 22px; }

.video-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(7, 19, 31, .22), transparent 48%), linear-gradient(180deg, transparent 56%, rgba(5, 18, 30, .5));
  pointer-events: none;
}

.video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.video-grid { z-index: 2; opacity: .16; }
.video-play { z-index: 4; backdrop-filter: blur(8px); }
.video-label { z-index: 4; color: rgba(255, 255, 255, .78); text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }

@media (min-width: 900px) and (max-width: 1120px) {
  .capabilities .feature-grid {
    width: max-content;
    margin-left: max(24px, calc((100vw - 72vw) / 2));
    display: flex;
  }

  .capabilities .feature-card {
    flex: 0 0 72vw;
    width: 72vw;
    min-height: 520px;
  }

  .image-led-preview,
  .image-led-preview img { min-height: 300px; }
}

@media (max-width: 899px) {
  .capabilities .feature-grid {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: 1fr;
  }
  .capabilities .feature-card {
    width: 100%;
    min-height: 0;
    padding: 20px;
  }
  .image-led-preview,
  .image-led-preview img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 760px) {
  .hero {
    background:
      radial-gradient(circle at 75% 22%, rgba(70, 126, 177, .24), transparent 38%),
      radial-gradient(circle at 12% 78%, rgba(190, 151, 79, .12), transparent 36%),
      linear-gradient(155deg, #091722, #10283a 55%, #091923);
  }

  .capabilities .feature-card { min-height: 0; }
  .capabilities .feature-title { font-size: 24px; }
  .preview-caption { left: 16px; right: 16px; bottom: 14px; }
  .preview-caption small { display: none; }
  .preview-caption b { max-width: 100%; font-size: 15px; text-align: left; }
}

/* Capability-aligned art direction: blue-gold folded light and module-specific imagery. */
.hero {
  background:
    radial-gradient(ellipse at 30% 46%, rgba(42, 112, 159, .2) 0%, transparent 39%),
    radial-gradient(ellipse at 78% 34%, rgba(83, 137, 186, .24) 0%, rgba(32, 72, 105, .08) 38%, transparent 63%),
    radial-gradient(ellipse at 18% 84%, rgba(198, 156, 81, .14) 0%, rgba(103, 76, 37, .035) 39%, transparent 65%),
    linear-gradient(128deg, #06111b 0%, #0b2233 44%, #0c1d2c 73%, #07131d 100%);
}

.hero-copy {
  isolation: isolate;
}

.hero-copy::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -56px -36px;
  pointer-events: none;
  background: radial-gradient(ellipse at 37% 49%, rgba(5, 15, 24, .7) 0%, rgba(6, 18, 28, .42) 48%, transparent 76%);
}

.hero-lightfolds {
  position: absolute;
  z-index: -2;
  inset: -32% -10% -26% -22%;
  overflow: hidden;
  pointer-events: none;
  border-radius: 44px;
  opacity: .88;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.92) 63%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.92) 63%, transparent 100%);
}

.hero-lightfolds::before {
  content: "";
  position: absolute;
  inset: 10% 4% 8% 1%;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(71, 158, 220, .22), transparent 43%),
    radial-gradient(ellipse at 58% 52%, rgba(218, 181, 102, .11), transparent 48%);
  filter: blur(20px);
}

.lightfold {
  position: absolute;
  left: 6%;
  top: 12%;
  width: 84%;
  height: 24%;
  transform-origin: 15% 50%;
  border-radius: 999px 24% 54% 999px;
  clip-path: polygon(0 36%, 100% 0, 82% 100%, 0 68%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(45, 119, 177, .07) 10%,
    rgba(93, 179, 233, .5) 47%,
    rgba(207, 171, 94, .25) 74%,
    transparent 100%);
  filter: blur(1px) drop-shadow(0 0 25px rgba(67, 153, 218, .28));
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.lightfold-one { transform: rotate(-31deg) translate(-8%, 2%); opacity: .6; }
.lightfold-two { top: 29%; transform: rotate(-17deg) translate(0, 2%); opacity: .86; }
.lightfold-three { top: 47%; transform: rotate(7deg) translate(-4%, 1%); opacity: .7; }
.lightfold-four { top: 62%; transform: rotate(23deg) translate(-10%, -2%); opacity: .48; }

.lightfold-glow {
  position: absolute;
  left: 17%;
  top: 30%;
  width: 55%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(105, 190, 242, .24), rgba(191, 151, 77, .09) 42%, transparent 72%);
  filter: blur(18px);
  mix-blend-mode: screen;
  will-change: transform;
}

.image-led-preview {
  background: #0a1c2b;
}

.image-led-preview img {
  object-fit: cover;
  object-position: center;
  background: #0a1c2b;
}

@media (max-width: 760px) {
  .hero-lightfolds {
    inset: -6% -35% 18% -24%;
    opacity: .5;
    transform: scale(.9);
  }
  .hero-copy::after { inset: -30px -18px; }
}

/* Code-native capability demos replace mismatched static concept art. */
.live-preview {
  min-height: 360px;
  margin-top: 22px;
  padding: 28px;
  isolation: isolate;
  border-color: rgba(68, 101, 133, .13);
  border-radius: 22px;
  background:
    radial-gradient(circle at 72% 28%, rgba(186, 214, 239, .42), transparent 35%),
    radial-gradient(circle at 18% 82%, rgba(231, 208, 154, .24), transparent 30%),
    linear-gradient(145deg, #f8fbfe, #eaf2f8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 22px 52px rgba(33, 61, 88, .1);
}

.live-preview,
.live-preview * { box-sizing: border-box; }
.live-preview b,
.live-preview small,
.live-preview em,
.live-preview i { position: relative; z-index: 2; }
.live-preview em,
.live-preview i { font-style: normal; }
.live-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .42;
  background-image:
    linear-gradient(rgba(64, 101, 135, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64, 101, 135, .08) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 76%);
  mask-image: radial-gradient(circle at 50% 45%, #000, transparent 76%);
}

/* Miaora Agent: four evidence sources converge on one decision core. */
.agent-capability-core {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 47%;
  width: 118px;
  height: 118px;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  border: 1px solid rgba(111, 151, 185, .35);
  border-radius: 50%;
  color: #18344d;
  background: radial-gradient(circle at 35% 26%, #fff, #dbeaf6 54%, #b8d3e8 100%);
  box-shadow: 0 22px 44px rgba(41, 83, 118, .2), inset 0 0 0 12px rgba(255,255,255,.38);
}
.agent-capability-core::before,
.agent-capability-core::after {
  content: "";
  position: absolute;
  inset: -15px;
  border: 1px solid rgba(74, 133, 180, .18);
  border-radius: 50%;
}
.agent-capability-core::after { inset: -30px; border-color: rgba(184, 143, 67, .16); }
.agent-capability-core > i {
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid rgba(91, 165, 216, .42);
  border-radius: 50%;
}
.agent-capability-core b { font-size: 34px; font-weight: 650; color: #947238; }
.agent-capability-core small { font-size: 9px; font-weight: 650; color: #526d85; letter-spacing: .08em; }
.proof-node {
  position: absolute;
  z-index: 2;
  width: 160px;
  min-height: 76px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 4px 10px;
  border: 1px solid rgba(73, 107, 138, .13);
  border-radius: 15px;
  color: #29465e;
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 28px rgba(50, 80, 108, .1), inset 0 1px 0 #fff;
}
.proof-node small { grid-column: 1 / -1; color: #788b9d; font-size: 9px; }
.proof-node b { font-size: 19px; font-weight: 640; }
.proof-node em { color: #6f8294; font-size: 8px; text-align: right; }
.proof-market { left: 4%; top: 10%; }
.proof-cost { left: 4%; bottom: 21%; }
.proof-profit-node { right: 4%; top: 10%; }
.proof-action { right: 4%; bottom: 21%; }
.proof-action b { color: #3f836d; }
.signal-line {
  position: absolute;
  z-index: 1;
  width: 25%;
  height: 1px;
  overflow: visible;
  background: linear-gradient(90deg, rgba(76, 126, 166, .08), rgba(91, 151, 194, .55), rgba(191, 150, 72, .38));
}
.signal-line i {
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #76bee8;
  box-shadow: 0 0 0 4px rgba(90, 169, 220, .11), 0 0 18px rgba(78, 157, 211, .7);
}
.line-one { left: 23%; top: 27%; transform: rotate(10deg); }
.line-two { left: 23%; top: 65%; transform: rotate(-10deg); }
.line-three { right: 23%; top: 27%; transform: rotate(-10deg); }
.line-four { right: 23%; top: 65%; transform: rotate(10deg); }
.live-status {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: min(74%, 520px);
  min-height: 43px;
  transform: translateX(-50%);
  padding: 10px 13px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(69, 132, 110, .16);
  border-radius: 13px;
  background: rgba(247, 253, 250, .91);
  box-shadow: 0 10px 26px rgba(43, 88, 75, .09);
}
.live-status > i { width: 8px; height: 8px; border-radius: 50%; background: #51bd98; box-shadow: 0 0 0 5px rgba(81,189,152,.1); }
.live-status b { color: #315c4d; font-size: 10px; font-weight: 620; }
.live-status small { color: #769083; font-size: 9px; }

/* Expert center: task routing between four specialized skills. */
.expert-core {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 45%;
  width: 142px;
  height: 110px;
  transform: translate(-50%, -50%);
  padding: 18px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  border: 1px solid rgba(69, 108, 145, .2);
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 44px rgba(49, 79, 107, .15), inset 0 1px 0 #fff;
}
.expert-core i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #8f7037; background: #f5ebd4; font-size: 10px; font-weight: 700; }
.expert-core b { color: #29455e; font-size: 15px; }
.expert-core small { color: #8392a1; font-size: 8px; }
.expert-orbit { position: absolute; z-index: 0; left: 50%; top: 45%; transform: translate(-50%,-50%); border: 1px solid rgba(83, 125, 163, .13); border-radius: 50%; }
.orbit-one { width: 48%; height: 65%; }
.orbit-two { width: 66%; height: 86%; border-style: dashed; border-color: rgba(180, 139, 63, .16); }
.skill-node {
  position: absolute;
  z-index: 3;
  width: 176px;
  min-height: 64px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 2px 9px;
  border: 1px solid rgba(74, 108, 139, .13);
  border-radius: 15px;
  background: rgba(255,255,255,.83);
  box-shadow: 0 11px 25px rgba(48, 77, 105, .09);
}
.skill-node > i { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #4b78a0; background: #eaf3fa; font-size: 10px; font-weight: 700; }
.skill-node b { color: #35516a; font-size: 10px; }
.skill-node small { color: #8493a1; font-size: 8px; }
.skill-keyword { left: 3%; top: 10%; }
.skill-profit { right: 3%; top: 10%; }
.skill-competitor { left: 3%; bottom: 20%; }
.skill-image { right: 3%; bottom: 20%; }
.skill-route { position: absolute; z-index: 1; width: 24%; height: 1px; background: linear-gradient(90deg, transparent, rgba(82, 142, 185, .55), transparent); }
.skill-route i { position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #c8a453; box-shadow: 0 0 13px rgba(195,155,72,.65); }
.route-one { left: 24%; top: 28%; transform: rotate(12deg); }
.route-two { right: 24%; top: 28%; transform: rotate(-12deg); }
.route-three { left: 24%; top: 63%; transform: rotate(-12deg); }
.route-four { right: 24%; top: 63%; transform: rotate(12deg); }
.expert-output {
  position: absolute;
  left: 50%;
  bottom: 17px;
  width: min(66%, 460px);
  transform: translateX(-50%);
  padding: 10px 13px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(176, 137, 64, .18);
  border-radius: 13px;
  background: rgba(255, 251, 241, .92);
}
.expert-output small { color: #957942; font-size: 8px; }
.expert-output b { color: #43586c; font-size: 10px; }
.expert-output i { color: #9f7e3d; }

/* AI image: the same product moves from plain source to composed scene. */
.image-live-preview {
  display: grid;
  grid-template-columns: minmax(0, .85fr) 104px minmax(0, 1.15fr);
  align-items: center;
  gap: 18px;
  padding: 30px;
}
.image-stage {
  position: relative;
  height: 250px;
  overflow: hidden;
  border: 1px solid rgba(69, 102, 132, .13);
  border-radius: 19px;
  background: rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 #fff, 0 14px 34px rgba(44, 75, 102, .08);
}
.image-stage > small { position: absolute; z-index: 5; left: 13px; top: 13px; padding: 6px 8px; border-radius: 8px; color: #667d92; background: rgba(255,255,255,.83); font-size: 8px; font-weight: 650; }
.stage-note { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 11px; padding: 8px; border-radius: 9px; color: #718596; background: rgba(255,255,255,.75); font-size: 8px; text-align: center; }
.product-object {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 46px;
  width: 74px;
  height: 118px;
  transform: translateX(-50%);
  border-radius: 26px 26px 18px 18px;
  background: linear-gradient(90deg, #cbd6df, #fff 31%, #edf3f7 67%, #aebdc9);
  box-shadow: 0 22px 25px rgba(50, 72, 93, .18), inset 0 1px 2px #fff;
}
.product-object > i { position: absolute; left: 17px; right: 17px; top: -18px; height: 28px; border-radius: 8px 8px 4px 4px; background: linear-gradient(90deg,#8195a6,#e8eef3 45%,#72889a); }
.product-object > b { position: absolute; left: 9px; right: 9px; top: 18px; height: 46px; border-radius: 15px; background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.85), transparent 40%), linear-gradient(145deg,#d7e5ef,#aabed0); }
.product-object > em { position: absolute; left: 0; right: 0; bottom: 18px; color: #6d8294; font-size: 7px; font-weight: 700; letter-spacing: .16em; text-align: center; }
.plain-product { filter: saturate(.6); }
.generation-beam { position: relative; height: 150px; display: grid; place-content: center; justify-items: center; gap: 5px; color: #446984; }
.generation-beam::before { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 1px; background: linear-gradient(90deg,transparent,#659bc1,#c8a252,transparent); }
.generation-beam > i { width: 52px; height: 52px; border: 1px solid rgba(76, 127, 167, .22); border-radius: 50%; background: rgba(255,255,255,.86); box-shadow: 0 12px 27px rgba(51,85,115,.12); }
.generation-beam > b { position: absolute; top: 58px; font-size: 11px; color: #9b7838; }
.generation-beam > small { position: absolute; top: 112px; font-size: 8px; color: #768a9d; }
.scene-stage { background: radial-gradient(circle at 50% 47%, rgba(255,255,255,.92), transparent 28%), linear-gradient(145deg,#cfe3f2,#89b0d0 58%,#d8c18d); }
.scene-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 19% 19%, rgba(255,255,255,.85) 0 2px, transparent 3px), radial-gradient(circle at 78% 30%, rgba(255,255,255,.7) 0 3px, transparent 4px); }
.scene-orb { position: absolute; z-index: 1; width: 170px; height: 170px; left: 50%; top: 36%; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.55); border-radius: 50%; box-shadow: inset 0 0 42px rgba(255,255,255,.26); }
.scene-pedestal { position: absolute; z-index: 2; left: 50%; bottom: 35px; width: 160px; height: 48px; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(180deg,#eff6fb,#a6bfd2); box-shadow: 0 19px 28px rgba(42,72,96,.24), inset 0 4px 6px rgba(255,255,255,.65); }
.styled-product { bottom: 72px; transform: translateX(-50%) scale(.9); }
.scene-sweep { position: absolute; z-index: 5; top: -30%; bottom: -30%; left: -35%; width: 26%; transform: rotate(14deg); background: linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); filter: blur(7px); }
.image-output { position: absolute; z-index: 7; right: 42px; bottom: 17px; padding: 9px 11px; display: flex; align-items: center; gap: 8px; border-radius: 12px; background: rgba(247,253,250,.92); box-shadow: 0 10px 24px rgba(44,80,69,.11); }
.image-output > i { width: 8px; height: 8px; border-radius: 50%; background: #4fbb94; }
.image-output b { color: #315b4c; font-size: 9px; }
.image-output small { color: #7f9188; font-size: 8px; }

/* Automated selection: candidates pass through a visible four-factor filter. */
.selection-live-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 30px;
}
.candidate-column,
.shortlist-column { position: relative; z-index: 3; display: grid; align-content: center; gap: 8px; }
.candidate-column > small,
.shortlist-column > small { margin-bottom: 2px; color: #71869a; font-size: 9px; font-weight: 650; letter-spacing: .07em; }
.candidate-row,
.shortlist-row { min-height: 49px; padding: 9px 11px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; border: 1px solid rgba(73, 105, 135, .11); border-radius: 12px; background: rgba(255,255,255,.84); box-shadow: 0 7px 18px rgba(48,76,102,.07); }
.candidate-row b,
.shortlist-row b { color: #3e586f; font-size: 9px; }
.candidate-row em,
.shortlist-row em { color: #6d8295; font-size: 8px; }
.product-dot { width: 27px; height: 27px; border-radius: 8px; background: linear-gradient(145deg,#dce6ef,#a8bac9); }
.product-dot.cyan { background: linear-gradient(145deg,#d6eef4,#78b6c8); }
.product-dot.gold { background: linear-gradient(145deg,#f3e7c8,#c9a75e); }
.product-dot.blue { background: linear-gradient(145deg,#d9e8f8,#719bc6); }
.muted-row { opacity: .52; filter: grayscale(.35); }
.filter-core { position: relative; z-index: 4; width: 108px; height: 108px; display: grid; place-content: center; justify-items: center; gap: 3px; border: 1px solid rgba(74, 125, 166, .23); border-radius: 50%; background: radial-gradient(circle at 35% 28%,#fff,#dceaf5 65%,#b8d1e3); box-shadow: 0 20px 42px rgba(41,77,108,.17), inset 0 0 0 10px rgba(255,255,255,.36); }
.filter-core > i { position: absolute; inset: -13px; border: 1px dashed rgba(177,138,65,.3); border-radius: 50%; }
.filter-core b { color: #2e526e; font-size: 13px; }
.filter-core small { color: #73899b; font-size: 8px; line-height: 1.5; text-align: center; }
.shortlist-row > i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #3d708f; font-size: 8px; font-weight: 700; }
.shortlist-row em { padding: 5px 7px; border-radius: 8px; color: #37745f; background: #e7f5ef; font-weight: 650; }
.filter-flow { position: absolute; z-index: 1; top: 50%; height: 1px; background: linear-gradient(90deg,transparent,#70a8cd,#c7a45b,transparent); }
.flow-in { left: 35%; width: 16%; }
.flow-out { right: 35%; width: 16%; }
.filter-flow i { position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #68add7; box-shadow: 0 0 0 5px rgba(80,157,205,.1); }
.scan-bar { position: absolute; left: 30px; right: 30px; bottom: 18px; height: 28px; display: flex; align-items: center; overflow: hidden; border-radius: 10px; color: #73889a; background: rgba(255,255,255,.72); font-size: 8px; }
.scan-bar > i { position: absolute; inset: 0; z-index: 0; transform: scaleX(.08); transform-origin: left center; background: linear-gradient(90deg,rgba(89,157,204,.16),rgba(204,166,85,.17)); }
.scan-bar small { padding-left: 11px; }

@media (max-width: 899px) {
  .live-preview { min-height: 330px; aspect-ratio: auto; padding: 22px; }
  .proof-node,
  .skill-node { width: 142px; }
  .proof-node em,
  .skill-node small { display: none; }
  .image-live-preview { grid-template-columns: minmax(0,1fr) 72px minmax(0,1.15fr); gap: 10px; }
  .image-stage { height: 235px; }
  .selection-live-preview { grid-template-columns: minmax(0,1fr) 90px minmax(0,1fr); gap: 12px; }
  .filter-core { width: 86px; height: 86px; }
}

@media (max-width: 560px) {
  .live-preview { min-height: 310px; padding: 15px; }
  .proof-node { width: 112px; min-height: 62px; padding: 9px; }
  .proof-node b { font-size: 14px; }
  .agent-capability-core { width: 88px; height: 88px; }
  .agent-capability-core::after { inset: -20px; }
  .skill-node { width: 118px; min-height: 54px; padding: 8px; grid-template-columns: 28px 1fr; }
  .skill-node > i { width: 28px; height: 28px; }
  .expert-core { width: 105px; height: 88px; }
  .image-live-preview { grid-template-columns: 1fr 46px 1.1fr; padding: 15px; }
  .image-stage { height: 225px; }
  .generation-beam > small { display: none; }
  .product-object { transform: translateX(-50%) scale(.78); }
  .styled-product { transform: translateX(-50%) scale(.7); }
  .image-output { right: 22px; }
  .image-output small { display: none; }
  .selection-live-preview { grid-template-columns: 1fr 62px 1fr; padding: 15px; gap: 8px; }
  .candidate-row,
  .shortlist-row { min-height: 42px; padding: 7px; grid-template-columns: auto 1fr; }
  .candidate-row em,
  .shortlist-row em { display: none; }
  .product-dot,
  .shortlist-row > i { width: 23px; height: 23px; }
  .filter-core { width: 62px; height: 62px; }
  .filter-core small { display: none; }
  .muted-row { display: none; }
  .scan-bar { left: 15px; right: 15px; }
}

/* Raycast-inspired light ribbons with Linear-like restrained glass depth. */
.hero {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 78% 19%, rgba(61, 142, 192, .31) 0%, transparent 43%),
    radial-gradient(ellipse at 10% 72%, rgba(28, 139, 153, .21) 0%, transparent 41%),
    radial-gradient(ellipse at 52% 108%, rgba(205, 158, 72, .18) 0%, transparent 48%),
    linear-gradient(132deg, #06131d 0%, #0a2939 43%, #0a2131 70%, #07151f 100%);
}

.hero::before {
  z-index: 0;
  background:
    conic-gradient(from 214deg at 46% 62%, transparent 0deg 50deg, rgba(70, 148, 185, .07) 74deg, transparent 111deg 360deg),
    radial-gradient(ellipse at 42% 58%, rgba(104, 173, 206, .075), transparent 58%);
  opacity: 1;
  mix-blend-mode: screen;
}

.hero::after {
  z-index: 0;
  right: -8%;
  top: -4%;
  width: 980px;
  height: 860px;
  background:
    radial-gradient(ellipse at 63% 38%, rgba(77, 146, 194, .18) 0%, transparent 44%),
    radial-gradient(ellipse at 34% 76%, rgba(202, 164, 88, .07) 0%, transparent 38%);
  filter: none;
  opacity: .9;
}

.hero-atmosphere {
  position: absolute;
  z-index: 1;
  inset: -14% -10%;
  overflow: hidden;
  contain: layout paint;
  pointer-events: none;
}

.hero-atmosphere::before {
  content: "";
  position: absolute;
  inset: 5% 2%;
  background:
    radial-gradient(circle at 20% 26%, rgba(105, 202, 220, .12) 0 1px, transparent 2px),
    radial-gradient(circle at 71% 21%, rgba(230, 197, 124, .12) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 63%, rgba(111, 180, 220, .1) 0 1px, transparent 2px);
  background-size: 31vw 28vw, 37vw 34vw, 43vw 39vw;
  opacity: .52;
}

.hero-atmosphere::after {
  content: "";
  position: absolute;
  right: 8%;
  top: 7%;
  width: 48%;
  height: 76%;
  border: 1px solid rgba(180, 216, 239, .09);
  border-radius: 46% 54% 43% 57% / 58% 42% 58% 42%;
  background:
    linear-gradient(132deg, rgba(215, 235, 248, .045), transparent 28% 67%, rgba(210, 173, 94, .025)),
    radial-gradient(ellipse at 36% 22%, rgba(120, 194, 225, .06), transparent 54%);
  box-shadow:
    inset 32px 0 72px rgba(109, 178, 213, .025),
    inset -22px -14px 62px rgba(208, 168, 85, .018),
    0 0 90px rgba(74, 149, 187, .025);
  transform: rotate(-11deg);
  opacity: .88;
}

/* Raycast-inspired energy ribbons: lightweight compositor layers revealed after the hero copy. */
.raycast-ribbon {
  position: absolute;
  z-index: 0;
  display: block;
  width: 78%;
  height: 17%;
  border-radius: 24px 999px 999px 24px;
  transform-origin: 50% 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 78%, transparent);
  will-change: transform, opacity;
}

.raycast-ribbon-one {
  left: -14%;
  top: 18%;
  transform: rotate(-19deg) skewX(-10deg);
  background: linear-gradient(90deg, transparent, rgba(49, 126, 188, .05) 17%, rgba(61, 165, 225, .3) 53%, rgba(128, 217, 239, .12) 74%, transparent);
  box-shadow: 0 0 72px rgba(54, 159, 214, .12);
  opacity: .7;
}

.raycast-ribbon-two {
  right: -20%;
  top: 31%;
  transform: rotate(17deg) skewX(9deg);
  background: linear-gradient(90deg, transparent, rgba(49, 151, 171, .035) 18%, rgba(66, 190, 196, .23) 49%, rgba(62, 134, 184, .1) 72%, transparent);
  box-shadow: 0 0 78px rgba(54, 173, 190, .09);
  opacity: .58;
}

.raycast-ribbon-three {
  left: -6%;
  top: 49%;
  transform: rotate(-13deg) skewX(-7deg);
  background: linear-gradient(90deg, transparent, rgba(81, 137, 176, .025) 18%, rgba(222, 178, 92, .2) 50%, rgba(90, 166, 192, .09) 72%, transparent);
  box-shadow: 0 0 66px rgba(205, 161, 75, .08);
  opacity: .55;
}

.raycast-ribbon-four {
  right: -13%;
  top: 66%;
  transform: rotate(20deg) skewX(8deg);
  background: linear-gradient(90deg, transparent, rgba(50, 128, 173, .03) 19%, rgba(91, 164, 204, .2) 50%, rgba(225, 183, 99, .08) 73%, transparent);
  box-shadow: 0 0 70px rgba(78, 153, 194, .08);
  opacity: .48;
}

.aurora-stream {
  position: absolute;
  display: block;
  border-radius: 999px 28% 56% 999px;
  transform-origin: 18% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 72%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 72%, transparent 100%);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.aurora-stream-blue {
  width: 88%;
  height: 27%;
  left: -8%;
  top: 8%;
  transform: rotate(-19deg) skewX(-8deg);
  background: linear-gradient(90deg, transparent 0%, rgba(42, 121, 174, .07) 17%, rgba(72, 178, 232, .44) 48%, rgba(139, 207, 233, .2) 72%, transparent 100%);
  box-shadow: 0 0 92px rgba(66, 165, 215, .18);
  opacity: .94;
}

.aurora-stream-cyan {
  width: 82%;
  height: 31%;
  left: -17%;
  top: 44%;
  transform: rotate(12deg) skewX(7deg);
  background: linear-gradient(90deg, transparent 0%, rgba(38, 122, 143, .055) 16%, rgba(56, 183, 188, .31) 49%, rgba(85, 154, 184, .13) 74%, transparent 100%);
  box-shadow: 0 0 88px rgba(54, 166, 181, .12);
  opacity: .86;
}

.aurora-stream-gold {
  width: 76%;
  height: 22%;
  left: 4%;
  bottom: 13%;
  transform: rotate(-9deg) skewX(-5deg);
  background: linear-gradient(90deg, transparent 0%, rgba(139, 99, 43, .04) 19%, rgba(224, 176, 86, .26) 52%, rgba(121, 157, 167, .075) 76%, transparent 100%);
  box-shadow: 0 0 78px rgba(204, 159, 76, .1);
  opacity: .82;
}

.glass-orbit {
  position: absolute;
  z-index: 2;
  left: 67%;
  top: 48%;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
}

.glass-orbit-blue {
  width: 58%;
  aspect-ratio: 1.72;
  transform: translate(-50%, -50%) rotate(-18deg);
  border: 1px solid rgba(139, 205, 235, .22);
  box-shadow: inset 0 0 48px rgba(85, 175, 214, .045), 0 0 34px rgba(76, 167, 207, .08);
}

.glass-orbit-gold {
  width: 47%;
  aspect-ratio: 1.38;
  transform: translate(-50%, -50%) rotate(31deg);
  border: 1px solid rgba(229, 191, 111, .17);
  box-shadow: inset 0 0 40px rgba(218, 174, 84, .035), 0 0 30px rgba(205, 159, 71, .055);
}

.aurora-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8ed8ee;
  box-shadow: 0 0 0 5px rgba(113, 194, 222, .04), 0 0 22px rgba(103, 193, 224, .45);
  opacity: .34;
  will-change: transform, opacity;
}

.aurora-particle-one { left: 11%; top: 32%; }
.aurora-particle-two { left: 39%; top: 17%; background: #d8ba78; box-shadow: 0 0 0 5px rgba(216, 186, 120, .035), 0 0 20px rgba(216, 186, 120, .38); }
.aurora-particle-three { right: 27%; top: 26%; }
.aurora-particle-four { right: 12%; bottom: 26%; background: #77cbb4; box-shadow: 0 0 0 5px rgba(119, 203, 180, .035), 0 0 20px rgba(119, 203, 180, .35); }

@media (max-width: 760px) {
  .hero-atmosphere { inset: -5% -40%; opacity: .72; }
  .hero-atmosphere::after { right: 3%; width: 66%; opacity: .52; }
  .aurora-stream-blue { left: -22%; top: 13%; }
  .aurora-stream-cyan { left: -28%; top: 42%; }
  .aurora-stream-gold { left: -8%; bottom: 17%; }
  .glass-orbit { left: 58%; opacity: .55; }
  .aurora-particle-three,
  .aurora-particle-four { display: none; }
  .raycast-ribbon { width: 118%; height: 12%; opacity: .38; }
  .raycast-ribbon-two,
  .raycast-ribbon-four { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-stream,
  .aurora-particle,
  .raycast-ribbon { will-change: auto; }
  .hero-atmosphere { opacity: .62; }
}

/* Centered product theatre: copy first, transparent Miaora Agent rising below. */
.hero.hero-centered-stage {
  min-height: 1180px;
  padding: 154px max(4vw, 36px) 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 48px;
  background:
    radial-gradient(ellipse at 50% 31%, rgba(47, 132, 175, .22) 0%, transparent 43%),
    radial-gradient(ellipse at 50% 87%, rgba(193, 151, 71, .09) 0%, transparent 42%),
    linear-gradient(180deg, #06121b 0%, #0a2230 48%, #07151f 100%);
}

.hero-centered-stage .hero-atmosphere {
  opacity: .64;
}

.hero-centered-stage .aurora-stream-blue {
  top: 8%;
  left: 5%;
  width: 92%;
  opacity: .68;
}

.hero-centered-stage .aurora-stream-cyan {
  top: 40%;
  opacity: .28;
}

.hero-centered-stage .aurora-stream-gold {
  bottom: 10%;
  opacity: .42;
}

.hero-centered-stage .glass-orbit {
  left: 50%;
  top: 66%;
  opacity: .42;
}

.hero-centered-stage .aurora-particle {
  opacity: .18;
}

.hero-centered-stage .hero-copy {
  z-index: 4;
  width: min(940px, 100%);
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-centered-stage .hero-copy::after {
  inset: -80px -130px;
  background: radial-gradient(ellipse at 50% 46%, rgba(4, 13, 21, .56) 0%, rgba(5, 17, 26, .25) 53%, transparent 78%);
}

.hero-centered-stage .eyebrow {
  justify-content: center;
  margin-bottom: 20px;
}

.hero-centered-stage h1 {
  justify-items: center;
  font-size: clamp(58px, 6vw, 92px);
  line-height: .98;
}

.hero-centered-stage h1 span:last-child {
  font-size: .73em;
}

.hero-centered-stage .hero-lead {
  margin-top: 28px;
}

.hero-centered-stage .hero-description {
  max-width: 690px;
  margin-inline: auto;
}

.hero-centered-stage .hero-actions,
.hero-centered-stage .trust-row {
  justify-content: center;
}

.hero-centered-stage .hero-visual {
  z-index: 3;
  width: min(1080px, 92vw);
  min-height: 650px;
  margin: 2px auto 0;
  display: grid;
  place-items: center;
  perspective: none;
  transform-origin: center top;
  will-change: transform, opacity;
}

.hero-centered-stage .hero-visual::before {
  width: 108%;
  height: 82%;
  background: radial-gradient(ellipse, rgba(75, 158, 198, .18), rgba(44, 105, 139, .07) 48%, transparent 73%);
  filter: blur(18px);
}

.hero-centered-stage .agent-demo {
  width: 100%;
  border-color: rgba(173, 210, 234, .16);
  border-radius: 26px;
  color: #e9f1f7;
  background:
    linear-gradient(145deg, rgba(15, 35, 50, .72), rgba(6, 20, 31, .58)),
    rgba(6, 18, 28, .54);
  box-shadow:
    0 52px 130px rgba(0, 7, 15, .48),
    0 0 0 1px rgba(128, 185, 220, .05),
    inset 0 1px 0 rgba(255, 255, 255, .13);
  backdrop-filter: blur(28px) saturate(126%);
}

.hero-centered-stage .agent-demo::before {
  background: linear-gradient(90deg, transparent, rgba(119, 196, 229, .65) 22%, rgba(230, 194, 111, .78) 51%, rgba(102, 170, 212, .58) 79%, transparent);
}

.hero-centered-stage .agent-demo-bar {
  border-bottom-color: rgba(182, 214, 235, .1);
  background: rgba(255, 255, 255, .055);
}

.hero-centered-stage .agent-identity strong,
.hero-centered-stage .process-heading strong,
.hero-centered-stage .result-copy h3 {
  color: #edf5fb;
}

.hero-centered-stage .agent-identity small,
.hero-centered-stage .process-heading small,
.hero-centered-stage .process-time,
.hero-centered-stage .result-copy > span,
.hero-centered-stage .result-copy p {
  color: #8fa5b7;
}

.hero-centered-stage .agent-live {
  color: #9ed6c2;
  border-color: rgba(94, 196, 156, .16);
  background: rgba(71, 163, 128, .08);
}

.hero-centered-stage .agent-demo-body {
  background: linear-gradient(180deg, rgba(2, 12, 21, .18), rgba(3, 14, 23, .34));
}

.hero-centered-stage .user-avatar {
  color: #b7c8d6;
  border-color: rgba(176, 210, 232, .14);
  background: rgba(255, 255, 255, .075);
}

.hero-centered-stage .user-request p {
  color: #f4f8fb;
  border: 1px solid rgba(145, 195, 225, .12);
  background: linear-gradient(145deg, rgba(57, 91, 116, .82), rgba(31, 63, 87, .74));
}

.hero-centered-stage .agent-process,
.hero-centered-stage .agent-result {
  border-color: rgba(172, 208, 232, .12);
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 15px 34px rgba(0, 8, 16, .12);
}

.hero-centered-stage .agent-result {
  border-color: rgba(219, 181, 102, .18);
  background: linear-gradient(145deg, rgba(202, 160, 77, .075), rgba(255, 255, 255, .045));
}

.hero-centered-stage .process-track {
  background: rgba(196, 219, 234, .11);
}

.hero-centered-stage .process-step {
  color: #8499aa;
}

.hero-centered-stage .process-step > i {
  color: #94aabd;
  border-color: rgba(168, 205, 229, .1);
  background: rgba(255, 255, 255, .05);
}

.hero-centered-stage .process-step b {
  background: rgba(255, 255, 255, .07);
}

.hero-centered-stage .process-step.is-active {
  color: #c6e1f1;
  background: rgba(78, 143, 184, .12);
}

.hero-centered-stage .process-step.is-complete {
  color: #abd3c3;
}

.hero-centered-stage .result-topline,
.hero-centered-stage .result-metrics strong {
  color: #e6ca8a;
}

.hero-centered-stage .result-topline small,
.hero-centered-stage .result-metrics small {
  color: #8297a8;
}

.hero-centered-stage .result-metrics,
.hero-centered-stage .result-metrics > span {
  border-color: rgba(170, 206, 229, .09);
}

.hero-centered-stage .result-action {
  color: #11283a;
  background: linear-gradient(145deg, #efd792, #c8a55d);
}

.hero-centered-stage .agent-demo-footer {
  color: #7f96a8;
  border-top-color: rgba(176, 210, 232, .09);
  background: rgba(255, 255, 255, .035);
}

.hero-centered-stage .proof-float {
  color: #d9e6ef;
  border-color: rgba(172, 208, 232, .13);
  background: rgba(9, 26, 39, .72);
  box-shadow: 0 18px 44px rgba(0, 8, 17, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.hero-centered-stage .proof-profit span,
.hero-centered-stage .proof-ready small { color: #879cac; }
.hero-centered-stage .proof-profit strong { color: #76c5a7; }
.hero-centered-stage .proof-ready strong { color: #e9f1f7; }

@media (max-width: 1120px) {
  .hero.hero-centered-stage { min-height: 1100px; padding-inline: 28px; }
  .hero-centered-stage .hero-visual { width: min(900px, 94vw); }
}

@media (max-width: 760px) {
  .hero.hero-centered-stage { min-height: auto; padding: 112px 18px 84px; gap: 34px; }
  .hero-centered-stage h1 { font-size: clamp(45px, 12.7vw, 62px); }
  .hero-centered-stage .hero-lead { font-size: 17px; }
  .hero-centered-stage .hero-actions { width: 100%; flex-direction: column; }
  .hero-centered-stage .primary-action,
  .hero-centered-stage .demo-action { width: 100%; }
  .hero-centered-stage .hero-visual { width: 100%; min-height: auto; margin-top: 16px; }
  .hero-centered-stage .agent-demo { border-radius: 20px; backdrop-filter: blur(18px) saturate(118%); }
  .hero-centered-stage .glass-orbit { opacity: .2; }
}

/* Continuous page flow: no pinned blank screens or repeated horizontal capability scenes. */
@media (min-width: 900px) {
  .hero.hero-centered-stage {
    min-height: auto;
    padding-bottom: 62px;
    gap: 34px;
  }

  .hero-centered-stage .hero-visual {
    width: min(1040px, 90vw);
    min-height: 620px;
  }

  .capabilities {
    position: relative;
    min-height: auto;
    padding: 190px max(5vw, 54px) 76px;
    overflow: clip;
    background:
      radial-gradient(circle at 80% 22%, rgba(122, 164, 212, .15), transparent 27%),
      linear-gradient(180deg, #07151f 0, #183040 38px, #dce7f0 152px, #f8fafc 280px, #eef4fa 100%);
  }

  .capabilities .section-heading {
    margin-bottom: 38px;
  }

  .capabilities .feature-grid {
    width: min(1280px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    transform: none;
    will-change: auto;
  }

  .capabilities .feature-card {
    width: auto;
    min-width: 0;
    min-height: 560px;
    flex: none;
  }

  .capabilities .feature-preview {
    transform: none;
  }

  .workflow {
    min-height: auto;
    padding: 76px 0 88px;
  }

  .workflow::before {
    inset: 0 -6%;
  }
}

@media (min-width: 900px) and (max-width: 1120px) {
  .capabilities {
    padding-inline: 34px;
  }

  .capabilities .feature-card {
    width: auto;
    min-height: 520px;
  }
}

/* Final homepage art direction: one color field plus Raycast-style blue-gold light blades. */
body {
  background:
    radial-gradient(ellipse at 82% 54%, rgba(118, 160, 202, .10), transparent 34%),
    radial-gradient(ellipse at 12% 72%, rgba(196, 159, 84, .07), transparent 31%),
    #edf3f7;
}

.capabilities {
  background:
    radial-gradient(circle at 79% 24%, rgba(111, 158, 201, .13), transparent 29%),
    linear-gradient(180deg, #07151f 0%, #0d2636 5%, #315064 12%, #8299aa 20%, #c4d1db 29%, #e3eaf0 37%, #edf3f7 48%, #edf3f7 100%);
}

.workflow,
.tutorial {
  background: transparent;
}

.workflow::before {
  inset: -10% -8%;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 24% 48%, rgba(202, 168, 94, .10), transparent 45%),
    radial-gradient(ellipse at 78% 42%, rgba(111, 158, 201, .11), transparent 48%);
}

.raycast-ribbon-field {
  position: absolute;
  z-index: 2;
  inset: -8% -16%;
  overflow: hidden;
  transform-origin: 50% 42%;
  pointer-events: none;
  will-change: transform;
}

.raycast-ribbon-field .raycast-ribbon {
  width: 88%;
  height: 12.5%;
  border-radius: 18px 999px 999px 18px;
  transform-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 82%, transparent 100%);
  mix-blend-mode: screen;
  filter: saturate(1.22) brightness(1.18);
  will-change: transform, opacity;
}

.raycast-ribbon-field .raycast-ribbon-one {
  left: -24%;
  top: 11%;
  transform: rotate(36deg) skewX(-4deg);
  opacity: .98;
  background:
    radial-gradient(ellipse at 58% 50%, rgba(135, 227, 255, .95), transparent 55%),
    linear-gradient(90deg, transparent 5%, rgba(34, 118, 183, .22) 17%, rgba(42, 166, 232, .98) 47%, rgba(122, 222, 248, .62) 72%, transparent 94%);
  box-shadow: 0 0 34px rgba(56, 181, 239, .36), 0 0 118px rgba(45, 154, 218, .28);
}

.raycast-ribbon-field .raycast-ribbon-two {
  left: -5%;
  top: 6%;
  transform: rotate(37.5deg) skewX(-3deg);
  opacity: .92;
  background:
    radial-gradient(ellipse at 53% 52%, rgba(116, 232, 235, .88), transparent 57%),
    linear-gradient(90deg, transparent 3%, rgba(34, 120, 165, .18) 17%, rgba(47, 197, 207, .90) 49%, rgba(69, 151, 209, .50) 75%, transparent 94%);
  box-shadow: 0 0 32px rgba(65, 205, 214, .30), 0 0 112px rgba(51, 177, 199, .22);
}

.raycast-ribbon-field .raycast-ribbon-three {
  left: 14%;
  top: 1%;
  transform: rotate(39deg) skewX(-2deg);
  opacity: .94;
  background:
    radial-gradient(ellipse at 55% 50%, rgba(247, 215, 142, .90), transparent 57%),
    linear-gradient(90deg, transparent 5%, rgba(67, 126, 169, .16) 18%, rgba(228, 183, 91, .90) 49%, rgba(93, 190, 224, .46) 74%, transparent 94%);
  box-shadow: 0 0 32px rgba(231, 191, 105, .29), 0 0 108px rgba(210, 169, 84, .22);
}

.raycast-ribbon-field .raycast-ribbon-four {
  left: 33%;
  top: -4%;
  transform: rotate(40.5deg) skewX(-2deg);
  opacity: .86;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(113, 194, 241, .82), transparent 57%),
    linear-gradient(90deg, transparent 4%, rgba(41, 104, 153, .14) 16%, rgba(67, 163, 226, .86) 48%, rgba(231, 194, 115, .42) 76%, transparent 95%);
  box-shadow: 0 0 32px rgba(77, 176, 232, .28), 0 0 110px rgba(67, 151, 210, .21);
}

.hero-centered-stage .aurora-stream-blue { opacity: .20; }
.hero-centered-stage .aurora-stream-cyan { opacity: .11; }
.hero-centered-stage .aurora-stream-gold { opacity: .14; }

@media (max-width: 899px) {
  .raycast-ribbon-field {
    inset: -3% -42%;
    opacity: .72;
    will-change: auto;
  }

  .raycast-ribbon-field .raycast-ribbon {
    width: 112%;
    height: 12%;
  }

  .raycast-ribbon-field .raycast-ribbon-two,
  .raycast-ribbon-field .raycast-ribbon-four {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .raycast-ribbon-field,
  .raycast-ribbon-field .raycast-ribbon {
    will-change: auto;
  }
}

/* Homepage v11: readable continuous canvas with clearly visible light-blade motion. */
body {
  background:
    radial-gradient(ellipse at 78% 22%, rgba(120, 170, 215, .12), transparent 34%),
    radial-gradient(ellipse at 12% 76%, rgba(202, 166, 92, .08), transparent 31%),
    #eef4f8;
}

.site-header { z-index: 30; }

.hero.hero-centered-stage {
  background:
    radial-gradient(ellipse at 50% 26%, rgba(45, 132, 177, .24), transparent 43%),
    radial-gradient(ellipse at 50% 88%, rgba(196, 153, 73, .1), transparent 42%),
    linear-gradient(180deg, #06131d 0%, #0a2635 50%, #081923 100%);
}

.raycast-ribbon-field {
  inset: 0 -12% -2%;
  opacity: .86;
  transform-origin: 50% 48%;
}

.raycast-ribbon-field .raycast-ribbon {
  width: 108%;
  height: 9.5%;
  border-radius: 999px;
  filter: saturate(1.08) brightness(1.05);
}

.raycast-ribbon-field .raycast-ribbon-one {
  left: -28%;
  top: 18%;
  transform: rotate(17deg) skewX(-5deg);
  opacity: .62;
}

.raycast-ribbon-field .raycast-ribbon-two {
  left: -9%;
  top: 31%;
  transform: rotate(16deg) skewX(-4deg);
  opacity: .48;
}

.raycast-ribbon-field .raycast-ribbon-three {
  left: -22%;
  top: 48%;
  transform: rotate(-13deg) skewX(-4deg);
  opacity: .5;
}

.raycast-ribbon-field .raycast-ribbon-four {
  left: 4%;
  top: 62%;
  transform: rotate(-12deg) skewX(-3deg);
  opacity: .4;
}

.hero-centered-stage .hero-copy::after {
  background: radial-gradient(ellipse at 50% 46%, rgba(4, 13, 21, .72) 0%, rgba(5, 17, 26, .38) 53%, transparent 79%);
}

.capabilities {
  color: #193249;
  background:
    radial-gradient(ellipse at 84% 10%, rgba(128, 181, 225, .2), transparent 31%),
    radial-gradient(ellipse at 8% 52%, rgba(218, 190, 126, .1), transparent 30%),
    repeating-linear-gradient(117deg, rgba(255,255,255,.2) 0 1px, transparent 1px 15px),
    linear-gradient(180deg, #e7f0f7 0%, #f7f9fb 36%, #eef4f8 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.92);
}

.capabilities .section-heading {
  position: relative;
  z-index: 3;
  padding: 0 clamp(4px, 2vw, 28px);
}

.capabilities .section-heading h2 { color: #183149; text-shadow: 0 1px rgba(255,255,255,.7); }
.capabilities .section-heading p { color: #526a80; font-weight: 520; }
.capabilities .section-kicker { color: #8d6a28; }
.capabilities .feature-card { background: rgba(253,254,255,.86); }

@media (min-width: 900px) {
  .capabilities { padding-top: 112px; }
}

@media (max-width: 899px) {
  .raycast-ribbon-field { inset: 2% -46% 0; opacity: .58; }
  .raycast-ribbon-field .raycast-ribbon { width: 132%; height: 8%; }
  .raycast-ribbon-field .raycast-ribbon-one { top: 22%; }
  .raycast-ribbon-field .raycast-ribbon-three { top: 55%; }
  .capabilities { background: linear-gradient(180deg, #e9f1f7, #f7f9fb 38%, #eef4f8); }
}