/* LingLink showcase UX correction — 2026-08-13. */

.ll-header {
    background: rgba(247, 251, 255, .96) !important;
    border-bottom-color: rgba(10, 57, 122, .14) !important;
    box-shadow: 0 12px 40px rgba(7, 37, 84, .08);
    color: #071b3e !important;
}

.ll-header .ll-logo img {
    filter: none !important;
}

.ll-nav--repaired .ll-nav-group--services .ll-nav-menu--mega {
    left: 50%;
    display: grid;
    grid-template-columns: repeat(2, minmax(230px, 1fr));
    width: min(940px, calc(100vw - 36px));
    padding: 14px;
    transform: translateX(-34%);
}

.ll-nav-menu--mega a {
    display: flex !important;
    justify-content: space-between;
    gap: 16px;
    border-radius: 10px;
}

.ll-nav-menu--mega .llx-nav-service-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    padding: 14px 16px !important;
    border: 1px solid #d5e6f7;
    background: #f7fbff;
}

.llx-nav-service-group strong { color: #102f5b; font-size: 14px; line-height: 1.25; }
.llx-nav-service-group > small { color: #087dea; font-size: 14px; font-style: normal; }
.llx-nav-service-group em { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 5px 10px; margin-top: 9px; color: #58718e; font-size: 10px; font-style: normal; line-height: 1.35; }
.llx-nav-service-group em span { white-space: nowrap; }
.llx-nav-service-group em b { color: #147fdc; }

.ll-nav-menu--mega a small {
    color: #087dea;
    font-weight: 800;
}

.ll-nav-menu--mega .ll-nav-menu__all {
    grid-column: 1 / -1;
    background: #eaf4ff;
}

.llx-service-map { padding: clamp(66px, 8vw, 112px) 0; background: linear-gradient(145deg, #071b3e, #0b3267); color: #eaf5ff; }
.llx-service-map__heading { max-width: 850px; margin-bottom: 34px; }
.llx-service-map__heading h2 { margin: 10px 0 15px; color: #fff !important; font-size: clamp(34px, 4.5vw, 62px); line-height: 1.02; }
.llx-service-map__heading > p:last-child { color: #bdd6ee; font-size: 17px; }
.llx-service-map__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.llx-service-group { display: flex; min-height: 285px; flex-direction: column; padding: 24px; border: 1px solid #285784; border-radius: 22px; background: linear-gradient(150deg, #103b73, #0a264f); }
.llx-service-group header { display: grid; grid-template-columns: 52px 1fr; gap: 15px; align-items: center; }
.llx-service-group header > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; background: #137ee8; color: #fff; font-size: 18px; font-weight: 850; }
.llx-service-group h3 { margin: 0; color: #fff !important; font-size: 21px; line-height: 1.18; }
.llx-service-group__categories { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.llx-service-group__categories button { display: flex; gap: 8px; align-items: center; min-height: 36px; padding: 7px 10px; border: 1px solid #3b6894; border-radius: 999px; background: #0c2e5b; color: #d9ebfa; font-size: 12px; }
.llx-service-group__categories button:hover, .llx-service-group__categories button:focus { border-color: #59cdf8; background: #124a86; color: #fff; }
.llx-service-group__categories small { color: #65d6ff; font-weight: 800; }
.llx-service-group__all { margin-top: auto; align-self: flex-start; border: 0; background: transparent; color: #69d8ff; font-weight: 800; }
.ll-service-directory__tools { position: sticky; z-index: 8; top: 84px; padding: 18px; border: 1px solid #d2e3f4; border-radius: 20px; background: rgba(244,249,255,.96); box-shadow: 0 16px 45px rgba(7,37,84,.1); backdrop-filter: blur(14px); }
.ll-service-filters { max-height: 176px; overflow: auto; }
.ll-service-filters button { text-align: left; }
.ll-service-directory__grid { align-items: stretch; }
.ll-service-item { border-radius: 18px !important; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.ll-service-item:hover { transform: translateY(-3px); border-color: #77b9ec !important; box-shadow: 0 14px 30px rgba(12,71,139,.1); }

.llx-repaired body,
.llx-repaired .ll-main,
.llx-repaired .ll-page-hero,
.llx-repaired .ll-service-directory,
.llx-repaired .ll-about-page,
.llx-repaired .ll-service-page {
    color: #102b52;
}

.llx-repaired :where(.ll-page-hero, .ll-service-directory, .ll-about-page, .ll-service-page) :where(h1, h2, h3, h4, p, li) {
    text-shadow: none;
}

.llx-repaired :where(.ll-service-item, .ll-pillar-card, .ll-about-card, .ll-detail-card) {
    border-color: #c8def5 !important;
    background: #f4f9ff !important;
    color: #15345c !important;
}

.llx-repaired :where(.ll-service-item, .ll-pillar-card, .ll-about-card, .ll-detail-card) :where(h2, h3, h4, p, small) {
    color: inherit !important;
}

.llx-repaired [style*="#fff7e8"],
.llx-repaired [style*="#fdd79a"] {
    background: #eaf4ff !important;
}

.llx-repaired .ll-page-hero :where(h1, h2, p),
.llx-repaired :where(.ll-service-page, .ll-about-page) :where(.ll-dark, [class*="--dark"], [class*="hero"]) :where(h1, h2, h3, p) {
    color: #eff8ff !important;
}

.llx-repaired .ll-about-grid > div:first-child :where(h1, h2, h3, p),
.llx-repaired .ll-two-col > div:first-child :where(h1, h2, h3, p) {
    color: #eff8ff !important;
}

html.llx-repaired body .ll-section .ll-two-col > div:first-child h2 {
    color: #eff8ff !important;
}

.llx-repaired :where(.ll-form__notice, .ll-trust-chip) {
    border-color: #9bc8f4 !important;
    background: #e8f4ff !important;
    color: #104b86 !important;
}

@media (max-width: 430px) {
    .llx-repaired,
    .llx-repaired body,
    .llx-repaired .ll-site,
    .llx-repaired .ll-main {
        max-width: 100%;
        overflow-x: clip;
    }

    .llx-repaired .ll-language-switch {
        max-width: calc(100vw - 156px);
    }

    .llx-repaired :where(h1, h2, h3, p, a, button) {
        overflow-wrap: anywhere;
    }
}

.ll-header .ll-nav a,
html[data-ll-theme="dark"] .ll-header .ll-nav a {
    color: #233b5e !important;
}

.ll-header .ll-nav a:hover,
.ll-header .ll-nav a:focus,
.ll-header .ll-nav a[aria-current="page"] {
    color: #075fda !important;
}

.ll-header .ll-language-switch,
html[data-ll-theme="dark"] .ll-header .ll-language-switch {
    background: #eaf2fd !important;
    border-color: #cadcf2 !important;
}

.ll-header .ll-language-switch a,
html[data-ll-theme="dark"] .ll-header .ll-language-switch a {
    color: #49617e !important;
}

.ll-header .ll-language-switch a.is-active,
html[data-ll-theme="dark"] .ll-header .ll-language-switch a.is-active {
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(9, 70, 151, .1) !important;
    color: #071b3e !important;
}

.ll-header .ll-nav-toggle,
html[data-ll-theme="dark"] .ll-header .ll-nav-toggle {
    background: #fff !important;
    border-color: #cadcf2 !important;
}

.ll-header .ll-nav-toggle span,
html[data-ll-theme="dark"] .ll-header .ll-nav-toggle span {
    background: #071b3e !important;
}

.ll-visual-project-card__preview img,
.ll-product-tile__media img {
    transition: transform .24s ease, object-position .24s ease !important;
    will-change: auto;
}

.ll-visual-project-card__preview.is-auto-panning img,
.ll-product-tile__media.is-auto-panning img {
    object-position: center var(--ll-preview-pan, 0%) !important;
    transform: none !important;
    will-change: object-position;
}

.ll-project-dialog__canvas {
    transform-origin: top left;
}

@media (max-width: 980px) {
    .ll-header .ll-nav {
        background: rgba(247, 251, 255, .99) !important;
        border-color: #cadcf2 !important;
        box-shadow: 0 24px 60px rgba(7, 37, 84, .18) !important;
    }

    .ll-header .ll-nav a,
    html[data-ll-theme="dark"] .ll-header .ll-nav a {
        color: #183254 !important;
    }

    .ll-nav--repaired .ll-nav-group--services .ll-nav-menu--mega {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        transform: none;
    }
    .llx-service-map__grid { grid-template-columns: 1fr; }
    .ll-service-directory__tools { position: static; }
}

@media (max-width: 620px) {
    .llx-service-group { min-height: 0; padding: 19px; }
    .llx-service-group header { grid-template-columns: 44px 1fr; }
    .llx-service-group header > span { width: 44px; height: 44px; font-size: 15px; }
    .llx-service-group h3 { font-size: 18px; }
    .llx-service-group__categories button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .ll-visual-project-card__preview img,
    .ll-product-tile__media img {
        transition: none !important;
    }
}

/* Individual service proof experience — 299 stable routes. */
.llx-service-detail { background: #071b3e; color: #eaf5ff; }
.llx-service-hero { padding: clamp(72px, 8vw, 126px) 0; background: radial-gradient(circle at 82% 18%, rgba(23,151,255,.27), transparent 36%), linear-gradient(145deg, #06152f, #0a2a58); }
.llx-service-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr); gap: clamp(44px, 7vw, 100px); align-items: center; }
.llx-service-hero h1 { max-width: 820px; margin: 16px 0 22px; color: #f3f9ff !important; font-size: clamp(42px, 6vw, 78px); line-height: .98; }
.llx-service-hero .ll-lede { max-width: 720px; color: #c7dcf5 !important; }
.llx-service-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 34px; }
.llx-text-link { color: #7bd6ff; font-weight: 780; }
.llx-proof-visual { min-height: 390px; display: flex; flex-direction: column; justify-content: space-between; padding: 34px; border: 1px solid rgba(115,210,255,.34); border-radius: 30px; background: linear-gradient(150deg, rgba(13,66,126,.9), rgba(6,27,62,.92)); box-shadow: 0 28px 80px rgba(0,10,32,.32); }
.llx-proof-visual > span { align-self: flex-start; padding: 7px 11px; border-radius: 999px; background: #137ee8; color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.llx-proof-visual strong { color: #fff; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.04; }
.llx-proof-visual small { color: #9bdfff; font-weight: 750; }
.llx-proof-flow { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 10px; align-items: center; }
.llx-proof-flow i { display: block; height: 10px; border-radius: 99px; background: linear-gradient(90deg, #1b86f3, #20cef4); box-shadow: 0 0 22px rgba(32,206,244,.32); }
.llx-service-section { padding: clamp(76px, 9vw, 132px) 0; background: #0a2148; }
.llx-service-section--ice { background: #eaf4ff; color: #102f5b; }
.llx-section-heading { max-width: 820px; margin-bottom: 42px; }
.llx-section-heading h2, .llx-service-section:not(.llx-service-section--ice) h2 { color: #f3f9ff !important; }
.llx-section-heading > p:last-child { color: #bdd4ee; }
.llx-deliverable-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.llx-deliverable-grid article { min-height: 240px; padding: 28px; border: 1px solid #27517f; border-radius: 20px; background: #102f5b; color: #dceeff; }
.llx-deliverable-grid article span { color: #45cfff; font-weight: 850; }
.llx-deliverable-grid article h3 { margin: 48px 0 12px; color: #fff !important; }
.llx-deliverable-grid article p { color: #bfd5ed !important; }
.llx-sample-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 22px; padding: 18px 22px; border-radius: 14px; background: #0d376d; color: #dceeff; }
.llx-sample-note strong { color: #74ddff; }
.llx-service-process { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 8vw, 120px); }
.llx-service-process h2 { color: #0b2a54 !important; }
.llx-service-process ol { margin: 0; padding-left: 24px; }
.llx-service-process li { padding: 12px 0 22px 12px; border-bottom: 1px solid #c4dbf1; color: #294f78; font-weight: 650; }
@media (max-width: 820px) {
  .llx-service-hero__grid, .llx-service-process { grid-template-columns: 1fr; }
  .llx-deliverable-grid { grid-template-columns: 1fr; }
  .llx-proof-visual { min-height: 310px; }
}

.llx-samples { background: #071b3e; color: #eaf5ff; }
.llx-samples-hero { padding: clamp(78px, 9vw, 136px) 0; background: radial-gradient(circle at 78% 10%, rgba(26,158,255,.3), transparent 34%), linear-gradient(145deg, #06152f, #0b3267); }
.llx-samples-hero h1 { max-width: 980px; margin: 18px 0 24px; color: #f4faff !important; font-size: clamp(42px, 6.6vw, 82px); line-height: .98; }
.llx-samples-hero p:last-child { max-width: 820px; color: #c5daf1; font-size: 18px; }
.llx-samples-list { padding: 52px 0 120px; }
.llx-sample-filters { display: flex; gap: 18px; align-items: baseline; margin-bottom: 30px; }
.llx-sample-filters strong { color: #58d6ff; font-size: 34px; }
.llx-sample-filters span { color: #bcd4ee; }
.llx-samples-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.llx-sample-card { position: relative; display: flex; min-height: 320px; flex-direction: column; padding: 26px; overflow: hidden; border: 1px solid #275786; border-radius: 20px; background: linear-gradient(150deg, #0e3568, #0a244d); }
.llx-sample-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, #167ff0, #24d0f2); }
.llx-sample-card > span { color: #73dcff; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.llx-sample-card h2 { margin: 40px 0 14px; color: #fff !important; font-size: 23px; }
.llx-sample-card p { color: #c2d9ef !important; }
.llx-sample-card small { margin-top: auto; padding-top: 24px; color: #86c9ef; }
.llx-sample-card a { margin-top: 16px; color: #68d9ff; font-weight: 800; }
.llx-sample-card--ai-agents::before { background: linear-gradient(90deg, #1259df, #29d4ff); }
.llx-sample-card--growth::before { background: linear-gradient(90deg, #1879ef, #5cc7ff); }
.llx-sample-card--business::before { background: linear-gradient(90deg, #2059c9, #54a9f2); }
@media (max-width: 980px) { .llx-samples-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .llx-samples-grid { grid-template-columns: 1fr; } .llx-sample-card { min-height: 280px; } }

/* "How it works" — uses the theme's own tokens so it follows the light/dark
   switch. --ll-navy is the ink colour and flips to near-white in dark mode.
   Numbered because the stages are a real sequence, not decoration. */
.llx-how{padding:clamp(2rem,5vw,3.5rem) 0;color:var(--ll-navy,#0d1b3e)}
.llx-how h2{font-size:clamp(1.25rem,2.2vw,1.6rem);margin:0 0 .5rem;color:var(--ll-navy,#0d1b3e)}
.llx-how__lead{max-width:62ch;color:var(--ll-muted,#5a6b85);line-height:1.7;margin:0 0 1.5rem}
.llx-how__steps{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.llx-how__steps li{display:flex;flex-direction:column;gap:.35rem;padding:1.25rem;
  border-radius:16px;background:var(--ll-soft,#f2f7ff)}
.llx-how__num{font-variant-numeric:tabular-nums;font-size:.8rem;
  color:var(--ll-muted,#5a6b85);letter-spacing:.04em}
.llx-how__steps strong{font-size:1.02rem;font-weight:600;color:var(--ll-navy,#0d1b3e)}
.llx-how__steps span:last-child{font-size:.94rem;line-height:1.6;color:var(--ll-muted,#5a6b85)}
.llx-how__cols{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.llx-how__col{padding:1.4rem;border-radius:16px;background:var(--ll-soft,#f2f7ff)}
.llx-how__col h3{font-size:1rem;margin:0 0 .75rem;font-weight:600;color:var(--ll-navy,#0d1b3e)}
.llx-how__col ul{margin:0;padding-left:1.1rem;display:grid;gap:.5rem}
.llx-how__col li{line-height:1.6;font-size:.94rem;color:var(--ll-muted,#5a6b85)}
.llx-how__note{margin:1.25rem 0 0;color:var(--ll-muted,#5a6b85);font-size:.94rem;max-width:64ch;line-height:1.6}
.llx-how__links{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:1.25rem 0 0}
.llx-how__links a{text-decoration:none;color:var(--ll-blue,#0A6BFF);
  min-height:44px;display:inline-flex;align-items:center}
.llx-how__links a:not(.llx-how__cta):hover{text-decoration:underline}
.llx-how__cta{justify-content:center;padding:.7rem 1.4rem;border-radius:999px;
  background:var(--ll-blue,#0A6BFF);color:#fff!important;font-weight:600;min-height:48px}
.llx-how__cta:hover{filter:brightness(1.07)}
.llx-how__cta:focus-visible,.llx-how__links a:focus-visible{outline:2px solid var(--ll-blue,#0A6BFF);outline-offset:3px}
@media (max-width:600px){
  .llx-how__steps li,.llx-how__col{padding:1.1rem}
  .llx-how__links{gap:.75rem}
  .llx-how__cta{width:100%}
}

/* ---- Phone readability and touch targets ----
   Category counters in the service map were 10px, and several inline links sat
   under the 44px touch minimum. */
@media (max-width:782px){
  .llx-service-group__categories span,
  .llx-nav-service-group em span{font-size:.8125rem!important;line-height:1.5}
  .ll-nav-menu a,
  .ll-footer a,
  .llx-service-group__all{min-height:44px;display:inline-flex;align-items:center}
  .llx-samples-hero h1,.llx-service-map__heading h2{text-wrap:balance}
}

/* ---- Phone: the service orbit ----
   On desktop the six service nodes are absolutely positioned around a circle.
   Below ~780px that circle is wider than the screen: nodes 2 and 6 hung about
   10px off each edge, the decorative founder figure sat 28px off the left edge
   and covered the "ongoing support" node, and labels broke mid-word.
   On phones the same content becomes a plain two-column grid, which fits,
   reads in order, and keeps every card fully on screen. */
@media (max-width:780px){
  .ll-service-orbit{
    position:static!important;
    /* the desktop layout centres the circle with translateX(-173.5px);
       that pushes the phone grid off the left edge, so clear it */
    transform:none!important;
    height:auto!important;min-height:0!important;width:auto!important;max-width:100%!important;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem;padding:0;margin:0;
  }
  .ll-service-orbit::before,.ll-service-orbit::after{display:none!important}
  .ll-service-orbit__core{
    position:static!important;grid-column:1 / -1;
    transform:none!important;inset:auto!important;
    margin:0 0 .25rem;display:flex;align-items:center;gap:.75rem;
  }
  .ll-service-orbit__node{
    position:static!important;transform:none!important;inset:auto!important;
    width:auto!important;min-width:0;margin:0;
    display:flex;flex-direction:column;gap:.4rem;
    padding:1rem .9rem;border-radius:14px;
    min-height:44px;
  }
  /* Chinese labels must not split across lines mid-word */
  .ll-service-orbit__node span,
  .ll-service-orbit__node strong{
    word-break:keep-all;overflow-wrap:break-word;line-height:1.45;
  }
  /* Decorative figure: clipped off-screen and covering a card on phones */
  .ll-studio-hamza{display:none!important}
  .ll-studio-hero__visual{transform:none!important;width:auto!important;max-width:100%!important}
  .ll-studio-hero{overflow-x:clip}
  .ll-studio-service-matrix__link{position:static!important;margin-top:1rem;display:inline-flex;min-height:44px;align-items:center}
}

/* ---- Phone: readable labels and full-size touch targets ----
   The orbit labels are sized down to 9.76px so they fit inside the desktop
   circle. In the phone grid there is room, so they return to a readable size.
   Two standalone CTA links were 28px and 39px tall, under the 44px minimum. */
@media (max-width:780px){
  .ll-service-orbit__node span,
  .ll-service-orbit__node strong,
  .ll-service-orbit__node small{font-size:.875rem!important;line-height:1.45}
  .ll-service-orbit__core span,
  .ll-service-orbit__core small{font-size:.875rem!important;line-height:1.45}
  .ll-studio-work__all,
  .ll-studio-link{min-height:44px;display:inline-flex;align-items:center;gap:.4rem}
}

/* ---- Phone gutters ----
   .ll-container sits 14px from each edge on a 375px screen, which reads as
   cramped against the bezel. 20px gives text room to breathe without
   meaningfully narrowing the line. Desktop is untouched. */
@media (max-width:600px){
  .ll-container{
    padding-left:20px!important;
    padding-right:20px!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}