:root {
  --bg: rgba(238,240,255,0.55);
  --bg2: rgba(230,228,252,0.50);
  --bg3: rgba(220,216,248,0.48);
  --bg4: rgba(210,205,242,0.46);
  --line: rgba(80,70,160,0.06);
  --line2: rgba(80,70,160,0.10);
  --text: #1c1e2a;
  --text2: #4a4d5e;
  --muted: #888fa6;
  --faint: rgba(80,70,160,0.06);
  --accent: #3d4fa8;
  --accent-warm: #5567c8;
  --accent-dim: rgba(61,79,168,0.09);
  --gel-pink-rgb: 255, 182, 214;
  --gel-blue-rgb: 144, 195, 255;
  --gel-cyan-rgb: 136, 238, 255;
  --gel-shadow-rgb: 113, 126, 181;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --max: 1160px;
  --nav-offset: 96px;
  --nav-pill-height: 40px;
  --r: 10px;
  --tr: 0.2s ease;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-offset)}
body{
  font-family:var(--sans);
  background:
    radial-gradient(ellipse 80% 40% at 100% 0%, rgba(180,200,255,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 35% at 0% 60%, rgba(200,185,255,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(220,210,255,0.06) 0%, transparent 50%),
    linear-gradient(160deg, #f4f5ff 0%, #f7f5ff 35%, #faf8ff 70%, #fdfbff 100%);
  background-attachment:fixed;
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
body.nav-menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
main,
main [id]{scroll-margin-top:var(--nav-offset)}
.container{width:min(calc(100% - 56px),var(--max));margin:0 auto}
.container--narrow{width:min(calc(100% - 56px),740px);margin:0 auto}

/* ─── NAV / PAGE SYSTEM / HERO ─── */
nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  padding:7px 12px;
  transition:transform 0.3s ease, opacity 0.2s ease;
}
nav.nav--hidden[data-menu-open="false"]{
  transform:translateY(-110%);
  opacity:0;
}
nav[data-menu-open="true"]{
  transform:translateY(0);
  opacity:1;
}
.nav-shell{
  max-width:1200px;
  margin:0 auto;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(214,214,220,0.80);
  border-radius:20px;
  padding:4px;
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:56px;
  padding:8px 16px;
  background:rgba(251,251,252,0.96);
  border-radius:15px;
  gap:24px;
}
.nav-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
  min-width:max-content;
  min-height:var(--nav-pill-height);
}
.nav-logo-mark{
  display:block;
  font-size:0.95rem;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--text);
  line-height:1;
}
.nav-logo-sep{
  display:block;
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  font-family:var(--sans);
  line-height:1;
  padding-top:1px;
}
.nav-logo::before{
  content:'';
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,0.55);
  animation:pulse-green 2s ease-in-out infinite;
}
@keyframes pulse-green{
  0%   { box-shadow:0 0 0 0 rgba(34,197,94,0.55); background:#22c55e; }
  50%  { box-shadow:0 0 0 5px rgba(34,197,94,0); background:#4ade80; }
  100% { box-shadow:0 0 0 0 rgba(34,197,94,0); background:#22c55e; }
}
.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-link{
  display:inline-flex;
  align-items:center;
  min-height:var(--nav-pill-height);
  padding:0 12px;
  border-radius:5px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:0.82rem;
  font-weight:500;
  letter-spacing:0.01em;
  line-height:1;
  white-space:nowrap;
  transition:color var(--tr), background var(--tr);
}
.nav-link:hover,
.nav-link.active{
  color:var(--text);
  background:rgba(61,79,168,0.06);
}
.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--nav-pill-height);
  margin-left:8px;
  padding:0 16px;
  border:1px solid rgba(200,200,210,0.9);
  border-radius:999px;
  background:#ffffff;
  color:var(--text);
  cursor:pointer;
  font-family:var(--sans);
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.01em;
  line-height:1;
  white-space:nowrap;
  transition:background var(--tr);
}
.nav-cta:hover{background:#f1f1f4}

.page{
  display:none;
  padding-top:62px;
}
.page.active{display:block}

@media (min-width: 861px){
  #page-home{
    padding-top:0;
  }
  #page-home .hero-left{
    margin-top:80px;
  }
  #page-home .hero-visual{
    top:41px;
  }
}

.hero{
  position:relative;
  min-height:max(640px,min(120vh,820px));
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding: 140px 0 56px;
  border-bottom:1px solid rgba(0,0,0,0.03);
  background:
    radial-gradient(ellipse 70% 55% at 85% 10%, rgba(180,200,255,0.38) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 10% 80%, rgba(210,185,255,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 55% 90%, rgba(255,200,230,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 30% 20%, rgba(195,220,255,0.20) 0%, transparent 55%),
    linear-gradient(160deg, #f0f3ff 0%, #f7f5ff 30%, #fdf6ff 60%, #fff8fa 100%);
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(125deg, transparent 0%, rgba(255,255,255,0.55) 40%, transparent 80%),
    linear-gradient(230deg, transparent 10%, rgba(200,215,255,0.18) 50%, transparent 90%);
  pointer-events:none;
}
.hero::after{
  content:'';
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,0.55);
  border-radius:22px;
  pointer-events:none;
}
.hero .container{
  position:relative;
  z-index:1;
  padding-top:28px;
}
.hero-ghost{
  display:none;
  animation:pulse 8s ease-in-out infinite;
}
.hero-left{
  max-width:1080px;
  padding:0;
}
.hero-right{display:none}
.hero-overline{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:28px;
  color:rgba(28,30,42,0.50);
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.16em;
}
.hero-overline-dot{display:none}
.hero-title{
  max-width:30ch;
  margin-bottom:28px;
  color:#1c1e2a;
  text-shadow:0 2px 16px rgba(200,210,255,0.18);
  font-family:var(--serif);
  font-size:clamp(2rem,4.6vw,4.4rem);
  font-weight:700;
  line-height:1.01;
  letter-spacing:-0.03em;
}
.hero-title em{
  display:block;
  font-size:calc(0.49em + 1.2ch);
  color:rgba(45,55,95,0.68);
  font-style:italic;
  font-weight:400;
}
.hero-bottom{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,0.95fr);
  gap:0;
  margin-top:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.72);
  border-radius:22px;
  background:linear-gradient(160deg, rgba(255,255,255,0.72) 0%, rgba(245,247,255,0.58) 100%);
  backdrop-filter:blur(55px) saturate(140%);
  box-shadow:0 8px 40px rgba(100,120,200,0.12), 0 2px 8px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.90);
}
.hero-bottom-left{
  padding:34px 36px;
  border-right:1px solid rgba(0,0,0,0.03);
}
.hero-bottom-right{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:34px 36px;
  background:linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(240,243,255,0.20) 100%);
}
.hero-desc{
  max-width:46ch;
  margin-bottom:24px;
  color:rgba(28,30,42,0.72);
  font-size:1rem;
  font-weight:300;
  line-height:1.82;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.btn-primary{
  padding:12px 26px;
  border:1px solid rgba(255,255,255,0.90);
  border-radius:6px;
  background:linear-gradient(180deg,#ffffff 0%, #eaedf6 100%);
  box-shadow:0 4px 16px rgba(80,80,160,0.09), inset 0 1px 0 rgba(255,255,255,1);
  color:#1c1e2a;
  cursor:pointer;
  font-family:var(--sans);
  font-size:0.88rem;
  font-weight:500;
  letter-spacing:0.01em;
  transition:opacity var(--tr),transform var(--tr);
}
.btn-primary:hover{
  opacity:1;
  transform:translateY(-1px);
}
.btn-ghost{
  padding:12px 26px;
  border:1px solid rgba(255,255,255,0.82);
  border-radius:6px;
  background:rgba(255,255,255,0.40);
  color:rgba(28,30,42,0.78);
  cursor:pointer;
  font-family:var(--sans);
  font-size:0.88rem;
  font-weight:300;
  transition:color var(--tr),border-color var(--tr),background var(--tr);
}
.btn-ghost:hover{
  color:#1c1e2a;
  border-color:rgba(255,255,255,1);
  background:rgba(255,255,255,0.65);
}

.hero-stats-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.hero-stat-item{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:116px;
  margin:0;
  padding:18px 16px;
  border:1px solid rgba(255,255,255,0.70);
  border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,0.65) 0%, rgba(240,244,255,0.45) 100%);
  backdrop-filter:blur(12px);
  box-shadow:0 2px 12px rgba(100,120,200,0.08), inset 0 1px 0 rgba(255,255,255,0.85);
}
.hero-stat-item .sv{
  margin-bottom:10px;
  color:#1c1e2a;
  font-family:var(--serif);
  font-size:1.45rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.04em;
}
.hero-stat-item .sl{
  color:rgba(28,30,42,0.50);
  font-family:var(--mono);
  font-size:0.66rem;
  font-weight:300;
  line-height:1.5;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

/* HERO VISUAL — ilustración flotante */

.hero-visual {
  position: absolute;
  top: -15px;
  right: clamp(20px, 15.6vw, 200px);
  width: clamp(280px, 43.75vw, 560px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  filter: drop-shadow(0 50px 120px rgba(0, 0, 0, 0.1));
  animation: heroFloat 9s ease-in-out infinite;
}

.hero-visual img {
  width: 100%;
  height: auto;
  display: block;

  /* sombra interna más ligera */
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.06));

  /* integración con fondo */
}


@keyframes heroFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}


/* RESPONSIVE */
@media (max-width: 1024px) {
  .hero-visual {
    top: 40px;
    opacity: 0.4;
  }
}

@media (max-width: 768px) {
  .hero-visual {
    top: 20px;
    opacity: 0.5;
  }
}

/* Legacy hero right content kept hidden */
.hero-right-top{display:none}
.symptom-table{display:flex;flex-direction:column;gap:0}
.symptom-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  cursor:default;
  transition:background var(--tr);
}
.symptom-row:hover{
  margin:0 -16px;
  padding:20px 16px;
  border-bottom-color:transparent;
  border-radius:6px;
  background:var(--bg2);
}
.symptom-main{
  color:var(--text2);
  font-size:0.92rem;
  font-weight:300;
  line-height:1.4;
}
.symptom-sub{
  margin-top:3px;
  color:var(--muted);
  font-size:0.78rem;
  font-weight:300;
}
.symptom-status{
  padding:3px 8px;
  border-radius:3px;
  white-space:nowrap;
  background:var(--accent-dim);
  color:var(--accent);
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.06em;
}
.hero-right-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:32px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--line);
}
.hero-stat{
  padding:20px 18px;
  text-align:center;
  background:var(--bg2);
}
.hero-stat .sv{
  margin-bottom:5px;
  color:var(--accent);
  font-family:var(--serif);
  font-size:1.8rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.04em;
}
.hero-stat .sl{
  color:var(--muted);
  font-family:var(--mono);
  font-size:0.7rem;
  font-weight:300;
  line-height:1.3;
}

/* ─── SECTION COMMON ─── */
.section{
  padding:88px 0;
  position:relative;
}
.section:nth-child(even){
  background:
    radial-gradient(ellipse 70% 50% at 85% 50%, rgba(200,185,255,0.13) 0%, transparent 65%),
    rgba(230,225,255,0.28);
}
.section:nth-child(odd){
  background:
    radial-gradient(ellipse 60% 50% at 15% 50%, rgba(180,210,255,0.12) 0%, transparent 65%),
    rgba(220,230,255,0.22);
}
.section-header{margin-bottom:56px}
.eyebrow{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
.eyebrow::before{
  content:'';
  display:block;width:20px;height:1px;
  background:var(--accent);flex-shrink:0;
}
.section-title{
  font-family:var(--serif);
  font-size:clamp(1.7rem,2.6vw,2.3rem);
  line-height:1.08;
  letter-spacing:-0.025em;
  margin-bottom:14px;
  font-weight:700;
}
.section-body{
  font-size:0.95rem;font-weight:300;
  color:var(--text2);
  max-width:56ch;line-height:1.75;
}
.divider{height:1px;background:var(--line)}

/* ─── SOLUTIONS GRID (home) ─── */
.solutions-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  background:transparent;
  border:none;
  margin-top:0;
}
.solution-card{
  background:rgba(255,255,255,0.76);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.78);
  border-radius:var(--r);
  box-shadow:0 2px 16px rgba(80,80,160,0.07), inset 0 1px 0 rgba(255,255,255,0.92);
  padding:32px 28px;
  cursor:pointer;
  transition:background var(--tr), box-shadow var(--tr);
  position:relative;
  overflow:hidden;
}
.solution-card:hover{
  background:rgba(255,255,255,0.92);
  box-shadow:0 6px 28px rgba(80,80,160,0.11), inset 0 1px 0 rgba(255,255,255,1);
}
.solution-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transition:transform var(--tr);
  transform-origin:left;
}
.solution-card:hover::before{transform:scaleX(1)}
.solution-num{
  font-family:var(--mono);
  font-size:0.65rem;color:var(--muted);
  letter-spacing:0.1em;margin-bottom:20px;
}
.solution-name{
  font-family:var(--serif);
  font-size:1.15rem;line-height:1.2;
  margin-bottom:10px;letter-spacing:-0.01em;font-weight:700;
}
.solution-tagline{font-size:0.85rem;font-weight:300;color:var(--muted);line-height:1.6}
.solution-arrow{
  margin-top:24px;font-family:var(--mono);
  font-size:0.72rem;color:var(--accent);
  letter-spacing:0.06em;
}

/* ─── PORTFOLIO GRID (home) ─── */
.portfolio-grid-home{
  display:flex;
  flex-direction:column;
  gap:5px;
  background:transparent;
  border:none;
}
.portfolio-card-home{
  background:rgba(255,255,255,0.76);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.78);
  border-radius:var(--r);
  box-shadow:0 2px 16px rgba(80,80,160,0.07), inset 0 1px 0 rgba(255,255,255,0.92);
  padding:36px 32px;
  cursor:pointer;
  transition:background var(--tr), box-shadow var(--tr);
}
.portfolio-card-home:hover{
  background:rgba(255,255,255,0.92);
  box-shadow:0 6px 28px rgba(80,80,160,0.11), inset 0 1px 0 rgba(255,255,255,1);
}
.pcard-tag{
  font-family:var(--mono);
  font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:20px;display:block;
}
.pcard-title{
  font-family:var(--serif);
  font-size:1.4rem;line-height:1.2;
  margin-bottom:10px;letter-spacing:-0.015em;font-weight:700;
}
.pcard-desc{font-size:0.88rem;font-weight:300;color:var(--text2);line-height:1.65}
.pcard-metrics{
  display:flex;gap:0;
  margin-top:28px;
  border-top:1px solid var(--line);
}
.pcard-metric{
  flex:1;padding:16px 0 0 16px;
  border-right:1px solid var(--line);
}
.pcard-metric:last-child{border-right:none;padding-left:16px}
.pcard-metric .val{
  font-family:var(--serif);
  font-size:1.6rem;color:var(--accent);
  line-height:1;letter-spacing:-0.03em;font-weight:700;
}
.pcard-metric .lbl{font-size:0.7rem;color:var(--muted);margin-top:4px;font-weight:300;font-family:var(--mono)}

/* ─── CTA BAND ─── */
.cta-band{
  background:
    radial-gradient(ellipse 70% 60% at 80% 50%, rgba(200,185,255,0.20) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 10% 50%, rgba(180,210,255,0.16) 0%, transparent 60%),
    rgba(230,225,255,0.35);
  border-top:1px solid rgba(160,150,220,0.14);
  border-bottom:1px solid rgba(160,150,220,0.14);
  padding:80px 0;
}
.cta-layout{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;
}
.cta-left .section-title{font-size:clamp(1.8rem,3vw,2.6rem)}
.cta-left p{font-size:0.92rem;font-weight:300;color:var(--text2);line-height:1.75;margin-top:16px;max-width:65ch}

/* ─── FORM ─── */
.form-wrap{
  background:rgba(255,255,255,0.76);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.88);
  border-radius:12px;
  padding:36px;
  position:relative;
  box-shadow:0 4px 32px rgba(80,80,160,0.08), inset 0 1px 0 rgba(255,255,255,0.95);
}
.form-wrap::before{
  content:'';
  position:absolute;top:-1px;left:32px;right:32px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.form-title{
  font-family:var(--serif);font-size:1.35rem;
  margin-bottom:6px;letter-spacing:-0.01em;font-weight:700;
}
.form-sub{font-size:0.85rem;font-weight:300;color:var(--muted);margin-bottom:24px;line-height:1.6}
.form-group{margin-bottom:14px}
.form-label{
  display:block;font-family:var(--mono);
  font-size:0.68rem;color:#5a5d72;
  margin-bottom:6px;letter-spacing:0.06em;text-transform:uppercase;
}
.form-input{
  width:100%;
  background:rgba(255,255,255,0.80);
  border:1px solid rgba(180,175,210,0.28);
  border-radius:6px;
  padding:10px 13px;font-size:0.88rem;font-weight:300;
  color:#1c1e2a;font-family:var(--sans);
  transition:border-color var(--tr), box-shadow var(--tr);outline:none;
}
.form-input:focus{
  border-color:rgba(100,90,200,0.45);
  box-shadow:0 0 0 3px rgba(100,90,200,0.08);
}
.form-input::placeholder{color:#9096ae;}
textarea.form-input{resize:vertical;min-height:80px}
.form-success{display:none;text-align:center;padding:48px 20px}
.form-success .icon{font-size:1.8rem;margin-bottom:12px;color:var(--accent)}
.form-success h3{font-family:var(--serif);font-size:1.25rem;margin-bottom:8px}
.form-success p{color:var(--muted);font-size:0.88rem;font-weight:300;line-height:1.6}

/* ─── PAGE HEADER (interior pages) ─── */
.page-header{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.page-title{
  font-family:var(--serif);
  font-size:clamp(2.2rem,4vw,3.2rem);
  line-height:1.06;letter-spacing:-0.025em;
  margin-bottom:12px;font-weight:700;
}
.page-desc{font-size:0.95rem;font-weight:300;color:var(--text2);max-width:52ch;line-height:1.7}

/* ─── SOLUTIONS LIST PAGE ─── */
.solutions-list{padding: 3px;}
.solution-row{
  display:grid;grid-template-columns:280px 1fr;
  gap:60px;align-items:start;
  padding:40px 24px;
  margin:0 -24px 16px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  border-radius:22px;
  isolation:isolate;
  transition:transform .26s ease, border-color .26s ease, box-shadow .32s ease, background-color .26s ease;
}
.solution-row::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.22) 24%, rgba(255,255,255,0.06) 48%, rgba(109,132,255,0.10) 100%),
    radial-gradient(circle at 8% 22%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.18) 16%, transparent 42%),
    radial-gradient(circle at 88% 18%, rgba(125,147,255,0.18) 0%, rgba(125,147,255,0.06) 20%, transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 100%);
  border:1px solid rgba(255,255,255,0.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.70), inset 0 -1px 0 rgba(255,255,255,0.18);
  opacity:0;
  transform:translateY(8px) scale(0.985);
  transform-origin:center;
  transition:opacity .28s ease, transform .34s ease, border-color .28s ease, box-shadow .34s ease;
  pointer-events:none;
  z-index:0;
}
.solution-row::after{
  content:'';
  position:absolute;
  left:24px;
  right:24px;
  top:0;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.92) 16%, rgba(125,147,255,0.52) 52%, rgba(255,255,255,0) 100%);
  opacity:0;
  transform:scaleX(0.22);
  transform-origin:center;
  transition:opacity .28s ease, transform .34s ease;
  pointer-events:none;
  z-index:0;
}
.solution-row::before{
  content:none;
}

.solution-row:hover,
.solution-row:focus-visible{
  transform:translateX(6px) translateY(-2px);
  border-color:rgba(125,147,255,0.12);
  background:rgba(255,255,255,0.62);
  box-shadow:0 18px 40px rgba(83,98,170,0.07), 0 6px 18px rgba(255,255,255,0.45);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
}

.solution-row:hover::after,
.solution-row:focus-visible::after{
  opacity:1;
  transform:scaleX(1);
}

.solution-row:last-child{border-bottom:none}
.solution-row:hover .solution-row-name,
.solution-row:focus-visible .solution-row-name{color:var(--accent);text-shadow:0 1px 14px rgba(125,147,255,0.10)}
.solution-row:hover .solution-arrow,
.solution-row:focus-visible .solution-arrow{transform:translateX(7px);opacity:1}
.solution-row > *{position:relative;z-index:1}
.solution-row-num{font-family:var(--mono);font-size:0.68rem;color:var(--muted);letter-spacing:0.1em;margin-bottom:14px}
.solution-row-name{
  font-family:var(--serif);font-size:1.9rem;
  line-height:1.08;letter-spacing:-0.02em;
  transition:color var(--tr);margin-bottom:10px;font-weight:700;
}
.solution-row-price{font-family:var(--mono);font-size:0.75rem;color:var(--muted);letter-spacing:0.04em}
.solution-row-body{font-size:0.92rem;font-weight:300;color:var(--text2);line-height:1.7;margin-bottom:20px}
.feature-list{display:flex;flex-direction:column;gap:7px;margin-bottom:22px}
.feature-item{display:flex;gap:10px;font-size:0.85rem;font-weight:300;color:var(--muted)}
.feature-item::before{content:'→';color:var(--accent);flex-shrink:0}
.tag-list{display:flex;gap:6px;flex-wrap:wrap}
.tag{
  font-family:var(--mono);font-size:0.65rem;
  border:1px solid var(--faint);padding:3px 9px;
  border-radius:3px;color:var(--muted);letter-spacing:0.05em;
}

/* ─── SOLUTION ITEM PAGE ─── */
.solution-hero{padding:60px 0 48px;border-bottom:1px solid var(--line)}
.solution-hero-grid{display:grid;grid-template-columns:3fr 1fr;gap:60px;align-items:start}
.breadcrumb{
  margin-bottom:24px;
  color:var(--muted);
  cursor:pointer;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.04em;
  transition:color var(--tr);
}
.breadcrumb:hover{color:var(--text2)}
.solution-item-title{
  margin-bottom:18px;
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.025em;
}
.solution-item-body{font-size:1rem;font-weight:300;color:var(--text2);line-height:1.75;max-width:60ch;margin-bottom:28px}
.solution-meta-bar{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding:18px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:28px;
}
.solution-meta-item{
  display:flex;align-items:center;gap:8px;
  font-size:0.82rem;font-weight:300;color:var(--muted);
}
.solution-meta-item strong{color:var(--text2);font-weight:400}
.solution-meta-sep{color:var(--line2);font-size:0.7rem}
.solution-cta-inline{
  margin-left:auto;
}
.solution-content{padding:56px 0}
.content-block{margin-bottom:48px}
.content-block h3{font-family:var(--serif);font-size:1.3rem;letter-spacing:-0.01em;margin-bottom:14px;font-weight:700}
.content-block p{font-size:0.92rem;font-weight:300;color:var(--text2);line-height:1.75;margin-bottom:12px}

/* ─── PORTFOLIO LIST PAGE ─── */
.portfolio-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  background:transparent;
  border:none;
  margin:32px 0 56px;
}
.portfolio-card{
  background:rgba(255,255,255,0.76);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.78);
  border-radius:var(--r);
  box-shadow:0 2px 16px rgba(80,80,160,0.07), inset 0 1px 0 rgba(255,255,255,0.92);
  padding:36px 32px;
  cursor:pointer;
  transition:background var(--tr), box-shadow var(--tr);
}
.portfolio-card:hover{
  background:rgba(255,255,255,0.92);
  box-shadow:0 6px 28px rgba(80,80,160,0.11), inset 0 1px 0 rgba(255,255,255,1);
}
.portfolio-card .capability{
  font-family:var(--mono);font-size:0.65rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:20px;
}

/* ── Coming soon card ── */
.portfolio-card--coming{
  background:rgba(240,240,248,0.55);
  border-color:rgba(200,200,220,0.4);
  box-shadow:none;
  cursor:default;
  pointer-events:none;
}
.portfolio-card--coming .capability{
  color:var(--muted);
}
.portfolio-card--coming .cs-title{
  color:rgba(28,30,42,0.38);
}
.portfolio-card--coming .cs-desc{
  color:rgba(28,30,42,0.28);
}
.portfolio-card--coming .cs-meta{
  border-top-color:rgba(28,30,42,0.06);
}
.portfolio-card--coming:hover{
  background:rgba(240,240,248,0.55);
  box-shadow:none;
}
.portfolio-card .cs-title{
  font-family:var(--serif);font-size:2rem;line-height:1.1;
  letter-spacing:-0.025em;margin-bottom:12px;font-weight:700;
}
.portfolio-card .cs-desc{font-size:0.88rem;font-weight:300;color:var(--text2);line-height:1.65;margin-bottom:24px}
.portfolio-card .cs-meta{
  display:flex;gap:0;padding-top:20px;border-top:1px solid var(--line);
}
.cs-meta-item{flex:1;border-right:1px solid var(--line);padding-right:16px;margin-right:16px}
.cs-meta-item:last-child{border-right:none;padding-right:0;margin-right:0}
.cs-meta-item .val{font-family:var(--serif);font-size:1.45rem;color:var(--accent);line-height:1;font-weight:700}
.cs-meta-item .lbl{font-family:var(--mono);font-size:0.65rem;color:var(--muted);margin-top:4px}

/* ─── PORTFOLIO ITEM PAGE ─── */
.portfolio-item-hero{padding:72px 0 56px;border-bottom:1px solid var(--line)}
.portfolio-item-grid{display:grid;grid-template-columns:2fr 1fr;gap:60px;align-items:start}
.portfolio-item-title{
  font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);
  line-height:1.05;letter-spacing:-0.025em;margin-bottom:18px;font-weight:700;
}
.portfolio-item-desc{font-size:1rem;font-weight:300;color:var(--text2);line-height:1.75;margin-bottom:28px}
.meta-card{background:rgba(255,255,255,0.74);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,0.80);border-radius:var(--r);overflow:hidden;box-shadow:0 2px 16px rgba(80,80,160,0.07)}
.meta-card .meta-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:12px 16px;border-bottom:1px solid var(--line);font-size:0.83rem;
}
.meta-card .meta-row:last-child{border-bottom:none}
.meta-card .meta-label{font-family:var(--mono);font-size:0.68rem;color:var(--muted);letter-spacing:0.04em;padding-top:1px}
.meta-card .meta-val{color:var(--text2);text-align:right;max-width:18ch;font-weight:300;font-size:0.85rem}

/* KPI row */
.kpi-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;
  background:transparent;
  border:none;
  margin:48px 0;
}
.kpi-card{
  background:rgba(255,255,255,0.76);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.78);
  border-radius:var(--r);
  box-shadow:0 2px 16px rgba(80,80,160,0.07), inset 0 1px 0 rgba(255,255,255,0.92);
  padding:28px 20px;text-align:center;
}
.kpi-card .kpi-val{
  font-family:var(--serif);font-size:clamp(2rem,4vw,2.6rem);
  color:var(--accent);letter-spacing:-0.04em;line-height:1;
  margin-bottom:7px;font-weight:700;
}
.kpi-card .kpi-note{font-family:var(--mono);font-size:0.65rem;color:var(--muted);line-height:1.4}

/* Pieces grid */
.pieces-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;
  background:transparent;
  border:none;
  margin-top:16px;
}
.piece-card{
  background:rgba(255,255,255,0.76);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.78);
  border-radius:var(--r);
  box-shadow:0 2px 16px rgba(80,80,160,0.07), inset 0 1px 0 rgba(255,255,255,0.92);
  padding:26px 24px;cursor:pointer;
  transition:background var(--tr), box-shadow var(--tr);
}
.piece-card:hover{
  background:rgba(255,255,255,0.92);
  box-shadow:0 6px 28px rgba(80,80,160,0.11), inset 0 1px 0 rgba(255,255,255,1);
}
.piece-num{font-family:var(--mono);font-size:0.65rem;color:var(--muted);margin-bottom:12px;letter-spacing:0.08em}
.piece-title{font-family:var(--serif);font-size:1rem;line-height:1.3;margin-bottom:8px;letter-spacing:-0.01em;font-weight:700}
.piece-desc{font-size:0.82rem;font-weight:300;color:var(--muted);line-height:1.55}
.piece-link{margin-top:16px;font-family:var(--mono);font-size:0.72rem;color:var(--accent);letter-spacing:0.04em}

/* ─── PIECE PAGE ─── */
.piece-hero{padding:72px 0 56px;border-bottom:1px solid var(--line)}
.piece-content{padding:60px 0}
.piece-insight-block{
  background:rgba(255,255,255,0.76);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.80);
  border-left:3px solid var(--accent);
  border-radius:var(--r);
  padding:28px 28px 28px 26px;
  margin:32px 0;
  box-shadow:0 2px 16px rgba(80,80,160,0.07);
}
.piece-insight-block .ins-label{
  font-family:var(--mono);font-size:0.65rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px;
}
.piece-insight-block p{font-size:0.92rem;font-weight:300;color:var(--text);line-height:1.75}

/* ─── FOOTER ─── */
footer{border-top:1px solid var(--line);padding:44px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.footer-name{font-family:var(--mono);font-size:0.78rem;color:var(--muted);letter-spacing:0.06em}
.footer-links{display:flex;gap:24px;font-size:0.82rem;font-weight:300;color:var(--muted)}
.footer-links a:hover,.footer-links span:hover{color:var(--text2)}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.page.active .animate{animation:fadeUp 0.48s ease both}
.page.active .animate-2{animation:fadeUp 0.48s ease 0.08s both}
.page.active .animate-3{animation:fadeUp 0.48s ease 0.16s both}
.page.active .animate-4{animation:fadeUp 0.48s ease 0.24s both}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.hero-ghost{animation:pulse 8s ease-in-out infinite}

/* ─── ACCESSIBILITY / UTILITIES ─── */
.skip-link{
  position:absolute;
  left:16px;
  top:-48px;
  z-index:1000;
  background:#fff;
  color:#0d1117;
  padding:10px 14px;
  border-radius:8px;
  font-size:0.85rem;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
.skip-link:focus{top:16px}
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
:focus-visible{
  outline:2px solid rgba(45,58,107,0.7);
  outline-offset:3px;
}
[data-scroll]{cursor:pointer}
[data-scroll][tabindex="0"]:focus-visible{
  outline:2px solid rgba(45,58,107,0.7);
  outline-offset:3px;
}
.nav-toggle{
  display:none;
  appearance:none;
  background:rgba(255,255,255,0.82);
  border:1px solid rgba(28,30,42,0.10);
  color:rgba(28,30,42,0.70);
  border-radius:8px;
  min-width:var(--nav-pill-height);
  min-height:var(--nav-pill-height);
  padding:0;
  cursor:pointer;
  line-height:0;
  transition:background var(--tr), border-color var(--tr);
}
.nav-toggle:hover{
  background:rgba(255,255,255,0.96);
  border-color:rgba(28,30,42,0.18);
}
.nav-toggle svg{
  display:block;
  width:18px;
  height:18px;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  fill:none;
  transition:opacity 0.15s;
}
.section-header-grid{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;margin-bottom:40px}
.section-header-cta{white-space:nowrap;margin-bottom:4px}
.cta-copy{font-size:0.92rem;font-weight:300;color:var(--text2);line-height:1.75;margin-top:16px;max-width:40ch}
.steps{margin-top:32px;display:flex;flex-direction:column;gap:14px}
.step{display:flex;gap:14px;align-items:flex-start}
.step-index{color:var(--accent);font-family:var(--mono);font-size:0.7rem;padding-top:3px;flex-shrink:0}
.step-text{font-size:0.88rem;font-weight:300;color:var(--text2)}
.form-actions{margin-top:8px;display:flex;flex-direction:column;gap:12px}
.form-message{font-size:0.82rem;line-height:1.5;min-height:1.2em;color:var(--muted)}
.form-message.is-error{color:#e05060}
.form-message.is-success{color:var(--accent)}
.btn-primary[aria-busy="true"]{opacity:0.7;pointer-events:none}

/* ─── Utilities extracted during refactor ─── */
.u-table-wrap{overflow-x:auto;margin-top:20px}
.u-table{width:100%;border-collapse:collapse;font-size:0.82rem}
.u-table-head{padding:10px 12px;text-align:left;font-family:var(--mono);font-size:0.65rem;color:var(--muted);letter-spacing:0.06em;font-weight:400}
.u-table-head--right{text-align:right}
.u-table-cell{padding:12px 12px;color:var(--text2)}
.u-table-cell--right{text-align:right}
.u-border-bottom{border-bottom:1px solid var(--line)}
.u-border-bottom-strong{border-bottom:2px solid var(--line)}
.u-text-strong{color:var(--text);font-weight:500}
.u-inline-flex-6{display:flex;align-items:center;gap:6px}
.u-row-10{display:flex;align-items:center;gap:10px}
.u-row-12{display:flex;align-items:center;gap:12px}
.u-actions-row{display:flex;gap:12px;margin-top:48px;flex-wrap:wrap}
.u-eyebrow{font-size:0.75rem;color:var(--muted);letter-spacing:0.08em}
.u-note{font-size:0.9rem;color:var(--muted);margin-top:12px}
.u-copy-sm-muted{font-size:0.82rem;color:var(--muted);line-height:1.5}
.u-copy-muted{font-size:0.85rem;color:var(--muted);line-height:1.6}
.u-copy-body{font-size:0.88rem;color:var(--text2);line-height:1.65;margin:0}
.u-meta-label{font-family:var(--mono);font-size:0.65rem;color:var(--muted);letter-spacing:0.08em;margin-bottom:12px}
/* Utility classes added in cleanup */
.u-mt-8{margin-top:8px}
.u-mt-12{margin-top:12px}
.u-mt-16{margin-top:16px}
.u-mt-20{margin-top:20px}
.u-mt-40{margin-top:40px}
.u-mt-48{margin-top:48px}
.u-mb-20{margin-bottom:20px}
.u-pt-12{padding-top:12px}
.u-pt-16{padding-top:16px}
.u-border-top{border-top:1px solid var(--line)}
.u-opacity-45{opacity:0.45}
.u-opacity-40{opacity:0.4}
.u-pointer-none{cursor:default;pointer-events:none}
.u-max-w-60ch{max-width:60ch}
.u-color-muted{color:var(--muted)}
.u-font-size-09{font-size:0.9rem}
.u-font-size-088{font-size:0.88rem}
.u-fw-500{font-weight:500}
.u-mb-8{margin-bottom:8px}
.u-m-0{margin:0}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.mt-14{margin-top:14px}
.mt-16{margin-top:16px}
.mt-20{margin-top:20px}
.u-max-62ch{max-width:62ch}
.u-card-soft{background:rgba(255,255,255,0.74);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,0.80);border-radius:8px;padding:20px 22px;box-shadow:0 2px 16px rgba(80,80,160,0.07)}
.u-accent{color:var(--accent)}
.u-muted{color:var(--muted)}
.u-warm-strong{color:#e0569a;font-weight:500}


/* ─── ROUTE LINK STATES ─── */
.solution-card,
.portfolio-card-home,
.solution-row,
.portfolio-card,
.piece-card{
  display:block;
  color:inherit;
  text-decoration:none;
}

.solution-card:focus-visible,
.portfolio-card-home:focus-visible,
.solution-row:focus-visible,
.portfolio-card:focus-visible,
.piece-card:focus-visible,
.u-route-link:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.nav-link:focus-visible,
.nav-cta:focus-visible,
.nav-logo:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.solution-card--centered{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.chart-frame{position:relative;width:100%;height:320px;}
.chart-frame--lg{height:340px;}
.chart-legend{display:flex;gap:20px;margin-top:14px;font-size:0.8rem;color:var(--text2);flex-wrap:wrap;}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0;}
.legend-dot--orange{background:#c2410c;}
.legend-dot--accent{background:#3d4fa8;}
.legend-dot--muted{background:#888fa6;}
.legend-dot--warm{background:#c2410c;}
.legend-line{width:18px;height:2px;display:inline-block;border-radius:1px;vertical-align:middle;}
.legend-line--accent{background:rgba(61,79,168,0.35);}
.u-route-link{cursor:pointer;}
.u-route-link--accent{color:var(--accent);}
.u-display-arrow{font-family:var(--mono);font-size:1.4rem;color:var(--accent);margin-bottom:10px;}
.u-card-title-muted{font-family:var(--serif);font-size:1rem;color:var(--muted);font-weight:700;}


.u-serif-section-title{font-family:var(--serif);font-size:1.3rem;letter-spacing:-0.01em;margin-top:8px}
.u-serif-subtitle{font-family:var(--serif);font-size:1.1rem;line-height:1.3;margin-bottom:10px}
.u-panel-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;background:transparent;border:none;}
.u-panel-cell{background:rgba(255,255,255,0.74);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);padding:28px 24px}
.u-border-left{border-left:1px solid var(--line)}

.u-mb-12{margin-bottom:12px}
.u-pt-32{padding-top:32px}
.u-text-center{text-align:center}
.u-mb-16{margin-bottom:16px}
.u-mb-56{margin-bottom:56px}
.u-stack-12{display:flex;flex-direction:column;gap:12px}
.u-grid-2-10{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi-row--2{grid-template-columns:repeat(2,1fr)}
.piece-content--tight{padding-top:0}
.u-formula-box{background:rgba(255,255,255,0.74);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,0.80);border-radius:8px;padding:20px 24px;margin-top:16px;font-family:var(--mono);font-size:0.82rem;color:var(--text2);line-height:1.8;box-shadow:0 2px 12px rgba(80,80,160,0.06)}
.u-note-xs{color:var(--muted);font-size:0.72rem}
.u-zone-card{background:rgba(255,255,255,0.74);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,0.80);border-radius:8px;padding:20px;box-shadow:0 2px 12px rgba(80,80,160,0.06)}
.u-zone-card--accent{background:rgba(45,58,107,0.06);border-color:rgba(45,58,107,0.18)}
.u-zone-card--warm{background:rgba(224,86,154,0.06);border-color:rgba(224,86,154,0.22)}
.u-zone-card--muted{background:rgba(120,118,111,0.08);border-color:rgba(120,118,111,0.2)}
.u-zone-value{font-family:var(--serif);font-size:1.5rem;color:var(--text2);letter-spacing:-0.02em;margin-bottom:6px}
.u-warm{color:#e0569a}
.u-table-row-warm{background:rgba(224,86,154,0.06)}
.u-table-row-accent{background:rgba(45,58,107,0.04)}
.u-table-row-muted{background:rgba(120,118,111,0.08)}

.cs04-kpi-donuts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin:32px 0 40px;
}
.cs04-kpi-card{
  padding:22px 20px 18px;
  border-radius:18px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(245,247,255,0.70) 100%);
  box-shadow:
    0 10px 28px rgba(73,87,155,0.08),
    inset 0 1px 0 rgba(255,255,255,0.85);
}
.cs04-kpi-chart-wrap{
  position:relative;
  width:min(100%, 210px);
  height:min(210px, 100vw);
  aspect-ratio:1 / 1;
  margin:4px auto 14px;
}
.cs04-kpi-pie{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from -90deg, var(--cs04-pie-accent) 0 calc(var(--cs04-pie-value) * 1%), rgba(227,231,242,0.92) calc(var(--cs04-pie-value) * 1%) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.65),
    0 10px 30px rgba(84,96,164,0.08);
}
.cs04-kpi-pie::after{
  content:"";
  position:absolute;
  inset:22%;
  border-radius:50%;
  background:radial-gradient(circle at 36% 30%, rgba(255,255,255,0.98) 0%, rgba(247,249,255,0.96) 58%, rgba(241,244,252,0.92) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    0 1px 0 rgba(255,255,255,0.72);
}
.cs04-kpi-center{
  z-index:2;
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.cs04-kpi-value{
  font-family:var(--serif);
  font-size:clamp(2rem, 3vw, 2.8rem);
  line-height:1;
  letter-spacing:-0.03em;
  color:#171b2d;
  font-weight:700;
}
.cs04-kpi-title{
  margin:0 0 4px;
  text-align:center;
  font-family:var(--sans);
  font-size:1.15rem;
  font-weight:400;
  color:var(--text2);
  letter-spacing:-0.01em;
}
.cs04-kpi-copy{
  margin:0;
  text-align:center;
  color:var(--accent);
  font-size:0.95rem;
}
.cs04-kpi-card .u-meta-label{
  text-align:center;
  margin-bottom:10px;
}
.cs04-overview-table-wrap{
  margin-top:20px;
  border:1px solid rgba(255,255,255,0.84);
  border-radius:var(--r);
  overflow:hidden;
  background:rgba(255,255,255,0.72);
  box-shadow:0 2px 16px rgba(80,80,160,0.07), inset 0 1px 0 rgba(255,255,255,0.92);
}
.cs04-overview-table{min-width:780px}
.cs04-overview-table-head{background:rgba(61,79,168,0.06)}
.cs04-overview-table .u-table-head{padding:12px 16px}
.cs04-overview-table-head th:nth-child(2){
  color:rgba(47,54,84,0.62);
}
.cs04-overview-table-head th:nth-child(3){
  color:#4d3fd0;
  background:linear-gradient(90deg, rgba(92,73,221,0.10) 0%, rgba(92,73,221,0.04) 100%);
}
.cs04-overview-table .u-table-cell{
  vertical-align:top;
  padding:16px;
}
.cs04-overview-function{
  width:150px;
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
}
.cs04-overview-copy{
  margin:0;
  font-size:0.85rem;
  line-height:1.6;
  color:var(--text2);
}
.cs04-overview-table tbody td:nth-child(2){
  background:rgba(61,79,168,0.015);
}
.cs04-overview-table tbody td:nth-child(2) .cs04-overview-copy{
  color:rgba(47,54,84,0.72);
}
.cs04-overview-cell--after{
  position:relative;
  background:
    linear-gradient(90deg, rgba(92,73,221,0.17) 0%, rgba(92,73,221,0.10) 52%, rgba(92,73,221,0.05) 100%);
  box-shadow:
    inset 1px 0 0 rgba(92,73,221,0.16),
    inset 0 1px 0 rgba(255,255,255,0.42);
}
.cs04-overview-cell--after::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, #5543d8 0%, #8578f0 100%);
  box-shadow:0 0 16px rgba(85,67,216,0.18);
}
.cs04-overview-cell--after .cs04-overview-copy{
  color:#2d2851;
  font-weight:400;
}

#page-portfolio-cs4-p2 #cs4-p2-piece-shell{
  max-width:none;
}
#page-portfolio-cs4-p2 .portfolio-item-title{
  max-width:none;
  font-size:clamp(2.35rem, 4.8vw, 3.8rem);
  line-height:0.98;
  text-wrap:pretty;
}
#page-portfolio-cs4-p2 .portfolio-item-desc{
  max-width:none;
  margin-bottom:0;
  text-wrap:pretty;
}
#page-portfolio-cs4-p2 .content-block:first-child h3{
  max-width:none;
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  line-height:1.08;
  text-wrap:pretty;
}
#page-portfolio-cs4-p2 .content-block:first-child .u-table-wrap{
  margin-top:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.82);
  border-radius:var(--r);
  background:rgba(255,255,255,0.74);
  box-shadow:0 2px 16px rgba(80,80,160,0.07), inset 0 1px 0 rgba(255,255,255,0.92);
}
#page-portfolio-cs4-p2 .content-block:first-child .u-table{
  font-size:0.85rem;
}
#page-portfolio-cs4-p2 .content-block:first-child .cs4-piece-table tbody tr{
  background:linear-gradient(90deg, rgba(96,84,214,0.06) 0%, rgba(96,84,214,0.015) 100%);
}
#page-portfolio-cs4-p2 .content-block:first-child thead tr{
  background:rgba(61,79,168,0.05);
}
#page-portfolio-cs4-p2 .content-block:first-child .u-table-head{
  padding:12px 16px;
}
#page-portfolio-cs4-p2 .content-block:first-child .u-table-cell{
  padding:16px;
  vertical-align:top;
}
#page-portfolio-cs4-p2 .content-block:first-child .cs4-piece-bar-cell{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
#page-portfolio-cs4-p2 .content-block:first-child .cs4-piece-bar-cell::before{
  content:"";
  position:absolute;
  left:12px;
  top:10px;
  bottom:10px;
  width:calc(var(--cs4-bar-size) - 16px);
  min-width:72px;
  border-radius:12px;
  background:
    linear-gradient(90deg,
      rgba(129,108,255,var(--cs4-bar-alpha)) 0%,
      rgba(90,70,216,calc(var(--cs4-bar-alpha) + 0.06)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.26),
    0 10px 18px rgba(87,70,190,0.08);
}
#page-portfolio-cs4-p2 .content-block:first-child .cs4-piece-bar-label{
  position:relative;
  z-index:1;
  display:block;
  color:var(--text);
}
#page-portfolio-cs4-p2 .content-block:first-child .cs4-piece-function-cell{
  width:36%;
  color:#4d5fc3;
  background:linear-gradient(90deg, rgba(96,84,214,0.06) 0%, rgba(96,84,214,0.02) 100%);
}
#page-portfolio-cs4-p2 .content-block:first-child .cs4-piece-bar-cell{
  width:64%;
  color:var(--text);
  font-weight:400;
}
#page-portfolio-cs4-p2 .content-block:nth-child(2) .u-stack-12{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
#page-portfolio-cs4-p2 .content-block:nth-child(2) .u-card-soft{
  min-height:100%;
  padding:22px 24px;
}
#page-portfolio-cs4-p2 .content-block:nth-child(2) .u-copy-body{
  font-size:0.9rem;
  line-height:1.72;
}

.cs-bullet-wrap{
  width:100%;
  max-width:920px;
  margin:32px auto 0;
}
.cs-bullet-head{margin-bottom:18px}
.cs-bullet-title{
  margin:0 0 8px;
  font-size:clamp(1.4rem, 2vw, 2rem);
  line-height:1.05;
  color:#2f3654;
  font-weight:500;
  letter-spacing:-0.02em;
}
.cs-bullet-sub{
  margin:0;
  font-size:0.98rem;
  color:#7d839d;
}
.cs-bullet-chart-box{
  position:relative;
  width:100%;
  height:240px;
  padding:18px 22px 10px;
  border:1px solid rgba(115,124,164,.14);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(245,247,255,.72));
  backdrop-filter:blur(10px);
  box-shadow:
    0 12px 30px rgba(52,63,118,.06),
    inset 0 1px 0 rgba(255,255,255,.75);
}
.cs-close-compare{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.cs-close-summary{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.cs-close-chip{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.03em;
}
.cs-close-chip--benchmark{
  color:#5f6785;
  background:rgba(119,129,168,0.10);
}
.cs-close-chip--result{
  color:#4e3ecc;
  background:rgba(201,192,255,0.42);
}
.cs-close-meter{
  position:relative;
  flex:1;
  min-height:168px;
  padding:18px 8px 52px;
}
.cs-close-meter::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:18px;
  bottom:52px;
  background-image:linear-gradient(to right, rgba(111,118,167,0.08) 1px, transparent 1px);
  background-size:calc(100% / 5) 100%;
  pointer-events:none;
}
.cs-close-track{
  position:absolute;
  left:8px;
  right:8px;
  top:68px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(220,225,240,0.92), rgba(211,217,236,0.92));
}
.cs-close-benchmark-band{
  position:absolute;
  left:8px;
  top:72px;
  width:calc((100% - 16px) * 0.66666);
  height:26px;
  border-radius:999px;
  background:linear-gradient(90deg, #737a95 0%, #8f97b3 100%);
  box-shadow:0 8px 18px rgba(97,106,141,0.16);
}
.cs-close-extension-band{
  position:absolute;
  left:calc(8px + ((100% - 16px) * 0.66666));
  top:72px;
  width:calc((100% - 16px) * 0.16667);
  height:26px;
  border-radius:999px;
  background:linear-gradient(90deg, #c8c0ff 0%, #ddd7ff 100%);
  box-shadow:0 6px 16px rgba(121,104,231,0.10);
}
.cs-close-benchmark-label{
  position:absolute;
  left:calc(8px + ((100% - 16px) * 0.33333));
  top:116px;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:0.76rem;
  color:#7f87a2;
  letter-spacing:0.03em;
}
.cs-close-extension-label{
  position:absolute;
  left:calc(8px + ((100% - 16px) * 0.75));
  top:116px;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:0.74rem;
  color:#6c5ddd;
  letter-spacing:0.03em;
  white-space:nowrap;
}
.cs-close-card{
  position:absolute;
  left:var(--cs-result-pos);
  top:8px;
  transform:translateX(-50%);
  min-width:150px;
  padding:14px 16px 12px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,240,255,0.92));
  border:1px solid rgba(196,186,255,0.76);
  box-shadow:
    0 20px 34px rgba(86,73,198,0.12),
    inset 0 1px 0 rgba(255,255,255,0.96);
  text-align:center;
}
.cs-close-card-kicker{
  font-family:var(--mono);
  font-size:0.66rem;
  color:#8b84ba;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.cs-close-card-value{
  font-family:var(--serif);
  font-size:2rem;
  line-height:1;
  letter-spacing:-0.03em;
  color:#3725b2;
  margin-bottom:6px;
}
.cs-close-card-note{
  font-size:0.8rem;
  line-height:1.35;
  color:#5d6190;
}
.cs-close-marker{
  position:absolute;
  left:var(--cs-result-pos);
  top:34px;
  transform:translateX(-50%);
  width:18px;
  height:72px;
}
.cs-close-marker-line{
  position:absolute;
  left:50%;
  top:0;
  bottom:14px;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(55,37,178,0.52) 0%, rgba(55,37,178,0.18) 100%);
}
.cs-close-marker-dot{
  position:absolute;
  left:50%;
  bottom:0;
  width:18px;
  height:18px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#4f3ecc;
  box-shadow:0 0 0 7px rgba(79,62,204,0.14);
}
.cs-close-axis{
  position:absolute;
  left:8px;
  right:8px;
  bottom:16px;
  height:20px;
  font-family:var(--mono);
  font-size:0.78rem;
  color:#949bb3;
}
.cs-close-axis span{
  position:absolute;
  left:var(--pos);
  transform:translateX(-50%);
}
.cs-close-axis span:nth-child(4),
.cs-close-axis span:nth-child(5){
  color:#4e59a0;
  font-weight:600;
}
.cs-close-axis span:last-child{
  transform:translateX(-100%);
}

.cs4-overview-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin:40px 0 48px;
}
.cs4-overview-card{padding:28px 24px}
.cs4-overview-label{margin-bottom:10px}
.cs4-overview-value{
  font-family:var(--serif);
  font-size:2.6rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--accent);
}
.cs4-overview-copy{margin-top:10px;line-height:1.55}

.cs4-funnel{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:28px 0;
}
.cs4-funnel-step{position:relative}
.cs4-funnel-card{
  border-radius:8px;
  padding:20px 24px;
}
.cs4-funnel-card--top{
  background:var(--accent);
  color:#fff;
  border-radius:8px 8px 0 0;
}
.cs4-funnel-card--contact{
  margin:0 24px;
  border:1px solid rgba(61,79,168,0.2);
  background:rgba(61,79,168,0.12);
}
.cs4-funnel-card--close{
  margin:0 48px;
  border:1px solid rgba(61,79,168,0.14);
  background:rgba(61,79,168,0.07);
}
.cs4-funnel-card--result{
  margin:0 72px;
  border:1.5px solid var(--accent);
  background:rgba(255,255,255,0.6);
}
.cs4-funnel-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.cs4-funnel-label{
  margin-bottom:6px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.08em;
}
.cs4-funnel-label--light{color:rgba(255,255,255,0.75)}
.cs4-funnel-value{
  color:var(--accent);
  font-family:var(--serif);
  font-size:1.9rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.02em;
}
.cs4-funnel-value--light{color:#fff}
.cs4-funnel-value--result{font-size:2.2rem}
.cs4-funnel-note{
  margin-top:4px;
  color:var(--text2);
  font-family:var(--mono);
  font-size:0.7rem;
}
.cs4-funnel-side{text-align:right}
.cs4-funnel-side-label{
  color:var(--muted);
  font-family:var(--mono);
  font-size:0.68rem;
}
.cs4-funnel-side-copy{
  margin-top:2px;
  color:var(--muted);
  font-size:0.82rem;
}
.cs4-funnel-side-label--light{
  color:rgba(255,255,255,0.7);
  font-size:0.62rem;
  letter-spacing:0.06em;
}
.cs4-funnel-side-copy--light{
  color:#fff;
  opacity:0.85;
  font-size:0.85rem;
  font-weight:300;
}
.cs4-funnel-connector{
  display:flex;
  justify-content:center;
  width:100%;
}
.cs4-funnel-connector-line{
  width:2px;
  height:20px;
  background:var(--line2);
}
.cs4-pill-positive{
  display:inline-block;
  margin-top:6px;
  padding:2px 8px;
  border-radius:4px;
  background:rgba(34,197,94,0.1);
  color:#16a34a;
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.04em;
}

.cs4-journey-wrap{margin-top:8px}
.cs4-journey{
  min-width:640px;
  border:1px solid var(--line2);
  border-radius:8px;
  overflow:hidden;
}
.cs4-journey-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.cs4-journey-grid--head{
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.06em;
}
.cs4-journey-grid--body{
  color:var(--text2);
  font-size:0.82rem;
}
.cs4-journey-cell{
  padding:14px;
  line-height:1.55;
}
.cs4-journey-grid--head .cs4-journey-cell{padding:10px 14px}
.cs4-journey-cell--border{border-right:1px solid var(--line)}
.cs4-journey-cell--muted{color:var(--muted)}
.cs4-journey-result{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:12px 14px;
  border-top:1px solid var(--line);
  background:rgba(80,70,160,0.04);
}
.cs4-journey-result-label{
  color:var(--muted);
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.04em;
}
.cs4-journey-result-value{
  color:var(--text2);
  font-size:0.82rem;
}

.cs4-decision-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.cs4-decision-number{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-family:var(--mono);
  font-size:0.65rem;
  font-weight:600;
}
.cs4-decision-title{
  color:var(--accent);
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
}
.cs4-decision-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  font-size:0.82rem;
}
.cs4-decision-panel{
  padding:12px 14px;
  border-radius:6px;
}
.cs4-decision-panel--before{background:rgba(80,70,160,0.04)}
.cs4-decision-panel--after{
  border:1px solid rgba(61,79,168,0.12);
  background:rgba(61,79,168,0.06);
}
.cs4-decision-label{
  margin-bottom:6px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:0.6rem;
  letter-spacing:0.06em;
}
.cs4-decision-label--accent{color:var(--accent)}
.cs4-decision-copy{
  margin:0;
  color:var(--text2);
  line-height:1.55;
}

.cs4-chart-frame--sm{height:200px}
.cs4-legend-swatch{
  width:10px;
  height:10px;
  border-radius:2px;
  flex-shrink:0;
}
.cs4-legend-swatch--range{
  border:1px solid rgba(61,79,168,0.55);
  background:rgba(61,79,168,0.18);
}
.cs4-legend-swatch--result{background:var(--accent)}

.cs4-table-wrap{
  margin-top:20px;
  border:1px solid var(--line);
  border-radius:8px;
  overflow-x:auto;
  overflow-y:hidden;
}
.cs4-table-head-row{background:rgba(80,70,160,0.04)}
.cs4-table-row-current{background:rgba(61,79,168,0.05)}
.cs4-table-row-base{
  background:linear-gradient(90deg, rgba(73,56,191,0.28) 0%, rgba(73,56,191,0.14) 100%);
}
.cs4-table-row-max{
  background:linear-gradient(90deg, rgba(168,155,255,0.18) 0%, rgba(168,155,255,0.09) 100%);
}
.cs4-table-mono{
  color:var(--text2);
  font-family:var(--mono);
  font-size:0.82rem;
}
.cs4-table-mono--muted{color:var(--muted)}
.cs4-table-mono--accent{
  color:var(--accent);
  font-weight:600;
}
.cs4-table-tag{
  margin-left:6px;
  color:var(--accent);
  font-family:var(--mono);
  font-size:0.6rem;
  letter-spacing:0.04em;
}
.cs4-table-delta{font-size:0.78rem}
.cs4-table-delta--muted{color:var(--muted)}
.cs4-table-delta--positive{color:#16a34a}

.cs4-implications-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.cs4-implication-card--accent{border:1px solid rgba(61,79,168,0.18)}
.cs4-implication-label{
  margin-bottom:12px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.08em;
}
.cs4-implication-label--accent{color:var(--accent)}
.cs4-implication-copy{
  margin:0;
  color:var(--text2);
  font-size:0.88rem;
  line-height:1.65;
}

.cs4-mechanism{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,0.6);
}
.cs4-mechanism-num{
  padding-top:2px;
  white-space:nowrap;
  color:var(--muted);
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.06em;
}
.cs4-mechanism-body{min-width:0}
.cs4-mechanism-title{
  margin-bottom:4px;
  color:var(--text);
  font-size:0.88rem;
  font-weight:500;
}
.cs4-mechanism-copy{
  margin:0;
  color:var(--text2);
  font-size:0.82rem;
  line-height:1.6;
}

.gel-panel{
  --gel-radius: 20px;
  --gel-pointer-x: 50%;
  --gel-pointer-y: 28%;
  --gel-text-main: rgba(28,30,42,0.92);
  --gel-text-body: rgba(74,77,94,0.92);
  --gel-text-muted: rgba(96,102,125,0.90);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.78);
  border-radius:var(--gel-radius);
  background:
    radial-gradient(145% 86% at 50% -24%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.66) 18%, rgba(255,255,255,0.18) 36%, transparent 56%),
    radial-gradient(82% 66% at 14% 18%, rgba(var(--gel-pink-rgb),0.12) 0%, rgba(var(--gel-pink-rgb),0.06) 18%, transparent 44%),
    radial-gradient(88% 70% at 86% 20%, rgba(var(--gel-blue-rgb),0.13) 0%, rgba(var(--gel-blue-rgb),0.06) 18%, transparent 46%),
    radial-gradient(62% 46% at 52% 74%, rgba(255,255,255,0.14) 0%, transparent 54%),
    radial-gradient(120% 78% at 50% 118%, rgba(228,233,246,0.68) 0%, rgba(235,238,247,0.30) 22%, transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,0.93) 0%, rgba(250,251,255,0.86) 18%, rgba(245,247,252,0.74) 52%, rgba(232,236,245,0.92) 100%);
  background-blend-mode:screen,screen,screen,screen,normal,normal;
  background-clip:padding-box;
  backdrop-filter:blur(18px) saturate(160%) brightness(1.03);
  -webkit-backdrop-filter:blur(18px) saturate(160%) brightness(1.03);
  box-shadow:
    0 24px 46px rgba(var(--gel-shadow-rgb),0.15),
    0 9px 22px rgba(255,255,255,0.72),
    0 1px 0 rgba(255,255,255,0.98),
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 18px 26px rgba(255,255,255,0.54),
    inset 0 0 0 1px rgba(255,255,255,0.38),
    inset 0 -12px 18px rgba(255,255,255,0.22),
    inset 0 -28px 48px rgba(195,202,225,0.42),
    inset 0 -2px 0 rgba(255,255,255,0.66);
  transition:
    border-color .28s ease,
    box-shadow .28s ease,
    background-color .28s ease,
    transform .28s ease;
  color:var(--gel-text-main);
}
.gel-panel::before,
.gel-panel::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}
.gel-panel::before{
  z-index:0;
  background:
    radial-gradient(135% 80% at var(--gel-pointer-x) -14%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.84) 16%, rgba(255,255,255,0.40) 30%, transparent 56%),
    radial-gradient(54% 34% at 16% 10%, rgba(255,255,255,0.76) 0%, rgba(255,255,255,0.18) 36%, transparent 66%),
    linear-gradient(146deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.22) 18%, rgba(255,255,255,0.05) 36%, transparent 58%);
  mix-blend-mode:screen;
  opacity:0.96;
}
.gel-panel::after{
  z-index:1;
  background:
    radial-gradient(126% 84% at 12% 108%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.42) 16%, rgba(255,255,255,0.16) 32%, rgba(255,255,255,0.04) 48%, transparent 72%),
    radial-gradient(130% 86% at 88% 110%, rgba(255,255,255,0.84) 0%, rgba(255,255,255,0.40) 17%, rgba(255,255,255,0.15) 33%, rgba(255,255,255,0.04) 50%, transparent 74%),
    radial-gradient(120% 60% at 50% 118%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.28) 16%, rgba(214,220,239,0.24) 30%, transparent 56%),
    radial-gradient(76% 48% at 12% 74%, rgba(var(--gel-pink-rgb),0.14) 0%, transparent 46%),
    radial-gradient(74% 46% at 84% 68%, rgba(var(--gel-blue-rgb),0.16) 0%, transparent 48%),
    radial-gradient(60% 38% at 52% 86%, rgba(var(--gel-cyan-rgb),0.12) 0%, transparent 50%),
    radial-gradient(132% 110% at var(--gel-pointer-x) calc(var(--gel-pointer-y) + 16%), rgba(255,255,255,0.22) 0%, transparent 34%),
    repeating-linear-gradient(118deg, rgba(255,255,255,0.028) 0 2px, rgba(255,255,255,0) 2px 8px);
  mix-blend-mode:screen;
  opacity:0.94;
}
.gel-panel > *{
  position:relative;
  z-index:2;
}
.gel-panel p,
.gel-panel .u-copy-body,
.gel-panel .pcard-desc,
.gel-panel .solution-row-body,
.gel-panel .cs-desc,
.gel-panel .meta-card .meta-val{
  color:var(--gel-text-body);
}
.gel-panel .u-copy-sm-muted,
.gel-panel .u-copy-muted,
.gel-panel .u-note,
.gel-panel .u-note-xs,
.gel-panel .u-meta-label,
.gel-panel .piece-desc,
.gel-panel .solution-tagline,
.gel-panel .piece-num,
.gel-panel .solution-num,
.gel-panel .meta-card .meta-label,
.gel-panel .kpi-card .kpi-note,
.gel-panel .hero-stat-item .sl{
  color:var(--gel-text-muted);
}
.u-formula-box.gel-panel{
  color:var(--gel-text-main);
  text-shadow:0 1px 0 rgba(255,255,255,0.42);
}
.u-formula-main{
  display:block;
  color:var(--text);
  font-family:var(--mono);
  font-size:0.82rem;
  font-weight:500;
  line-height:1.8;
}
.u-formula-sub{
  display:block;
  margin-top:2px;
}
.u-formula-box.gel-panel .u-formula-main{
  color:rgba(28,30,42,0.96);
  text-shadow:0 1px 0 rgba(255,255,255,0.46);
}
.u-formula-box.gel-panel .u-note-xs{
  color:rgba(96,102,125,0.94);
}
.gel-panel:is(:hover,:focus-visible,.gel-panel--active){
  border-color:rgba(255,255,255,0.86);
  box-shadow:
    0 30px 58px rgba(var(--gel-shadow-rgb),0.18),
    0 12px 28px rgba(255,255,255,0.78),
    0 1px 0 rgba(255,255,255,1),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 22px 30px rgba(255,255,255,0.58),
    inset 0 0 0 1px rgba(255,255,255,0.44),
    inset 0 -16px 24px rgba(255,255,255,0.24),
    inset 0 -34px 58px rgba(191,200,228,0.48),
    inset 0 -2px 0 rgba(255,255,255,0.72);
}
.gel-panel:is(:hover,:focus-visible,.gel-panel--active)::before{
  opacity:1;
}
.gel-panel:is(:hover,:focus-visible,.gel-panel--active)::after{
  opacity:0.98;
}

.gel-panel--hero{
  --gel-radius: 24px;
  backdrop-filter:blur(28px) saturate(168%) brightness(1.04);
  -webkit-backdrop-filter:blur(28px) saturate(168%) brightness(1.04);
  box-shadow:
    0 32px 64px rgba(var(--gel-shadow-rgb),0.18),
    0 12px 24px rgba(255,255,255,0.74),
    0 1px 0 rgba(255,255,255,0.98),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 20px 30px rgba(255,255,255,0.58),
    inset 0 0 0 1px rgba(255,255,255,0.38),
    inset 0 -18px 28px rgba(255,255,255,0.20),
    inset 0 -38px 62px rgba(191,200,228,0.46),
    inset 0 -2px 0 rgba(255,255,255,0.72);
}
.gel-panel--metric{
  --gel-radius: 18px;
  backdrop-filter:blur(16px) saturate(158%) brightness(1.02);
  -webkit-backdrop-filter:blur(16px) saturate(158%) brightness(1.02);
}
.gel-panel--heavy{
  --gel-radius: 22px;
}
.gel-panel--row{
  --gel-radius: 22px;
}
.gel-panel--hero::after,
.gel-panel--heavy::after{
  backdrop-filter:blur(24px) saturate(170%) brightness(1.08) contrast(1.02);
  -webkit-backdrop-filter:blur(24px) saturate(170%) brightness(1.08) contrast(1.02);
}

.hero-bottom.gel-panel,
.form-wrap.gel-panel,
.solution-row.gel-panel,
.portfolio-card.gel-panel,
.solution-card.gel-panel,
.portfolio-card-home.gel-panel,
.piece-card.gel-panel,
.piece-insight-block.gel-panel,
.u-card-soft.gel-panel,
.u-formula-box.gel-panel,
.u-zone-card.gel-panel,
.u-panel-cell.gel-panel,
.meta-card.gel-panel,
.kpi-card.gel-panel,
.hero-stat-item.gel-panel{
  background-color:transparent;
}

.solution-card.gel-panel::before,
.portfolio-card-home.gel-panel::before,
.form-wrap.gel-panel::before,
.solution-row.gel-panel::before{
  transform:none;
}
.solution-card.gel-panel:hover::before,
.portfolio-card-home.gel-panel:hover::before,
.form-wrap.gel-panel:hover::before,
.solution-row.gel-panel:hover::before{
  transform:none;
}

.piece-insight-block.gel-panel{
  border-left:3px solid rgba(61,79,168,0.42);
}
.meta-card.gel-panel .meta-row,
.pcard-metrics,
.portfolio-card .cs-meta{
  border-color:rgba(80,70,160,0.08);
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .gel-panel--hero::after,
  .gel-panel--heavy::after{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    opacity:0.88;
  }
}


/* ─── RESPONSIVE ─── */
@media (max-width: 960px){
  .hero-bottom{grid-template-columns:1fr}
  .hero-bottom-left{
    padding:28px 22px;
    border-right:none;
    border-bottom:1px solid rgba(0,0,0,0.03);
  }
  .hero-bottom-right{padding:22px}
  .hero-stats-row{grid-template-columns:1fr}
  .hero-stat-item{min-height:auto}
  .solution-hero-grid,
  .portfolio-item-grid{grid-template-columns:1fr}
  .solution-row{grid-template-columns:1fr}
  .solutions-grid,
  .portfolio-grid-home,
  .portfolio-list,
  .pieces-grid{grid-template-columns:1fr}
  .cta-layout{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .cs04-kpi-donuts,
  .cs4-overview-grid,
  .cs4-implications-grid{grid-template-columns:1fr}
  .cs-bullet-chart-box{
    height:220px;
    padding:16px 16px 10px;
  }
  .solution-meta-bar{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .solution-cta-inline{margin-left:0}
  .gel-panel{
    box-shadow:
      0 18px 36px rgba(var(--gel-shadow-rgb),0.14),
      0 8px 18px rgba(255,255,255,0.66),
      0 1px 0 rgba(255,255,255,0.96),
      inset 0 1px 0 rgba(255,255,255,0.96),
      inset 0 16px 22px rgba(255,255,255,0.50),
      inset 0 0 0 1px rgba(255,255,255,0.34),
      inset 0 -10px 16px rgba(255,255,255,0.20),
      inset 0 -22px 38px rgba(195,202,225,0.38),
      inset 0 -2px 0 rgba(255,255,255,0.60);
  }
  #page-portfolio-cs4-p2 .content-block:nth-child(2) .u-stack-12{
    grid-template-columns:1fr;
  }
  #page-portfolio-cs4-p2 .portfolio-item-title{
    max-width:none;
    font-size:clamp(2.2rem, 8vw, 3.2rem);
  }
}

@media (max-width: 860px){
  .hero .container{
    padding-top:14px;
  }
  .hero{
    min-height:auto;
    padding:108px 0 42px;
  }
  .hero-title{
    max-width:11.5ch;
    margin-bottom:22px;
  }
}

@media (max-width: 820px){
  .u-panel-grid-3{grid-template-columns:1fr}
  .u-border-left{
    border-top:1px solid var(--line);
    border-left:none;
  }
  .cs04-kpi-chart-wrap{max-width:190px}
  .cs4-funnel-card--contact,
  .cs4-funnel-card--close,
  .cs4-funnel-card--result{margin:0}
  .cs4-funnel-header{align-items:flex-start}
  .cs4-funnel-side{text-align:left}
  .cs4-decision-grid{grid-template-columns:1fr}
  .u-grid-2-10,
  .kpi-row--2{grid-template-columns:1fr}
}

@media (max-width: 780px){
  :root{--nav-offset:88px}
  .nav-logo-sep{display:none}
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .nav-shell{position:relative}
  .nav-links{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:10px;
    border:1px solid rgba(255,255,255,0.90);
    border-radius:14px;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    box-shadow:0 8px 32px rgba(80,80,160,0.12), inset 0 1px 0 rgba(255,255,255,1);
  }
  nav[data-menu-open="true"] .nav-links{display:flex}
  .nav-links .nav-link{
    display:flex;
    min-height:44px;
    padding:0 14px;
  }
  .nav-cta{
    min-height:44px;
    margin-left:0;
    border-radius:8px;
    text-align:center;
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  nav{transition:none}
}

@media (max-width: 600px){
  .container{width:calc(100% - 32px)}
  .section-header-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .hero-left,
  .hero-right{
    padding-left:16px;
    padding-right:16px;
  }
  .kpi-row{grid-template-columns:1fr 1fr}
  .form-wrap{padding:24px 20px}
  .hero-right-stats{grid-template-columns:1fr}
  .cs4-mechanism{
    flex-direction:column;
    gap:10px;
  }
  .gel-panel{
    --gel-radius: 18px;
  }
  .gel-panel--hero,
  .gel-panel--heavy,
  .gel-panel--row{
    --gel-radius: 20px;
  }
  #page-portfolio-cs4-p2 .portfolio-item-title{
    max-width:none;
    font-size:clamp(2rem, 10.8vw, 2.85rem);
  }
  #page-portfolio-cs4-p2 .portfolio-item-desc{
    font-size:0.98rem;
  }
  #page-portfolio-cs4-p2 .content-block:first-child .u-table-head,
  #page-portfolio-cs4-p2 .content-block:first-child .u-table-cell{
    padding-left:14px;
    padding-right:14px;
  }
  #page-portfolio-cs4-p2 .content-block:nth-child(2) .u-card-soft{
    padding:24px 22px;
  }
}

   
/* ─── Cookie consent ─── */
#cookie-bar{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:500;
  width:min(calc(100% - 32px), 720px);
  background:rgba(248,249,252,0.92);
  backdrop-filter:blur(20px) saturate(130%);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
  border:1px solid rgba(255,255,255,0.90);
  border-radius:14px;
  box-shadow:0 8px 32px rgba(80,70,160,0.12), inset 0 1px 0 rgba(255,255,255,1);
  padding:20px 24px;
  display:flex;
  align-items:center;
  gap:24px;
  animation:slideUp 0.3s ease both;
}
#cookie-bar.hidden{display:none}
@keyframes slideUp{
  from{opacity:0;transform:translateX(-50%) translateY(12px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}
.cookie-text{
  flex:1;
  font-size:0.8rem;
  color:var(--text2);
  line-height:1.55;
}
.cookie-text strong{
  font-weight:500;
  color:var(--text);
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.04em;
}
.cookie-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}
.cookie-btn-accept{
  padding:8px 18px;
  border:1px solid rgba(255,255,255,0.90);
  border-radius:6px;
  background:linear-gradient(180deg,#ffffff 0%,#eaedf6 100%);
  box-shadow:0 4px 16px rgba(80,80,160,0.09),inset 0 1px 0 rgba(255,255,255,1);
  color:#1c1e2a;
  cursor:pointer;
  font-family:var(--sans);
  font-size:0.8rem;
  font-weight:500;
  white-space:nowrap;
  transition:opacity 0.15s,transform 0.15s;
}
.cookie-btn-accept:hover{opacity:0.88;transform:translateY(-1px)}
.cookie-btn-decline{
  padding:8px 14px;
  border:none;
  background:none;
  color:var(--muted);
  cursor:pointer;
  font-family:var(--sans);
  font-size:0.78rem;
  font-weight:300;
  white-space:nowrap;
  transition:color 0.15s;
}
.cookie-btn-decline:hover{color:var(--text2)}
@media(max-width:600px){
  #cookie-bar{flex-direction:column;align-items:flex-start;gap:14px;bottom:16px}
  .cookie-actions{width:100%;justify-content:flex-end}
}


/* ─────────────────────────────────────────────
   HOME · CASE STUDIES GALLERY
───────────────────────────────────────────── */

.home-cs-section {
  overflow: clip;
}

.home-cs-gallery {
  position: relative;
  margin-top: 8px;
}

.home-cs-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.home-cs-dates {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}

.home-cs-date {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  min-width: 92px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(28, 30, 42, 0.42);
  cursor: pointer;
  transition: opacity var(--tr), color var(--tr), transform var(--tr);
}

.home-cs-date:hover {
  color: rgba(28, 30, 42, 0.72);
  transform: translateY(-1px);
}

.home-cs-date.is-active {
  color: rgba(28, 30, 42, 0.92);
}

.home-cs-date-line {
  width: 100%;
  height: 1.5px;
  border-radius: 999px;
  background: rgba(61, 79, 168, 0.14);
  transition: background var(--tr), transform var(--tr);
  transform-origin: left center;
}

.home-cs-date.is-active .home-cs-date-line {
  background: rgba(61, 79, 168, 0.72);
  transform: scaleX(1.02);
}

.home-cs-date-text {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

.home-cs-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-cs-arrow {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(236,239,248,0.68) 100%);
  box-shadow:
    0 8px 30px rgba(98, 110, 170, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.95);
  color: rgba(28, 30, 42, 0.74);
  cursor: pointer;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.home-cs-arrow:hover {
  transform: translateY(-1px);
  color: rgba(28, 30, 42, 0.96);
  box-shadow:
    0 12px 34px rgba(98, 110, 170, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.98);
}

.home-cs-stage {
  position: relative;
  min-height: 540px;
  isolation: isolate;
}

.home-cs-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100%, 1040px);
  transform-origin: center center;
  transition:
    transform 0.72s cubic-bezier(.22,.78,.22,1),
    opacity 0.48s ease,
    filter 0.48s ease;
  will-change: transform, opacity, filter;
}

.home-cs-slide.is-active {
  z-index: 3;
  opacity: 1;
  filter: blur(0);
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

.home-cs-slide.is-next {
  z-index: 2;
  opacity: 0.66;
  filter: blur(2px);
  transform: translateX(-50%) translateX(39%) translateY(54px) scale(0.84);
  pointer-events: auto;
}

.home-cs-slide.is-prev {
  z-index: 1;
  opacity: 0.22;
  filter: blur(6px);
  transform: translateX(-50%) translateX(-42%) translateY(72px) scale(0.78);
  pointer-events: none;
}

.home-cs-slide.is-hidden {
  z-index: 0;
  opacity: 0;
  filter: blur(10px);
  transform: translateX(-50%) translateY(90px) scale(0.72);
  pointer-events: none;
}

.home-cs-card {
  display: block;
  padding: 30px 32px 30px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 30px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.92) 0%, rgba(248,249,255,0.86) 58%, rgba(242,244,252,0.82) 100%);
  backdrop-filter: blur(38px) saturate(140%);
  box-shadow:
    0 24px 80px rgba(108, 120, 175, 0.11),
    0 4px 14px rgba(0,0,0,0.03),
    inset 0 1px 0 rgba(255,255,255,1);
}

.home-cs-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.home-cs-card-meta .pcard-tag {
  display: inline;
  margin-bottom: 0;
}
/* ── Home gallery — coming soon card ── */
.home-cs-card--coming {
  cursor: default;
  pointer-events: none;
}
.home-cs-card--coming .pcard-tag--muted {
  color: var(--muted);
}
.home-cs-card--coming .pcard-title--muted {
  color: rgba(28,30,42,0.2);
}
.home-cs-card--coming .pcard-desc {
  color: rgba(28,30,42,0.22);
}
.home-cs-card--coming .home-cs-card-body {
  align-items: stretch;
}
.home-cs-card--coming .home-cs-main {
  display: contents;
}
.home-cs-coming-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 28px 4px;
}
.home-cs-coming-label {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
  opacity: 0.55;
  line-height: 1;
}
.home-cs-coming-sub {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(28,30,42,0.26);
}

.home-cs-year {
  color: rgba(28,30,42,0.34);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

.home-cs-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.88fr);
  grid-template-areas:
    "title title"
    "desc metrics";
  gap: 28px;
  align-items: start;
}

.home-cs-main {
  display: contents;
}

.home-cs-main .pcard-title {
  grid-area: title;
  max-width: none;
  width: 100%;
  font-size: clamp(2.5rem, 5.4vw, 4.35rem);
  line-height: 1;
  letter-spacing: -0.0em;
}

.home-cs-main .pcard-desc {
  max-width: 50ch;
  color: rgba(28,30,42,0.56);
  font-size: 0.98rem;
  line-height: 1.85;
}

.home-cs-card .pcard-metrics {
  grid-area: metrics;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 0;
  border-top: none;
  align-self: start;
}

.home-cs-coming-panel {
  grid-area: metrics;
}

.home-cs-card .pcard-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 124px;
  padding: 0px 16px 15px;
  border: 1px solid rgba(255,255,255,0.88);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(245,247,255,0.82) 100%);
  box-shadow: 0 2px 12px rgba(80,80,160,0.06), inset 0 1px 0 rgba(255,255,255,1);
  text-align: center;
}

.home-cs-card .pcard-metric .val {
  margin-bottom: 6px;
  color: rgba(28,30,42,0.92);
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.home-cs-card .pcard-metric .lbl {
  color: rgba(28,30,42,0.42);
  font-family: var(--mono);
  font-size: 0.65rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

@media (max-width: 1180px) {
  .home-cs-stage {
    min-height: 510px;
  }

  .home-cs-slide.is-next {
    transform: translateX(-50%) translateX(32%) translateY(52px) scale(0.84);
  }

  .home-cs-slide.is-prev {
    transform: translateX(-50%) translateX(-34%) translateY(64px) scale(0.78);
  }

  .home-cs-main .pcard-title {
    max-width: none;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
  }
}

@media (max-width: 980px) {
  .home-cs-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-cs-stage {
    min-height: 620px;
  }

  .home-cs-slide,
  .home-cs-slide.is-active,
  .home-cs-slide.is-next,
  .home-cs-slide.is-prev,
  .home-cs-slide.is-hidden {
    left: 0;
    width: 100%;
    transform: none;
  }

  .home-cs-slide.is-active {
    opacity: 1;
    filter: blur(0);
    z-index: 3;
    pointer-events: auto;
  }

  .home-cs-slide.is-next,
  .home-cs-slide.is-prev,
  .home-cs-slide.is-hidden {
    opacity: 0;
    filter: blur(10px);
    pointer-events: none;
  }

  .home-cs-card-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "desc"
      "metrics";
    gap: 22px;
  }

  .home-cs-main .pcard-title {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .home-cs-stage {
    min-height: 700px;
  }

  .home-cs-card {
    padding: 24px 20px 22px;
    border-radius: 24px;
  }

  .home-cs-card-meta {
    margin-bottom: 18px;
  }

  .home-cs-main .pcard-title {
    max-width: none;
    margin-bottom: 16px;
    font-size: clamp(2rem, 11vw, 3.1rem);
    line-height: 0.98;
  }

  .home-cs-main .pcard-desc {
    max-width: 100%;
    font-size: 0.95rem;
    line-height: 1.78;
  }

  .home-cs-card .pcard-metrics {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .home-cs-card .pcard-metric {
    min-height: unset;
  }

  .home-cs-dates {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  .home-cs-date {
    min-width: 0;
    flex: 1 1 0;
  }

  .home-cs-controls {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ─────────────────────────────────────────────
   CS5 — Charts & Heatmap
───────────────────────────────────────────── */
.cs5-chart-box {
  position: relative;
  width: 100%;
  padding: 18px 22px 12px;
  border: 1px solid rgba(115,124,164,.14);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(245,247,255,.72));
  box-shadow: 0 12px 30px rgba(52,63,118,.06), inset 0 1px 0 rgba(255,255,255,.75);
  margin: 24px 0 32px;
}

.cs5-chart-box canvas { display: block; width: 100% !important; }

.cs5-heatmap-wrap {
  overflow-x: auto;
  margin: 24px 0 32px;
  border-radius: 16px;
  border: 1px solid rgba(115,124,164,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(245,247,255,.75));
  padding: 18px 16px 14px;
  box-shadow: 0 8px 24px rgba(52,63,118,.05);
}

.cs5-heatmap {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
}

.cs5-hm-corner,
.cs5-hm-th {
  padding: 5px 8px 8px;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.70rem;
  font-weight: 500;
  color: var(--text2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cs5-hm-corner { text-align: left; }

.cs5-hm-label {
  padding: 5px 10px 5px 0;
  font-family: var(--mono);
  font-size: 0.73rem;
  color: var(--text2);
  white-space: nowrap;
}

.cs5-hm-cell {
  padding: 6px 4px;
  text-align: center;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.73rem;
  min-width: 46px;
}

.cs5-hm-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
}

.cs5-top-slots {
  margin: 24px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs5-slot-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(245,247,255,.70);
  border: 1px solid rgba(115,124,164,.12);
}

.cs5-slot-val {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: #2f3654;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.cs5-slot-label {
  font-family: var(--mono);
  font-size: 0.70rem;
  color: var(--accent);
  margin-bottom: 3px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cs5-slot-ctx {
  font-size: 0.87rem;
  color: var(--text2);
  line-height: 1.55;
}

@media (max-width: 640px) {
  .cs5-hm-cell { min-width: 36px; font-size: 0.66rem; }
  .cs5-hm-label { font-size: 0.66rem; }
  .cs5-slot-card { grid-template-columns: 1fr; gap: 6px; }
}

/* ─────────────────────────────────────────────
   LA MENTE — trigger + panel
───────────────────────────────────────────── */
.hero { position: relative; }

/* Title + trigger wrapper */
.hero-title-wrap {
  position: relative;
}

/* Trigger tab */
.lm-trigger {
  position: absolute;
  bottom: 6px;
  right: 4ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text2);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  opacity: 0.45;
  transition: opacity 0.18s ease;
}

.lm-trigger:hover { opacity: 1; }

.lm-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Backdrop */
.lm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16,18,32,0.32);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.lm-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

/* Panel */
.lm-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100dvh;
  background: #f8f9fe;
  z-index: 210;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -6px 0 48px rgba(52,63,118,0.13);
}

.lm-panel.is-open {
  transform: translateX(0);
}

.lm-panel-inner {
  position: relative;
  padding: 52px 38px 60px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Close button */
.lm-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(115,124,164,0.18);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.lm-close:hover {
  color: var(--text);
  border-color: rgba(115,124,164,0.36);
  background: rgba(255,255,255,0.7);
}

/* Header */
.lm-header {
  margin-bottom: 30px;
}

.lm-header-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--accent);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.lm-header-title {
  display: block;
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: #1c1e2a;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

/* Opening paragraph */
.lm-opening {
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--text2);
  margin: 0 0 32px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(115,124,164,0.12);
}

/* Blocks */
.lm-blocks {
  display: flex;
  flex-direction: column;
  gap: 26px;
  flex: 1;
}

.lm-block-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}

.lm-block-copy {
  font-size: 0.88rem;
  line-height: 1.74;
  color: var(--text2);
  margin: 0;
}

/* Mobile */
@media (max-width: 640px) {
  .lm-trigger {
    bottom: 20px;
    right: 20px;
  }

  .lm-panel-inner {
    padding: 44px 24px 52px;
  }

  .lm-header-title {
    font-size: 2rem;
  }
}

/* ─── DIAGNOSTIC MODAL ─── */
#diag-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
#diag-modal.is-open {
  display: flex;
}
#diag-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 40, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
#diag-modal-panel {
  position: relative;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(160deg, #f4f5ff 0%, #f7f5ff 60%, #faf8ff 100%);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(60, 50, 140, 0.18), 0 2px 8px rgba(60,50,140,0.08);
  padding: 40px 36px 36px;
  animation: modal-in 0.22s ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
#diag-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 4px;
  transition: color var(--tr), background var(--tr);
  line-height: 1;
}
#diag-modal-close:hover {
  color: var(--text);
  background: var(--faint);
}
#diag-modal-success {
  display: none;
}
@media (max-width: 540px) {
  #diag-modal-panel {
    padding: 36px 20px 28px;
  }
}
}