/*!
 * Kinson Visuals — Design Language System v2.0
 * Portable stylesheet for building on-brand landing pages in any tool.
 * See README.md in this package for import instructions per tool.
 * Full interactive reference: kinson-visuals-design-system.html / DESIGN.md
 */

/* Display renders as Manrope until your Adobe Fonts (Museo Sans) kit is embedded — see README.
   Body uses Sen directly, no Adobe Fonts required. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Sen:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* Signal Blue — primary brand color */
  --blue-50:#EAF7FC;--blue-100:#CDEEF9;--blue-200:#98DCF2;--blue-300:#5CC3E8;--blue-400:#2CA8DA;
  --blue-500:#1789C2;--blue-600:#106D9E;--blue-700:#0C5379;--blue-800:#083A57;--blue-900:#05253A;

  /* Peach — the one accent */
  --coral-50:#FFF5F1;--coral-100:#FFE9DF;--coral-200:#FFD4C3;--coral-300:#FFBEA8;--coral-400:#FF9D85;
  --coral-500:#FF7F6A;--coral-600:#E5654F;--coral-700:#B84F3D;--coral-800:#8A3B2D;--coral-900:#5C271E;

  /* Neutrals */
  --ink-0:#FFFFFF;--ink-50:#F8FAFD;--ink-100:#F0F3F8;--ink-200:#E2E7EF;--ink-300:#CBD3DF;
  --ink-400:#A3AEC0;--ink-500:#78849A;--ink-600:#57647A;--ink-700:#3B4658;--ink-800:#242C3A;--ink-900:#10151F;

  /* Text — blue-tinted, never gray */
  --text-1:#0C5379;--text-2:#1B4A66;--text-3:#2F5975;--text-4:#4F7291;

  /* Semantic states — peach-led by design; Error is the one exception */
  --selected-bg:var(--coral-100);--selected-border:var(--coral-500);
  --success:var(--coral-600);--warning:var(--coral-400);--error:#DC2626;--info:var(--blue-400);

  /* Surfaces — light neutral, not tinted */
  --canvas:#FAFBFC;--surface:var(--ink-0);--surface-elevated:var(--ink-0);--cream:#FFF7F1;
  --border:rgba(23,137,194,0.16);--border-md:rgba(23,137,194,0.28);

  /* Gradients — Blue's job only, never Peach */
  --depth-grad:linear-gradient(135deg,var(--blue-300) 0%,var(--blue-500) 50%,var(--blue-700) 100%);
  --depth-grad-soft:linear-gradient(135deg,var(--blue-100) 0%,var(--blue-400) 100%);
  --depth-grad-bloom:radial-gradient(circle at 28% 22%,rgba(255,255,255,0.45),transparent 55%),linear-gradient(135deg,var(--blue-300) 0%,var(--blue-500) 50%,var(--blue-700) 100%);

  /* Shadows & glow */
  --shadow-sm:0 1px 2px rgba(23,137,194,0.08),0 1px 1px rgba(16,21,31,0.04);
  --shadow-md:0 8px 24px rgba(23,137,194,0.16),0 2px 6px rgba(16,21,31,0.06);
  --shadow-lg:0 16px 48px rgba(23,137,194,0.24),0 4px 14px rgba(16,21,31,0.10);
  --glow-blue:0 0 90px rgba(23,137,194,0.55);
  --glow-coral:0 0 60px rgba(255,127,106,0.30);
  --glass-highlight:linear-gradient(135deg,rgba(255,255,255,0.35) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,0.12) 100%);

  /* Type */
  --font-display:'museo-sans','Manrope',sans-serif;
  --font-body:'Sen',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',monospace;

  /* Spacing — 4px baseline */
  --sp-1:4px;--sp-2:8px;--sp-3:16px;--sp-4:24px;--sp-5:40px;--sp-6:64px;
}

/* ============================================================
   BASE
   ============================================================ */
html{scroll-behavior:smooth}
body{background:var(--canvas);color:var(--text-3);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--blue-600)}

@keyframes glowPulse{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spinSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   LAYOUT
   ============================================================ */
.container{max-width:1120px;margin:0 auto;padding:0 40px}
.container-prose{max-width:680px;margin:0 auto}
.section{padding:88px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:820px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .section{padding:56px 0}
  .container{padding:0 24px}
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.eyebrow{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--coral-700);margin-bottom:10px;font-weight:500}
.display{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,5.4vw,60px);line-height:1.1;letter-spacing:-0.01em;color:var(--text-1)}
.h1{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4.2vw,42px);line-height:1.15;letter-spacing:-0.01em;color:var(--text-1)}
.h2{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.8vw,38px);line-height:1.2;color:var(--text-1)}
.h3{font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1.25;color:var(--text-1)}
.body-lg{font-size:18px;font-weight:600;line-height:1.7;color:var(--text-1)}
.body{font-size:15px;font-weight:500;line-height:1.7;color:var(--text-3)}
.body-sm{font-size:13px;line-height:1.6;color:var(--text-4)}
.lead{color:var(--text-3);font-size:16.5px;line-height:1.75;max-width:560px}
.mono-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-4)}
.gradient-text{background:var(--depth-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ============================================================
   BUTTONS — Peach is always solid, Blue may use the gradient
   ============================================================ */
.btn-primary,a.btn-primary,a.btn-primary:visited{background:var(--depth-grad-bloom);color:#fff;border:none;border-radius:11px;padding:14px 28px;font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;transition:box-shadow .2s,transform .15s;display:inline-block;text-decoration:none}
.btn-primary:hover,a.btn-primary:hover{box-shadow:var(--glow-blue);transform:translateY(-2px);color:#fff}
.btn-accent,a.btn-accent,a.btn-accent:visited{background:var(--coral-500);color:#fff;border:none;border-radius:11px;padding:14px 28px;font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;transition:background .18s,box-shadow .2s,transform .15s;display:inline-block;text-decoration:none}
.btn-accent:hover,a.btn-accent:hover{background:var(--coral-600);box-shadow:var(--glow-coral);transform:translateY(-2px);color:#fff}
.btn-outline{background:none;border:1.5px solid var(--blue-400);border-radius:11px;padding:12.5px 28px;font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--blue-600);cursor:pointer;transition:background .18s;display:inline-block}
.btn-outline:hover{background:var(--blue-50)}
.btn-ghost{background:var(--ink-100);border:1px solid var(--border);border-radius:11px;padding:14px 28px;font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--text-2);cursor:pointer;transition:background .18s;display:inline-block}
.btn-ghost:hover{background:var(--ink-200)}
/* One primary + one accent max per view. */

/* ============================================================
   BADGES / TAGS / STATES
   ============================================================ */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:20px}
.badge-blue{background:var(--blue-50);color:var(--blue-700);border:1px solid rgba(23,137,194,0.22)}
.badge-coral{background:var(--coral-50);color:var(--coral-700);border:1px solid rgba(255,127,106,0.28)}
.badge-neutral{background:var(--ink-100);color:var(--text-2);border:1px solid var(--border)}
.badge-live{background:var(--text-1);color:#fff}
.badge-live .dot{width:6px;height:6px;border-radius:50%;background:var(--coral-400);box-shadow:0 0 5px rgba(255,127,106,0.6)}

.state{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:9px;font-size:13px;font-weight:600}
.state-selected{background:var(--selected-bg);border:1.5px solid var(--selected-border);color:var(--coral-700)}
.state-success{background:var(--coral-50);border:1px solid rgba(255,127,106,0.3);color:var(--success)}
.state-warning{background:var(--coral-50);border:1px solid rgba(255,127,106,0.22);color:var(--warning)}
.state-error{background:#FEF2F2;border:1px solid rgba(220,38,38,0.25);color:var(--error)}

/* ============================================================
   CARDS
   ============================================================ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm)}
.card-pad{padding:24px}
.card-hover{transition:transform .2s,box-shadow .2s}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}

/* ============================================================
   GLASSMORPHISM — always over a colorful/photo backdrop, never flat canvas
   ============================================================ */
.glass{position:relative;background:rgba(255,255,255,0.16);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,0.45);border-radius:20px;box-shadow:var(--shadow-md);overflow:hidden;color:#fff}
.glass::before{content:'';position:absolute;inset:0;background:var(--glass-highlight);pointer-events:none}
.glass-deep{position:relative;background:rgba(255,255,255,0.34);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);
  border:1px solid rgba(255,255,255,0.55);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;color:#fff}
.glass-deep::before{content:'';position:absolute;inset:0;background:var(--glass-highlight);pointer-events:none}
.rim-wrap{border-radius:20px;padding:1.4px;background:linear-gradient(135deg,rgba(255,255,255,0.85),rgba(23,137,194,0.18) 55%,rgba(255,127,106,0.16))}
.rim-inner{border-radius:18.6px;background:rgba(255,255,255,0.18);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);position:relative;overflow:hidden;color:#fff}
.rim-inner::before{content:'';position:absolute;inset:0;background:var(--glass-highlight);pointer-events:none}
.caption-chip{position:absolute;bottom:10px;left:10px;padding:6px 12px;border-radius:20px;font-size:11px;font-weight:600}

/* ============================================================
   INPUTS / TOGGLE / PROGRESS
   ============================================================ */
.field-label{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:0.06em;color:var(--text-4);margin-bottom:6px;text-transform:uppercase}
.input{background:var(--surface-elevated);border:1.5px solid var(--ink-300);border-radius:9px;padding:12px 16px;color:var(--text-1);font-family:var(--font-body);font-size:14px;width:100%;outline:none;transition:border-color .18s,box-shadow .18s}
.input:focus{border-color:var(--blue-400);box-shadow:0 0 0 4px rgba(23,137,194,0.14)}
.input::placeholder{color:var(--text-4)}

.toggle{position:relative;width:46px;height:26px;flex-shrink:0;display:inline-block}
.toggle input{opacity:0;width:0;height:0}
.toggle .track{position:absolute;inset:0;background:var(--ink-300);border-radius:13px;cursor:pointer;transition:.2s}
.toggle .track::after{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.toggle input:checked+.track{background:var(--depth-grad)}
.toggle input:checked+.track::after{transform:translateX(20px)}

.ptrack{height:6px;background:var(--ink-200);border-radius:3px;overflow:hidden}
.pbar{height:100%;border-radius:3px;background:var(--depth-grad)}

/* ============================================================
   HERO / FEATURE SECTIONS
   ============================================================ */
.hero{position:relative;overflow:hidden;border-radius:20px;padding:80px 48px;background:var(--surface)}
.hero::before{content:'';position:absolute;width:600px;height:600px;top:-270px;left:-200px;border-radius:50%;
  background:radial-gradient(circle,rgba(23,137,194,0.44) 0%,rgba(23,137,194,0) 68%);filter:blur(6px);pointer-events:none;animation:glowPulse 6s ease-in-out infinite}
.hero::after{content:'';position:absolute;width:260px;height:260px;bottom:-110px;right:-70px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,127,106,0.22) 0%,rgba(255,127,106,0) 70%);filter:blur(6px);pointer-events:none;animation:glowPulse 8s ease-in-out infinite;animation-delay:2s}
.hero-inner{position:relative;z-index:1}

.stage-dark{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 25%,var(--blue-900) 0%,#060B12 68%);
  border-radius:20px;padding:80px 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

/* Diagonal gradient feature — headline/body over a large soft blue field, one Peach glow tucked in */
.gradient-feature{position:relative;overflow:hidden;border-radius:22px;min-height:360px;
  background:linear-gradient(135deg,var(--blue-300) 0%,var(--blue-600) 55%,var(--blue-800) 100%);
  padding:56px 48px;display:flex;flex-direction:column;justify-content:space-between}
.gradient-feature .gf-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.75);margin-bottom:10px}
.gradient-feature h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4vw,40px);color:#fff;position:relative;z-index:2;max-width:360px}
.gradient-feature p{color:rgba(255,255,255,0.82);font-size:14.5px;line-height:1.7;max-width:380px;position:relative;z-index:2}
.blob-cluster{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:340px;height:340px;z-index:1}
.blob{position:absolute;border-radius:50%}
.blob-a{width:260px;height:260px;top:0;right:20px;background:linear-gradient(150deg,rgba(255,255,255,0.92),rgba(255,255,255,0.5));box-shadow:0 30px 60px rgba(5,37,58,0.3)}
.blob-b{width:190px;height:190px;bottom:0;right:110px;background:linear-gradient(150deg,rgba(255,255,255,0.7),rgba(255,255,255,0.25));box-shadow:0 24px 46px rgba(5,37,58,0.24)}
.blob-c{width:64px;height:64px;bottom:70px;right:150px;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,0.9),var(--coral-300) 60%,var(--coral-600) 100%);box-shadow:0 0 30px rgba(255,127,106,0.4)}

/* ============================================================
   GEOMETRY — shape vocabulary. Max 1–3 shapes per view.
   ============================================================ */
.g-capsule{width:118px;height:46px;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,0.6),rgba(23,137,194,0.4));
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.6);box-shadow:0 16px 30px rgba(12,83,121,0.28);position:relative}
.g-capsule::after{content:'';position:absolute;top:6px;left:14px;width:34px;height:9px;border-radius:999px;background:rgba(255,255,255,0.75);filter:blur(2px)}
.g-circle{width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,0.85),rgba(23,137,194,0.45) 58%,rgba(12,83,121,0.55));
  box-shadow:0 16px 30px rgba(12,83,121,0.3);border:1px solid rgba(255,255,255,0.55)}
.g-hex{width:66px;height:76px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(160deg,rgba(255,255,255,0.65),rgba(23,137,194,0.5));border:1px solid rgba(255,255,255,0.55);box-shadow:0 16px 30px rgba(12,83,121,0.26)}
.g-rect{width:86px;height:62px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,0.6),rgba(255,127,106,0.35));
  border:1px solid rgba(255,255,255,0.55);box-shadow:0 16px 30px rgba(184,69,40,0.22)}
.g-ribbon{width:150px;height:32px;border-radius:999px;background:linear-gradient(90deg,var(--blue-400),var(--coral-300));transform:rotate(-11deg);
  box-shadow:0 12px 26px rgba(12,83,121,0.25)}

/* ============================================================
   3D GLASS OBJECTS — CSS approximations; commission real renders for production hero use
   ============================================================ */
.sphere3d{width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,0.92),var(--blue-300) 32%,var(--blue-600) 74%,var(--blue-800) 100%);
  box-shadow:0 34px 60px rgba(5,37,58,0.4),inset -12px -16px 30px rgba(5,37,58,0.35),inset 8px 10px 18px rgba(255,255,255,0.5);
  animation:floatY 7s ease-in-out infinite}
.hex-facet{width:78px;height:90px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);position:absolute;
  box-shadow:0 20px 34px rgba(5,37,58,0.35)}
.rail{width:100%;max-width:340px;height:26px;border-radius:999px;background:linear-gradient(90deg,rgba(23,137,194,0.15),rgba(23,137,194,0.85) 40%,rgba(255,127,106,0.4) 100%);
  box-shadow:0 0 40px rgba(23,137,194,0.4);position:relative}
.rail-node{width:30px;height:30px;border-radius:50%;position:absolute;top:50%;left:38%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 32% 26%,#fff,var(--blue-300) 45%,var(--blue-700) 100%);box-shadow:0 0 24px rgba(23,137,194,0.7),0 10px 20px rgba(5,37,58,0.5)}

/* ============================================================
   MEDIA / PORTFOLIO CARDS — keep client thumbnails color-accurate, no tint
   ============================================================ */
.media-card{border-radius:16px;overflow:hidden;position:relative;aspect-ratio:16/10;background-image:linear-gradient(135deg,var(--ink-800),var(--blue-900))}
.play-glass{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,0.18);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.35);display:flex;align-items:center;justify-content:center}
.play-glass::after{content:'';border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #fff;margin-left:3px}
.tag-featured{position:absolute;top:14px;left:14px;font-size:11px;font-weight:700;padding:5px 12px;border-radius:20px;background:var(--coral-500);color:#fff}
.img-mask-capsule{border-radius:999px;overflow:hidden}
.img-mask-circle{border-radius:50%;overflow:hidden}
.img-mask-hex{clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);overflow:hidden}

/* ============================================================
   ICON TILE / METRICS
   ============================================================ */
.icon-tile{width:46px;height:46px;border-radius:12px;background:var(--blue-50);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--blue-600)}
.icon-tile-coral{background:var(--coral-50);color:var(--coral-700)}
.metric-num{font-family:var(--font-mono);font-size:32px;font-weight:500;color:var(--text-1)}
.metric-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;color:var(--text-4);text-transform:uppercase;margin-top:3px}

/* ============================================================
   NAV / FOOTER SCAFFOLD
   ============================================================ */
.kv-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:28px;padding:16px 40px;
  background:rgba(248,250,253,0.78);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--border)}
.kv-brand{display:flex;align-items:center;gap:9px;margin-right:auto;text-decoration:none}
.kv-brand .mark{width:28px;height:28px;border-radius:8px;background:var(--depth-grad-bloom);position:relative;flex-shrink:0}
.kv-brand .mark::after{content:'';position:absolute;width:7px;height:7px;border-radius:50%;background:var(--coral-500);top:-2px;right:-2px;box-shadow:0 0 7px rgba(255,127,106,0.55)}
.kv-brand .word{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:0.05em;color:var(--text-1)}
.kv-nav a{font-size:14px;color:var(--text-2);text-decoration:none;font-weight:500}
.kv-nav a:hover{color:var(--text-1)}

.kv-footer{padding:48px 40px;border-top:1px solid var(--border)}
.kv-footer-inner{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.kv-footer a{color:var(--text-3);font-size:13px;text-decoration:none;margin-left:22px}
.kv-footer a:hover{color:var(--text-1)}

/* ============================================================
   CLOSING CTA CARD — modeled on prolibu.com/en's ".migrate-cta__card": a large rounded
   card holding a centered headline/copy/button, with soft blurred "glow strip" light beams
   in the corners. Prolibu's card is white with blue glow beams; ours IS the blue gradient,
   so the beams are a soft peach/white accent instead. Shared across index.html and the
   case study pages.
   ============================================================ */
.cta-card{position:relative;overflow:hidden;border-radius:24px;padding:96px 40px;
  text-align:center;background:var(--depth-grad-bloom);isolation:isolate}
.cta-card__glow{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.cta-glow-strip{position:absolute;border-radius:160px;filter:blur(60px)}
.cta-glow-strip--1{width:260px;height:900px;top:-380px;left:-40px;
  background:linear-gradient(180deg,transparent 4%,rgba(255,255,255,.55) 46%,transparent 88%);
  transform:rotate(8deg);opacity:.5}
.cta-glow-strip--2{width:220px;height:820px;bottom:-360px;right:-30px;
  background:linear-gradient(180deg,transparent 4%,rgba(255,127,106,.5) 46%,transparent 88%);
  transform:rotate(-10deg);opacity:.45}
.cta-card__content{position:relative;z-index:2;max-width:560px;margin:0 auto}
.cta-card__content h2,.cta-card__content p{text-shadow:0 2px 12px rgba(5,37,58,.35)}
@media (max-width:820px){.cta-card{padding:64px 24px}}

/* ============================================================
   CASE STUDY — vertical scroll-reveal workflow diagram (wf-flow), adapted from
   prolibu.com/en/platform/sales/'s .wf-flow component (inspected via curl: markup, CSS,
   and the scroll-driven JS that toggles visible/painted classes based on each node's
   position). Steps alternate blue/coral via .wf-card--blue / .wf-card--coral.
   ============================================================ */
.wf-flow-wrap{position:relative;margin-top:40px;padding:8px 0}
.wf-flow-wrap::before{content:'';position:absolute;inset:-24px -60px;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(23,137,194,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,137,194,.12) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 12%,black 88%,transparent);
  mask-image:linear-gradient(to bottom,transparent,black 12%,black 88%,transparent)}
.wf-flow{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:460px;margin:0 auto}

.wf-start,.wf-end{display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(-8px);
  transition:opacity .4s ease,transform .4s ease}
.wf-start.is-visible,.wf-end.is-visible{opacity:1;transform:translateY(0)}
.wf-start__tag,.wf-end__tag{display:inline-flex;align-items:center;gap:6px;background:var(--text-1);color:#fff;
  max-width:320px;font-size:11px;font-family:var(--font-mono);font-weight:500;letter-spacing:.03em;padding:7px 14px;
  border-radius:999px;box-shadow:0 0 0 3px #fff;text-align:center}
.wf-end__tag{background:var(--coral-600)}
.wf-start__track,.wf-end__track{width:1px;height:44px;margin:14px 0;
  background:repeating-linear-gradient(to bottom,var(--ink-300) 0,var(--ink-300) 5px,transparent 5px,transparent 10px);
  box-shadow:-2px 0 #fff,2px 0 #fff;opacity:0;transition:opacity .3s ease .2s}
.wf-start.is-visible .wf-start__track,.wf-end.is-visible .wf-end__track{opacity:1}

.wf-conn{width:100%;height:84px;margin:4px 0;position:relative;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(-8px);transition:opacity .4s ease,transform .4s ease}
.wf-conn.is-painted{opacity:1;transform:translateY(0)}
.wf-conn__track{width:1px;height:100%;margin:0 auto;position:relative;
  background:repeating-linear-gradient(to bottom,var(--ink-300) 0,var(--ink-300) 5px,transparent 5px,transparent 10px);
  box-shadow:-2px 0 #fff,2px 0 #fff}
.wf-conn__fill{position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:0;
  background:repeating-linear-gradient(to bottom,var(--wf-c,var(--blue-500)) 0,var(--wf-c,var(--blue-500)) 5px,transparent 5px,transparent 10px);
  transition:height .5s ease-out}
.wf-conn.is-painted .wf-conn__fill{height:100%}
.wf-conn__arrow{position:absolute;bottom:-4px;left:50%;transform:translate(-50%) scale(0);width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--wf-c,var(--blue-500));
  transition:transform .25s ease-in .3s}
.wf-conn.is-painted .wf-conn__arrow{transform:translate(-50%) scale(1)}
.wf-conn__label{position:absolute;left:calc(50% + 16px);top:50%;transform:translateY(-50%);
  font-size:10px;font-family:var(--font-mono);color:#fff;background:var(--text-1);padding:4px 9px;border-radius:4px;
  white-space:nowrap;box-shadow:0 0 0 3px #fff;opacity:0;clip-path:inset(0 100% 0 0);
  transition:opacity .3s ease,clip-path .4s ease-in .1s}
.wf-conn.is-painted .wf-conn__label{opacity:1;clip-path:inset(0 0 0 0)}
.wf-conn--left .wf-conn__label{left:auto;right:calc(50% + 16px);clip-path:inset(0 0 0 100%)}
.wf-conn--left.is-painted .wf-conn__label{clip-path:inset(0 0 0 0)}

.wf-card{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px;
  display:flex;align-items:flex-start;gap:14px;box-shadow:var(--shadow-sm);
  opacity:0;transform:translateY(18px) scale(.97);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.wf-card.is-visible{opacity:1;transform:translateY(0) scale(1)}
.wf-card__body{flex:1;min-width:0}
.wf-card__title{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--text-1);margin:0 0 3px}
.wf-card__desc{font-size:13px;color:var(--text-3);line-height:1.5;margin:0}
@media (max-width:560px){.wf-flow-wrap::before{inset:-24px -20px}}

/* CASE STUDY — terminal-style callout for non-linear systems (e.g. parallel agent runs)
   that don't fit the wf-flow node-chain format */
.terminal-card{background:#14181f;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);
  font-family:var(--font-mono);opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.terminal-card.is-visible{opacity:1;transform:translateY(0)}
.terminal-card__bar{display:flex;gap:6px;padding:12px 16px;background:#1c212b}
.terminal-card__bar span{width:10px;height:10px;border-radius:50%;background:#3a4150}
.terminal-card__body{padding:22px 24px;font-size:12.5px;line-height:1.9;color:#c7ccd6}
.terminal-card__body p{margin:0 0 4px}
.terminal-card__dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3a4150;margin-right:9px}
.terminal-card__dot--done{background:var(--coral-500)}
.terminal-card__dim{color:#5b6272;font-style:italic}
.terminal-card__accent{color:var(--blue-300);margin-top:10px}
.terminal-card__stat{padding:18px 24px;background:#1c212b;color:#fff;font-size:13px;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.terminal-card__stat b{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--coral-400)}

/* CASE STUDY — real screenshot proof, fading in as the last reveal step below each wf-flow.
   Breaks out wider than the narrow flow column since the screenshots are wide landscape. */
.wf-shot-wrap{max-width:1040px;margin:40px auto 0;opacity:0;transform:translateY(24px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.wf-shot-wrap.is-visible{opacity:1;transform:translateY(0)}
.wf-shot{border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-lg);background:var(--ink-100)}
.wf-shot img{display:block;width:100%;height:auto}
.wf-shot-caption{margin-top:14px;font-size:12.5px;color:var(--text-4);text-align:center;font-family:var(--font-mono)}

/* ============================================================
   CASE STUDY PAGE SYSTEM — shared across every case study page
   (hero, thesis section, quick-nav, system-section wrapper)
   ============================================================ */
.cs-hero{background:var(--depth-grad-bloom);padding:120px 40px 80px;text-align:center;position:relative;overflow:hidden}
.cs-hero__eyebrow{color:#fff;text-shadow:0 1px 8px rgba(5,37,58,.4)}
.cs-hero h1{color:#fff;max-width:760px;margin:12px auto 16px;text-shadow:0 2px 12px rgba(5,37,58,.35)}
.cs-hero p{color:#fff;max-width:560px;margin:0 auto;text-shadow:0 2px 10px rgba(5,37,58,.4)}
.cs-stats{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin-top:44px}
.cs-stats .metric-num,.cs-stats .metric-label{color:#fff}
.cs-stats .metric-num{font-size:34px}
@media (max-width:820px){.cs-hero{padding:96px 24px 60px}.cs-stats{gap:32px}}

/* Thesis section — image placeholder + stacked, staggered-reveal copy cards */
.thesis-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start;max-width:1000px;margin:0 auto}
.thesis-image{position:relative;border-radius:20px;overflow:hidden;min-height:420px;align-self:stretch;
  background:linear-gradient(135deg,var(--ink-100) 0%,var(--ink-200) 100%);border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  color:var(--text-4);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;line-height:1.7}
.thesis-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* Plain fading paragraphs — no card box, just the reveal-on-scroll kept */
.thesis-cards{display:flex;flex-direction:column;gap:18px}
.thesis-line{text-align:left;opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.thesis-line.is-visible{opacity:1;transform:translateY(0)}
.thesis-line p{margin:0;font-size:15px;line-height:1.65;color:var(--text-2)}
.thesis-line ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.thesis-line ul li{position:relative;padding-left:18px;font-size:15px;line-height:1.6;color:var(--text-2)}
.thesis-line ul li::before{content:'—';position:absolute;left:0;color:var(--coral-500)}
.thesis-line--lead p{font-size:18px;font-weight:600;color:var(--text-1);line-height:1.5}
.hl-orange{color:var(--coral-600);font-weight:700}
/* Arrow sits centered right on top of the highlighted box, pointing down into it */
.thesis-arrow{display:flex;justify-content:center;margin-bottom:-6px;color:var(--coral-500);
  opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.thesis-arrow.is-visible{opacity:1;transform:translateY(0)}
.thesis-arrow i{font-size:20px;animation:thesisArrowBob 2s ease-in-out infinite}
@keyframes thesisArrowBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
/* Final sentence — modern rounded card with a soft blurred coral glow behind it */
.thesis-highlight{position:relative;opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.thesis-highlight.is-visible{opacity:1;transform:translateY(0)}
.thesis-highlight::before{content:'';position:absolute;inset:-18px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 28% 40%,rgba(255,127,106,.4),transparent 70%);filter:blur(22px)}
.thesis-highlight-box{position:relative;z-index:1;background:var(--surface);border:1px solid rgba(255,127,106,.28);
  border-radius:18px;padding:24px 26px;box-shadow:var(--shadow-md)}
.thesis-highlight-box p{margin:0;font-size:16px;line-height:1.65;color:var(--text-1);font-weight:500}
.thesis-pop{text-align:center;max-width:640px;margin:96px auto 0}
.thesis-pop p{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,3.4vw,32px);
  color:var(--text-1);line-height:1.3;letter-spacing:-.01em}
.thesis-pop .accent{color:var(--coral-600)}
@media (max-width:820px){.thesis-grid{grid-template-columns:1fr}.thesis-image{min-height:220px}}

/* Quick-nav to each system's animated diagram */
.sys-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:960px;margin:52px auto 0}
.sys-nav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  padding:30px 16px 22px;border-radius:18px;background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.sys-nav a:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.sys-nav__label{font-family:var(--font-body);font-size:14.5px;font-weight:700;color:var(--text-1);line-height:1.3}
.sys-nav__tag{position:relative;margin-top:2px;font-family:var(--font-mono);font-size:9px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--blue-600);
  padding:4px 22px 4px 10px;border-radius:999px;display:inline-block}
.sys-nav__tag--coral{background:var(--coral-600)}
.sys-nav__click{position:absolute;top:50%;right:5px;transform:translateY(-50%);width:14px;height:14px;
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);
  animation:sysClickPulse 2.4s ease-in-out infinite}
.sys-nav__click i{font-size:10px}
@keyframes sysClickPulse{0%,100%{opacity:.35;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.2)}}
@media (max-width:820px){.sys-nav{grid-template-columns:repeat(2,1fr)}}

.cs-system{max-width:640px;margin:0 auto;text-align:center}
.cs-system .eyebrow{color:var(--coral-700);font-size:14px;font-weight:500;letter-spacing:.16em}
.cs-system p{margin-top:10px}
.cs-system--blue .eyebrow{color:var(--blue-600)}