/* KhảoSát.ResearchSTAT - page components: font, brand, dropdown, page heroes, legal layout, animated mockups. */
:root { --font: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
body { font-family: var(--font); font-weight: 400; letter-spacing: -.003em; }
h1, h2, h3, h4, .wordmark, .btn { font-family: var(--font); }
h1, h2 { letter-spacing: -.025em; font-weight: 700; }
b, strong { font-weight: 600; }

/* brand: Khảo Sát . Research STAT (STAT orange everywhere) */
.wordmark span { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--navy); font-weight: 700; }
.wordmark u, .stat { text-decoration: none; color: var(--orange); -webkit-text-fill-color: var(--orange); font-weight: 800; }
.brand-light .wordmark span { background: none; color: #C7D2FE; -webkit-text-fill-color: #C7D2FE; }
.brand-light .wordmark u { color: #FB923C; -webkit-text-fill-color: #FB923C; }
.ksname { font-weight: 600; white-space: nowrap; }
.ksname em { font-style: normal; color: var(--navy); }
.rsname { font-weight: 600; white-space: nowrap; }
.foot .rsname, .foot .ksname, .foot .ksname em { color: inherit; }

/* dropdown "Cộng đồng" */
.dd { position: relative; }
.dd-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 0; border-radius: 10px; background: none; font: 500 .94rem var(--font); color: var(--text); cursor: pointer; white-space: nowrap; }
.dd-btn .ic { color: #7C83A6; }
.dd-btn .chev { transition: transform .2s; color: #94A3B8; }
.dd:hover .dd-btn, .dd.open .dd-btn, .dd.on .dd-btn { background: var(--tint); color: var(--navy); }
.dd:hover .dd-btn .ic, .dd.open .dd-btn .ic, .dd.on .dd-btn .ic { color: var(--navy); }
.dd.open .chev, .dd:hover .chev { transform: rotate(180deg); }
.dd-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 6px); min-width: 300px; padding: 8px; background: #fff; border: 1px solid #E4E2FB; border-radius: 16px; box-shadow: 0 20px 50px rgba(26,0,170,.16); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; z-index: 40; }
.dd-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.dd:hover .dd-menu, .dd.open .dd-menu, .dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dd-menu a { display: grid !important; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px !important; border-radius: 12px; }
.dd-menu a:hover, .dd-menu a.on { background: var(--tint); }
.dd-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tint); color: var(--navy); }
.dd-menu a:hover .dd-ic { background: var(--navy); color: #fff; }
.dd-menu b { display: block; color: var(--ink); font-size: .93rem; }
.dd-menu small { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; }
@media (max-width: 1380px) and (min-width: 1181px) { .dd-btn { padding: 8px 7px; font-size: .88rem; gap: 5px; } .dd-btn .ic { width: 16px; height: 16px; } }
@media (max-width: 1180px) {
  .dd-btn { width: 100%; padding: 12px; justify-content: flex-start; }
  .dd-btn .chev { margin-left: auto; }
  .dd-menu { position: static; transform: none; min-width: 0; box-shadow: none; border: 0; padding: 0 0 0 12px; display: none; opacity: 1; visibility: visible; }
  .dd.open .dd-menu { display: block; transform: none; }
  .dd:hover .dd-menu { transform: none; }
}

/* page hero used by inner pages */
.phero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 72px) 0 clamp(30px, 5vw, 56px); background: radial-gradient(900px 380px at 88% -20%, #E4DEFF 0%, transparent 60%), radial-gradient(700px 300px at -10% 120%, #FFEAD5 0%, transparent 55%), linear-gradient(180deg, #F7F6FF, #fff); border-bottom: 1px solid #EEECFB; }
.phero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .phero-grid { grid-template-columns: 1fr; } }
.phero h1 { margin: 8px 0 14px; }
.phero p.lead { margin: 0 0 18px; }
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crumbs .ic { color: #94A3B8; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: #fff; border: 1px solid #E4E2FB; font-size: .85rem; color: #334155; }
.pill .ic { color: var(--navy); }

/* section titles */
.kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--orange); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.sec-title { margin: 6px 0 10px; }
.sec-sub { color: var(--muted); max-width: 720px; }

/* feature cards with icon badge */
.fcard { position: relative; background: #fff; border: 1px solid #E8E6F8; border-radius: 18px; padding: 22px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
.fcard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(26,0,170,.12); border-color: #D4CFFA; }
.fcard .badge-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #EEF0FF, #E0DBFF); color: var(--navy); margin-bottom: 14px; }
.fcard.orange .badge-ic { background: linear-gradient(135deg, #FFF1E6, #FFE0C7); color: #C2410C; }
.fcard.green .badge-ic { background: linear-gradient(135deg, #E9FBF3, #CFF5E2); color: #047857; }
.fcard h3 { font-size: 1.05rem; margin-bottom: 6px; }
.fcard p { color: #475569; margin: 0; font-size: .95rem; }
.fcard .num { position: absolute; top: 18px; right: 20px; font-size: 2rem; font-weight: 800; color: #EEF0FF; line-height: 1; }

/* timeline steps */
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 23px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--navy), #C4B5FD); opacity: .35; }
.tl li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 12px 0; }
.tl .dot { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; border: 2px solid #DDD6FE; color: var(--navy); font-weight: 800; }
.tl li:hover .dot { background: var(--navy); color: #fff; border-color: var(--navy); }
.tl li > div > b { display: block; color: var(--ink); font-size: 1.02rem; margin-top: 3px; }
.tl p b { color: var(--ink); }
.tl p { margin: 4px 0 0; color: #475569; font-size: .95rem; }

/* legal / long documents: sticky table of contents + numbered sections */
.doc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; padding: 40px 0 70px; }
@media (max-width: 960px) { .doc { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.toc { position: sticky; top: 90px; background: #fff; border: 1px solid #E8E6F8; border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
@media (max-width: 960px) { .toc { position: static; } }
.toc h4 { display: flex; align-items: center; gap: 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 10px; }
.toc ol { list-style: none; counter-reset: t; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc li { counter-increment: t; }
.toc a { display: grid; grid-template-columns: 24px 1fr; gap: 6px; padding: 7px 8px; border-radius: 10px; font-size: .9rem; color: #334155; text-decoration: none; }
.toc a::before { content: counter(t, decimal-leading-zero); color: #A5B4FC; font-weight: 700; font-size: .78rem; padding-top: 2px; }
.toc a:hover, .toc a.is-active { background: var(--tint); color: var(--navy); }
.toc a.is-active::before { color: var(--orange); }
.doc-body { display: grid; gap: 18px; min-width: 0; }
.doc-body > * { min-width: 0; }
.dsec { background: #fff; border: 1px solid #E8E6F8; border-radius: 18px; padding: clamp(20px, 3vw, 28px); scroll-margin-top: 90px; }
.dsec > h2 { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; margin: 0 0 14px; }
.dsec > h2 .badge-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tint); color: var(--navy); flex-shrink: 0; }
.dsec p, .dsec li { color: #334155; }
.dsec ul { padding-left: 0; list-style: none; display: grid; gap: 8px; margin: 0; }
.dsec ul li { position: relative; padding-left: 28px; }
.dsec ul li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, var(--navy), #7C3AED); }
.dsec ul.no li::before { background: linear-gradient(135deg, #EF4444, #F97316); }
.dsec ul.ok li::before { background: linear-gradient(135deg, #059669, #34D399); }
.doc-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .85rem; }
.callout { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; background: linear-gradient(180deg, #FFF7ED, #FFFBF5); border: 1px solid #FED7AA; color: #7C2D12; }
.callout .ic { color: #EA580C; }
.callout.info { background: linear-gradient(180deg, #EEF0FF, #F7F7FF); border-color: #C7D2FE; color: #1E1B4B; }
.callout.info .ic { color: var(--navy); }
.data-table th { background: #F5F3FF; color: #3730A3; }
.data-table td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }

/* contact cards */
.ccard { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 18px; background: #fff; border: 1px solid #E8E6F8; border-radius: 16px; text-decoration: none; color: var(--text); box-shadow: var(--shadow); transition: transform .2s, border-color .2s; }
.ccard:hover { transform: translateY(-2px); border-color: #C7D2FE; }
.ccard .badge-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--tint); color: var(--navy); }
.ccard b { display: block; color: var(--ink); }
.ccard span { color: var(--muted); font-size: .88rem; }

/* ===================== animated mockups ===================== */
@media (prefers-reduced-motion: reduce) { .anim *, .anim { animation: none !important; transition: none !important; } }
.mock { position: relative; background: #fff; border: 1px solid #E4E2FB; border-radius: 18px; box-shadow: 0 26px 60px rgba(26,0,170,.14); overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F6F5FD; border-bottom: 1px solid #ECEAFB; }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #FCA5A5; }
.mock-bar i:nth-child(2) { background: #FCD34D; } .mock-bar i:nth-child(3) { background: #86EFAC; }
.mock-bar span { margin-left: 10px; flex: 1; padding: 4px 10px; border-radius: 8px; background: #fff; color: #94A3B8; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-body { padding: 18px; }

/* typing caret */
@keyframes caret { 50% { opacity: 0; } }
@keyframes type { from { width: 0; } }
.typed { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; border-right: 2px solid var(--navy); animation: type 1.6s steps(var(--n, 10)) infinite alternate, caret .7s step-end infinite; }

/* dashboard mock: progress fills, rows arrive */
@keyframes fill { 0% { width: 6%; } 70%, 100% { width: var(--to, 78%); } }
@keyframes rowin { 0%, 70%, 100% { background: #fff; border-color: #ECEAFB; } 10%, 30% { background: #F5F3FF; border-color: #C4B5FD; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(26,0,170,.35); } 50% { box-shadow: 0 0 0 10px rgba(26,0,170,0); } }
.dash .kp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.dash .kp div { background: #F8F7FF; border: 1px solid #ECEAFB; border-radius: 12px; padding: 10px; }
.dash .kp b { display: block; font-size: 1.2rem; color: var(--navy); }
.dash .kp span { font-size: .72rem; color: var(--muted); }
.dash .pbar { height: 12px; border-radius: 99px; background: #EEF0FF; overflow: hidden; margin: 4px 0 14px; }
.dash .pbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--navy), #7C3AED, var(--orange)); animation: fill 6s ease-in-out infinite; }
.dash .rows { display: grid; gap: 8px; }
.dash .r { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid #ECEAFB; border-radius: 10px; font-size: .78rem; animation: rowin 6s ease-in-out infinite; }
.dash .r:nth-child(2) { animation-delay: 1.5s; } .dash .r:nth-child(3) { animation-delay: 3s; } .dash .r:nth-child(4) { animation-delay: 4.5s; }
.dash .r code { font-family: ui-monospace, Consolas, monospace; color: var(--navy); font-weight: 700; }
.dash .r .t { color: var(--muted); }

/* step pipeline with a travelling dot */
@keyframes travel { 0% { left: 0; } 100% { left: calc(100% - 14px); } }
.pipe { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding-top: 30px; }
.pipe::before { content: ""; position: absolute; top: 37px; left: 7%; right: 7%; height: 3px; background: repeating-linear-gradient(90deg, #C7D2FE 0 10px, transparent 10px 18px); }
.pipe .runner { position: absolute; top: 31px; left: 7%; right: 7%; height: 14px; }
.pipe .runner i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgba(249,115,22,.18); animation: travel 7s linear infinite; }
.pipe .st { position: relative; text-align: center; }
.pipe .st .o { display: grid; place-items: center; width: 54px; height: 54px; margin: -24px auto 10px; border-radius: 16px; background: #fff; border: 2px solid #DDD6FE; color: var(--navy); box-shadow: var(--shadow); }
.pipe .st b { display: block; font-size: .9rem; color: var(--ink); }
.pipe .st span { display: block; font-size: .78rem; color: var(--muted); }
@media (max-width: 860px) { .pipe { grid-template-columns: repeat(2, 1fr); row-gap: 34px; } .pipe::before, .pipe .runner { display: none; } }

/* google-forms-like editor mock (generic, no logos) */
@keyframes hl { 0%, 30% { background: transparent; } 40%, 70% { background: #EDE9FE; } 80%, 100% { background: transparent; } }
@keyframes showlink { 0%, 55% { opacity: 0; transform: translateY(6px); } 65%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.gform { background: #F3EEFB; }
.gform .head { height: 8px; background: #7248B9; border-radius: 10px 10px 0 0; }
.gform .card { border-radius: 0 0 12px 12px; padding: 14px; box-shadow: none; border-color: #E2D9F3; }
.gform .q { margin-top: 10px; border-radius: 12px; padding: 12px 14px; border: 1px solid #E2D9F3; background: #fff; }
.gform .q label { font-size: .82rem; margin-bottom: 6px; }
.gform .ans { border-bottom: 2px solid #7248B9; padding: 4px 0; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; color: #4C1D95; min-height: 26px; }
.gform .menu { position: absolute; right: 16px; top: 52px; background: #fff; border: 1px solid #E2D9F3; border-radius: 10px; box-shadow: 0 10px 24px rgba(76,29,149,.15); padding: 6px; font-size: .78rem; width: 210px; }
.gform .menu div { padding: 6px 8px; border-radius: 6px; color: #334155; }
.gform .menu .pick { animation: hl 5s ease-in-out infinite; font-weight: 600; color: #4C1D95; }
.gform .link { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #0F172A; color: #E2E8F0; font: .74rem/1.4 ui-monospace, Consolas, monospace; word-break: break-all; animation: showlink 5s ease-in-out infinite; }
.gform .link mark { background: #F97316; color: #fff; border-radius: 4px; padding: 0 3px; }

/* survey-flow mock (Qualtrics-like, generic) */
@keyframes flowdash { to { stroke-dashoffset: -24; } }
@keyframes glow { 0%, 100% { border-color: #BFDBFE; } 50% { border-color: #1F6FEB; box-shadow: 0 0 0 4px rgba(31,111,235,.12); } }
.qflow { display: grid; gap: 12px; position: relative; }
.qflow .blk { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid #BFDBFE; border-radius: 12px; background: #fff; font-size: .82rem; }
.qflow .blk b { color: #1E3A8A; }
.qflow .blk .tag { margin-left: auto; font: 600 .7rem ui-monospace, Consolas, monospace; padding: 2px 8px; border-radius: 6px; background: #EFF6FF; color: #1D4ED8; }
.qflow .blk.hot { animation: glow 2.4s ease-in-out infinite; }
.qflow .blk.hot.b2 { animation-delay: .8s; } .qflow .blk.hot.b3 { animation-delay: 1.6s; }
.qflow svg.wire { position: absolute; left: 22px; top: 0; height: 100%; width: 10px; z-index: 0; }
.qflow svg.wire line { stroke: #93C5FD; stroke-width: 2; stroke-dasharray: 6 6; animation: flowdash 1s linear infinite; }
.qflow .redirect { font: .72rem/1.45 ui-monospace, Consolas, monospace; background: #0F172A; color: #CBD5E1; padding: 10px 12px; border-radius: 10px; word-break: break-all; }
.qflow .redirect em { font-style: normal; color: #FDBA74; }

/* phone mock (Microsoft Forms-like, generic): screens slide */
@keyframes phone3 { 0%, 28% { transform: translateX(0); } 34%, 62% { transform: translateX(-100%); } 68%, 96% { transform: translateX(-200%); } 100% { transform: translateX(0); } }
.phone { width: 230px; margin: 0 auto; border-radius: 34px; padding: 10px; background: #0F172A; box-shadow: 0 30px 60px rgba(15,23,42,.35); }
.phone .scr { position: relative; height: 380px; border-radius: 26px; background: #fff; overflow: hidden; }
.phone .notch { position: absolute; top: 8px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 10px; background: #0F172A; z-index: 3; }
.phone .track { display: flex; height: 100%; animation: phone3 9s ease-in-out infinite; }
.phone .pg { flex: 0 0 100%; padding: 40px 16px 16px; font-size: .78rem; }
.phone .pg .top { height: 46px; margin: -40px -16px 12px; background: linear-gradient(135deg, #0F7B6C, #14B8A6); }
.phone .pg h5 { margin: 0 0 8px; font-size: .9rem; color: var(--ink); }
.phone .inp { border: 1.5px solid #99F6E4; border-radius: 8px; padding: 7px 9px; font: 700 .82rem ui-monospace, Consolas, monospace; color: #0F766E; }
.phone .opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid #E2E8F0; border-radius: 8px; margin-top: 6px; }
.phone .opt i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #94A3B8; }
.phone .opt.on i { border-color: #0F7B6C; background: radial-gradient(#0F7B6C 45%, #fff 50%); }
.phone .btnx { margin-top: 12px; text-align: center; padding: 8px; border-radius: 8px; background: #0F7B6C; color: #fff; font-weight: 600; }
.phone .done { text-align: center; padding-top: 30px; }
.phone .done .ok { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; background: #CCFBF1; color: #0F766E; animation: pulse 1.8s infinite; }
.phone .done code { display: inline-block; margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: #0F172A; color: #FDBA74; font-weight: 700; letter-spacing: .06em; }

/* pricing bars */
@keyframes grow { from { transform: scaleY(.05); } }
.bars { display: flex; align-items: flex-end; gap: 14px; height: 210px; padding: 10px 6px 0; border-bottom: 2px solid #E2E8F0; }
.bars .bar-c { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bars .col { width: 100%; max-width: 64px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #7C3AED, var(--navy)); transform-origin: bottom; animation: grow 1.4s cubic-bezier(.2,.8,.2,1) both; position: relative; }
.bars .bar-c:nth-child(2) .col { animation-delay: .1s; } .bars .bar-c:nth-child(3) .col { animation-delay: .2s; } .bars .bar-c:nth-child(4) .col { animation-delay: .3s; } .bars .bar-c:nth-child(5) .col { animation-delay: .4s; }
.bars .val { font-size: .78rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; white-space: nowrap; }
.bars .lab { margin-top: 8px; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.bars-wrap { padding-bottom: 28px; }
.mult { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.mult div { padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #E8E6F8; }
.mult b { display: block; font-size: 1.5rem; color: var(--navy); }
.mult span { display: block; font-weight: 600; color: var(--ink); font-size: .92rem; margin-top: 2px; }
.mult small { color: var(--muted); font-size: .8rem; }

/* referral flow (collaborators) */
@keyframes coin { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes dashmove { to { stroke-dashoffset: -40; } }
.refflow svg { width: 100%; height: auto; display: block; }
.refflow .lnk { fill: none; stroke: #A5B4FC; stroke-width: 3; stroke-dasharray: 8 8; animation: dashmove 1.4s linear infinite; }
.refflow .lnk.back { stroke: #FDBA74; animation-direction: reverse; }
.refflow .node rect { fill: #fff; stroke: #DDD6FE; stroke-width: 2; }
.refflow .node.me rect { fill: var(--navy); stroke: var(--navy); }
.refflow text { font-family: var(--font); font-size: 13px; fill: #0F172A; font-weight: 600; }
.refflow .node.me text { fill: #fff; }
.refflow text.s { font-size: 11px; font-weight: 400; fill: #64748B; }
.refflow .coin { fill: var(--orange); }
.refflow .coin.c1 { offset-path: path("M 200 150 C 120 150 120 70 60 70"); animation: coin 3.2s linear infinite; }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* pricing quote box */
.qbox { border-color: #DDD6FE; box-shadow: 0 20px 50px rgba(26,0,170,.12); }
.qbox .quote-total { font-size: 2.3rem; margin: 2px 0 8px; }
.qlines { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.qlines li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #F8F7FF; font-size: .85rem; color: #475569; }
.qlines li b { color: var(--navy); white-space: nowrap; }
.qsum { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(90deg, #EEF0FF, #FFF3E8); margin-bottom: 10px; }
.qsum b[data-total] { font-size: 1.2rem; color: var(--navy); }

/* platform icons inside pills and titles */
.pill .pi { width: 20px; height: 20px; }
a.pill { text-decoration: none; transition: border-color .15s, background .15s; }
a.pill:hover { border-color: #C7D2FE; background: #FAFAFF; }
.sec-title .pi { width: 34px; height: 34px; }
.fcard .badge-ic .pi { width: 32px; height: 32px; }

/* company card on light background (contact page) */
.company-card .company-name > .ic { width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: #FFF1E6; color: var(--orange); }
.company-card .company-name b { color: var(--ink); }
.company-card .company-name span { color: var(--muted); }
.company-card .company-info li { color: #334155; }
.company-card .company-info .ic { color: var(--navy); }
.company-card .company-info a { color: var(--navy); }
.by-light { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 14px; border-radius: 99px; background: var(--tint); color: #312E81; font-size: .84rem; }
.by-light .ic { color: var(--orange); }
.by-light strong { color: var(--orange); }

.phero .eyebrow { margin: 6px 0 0; }
.checks.chipbox { gap: 8px; }
.section-head .kicker { justify-content: center; }