/* ==========================================================================
   ETG homepage — agent s3 sections
   founders · faq · final-cta · footer (tools/compare/resources styles kept but unused)
   All generic helpers are scoped under .hp-s3 to avoid collisions.
   ========================================================================== */

.hp-s3 {
  --s3-ink: #082238; --s3-body: #334155; --s3-muted: #64748B; --s3-line: #E2E8F0; --s3-soft: #F3F7F9;
  --s3-g1: #1D3F8F; --s3-g2: #00A3D9; --s3-g3: #00B2A9; --s3-g4: #3FB97A;
  --s3-grad: linear-gradient(100deg, #1D3F8F 0%, #00A3D9 36%, #00B2A9 68%, #3FB97A 100%);
  --s3-red: #FFB81C;
  position: relative; background: #fff; color: var(--s3-body);
  padding-block: clamp(64px, 7.5vw, 112px);
  font-family: var(--f-body);
  overflow-x: clip;
}
.hp-s3 *, .hp-s3 *::before, .hp-s3 *::after { box-sizing: border-box; }

/* ---------- Shared helpers ---------- */
.hp-s3 .hp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp-s3 .hp-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.hp-s3 .hp-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; }
.hp-s3 .hp-head--row > div { max-width: 760px; }
.hp-s3 .hp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--s3-g1); margin-bottom: 16px; }
.hp-s3 .hp-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--s3-grad); }
.hp-s3 .hp-h2, .hp-s3 .hp-final-cta__title { margin: 0; font: 700 clamp(32px, 1.2rem + 1.9vw, 48px)/1.12 var(--f-display); letter-spacing: -.02em; color: var(--s3-ink); text-wrap: balance; }
.hp-s3 .hp-h3 { font: 600 clamp(21px, 1rem + .5vw, 26px)/1.2 var(--f-display); letter-spacing: -.015em; color: var(--s3-ink); }
.hp-s3 .hp-lead { margin-top: 16px; font-size: clamp(17px, 1rem + .15vw, 18px); line-height: 1.65; color: var(--s3-body); max-width: 68ch; }
.hp-s3 .hp-muted { color: var(--s3-muted); font-size: 16px; margin-top: 6px; }
.hp-s3 .hp-grad-text { background: var(--s3-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hp-s3 .hp-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--s3-g1); font-size: 16px; }
.hp-s3 .hp-link span { transition: transform .2s; }
.hp-s3 .hp-link:hover span { transform: translateX(4px); }
.hp-s3 .btn { border-radius: 10px; }
.hp-s3 .btn--red { --bg: var(--s3-red); --fg: #082238; box-shadow: 0 10px 24px -12px rgba(255,184,28,.75); }
.hp-s3 .btn--red:hover { --bg: #F0A400; }
.hp-s3 .btn--outline { --bg: #fff; --fg: var(--s3-ink); background: #fff; color: var(--s3-ink); border-color: #CBD5E1; }
.hp-s3 .btn--outline:hover { border-color: var(--s3-ink); }
.hp-s3 .btn:hover { transform: translateY(-1px); }

/* Reveal (only when JS is ready) */
.hp-s3-js .hp-s3 .hp-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.7,.1,1), transform .6s cubic-bezier(.2,.7,.1,1); transition-delay: var(--d, 0ms); }
.hp-s3-js .hp-s3 .hp-reveal.is-in { opacity: 1; transform: none; }

/* Chips & segmented */
.hp-s3 .hp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.hp-s3 .hp-chip { position: relative; cursor: pointer; }
.hp-s3 .hp-chip input, .hp-s3 .hp-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hp-s3 .hp-chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1.5px solid var(--s3-line); border-radius: 999px; background: #fff; font: 600 15px/1 var(--f-body); color: var(--s3-ink); transition: border-color .2s, background .2s, box-shadow .2s, transform .2s; }
.hp-s3 .hp-chip span img { width: auto; height: 16px; object-fit: contain; }
.hp-s3 .hp-chip:hover span { border-color: #94A3B8; }
.hp-s3 .hp-chip input:checked + span { border-color: var(--s3-g2); background: #EFF8FD; box-shadow: 0 0 0 3px rgba(0,163,217,.14); }
.hp-s3 .hp-chip input:checked + span::after { content: ""; width: 14px; height: 14px; margin-left: 2px; background: var(--s3-g2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.hp-s3 .hp-chip input:focus-visible + span, .hp-s3 .hp-seg input:focus-visible + span { outline: 2px solid var(--s3-g2); outline-offset: 2px; }
.hp-s3 .hp-chips--sm .hp-chip span { min-height: 38px; padding: 8px 12px; font-size: 14px; }

/* Form fields */
.hp-s3 .hp-field { display: grid; gap: 6px; font: 600 14px/1.3 var(--f-body); color: var(--s3-ink); border: 0; padding: 0; margin: 0; min-width: 0; }
.hp-s3 .hp-field em { color: #C8321F; font-style: normal; }
.hp-s3 .hp-field legend { padding: 0; margin-bottom: 8px; }
.hp-s3 .hp-field input, .hp-s3 .hp-field select { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid #CBD5E1; border-radius: 10px; background: #fff; font: 400 16px/1.2 var(--f-body); color: var(--s3-ink); transition: border-color .2s, box-shadow .2s; }
.hp-s3 .hp-field input:focus, .hp-s3 .hp-field select:focus { outline: none; border-color: var(--s3-g2); box-shadow: 0 0 0 3px rgba(0,163,217,.18); }
.hp-s3 .hp-field input[aria-invalid="true"] { border-color: #C8321F; }
.hp-s3 .hp-lead-form { display: grid; gap: 14px; align-content: start; }
.hp-s3 .hp-form__note { font-size: 13px; color: var(--s3-muted); }
.hp-s3 .hp-form__ok { padding: 12px 14px; border-radius: 10px; background: #ECFDF3; color: #166534; font-weight: 600; font-size: 15px; }
.hp-s3 .hp-form__err { color: #B42318; font-weight: 600; font-size: 14px; }
.hp-s3 .hp-lead-form.is-sent .hp-field, .hp-s3 .hp-lead-form.is-sent button[type="submit"], .hp-s3 .hp-lead-form.is-sent .hp-form__note { display: none; }

/* ==========================================================================
   1. Founders
   ========================================================================== */
.hp-founders { background: linear-gradient(180deg, #fff 0%, var(--s3-soft) 100%); }
.hp-founders::before { content: ""; position: absolute; inset: 0 0 auto; height: 520px; pointer-events: none; background: radial-gradient(600px 300px at 85% 0%, rgba(0,163,217,.10), transparent 70%), radial-gradient(500px 260px at 5% 20%, rgba(63,185,122,.08), transparent 70%); }
.hp-founders .wrap { position: relative; }
.hp-founders__layout { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .hp-founders__layout { grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; } }
.hp-founders__intro .hp-head { margin-bottom: 28px; }
.hp-founders__grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) and (max-width: 1023px) { .hp-founders__grid { grid-template-columns: 1fr 1fr; } }
.hp-founder { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 20px; padding: 16px; background: #fff; border: 1px solid var(--s3-line); border-radius: 20px; box-shadow: 0 1px 2px rgba(8,34,56,.04), 0 24px 48px -32px rgba(8,34,56,.25); transition: transform .3s, box-shadow .3s; }
@media (min-width: 1024px) { .hp-founder { grid-template-columns: 148px 1fr; gap: 26px; padding: 18px; } }
.hp-founder:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(8,34,56,.04), 0 32px 56px -30px rgba(8,34,56,.32); }
.hp-founder__photo { position: relative; margin: 0; background: #EEF2F7; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; }
.hp-founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .6s cubic-bezier(.2,.7,.1,1); }
.hp-founder:hover .hp-founder__photo img { transform: scale(1.04); }
.hp-founder__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--s3-grad); }
.hp-founder__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hp-s3 .hp-founder__name { font: 700 clamp(20px, 1rem + .5vw, 24px)/1.15 var(--f-display); color: var(--s3-ink); letter-spacing: -.015em; }
.hp-s3 .hp-founder__role { font: 600 14px/1.2 var(--f-body); color: var(--s3-g1); letter-spacing: .02em; }
.hp-founder__body > p:not(.hp-founder__role) { font-size: 16px; line-height: 1.55; margin-top: 2px; }

.hp-founders__mv { display: grid; gap: 12px; margin: 0; }
.hp-mv { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: baseline; padding: 16px 20px; border-radius: 14px; background: #fff; border: 1px solid var(--s3-line); }
.hp-s3 .hp-mv__title { font: 700 13px/1.4 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--s3-g1); }
.hp-mv dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--s3-body); }
@media (max-width: 420px) { .hp-mv { grid-template-columns: 1fr; gap: 4px; } }
.hp-s3 .hp-motto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 24px; font: 800 clamp(24px, 1rem + 1.2vw, 32px)/1.15 var(--f-display); letter-spacing: -.02em; }
.hp-motto span { background: var(--s3-grad); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.hp-motto span:nth-of-type(1) { background-position: 0% 0; }
.hp-motto span:nth-of-type(2) { background-position: 50% 0; }
.hp-motto span:nth-of-type(3) { background-position: 100% 0; }
.hp-motto i { font-style: normal; color: #94A3B8; }

/* ==========================================================================
   2. Tools
   ========================================================================== */
.hp-tools { background: var(--s3-soft); }
.hp-builder { display: grid; gap: 0; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--s3-line); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(8,34,56,.3); }
@media (min-width: 960px) { .hp-builder { grid-template-columns: 1.1fr 1fr; } }
.hp-builder__form { padding: clamp(22px, 3.5vw, 40px); }
.hp-builder__set { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
.hp-builder__set legend { font: 600 14px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--s3-muted); margin-bottom: 12px; padding: 0; }
.hp-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: #E6F1F4; max-width: 460px; }
.hp-seg label { position: relative; cursor: pointer; }
.hp-seg span { display: grid; place-items: center; min-height: 42px; border-radius: 9px; font: 600 15px/1 var(--f-body); color: var(--s3-body); transition: background .2s, color .2s, box-shadow .2s; }
.hp-seg input:checked + span { background: #fff; color: var(--s3-ink); box-shadow: 0 1px 2px rgba(8,34,56,.08), 0 4px 10px -4px rgba(8,34,56,.18); }

.hp-builder__out { position: relative; padding: clamp(22px, 3.5vw, 40px); background: linear-gradient(160deg, #F2F8FD 0%, #F1FAF6 100%); border-top: 1px solid var(--s3-line); display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 960px) { .hp-builder__out { border-top: 0; border-left: 1px solid var(--s3-line); } }
.hp-builder__out::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--s3-grad); }
.hp-s3 .hp-builder__label { font: 600 13px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--s3-g1); }
.hp-builder__empty { color: var(--s3-muted); font-size: 16px; padding: 18px; border: 1.5px dashed #CBD5E1; border-radius: 12px; background: rgba(255,255,255,.6); }
.hp-builder__flag { padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid rgba(0,163,217,.35); font-size: 15px; line-height: 1.55; box-shadow: 0 8px 20px -14px rgba(0,163,217,.6); }
.hp-builder__flag strong { color: var(--s3-g1); }
.hp-builder__list { display: grid; gap: 10px; }
.hp-builder__list li { position: relative; padding: 12px 14px 12px 40px; background: #fff; border-radius: 12px; border: 1px solid var(--s3-line); font-size: 15px; line-height: 1.5; animation: hp-s3-pop .35s cubic-bezier(.2,.7,.1,1); }
.hp-builder__list li::before { content: ""; position: absolute; left: 14px; top: 16px; width: 16px; height: 16px; border-radius: 50%; background: var(--s3-grad); -webkit-mask: radial-gradient(circle, transparent 3px, #000 3.5px); mask: radial-gradient(circle, transparent 3px, #000 3.5px); }
.hp-builder__list li[data-rec="core"]::before { -webkit-mask: none; mask: none; }
.hp-builder__list strong { color: var(--s3-ink); }
.hp-builder__size { font-size: 15px; color: var(--s3-body); }
.hp-builder__next { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(8,34,56,.08); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
@keyframes hp-s3-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hp-guides { margin-top: clamp(48px, 6vw, 72px); }
.hp-guides__head { margin-bottom: 22px; }
.hp-guides__grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .hp-guides__grid { grid-template-columns: 2.1fr 1fr; align-items: stretch; } }
.hp-guides__cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .hp-guides__cards { grid-template-columns: repeat(3, 1fr); } }
.hp-guide { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: #fff; border: 1px solid var(--s3-line); border-radius: 16px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.hp-guide:hover { transform: translateY(-3px); border-color: #BFD7EA; box-shadow: 0 20px 40px -28px rgba(8,34,56,.35); }
.hp-guide.is-picked { border-color: var(--s3-g2); box-shadow: 0 0 0 3px rgba(0,163,217,.14); }
.hp-guide img { width: auto; height: 34px; max-width: 120px; object-fit: contain; object-position: left center; }
.hp-guide h4 { margin: 4px 0 0; font: 600 18px/1.3 var(--f-display); color: var(--s3-ink); }
.hp-guide p { font-size: 15px; line-height: 1.55; color: var(--s3-body); }
.hp-guide__pick { margin-top: auto; align-self: flex-start; padding: 8px 0; font: 600 15px/1.2 var(--f-body); color: var(--s3-g1); display: inline-flex; gap: 6px; }
.hp-guide__pick::after { content: "→"; transition: transform .2s; }
.hp-guide__pick:hover::after { transform: translateX(4px); }
.hp-guides__form { padding: 24px; background: #fff; border: 1px solid var(--s3-line); border-radius: 16px; box-shadow: 0 20px 40px -32px rgba(8,34,56,.35); }

.hp-bundles { margin-top: clamp(48px, 6vw, 72px); }
.hp-bundles .hp-h3 { margin-bottom: 20px; }
.hp-bundles__row { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .hp-bundles__row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hp-bundles__row { grid-template-columns: repeat(3, 1fr) 1.25fr; } }
.hp-bundle { position: relative; padding: 22px 24px; background: #fff; border: 1px solid var(--s3-line); border-radius: 16px; display: flex; flex-direction: column; gap: 6px; }
.hp-bundle--feat { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, var(--s3-grad) border-box; border: 1.5px solid transparent; }
.hp-s3 .hp-bundle__name { font: 600 15px/1.2 var(--f-body); color: var(--s3-muted); }
.hp-s3 .hp-bundle__price { font: 800 clamp(30px, 1.2rem + 1.2vw, 38px)/1 var(--f-display); letter-spacing: -.03em; color: var(--s3-ink); }
.hp-s3 .hp-bundle__meta { font-size: 14px; color: var(--s3-body); display: inline-flex; align-items: center; gap: 6px; }
.hp-bundle__meta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s3-g4); }
.hp-bundle--other { background: #082238; border-color: #082238; }
.hp-bundle--other .hp-bundle__name { color: #94A3B8; }
.hp-s3 .hp-bundle__quote { font: 700 20px/1.3 var(--f-display); color: #fff; letter-spacing: -.01em; }
.hp-bundle--other .hp-link { color: #7DD3FC; margin-top: auto; }

/* ==========================================================================
   3. Compare
   ========================================================================== */
.hp-compare { background: #fff; }
.hp-compare__scroll { overflow-x: auto; border: 1px solid var(--s3-line); border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -44px rgba(8,34,56,.35); -webkit-overflow-scrolling: touch; }
.hp-compare__scroll:focus-visible { outline: 2px solid var(--s3-g2); outline-offset: 3px; }
.hp-compare__table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; }
.hp-compare__table th, .hp-compare__table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--s3-line); }
.hp-compare__table tbody tr:last-child > * { border-bottom: 0; }
.hp-compare__table thead th { font: 600 15px/1.3 var(--f-display); color: var(--s3-ink); background: var(--s3-soft); vertical-align: bottom; }
.hp-compare__table thead th.hp-compare__etg { display: table-cell; }
.hp-compare__table thead th.hp-compare__etg img { display: inline-block; vertical-align: middle; width: 24px; height: 24px; margin-right: 8px; }
.hp-compare__table tbody th { font: 600 15px/1.35 var(--f-display); color: var(--s3-ink); width: 19%; background: #fff; position: sticky; left: 0; z-index: 1; }
.hp-compare__table td { color: var(--s3-body); width: 20%; }
.hp-compare__table td > span { display: inline-block; vertical-align: -3px; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; }
.hp-compare__etg { background: linear-gradient(180deg, #F0F8FE, #F0FAF5) !important; color: var(--s3-ink) !important; font-weight: 600; box-shadow: inset 2px 0 0 #00A3D9, inset -2px 0 0 #00B2A9; }
.hp-compare__table thead th.hp-compare__etg { box-shadow: inset 2px 0 0 #00A3D9, inset -2px 0 0 #00B2A9, inset 0 3px 0 #1D3F8F; }
.hp-s3 .hp-yes { background: #16A34A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
.hp-s3 .hp-mid { background: #fff; box-shadow: inset 0 0 0 2px #F59E0B; position: relative; }
.hp-s3 .hp-mid::after { content: ""; position: absolute; left: 4px; right: 4px; top: 7px; height: 2px; background: #F59E0B; }
.hp-s3 .hp-no { background: #fff; box-shadow: inset 0 0 0 2px #CBD5E1; }
.hp-compare__hint { display: none; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--s3-g1); }
@media (max-width: 900px) { .hp-compare__hint { display: block; } }
.hp-compare__note { margin-top: 14px; font-size: 13px; color: var(--s3-muted); }
.hp-compare__cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 640px) {
  .hp-compare__table { min-width: 720px; font-size: 14px; }
  .hp-compare__table th, .hp-compare__table td { padding: 12px 12px; }
  .hp-compare__table tbody th { width: 128px; box-shadow: 6px 0 10px -8px rgba(8,34,56,.25); }
}

/* ==========================================================================
   4. FAQ
   ========================================================================== */
.hp-faq { background: linear-gradient(180deg, var(--s3-soft), #fff); }
.hp-faq__wrap { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .hp-faq__wrap { grid-template-columns: 0.85fr 1.4fr; gap: 64px; align-items: start; } .hp-faq__head { position: sticky; top: 110px; } }
.hp-faq__head { margin-bottom: 0; }
.hp-faq__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
.hp-faq__list { display: grid; gap: 12px; }
.hp-faq__item { background: #fff; border: 1px solid var(--s3-line); border-radius: 16px; transition: border-color .25s, box-shadow .25s; }
.hp-faq__item[open] { border-color: #BFD7EA; box-shadow: 0 18px 40px -30px rgba(8,34,56,.35); }
.hp-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; }
.hp-faq__item summary::-webkit-details-marker { display: none; }
.hp-faq__item summary:focus-visible { outline: 2px solid var(--s3-g2); outline-offset: -2px; border-radius: 16px; }
.hp-s3 .hp-faq__q { font: 600 clamp(17px, 1rem + .25vw, 19px)/1.4 var(--f-display); color: var(--s3-ink); letter-spacing: -.01em; }
.hp-faq__icon { flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; background: #E6F1F4; transition: background .25s, transform .3s; }
.hp-faq__icon::before, .hp-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--s3-ink); border-radius: 2px; transition: transform .3s, background .25s; }
.hp-faq__icon::after { transform: rotate(90deg); }
.hp-faq__item[open] .hp-faq__icon { background: var(--s3-grad); transform: rotate(180deg); }
.hp-faq__item[open] .hp-faq__icon::before, .hp-faq__item[open] .hp-faq__icon::after { background: #fff; }
.hp-faq__item[open] .hp-faq__icon::after { transform: rotate(0deg); }
.hp-faq__a { padding: 0 22px 22px; }
.hp-faq__a p { font-size: 16px; line-height: 1.65; color: var(--s3-body); max-width: 70ch; }

/* ==========================================================================
   5. Resources
   ========================================================================== */
.hp-resources { background: #fff; }
.hp-resources__grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .hp-resources__grid { grid-template-columns: repeat(3, 1fr); } }
.hp-article { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--s3-line); border-radius: 18px; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.hp-article:hover { transform: translateY(-4px); box-shadow: 0 28px 48px -34px rgba(8,34,56,.4); }
.hp-article__art { display: flex; align-items: center; justify-content: center; gap: 14px; aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.hp-article__art img { width: auto; height: 44px; object-fit: contain; position: relative; transition: transform .5s cubic-bezier(.2,.7,.1,1); }
.hp-article:hover .hp-article__art img { transform: scale(1.06); }
.hp-article__art--a { background: radial-gradient(80% 90% at 20% 20%, #DFF1FA, transparent 70%), radial-gradient(70% 80% at 90% 90%, #E6F6EE, transparent 70%), #F3F7F9; }
.hp-article__art--b { background: radial-gradient(80% 90% at 80% 10%, #FFF1D6, transparent 70%), radial-gradient(70% 80% at 10% 90%, #DFF1FA, transparent 70%), #F3F7F9; }
.hp-article__art--c { background: radial-gradient(80% 90% at 50% 0%, #E6E9FB, transparent 70%), radial-gradient(70% 80% at 90% 100%, #DFF5F1, transparent 70%), #F3F7F9; }
.hp-article__vs { font: 800 20px/1 var(--f-display); color: #94A3B8; position: relative; }
.hp-article__sf { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; border: 1px solid var(--s3-line); font: 800 16px/1 var(--f-display); color: #0B5CAB; }
.hp-article__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.hp-s3 .hp-badge { align-self: flex-start; padding: 6px 10px; border-radius: 999px; background: #FFF4E5; color: #9A3412; font: 600 12px/1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; }
.hp-s3 .hp-article__title { font: 600 clamp(19px, 1rem + .3vw, 21px)/1.3 var(--f-display); color: var(--s3-ink); letter-spacing: -.01em; }
.hp-s3 .hp-article__cat { font-size: 14px; color: var(--s3-muted); }

/* ==========================================================================
   6. Final CTA
   ========================================================================== */
.hp-final-cta { background: #fff; }
.hp-final-cta__panel { position: relative; overflow: hidden; display: grid; gap: 32px; grid-template-columns: 1fr; padding: clamp(28px, 5vw, 64px); border-radius: 28px; background: linear-gradient(135deg, #F2F8FE 0%, #FFFFFF 45%, #F0FAF4 100%); border: 1px solid var(--s3-line); box-shadow: 0 40px 80px -50px rgba(8,34,56,.35); }
@media (min-width: 1024px) { .hp-final-cta__panel { grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; } }
.hp-final-cta__panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--s3-grad); }
.hp-final-cta__glow { position: absolute; inset: -30%; pointer-events: none; background: radial-gradient(40% 40% at 15% 20%, rgba(0,163,217,.16), transparent 70%), radial-gradient(35% 35% at 85% 80%, rgba(63,185,122,.14), transparent 70%); will-change: transform; }
.hp-final-cta__copy, .hp-final-cta__form { position: relative; }
.hp-s3 .hp-final-cta__title { font-size: clamp(36px, 1.2rem + 3vw, 60px); line-height: 1.06; letter-spacing: -.03em; max-width: 16ch; }
.hp-final-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hp-final-cta__actions .btn--outline { white-space: normal; text-align: center; }
.hp-final-cta__list { display: grid; gap: 10px; margin-top: 24px; }
.hp-final-cta__list li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; color: var(--s3-ink); font-weight: 500; }
.hp-final-cta__list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--s3-grad); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-1.5 17.2-5-5 1.6-1.6 3.4 3.4 7-7 1.6 1.6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-1.5 17.2-5-5 1.6-1.6 3.4 3.4 7-7 1.6 1.6z'/%3E%3C/svg%3E") center/contain no-repeat; }
.hp-cta-trust { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 28px; }
.hp-cta-trust li { padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid var(--s3-line); font-size: 14px; color: var(--s3-body); }
.hp-cta-trust strong { font-family: var(--f-display); color: var(--s3-ink); }
.hp-final-cta__form { padding: clamp(22px, 3vw, 30px); background: #fff; border: 1px solid var(--s3-line); border-radius: 20px; box-shadow: 0 24px 48px -32px rgba(8,34,56,.35); }
.hp-final-cta__form .hp-h3 { font-size: 22px; }

/* ==========================================================================
   7. Footer
   ========================================================================== */
.hp-footer { background: var(--s3-soft); border-top: 1px solid var(--s3-line); padding-block: clamp(56px, 7vw, 88px) 28px; }
.hp-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--s3-grad); }
.hp-footer a { transition: color .2s; }
.hp-footer__top { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .hp-footer__top { grid-template-columns: 1fr 2.4fr; gap: 64px; } }
.hp-footer__brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.hp-footer__brand img { width: 168px; height: auto; }
.hp-footer__brand > p { font-size: 15px; line-height: 1.6; color: var(--s3-body); max-width: 36ch; }
.hp-footer__nap { font-size: 15px; line-height: 1.6; color: var(--s3-body); }
.hp-footer__nap strong { color: var(--s3-ink); }
.hp-footer__nap a { color: var(--s3-g1); font-weight: 600; }
.hp-footer__nap a:hover { color: var(--s3-g2); }
.hp-footer__social { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--s3-line); background: #fff; color: var(--s3-ink); font: 600 14px/1 var(--f-body); }
.hp-footer__social svg { color: #0A66C2; }
.hp-footer__social:hover { border-color: #0A66C2; }
.hp-footer__cols { display: grid; gap: 32px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .hp-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hp-footer__col h3 { font: 600 13px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--s3-ink); margin-bottom: 16px; }
.hp-footer__col ul { display: grid; gap: 10px; }
.hp-footer__col a:not(.btn) { font-size: 15px; color: var(--s3-body); }
.hp-footer__col a:not(.btn):hover { color: var(--s3-g1); }
.hp-footer__cta { margin-top: 22px; }
.hp-footer__partners { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--s3-line); }
.hp-footer__partners span { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--s3-line); font: 500 13px/1.2 var(--f-body); color: var(--s3-body); }
.hp-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 24px; font-size: 14px; color: var(--s3-muted); }
.hp-footer__motto { margin-left: 10px; font-weight: 600; color: var(--s3-g1); }
.hp-footer__bottom ul { display: flex; gap: 20px; }
.hp-footer__bottom a { color: var(--s3-muted); }
.hp-footer__bottom a:hover { color: var(--s3-ink); }
@media (max-width: 520px) { .hp-footer__motto { display: block; margin: 4px 0 0; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hp-s3 *, .hp-s3 *::before, .hp-s3 *::after { animation: none !important; transition: none !important; }
  .hp-s3-js .hp-s3 .hp-reveal { opacity: 1; transform: none; }
  .hp-final-cta__glow { transform: none !important; }
}

/* inline links in FAQ answers */
.hp-faq__a a { color: #0A6FA8; text-decoration: underline; text-decoration-color: rgba(10,111,168,.3); text-underline-offset: 3px; }
.hp-faq__a a:hover { text-decoration-color: currentColor; }