/* Tik4 landing layer — services hub, six service landings, about and contact.
 * Built on the design-system tokens (--t4-blue, --t4-teal, --t4-ink, --t4-paper …).
 */

/* Dark mode: header and drawer wordmark read in white. */
[data-theme="dark"] .t4-header .t4-brand-mark,
[data-theme="dark"] .t4-mobile-panel .t4-brand-mark,
[data-theme="dark"] .t4-header .t4-brand div > span,
[data-theme="dark"] .t4-mobile-panel .t4-brand :is(strong, div > span) { color: #fff; }
[data-theme="dark"] :is(.t4-header, .t4-mobile-panel) .t4-custom-logo { filter: brightness(0) invert(1); }

.t4-lx {
  --lx-band: color-mix(in srgb, var(--t4-blue) 5%, var(--t4-paper));
  --lx-night: #0d2430;
  --lx-grad: linear-gradient(100deg, var(--t4-teal), var(--t4-blue));
  --lx-r: 28px;
  --lx-lift: 0 26px 50px -30px rgb(16 46 60 / 38%);
  --lx-sticky: calc(var(--lx-header-h, 92px) + 24px);
}
.t4-svc-page { --lx-sticky: calc(var(--lx-header-h, 92px) + var(--lx-dock-h, 72px) + 20px); }
html:has(body.t4-svc-page) { scroll-padding-top: calc(var(--lx-header-h, 92px) + var(--lx-dock-h, 72px) + 16px); }
[data-theme="dark"] .t4-lx {
  --lx-band: color-mix(in srgb, var(--t4-blue) 8%, var(--t4-paper));
  --lx-night: #0a1b24;
  --lx-lift: 0 26px 50px -30px rgb(0 0 0 / 70%);
}
.t4-lx .t4-main { padding-bottom: 0; }

/* Shared atoms */
.lx-band { background: var(--lx-band); box-shadow: 0 0 0 100vmax var(--lx-band); clip-path: inset(0 -100vmax); }
.lx-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--t4-blue); font-size: 12.5px; font-weight: 750; line-height: 1.6; }
.lx-kicker::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .35; }
.lx-kicker-num { display: grid; place-items: center; min-width: 32px; height: 28px; padding-inline: 6px; border-radius: 9px; background: var(--t4-blue-soft); font-size: 11.5px; letter-spacing: .04em; }
.is-center .lx-kicker { justify-content: center; }
.t4-lx .lx-head { max-width: none; margin: 0; padding: 0; text-align: start; }
.t4-lx .lx-head.is-center { text-align: center; margin-inline: auto; }
.t4-lx .lx-head h2 { max-width: 19em; margin: 0; color: var(--t4-ink); font-size: clamp(26px, 3vw, 42px); font-weight: 850; line-height: 1.5; letter-spacing: -.028em; text-wrap: balance; }
.t4-lx .lx-head.is-center h2 { margin-inline: auto; }
.lx-head-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; gap: 18px 56px; margin-bottom: clamp(28px, 4vw, 52px); }
.lx-head-row > .lx-head.is-center { grid-column: 1 / -1; }
.lx-intro { max-width: 34em; margin: 0; color: var(--t4-muted); font-size: 14.5px; line-height: 2.1; }
.lx-tick { position: relative; flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: color-mix(in srgb, var(--t4-teal) 16%, transparent); }
.lx-tick::after { content: ""; position: absolute; inset: 0; margin: auto; width: 5px; height: 9px; border: solid var(--t4-teal-text, var(--t4-teal)); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.lx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.lx-tags li { padding: 3px 11px; border-radius: 99px; background: var(--t4-soft); color: var(--t4-muted); font-size: 11.5px; }
.lx-btn-main { gap: 10px; min-height: 54px; padding-inline: 26px; border-radius: 16px; font-size: 14px; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--t4-blue) 75%, transparent); }
.lx-btn-main > span[class*="icon-"] { font-size: 19px; }
.lx-btn-quiet { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; border: 0; border-bottom: 1.5px solid color-mix(in srgb, var(--t4-ink) 22%, transparent); background: none; color: var(--t4-ink); font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; transition: color .25s, border-color .25s; }
.lx-btn-quiet > span[class*="icon-"] { font-size: 18px; color: var(--t4-blue); }
.lx-btn-quiet:hover { color: var(--t4-blue); border-color: var(--t4-blue); }
.lx-section { position: relative; }
.t4-lx :is(.t4-main, .t4-lx-page) > section.lx-section,
.t4-svc-page .t4-main > section.t4-reveal { padding-block: clamp(56px, 7vw, 108px); border-top: 0; }
.t4-svc-page .t4-main > section.t4-reveal + section.lx-cta { padding-top: clamp(24px, 3vw, 40px); }

/* Service hero */
.t4-lx .lx-hero { padding-block: clamp(18px, 3vw, 40px) clamp(40px, 5vw, 72px); overflow: visible; }
.lx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lx-crumbs { margin-bottom: 18px; color: var(--t4-muted); font-size: 11.5px; }
.lx-crumbs a:hover { color: var(--t4-blue); }
.lx-crumbs p { margin: 0; }
.lx-hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 14px 6px 14px; border: 1px solid var(--t4-line); border-radius: 99px; background: var(--t4-surface); color: var(--t4-ink); font-size: 12.5px; font-weight: 700; }
.lx-hero-eyebrow > span[class*="icon-"] { font-size: 17px; color: var(--t4-blue); margin-inline-start: 8px; }
.lx-hero-count { padding: 3px 10px; border-radius: 99px; background: var(--t4-blue-soft); color: var(--t4-blue); font-size: 11px; letter-spacing: .06em; }
.t4-lx .lx-hero h1 { margin: 0; color: var(--t4-ink); font-size: clamp(34px, 4.3vw, 62px); font-weight: 900; line-height: 1.42; letter-spacing: -.035em; text-wrap: balance; }
.lx-hero h1 em, .lx-page-hero h1 em { position: relative; font-style: normal; color: var(--t4-blue); }
@supports (-webkit-background-clip: text) {
  .lx-hero h1 em, .lx-page-hero h1 em { background: var(--lx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.lx-hero h1 em::after, .lx-page-hero h1 em::after { content: ""; position: absolute; inset-inline: 2%; bottom: .06em; height: .1em; border-radius: 99px; background: var(--lx-grad); opacity: .22; }
.lx-hero-lead { max-width: 34em; margin: 22px 0 0; color: var(--t4-muted); font-size: clamp(15px, 1.2vw, 17px); line-height: 2.05; }
.lx-hero-points { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.lx-hero-points li { display: flex; gap: 10px; color: var(--t4-ink); font-size: 14px; font-weight: 600; line-height: 1.9; }
.lx-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 32px; }
.lx-hero-stage { position: relative; isolation: isolate; aspect-ratio: 1.08; border: 0; border-radius: 0; background: none; overflow: visible; }
.lx-hero-grid-art { display: none; }
.lx-hero-ring { position: absolute; inset: 0; z-index: -1; width: 76%; aspect-ratio: 1; margin: auto; border: 1.5px dashed color-mix(in srgb, var(--t4-blue) 30%, transparent); border-radius: 50%; }
.t4-lx .lx-hero-stage .t4-service-visual { position: absolute; inset: 7%; display: flex; align-items: center; justify-content: center; width: auto; max-width: none; min-height: 0; margin: 0; aspect-ratio: auto; border: 0; border-radius: 0; background: none; overflow: visible; transition: transform .6s var(--t4-ease); }
.t4-lx .lx-hero-stage .t4-service-visual img { width: 100%; max-width: none; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 38px rgb(16 46 60 / 14%)); }
.lx-hero-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid var(--t4-line); border-radius: 14px; background: color-mix(in srgb, var(--t4-surface) 84%, transparent); box-shadow: var(--t4-shadow); color: var(--t4-ink); font-size: 12px; font-weight: 750; white-space: nowrap; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lx-hero-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--t4-teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t4-teal) 18%, transparent); }
.lx-hero-chip.is-1 { top: 8%; inset-inline-start: 7%; }
.lx-hero-chip.is-2 { bottom: 10%; inset-inline-end: 7%; }
.lx-hero-chip.is-3 { top: 46%; inset-inline-end: 4%; }
.lx-hero-chip.is-2 i { background: var(--t4-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t4-blue) 18%, transparent); }
.lx-svc-dock { position: sticky; top: var(--lx-header-h, 92px); z-index: 30; margin-bottom: clamp(8px, 2vw, 24px); padding-block: 10px; transition: background .3s, box-shadow .3s, padding .3s; }
.lx-svc-dock::before { content: ""; position: absolute; inset: 0; z-index: -1; border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--t4-paper) 86%, transparent); opacity: 0; -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); transition: opacity .3s, border-color .3s; }
.lx-svc-dock.is-stuck { padding-block: 8px; }
.lx-svc-dock.is-stuck::before { border-color: var(--t4-line); opacity: 1; box-shadow: 0 14px 30px -24px rgb(16 46 60 / 40%); }
.lx-svc-dock.is-stuck .lx-svc-rail { box-shadow: none; }
.lx-svc-rail { display: flex; gap: 8px; width: auto; margin-inline: 12px; padding: 8px 20px; border: 1px solid var(--t4-line); border-radius: 22px; background: var(--t4-surface); overflow-x: auto; scrollbar-width: none; box-shadow: 0 18px 40px -32px rgb(16 46 60 / 45%); transition: box-shadow .3s; }
.t4-site .lx-svc-rail { padding: 8px 20px; }
.lx-svc-rail::-webkit-scrollbar { display: none; }
.lx-svc-rail a { display: flex; flex: 1 0 auto; align-items: center; justify-content: center; gap: 9px; padding: 11px 16px; border-radius: 15px; color: var(--t4-muted); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .25s, color .25s; }
.lx-svc-rail-icon svg { display: block; width: 20px; height: 20px; }
.lx-svc-rail a:hover { background: var(--t4-soft); color: var(--t4-ink); }
.lx-svc-rail a[aria-current="page"] { background: var(--t4-ink); color: var(--t4-paper); }
[data-theme="dark"] .lx-svc-rail a[aria-current="page"] { background: var(--t4-blue); color: #fff; }

/* icon-grid: numbered bento */
.lx-icons.is-bento { background: var(--lx-band); box-shadow: 0 0 0 100vmax var(--lx-band); clip-path: inset(0 -100vmax); }
.lx-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.lx-bento li { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 180px; padding: 22px; border: 1px solid color-mix(in srgb, var(--t4-line) 75%, transparent); border-radius: 24px; background: var(--t4-surface); overflow: hidden; transition: transform .4s var(--t4-ease), box-shadow .4s, border-color .4s; }
.lx-bento li:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--t4-blue) 30%, var(--t4-line)); box-shadow: var(--lx-lift); }
.lx-bento-num { position: absolute; top: 20px; inset-inline-end: 22px; color: var(--t4-muted); font-size: 12px; font-weight: 750; letter-spacing: .08em; }
.lx-bento-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--t4-blue-soft); color: var(--t4-blue); font-size: 23px; transition: transform .4s var(--t4-ease); }
.lx-bento li:hover .lx-bento-icon { transform: rotate(-8deg) scale(1.05); }
.lx-bento p { margin: auto 0 0; color: var(--t4-ink); font-size: 15px; font-weight: 750; line-height: 1.85; }
.lx-bento small { color: var(--t4-muted); font-size: 12.5px; line-height: 1.9; }
.lx-bento li:first-child { border-color: transparent; background: radial-gradient(120% 90% at 0% 100%, rgb(8 164 167 / 45%), transparent 60%), linear-gradient(150deg, var(--t4-blue), #065c8b); color: #fff; }
.lx-bento li:first-child p { color: #fff; font-size: clamp(19px, 1.8vw, 26px); font-weight: 850; line-height: 1.6; }
.lx-bento li:first-child .lx-bento-icon { background: rgb(255 255 255 / 16%); color: #fff; }
.lx-bento li:first-child .lx-bento-num { color: rgb(255 255 255 / 60%); }
@media (min-width: 1024px) {
  .lx-bento:has(> li:nth-child(4n + 3):last-child) > li:first-child { grid-column: span 2; }
  .lx-bento:has(> li:nth-child(4n + 2):last-child) > li:is(:first-child, :last-child) { grid-column: span 2; }
  .lx-bento:has(> li:nth-child(4n + 1):last-child) > li:first-child { grid-column: span 2; grid-row: span 2; }
}

/* icon-grid + accordion: sticky split */
.lx-split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.lx-split-aside { position: sticky; top: var(--lx-sticky); }
.lx-split-aside .lx-intro { margin-top: 18px; }
.lx-split-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--t4-line); }
.lx-split-list li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 20px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--t4-line); transition: padding .4s var(--t4-ease); }
.lx-split-list li:hover { padding-inline-start: 10px; }
.lx-split-icon { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--t4-line); border-radius: 17px; background: var(--t4-surface); color: var(--t4-blue); font-size: 24px; transition: background .35s, color .35s, border-color .35s, transform .45s var(--t4-ease); }
.lx-split-list li:hover .lx-split-icon { border-color: var(--t4-blue); background: var(--t4-blue); color: #fff; transform: rotate(-6deg); }
.lx-split-list h3 { margin: 4px 0 6px; font-size: 17px; font-weight: 800; line-height: 1.7; }
.lx-split-list p { margin: 0; color: var(--t4-muted); font-size: 13.5px; line-height: 2; }
.lx-split-num { padding-top: 6px; color: var(--t4-muted); font-size: 12px; font-weight: 750; letter-spacing: .06em; }

/* icon-grid: chip cloud */
.lx-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lx-cloud li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 16px; border: 1px solid var(--t4-line); border-radius: 99px; background: var(--t4-surface); font-size: 14px; font-weight: 650; transition: transform .3s var(--t4-ease), border-color .3s; }
.lx-cloud li > span:first-child { color: var(--t4-blue); font-size: 20px; }
.lx-cloud li:nth-child(3n + 2) { background: var(--t4-blue-soft); border-color: transparent; }
.lx-cloud li:hover { transform: translateY(-3px); border-color: var(--t4-blue); }

/* icon-grid: two-column index */
.lx-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 5vw, 72px); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.lx-index li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--t4-line); }
.lx-index li:nth-child(-n + 2) { border-top: 1px solid var(--t4-line); }
.lx-index > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lx-index-num { color: var(--t4-blue); font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.lx-index-text { font-size: clamp(15px, 1.3vw, 18px); font-weight: 750; line-height: 1.8; transition: transform .4s var(--t4-ease); }
.lx-index-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--t4-blue-soft); color: var(--t4-blue); font-size: 21px; transition: background .3s, color .3s; }
.lx-index li:hover .lx-index-text { transform: translateX(-6px); }
.lx-index li:hover .lx-index-icon { background: var(--t4-blue); color: #fff; }

/* accordion: always-open board */
.lx-board { display: flex; flex-wrap: wrap; gap: 16px; }
.lx-board > * { flex: 1 1 320px; min-width: 0; }
.lx-board-card { padding: 26px 28px; border: 1px solid var(--t4-line); border-radius: 26px; background: var(--t4-surface); transition: border-color .35s, box-shadow .35s; }
.lx-board-card:hover { border-color: color-mix(in srgb, var(--t4-blue) 30%, var(--t4-line)); box-shadow: var(--lx-lift); }
.lx-board-card header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px dashed var(--t4-line); }
.lx-board-card header span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--t4-ink); color: var(--t4-paper); font-size: 12px; font-weight: 800; }
.t4-lx .lx-board-card h3 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.7; }
.lx-board-card p { margin: 0; color: var(--t4-muted); font-size: 13.5px; line-height: 2; }
.lx-board .lx-checks { margin: 0; padding: 0; grid-template-columns: minmax(0, 1fr); }

/* card-grid shared */
.lx-card-list { margin: 0; padding: 0; list-style: none; }
.lx-card { position: relative; min-width: 0; }
.t4-lx .lx-card h3 { margin: 0; color: inherit; font-size: 17px; font-weight: 800; line-height: 1.7; }
.lx-card h3 a::after { content: ""; position: absolute; inset: 0; }
.lx-card p { margin: 8px 0 0; color: var(--t4-muted); font-size: 13.5px; line-height: 2; }
.lx-card-icon { color: var(--t4-blue); font-size: 24px; line-height: 1; }
.lx-card-num { color: var(--t4-muted); font-size: 12px; font-weight: 750; letter-spacing: .06em; }

/* card-grid: tiles */
.is-tiles .lx-card-list { gap: 16px; }
.is-tiles .lx-card { display: flex; flex-direction: column; gap: 14px; padding: 26px; border: 1px solid var(--t4-line); border-radius: 26px; background: radial-gradient(180px 140px at 100% 0%, var(--t4-blue-soft), transparent 70%), var(--t4-surface); transition: transform .4s var(--t4-ease), box-shadow .4s, border-color .4s; }
.is-tiles .lx-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--t4-blue) 30%, var(--t4-line)); box-shadow: var(--lx-lift); }
.is-tiles .lx-card-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; background: var(--t4-surface); box-shadow: inset 0 0 0 1px var(--t4-line); }
.is-tiles .lx-card-num { position: absolute; top: 24px; inset-inline-end: 24px; }
.is-tiles .lx-card p { margin-top: 0; }

/* card-grid: hairline matrix */
.is-matrix .lx-card-list { gap: 1px; border-block: 1px solid var(--t4-line); background: var(--t4-line); }
.is-matrix .lx-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 4px 18px; padding: 32px 26px 34px; background: var(--t4-paper); transition: background .35s; }
.is-matrix .lx-card-num { grid-row: span 3; color: color-mix(in srgb, var(--t4-ink) 16%, transparent); font-size: 46px; font-weight: 300; line-height: 1; letter-spacing: -.04em; transition: color .35s; }
.is-matrix .lx-card-icon { font-size: 22px; margin-bottom: 8px; }
.is-matrix .lx-card:hover { background: var(--t4-surface); }
.is-matrix .lx-card:hover .lx-card-num { color: var(--t4-blue); }

/* card-grid: dark band */
.lx-cards.is-band { --lx-band-c: var(--lx-night); color: #e6eff2; background: var(--lx-band-c); box-shadow: 0 0 0 100vmax var(--lx-band-c); clip-path: inset(0 -100vmax); }
.is-band .lx-kicker { color: #7fe0de; }
.is-band .lx-kicker-num { background: rgb(127 224 222 / 12%); }
.t4-lx .is-band .lx-head h2 { color: #fff; }
.is-band .lx-intro { color: #aac1c8; }
.is-band .lx-card-list { gap: 14px; }
.is-band .lx-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 24px; background: rgb(255 255 255 / 4%); transition: background .35s, border-color .35s, transform .4s var(--t4-ease); }
.is-band .lx-card:hover { transform: translateY(-3px); border-color: rgb(127 224 222 / 40%); background: rgb(255 255 255 / 7%); }
.is-band .lx-card h3 { color: #fff; }
.is-band .lx-card p { margin: 0; color: #aac1c8; }
.is-band .lx-card-icon { color: #7fe0de; font-size: 26px; }
.is-band .lx-card-num { position: absolute; top: 26px; inset-inline-end: 26px; color: rgb(255 255 255 / 35%); }


/* card-grid: snap rail */
.lx-rail-nav { display: flex; gap: 8px; grid-column: -2 / -1; justify-self: end; align-self: end; }
.lx-head-row:has(> .lx-intro) > .lx-rail-nav { grid-row: 2; }
.lx-rail-nav[hidden] { display: none; }
.lx-rail-nav button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--t4-line); border-radius: 50%; background: var(--t4-surface); color: var(--t4-ink); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.lx-rail-nav button:hover:not(:disabled) { border-color: var(--t4-ink); background: var(--t4-ink); color: var(--t4-paper); }
.lx-rail-nav button:disabled { opacity: .35; cursor: default; }
.lx-rail-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.is-rail .lx-card-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, calc((100% - 48px) / 4)); gap: 16px; padding-bottom: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--t4-line) transparent; }
.is-rail .lx-card-list.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.is-rail .lx-card { display: flex; flex-direction: column; gap: 14px; min-height: 240px; padding: 26px; border: 1px solid var(--t4-line); border-radius: 26px; background: var(--t4-surface); scroll-snap-align: start; transition: background .4s, color .4s, border-color .4s; }
.is-rail .lx-card-icon { font-size: 34px; }
.is-rail .lx-card-num { margin-top: auto; order: 5; }
.is-rail .lx-card p { margin: 0; }
.is-rail .lx-card:hover { border-color: var(--t4-ink); background: var(--t4-ink); color: var(--t4-paper); }
.is-rail .lx-card:hover :is(p, .lx-card-num) { color: color-mix(in srgb, var(--t4-paper) 70%, transparent); }
.is-rail .lx-card:hover .lx-card-icon { color: var(--t4-teal); }

/* timeline: alternating track */
.t4-lx .lx-track { position: relative; max-width: 1000px; margin: 0 auto; }
.lx-track-line { position: absolute; z-index: 0; top: 26px; bottom: 26px; inset-inline-start: calc(50% - 1px); width: 2px; border-radius: 2px; background: var(--t4-line); }
.t4-lx .lx-track-list { position: relative; z-index: 1; }
.t4-lx .lx-step > .lx-step-node { position: relative; z-index: 2; }
.lx-track-line i { display: block; width: 100%; height: calc(var(--lx-p, 0) * 100%); border-radius: inherit; background: linear-gradient(180deg, var(--t4-teal), var(--t4-blue)); }
.t4-lx .lx-track-list { display: grid; grid-template-columns: none; gap: 18px; margin: 0; padding: 0; list-style: none; }
.t4-lx .lx-step { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: start; padding: 0; border: 0; }
.t4-lx .lx-step > .lx-step-node { grid-column: 2; grid-row: 1; display: grid; place-items: center; justify-self: center; width: 52px; height: 52px; margin: 0; border: 2px solid var(--t4-line); border-radius: 50%; background: var(--t4-paper); color: var(--t4-muted); font-size: 14px; font-weight: 800; line-height: 1; transition: background .4s, border-color .4s, color .4s, box-shadow .4s; }
.t4-lx .lx-step.is-on > .lx-step-node { border-color: var(--t4-blue); background: var(--t4-blue); color: #fff; box-shadow: 0 0 0 7px var(--t4-blue-soft); }
.lx-step-body { grid-column: 1; grid-row: 1; padding: 22px 26px; border: 1px solid var(--t4-line); border-radius: 22px; background: var(--t4-surface); transition: border-color .4s, box-shadow .4s, transform .5s var(--t4-ease); }
.lx-step:nth-child(even) .lx-step-body { grid-column: 3; }
@media (min-width: 768px) { .t4-lx .lx-step + .lx-step { margin-top: -46px; } }
.lx-step.is-on .lx-step-body { border-color: color-mix(in srgb, var(--t4-blue) 28%, var(--t4-line)); box-shadow: var(--lx-lift); }
.t4-lx .lx-step-body h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; line-height: 1.7; }
.t4-lx .lx-step-body p { margin: 0; color: var(--t4-muted); font-size: 13.5px; line-height: 2; }

/* Accordions: split, ledger and FAQ share one row */
.t4-lx .lx-acc-list { border-top: 1px solid var(--t4-line); }
.t4-site.t4-lx .lx-acc-item { margin: 0; border: 0; border-bottom: 1px solid var(--t4-line); border-radius: 0; background: transparent; }
.t4-site.t4-lx .lx-acc-item > summary { display: flex; align-items: center; gap: 16px; padding: 22px 2px; color: var(--t4-ink); font-size: 15.5px; font-weight: 750; line-height: 1.85; list-style: none; cursor: pointer; transition: color .25s; }
.lx-acc-item > summary::-webkit-details-marker { display: none; }
.lx-acc-num { min-width: 26px; color: var(--t4-muted); font-size: 12px; font-weight: 750; letter-spacing: .06em; }
.lx-acc-title { flex: 1; min-width: 0; }
.lx-plus { position: relative; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid var(--t4-line); border-radius: 50%; color: var(--t4-ink); transition: transform .45s var(--t4-ease), background .3s, border-color .3s, color .3s; }
.lx-plus::before, .lx-plus::after { content: ""; position: absolute; inset: 0; width: 12px; height: 1.6px; margin: auto; border-radius: 2px; background: currentColor; }
.lx-plus::after { transform: rotate(90deg); }
.lx-acc-item > summary:hover .lx-plus { border-color: var(--t4-blue); color: var(--t4-blue); }
.t4-site.t4-lx .lx-acc-item[open] > summary { color: var(--t4-blue); }
.lx-acc-item[open] .lx-plus { transform: rotate(135deg); border-color: var(--t4-blue); background: var(--t4-blue); color: #fff; }
.lx-acc-item[open] > summary:hover .lx-plus { border-color: color-mix(in srgb, var(--t4-blue), #000 14%); background: color-mix(in srgb, var(--t4-blue), #000 14%); color: #fff; }
.t4-site.t4-lx .lx-acc-item.is-closing > summary { color: var(--t4-ink); }
.lx-acc-item.is-closing .lx-plus, .lx-acc-item.is-closing > summary:hover .lx-plus { transform: none; border-color: var(--t4-line); background: transparent; color: var(--t4-ink); }
.t4-lx details.is-animating { overflow: hidden; }
.t4-site.t4-lx .lx-acc-item > .lx-acc-body { margin: 0; padding: 0 44px 24px 52px; color: var(--t4-muted); font-size: 14px; line-height: 2.1; }
.lx-acc-item:not(:has(.lx-acc-num)) > .lx-acc-body { padding-inline-start: 2px; }
.lx-acc-item[open] > .lx-acc-body { animation: lx-drop .45s var(--t4-ease); }
.lx-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; list-style: none; }
.lx-checks li { display: flex; gap: 10px; color: var(--t4-ink); font-size: 13.5px; line-height: 1.9; }
.lx-checks > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lx-acc.is-ledger { background: var(--lx-band); box-shadow: 0 0 0 100vmax var(--lx-band); clip-path: inset(0 -100vmax); }
.lx-ledger .lx-acc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; border: 0; }
.lx-ledger .lx-acc-list > .lx-acc-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.t4-site.t4-lx .lx-ledger .lx-acc-item { padding-inline: 20px; border: 1px solid var(--t4-line); border-radius: 22px; background: var(--t4-surface); transition: border-color .3s, box-shadow .3s; }
.t4-site.t4-lx .lx-ledger .lx-acc-item[open] { border-color: color-mix(in srgb, var(--t4-blue) 35%, var(--t4-line)); box-shadow: var(--lx-lift); }
.t4-site.t4-lx .lx-ledger .lx-acc-item > summary { padding-block: 18px; font-size: 15px; }
.t4-site.t4-lx .lx-ledger .lx-acc-item > .lx-acc-body { padding: 0 42px 20px 0; }
.lx-faq-count { margin: 22px 0 0; color: var(--t4-muted); font-size: 14px; }
.lx-faq-count b { display: block; color: var(--t4-blue); font-size: 46px; font-weight: 850; line-height: 1.3; letter-spacing: -.03em; }
.lx-faq-help { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--t4-line); border-radius: 24px; background: var(--lx-band); }
.lx-faq-help p { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.lx-faq-help > span { display: block; margin-bottom: 10px; color: var(--t4-muted); font-size: 13px; line-height: 1.9; }
.lx-acc-item.is-extra { display: none; }
.lx-faq-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 12px 22px; border: 1px solid var(--t4-line); border-radius: 99px; background: var(--t4-surface); color: var(--t4-ink); font: inherit; font-size: 13.5px; font-weight: 750; cursor: pointer; transition: border-color .25s, color .25s; }
.lx-faq-more::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); }
.lx-faq-more:hover { border-color: var(--t4-blue); color: var(--t4-blue); }
.t4-lx [data-t4-section="faq"] { display: block; }

/* checklist: ticket chips */
.lx-tickets-card { position: relative; isolation: isolate; padding: clamp(28px, 4.5vw, 60px); border: 1px solid var(--t4-line); border-radius: 34px; background: linear-gradient(160deg, var(--t4-blue-soft), var(--t4-surface) 62%); overflow: hidden; }
.lx-tickets-card::after { content: ""; position: absolute; z-index: -1; top: -120px; inset-inline-end: -120px; width: 340px; height: 340px; border: 1.5px dashed color-mix(in srgb, var(--t4-blue) 22%, transparent); border-radius: 50%; }
.lx-ticket-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lx-ticket-list > li { flex: 1 1 260px; min-width: 0; }
.lx-ticket-list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--t4-blue) 26%, var(--t4-line)); border-radius: 16px; background: color-mix(in srgb, var(--t4-surface) 88%, transparent); font-size: 14px; font-weight: 600; line-height: 1.9; transition: border-color .3s, transform .3s var(--t4-ease); }
.lx-ticket-list li:hover { border-style: solid; border-color: var(--t4-teal); transform: translateY(-2px); }

/* CTA stage */
.t4-lx [data-t4-section="cta"] > .lx-cta-stage { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: clamp(28px, 5vw, 72px); padding: clamp(32px, 5.5vw, 76px); border-radius: 38px; background: radial-gradient(620px 320px at 92% -12%, rgb(8 164 167 / 38%), transparent 62%), radial-gradient(520px 340px at 0% 115%, rgb(0 120 184 / 50%), transparent 62%), var(--lx-night); color: #eef6f8; overflow: hidden; }
[data-theme="dark"] .t4-lx [data-t4-section="cta"] > .lx-cta-stage { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%); }
.lx-cta-mark { position: absolute; z-index: -1; bottom: -70px; inset-inline-end: -30px; width: 330px; color: #fff; opacity: .07; transform: rotate(-12deg); }
.lx-cta-mark :is(svg, img) { display: block; width: 100%; height: auto; color: #fff; }
.lx-cta-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: #7fe0de; font-size: 12.5px; font-weight: 750; }
.t4-lx [data-t4-section="cta"] h2 { margin: 0; color: #fff; font-size: clamp(28px, 3.4vw, 48px); font-weight: 850; line-height: 1.45; letter-spacing: -.03em; text-wrap: balance; }
.lx-cta-desc { max-width: 36em; margin: 16px 0 0; color: #b9ccd2; font-size: 15px; line-height: 2.1; }
.lx-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 30px; }
.t4-site .lx-btn-light { gap: 12px; min-height: 56px; padding-inline: 26px; border: 0; border-radius: 16px; background: #fff; color: #0d2430; font-size: 14px; font-weight: 800; }
.t4-site .lx-btn-light:hover { background: #dff8f7; color: #0d2430; }
.lx-btn-light svg, .lx-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--t4-ease); }
.lx-btn-light:hover svg { transform: translateX(-4px); }
.lx-btn-ghost-light { padding: 6px 0; border: 0; border-bottom: 1.5px solid rgb(255 255 255 / 35%); background: none; color: #fff; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
.lx-btn-ghost-light:hover { border-color: #7fe0de; color: #7fe0de; }
.lx-cta-panel { padding: 26px 26px 12px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 24px; background: rgb(255 255 255 / 5%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lx-cta-panel > p { margin: 0 0 8px; color: #7fe0de; font-size: 13px; font-weight: 750; }
.lx-cta-panel ol { margin: 0; padding: 0; list-style: none; }
.lx-cta-panel li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgb(255 255 255 / 9%); color: #e4eef1; font-size: 14px; line-height: 1.9; }
.lx-cta-panel li:last-child { border-bottom: 0; }
.lx-cta-panel li > span { min-width: 22px; padding-top: 2px; color: rgb(255 255 255 / 42%); font-size: 12px; font-weight: 750; }

/* Interactive tools and custom inline sections of the service pages */
.t4-svc-page :is([data-t4-section$="finder"], [data-t4-section="cost-calculator"], [data-t4-section="seo-configurator"]) { background: var(--lx-band); box-shadow: 0 0 0 100vmax var(--lx-band); clip-path: inset(0 -100vmax); }
.t4-svc-page :is([data-t4-section$="finder"], [data-t4-section="cost-calculator"], [data-t4-section="seo-configurator"]) > .rounded-box { border: 1px solid var(--t4-line); border-radius: 30px; background: var(--t4-surface); box-shadow: var(--lx-lift); }
.t4-svc-page section.t4-reveal:not([data-lx]) :is(.rounded-box, .rounded-field).border { border-color: var(--t4-line); border-radius: 24px; background: var(--t4-surface); box-shadow: none; transition: border-color .35s, box-shadow .35s, transform .4s var(--t4-ease); }
.t4-svc-page section.t4-reveal:not([data-lx]) .rounded-box.border:hover { border-color: color-mix(in srgb, var(--t4-blue) 28%, var(--t4-line)); box-shadow: var(--lx-lift); }
.t4-svc-page section.t4-reveal:not([data-lx]) .rounded-full.bg-base-200 { border: 1px solid var(--t4-line); background: var(--t4-paper); }
.t4-svc-page section.t4-reveal:not([data-lx]) > p { color: var(--t4-muted); }
.t4-svc-page section.t4-reveal:not([data-lx]) .lx-head + p { max-width: 42em; margin-top: 18px; line-height: 2.1; }
.t4-svc-page section.t4-reveal:not([data-lx]):nth-of-type(3n) { background: var(--lx-band); box-shadow: 0 0 0 100vmax var(--lx-band); clip-path: inset(0 -100vmax); }
.t4-svc-page section.t4-reveal .table { border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.t4-svc-page section.t4-reveal .table :is(th, td) { padding: 16px 18px; border-color: var(--t4-line); line-height: 1.9; }
.t4-svc-page section.t4-reveal .table thead th { background: var(--t4-ink); color: var(--t4-paper); font-weight: 750; }
[data-theme="dark"] .t4-svc-page section.t4-reveal .table thead th:not([class*="bg-primary"]) { background: var(--lx-night); color: #fff; }
.t4-svc-page section.t4-reveal .table thead th:first-child { border-start-start-radius: 18px; }
.t4-svc-page section.t4-reveal .table thead th:last-child { border-start-end-radius: 18px; }
.t4-svc-page section.t4-reveal .table-zebra tbody tr:nth-child(even) :is(th, td) { background: var(--lx-band); }
.t4-svc-page section.t4-reveal .table tbody :is(td, th)[class*="bg-primary"] { background: color-mix(in srgb, var(--t4-blue) 7%, var(--t4-surface)); color: var(--t4-ink); font-weight: 650; }
.t4-svc-page section.t4-reveal .table thead th[class*="bg-primary"] { background: var(--t4-blue); color: #fff; }
.t4-svc-page section.t4-reveal :has(> .table), .t4-svc-page section.t4-reveal .overflow-x-auto:has(.table) { border-radius: 20px; }

@keyframes lx-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes lx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes lx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .lx-hero-chip { animation: lx-float 7s ease-in-out infinite; }
  .lx-hero-chip.is-2 { animation-delay: -2.4s; }
  .lx-hero-chip.is-3 { animation-delay: -4.6s; }
  .lx-hero-ring, .lx-page-ring { animation: lx-spin 80s linear infinite; }
}

@media (max-width: 1199px) {
  .is-rail .lx-card-list { grid-auto-columns: minmax(240px, calc((100% - 32px) / 3)); }
}
@media (max-width: 1023px) {
  .lx-hero-grid, .lx-split, .t4-lx [data-t4-section="cta"] > .lx-cta-stage { grid-template-columns: minmax(0, 1fr); }
  .lx-hero-stage { max-width: 620px; width: 100%; aspect-ratio: 1.3; justify-self: center; }
  .lx-split-aside { position: static; }
  .lx-head-row { grid-template-columns: minmax(0, 1fr); }
  .lx-head-row > .lx-rail-nav, .lx-head-row:has(> .lx-intro) > .lx-rail-nav { grid-row: auto; justify-self: start; }
  .lx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-bento li:first-child { grid-column: 1 / -1; min-height: 150px; }
  .lx-bento > li:last-child:nth-child(even) { grid-column: 1 / -1; }
  .is-rail .lx-card-list { grid-auto-columns: minmax(240px, 44%); }
  .lx-ledger .lx-acc-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .t4-lx :is(.t4-main, .t4-lx-page) > section.lx-section, .t4-svc-page .t4-main > section.t4-reveal { padding-block: 52px; }
  .lx-hero-stage { aspect-ratio: 1.1; border-radius: 30px; }
  .lx-hero-chip { padding: 7px 11px; font-size: 11px; }
  .lx-hero-chip.is-3 { display: none; }
  .lx-hero-actions { gap: 14px 20px; }
  .lx-svc-dock { padding-block: 6px; }
  .lx-svc-rail { border-radius: 18px; }
  .lx-svc-rail a { padding: 9px 13px; border-radius: 13px; font-size: 12.5px; }
  .lx-bento li { min-height: 150px; padding: 18px; }
  .lx-bento p { font-size: 14px; }
  .lx-split-list li { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; }
  .lx-split-icon { width: 46px; height: 46px; font-size: 21px; border-radius: 14px; }
  .lx-split-num { display: none; }
  .is-matrix .lx-card { padding-inline: 4px; }
  .is-rail .lx-card-list { grid-auto-columns: 78%; margin-inline: calc(var(--t4-gutter) * -1); padding-inline: var(--t4-gutter); scroll-padding-inline: var(--t4-gutter); }
  .lx-track-line { inset-inline-start: 25px; }
  .t4-lx .lx-step { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
  .t4-lx .lx-step > .lx-step-node { grid-column: 1; }
  .lx-step-body, .lx-step:nth-child(even) .lx-step-body { grid-column: 2; padding: 18px 20px; }
  .lx-checks { grid-template-columns: minmax(0, 1fr); }
  .lx-index { grid-template-columns: minmax(0, 1fr); }
  .lx-index li:nth-child(2) { border-top: 0; }
  .lx-index li { gap: 14px; padding-block: 18px; }
  .t4-site.t4-lx .lx-acc-item > .lx-acc-body { padding-inline: 42px 0; }
  .t4-site.t4-lx .lx-acc-item > summary { gap: 12px; font-size: 14.5px; }
  .lx-cta-mark { width: 220px; }
  .t4-lx [data-t4-section="cta"] > .lx-cta-stage { border-radius: 28px; }
  .lx-cta-actions .btn { width: 100%; }
}
@media (max-width: 479px) {
  .lx-bento { grid-template-columns: minmax(0, 1fr); }
  .lx-bento li { min-height: 0; }
  .lx-bento p { margin-top: 4px; }
  .lx-hero-eyebrow { flex-wrap: wrap; border-radius: 18px; }
}

/* ───────── Services hub, about and contact ───────── */
.t4-lx-page { overflow-x: clip; --lx-grad: linear-gradient(100deg, var(--t4-teal), var(--t4-blue)); --lx-lift: 0 26px 50px -30px rgb(16 46 60 / 38%); }
.lx-page-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 5vw, 80px); padding-block: clamp(20px, 3vw, 44px) clamp(48px, 6vw, 88px); }
.t4-lx .lx-page-hero h1 { margin: 0; color: var(--t4-ink); font-size: clamp(34px, 4.4vw, 64px); font-weight: 900; line-height: 1.4; letter-spacing: -.035em; text-wrap: balance; }
.lx-page-hero .lx-hero-eyebrow { padding-inline-start: 14px; }
.lx-page-hero-art { position: relative; min-width: 0; }
.lx-page-ring { position: absolute; inset: 0; z-index: -1; width: 88%; aspect-ratio: 1; margin: auto; border: 1.5px dashed color-mix(in srgb, var(--t4-blue) 26%, transparent); border-radius: 50%; }
.lx-page-note { margin-block: 24px; }

/* Services: orbit of the six disciplines */
.lx-orbit { --lx-orbit-outer: 41cqi; --lx-orbit-inner: 24cqi; position: relative; isolation: isolate; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; container-type: inline-size; }
.lx-orbit-rings { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; }
.lx-orbit-stroke { fill: none; }
.lx-orbit-stroke.is-solid { stroke: color-mix(in srgb, var(--t4-blue) 42%, #b7d0de); stroke-width: .45; }
.lx-orbit-stroke.is-dotted { stroke: color-mix(in srgb, var(--t4-teal) 72%, #9ed8d4); stroke-width: .7; stroke-linecap: round; stroke-dasharray: .15 1.45; }
.lx-orbit-core { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 34%; aspect-ratio: 1; margin: auto; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #1b93d1, var(--t4-blue) 55%, #05527d); box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--t4-blue) 80%, transparent), inset 0 0 0 10px rgb(255 255 255 / 10%); color: #fff; }
.lx-orbit-core :is(svg, img) { width: 46%; height: auto; color: #fff; }
.lx-orbit-spin { position: absolute; inset: 0; z-index: 1; }
.lx-orbit-node { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.lx-orbit-spin.is-outer .lx-orbit-node { transform: rotate(calc(var(--i) * 120deg - 90deg)) translateX(var(--lx-orbit-outer)) rotate(calc(var(--i) * -120deg + 90deg)); }
.lx-orbit-spin.is-inner .lx-orbit-node { transform: rotate(calc(var(--i) * 120deg - 30deg)) translateX(var(--lx-orbit-inner)) rotate(calc(var(--i) * -120deg + 30deg)); }
.lx-orbit-node > span { position: absolute; top: 0; left: 0; width: 54px; height: 54px; margin: 0; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: var(--t4-blue); box-shadow: 0 12px 24px -16px #102e3c66, inset 0 0 0 1px rgb(255 255 255 / 80%); }
.lx-orbit-node > span > span { display: grid; place-items: center; width: 100%; height: 100%; }
.lx-orbit-node svg { width: 22px; height: 22px; }

.lx-marquee { overflow: hidden; padding-block: 18px; border-block: 1px solid var(--t4-line); background: var(--t4-surface); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lx-marquee-track { display: flex; width: max-content; gap: 0; }
.lx-marquee-track span { display: inline-flex; align-items: center; gap: 28px; padding-inline-end: 28px; color: var(--t4-ink); font-size: clamp(16px, 1.6vw, 22px); font-weight: 800; white-space: nowrap; }
.lx-marquee-track span::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lx-grad); }
.lx-marquee-track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--t4-ink) 55%, transparent); }

.lx-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.lx-hub-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px; border: 1px solid var(--t4-line); border-radius: 30px; background: var(--t4-surface); transition: transform .45s var(--t4-ease), box-shadow .45s, border-color .45s; }
.lx-hub-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--t4-blue) 30%, var(--t4-line)); box-shadow: var(--lx-lift); }
.lx-hub-num { position: absolute; top: 22px; inset-inline-start: 24px; z-index: 1; color: var(--t4-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.lx-hub-art { display: grid; place-items: center; height: 190px; margin: 0 0 18px; border-radius: 22px; background: radial-gradient(90% 80% at 50% 30%, var(--t4-blue-soft), transparent 75%), var(--lx-band); overflow: hidden; }
.lx-hub-art img { width: auto; max-width: 82%; height: 88%; object-fit: contain; transition: transform .6s var(--t4-ease); }
.lx-hub-card:hover .lx-hub-art img { transform: scale(1.06) rotate(-2deg); }
.t4-lx .lx-hub-copy h3 { margin: 0; font-size: 21px; font-weight: 850; line-height: 1.6; }
.lx-hub-copy h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lx-hub-copy p { margin: 8px 0 0; color: var(--t4-muted); font-size: 13.5px; line-height: 2; }
.lx-arrow { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--t4-line); border-radius: 50%; color: var(--t4-ink); transition: background .3s, color .3s, border-color .3s, transform .45s var(--t4-ease); }
.lx-hub-card .lx-arrow { position: absolute; bottom: 22px; inset-inline-end: 22px; }
.lx-hub-card:hover .lx-arrow { border-color: var(--t4-blue); background: var(--t4-blue); color: #fff; transform: rotate(-12deg); }
.lx-hub-card .lx-tags { padding-inline-end: 56px; }
.lx-hub-card:first-child { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: center; }
.lx-hub-card:first-child .lx-hub-art { order: 2; height: 100%; min-height: 260px; margin: 0; }
.lx-hub-card:first-child h3 { font-size: clamp(24px, 2.4vw, 32px); }
.lx-hub-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center; }
.lx-hub-card:last-child .lx-hub-art { height: 150px; margin: 0; }

.lx-guide-card { padding: clamp(26px, 4.5vw, 60px); border-radius: 36px; background: var(--lx-night); color: #e6eff2; background-image: radial-gradient(600px 300px at 100% 0%, rgb(8 164 167 / 26%), transparent 60%); }
[data-theme="dark"] :is(.lx-guide-card, .lx-next) { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%); }
.lx-guide-card .lx-kicker { color: #7fe0de; }
.lx-guide-card .lx-kicker-num { background: rgb(127 224 222 / 12%); }
.t4-lx .lx-guide-card .lx-head h2 { color: #fff; }
.lx-guide-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.lx-guide-needs { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.lx-guide-needs label { position: relative; display: flex; align-items: center; gap: 12px; padding: 15px 18px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 16px; color: #cfdde1; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background .3s, border-color .3s, color .3s; }
.lx-guide-needs label::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; border: 1.5px solid rgb(255 255 255 / 35%); border-radius: 50%; transition: border .25s, background .25s; }
.lx-guide-needs input { position: absolute; opacity: 0; pointer-events: none; }
.lx-guide-needs label:hover { border-color: rgb(127 224 222 / 45%); color: #fff; }
.lx-guide-needs label:has(input:checked) { border-color: #7fe0de; background: rgb(127 224 222 / 10%); color: #fff; }
.lx-guide-needs label:has(input:checked)::before { border: 5px solid #7fe0de; }
.lx-guide-needs label:has(input:focus-visible) { outline: 3px solid #7fe0de; outline-offset: 3px; }
.lx-guide-panel { display: none; padding: 28px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 26px; background: rgb(255 255 255 / 5%); animation: lx-drop .45s var(--t4-ease); }
.lx-guide-panel > p { margin: 0 0 22px; color: #e4eef1; font-size: 16px; font-weight: 600; line-height: 2; }
.lx-guide-panel ol { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: none; }
.lx-guide-panel li a { display: grid; grid-template-columns: auto 44px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: #fff; color: #0d2430; transition: transform .35s var(--t4-ease); }
.lx-guide-panel li a:hover { transform: translateX(-6px); }
.lx-guide-step { color: #0a7b86; font-size: 11.5px; font-weight: 800; }
.lx-guide-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #e8f2f7; color: #0078b8; }
.lx-guide-icon svg { width: 24px; height: 24px; }
.lx-guide-panel strong { font-size: 15px; font-weight: 800; }
.lx-guide-panel .lx-btn-quiet { color: #fff; border-color: rgb(255 255 255 / 35%); }
.lx-guide-panel .lx-btn-quiet:hover { color: #7fe0de; border-color: #7fe0de; }
.lx-guide:has(input[value="0"]:checked) [data-need="0"],
.lx-guide:has(input[value="1"]:checked) [data-need="1"],
.lx-guide:has(input[value="2"]:checked) [data-need="2"],
.lx-guide:has(input[value="3"]:checked) [data-need="3"],
.lx-guide:has(input[value="4"]:checked) [data-need="4"],
.lx-guide:has(input[value="5"]:checked) [data-need="5"] { display: block; }

.lx-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.lx-model { display: flex; flex-direction: column; gap: 12px; padding: 30px; border: 1px solid var(--t4-line); border-radius: 30px; background: var(--t4-surface); }
.lx-model-name { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; color: var(--t4-blue); font-size: 13px; font-weight: 800; }
.lx-model-name span { padding: 4px 12px; border-radius: 99px; background: rgb(255 255 255 / 16%); color: #fff; font-size: 11px; }
.t4-lx .lx-model h3 { margin: 0; font-size: 22px; font-weight: 850; line-height: 1.6; }
.lx-model > p:not(.lx-model-name) { margin: 0; color: var(--t4-muted); font-size: 14px; line-height: 2; }
.lx-model .lx-checks { margin: auto 0 0; padding: 18px 0 0; border-top: 1px dashed var(--t4-line); grid-template-columns: minmax(0, 1fr); }
.lx-model.is-featured { border-color: transparent; background: radial-gradient(120% 80% at 0% 100%, rgb(8 164 167 / 45%), transparent 60%), linear-gradient(155deg, var(--t4-blue), #064f78); color: #fff; transform: translateY(-14px); box-shadow: var(--lx-lift); }
.lx-model.is-featured .lx-model-name { color: #bfeff0; }
.t4-lx .lx-model.is-featured h3, .lx-model.is-featured .lx-checks li { color: #fff; }
.lx-model.is-featured > p:not(.lx-model-name) { color: #d4e8f0; }
.lx-model.is-featured .lx-checks { border-color: rgb(255 255 255 / 22%); }
.lx-model.is-featured .lx-tick { background: rgb(255 255 255 / 18%); }
.lx-model.is-featured .lx-tick::after { border-color: #fff; }

/* About */
.lx-collage { position: relative; isolation: isolate; width: min(100%, 540px); aspect-ratio: 1.02; margin-inline: auto; }
.lx-collage figure { position: absolute; margin: 0; padding: 12px 12px 10px; border: 1px solid var(--t4-line); border-radius: 26px; background: var(--t4-surface); box-shadow: var(--lx-lift); transition: transform .6s var(--t4-ease); }
.lx-collage figure img { display: block; width: 100%; height: auto; aspect-ratio: 1.36; object-fit: contain; border-radius: 16px; background: var(--lx-band); }
.lx-collage figcaption { padding: 8px 6px 0; font-size: 12.5px; font-weight: 800; }
.lx-collage .is-a { top: 2%; inset-inline-start: 0; width: 50%; transform: rotate(4deg); }
.lx-collage .is-b { top: 22%; inset-inline-end: 0; width: 56%; transform: rotate(-5deg); z-index: 2; }
.lx-collage .is-c { bottom: 0; inset-inline-start: 12%; width: 48%; transform: rotate(-2deg); }
.lx-collage:hover .is-a { transform: rotate(1deg) translateY(-6px); }
.lx-collage:hover .is-b { transform: rotate(-2deg) translateY(-6px); }
.lx-collage:hover .is-c { transform: rotate(1deg) translateY(-6px); }
.lx-collage-mark { position: absolute; bottom: 8%; inset-inline-end: 8%; z-index: 3; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 26px; background: var(--t4-blue); box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--t4-blue) 80%, transparent); color: #fff; }
.lx-collage-mark :is(svg, img) { width: 50%; height: auto; color: #fff; }

.lx-manifesto { text-align: center; }
.lx-manifesto .lx-kicker { justify-content: center; }
.lx-manifesto blockquote { max-width: 1000px; margin: 0 auto; padding: 0; border: 0; background: none; }
.lx-manifesto blockquote p { margin: 0; color: var(--t4-ink); font-size: clamp(26px, 3.6vw, 50px); font-weight: 850; line-height: 1.6; letter-spacing: -.03em; text-wrap: balance; }
.lx-manifesto mark { padding: 0 .12em; border-radius: .2em; background: linear-gradient(transparent 58%, color-mix(in srgb, var(--t4-teal) 28%, transparent) 58%); color: inherit; }
.lx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; margin: clamp(40px, 6vw, 72px) auto 0; border-block: 1px solid var(--t4-line); }
.lx-facts > div { padding: 28px 18px; }
.lx-facts > div + div { border-inline-start: 1px solid var(--t4-line); }
.lx-facts dt { color: var(--t4-blue); font-size: clamp(36px, 4.4vw, 58px); font-weight: 900; line-height: 1.2; letter-spacing: -.03em; }
.lx-facts dd { margin: 8px 0 0; color: var(--t4-muted); font-size: 13.5px; font-weight: 600; }

.lx-path-list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.lx-path-list li { position: relative; min-width: 0; }
.lx-path-line { position: absolute; z-index: 0; top: 50%; inset-inline-start: 42%; inset-inline-end: -18px; border-top: 1.5px dashed color-mix(in srgb, var(--t4-blue) 42%, transparent); pointer-events: none; }
.lx-path-list li:last-child .lx-path-line { display: none; }
.lx-path-card { position: relative; z-index: 1; display: grid; align-content: start; gap: 10px; height: 100%; padding: 24px; border: 1px solid var(--t4-line); border-radius: 28px; background: var(--t4-surface); transition: transform .45s var(--t4-ease), box-shadow .45s; }
.lx-path-card:hover { transform: translateY(-6px); box-shadow: var(--lx-lift); }
.lx-path-num { color: color-mix(in srgb, var(--t4-ink) 18%, transparent); font-size: 40px; font-weight: 300; line-height: 1; letter-spacing: -.04em; }
.lx-path-icon { position: absolute; top: 22px; inset-inline-end: 22px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: var(--t4-blue); color: #fff; }
.lx-path-icon svg { width: 26px; height: 26px; }
.t4-lx .lx-path-list h3 { margin: 12px 0 0; font-size: 20px; font-weight: 850; }
.lx-path-list p { margin: 0; color: var(--t4-muted); font-size: 13.5px; line-height: 2; }

.lx-principles { background: var(--lx-band); box-shadow: 0 0 0 100vmax var(--lx-band); clip-path: inset(0 -100vmax); }
.lx-principle-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lx-principle-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 20px; padding: 26px; border: 1px solid var(--t4-line); border-radius: 26px; background: var(--t4-surface); transition: transform .45s var(--t4-ease), border-color .35s; }
.lx-principle-list li:nth-child(even) { margin-inline-start: clamp(0px, 5vw, 64px); }
.lx-principle-list li:hover { transform: translateX(-6px); border-color: color-mix(in srgb, var(--t4-blue) 32%, var(--t4-line)); }
.lx-principle-list li > span { grid-row: span 2; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--t4-blue-soft); color: var(--t4-blue); font-size: 18px; font-weight: 850; }
.t4-lx .lx-principle-list h3 { margin: 4px 0 0; font-size: 18px; font-weight: 850; line-height: 1.7; }
.lx-principle-list p { margin: 0; color: var(--t4-muted); font-size: 14px; line-height: 2; }

.lx-toc { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--t4-line); }
.lx-toc a { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) 120px 46px; align-items: center; gap: 20px; padding: 20px 4px; border-bottom: 1px solid var(--t4-line); color: var(--t4-ink); transition: padding .45s var(--t4-ease), background .35s; }
.lx-toc a:hover { padding-inline: 18px; background: var(--t4-surface); }
.lx-toc-num { color: var(--t4-blue); font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.lx-toc strong { font-size: clamp(18px, 2vw, 26px); font-weight: 850; }
.lx-toc small { color: var(--t4-muted); font-size: 13.5px; }
.lx-toc img { width: 120px; height: 72px; object-fit: contain; opacity: 0; transform: scale(.85) rotate(-6deg); transition: opacity .35s, transform .45s var(--t4-ease); }
.lx-toc a:hover img, .lx-toc a:focus-visible img { opacity: 1; transform: none; }
.lx-toc a:hover .lx-arrow { border-color: var(--t4-blue); background: var(--t4-blue); color: #fff; transform: rotate(-12deg); }

.lx-products-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 32px; padding: clamp(28px, 4.5vw, 60px); border: 1px solid var(--t4-line); border-radius: 36px; background: radial-gradient(500px 260px at 0% 100%, var(--t4-blue-soft), transparent 70%), var(--t4-surface); }
.lx-products-card .lx-intro { margin-top: 16px; }
.lx-products-art img { width: 100%; height: auto; max-height: 280px; object-fit: contain; }

.lx-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.t4-lx .t4-lx-page > section.lx-social { padding-block: 8px 24px; }
.lx-social > p { margin: 0; color: var(--t4-ink); font-size: clamp(18px, 2vw, 24px); font-weight: 850; }
.lx-social ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lx-social a { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px solid var(--t4-line); border-radius: 99px; background: var(--t4-surface); color: var(--t4-ink); font-size: 13.5px; font-weight: 750; transition: border-color .25s, color .25s, transform .35s var(--t4-ease); }
.lx-social a:hover { border-color: var(--t4-blue); color: var(--t4-blue); transform: translateY(-3px); }
.lx-social svg { width: 20px; height: 20px; }

/* Contact */
.lx-chat { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; width: min(100%, 500px); margin-inline: auto; padding: 42px 30px; }
.lx-chat .lx-page-ring { width: 100%; }
.lx-chat-avatar { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; background: var(--t4-blue); color: #fff; box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--t4-blue) 80%, transparent); }
.lx-chat-avatar :is(svg, img) { width: 52%; height: auto; color: #fff; }
.lx-bubble { max-width: 82%; margin: 0; padding: 16px 20px; border-radius: 22px; font-size: 14.5px; font-weight: 650; line-height: 1.95; box-shadow: var(--t4-shadow); }
.lx-bubble.is-them { align-self: flex-start; border: 1px solid var(--t4-line); border-start-start-radius: 6px; background: var(--t4-surface); color: var(--t4-ink); }
.lx-bubble.is-us { align-self: flex-end; border-start-end-radius: 6px; background: var(--lx-grad); color: #fff; }
.lx-bubble.is-typing { display: inline-flex; align-self: flex-start; gap: 5px; padding: 16px 18px; border: 1px solid var(--t4-line); background: var(--t4-surface); }
.lx-bubble.is-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--t4-muted); opacity: .5; }

.t4-lx .t4-lx-page > section.lx-channels { padding-top: 0; }
.lx-channel-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.lx-channel { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 24px; border: 1px solid var(--t4-line); border-radius: 26px; background: var(--t4-surface); transition: transform .45s var(--t4-ease), box-shadow .45s, border-color .35s; }
.lx-channel:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--t4-blue) 30%, var(--t4-line)); box-shadow: var(--lx-lift); }
.lx-channel:first-child { border-color: transparent; background: linear-gradient(155deg, var(--t4-blue), #064f78); color: #fff; }
.lx-channel-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 6px; border-radius: 16px; background: var(--t4-blue-soft); color: var(--t4-blue); font-size: 24px; }
.lx-channel:first-child .lx-channel-icon { background: rgb(255 255 255 / 16%); color: #fff; }
.t4-lx .lx-channel h2 { margin: 0; color: inherit; font-size: 18px; font-weight: 850; }
.lx-channel p { margin: 0; color: var(--t4-muted); font-size: 13.5px; line-height: 1.95; overflow-wrap: anywhere; }
.lx-channel p[dir="ltr"] { text-align: right; }
.lx-channel:first-child p { color: #d4e8f0; }
.lx-channel-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 0 0; border: 0; background: none; color: var(--t4-blue); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.lx-channel-go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lx-channel-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--t4-ease); }
.lx-channel:hover .lx-channel-go svg { transform: translateX(-4px); }
.lx-channel:first-child .lx-channel-go { color: #fff; }

.lx-contact-main { background: var(--lx-band); box-shadow: 0 0 0 100vmax var(--lx-band); clip-path: inset(0 -100vmax); }
.lx-contact-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.t4-site .lx-form-card.t4-contact-studio { padding: clamp(24px, 4vw, 48px); border: 1px solid var(--t4-line); border-radius: 34px; background: var(--t4-surface); box-shadow: var(--lx-lift); }
.lx-form-card .lx-intro { margin: 14px 0 26px; }
.t4-site .lx-form-card .alert-warning { border: 1px solid color-mix(in srgb, var(--t4-blue) 18%, var(--t4-line)); border-radius: 16px; background: var(--t4-blue-soft); color: var(--t4-ink); box-shadow: none; }
.lx-form-card .alert-warning > span[class*="icon-"] { color: var(--t4-blue); }
.lx-topics { margin-inline: 0; padding: 0; border: 0; }
.lx-topics legend { display: block; margin-bottom: 12px; }
.lx-topics > div { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-topics label { position: relative; }
.lx-topics input { position: absolute; opacity: 0; pointer-events: none; }
.lx-topics span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--t4-line); border-radius: 99px; background: var(--t4-paper); color: var(--t4-ink); font-size: 13px; font-weight: 650; transition: border-color .25s, background .25s, color .25s; }
.lx-topics label:hover span { border-color: var(--t4-blue); }
.lx-topics input:checked + span { border-color: var(--t4-blue); background: var(--t4-blue); color: #fff; }
.lx-topics input:focus-visible + span { outline: 3px solid var(--t4-blue); outline-offset: 3px; }
.lx-contact-aside { position: sticky; top: var(--lx-sticky); display: grid; gap: 16px; }
.lx-next { padding: 28px; border-radius: 30px; background: var(--lx-night); color: #e6eff2; }
.lx-next-title { margin: 0 0 18px; color: #fff; font-size: 18px; font-weight: 850; }
.lx-next ol { position: relative; display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.lx-next ol::before { content: ""; position: absolute; top: 20px; bottom: 20px; inset-inline-start: 19px; border-inline-start: 1.5px dashed rgb(127 224 222 / 40%); }
.lx-next li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.lx-next li > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #7fe0de; color: #0d2430; font-size: 12px; font-weight: 850; }
.lx-next strong { display: block; color: #fff; font-size: 14.5px; }
.lx-next p { margin: 2px 0 0; color: #aac1c8; font-size: 13px; line-height: 1.9; }
.lx-contact-social { padding: 22px 24px; border: 1px solid var(--t4-line); border-radius: 26px; background: var(--t4-surface); }
.lx-contact-social > p { margin: 0; font-weight: 800; }
.lx-contact-social .t4-contact-socials { margin-top: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .lx-marquee-track { animation: lx-marquee 38s linear infinite; }
  .lx-marquee:hover .lx-marquee-track { animation-play-state: paused; }
  .lx-orbit-spin.is-outer { animation: lx-spin 46s linear infinite; }
  .lx-orbit-spin.is-inner { animation: lx-spin 32s linear infinite reverse; }
  .lx-orbit-spin.is-outer .lx-orbit-node > span > span { animation: lx-spin 46s linear infinite reverse; }
  .lx-orbit-spin.is-inner .lx-orbit-node > span > span { animation: lx-spin 32s linear infinite; }
  .lx-bubble.is-typing i { animation: lx-typing 1.2s ease-in-out infinite; }
  .lx-bubble.is-typing i:nth-child(2) { animation-delay: .15s; }
  .lx-bubble.is-typing i:nth-child(3) { animation-delay: .3s; }
  .lx-chat .lx-bubble { animation: lx-rise .7s var(--t4-ease) both; }
  .lx-chat .lx-bubble.is-us { animation-delay: .5s; }
  .lx-chat .lx-bubble.is-typing { animation: lx-rise .7s var(--t4-ease) 1s both; }
}
@keyframes lx-marquee { to { transform: translateX(50%); } }
@keyframes lx-typing { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes lx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 1199px) {
  .lx-toc a { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 46px; }
  .lx-toc img { display: none; }
}
@media (max-width: 1023px) {
  .lx-page-hero, .lx-guide-body, .lx-contact-grid, .lx-products-card { grid-template-columns: minmax(0, 1fr); }
  .lx-hub-grid, .lx-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-hub-card:first-child { grid-column: 1 / -1; }
  .lx-model.is-featured { grid-column: 1 / -1; order: -1; transform: none; }
  .lx-path-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-path-list li:nth-child(2n) .lx-path-line { display: none; }
  .lx-contact-aside { position: static; }
  .lx-orbit { width: min(100%, 460px); }
}
@media (max-width: 767px) {
  .lx-orbit { width: 100%; }
  .lx-orbit-node > span { width: 44px; height: 44px; }
  .lx-orbit-node svg { width: 18px; height: 18px; }
  .lx-hub-grid, .lx-model-grid, .lx-path-list { grid-template-columns: minmax(0, 1fr); }
  .lx-path-line { display: none; }
  .lx-hub-card:first-child, .lx-hub-card:last-child { display: flex; grid-column: auto; }
  .lx-hub-card:first-child .lx-hub-art { order: 0; min-height: 0; height: 190px; margin-bottom: 18px; }
  .lx-hub-card:last-child .lx-hub-art { height: 190px; margin-bottom: 18px; }
  .lx-facts { grid-template-columns: minmax(0, 1fr); }
  .lx-facts > div + div { border-inline-start: 0; border-top: 1px solid var(--t4-line); }
  .lx-principle-list li { grid-template-columns: 48px minmax(0, 1fr); padding: 20px; }
  .lx-principle-list li > span { width: 48px; height: 48px; border-radius: 15px; font-size: 15px; }
  .lx-principle-list li:nth-child(even) { margin-inline-start: 0; }
  .lx-toc a { grid-template-columns: 34px minmax(0, 1fr) 40px; gap: 4px 12px; }
  .lx-toc small { grid-column: 2; grid-row: 2; }
  .lx-toc .lx-arrow { grid-column: 3; grid-row: 1 / 3; width: 40px; height: 40px; }
  .lx-collage { aspect-ratio: 1.1; }
  .lx-social { flex-direction: column; align-items: flex-start; }
  .lx-guide-panel { padding: 20px; }
  .lx-guide-panel li a { grid-template-columns: 40px minmax(0, 1fr); }
  .lx-guide-step { grid-column: 1 / -1; }
  .lx-chat { padding: 28px 8px; }
  .lx-bubble { max-width: 92%; font-size: 13.5px; }
}

/* ───────── Cost calculator ───────── */
.lx-calc-section { scroll-margin-top: 110px; }
.lx-calc { display: grid; grid-template-columns: minmax(260px, .34fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); align-items: start; }
.lx-calc-aside { position: sticky; top: var(--lx-sticky); display: grid; gap: 22px; padding: 26px 22px; border-radius: 30px; background: radial-gradient(420px 260px at 100% 0%, rgb(8 164 167 / 28%), transparent 62%), var(--lx-night); color: #e6eff2; }
.lx-calc-aside-title { display: flex; align-items: center; gap: 10px; margin: 0; color: #7fe0de; font-size: 13px; font-weight: 800; }
.lx-calc-aside-title > span { font-size: 20px; }
.lx-calc-steps { position: relative; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lx-calc-steps::before { content: ""; position: absolute; top: 24px; bottom: 24px; inset-inline-start: 25px; border-inline-start: 1.5px dashed rgb(127 224 222 / 28%); }
.lx-calc-steps button { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; padding: 8px 8px; border: 0; border-radius: 16px; background: none; color: inherit; font: inherit; text-align: start; cursor: default; transition: background .25s; }
.lx-calc-steps li.is-done button:not(:disabled) { cursor: pointer; }
.lx-calc-steps li.is-done button:not(:disabled):hover { background: rgb(255 255 255 / 6%); }
.lx-calc-step-num { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid rgb(255 255 255 / 22%); border-radius: 50%; background: var(--lx-night); color: rgb(255 255 255 / 60%); font-size: 12px; font-weight: 800; transition: background .3s, border-color .3s, color .3s, box-shadow .3s; }
.lx-calc-step-copy { display: grid; gap: 1px; min-width: 0; }
.lx-calc-step-copy strong { color: rgb(255 255 255 / 70%); font-size: 14px; font-weight: 750; line-height: 1.7; }
.lx-calc-step-copy small { overflow: hidden; color: rgb(255 255 255 / 45%); font-size: 11.5px; line-height: 1.7; white-space: nowrap; text-overflow: ellipsis; }
.lx-calc-steps li.is-current .lx-calc-step-num { border-color: #7fe0de; background: #7fe0de; color: #0d2430; box-shadow: 0 0 0 6px rgb(127 224 222 / 14%); }
.lx-calc-steps li.is-current strong { color: #fff; }
.lx-calc-steps li.is-done .lx-calc-step-num { border-color: transparent; background: var(--t4-blue); color: transparent; }
.lx-calc-steps li.is-done .lx-calc-step-num::after { content: ""; position: absolute; inset: 0; margin: auto; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.lx-calc-steps li.is-done strong { color: #fff; }
.lx-calc-steps li.is-done small { color: #9fdcda; }
.lx-calc-meter > div { display: flex; justify-content: space-between; margin-bottom: 8px; color: rgb(255 255 255 / 60%); font-size: 12px; }
.lx-calc-meter b { color: #7fe0de; font-weight: 800; }
.lx-calc-meter-bar { display: block; height: 6px; border-radius: 99px; background: rgb(255 255 255 / 10%); overflow: hidden; }
.lx-calc-meter-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--t4-teal), #7fe0de); transition: width .5s var(--t4-ease); }
.lx-calc-note { display: flex; gap: 8px; margin: 0; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / 10%); color: #aac1c8; font-size: 12px; line-height: 1.9; }
.lx-calc-note > span { flex-shrink: 0; margin-top: 3px; color: #7fe0de; font-size: 16px; }

.lx-calc-panel { min-width: 0; padding: clamp(22px, 3.4vw, 44px); border: 1px solid var(--t4-line); border-radius: 30px; background: var(--t4-surface); box-shadow: var(--lx-lift); }
.lx-calc-step, .lx-calc-result { animation: lx-drop .45s var(--t4-ease); }
.lx-calc-step-head { margin-bottom: 26px; }
.lx-calc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--t4-blue-soft); color: var(--t4-blue); font-size: 11.5px; font-weight: 800; }
.lx-calc-badge.is-done { background: color-mix(in srgb, var(--t4-teal) 14%, transparent); color: var(--t4-teal-text, var(--t4-teal)); }
.lx-calc-badge.is-done > span { font-size: 16px; }
.t4-lx .lx-calc-step-head h3 { margin: 14px 0 6px; color: var(--t4-ink); font-size: clamp(20px, 2vw, 26px); font-weight: 850; line-height: 1.6; }
.lx-calc-step-head p { margin: 0; color: var(--t4-muted); font-size: 13.5px; line-height: 2; }

.lx-calc-options { display: flex; flex-wrap: wrap; gap: 12px; }
.t4-site .lx-calc-option { position: relative; display: flex; flex: 1 1 190px; align-items: center; gap: 14px; min-width: 0; padding: 16px 18px; border: 1px solid var(--t4-line); border-radius: 20px; background: var(--t4-surface); color: var(--t4-ink); cursor: pointer; transition: border-color .25s, background .25s, box-shadow .3s, transform .35s var(--t4-ease); }
.t4-site .lx-calc-option:hover { border-color: color-mix(in srgb, var(--t4-blue) 45%, var(--t4-line)); transform: translateY(-2px); box-shadow: 0 16px 30px -24px rgb(16 46 60 / 45%); }
.t4-site .lx-calc-option:has(input:checked) { border-color: var(--t4-blue); background: var(--t4-blue-soft); }
.lx-calc-option-icon { display: grid; flex-shrink: 0; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--t4-blue-soft); color: var(--t4-blue); font-size: 22px; transition: background .25s, color .25s, transform .35s var(--t4-ease); }
.lx-calc-option:has(input:checked) .lx-calc-option-icon { background: var(--t4-blue); color: #fff; transform: rotate(-6deg); }
.lx-calc-option-label { display: grid; flex: 1; gap: 2px; min-width: 0; font-size: 14px; font-weight: 750; line-height: 1.7; }
.lx-calc-option-label small { color: var(--t4-muted); font-size: 12px; font-weight: 500; line-height: 1.8; }
.lx-calc-check { position: relative; flex-shrink: 0; width: 22px; height: 22px; border: 1.5px solid var(--t4-line); border-radius: 50%; transition: background .25s, border-color .25s; }
.lx-calc-option:has(input:checked) .lx-calc-check { border-color: var(--t4-blue); background: var(--t4-blue); }
.lx-calc-option:has(input:checked) .lx-calc-check::after { content: ""; position: absolute; inset: 0; width: 5px; height: 9px; margin: auto; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.lx-calc-options.is-cards .lx-calc-option { flex-basis: 200px; flex-direction: column; align-items: flex-start; gap: 18px; min-height: 138px; padding: 20px; }
.lx-calc-options.is-cards .lx-calc-option-label { flex: 0; font-size: 14.5px; }
.lx-calc-options.is-cards .lx-calc-check { position: absolute; top: 18px; inset-inline-end: 18px; }
.lx-calc-options.is-wide .lx-calc-option { flex-basis: 300px; padding: 22px; }
.lx-calc-options.is-wide .lx-calc-option-icon { width: 54px; height: 54px; border-radius: 17px; font-size: 26px; }
.lx-calc-options.is-chips { gap: 10px; }
.t4-site .lx-calc-options.is-chips .lx-calc-option { flex-basis: 170px; gap: 10px; padding: 10px 12px; border-radius: 16px; }
.lx-calc-options.is-chips .lx-calc-option-icon { width: 36px; height: 36px; border-radius: 11px; font-size: 18px; }
.lx-calc-options.is-chips .lx-calc-option-label { font-size: 13px; }
.lx-calc-options.is-chips .lx-calc-check { width: 18px; height: 18px; }
.lx-calc-options.is-rows .lx-calc-option { flex-basis: 280px; }
.lx-calc-hint { margin: 16px 0 0; color: var(--t4-muted); font-size: 12.5px; }

.lx-calc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lx-calc-fields .is-full { grid-column: 1 / -1; }
.lx-calc-error { color: var(--t4-field-error, #b63649); font-size: 12px; }

.lx-calc-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 30px; padding-top: 22px; border-top: 1px dashed var(--t4-line); }
.lx-calc-nav .lx-btn-main { margin-inline-start: auto; }
.lx-calc-nav .lx-btn-main:disabled { box-shadow: none; }

.lx-calc-quote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.lx-calc-quote > div { display: grid; gap: 4px; padding: 22px 24px; border-radius: 22px; background: var(--lx-band); }
.lx-calc-quote > div:first-child { background: radial-gradient(120% 90% at 0% 100%, rgb(8 164 167 / 45%), transparent 60%), linear-gradient(150deg, var(--t4-blue), #065c8b); color: #fff; }
.lx-calc-quote span { color: var(--t4-muted); font-size: 12.5px; font-weight: 700; }
.lx-calc-quote strong { color: var(--t4-ink); font-size: clamp(26px, 3vw, 38px); font-weight: 900; line-height: 1.4; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lx-calc-quote strong b { font-weight: inherit; }
.lx-calc-quote small { color: var(--t4-muted); font-size: 12.5px; }
.lx-calc-quote > div:first-child :is(span, small) { color: rgb(255 255 255 / 72%); }
.lx-calc-quote > div:first-child strong { color: #fff; }
.lx-calc-label { margin: 0 0 12px; color: var(--t4-ink); font-size: 13px; font-weight: 800; }
.lx-calc-features { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.lx-calc-features li { display: flex; align-items: flex-start; gap: 8px; color: var(--t4-ink); font-size: 13.5px; line-height: 1.8; }
.lx-calc-features li > span { flex-shrink: 0; margin-top: 4px; color: var(--t4-blue); }
.lx-calc-groups { display: grid; gap: 22px; }
.lx-calc-groups h4 { margin: 0 0 10px; color: var(--t4-ink); font-size: 14px; font-weight: 800; }
.lx-calc-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lx-calc-picks li { padding: 6px 14px; border: 1px solid var(--t4-line); border-radius: 99px; background: var(--t4-paper); color: var(--t4-ink); font-size: 12.5px; font-weight: 650; }
.lx-calc-picks li:nth-child(-n + 2) { border-color: transparent; background: var(--t4-blue-soft); color: var(--t4-blue); }
.lx-calc-callout { margin: 18px 0 0; padding: 14px 18px; border-inline-start: 3px solid var(--t4-teal); border-radius: 14px; background: var(--lx-band); color: var(--t4-muted); font-size: 13px; line-height: 2; }
.lx-calc-result .alert { margin-top: 16px; }

@media (max-width: 1023px) {
  .lx-calc { grid-template-columns: minmax(0, 1fr); }
  .lx-calc-aside { position: static; gap: 16px; padding: 18px; border-radius: 24px; }
  .lx-calc-aside-title, .lx-calc-note { display: none; }
  .lx-calc-steps { grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); overflow-x: auto; scrollbar-width: none; }
  .lx-calc-steps::before { top: 26px; bottom: auto; inset-inline: 24px; border-inline-start: 0; border-top: 1.5px dashed rgb(127 224 222 / 28%); }
  .lx-calc-steps button { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px; text-align: center; }
  .lx-calc-step-copy small { display: none; }
  .lx-calc-step-copy strong { font-size: 12px; }
}
@media (max-width: 639px) {
  .lx-calc-fields, .lx-calc-quote { grid-template-columns: minmax(0, 1fr); }
  .lx-calc-fields .is-full { grid-column: auto; }
  .t4-site .lx-calc-option { flex-basis: 100%; }
  .lx-calc-options.is-cards .lx-calc-option { flex-basis: calc(50% - 6px); min-height: 118px; padding: 16px; }
  .t4-site .lx-calc-options.is-chips .lx-calc-option { flex-basis: calc(50% - 5px); }
  .lx-calc-nav .lx-btn-main { width: 100%; }
}

/* ───────── Two routes (web design) ───────── */
.lx-duo { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); align-items: stretch; }
.lx-duo-card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.6vw, 32px); border: 1px solid var(--t4-line); border-radius: 34px; background: radial-gradient(360px 220px at 100% 0%, color-mix(in srgb, var(--t4-teal) 12%, transparent), transparent 70%), var(--t4-surface); overflow: hidden; transition: transform .5s var(--t4-ease), box-shadow .5s, border-color .4s; }
.lx-duo-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--t4-blue) 30%, var(--t4-line)); box-shadow: var(--lx-lift); }
.lx-duo-card.is-featured { border-color: transparent; background: radial-gradient(520px 320px at 0% 100%, rgb(8 164 167 / 38%), transparent 62%), radial-gradient(420px 260px at 100% 0%, rgb(0 120 184 / 55%), transparent 62%), var(--lx-night); color: #e6eff2; }
.lx-duo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.lx-duo-route { color: var(--t4-blue); font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.lx-duo-pill { padding: 5px 13px; border-radius: 99px; background: var(--t4-blue-soft); color: var(--t4-blue); font-size: 11.5px; font-weight: 800; }
.is-featured .lx-duo-route { color: #7fe0de; }
.is-featured .lx-duo-pill { background: rgb(127 224 222 / 14%); color: #7fe0de; }
.lx-duo-media { padding: 10px; border-radius: 26px; background: color-mix(in srgb, var(--t4-blue) 6%, var(--t4-paper)); box-shadow: inset 0 0 0 1px var(--t4-line); }
.is-featured .lx-duo-media { background: rgb(255 255 255 / 6%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); }
.lx-duo-media > div { border-radius: 18px; background: none; }
.lx-duo-media img { transition: transform .8s var(--t4-ease); }
.lx-duo-card:hover .lx-duo-media img { transform: scale(1.035); }
.t4-lx .lx-duo-card h3 { margin: 24px 0 8px; color: inherit; font-size: clamp(21px, 2vw, 27px); font-weight: 850; line-height: 1.55; }
.t4-lx .is-featured h3 { color: #fff; }
.lx-duo-desc { margin: 0; color: var(--t4-muted); font-size: 14px; line-height: 2.05; }
.is-featured .lx-duo-desc { color: #b9ccd2; }
.lx-duo-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0 0; border-block: 1px solid var(--t4-line); }
.lx-duo-stats > div { padding: 14px 12px; }
.lx-duo-stats > div + div { border-inline-start: 1px solid var(--t4-line); }
.lx-duo-stats dt { color: var(--t4-muted); font-size: 11.5px; font-weight: 650; }
.lx-duo-stats dd { margin: 3px 0 0; color: var(--t4-ink); font-size: 15px; font-weight: 850; }
.is-featured .lx-duo-stats, .is-featured .lx-duo-stats > div + div { border-color: rgb(255 255 255 / 12%); }
.is-featured .lx-duo-stats dt { color: #9ab3ba; }
.is-featured .lx-duo-stats dd { color: #fff; }
.lx-duo-label { margin: 22px 0 10px; color: var(--t4-ink); font-size: 12.5px; font-weight: 800; }
.is-featured .lx-duo-label { color: #7fe0de; }
.lx-duo-checks { margin: 0; padding: 0; gap: 8px 18px; }
.is-featured .lx-duo-checks li { color: #e4eef1; }
.is-featured .lx-tick { background: rgb(127 224 222 / 16%); }
.is-featured .lx-tick::after { border-color: #7fe0de; }
.lx-duo-tags { margin: 0; }
.is-featured .lx-duo-tags li { background: rgb(255 255 255 / 8%); color: #cfdde1; }
.lx-duo-or { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; place-items: center; width: 58px; height: 58px; border: 6px solid var(--t4-paper); border-radius: 50%; background: var(--lx-grad); color: #fff; font-size: 14px; font-weight: 900; box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--t4-blue) 70%, transparent); translate: -50% -50%; }

/* ───────── Versus table (web design) ───────── */
.lx-vs-wrap { overflow-x: auto; overscroll-behavior-x: contain; contain: paint; contain: paint; padding: 18px 0 4px; scrollbar-width: thin; }
.lx-vs { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.lx-vs :is(th, td) { padding: 18px 22px; border: 0; text-align: start; vertical-align: middle; }
.lx-vs col, .lx-vs thead th:first-child { width: 34%; }
.lx-vs thead th { padding-block: 26px 22px; vertical-align: bottom; }
.lx-vs-corner span { display: block; color: var(--t4-ink); font-size: 16px; font-weight: 850; }
.lx-vs-corner small, .lx-vs thead small { display: block; margin-top: 2px; color: var(--t4-muted); font-size: 12px; font-weight: 550; }
.lx-vs thead strong { display: block; margin-top: 12px; font-size: 18px; font-weight: 850; line-height: 1.5; }
.lx-vs-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--t4-blue-soft); color: var(--t4-blue); font-size: 23px; }
.lx-vs .is-custom { position: relative; background: var(--t4-blue); color: #fff; }
.lx-vs thead .is-custom { background: radial-gradient(120% 120% at 100% 0%, rgb(127 224 222 / 30%), transparent 60%), var(--t4-blue); }
.lx-vs tbody tr:last-child .is-custom { background: linear-gradient(180deg, var(--t4-blue), #05659b); }
.lx-vs thead .is-custom { border-start-start-radius: 26px; border-start-end-radius: 26px; }
.lx-vs tbody tr:last-child .is-custom { border-end-start-radius: 26px; border-end-end-radius: 26px; }
.lx-vs .is-custom .lx-vs-icon { background: rgb(255 255 255 / 16%); color: #fff; }
.lx-vs thead .is-custom small { color: rgb(255 255 255 / 70%); }
.lx-vs-badge { position: absolute; top: -12px; inset-inline-start: 22px; padding: 4px 12px; border-radius: 99px; background: #7fe0de; color: #0d2430; font-size: 11px; font-weight: 850; }
.lx-vs tbody :is(th, td) { border-top: 1px solid var(--t4-line); font-size: 14px; }
.lx-vs tbody td.is-custom { border-top-color: rgb(255 255 255 / 14%); }
.lx-vs tbody th { display: flex; align-items: center; gap: 12px; color: var(--t4-ink); font-weight: 750; }
.lx-vs-row-icon { display: grid; flex-shrink: 0; place-items: center; width: 36px; height: 36px; border: 1px solid var(--t4-line); border-radius: 12px; background: var(--t4-surface); color: var(--t4-blue); font-size: 18px; transition: background .3s, color .3s, border-color .3s; }
.lx-vs tbody tr { transition: background .3s; }
.lx-vs tbody tr:hover :is(th, td.is-template) { background: color-mix(in srgb, var(--t4-blue) 5%, transparent); }
.lx-vs tbody tr:hover td.is-custom { background: color-mix(in srgb, var(--t4-blue), #fff 10%); }
.lx-vs tbody tr:hover .lx-vs-row-icon { border-color: var(--t4-blue); background: var(--t4-blue); color: #fff; }
.lx-vs-value { display: flex; align-items: center; gap: 8px; color: var(--t4-muted); font-weight: 650; }
.lx-vs .is-custom .lx-vs-value { color: rgb(255 255 255 / 78%); }
.lx-vs-value.is-win { color: var(--t4-ink); font-weight: 850; }
.lx-vs .is-custom .lx-vs-value.is-win { color: #fff; }
.lx-vs-value > [class*="icon-"] { color: var(--t4-teal-text, var(--t4-teal)); font-size: 19px; }
.lx-vs .is-custom .lx-vs-value > [class*="icon-"] { color: #7fe0de; }
.lx-vs-legend { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--t4-muted); font-size: 12.5px; }
.lx-vs-legend > span { color: var(--t4-teal-text, var(--t4-teal)); font-size: 17px; }

@media (max-width: 1023px) {
  .lx-duo { grid-template-columns: minmax(0, 1fr); }
  .lx-duo-or { position: relative; top: auto; left: auto; justify-self: center; margin-block: -44px; translate: none; }
}
@media (max-width: 639px) {
  .lx-duo-stats { grid-template-columns: minmax(0, 1fr); }
  .lx-duo-stats > div { display: flex; justify-content: space-between; padding-inline: 4px; }
  .lx-duo-stats > div + div { border-inline-start: 0; border-top: 1px solid var(--t4-line); }
  .is-featured .lx-duo-stats > div + div { border-color: rgb(255 255 255 / 12%); }
  .lx-duo-card { border-radius: 26px; }
  .lx-vs-wrap { margin-inline: calc(var(--t4-gutter) * -1); padding-inline: var(--t4-gutter); }
  .lx-vs { min-width: 560px; }
  .lx-vs :is(th, td) { padding: 14px 14px; }
}

/* Hand-written utility grids inside landings also close their last row. */
@media (max-width: 1023px) {
  .t4-lx .t4-main section .grid-cols-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .t4-lx .t4-main section .sm\:grid-cols-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .t4-lx .t4-main section :is(.grid-cols-2, .sm\:grid-cols-2):not([class*="lg:grid-cols-"]) > :last-child:nth-child(odd),
  .t4-lx .t4-main section .lg\:grid-cols-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .t4-lx .t4-main section .lg\:grid-cols-3 > :last-child:nth-child(3n + 2) { grid-column: span 2; }
  .t4-lx .t4-main section .lg\:grid-cols-3:has(> :last-child:nth-child(3n + 4)) > :is(:first-child, :last-child) { grid-column: span 2; }
  .t4-lx .t4-main section .lg\:grid-cols-4 > :last-child:nth-child(4n + 3) { grid-column: span 2; }
  .t4-lx .t4-main section .lg\:grid-cols-4 > :is(:last-child:nth-child(4n + 2), :nth-last-child(2):nth-child(4n + 1)) { grid-column: span 2; }
  .t4-lx .t4-main section .lg\:grid-cols-4 > :last-child:nth-child(4n + 5) { grid-column: 1 / -1; }
}

/* Brand illustrations — one palette for light and dark. */
.lx-scene { display: block; width: 100%; height: auto; }
.lx-scene .is-paper { fill: var(--t4-surface); }
.lx-scene .is-soft { fill: var(--t4-blue-soft); }
.lx-scene .is-blue { fill: var(--t4-blue); }
.lx-scene .is-teal { fill: var(--t4-teal); }
.lx-scene .is-muted { fill: var(--t4-muted); }
.lx-scene .is-line { fill: none; stroke: color-mix(in srgb, var(--t4-blue) 28%, var(--t4-line)); stroke-width: 1.5; }
.lx-scene [stroke] { fill: none; }
.lx-scene.is-film .is-night { fill: #102e3c; }
.lx-scene.is-film .is-glow { fill: var(--t4-blue); opacity: .45; }
.lx-scene.is-film .is-glow-teal { fill: var(--t4-teal); opacity: .35; }
.lx-scene.is-film .is-paper { fill: #f7fbfd; }
.lx-scene.is-film .is-soft { fill: #d5ebf6; }
.lx-scene-frame { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.lx-page-hero.is-catalog .lx-page-hero-art,
.lx-page-hero.is-work .lx-page-hero-art { display: grid; place-items: center; min-height: 0; }
.lx-page-hero.is-work .lx-scene-frame,
.lx-page-hero.is-work .t4-stack-art { width: 100%; }
.t4-shop-lead { max-width: 42em; margin: 4px 0 18px; color: var(--t4-muted); font-size: 14px; line-height: 2; }
.lx-scene-shop [data-float="window"] { animation: lx-float 5.6s ease-in-out infinite; }
.lx-scene-shop [data-float="plugin"] { animation: lx-float 6.4s ease-in-out infinite reverse; }
.lx-scene-shop [data-float="code"] { animation: lx-float 4.8s .2s ease-in-out infinite; }
.lx-scene-shop [data-pulse="price"] { animation: lx-pop 3.8s ease-in-out infinite; transform-origin: 436px 66px; }
.lx-scene-shop [data-cursor] { animation: lx-draw 4.6s ease-in-out infinite; }
.lx-scene-shop [data-orbit] { transform-box: view-box; transform-origin: 248px 138px; }
.lx-scene-shop [data-orbit="outer"] { animation: t4-rail-orbit 42s linear infinite; }
.lx-scene-shop [data-orbit="mid"] { animation: t4-rail-orbit 28s linear infinite reverse; }
.lx-scene-work [data-orbit] { transform-box: view-box; transform-origin: 270px 200px; }
.lx-scene-work [data-orbit="outer"] { animation: t4-rail-orbit 46s linear infinite; }
.lx-scene-work [data-orbit="mid"] { animation: t4-rail-orbit 30s linear infinite reverse; }
@media (prefers-reduced-motion: no-preference) {
  .t4-shop-landing .t4-stack-art [data-art-piece] { transform-box: fill-box; transform-origin: center; }
  .t4-shop-landing .t4-stack-art [data-art-piece="module-top"] { animation: t4-shop-layer 5.4s ease-in-out infinite; }
  .t4-shop-landing .t4-stack-art [data-art-piece="module-mid"] { animation: t4-shop-layer 6.6s ease-in-out infinite reverse; }
  .t4-shop-landing .t4-stack-art [data-art-piece="module-base"] { animation: t4-shop-layer 4.8s .35s ease-in-out infinite; }
}
@keyframes t4-shop-layer { 0%, 100% { translate: 0 0; } 50% { translate: 0 -18px; } }
.t4-stack-art { width: 100%; min-width: 0; }
.t4-stack-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.lx-products-art.t4-stack-art { min-height: 240px; }
.lx-page-hero.is-shop .lx-page-hero-art { display: grid; place-items: center; min-height: 280px; }
.t4-shop { padding-bottom: 28px; }
.t4-shop-editions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
  margin-top: 18px;
}
.t4-shop-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--t4-blue) 16%, var(--t4-line));
  border-radius: 28px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--t4-blue-soft) 70%, transparent), transparent 120px),
    var(--t4-surface);
  box-shadow: 0 18px 36px -28px #102e3c70, inset 0 1px 0 #ffffffcc;
  color: var(--t4-ink);
  transition: transform .35s var(--t4-ease), box-shadow .35s, border-color .35s;
}
.t4-shop-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--t4-blue) 42%, var(--t4-line));
  box-shadow: 0 28px 46px -26px #102e3c88;
}
.t4-shop-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  margin: 10px 10px 0;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(140px 90px at 100% 0%, color-mix(in srgb, var(--t4-teal) 18%, transparent), transparent 72%),
    var(--t4-soft);
}
.t4-shop-card-image,
.t4-shop-card-media img,
.t4-shop-card-media .t4-image-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--t4-ease);
}
.t4-shop-card:hover .t4-shop-card-image,
.t4-shop-card:hover .t4-shop-card-media img { transform: scale(1.04); }
.t4-shop-card-badge {
  position: absolute;
  z-index: 2;
  top: 12px;
  inset-inline-end: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: #102e3ce6;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.t4-shop-card-badge b { padding: 4px 8px; border-radius: 999px; background: linear-gradient(180deg, #2ad39a, #0b8f62); }
.t4-shop-card-badge > span,
.t4-shop-card-badge.is-stopped { padding: 4px 10px; }
.t4-shop-card-badge.is-stopped { background: #102e3c; }
.t4-shop-card-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 14px 16px 16px; }
.t4-shop-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.t4-shop-card-meta > :first-child {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--t4-blue-soft);
  color: var(--t4-blue);
  font-size: 11px;
  font-weight: 700;
}
.t4-shop-card-meta > :last-child { color: var(--t4-muted); font-size: 11px; font-weight: 650; letter-spacing: .04em; }
.t4-shop-card h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.65; }
.t4-shop-card h2 a { color: var(--t4-ink); text-decoration: none; }
.t4-shop-card h2 a:hover { color: var(--t4-blue); }
.t4-shop-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: var(--t4-muted);
  font-size: 13px;
  line-height: 1.9;
}
.t4-shop-card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--t4-line);
  color: #0c9a64;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}
.t4-shop-card-price del { color: var(--t4-muted); font-size: 13px; font-weight: 500; }
.t4-shop-card-price ins { color: #0c9a64; font-weight: 800; text-decoration: none; }
.t4-shop-card-price.is-stopped { color: var(--t4-muted); }
.t4-shop .woocommerce-pagination { margin-top: 28px; }
.t4-shop .woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; border: 0; list-style: none; }
.t4-shop .woocommerce-pagination ul li { margin: 0; border: 0; }
.t4-shop .woocommerce-pagination a,
.t4-shop .woocommerce-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 12px; border: 1px solid var(--t4-line); border-radius: 999px; background: var(--t4-surface); color: var(--t4-ink); font-size: 13px; font-weight: 700; }
.t4-shop .woocommerce-pagination span.current,
.t4-shop .woocommerce-pagination a:hover { border-color: transparent; background: var(--t4-blue); color: #fff; }
[data-theme="dark"] .t4-shop-card,
[data-theme="dark"] .t4-shop-card:hover { background: var(--t4-surface); box-shadow: 0 18px 36px -28px #02080c; }
@media (max-width: 1023px) {
  .t4-shop-editions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .t4-shop-editions { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .t4-shop-card h2 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .t4-shop-card:hover,
  .t4-shop-card:hover .t4-shop-card-image,
  .t4-shop-card:hover .t4-shop-card-media img { transform: none; }
}
@keyframes lx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes lx-pop { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(4deg) scale(1.06); } }
@keyframes lx-draw { 0%, 100% { translate: 0 0; } 50% { translate: 18px -8px; } }
@keyframes lx-ink { 0% { stroke-dashoffset: 180; } 55%, 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lx-scene-shop :is([data-float], [data-pulse], [data-cursor], [data-orbit]),
  .t4-shop-landing .t4-stack-art [data-art-piece],
  .lx-scene-work [data-orbit],
  .t4-shop-editions > .t4-product-edition:hover { animation: none; transform: none; }
}

/* First-month support report */
.lx-month { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: 28px; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--t4-line); border-radius: 32px; background: radial-gradient(420px 220px at 0% 0%, color-mix(in srgb, var(--t4-blue) 12%, transparent), transparent 70%), var(--t4-surface); }
.lx-month-kicker { margin: 0; color: var(--t4-blue); font-size: 13px; font-weight: 800; }
.lx-month-copy > p { margin: 10px 0 0; color: var(--t4-muted); font-size: 14px; line-height: 2; }
.lx-month-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.lx-month-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 52px; padding: 8px 12px 8px 8px; border-radius: 16px; background: color-mix(in srgb, var(--t4-paper) 70%, transparent); color: var(--t4-ink); font-size: 13px; font-weight: 650; line-height: 1.7; }
.lx-month-list b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--t4-blue); color: #fff; font-size: 11px; font-weight: 800; }

/* Content: ordinary vs SEO */
.lx-diff { display: grid; gap: 12px; margin-top: 28px; }
.lx-diff-head, .lx-diff-row { display: grid; grid-template-columns: minmax(140px, .7fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; align-items: stretch; }
.lx-diff-head span { padding: 8px 4px; color: var(--t4-muted); font-size: 12px; font-weight: 800; }
.lx-diff-head span:last-child { color: var(--t4-blue); }
.lx-diff-row { padding: 6px; border-radius: 22px; background: var(--t4-surface); box-shadow: inset 0 0 0 1px var(--t4-line); }
.lx-diff-label, .lx-diff-plain, .lx-diff-seo { display: flex; align-items: center; min-height: 64px; padding: 14px 16px; border-radius: 16px; font-size: 13.5px; line-height: 1.8; }
.lx-diff-label { color: var(--t4-ink); font-weight: 800; }
.lx-diff-plain { color: var(--t4-muted); background: color-mix(in srgb, var(--t4-soft) 65%, transparent); }
.lx-diff-seo { color: #fff; font-weight: 700; background: radial-gradient(120% 140% at 100% 0%, rgb(8 164 167 / 55%), transparent 58%), var(--t4-blue); }

/* Reportage quality */
.lx-quality { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 0; align-items: stretch; margin-top: 28px; }
.lx-quality-card { padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--t4-line); border-radius: 30px; background: var(--t4-surface); }
.lx-quality-card.is-yes { background: radial-gradient(320px 180px at 0% 0%, color-mix(in srgb, var(--t4-teal) 16%, transparent), transparent 70%), var(--t4-surface); }
.lx-quality-card h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 850; }
.lx-quality-card ul { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.lx-quality-card li { display: flex; gap: 10px; color: var(--t4-muted); font-size: 13.5px; line-height: 1.85; }
.lx-quality-card li i { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--t4-teal); }
.lx-quality-card.is-no li i { background: color-mix(in srgb, var(--t4-ink) 35%, transparent); }
.lx-quality-or { display: grid; place-items: center; color: var(--t4-blue); font-size: 13px; font-weight: 900; }

/* SEO film */
.lx-film { max-width: 920px; margin: 28px auto 0; }
.lx-film-stage { position: relative; overflow: hidden; border-radius: 32px; background: #102e3c; box-shadow: 0 28px 50px -32px #102e3c; }
.lx-film-stage video, .lx-film-cover { display: block; width: 100%; aspect-ratio: 16 / 9; }
.lx-film-cover { position: relative; padding: 0; border: 0; background: #102e3c; color: #fff; cursor: pointer; }
.lx-film-cover .lx-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.lx-film-play { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #fff; color: var(--t4-blue); translate: -50% -50%; box-shadow: 0 18px 40px rgb(0 0 0 / 28%); transition: transform .35s var(--t4-ease); }
.lx-film-cover:hover .lx-film-play { transform: scale(1.06); }
.lx-film-play svg { width: 28px; height: 28px; margin-inline-start: 4px; }
.lx-film-caption { margin: 0; padding: 16px 8px 0; color: var(--t4-muted); font-size: 14px; line-height: 2; text-align: center; }
.lx-seo .lx-calc-panel.is-result, .lx-seo > p { grid-column: 1 / -1; }
.lx-seo .lx-calc-steps button:disabled { opacity: 1; }

.t4-lx-page .lx-page-hero h1 { margin: 0; color: var(--t4-ink); font-size: clamp(34px, 4.4vw, 64px); font-weight: 900; line-height: 1.4; letter-spacing: -.035em; text-wrap: balance; }
.lx-catalog-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.lx-catalog-pills a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--t4-line); border-radius: 999px; background: var(--t4-surface); color: var(--t4-ink); font-size: 12.5px; font-weight: 700; }
.lx-catalog-pills a:hover, .lx-catalog-pills a[aria-current="page"] { border-color: transparent; background: var(--t4-blue); color: #fff; }
.t4-work-archive .t4-portfolio-grid { gap: 28px 20px; }
.t4-work-archive .t4-project-card { position: relative; padding: 12px 12px 18px; border: 1px solid var(--t4-line); border-radius: 28px; background: radial-gradient(180px 120px at 100% 0%, color-mix(in srgb, var(--t4-teal) 14%, transparent), transparent 70%), var(--t4-surface); transition: transform .35s var(--t4-ease), box-shadow .35s; }
.t4-work-archive .t4-project-card:hover { transform: translateY(-6px); box-shadow: var(--lx-lift, 0 22px 40px -28px #102e3c55); }
.t4-work-archive .t4-project-image { overflow: hidden; border-radius: 20px; background: var(--t4-blue-soft); }
.t4-work-archive .t4-project-caption { display: grid; gap: 4px; padding: 16px 8px 4px; }
.t4-work-archive .t4-portfolio-grid > :nth-child(even) { margin-top: 36px; }

@media (max-width: 860px) {
  .lx-month, .lx-quality, .lx-diff-head, .lx-diff-row { grid-template-columns: minmax(0, 1fr); }
  .lx-quality-or { min-height: 36px; }
  .lx-month-list { grid-template-columns: minmax(0, 1fr); }
  .lx-diff-head { display: none; }
  .t4-work-archive .t4-portfolio-grid > :nth-child(even) { margin-top: 0; }
}
.t4-lx .t4-main section .grid-cols-3:not([class*="lg:grid-cols-"]) > :last-child:nth-child(3n + 2) { grid-column: span 2; }
.t4-lx .t4-main section .grid-cols-3:not([class*="lg:grid-cols-"]):has(> :last-child:nth-child(3n + 4)) > :is(:first-child, :last-child) { grid-column: span 2; }