/* jobofbrothers.com AI 검색 최적화 카테고리 (2026-10-16) */
.as{ background:#fff; color:#111; }
.as .inner{ width:min(92%, 1200px); margin:0 auto; }
.as-hero{ position:relative; padding:150px 0 90px; color:#fff; background:radial-gradient(60% 70% at 85% 0%, rgba(70,132,236,.38), transparent 60%), linear-gradient(135deg,#141A33 10%,#0A0D1C 50%,#07080F 90%); overflow:hidden }
.as-crumb{ font-size:13px; color:#8fa0bd; display:flex; gap:8px } .as-crumb a{ color:#8fa0bd } .as-crumb strong{ color:#fff; font-weight:600 }
.as-eyebrow{ display:inline-block; margin-top:26px; padding:6px 12px; border-radius:100px; background:rgba(70,132,236,.18); border:1px solid rgba(70,132,236,.45); color:#9cc0ff; font-size:13px; font-weight:600 }
.as-hero h1{ margin-top:18px; max-width:900px; font-size:50px; font-weight:800; line-height:1.22; letter-spacing:-.045em; word-break:keep-all }
.as-hero h1 em{ font-style:normal; color:#9cc0ff }
.as-lead{ margin-top:20px; max-width:780px; font-size:17px; line-height:1.75; color:#c9d2e3; word-break:keep-all }
.as-btns{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap }
.as-btns a{ display:inline-flex; align-items:center; height:52px; padding:0 26px; border-radius:4px; font-weight:700; font-size:15px }
.as-btns .pri{ background:#4684ec; color:#fff } .as-btns .line{ border:1px solid rgba(255,255,255,.3); color:#fff }
.as-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:56px }
.as-trio li{ padding:22px 24px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1) }
.as-trio b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:22px; color:#9cc0ff; letter-spacing:-.01em } .as-trio span{ display:block; margin-top:6px; font-size:14px; color:#aeb7c7; line-height:1.6 }
.as-sec{ padding:96px 0 } .as-sec.alt{ background:#f5f7fa } .as-sec.dark{ background:#0d1321; color:#fff }
.as-h{ max-width:760px } .as-h .en{ font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; letter-spacing:.14em; color:#4684ec } .as-sec.dark .as-h .en{ color:#9cc0ff }
.as-h h2{ margin-top:12px; font-size:36px; font-weight:800; line-height:1.25; letter-spacing:-.045em; word-break:keep-all } .as-h h2 em{ font-style:normal; color:#4684ec } .as-sec.dark .as-h h2 em{ color:#9cc0ff }
.as-h p{ margin-top:14px; font-size:16px; line-height:1.75; color:#4b5563; word-break:keep-all } .as-sec.dark .as-h p{ color:#aeb7c7 }
.as-grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px }
.as-card{ padding:28px 24px; border-radius:14px; background:#fff; border:1px solid #e3eaf6; box-shadow:0 10px 30px -18px rgba(26,51,115,.25) }
.as-sec.alt .as-card{ background:#fff } .as-sec:not(.alt) .as-card{ background:#f8fafc }
.as-card .no{ font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; color:#4684ec; letter-spacing:.1em }
.as-card h3{ margin-top:10px; font-size:19px; font-weight:800; letter-spacing:-.035em; line-height:1.35; word-break:keep-all } .as-card p{ margin-top:12px; font-size:14.5px; line-height:1.75; color:#4b5563; word-break:keep-all }
.as-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px }
.as-stats li{ padding:26px 24px; border-radius:14px; background:#0d1321; color:#fff }
.as-stats b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:44px; font-weight:700; letter-spacing:-.03em; line-height:1 } .as-stats b small{ font-size:22px; margin-left:2px }
.as-stats span{ display:block; margin-top:12px; font-size:14px; line-height:1.6; color:#c9d2e3; word-break:keep-all } .as-stats i{ display:block; margin-top:10px; font-style:normal; font-size:12px; color:#7f8ba3 }
.as-src{ margin-top:14px; font-size:12.5px; color:#6b7280; line-height:1.6 }
.as-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px }
.as-step .en{ font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:700; letter-spacing:.14em; color:#4684ec }
.as-step h3{ margin-top:10px; font-size:22px; font-weight:800; letter-spacing:-.04em } .as-step p{ margin-top:12px; font-size:15px; line-height:1.75; color:#4b5563; word-break:keep-all }
.as-table{ width:100%; margin-top:40px; border-collapse:separate; border-spacing:0; border:1px solid #e3eaf6; border-radius:14px; overflow:hidden; font-size:14.5px }
.as-table th, .as-table td{ padding:18px 20px; vertical-align:top; border-bottom:1px solid #e3eaf6; line-height:1.6; word-break:keep-all }
.as-table thead th{ background:#0d1321; color:#fff; font-family:'Space Grotesk','Pretendard',sans-serif; font-size:15px; text-align:left } .as-table thead th small{ display:block; font-family:'Pretendard',sans-serif; font-size:12px; color:#9cc0ff; margin-top:4px; font-weight:500 }
.as-table tbody th{ background:#f5f7fa; text-align:left; font-weight:700; width:16% } .as-table tr:last-child td, .as-table tr:last-child th{ border-bottom:0 }
.as-note{ margin-top:18px; padding:18px 22px; border-left:3px solid #4684ec; background:#f5f7fa; font-size:15px; line-height:1.7; color:#374151; word-break:keep-all }
.as-two{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px }
.as-panel{ padding:30px; border-radius:16px; border:1px solid #e3eaf6; background:#fff }
.as-panel.good{ border-color:#bcd3fb; background:#f3f7ff } .as-panel.bad{ background:#fafafa }
.as-panel h3{ font-size:20px; font-weight:800; letter-spacing:-.035em } .as-panel p{ margin-top:10px; font-size:15px; line-height:1.75; color:#4b5563; word-break:keep-all }
.as-list{ margin-top:16px; list-style:none; padding:0; display:grid; gap:10px }
.as-list li{ position:relative; padding-left:28px; font-size:15px; line-height:1.6; color:#222; word-break:keep-all }
.as-list li::before{ content:'✓'; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background:#4684ec; color:#fff; font-size:12px; display:inline-flex; align-items:center; justify-content:center }
.as-list.no li::before{ content:'–'; background:#9aa3b2 }
.as-sec.dark .as-panel{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1) } .as-sec.dark .as-panel h3{ color:#fff } .as-sec.dark .as-panel p, .as-sec.dark .as-list li{ color:#c9d2e3 }
.as-q{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px }
.as-q li{ padding:22px; border-radius:14px; background:#fff; border:1px solid #e3eaf6 } .as-q b{ display:block; font-size:16px; font-weight:800; letter-spacing:-.03em } .as-q span{ display:block; margin-top:6px; font-size:13px; color:#6b7280 } .as-q em{ display:block; margin-top:12px; padding:10px 12px; border-radius:8px; background:#f5f7fa; font-style:normal; font-size:13.5px; color:#111; line-height:1.5; word-break:keep-all }
.as-rules{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px }
.as-rules li{ padding:22px 24px; border-radius:14px; background:#0d1321; color:#fff } .as-rules h3{ font-size:17px; font-weight:800; letter-spacing:-.03em } .as-rules p{ margin-top:8px; font-size:14px; line-height:1.7; color:#c9d2e3; word-break:keep-all }
.as-ind{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px }
.as-ind a{ display:block; padding:24px; border-radius:14px; background:#fff; border:1px solid #e3eaf6; color:#111; transition:.25s } .as-ind a:hover{ border-color:#4684ec; transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(70,132,236,.4) }
.as-ind b{ display:block; font-size:18px; font-weight:800; letter-spacing:-.03em } .as-ind p{ margin-top:8px; font-size:14px; line-height:1.65; color:#4b5563; word-break:keep-all } .as-ind i{ display:block; margin-top:14px; font-style:normal; color:#4684ec; font-weight:700; font-size:14px }
.as-sub{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px }
.as-sub a{ display:block; padding:26px 24px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#fff; transition:.25s } .as-sub a:hover{ background:rgba(70,132,236,.16); border-color:rgba(70,132,236,.6) }
.as-sub .en{ font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; letter-spacing:.12em; color:#9cc0ff } .as-sub b{ display:block; margin-top:8px; font-size:19px; font-weight:800; letter-spacing:-.03em } .as-sub span{ display:block; margin-top:8px; font-size:13.5px; color:#aeb7c7; line-height:1.6 }
.as-sub li.on a{ border-color:#4684ec; background:rgba(70,132,236,.18) }
.as-faq{ margin-top:40px; max-width:860px }
.as-faq details{ border-top:1px solid #e3eaf6 } .as-faq details:last-child{ border-bottom:1px solid #e3eaf6 }
.as-faq summary{ display:flex; gap:14px; align-items:flex-start; padding:20px 0; cursor:pointer; font-size:17px; font-weight:700; letter-spacing:-.03em; list-style:none; word-break:keep-all } .as-faq summary::-webkit-details-marker{ display:none }
.as-faq summary span, .as-faq .a span{ flex:0 0 26px; height:26px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; background:#eaf1fe; color:#4684ec }
.as-faq .a{ display:flex; gap:14px; padding:0 0 22px } .as-faq .a span{ background:#111; color:#fff } .as-faq .a p{ font-size:15px; line-height:1.8; color:#374151; word-break:keep-all }
.as-cta{ padding:100px 0; text-align:center; color:#fff; background:linear-gradient(135deg,#141A33 10%,#0A0D1C 50%,#07080F 90%) }
.as-cta h2{ font-size:36px; font-weight:800; letter-spacing:-.045em; line-height:1.3; word-break:keep-all } .as-cta p{ margin-top:14px; color:#aeb7c7; font-size:16px } .as-cta .as-btns{ justify-content:center }
.as-check{ margin-top:40px; display:grid; gap:12px; max-width:860px }
.as-check label{ display:flex; gap:16px; align-items:flex-start; padding:18px 20px; border-radius:12px; border:1px solid #e3eaf6; background:#fff; cursor:pointer }
.as-check input{ width:22px; height:22px; margin-top:2px; accent-color:#4684ec; flex:0 0 22px } .as-check b{ display:block; font-size:16px; font-weight:700; letter-spacing:-.02em; word-break:keep-all } .as-check span{ display:block; margin-top:4px; font-size:13.5px; color:#6b7280; line-height:1.6; word-break:keep-all }
.as-score{ margin-top:22px; padding:22px 24px; border-radius:12px; background:#0d1321; color:#fff; font-size:16px; line-height:1.7 } .as-score b{ font-family:'Space Grotesk',sans-serif; font-size:28px; color:#9cc0ff; margin-right:6px }
@media (max-width:1100px){ .as-grid4, .as-q, .as-ind, .as-sub{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:768px){ .as-hero{ padding:110px 0 60px } .as-hero h1{ font-size:32px } .as-trio, .as-stats, .as-grid3, .as-grid4, .as-two, .as-rules, .as-q, .as-ind, .as-sub{ grid-template-columns:1fr } .as-h h2{ font-size:26px } .as-sec{ padding:64px 0 } .as-table{ display:block; overflow-x:auto } .as-cta h2{ font-size:26px } }

/* ===== v2 (2026-10-16 저녁): 히어로 시각물·타이포 강화 ===== */
.as-hero{ padding:140px 0 0 }
.as-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center }
.as-hero h1{ font-size:54px; line-height:1.18 }
.as-lead{ font-size:17.5px }
.as-btns a i{ font-style:normal; margin-left:8px; transition:transform .25s } .as-btns a:hover i{ transform:translateX(4px) }
.as-btns .pri{ background:linear-gradient(135deg,#4684ec,#6aa0ff); box-shadow:0 14px 34px -14px rgba(70,132,236,.9) }
.as-hero-note{ margin-top:16px; font-size:13px; color:#7f8ba3 }
.as-hero .as-trio{ margin-top:70px; padding-bottom:70px }
.as-hero-visual{ position:relative; min-height:420px }
.as-vis-search{ position:absolute; left:0; top:0; width:72%; padding:18px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(6px); transform:rotate(-2deg); animation:as-float 7s ease-in-out infinite }
.as-vis-search .bar{ display:flex; align-items:center; gap:10px; height:44px; padding:0 14px; border-radius:100px; background:#fff; color:#111; font-size:14px; font-weight:600 } .as-vis-search .bar i{ width:16px; height:16px; border-radius:50%; border:2px solid #4684ec; position:relative } .as-vis-search .bar i::after{ content:''; position:absolute; right:-6px; bottom:-5px; width:7px; height:2px; background:#4684ec; transform:rotate(45deg) }
.as-vis-search ul{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; opacity:.55 } .as-vis-search li b{ display:block; height:10px; width:62%; border-radius:4px; background:rgba(255,255,255,.35) } .as-vis-search li em{ display:block; height:8px; width:88%; margin-top:6px; border-radius:4px; background:rgba(255,255,255,.14) }
.as-vis-search .tag{ display:inline-block; margin-top:14px; padding:5px 10px; border-radius:100px; background:rgba(255,255,255,.08); font-size:12px; color:#9aa3b2 }
.as-vis-ai{ position:absolute; right:0; bottom:0; width:78%; padding:22px 24px; border-radius:18px; background:#fff; color:#111; box-shadow:0 30px 70px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(70,132,236,.25); animation:as-float 7s ease-in-out infinite reverse }
.as-vis-ai .head{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#4684ec; letter-spacing:.02em } .as-vis-ai .head .dot{ width:10px; height:10px; border-radius:50%; background:#4684ec; box-shadow:0 0 0 4px rgba(70,132,236,.2); animation:as-pulse 1.8s infinite } .as-vis-ai .head span{ margin-left:auto; font-size:11px; color:#9aa3b2; font-weight:500; border:1px solid #e3eaf6; padding:2px 8px; border-radius:100px }
.as-vis-ai p{ margin-top:12px; font-size:15px; line-height:1.75; color:#222; word-break:keep-all } .as-vis-ai mark{ background:linear-gradient(transparent 55%, rgba(70,132,236,.35) 55%); color:#0d1321; font-weight:800; padding:0 2px }
.as-vis-ai .cur{ display:inline-block; width:2px; height:1em; background:#4684ec; vertical-align:-2px; margin-left:2px; animation:as-blink 1s steps(2) infinite }
.as-vis-ai .src{ display:flex; gap:10px; align-items:center; margin-top:14px; padding-top:12px; border-top:1px dashed #e3eaf6; font-size:13px } .as-vis-ai .src span{ padding:3px 8px; border-radius:6px; background:#eaf1fe; color:#4684ec; font-weight:700 } .as-vis-ai .src b{ font-family:'Space Grotesk',sans-serif; color:#111 }
.as-vis-arrow{ position:absolute; left:4%; bottom:-34px; font-size:13px; color:#9cc0ff; font-weight:600 } .as-vis-arrow::before{ content:'↗ '; }
@keyframes as-float{ 0%,100%{ transform:translateY(0) rotate(-2deg) } 50%{ transform:translateY(-10px) rotate(-2deg) } }
@keyframes as-pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(70,132,236,.2) } 50%{ box-shadow:0 0 0 9px rgba(70,132,236,.08) } }
@keyframes as-blink{ to{ visibility:hidden } }
.as-hero.sub{ padding:150px 0 90px; min-height:0 } .as-hero.sub .inner{ position:relative; z-index:1 }
.as-hero-mark{ position:absolute; right:-2%; bottom:-6%; font-family:'Space Grotesk','Archivo',sans-serif; font-size:clamp(140px, 22vw, 320px); font-weight:700; letter-spacing:-.04em; line-height:.9; color:rgba(255,255,255,.045); pointer-events:none; user-select:none }
.as-h h2{ font-size:42px }
.as-stats b{ font-size:56px; background:linear-gradient(90deg,#fff,#9cc0ff); -webkit-background-clip:text; background-clip:text; color:transparent } .as-stats b small{ color:#9cc0ff; -webkit-text-fill-color:#9cc0ff }
.as-stats li{ background:linear-gradient(160deg,#141c30,#0d1321); border:1px solid rgba(255,255,255,.08) }
.as-card{ transition:transform .25s, box-shadow .25s, border-color .25s } .as-card:hover{ transform:translateY(-5px); border-color:#bcd3fb; box-shadow:0 22px 44px -20px rgba(70,132,236,.45) }
.as-card .no{ font-size:14px } .as-card h3{ font-size:20px }
.as-step{ padding:28px; border-radius:16px; background:#fff; border:1px solid #e3eaf6; position:relative; overflow:hidden } .as-step::before{ content:''; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient(90deg,#4684ec,#9cc0ff) }
.as-cta{ position:relative; overflow:hidden } .as-cta::before{ content:''; position:absolute; left:50%; top:-300px; width:900px; height:700px; margin-left:-450px; border-radius:50%; background:radial-gradient(circle, rgba(70,132,236,.35), transparent 60%); pointer-events:none } .as-cta .inner{ position:relative } .as-cta h2{ font-size:42px }
@media (max-width:1100px){ .as-hero-grid{ grid-template-columns:1fr } .as-hero-visual{ min-height:380px; max-width:620px } .as-hero h1{ font-size:42px } }
@media (max-width:768px){ .as-hero{ padding-top:100px } .as-hero h1{ font-size:32px } .as-hero-visual{ min-height:0; margin-top:10px } .as-vis-search{ position:relative; width:100%; transform:none; animation:none } .as-vis-ai{ position:relative; width:100%; margin-top:14px; animation:none } .as-vis-arrow{ display:none } .as-h h2{ font-size:28px } .as-stats b{ font-size:44px } .as-cta h2{ font-size:28px } .as-hero-mark{ font-size:120px; bottom:0 } .as-hero .as-trio{ margin-top:40px; padding-bottom:40px } }

.as-sub.three{ grid-template-columns:repeat(3,1fr) }
@media (max-width:1100px){ .as-sub.three{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:768px){ .as-sub.three{ grid-template-columns:1fr } }

.as-vis-ai .head .real{ margin-left:auto; font-size:11px; font-weight:600; color:#2f6bff; background:#eef3ff; border:1px solid #d6e2ff; border-radius:999px; padding:3px 9px; letter-spacing:0 }
.as-vis-ai .q{ font-size:13px; color:#6b7280; margin:0 0 8px; font-weight:600 }
.as-hero-copy .as-lead{ margin-bottom:0 }

/* ============================================================
   v5 — /ai-search/ 허브 리디자인 (2026-10-16). about 페이지의 디자인 언어(#06070C 다크 · Archivo/Space Grotesk 라벨 · 글자 채움 · 글래스 카드 · sticky 스토리)를 따른다.
   ============================================================ */
.asx{ --cb:#1B4DFF; --cb2:#5B9BFF; --ink:#0B0B0B; --dark:#06070C; --dark2:#0B0B0B; --pale:#F3F5F9; --line:#E5E5E5; background:#fff; color:var(--ink); }
.asx .inner{ width:min(92%, 1200px); margin:0 auto; }
.asx .en{ font-family:'Space Grotesk','Pretendard',sans-serif; letter-spacing:-.01em; }
.asx-label{ font-family:'Archivo','Space Grotesk',sans-serif; font-size:clamp(12px, .9vw, 15px); font-weight:600; letter-spacing:.12em; color:var(--cb2); }
.asx-h2{ margin-top:16px; font-size:clamp(30px, 3.6vw, 52px); font-weight:700; line-height:1.28; letter-spacing:-.05em; word-break:keep-all; }
.asx-h2.sm{ margin-top:120px; font-size:clamp(26px, 2.8vw, 40px); }
.asx-intro{ margin-top:20px; max-width:720px; font-size:clamp(15px, 1.15vw, 18px); line-height:1.8; letter-spacing:-.02em; color:#4B5563; word-break:keep-all; }
.asx section{ position:relative; }

/* ---------- 1. HERO ---------- */
.asx-hero{ position:relative; overflow:hidden; min-height:100vh; padding:0 0 110px; background:var(--dark); color:#fff; }
.asx-hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(55% 60% at 78% 18%, rgba(27,77,255,.28), transparent 60%), radial-gradient(40% 40% at 12% 92%, rgba(91,155,255,.12), transparent 60%); pointer-events:none; }
.asx-hero-in{ position:relative; width:min(92%, 1320px); margin:0 auto; padding-top:clamp(120px, 15vh, 170px); display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(32px, 4vw, 72px); align-items:center; }
.asx-title{ margin-top:14px; font-weight:700; letter-spacing:-.06em; }
.asx-title .l{ display:block; font-size:clamp(34px, 4.6vw, 76px); line-height:1.16; word-break:keep-all; }
.asx-title .l + .l{ margin-top:4px; }
.asx-title .ch{ transition:color .45s ease; color:rgba(255,255,255,.2); }
.asx-title .ch.is-on{ color:#fff; }
.asx-lead{ margin-top:28px; max-width:600px; font-size:clamp(15px, 1.15vw, 18px); line-height:1.85; letter-spacing:-.02em; color:rgba(255,255,255,.68); word-break:keep-all; }
.asx-trio{ display:flex; gap:10px; margin-top:34px; flex-wrap:wrap; }
.asx-trio li a{ display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 18px 0 16px; border:1px solid rgba(255,255,255,.22); border-radius:999px; color:#fff; transition:background .25s, border-color .25s, transform .25s; }
.asx-trio li a:hover{ background:rgba(27,77,255,.22); border-color:rgba(91,155,255,.7); transform:translateY(-2px); }
.asx-trio b{ font-size:15px; font-weight:700; color:var(--cb2); } .asx-trio span{ font-size:13.5px; color:rgba(255,255,255,.78); } .asx-trio i{ font-style:normal; color:rgba(255,255,255,.5); }

/* 데모 — 궤도선 + 검색창 + 답변 카드 */
.asx-demo{ position:relative; padding:28px 0 28px 18px; }
.asx-orbit{ position:absolute; left:50%; top:50%; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%) rotate(-8deg); border:1px solid rgba(91,155,255,.18); }
.asx-orbit.o1{ width:118%; height:118%; } .asx-orbit.o2{ width:140%; height:140%; border-color:rgba(91,155,255,.1); } .asx-orbit.o3{ width:164%; height:164%; border-color:rgba(91,155,255,.06); }
.asx-search{ position:relative; z-index:1; width:min(100%, 520px); padding:18px 18px 16px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.asx-search .bar{ display:flex; align-items:center; gap:10px; height:50px; padding:0 16px; border-radius:12px; background:#fff; color:#111; font-size:15px; font-weight:600; letter-spacing:-.02em; }
.asx-search .bar .ic{ width:16px; height:16px; border:2px solid #4B5563; border-radius:50%; position:relative; flex:0 0 auto; } .asx-search .bar .ic::after{ content:''; position:absolute; width:2px; height:7px; background:#4B5563; right:-4px; bottom:-5px; transform:rotate(-45deg); }
.asx-search .bar .q{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asx-search .bar .caret{ width:2px; height:20px; background:var(--cb); animation:asx-blink 1s steps(2) infinite; opacity:0; } .asx-demo.is-typing .caret{ opacity:1; }
.asx-search .list{ margin-top:12px; display:grid; gap:9px; opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; }
.asx-demo.is-list .list{ opacity:1; transform:none; }
.asx-search .list li{ display:flex; align-items:center; gap:10px; } .asx-search .list b{ width:34%; height:9px; border-radius:5px; background:rgba(255,255,255,.22); } .asx-search .list em{ flex:1; height:9px; border-radius:5px; background:rgba(255,255,255,.1); }
.asx-answer{ position:relative; z-index:2; width:min(100%, 560px); margin:-14px 0 0 auto; padding:22px 24px 20px; border-radius:20px; background:#fff; color:#111; box-shadow:0 30px 70px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06); transform:translateY(16px) scale(.98); opacity:0; transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
.asx-demo.is-answer .asx-answer{ opacity:1; transform:none; }
.asx-answer .head{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--cb); letter-spacing:.02em; }
.asx-answer .head .dot{ width:10px; height:10px; border-radius:50%; background:var(--cb); box-shadow:0 0 0 4px rgba(27,77,255,.18); animation:as-pulse 1.8s infinite; }
.asx-answer .head .real{ margin-left:auto; font-size:11px; font-weight:600; color:#2f6bff; background:#eef3ff; border:1px solid #d6e2ff; border-radius:999px; padding:3px 9px; letter-spacing:0; white-space:nowrap; }
.asx-answer .a{ margin-top:14px; min-height:5.4em; font-size:15.5px; line-height:1.8; letter-spacing:-.02em; color:#1f2937; word-break:keep-all; }
.asx-answer .a mark{ background:linear-gradient(transparent 55%, rgba(27,77,255,.22) 55%); color:#111; font-weight:700; }
.asx-answer .src{ display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:14px; border-top:1px dashed #e5e7eb; font-size:13px; opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; }
.asx-demo.is-src .asx-answer .src{ opacity:1; transform:none; }
.asx-answer .src span{ padding:3px 9px; border-radius:6px; background:#eef3ff; color:var(--cb); font-weight:700; } .asx-answer .src b{ font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.01em; }
.asx-demo-note{ position:relative; z-index:1; margin:22px 0 0 auto; width:min(100%, 560px); font-size:13px; line-height:1.7; color:rgba(255,255,255,.5); word-break:keep-all; }
.asx-scroll{ position:absolute; left:50%; bottom:34px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; color:rgba(255,255,255,.55); font-size:11px; letter-spacing:.16em; }
.asx-scroll .track{ width:1px; height:54px; background:rgba(255,255,255,.18); overflow:hidden; position:relative; } .asx-scroll .track i{ position:absolute; left:0; top:-50%; width:100%; height:50%; background:var(--cb2); animation:asx-drop 1.8s ease-in-out infinite; }
@keyframes asx-drop{ 0%{ top:-50% } 100%{ top:100% } } @keyframes asx-blink{ to{ opacity:0 } }

/* ---------- 2. THE SHIFT ---------- */
.asx-shift{ padding:130px 0 140px; background:var(--dark2); color:#fff; }
.asx-shift .asx-intro{ color:rgba(255,255,255,.62); }
.asx-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:64px; padding-top:48px; border-top:1px solid rgba(255,255,255,.12); }
.asx-stats li{ padding:0 8px; }
.asx-stats li + li{ border-left:1px solid rgba(255,255,255,.1); padding-left:32px; }
.asx-stats b{ display:block; font-family:'Archivo','Space Grotesk',sans-serif; font-size:clamp(56px, 7.4vw, 124px); font-weight:900; letter-spacing:-.04em; line-height:.95; color:#fff; }
.asx-stats b small{ font-size:.42em; color:var(--cb2); margin-left:4px; }
.asx-stats b span{ display:inline; font:inherit; letter-spacing:inherit; margin:0; }
.asx-stats li > span{ display:block; margin-top:18px; font-size:15.5px; font-weight:600; line-height:1.6; letter-spacing:-.02em; word-break:keep-all; }
.asx-stats i{ display:block; margin-top:10px; font-style:normal; font-size:12.5px; color:rgba(255,255,255,.42); }
.asx-src{ margin-top:30px; font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.5); word-break:keep-all; max-width:760px; }
.asx-cards4{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:72px; }
.asx-glass{ padding:30px 26px 32px; border-radius:22px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, background .35s; }
.asx-glass:hover{ transform:translateY(-6px); border-color:rgba(91,155,255,.6); background:rgba(27,77,255,.1); }
.asx-glass .no{ font-size:13px; font-weight:700; color:var(--cb2); letter-spacing:.1em; }
.asx-glass h3{ margin-top:14px; font-size:20px; font-weight:700; letter-spacing:-.04em; line-height:1.35; word-break:keep-all; }
.asx-glass p:last-child{ margin-top:14px; font-size:14.5px; line-height:1.8; color:rgba(255,255,255,.62); word-break:keep-all; }

/* ---------- 3. FLOORS (sticky) ---------- */
.asx-floors{ height:300vh; background:var(--pale); }
.asx-floors-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.asx-floors-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(32px, 5vw, 90px); align-items:center; }
.asx-floor-panels{ position:relative; margin-top:32px; min-height:280px; }
.asx-floor-panel{ position:absolute; inset:0; opacity:0; transform:translateY(18px); transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.asx-floor-panel.is-on{ opacity:1; transform:none; pointer-events:auto; }
.asx-floor-panel .fl{ font-size:14px; font-weight:600; color:#6B7280; } .asx-floor-panel .fl b{ margin:0 8px 0 6px; font-size:26px; color:var(--cb); font-weight:700; } .asx-floor-panel .fl span{ font-family:'Pretendard',sans-serif; font-weight:600; color:var(--ink); }
.asx-floor-panel dl{ margin-top:18px; display:grid; gap:10px; }
.asx-floor-panel dl > div{ display:grid; grid-template-columns:110px 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.asx-floor-panel dt{ font-size:13.5px; font-weight:700; color:#6B7280; } .asx-floor-panel dd{ font-size:16px; font-weight:600; letter-spacing:-.02em; color:var(--ink); word-break:keep-all; }
.asx-floor-dots{ display:flex; gap:8px; margin-top:28px; }
.asx-floor-dots li{ font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:700; letter-spacing:.06em; padding:7px 14px; border-radius:999px; border:1px solid var(--line); color:#9CA3AF; transition:all .3s; }
.asx-floor-dots li.is-done{ color:var(--ink); border-color:#cfd5de; } .asx-floor-dots li.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.asx-building{ position:relative; height:min(62vh, 560px); display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:10px; padding-bottom:24px; }
.asx-slab{ position:relative; width:min(100%, 470px); padding:26px 30px; border-radius:18px; background:#fff; border:1px solid var(--line); box-shadow:0 22px 50px -30px rgba(11,11,11,.35); display:flex; align-items:center; gap:14px; opacity:0; transform:translateY(60px) scale(.96); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), background .4s, color .4s, border-color .4s; }
.asx-slab.is-up{ opacity:1; transform:none; }
.asx-slab.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.asx-slab .fl{ font-size:12px; font-weight:700; letter-spacing:.1em; color:#9CA3AF; } .asx-slab.is-on .fl{ color:rgba(255,255,255,.5); }
.asx-slab b{ font-size:34px; font-weight:700; letter-spacing:-.02em; color:var(--cb); } .asx-slab.is-on b{ color:var(--cb2); }
.asx-slab .sub{ margin-left:auto; font-size:13.5px; font-weight:600; color:#6B7280; letter-spacing:-.02em; text-align:right; word-break:keep-all; } .asx-slab.is-on .sub{ color:rgba(255,255,255,.7); }
.asx-slab[data-slab="0"]{ width:min(100%, 520px); } .asx-slab[data-slab="2"]{ width:min(100%, 420px); }
.asx-ground{ width:min(100%, 560px); height:4px; border-radius:2px; background:var(--ink); margin-top:6px; }
.asx-floors-note{ margin-top:34px; font-size:14.5px; line-height:1.75; color:#4B5563; max-width:780px; word-break:keep-all; }
.asx-floors.is-static{ height:auto; } .asx-floors.is-static .asx-floors-sticky{ position:static; height:auto; padding:90px 0; }
.asx-floors.is-static .asx-floor-panels{ min-height:0; display:grid; gap:24px; } .asx-floors.is-static .asx-floor-panel{ position:static; opacity:1; transform:none; pointer-events:auto; }
.asx-floors.is-static .asx-floor-dots{ display:none; } .asx-floors.is-static .asx-building{ height:auto; margin-top:20px; }

/* ---------- 4. WHAT WE DO ---------- */
.asx-what{ padding:130px 0 140px; background:#fff; }
.asx-steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; margin-top:64px; border-top:1px solid var(--line); }
.asx-step{ padding:40px 32px 44px 0; border-bottom:1px solid var(--line); transition:background .3s; }
.asx-step + .asx-step{ padding-left:32px; border-left:1px solid var(--line); }
.asx-step .num{ font-family:'Archivo','Space Grotesk',sans-serif; font-size:clamp(44px, 4.6vw, 72px); font-weight:900; letter-spacing:-.04em; line-height:1; color:var(--cb); }
.asx-step .tag{ margin-top:26px; font-size:12px; font-weight:700; letter-spacing:.14em; color:#9CA3AF; }
.asx-step h3{ margin-top:10px; font-size:clamp(20px, 1.6vw, 26px); font-weight:700; letter-spacing:-.045em; word-break:keep-all; }
.asx-step p:last-child{ margin-top:14px; font-size:15px; line-height:1.8; color:#4B5563; word-break:keep-all; }

/* ---------- 5. SIGNALS ---------- */
.asx-signals{ padding:130px 0 140px; background:var(--dark); color:#fff; }
.asx-sig-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(32px, 5vw, 80px); align-items:center; }
.asx-sig-item{ margin-top:34px; } .asx-sig-item h3{ font-size:20px; font-weight:700; letter-spacing:-.04em; color:var(--cb2); } .asx-sig-item p{ margin-top:10px; font-size:15px; line-height:1.8; color:rgba(255,255,255,.66); word-break:keep-all; }
.asx-term{ border-radius:18px; background:#0F1218; border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 80px -40px rgba(0,0,0,.9); overflow:hidden; }
.asx-term .bar{ display:flex; align-items:center; gap:7px; height:40px; padding:0 16px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08); }
.asx-term .bar i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18); } .asx-term .bar i:first-child{ background:#ff5f57; } .asx-term .bar i:nth-child(2){ background:#febc2e; } .asx-term .bar i:nth-child(3){ background:#28c840; }
.asx-term .bar span{ margin-left:auto; font-size:11px; letter-spacing:.08em; color:rgba(255,255,255,.4); }
.asx-term .code{ margin:0; padding:22px 24px; min-height:300px; font-family:'SF Mono','Menlo','Consolas',monospace; font-size:13px; line-height:1.75; color:#9CC0FF; white-space:pre-wrap; word-break:break-all; }
.asx-term .checks{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 20px 20px; }
.asx-term .checks li{ display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.4); transition:color .4s; }
.asx-term .checks li::before{ content:'✓'; width:18px; height:18px; border-radius:50%; border:1px solid rgba(255,255,255,.2); font-size:11px; display:inline-flex; align-items:center; justify-content:center; color:transparent; transition:all .4s; }
.asx-term .checks li.is-on{ color:#fff; } .asx-term .checks li.is-on::before{ background:var(--cb); border-color:var(--cb); color:#fff; }
.asx-goodbad{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:80px; }
.asx-gb{ padding:34px 34px 36px; border-radius:22px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); }
.asx-gb.good{ border-color:rgba(91,155,255,.5); background:rgba(27,77,255,.12); }
.asx-gb .tag{ font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--cb2); } .asx-gb.bad .tag{ color:rgba(255,255,255,.4); }
.asx-gb h3{ margin-top:10px; font-size:22px; font-weight:700; letter-spacing:-.04em; }
.asx-gb ul{ margin-top:20px; display:grid; gap:11px; } .asx-gb li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.6; color:rgba(255,255,255,.82); word-break:keep-all; }
.asx-gb li::before{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-top:1px; }
.asx-gb.good li::before{ content:'✓'; background:var(--cb); color:#fff; } .asx-gb.bad li::before{ content:'✕'; background:rgba(255,255,255,.1); color:rgba(255,255,255,.6); }

/* ---------- 6. PROMISE ---------- */
.asx-promise{ padding:130px 0 140px; background:#fff; }
.asx-pm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:60px; }
.asx-pm{ padding:36px 36px 40px; border-radius:22px; border:1px solid var(--line); background:var(--pale); }
.asx-pm.yes{ background:var(--ink); color:#fff; border-color:var(--ink); }
.asx-pm h3{ font-size:20px; font-weight:700; letter-spacing:-.04em; word-break:keep-all; } .asx-pm.yes h3{ color:var(--cb2); }
.asx-pm ul{ margin-top:22px; display:grid; gap:12px; } .asx-pm li{ position:relative; padding-left:26px; font-size:15.5px; line-height:1.6; word-break:keep-all; }
.asx-pm li::before{ content:''; position:absolute; left:0; top:9px; width:14px; height:2px; background:var(--cb); } .asx-pm.no li::before{ background:#9CA3AF; }
.asx-pm.no li{ color:#374151; }
.asx-why{ margin-top:24px; padding:30px 36px; border-left:4px solid var(--cb); background:var(--pale); border-radius:0 18px 18px 0; }
.asx-why h3{ font-size:17px; font-weight:700; letter-spacing:-.03em; } .asx-why p{ margin-top:10px; font-size:15px; line-height:1.8; color:#374151; word-break:keep-all; }

/* ---------- 7. QUESTION MAP ---------- */
.asx-questions{ padding:130px 0 140px; background:var(--pale); overflow:hidden; }
.asx-marquee{ margin:56px 0 64px; display:grid; gap:14px; }
.asx-mq-row{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.asx-mq-track{ display:flex; gap:14px; width:max-content; animation:asx-mq 46s linear infinite; }
.asx-mq-row.rev .asx-mq-track{ animation-direction:reverse; animation-duration:54s; }
.asx-mq-row:hover .asx-mq-track{ animation-play-state:paused; }
@keyframes asx-mq{ to{ transform:translateX(-50%) } }
.asx-mq-track .chip{ display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 22px 0 8px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:15px; font-weight:600; letter-spacing:-.02em; white-space:nowrap; color:var(--ink); }
.asx-mq-track .chip b{ height:38px; padding:0 14px; border-radius:999px; display:inline-flex; align-items:center; background:var(--ink); color:#fff; font-size:12.5px; font-weight:700; }
.asx-rules{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.asx-rule{ padding:32px 30px 34px; border-radius:22px; background:#fff; border:1px solid var(--line); }
.asx-rule .num{ font-family:'Archivo','Space Grotesk',sans-serif; font-size:40px; font-weight:900; color:var(--cb); letter-spacing:-.04em; line-height:1; }
.asx-rule h3{ margin-top:20px; font-size:20px; font-weight:700; letter-spacing:-.04em; word-break:keep-all; } .asx-rule p:last-child{ margin-top:12px; font-size:15px; line-height:1.8; color:#4B5563; word-break:keep-all; }

/* ---------- 8. SCOPE + OURS ---------- */
.asx-scope{ padding:130px 0 140px; background:#fff; }
.asx-scope-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:60px; }
.asx-sc{ padding:36px; border-radius:22px; border:1px solid var(--line); background:#fff; }
.asx-sc.inc{ background:var(--pale); }
.asx-sc .tag{ font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--cb); } .asx-sc h3{ margin-top:10px; font-size:20px; font-weight:700; letter-spacing:-.04em; }
.asx-sc ul{ margin-top:20px; display:grid; gap:11px; } .asx-sc li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.6; word-break:keep-all; color:#1F2937; }
.asx-sc li::before{ content:''; flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--cb); margin-top:9px; } .asx-sc.sep li::before{ background:#9CA3AF; }
.asx-ours{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:44px; }
.asx-our{ position:relative; padding:34px 30px 36px; border-radius:22px; background:var(--ink); color:#fff; overflow:hidden; }
.asx-our .bar{ position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient(90deg, var(--cb), var(--cb2)); }
.asx-our h3{ font-size:20px; font-weight:700; letter-spacing:-.04em; word-break:keep-all; } .asx-our p{ margin-top:14px; font-size:15px; line-height:1.8; color:rgba(255,255,255,.66); word-break:keep-all; }

/* ---------- 9. DEEPER ---------- */
.asx-deeper{ padding:130px 0 140px; background:var(--dark2); color:#fff; }
.asx-deep{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:60px; }
.asx-deep a{ display:flex; flex-direction:column; min-height:320px; padding:34px 32px 30px; border-radius:24px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:#fff; transition:transform .4s cubic-bezier(.16,1,.3,1), background .4s, border-color .4s; }
.asx-deep a:hover{ transform:translateY(-8px); background:var(--cb); border-color:var(--cb); }
.asx-deep .big{ font-size:clamp(56px, 6vw, 96px); font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--cb2); } .asx-deep a:hover .big{ color:#fff; }
.asx-deep b{ margin-top:auto; padding-top:40px; font-size:20px; font-weight:700; letter-spacing:-.04em; } .asx-deep a > span:not(.big){ margin-top:8px; font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.62); word-break:keep-all; } .asx-deep a:hover > span{ color:rgba(255,255,255,.85); }
.asx-deep i{ margin-top:22px; font-style:normal; font-size:12px; font-weight:700; letter-spacing:.14em; color:rgba(255,255,255,.5); } .asx-deep a:hover i{ color:#fff; }

/* ---------- 10. FAQ ---------- */
.asx-faq{ padding:130px 0 140px; background:#fff; }
.asx .as-faq{ margin-top:50px; border-top:1px solid var(--ink); }
.asx .as-faq-item{ border-bottom:1px solid var(--line); }
.asx .as-faq-q{ width:100%; display:flex; align-items:center; gap:18px; padding:26px 0; background:none; border:0; text-align:left; font-size:clamp(16px, 1.3vw, 20px); font-weight:700; letter-spacing:-.03em; color:var(--ink); cursor:pointer; word-break:keep-all; }
.asx .as-faq-q .en{ flex:0 0 auto; font-size:18px; color:var(--cb); }
.asx .as-faq-q i{ margin-left:auto; flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); position:relative; transition:transform .3s, background .3s; }
.asx .as-faq-q i::before, .asx .as-faq-q i::after{ content:''; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background:var(--ink); transform:translate(-50%,-50%); } .asx .as-faq-q i::after{ transform:translate(-50%,-50%) rotate(90deg); }
.asx .as-faq-item.open .as-faq-q i{ transform:rotate(45deg); background:var(--ink); border-color:var(--ink); } .asx .as-faq-item.open .as-faq-q i::before, .asx .as-faq-item.open .as-faq-q i::after{ background:#fff; }
.asx .as-faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1); } .asx .as-faq-a > div{ overflow:hidden; font-size:15.5px; line-height:1.85; color:#4B5563; word-break:keep-all; padding-left:36px; }
.asx .as-faq-item.open .as-faq-a{ grid-template-rows:1fr; } .asx .as-faq-item.open .as-faq-a > div{ padding-bottom:28px; }

/* ---------- 11. CTA ---------- */
.asx-cta{ padding:150px 0 160px; background:var(--dark); color:#fff; text-align:center; overflow:hidden; }
.asx-cta::before{ content:''; position:absolute; left:50%; top:50%; width:1100px; height:1100px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(27,77,255,.28), transparent 60%); pointer-events:none; }
.asx-cta h2{ position:relative; font-size:clamp(28px, 3.8vw, 56px); font-weight:700; letter-spacing:-.05em; line-height:1.25; word-break:keep-all; }
.asx-cta p{ position:relative; margin:22px auto 0; max-width:620px; font-size:16px; line-height:1.8; color:rgba(255,255,255,.66); word-break:keep-all; }
.asx-btns{ position:relative; display:flex; gap:12px; justify-content:center; margin-top:40px; flex-wrap:wrap; }
.asx-btns a{ display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 30px; border-radius:999px; font-weight:700; font-size:15px; transition:transform .25s, background .25s; }
.asx-btns .pri{ background:var(--cb); color:#fff; } .asx-btns .pri:hover{ transform:translateY(-2px); background:#2f5dff; } .asx-btns .line{ border:1px solid rgba(255,255,255,.3); color:#fff; } .asx-btns .line:hover{ background:rgba(255,255,255,.08); }
.asx-btns i{ font-style:normal; }

/* ---------- 반응형 ---------- */
@media (max-width:1100px){
    .asx-hero-in{ grid-template-columns:1fr; padding-top:130px; }
    .asx-demo{ padding-left:0; max-width:620px; }
    .asx-cards4{ grid-template-columns:1fr 1fr; }
    .asx-steps{ grid-template-columns:1fr; } .asx-step + .asx-step{ padding-left:0; border-left:0; }
    .asx-rules, .asx-ours, .asx-deep{ grid-template-columns:1fr; }
    .asx-sig-grid{ grid-template-columns:1fr; }
}
@media (max-width:950px){
    .asx-floors{ height:auto; } .asx-floors-sticky{ position:static; height:auto; padding:90px 0; }
    .asx-floors-grid{ grid-template-columns:1fr; }
    .asx-floor-panels{ min-height:0; display:grid; gap:24px; } .asx-floor-panel{ position:static; opacity:1; transform:none; pointer-events:auto; }
    .asx-floor-dots{ display:none; } .asx-building{ height:auto; margin-top:20px; } .asx-slab{ opacity:1; transform:none; }
}
@media (max-width:768px){
    .asx-hero{ min-height:0; padding-bottom:80px; } .asx-scroll{ display:none; }
    .asx-stats{ grid-template-columns:1fr; gap:34px; } .asx-stats li + li{ border-left:0; padding-left:8px; border-top:1px solid rgba(255,255,255,.1); padding-top:30px; }
    .asx-cards4, .asx-goodbad, .asx-pm-grid, .asx-scope-grid{ grid-template-columns:1fr; }
    .asx-shift, .asx-what, .asx-signals, .asx-promise, .asx-questions, .asx-scope, .asx-deeper, .asx-faq{ padding:90px 0 100px; }
    .asx-answer{ margin-top:12px; padding:18px; } .asx-answer .head .real{ font-size:10px; }
    .asx-term .code{ min-height:240px; font-size:12px; }
    .asx-floor-panel dl > div{ grid-template-columns:86px 1fr; }
    .asx-cta{ padding:100px 0 110px; }
}