/* ==========================================================================
   Homepage v3. Scoped to .h3 so nothing leaks into the header, footer or
   other templates. Light only, like the rest of the public theme.
   Order follows the Jev-scored plan: hero, works-with, shift, how it works,
   free checks, Pro, pricing, FAQ, final CTA.
   ========================================================================== */

.h3 {
    --h3-ink: #0f172a;
    --h3-ink2: #1e293b;
    --h3-muted: #5b6477;
    --h3-dim: #8a94a8;
    --h3-line: #e3e8f1;
    --h3-soft: #f5f7fb;
    --h3-blue: #0062ff;
    --h3-blue2: #338dff;
    --h3-blue-soft: #eef4ff;
    --h3-green: #0f8a5f;
    --h3-green-soft: #e8f8f1;
    --h3-draw: #f4511e;
    --h3-draw-dark: #d63c0f;
    --h3-radius: 18px;
    --h3-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
    --h3-shadow-lg: 0 2px 4px rgba(15, 23, 42, .04), 0 30px 60px -24px rgba(15, 23, 42, .22);
    color: var(--h3-ink);
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    overflow-x: clip;
}
.h3 *, .h3 *::before, .h3 *::after { box-sizing: border-box; }
/* Zero-specificity resets, so every class below can set its own margins. */
:where(.h3) p { margin: 0; }
:where(.h3) a { text-decoration: none; }

.h3-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}
.h3-section { padding: 104px 0; position: relative; }
.h3-section--soft { background: var(--h3-soft); }

.h3-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 700 12px/1 'DM Sans', system-ui, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--h3-blue);
    margin: 0 0 16px;
}
.h3-h2 {
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--h3-ink);
    margin: 0 0 16px;
}
.h3-lead {
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.65;
    color: var(--h3-muted);
    max-width: 640px;
}
.h3-head { text-align: center; margin: 0 auto 56px; max-width: 760px; }
.h3-head .h3-lead { margin: 0 auto; }

/* ---------- Buttons: exactly one draw (orange) button per view ---------- */
.h3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 14px;
    font: 700 16px/1.2 'DM Sans', system-ui, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    border: 0;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.h3-btn svg { width: 18px; height: 18px; flex: none; }
.h3-btn:hover { transform: translateY(-1px); }
.h3-btn:active { transform: translateY(0) scale(.98); }
.h3-btn:focus-visible { outline: 3px solid rgba(0, 98, 255, .35); outline-offset: 3px; }
.h3-btn--draw {
    color: #fff;
    background: linear-gradient(135deg, #ff6a3d, var(--h3-draw) 55%, var(--h3-draw-dark));
    box-shadow: 0 1px 2px rgba(214, 60, 15, .25), 0 12px 28px -10px rgba(244, 81, 30, .6);
}
.h3-btn--draw:hover { color: #fff; box-shadow: 0 1px 2px rgba(214, 60, 15, .25), 0 16px 34px -10px rgba(244, 81, 30, .7); }
.h3-btn--big { min-height: 60px; padding: 0 32px; font-size: 17px; border-radius: 16px; }
.h3-btn--quiet {
    color: var(--h3-ink);
    background: #fff;
    border: 1px solid var(--h3-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.h3-btn--quiet:hover { color: var(--h3-blue); border-color: rgba(0, 98, 255, .35); }
.h3-btn--blue {
    color: #fff;
    background: linear-gradient(135deg, var(--h3-blue2), var(--h3-blue));
    box-shadow: 0 10px 24px -12px rgba(0, 98, 255, .6);
}
.h3-btn--blue:hover { color: #fff; }
.h3-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--h3-blue);
}
.h3-link svg { width: 16px; height: 16px; transition: transform .2s ease; }
.h3-link:hover svg { transform: translateX(3px); }

/* ---------- Hero ---------- */
.h3-hero {
    position: relative;
    padding: 0;
    background:
        radial-gradient(60% 50% at 88% 6%, rgba(51, 141, 255, .16), transparent 70%),
        radial-gradient(45% 40% at 6% 30%, rgba(16, 185, 129, .10), transparent 70%),
        linear-gradient(#fff, #fff);
    isolation: isolate;
}
.h3-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(15, 23, 42, .07) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 75%);
    mask-image: radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 75%);
}
.h3-hero__top { position: relative; padding: 128px 0 8px; }
.h3-hero__copy { position: relative; z-index: 2; text-align: center; max-width: 900px; margin: 0 auto; }
/* Soft white veil behind the copy so a logo drifting near it never hurts legibility. */
.h3-hero__copy::before {
    content: "";
    position: absolute;
    inset: -48px -10% -28px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .8) 42%, rgba(255, 255, 255, 0) 76%);
}

/* ---------- Floating AI logos ----------
   Three layers per logo so nothing fights: .h3-orb takes the mouse and scroll
   transform from JS, .h3-orb__float runs the idle CSS drift, .h3-orb__card is
   the white tile that lifts when the cursor comes near. */
.h3-orbit { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.h3-orb { position: absolute; width: 84px; height: 84px; will-change: transform; }
.h3-orb__float { display: block; width: 100%; height: 100%; animation: h3-drift-a 14s ease-in-out infinite; }
.h3-orb__card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20%;
    border-radius: 24%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 48px -18px rgba(15, 23, 42, .22), 0 8px 18px -10px rgba(15, 23, 42, .12), 0 0 0 1px rgba(15, 23, 42, .06);
    transform: scale(var(--near-scale, 1));
    transition: box-shadow .35s ease;
}
.h3-orb__card img { width: 100%; height: 100%; object-fit: contain; display: block; opacity: var(--near-op, .6); transition: opacity .25s ease; }
.h3-orb.is-near .h3-orb__card { box-shadow: 0 30px 60px -18px rgba(0, 98, 255, .35), 0 10px 22px -10px rgba(15, 23, 42, .16), 0 0 0 1px rgba(0, 98, 255, .18); }
@keyframes h3-bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } }
@keyframes h3-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 25% { transform: translate3d(14px, -18px, 0) rotate(6deg); } 50% { transform: translate3d(-10px, 12px, 0) rotate(-4deg); } 75% { transform: translate3d(16px, 8px, 0) rotate(3deg); } }
@keyframes h3-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 33% { transform: translate3d(-16px, 18px, 0) rotate(-7deg); } 66% { transform: translate3d(18px, -12px, 0) rotate(5deg); } }
@keyframes h3-drift-c { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 30% { transform: translate3d(12px, 16px, 0) rotate(5deg) scale(1.05); } 65% { transform: translate3d(-16px, -10px, 0) rotate(-6deg) scale(.96); } }
/* Positions keep clear of the headline, sub and audit box in the middle. */
.h3-orb--1  { top: 16%; left: 6%;   width: 96px;  height: 96px; }
.h3-orb--2  { top: 38%; left: 15%;  width: 78px;  height: 78px; }
.h3-orb--3  { top: 12%; left: 22%;  width: 64px;  height: 64px; }
.h3-orb--4  { top: 14%; right: 21%; width: 80px;  height: 80px; }
.h3-orb--5  { top: 12%; right: 6%;  width: 100px; height: 100px; }
.h3-orb--6  { top: 38%; right: 4%;  width: 76px;  height: 76px; }
.h3-orb--7  { top: 58%; left: 3%;   width: 88px;  height: 88px; }
.h3-orb--8  { top: 60%; right: 13%; width: 82px;  height: 82px; }
.h3-orb--9  { top: 80%; left: 11%;  width: 72px;  height: 72px; }
.h3-orb--10 { top: 88%; left: 22%;  width: 60px;  height: 60px; }
.h3-orb--11 { top: 86%; right: 18%; width: 62px;  height: 62px; }
.h3-orb--12 { top: 66%; left: 17%;  width: 64px;  height: 64px; }
.h3-orb--13 { top: 80%; right: 5%;  width: 90px;  height: 90px; }
.h3-orb--14 { top: 36%; right: 16%; width: 56px;  height: 56px; }
.h3-orb:nth-child(3n+2) .h3-orb__float { animation-name: h3-drift-b; animation-duration: 16s; }
.h3-orb:nth-child(3n) .h3-orb__float { animation-name: h3-drift-c; animation-duration: 13s; }
.h3-orb:nth-child(2) .h3-orb__float { animation-delay: -3s; } .h3-orb:nth-child(4) .h3-orb__float { animation-delay: -5s; }
.h3-orb:nth-child(6) .h3-orb__float { animation-delay: -2s; } .h3-orb:nth-child(8) .h3-orb__float { animation-delay: -7s; }
.h3-orb:nth-child(10) .h3-orb__float { animation-delay: -4s; } .h3-orb:nth-child(12) .h3-orb__float { animation-delay: -6s; }
.h3-orb:nth-child(14) .h3-orb__float { animation-delay: -1.5s; } .h3-orb:nth-child(5) .h3-orb__float { animation-delay: -8s; }
.h3-orb--14 .h3-orb__card img { opacity: calc(var(--near-op, .6) * .75); }
@media (max-width: 1100px) {
    .h3-orb { transform-origin: center; }
    .h3-orb__card { padding: 22%; }
    .h3-orb--1, .h3-orb--5, .h3-orb--13 { width: 76px; height: 76px; }
    .h3-orb--3, .h3-orb--14, .h3-orb--12, .h3-orb--9, .h3-orb--11 { display: none; }
    .h3-orb--2 { left: 5%; top: 40%; } .h3-orb--4 { right: 6%; top: 30%; } .h3-orb--6 { display: none; }
    .h3-orb--10 { left: 4%; top: 84%; }
}
.h3-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 7px 14px 7px 8px;
    border: 1px solid var(--h3-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    font: 600 13px/1.2 'DM Sans', system-ui, sans-serif;
    letter-spacing: 0;
    color: var(--h3-muted);
}
.h3-tag b {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--h3-blue-soft);
    color: var(--h3-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.h3-display {
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(38px, 6.2vw, 74px);
    line-height: 1.02;
    letter-spacing: -.03em;
    color: var(--h3-ink);
    margin: 0 auto 22px;
    max-width: 19ch;
    text-wrap: balance;
}
.h3-display em {
    font-style: normal;
    background: linear-gradient(100deg, var(--h3-blue) 10%, #3aa0ff 60%, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.h3-sub {
    font-size: clamp(17px, 1.7vw, 20px);
    line-height: 1.6;
    color: var(--h3-muted);
    max-width: 640px;
    margin: 0 auto 34px;
    text-wrap: pretty;
}
.h3-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.h3-cta__note {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    font-size: 14px;
    color: var(--h3-muted);
}
.h3-cta__note span { display: inline-flex; align-items: center; gap: 6px; }
.h3-cta__note svg { width: 15px; height: 15px; color: var(--h3-green); flex: none; }

.h3-audit {
    max-width: 620px;
    margin: 30px auto 0;
    padding: 18px;
    border: 1px solid var(--h3-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--h3-shadow);
    text-align: left;
}
.h3-audit__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--h3-ink2);
}
.h3-audit__label svg { width: 16px; height: 16px; color: var(--h3-blue); flex: none; }
.h3-audit__label small { font-weight: 500; color: var(--h3-dim); font-size: 13px; }
.h3-audit form { display: flex; gap: 10px; }
.h3-audit input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--h3-line);
    border-radius: 14px;
    background: #fff;
    font: 500 16px 'DM Sans', system-ui, sans-serif;
    color: var(--h3-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.h3-audit input[type="text"]::placeholder { color: var(--h3-dim); }
.h3-audit input[type="text"]:focus { outline: none; border-color: var(--h3-blue); box-shadow: 0 0 0 4px rgba(0, 98, 255, .12); }

.h3-stage {
    position: relative;
    max-width: 1080px;
    margin: 64px auto 0;
    padding-bottom: 88px;
}
.h3-stage__cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
    margin: 0 4px 14px;
    font-size: 14px;
    color: var(--h3-muted);
}
.h3-stage__cap strong { color: var(--h3-ink); font-weight: 700; }
.h3-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--h3-line);
    font-size: 13px;
    font-weight: 600;
    color: var(--h3-ink2);
}
.h3-pill i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .15);
    display: block;
}

/* ---------- Works with ---------- */
.h3-works { padding: 44px 0; border-top: 1px solid var(--h3-line); border-bottom: 1px solid var(--h3-line); background: #fff; }
.h3-works__row { display: flex; align-items: center; justify-content: center; gap: 18px 40px; flex-wrap: wrap; }
.h3-works__label { font-size: 14px; font-weight: 600; color: var(--h3-muted); }
.h3-works__logos { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.h3-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--h3-line);
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--h3-ink2);
}
.h3-chip img, .h3-chip .h3-mono { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; flex: none; }
.h3-mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 800 12px 'Barlow', system-ui, sans-serif;
    color: #fff;
    background: linear-gradient(135deg, #7b5cff, #4c2bd9);
}

/* ---------- The shift (dark band) ---------- */
.h3-shift {
    background-color: #0a0d16;
    background-image:
        radial-gradient(70% 90% at 90% 0%, rgba(40, 78, 200, .38), transparent 60%),
        radial-gradient(50% 70% at 0% 100%, rgba(16, 185, 129, .16), transparent 60%);
    color: #fff;
}
.h3-shift .h3-eyebrow { color: #8fb4ff; }
.h3-shift .h3-h2 { color: #fff; }
.h3-shift .h3-lead { color: rgba(255, 255, 255, .7); }
.h3-shift__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr;
    gap: 24px;
    align-items: center;
}
.h3-shift__intro { align-self: center; padding-right: 12px; }
.h3-stat {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 30px 28px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
}
.h3-stat__num {
    font-family: 'Barlow', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(48px, 5.5vw, 68px);
    line-height: 1;
    letter-spacing: -.03em;
    background: linear-gradient(120deg, #fff, #9cc2ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0 0 14px;
}
.h3-stat__txt { font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .9); margin: 0 0 16px; }
.h3-stat__src { margin-top: auto; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .5); }

/* ---------- How it works ---------- */
.h3-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    counter-reset: h3step;
    position: relative;
}
.h3-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 28px 28px;
    border: 1px solid var(--h3-line);
    border-radius: var(--h3-radius);
    background: #fff;
    box-shadow: var(--h3-shadow);
}
.h3-step__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    margin: 0 0 20px;
    font: 800 18px 'Barlow', system-ui, sans-serif;
    color: var(--h3-blue);
    background: var(--h3-blue-soft);
}
.h3-step h3 {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 0 0 10px;
    color: var(--h3-ink);
}
.h3-step p { font-size: 16px; line-height: 1.6; color: var(--h3-muted); margin-bottom: 20px; }
.h3-step__tag {
    display: inline-flex;
    margin-top: auto;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}
.h3-step__tag--free { color: var(--h3-green); background: var(--h3-green-soft); }
.h3-step__tag--pro { color: #6d3df5; background: #f1ecff; }

/* ---------- Free checks ---------- */
.h3-checks {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
}
.h3-check {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid var(--h3-line);
    border-radius: var(--h3-radius);
    background: #fff;
    box-shadow: var(--h3-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.h3-check:hover { transform: translateY(-3px); box-shadow: var(--h3-shadow-lg); border-color: #d3dcea; }
.h3-check:nth-child(4), .h3-check:nth-child(5) { grid-column: span 3; }
.h3-check__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 18px;
    color: var(--h3-blue);
    background: var(--h3-blue-soft);
}
.h3-check__icon svg { width: 22px; height: 22px; }
.h3-check h3 {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 8px;
    color: var(--h3-ink);
}
.h3-check p { font-size: 15.5px; line-height: 1.6; color: var(--h3-muted); }
.h3-check__q {
    margin-top: auto;
    padding-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--h3-ink2);
}
.h3-check__q span { color: var(--h3-dim); font-weight: 500; }
.h3-also {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 30px auto 0;
    font-size: 14.5px;
    color: var(--h3-muted);
}
.h3-also b { color: var(--h3-ink2); }
.h3-also span {
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--h3-line);
}

/* ---------- Pro ---------- */
.h3-pro__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.h3-group {
    padding: 26px 24px;
    border: 1px solid var(--h3-line);
    border-radius: var(--h3-radius);
    background: #fff;
    box-shadow: var(--h3-shadow);
}
.h3-group__head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.h3-group__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6d3df5;
    background: #f1ecff;
    flex: none;
}
.h3-group__icon svg { width: 20px; height: 20px; }
.h3-group h3 {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 21px;
    font-weight: 800;
    margin: 0;
    color: var(--h3-ink);
}
.h3-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.h3-group li {
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--h3-muted);
}
.h3-group li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: linear-gradient(135deg, #8f6bff, #6d3df5);
}
.h3-group li strong { color: var(--h3-ink2); font-weight: 700; }
.h3-pro__more { margin: 22px 0 0; text-align: center; font-size: 15px; color: var(--h3-muted); }

.h3-show { margin-top: 64px; }
.h3-tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 22px;
    padding: 5px;
    border: 1px solid var(--h3-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.h3-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 18px;
    border-radius: 10px;
    font: 700 14.5px/1.2 'DM Sans', system-ui, sans-serif;
    color: var(--h3-muted);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
    white-space: nowrap;
}
.h3-tab:hover { color: var(--h3-ink); }
.h3-tab[aria-selected="true"] { background: var(--h3-ink); color: #fff; }
.h3-tab:focus-visible { outline: 3px solid rgba(0, 98, 255, .35); outline-offset: 2px; }
.h3-panes { display: grid; max-width: 1080px; margin: 0 auto; }
.h3-pane { grid-area: 1 / 1; min-width: 0; transition: opacity .35s ease, visibility .35s; }
.h3-pane[hidden] { display: block; visibility: hidden; opacity: 0; pointer-events: none; }

/* ---------- Pricing ---------- */
.h3-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    max-width: 1080px;
    margin: 0 auto;
}
.h3-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
    border: 1px solid var(--h3-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--h3-shadow);
}
.h3-plan--pop { border: 2px solid var(--h3-blue); box-shadow: 0 24px 50px -24px rgba(0, 98, 255, .35); }
.h3-plan__badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--h3-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.h3-plan h3 {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--h3-ink);
}
.h3-plan__for { font-size: 15px; line-height: 1.5; color: var(--h3-muted); min-height: 45px; }
.h3-price { display: flex; align-items: baseline; gap: 4px; margin: 20px 0 4px; }
.h3-price b {
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--h3-ink);
}
.h3-price span { font-size: 16px; color: var(--h3-muted); font-weight: 600; }
.h3-plan__bill { font-size: 13.5px; color: var(--h3-dim); margin: 0 0 22px; min-height: 20px; }
.h3-plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.h3-plan li {
    position: relative;
    padding-left: 28px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--h3-ink2);
}
.h3-plan li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--h3-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8a5f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.h3-plan li small { display: block; color: var(--h3-dim); font-size: 13px; }
.h3-plan .h3-btn { width: 100%; margin-top: auto; }
.h3-plans__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 30px 0 0;
    font-size: 15px;
    color: var(--h3-muted);
}

/* ---------- FAQ ---------- */
.h3-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.h3-faq details {
    border: 1px solid var(--h3-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.h3-faq details[open] { border-color: #cfd9ea; box-shadow: var(--h3-shadow); }
.h3-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
    font: 700 17px/1.4 'DM Sans', system-ui, sans-serif;
    color: var(--h3-ink);
}
.h3-faq summary::-webkit-details-marker { display: none; }
.h3-faq summary::after {
    content: "";
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--h3-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
    transition: transform .25s ease;
}
.h3-faq details[open] summary::after { transform: rotate(180deg); }
.h3-faq summary:focus-visible { outline: 3px solid rgba(0, 98, 255, .35); outline-offset: -3px; border-radius: 16px; }
.h3-faq__a { padding: 0 22px 22px; font-size: 16px; line-height: 1.7; color: var(--h3-muted); }
.h3-faq__a p + p { margin-top: 10px; }

/* ---------- Final CTA ---------- */
.h3-final {
    padding: 0 0 104px;
}
.h3-final__card {
    position: relative;
    overflow: hidden;
    padding: 72px 32px;
    border-radius: 28px;
    text-align: center;
    color: #fff;
    background-color: #0a0d16;
    background-image:
        radial-gradient(60% 80% at 85% 0%, rgba(51, 141, 255, .42), transparent 60%),
        radial-gradient(50% 70% at 10% 100%, rgba(16, 185, 129, .22), transparent 60%);
}
.h3-final__card .h3-h2 { color: #fff; max-width: 17ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.h3-final__card .h3-lead { color: rgba(255, 255, 255, .72); margin: 0 auto 32px; }
.h3-final__card .h3-cta__note { color: rgba(255, 255, 255, .65); }
.h3-final__card .h3-cta__note svg { color: #34d399; }
.h3-final__agency { margin-top: 26px; font-size: 14.5px; color: rgba(255, 255, 255, .6); }
.h3-final__agency a { color: #9cc2ff; font-weight: 700; }
.h3-final__agency a:hover { color: #fff; }

/* ---------- Reveal on scroll (content is visible without JS) ---------- */
.h3-js .h3-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.h3-js .h3-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .h3-orb__float { animation: none; }
    .h3-js .h3-rv { opacity: 1; transform: none; transition: none; }
    .h3 *, .h3 *::before, .h3 *::after { transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .h3-pro__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h3-shift__grid { grid-template-columns: 1fr 1fr; }
    .h3-shift__intro { grid-column: 1 / -1; padding-right: 0; text-align: center; }
    .h3-shift__intro .h3-lead { margin: 0 auto; }
}
@media (max-width: 900px) {
    .h3-section { padding: 80px 0; }
    .h3-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h3-check, .h3-check:nth-child(4), .h3-check:nth-child(5) { grid-column: auto; }
    .h3-check:nth-child(5) { grid-column: 1 / -1; }
    .h3-steps { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
    .h3-plans { grid-template-columns: 1fr; max-width: 520px; }
    .h3-plan__for { min-height: 0; }
    .h3-plan--pop { margin-top: 10px; }
}
@media (max-width: 640px) {
    .h3-wrap { padding: 0 16px; }
    .h3-section { padding: 64px 0; }
    .h3-head { margin-bottom: 36px; }
    .h3-hero__top { padding-top: 150px; }
    /* Phones: six small logos in a gentle arc above the label, clear of every line of copy. */
    .h3-orb { width: 44px; height: 44px; display: none; }
    .h3-orb__card { border-radius: 13px; padding: 10px; }
    .h3-orbit .h3-orb .h3-orb__float { animation-name: h3-bob !important; animation-duration: 6s !important; }
    .h3-orbit .h3-orb:nth-child(2n) .h3-orb__float { animation-duration: 7.5s !important; }
    .h3-orb--1, .h3-orb--2, .h3-orb--3, .h3-orb--4, .h3-orb--5, .h3-orb--13 { display: block; width: 44px; height: 44px; bottom: auto; right: auto; }
    .h3-orb--1  { top: 94px; left: calc(50% - 170px); }
    .h3-orb--2  { top: 80px; left: calc(50% - 111px); }
    .h3-orb--3  { top: 72px; left: calc(50% - 52px); }
    .h3-orb--4  { top: 72px; left: calc(50% + 8px); }
    .h3-orb--5  { top: 80px; left: calc(50% + 67px); }
    .h3-orb--13 { top: 94px; left: calc(50% + 126px); }
    .h3-orb__card img { opacity: calc(var(--near-op, .6) * .8); }
    .h3-audit__label { flex-wrap: wrap; }
    .h3-audit__label small { flex-basis: 100%; margin-left: 24px; }
    .h3-stat { min-height: 0; }
    .h3-stat__num { margin-bottom: 10px; }
    .h3-stat__src { margin-top: 12px; }
    .h3-tag { font-size: 12px; padding: 6px 12px 6px 6px; margin-bottom: 18px; }
    .h3-sub { margin-bottom: 26px; }
    .h3-cta .h3-btn { width: 100%; }
    .h3-cta__note { gap: 6px 14px; font-size: 13px; }
    .h3-audit { padding: 14px; border-radius: 18px; margin-top: 24px; }
    .h3-audit form { flex-direction: column; }
    .h3-audit input[type="text"] { flex: none; width: 100%; }
    .h3-audit .h3-btn { width: 100%; }
    .h3-stage { margin-top: 44px; padding-bottom: 56px; }
    .h3-works { padding: 32px 0; }
    .h3-works__row { gap: 14px; }
    .h3-chip { font-size: 13px; padding: 6px 12px 6px 6px; }
    .h3-chip img, .h3-chip .h3-mono { width: 24px; height: 24px; }
    .h3-shift__grid { grid-template-columns: 1fr; gap: 16px; }
    .h3-stat { padding: 24px 22px; }
    .h3-checks { grid-template-columns: 1fr; gap: 14px; }
    .h3-check:nth-child(5) { grid-column: auto; }
    .h3-check { padding: 22px; }
    .h3-pro__grid { grid-template-columns: 1fr; gap: 14px; }
    .h3-show { margin-top: 44px; }
    .h3-tabs { width: 100%; }
    .h3-tab { flex: 1; padding: 10px 8px; font-size: 13.5px; }
    .h3-plan { padding: 26px 22px; }
    .h3-faq summary { padding: 18px; font-size: 16px; }
    .h3-faq__a { padding: 0 18px 18px; font-size: 15.5px; }
    .h3-final { padding-bottom: 64px; }
    .h3-final__card { padding: 52px 20px; border-radius: 22px; }
    .h3-final__card .h3-btn { width: 100%; }
}