/* page-clients.css · /clients — shared v3 design tokens + page-specific components
   Sections: hero (ribbon canvas) · stats · industries · logo wall · testimonial · selected work · cta
*/
:root{
  --c-navy:#0B1E3F;--c-navy-2:#1D3FB0;
  --c-blue:#1E63E9;--c-blue-2:#4F8BFF;--c-blue-deep:#1648A6;
  --c-accent:#5EEAD4;--c-accent-deep:#1aa893;
  --c-coral:#FF6B35;--c-coral-deep:#D94F1B;--c-accent-2:#FFB199;
  --c-bg:#F7F9FE;--c-bg-2:#EEF2FB;--c-card:#FFFFFF;--c-white:#FFFFFF;
  --c-line:#DCE3F1;--c-line-2:#C2CDE3;
  --c-mute:#4D5A77;--c-text:#0F172A;
  --c-acc:var(--c-blue);--c-acc-deep:var(--c-blue-deep);--c-acc-soft:rgba(30,99,233,.08);
  --r-md:14px;--r-lg:20px;
  --ease-out:cubic-bezier(.22,.61,.36,1);--ease-spring:cubic-bezier(.16,1,.3,1);
  --t-fast:200ms;--t-mid:480ms;
  --maxw:1280px;--pad:clamp(20px,4vw,40px)
}

*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.55;color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}ul,ol{margin:0;padding:0;list-style:none}button,input{font:inherit;color:inherit}
h1,h2,h3,h4{color:var(--c-navy);margin:0;font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.02em}
h1{font-weight:700;font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.04;letter-spacing:-.03em}
h2{font-weight:700;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.1}
h3{font-weight:600;font-size:1.18rem;line-height:1.3}p{margin:0}em{font-style:normal;color:var(--c-acc)}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding:clamp(80px,10vw,140px) 0;position:relative}

.kicker{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--c-acc);letter-spacing:.04em;text-transform:lowercase}
.kicker .kdot{width:8px;height:8px;border-radius:2px;background:var(--c-acc);box-shadow:0 0 0 4px var(--c-acc-soft)}
.section-h{max-width:760px;margin-bottom:60px}.section-h.center{margin-left:auto;margin-right:auto;text-align:center}
.section-h h2{margin:14px 0}.section-h .sub{color:var(--c-mute);font-size:1.06rem}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:.76rem;color:var(--c-mute);letter-spacing:.04em;margin-bottom:22px}
.crumbs a{color:var(--c-mute);transition:color var(--t-fast) var(--ease-out)}.crumbs a:hover{color:var(--c-acc)}
.crumbs .sep{opacity:.45}.crumbs .here{color:var(--c-navy);font-weight:600}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:8px;font-weight:600;font-size:.94rem;cursor:pointer;border:1px solid transparent;transition:transform var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out);position:relative;overflow:hidden}
.btn-lg{padding:16px 28px;font-size:1rem}
.btn-cta{background:linear-gradient(135deg,var(--c-acc),var(--c-acc-deep));color:var(--c-white);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 10px 24px -10px var(--c-acc-soft)}
.btn-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);transform:translateX(-100%);transition:transform 700ms var(--ease-out)}
.btn-cta:hover{transform:translateY(-1px);box-shadow:0 16px 32px -14px var(--c-acc-soft)}.btn-cta:hover::before{transform:translateX(100%)}
.btn-line{background:rgba(255,255,255,.6);color:var(--c-navy);border-color:var(--c-line);backdrop-filter:blur(8px)}.btn-line:hover{border-color:var(--c-acc);color:var(--c-acc)}

/* HERO */
.hero{padding:clamp(60px,9vw,110px) 0 clamp(60px,8vw,100px)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
.tag{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--c-mute);padding:6px 12px;background:var(--c-white);border:1px solid var(--c-line);border-radius:999px;margin-bottom:26px}
.tag .tdot{width:8px;height:8px;border-radius:50%;background:var(--c-acc);animation:tagPulse 1.6s infinite}
@keyframes tagPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
.lede{color:var(--c-mute);font-size:clamp(1.04rem,1.3vw,1.18rem);max-width:560px;margin-top:22px}
.cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip-row .tag{margin-bottom:0}
.hero-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:46px}
.meta-tile{padding:18px;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-md);position:relative;overflow:hidden}
.meta-tile::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--c-acc)}
.meta-num{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.45rem;font-weight:700;color:var(--c-navy);letter-spacing:-.02em}
.meta-lbl{display:block;font-size:.78rem;color:var(--c-mute);margin-top:4px}

/* hero ribbon canvas — contained panel, not full-bleed */
.hero-vis{position:relative;aspect-ratio:1;display:grid;place-items:center;background:linear-gradient(160deg,var(--c-white),var(--c-bg-2));border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden}
.hero-vis__canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-vis__badge{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:0 20px}
.hero-vis__badge-mark{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--c-acc),var(--c-acc-deep));display:grid;place-items:center;box-shadow:0 12px 26px -10px var(--c-acc-soft)}
.hero-vis__badge-mark svg{width:30px;height:30px;color:var(--c-white)}
.hero-vis__badge strong{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;color:var(--c-navy)}
.hero-vis__badge span{font-size:.86rem;color:var(--c-mute)}

/* STATS — 4-tile grid, reuses .meta-tile */
.stat4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stat4 .meta-tile{padding:22px}
.stat4 .meta-num{font-size:1.9rem}
.stat4 .meta-desc{color:var(--c-mute);font-size:.86rem;margin-top:8px;line-height:1.5}

/* 3 industry cards — same pattern id used by industries.css's .ch3/.ch-card */
.ch3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ch-card{position:relative;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-md);padding:28px 26px 24px;overflow:hidden;transition:transform var(--t-mid) var(--ease-spring),box-shadow var(--t-mid) var(--ease-out),border-color var(--t-mid) var(--ease-out)}
.ch-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--c-acc),var(--c-acc-deep))}
.ch-card:hover{transform:translateY(-4px);border-color:var(--c-acc);box-shadow:0 24px 50px -28px rgba(11,30,63,.25)}
.ch-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--c-acc),var(--c-acc-deep));color:var(--c-white);margin-bottom:16px;box-shadow:0 8px 18px -8px var(--c-acc-soft)}
.ch-icon svg{width:24px;height:24px}
.ch-card h3{margin:0 0 10px;font-family:'Space Grotesk','Inter',sans-serif}
.ch-card p{color:var(--c-mute);font-size:.94rem;line-height:1.55;margin-bottom:12px}
.ch-meta{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--c-acc);background:var(--c-acc-soft);padding:3px 8px;border-radius:4px;display:inline-block;letter-spacing:.04em}

/* LOGO WALL */
.logo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.logo-cell{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-md);height:118px;display:flex;align-items:center;justify-content:center;padding:16px;transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-mid) var(--ease-out)}
.logo-cell:hover{border-color:var(--c-acc);box-shadow:0 20px 40px -26px rgba(11,30,63,.25)}
.logo-cell img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain;filter:grayscale(100%) opacity(.7);transition:filter var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out)}
.logo-cell:hover img{filter:grayscale(0) opacity(1);transform:scale(1.05)}
.logo-cell-name{font-size:.82rem;font-weight:600;color:var(--c-mute);text-align:center}
.logo-cell--more{background:linear-gradient(135deg,var(--c-acc-soft),var(--c-bg-2));border-style:dashed;flex-direction:column;gap:2px}
.logo-cell--more strong{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;color:var(--c-navy)}
.logo-cell--more span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-mute)}

/* TESTIMONIAL — dark quote panel */
.quote-panel{position:relative;background:linear-gradient(160deg,#0B1E3F 0%,#0F2A55 60%,#1648A6 130%);border-radius:var(--r-lg);padding:clamp(40px,6vw,72px);color:var(--c-white);text-align:center;overflow:hidden;box-shadow:0 40px 80px -40px rgba(11,30,63,.55)}
.quote-panel::before{content:"";position:absolute;inset:-40%;background:radial-gradient(closest-side,rgba(94,234,212,.28),transparent 60%) 85% 15% / 45% 55% no-repeat,radial-gradient(closest-side,rgba(79,139,255,.28),transparent 60%) 10% 85% / 50% 60% no-repeat;filter:blur(60px);pointer-events:none}
.quote-panel .kicker{position:relative;color:var(--c-accent);justify-content:center}
.quote-panel .kicker .kdot{background:var(--c-accent);box-shadow:0 0 0 4px rgba(94,234,212,.22)}
.quote-panel blockquote{position:relative;font-family:'Space Grotesk','Inter',sans-serif;font-weight:500;font-size:clamp(1.4rem,1.1rem+1.4vw,2.1rem);line-height:1.35;letter-spacing:-.015em;color:var(--c-white);margin:20px auto 24px;max-width:820px}
.quote-panel cite{position:relative;display:block;font-style:normal;font-size:.92rem;font-weight:600;color:rgba(255,255,255,.78);letter-spacing:.02em}

/* SELECTED WORK */
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.work-card{position:relative;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--t-mid) var(--ease-spring),box-shadow var(--t-mid) var(--ease-out),border-color var(--t-mid) var(--ease-out)}
.work-card:hover{transform:translateY(-4px);border-color:var(--c-acc);box-shadow:0 24px 50px -28px rgba(11,30,63,.25)}
.work-card img{width:100%;height:150px;object-fit:cover}
.work-card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.work-tag{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--c-acc);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.work-card h3{font-size:1.08rem;margin-bottom:4px}
.work-client{font-size:.86rem;color:var(--c-mute);margin-bottom:12px}
.work-desc{color:var(--c-mute);font-size:.9rem;line-height:1.55;flex:1}
.work-tech{font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--c-mute);margin-top:16px;opacity:.8}

/* CTA */
.cta-sec{padding-bottom:clamp(60px,7vw,100px)}
.cta-card{position:relative;padding:clamp(40px,6vw,80px);background:linear-gradient(160deg,#0B1E3F 0%,#0F2A55 60%,#1648A6 130%);border-radius:var(--r-lg);color:var(--c-white);overflow:hidden;text-align:center;box-shadow:0 40px 80px -40px rgba(11,30,63,.55)}
.cta-card .kicker{color:var(--c-accent-2);justify-content:center;display:inline-flex}
.cta-card .kicker .kdot{background:var(--c-accent-2);box-shadow:0 0 0 4px rgba(255,178,153,.22)}
.cta-card h2{color:var(--c-white);margin:18px auto 14px;max-width:700px}
.cta-card h2 em{background:linear-gradient(120deg,var(--c-white),var(--c-accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-card p{color:rgba(255,255,255,.78);max-width:620px;margin:0 auto 30px}
.cta-btns{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cta-card .btn-line{background:rgba(255,255,255,.06);color:var(--c-white);border-color:rgba(255,255,255,.2)}
.cta-card .btn-line:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:var(--c-white)}
.cta-lights{position:absolute;inset:-40%;background:radial-gradient(closest-side,rgba(255,107,53,.4),transparent 60%) 80% 20% / 40% 50% no-repeat,radial-gradient(closest-side,rgba(79,139,255,.4),transparent 60%) 15% 80% / 50% 60% no-repeat;filter:blur(60px);pointer-events:none;animation:drift 14s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,24px)}}

.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:28px}
.rcard{display:block;padding:28px;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-md);transition:transform var(--t-mid) var(--ease-spring),box-shadow var(--t-mid) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.rcard:hover{transform:translateY(-3px);box-shadow:0 20px 40px -22px rgba(11,30,63,.25);border-color:var(--c-acc)}
.rtag{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--c-acc);letter-spacing:.04em}
.rcard h3{margin:10px 0 8px}
.rcard p{color:var(--c-mute);font-size:.94rem;margin-bottom:14px}
.rcta{color:var(--c-acc);font-weight:700}
.rcta span{display:inline-block;transition:transform var(--t-fast) var(--ease-spring)}
.rcard:hover .rcta span{transform:translateX(6px)}

.reveal{opacity:0;transform:translateY(28px);transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-spring);transition-delay:calc((var(--i,0) - 1) * 70ms)}
.reveal.in{opacity:1;transform:none}

@media (max-width:1100px){.ch3,.stat4,.logo-grid,.work-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1024px){.hero-grid{grid-template-columns:1fr}.hero-vis{max-width:480px;margin:0 auto}}
@media (max-width:720px){.hero-meta,.ch3,.stat4,.logo-grid,.work-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}.reveal{opacity:1;transform:none}}

[dir="rtl"] .meta-tile::before{left:auto;right:0}
[dir="rtl"] .ch-card::before,[dir="rtl"] .work-card::before{left:auto;right:0}