/* ==========================================================================
   LinkedIn Optimisation page - loaded only on /services/linkedin-optimisation
   A "profile interface" composition: floating glass panels, 3D depth and network lines.
   All profile content is fictional. No third-party branding is reproduced.
   ========================================================================== */

/* ----- bar helpers (structural, wording-free placeholders) ----- */
.b { display: block; height: .55em; border-radius: 99px; background: #dfe5e0; margin: .55em 0; } .b.dk { background: #1a2420; } .b.g { background: linear-gradient(90deg, #7ED957, #bdf09f); } .b.soft { background: #eef2ee; }
.w30 { width: 30%; } .w36 { width: 36%; } .w40 { width: 40%; } .w50 { width: 50%; } .w55 { width: 55%; } .w58 { width: 58%; } .w60 { width: 60%; } .w66 { width: 66%; } .w70 { width: 70%; } .w80 { width: 80%; } .w86 { width: 86%; } .w88 { width: 88%; } .w90 { width: 90%; } .w92 { width: 92%; } .w95 { width: 95%; }

/* ----- the fictional profile card ----- */
.pf { position: relative; container-type: inline-size; background: #fff; color: #16201b; border-radius: 16px; overflow: hidden; box-shadow: 0 50px 90px -34px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .5) inset; line-height: 1.45; }
.pf > * { font-size: clamp(9px, 3.05cqw, 14px); }
.pf-banner { aspect-ratio: 400 / 90; background: radial-gradient(90% 140% at 20% 0%, #1d3a1f, #0a120d); } .pf-banner svg { display: block; width: 100%; height: 100%; }
.pf-top { position: relative; padding: 0 5cqw 3.4cqw; }
.pf-avatar { display: grid; place-items: center; width: 17cqw; height: 17cqw; margin-top: -8.5cqw; border-radius: 50%; background: linear-gradient(135deg, #7ED957, #2f7d17); color: #07120a; font-weight: 800; font-size: 5.6cqw !important; letter-spacing: -.02em; border: .8cqw solid #fff; transition: box-shadow .5s, opacity .5s; }
.pf-name { margin: 1.6cqw 0 0; font-weight: 800; font-size: 1.4em !important; letter-spacing: -.02em; line-height: 1.15; }
.pf-headline { margin: .35em 0 0; font-size: 1.04em !important; color: #26332c; }
.pf-loc { margin: .25em 0 0; font-size: .84em !important; color: #78847d; }
.pf-sec { padding: 3cqw 5cqw; border-top: 1px solid #e8ece8; transition: opacity .5s, box-shadow .5s, background .5s; } .pf-sec h5 { margin: 0 0 .45em; font-size: 1.05em; font-weight: 800; letter-spacing: -.01em; } .pf-sec p { margin: 0; color: #34413a; font-size: .95em; }
.pf-job { display: flex; gap: 3cqw; } .pf-logo { flex: none; width: 9cqw; height: 9cqw; border-radius: 6px; background: linear-gradient(135deg, #e3e9e4, #cfd8d1); } .pf-job b { display: block; font-size: 1em; } .pf-job span { display: block; font-size: .82em; color: #78847d; margin-bottom: .3em; } .pf-job p { font-size: .92em; }
.pf-skills { display: flex; flex-wrap: wrap; gap: 1.2cqw; list-style: none; margin: 0; padding: 0; } .pf-skills li { padding: .32em .85em; border-radius: 999px; font-size: .88em; background: #eef2ee; color: #3d4a43; border: 1px solid #dfe5e0; }
.pf[data-mode="after"] .pf-skills li { background: rgba(126, 217, 87, .14); color: #1d5a0a; border-color: rgba(47, 125, 23, .35); font-weight: 600; }
.pf[data-mode="before"] .pf-headline, .pf[data-mode="before"] [data-f] { color: #7a857e; }
.pf[data-mode="after"] [data-f="headline"], .pf[data-mode="after"] [data-f="about"], .pf[data-mode="after"] [data-f="experience"] { box-shadow: inset 3px 0 0 var(--green); padding-left: .65em; background: linear-gradient(90deg, rgba(126, 217, 87, .12), transparent 70%); border-radius: 3px; }
.pf-lite .pf-top, .pf-lite .pf-sec { padding-top: 3cqw; } .pf-lite .pf-avatar { width: 14cqw; height: 14cqw; margin-top: -7cqw; font-size: 0 !important; } .pf-lite .pf-banner { aspect-ratio: 400 / 70; }
.pf-chips { display: flex; gap: 1.6cqw; flex-wrap: wrap; } .pf-chips u { width: 13cqw; height: 5cqw; border-radius: 99px; background: rgba(126, 217, 87, .35); border: 1px solid rgba(47, 125, 23, .3); }
/* focus highlighting (set by JS) */
.pf.has-focus [data-sec] { opacity: .32; } .pf.has-focus [data-sec].is-focus { opacity: 1; }
.pf [data-sec].is-focus { box-shadow: 0 0 0 2px var(--green), 0 0 28px rgba(126, 217, 87, .45); border-radius: 8px; background-color: rgba(126, 217, 87, .08); }
.pf .pf-avatar.is-focus { box-shadow: 0 0 0 3px var(--green), 0 0 28px rgba(126, 217, 87, .6); } .pf .pf-banner.is-focus { box-shadow: inset 0 0 0 3px var(--green); border-radius: 0; }

/* ============ 1. HERO ============ */
.li-hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: min(100svh, 960px); padding: calc(var(--header-h) + clamp(34px, 5vw, 70px)) 0 clamp(90px, 9vw, 130px); background: radial-gradient(110% 100% at 15% 100%, #0f1a13, var(--black) 60%); }
.li-hero-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px 520px at var(--gx, 72%) var(--gy, 44%), rgba(126, 217, 87, .26), transparent 70%); transition: background-position .2s; }
.li-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.li-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(30px, 5vw, 90px); align-items: center; width: 100%; }
.li-label { display: inline-flex; align-items: center; gap: 12px; font-size: .76rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--green); margin-bottom: 22px; } .li-label::before { content: ''; width: 34px; height: 1.5px; background: currentColor; }
.li-title { font-size: clamp(2.3rem, 5vw, 4.3rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 800; color: #fff; }
.li-title .ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; } .li-title .lni { display: inline-block; will-change: transform; }
.li-title em { font-style: normal; background: linear-gradient(100deg, #7ED957 10%, #d3f7bd 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.li-draw { display: block; width: 120px; height: 2px; margin: 26px 0 4px; background: linear-gradient(90deg, var(--green), transparent); transform-origin: left; animation: liDraw 1.5s 1s var(--ease) both; } @keyframes liDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.li-lead { margin-top: 22px; max-width: 54ch; } .li-ctas { margin-top: 34px; }

.li-stage { position: relative; width: min(100%, 460px); margin-inline: auto; perspective: 1400px; padding: 20px 0 30px; }
.li-stage-3d { position: relative; transform-style: preserve-3d; transform: rotateY(var(--ry, -12deg)) rotateX(var(--rx, 5deg)); transition: transform .35s var(--ease); animation: liFloat 9s ease-in-out infinite; }
@keyframes liFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.pf-hero { transform: translateZ(0); } .pf-hero::after { content: ''; position: absolute; left: 5cqw; top: 22%; bottom: 8%; width: 2px; background: linear-gradient(var(--green), transparent); transform-origin: top; animation: liDraw 1.6s 1.4s var(--ease) both; pointer-events: none; opacity: .55; }
.li-links { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transform: translateZ(30px); } .li-links path { fill: none; stroke: var(--green); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 220; stroke-dashoffset: 220; animation: liStroke 1.6s 2s var(--ease) forwards; } @keyframes liStroke { to { stroke-dashoffset: 0; } }
.li-chip { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff; white-space: nowrap; background: rgba(8, 8, 8, .6); border: 1px solid rgba(126, 217, 87, .42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .85); transform: translateZ(70px); }
.li-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.li-chip.c1 { top: 3%; left: -13%; } .li-chip.c2 { top: 30%; right: -15%; } .li-chip.c3 { top: 56%; left: -21%; } .li-chip.c4 { bottom: -5%; right: 0; }
.li-chip::after { content: ""; position: absolute; top: 50%; width: 34px; height: 1.5px; background: linear-gradient(90deg, var(--green), transparent); transform-origin: left; animation: liDraw 1.2s 2.2s var(--ease) both; } .li-chip.c1::after, .li-chip.c3::after { left: 100%; } .li-chip.c2::after, .li-chip.c4::after { right: 100%; transform: scaleX(-1); transform-origin: right; animation: none; opacity: .8; background: linear-gradient(270deg, var(--green), transparent); transform: none; } .li-chip.c4::after { display: none; }
.li-net { position: absolute; inset: -6% -10%; pointer-events: none; z-index: -1; } .li-net i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px var(--green); animation: liPulse 4s ease-in-out infinite; } .li-net i:nth-child(1) { left: 4%; top: 12%; } .li-net i:nth-child(2) { right: 2%; top: 20%; animation-delay: -1s; } .li-net i:nth-child(3) { left: 10%; bottom: 8%; animation-delay: -2s; } .li-net i:nth-child(4) { right: 8%; bottom: 2%; animation-delay: -3s; } .li-net i:nth-child(5) { left: 50%; top: -2%; animation-delay: -1.5s; }
@keyframes liPulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }

/* ============ 2. WHY IT MATTERS ============ */
.li-mag { overflow: clip; background: var(--offwhite, #F6F8F6); }
.li-mag-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 6vw, 96px); align-items: start; }
.li-mag-side { align-self: stretch; } .li-sticky { position: sticky; top: calc(var(--header-h) + 28px); max-width: 440px; margin-inline: auto; }
.li-sticky-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 14px 14px 0 0; background: #0b1410; } .li-sticky-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .25); } .li-sticky-bar span { margin-left: auto; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.li-sticky .pf { border-radius: 0 0 16px 16px; box-shadow: 0 40px 70px -40px rgba(8, 8, 8, .6); }
.li-mag-lead { margin: 18px 0 0; max-width: 56ch; font-size: 1.1rem; color: var(--mute-l); }
.li-bens { list-style: none; margin: clamp(28px, 5vw, 56px) 0 0; padding: 0; }
.li-ben { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 3vw, 36px); align-items: start; padding: clamp(28px, 5vw, 56px) 0; opacity: .42; transition: opacity .6s var(--ease); }
.li-ben-n { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1; font-weight: 800; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(47, 125, 23, .55); transition: color .5s, -webkit-text-stroke-color .5s; }
.li-ben h3 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); letter-spacing: -.03em; line-height: 1.12; font-weight: 800; } .li-ben p { margin-top: 8px; color: var(--mute-l); font-size: 1.08rem; max-width: 44ch; }
.li-ben mark { color: inherit; background: linear-gradient(transparent 62%, rgba(126, 217, 87, .65) 62%) no-repeat; background-size: 0% 100%; transition: background-size 1s var(--ease) .2s; padding: 0 .05em; }
.li-ben-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(8, 8, 8, .1); } .li-ben-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--green-ink), transparent 80%); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); }
.li-ben.is-active { opacity: 1; } .li-ben.is-active .li-ben-n, .li-ben.seen .li-ben-n { color: rgba(126, 217, 87, .22); -webkit-text-stroke-color: var(--green-ink); } .li-ben.is-active mark, .li-ben.seen mark { background-size: 100% 100%; } .li-ben.seen .li-ben-line::after, .li-ben.is-active .li-ben-line::after { transform: scaleX(1); }

/* ============ 3. TRANSFORMATION LAB ============ */
.li-lab { background: radial-gradient(100% 90% at 100% 0%, #11201a, var(--black) 60%); }
.li-lab-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 60px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vw, 56px); } .li-lab-head > div { max-width: 780px; }
.li-lab-sub { max-width: 40ch; margin: 0; color: var(--mute-d); font-size: 1.02rem; }
.li-lab-box { position: relative; padding: clamp(20px, 3vw, 40px); border-radius: 30px; border: 1px solid var(--line-d); background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)); }
.li-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 460px); margin: 0 auto clamp(22px, 3vw, 36px); padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-d); }
.li-toggle-thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--green); box-shadow: 0 10px 30px -10px rgba(126, 217, 87, .8); transition: transform .5s var(--ease); }
.li-toggle[data-on="after"] .li-toggle-thumb { transform: translateX(100%); }
.li-toggle button { position: relative; z-index: 1; padding: 13px 10px; border-radius: 999px; font-weight: 700; font-size: .95rem; color: rgba(255, 255, 255, .7); transition: color .4s; } .li-toggle button[aria-selected="true"] { color: #07120a; }
.li-lab-stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.li-lab-prof { position: relative; max-width: 540px; width: 100%; margin-inline: auto; } .pf-lab.is-swap { animation: liSwap .6s var(--ease); } @keyframes liSwap { 0% { transform: scale(.985); } 100% { transform: none; } }
.pf-skills li.pop { animation: liPop .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); } @keyframes liPop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.li-mk { position: absolute; z-index: 3; right: -10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--green); box-shadow: 0 0 0 4px rgba(126, 217, 87, .25), 0 8px 20px rgba(0, 0, 0, .5); transition: transform .3s; } .li-mk[hidden] { display: none; } .li-mk i { width: 10px; height: 10px; border-radius: 50%; background: #07120a; } .li-mk::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--green); animation: liRing 2.4s ease-out infinite; } .li-mk:hover, .li-mk[aria-expanded="true"] { transform: scale(1.18); } @keyframes liRing { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.li-lab-side { display: grid; gap: 14px; align-content: center; }
.li-lab-state { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
.li-lab-note { margin: 0; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.3; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.li-mk-info { padding: 16px 18px; border-radius: 16px; background: rgba(126, 217, 87, .1); border: 1px solid rgba(126, 217, 87, .4); display: grid; gap: 4px; animation: liSwap .4s var(--ease); } .li-mk-info[hidden] { display: none; } .li-mk-info b { color: var(--green); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; } .li-mk-info span { color: #e8efe9; font-size: .98rem; }
.li-lab-hint { margin: 0; color: var(--mute-d); font-size: .95rem; }
.li-fine { margin: 6px 0 0; font-size: .78rem; letter-spacing: .04em; color: var(--mute-d); } .dark-fine, .light .li-fine, .soft .li-fine { color: var(--mute-l); }

/* ============ 4. ARCHITECTURE ============ */
.li-arch { background: #fff; }
.li-arch-grid { position: relative; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 420px) minmax(180px, 1fr); gap: clamp(24px, 4vw, 70px); align-items: center; }
.li-arch-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; } .li-arch-lines path { fill: none; stroke: var(--green-ink); stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(126, 217, 87, .8)); }
.li-arch-col { display: grid; gap: 16px; align-content: center; position: relative; z-index: 3; }
.li-node { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line-l); transition: transform .45s var(--ease), border-color .3s, box-shadow .45s, background .3s; }
.li-arch-col.col-r .li-node { flex-direction: row; }
.li-node-n { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: .8rem; font-weight: 800; background: var(--green-soft); color: var(--green-ink); transition: background .3s, color .3s; } .li-node-t { font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; line-height: 1.2; }
.li-node:hover { transform: translateY(-3px); border-color: rgba(47, 125, 23, .45); }
.li-node[aria-selected="true"] { border-color: var(--green-ink); background: linear-gradient(135deg, #fff, var(--green-soft)); box-shadow: 0 0 0 1px var(--green-ink), 0 24px 44px -26px rgba(47, 125, 23, .7), 0 0 30px rgba(126, 217, 87, .3); } .li-node[aria-selected="true"] .li-node-n { background: var(--green); color: #07120a; }
.li-arch-center { position: relative; z-index: 1; } .li-arch-prof .pf { box-shadow: 0 40px 80px -40px rgba(8, 8, 8, .55), 0 0 0 1px rgba(8, 8, 8, .06); transition: transform .8s var(--ease), box-shadow .6s; transform-origin: 50% var(--oy, 50%); } .li-arch-prof .pf.focused { transform: scale(1.04); }
.li-arch-panel { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 8px clamp(18px, 4vw, 48px); align-items: center; padding: clamp(22px, 3vw, 34px) clamp(22px, 4vw, 44px); border-radius: 24px; background: #080808; color: #fff; position: relative; overflow: hidden; }
.li-arch-panel::before { content: ''; position: absolute; width: 300px; height: 300px; right: -80px; top: -140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 217, 87, .28), transparent); }
.li-arch-pn { margin: 0; grid-row: 1 / span 2; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--green); }
.li-arch-panel h3 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: -.03em; line-height: 1.1; grid-column: 2; } .li-arch-panel > p:not(.li-arch-pn) { margin: 0; color: var(--mute-d); grid-column: 2; }
.li-arch-panel ul { list-style: none; margin: 0; padding: 0; grid-column: 3; grid-row: 1 / span 2; display: grid; gap: 10px; position: relative; } .li-arch-panel li { position: relative; padding-left: 26px; color: #e6eee8; font-size: .98rem; } .li-arch-panel li::before { content: ''; position: absolute; left: 0; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.li-arch-panel.swap > * { animation: liSwap .5s var(--ease) both; }

/* ============ 5. STRENGTH ============ */
.li-strength { background: radial-gradient(90% 100% at 0% 100%, #101b15, var(--black) 60%); }
.li-str-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.li-str-copy .li-lab-sub { margin: 18px 0 26px; }
.li-states { display: grid; gap: 10px; margin-bottom: 20px; }
.li-state { display: grid; gap: 2px; text-align: left; padding: 16px 20px; border-radius: 18px; color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .03); border: 1px solid var(--line-d); transition: all .4s var(--ease); } .li-state b { font-size: 1.05rem; color: #fff; } .li-state span { font-size: .9rem; }
.li-state:hover { transform: translateX(5px); } .li-state[aria-checked="true"] { background: rgba(126, 217, 87, .1); border-color: rgba(126, 217, 87, .55); box-shadow: 0 24px 44px -30px rgba(126, 217, 87, .6); color: #cfe6c6; }
.li-meter { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); border: 1px solid var(--line-d); }
.li-ring { position: relative; width: clamp(120px, 16vw, 168px); aspect-ratio: 1; display: grid; place-items: center; text-align: center; } .li-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .li-ring circle { fill: none; stroke-width: 7; } .li-ring .rt { stroke: rgba(255, 255, 255, .1); } .li-ring .rf { stroke: var(--green); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 8px rgba(126, 217, 87, .7)); transition: stroke-dashoffset 1.2s var(--ease); }
.li-ring b { display: block; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; } .li-ring small { display: block; margin-top: 6px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-d); max-width: 11ch; margin-inline: auto; }
.li-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .lb-top { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; color: #dfe9e1; margin-bottom: 8px; } .lb-top b { color: var(--green); font-variant-numeric: tabular-nums; }
.lb-track { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .09); overflow: hidden; } .lb-track i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #4fae30, var(--green)); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); box-shadow: 0 0 14px rgba(126, 217, 87, .6); }

/* ============ 6. WHO (horizontal journey) ============ */
.li-who { background: var(--offwhite, #F6F8F6); } .li-who-ctrl { display: flex; gap: 10px; }
.li-who-rail { position: relative; }
.li-who-track { position: relative; display: flex; gap: clamp(16px, 2.4vw, 28px); overflow-x: auto; scroll-snap-type: x proximity; --pad: max(20px, calc((100vw - 1280px) / 2 + 48px)); padding: 52px var(--pad) 28px; scroll-padding-inline: var(--pad); scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; } .li-who-track::-webkit-scrollbar { display: none; } .li-who-track:focus-visible { outline: 2px solid var(--green-ink); outline-offset: -4px; }
.li-who-line { position: absolute; left: 0; top: 30px; height: 2px; width: var(--w, 100%); background: rgba(8, 8, 8, .12); pointer-events: none; } .li-who-line b { position: absolute; inset: 0; background: linear-gradient(90deg, var(--green-ink), var(--green)); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 10px rgba(126, 217, 87, .8); }
.li-aud { position: relative; flex: none; width: min(330px, 78vw); scroll-snap-align: start; padding: 26px 24px 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line-l); display: flex; flex-direction: column; gap: 10px; transition: transform .5s var(--ease), border-color .4s, box-shadow .5s; user-select: none; }
.li-aud:hover { transform: translateY(-6px); border-color: rgba(47, 125, 23, .4); box-shadow: 0 30px 50px -32px rgba(8, 8, 8, .35); }
.li-aud-dot { position: absolute; left: 28px; top: -29px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid rgba(8, 8, 8, .22); transition: all .5s var(--ease); } .li-aud.is-on .li-aud-dot { background: var(--green); border-color: var(--green-ink); box-shadow: 0 0 0 6px rgba(126, 217, 87, .3); }
.li-aud-mini { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: #f3f6f3; } .am-av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #7ED957, #2f7d17); } .li-aud-mini p { margin: 0; font-size: .74rem; line-height: 1.35; color: #3a4640; font-weight: 600; } .li-aud-mini .b { width: 46%; margin: 0 0 .5em; height: .5em; }
.li-aud h3 { font-size: 1.3rem; letter-spacing: -.03em; line-height: 1.15; margin-top: 6px; } .li-aud > p { margin: 0; color: var(--mute-l); font-size: .98rem; }

/* ============ 7. PROCESS ============ */
.li-proc { overflow: clip; }
.li-proc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px) minmax(0, 1fr); column-gap: clamp(28px, 5vw, 80px); }
.li-proc-center { grid-column: 2; grid-row: 1 / span 5; } .li-proc-prev { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 10px; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid var(--line-l); box-shadow: 0 40px 70px -40px rgba(8, 8, 8, .45); margin-top: 8vh; }
.pp-badge { justify-self: end; font-size: .72rem; font-weight: 800; letter-spacing: .12em; color: var(--mute-l); } .pp-badge b { color: var(--green-ink); }
.pp-sec { position: relative; padding: 12px; border-radius: 14px; background: #f4f7f4; border: 1px solid transparent; opacity: .28; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .5s, box-shadow .5s; overflow: hidden; }
.li-proc-prev.has-1 .pp-1, .li-proc-prev.has-2 .pp-2, .li-proc-prev.has-3 .pp-3, .li-proc-prev.has-4 .pp-4, .li-proc-prev.has-5 .pp-5 { opacity: 1; transform: none; border-color: rgba(47, 125, 23, .35); }
.li-proc-prev[data-cur="1"] .pp-1, .li-proc-prev[data-cur="2"] .pp-2, .li-proc-prev[data-cur="3"] .pp-3, .li-proc-prev[data-cur="4"] .pp-4, .li-proc-prev[data-cur="5"] .pp-5 { box-shadow: 0 0 0 2px var(--green), 0 0 24px rgba(126, 217, 87, .4); }
.pp-1 { display: flex; align-items: center; gap: 12px; } .pp-av { flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #7ED957, #2f7d17); } .pp-l { flex: 1; } .pp-l .b { margin: .4em 0; }
.pp-scan { position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(transparent, rgba(126, 217, 87, .28), transparent); animation: ppScan 2.8s linear infinite; pointer-events: none; } @keyframes ppScan { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
.pp-2 { display: flex; gap: 8px; flex-wrap: wrap; } .pp-2 em { font-style: normal; font-size: .72rem; font-weight: 700; padding: 5px 11px; border-radius: 99px; background: rgba(126, 217, 87, .2); color: var(--green-ink); }
.pp-3 .b { margin: .5em 0; } .pp-4 { display: flex; gap: 8px; } .pp-4 u { flex: 1; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #4fae30, var(--green)); }
.pp-5 { display: flex; align-items: center; gap: 10px; } .pp-5 span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #07120a; } .pp-5 span .ic { width: 16px; height: 16px; } .pp-5 b { font-size: .9rem; }
.li-step { grid-row: var(--row); min-height: 46vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.li-step.l { grid-column: 1; text-align: right; align-items: flex-end; transform: translateX(-14px); } .li-step.r { grid-column: 3; transform: translateX(14px); }
.li-step.is-on { opacity: 1; transform: none; }
.li-step-n { font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; font-weight: 800; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(47, 125, 23, .6); } .li-step.is-on .li-step-n { color: rgba(126, 217, 87, .22); -webkit-text-stroke-color: var(--green-ink); }
.li-step h3 { margin: 12px 0 8px; font-size: clamp(1.3rem, 2.3vw, 1.85rem); letter-spacing: -.03em; line-height: 1.12; font-weight: 800; } .li-step p { margin: 0; color: var(--mute-l); font-size: 1.05rem; max-width: 34ch; }

/* ============ 8. EXAMPLES ============ */
.li-ex { background: #fff; }
.li-ex-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; } .li-ex-tabs button { padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: .95rem; color: var(--mute-l); background: #f3f6f3; border: 1px solid var(--line-l); transition: all .4s var(--ease); } .li-ex-tabs button:hover { color: #080808; } .li-ex-tabs button[aria-selected="true"] { background: #080808; color: #fff; border-color: #080808; box-shadow: 0 16px 30px -16px rgba(8, 8, 8, .6); }
.li-ex-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); gap: clamp(14px, 3vw, 36px); align-items: stretch; }
.li-ex-card { padding: clamp(22px, 3vw, 36px); border-radius: 24px; display: flex; flex-direction: column; gap: 14px; } .li-ex-card.before { background: #f3f6f3; border: 1px dashed rgba(8, 8, 8, .2); } .li-ex-card.after { background: #080808; color: #fff; border: 1px solid #080808; box-shadow: 0 40px 70px -44px rgba(47, 125, 23, .6); position: relative; overflow: hidden; } .li-ex-card.after::before { content: ''; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 217, 87, .3), transparent); }
.li-ex-tag { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--mute-l); } .after .li-ex-tag { color: var(--green); }
.li-ex-text { margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.5; position: relative; } .before .li-ex-text { color: #5d6963; } .after .li-ex-text { font-weight: 600; letter-spacing: -.01em; }
.li-ex-text mark { color: var(--green); background: linear-gradient(transparent 70%, rgba(126, 217, 87, .35) 70%) no-repeat; background-size: 0% 100%; transition: background-size .8s var(--ease) .5s; padding: 0 .04em; } .li-ex-text.go mark { background-size: 100% 100%; }
.li-ex-text .w { display: inline-block; opacity: 0; transform: translateY(8px); animation: liWord .55s var(--ease) forwards; animation-delay: calc(var(--i) * 28ms); } @keyframes liWord { to { opacity: 1; transform: none; } }
.li-ex-arrow { align-self: center; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--green); color: #07120a; box-shadow: 0 12px 28px -10px rgba(126, 217, 87, .8); } .li-ex-arrow .ic { width: 20px; height: 20px; }
.li-ex-note { grid-column: 1 / -1; margin: 8px 0 0; color: var(--mute-l); font-size: 1rem; }

/* ============ 9. BRANDING ============ */
.li-brand-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 96px); align-items: center; }
.li-brand-visual { position: relative; width: min(100%, 500px); aspect-ratio: 1 / 1.08; margin-inline: auto; }
.bv-layer { position: absolute; translate: 0 calc(var(--py, 0) * 1px); transition: translate .2s linear; will-change: translate; }
.bv-banner { left: 0; right: 4%; top: 0; height: 24%; border-radius: 18px; overflow: hidden; background: radial-gradient(90% 140% at 20% 0%, #1d3a1f, #0a120d); box-shadow: 0 30px 50px -30px rgba(8, 8, 8, .7); } .bv-banner svg { width: 100%; height: 100%; display: block; } .bv-banner span, .bv-post span { position: absolute; left: 14px; bottom: 10px; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.bv-prof { left: 8%; top: 29%; width: 58%; } .bv-prof .pf { box-shadow: 0 40px 70px -34px rgba(8, 8, 8, .6), 0 0 0 1px rgba(8, 8, 8, .06); }
.bv-post { padding: 16px 16px 30px; border-radius: 16px; background: #fff; border: 1px solid var(--line-l); box-shadow: 0 30px 50px -30px rgba(8, 8, 8, .4); font-size: 12px; } .bv-post .b { height: .5em; } .bv-post.p1 { right: 0; top: 62%; width: 50%; } .bv-post.p1 span { color: var(--green-ink); } .bv-post.p2 { left: 0; bottom: 0; width: 46%; }
.li-brand-list { list-style: none; margin: clamp(22px, 4vw, 40px) 0 0; padding: 0; }
.li-brand-list li, .li-why-list li { position: relative; padding: clamp(18px, 2.6vw, 26px) 0; } .li-brand-list h3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); letter-spacing: -.03em; line-height: 1.12; font-weight: 800; transition: transform .7s var(--ease); } .li-brand-list p { margin-top: 6px; color: var(--mute-l); max-width: 44ch; }
.li-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(8, 8, 8, .12); } .li-line::after { content: ''; position: absolute; inset: 0; background: var(--green-ink); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) var(--d, 0s); }
.in .li-line::after, .li-line.in::after { transform: scaleX(1); } .li-brand-list li.in h3, .li-why-list li.in h3 { transform: translateX(8px); }

/* ============ 10. WHY HRA ============ */
.li-why { background: radial-gradient(110% 90% at 0% 100%, #101a14, var(--black) 62%); }
.li-why-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 100px); align-items: center; }
.li-why-visual { position: relative; width: min(100%, 380px); margin-inline: auto; filter: drop-shadow(0 0 40px rgba(126, 217, 87, .35)); } .li-why-visual svg { display: block; width: 100%; height: auto; overflow: visible; } .wr1 { transform-origin: 160px 160px; animation: liSpin 60s linear infinite; } .wr2 { transform-origin: 160px 160px; animation: liSpin 40s linear infinite reverse; } .wn circle { animation: liPulse 3.6s ease-in-out infinite; } .wn circle:nth-child(2n) { animation-delay: -1.4s; } @keyframes liSpin { to { transform: rotate(360deg); } }
.li-why-body .display { margin-bottom: clamp(20px, 4vw, 36px); } .li-why-list { list-style: none; margin: 0; padding: 0; } .li-why-list h3 { font-size: clamp(1.25rem, 2.1vw, 1.65rem); letter-spacing: -.03em; line-height: 1.12; font-weight: 800; color: #fff; transition: transform .7s var(--ease); } .li-why-list p { margin-top: 6px; color: var(--mute-d); max-width: 46ch; } .li-why-list .li-line { background: rgba(255, 255, 255, .12); } .li-why-list .li-line::after { background: var(--green); }

/* ============ 13. ENQUIRY ============ */
.li-enq { background: var(--offwhite, #F6F8F6); }
.li-enq-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); border-radius: 30px; overflow: hidden; box-shadow: 0 50px 90px -50px rgba(8, 8, 8, .55); padding: 0 !important; max-width: 1180px; }
.li-enq-side { position: relative; padding: clamp(30px, 5vw, 60px); background: radial-gradient(120% 100% at 0% 0%, #12241a, #080808 65%); display: flex; flex-direction: column; gap: 18px; justify-content: center; overflow: hidden; } .li-enq-side .display { margin: 0; color: #fff; } .li-enq-side > p:not(.eyebrow) { margin: 0; color: var(--mute-d); } .li-enq-glow { position: absolute; width: 360px; height: 360px; right: -140px; bottom: -140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 217, 87, .4), transparent); animation: liPulse 6s ease-in-out infinite; }
.li-enq-side .contact-list { position: relative; margin-top: 8px; }
.li-enq-form { padding: clamp(26px, 4vw, 52px); background: #fff; }
.li-chip-svc { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: 0 0 22px; padding: 10px 18px; border-radius: 999px; background: var(--green-soft); border: 1px solid rgba(47, 125, 23, .3); } .li-chip-svc span { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-l); } .li-chip-svc strong { color: var(--green-ink); }
.li-enq-form .field { position: relative; } .li-enq-form .field label { transition: color .3s; } .li-enq-form .field:focus-within label { color: var(--green-ink); } .li-enq-form .field input:focus, .li-enq-form .field textarea:focus, .li-enq-form .field select:focus { border-color: var(--green-ink); box-shadow: 0 0 0 4px rgba(126, 217, 87, .25); transition: box-shadow .3s, border-color .3s; }

/* ----- related + CTA ----- */
.li-rel-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.li-rel-grid a { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line-l); overflow: hidden; transition: transform .5s var(--ease), border-color .3s, box-shadow .5s; } .li-rel-grid a:hover { transform: translateY(-6px); border-color: rgba(47, 125, 23, .4); box-shadow: 0 30px 50px -32px rgba(8, 8, 8, .4); }
.li-rel-grid strong { font-size: 1.05rem; letter-spacing: -.02em; position: relative; z-index: 3; } .li-rel-grid span { color: var(--mute-l); font-size: .9rem; position: relative; z-index: 3; } .li-rel-grid .ic { margin-top: auto; color: var(--green-ink); transition: transform .4s var(--ease); position: relative; z-index: 3; } .li-rel-grid a:hover .ic { transform: translate(4px, -4px); }
.li-cta { position: relative; overflow: hidden; } .li-cta-net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; } .li-cta-net path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: liStroke 3s .3s var(--ease) forwards; } .li-cta-net .nd { animation: liPulse 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .li-cta-net .nd:nth-child(2n) { animation-delay: -1.3s; } .li-cta-net .nd:nth-child(3n) { animation-delay: -2.4s; }
.li-cta .cta-inner { position: relative; z-index: 2; }

/* ============ responsive ============ */
@media (max-width: 1100px) {
  .li-hero { min-height: 0; } .li-hero-grid, .li-mag-grid, .li-lab-stage, .li-str-grid, .li-brand-grid, .li-why-grid, .li-enq-grid { grid-template-columns: minmax(0, 1fr); }
  .li-chip.c1 { left: -4%; } .li-chip.c2 { right: -4%; } .li-chip.c3 { left: -4%; } .li-chip.c4 { right: -2%; }
  .li-sticky { position: static; } .li-ben { opacity: 1; } .li-ben-n, .li-ben mark { } .li-ben mark { background-size: 100% 100%; } .li-ben-line::after { transform: scaleX(1); } .li-ben-n { color: rgba(126, 217, 87, .22); -webkit-text-stroke-color: var(--green-ink); }
  .li-rel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .li-why-visual { width: min(100%, 280px); }
  .li-arch-grid { grid-template-columns: minmax(0, 1fr); } .li-arch-lines { display: none; } .li-arch-center { order: -1; max-width: 420px; margin-inline: auto; width: 100%; }
  .li-arch-col { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .li-arch-panel { grid-template-columns: auto minmax(0, 1fr); } .li-arch-panel ul { grid-column: 1 / -1; grid-row: auto; }
  .li-proc-grid { grid-template-columns: minmax(0, 1fr); } .li-proc-center { grid-column: 1; grid-row: 1 / span 6; } .li-step { grid-row: calc(var(--row) + 1); min-height: 34vh; } .li-step.l, .li-step.r { grid-column: 1; text-align: left; align-items: flex-start; transform: translateY(14px); } .li-step.is-on { transform: none; }
  .li-proc-prev { top: calc(var(--header-h) + 8px); z-index: 4; margin-top: 0; padding: 12px; gap: 6px; max-width: 440px; margin-inline: auto; } .li-proc-center { margin-bottom: 8px; }
  .pp-sec { padding: 7px 10px; border-radius: 10px; } .pp-av { width: 26px; height: 26px; } .pp-badge { position: absolute; right: 16px; top: 8px; z-index: 2; } .pp-l .b { margin: .3em 0; } .pp-3 .b { margin: .3em 0; }
}
@media (max-width: 720px) {
  .li-chip.c3, .li-chip.c4 { display: none; } .li-chip.c1 { top: -4%; left: 2%; } .li-chip.c2 { top: auto; bottom: -4%; right: 2%; }
  .li-toggle button { font-size: .86rem; padding: 12px 6px; }
  .li-meter { grid-template-columns: minmax(0, 1fr); justify-items: center; } .li-bars { width: 100%; }
  .li-ex-panel { grid-template-columns: minmax(0, 1fr); } .li-ex-arrow { justify-self: center; transform: rotate(90deg); }
  .li-rel-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .li-rel-grid a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 2px; padding: 14px 16px; border-radius: 16px; height: auto; } .li-rel-grid strong, .li-rel-grid span { grid-column: 1; } .li-rel-grid .ic { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; width: 18px; height: 18px; }
  .li-arch-col { grid-template-columns: minmax(0, 1fr); gap: 10px; } .li-node { padding: 12px 16px; } .li-arch-panel { grid-template-columns: minmax(0, 1fr); } .li-arch-pn { grid-row: auto; } .li-arch-panel h3, .li-arch-panel > p:not(.li-arch-pn) { grid-column: 1; }
  .li-enq-grid { border-radius: 22px; } .li-brand-visual { max-width: 400px; } .li-ben { padding: 24px 0; }
  .li-aud { width: min(300px, 80vw); }
}
@media (prefers-reduced-motion: reduce) {
  .li-stage-3d, .li-chip, .li-net i, .li-mk::after, .li-why-visual *, .li-cta-net *, .pp-scan, .li-enq-glow { animation: none !important; }
  .li-links path, .li-cta-net path { stroke-dashoffset: 0 !important; animation: none !important; } .li-draw { animation: none; }
  .li-ben, .li-step { opacity: 1 !important; transform: none !important; } .li-ben mark, .li-ex-text mark { background-size: 100% 100% !important; } .li-ben-line::after, .li-line::after { transform: scaleX(1) !important; }
  .pp-sec { opacity: 1; transform: none; } .lb-track i { transition: none; } .li-ex-text .w { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 720px) { .li-mk { right: 6px; } }
.li-enq-side .eyebrow { color: var(--green); }
@media (max-width: 1100px) {
  .li-proc-prev { grid-template-columns: 1fr 1fr; max-width: 360px; } .li-proc-prev > .pp-1, .li-proc-prev > .pp-2, .li-proc-prev > .pp-3 { grid-column: 1 / -1; } .li-proc-prev .pp-3 .b:nth-child(n+3) { display: none; } .pp-4 { align-items: center; } .pp-5 { gap: 8px; } .pp-5 span { width: 22px; height: 22px; } .pp-2 em { padding: 3px 9px; font-size: .68rem; }
  .li-why-visual { margin-bottom: 28px; }
}
@media (max-width: 720px) {
  .li-toggle button { white-space: nowrap; font-size: .8rem; padding: 12px 4px; } .li-brand-visual .bv-post span { white-space: nowrap; font-size: .56rem; letter-spacing: .1em; } .bv-post.p1 { top: 54%; } .bv-post.p2 { bottom: -2%; }
}
@media (max-width: 720px) { .li-enq-form .form .btn, .li-cta .btn { white-space: normal; text-align: center; line-height: 1.25; width: 100%; justify-content: center; } }

/* ============ contact panel ============ */
.li-contact-panel { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 60px); border-radius: 28px; background: linear-gradient(135deg, #fff 0%, var(--green-soft) 100%); border: 1px solid rgba(47, 125, 23, .22); box-shadow: 0 40px 80px -50px rgba(27, 110, 0, .45); overflow: hidden; }
.li-contact-panel::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 217, 87, .35), transparent); pointer-events: none; }
.li-contact-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .li-contact-copy .display { margin: 0; } .li-contact-copy > p:not(.eyebrow) { margin: 0; color: var(--mute-l); max-width: 52ch; }
.li-contact-ways { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.li-contact-ways a { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px; background: #fff; border: 1px solid rgba(8, 8, 8, .08); transition: transform .35s, border-color .35s, box-shadow .35s; min-width: 0; }
.li-contact-ways a:hover { transform: translateX(6px); border-color: rgba(47, 125, 23, .5); box-shadow: 0 18px 36px -24px rgba(27, 110, 0, .5); }
.li-cw-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #080808; } .li-cw-ic svg { width: 20px; height: 20px; }
.li-contact-ways small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-l); } .li-contact-ways strong { display: block; overflow-wrap: anywhere; color: #080808; }
@media (max-width: 900px) { .li-contact-panel { grid-template-columns: 1fr; border-radius: 22px; } .li-contact-copy .btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .li-contact-ways a { transition: none; } }
@media (max-width: 720px) { .li-contact-ways strong { overflow-wrap: break-word; word-break: normal; font-size: .93rem; } .li-contact-ways a { padding: 14px 16px; gap: 12px; } }
@media (max-width: 720px) {
  .pf > * { font-size: clamp(10px, 3.7cqw, 14px); }
  .li-mk { width: 24px; height: 24px; right: 4px; } .li-mk i { width: 8px; height: 8px; }
  .li-faq .sec-sub { margin-top: 14px; }
  .li-arch-center { max-width: 360px; } .li-lab-note { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .pf-skills li.pop { animation: none; opacity: 1; } }