:root{--bg:#070A12;--bg2:#0B1020;--panel:#101827;--panel2:#151D2E;--line:#2A3548;--text:#F6F8FC;--muted:#A7B0C0;--cyan:#22D3EE;--blue:#60A5FA;--violet:#8B7CFF;--green:#34D399;--amber:#FBBF24;--rose:#FB7185;--orange:#FB923C;--max:1180px;--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 75% -10%,rgba(139,124,255,.22),transparent 34%),linear-gradient(180deg,#070A12,#0B1020 42%,#070A12);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;line-height:1.55}a{color:inherit}img{max-width:100%;display:block}.skip{position:absolute;left:-999px;top:8px;background:var(--cyan);color:#001018;padding:10px 14px;border-radius:10px;z-index:50}.skip:focus{left:8px}.site-header{position:sticky;top:0;z-index:20;background:rgba(7,10,18,.82);backdrop-filter:blur(16px);border-bottom:1px solid rgba(42,53,72,.72)}.nav{max-width:var(--max);margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:18px;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.01em;text-decoration:none}.mark{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--cyan),var(--violet));display:grid;place-items:center;color:#061018;font-weight:900}.navlinks{display:flex;gap:18px;align-items:center;font-size:14px;color:var(--muted)}.navlinks a{text-decoration:none}.navlinks a:hover,.navlinks a:focus{color:var(--text)}.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:11px 16px;text-decoration:none;background:rgba(16,24,39,.78);font-weight:750}.btn.primary{background:linear-gradient(135deg,var(--cyan),var(--violet));color:#061018;border:0}.btn:hover{transform:translateY(-1px)}:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}.hero{padding:78px 0 46px}.eyebrow{color:var(--cyan);font-size:12px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.75fr);gap:42px;align-items:center}.hero h1{font-size:clamp(42px,7vw,76px);line-height:.95;margin:14px 0 22px;letter-spacing:-.055em}.lead{font-size:clamp(18px,2.2vw,22px);color:#D7DEEA;max-width:780px}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0}.note{color:var(--muted);font-size:14px}.hero-card,.card,.panel{background:linear-gradient(180deg,rgba(21,29,46,.88),rgba(16,24,39,.9));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 60px rgba(0,0,0,.22)}.hero-card{padding:24px}.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.kpi{padding:16px;border:1px solid rgba(42,53,72,.9);border-radius:18px;background:#0B1220}.kpi b{display:block;color:var(--cyan);font-size:24px}.kpi span{color:var(--muted);font-size:12px}.section{padding:58px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:24px}.section h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.035em;line-height:1.05;margin:0}.section .intro{max-width:760px;color:#CBD3E2;font-size:17px}.about-grid,.why-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}.panel{padding:26px}.panel h3,.card h3{margin:0 0 10px;font-size:22px}.cap-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.cap{padding:18px;border-radius:18px;background:#0B1220;border:1px solid var(--line)}.cap h3{font-size:16px;margin:0 0 10px;color:var(--text)}.cap ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.filter{border:1px solid var(--line);background:#0B1220;color:var(--muted);padding:9px 13px;border-radius:999px;cursor:pointer}.filter.active,.filter:hover{color:#061018;background:var(--cyan);border-color:var(--cyan)}.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.case-card{overflow:hidden}.case-card[data-featured="true"]{grid-column:1/-1;display:grid;grid-template-columns:.95fr 1.05fr}.case-card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:#0B1220;padding:10px}.case-card[data-featured="true"] img{height:100%;min-height:260px;aspect-ratio:auto}.case-body{padding:24px}.tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.tag{font-size:12px;color:#DCE8F5;border:1px solid var(--line);background:#0B1220;border-radius:999px;padding:5px 9px}.case-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.mini{border-left:3px solid var(--cyan);padding-left:12px;color:var(--muted);font-size:14px}.method{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:step}.step{position:relative;padding:20px;background:#0B1220;border:1px solid var(--line);border-radius:18px}.step:before{counter-increment:step;content:counter(step);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:#061018;font-weight:900;margin-bottom:12px}.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:step}.timeline .step{min-height:150px}.cta{padding:38px;border-radius:30px;background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(139,124,255,.18));border:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}.footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:14px}.case-hero{padding:56px 0 30px}.breadcrumbs{font-size:14px;color:var(--muted);margin-bottom:20px}.case-layout{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:26px;align-items:start}.toc{position:sticky;top:82px;padding:18px;background:#0B1220;border:1px solid var(--line);border-radius:18px}.toc a{display:block;color:var(--muted);text-decoration:none;margin:9px 0;font-size:14px}.toc a:hover{color:var(--text)}.case-section{padding:24px;margin-bottom:18px;background:rgba(16,24,39,.72);border:1px solid var(--line);border-radius:22px}.case-section h2{font-size:28px;margin:0 0 12px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.list{margin:0;padding-left:20px;color:#D4DBE8}.visual{border-radius:18px;border:1px solid var(--line);overflow:hidden;background:#0B1220}.metric-table{width:100%;border-collapse:collapse}.metric-table th,.metric-table td{border-bottom:1px solid var(--line);padding:12px;text-align:left;vertical-align:top}.metric-table th{color:var(--cyan)}details{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:#0B1220}summary{cursor:pointer;font-weight:800}.backtop{position:fixed;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:#061018;text-decoration:none;font-weight:900}@media(max-width:980px){.hero-grid,.about-grid,.why-grid,.case-layout,.cta{grid-template-columns:1fr}.section-head{display:block}.section-head .intro{margin-top:12px}.cap-grid{grid-template-columns:repeat(2,1fr)}.method{grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:repeat(2,1fr)}.toc{position:relative;top:auto}.case-card[data-featured="true"],.case-grid{display:grid;grid-template-columns:1fr}.navlinks{display:none}}@media(max-width:620px){.cap-grid,.method,.timeline,.two-col,.case-meta{grid-template-columns:1fr}.hero{padding-top:46px}.section{padding:38px 0}.panel,.case-section{padding:18px}.hero h1{font-size:42px}.backtop{display:none}}@media(prefers-reduced-motion:reduce){*,html{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media print{.site-header,.toolbar,.toc,.backtop,.btn{display:none!important}body{background:#fff;color:#111}.case-layout,.hero-grid,.about-grid,.why-grid,.case-grid,.case-card[data-featured="true"]{display:block}.card,.panel,.case-section{break-inside:avoid;border:1px solid #bbb;background:#fff;color:#111}.tag,.note,.intro,.lead,.mini{color:#333}.section{padding:20px 0}}

/* --------------------------------------------------------------------------
   Mobile responsiveness hardening — final candidate patch
   Purpose: prevent case-study artwork/dashboard thumbnails from overlapping
   card text on iPhone/Android widths and remove horizontal scrolling.
   -------------------------------------------------------------------------- */
html,body{max-width:100%;overflow-x:clip}.wrap,.nav,.hero-grid,.about-grid,.section-head,.case-grid,.case-card,.case-body,.case-meta,.case-layout,.case-section,.visual,.timeline,.method,.cap-grid,.why-grid,.cta,.two-col{min-width:0}.card,.panel,.case-section,.case-card,.case-body,.mini,.step,.cap{min-width:0;overflow-wrap:break-word;word-break:normal}.case-card{position:relative;display:flex;flex-direction:column}.case-card img,.visual img{position:relative;z-index:0;display:block;width:100%;max-width:100%;height:auto;object-fit:contain}.case-body{position:relative;z-index:1}.visual{max-width:100%;overflow:hidden}.visual img{border-radius:16px}.case-section img{max-width:100%;height:auto}.case-layout{align-items:start}.toc{min-width:0}.btn,.filter{max-width:100%;white-space:normal;text-align:center}.tags{min-width:0}.tag{white-space:normal}.mini{max-width:100%}

@media(max-width:768px){
  :root{--radius:18px}
  .wrap{padding-left:18px;padding-right:18px;width:100%;max-width:100%}
  .nav{padding:12px 18px;gap:12px;align-items:flex-start}.brand{min-width:0}.brand span:last-child{overflow-wrap:anywhere}.mark{flex:0 0 36px}
  .hero-grid,.about-grid,.why-grid,.case-layout,.cta,.two-col{display:grid;grid-template-columns:1fr!important;gap:18px}
  .case-grid{display:grid;grid-template-columns:1fr!important;gap:18px;width:100%}
  .case-card,.case-card[data-featured="true"]{display:flex!important;grid-column:auto!important;grid-template-columns:none!important;flex-direction:column;width:100%;max-width:100%;overflow:hidden}
  .case-card img,.case-card[data-featured="true"] img{width:100%;max-width:100%;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:16/10;object-fit:contain;padding:8px;flex:0 0 auto}
  .case-body{width:100%;padding:20px}
  .case-meta{display:grid;grid-template-columns:1fr!important;gap:12px}
  .cap-grid,.method,.timeline{grid-template-columns:1fr 1fr;gap:12px}
  .section-head{display:block}.section-head .intro{margin-top:12px}
  .case-hero{padding-top:38px}.case-hero h1{font-size:clamp(34px,9vw,52px);line-height:1.02;letter-spacing:-.04em}
  .visual{margin-left:0;margin-right:0;width:100%;overflow:hidden}.visual img{width:100%;max-width:100%;height:auto;object-fit:contain}
  .toc{position:relative!important;top:auto!important;width:100%;margin-bottom:16px}
}

@media(max-width:480px){
  .wrap{padding-left:14px;padding-right:14px}
  .hero{padding:42px 0 30px}.section{padding:34px 0}.case-hero{padding:34px 0 24px}
  .hero h1{font-size:clamp(34px,11vw,42px);line-height:1.02;letter-spacing:-.04em}.lead{font-size:17px;line-height:1.5}.section h2{font-size:clamp(27px,8vw,34px);line-height:1.08}
  .hero-card,.card,.panel,.case-section{border-radius:16px}.panel,.case-section,.case-body{padding:16px}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}.btn{justify-content:center;width:100%}
  .toolbar{gap:8px}.filter{flex:1 1 calc(50% - 8px);padding:9px 10px;font-size:13px}
  .cap-grid,.method,.timeline,.case-meta,.kpi-grid{grid-template-columns:1fr!important}
  .case-card img,.case-card[data-featured="true"] img{aspect-ratio:auto;padding:6px;border-bottom:1px solid var(--line)}
  .case-body h3{font-size:21px;line-height:1.12}.case-body p,.mini{font-size:14px;line-height:1.5}
  .tags{gap:6px}.tag{font-size:11px;padding:5px 8px}
  .visual{border-radius:14px}.visual img{border-radius:12px}
}

/* Mobile case-study table polish: keep the site scroll-free without splitting labels into unreadable fragments. */
@media(max-width:480px){
  table{width:100%;table-layout:auto;border-collapse:collapse}
  th,td{overflow-wrap:break-word;word-break:normal;hyphens:auto}
  .case-section table{display:block;width:100%}
  .case-section table thead{display:none}
  .case-section table tbody,.case-section table tr,.case-section table td{display:block;width:100%}
  .case-section table tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .case-section table td{border:0!important;padding:4px 0!important}
  .case-section table td:first-child{color:var(--cyan);font-weight:800;font-size:15px}
}

/* iOS Safari/touch filter safeguards: preserve approved button appearance while ensuring taps reach real buttons. */
.toolbar{position:relative;z-index:3}.filter{position:relative;z-index:4;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:rgba(34,211,238,.22);cursor:pointer}.case-card[hidden]{display:none!important}.case-card>img,.visual img{pointer-events:none}