.hero-ai-halo { position: absolute; width: 390px; height: 390px; left: 65px; top: 35px; border-radius: 50%; background: radial-gradient(circle, #e9e9e995, #f4f4f438 55%, transparent 72%); }
.hero-ai-lines { position: absolute; width: 520px; height: 480px; inset: 0 auto auto 0; }
.hero-ai-path { stroke-dasharray: 3 6; animation: hero-ai-flow 18s linear infinite; }
.hero-ai-passport { position: absolute; z-index: 2; top: 158px; left: 112px; width: 302px; height: 180px; padding: 22px 25px; border: 1px solid #424242; border-radius: 19px; background: linear-gradient(125deg, #303030, #101010 75%); color: #fff; transform: rotate(-6deg); box-shadow: 0 25px 38px #20202026, 0 3px 7px #0000001a; }
.hero-ai-passport::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, #ffffff08, transparent 55%); pointer-events: none; }
.hero-ai-passport-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 2px; }
.hero-ai-id { margin-left: 5px; font-size: 8px; color: #acacac; font-weight: 400; }
.hero-ai-passport-top > svg { width: 25px; height: 25px; fill: none; stroke: #8d8d8d; stroke-width: 1; }
.hero-ai-passport > p { margin: 12px 0 0; font-size: 23px; line-height: 1.3; letter-spacing: -.6px; font-weight: 500; }
.hero-ai-passport > p > span { color: #ccc; }
.hero-ai-number { position: absolute; bottom: 18px; left: 25px; right: 25px; display: flex; flex-direction: column; gap: 5px; }
.hero-ai-number > span:first-child { color: #8e8e8e; font-size: 6px; letter-spacing: 1.5px; }
.hero-ai-number > strong { font-size: 12px; letter-spacing: 1px; font-weight: 400; }
.hero-ai-signal { position: absolute; right: 0; bottom: 2px; display: flex; align-items: flex-end; gap: 3px; height: 15px; }
.hero-ai-signal i { display: block; width: 3px; height: 5px; background: #a1a1a1; border-radius: 1px; }
.hero-ai-signal i:nth-child(2) { height: 8px; }
.hero-ai-signal i:nth-child(3) { height: 11px; }
.hero-ai-signal i:nth-child(4) { height: 14px; }
.hero-ai-tool { position: absolute; display: flex; align-items: center; gap: 11px; padding: 18px 17px; border: 1px solid #e2e2e2; background: linear-gradient(135deg, #fff, #fcfcfc); border-radius: 16px; box-shadow: 0 12px 25px #26262608, 0 2px 4px #26262603; min-height: 80px; z-index: 3; }
.hero-ai-tool > div { display: flex; flex-direction: column; gap: 7px; }
.hero-ai-tool strong { font-size: 19px; line-height: 1; font-weight: 600; letter-spacing: -.5px; }
.hero-ai-tool > div > span { font-size: 8px; color: #929292; white-space: nowrap; }
.hero-ai-tool-icon { height: 35px; width: 35px; flex-shrink: 0; }
.hero-ai-gpt-icon { display: grid; place-items: center; background: #edf5f0; color: #287f5a; border: 1px solid #e2ece5; border-radius: 11px; }
.hero-ai-gpt-icon svg { height: 25px; width: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-ai-grok-icon { display: grid; place-items: center; border-radius: 11px; background: #1c1c1e; color: #fff; font-size: 24px; font-family: Arial, sans-serif; }
.hero-ai-tool-dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #a4a4a4; right: 11px; top: 11px; }
.hero-ai-gpt { width: 172px; left: 27px; top: 62px; transform: rotate(-8deg); }
.hero-ai-grok { width: 163px; left: 322px; top: 68px; transform: rotate(8deg); }
.hero-ai-claude { width: 174px; left: 315px; top: 347px; transform: rotate(5deg); }
.hero-ai-sms { position: absolute; z-index: 4; left: 39px; top: 349px; width: 232px; min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 11px 16px; border: 1px solid #e0e4e1; border-radius: 13px; background: #ffffffed; box-shadow: 0 9px 22px #33333308; transform: rotate(-5deg); }
.hero-ai-sms-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: #edf5ef; color: #4e8b65; }
.hero-ai-sms-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-ai-sms > div { display: flex; flex-direction: column; gap: 4px; }
.hero-ai-sms > div > span { color: #8a8a8a; font-size: 7px; }
.hero-ai-sms strong { font-size: 15px; color: #383838; letter-spacing: 3px; font-weight: 500; }
.hero-ai-sms-check { margin-left: auto; font-size: 12px; color: #64816b; }
.hero-ai-caption { position: absolute; top: 444px; left: 88px; display: flex; align-items: center; gap: 11px; color: #747474; font-size: 10px; white-space: nowrap; letter-spacing: .3px; }
.hero-ai-caption > span { width: 28px; height: 1px; background: #b7b7b7; }
.hero-ai-note { position: absolute; top: 466px; left: 127px; font-size: 8px; letter-spacing: .3px; color: #aaa; }
@keyframes hero-ai-flow { to { stroke-dashoffset: -90; } }
@media (max-width: 620px) { .hero-visual { width: 520px; height: 480px; transform: scale(.8); margin-left: calc(50% - 208px); margin-bottom: -92px; } }
@media (max-width: 420px) { .hero-visual { transform: scale(.66); margin-left: calc(50% - 171.6px); margin-bottom: -150px; } }
@media (max-width: 360px) { .hero-visual { transform: scale(.6); margin-left: calc(50% - 156px); margin-bottom: -178px; } }