/* ==========================================
   SPRUCE UP - how-to-buy.css v1.0
   Prefix: htb-
========================================== */
:root {
    --htb-yellow:    #F5C800;
    --htb-yellow-h:  #e0b500;
    --htb-charcoal:  #1C1C1C;
    --htb-dark:      #141414;
    --htb-white:     #ffffff;
    --htb-gray:      #f4f4f4;
    --htb-border:    rgba(28,28,28,0.09);
    --htb-dim:       #666666;
    --htb-font:      'Poppins', sans-serif;
    --htb-radius:    8px;
    --htb-ease:      cubic-bezier(0.4,0,0.2,1);
    --htb-t:         0.22s var(--htb-ease);
    --htb-inner:     1180px;
    --htb-green:     #16A34A;
}

/* ── Base ── */
.htb-inner { max-width: var(--htb-inner); margin: 0 auto; padding: 0 32px; }

/* ── Breadcrumb ── */
.htb-breadcrumb-wrap { padding: 20px 0 0; }
.htb-breadcrumb { display:flex; align-items:center; gap:8px; font-family:var(--htb-font); font-size:12px; color:rgba(28,28,28,0.45); }
.htb-breadcrumb a { color:rgba(28,28,28,0.55); text-decoration:none; }
.htb-breadcrumb a:hover { color:var(--htb-charcoal); }

/* ── Eyebrow ── */
.htb-eyebrow { display:block; font-family:var(--htb-font); font-size:10px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--htb-yellow); margin-bottom:14px; }
.htb-eyebrow--dash::before { content:'-- '; color:var(--htb-yellow); }

/* ── Yellow bar ── */
.htb-yellow-bar { width:48px; height:4px; background:var(--htb-yellow); border-radius:2px; margin:16px 0 20px; }

/* ── Buttons ── */
.htb-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 22px; font-family:var(--htb-font); font-size:13px; font-weight:700; text-decoration:none; border-radius:6px; border:2px solid transparent; cursor:pointer; transition:all var(--htb-t); letter-spacing:0.01em; }
.htb-btn svg { flex-shrink:0; transition:transform var(--htb-t); }
.htb-btn:hover svg { transform:translateX(3px); }
.htb-btn--yellow { background:var(--htb-yellow); color:var(--htb-charcoal); border-color:var(--htb-yellow); }
.htb-btn--yellow:hover { background:var(--htb-yellow-h); transform:translateY(-1px); }
.htb-btn--outline { background:transparent; color:var(--htb-charcoal); border-color:rgba(28,28,28,0.25); }
.htb-btn--outline:hover { border-color:var(--htb-charcoal); }
.htb-btn--outline-light { background:transparent; color:rgba(255,255,255,0.8); border-color:rgba(255,255,255,0.3); }
.htb-btn--outline-light:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.6); color:#fff; }
.htb-btn--dark { background:var(--htb-charcoal); color:#fff; border-color:var(--htb-charcoal); }
.htb-btn--dark:hover { background:#2e2e2e; transform:translateY(-1px); }
.htb-cta-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:40px; }

/* ── Sections ── */
.htb-section { padding:96px 0; background:var(--htb-white); }
.htb-section--gray { background:var(--htb-gray); }
.htb-section--dark { background:var(--htb-charcoal); }
.htb-section--dark h2, .htb-section--dark h3, .htb-section--dark h4 { color:#fff; }
.htb-section--dark p { color:rgba(255,255,255,0.6); }
.htb-section-head { max-width:700px; margin-bottom:56px; }
.htb-section-head h2 { font-family:var(--htb-font); font-size:40px; font-weight:800; color:var(--htb-charcoal); margin:0 0 12px; line-height:1.1; letter-spacing:-0.02em; }
.htb-section-head p { font-family:var(--htb-font); font-size:16px; line-height:1.75; color:var(--htb-dim); margin-top:16px; }

/* ── Hero ── */
.htb-hero { background: radial-gradient(circle at 92% 0%, rgba(245,200,0,0.08), transparent 45%), #ffffff; padding:48px 0 0; }
.htb-hero__grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; padding-bottom:56px; }
.htb-hero__title { font-family:var(--htb-font); font-size:58px; font-weight:900; color:var(--htb-charcoal); line-height:1.05; margin:14px 0 18px; letter-spacing:-0.03em; }
.htb-hero__sub { font-family:var(--htb-font); font-size:18px; color:var(--htb-charcoal); line-height:1.6; max-width:500px; font-weight:500; }
.htb-hero__sub strong { color:var(--htb-charcoal); }

/* Contact card */
.htb-contact-card { background:var(--htb-gray); border:1.5px solid var(--htb-border); border-radius:10px; padding:28px; }
.htb-contact-card .htb-eyebrow { margin-bottom:10px; }
.htb-contact-card p { font-family:var(--htb-font); font-size:14px; line-height:1.7; color:var(--htb-dim); margin-bottom:18px; }
.htb-contact-card__actions { display:flex; gap:10px; flex-wrap:wrap; }
.htb-contact-card__note { font-size:11px; color:rgba(28,28,28,0.4); margin-top:12px !important; margin-bottom:0 !important; }

/* Segment cards */
.htb-seg-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-bottom:0; }
.htb-seg-card { border:1.5px solid var(--htb-border); border-radius:10px; padding:28px 24px; display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit; transition:all var(--htb-t); }
.htb-seg-card:hover { border-color:var(--htb-yellow); transform:translateY(-3px); box-shadow:0 16px 40px -16px rgba(0,0,0,0.15); }
.htb-seg-card__icon { width:44px; height:44px; border-radius:8px; background:var(--htb-yellow); display:grid; place-items:center; color:var(--htb-charcoal); margin-bottom:8px; }
.htb-seg-card__icon svg { width:24px; height:24px; }
.htb-seg-card__label { font-family:var(--htb-font); font-size:10px; font-weight:800; letter-spacing:0.2em; text-transform:uppercase; color:var(--htb-yellow); }
.htb-seg-card h3 { font-family:var(--htb-font); font-size:17px; font-weight:800; color:var(--htb-charcoal); margin:0; }
.htb-seg-card p { font-family:var(--htb-font); font-size:13.5px; color:var(--htb-dim); margin:0; flex:1; }
.htb-seg-card__link { font-family:var(--htb-font); font-size:11px; font-weight:800; letter-spacing:0.15em; text-transform:uppercase; color:var(--htb-yellow); display:inline-flex; align-items:center; gap:6px; margin-top:8px; }

/* Trust ribbon */
.htb-trust { background:var(--htb-charcoal); padding:0; margin-top:56px; }
.htb-trust__grid { display:grid; grid-template-columns:repeat(4,1fr) 1.5fr; border-top:1px solid rgba(255,255,255,0.08); }
.htb-trust__cell { padding:28px 24px; border-right:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; justify-content:center; }
.htb-trust__cell:last-child { border-right:none; }
.htb-trust__num { font-family:var(--htb-font); font-size:34px; font-weight:900; color:var(--htb-yellow); letter-spacing:-0.02em; line-height:1; }
.htb-trust__lab { font-family:var(--htb-font); font-size:12px; color:rgba(255,255,255,0.45); margin-top:6px; }
.htb-trust__badges { padding:20px 24px; display:flex; flex-direction:column; justify-content:center; gap:8px; border-right:none; }
.htb-badge-row { display:flex; flex-wrap:wrap; gap:6px; }
.htb-badge { font-family:var(--htb-font); font-size:10px; font-weight:700; padding:4px 10px; border:1px solid rgba(255,255,255,0.2); border-radius:3px; color:rgba(255,255,255,0.6); }
.htb-badge--highlight { background:rgba(245,200,0,0.12); border-color:var(--htb-yellow); color:var(--htb-yellow); }

/* Segment headers */
.htb-seg-header { display:flex; align-items:flex-start; gap:24px; margin-bottom:56px; padding-bottom:32px; border-bottom:2px solid var(--htb-border); }
.htb-section--dark .htb-seg-header { border-bottom-color:rgba(255,255,255,0.08); }
.htb-seg-num { font-family:var(--htb-font); font-size:72px; font-weight:900; color:rgba(28,28,28,0.18); letter-spacing:-0.04em; line-height:1; flex-shrink:0; margin-top:-8px; }
.htb-seg-num--light { color:rgba(28,28,28,0.18); }
.htb-seg-num--dark { color:rgba(255,255,255,0.15); }
.htb-seg-header h2 { font-family:var(--htb-font); font-size:40px; font-weight:800; color:var(--htb-charcoal); margin:0 0 0; line-height:1.1; letter-spacing:-0.02em; }
.htb-section--dark .htb-seg-header h2 { color:#fff; }
.htb-seg-header__sub { font-family:var(--htb-font); font-size:15px; color:var(--htb-dim); line-height:1.7; max-width:560px; }
.htb-seg-header__sub--dark { color:rgba(255,255,255,0.55); }

/* Subsection heads */
.htb-subsection-head { margin-bottom:36px; }
.htb-subsection-head h3 { font-family:var(--htb-font); font-size:24px; font-weight:800; color:var(--htb-charcoal); margin:0; }
.htb-subsection-head--dark h3 { color:#fff; }

/* Lead text */
.htb-lead { font-family:var(--htb-font); font-size:16px; line-height:1.75; color:var(--htb-dim); max-width:680px; margin-bottom:40px; }
.htb-lead strong { color:var(--htb-charcoal); }
.htb-lead--dark { color:rgba(255,255,255,0.6); }
.htb-lead--dark strong { color:#fff; }

/* GeM block */
.htb-gem-block { background:#fff; border:1.5px solid var(--htb-border); border-radius:10px; padding:32px; margin-bottom:48px; display:flex; align-items:center; gap:28px; position:relative; overflow:hidden; }
.htb-gem-block__watermark { position:absolute; right:24px; top:50%; transform:translateY(-50%); font-family:var(--htb-font); font-size:90px; font-weight:900; color:rgba(28,28,28,0.04); letter-spacing:-0.04em; line-height:1; pointer-events:none; }
.htb-gem-block__badge { background:var(--htb-yellow); color:var(--htb-charcoal); padding:8px 14px; border-radius:4px; font-family:var(--htb-font); font-size:10px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; white-space:nowrap; flex-shrink:0; }
.htb-gem-price { font-family:var(--htb-font); font-size:36px; font-weight:900; color:var(--htb-yellow); letter-spacing:-0.02em; line-height:1; }
.htb-gem-price span { font-size:20px; color:var(--htb-charcoal); }
.htb-gem-price__note { font-family:var(--htb-font); font-size:13px; color:var(--htb-dim); margin-top:6px; }
.htb-gem-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.htb-gem-pills span { font-family:var(--htb-font); font-size:12px; font-weight:600; padding:4px 10px; background:var(--htb-gray); border-radius:4px; color:var(--htb-dim); }

/* Journey steps */
.htb-journey { display:grid; position:relative; gap:0; margin-bottom:48px; }
.htb-journey--4 { grid-template-columns:repeat(4,1fr); }
.htb-journey--5 { grid-template-columns:repeat(5,1fr); }
.htb-journey--4::before, .htb-journey--5::before {
    content:''; position:absolute; top:27px; left:7%; right:7%; height:2px;
    background:var(--htb-yellow); z-index:0;
}
.htb-journey--dark::before { background:rgba(245,200,0,0.35); }
.htb-step { padding:0 16px; text-align:center; position:relative; z-index:1; }
.htb-step__num { width:56px; height:56px; border-radius:50%; background:var(--htb-yellow); color:var(--htb-charcoal); display:grid; place-items:center; font-family:var(--htb-font); font-size:20px; font-weight:900; margin:0 auto 18px; box-shadow:0 0 0 6px #fff; position:relative; z-index:2; }
.htb-section--dark .htb-step__num { box-shadow:0 0 0 6px var(--htb-charcoal); }
.htb-section--gray .htb-step__num { box-shadow:0 0 0 6px var(--htb-gray); }
.htb-step h4 { font-family:var(--htb-font); font-size:14px; font-weight:700; color:var(--htb-charcoal); margin:0 0 8px; }
.htb-section--dark .htb-step h4 { color:#fff; }
.htb-step p { font-family:var(--htb-font); font-size:12.5px; color:var(--htb-dim); line-height:1.6; }
.htb-section--dark .htb-step p { color:rgba(255,255,255,0.5); }

/* Funds row */
.htb-funds-row { background:var(--htb-gray); border-radius:8px; padding:18px 24px; margin-bottom:48px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.htb-funds-row__label { font-family:var(--htb-font); font-size:10px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:var(--htb-yellow); white-space:nowrap; }
.htb-funds-row__pills { display:flex; gap:8px; flex-wrap:wrap; }
.htb-funds-row__pills span { font-family:var(--htb-font); font-size:13px; font-weight:600; padding:6px 12px; background:#fff; border:1px solid var(--htb-border); border-radius:4px; color:var(--htb-charcoal); }

/* Spec table */
.htb-spec-table-wrap { overflow-x:auto; margin-bottom:32px; }
.htb-spec-table { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:10px; overflow:hidden; border:1px solid var(--htb-border); box-shadow:0 8px 24px -16px rgba(0,0,0,0.1); }
.htb-spec-table thead th { text-align:left; padding:18px 22px; background:var(--htb-charcoal); color:#fff; font-family:var(--htb-font); font-weight:700; font-size:13px; }
.htb-spec-table tbody td, .htb-spec-table tbody th { padding:14px 22px; font-family:var(--htb-font); font-size:14px; border-top:1px solid var(--htb-border); vertical-align:middle; }
.htb-spec-table tbody th { background:var(--htb-gray); font-weight:700; font-size:13px; color:var(--htb-charcoal); width:28%; }
.htb-spec-table tbody td { font-weight:500; color:var(--htb-charcoal); }
.htb-spec-table tbody tr:hover td, .htb-spec-table tbody tr:hover th { background:#fffbe6; }
.htb-pill { display:inline-block; font-family:var(--htb-font); font-size:11px; font-weight:700; padding:4px 10px; border-radius:4px; letter-spacing:0.5px; margin-right:4px; }
.htb-pill--green { background:#DCFCE7; color:#166534; }
.htb-pill--yellow { background:#FEF9C3; color:#854D0E; }
.htb-spec-note { font-size:12px; color:var(--htb-dim); margin-left:4px; }
.htb-table-link { font-family:var(--htb-font); font-size:13px; color:var(--htb-yellow); font-weight:700; text-decoration:none; margin-left:8px; display:inline-flex; align-items:center; gap:4px; }

/* Honest note */
.htb-honest-note { background:#FFFBE6; border:1.5px solid var(--htb-yellow); border-radius:8px; padding:22px 28px; margin-bottom:40px; display:flex; gap:16px; align-items:flex-start; }
.htb-honest-note__icon { font-size:22px; flex-shrink:0; line-height:1.3; }
.htb-honest-note__head { font-family:var(--htb-font); font-size:14px; font-weight:800; color:var(--htb-charcoal); margin-bottom:4px; }
.htb-honest-note p { font-family:var(--htb-font); font-size:13.5px; color:var(--htb-dim); margin:0; }

/* Feature 4 */
.htb-feature-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:40px; }
.htb-feat-tile { background:#fff; border:1px solid var(--htb-border); border-radius:8px; padding:24px; transition:all var(--htb-t); }
.htb-feat-tile:hover { border-color:var(--htb-yellow); transform:translateY(-2px); }
.htb-feat-tile__icon { width:44px; height:44px; border-radius:8px; background:var(--htb-yellow); display:grid; place-items:center; color:var(--htb-charcoal); margin-bottom:16px; }
.htb-feat-tile__icon svg { width:22px; height:22px; }
.htb-feat-tile h4 { font-family:var(--htb-font); font-size:15px; font-weight:700; color:var(--htb-charcoal); margin:0 0 8px; }
.htb-feat-tile p { font-family:var(--htb-font); font-size:13px; color:var(--htb-dim); line-height:1.6; margin:0; }

/* Partner grid */
.htb-partner-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:40px; }
.htb-partner-tile { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:28px; transition:all var(--htb-t); }
.htb-partner-tile:hover { border-color:var(--htb-yellow); background:rgba(245,200,0,0.05); }
.htb-partner-tile__icon { width:44px; height:44px; border-radius:8px; background:var(--htb-yellow); display:grid; place-items:center; color:var(--htb-charcoal); margin-bottom:16px; }
.htb-partner-tile__icon svg { width:22px; height:22px; }
.htb-partner-tile h4 { font-family:var(--htb-font); font-size:15px; font-weight:700; color:#fff; margin:0 0 8px; }
.htb-partner-tile p { font-family:var(--htb-font); font-size:13px; color:rgba(255,255,255,0.55); line-height:1.6; margin:0; }

/* Expect box */
.htb-expect-box { background:rgba(245,200,0,0.08); border:1px solid rgba(245,200,0,0.25); border-radius:8px; padding:24px 28px; margin-bottom:40px; }
.htb-expect-box__head { font-family:var(--htb-font); font-size:10px; font-weight:800; letter-spacing:0.2em; text-transform:uppercase; color:var(--htb-yellow); margin-bottom:14px !important; }
.htb-expect-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.htb-expect-list li { font-family:var(--htb-font); font-size:14px; color:rgba(255,255,255,0.8); display:flex; align-items:flex-start; gap:12px; }
.htb-expect-list li::before { content:'->'; color:var(--htb-yellow); font-weight:800; flex-shrink:0; }

/* What happens next */
.htb-next-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.htb-next-card { background:#fff; border:1px solid var(--htb-border); border-radius:8px; overflow:hidden; transition:all var(--htb-t); }
.htb-next-card:hover { border-color:var(--htb-yellow); transform:translateY(-2px); }
.htb-next-card__head { background:var(--htb-charcoal); padding:20px 24px; display:flex; align-items:center; gap:14px; }
.htb-next-card__num { width:36px; height:36px; border-radius:50%; background:var(--htb-yellow); color:var(--htb-charcoal); display:grid; place-items:center; font-family:var(--htb-font); font-weight:900; font-size:13px; flex-shrink:0; }
.htb-next-card__head h4 { font-family:var(--htb-font); font-size:15px; font-weight:700; color:#fff; margin:0; }
.htb-next-card__body { padding:16px 24px; }
.htb-next-card__row { padding:10px 0; border-bottom:1px solid var(--htb-gray); display:grid; grid-template-columns:100px 1fr; gap:12px; font-family:var(--htb-font); font-size:13px; }
.htb-next-card__row:last-child { border-bottom:none; }
.htb-next-card__row span:first-child { font-size:9px; font-weight:800; letter-spacing:0.15em; text-transform:uppercase; color:var(--htb-yellow); padding-top:3px; }
.htb-next-card__row span:last-child { color:var(--htb-charcoal); font-weight:500; }

/* FAQ */
.htb-faq-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; }
.htb-faq-item { padding:20px 0; border-bottom:1px solid var(--htb-gray); }
.htb-faq-tag { font-family:var(--htb-font); font-size:9px; font-weight:800; letter-spacing:0.15em; text-transform:uppercase; color:var(--htb-yellow); display:block; margin-bottom:6px; }
.htb-faq-q { font-family:var(--htb-font); font-size:15px; font-weight:700; color:var(--htb-charcoal); margin:0 0 8px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.htb-faq-arrow { color:var(--htb-yellow); font-weight:900; flex-shrink:0; }
.htb-faq-a { font-family:var(--htb-font); font-size:13.5px; color:var(--htb-dim); line-height:1.65; margin:0; }

/* CTA banner */
.htb-cta-banner { background:var(--htb-yellow); padding:36px 0; }
.htb-cta-banner__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.htb-cta-banner__label { font-family:var(--htb-font); font-size:11px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:rgba(28,28,28,0.6); margin-bottom:4px; }
.htb-cta-banner__title { font-family:var(--htb-font); font-size:24px; font-weight:800; color:var(--htb-charcoal); letter-spacing:-0.01em; margin:0; }
.htb-cta-banner__title strong { font-weight:900; }
.htb-cta-banner__actions { display:flex; gap:12px; flex-wrap:wrap; }

/* Sticky strip */
.htb-sticky-strip { background:var(--htb-charcoal); padding:16px 0; border-top:2px solid var(--htb-yellow); }
.htb-sticky-strip__inner { display:flex; gap:28px; flex-wrap:wrap; align-items:center; justify-content:space-between; font-family:var(--htb-font); font-size:13px; color:rgba(255,255,255,0.55); }
.htb-sticky-strip__inner span { display:flex; align-items:center; gap:8px; }
.htb-sticky-strip__inner span + span::before { content:'*'; color:var(--htb-yellow); font-size:18px; line-height:0; }
.htb-sticky-strip__hotline { color:var(--htb-yellow) !important; font-weight:700; }
.htb-sticky-strip__hotline::before { display:none !important; }
.htb-sticky-strip__hotline a { color:var(--htb-yellow); text-decoration:none; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .htb-inner { padding:0 24px; }
    .htb-hero__grid { grid-template-columns:1fr; gap:32px; }
    .htb-hero__title { font-size:44px; }
    .htb-seg-cards { grid-template-columns:1fr 1fr; }
    .htb-trust__grid { grid-template-columns:repeat(2,1fr); }
    .htb-journey--4 { grid-template-columns:1fr 1fr; }
    .htb-journey--5 { grid-template-columns:1fr 1fr; }
    .htb-journey--4::before, .htb-journey--5::before { display:none; }
    .htb-feature-4 { grid-template-columns:1fr 1fr; }
    .htb-partner-grid { grid-template-columns:1fr 1fr; }
    .htb-next-grid { grid-template-columns:1fr; }
    .htb-faq-grid { grid-template-columns:1fr; }
    .htb-cta-banner__inner { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 768px) {
    .htb-inner { padding:0 20px; }
    .htb-hero__title { font-size:36px; }
    .htb-section-head h2 { font-size:30px; }
    .htb-seg-cards { grid-template-columns:1fr; }
    .htb-seg-num { font-size:48px; }
    .htb-seg-header h2 { font-size:30px; }
    .htb-feature-4, .htb-partner-grid { grid-template-columns:1fr; }
    .htb-gem-block { flex-direction:column; align-items:flex-start; }
    .htb-trust__grid { grid-template-columns:1fr 1fr; }
    .htb-sticky-strip__inner { flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ==========================================
   ANIMATIONS & SCROLL EFFECTS
========================================== */

/* Hero fade-up (runs on load immediately) */
.htb-fade-up {
    opacity: 0;
    transform: translateY(24px);
    animation: htbFadeUp 0.65s var(--htb-ease) forwards;
}
@keyframes htbFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal base state */
.htb-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s var(--htb-ease), transform 0.55s var(--htb-ease);
}
.htb-reveal.htb-in {
    opacity: 1;
    transform: translateY(0);
}

/* Hero title word-by-word feel via letter-spacing animation */
.htb-hero__title.htb-fade-up {
    animation-duration: 0.75s;
}

/* Seg card active state (when its section is in view) */
.htb-seg-card--active {
    border-color: var(--htb-yellow);
    background: rgba(245,200,0,0.04);
}

/* GeM price pop-in */
.htb-gem-price {
    transition: transform 0.4s var(--htb-ease);
}
.htb-gem-price.htb-price-pop {
    animation: htbPricePop 0.5s var(--htb-ease) forwards;
}
@keyframes htbPricePop {
    0%   { transform: scale(0.92); opacity: 0.5; }
    60%  { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); }
}

/* Journey step number pulse on hover */
.htb-step:hover .htb-step__num {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(245,200,0,0.15);
    transition: transform 0.25s var(--htb-ease), box-shadow 0.25s var(--htb-ease);
}
.htb-step__num {
    transition: transform 0.25s var(--htb-ease), box-shadow 0.25s var(--htb-ease);
}

/* Trust cells count-up feel */
.htb-trust__num {
    display: inline-block;
    transition: transform 0.3s var(--htb-ease);
}
.htb-trust__cell.htb-in .htb-trust__num {
    animation: htbCountPop 0.5s var(--htb-ease) forwards;
}
@keyframes htbCountPop {
    0%   { transform: translateY(12px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Seg card hover — yellow accent bar at top */
.htb-seg-card {
    position: relative;
    overflow: hidden;
}
.htb-seg-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--htb-yellow);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.3s var(--htb-ease);
}
.htb-seg-card:hover::before,
.htb-seg-card--active::before {
    transform: scaleX(1);
}

/* Feature tile hover lift + yellow top bar */
.htb-feat-tile {
    position: relative; overflow: hidden;
}
.htb-feat-tile::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--htb-yellow);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.3s var(--htb-ease);
}
.htb-feat-tile:hover::before { transform: scaleX(1); }

/* Partner tile hover */
.htb-partner-tile {
    position: relative; overflow: hidden;
}
.htb-partner-tile::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--htb-yellow);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.3s var(--htb-ease);
}
.htb-partner-tile:hover::before { transform: scaleX(1); }

/* Next card hover */
.htb-next-card {
    position: relative; overflow: hidden;
}
.htb-next-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: var(--htb-yellow);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.3s var(--htb-ease);
}
.htb-next-card:hover::after { transform: scaleX(1); }

/* FAQ item hover */
.htb-faq-item {
    transition: padding-left 0.2s var(--htb-ease);
}
.htb-faq-item:hover {
    padding-left: 8px;
}
.htb-faq-item:hover .htb-faq-arrow {
    transform: translateX(4px);
    display: inline-block;
    transition: transform 0.2s var(--htb-ease);
}

/* Hero gradient animated background */
.htb-hero {
    background-size: 200% 200%;
    animation: htbHeroGrad 8s ease infinite;
}
@keyframes htbHeroGrad {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Seg number reveal with clip */
.htb-seg-num {
    overflow: hidden;
}
.htb-seg-header.htb-in .htb-seg-num {
    animation: htbNumSlide 0.6s var(--htb-ease) forwards;
}
@keyframes htbNumSlide {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* CTA banner button hover */
.htb-cta-banner .htb-btn--dark:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Section entrance line */
.htb-section--dark .htb-yellow-bar {
    animation: htbBarGrow 0.6s var(--htb-ease) forwards;
    transform-origin: left;
}
@keyframes htbBarGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Sticky strip pill separator animation */
.htb-sticky-strip__inner span {
    transition: color 0.2s ease;
}
.htb-sticky-strip__inner span:hover {
    color: rgba(255,255,255,0.9);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .htb-fade-up, .htb-reveal { animation: none; opacity: 1; transform: none; transition: none; }
}