/* The public pages' shared look (the home page, /pricing, /scan, /company): the type, the pill
   buttons, the navy hero, the boxes, the trust list, the scan form and its report, the FAQ, the
   closing band and the footer. On top of app.css (the tokens) and site.css (the header, the shared
   pieces and the motion); the home page adds home.css for its own parts (the phone demo, the call
   story, the bento, the trades band). Mobile first: the phone layout is the base, wider screens add.
   Only transform and opacity move; every typed or revealed area keeps its size, so nothing shifts.
   Motion only under .js (web/motion.js); .still is reduced motion: the final state, nothing moving. */
.home { --navy-deep: #070E22; --card-r: 18px; font-size: 17px; }
@media (min-width: 1024px) { .home { font-size: 18px; } }
.home .wrap { max-width: 1180px; padding: 0 16px; }
@media (min-width: 640px) { .home .wrap { padding: 0 24px; } }
@media (min-width: 1024px) { .home .wrap { padding: 0 32px; } }
.home main section { padding: 88px 0; position: relative; }
@media (min-width: 1024px) { .home main section { padding: 128px 0; } }
.home .icon { stroke-width: 1.75; }
.home main p { line-height: 1.6; }

/* type */
.home .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lime-deep); margin: 0; }
.home .eyebrow::before { content: ""; width: 16px; height: 2px; background: currentColor; flex: none; }
@media (prefers-color-scheme: dark) { .home .eyebrow { color: var(--lime); } }
.home .sec-head { max-width: 720px; margin-bottom: 40px; }
.home .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.home .sec-head h2 { margin-top: 14px; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: var(--text); }
.home .sec-head p { margin-top: 16px; color: var(--text-2); font-size: 1em; max-width: 58ch; }
.home .sec-head.center p { margin-left: auto; margin-right: auto; }
.home h3 { letter-spacing: -.02em; }

/* buttons */
.home .btn { min-height: 52px; border-radius: 999px; font-weight: 700; padding: 0 24px; gap: 10px; transition: transform .25s var(--ease-s), background-color .2s, border-color .2s; }
.home .btn.sm { min-height: 44px; padding: 0 18px; }
.home .btn.lg { min-height: 56px; }
.home .btn .icon { transition: transform .25s var(--ease-s); }
.home .btn:hover .icon { transform: translateX(3px); }
.home .btn.cta:hover { transform: translateY(-1px); }
.navy-btn { background: var(--navy) !important; color: var(--lime) !important; }
.navy-btn:hover { background: var(--navy-3) !important; }
.navy-line { background: transparent !important; color: var(--navy) !important; border: 2px solid var(--navy) !important; box-shadow: none !important; }
.navy-line:hover { background: rgba(11, 21, 48, .06) !important; }
.linkish { min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-weight: 800; color: var(--lime); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* --- hero ----------------------------------------------------------------------------------- */
.top-hero { position: relative; overflow: hidden; isolation: isolate; color: var(--on-navy); padding: 32px 0 72px !important;
  background: radial-gradient(120% 80% at 50% 0%, #12204A 0%, var(--navy) 55%, var(--navy-deep) 100%); }
@media (min-width: 1024px) { .top-hero { padding: 80px 0 112px !important; } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; } }
.hero-copy { container-type: inline-size; min-width: 0; }
.top-hero .eyebrow.dot { gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(198, 244, 50, .08); border: 1px solid rgba(198, 244, 50, .28); color: var(--lime); }
.top-hero .eyebrow.dot::before { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.hero-h1 { margin-top: 22px; font-size: clamp(2.5rem, 1.2rem + 6vw, 5.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; color: var(--on-navy); max-width: none; }
.hero-h1 .ln { display: block; }
.hero-h1 .rot { display: inline-block; white-space: nowrap; color: var(--lime); font-size: min(1em, 10cqi); transition: opacity .4s var(--ease-s), transform .4s var(--ease-s); }
.hero-h1 .rot.out { opacity: 0; transform: translate3d(0, -8px, 0); }
.hero-h1 .rot.pre { opacity: 0; transform: translate3d(0, 8px, 0); transition: none; }
.hero-h1 .hl { color: var(--lime); }
.uline { position: relative; display: inline-block; }
.uline::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .1em; border-radius: 99px; background: var(--lime); transform-origin: 0 50%; }
/* The first screen is never hidden: the headline, the lead and the paths paint at once (they are the
   largest paint) and only rise into place; below the first screen things fade in too (site.css). */
.js .top-hero .hero-h1 .ln { transform: translate3d(0, 18px, 0); transition: transform .8s var(--ease-s); transition-delay: calc(var(--i, 0) * 90ms + 60ms); }
.js :is(.top-hero, [data-hero]) [data-reveal] { opacity: 1; transform: translate3d(0, 14px, 0); }
.js :is(.top-hero, [data-hero]) [data-reveal="scale"] { transform: scale(.98); }
.js :is(.top-hero, [data-hero]) [data-reveal].in { transform: none; }
.js .top-hero.go .hero-h1 .ln { opacity: 1; transform: none; }
.js .uline::after { transform: scaleX(0); transition: transform .9s var(--ease-s) .7s; }
.js .top-hero.go .uline::after { transform: scaleX(1); }
.top-hero .lead { margin-top: 22px; max-width: 44ch; color: var(--on-navy-2); font-size: 1.08em; }
.paths { margin-top: 28px; display: grid; gap: 12px; max-width: 620px; }
.path { display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; gap: 14px; align-items: center; min-height: 76px; padding: 14px 18px 14px 14px;
  border-radius: var(--card-r); text-decoration: none; color: var(--on-navy); background: var(--navy-2); border: 1px solid var(--navy-line);
  transition: transform .3s var(--ease-s), border-color .3s, background-color .3s; }
.path:hover { transform: translateY(-2px); border-color: rgba(198, 244, 50, .55); }
.path .pi { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-3); color: var(--lime); }
.path b { display: block; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.3; }
.path small { display: block; margin-top: 2px; font-size: .86rem; font-weight: 600; color: var(--on-navy-2); line-height: 1.4; }
.path .arr { width: 22px; height: 22px; transition: transform .3s var(--ease-s); }
.path:hover .arr { transform: translateX(4px); }
.path.primary { background: var(--lime); color: var(--navy); border-color: var(--lime); }
.path.primary:hover { background: var(--lime-hover); border-color: var(--lime-hover); }
.path.primary .pi { background: var(--navy); color: var(--lime); }
.path.primary small { color: #2E3B12; }
/* the first path leads: a little bigger than the other two */
.path.primary { min-height: 88px; padding: 18px 20px 18px 16px; grid-template-columns: 52px minmax(0, 1fr) 24px; box-shadow: 0 14px 40px -18px rgba(198, 244, 50, .55); }
.path.primary .pi { width: 52px; height: 52px; border-radius: 14px; }
.path.primary b { font-size: 1.18rem; }
/* phones: the three paths fit in the first screen, above the cookie banner when it shows */
@media (max-width: 480px) {
  .top-hero { padding: 20px 0 56px !important; }
  .top-hero .eyebrow.dot { padding: 6px 12px; }
  .hero-h1 { margin-top: 14px; }
  .top-hero .lead { margin-top: 14px; }
  .paths { margin-top: 18px; gap: 8px; }
  .path { min-height: 64px; padding: 10px 14px 10px 10px; gap: 12px; grid-template-columns: 40px minmax(0, 1fr) 20px; }
  .path .pi { width: 40px; height: 40px; }
  .path.primary { min-height: 76px; padding: 14px 14px 14px 12px; grid-template-columns: 46px minmax(0, 1fr) 20px; }
  .path.primary .pi { width: 46px; height: 46px; }
  .path.primary b { font-size: 1.1rem; }
  /* the help chat's button waits for the cookie choice, so it never sits on a path */
  body.adc-on .hc-launch { display: none; }
}
.ticks { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--on-navy-2); font-size: .88rem; font-weight: 600; }
.ticks span { display: inline-flex; align-items: center; gap: 7px; }
.ticks .icon { width: 16px; height: 16px; color: var(--lime); stroke-width: 2.4; }


/* --- what it does --------------------------------------------------------------------------- */
.features-sec { background: var(--bg-2); }
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento .wide { grid-column: span 2; } }
@media (min-width: 1040px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.box { padding: 24px; border-radius: var(--card-r); background: var(--surface); border: 1px solid var(--line); transition: transform .35s var(--ease-s), box-shadow .35s; }
@media (min-width: 1024px) { .box { padding: 32px; } }
.box:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(11, 21, 48, .35); }
.box .bxi { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--navy); color: var(--lime); }
.box h3 { margin-top: 18px; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); font-weight: 700; line-height: 1.2; }
.box p { margin-top: 8px; color: var(--text-2); font-size: .96em; }
.box.navy { background: var(--navy); border-color: var(--navy); color: var(--on-navy); } .box.navy h3 { color: var(--on-navy); } .box.navy p { color: var(--on-navy-2); }
.box.navy .bxi { background: var(--lime); color: var(--navy); }
.box.lime { background: var(--lime); border-color: var(--lime); } .box.lime h3 { color: var(--navy); } .box.lime p { color: #2E3B12; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips span { font-size: .84rem; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--navy-line); color: var(--on-navy); }
.chips span:last-child { color: var(--on-navy-2); font-weight: 600; }
.sms-ex { margin-top: 14px !important; padding: 10px 12px; border-radius: 12px; background: var(--navy); color: var(--on-navy) !important; font-size: .86rem !important; max-width: 320px; }
.sms-ex b { color: #FF8A80; font-size: .72rem; letter-spacing: .1em; margin-right: 6px; }


/* --- trust ---------------------------------------------------------------------------------- */
.tlist { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
@media (min-width: 860px) { .tlist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; } }
.tl { padding: 28px 0; border-bottom: 1px solid var(--line); }
.tl .k { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tl h3 { margin-top: 8px; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); font-weight: 700; line-height: 1.25; }
.tl p { margin-top: 8px; color: var(--text-2); }
.co-bar { margin-top: 40px; display: grid; gap: 16px; padding: 24px; border-radius: var(--card-r); background: var(--navy); color: var(--on-navy); }
@media (min-width: 900px) { .co-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 32px; gap: 32px; } }
.co-bar p { color: var(--on-navy-2); font-size: .95em; } .co-bar b { color: var(--on-navy); }
.co-bar .btn { justify-self: start; }

/* --- scan my website (the home page's block, /scan and its report: scan_page.py) ----------- */
.scan-sec { background: var(--navy); color: var(--on-navy); overflow: hidden; }
.scan-sec .sec-head h2 { color: var(--on-navy); }
.scan-sec .sec-head p { color: var(--on-navy-2); }
.scan-sec .eyebrow, .scan-hero .eyebrow { color: var(--lime); }
.scan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 960px) { .scan-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; } .scan-grid .scan-card { position: sticky; top: 96px; } }
.scan-card { padding: 24px; border-radius: var(--card-r); background: var(--navy-2); border: 1px solid var(--navy-line); color: var(--on-navy); min-width: 0; }
@media (min-width: 1024px) { .scan-card { padding: 32px; } }
.scan-hero .scan-card { margin-top: 32px; max-width: 760px; }
.scan-card h3 { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem); font-weight: 700; color: var(--on-navy); }
.scan-card > p { margin-top: 8px; color: var(--on-navy-2); }
.scan-form { display: flex; flex-direction: column; gap: 8px; }
.scan-card h3 + .scan-form, .scan-card > p + .scan-form { margin-top: 20px; }
.scan-l { font-weight: 700; color: var(--on-navy); }
.scan-l.small { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--on-navy-2); }
.scan-row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 560px) { .scan-row { flex-direction: row; } .scan-row input { flex: 1; } }
.scan-form input { min-width: 0; min-height: 52px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--navy-line); background: var(--navy-deep); color: var(--on-navy); font: inherit; font-size: 17px; }
.scan-form input::placeholder { color: #8E97B0; }
.scan-form input:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; border-color: transparent; }
.scan-form .scan-calls { width: 8.5em; }
.scan-grid .scan-row { flex-direction: column; }
.scan-form .btn { flex: none; }
.scan-what { list-style: none; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--navy-line); display: grid; gap: 12px; }
.scan-what li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--on-navy); font-weight: 600; }
.scan-what .icon { color: var(--lime); margin-top: 3px; }
.scan-fine { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--on-navy-2); }
.scan-chips { list-style: none; padding: 0; }
.scan-chips li { font-size: .86rem; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.scan-systems { margin-top: 40px; padding: 24px; border-radius: var(--card-r); background: var(--surface); border: 1px solid var(--line); }
.scan-systems h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: 700; }
.scan-systems .fine { margin-top: 14px; font-size: 14px; color: var(--muted); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .checks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.checks .sn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--lime); font-weight: 800; }

/* the report: a white sheet in every section, so it reads the same on navy and on light */
.report { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px; border-radius: var(--card-r); background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(7, 14, 34, .55); min-width: 0; }
@media (min-width: 1024px) { .report { padding: 28px; gap: 16px; } }
@media (min-width: 760px) {
  .report { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-head, .report .qa, .report .fits, .scan-page .report .plan { grid-column: 1 / -1; }
  .rp-fits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
}
.rp-head { padding-bottom: 4px; }
.rp-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: var(--lime-soft); color: var(--lime-deep); }
.rp-chip.ex { background: var(--navy); color: var(--lime); }
.rp-title { margin-top: 12px; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--text); overflow-wrap: anywhere; }
.rp-type { margin-top: 8px; display: flex; gap: 8px; align-items: center; font-weight: 700; color: var(--text-2); font-size: 15px; }
.rp-sum { margin-top: 8px; color: var(--text-2); }
.rp-src { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rp-block { padding: 18px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); min-width: 0; }
.rp-block h3, .rp-block h4 { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.rp-block p { color: var(--text-2); font-size: 15px; }
.rp-block p + p { margin-top: 6px; }
.rp-fits, .rp-qa, .rp-sys { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rp-fits li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.rp-tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--navy); }
.rp-tick .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.rp-fits b, .rp-qa b { display: block; font-weight: 700; color: var(--text); line-height: 1.35; }
.rp-fits small, .rp-sys small, .rp-qa small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.rp-qa { counter-reset: q; }
@media (min-width: 760px) { .rp-qa { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rp-qa li { padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.rp-qa span { display: block; margin-top: 6px; font-size: 15px; color: var(--text-2); line-height: 1.45; }
.rp-qa small { margin-top: 8px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.rp-sys li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.rp-sys small { grid-column: 1 / -1; }
.rp-sys-n { font-weight: 700; }
.rp-st { font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.rp-st.ok { background: var(--lime); color: var(--navy); }
.rp-st.link { background: var(--bg-2); color: var(--text); border: 1px solid var(--line); }
.rp-st.no { background: transparent; color: var(--muted); border: 1px dashed var(--muted); }
.rp-none { font-size: 15px; }
.report .plan { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.report .plan h3, .report .plan h4 { color: var(--on-navy-2); }
.rp-plan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--on-navy) !important; }
.rp-plan b { width: 100%; font-size: 1.3rem; font-weight: 800; color: var(--lime); }
.rp-price { font-size: clamp(2.4rem, 1.9rem + 1.6vw, 3.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.rp-plan small { font-size: 1rem; color: var(--on-navy-2); font-weight: 600; }
.report .plan .rp-why, .report .plan .rp-trades { margin-top: 10px; color: var(--on-navy-2); font-size: 14px; }
.rp-trades a { color: var(--lime); font-weight: 700; }
.rp-ctas { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 480px) { .rp-ctas .btn { width: 100%; } }
.rp-error { padding: 24px; border-radius: var(--card-r); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid #C2410C; }
.rp-error h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; }
.rp-error p { margin: 10px 0 18px; color: var(--text-2); }
/* on the home page's phones: two blocks only (what fits, the plan) */
@media (max-width: 759px) { .scan-sec .report .qa, .scan-sec .report .sys, .scan-sec .report .lang { display: none; } }

/* /scan */
.scan-page .scan-hero { padding: 32px 0 64px !important; }
@media (min-width: 1024px) { .scan-page .scan-hero { padding: 64px 0 96px !important; } }
.scan-hero .crumbs ol { margin-bottom: 20px; }
.scan-h1 { max-width: 16ch; font-size: clamp(2.4rem, 1.2rem + 5vw, 4.6rem); }
.scan-h1 .ln { display: inline; }
.js .top-hero .scan-h1 .ln { display: inline-block; }
.scan-result-sec { background: var(--bg); padding-top: 56px !important; }
.scan-result-sec .wrap { position: relative; }
.scan-out { min-height: 360px; transition: opacity .4s var(--ease-s); }
.scan-out.busy { opacity: .25; }
.scan-progress { position: absolute; z-index: 2; top: 24px; left: 50%; width: min(420px, calc(100% - 32px)); transform: translateX(-50%); padding: 24px; border-radius: var(--card-r); background: var(--navy); color: var(--on-navy); box-shadow: 0 30px 60px -30px rgba(7, 14, 34, .7); }
.scan-progress ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.scan-progress li { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--on-navy-2); opacity: .45; transition: opacity .5s var(--ease-s), transform .5s var(--ease-s); transform: translate3d(0, 4px, 0); }
.scan-progress li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--on-navy-2); }
.scan-progress li.on { opacity: 1; transform: none; color: var(--on-navy); }
.scan-progress li.on::before { background: var(--lime); border-color: var(--lime); }
@media (prefers-reduced-motion: reduce) { .scan-progress li { transform: none; } }

/* --- FAQ ------------------------------------------------------------------------------------ */
.faq-sec { background: var(--bg-2); }
.home .faq { max-width: 820px; display: grid; gap: 12px; }
.home .faq details { border: 1px solid var(--line); border-radius: var(--card-r); background: var(--surface); padding: 0 20px; }
.home .faq summary { min-height: 64px; padding: 18px 0; }
.home .faq summary .icon { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--navy); color: var(--lime); stroke-width: 2.6; box-sizing: border-box; }
.home .faq details p { padding: 0 0 20px; }

/* --- the last call to action ---------------------------------------------------------------- */
.closing { overflow: hidden; text-align: center; color: var(--on-navy); background: radial-gradient(80% 90% at 50% 100%, #1B2A57, var(--navy) 60%); }
.closing h2 { margin: 0 auto; max-width: 14ch; font-size: clamp(2.4rem, 1.3rem + 5.4vw, 5.2rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--on-navy); }
.closing p { margin: 20px auto 0; max-width: 46ch; color: var(--on-navy-2); }
.closing .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
@media (max-width: 480px) { .closing .ctas .btn { width: 100%; } }
.closing .wrap { position: relative; }
.rings { position: absolute; left: 50%; bottom: -380px; width: 760px; height: 760px; margin-left: -380px; pointer-events: none; }
.rings i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(198, 244, 50, .18); }
.rings i:nth-child(2) { inset: 90px; border-color: rgba(198, 244, 50, .14); } .rings i:nth-child(3) { inset: 180px; border-color: rgba(198, 244, 50, .1); }
.js .rings i { animation: breathe 8s ease-in-out infinite alternate; } .js .rings i:nth-child(2) { animation-delay: -2.6s; } .js .rings i:nth-child(3) { animation-delay: -5.2s; }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.06); } }

/* --- footer --------------------------------------------------------------------------------- */
.home footer.site-foot { background: var(--navy-deep); color: var(--on-navy-2); border-top: 0; padding: 56px 0 32px; font-size: .92rem; }
.home footer .fcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; justify-content: stretch; align-items: start; }
@media (min-width: 900px) { .home footer .fcols { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.home footer .fbrand { grid-column: 1 / -1; } @media (min-width: 900px) { .home footer .fbrand { grid-column: auto; } }
.home footer .fbrand p { margin-top: 12px; max-width: 34ch; }
.home footer .brand { color: var(--on-navy); padding: 0; }
.home footer .fcol { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.home footer .lang-foot { justify-content: flex-start; gap: 0 20px; }
.home footer .adc-settings { min-height: 44px; padding: 0; }
.home footer h4 { margin: 0 0 6px; color: var(--on-navy); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.home footer a { color: var(--on-navy-2); padding: 10px 0; min-height: 44px; box-sizing: border-box; }
.home footer a:hover { color: var(--lime); }
.home footer .foot-legal { display: block; margin-top: 32px; }
.home footer .foot-legal p { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: var(--on-navy-2); }
.home footer .lang-foot { margin-top: 12px; }

/* --- reduced motion: the final state, nothing moving ---------------------------------------- */
.still .top-hero .hero-h1 .ln, .still .phone .msg, .still .phone .booked, .still .story .at { opacity: 1 !important; transform: none !important; transition: none !important; }
.still .uline::after { transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .home *, .home *::before, .home *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
  .js .top-hero .hero-h1 .ln, .js .phone.armed .msg, .js .phone.armed .booked, .js .story.armed .at, .js .uline::after { opacity: 1 !important; transform: none !important; }
  .box:hover, .biz:hover, .path:hover { transform: none; }
}