/*
Theme Name: KLAUSBEJOLLI.TECH
Theme URI: https://klausbejolli.tech/
Author: Klaus Bejolli
Description: Custom multilingual WordPress theme for KLAUSBEJOLLI.TECH. SQ/EN/IT, dynamic Projects, Services, Blog, SEO/GEO/AEO-ready structure.
Version: 1.9.0
Text Domain: klausbejolli-tech
Requires at least: 6.5
Requires PHP: 8.0
*/

/* ============================================================
   KLAUSBEJOLLI.TECH — klausbejolli.tech
   Brand: KLAUSBEJOLLI.TECH — Black / Orange
   Type: Inter (display+body) · JetBrains Mono (labels)
   ============================================================ */

:root{
  --ink:#0A0A0B;
  --surface:#121214;
  --surface-2:#18181B;
  --surface-3:#1F1F23;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --text:#F5F5F4;
  --muted:#A6A6AD;
  --faint:#77777F;
  --accent:#156CDD;
  --accent-2:#2494FF;
  --accent-dim:rgba(21,108,221,.14);
  --accent-glow:rgba(21,108,221,.28);
  --ok:#4ADE80;
  --wa:#25D366;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --radius:16px;
  --radius-sm:11px;
  --container:1300px;
  --nav-h:74px;
  --ease:cubic-bezier(.22,.7,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--text);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit}

.wrap{max-width:var(--container);margin:0 auto;padding:0 28px}
section{padding:88px 0;position:relative}
.section-tight{padding:64px 0}

/* ---------- Typography ---------- */
h1,h2,h3{font-weight:800;letter-spacing:-.025em;line-height:1.14}
h1{font-size:clamp(1.9rem,3.8vw,3.1rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.15rem);letter-spacing:-.02em}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
p{color:var(--muted)}
.lead{font-size:1.06rem;color:var(--muted);max-width:680px}
.text-accent{color:var(--accent)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);
  margin-bottom:16px;
}
.eyebrow .idx{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 8px;border:1px solid rgba(21,108,221,.35);
  border-radius:6px;color:var(--accent);background:var(--accent-dim);
}
.section-head{max-width:760px;margin-bottom:44px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head p{margin-top:14px}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(10,10,11,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;
}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(10,10,11,.9)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:40px;width:40px;object-fit:contain}
.nav-menu{display:flex;align-items:center;gap:32px}
.nav-menu a{
  font-size:.92rem;font-weight:500;color:var(--muted);
  transition:color .2s;position:relative;padding:6px 0;
}
.nav-menu a:hover{color:var(--text)}
.nav-menu a.active{color:var(--text)}
.nav-menu a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--accent);border-radius:2px;
}
.nav-right{display:flex;align-items:center;gap:18px}
.lang-switch{
  display:flex;align-items:center;gap:2px;
  font-family:var(--font-mono);font-size:.74rem;font-weight:500;
  border:1px solid var(--line);border-radius:8px;padding:3px;
}
.lang-switch a,.lang-switch span{padding:4px 9px;border-radius:6px;color:var(--faint);transition:.2s}
.lang-switch .on{background:var(--surface-3);color:var(--text)}
.lang-switch a:hover{color:var(--text)}
.nav-burger{
  display:none;background:none;border:1px solid var(--line);border-radius:10px;
  width:42px;height:42px;color:var(--text);font-size:1.25rem;cursor:pointer;
  align-items:center;justify-content:center;
}
.mobile-menu{
  display:none;position:fixed;inset:var(--nav-h) 0 0 0;z-index:99;
  background:rgba(10,10,11,.98);padding:28px;
  flex-direction:column;gap:6px;
}
.mobile-menu.open{display:flex}
.mobile-menu a{
  font-size:1.15rem;font-weight:600;padding:14px 6px;
  border-bottom:1px solid var(--line);color:var(--text);
}
.mobile-menu .btn{margin-top:18px;justify-content:center}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.94rem;font-weight:600;
  padding:12px 24px;border-radius:11px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s,background .2s,border-color .2s;
  white-space:nowrap;
}
.btn i{font-size:1.05rem}
.btn-lg{padding:15px 30px;font-size:1rem}
.btn-primary{
  background:var(--accent);color:#fff;
  box-shadow:0 8px 26px -10px var(--accent-glow);
}
.btn-primary:hover{transform:translateY(-2px);background:#FF7A1A;box-shadow:0 12px 30px -8px var(--accent-glow)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-2)}
.link-arrow{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;
  font-size:.9rem;font-weight:600;color:var(--accent-2);transition:gap .2s;
}
.link-arrow:hover{gap:11px}

/* ---------- Hero ---------- */
.hero{
  padding:calc(var(--nav-h) + 72px) 0 90px;
  position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;top:-220px;right:-160px;width:640px;height:640px;
  background:radial-gradient(circle,rgba(21,108,221,.13),transparent 62%);
  pointer-events:none;
}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero h1{margin:0 0 20px}
.hero .lead{margin-bottom:32px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-badges{display:flex;gap:22px;margin-top:36px;flex-wrap:wrap}
.hero-badges span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.84rem;color:var(--muted);
}
.hero-badges i{color:var(--accent)}

/* Browser mockup */
.mockup{
  position:relative;border-radius:14px;
  background:var(--surface);
  border:1px solid var(--line-strong);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.02);
  overflow:hidden;
}
.mockup-bar{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.mockup-bar .dots{display:flex;gap:6px}
.mockup-bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--surface-3);display:block}
.mockup-bar .dots i:first-child{background:#FF5F57}
.mockup-bar .url{
  flex:1;font-family:var(--font-mono);font-size:.68rem;color:var(--faint);
  background:var(--ink);border:1px solid var(--line);border-radius:7px;
  padding:5px 12px;display:flex;align-items:center;gap:7px;max-width:320px;
}
.mockup-bar .url i{color:var(--ok);font-size:.72rem}
.mockup-body{padding:22px;min-height:330px;position:relative;background:linear-gradient(180deg,var(--surface),var(--ink))}
.wf-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.wf-logo{width:30px;height:30px;border-radius:8px;background:var(--accent);opacity:.95}
.wf-links{display:flex;gap:8px}
.wf-links i{width:44px;height:8px;border-radius:4px;background:var(--surface-3);display:block}
.wf-links i:last-child{width:64px;background:var(--accent);height:22px;border-radius:6px}
.wf-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;margin-bottom:20px}
.wf-line{height:13px;border-radius:6px;background:var(--surface-3);margin-bottom:10px;transform-origin:left}
.wf-line.l1{width:88%;background:linear-gradient(90deg,var(--accent),var(--accent-2));height:16px}
.wf-line.l2{width:70%}
.wf-line.l3{width:52%}
.wf-btn{width:112px;height:30px;border-radius:8px;background:var(--accent);margin-top:14px;box-shadow:0 6px 18px -6px var(--accent-glow)}
.wf-img{border-radius:10px;background:linear-gradient(135deg,var(--surface-3),var(--surface-2));border:1px solid var(--line);position:relative;overflow:hidden;min-height:120px}
.wf-img::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 70% 30%,rgba(21,108,221,.22),transparent 60%);
}
.wf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wf-card{
  border-radius:10px;background:var(--surface-2);border:1px solid var(--line);
  padding:12px;min-height:64px;
}
.wf-card i{display:block;width:20px;height:20px;border-radius:6px;background:var(--accent-dim);border:1px solid rgba(21,108,221,.3);margin-bottom:8px}
.wf-card b{display:block;height:7px;border-radius:4px;background:var(--surface-3);width:80%}
.float-badge{
  position:absolute;display:flex;align-items:center;gap:9px;
  background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:11px;padding:9px 14px;
  font-size:.76rem;font-weight:600;color:var(--text);
  box-shadow:0 16px 36px -14px rgba(0,0,0,.7);
  animation:floaty 5.5s ease-in-out infinite;
}
.float-badge i{color:var(--accent);font-size:1rem}
.float-badge small{display:block;font-weight:400;color:var(--faint);font-size:.66rem}
.fb-1{top:16%;right:-16px;animation-delay:.4s}
.fb-2{bottom:12%;left:-18px;animation-delay:1.6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- Marquee ---------- */
.marquee{
  border-block:1px solid var(--line);
  padding:15px 0;overflow:hidden;white-space:nowrap;
  background:var(--surface);
}
.marquee-track{display:inline-flex;gap:44px;animation:marquee 30s linear infinite}
.marquee span{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
  display:inline-flex;align-items:center;gap:44px;
}
.marquee span::after{content:"·";color:var(--accent)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Grids & Cards ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px;
  transition:border-color .25s,transform .25s var(--ease),background .25s;
}
.card:hover{border-color:rgba(21,108,221,.4);transform:translateY(-4px);background:var(--surface-2)}
.card .icon{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-dim);border:1px solid rgba(21,108,221,.28);
  color:var(--accent);font-size:1.4rem;margin-bottom:20px;
}
.card h3{margin-bottom:10px}
.card p{font-size:.93rem}
.card .tag{
  position:absolute;top:22px;right:22px;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--faint);
}

/* ---------- Media / images ---------- */
.media-card{
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.media-card img{width:100%;height:auto}
.media-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.media-split.rev .media-card{order:2}
.media-split h2{margin-bottom:16px}
.media-split p{margin-bottom:14px}

/* ---------- Checklist ---------- */
.check-list{display:flex;flex-direction:column;gap:13px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--muted)}
.check-list li i{color:var(--accent);font-size:1.15rem;flex-shrink:0;margin-top:2px}
.check-list li b{color:var(--text);font-weight:600}

/* ---------- Process (compact) ---------- */
.process-wrap{max-width:980px;margin:0 auto}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
.step{
  position:relative;counter-increment:step;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:22px 20px;
}
.step::before{
  content:"0" counter(step);
  font-family:var(--font-mono);font-size:.72rem;color:var(--accent);
  display:inline-block;margin-bottom:12px;
  padding:3px 8px;border:1px solid rgba(21,108,221,.3);border-radius:6px;
  background:var(--accent-dim);
}
.step h3{font-size:.98rem;margin-bottom:7px}
.step p{font-size:.85rem}

/* ---------- Stats (single row on desktop) ---------- */
.stats-band{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--surface),var(--ink));
  padding:36px 28px;
}
.stat{text-align:center;padding:6px 8px}
.stat b{
  display:block;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;letter-spacing:-.03em;
  color:var(--accent);line-height:1.1;
}
.stat small{font-size:.84rem;color:var(--muted);display:block;margin-top:6px}

/* ---------- Work / portfolio ---------- */
.work-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);
  display:flex;flex-direction:column;
  transition:border-color .25s,transform .25s var(--ease);
}
.work-card:hover{border-color:rgba(21,108,221,.45);transform:translateY(-5px)}
.work-thumb{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--surface-2)}
.work-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.work-card:hover .work-thumb img{transform:scale(1.045)}
.work-info{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.work-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.work-tags span{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;border:1px solid var(--line);color:var(--faint);
}
.work-info h3{font-size:1.25rem}
.work-info p{font-size:.9rem;margin-top:8px}

/* ---------- Case study ---------- */
.case-hero{padding:calc(var(--nav-h) + 56px) 0 0}
.case-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin:34px 0;padding:24px 26px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
}
.case-meta small{
  display:block;font-family:var(--font-mono);font-size:.64rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-bottom:6px;
}
.case-meta b{font-size:.94rem;font-weight:600}
.case-img{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-strong);box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.case-img img{width:100%}
.case-section{padding:44px 0;border-bottom:1px solid var(--line)}
.case-section h2{font-size:1.45rem;margin-bottom:18px;display:flex;align-items:center;gap:14px}
.case-section h2::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--accent)}
.case-section .body p{margin-bottom:14px;font-size:1rem}
.case-section .body strong,.case-section .body em{color:var(--text)}
.case-results{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.result-box{
  text-align:center;padding:26px 16px;
  border:1px solid rgba(21,108,221,.28);border-radius:var(--radius-sm);
  background:var(--accent-dim);
}
.result-box b{display:block;font-size:1.7rem;font-weight:800;color:var(--accent);letter-spacing:-.02em}
.result-box small{font-size:.82rem;color:var(--muted);display:block;margin-top:6px}

/* ---------- Testimonials ---------- */
.quote-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;display:flex;flex-direction:column;gap:18px;
}
.quote-card .stars{color:var(--accent);font-size:.9rem;letter-spacing:2px}
.quote-card p{font-size:.95rem;color:var(--text);font-style:italic}
.quote-card footer{font-size:.85rem;color:var(--faint)}
.quote-card footer b{color:var(--text);display:block;font-style:normal}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;background:var(--surface);overflow:hidden}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:19px 22px;background:none;border:none;color:var(--text);
  font-size:.98rem;font-weight:600;text-align:left;cursor:pointer;
}
.faq-q i{color:var(--accent);font-size:1.15rem;transition:transform .3s;flex-shrink:0}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a div{padding:0 22px 20px;font-size:.93rem;color:var(--muted)}
.faq-a a{color:var(--accent-2);text-decoration:underline}

/* ---------- Comparison table ---------- */
.compare{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.compare table{width:100%;border-collapse:collapse;min-width:680px}
.compare th,.compare td{padding:15px 18px;text-align:left;font-size:.9rem;border-bottom:1px solid var(--line)}
.compare th{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-2);background:var(--surface);
}
.compare td{color:var(--muted)}
.compare td:first-child{color:var(--text);font-weight:600}
.compare tr:last-child td{border-bottom:none}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;text-align:center;
  border:1px solid rgba(21,108,221,.3);border-radius:22px;
  padding:64px 40px;
  background:
    radial-gradient(ellipse at 50% -30%,rgba(21,108,221,.2),transparent 60%),
    var(--surface);
}
.cta-band h2{margin-bottom:14px}
.cta-band p{max-width:560px;margin:0 auto 30px}
.cta-band .hero-actions{justify-content:center}

/* ---------- Blog ---------- */
.post-card{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;
  transition:border-color .25s,transform .25s var(--ease);
}
.post-card:hover{border-color:rgba(21,108,221,.4);transform:translateY(-4px)}
.post-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.post-card:hover .post-thumb img{transform:scale(1.04)}
.post-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.post-kicker{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-2);margin-bottom:10px}
.post-card h3{font-size:1.12rem;line-height:1.35}
.post-card p{font-size:.88rem;margin-top:10px}
.post-meta{display:flex;gap:18px;margin-top:18px;font-size:.8rem;color:var(--faint);flex-wrap:wrap}
.post-meta span{display:inline-flex;align-items:center;gap:6px}
.post-meta i{color:var(--accent)}

/* ---------- Article ---------- */
.article-hero{padding:calc(var(--nav-h) + 56px) 0 8px}
.wrap.article{max-width:860px}
.article-feature{margin:30px 0 6px}
.article-body{font-size:1.02rem}
.article-body h2{font-size:1.5rem;margin:44px 0 16px;scroll-margin-top:100px}
.article-body h3{font-size:1.13rem;margin:28px 0 10px;color:var(--text)}
.article-body p{margin-bottom:16px}
.article-body ul,.article-body ol{margin:0 0 18px 22px;color:var(--muted)}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body li{margin-bottom:9px;font-size:.98rem}
.article-body li::marker{color:var(--accent)}
.article-body a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px}
.article-body strong{color:var(--text)}
.article-body blockquote{
  border-left:3px solid var(--accent);background:var(--surface);
  padding:18px 24px;border-radius:0 12px 12px 0;margin:26px 0;
  color:var(--text);font-size:1.02rem;
}
.article-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:.92rem}
.article-body th,.article-body td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.article-body th{background:var(--surface);color:var(--accent-2);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.article-body td{color:var(--muted)}
.toc{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);padding:22px 26px;margin:30px 0 10px;
}
.toc b{font-size:.85rem;display:block;margin-bottom:12px;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2)}
.toc ol{margin-left:18px;list-style:decimal;color:var(--muted)}
.toc li{margin-bottom:7px;font-size:.92rem}
.toc a:hover{color:var(--accent-2)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:start}
.contact-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px}
.contact-rows{display:flex;flex-direction:column;gap:20px;margin-top:26px}
.contact-rows a{display:flex;gap:15px;align-items:center;transition:.2s}
.contact-rows a:hover{transform:translateX(4px)}
.contact-rows .ci{
  width:44px;height:44px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-dim);border:1px solid rgba(21,108,221,.28);color:var(--accent);font-size:1.2rem;
}
.contact-rows small{display:block;font-size:.72rem;color:var(--faint);font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.contact-rows b{font-size:.95rem;font-weight:600}
.socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.socials a{
  width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:1.1rem;
  transition:.2s;
}
.socials a:hover{border-color:var(--accent);color:var(--accent)}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.8rem;font-weight:600;margin-bottom:7px;color:var(--text)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:10px;
  background:var(--ink);border:1px solid var(--line-strong);color:var(--text);
  font-family:inherit;font-size:.93rem;outline:none;transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{min-height:120px;resize:vertical}

/* ---------- Breadcrumbs ---------- */
.crumbs{
  display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  font-size:.8rem;color:var(--faint);margin-bottom:22px;
}
.crumbs a:hover{color:var(--accent-2)}
.crumbs i{font-size:.68rem}
.crumbs .here{color:var(--muted)}

/* ---------- Page hero ---------- */
.page-hero{padding:calc(var(--nav-h) + 56px) 0 30px}
.page-hero .lead{margin-top:16px}

/* ---------- Footer ---------- */
footer.site{
  border-top:1px solid var(--line);background:var(--surface);
  padding:64px 0 34px;margin-top:40px;
}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:44px;margin-bottom:48px}
.footer-brand img{height:52px;width:52px;object-fit:contain;margin-bottom:18px}
.footer-brand p{font-size:.88rem;max-width:300px}
.footer-col b{
  display:block;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:18px;
}
.footer-col ul{display:flex;flex-direction:column;gap:11px}
.footer-col a{font-size:.89rem;color:var(--muted);transition:color .2s}
.footer-col a:hover{color:var(--text)}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:26px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.8rem;color:var(--faint);
}
.footer-bottom a{color:var(--muted)}
.footer-bottom a:hover{color:var(--accent-2)}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:98;
  width:56px;height:56px;border-radius:50%;
  background:var(--wa);color:#fff;font-size:1.75rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.55);
  transition:transform .25s var(--ease);
}
.wa-float:hover{transform:scale(1.08)}
.wa-float::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.5);
  animation:wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse{
  0%{transform:scale(1);opacity:.9}
  70%,100%{transform:scale(1.55);opacity:0}
}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .hero .wrap{grid-template-columns:1fr;gap:48px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .media-split{grid-template-columns:1fr;gap:34px}
  .media-split.rev .media-card{order:0}
  .case-meta{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:920px){
  .nav-menu{display:none}
  .nav-burger{display:flex}
  .nav .btn{display:none}
  .stats-band{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  section{padding:60px 0}
  .section-tight{padding:44px 0}
  .grid-2,.grid-3,.contact-grid,.process-grid{grid-template-columns:1fr}
  .stats-band{grid-template-columns:repeat(2,1fr);padding:26px 18px}
  .hero{padding-top:calc(var(--nav-h) + 44px)}
  form .row{grid-template-columns:1fr}
  .case-results{grid-template-columns:1fr}
  .float-badge{display:none}
  .wa-float{right:16px;bottom:16px;width:52px;height:52px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ============================================================
   2026 refresh — boutique studio direction / ZeroNegative-ish
   ============================================================ */
:root{
  --ink:#050506;
  --surface:#0e0e10;
  --surface-2:#151518;
  --surface-3:#202027;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --text:#fbfaf7;
  --muted:#a7a7ad;
  --faint:#73737b;
  --accent:#156CDD;
  --accent-2:#2494FF;
  --accent-dim:rgba(21,108,221,.13);
  --accent-glow:rgba(21,108,221,.34);
  --radius:14px;
  --radius-sm:10px;
  --ease:cubic-bezier(.19,1,.22,1);
}
body{
  background:
    radial-gradient(900px 560px at 6% 4%,rgba(21,108,221,.18),transparent 58%),
    radial-gradient(760px 520px at 94% 12%,rgba(47,76,255,.12),transparent 58%),
    linear-gradient(180deg,#050506 0%,#08080a 52%,#050506 100%);
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.34;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);
}
h1{font-size:clamp(2.35rem,5.6vw,5.6rem);line-height:.98;letter-spacing:-.07em;max-width:980px}
h2{font-size:clamp(1.8rem,4vw,3.55rem);line-height:1.02;letter-spacing:-.055em}
h3{letter-spacing:-.025em}.lead{font-size:clamp(1rem,1.4vw,1.16rem);line-height:1.75}.text-accent{color:var(--accent-2)}
.wrap{max-width:1380px}.nav{height:78px;background:rgba(5,5,6,.55);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.nav.scrolled{background:rgba(5,5,6,.88);border-bottom-color:rgba(255,255,255,.12)}.nav-logo img{height:44px;width:44px}.nav-menu{gap:38px}.nav-menu a{text-transform:uppercase;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em}.nav-menu a.active::after{bottom:-11px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.btn{border-radius:999px;text-transform:uppercase;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;padding:13px 22px}.btn-lg{padding:16px 28px;font-size:.76rem}.btn-primary{background:linear-gradient(135deg,var(--accent),#2494FF);box-shadow:0 18px 44px -18px var(--accent-glow)}.btn-ghost{background:rgba(255,255,255,.035);backdrop-filter:blur(10px)}
.eyebrow{font-size:.68rem;letter-spacing:.19em;color:#d7d7de}.eyebrow .idx{border-radius:999px;background:#fff;color:#08080a;border:0;font-weight:700;letter-spacing:.08em}
.hero{min-height:calc(100vh - 40px);display:flex;align-items:center;padding:calc(var(--nav-h) + 84px) 0 86px}.hero::before{top:-180px;right:-100px;width:780px;height:780px;background:radial-gradient(circle,rgba(21,108,221,.28),transparent 58%);filter:blur(6px)}.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}.hero .wrap{grid-template-columns:1.08fr .92fr;gap:72px}.hero h1 span{display:inline-block}.hero-badges span{border:1px solid var(--line);border-radius:999px;padding:7px 11px;background:rgba(255,255,255,.035);font-size:.78rem}
.mockup{border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:0 50px 120px -42px #000,0 0 80px -40px var(--accent-glow);transform:perspective(1100px) rotateY(-7deg) rotateX(3deg)}.mockup-body{min-height:390px;background:radial-gradient(circle at 72% 18%,rgba(21,108,221,.2),transparent 38%),linear-gradient(180deg,#141419,#060607)}.mockup-bar{background:rgba(255,255,255,.055)}.wf-line.l1{height:22px;border-radius:999px;background:linear-gradient(90deg,#fff,var(--accent-2))}.wf-img{min-height:160px;border-radius:22px}.wf-img::after{background:radial-gradient(circle at 70% 30%,rgba(21,108,221,.32),transparent 45%),linear-gradient(135deg,transparent,rgba(255,255,255,.12))}.wf-card{border-radius:16px;background:rgba(255,255,255,.05);backdrop-filter:blur(12px)}.float-badge{border-radius:999px;background:rgba(15,15,17,.72);backdrop-filter:blur(18px)}
.marquee{background:#fff;color:#050506;border:0;transform:rotate(-1deg) scale(1.02);margin:0 0 22px;padding:18px 0}.marquee span{color:#050506;font-weight:700}.marquee span::after{color:var(--accent)}
.card,.work-card,.post-card,.quote-card,.faq-item,.stats-band,.compare,.contact-panel,.toc{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border-color:rgba(255,255,255,.12);box-shadow:0 28px 80px -48px #000;backdrop-filter:blur(12px)}.card:hover,.work-card:hover,.post-card:hover{border-color:rgba(21,108,221,.54);transform:translateY(-6px)}
.service-card{padding:0;overflow:hidden;min-height:410px}.service-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#111}.service-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.78)),radial-gradient(circle at 18% 0%,rgba(21,108,221,.35),transparent 42%);mix-blend-mode:normal}.service-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.08) brightness(.92);transform:scale(1.02);transition:transform .9s var(--ease),filter .5s}.service-card:hover .service-media img{transform:scale(1.09);filter:saturate(.9) contrast(1.08) brightness(1)}.service-card .icon{position:absolute;top:18px;left:18px;z-index:2;margin:0;background:rgba(5,5,6,.68);border-color:rgba(255,255,255,.18);backdrop-filter:blur(16px);color:#fff}.service-card .card-index{position:absolute;top:28px;right:22px;z-index:2;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;color:#fff}.service-card h3,.service-card p,.service-card .link-arrow{margin-left:26px;margin-right:26px}.service-card h3{margin-top:25px;font-size:1.34rem}.service-card p{font-size:.92rem}.service-card .link-arrow{margin-bottom:26px}.grid-3 .service-card:nth-child(2n){margin-top:28px}.grid-3 .service-card:nth-child(3n){margin-top:56px}
.studio-section{padding-top:84px}.studio-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:54px;align-items:center}.studio-copy{max-width:560px}.studio-copy p{margin-top:16px}.studio-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.studio-chips span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:#dedee6;background:rgba(255,255,255,.035)}.studio-mosaic{position:relative;min-height:560px}.studio-tile{position:absolute;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:22px;box-shadow:0 34px 90px -44px #000;background:#111}.studio-tile img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.08);transition:transform 1s var(--ease)}.studio-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55)),radial-gradient(circle at 14% 5%,rgba(21,108,221,.25),transparent 40%)}.studio-tile:hover img{transform:scale(1.08)}.studio-tile.t1{left:0;top:44px;width:33%;height:420px}.studio-tile.t2{left:28%;top:0;width:26%;height:310px}.studio-tile.t3{right:13%;top:76px;width:31%;height:410px}.studio-tile.t4{left:40%;bottom:0;width:28%;height:260px}.studio-tile.t5{right:0;bottom:42px;width:24%;height:300px}
.media-card{border-radius:26px;background:#111}.media-card img{filter:saturate(.86) contrast(1.05)}.work-thumb,.post-thumb{border-bottom:1px solid var(--line)}.work-thumb img,.post-thumb img{filter:saturate(.9) contrast(1.04)}.cta-band{border-radius:30px;background:radial-gradient(600px 280px at 50% 0%,rgba(21,108,221,.28),transparent 58%),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:0 46px 120px -60px var(--accent-glow)}
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;background:linear-gradient(90deg,var(--accent),#fff);box-shadow:0 0 28px var(--accent-glow)}.cursor-glow{position:fixed;left:0;top:0;width:360px;height:360px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(21,108,221,.12),transparent 65%);transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:0;transition:opacity .25s ease}.reveal{transform:translateY(32px) scale(.985);transition:opacity .9s var(--ease),transform .9s var(--ease)}.reveal.in{transform:none}.process-grid .step:nth-child(2),.grid-3 > .reveal:nth-child(2){transition-delay:.08s}.process-grid .step:nth-child(3),.grid-3 > .reveal:nth-child(3){transition-delay:.16s}.process-grid .step:nth-child(4){transition-delay:.24s}
@media(max-width:1080px){.hero{min-height:auto}.mockup{transform:none}.studio-layout{grid-template-columns:1fr}.studio-mosaic{min-height:620px}.grid-3 .service-card:nth-child(n){margin-top:0}}
@media(max-width:760px){h1{font-size:clamp(2.4rem,13vw,4.2rem)}.hero .wrap{gap:44px}.hero-actions .btn{width:100%;justify-content:center}.studio-mosaic{min-height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}.studio-tile{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;height:230px!important;border-radius:18px}.studio-tile.t1{grid-row:span 2;height:474px!important}.service-card{min-height:0}.service-card h3,.service-card p,.service-card .link-arrow{margin-left:22px;margin-right:22px}.marquee{transform:none}.cursor-glow{display:none}}


/* ============================================================
   Service visual upgrade — custom service art + studio entry system
   ============================================================ */
.service-card{min-height:0;isolation:isolate}
.service-media{aspect-ratio:4/3;background:radial-gradient(circle at 50% 10%,rgba(21,108,221,.18),transparent 48%),#070708}
.service-media::after{background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.62) 100%),radial-gradient(circle at 8% 4%,rgba(21,108,221,.18),transparent 36%)}
.service-media img{object-fit:cover;object-position:center;filter:saturate(.92) contrast(1.04) brightness(.98);transform:scale(1.001)}
.service-card:hover .service-media img{transform:scale(1.035);filter:saturate(1) contrast(1.05) brightness(1.04)}
.service-card .icon{box-shadow:0 14px 34px -20px var(--accent-glow)}
.service-card h3{font-size:1.22rem;margin-top:22px}.service-card p{min-height:92px}
.studio-section{padding-top:86px;overflow:hidden}.studio-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:64px;align-items:center}.studio-copy{max-width:600px}.studio-copy p{margin-top:18px;max-width:560px}.studio-board{position:relative;min-height:560px;perspective:1200px}.studio-browser{position:absolute;inset:54px 70px 54px 0;border:1px solid rgba(21,108,221,.28);border-radius:28px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));box-shadow:0 56px 120px -60px #000,0 0 110px -72px var(--accent-glow);transform:rotateY(-7deg) rotateX(3deg)}
.studio-screen{position:relative;min-height:415px;padding:34px;background:radial-gradient(480px 280px at 78% 10%,rgba(21,108,221,.18),transparent 56%),linear-gradient(180deg,#141417 0%,#060607 100%)}
.studio-screen::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(180deg,#000,transparent 86%)}
.studio-screen-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.studio-screen-top span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;color:var(--accent-2);text-transform:uppercase}.studio-screen-top i{display:block;width:112px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.studio-screen h3{position:relative;z-index:1;font-size:clamp(1.8rem,3.1vw,3.2rem);line-height:1.02;max-width:620px;letter-spacing:-.06em;margin-bottom:30px}.studio-wire{position:relative;z-index:1;display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;margin-bottom:24px}.wire-copy,.wire-visual{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);border-radius:20px;min-height:126px;padding:20px;backdrop-filter:blur(10px)}
.wire-copy i{display:block;height:12px;border-radius:999px;background:rgba(255,255,255,.18);margin-bottom:12px}.wire-copy i:nth-child(1){width:82%;background:linear-gradient(90deg,#fff,var(--accent-2))}.wire-copy i:nth-child(2){width:66%}.wire-copy i:nth-child(3){width:48%}.wire-copy b{display:block;width:124px;height:34px;border-radius:999px;background:var(--accent);box-shadow:0 14px 36px -18px var(--accent-glow);margin-top:20px}.wire-visual{display:flex;align-items:center;justify-content:center;overflow:hidden}.wire-visual span{display:block;width:72%;height:88px;border-radius:24px;background:linear-gradient(135deg,rgba(21,108,221,.24),rgba(255,255,255,.06));border:1px solid rgba(21,108,221,.28);box-shadow:inset 0 0 70px rgba(21,108,221,.08)}
.studio-metrics{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.studio-metric{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);border-radius:16px;padding:16px;min-height:86px}.studio-metric b{display:block;font-family:var(--font-mono);font-size:.74rem;color:var(--accent);margin-bottom:8px}.studio-metric span{font-size:.9rem;color:#e9e8e5;font-weight:650}
.studio-note{position:absolute;z-index:3;display:flex;align-items:center;gap:14px;width:270px;padding:18px;border:1px solid rgba(21,108,221,.34);border-radius:20px;background:linear-gradient(180deg,rgba(20,20,22,.88),rgba(9,9,10,.76));backdrop-filter:blur(18px);box-shadow:0 30px 80px -48px #000,0 0 52px -38px var(--accent-glow)}.studio-note i{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(21,108,221,.13);color:var(--accent-2);font-size:1.42rem;border:1px solid rgba(21,108,221,.28);flex-shrink:0}.studio-note b{display:block;font-size:.98rem;margin-bottom:2px}.studio-note span{display:block;color:var(--muted);font-size:.78rem;line-height:1.45}.studio-note.n1{right:4px;top:16px}.studio-note.n2{right:0;bottom:22px}.studio-note.n3{left:30px;bottom:0}.studio-note::after{content:"";position:absolute;width:56px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.7}.studio-note.n1::after{left:-56px;top:50%}.studio-note.n2::after{left:-56px;top:50%}.studio-note.n3::after{right:-56px;top:50%;transform:scaleX(-1)}
.media-card img[src*="service-"]{width:100%;height:100%;object-fit:cover;filter:saturate(.96) contrast(1.04) brightness(1)}
@media(max-width:1080px){.studio-layout{grid-template-columns:1fr;gap:42px}.studio-board{min-height:620px}.studio-browser{inset:60px 0 86px 0;transform:none}.studio-note.n1{right:18px}.studio-note.n2{right:22px}.studio-note.n3{left:22px}}
@media(max-width:760px){.studio-board{min-height:auto;display:flex;flex-direction:column;gap:14px;perspective:none}.studio-browser{position:relative;inset:auto;transform:none;border-radius:22px}.studio-screen{padding:24px;min-height:0}.studio-wire{grid-template-columns:1fr}.studio-metrics{grid-template-columns:1fr 1fr}.studio-note{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%}.studio-note::after{display:none}.service-media{aspect-ratio:4/3}.service-card p{min-height:0}}

/* ---------- WordPress dynamic content update ---------- */
.wa-float svg{width:31px;height:31px;fill:#fff;display:block;position:relative;z-index:1}
.xw-cf7-wrap .wpcf7 form{display:flex;flex-direction:column;gap:18px}
.xw-cf7-wrap .wpcf7 p{margin:0}
.xw-cf7-wrap .wpcf7 .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.xw-cf7-wrap .wpcf7-form-control-wrap{display:block;margin-top:8px}
.xw-cf7-wrap input:not([type="submit"]),
.xw-cf7-wrap textarea,
.xw-cf7-wrap select{
  width:100%;min-height:50px;border:1px solid var(--line);border-radius:18px;
  background:rgba(255,255,255,.045);color:var(--text);padding:0 16px;
  outline:none;transition:border .2s,box-shadow .2s,background .2s;
}
.xw-cf7-wrap textarea{min-height:150px;padding:15px 16px;resize:vertical}
.xw-cf7-wrap select option{background:#111;color:#fff}
.xw-cf7-wrap input:focus,
.xw-cf7-wrap textarea:focus,
.xw-cf7-wrap select:focus{border-color:rgba(21,108,221,.7);box-shadow:0 0 0 4px rgba(21,108,221,.12);background:rgba(255,255,255,.07)}
.xw-cf7-wrap .wpcf7-submit{width:100%;justify-content:center;border:0;cursor:pointer}
.xw-cf7-wrap .wpcf7-spinner{display:none}
.xw-cf7-wrap .wpcf7-response-output{border:1px solid rgba(21,108,221,.45)!important;border-radius:18px;margin:10px 0 0!important;padding:14px 16px!important;color:var(--muted)}
.xw-form-note{font-size:.8rem;margin-top:12px;color:var(--faint)}
.xw-plugin-note{border:1px solid rgba(21,108,221,.35);border-radius:26px;padding:22px;background:linear-gradient(135deg,rgba(21,108,221,.12),rgba(255,255,255,.035));display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.xw-dynamic-entry .page-hero .lead{max-width:900px}
.xw-entry-wrap{max-width:980px}
.xw-entry-cover{border:1px solid var(--line);border-radius:32px;overflow:hidden;background:rgba(255,255,255,.04);box-shadow:var(--shadow)}
.xw-entry-cover img{width:100%;height:min(52vw,520px);object-fit:cover;display:block;filter:saturate(.92) contrast(1.04)}
.xw-entry-content{margin:34px auto 0;max-width:820px;color:var(--muted);font-size:1.04rem;line-height:1.85}
.xw-entry-content h2,.xw-entry-content h3{color:var(--text);margin:34px 0 14px;line-height:1.2}
.xw-entry-content h2{font-size:clamp(1.55rem,3vw,2.2rem)}
.xw-entry-content h3{font-size:clamp(1.25rem,2.2vw,1.65rem)}
.xw-entry-content p{margin:0 0 18px}
.xw-entry-content a{color:var(--accent-2);text-decoration:underline;text-underline-offset:4px}
.xw-entry-content ul,.xw-entry-content ol{margin:0 0 22px 22px}
.xw-entry-content li{margin-bottom:10px}
.xw-entry-content blockquote{border-left:3px solid var(--accent);padding:16px 0 16px 22px;margin:28px 0;color:var(--text);background:rgba(21,108,221,.06);border-radius:0 18px 18px 0}
.xw-hero-tags{margin-top:22px;justify-content:flex-start}
@media(max-width:720px){.xw-cf7-wrap .wpcf7 .row{grid-template-columns:1fr}.xw-entry-cover img{height:58vw}.xw-entry-content{font-size:.98rem}.xw-plugin-note{border-radius:22px}}


/* ============================================================
   RESPONSIVE FIX — mobile-first hardening / WhatsApp + CF7 polish
   ============================================================ */
:root{--nav-h:78px}
*,*::before,*::after{min-width:0}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{touch-action:pan-y}
.wrap{width:100%;padding-left:clamp(18px,4vw,32px);padding-right:clamp(18px,4vw,32px)}
main{overflow:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
.nav .wrap{gap:14px}.nav-right{gap:12px}.nav-logo{flex:0 0 auto}.lang-switch{flex:0 0 auto}
.mobile-menu{top:var(--nav-h);inset:var(--nav-h) 0 0 0;overflow:auto;padding-bottom:calc(34px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.hero{width:100%;min-height:auto;display:block;padding:calc(var(--nav-h) + 56px) 0 72px}
.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);gap:clamp(34px,5vw,72px)}
.hero h1{max-width:920px;text-wrap:balance}.hero .lead{max-width:720px}.hero > .wrap > div{min-width:0}
.mockup,.studio-browser,.card,.work-card,.post-card,.contact-panel{max-width:100%}
.mockup{transform:none;will-change:auto}.mockup-body{min-height:clamp(300px,34vw,390px)}
.mockup-bar{min-width:0}.mockup-bar .url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-links{min-width:0}.wf-links i{max-width:100%}.wf-hero,.studio-wire,.media-split,.contact-grid,.grid-2,.grid-3,.footer-grid{min-width:0}
.marquee{max-width:100vw;overflow:hidden;transform:none}
.studio-layout{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.studio-board{min-width:0}.studio-screen h3{text-wrap:balance}.studio-note{max-width:calc(100vw - 42px)}
.service-card{display:flex;flex-direction:column}.service-card .link-arrow{margin-top:auto}
.service-card p{min-height:0}.service-card h3,.service-card p,.service-card .link-arrow{overflow-wrap:anywhere}
.contact-rows a{min-width:0}.contact-rows b{overflow-wrap:anywhere;word-break:break-word}.contact-panel{overflow:hidden}
.field input,.field select,.field textarea,.xw-cf7-wrap input:not([type="submit"]),.xw-cf7-wrap textarea,.xw-cf7-wrap select{font-size:16px}
.xw-cf7-wrap .wpcf7-submit,input.wpcf7-submit{display:block;width:100%;min-height:52px;text-align:center;line-height:1.2;white-space:normal}
.xw-form-note{line-height:1.55}
.wa-float{position:fixed;right:22px;bottom:22px;width:58px;height:58px;min-width:58px;min-height:58px;padding:0;border:0;border-radius:999px;display:grid;place-items:center;line-height:0;background:#25D366;color:#fff;overflow:visible;isolation:isolate;box-shadow:0 16px 38px -14px rgba(37,211,102,.72),0 0 0 1px rgba(255,255,255,.18) inset;transform:none;will-change:transform}
.wa-float:hover{transform:translateY(-2px) scale(1.04)}
.wa-float svg{width:30px!important;height:30px!important;display:block;fill:currentColor;position:relative;z-index:2;flex:0 0 auto}
.wa-float i{display:none!important}.wa-float::after{z-index:1;pointer-events:none;inset:-2px}.wa-float::before{content:"";position:absolute;inset:8px;border-radius:inherit;background:rgba(255,255,255,.10);z-index:0;pointer-events:none}

@media(max-width:1180px){
  .hero .wrap{grid-template-columns:1fr;gap:48px}.hero .wrap>div:first-child{max-width:880px}.mockup{max-width:860px;margin-inline:auto}
  .studio-layout{grid-template-columns:1fr;gap:42px}.studio-copy{max-width:760px}.studio-board{min-height:620px}.studio-browser{inset:60px 0 86px 0;transform:none}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3 .service-card:nth-child(n){margin-top:0}
}
@media(max-width:980px){
  .contact-grid,.media-split{grid-template-columns:1fr}.media-split.rev .media-card{order:0}.footer-grid{grid-template-columns:1fr 1fr}.case-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-menu{display:none}.nav-burger{display:flex}.nav .nav-right>a.btn{display:none}.nav-logo img{height:40px;width:40px}
}
@media(max-width:760px){
  :root{--nav-h:70px}.nav{height:var(--nav-h)}.wrap{padding-left:20px;padding-right:20px}
  section{padding:58px 0}.section-tight{padding:42px 0}.section-head{margin-bottom:28px}
  h1{font-size:clamp(2.08rem,10.7vw,3.35rem);line-height:1.02;letter-spacing:-.055em}
  h2{font-size:clamp(1.65rem,8vw,2.65rem);line-height:1.08;letter-spacing:-.045em}
  h3{font-size:1.08rem}.lead{font-size:1rem;line-height:1.68}.eyebrow{font-size:.62rem;line-height:1.45;gap:8px;letter-spacing:.14em;flex-wrap:wrap}
  .hero{padding:calc(var(--nav-h) + 34px) 0 54px}.hero .wrap{gap:30px}.hero .lead{margin-bottom:24px}.hero-actions{gap:10px}.hero-actions .btn,.cta-band .hero-actions .btn{width:100%;justify-content:center;white-space:normal;text-align:center}.hero-badges{gap:10px;margin-top:24px}.hero-badges span{width:100%;justify-content:flex-start;font-size:.76rem}
  .btn,.btn-lg{width:auto;max-width:100%;white-space:normal;text-align:center;justify-content:center;padding:13px 18px}.nav-burger{width:40px;height:40px}.lang-switch a,.lang-switch span{padding:4px 8px}
  .mockup{border-radius:20px}.mockup-bar{padding:10px}.mockup-bar .url{font-size:.6rem;padding:5px 9px}.mockup-body{padding:16px;min-height:260px}.wf-nav{margin-bottom:18px}.wf-hero{grid-template-columns:1fr;gap:14px}.wf-img{min-height:118px}.wf-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.wf-card{padding:9px;min-height:58px}.float-badge{display:none!important}
  .studio-section{padding-top:48px}.studio-board{min-height:auto;display:flex;flex-direction:column;gap:14px;perspective:none}.studio-browser{position:relative;inset:auto;transform:none;border-radius:20px}.studio-screen{padding:20px;min-height:0}.studio-screen-top{margin-bottom:18px}.studio-screen h3{font-size:clamp(1.48rem,8vw,2.15rem);margin-bottom:20px;letter-spacing:-.045em}.studio-wire{grid-template-columns:1fr;gap:14px}.wire-copy,.wire-visual{min-height:106px;border-radius:16px;padding:16px}.studio-metrics{grid-template-columns:1fr 1fr;gap:10px}.studio-metric{padding:13px;min-height:74px}.studio-metric span{font-size:.82rem}.studio-note{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%;padding:15px;border-radius:18px}.studio-note::after{display:none}
  .grid-2,.grid-3,.process-grid,.contact-grid,.footer-grid,.case-meta,.case-results,.stats-band{grid-template-columns:1fr!important}.service-media{aspect-ratio:16/11}.service-card h3,.service-card p,.service-card .link-arrow{margin-left:20px;margin-right:20px}.service-card h3{margin-top:19px}.service-card .link-arrow{margin-bottom:22px}.card,.work-card,.post-card,.quote-card,.contact-panel{border-radius:20px}.contact-panel{padding:24px}.contact-rows{gap:14px}.contact-rows a{align-items:flex-start}.contact-rows .ci{width:42px;height:42px}.field{margin-bottom:14px}form .row,.xw-cf7-wrap .wpcf7 .row{grid-template-columns:1fr!important;gap:0}.xw-cf7-wrap .wpcf7 form{gap:14px}
  footer.site{padding:46px 0 90px}.footer-grid{gap:28px;margin-bottom:34px}.footer-bottom{display:block}.footer-bottom p+ p{margin-top:10px}.xw-entry-cover{border-radius:22px}.xw-entry-cover img{height:62vw}.xw-entry-content{font-size:.98rem;line-height:1.78}.wa-float{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:54px;height:54px;min-width:54px;min-height:54px}.wa-float svg{width:28px!important;height:28px!important}.cursor-glow{display:none!important}
}
@media(max-width:430px){
  .wrap{padding-left:16px;padding-right:16px}.hero{padding-top:calc(var(--nav-h) + 28px)}h1{font-size:clamp(1.95rem,11.5vw,2.75rem)}.lead{font-size:.96rem}.mockup-body{padding:13px}.wf-cards{grid-template-columns:1fr}.wf-card{min-height:48px}.studio-metrics{grid-template-columns:1fr}.service-media{aspect-ratio:4/3}.contact-panel{padding:20px}.mobile-menu{padding-left:20px;padding-right:20px}.wa-float{right:13px;bottom:calc(13px + env(safe-area-inset-bottom));width:50px;height:50px;min-width:50px;min-height:50px}.wa-float svg{width:26px!important;height:26px!important}
}


/* =========================================================
   KLAUSBEJOLLI.TECH — FINAL BRAND PASS
   Keeps the source layout, removes former-brand visuals.
   ========================================================= */

/* Real Klaus Bejolli logo */
.nav-logo{width:auto!important;min-width:190px;display:flex!important;align-items:center}
.nav-logo img{width:190px!important;height:auto!important;max-height:42px!important;object-fit:contain!important;object-position:left center}
.footer-brand img,.footer-logo img{width:210px!important;height:auto!important;max-height:52px!important;object-fit:contain!important}

/* User photo inside original hero/browser composition */
.kb-portrait-slot{position:relative!important;overflow:hidden!important;background:linear-gradient(145deg,#07111e,#0e2a4b)!important}
.kb-portrait-slot img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;opacity:.96}

/* Custom service icons are small icons — never image covers */
.service-card .service-media{display:none!important}
.service-card .kb-custom-service-icon{
  width:68px!important;height:68px!important;
  padding:5px!important;margin:0 0 22px!important;
  border:0!important;background:transparent!important;
  box-shadow:none!important
}
.service-card .kb-custom-service-icon img{
  width:100%!important;height:100%!important;display:block!important;object-fit:contain!important
}
.service-card:hover .kb-custom-service-icon img{transform:translateY(-3px) scale(1.035)}
.service-card .kb-custom-service-icon img{transition:transform .3s var(--ease)}

/* Klaus blue only */
.text-accent,.idx,.link-arrow i,.check-list i,.hero-badges i,.card .icon,.work-tags span{color:#2494FF!important}
.btn-primary{background:linear-gradient(135deg,#156CDD,#2494FF)!important;border-color:#3B9EFF!important;box-shadow:0 14px 36px rgba(21,108,221,.26)!important}
.btn-primary:hover{box-shadow:0 18px 46px rgba(21,108,221,.38)!important}
.float-badge i{color:#2494FF!important}

/* Real client logo marquee */
.kb-client-strip{
  overflow:hidden;background:#fff;border-top:1px solid #e8ebef;border-bottom:1px solid #e8ebef;
  padding:18px 0
}
.kb-client-track{display:flex;width:max-content;animation:kbClientMarquee 30s linear infinite;will-change:transform}
.kb-client-logo{
  width:190px;height:88px;display:flex;align-items:center;justify-content:center;
  padding:13px 22px;flex:0 0 auto;border-right:1px solid #edf0f4;background:#fff
}
.kb-client-logo img{max-width:100%;max-height:58px;width:auto;height:auto;object-fit:contain}
@keyframes kbClientMarquee{to{transform:translateX(-50%)}}
.kb-client-strip:hover .kb-client-track{animation-play-state:paused}

/* Showreel with no native controls */
.kb-showreel{background:#07090d!important}
.kb-video-frame{
  position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line-strong);
  background:linear-gradient(145deg,#07101c,#0d2747);aspect-ratio:16/9
}
.kb-video-frame video{display:block;width:100%;height:100%;object-fit:cover}
.kb-video-frame video::-webkit-media-controls{display:none!important}
.kb-video-frame video::-webkit-media-controls-enclosure{display:none!important}

/* Slightly smaller premium main typography */
.hero h1{font-size:clamp(44px,5.4vw,76px)!important;line-height:.96!important}
.section-head h2{font-size:clamp(32px,4vw,54px)!important;line-height:1.02!important}

/* No fake WhatsApp green styling when email is used */
a[href^="mailto:"] .ph-whatsapp-logo{display:none}

/* Responsive logo + service system */
@media(max-width:760px){
 .nav-logo{min-width:150px}.nav-logo img{width:150px!important;max-height:36px!important}
 .kb-client-logo{width:150px;height:78px;padding:12px 18px}
 .kb-client-logo img{max-height:50px}
 .hero h1{font-size:42px!important}
}
@media(prefers-reduced-motion:reduce){.kb-client-track{animation:none}}


/* ===== KB FINAL VISUAL FIXES 2026-08-05 ===== */
.service-card{position:relative!important;padding:30px 28px 28px!important;min-height:280px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important}
.service-card .kb-custom-service-icon{position:relative!important;inset:auto!important;width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;padding:7px!important;margin:0 0 24px!important;border-radius:14px!important;background:rgba(21,108,221,.08)!important;border:1px solid rgba(36,148,255,.22)!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
.service-card .kb-custom-service-icon img{position:static!important;width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important;object-fit:contain!important;display:block!important}
.service-card h3{margin:0 0 10px!important;font-size:1.22rem!important;line-height:1.15!important;position:relative!important;z-index:2!important}
.service-card p{margin:0 0 26px!important;font-size:.94rem!important;line-height:1.65!important;color:var(--muted)!important;position:relative!important;z-index:2!important}
.service-card .link-arrow{margin:auto 0 0!important;position:relative!important;z-index:2!important}
.service-card .card-index{top:30px!important;right:28px!important;color:#dfe8f4!important}
.service-card:hover{border-color:rgba(36,148,255,.55)!important;box-shadow:0 22px 65px rgba(0,0,0,.26),0 0 0 1px rgba(36,148,255,.06)!important}

/* Replace synthetic design-system block with real asset showcase */
.kb-real-work{padding:84px 0 68px!important;background:radial-gradient(700px 360px at 88% 10%,rgba(21,108,221,.12),transparent 62%),#07090d!important}
.kb-real-work-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.kb-real-work-copy h2{max-width:650px}.kb-real-work-copy p{max-width:620px}
.kb-real-work-media{position:relative;border:1px solid rgba(255,255,255,.14);border-radius:28px;overflow:hidden;background:#090b10;box-shadow:0 30px 90px rgba(0,0,0,.36)}
.kb-real-work-media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.kb-real-work-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.kb-real-work-pills span{padding:8px 12px;border:1px solid rgba(36,148,255,.2);border-radius:999px;background:rgba(21,108,221,.07);font:600 .72rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#b8c7da}

/* Showreel belongs inside main flow, before final CTA */
.kb-showreel{padding:82px 0!important;background:#07090d!important}
.kb-video-frame{border-radius:26px!important;box-shadow:0 34px 100px rgba(0,0,0,.38)!important}

/* Rocket CTA from original Klaus assets */
.cta-band.kb-rocket-cta{position:relative!important;overflow:hidden!important;text-align:left!important;padding:62px 390px 62px 64px!important;min-height:330px!important;background:radial-gradient(620px 300px at 82% 100%,rgba(21,108,221,.22),transparent 65%),linear-gradient(145deg,#11141a,#080a0e)!important;border-color:rgba(36,148,255,.3)!important}
.cta-band.kb-rocket-cta h2,.cta-band.kb-rocket-cta p{max-width:720px!important;margin-left:0!important;margin-right:0!important}
.cta-band.kb-rocket-cta .hero-actions{justify-content:flex-start!important}
.kb-rocket-art{position:absolute;right:18px;bottom:-8px;width:min(380px,35vw);z-index:1;pointer-events:none;filter:drop-shadow(0 20px 38px rgba(21,108,221,.22))}
.cta-band.kb-rocket-cta>*:not(.kb-rocket-art){position:relative;z-index:2}

/* Footer: personal developer only, no agency leftovers */
.footer-col .kb-footer-label{color:var(--accent-2);font:700 .72rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase}

@media(max-width:900px){.kb-real-work-grid{grid-template-columns:1fr;gap:34px}.cta-band.kb-rocket-cta{padding:48px 260px 48px 38px!important}.kb-rocket-art{width:270px}}
@media(max-width:680px){.service-card{padding:24px!important;min-height:250px!important}.service-card .kb-custom-service-icon{width:48px!important;height:48px!important;margin-bottom:20px!important}.service-card .kb-custom-service-icon img{width:34px!important;height:34px!important}.cta-band.kb-rocket-cta{padding:38px 26px 220px!important;text-align:center!important}.cta-band.kb-rocket-cta h2,.cta-band.kb-rocket-cta p{margin-left:auto!important;margin-right:auto!important}.cta-band.kb-rocket-cta .hero-actions{justify-content:center!important}.kb-rocket-art{width:270px;right:50%;transform:translateX(50%);bottom:-22px}.kb-real-work{padding:62px 0 48px!important}}


/* =========================================================
   LIVE WEBSITE PREVIEW — scoped fix only
   Does not alter the rest of the website layout.
   ========================================================= */
.kb-live-browser{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:24px;
  background:#06080c;
  box-shadow:0 26px 70px rgba(0,0,0,.42);
}
.kb-live-browser-bar{
  height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:12px;
  background:linear-gradient(180deg,#15181d,#0c0e12);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.kb-live-browser-bar .dots{display:flex;gap:6px}
.kb-live-browser-bar .dots i{width:8px;height:8px;border-radius:50%;background:#3d4653}
.kb-live-browser-bar .dots i:first-child{background:#ff5f57}
.kb-live-browser-bar .dots i:nth-child(2){background:#febc2e}
.kb-live-browser-bar .dots i:nth-child(3){background:#28c840}
.kb-live-url{
  margin:auto;
  width:min(52%,330px);
  height:27px;
  display:flex;align-items:center;gap:7px;
  padding:0 11px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.07);
  background:#06080b;
  color:#788596;
  font:500 .62rem var(--font-mono);
}
.kb-live-url i{color:#42c978}
.kb-live-status{
  display:flex;align-items:center;gap:6px;
  color:#6f7c8d;
  font:700 .56rem var(--font-mono);
  letter-spacing:.08em
}
.kb-live-status i{width:6px;height:6px;border-radius:50%;background:#39d67a;box-shadow:0 0 10px #39d67a}

.kb-live-viewport{
  position:relative;
  height:455px;
  overflow:hidden;
  background:#070a0e;
}
.kb-live-track{
  display:flex;
  flex-direction:column;
  will-change:transform;
  animation:kbLivePageScroll 24s linear infinite;
}
.kb-live-browser:hover .kb-live-track,
.kb-live-browser:hover .kb-live-scroll i{animation-play-state:paused}
@keyframes kbLivePageScroll{to{transform:translateY(-50%)}}

.kb-live-page{background:#070a0e;color:#f7f9fc;font-family:Inter,Arial,sans-serif}
.kb-live-nav{
  height:49px;padding:0 24px;display:flex;align-items:center;gap:18px;
  background:#06090d;border-bottom:1px solid rgba(255,255,255,.06)
}
.kb-live-nav strong{font-size:.72rem;letter-spacing:-.02em}
.kb-live-nav strong span{color:#4ba8ff}
.kb-live-nav>div{flex:1;display:flex;justify-content:center;gap:16px}
.kb-live-nav i{font-style:normal;color:#637083;font-size:.42rem;font-weight:700;letter-spacing:.06em}
.kb-live-nav>b{
  padding:7px 11px;border-radius:999px;background:#156CDD;color:#fff;
  font-size:.46rem;text-transform:uppercase
}

.kb-live-hero{
  position:relative;
  min-height:285px;
  padding:45px 36px;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 35%,rgba(36,148,255,.18),transparent 31%),
    linear-gradient(135deg,#090d13,#081321 68%,#0c294d)
}
.kb-live-hero:after{
  content:"";position:absolute;right:35px;top:46px;width:150px;height:150px;border-radius:50%;
  border:1px solid rgba(75,168,255,.18);
  box-shadow:0 0 55px rgba(21,108,221,.12) inset
}
.kb-live-hero small,.kb-live-block small,.kb-live-cta small{
  color:#52a9ff;font-size:.48rem;font-weight:800;letter-spacing:.12em
}
.kb-live-hero h4{
  position:relative;z-index:2;
  max-width:390px;
  margin:10px 0 12px;
  font-size:1.95rem;
  line-height:.96;
  letter-spacing:-.055em
}
.kb-live-hero h4 em{font-style:normal;color:#4ba8ff}
.kb-live-hero p{position:relative;z-index:2;max-width:360px;color:#8f9daf;font-size:.62rem;line-height:1.55}
.kb-live-hero>a,.kb-live-cta>a{
  position:relative;z-index:2;display:inline-block;
  margin-top:15px;padding:8px 12px;border-radius:999px;
  background:#156CDD;color:#fff;font-size:.5rem;font-weight:800
}
.kb-live-stats{position:absolute;right:29px;bottom:28px;display:flex;gap:8px;z-index:2}
.kb-live-stats i{
  min-width:65px;padding:8px 9px;border:1px solid rgba(255,255,255,.08);border-radius:8px;
  background:rgba(9,17,29,.82);font-style:normal;color:#77879b;font-size:.42rem
}
.kb-live-stats b{display:block;color:#58adff;font-size:.68rem;margin-bottom:2px}

.kb-live-strip{
  height:42px;display:flex;align-items:center;justify-content:space-around;
  background:#080b10;border-block:1px solid rgba(255,255,255,.055)
}
.kb-live-strip span{color:#556478;font-size:.39rem;font-weight:800;letter-spacing:.09em}

.kb-live-block{padding:34px;background:#090c11}
.kb-live-block.alt{background:#07090d}
.kb-live-block h5,.kb-live-cta h5{margin:7px 0 18px;font-size:1.23rem;line-height:1;letter-spacing:-.04em}
.kb-live-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.kb-live-cards article{
  min-height:90px;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,.07);background:#0d1219
}
.kb-live-cards article>i{display:block;color:#4fa9ff;font-size:1rem;margin-bottom:11px}
.kb-live-cards b{display:block;font-size:.55rem}
.kb-live-cards span{display:block;color:#718095;font-size:.42rem;margin-top:3px}

.kb-live-projects{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kb-live-projects article{overflow:hidden;padding-bottom:10px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:#0c1016}
.kb-live-projects .thumb{height:76px}
.kb-live-projects .t1{background:linear-gradient(145deg,rgba(21,108,221,.34),rgba(6,10,15,.15)),repeating-linear-gradient(90deg,transparent 0 18px,rgba(255,255,255,.035) 18px 19px)}
.kb-live-projects .t2{background:radial-gradient(circle at 70% 25%,rgba(76,171,255,.38),transparent 23%),#0d1724}
.kb-live-projects b,.kb-live-projects span{display:block;padding:0 10px}
.kb-live-projects b{font-size:.55rem;margin-top:8px}.kb-live-projects span{font-size:.4rem;color:#738195;margin-top:2px}

.kb-live-block.seo{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:20px;background:linear-gradient(135deg,#08101a,#07111f)}
.kb-live-block.seo p{color:#76879b;font-size:.45rem}
.kb-live-bars{
  height:90px;position:relative;display:flex;align-items:flex-end;gap:7px;padding:12px;
  border-radius:8px;border:1px solid rgba(255,255,255,.07)
}
.kb-live-bars i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(#42a4ff,#156CDD)}
.kb-live-bars i:nth-child(1){height:24%}.kb-live-bars i:nth-child(2){height:42%}.kb-live-bars i:nth-child(3){height:67%}.kb-live-bars i:nth-child(4){height:92%}
.kb-live-bars b{position:absolute;right:10px;top:7px;color:#4da8ff;font-size:.54rem}

.kb-live-cta{text-align:center;padding:42px 28px;background:#080b10}
.kb-live-cta h5{font-size:1.35rem}

.kb-live-scroll{
  position:absolute;right:7px;top:10px;bottom:10px;width:3px;border-radius:4px;background:rgba(255,255,255,.06)
}
.kb-live-scroll i{
  display:block;width:100%;height:20%;border-radius:4px;background:linear-gradient(#2494FF,#156CDD);
  animation:kbLiveThumb 6s ease-in-out infinite
}
@keyframes kbLiveThumb{0%{transform:translateY(0)}50%{transform:translateY(390%)}100%{transform:translateY(0)}}

/* The English DESIGN SYSTEM board adopts this browser without changing its copy/layout */
.studio-section .kb-live-browser{width:100%}

@media(max-width:760px){
  .kb-live-viewport{height:390px}
  .kb-live-nav>div{display:none}
  .kb-live-hero{padding:34px 22px;min-height:255px}
  .kb-live-hero h4{font-size:1.5rem;max-width:260px}
  .kb-live-stats{right:15px;bottom:18px}
  .kb-live-block{padding:26px 20px}
  .kb-live-cards{grid-template-columns:1fr}
  .kb-live-cards article{min-height:64px}
  .kb-live-projects{grid-template-columns:1fr}
  .kb-live-block.seo{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .kb-live-track,.kb-live-scroll i{animation:none!important}
}


/* =========================================================
   REFERENCE-INSPIRED SECTION SYSTEM — KLAUSBEJOLLI.TECH
   Adapted to brand blue #156CDD / #2494FF
   ========================================================= */

/* 1) CLIENT LOGO WALL — geometric tiles */
.ref-client-wall{
  position:relative;
  overflow:hidden;
  padding:74px 0 82px;
  background:
    linear-gradient(135deg,rgba(21,108,221,.05),transparent 48%),
    #f5f8fc;
  border-block:1px solid #e2e8f0;
}
.ref-client-head{
  width:min(90%,1280px);
  margin:0 auto 42px;
}
.ref-client-head h2{
  max-width:760px;
  margin:10px 0 0;
  color:#0b1220;
  font-size:clamp(2rem,3.8vw,3.8rem);
  line-height:1.02;
  letter-spacing:-.045em;
}
.ref-logo-wall-track{
  width:min(94%,1440px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  transform:skewY(-6deg);
}
.ref-logo-diamond{
  aspect-ratio:1.15/1;
  padding:8px;
}
.ref-logo-diamond:nth-child(6n+2),
.ref-logo-diamond:nth-child(6n+4),
.ref-logo-diamond:nth-child(6n+6){transform:translateY(28px)}
.ref-logo-diamond>div{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:22px;
  background:#fff;
  border:1px solid #dce4ee;
  box-shadow:0 14px 32px rgba(27,54,93,.07);
  transform:skewY(6deg) rotate(45deg) scale(.74);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.ref-logo-diamond img{
  max-width:86%;max-height:64px;object-fit:contain;
  transform:rotate(-45deg);
}
.ref-logo-diamond:hover>div{
  border-color:rgba(21,108,221,.35);
  box-shadow:0 18px 40px rgba(21,108,221,.14);
  transform:skewY(6deg) rotate(45deg) scale(.79);
}

/* 2) SERVICES — staggered architectural cards */
.ref-services-section{
  padding:110px 0 130px!important;
  background:
    radial-gradient(500px 300px at 8% 0,rgba(21,108,221,.08),transparent 65%),
    #08090b;
}
.ref-services-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:24px!important;
  align-items:start;
}
.ref-service-card{
  min-height:305px!important;
  padding:32px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:0!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent),
    #0b0d10!important;
  box-shadow:none!important;
  position:relative;
  overflow:hidden;
}
.ref-service-card:nth-child(3n+2){transform:translateY(42px)}
.ref-service-card:nth-child(3n+3){transform:translateY(82px)}
.ref-service-card:nth-child(n+4){margin-top:30px}
.ref-service-card:before{
  content:"";
  position:absolute;left:0;top:0;width:4px;height:0;
  background:linear-gradient(#2494FF,#156CDD);
  transition:height .35s ease;
}
.ref-service-card:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(75,165,255,.32)!important;
}
.ref-service-card:hover:before{height:100%}
.ref-service-card .kb-custom-service-icon{
  width:58px!important;height:58px!important;
  margin-bottom:28px!important;
}
.ref-service-card h3{
  font-size:1.3rem!important;
  margin-bottom:12px!important;
}
.ref-service-card p{
  max-width:350px;
  color:#9aa3af!important;
  line-height:1.72!important;
}
.ref-service-card .card-index{
  right:24px!important;top:24px!important;
  color:#7e8ba0!important;
}
.ref-service-card .link-arrow{
  margin-top:auto!important;
  padding-top:25px!important;
  color:#4da7ff!important;
}

/* 3) PROCESS — infographic cards with connected route */
.ref-process-section{
  position:relative;
  padding:105px 0 115px!important;
  background:
    radial-gradient(circle at 12% 10%,rgba(21,108,221,.12),transparent 28%),
    linear-gradient(180deg,#f3f7fd,#eaf2fb)!important;
  color:#101826!important;
}
.ref-process-section .section-head h2{color:#101826!important}
.ref-process-section .eyebrow{color:#156CDD!important}
.ref-process-grid{
  position:relative;
  max-width:1020px;
  margin:25px auto 0;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:54px 70px!important;
}
.ref-process-grid:before{
  content:"";
  position:absolute;
  left:18%;right:18%;top:24%;bottom:24%;
  border:2px dashed rgba(21,108,221,.35);
  border-radius:120px 120px 120px 120px;
  pointer-events:none;
}
.ref-process-card{
  position:relative;
  min-height:190px!important;
  padding:40px 34px 30px!important;
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(21,108,221,.15)!important;
  border-radius:22px!important;
  box-shadow:0 20px 46px rgba(54,86,128,.12)!important;
  backdrop-filter:blur(12px);
  z-index:2;
}
.ref-process-card:nth-child(2),
.ref-process-card:nth-child(4){transform:translateY(24px)}
.ref-step-number{
  position:absolute;
  left:-18px;top:-22px;
  width:68px;height:58px;
  display:grid;place-items:center;
  border-radius:18px 18px 30px 10px;
  background:linear-gradient(135deg,#156CDD,#6d5cff);
  color:white;
  font:800 1rem var(--font-mono);
  box-shadow:0 10px 25px rgba(21,108,221,.22);
}
.ref-process-card h3{color:#111827!important;font-size:1.22rem!important}
.ref-process-card p{color:#667085!important;line-height:1.7!important}

/* 4) FOOTER — boxed editorial footer with oversized brand word */
.ref-footer{
  padding:34px!important;
  background:#37393c!important;
}
.ref-footer-shell{
  position:relative;
  max-width:1380px!important;
  margin:0 auto!important;
  padding:52px 54px 24px!important;
  background:#07090c!important;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px!important;
  overflow:hidden;
}
.ref-footer .footer-grid{
  position:relative;
  z-index:2;
  grid-template-columns:1.5fr 1fr 1fr 1.25fr!important;
  gap:36px!important;
}
.ref-footer .footer-brand p{max-width:350px}
.ref-footer .footer-col>b{
  color:#5ba9ff!important;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.66rem!important;
}
.ref-footer .footer-col a,
.ref-footer .footer-col li,
.ref-footer .footer-brand p{color:#b7bec8!important}
.ref-footer-wordmark{
  position:relative;
  z-index:1;
  margin-top:42px;
  font-size:clamp(4.5rem,11vw,10rem);
  line-height:.78;
  font-weight:900;
  letter-spacing:-.085em;
  white-space:nowrap;
  background:linear-gradient(90deg,#0c3158 0%,#2494FF 45%,#0d4d85 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  opacity:.88;
}
.ref-footer .footer-bottom{
  position:relative;z-index:2;
  margin-top:26px!important;
  padding-top:20px!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}

/* Responsive */
@media(max-width:1000px){
  .ref-logo-wall-track{grid-template-columns:repeat(4,1fr)}
  .ref-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ref-service-card:nth-child(n){transform:none!important;margin-top:0!important}
  .ref-process-grid{gap:40px!important}
  .ref-footer .footer-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:680px){
  .ref-client-wall{padding:58px 0}
  .ref-logo-wall-track{
    display:flex;
    overflow-x:auto;
    gap:10px;
    padding:15px 6vw 28px;
    transform:none;
    scroll-snap-type:x mandatory;
  }
  .ref-logo-diamond{
    flex:0 0 150px;
    aspect-ratio:1/1;
    padding:0;
    scroll-snap-align:start;
  }
  .ref-logo-diamond:nth-child(n){transform:none}
  .ref-logo-diamond>div{transform:rotate(45deg) scale(.68)}
  .ref-logo-diamond img{transform:rotate(-45deg)}
  .ref-services-grid{grid-template-columns:1fr!important}
  .ref-process-grid{grid-template-columns:1fr!important;gap:32px!important}
  .ref-process-grid:before{
    left:18px;right:auto;top:5%;bottom:5%;width:0;border-width:0 0 0 2px;border-radius:0;
  }
  .ref-process-card:nth-child(n){transform:none!important}
  .ref-footer{padding:16px!important}
  .ref-footer-shell{padding:38px 24px 20px!important}
  .ref-footer .footer-grid{grid-template-columns:1fr!important}
  .ref-footer-wordmark{font-size:3.6rem;white-space:normal;line-height:.85}
}


/* =========================================================
   V7 POLISH — services, honeycomb clients, white footer
   ========================================================= */

/* SERVICES — equal height, larger custom icon, regular alignment */
.ref-services-grid{
  align-items:stretch!important;
  gap:20px!important;
}
.ref-service-card{
  min-height:330px!important;
  height:100%!important;
  padding:30px 30px 26px!important;
  display:flex!important;
  flex-direction:column!important;
  transform:none!important;
  margin-top:0!important;
}
.ref-service-card:nth-child(n){transform:none!important;margin-top:0!important}
.ref-service-main{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.ref-service-card .kb-custom-service-icon{
  width:92px!important;
  height:92px!important;
  margin:0 0 22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}
.ref-service-card .kb-custom-service-icon img{
  width:92px!important;
  height:92px!important;
  object-fit:contain!important;
  display:block!important;
  opacity:1!important;
  filter:none!important;
}
.ref-service-card h3{
  width:100%;
  min-height:58px;
  margin:0 0 10px!important;
  font-size:1.28rem!important;
  line-height:1.16!important;
}
.ref-service-card p{
  width:100%;
  min-height:92px;
  margin:0!important;
}
.ref-service-card .link-arrow{
  margin-top:auto!important;
}
.ref-service-card .card-index{
  top:28px!important;
  right:28px!important;
}

/* CLIENTS — true honeycomb, smaller and tightly packed */
.ref-client-wall{
  padding:70px 0 84px!important;
  background:
    radial-gradient(circle at 70% 20%,rgba(21,108,221,.06),transparent 33%),
    #f5f8fc!important;
}
.ref-client-head{
  width:min(90%,1180px)!important;
  margin-bottom:30px!important;
}
.ref-client-head h2{
  max-width:660px!important;
  font-size:clamp(1.85rem,3.2vw,3.05rem)!important;
}
.ref-logo-wall-track{
  width:min(90%,1120px)!important;
  display:grid!important;
  grid-template-columns:repeat(6,138px)!important;
  grid-auto-rows:118px!important;
  gap:0 4px!important;
  justify-content:center!important;
  transform:none!important;
  padding-top:18px;
}
.ref-logo-diamond{
  width:138px!important;
  height:118px!important;
  padding:0!important;
  margin:0!important;
  position:relative;
  transform:none!important;
}
.ref-logo-diamond:nth-child(6n+2),
.ref-logo-diamond:nth-child(6n+4),
.ref-logo-diamond:nth-child(6n+6){
  transform:translateY(59px)!important;
}
.ref-logo-diamond>div{
  position:absolute;
  inset:7px;
  padding:22px!important;
  background:#fff!important;
  border:1px solid #dbe4ee!important;
  box-shadow:0 10px 26px rgba(38,62,93,.08)!important;
  transform:rotate(45deg) scale(.70)!important;
  border-radius:8px!important;
}
.ref-logo-diamond img{
  max-width:98%!important;
  max-height:62px!important;
  transform:rotate(-45deg)!important;
}
.ref-logo-diamond:hover>div{
  transform:rotate(45deg) scale(.74)!important;
  border-color:rgba(21,108,221,.38)!important;
  box-shadow:0 15px 34px rgba(21,108,221,.14)!important;
}

/* FOOTER — white interior, website body color outside */
.ref-footer{
  padding:42px 4vw!important;
  background:var(--ink)!important;
}
.ref-footer-shell{
  background:#fff!important;
  color:#111827!important;
  border:1px solid #dfe5ec!important;
  border-radius:20px!important;
  box-shadow:0 22px 55px rgba(0,0,0,.20)!important;
}
.ref-footer .footer-grid{
  color:#111827!important;
}
.ref-footer .footer-brand img{
  width:300px!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:left center!important;
  margin-bottom:20px!important;
}
.ref-footer .footer-brand p,
.ref-footer .footer-col a,
.ref-footer .footer-col li,
.ref-footer .footer-col span{
  color:#5f6876!important;
}
.ref-footer .footer-col>b{
  color:#156CDD!important;
}
.ref-footer .socials a{
  border:1px solid #d9e0e8!important;
  color:#0b1320!important;
  background:#f7f9fc!important;
}
.ref-footer .socials a:hover{
  color:#156CDD!important;
  border-color:#85bfff!important;
}
.ref-footer-wordmark{
  background:linear-gradient(90deg,#0a1321 0%,#156CDD 45%,#2494FF 72%,#0a1321 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  opacity:.95!important;
}
.ref-footer .footer-bottom{
  border-top:1px solid #e3e8ef!important;
  color:#798291!important;
}
.ref-footer .footer-bottom span{
  color:#798291!important;
}

/* Responsive honeycomb & footer */
@media(max-width:1000px){
  .ref-logo-wall-track{
    grid-template-columns:repeat(4,128px)!important;
    grid-auto-rows:108px!important;
  }
  .ref-logo-diamond{width:128px!important;height:108px!important}
  .ref-logo-diamond:nth-child(n){transform:none!important}
  .ref-logo-diamond:nth-child(4n+2),
  .ref-logo-diamond:nth-child(4n+4){transform:translateY(54px)!important}
}
@media(max-width:680px){
  .ref-logo-wall-track{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,125px)!important;
    grid-auto-rows:108px!important;
    justify-content:center!important;
    overflow:visible!important;
    padding:20px 0 55px!important;
  }
  .ref-logo-diamond{
    flex:none!important;
    width:125px!important;
    height:108px!important;
  }
  .ref-logo-diamond:nth-child(n){transform:none!important}
  .ref-logo-diamond:nth-child(2n){transform:translateY(54px)!important}
  .ref-footer{padding:22px 14px!important}
  .ref-footer-shell{padding:34px 22px 22px!important}
  .ref-footer .footer-brand img{width:240px!important}
}


/* =========================================================
   V8 — tighter footer, true honeycomb, staircase services
   ========================================================= */

/* FOOTER — smaller overall */
.ref-footer{
  padding:28px 3vw!important;
}
.ref-footer-shell{
  padding:38px 42px 18px!important;
  border-radius:16px!important;
}
.ref-footer .footer-grid{
  gap:28px!important;
}
.ref-footer .footer-brand img{
  width:250px!important;
  margin-bottom:14px!important;
}
.ref-footer .footer-brand p{
  font-size:.88rem!important;
  line-height:1.65!important;
}
.ref-footer-wordmark{
  margin-top:28px!important;
  font-size:clamp(3.4rem,8.2vw,7.2rem)!important;
  line-height:.82!important;
}
.ref-footer .footer-bottom{
  margin-top:18px!important;
  padding-top:14px!important;
  font-size:.72rem!important;
}

/* CLIENT LOGOS — tighter, true honeycomb */
.ref-client-wall{
  padding:60px 0 74px!important;
}
.ref-client-head{
  margin-bottom:18px!important;
}
.ref-logo-wall-track{
  width:min(94%,1080px)!important;
  grid-template-columns:repeat(6,126px)!important;
  grid-auto-rows:96px!important;
  column-gap:0!important;
  row-gap:0!important;
  padding-top:8px!important;
}
.ref-logo-diamond{
  width:126px!important;
  height:96px!important;
}
.ref-logo-diamond>div{
  inset:0!important;
  padding:18px!important;
  transform:rotate(45deg) scale(.72)!important;
  border-radius:7px!important;
}
.ref-logo-diamond:nth-child(6n+2),
.ref-logo-diamond:nth-child(6n+4),
.ref-logo-diamond:nth-child(6n+6){
  transform:translateY(48px)!important;
}
.ref-logo-diamond img{
  max-height:56px!important;
}
.ref-logo-diamond:hover>div{
  transform:rotate(45deg) scale(.76)!important;
}

/* HOMEPAGE SERVICES — staircase layout, 6 only */
.ref-services-section{
  padding-bottom:145px!important;
}
.ref-services-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
  align-items:start!important;
}
.ref-service-card{
  min-height:330px!important;
  height:330px!important;
}
.ref-service-card:nth-child(1),
.ref-service-card:nth-child(4){
  transform:translateY(0)!important;
}
.ref-service-card:nth-child(2),
.ref-service-card:nth-child(5){
  transform:translateY(42px)!important;
}
.ref-service-card:nth-child(3),
.ref-service-card:nth-child(6){
  transform:translateY(84px)!important;
}
.ref-service-card:hover{
  transform:translateY(-6px)!important;
}

/* make custom icons stronger and visually present */
.ref-service-card .kb-custom-service-icon{
  width:110px!important;
  height:110px!important;
  margin:0 0 18px!important;
}
.ref-service-card .kb-custom-service-icon img{
  width:110px!important;
  height:110px!important;
  object-fit:contain!important;
  transform:scale(1.08)!important;
  transform-origin:left center!important;
}
.ref-service-card h3{
  min-height:auto!important;
  margin-top:0!important;
  font-size:1.32rem!important;
}
.ref-service-card p{
  min-height:86px!important;
}

/* service archive page — all services regular, no staircase */
.ref-services-page-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px!important;
}
.ref-services-page-card{
  min-height:320px!important;
  height:100%!important;
  transform:none!important;
  margin:0!important;
}

/* Responsive */
@media(max-width:1000px){
  .ref-logo-wall-track{
    grid-template-columns:repeat(4,118px)!important;
    grid-auto-rows:90px!important;
  }
  .ref-logo-diamond{width:118px!important;height:90px!important}
  .ref-logo-diamond:nth-child(n){transform:none!important}
  .ref-logo-diamond:nth-child(4n+2),
  .ref-logo-diamond:nth-child(4n+4){transform:translateY(45px)!important}
  .ref-service-card:nth-child(n){transform:none!important;height:auto!important;min-height:310px!important}
  .ref-services-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:680px){
  .ref-logo-wall-track{
    grid-template-columns:repeat(2,116px)!important;
    grid-auto-rows:90px!important;
    padding-bottom:45px!important;
  }
  .ref-logo-diamond{width:116px!important;height:90px!important}
  .ref-logo-diamond:nth-child(n){transform:none!important}
  .ref-logo-diamond:nth-child(2n){transform:translateY(45px)!important}
  .ref-footer{padding:16px 10px!important}
  .ref-footer-shell{padding:30px 18px 16px!important}
  .ref-footer-wordmark{font-size:2.8rem!important}
  .ref-service-card .kb-custom-service-icon,
  .ref-service-card .kb-custom-service-icon img{
    width:96px!important;height:96px!important;
  }
  .ref-services-page-grid{grid-template-columns:1fr!important}
}


/* =========================================================
   V9 — CLIENT LOGO WALL AS OFFSET COLUMNS
   Reference: alternating high / low columns, diagonal rhythm,
   generous spacing so diamonds never touch each other.
   ========================================================= */

.ref-client-wall{
  padding:64px 0 92px!important;
  overflow:hidden!important;
}

.ref-logo-wall-track{
  width:min(94%,1220px)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(6, 150px)!important;
  grid-auto-rows:150px!important;
  gap:22px 18px!important;
  justify-content:center!important;
  align-items:start!important;
  transform:none!important;
  padding:20px 0 80px!important;
}

/* Every tile keeps the same square footprint.
   The internal card rotates to create the diamond shape. */
.ref-logo-diamond{
  width:150px!important;
  height:150px!important;
  position:relative!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
}

/* Alternating columns:
   1/3/5 higher
   2/4/6 lower
   creates left-right + up-down rhythm without overlap */
.ref-logo-diamond:nth-child(6n+1),
.ref-logo-diamond:nth-child(6n+3),
.ref-logo-diamond:nth-child(6n+5){
  transform:translateY(0)!important;
}
.ref-logo-diamond:nth-child(6n+2),
.ref-logo-diamond:nth-child(6n+4),
.ref-logo-diamond:nth-child(6n+6){
  transform:translateY(74px)!important;
}

/* Second row reverses the rhythm slightly for a honeycomb wall feel */
.ref-logo-diamond:nth-child(n+7):nth-child(-n+12):nth-child(odd){
  transform:translateY(74px)!important;
}
.ref-logo-diamond:nth-child(n+7):nth-child(-n+12):nth-child(even){
  transform:translateY(0)!important;
}

/* Third row returns to original high/low arrangement */
.ref-logo-diamond:nth-child(n+13):nth-child(-n+18):nth-child(odd){
  transform:translateY(0)!important;
}
.ref-logo-diamond:nth-child(n+13):nth-child(-n+18):nth-child(even){
  transform:translateY(74px)!important;
}

.ref-logo-diamond>div{
  position:absolute!important;
  width:112px!important;
  height:112px!important;
  left:19px!important;
  top:19px!important;
  inset:auto!important;
  padding:18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#fff!important;
  border:1px solid #dce5ef!important;
  border-radius:10px!important;
  box-shadow:0 14px 34px rgba(32,59,94,.09)!important;
  transform:rotate(45deg)!important;
  transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease!important;
}

.ref-logo-diamond img{
  max-width:88px!important;
  max-height:54px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  transform:rotate(-45deg)!important;
}

.ref-logo-diamond:hover>div{
  transform:rotate(45deg) scale(1.04)!important;
  border-color:rgba(21,108,221,.38)!important;
  box-shadow:0 18px 42px rgba(21,108,221,.16)!important;
}

/* Tablet */
@media(max-width:1100px){
  .ref-logo-wall-track{
    grid-template-columns:repeat(4,145px)!important;
    grid-auto-rows:145px!important;
    gap:22px 16px!important;
    padding-bottom:72px!important;
  }
  .ref-logo-diamond{
    width:145px!important;
    height:145px!important;
  }
  .ref-logo-diamond:nth-child(n){
    transform:none!important;
  }
  .ref-logo-diamond:nth-child(4n+2),
  .ref-logo-diamond:nth-child(4n+4){
    transform:translateY(70px)!important;
  }
  .ref-logo-diamond>div{
    width:108px!important;height:108px!important;
    left:18px!important;top:18px!important;
  }
}

/* Mobile: still retains alternating columns, but only 2 columns */
@media(max-width:680px){
  .ref-client-wall{
    padding:54px 0 76px!important;
  }
  .ref-logo-wall-track{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,132px)!important;
    grid-auto-rows:132px!important;
    gap:18px 18px!important;
    justify-content:center!important;
    padding:14px 0 66px!important;
    overflow:visible!important;
  }
  .ref-logo-diamond{
    width:132px!important;
    height:132px!important;
  }
  .ref-logo-diamond:nth-child(n){
    transform:none!important;
  }
  .ref-logo-diamond:nth-child(2n){
    transform:translateY(62px)!important;
  }
  .ref-logo-diamond>div{
    width:98px!important;
    height:98px!important;
    left:17px!important;
    top:17px!important;
    padding:15px!important;
  }
  .ref-logo-diamond img{
    max-width:76px!important;
    max-height:48px!important;
  }
}


/* =========================================================
   V10 — CLIENT LOGO WALL: EXACTLY 5 COLUMNS
   Alternating high / low columns with enough separation.
   ========================================================= */

.ref-logo-wall-track{
  width:min(94%,1120px)!important;
  grid-template-columns:repeat(5,150px)!important;
  grid-auto-rows:150px!important;
  gap:24px 24px!important;
  justify-content:center!important;
  align-items:start!important;
  padding:22px 0 86px!important;
}

/* Reset all older 6-column offsets */
.ref-logo-diamond:nth-child(n){
  transform:none!important;
}

/* 5-column rhythm:
   col 1 high
   col 2 low
   col 3 high
   col 4 low
   col 5 high */
.ref-logo-diamond:nth-child(5n+1),
.ref-logo-diamond:nth-child(5n+3),
.ref-logo-diamond:nth-child(5n+5){
  transform:translateY(0)!important;
}
.ref-logo-diamond:nth-child(5n+2),
.ref-logo-diamond:nth-child(5n+4){
  transform:translateY(74px)!important;
}

/* reverse the next visual row for a more natural honeycomb flow */
.ref-logo-diamond:nth-child(n+6):nth-child(-n+10):nth-child(odd){
  transform:translateY(74px)!important;
}
.ref-logo-diamond:nth-child(n+6):nth-child(-n+10):nth-child(even){
  transform:translateY(0)!important;
}

/* third row back to original */
.ref-logo-diamond:nth-child(n+11):nth-child(-n+15):nth-child(odd){
  transform:translateY(0)!important;
}
.ref-logo-diamond:nth-child(n+11):nth-child(-n+15):nth-child(even){
  transform:translateY(74px)!important;
}

@media(max-width:1100px){
  .ref-logo-wall-track{
    grid-template-columns:repeat(4,145px)!important;
    grid-auto-rows:145px!important;
    gap:22px 18px!important;
  }
  .ref-logo-diamond:nth-child(n){transform:none!important}
  .ref-logo-diamond:nth-child(4n+2),
  .ref-logo-diamond:nth-child(4n+4){
    transform:translateY(70px)!important;
  }
}

@media(max-width:680px){
  .ref-logo-wall-track{
    grid-template-columns:repeat(2,132px)!important;
    grid-auto-rows:132px!important;
    gap:18px 18px!important;
  }
  .ref-logo-diamond:nth-child(n){transform:none!important}
  .ref-logo-diamond:nth-child(2n){
    transform:translateY(62px)!important;
  }
}


/* =========================================================
   V11 — LOGO WALL: EXACT 2 / 3 / 4 / 4 / 3 ROW ORDER
   ========================================================= */
.ref-logo-wall-track{
  width:min(94%,1180px)!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:0!important;
  padding:18px 0 36px!important;
}
.ref-logo-row{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:34px;
  height:124px;
  position:relative;
}
.ref-logo-row.row-1{transform:translateX(-6%)}
.ref-logo-row.row-2{transform:translateX(6%)}
.ref-logo-row.row-3{transform:translateX(-3%)}
.ref-logo-row.row-4{transform:translateX(3%)}
.ref-logo-row.row-5{transform:translateX(-5%)}

.ref-logo-row .ref-logo-diamond{
  flex:0 0 138px!important;
  width:138px!important;
  height:138px!important;
  padding:0!important;
  margin:0!important;
  position:relative!important;
  transform:none!important;
}
.ref-logo-row .ref-logo-diamond>div{
  position:absolute!important;
  width:104px!important;
  height:104px!important;
  left:17px!important;
  top:17px!important;
  inset:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:16px!important;
  border-radius:9px!important;
  background:#fff!important;
  border:1px solid #dbe5ef!important;
  box-shadow:0 12px 30px rgba(38,62,93,.08)!important;
  transform:rotate(45deg)!important;
}
.ref-logo-row .ref-logo-diamond img{
  max-width:84px!important;
  max-height:52px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  transform:rotate(-45deg)!important;
}
.ref-logo-row .ref-logo-diamond:hover>div{
  transform:rotate(45deg) scale(1.04)!important;
  border-color:rgba(21,108,221,.35)!important;
  box-shadow:0 16px 38px rgba(21,108,221,.13)!important;
}

/* bring rows close like the reference, without touching */
.ref-logo-row + .ref-logo-row{margin-top:-26px}

/* desktop subtle alternating up/down rhythm */
.ref-logo-row.row-2,
.ref-logo-row.row-4{top:14px}
.ref-logo-row.row-3,
.ref-logo-row.row-5{top:2px}

@media(max-width:900px){
  .ref-logo-row{gap:22px;height:112px}
  .ref-logo-row .ref-logo-diamond{
    flex-basis:122px!important;width:122px!important;height:122px!important;
  }
  .ref-logo-row .ref-logo-diamond>div{
    width:92px!important;height:92px!important;left:15px!important;top:15px!important;
  }
  .ref-logo-row .ref-logo-diamond img{max-width:72px!important;max-height:46px!important}
  .ref-logo-row.row-1,.ref-logo-row.row-2,.ref-logo-row.row-3,.ref-logo-row.row-4,.ref-logo-row.row-5{transform:none!important}
}
@media(max-width:680px){
  .ref-client-wall{overflow:hidden!important}
  .ref-logo-wall-track{width:760px!important;transform:translateX(calc((100vw - 760px)/2))!important}
  .ref-logo-row{gap:18px;height:102px}
  .ref-logo-row .ref-logo-diamond{
    flex-basis:108px!important;width:108px!important;height:108px!important;
  }
  .ref-logo-row .ref-logo-diamond>div{
    width:82px!important;height:82px!important;left:13px!important;top:13px!important;padding:12px!important;
  }
  .ref-logo-row .ref-logo-diamond img{max-width:64px!important;max-height:40px!important}
  .ref-logo-row + .ref-logo-row{margin-top:-22px}
}


/* =========================================================
   V12 — CLIENT LOGO WALL: EXACT 10 COLUMNS
   col 1 = 1 logo
   col 2-9 = 2 logos
   col 10 = 1 logo
   Adjacent columns are vertically offset by 50% of tile height.
   Horizontal and vertical gaps use the SAME spacing.
   ========================================================= */

.ref-client-wall{
  padding:66px 0 88px!important;
  overflow:hidden!important;
}

.ref-logo-wall-track{
  --kb-logo-tile:112px;
  --kb-logo-gap:20px;

  width:min(96%,1500px)!important;
  margin:0 auto!important;
  padding:28px 20px 78px!important;

  display:grid!important;
  grid-template-columns:repeat(10,var(--kb-logo-tile))!important;
  column-gap:var(--kb-logo-gap)!important;
  row-gap:0!important;
  justify-content:center!important;
  align-items:start!important;

  transform:none!important;
}

/* One true vertical column per logo column */
.ref-logo-column{
  width:var(--kb-logo-tile);
  display:flex;
  flex-direction:column;
  gap:var(--kb-logo-gap);
  align-items:center;
  justify-content:flex-start;
}

/* 50% vertical difference between neighbouring columns */
.ref-logo-column:nth-child(odd){
  transform:translateY(0);
}
.ref-logo-column:nth-child(even){
  transform:translateY(calc((var(--kb-logo-tile) + var(--kb-logo-gap)) / 2));
}

/* First and last columns only contain one logo.
   Center them visually relative to the two-logo columns. */
.ref-logo-column:first-child,
.ref-logo-column:last-child{
  padding-top:calc((var(--kb-logo-tile) + var(--kb-logo-gap)) / 2);
}

/* Keep the alternating 50% rhythm even on the last column */
.ref-logo-column:last-child{
  transform:translateY(0);
}

/* Equal tile footprint everywhere */
.ref-logo-column .ref-logo-diamond{
  width:var(--kb-logo-tile)!important;
  height:var(--kb-logo-tile)!important;
  flex:0 0 var(--kb-logo-tile)!important;
  margin:0!important;
  padding:0!important;
  position:relative!important;
  transform:none!important;
}

/* Diamond card */
.ref-logo-column .ref-logo-diamond>div{
  position:absolute!important;
  width:82px!important;
  height:82px!important;
  left:15px!important;
  top:15px!important;
  inset:auto!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:13px!important;

  background:#fff!important;
  border:1px solid #dbe5ef!important;
  border-radius:8px!important;
  box-shadow:0 10px 25px rgba(38,62,93,.08)!important;

  transform:rotate(45deg)!important;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease!important;
}

.ref-logo-column .ref-logo-diamond img{
  width:auto!important;
  height:auto!important;
  max-width:67px!important;
  max-height:42px!important;
  object-fit:contain!important;
  transform:rotate(-45deg)!important;
}

.ref-logo-column .ref-logo-diamond:hover>div{
  transform:rotate(45deg) scale(1.04)!important;
  border-color:rgba(21,108,221,.35)!important;
  box-shadow:0 14px 34px rgba(21,108,221,.14)!important;
}

/* Remove all old row/high-low transforms from previous versions */
.ref-logo-row,
.ref-logo-row .ref-logo-diamond,
.ref-logo-diamond:nth-child(n){
  margin-top:0!important;
}

/* Tablet: preserve column logic, allow horizontal overflow instead of breaking geometry */
@media(max-width:1200px){
  .ref-client-wall{
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
  .ref-logo-wall-track{
    width:max-content!important;
    min-width:max-content!important;
    justify-content:start!important;
    padding-left:40px!important;
    padding-right:40px!important;
  }
}

/* Mobile: same exact 10-column geometry, horizontally scrollable */
@media(max-width:680px){
  .ref-logo-wall-track{
    --kb-logo-tile:96px;
    --kb-logo-gap:16px;
    padding-top:22px!important;
    padding-bottom:64px!important;
  }

  .ref-logo-column .ref-logo-diamond>div{
    width:70px!important;
    height:70px!important;
    left:13px!important;
    top:13px!important;
    padding:11px!important;
  }

  .ref-logo-column .ref-logo-diamond img{
    max-width:56px!important;
    max-height:36px!important;
  }
}


/* =========================================================
   V13 — EQUAL HORIZONTAL / VERTICAL LOGO SPACING
   Keep exact 10-column structure, but reduce whitespace and
   make row/column distance visually equal.
   ========================================================= */

.ref-logo-wall-track{
  --kb-logo-tile:104px!important;
  --kb-logo-gap:12px!important;

  width:min(98%,1320px)!important;
  grid-template-columns:repeat(10,var(--kb-logo-tile))!important;
  column-gap:var(--kb-logo-gap)!important;
  row-gap:var(--kb-logo-gap)!important;
  justify-content:center!important;
  align-items:start!important;
  padding:20px 8px 58px!important;
}

/* Same vertical distance between the two items in each column */
.ref-logo-column{
  width:var(--kb-logo-tile)!important;
  gap:var(--kb-logo-gap)!important;
}

/* Alternate columns by half of one full tile+gap unit,
   so the geometric rhythm stays consistent */
.ref-logo-column:nth-child(odd){
  transform:translateY(0)!important;
}
.ref-logo-column:nth-child(even){
  transform:translateY(calc((var(--kb-logo-tile) + var(--kb-logo-gap)) / 2))!important;
}

/* First and last single-logo columns aligned to the same grid rhythm */
.ref-logo-column:first-child,
.ref-logo-column:last-child{
  padding-top:calc((var(--kb-logo-tile) + var(--kb-logo-gap)) / 2)!important;
}

/* Compact tile footprint */
.ref-logo-column .ref-logo-diamond{
  width:var(--kb-logo-tile)!important;
  height:var(--kb-logo-tile)!important;
  flex:0 0 var(--kb-logo-tile)!important;
}

/* Larger diamond within smaller footprint = less wasted space */
.ref-logo-column .ref-logo-diamond>div{
  width:78px!important;
  height:78px!important;
  left:13px!important;
  top:13px!important;
  padding:12px!important;
}

.ref-logo-column .ref-logo-diamond img{
  max-width:64px!important;
  max-height:40px!important;
}

/* Tablet keeps same proportions */
@media(max-width:1200px){
  .ref-logo-wall-track{
    --kb-logo-tile:96px!important;
    --kb-logo-gap:10px!important;
    padding-left:24px!important;
    padding-right:24px!important;
  }
  .ref-logo-column .ref-logo-diamond>div{
    width:72px!important;
    height:72px!important;
    left:12px!important;
    top:12px!important;
  }
  .ref-logo-column .ref-logo-diamond img{
    max-width:58px!important;
    max-height:36px!important;
  }
}

/* Mobile preserves geometry horizontally */
@media(max-width:680px){
  .ref-logo-wall-track{
    --kb-logo-tile:88px!important;
    --kb-logo-gap:9px!important;
    padding-top:18px!important;
    padding-bottom:50px!important;
  }
  .ref-logo-column .ref-logo-diamond>div{
    width:66px!important;
    height:66px!important;
    left:11px!important;
    top:11px!important;
    padding:10px!important;
  }
  .ref-logo-column .ref-logo-diamond img{
    max-width:52px!important;
    max-height:32px!important;
  }
}


/* =========================================================
   V14 — CLIENT LOGO ORBIT / FLOATING BUBBLES
   Replaces the honeycomb with a premium clustered logo field.
   ========================================================= */

.ref-client-wall{
  position:relative;
  overflow:hidden!important;
  padding:78px 0 96px!important;
  background:
    radial-gradient(circle at 50% 52%,rgba(21,108,221,.13),transparent 34%),
    radial-gradient(circle at 20% 20%,rgba(36,148,255,.06),transparent 27%),
    #06090d!important;
  border-block:1px solid rgba(255,255,255,.06)!important;
}
.ref-client-wall:before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,transparent,black 14%,black 86%,transparent);
  pointer-events:none;
}
.ref-client-head{
  position:relative;z-index:2;
  width:min(90%,1120px)!important;
  margin:0 auto 36px!important;
  text-align:center;
}
.ref-client-head .eyebrow{justify-content:center}
.ref-client-head h2{
  max-width:760px!important;
  margin:12px auto 0!important;
  color:#f7f9fc!important;
  font-size:clamp(2rem,3.6vw,3.35rem)!important;
}

.kb-logo-orbit{
  position:relative;
  width:min(92vw,1040px);
  height:620px;
  margin:0 auto;
}
.kb-orbit-ring{
  position:absolute;
  left:50%;top:50%;
  border:1px solid rgba(86,168,255,.08);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.kb-orbit-ring.ring-a{width:560px;height:360px}
.kb-orbit-ring.ring-b{width:820px;height:520px;opacity:.7}

.kb-logo-bubble{
  position:absolute;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.06),transparent 28%),
    #1b222c;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:
    0 22px 55px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
  z-index:2;
}
.kb-logo-bubble:hover{
  transform:scale(1.08);
  border-color:rgba(82,166,255,.34);
  box-shadow:0 24px 62px rgba(21,108,221,.18);
  z-index:5;
}
.kb-logo-bubble-inner{
  width:72%;height:72%;
  display:flex;align-items:center;justify-content:center;
}
.kb-logo-bubble img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
  filter:none!important;
}

/* Bubble sizes */
.kb-logo-bubble.size-center{width:190px;height:190px;background:#202833}
.kb-logo-bubble.size-lg{width:118px;height:118px}
.kb-logo-bubble.size-md{width:92px;height:92px}
.kb-logo-bubble.size-sm{width:68px;height:68px}

/* Desktop composition */
.kb-logo-bubble.p-center{left:50%;top:50%;transform:translate(-50%,-50%)}
.kb-logo-bubble.p-center:hover{transform:translate(-50%,-50%) scale(1.05)}
.kb-logo-bubble.p1{left:13%;top:14%}
.kb-logo-bubble.p2{left:29%;top:5%}
.kb-logo-bubble.p3{right:26%;top:8%}
.kb-logo-bubble.p4{right:10%;top:21%}
.kb-logo-bubble.p5{left:6%;top:42%}
.kb-logo-bubble.p6{left:22%;top:55%}
.kb-logo-bubble.p7{right:8%;top:50%}
.kb-logo-bubble.p8{right:25%;top:65%}
.kb-logo-bubble.p9{left:35%;bottom:4%}
.kb-logo-bubble.p10{right:39%;bottom:3%}
.kb-logo-bubble.p11{left:16%;bottom:10%}
.kb-logo-bubble.p12{right:15%;bottom:15%}
.kb-logo-bubble.p13{left:44%;top:15%}

/* Give subtle individual motion, but no chaotic animation */
.kb-logo-bubble.p1,.kb-logo-bubble.p4,.kb-logo-bubble.p8,.kb-logo-bubble.p11{
  animation:kbBubbleFloatA 7s ease-in-out infinite;
}
.kb-logo-bubble.p2,.kb-logo-bubble.p5,.kb-logo-bubble.p9,.kb-logo-bubble.p12{
  animation:kbBubbleFloatB 8s ease-in-out infinite;
}
@keyframes kbBubbleFloatA{0%,100%{margin-top:0}50%{margin-top:-9px}}
@keyframes kbBubbleFloatB{0%,100%{margin-top:0}50%{margin-top:8px}}

/* Tablet */
@media(max-width:900px){
  .kb-logo-orbit{height:560px;width:min(95vw,760px)}
  .kb-logo-bubble.size-center{width:165px;height:165px}
  .kb-logo-bubble.size-lg{width:105px;height:105px}
  .kb-logo-bubble.size-md{width:82px;height:82px}
  .kb-logo-bubble.size-sm{width:62px;height:62px}
  .kb-orbit-ring.ring-a{width:460px;height:300px}
  .kb-orbit-ring.ring-b{width:650px;height:440px}
}

/* Mobile: same visual language, compact cluster */
@media(max-width:620px){
  .ref-client-wall{padding:60px 0 70px!important}
  .kb-logo-orbit{width:100%;height:500px;overflow:hidden}
  .kb-logo-bubble.size-center{width:142px;height:142px}
  .kb-logo-bubble.size-lg{width:88px;height:88px}
  .kb-logo-bubble.size-md{width:70px;height:70px}
  .kb-logo-bubble.size-sm{width:54px;height:54px}
  .kb-orbit-ring.ring-a{width:330px;height:240px}
  .kb-orbit-ring.ring-b{width:500px;height:370px}
  .kb-logo-bubble.p1{left:4%;top:13%}
  .kb-logo-bubble.p2{left:34%;top:4%}
  .kb-logo-bubble.p3{right:6%;top:11%}
  .kb-logo-bubble.p4{right:-2%;top:35%}
  .kb-logo-bubble.p5{left:-2%;top:36%}
  .kb-logo-bubble.p6{left:12%;top:60%}
  .kb-logo-bubble.p7{right:6%;top:59%}
  .kb-logo-bubble.p8{right:26%;top:70%}
  .kb-logo-bubble.p9{left:36%;bottom:2%}
  .kb-logo-bubble.p10{right:40%;bottom:1%}
  .kb-logo-bubble.p11{left:2%;bottom:8%}
  .kb-logo-bubble.p12{right:1%;bottom:11%}
  .kb-logo-bubble.p13{left:46%;top:18%}
}

@media(prefers-reduced-motion:reduce){
  .kb-logo-bubble{animation:none!important}
}


/* =========================================================
   V15 — HOMEPAGE SERVICES LIKE PROVIDED REFERENCE
   One intro block + exactly five service cards.
   Custom icons remain, only slightly larger.
   ========================================================= */

.ref-services-v15{
  padding:92px 0 104px!important;
  background:#f2efe7!important;
  color:#0d1a18!important;
}

.ref-services-v15>.wrap{
  display:grid!important;
  grid-template-columns:1.02fr 2.3fr!important;
  gap:22px!important;
  align-items:stretch!important;
}

.ref-services-v15 .ref-services-intro{
  margin:0!important;
  padding:34px 30px!important;
  border-radius:14px!important;
  background:transparent!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  min-height:330px!important;
  color:#10211e!important;
}

.ref-services-v15 .ref-services-intro h2{
  color:#10211e!important;
  font-size:clamp(2rem,3vw,3.4rem)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
  margin:0 0 16px!important;
}
.ref-services-v15 .ref-services-intro p{
  color:#61706d!important;
  font-size:.94rem!important;
  line-height:1.68!important;
  margin:0!important;
  max-width:360px!important;
}
.ref-services-all{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-top:24px!important;
  padding:10px 16px!important;
  border-radius:5px!important;
  background:#68e58e!important;
  color:#0d2718!important;
  font-size:.73rem!important;
  font-weight:800!important;
  text-transform:none!important;
}

.ref-services-five-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-template-rows:1fr 1fr!important;
  gap:14px!important;
  align-items:stretch!important;
}

/* Reference composition:
   row 1 = 2 wider cards
   row 2 = 3 cards */
.ref-five-service-card.card-1{grid-column:1 / span 3!important;grid-row:1!important}
.ref-five-service-card.card-2{grid-column:4 / span 3!important;grid-row:1!important}
.ref-five-service-card.card-3{grid-column:1 / span 2!important;grid-row:2!important}
.ref-five-service-card.card-4{grid-column:3 / span 2!important;grid-row:2!important}
.ref-five-service-card.card-5{grid-column:5 / span 2!important;grid-row:2!important}

.ref-five-service-card{
  min-height:158px!important;
  height:auto!important;
  margin:0!important;
  transform:none!important;
  padding:22px 22px 18px!important;
  border-radius:10px!important;
  background:#fff!important;
  border:1px solid rgba(9,28,25,.08)!important;
  color:#10211e!important;
  box-shadow:0 8px 22px rgba(43,57,54,.06)!important;
  display:grid!important;
  grid-template-columns:auto 1fr!important;
  grid-template-rows:auto 1fr auto!important;
  column-gap:16px!important;
  align-content:start!important;
  overflow:hidden!important;
}
.ref-five-service-card.card-1{
  background:#102f2b!important;
  color:#fff!important;
  transform:rotate(-1.5deg)!important;
}
.ref-five-service-card.card-1:hover{transform:rotate(-1.5deg) translateY(-4px)!important}

.ref-five-service-card .ref-service-main{
  display:contents!important;
}

/* Custom service icons: noticeably visible, but not oversized */
.ref-five-service-card .kb-custom-service-icon{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  width:70px!important;
  height:70px!important;
  margin:0!important;
  align-self:start!important;
}
.ref-five-service-card .kb-custom-service-icon img{
  width:70px!important;
  height:70px!important;
  object-fit:contain!important;
  transform:none!important;
}

.ref-five-service-card h3{
  grid-column:2!important;
  grid-row:1!important;
  margin:2px 0 7px!important;
  min-height:auto!important;
  font-size:1.03rem!important;
  line-height:1.15!important;
  color:inherit!important;
}
.ref-five-service-card p{
  grid-column:2!important;
  grid-row:2!important;
  min-height:auto!important;
  margin:0!important;
  color:#66736f!important;
  font-size:.78rem!important;
  line-height:1.55!important;
}
.ref-five-service-card.card-1 p{color:#c7d4d1!important}

.ref-five-service-card .card-index{
  display:none!important;
}
.ref-five-service-card .link-arrow{
  grid-column:2!important;
  grid-row:3!important;
  margin:12px 0 0!important;
  padding:0!important;
  border:0!important;
  color:#10211e!important;
  font-size:.68rem!important;
  font-weight:800!important;
}
.ref-five-service-card.card-1 .link-arrow{color:#d8ebe7!important}

.ref-five-service-card:before{display:none!important}
.ref-five-service-card:hover{
  transform:translateY(-4px)!important;
  border-color:rgba(21,108,221,.22)!important;
  box-shadow:0 14px 30px rgba(27,53,47,.10)!important;
}

/* Dedicated services page remains untouched by this composition. */
.ref-services-page .ref-services-five-grid,
.ref-services-page .ref-five-service-card{
  all:unset;
}

/* Tablet */
@media(max-width:1000px){
  .ref-services-v15>.wrap{
    grid-template-columns:1fr!important;
  }
  .ref-services-v15 .ref-services-intro{
    min-height:auto!important;
    padding:10px 0 22px!important;
  }
}

/* Mobile */
@media(max-width:680px){
  .ref-services-v15{
    padding:68px 0!important;
  }
  .ref-services-five-grid{
    grid-template-columns:1fr!important;
    grid-template-rows:auto!important;
  }
  .ref-five-service-card.card-1,
  .ref-five-service-card.card-2,
  .ref-five-service-card.card-3,
  .ref-five-service-card.card-4,
  .ref-five-service-card.card-5{
    grid-column:1!important;
    grid-row:auto!important;
    transform:none!important;
  }
  .ref-five-service-card.card-1:hover{transform:translateY(-4px)!important}
  .ref-five-service-card{
    min-height:150px!important;
  }
  .ref-five-service-card .kb-custom-service-icon,
  .ref-five-service-card .kb-custom-service-icon img{
    width:64px!important;
    height:64px!important;
  }
}


/* =========================================================
   V16 — COMPACT "WHO WE WORK WITH" LOGO CLUSTER
   Low-height section based on supplied reference.
   ========================================================= */
.ref-client-wall{
  padding:34px 0 42px!important;
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
  background:#050608!important;
  border-block:1px solid rgba(255,255,255,.05)!important;
}
.ref-client-wall:before{display:none!important}

.kb-client-cluster{
  position:relative;
  width:min(94vw,940px);
  height:330px;
  margin:0 auto;
}

.kb-cluster-title{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  width:220px;
  text-align:center;
  color:#f6f8fb;
  font-family:Georgia,"Times New Roman",serif;
  font-size:2.15rem;
  line-height:.92;
  letter-spacing:-.04em;
  pointer-events:none;
}
.kb-cluster-title span{
  display:block;
  color:#f6f8fb;
}

.kb-client-circle{
  position:absolute;
  width:82px;
  height:82px;
  border-radius:50%;
  background:#22272e;
  border:1px solid rgba(255,255,255,.055);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:17px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  transition:transform .25s ease,background .25s ease,border-color .25s ease;
}
.kb-client-circle img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
.kb-client-circle:hover{
  transform:translateY(-4px);
  background:#29313b;
  border-color:rgba(21,108,221,.32);
}

/* Tight, irregular composition like the reference */
.kb-client-circle.b1{left:2%;top:37%;width:92px;height:92px}
.kb-client-circle.b2{left:11%;top:16%;width:80px;height:80px}
.kb-client-circle.b3{left:13%;top:54%;width:74px;height:74px}
.kb-client-circle.b4{left:23%;top:40%;width:66px;height:66px}
.kb-client-circle.b5{left:28%;top:63%;width:86px;height:86px}
.kb-client-circle.b6{left:36%;top:30%;width:70px;height:70px}

.kb-client-circle.b7{right:36%;top:60%;width:82px;height:82px}
.kb-client-circle.b8{right:28%;top:31%;width:68px;height:68px}
.kb-client-circle.b9{right:22%;top:55%;width:76px;height:76px}
.kb-client-circle.b10{right:12%;top:18%;width:86px;height:86px}
.kb-client-circle.b11{right:5%;top:43%;width:72px;height:72px}
.kb-client-circle.b12{right:1%;top:12%;width:62px;height:62px}

/* Slightly different logo padding for readability */
.kb-client-circle.b5,
.kb-client-circle.b7,
.kb-client-circle.b10{padding:19px}
.kb-client-circle.b4,
.kb-client-circle.b12{padding:13px}

/* Disable the old tall orbit completely if stale markup/CSS exists elsewhere */
.kb-logo-orbit{display:none!important}

/* Tablet */
@media(max-width:820px){
  .ref-client-wall{padding:28px 0 34px!important}
  .kb-client-cluster{
    width:720px;
    height:300px;
    transform:scale(.92);
    transform-origin:center center;
    margin-top:-12px;
    margin-bottom:-12px;
  }
}

/* Mobile: compact, not a giant section */
@media(max-width:600px){
  .ref-client-wall{
    padding:26px 0 30px!important;
  }
  .kb-client-cluster{
    width:560px;
    height:270px;
    left:50%;
    margin-left:-280px;
    transform:scale(.78);
    margin-top:-30px;
    margin-bottom:-30px;
  }
  .kb-cluster-title{
    font-size:1.9rem;
    width:180px;
  }
}


/* =========================================================
   V17 — moving monochrome logos, staircase services,
   capability-style process cards
   ========================================================= */

/* LOGOS — compact 2-row moving strip */
.kb-logo-marquee-section{
  padding:34px 0 40px;
  background:var(--ink);
  overflow:hidden;
  border-block:1px solid rgba(255,255,255,.06);
}
.kb-logo-marquee-head{
  width:min(92%,1120px);
  margin:0 auto 18px;
  text-align:center;
}
.kb-logo-marquee-head h2{
  margin:0 0 5px;
  color:#f7f8fb;
  font-size:clamp(1.45rem,2.3vw,2.2rem);
  letter-spacing:-.04em;
}
.kb-logo-marquee-head p{
  margin:0;
  color:#778397;
  font-size:.82rem;
}
.kb-logo-marquee-stage{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}
.kb-logo-marquee-row{
  overflow:hidden;
  width:100%;
}
.kb-logo-marquee-track{
  display:flex;
  gap:8px;
  width:max-content;
  will-change:transform;
  animation:kbLogoMoveA 28s linear infinite;
}
.kb-logo-marquee-row.row-2 .kb-logo-marquee-track{
  animation-name:kbLogoMoveB;
  animation-duration:32s;
}
.kb-logo-marquee-card{
  width:170px;
  height:62px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:13px 18px;
  border-radius:6px;
  background:#171a1f;
  border:1px solid rgba(255,255,255,.045);
}
.kb-logo-marquee-card img{
  max-width:118px;
  max-height:34px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(1) brightness(0) invert(1);
  opacity:.86;
  mix-blend-mode:screen;
}
.kb-logo-marquee-card:hover img{
  opacity:1;
}
@keyframes kbLogoMoveA{to{transform:translateX(-50%)}}
@keyframes kbLogoMoveB{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* SERVICES — restore clean staircase, 6 cards */
.kb-stair-services{
  padding:96px 0 150px!important;
  background:var(--ink)!important;
}
.kb-stair-services .section-head{
  max-width:760px;
  margin-bottom:48px;
}
.kb-stair-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:start;
}
.kb-stair-card{
  position:relative;
  min-height:335px;
  padding:30px 30px 26px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
  color:#fff;
  overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.kb-stair-card.stair-1,.kb-stair-card.stair-4{transform:translateY(0)}
.kb-stair-card.stair-2,.kb-stair-card.stair-5{transform:translateY(44px)}
.kb-stair-card.stair-3,.kb-stair-card.stair-6{transform:translateY(88px)}
.kb-stair-card:hover{
  border-color:rgba(56,151,255,.36);
  box-shadow:0 22px 46px rgba(21,108,221,.11);
}
.kb-stair-card.stair-1:hover,.kb-stair-card.stair-4:hover{transform:translateY(-6px)}
.kb-stair-card.stair-2:hover,.kb-stair-card.stair-5:hover{transform:translateY(38px)}
.kb-stair-card.stair-3:hover,.kb-stair-card.stair-6:hover{transform:translateY(82px)}
.kb-stair-num{
  position:absolute;
  right:24px;
  top:24px;
  color:#7b8798;
  font:700 .64rem var(--font-mono);
}
.kb-stair-icon{
  width:116px;
  height:116px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 18px;
}
.kb-stair-icon img{
  width:116px;
  height:116px;
  object-fit:contain;
  display:block;
}
.kb-stair-card h3{
  margin:0 0 10px;
  font-size:1.28rem;
  line-height:1.15;
}
.kb-stair-card p{
  margin:0;
  color:#9ca7b5;
  line-height:1.68;
  font-size:.9rem;
}
.kb-stair-link{
  margin-top:auto;
  padding-top:22px;
  color:#43a4ff;
  font-weight:800;
  font-size:.75rem;
}

/* PROCESS — Core Capabilities style */
.kb-capabilities-process{
  padding:96px 0 108px!important;
  background:
    radial-gradient(500px 260px at 30% 20%,rgba(21,108,221,.12),transparent 68%),
    #05060a!important;
}
.kb-capabilities-process .section-head{
  max-width:840px!important;
  margin-bottom:38px!important;
}
.kb-capabilities-process .section-head h2{
  color:#fff!important;
  font-size:clamp(2.5rem,4.6vw,4.8rem)!important;
  line-height:.95!important;
}
.kb-capabilities-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  max-width:none!important;
  margin:0!important;
}
.kb-capabilities-grid:before{display:none!important}
.kb-capability-card{
  position:relative!important;
  min-height:245px!important;
  padding:28px 20px 24px!important;
  background:#050711!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:13px!important;
  box-shadow:none!important;
  transform:none!important;
  overflow:hidden;
}
.kb-capability-card.cap-2{
  background:
    radial-gradient(circle at 65% 12%,rgba(70,165,255,.35),transparent 30%),
    linear-gradient(145deg,#146be0,#0c3fa3)!important;
  border-color:rgba(89,170,255,.65)!important;
  box-shadow:0 16px 38px rgba(21,108,221,.25)!important;
}
.kb-capability-card .ref-step-number{
  position:static!important;
  width:auto!important;
  height:auto!important;
  display:block!important;
  margin:0 0 30px!important;
  padding:0!important;
  background:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:#fff!important;
  font:400 1.45rem/1 var(--font-sans)!important;
}
.kb-capability-card h3{
  margin:0 0 9px!important;
  color:#fff!important;
  font-size:1rem!important;
}
.kb-capability-card p{
  margin:0!important;
  color:#aab2c0!important;
  font-size:.77rem!important;
  line-height:1.45!important;
}
.kb-capability-card.cap-2 p{color:#dce9fb!important}
.kb-cap-star{
  position:absolute;
  right:12px;
  bottom:10px;
  color:#dbe7f5;
  font-size:.78rem;
}

/* responsive */
@media(max-width:1000px){
  .kb-stair-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kb-stair-card:nth-child(n){transform:none!important}
  .kb-stair-card:nth-child(n):hover{transform:translateY(-5px)!important}
  .kb-capabilities-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:680px){
  .kb-logo-marquee-section{padding:28px 0 32px}
  .kb-logo-marquee-card{width:142px;height:56px}
  .kb-logo-marquee-card img{max-width:96px;max-height:30px}
  .kb-stair-services{padding:72px 0 82px!important}
  .kb-stair-grid{grid-template-columns:1fr}
  .kb-stair-card{min-height:300px}
  .kb-stair-icon,.kb-stair-icon img{width:100px;height:100px}
  .kb-capabilities-grid{grid-template-columns:1fr!important}
  .kb-capability-card{min-height:200px!important}
}
@media(prefers-reduced-motion:reduce){
  .kb-logo-marquee-track{animation:none!important}
}


/* =========================================================
   V18 — HOMEPAGE ORDER + STATISTICS
   ========================================================= */
.kb-stats-modern{
  padding:84px 0 98px;
  background:var(--ink);
}
.kb-stats-panel{
  position:relative;
  padding:44px 34px 74px;
  border-radius:20px;
  background:
    radial-gradient(circle at 82% 20%,rgba(36,148,255,.22),transparent 30%),
    linear-gradient(135deg,#123c88 0%,#156CDD 48%,#294fe8 100%);
  overflow:visible;
  box-shadow:0 28px 68px rgba(21,108,221,.17);
}
.kb-stats-head{
  max-width:650px;
  margin:0 auto 38px;
  text-align:center;
}
.kb-stats-head h2{
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(2rem,3.4vw,3.2rem);
  letter-spacing:-.045em;
}
.kb-stats-head p{
  margin:0;
  color:rgba(255,255,255,.74);
  font-size:.88rem;
}
.kb-stats-cards{
  position:absolute;
  left:34px;right:34px;bottom:-52px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}
.kb-stat-card{
  min-height:110px;
  padding:20px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:11px;
  background:#fff;
  box-shadow:0 14px 30px rgba(0,0,0,.10);
}
.kb-stat-card b{
  color:#111827;
  font-size:1.62rem;
  line-height:1;
  margin-bottom:8px;
}
.kb-stat-card span{
  color:#7b8492;
  font-size:.68rem;
  line-height:1.3;
}
.kb-stats-modern + section{padding-top:120px!important}

/* Requested homepage cleanup */
.hero .studio-chips,
.hero .hero-tags,
.hero .service-tags,
.hero .marquee{display:none!important}

@media(max-width:900px){
  .kb-stats-panel{padding-bottom:34px}
  .kb-stats-cards{
    position:relative;left:auto;right:auto;bottom:auto;
    margin-top:28px;
    grid-template-columns:repeat(2,1fr);
  }
  .kb-stats-modern + section{padding-top:84px!important}
}
@media(max-width:560px){
  .kb-stats-modern{padding:64px 0}
  .kb-stats-panel{padding:30px 18px 24px}
  .kb-stats-cards{grid-template-columns:1fr}
  .kb-stat-card{min-height:92px}
}


/* =========================================================
   V19 — FOOTER / CONTACT / BLOG SIDEBAR / NEW VISUALS
   ========================================================= */
.ref-footer .footer-brand img{
  width:285px!important;
  max-width:100%!important;
  height:auto!important;
}
.ref-footer .footer-col li{
  display:flex;
  align-items:center;
  gap:8px;
}
.ref-footer .footer-col li i{
  color:#156CDD!important;
  font-size:1.05rem;
}
.ref-footer .footer-col a{
  transition:color .25s ease;
}
.ref-footer .footer-col a:hover{color:#156CDD!important}
.ref-footer .socials a{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:9px!important;
}
.ref-footer .socials a i{
  font-size:1.2rem;
  color:#156CDD!important;
}

/* New supplied visual system */
.post-thumb img,
.article-hero img,
.service-visual img,
.feature-visual img{
  object-fit:cover;
}

/* Blog index */
.kb-blog-index-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:34px;
  align-items:start;
}
.kb-blog-main-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:20px!important;
}
.kb-blog-sidebar{
  position:sticky;
  top:95px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.kb-side-box{
  padding:24px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
}
.kb-side-box>b,
.kb-side-box h3{
  display:block;
  margin:0 0 10px;
  color:#fff;
  font-size:1rem;
}
.kb-side-box p{
  margin:0;
  color:#8e9aaa;
  font-size:.84rem;
  line-height:1.62;
}
.kb-side-links{
  list-style:none;
  margin:0;
  padding:0;
}
.kb-side-links li+li{border-top:1px solid rgba(255,255,255,.07)}
.kb-side-links a{
  display:flex;
  justify-content:space-between;
  padding:11px 0;
  color:#aab4c2;
  font-size:.83rem;
}
.kb-side-links a:after{content:"→";color:#2494FF}
.kb-side-cta{
  background:
    radial-gradient(circle at 85% 10%,rgba(36,148,255,.22),transparent 34%),
    linear-gradient(145deg,#0d2d58,#091626);
  border-color:rgba(70,158,255,.24);
}
.kb-side-cta .btn{
  margin-top:18px;
  width:100%;
  justify-content:center;
}

/* Single blog */
.blog-single-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 320px!important;
  gap:42px!important;
  max-width:1200px!important;
  align-items:start;
}
.kb-blog-article-main{
  min-width:0;
}
.kb-blog-article-main .toc{
  margin-top:0!important;
}
.kb-blog-article-main h2{
  scroll-margin-top:110px;
}
.kb-blog-article-main img{
  max-width:100%;
  border-radius:14px;
}
.blog-single-layout .kb-blog-sidebar{
  top:90px;
}

/* Blog cards with supplied visuals */
.post-card{
  overflow:hidden;
}
.post-thumb{
  aspect-ratio:16/10;
  overflow:hidden;
}
.post-thumb img{
  width:100%;height:100%;
  transition:transform .4s ease;
}
.post-card:hover .post-thumb img{transform:scale(1.035)}

@media(max-width:980px){
  .kb-blog-index-layout,
  .blog-single-layout{
    grid-template-columns:1fr!important;
  }
  .kb-blog-sidebar{position:relative;top:auto}
  .kb-blog-main-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:650px){
  .kb-blog-main-grid{grid-template-columns:1fr!important}
  .kb-side-box{padding:20px}
  .ref-footer .footer-brand img{width:240px!important}
}


/* =========================================================
   V20 — SERVICES ORBIT / PLANET MOTION
   Inspired by the spatial/orbital treatment seen on Zero Negative.
   This is implemented as an original CSS animation using the
   supplied planet/light SVGs, attached directly to Services.
   ========================================================= */

.kb-services-with-orbit{
  position:relative!important;
  isolation:isolate;
  overflow:visible!important;
  padding-top:132px!important;
}

/* The visual sits above Services and fades into the section. */
.kb-services-orbit{
  position:absolute;
  z-index:0;
  top:-118px;
  left:50%;
  width:min(92vw,1120px);
  height:250px;
  transform:translateX(-50%);
  pointer-events:none;
  overflow:hidden;
  opacity:.95;
  -webkit-mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 62%,
    rgba(0,0,0,.8) 78%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 62%,
    rgba(0,0,0,.8) 78%,
    transparent 100%
  );
}

/* Planet is wide, low, and partially hidden — more integrated than a new section. */
.kb-services-orbit .half-planet{
  position:absolute;
  left:50%;
  bottom:-92px;
  width:min(760px,74vw);
  height:auto;
  transform:translateX(-50%);
  opacity:.42;
  filter:
    brightness(1.15)
    drop-shadow(0 0 18px rgba(21,108,221,.22));
  animation:kbPlanetBreath 8s ease-in-out infinite;
}

/* The light assets orbit on separate ellipses. */
.kb-services-orbit .rotating-img-1,
.kb-services-orbit .rotating-img-2{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin:50% 50%;
  will-change:transform,opacity;
  mix-blend-mode:screen;
}

.kb-services-orbit .rotating-img-1{
  width:430px;
  margin-left:-215px;
  margin-top:-215px;
  opacity:.60;
  animation:kbOrbitPurple 14s linear infinite;
  filter:hue-rotate(205deg) saturate(1.7) brightness(1.2);
}

.kb-services-orbit .rotating-img-2{
  width:350px;
  margin-left:-175px;
  margin-top:-175px;
  opacity:.46;
  animation:kbOrbitGreen 10s linear infinite reverse;
  filter:hue-rotate(190deg) saturate(1.65) brightness(1.18);
}

/* A soft brand-blue atmospheric light, so the SVGs feel native to the site. */
.kb-services-orbit:before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-54px;
  width:min(900px,80vw);
  height:190px;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(36,148,255,.17) 0%,
      rgba(21,108,221,.09) 32%,
      transparent 72%
    );
  filter:blur(8px);
  animation:kbOrbitGlow 5.5s ease-in-out infinite;
}

.kb-services-orbit:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:10px;
  width:min(740px,70vw);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(36,148,255,.42),
    rgba(255,255,255,.18),
    rgba(36,148,255,.42),
    transparent
  );
  box-shadow:0 0 18px rgba(36,148,255,.18);
}

/* Keep actual Services content above the background animation. */
.kb-services-with-orbit > .wrap{
  position:relative;
  z-index:2;
}

@keyframes kbOrbitPurple{
  0%{
    transform:rotate(0deg) translateX(205px) rotate(0deg) scale(.92);
    opacity:.34;
  }
  25%{opacity:.66}
  50%{
    transform:rotate(180deg) translateX(205px) rotate(-180deg) scale(1.06);
    opacity:.46;
  }
  75%{opacity:.72}
  100%{
    transform:rotate(360deg) translateX(205px) rotate(-360deg) scale(.92);
    opacity:.34;
  }
}

@keyframes kbOrbitGreen{
  0%{
    transform:rotate(0deg) translateX(160px) rotate(0deg) scale(1);
    opacity:.34;
  }
  50%{
    transform:rotate(180deg) translateX(160px) rotate(-180deg) scale(.90);
    opacity:.62;
  }
  100%{
    transform:rotate(360deg) translateX(160px) rotate(-360deg) scale(1);
    opacity:.34;
  }
}

@keyframes kbPlanetBreath{
  0%,100%{
    transform:translateX(-50%) translateY(0) scale(1);
    opacity:.38;
  }
  50%{
    transform:translateX(-50%) translateY(-7px) scale(1.015);
    opacity:.50;
  }
}

@keyframes kbOrbitGlow{
  0%,100%{
    opacity:.72;
    transform:translateX(-50%) scaleX(.92);
  }
  50%{
    opacity:1;
    transform:translateX(-50%) scaleX(1.05);
  }
}

/* Slight parallax feel when the section enters hover focus. */
.kb-services-with-orbit:hover .half-planet{
  filter:
    brightness(1.25)
    drop-shadow(0 0 26px rgba(36,148,255,.26));
}

@media(max-width:900px){
  .kb-services-with-orbit{
    padding-top:106px!important;
  }
  .kb-services-orbit{
    top:-88px;
    height:205px;
  }
  .kb-services-orbit .half-planet{
    width:680px;
    max-width:92vw;
    bottom:-78px;
  }
  .kb-services-orbit .rotating-img-1{
    width:340px;
    margin-left:-170px;
    margin-top:-170px;
  }
  .kb-services-orbit .rotating-img-2{
    width:280px;
    margin-left:-140px;
    margin-top:-140px;
  }
  @keyframes kbOrbitPurple{
    0%{transform:rotate(0deg) translateX(155px) rotate(0deg) scale(.92)}
    50%{transform:rotate(180deg) translateX(155px) rotate(-180deg) scale(1.05)}
    100%{transform:rotate(360deg) translateX(155px) rotate(-360deg) scale(.92)}
  }
  @keyframes kbOrbitGreen{
    0%{transform:rotate(0deg) translateX(122px) rotate(0deg)}
    50%{transform:rotate(180deg) translateX(122px) rotate(-180deg) scale(.92)}
    100%{transform:rotate(360deg) translateX(122px) rotate(-360deg)}
  }
}

@media(max-width:620px){
  .kb-services-with-orbit{
    padding-top:82px!important;
  }
  .kb-services-orbit{
    top:-56px;
    height:152px;
    width:100%;
  }
  .kb-services-orbit .half-planet{
    width:520px;
    max-width:120vw;
    bottom:-70px;
    opacity:.32;
  }
  .kb-services-orbit .rotating-img-1{
    width:245px;
    margin-left:-122px;
    margin-top:-122px;
  }
  .kb-services-orbit .rotating-img-2{
    width:190px;
    margin-left:-95px;
    margin-top:-95px;
  }
  @keyframes kbOrbitPurple{
    0%{transform:rotate(0deg) translateX(108px) rotate(0deg)}
    50%{transform:rotate(180deg) translateX(108px) rotate(-180deg) scale(1.04)}
    100%{transform:rotate(360deg) translateX(108px) rotate(-360deg)}
  }
  @keyframes kbOrbitGreen{
    0%{transform:rotate(0deg) translateX(82px) rotate(0deg)}
    50%{transform:rotate(180deg) translateX(82px) rotate(-180deg) scale(.92)}
    100%{transform:rotate(360deg) translateX(82px) rotate(-360deg)}
  }
}

@media(prefers-reduced-motion:reduce){
  .kb-services-orbit .half-planet,
  .kb-services-orbit .rotating-img-1,
  .kb-services-orbit .rotating-img-2,
  .kb-services-orbit:before{
    animation:none!important;
  }
}


/* =========================================================
   V21 — CLEANUP & GLOBAL POLISH
   ========================================================= */

/* Remove the rejected Services orbital decoration completely. */
.project__wrapper-bg.kb-services-orbit,
.kb-services-orbit{
  display:none!important;
}
.kb-services-with-orbit,
.kb-stair-services{
  padding-top:92px!important;
  overflow:hidden!important;
}

/* ---------- Header: compact, aligned and premium ---------- */
.kb-clean-header{
  position:sticky!important;
  top:0;
  z-index:1000;
  height:auto!important;
  padding:10px 0!important;
  background:rgba(5,7,11,.84)!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  box-shadow:0 12px 38px rgba(0,0,0,.18);
}
.kb-clean-header .wrap{
  min-height:62px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:28px!important;
}
.kb-clean-header .nav-logo{
  flex:0 0 auto;
  width:210px!important;
  height:46px!important;
  display:flex!important;
  align-items:center!important;
}
.kb-clean-header .nav-logo img{
  width:100%!important;
  height:100%!important;
  max-width:210px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
.kb-clean-header .nav-menu{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px!important;
}
.kb-clean-header .nav-menu a{
  position:relative;
  padding:12px 0!important;
  font-size:.78rem!important;
  font-weight:700!important;
  letter-spacing:.055em!important;
  color:#aab4c2!important;
  white-space:nowrap;
}
.kb-clean-header .nav-menu a:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:4px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,#156CDD,#2494FF);
  transform:scaleX(0);
  transition:transform .25s ease;
}
.kb-clean-header .nav-menu a:hover,
.kb-clean-header .nav-menu a.active{
  color:#fff!important;
}
.kb-clean-header .nav-menu a:hover:after,
.kb-clean-header .nav-menu a.active:after{
  transform:scaleX(1);
}
.kb-clean-header .nav-right{
  flex:0 0 auto;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
.kb-clean-header .lang-switch{
  height:38px;
  padding:3px!important;
  display:flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.025)!important;
}
.kb-clean-header .lang-switch a,
.kb-clean-header .lang-switch span{
  min-width:31px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:7px;
  font-size:.66rem!important;
  font-weight:800;
}
.kb-clean-header .lang-switch .on{
  color:#fff!important;
  background:linear-gradient(135deg,#156CDD,#2494FF)!important;
}
.kb-header-cta{
  min-height:40px!important;
  padding:0 18px!important;
  border-radius:10px!important;
  box-shadow:0 8px 24px rgba(21,108,221,.22)!important;
}
.kb-clean-header .nav-burger{
  width:42px!important;
  height:42px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.035)!important;
}

/* ---------- All CTA sections use one rocket design ---------- */
.cta-band.kb-rocket-cta{
  position:relative!important;
  min-height:330px!important;
  padding:66px min(10vw,120px)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  overflow:hidden!important;
  text-align:left!important;
  border:1px solid rgba(67,157,255,.24)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 85% 40%,rgba(36,148,255,.20),transparent 29%),
    linear-gradient(135deg,#111820 0%,#0b0d12 55%,#071426 100%)!important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.cta-band.kb-rocket-cta:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:linear-gradient(90deg,black,transparent 76%);
  pointer-events:none;
}
.cta-band.kb-rocket-cta h2,
.cta-band.kb-rocket-cta p,
.cta-band.kb-rocket-cta .hero-actions{
  position:relative;
  z-index:3;
  max-width:680px;
}
.cta-band.kb-rocket-cta h2{
  margin:0 0 12px!important;
  font-size:clamp(2.1rem,4vw,4rem)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
}
.cta-band.kb-rocket-cta p{
  margin:0!important;
  color:#9da8b7!important;
  font-size:1rem!important;
  line-height:1.65!important;
}
.cta-band.kb-rocket-cta .hero-actions{
  margin-top:26px!important;
}
.cta-band.kb-rocket-cta .kb-rocket-art{
  position:absolute!important;
  z-index:2;
  right:-20px!important;
  bottom:-66px!important;
  width:min(42%,480px)!important;
  max-height:390px!important;
  object-fit:contain!important;
  opacity:.96!important;
  filter:drop-shadow(0 18px 48px rgba(21,108,221,.30))!important;
  pointer-events:none!important;
}
.cta-band.kb-rocket-cta > i,
.cta-band.kb-rocket-cta > .ph-code,
.cta-band.kb-rocket-cta > .ph-brackets-angle{
  display:none!important;
}

/* ---------- Personalized WhatsApp ---------- */
.wa-float{
  right:20px!important;
  bottom:20px!important;
  width:auto!important;
  min-width:58px!important;
  height:58px!important;
  padding:0 17px!important;
  gap:10px!important;
  border-radius:18px!important;
  background:
    linear-gradient(135deg,#156CDD,#2494FF)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:
    0 16px 38px rgba(21,108,221,.34),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
  font-size:1.55rem!important;
}
.wa-float i{
  position:relative;
  z-index:2;
}
.wa-float .kb-wa-label{
  position:relative;
  z-index:2;
  display:block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.02em;
}
.wa-float:before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:13px;
  background:rgba(4,12,25,.12);
  pointer-events:none;
}
.wa-float::after{
  inset:-4px!important;
  border:1px solid rgba(36,148,255,.40)!important;
  border-radius:22px!important;
  animation:kb-wa-brand-pulse 2.7s ease-out infinite!important;
}
.wa-float:hover{
  transform:translateY(-4px) scale(1.02)!important;
  box-shadow:0 20px 48px rgba(21,108,221,.42)!important;
}
@keyframes kb-wa-brand-pulse{
  0%{transform:scale(.96);opacity:.75}
  75%,100%{transform:scale(1.18);opacity:0}
}

/* ---------- General visual cleanup ---------- */
.work-card,
.post-card,
.quote-card,
.faq-item,
.kb-stair-card,
.kb-capability-card,
.kb-stat-card{
  border-color:rgba(255,255,255,.10)!important;
}
.work-card,
.post-card{
  border-radius:16px!important;
  box-shadow:0 18px 50px rgba(0,0,0,.16)!important;
}
.media-card{
  border-radius:20px!important;
  overflow:hidden!important;
  box-shadow:0 24px 65px rgba(0,0,0,.25)!important;
}
.section-head{
  margin-bottom:42px!important;
}
.section-head p{
  max-width:720px;
}
.btn{
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease!important;
}
.btn:hover{
  transform:translateY(-2px);
}
.btn-primary{
  background:linear-gradient(135deg,#156CDD,#2494FF)!important;
}

/* Responsive */
@media(max-width:1080px){
  .kb-clean-header .nav-logo{width:170px!important}
  .kb-clean-header .nav-menu{gap:18px!important}
  .kb-clean-header .nav-menu a{font-size:.7rem!important}
}
@media(max-width:900px){
  .kb-clean-header{
    padding:7px 0!important;
  }
  .kb-clean-header .wrap{
    min-height:56px!important;
  }
  .kb-clean-header .nav-logo{
    width:165px!important;
    height:40px!important;
  }
  .kb-clean-header .nav-menu{
    justify-content:flex-start!important;
  }
  .kb-header-cta{
    display:none!important;
  }
  .cta-band.kb-rocket-cta{
    min-height:380px!important;
    padding:48px 34px 190px!important;
    align-items:center!important;
    text-align:center!important;
  }
  .cta-band.kb-rocket-cta .kb-rocket-art{
    right:50%!important;
    transform:translateX(50%)!important;
    bottom:-70px!important;
    width:330px!important;
  }
}
@media(max-width:620px){
  .kb-clean-header .nav-logo{
    width:145px!important;
  }
  .kb-clean-header .lang-switch{
    display:none!important;
  }
  .cta-band.kb-rocket-cta{
    min-height:410px!important;
    padding:40px 22px 180px!important;
    border-radius:18px!important;
  }
  .cta-band.kb-rocket-cta h2{
    font-size:2.05rem!important;
  }
  .cta-band.kb-rocket-cta .hero-actions{
    width:100%;
    flex-direction:column!important;
  }
  .cta-band.kb-rocket-cta .hero-actions .btn{
    width:100%;
    justify-content:center;
  }
  .wa-float{
    min-width:54px!important;
    width:54px!important;
    height:54px!important;
    padding:0!important;
    border-radius:16px!important;
  }
  .wa-float .kb-wa-label{
    display:none!important;
  }
}


/* =========================================================
   V22 — SERVICES ARCHIVE = HOMEPAGE STAIR STYLE
   + cleaner sticky header
   ========================================================= */

/* Dedicated Services page uses the same design language as homepage. */
.kb-services-archive-stair{
  padding:96px 0 150px!important;
  background:var(--ink)!important;
}
.kb-services-archive-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
  align-items:start!important;
}
.kb-archive-stair-card{
  min-height:335px!important;
  height:335px!important;
}
.kb-archive-stair-card:nth-child(3n+1){
  transform:translateY(0)!important;
}
.kb-archive-stair-card:nth-child(3n+2){
  transform:translateY(44px)!important;
}
.kb-archive-stair-card:nth-child(3n+3){
  transform:translateY(88px)!important;
}
.kb-archive-stair-card:nth-child(n+4){
  margin-top:20px!important;
}
.kb-archive-stair-card:nth-child(3n+1):hover{
  transform:translateY(-6px)!important;
}
.kb-archive-stair-card:nth-child(3n+2):hover{
  transform:translateY(38px)!important;
}
.kb-archive-stair-card:nth-child(3n+3):hover{
  transform:translateY(82px)!important;
}
.kb-archive-stair-card .kb-stair-icon,
.kb-archive-stair-card .kb-stair-icon img{
  width:116px!important;
  height:116px!important;
}

/* Header: balanced sizing, true sticky behavior and scroll state. */
.kb-v22-header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  width:100%;
  padding:8px 0!important;
  background:rgba(5,7,11,.78)!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  transition:
    padding .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}
.kb-v22-header .wrap{
  min-height:64px!important;
  gap:24px!important;
}
.kb-v22-header .nav-logo{
  width:184px!important;
  height:43px!important;
  flex:0 0 184px!important;
}
.kb-v22-header .nav-logo img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:left center!important;
}
.kb-v22-header .nav-menu{
  gap:24px!important;
}
.kb-v22-header .nav-menu a{
  padding:11px 0!important;
  font-size:.75rem!important;
  letter-spacing:.045em!important;
}
.kb-v22-header .nav-right{
  gap:10px!important;
}
.kb-v22-header.is-scrolled{
  padding:3px 0!important;
  background:rgba(4,6,10,.94)!important;
  border-color:rgba(36,148,255,.14)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.30)!important;
}
.kb-v22-header.is-scrolled .wrap{
  min-height:56px!important;
}
.kb-v22-header.is-scrolled .nav-logo{
  width:164px!important;
  height:38px!important;
  flex-basis:164px!important;
}
.kb-v22-header .kb-header-cta{
  border-radius:9px!important;
  padding-inline:17px!important;
}

/* Avoid old overrides making the navigation oversized. */
.kb-v22-header.kb-clean-header .nav-logo{
  width:184px!important;
  height:43px!important;
  flex-basis:184px!important;
}
.kb-v22-header.kb-clean-header.is-scrolled .nav-logo{
  width:164px!important;
  height:38px!important;
  flex-basis:164px!important;
}

@media(max-width:1000px){
  .kb-services-archive-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .kb-archive-stair-card:nth-child(n){
    height:auto!important;
    min-height:315px!important;
    transform:none!important;
    margin-top:0!important;
  }
  .kb-archive-stair-card:nth-child(n):hover{
    transform:translateY(-5px)!important;
  }
  .kb-v22-header .nav-logo,
  .kb-v22-header.kb-clean-header .nav-logo{
    width:158px!important;
    height:39px!important;
    flex-basis:158px!important;
  }
}
@media(max-width:680px){
  .kb-services-archive-stair{
    padding:72px 0 82px!important;
  }
  .kb-services-archive-grid{
    grid-template-columns:1fr!important;
  }
  .kb-v22-header{
    padding:5px 0!important;
  }
  .kb-v22-header .wrap{
    min-height:54px!important;
  }
  .kb-v22-header .nav-logo,
  .kb-v22-header.kb-clean-header .nav-logo{
    width:142px!important;
    height:36px!important;
    flex-basis:142px!important;
  }
}

.kb-coded-showcase{padding:104px 0;background:radial-gradient(720px 420px at 82% 34%,rgba(21,108,221,.12),transparent 68%),#06080c;border-block:1px solid rgba(255,255,255,.055)}
.kb-coded-showcase-grid{display:grid;grid-template-columns:.86fr 1.45fr;gap:66px;align-items:center}
.kb-coded-copy h2{margin:12px 0 18px;font-size:clamp(2.2rem,4.5vw,4.4rem);line-height:.98;letter-spacing:-.055em}
.kb-coded-copy p{max-width:560px;color:#97a3b2;line-height:1.75}.kb-coded-hint{margin-top:24px;display:flex;align-items:center;gap:10px;color:#7d8999;font:600 .72rem var(--font-mono)}.kb-coded-hint i{color:#2494FF;font-size:1.15rem}
.kb-coded-browser{min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:#05070a;box-shadow:0 34px 90px rgba(0,0,0,.50);transform:perspective(1400px) rotateY(-2deg)}
.kb-coded-browser-bar{height:50px;padding:0 15px;display:flex;align-items:center;gap:13px;background:linear-gradient(180deg,#15181d,#0b0d11);border-bottom:1px solid rgba(255,255,255,.08)}.kb-coded-browser-bar .dots{display:flex;gap:7px}.kb-coded-browser-bar .dots i{width:8px;height:8px;border-radius:50%;background:#3d4652}.kb-coded-browser-bar .dots i:first-child{background:#ff5f57}.kb-coded-browser-bar .dots i:nth-child(2){background:#febc2e}.kb-coded-browser-bar .dots i:nth-child(3){background:#28c840}
.kb-coded-url{flex:1;max-width:360px;margin:auto;height:28px;padding:0 12px;display:flex;align-items:center;gap:7px;border-radius:7px;background:#05070a;border:1px solid rgba(255,255,255,.08);color:#798596;font:500 .62rem var(--font-mono)}.kb-coded-url i{color:#44ca79}.kb-coded-live{display:flex;align-items:center;gap:6px;color:#758192;font:700 .56rem var(--font-mono);letter-spacing:.08em}.kb-coded-live i{width:6px;height:6px;border-radius:50%;background:#38d67a;box-shadow:0 0 10px #38d67a}
.kb-coded-viewport{position:relative;height:520px;overflow:hidden;background:#070a0e}.kb-coded-track{display:flex;flex-direction:column;will-change:transform;animation:kbCodedScroll 26s linear infinite}.kb-coded-browser:hover .kb-coded-track,.kb-coded-browser:hover .kb-coded-scrollbar i{animation-play-state:paused}@keyframes kbCodedScroll{to{transform:translateY(-50%)}}
.kb-demo-site{background:#070a0e;color:#f7f9fc;font-family:Inter,Arial,sans-serif}.kb-demo-nav{height:52px;padding:0 25px;display:flex;align-items:center;gap:20px;background:#06090d;border-bottom:1px solid rgba(255,255,255,.06)}.kb-demo-nav strong{font-size:.72rem}.kb-demo-nav strong span{color:#4da8ff}.kb-demo-nav>div{flex:1;display:flex;justify-content:center;gap:18px}.kb-demo-nav i{font-style:normal;color:#667387;font-size:.43rem;font-weight:800}.kb-demo-nav>b{padding:7px 11px;border-radius:999px;background:#156CDD;font-size:.47rem}
.kb-demo-hero{position:relative;min-height:305px;padding:48px 38px;overflow:hidden;background:radial-gradient(circle at 78% 34%,rgba(36,148,255,.19),transparent 31%),linear-gradient(135deg,#090d13,#081321 68%,#0c294d)}.kb-demo-hero small,.kb-demo-block small,.kb-demo-cta small{color:#52a9ff;font-size:.49rem;font-weight:800;letter-spacing:.12em}.kb-demo-hero h4{position:relative;z-index:2;max-width:410px;margin:11px 0 13px;font-size:2.05rem;line-height:.96;letter-spacing:-.055em}.kb-demo-hero h4 span{color:#4da8ff}.kb-demo-hero p{position:relative;z-index:2;max-width:370px;color:#8f9daf;font-size:.64rem;line-height:1.58}.kb-demo-hero>a,.kb-demo-cta>a{position:relative;z-index:2;display:inline-block;margin-top:16px;padding:9px 13px;border-radius:999px;background:#156CDD;color:#fff;font-size:.51rem;font-weight:800}
.kb-demo-orbit{position:absolute;right:36px;top:62px;width:170px;height:170px;border:1px solid rgba(75,168,255,.20);border-radius:50%}.kb-demo-orbit:before,.kb-demo-orbit:after{content:"";position:absolute;border:1px solid rgba(75,168,255,.15);border-radius:50%;inset:30px}.kb-demo-orbit:after{inset:60px}.kb-demo-orbit span,.kb-demo-orbit em,.kb-demo-orbit strong{position:absolute;display:grid;place-items:center;border-radius:50%;background:#0e1c2e;border:1px solid rgba(91,174,255,.34);font-size:.58rem;font-style:normal}.kb-demo-orbit span{width:43px;height:43px;right:-5px;top:32px;color:#55acff}.kb-demo-orbit em{width:37px;height:37px;left:18px;bottom:5px}.kb-demo-orbit strong{width:34px;height:34px;left:20px;top:24px;color:#67b5ff}
.kb-demo-strip{height:46px;display:flex;align-items:center;justify-content:space-around;border-block:1px solid rgba(255,255,255,.055);background:#080b10}.kb-demo-strip span{color:#566579;font-size:.41rem;font-weight:800;letter-spacing:.09em}.kb-demo-block{padding:38px;background:#090c11}.kb-demo-block.alt{background:#07090d}.kb-demo-block h5,.kb-demo-cta h5{margin:8px 0 20px;font-size:1.3rem;line-height:1;letter-spacing:-.04em}
.kb-demo-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.kb-demo-cards article{min-height:95px;padding:13px;border-radius:8px;border:1px solid rgba(255,255,255,.07);background:#0d1219}.kb-demo-cards article>i{display:block;color:#4fa9ff;font-size:1rem;margin-bottom:12px}.kb-demo-cards b{display:block;font-size:.56rem}.kb-demo-cards span{display:block;color:#718095;font-size:.42rem;margin-top:3px}
.kb-demo-projects{display:grid;grid-template-columns:1fr 1fr;gap:10px}.kb-demo-projects article{overflow:hidden;padding-bottom:10px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:#0c1016}.kb-demo-projects .thumb{height:78px}.kb-demo-projects .t1{background:linear-gradient(145deg,rgba(21,108,221,.34),rgba(6,10,15,.15)),repeating-linear-gradient(90deg,transparent 0 18px,rgba(255,255,255,.035) 18px 19px)}.kb-demo-projects .t2{background:radial-gradient(circle at 70% 25%,rgba(76,171,255,.38),transparent 23%),#0d1724}.kb-demo-projects b,.kb-demo-projects span{display:block;padding:0 10px}.kb-demo-projects b{font-size:.56rem;margin-top:8px}.kb-demo-projects span{font-size:.4rem;color:#738195;margin-top:2px}
.kb-demo-block.seo{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:20px;background:linear-gradient(135deg,#08101a,#07111f)}.kb-demo-block.seo p{color:#76879b;font-size:.46rem}.kb-demo-bars{height:92px;position:relative;display:flex;align-items:flex-end;gap:7px;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,.07)}.kb-demo-bars i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(#42a4ff,#156CDD)}.kb-demo-bars i:nth-child(1){height:24%}.kb-demo-bars i:nth-child(2){height:42%}.kb-demo-bars i:nth-child(3){height:67%}.kb-demo-bars i:nth-child(4){height:92%}.kb-demo-bars b{position:absolute;right:10px;top:7px;color:#4da8ff;font-size:.55rem}.kb-demo-cta{text-align:center;padding:46px 30px;background:#080b10}.kb-demo-cta h5{font-size:1.4rem}
.kb-coded-scrollbar{position:absolute;right:7px;top:10px;bottom:10px;width:3px;border-radius:4px;background:rgba(255,255,255,.06)}.kb-coded-scrollbar i{display:block;width:100%;height:20%;border-radius:4px;background:linear-gradient(#2494FF,#156CDD);animation:kbCodedThumb 6.5s ease-in-out infinite}@keyframes kbCodedThumb{0%{transform:translateY(0)}50%{transform:translateY(390%)}100%{transform:translateY(0)}}
@media(max-width:1000px){.kb-coded-showcase-grid{grid-template-columns:1fr;gap:38px}.kb-coded-browser{transform:none}}@media(max-width:680px){.kb-coded-showcase{padding:74px 0}.kb-coded-viewport{height:420px}.kb-demo-nav>div{display:none}.kb-demo-hero{padding:35px 23px;min-height:270px}.kb-demo-hero h4{font-size:1.55rem;max-width:270px}.kb-demo-orbit{width:120px;height:120px;right:15px;top:90px;opacity:.72}.kb-demo-block{padding:28px 22px}.kb-demo-cards,.kb-demo-projects,.kb-demo-block.seo{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.kb-coded-track,.kb-coded-scrollbar i{animation:none!important}}


/* =========================================================
   V24 — TESTIMONIALS, PROJECT ARCHIVE, CASE STUDIES, RESPONSIVE
   ========================================================= */

/* Testimonials */
.kb-testimonials-section{
  padding:96px 0!important;
  background:
    radial-gradient(600px 300px at 50% 0,rgba(21,108,221,.08),transparent 68%),
    var(--ink)!important;
}
.kb-testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.kb-testimonial-card{
  min-height:330px;
  padding:28px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.034),rgba(255,255,255,.012));
  box-shadow:0 22px 55px rgba(0,0,0,.18);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.kb-testimonial-card:hover{
  transform:translateY(-6px);
  border-color:rgba(36,148,255,.30);
  box-shadow:0 28px 68px rgba(21,108,221,.12);
}
.kb-testimonial-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:26px;
}
.kb-testimonial-logo{
  width:124px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.kb-testimonial-logo img{
  max-width:100%;
  max-height:48px;
  object-fit:contain;
}
.kb-testimonial-stars{
  color:#2494FF;
  font-size:.78rem;
  letter-spacing:.08em;
}
.kb-testimonial-card>p{
  margin:0;
  color:#c3cad4;
  font-size:1rem;
  line-height:1.75;
}
.kb-testimonial-footer{
  margin-top:auto;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.08);
}
.kb-testimonial-footer b{
  display:block;
  color:#fff;
  font-size:.92rem;
}
.kb-testimonial-footer span{
  display:block;
  margin-top:4px;
  color:#748194;
  font-size:.73rem;
}

/* Project archive */
.kb-project-archive{
  padding:76px 0 110px!important;
  background:var(--ink);
}
.kb-project-intro{
  max-width:800px;
  margin-bottom:48px;
}
.kb-project-intro h2{
  margin:0 0 14px;
  font-size:clamp(2.2rem,4.5vw,4.5rem);
  line-height:.98;
  letter-spacing:-.055em;
}
.kb-project-intro p{
  margin:0;
  color:#929eae;
  line-height:1.75;
}
.kb-project-list{
  display:flex;
  flex-direction:column;
  gap:28px;
}
.kb-project-feature{
  min-height:430px;
  display:grid;
  grid-template-columns:1.35fr 1fr;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:#0b0e13;
  box-shadow:0 26px 70px rgba(0,0,0,.22);
  transition:transform .3s ease,border-color .3s ease;
}
.kb-project-feature:nth-child(even){
  grid-template-columns:1fr 1.35fr;
}
.kb-project-feature:nth-child(even) .kb-project-feature-visual{order:2}
.kb-project-feature:hover{
  transform:translateY(-5px);
  border-color:rgba(36,148,255,.28);
}
.kb-project-feature-visual{
  min-height:430px;
  overflow:hidden;
  background:#0d1219;
}
.kb-project-feature-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.kb-project-feature:hover .kb-project-feature-visual img{transform:scale(1.025)}
.kb-project-feature-info{
  position:relative;
  padding:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.kb-project-number{
  position:absolute;
  top:28px;
  right:30px;
  color:#526174;
  font:700 .66rem var(--font-mono);
}
.kb-project-feature-info h3{
  margin:18px 0 14px;
  font-size:clamp(1.8rem,3vw,3rem);
  letter-spacing:-.045em;
}
.kb-project-feature-info>p{
  margin:0;
  color:#9aa5b4;
  line-height:1.72;
}
.kb-project-detail-line{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#6f7d90;
  font-size:.72rem;
}
.kb-project-feature .link-arrow{
  margin-top:24px;
  color:#2494FF;
}

/* Single project */
.kb-case-hero{
  padding-bottom:72px!important;
}
.kb-case-content{
  padding:72px 0 110px!important;
}
.kb-case-content>.wrap{
  max-width:1180px!important;
}
.kb-case-summary{
  margin-bottom:54px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  overflow:hidden;
  background:#0b0e13;
}
.kb-case-summary>div{
  min-height:110px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.kb-case-summary>div+div{border-left:1px solid rgba(255,255,255,.08)}
.kb-case-summary span{
  margin-bottom:7px;
  color:#2494FF;
  font:700 .62rem var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.kb-case-summary b{
  color:#f4f7fb;
  font-size:.87rem;
  line-height:1.45;
}
.kb-case-content .case-section{
  display:grid!important;
  grid-template-columns:240px minmax(0,1fr)!important;
  gap:48px!important;
  padding:46px 0!important;
}
.kb-case-content .case-section h2{
  position:sticky;
  top:100px;
  align-self:start;
  font-size:1.65rem!important;
}
.kb-case-content .case-section .body{
  max-width:780px;
}
.kb-case-content .case-section p{
  color:#a9b2bf;
  font-size:1rem;
  line-height:1.82;
}
.kb-case-gallery{
  margin:42px 0 58px;
  display:grid;
  grid-template-columns:1.3fr .7fr;
  grid-template-rows:310px 310px;
  gap:18px;
}
.kb-case-shot{
  position:relative;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:#0b0e13;
}
.kb-case-shot.shot-1{grid-row:1 / span 2}
.kb-case-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.kb-case-shot:hover img{transform:scale(1.025)}
.kb-case-shot figcaption{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  padding:10px 12px;
  border-radius:9px;
  color:#dce4ee;
  background:rgba(4,7,12,.78);
  backdrop-filter:blur(10px);
  font-size:.72rem;
}
.case-results{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.result-box{
  min-height:130px;
  border-radius:14px!important;
}

/* Global responsive hardening */
img,video,svg{max-width:100%}
body{overflow-x:hidden}
.wrap{width:min(calc(100% - 40px),var(--wrap,1200px));margin-inline:auto}
.grid-3,.grid-4,.footer-grid,.media-split,.hero-grid{min-width:0}
input,textarea,select,button{max-width:100%}

@media(max-width:1100px){
  .kb-testimonials-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kb-project-feature,
  .kb-project-feature:nth-child(even){grid-template-columns:1fr 1fr}
  .kb-project-feature:nth-child(even) .kb-project-feature-visual{order:0}
  .kb-project-feature-info{padding:34px}
  .kb-case-summary{grid-template-columns:repeat(2,1fr)}
  .kb-case-summary>div:nth-child(3){border-left:0;border-top:1px solid rgba(255,255,255,.08)}
  .kb-case-summary>div:nth-child(4){border-top:1px solid rgba(255,255,255,.08)}
}
@media(max-width:900px){
  .media-split,.media-split.rev{grid-template-columns:1fr!important}
  .media-split.rev .media-card{order:0!important}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .kb-project-feature,
  .kb-project-feature:nth-child(even){grid-template-columns:1fr}
  .kb-project-feature:nth-child(even) .kb-project-feature-visual{order:0}
  .kb-project-feature-visual{min-height:360px}
  .kb-case-content .case-section{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .kb-case-content .case-section h2{
    position:static;
  }
  .kb-case-gallery{
    grid-template-columns:1fr 1fr;
    grid-template-rows:420px 260px;
  }
  .kb-case-shot.shot-1{grid-column:1 / span 2;grid-row:1}
}
@media(max-width:680px){
  .wrap{width:min(calc(100% - 28px),var(--wrap,1200px))}
  section{padding-left:0!important;padding-right:0!important}
  .hero h1,.page-hero h1,.case-hero h1{overflow-wrap:anywhere}
  .hero-actions{flex-direction:column!important;align-items:stretch!important}
  .hero-actions .btn{width:100%;justify-content:center}
  .kb-testimonials-grid{grid-template-columns:1fr}
  .kb-testimonial-card{min-height:auto}
  .kb-project-feature-visual{min-height:260px}
  .kb-project-feature-info{padding:28px 22px}
  .kb-project-number{top:20px;right:22px}
  .kb-case-summary{grid-template-columns:1fr}
  .kb-case-summary>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.08)}
  .kb-case-gallery{
    display:flex;
    flex-direction:column;
  }
  .kb-case-shot{height:260px}
  .case-results{grid-template-columns:1fr!important}
  .footer-grid{grid-template-columns:1fr!important}
  .nav-menu{max-height:calc(100vh - 70px);overflow-y:auto}
  .post-card,.work-card,.service-card{min-width:0}
}


/* =========================================================
   V25 — ABOUT HERO + PREMIUM CASE META
   ========================================================= */

/* ABOUT HERO */
.kb-about-hero{
  position:relative;
  min-height:760px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:
    radial-gradient(circle at 70% 24%,rgba(36,148,255,.17),transparent 24%),
    linear-gradient(180deg,#05070a 0%,#070a0f 70%,#090c12 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.kb-about-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,transparent,black 30%,black 100%);
  pointer-events:none;
}
.kb-about-giant-text{
  position:absolute;
  inset:28px 0 auto;
  z-index:0;
  display:flex;
  justify-content:center;
  gap:3vw;
  color:rgba(255,255,255,.045);
  font-size:clamp(8rem,19vw,22rem);
  font-weight:900;
  line-height:.74;
  letter-spacing:-.085em;
  white-space:nowrap;
  pointer-events:none;
}
.kb-about-giant-text span:last-child{
  transform:translateY(1.5vw);
}
.kb-about-hero-wrap{
  position:relative;
  z-index:2;
  min-height:760px;
  display:grid;
  grid-template-columns:1fr 1.05fr 1fr;
  align-items:end;
  gap:24px;
}
.kb-about-seo-copy{
  align-self:center;
  padding:120px 0 72px;
}
.kb-about-seo-copy .breadcrumbs{
  margin-bottom:28px;
}
.kb-about-seo-copy h1{
  margin:14px 0 18px;
  font-size:clamp(2.4rem,4.7vw,5rem);
  line-height:.95;
  letter-spacing:-.06em;
}
.kb-about-seo-copy p{
  max-width:520px;
  margin:0;
  color:#98a4b4;
  font-size:1rem;
  line-height:1.78;
}
.kb-about-portrait-wrap{
  position:relative;
  height:680px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.kb-about-portrait{
  position:relative;
  z-index:2;
  width:min(100%,520px);
  max-height:680px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 28px 55px rgba(0,0,0,.55));
}
.kb-about-glow{
  position:absolute;
  left:50%;
  bottom:25px;
  width:390px;
  height:390px;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(36,148,255,.26),rgba(21,108,221,.08) 42%,transparent 72%);
  filter:blur(6px);
}
.kb-about-signature-block{
  align-self:end;
  padding:0 0 74px 20px;
}
.kb-about-signature{
  margin-bottom:16px;
  color:#f8fbff;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:clamp(2.4rem,4.4vw,4.8rem);
  line-height:.9;
  transform:rotate(-4deg);
  text-shadow:0 0 30px rgba(36,148,255,.12);
}
.kb-about-signature-block>p{
  max-width:420px;
  margin:0;
  color:#b2bcc8;
  font-size:.95rem;
  line-height:1.72;
}
.kb-about-role{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.kb-about-role span{
  padding:8px 11px;
  border:1px solid rgba(36,148,255,.20);
  border-radius:999px;
  color:#89c8ff;
  background:rgba(21,108,221,.07);
  font:700 .62rem var(--font-mono);
}
.kb-about-story{
  padding-top:96px!important;
}
.kb-about-story-wrap{
  position:relative;
}

/* CASE STUDY META */
.kb-case-meta-premium{
  margin-top:34px!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  border:0!important;
  background:transparent!important;
}
.kb-case-meta-item{
  position:relative;
  min-height:138px;
  padding:24px 22px 22px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:
    radial-gradient(circle at 86% 12%,rgba(36,148,255,.16),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.kb-case-meta-item:hover{
  transform:translateY(-4px);
  border-color:rgba(36,148,255,.28);
  box-shadow:0 18px 42px rgba(21,108,221,.10);
}
.kb-case-meta-item>i{
  position:absolute;
  top:20px;
  left:20px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#49a8ff;
  background:rgba(21,108,221,.11);
  border:1px solid rgba(36,148,255,.16);
  font-size:1.15rem;
}
.kb-case-meta-label{
  margin:0 0 8px!important;
  color:#64738a!important;
  font:700 .58rem var(--font-mono)!important;
  text-transform:uppercase!important;
  letter-spacing:.11em!important;
}
.kb-case-meta-value{
  color:#f7f9fc!important;
  font-size:.88rem!important;
  line-height:1.5!important;
}
.kb-case-meta-item:last-child{
  grid-column:span 1;
}
.kb-case-meta-item:last-child .kb-case-meta-value{
  color:#a8d6ff!important;
}

/* Responsive */
@media(max-width:1080px){
  .kb-about-hero{
    min-height:auto;
  }
  .kb-about-hero-wrap{
    min-height:720px;
    grid-template-columns:1fr 1fr;
  }
  .kb-about-seo-copy{
    padding-bottom:60px;
  }
  .kb-about-portrait-wrap{
    grid-column:2;
    grid-row:1 / span 2;
    height:650px;
  }
  .kb-about-signature-block{
    grid-column:1;
    padding:0 0 60px;
  }
  .kb-about-giant-text{
    font-size:20vw;
  }
  .kb-case-meta-premium{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:760px){
  .kb-about-hero{
    padding-top:32px;
  }
  .kb-about-hero-wrap{
    min-height:auto;
    grid-template-columns:1fr;
    align-items:start;
  }
  .kb-about-giant-text{
    top:62px;
    flex-direction:column;
    align-items:center;
    gap:0;
    font-size:30vw;
    line-height:.72;
  }
  .kb-about-giant-text span:last-child{
    transform:none;
  }
  .kb-about-seo-copy{
    padding:86px 0 20px;
    text-align:center;
  }
  .kb-about-seo-copy p{
    margin-inline:auto;
  }
  .kb-about-portrait-wrap{
    grid-column:1;
    grid-row:auto;
    height:520px;
  }
  .kb-about-portrait{
    max-height:520px;
  }
  .kb-about-signature-block{
    grid-column:1;
    padding:0 0 56px;
    text-align:center;
  }
  .kb-about-signature-block>p{
    margin-inline:auto;
  }
  .kb-about-role{
    justify-content:center;
  }
}
@media(max-width:560px){
  .kb-about-hero-wrap{
    width:min(calc(100% - 24px),var(--wrap,1200px));
  }
  .kb-about-seo-copy h1{
    font-size:2.45rem;
  }
  .kb-about-portrait-wrap{
    height:430px;
  }
  .kb-about-portrait{
    max-height:430px;
  }
  .kb-about-signature{
    font-size:3rem;
  }
  .kb-case-meta-premium{
    grid-template-columns:1fr!important;
  }
  .kb-case-meta-item{
    min-height:126px;
  }
}


/* =========================================================
   V26 — CORRECT ABOUT PAGE REDESIGN
   ========================================================= */
.kb-about-editorial-hero{
  position:relative;
  min-height:820px;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  background:
    radial-gradient(circle at 52% 44%,rgba(36,148,255,.13),transparent 28%),
    linear-gradient(180deg,#05070a,#080a0f);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.kb-about-wordmark{
  position:absolute;
  inset:36px 0 auto;
  display:flex;
  justify-content:center;
  gap:1.2vw;
  color:rgba(255,255,255,.06);
  font-size:clamp(9rem,19vw,21rem);
  line-height:.73;
  font-weight:900;
  letter-spacing:-.095em;
  pointer-events:none;
  user-select:none;
}
.kb-about-wordmark span:last-child{transform:translateY(2.2vw)}
.kb-about-editorial-grid{
  position:relative;
  z-index:2;
  min-height:820px;
  display:grid;
  grid-template-columns:1fr 1.06fr 1fr;
  gap:34px;
  align-items:end;
}
.kb-about-left{
  align-self:center;
  padding:105px 0 60px;
}
.kb-about-left .crumbs{margin-bottom:30px}
.kb-about-left h1{
  max-width:510px;
  margin:15px 0 20px;
  font-size:clamp(2.6rem,4.6vw,5rem);
  line-height:.95;
  letter-spacing:-.06em;
}
.kb-about-left .lead{
  max-width:530px;
  color:#9da8b6;
  font-size:1rem;
  line-height:1.78;
}
.kb-about-mini-stats{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.kb-about-mini-stats div{
  padding:15px 14px;
  border-top:1px solid rgba(255,255,255,.10);
}
.kb-about-mini-stats b{
  display:block;
  color:#fff;
  font-size:1.25rem;
}
.kb-about-mini-stats span{
  color:#667386;
  font-size:.63rem;
}
.kb-about-person{
  position:relative;
  height:720px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.kb-about-person-img{
  position:relative;
  z-index:2;
  max-width:520px;
  max-height:720px;
  width:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 25px 50px rgba(0,0,0,.55));
}
.kb-about-person-glow{
  position:absolute;
  left:50%;
  bottom:40px;
  width:410px;
  height:410px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(36,148,255,.22),rgba(21,108,221,.07) 45%,transparent 72%);
}
.kb-about-right{
  padding:0 0 72px;
}
.kb-about-signature{
  margin-bottom:24px;
  color:#fff;
  font-family:"Segoe Script","Brush Script MT",cursive;
  font-size:clamp(2.8rem,4.4vw,5rem);
  line-height:.9;
  transform:rotate(-5deg);
}
.kb-about-right p{
  max-width:420px;
  margin:0 0 14px;
  color:#b0b9c6;
  line-height:1.7;
}
.kb-about-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.kb-about-tags span{
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(36,148,255,.19);
  background:rgba(21,108,221,.07);
  color:#91ccff;
  font:700 .61rem var(--font-mono);
}
.kb-about-scroll-note{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:4;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  align-items:center;
  color:#59677a;
  font-size:.65rem;
}
.kb-about-scroll-note i{color:#2494FF}

/* Story */
.kb-about-story-v26{padding:110px 0;background:#07090d}
.kb-about-story-layout{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:start;
}
.kb-about-story-title h2{
  margin-top:14px;
  font-size:clamp(2.4rem,4vw,4.2rem);
  line-height:.98;
  letter-spacing:-.05em;
}
.kb-about-story-copy p{
  margin:0 0 20px;
  color:#a7b0bd;
  font-size:1.02rem;
  line-height:1.86;
}
.kb-about-principles{
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.kb-about-principles article{
  position:relative;
  min-height:245px;
  padding:24px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008));
}
.kb-about-principles article>span{
  position:absolute;
  top:20px;right:20px;
  color:#4f5c6e;
  font:700 .62rem var(--font-mono);
}
.kb-about-principles i{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:11px;
  background:rgba(21,108,221,.10);
  color:#2494FF;
  font-size:1.2rem;
}
.kb-about-principles h3{
  margin:42px 0 10px;
  font-size:1rem;
}
.kb-about-principles p{
  color:#7f8a99;
  font-size:.78rem;
  line-height:1.65;
}

/* Capabilities */
.kb-about-capabilities-v26{
  padding:110px 0;
  background:
    radial-gradient(circle at 82% 50%,rgba(21,108,221,.10),transparent 35%),
    #05070a;
}
.kb-about-capabilities-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:70px;
  align-items:center;
}
.kb-about-capabilities-copy h2{
  margin:14px 0 18px;
  font-size:clamp(2.5rem,4vw,4.3rem);
  line-height:.98;
}
.kb-about-capabilities-copy p{
  max-width:520px;
  color:#95a1b1;
  line-height:1.75;
}
.kb-about-capabilities-copy .btn{margin-top:24px}
.kb-about-skill-list{
  border-top:1px solid rgba(255,255,255,.09);
}
.kb-about-skill-list>div{
  min-height:78px;
  display:grid;
  grid-template-columns:55px 1fr 40px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.kb-about-skill-list b{
  color:#485668;
  font:700 .62rem var(--font-mono);
}
.kb-about-skill-list span{
  color:#ecf1f7;
  font-size:1.12rem;
  font-weight:700;
}
.kb-about-skill-list i{
  color:#2494FF;
  font-size:1.25rem;
}

/* Projects proof */
.kb-about-proof-v26{padding:110px 0;background:#080a0e}
.kb-about-proof-grid{
  margin-top:46px;
  border-top:1px solid rgba(255,255,255,.09);
}
.kb-about-proof-grid a{
  min-height:110px;
  display:grid;
  grid-template-columns:70px 1fr 1fr 45px;
  gap:20px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.09);
  transition:padding .25s ease,background .25s ease;
}
.kb-about-proof-grid a:hover{
  padding-inline:16px;
  background:rgba(21,108,221,.05);
}
.kb-about-proof-grid a>span{
  color:#4c5a6d;
  font:700 .62rem var(--font-mono);
}
.kb-about-proof-grid strong{
  color:#fff;
  font-size:1.15rem;
}
.kb-about-proof-grid small{
  color:#718094;
}
.kb-about-proof-grid i{
  color:#2494FF;
  font-size:1.15rem;
}

/* Responsive */
@media(max-width:1080px){
  .kb-about-editorial-grid{
    grid-template-columns:1fr 1fr;
    min-height:760px;
  }
  .kb-about-person{
    grid-column:2;
    grid-row:1 / span 2;
    height:680px;
  }
  .kb-about-right{
    grid-column:1;
    padding-bottom:70px;
  }
  .kb-about-wordmark{font-size:20vw}
  .kb-about-principles{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .kb-about-editorial-hero{min-height:auto}
  .kb-about-editorial-grid{
    grid-template-columns:1fr;
    min-height:auto;
    text-align:center;
  }
  .kb-about-wordmark{
    top:90px;
    flex-direction:column;
    align-items:center;
    gap:0;
    font-size:31vw;
  }
  .kb-about-wordmark span:last-child{transform:none}
  .kb-about-left{
    padding:88px 0 10px;
  }
  .kb-about-left h1,
  .kb-about-left .lead{margin-inline:auto}
  .kb-about-mini-stats{max-width:520px;margin-inline:auto;margin-top:28px}
  .kb-about-person{
    grid-column:1;
    grid-row:auto;
    height:540px;
  }
  .kb-about-person-img{max-height:540px}
  .kb-about-right{
    grid-column:1;
    padding:0 0 75px;
  }
  .kb-about-right p{margin-inline:auto}
  .kb-about-tags{justify-content:center}
  .kb-about-story-layout,
  .kb-about-capabilities-grid{
    grid-template-columns:1fr;
    gap:35px;
  }
  .kb-about-proof-grid a{
    grid-template-columns:50px 1fr 40px;
  }
  .kb-about-proof-grid small{
    grid-column:2;
  }
}
@media(max-width:560px){
  .kb-about-editorial-grid{width:min(calc(100% - 26px),1200px)}
  .kb-about-left h1{font-size:2.55rem}
  .kb-about-mini-stats{grid-template-columns:1fr}
  .kb-about-person{height:430px}
  .kb-about-person-img{max-height:430px}
  .kb-about-signature{font-size:3.2rem}
  .kb-about-principles{grid-template-columns:1fr}
  .kb-about-proof-grid a{
    min-height:126px;
    grid-template-columns:36px 1fr 28px;
    gap:12px;
  }
  .kb-about-skill-list>div{
    grid-template-columns:42px 1fr 32px;
  }
}


/* =========================================================
   V27 — ABOUT PAGE MATCHING REFERENCE COMPOSITION
   ========================================================= */

.kb-about-cover{
  position:relative;
  min-height:880px;
  overflow:hidden;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.03),rgba(0,0,0,.12)),
    #111316;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.kb-about-cover:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 38%,rgba(36,148,255,.10),transparent 30%),
    linear-gradient(to bottom,transparent 56%,rgba(5,7,10,.72) 83%,#080a0e 100%);
}
.kb-about-cover-word{
  position:absolute;
  inset:28px 0 auto;
  display:flex;
  justify-content:center;
  gap:0;
  color:#f7f8fa;
  font-weight:900;
  font-size:clamp(10rem,24vw,27rem);
  line-height:.72;
  letter-spacing:-.11em;
  white-space:nowrap;
  opacity:.97;
  pointer-events:none;
  user-select:none;
}
.kb-about-cover-word span:first-child{
  transform:translateX(3vw);
}
.kb-about-cover-word span:last-child{
  transform:translateX(-3vw);
}

.kb-about-cover-person{
  position:absolute;
  inset:40px 0 0;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  pointer-events:none;
}
.kb-about-cover-img{
  width:min(43vw,570px);
  max-height:760px;
  object-fit:contain;
  object-position:center top;
  margin-top:18px;
  filter:
    drop-shadow(0 20px 35px rgba(0,0,0,.42))
    drop-shadow(0 0 22px rgba(21,108,221,.10));
}
.kb-about-cover-glow{
  position:absolute;
  top:120px;
  left:50%;
  width:520px;
  height:520px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(36,148,255,.12),transparent 68%);
}

.kb-about-cover-bottom{
  position:absolute;
  left:50%;
  bottom:62px;
  z-index:4;
  width:min(760px,calc(100% - 40px));
  transform:translateX(-50%);
  text-align:center;
}
.kb-about-cover-signature{
  margin-bottom:22px;
  color:#fff;
  font-family:"Segoe Script","Brush Script MT",cursive;
  font-size:clamp(3.3rem,6vw,6.8rem);
  line-height:.85;
  letter-spacing:-.04em;
  transform:rotate(-6deg);
  text-shadow:0 4px 18px rgba(0,0,0,.38);
}
.kb-about-cover-copy{
  max-width:650px;
  margin:0 auto;
  padding:0 16px;
}
.kb-about-cover-copy p{
  margin:0 auto 9px;
  color:rgba(255,255,255,.80);
  font-size:.92rem;
  font-style:italic;
  line-height:1.58;
}
.kb-about-cover-tags{
  margin-top:17px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
}
.kb-about-cover-tags span{
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(4,7,11,.48);
  color:#d4deea;
  backdrop-filter:blur(10px);
  font:700 .58rem var(--font-mono);
}
.kb-about-cover-arrow{
  position:absolute;
  z-index:5;
  right:28px;
  bottom:24px;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#07101c;
  background:#e8ecf1;
  font-size:1.25rem;
}

/* ABOUT intro below hero */
.kb-about-intro-v27{
  padding:110px 0;
  background:#07090d;
}
.kb-about-intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:end;
}
.kb-about-intro-title h1{
  margin:14px 0 0;
  font-size:clamp(2.8rem,5vw,5.2rem);
  line-height:.95;
  letter-spacing:-.06em;
}
.kb-about-intro-copy>p{
  margin:0;
  color:#a4aeba;
  font-size:1.08rem;
  line-height:1.82;
}
.kb-about-intro-stats{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.kb-about-intro-stats div{
  min-height:110px;
  padding:22px 20px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
}
.kb-about-intro-stats b{
  display:block;
  color:#fff;
  font-size:1.8rem;
  line-height:1;
}
.kb-about-intro-stats span{
  display:block;
  margin-top:8px;
  color:#6d7b8d;
  font-size:.7rem;
}

/* Process */
.kb-about-story-v27{
  padding:110px 0;
  background:
    radial-gradient(circle at 50% 0,rgba(21,108,221,.08),transparent 35%),
    #05070a;
}
.kb-about-story-head{
  max-width:850px;
  margin-bottom:54px;
}
.kb-about-story-head h2{
  margin:14px 0 16px;
  font-size:clamp(2.5rem,4.6vw,4.8rem);
  line-height:.96;
  letter-spacing:-.055em;
}
.kb-about-story-head p{
  max-width:700px;
  color:#919ead;
  line-height:1.78;
}
.kb-about-process-v27{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.kb-about-process-v27 article{
  position:relative;
  min-height:300px;
  padding:26px 24px 24px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:#080b10;
  overflow:hidden;
}
.kb-about-process-v27 article.featured{
  border-color:rgba(36,148,255,.34);
  background:
    radial-gradient(circle at 75% 12%,rgba(36,148,255,.23),transparent 32%),
    linear-gradient(160deg,#0b2850,#0b1018);
  transform:translateY(-12px);
}
.kb-about-process-v27 article>span{
  position:absolute;
  top:22px;
  right:22px;
  color:#526176;
  font:700 .65rem var(--font-mono);
}
.kb-about-process-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#2494FF;
  background:rgba(21,108,221,.10);
  font-size:1.28rem;
}
.kb-about-process-v27 h3{
  margin:66px 0 10px;
  color:#fff;
  font-size:1.15rem;
}
.kb-about-process-v27 p{
  margin:0;
  color:#7e8997;
  font-size:.78rem;
  line-height:1.7;
}

/* Capabilities */
.kb-about-capabilities-v27{
  padding:110px 0;
  background:#080a0e;
}
.kb-about-capabilities-v27-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
  align-items:start;
}
.kb-about-capabilities-v27-copy{
  position:sticky;
  top:120px;
}
.kb-about-capabilities-v27-copy h2{
  margin:14px 0 18px;
  font-size:clamp(2.5rem,4vw,4.3rem);
  line-height:.97;
  letter-spacing:-.05em;
}
.kb-about-capabilities-v27-copy p{
  max-width:510px;
  color:#929eae;
  line-height:1.76;
}
.kb-about-capabilities-v27-copy .btn{
  margin-top:24px;
}
.kb-about-capability-list{
  border-top:1px solid rgba(255,255,255,.09);
}
.kb-about-capability-list>div{
  min-height:108px;
  display:grid;
  grid-template-columns:58px 1fr 1fr 36px;
  gap:16px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.09);
  transition:padding .25s ease,background .25s ease;
}
.kb-about-capability-list>div:hover{
  padding-inline:14px;
  background:rgba(21,108,221,.045);
}
.kb-about-capability-list b{
  color:#4c5b6f;
  font:700 .62rem var(--font-mono);
}
.kb-about-capability-list span{
  color:#f5f7fa;
  font-size:1.05rem;
  font-weight:700;
}
.kb-about-capability-list small{
  color:#6f7d90;
}
.kb-about-capability-list i{
  color:#2494FF;
  font-size:1rem;
}

/* Projects */
.kb-about-proof-v27{
  padding:110px 0;
  background:#05070a;
}
.kb-about-proof-v27-grid{
  margin-top:42px;
  border-top:1px solid rgba(255,255,255,.09);
}
.kb-about-proof-v27-grid a{
  min-height:112px;
  display:grid;
  grid-template-columns:60px 1fr 40px;
  gap:18px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.09);
  transition:padding .25s ease,background .25s ease;
}
.kb-about-proof-v27-grid a:hover{
  padding-inline:14px;
  background:rgba(21,108,221,.045);
}
.kb-about-proof-v27-grid>a>span{
  color:#4d5b6e;
  font:700 .62rem var(--font-mono);
}
.kb-about-proof-v27-grid strong{
  display:block;
  color:#fff;
  font-size:1.2rem;
}
.kb-about-proof-v27-grid small{
  display:block;
  margin-top:4px;
  color:#738196;
}
.kb-about-proof-v27-grid i{
  color:#2494FF;
  font-size:1.05rem;
}

/* responsive */
@media(max-width:1080px){
  .kb-about-cover{
    min-height:820px;
  }
  .kb-about-cover-word{
    font-size:23vw;
  }
  .kb-about-cover-img{
    width:min(52vw,540px);
  }
  .kb-about-intro-grid,
  .kb-about-capabilities-v27-grid{
    grid-template-columns:1fr;
    gap:42px;
  }
  .kb-about-capabilities-v27-copy{
    position:static;
  }
  .kb-about-process-v27{
    grid-template-columns:repeat(2,1fr);
  }
  .kb-about-process-v27 article.featured{
    transform:none;
  }
}
@media(max-width:760px){
  .kb-about-cover{
    min-height:760px;
  }
  .kb-about-cover-word{
    top:42px;
    flex-direction:column;
    align-items:center;
    font-size:31vw;
    line-height:.68;
  }
  .kb-about-cover-word span:first-child,
  .kb-about-cover-word span:last-child{
    transform:none;
  }
  .kb-about-cover-person{
    top:110px;
  }
  .kb-about-cover-img{
    width:min(78vw,470px);
    max-height:560px;
  }
  .kb-about-cover-bottom{
    bottom:50px;
  }
  .kb-about-cover-copy p{
    font-size:.82rem;
  }
  .kb-about-cover-signature{
    font-size:3.8rem;
  }
  .kb-about-intro-grid{
    grid-template-columns:1fr;
  }
  .kb-about-intro-stats{
    grid-template-columns:1fr;
  }
  .kb-about-process-v27{
    grid-template-columns:1fr;
  }
  .kb-about-capability-list>div{
    grid-template-columns:42px 1fr 32px;
  }
  .kb-about-capability-list small{
    grid-column:2;
    margin-top:-24px;
  }
}
@media(max-width:520px){
  .kb-about-cover{
    min-height:720px;
  }
  .kb-about-cover-img{
    width:92vw;
  }
  .kb-about-cover-bottom{
    width:calc(100% - 20px);
  }
  .kb-about-cover-copy p:nth-of-type(2){
    display:none;
  }
  .kb-about-cover-tags{
    gap:5px;
  }
  .kb-about-cover-tags span{
    font-size:.53rem;
    padding:6px 8px;
  }
  .kb-about-cover-arrow{
    right:12px;
    bottom:12px;
    width:42px;
    height:42px;
  }
}


/* =========================================================
   V28 — CONTACT PAGE
   ========================================================= */
.kb-contact-hero{
  padding:92px 0 62px;
  background:
    radial-gradient(circle at 78% 20%,rgba(36,148,255,.13),transparent 32%),
    linear-gradient(180deg,#06080c,#080a10);
}
.kb-contact-hero-inner{
  max-width:920px;
}
.kb-contact-hero h1{
  margin:16px 0 18px;
  font-size:clamp(3rem,6vw,6.4rem);
  line-height:.92;
  letter-spacing:-.065em;
}
.kb-contact-hero p{
  max-width:700px;
  margin:0;
  color:#9ba6b4;
  font-size:1.05rem;
  line-height:1.75;
}

.kb-contact-cards{
  padding:0 0 36px;
  background:#080a10;
}
.kb-contact-cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.kb-contact-card{
  position:relative;
  min-height:150px;
  padding:22px;
  display:grid;
  grid-template-columns:48px 1fr 24px;
  gap:14px;
  align-items:start;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:
    radial-gradient(circle at 85% 12%,rgba(36,148,255,.15),transparent 30%),
    linear-gradient(180deg,#101421,#0a0d15);
  box-shadow:0 18px 46px rgba(0,0,0,.20);
}
.kb-contact-card-icon{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:12px;
  color:#2494FF;
  background:rgba(21,108,221,.11);
  border:1px solid rgba(36,148,255,.16);
  font-size:1.15rem;
}
.kb-contact-card span{
  display:block;
  color:#6f7d90;
  font:700 .6rem var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.09em;
}
.kb-contact-card strong{
  display:block;
  margin:5px 0 6px;
  color:#fff;
  font-size:.92rem;
}
.kb-contact-card small{
  color:#7d8999;
  line-height:1.55;
}
.kb-contact-card>i{
  color:#2494FF;
  margin-top:3px;
}

.kb-contact-trust{
  overflow:hidden;
  padding:24px 0;
  background:#0a0d14;
  border-block:1px solid rgba(255,255,255,.06);
}
.kb-contact-logo-track{
  overflow:hidden;
}
.kb-contact-logo-row{
  width:max-content;
  display:flex;
  align-items:center;
  gap:64px;
  animation:kbContactLogos 24s linear infinite;
}
.kb-contact-logo-row span{
  color:rgba(255,255,255,.36);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.05em;
  white-space:nowrap;
}
@keyframes kbContactLogos{to{transform:translateX(-50%)}}

.kb-contact-main{
  padding:100px 0;
  background:
    radial-gradient(circle at 90% 45%,rgba(21,108,221,.10),transparent 35%),
    #06080c;
}
.kb-contact-main-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:56px;
  align-items:start;
}
.kb-contact-info h2{
  margin:14px 0 16px;
  font-size:clamp(2.4rem,4vw,4.2rem);
  line-height:.98;
  letter-spacing:-.05em;
}
.kb-contact-info>p{
  color:#929eae;
  line-height:1.78;
}
.kb-contact-socials{
  display:flex;
  gap:9px;
  margin:24px 0 34px;
}
.kb-contact-socials a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  color:#b9c3cf;
  background:#0a0d13;
  font-size:.72rem;
}
.kb-contact-socials i{color:#2494FF}

.kb-contact-map{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:17px;
  background:#0a0d13;
}
.kb-contact-map-head{
  padding:17px 18px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.kb-contact-map-head span{
  color:#fff;
  font-weight:700;
}
.kb-contact-map-head small{
  color:#718094;
}
.kb-contact-map iframe{
  display:block;
  width:100%!important;
  height:310px!important;
  filter:grayscale(.8) invert(.90) contrast(.92) hue-rotate(180deg);
}

.kb-contact-form-card{
  padding:28px;
  border:1px solid rgba(36,148,255,.18);
  border-radius:18px;
  background:
    radial-gradient(circle at 90% 10%,rgba(36,148,255,.16),transparent 30%),
    linear-gradient(180deg,#0e1522,#0a0e17);
  box-shadow:0 28px 75px rgba(0,0,0,.28);
}
.kb-contact-form-head{
  margin-bottom:24px;
}
.kb-contact-form-head span{
  display:block;
  color:#fff;
  font-size:1.25rem;
  font-weight:800;
}
.kb-contact-form-head small{
  display:block;
  margin-top:5px;
  color:#728095;
}
.kb-contact-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.kb-contact-form .field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.kb-contact-form label span{
  display:block;
  margin-bottom:7px;
  color:#8895a6;
  font-size:.65rem;
}
.kb-contact-form input,
.kb-contact-form textarea{
  width:100%;
  padding:14px 15px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:#070a10;
  color:#fff;
  outline:none;
}
.kb-contact-form input:focus,
.kb-contact-form textarea:focus{
  border-color:rgba(36,148,255,.50);
  box-shadow:0 0 0 3px rgba(21,108,221,.08);
}
.kb-contact-form textarea{resize:vertical}
.kb-contact-submit{
  width:100%;
  justify-content:center;
  min-height:48px;
}

.kb-contact-faq{
  padding:90px 0 110px;
  background:#080a0e;
}
.kb-contact-faq .faq-list{
  max-width:900px;
}

@media(max-width:900px){
  .kb-contact-cards-grid{grid-template-columns:1fr}
  .kb-contact-main-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .kb-contact-hero{padding:72px 0 46px}
  .kb-contact-hero h1{font-size:2.8rem}
  .kb-contact-form-card{padding:20px}
  .kb-contact-form .field-grid{grid-template-columns:1fr}
  .kb-contact-socials{flex-wrap:wrap}
  .kb-contact-map-head{flex-direction:column}
  .kb-contact-logo-row{gap:38px}
}


/* =========================================================
   V29 — CONTACT FORM / PARTNERS / FAQ / ABOUT WORD / WHATSAPP
   ========================================================= */

/* Contact form more complete */
.kb-contact-form-card{
  padding:34px!important;
}
.kb-agency-form{
  gap:18px!important;
}
.kb-agency-form label span{
  font-size:.67rem!important;
  color:#9aa6b7!important;
  letter-spacing:.01em;
}
.kb-agency-form input,
.kb-agency-form select,
.kb-agency-form textarea{
  min-height:50px;
  border-radius:11px!important;
  background:#070a10!important;
  color:#eaf0f7!important;
}
.kb-agency-form select{
  width:100%;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.08);
  outline:none;
  appearance:auto;
}
.kb-agency-form textarea{
  min-height:170px;
}
.kb-form-consent{
  display:flex!important;
  align-items:flex-start;
  gap:10px;
  padding:5px 0 2px;
}
.kb-form-consent input{
  width:17px!important;
  min-height:17px!important;
  height:17px!important;
  margin-top:2px;
  accent-color:#2494FF;
}
.kb-form-consent span{
  margin:0!important;
  color:#758399!important;
  font-size:.66rem!important;
  line-height:1.55;
}
.kb-contact-submit{
  min-height:54px!important;
  margin-top:3px;
}

/* Contact partners: exact homepage family, but one compact row */
.kb-contact-partners{
  padding:66px 0!important;
  background:#080a0e!important;
}
.kb-contact-partners .kb-logo-marquee-head{
  margin-bottom:28px!important;
}
.kb-contact-partners .kb-logo-marquee-stage{
  max-height:128px!important;
  overflow:hidden!important;
}
.kb-contact-partners .kb-logo-marquee-row{
  margin:0!important;
}
.kb-contact-partners .kb-logo-marquee-card{
  width:150px!important;
  height:84px!important;
}

/* Contact FAQ exactly same design language as homepage */
.kb-contact-faq-home-style{
  padding:94px 0 110px!important;
  background:#07090d!important;
}
.kb-contact-faq-home-style .faq{
  max-width:940px;
  margin-inline:auto;
}
.kb-contact-faq-home-style .section-head{
  max-width:940px;
  margin-inline:auto;
}

/* About cover word: smaller, with real breathing room and 80% opacity */
.kb-about-cover-word-v29{
  gap:5.5vw!important;
  font-size:clamp(7rem,18.5vw,20rem)!important;
  letter-spacing:-.075em!important;
  opacity:.80!important;
}
.kb-about-cover-word-v29 span:first-child,
.kb-about-cover-word-v29 span:last-child{
  transform:none!important;
}

/* Global floating WhatsApp: circular, icon-only, branded */
.wa-float.kb-wa-icon-only{
  width:58px!important;
  min-width:58px!important;
  height:58px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#156CDD,#2494FF)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:
    0 14px 34px rgba(21,108,221,.38),
    0 0 0 8px rgba(36,148,255,.07)!important;
  overflow:visible!important;
  animation:kbWaFloatPulse 2.5s ease-in-out infinite!important;
}
.wa-float.kb-wa-icon-only svg{
  width:29px!important;
  height:29px!important;
  display:block!important;
  color:#fff!important;
  position:relative;
  z-index:3;
}
.wa-float.kb-wa-icon-only:before{
  content:""!important;
  position:absolute!important;
  inset:-7px!important;
  border-radius:50%!important;
  border:1px solid rgba(36,148,255,.45)!important;
  background:transparent!important;
  animation:kbWaRing 2.5s ease-out infinite!important;
}
.wa-float.kb-wa-icon-only:after{
  content:""!important;
  position:absolute!important;
  inset:-7px!important;
  border-radius:50%!important;
  border:1px solid rgba(36,148,255,.32)!important;
  animation:kbWaRing 2.5s 1.15s ease-out infinite!important;
}
.wa-float.kb-wa-icon-only:hover{
  transform:translateY(-4px) scale(1.055)!important;
  animation-play-state:paused!important;
}
@keyframes kbWaFloatPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.055)}
}
@keyframes kbWaRing{
  0%{transform:scale(.86);opacity:.8}
  80%,100%{transform:scale(1.35);opacity:0}
}

@media(max-width:900px){
  .kb-contact-form-card{padding:26px!important}
  .kb-about-cover-word-v29{
    font-size:24vw!important;
    gap:3vw!important;
  }
}
@media(max-width:620px){
  .kb-agency-form .field-grid{grid-template-columns:1fr!important}
  .kb-contact-form-card{padding:20px!important}
  .kb-contact-partners{padding:50px 0!important}
  .kb-contact-partners .kb-logo-marquee-card{
    width:128px!important;
    height:74px!important;
  }
  .kb-about-cover-word-v29{
    font-size:25vw!important;
    gap:1vw!important;
    line-height:.74!important;
  }
  .wa-float.kb-wa-icon-only{
    width:54px!important;
    min-width:54px!important;
    height:54px!important;
    right:14px!important;
    bottom:14px!important;
  }
  .wa-float.kb-wa-icon-only svg{
    width:27px!important;
    height:27px!important;
  }
}


/* =========================================================
   V30 — DYNAMIC MOCKUP + RESPONSIVE + BILINGUAL PARITY
   ========================================================= */

/* Dynamic homepage browser mockup */
.kb-dynamic-mockup-wrap{
  position:relative;
  isolation:isolate;
  perspective:1400px;
}
.kb-dynamic-mockup-wrap .mockup{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .18s ease-out,box-shadow .3s ease;
  box-shadow:
    0 42px 100px -35px rgba(0,0,0,.88),
    0 0 0 1px rgba(36,148,255,.08),
    0 0 70px rgba(21,108,221,.08);
}
.kb-dynamic-mockup-wrap:hover .mockup{
  box-shadow:
    0 50px 110px -38px rgba(0,0,0,.92),
    0 0 0 1px rgba(36,148,255,.18),
    0 0 90px rgba(21,108,221,.16);
}
.kb-mockup-glow{
  position:absolute;
  z-index:-1;
  inset:12% -7% -7% 8%;
  border-radius:40%;
  background:radial-gradient(circle at 65% 45%,rgba(36,148,255,.24),rgba(21,108,221,.08) 40%,transparent 68%);
  filter:blur(38px);
  animation:kbMockupGlow 5.5s ease-in-out infinite;
}
@keyframes kbMockupGlow{
  0%,100%{opacity:.55;transform:scale(.96)}
  50%{opacity:1;transform:scale(1.04)}
}
.kb-mockup-scan{
  position:absolute;
  z-index:5;
  left:0;right:0;
  height:1px;
  top:20%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(73,174,255,.55),transparent);
  box-shadow:0 0 14px rgba(36,148,255,.4);
  opacity:.42;
  animation:kbScan 5.8s linear infinite;
}
@keyframes kbScan{
  0%{transform:translateY(-20px);opacity:0}
  12%{opacity:.45}
  88%{opacity:.45}
  100%{transform:translateY(290px);opacity:0}
}
.kb-dynamic-mockup-wrap .wf-img img{
  animation:kbPortraitBreath 6s ease-in-out infinite;
}
@keyframes kbPortraitBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}
.kb-dynamic-mockup-wrap .wf-card{
  position:relative;
  overflow:hidden;
  transition:transform .28s ease,border-color .28s ease,background .28s ease;
}
.kb-dynamic-mockup-wrap .wf-card:hover{
  transform:translateY(-5px);
  border-color:rgba(36,148,255,.32);
  background:#111824;
}
.kb-dynamic-mockup-wrap .wf-card:after{
  content:attr(data-value);
  position:absolute;
  right:10px;
  bottom:8px;
  color:#2494FF;
  font:800 .58rem var(--font-mono);
}
.kb-dynamic-mockup-wrap .wf-card:before{
  content:attr(data-label);
  position:absolute;
  left:10px;
  bottom:8px;
  color:#6f7d90;
  font:700 .47rem var(--font-mono);
}
.kb-mockup-cursor{
  position:absolute;
  z-index:8;
  left:36%;
  top:34%;
  color:#fff;
  font-size:1.5rem;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
  animation:kbCursorTour 8s cubic-bezier(.6,.05,.2,.95) infinite;
  pointer-events:none;
}
@keyframes kbCursorTour{
  0%,8%{transform:translate(0,0) scale(.9);opacity:0}
  12%{opacity:1}
  28%{transform:translate(115px,16px) scale(1)}
  45%{transform:translate(176px,120px) scale(.95)}
  62%{transform:translate(56px,185px) scale(1.08)}
  78%{transform:translate(-14px,92px) scale(.96)}
  92%{opacity:1}
  100%{transform:translate(0,0);opacity:0}
}
.kb-code-pill{
  position:absolute;
  z-index:7;
  right:18px;
  top:72px;
  padding:7px 10px;
  display:flex;
  align-items:center;
  gap:7px;
  border-radius:9px;
  border:1px solid rgba(36,148,255,.20);
  background:rgba(6,12,20,.78);
  color:#a9d7ff;
  backdrop-filter:blur(10px);
  font:700 .54rem var(--font-mono);
  animation:kbPillFloat 4.4s ease-in-out infinite;
}
.kb-code-pill i{color:#2494FF;font-size:.85rem}
@keyframes kbPillFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
.kb-dynamic-mockup-wrap .float-badge{
  z-index:9;
  backdrop-filter:blur(12px);
  background:rgba(13,18,27,.90);
  border-color:rgba(36,148,255,.18);
}
.kb-dynamic-mockup-wrap .fb-1{animation:kbBadgeOne 5s ease-in-out infinite}
.kb-dynamic-mockup-wrap .fb-2{animation:kbBadgeTwo 5.6s ease-in-out infinite}
@keyframes kbBadgeOne{
  0%,100%{transform:translate(0,0) rotate(-1deg)}
  50%{transform:translate(-5px,-12px) rotate(1deg)}
}
@keyframes kbBadgeTwo{
  0%,100%{transform:translate(0,0) rotate(1deg)}
  50%{transform:translate(6px,-10px) rotate(-1deg)}
}

/* About: second word lower, neon blue, no overflow */
.kb-about-cover-neon{
  overflow:visible!important;
  width:100%;
  gap:5vw!important;
  font-size:clamp(6.5rem,17.2vw,18rem)!important;
  letter-spacing:-.045em!important;
  opacity:.84!important;
  color:rgba(245,248,252,.92)!important;
}
.kb-about-cover-neon .kb-about-word-second{
  color:#2494FF!important;
  transform:translateY(3.4vw)!important;
  text-shadow:
    0 0 18px rgba(36,148,255,.32),
    0 0 48px rgba(21,108,221,.16);
}

/* Mobile navigation — no desktop menu remnants */
.kb-mobile-menu{
  display:block!important;
  position:fixed!important;
  inset:0!important;
  z-index:9998!important;
  padding:0!important;
  background:
    radial-gradient(circle at 85% 12%,rgba(36,148,255,.14),transparent 30%),
    rgba(5,7,11,.985)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-12px);
  transition:opacity .32s ease,visibility .32s ease,transform .32s ease;
}
.kb-mobile-menu.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0)!important;
}
.kb-mobile-inner{
  width:min(100%,620px);
  min-height:100dvh;
  margin-left:auto;
  padding:20px 24px calc(24px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
}
.kb-mobile-top{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.kb-mobile-top>span{
  color:#536177;
  font:800 .62rem var(--font-mono);
  letter-spacing:.14em;
}
.kb-mobile-close{
  width:42px;height:42px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  color:#fff;
  font-size:1.15rem;
}
.kb-mobile-links{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:26px 0;
}
.kb-mobile-links a{
  min-height:68px;
  padding:0 4px!important;
  display:grid!important;
  grid-template-columns:38px 1fr 30px;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  color:#d9e1eb!important;
  font-size:1rem!important;
  opacity:0;
  transform:translateX(26px);
}
.kb-mobile-menu.open .kb-mobile-links a{
  animation:kbMobileItem .5s cubic-bezier(.2,.8,.2,1) forwards;
}
.kb-mobile-menu.open .kb-mobile-links a:nth-child(1){animation-delay:.06s}
.kb-mobile-menu.open .kb-mobile-links a:nth-child(2){animation-delay:.10s}
.kb-mobile-menu.open .kb-mobile-links a:nth-child(3){animation-delay:.14s}
.kb-mobile-menu.open .kb-mobile-links a:nth-child(4){animation-delay:.18s}
.kb-mobile-menu.open .kb-mobile-links a:nth-child(5){animation-delay:.22s}
.kb-mobile-menu.open .kb-mobile-links a:nth-child(6){animation-delay:.26s}
@keyframes kbMobileItem{
  to{opacity:1;transform:translateX(0)}
}
.kb-mobile-num{
  color:#2494FF;
  font:800 .58rem var(--font-mono);
}
.kb-mobile-text{
  font-size:clamp(1.45rem,6vw,2.2rem);
  font-weight:800;
  letter-spacing:-.035em;
}
.kb-mobile-links>a>i{
  justify-self:end;
  color:#4e5e73;
  font-size:1.05rem;
}
.kb-mobile-links a.active .kb-mobile-text,
.kb-mobile-links a:hover .kb-mobile-text{color:#fff}
.kb-mobile-bottom{
  padding-top:16px;
  display:flex;
  align-items:center;
  gap:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.kb-mobile-lang{
  display:flex;
  gap:3px;
  padding:3px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:9px;
}
.kb-mobile-lang a,.kb-mobile-lang span{
  min-width:34px;height:32px;
  display:grid;place-items:center;
  border-radius:6px;
  color:#6f7d90;
  font:800 .62rem var(--font-mono);
}
.kb-mobile-lang .on{
  color:#fff;
  background:linear-gradient(135deg,#156CDD,#2494FF);
}
.kb-mobile-cta{
  flex:1;
  min-height:42px!important;
  margin:0!important;
}

/* Hard responsive normalization */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,iframe{max-width:100%;height:auto}
.wrap{
  width:min(calc(100% - 40px),1200px)!important;
  margin-inline:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}
section{min-width:0}
.grid-2,.grid-3,.grid-4,.media-split,.hero .wrap,.footer-grid,
.kb-project-feature,.kb-about-intro-grid,.kb-about-story-layout,
.kb-about-capabilities-v27-grid,.kb-contact-main-grid,
.kb-case-summary,.kb-case-gallery{min-width:0}
h1,h2,h3,p,a,span,strong{overflow-wrap:break-word}

/* Desktop/mobile nav breakpoint */
@media(min-width:981px){
  .nav-menu{display:flex!important}
  .nav-burger{display:none!important}
  .kb-mobile-menu{display:none!important}
}
@media(max-width:980px){
  .nav-menu{display:none!important}
  .nav-burger{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .kb-header-cta{display:none!important}
  .nav-right{gap:8px!important}
  .kb-clean-header .nav-logo,
  .kb-v22-header .nav-logo,
  .kb-v22-header.kb-clean-header .nav-logo{
    width:166px!important;
    height:40px!important;
    flex-basis:166px!important;
    min-width:0!important;
  }
  .nav-logo img{
    width:100%!important;
    height:100%!important;
    max-height:40px!important;
  }
  .hero .wrap{
    grid-template-columns:1fr!important;
    gap:42px!important;
  }
  .hero-copy{max-width:760px}
  .hero-visual{max-width:760px;width:100%;margin-inline:auto}
  .kb-about-cover-neon{
    font-size:20vw!important;
    gap:3vw!important;
  }
  .kb-about-cover-neon .kb-about-word-second{
    transform:translateY(5vw)!important;
  }
}
@media(max-width:760px){
  .wrap{width:min(calc(100% - 28px),1200px)!important}
  .lang-switch{display:none!important}
  .hero{
    padding-top:calc(var(--nav-h) + 34px)!important;
  }
  .hero .wrap{gap:30px!important}
  .mockup-body{min-height:285px!important}
  .wf-hero{grid-template-columns:1fr 130px!important}
  .wf-img{min-height:130px!important}
  .wf-links i:nth-child(2),
  .wf-links i:nth-child(3){display:none}
  .kb-code-pill{
    right:10px;top:64px;
    transform:scale(.88);
    transform-origin:right top;
  }
  .kb-mockup-cursor{display:none}
  .float-badge{
    display:flex!important;
    transform:scale(.86);
  }
  .fb-1{right:-4px!important;top:18%!important}
  .fb-2{left:-3px!important;bottom:8%!important}
  .kb-about-cover-neon{
    flex-direction:column!important;
    align-items:center!important;
    gap:0!important;
    font-size:24vw!important;
    line-height:.68!important;
  }
  .kb-about-cover-neon .kb-about-word-second{
    transform:translateY(1.5vw)!important;
  }
  .kb-about-cover{
    min-height:760px!important;
  }
  .kb-about-cover-bottom{
    bottom:46px!important;
  }
  .kb-project-feature,
  .kb-project-feature:nth-child(even){
    grid-template-columns:1fr!important;
  }
  .kb-project-feature:nth-child(even) .kb-project-feature-visual{order:0!important}
  .kb-contact-cards-grid,
  .kb-testimonials-grid,
  .kb-about-process-v27,
  .kb-about-principles{
    grid-template-columns:1fr!important;
  }
  .kb-contact-main-grid,
  .kb-about-intro-grid,
  .kb-about-story-layout,
  .kb-about-capabilities-v27-grid{
    grid-template-columns:1fr!important;
  }
  .kb-case-summary{grid-template-columns:1fr!important}
  .kb-case-summary>div+div{border-left:0!important;border-top:1px solid rgba(255,255,255,.08)!important}
  .footer-grid{grid-template-columns:1fr!important}
}
@media(max-width:520px){
  .wrap{width:min(calc(100% - 22px),1200px)!important}
  .kb-clean-header .nav-logo,
  .kb-v22-header .nav-logo,
  .kb-v22-header.kb-clean-header .nav-logo{
    width:138px!important;
    height:34px!important;
    flex-basis:138px!important;
  }
  .nav-burger{width:40px!important;height:40px!important}
  .mockup-body{padding:12px!important}
  .wf-hero{grid-template-columns:1fr 105px!important}
  .wf-img{min-height:112px!important}
  .wf-cards{grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
  .wf-card{min-height:58px!important;padding:8px!important}
  .float-badge{
    transform:scale(.76)!important;
  }
  .fb-1{right:-18px!important}
  .fb-2{left:-18px!important}
  .kb-code-pill{display:none}
  .kb-mobile-inner{padding-inline:18px}
  .kb-mobile-links a{min-height:62px}
  .kb-mobile-text{font-size:1.45rem}
  .kb-mobile-bottom{flex-direction:column;align-items:stretch}
  .kb-mobile-lang{align-self:flex-start}
}

/* consistent English/Albanian CTA */
.kb-home-final-cta{background:#06080c!important}

@media(prefers-reduced-motion:reduce){
  .kb-mockup-glow,.kb-mockup-scan,.kb-mockup-cursor,
  .kb-dynamic-mockup-wrap .wf-img img,
  .kb-dynamic-mockup-wrap .float-badge{
    animation:none!important;
  }
  .kb-mobile-links a{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}


/* =========================================================
   V31 — WIDTH / HERO / SHOWCASE / FOOTER POLISH
   ========================================================= */
:root{
  --wrap:1320px;
}
.wrap{
  width:min(calc(100% - 64px),1320px)!important;
}
@media(min-width:1500px){
  .wrap{width:min(calc(100% - 96px),1380px)!important}
}

/* Homepage hero: less tall, wider copy, controlled line breaks */
.hero{
  min-height:auto!important;
  padding-top:calc(var(--nav-h) + 76px)!important;
  padding-bottom:76px!important;
}
.hero .wrap{
  grid-template-columns:minmax(0,1.08fr) minmax(520px,.92fr)!important;
  gap:54px!important;
}
.hero-copy{max-width:760px!important}
.hero h1{
  max-width:760px!important;
  font-size:clamp(3.35rem,5.4vw,5.8rem)!important;
  line-height:.96!important;
  letter-spacing:-.06em!important;
  text-wrap:balance;
}
.hero .lead{
  max-width:690px!important;
  font-size:1.06rem!important;
  line-height:1.7!important;
  margin-bottom:26px!important;
}
.hero-actions{margin-top:0!important}
.hero-badges{
  margin-top:26px!important;
  gap:10px!important;
  align-items:center!important;
}
.hero-badges span{
  width:auto!important;
  min-height:auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  font-size:.76rem!important;
  white-space:nowrap;
}
.hero-badges span+span:before{
  content:"";
  width:3px;height:3px;
  border-radius:50%;
  background:#2494FF;
  margin-right:2px;
}
.hero-badges i{font-size:.9rem!important}

/* Main sections feel less squeezed */
.section-head{max-width:900px}
.kb-stair-services .wrap,
.kb-coded-showcase .wrap,
.kb-capabilities-process .wrap,
.kb-testimonials-section .wrap,
.kb-showreel .wrap{
  width:min(calc(100% - 64px),1320px)!important;
}

/* Showcase: product/value language and stronger browser prominence */
.kb-coded-showcase{
  padding-top:88px!important;
  padding-bottom:96px!important;
}
.kb-coded-showcase-grid{
  grid-template-columns:minmax(300px,.72fr) minmax(0,1.55fr)!important;
  gap:64px!important;
  align-items:center!important;
}
.kb-coded-copy{max-width:430px!important}
.kb-coded-copy h2{
  font-size:clamp(2.25rem,3.55vw,4.25rem)!important;
  line-height:1.01!important;
  letter-spacing:-.055em!important;
}
.kb-coded-copy p{
  font-size:1rem!important;
  line-height:1.75!important;
  color:var(--muted)!important;
}
.kb-coded-hint{
  display:inline-flex!important;
  width:auto!important;
  padding:9px 12px!important;
  border:1px solid rgba(36,148,255,.16)!important;
  border-radius:10px!important;
  background:rgba(36,148,255,.045)!important;
  color:#8cbfee!important;
  font-size:.72rem!important;
}
.kb-coded-browser{
  width:100%!important;
  max-width:none!important;
  box-shadow:0 34px 80px -34px rgba(0,0,0,.9),0 0 0 1px rgba(36,148,255,.06)!important;
}

/* Footer: more breathing room, clearer hierarchy */
.ref-footer.site{
  margin-top:0!important;
  padding-top:74px!important;
  padding-bottom:0!important;
}
.ref-footer.site .wrap{
  width:min(calc(100% - 64px),1320px)!important;
}
.ref-footer.site .footer-grid{
  gap:52px!important;
  padding-bottom:54px!important;
}
.ref-footer.site .footer-brand p{
  max-width:390px!important;
  line-height:1.75!important;
}
.ref-footer.site h4{
  margin-bottom:18px!important;
}
.ref-footer.site ul,
.ref-footer.site .footer-links{
  gap:10px!important;
}
.ref-footer.site .footer-bottom{
  margin-top:0!important;
  padding-top:24px!important;
  padding-bottom:28px!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}

/* Broad layout cleanup */
.card,.service-card,.work-card,.post-card{min-width:0}
.kb-project-feature-info,.contact-panel,.case-section{min-width:0}

@media(max-width:1180px){
  .wrap,
  .kb-stair-services .wrap,
  .kb-coded-showcase .wrap,
  .kb-capabilities-process .wrap,
  .kb-testimonials-section .wrap,
  .kb-showreel .wrap,
  .ref-footer.site .wrap{
    width:min(calc(100% - 44px),1320px)!important;
  }
  .hero .wrap{
    grid-template-columns:1fr 1fr!important;
    gap:38px!important;
  }
  .hero h1{font-size:clamp(3rem,5.7vw,4.8rem)!important}
}
@media(max-width:980px){
  .hero{
    padding-top:calc(var(--nav-h) + 48px)!important;
    padding-bottom:58px!important;
  }
  .hero .wrap{grid-template-columns:1fr!important}
  .hero-copy{max-width:800px!important}
  .hero h1{max-width:800px!important}
  .hero-visual{max-width:760px!important}
  .kb-coded-showcase-grid{
    grid-template-columns:1fr!important;
    gap:34px!important;
  }
  .kb-coded-copy{max-width:720px!important}
}
@media(max-width:760px){
  .wrap,
  .kb-stair-services .wrap,
  .kb-coded-showcase .wrap,
  .kb-capabilities-process .wrap,
  .kb-testimonials-section .wrap,
  .kb-showreel .wrap,
  .ref-footer.site .wrap{
    width:min(calc(100% - 28px),1320px)!important;
  }
  .hero{
    padding-top:calc(var(--nav-h) + 34px)!important;
    padding-bottom:46px!important;
  }
  .hero h1{
    font-size:clamp(2.45rem,11vw,3.85rem)!important;
    line-height:.98!important;
    max-width:100%!important;
  }
  .hero .lead{
    font-size:.98rem!important;
    line-height:1.65!important;
  }
  .hero-badges{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:8px!important;
  }
  .hero-badges span{
    width:auto!important;
    display:inline-flex!important;
    padding:0!important;
    background:none!important;
    border:0!important;
    white-space:normal!important;
  }
  .hero-badges span+span:before{display:none!important}
  .kb-coded-showcase{
    padding-top:58px!important;
    padding-bottom:64px!important;
  }
  .kb-coded-copy h2{
    font-size:clamp(2rem,9.6vw,3.2rem)!important;
  }
  .kb-coded-browser{
    border-radius:16px!important;
  }
  .ref-footer.site{
    padding-top:54px!important;
  }
  .ref-footer.site .footer-grid{
    gap:34px!important;
    padding-bottom:38px!important;
  }
}
@media(max-width:480px){
  .wrap,
  .kb-stair-services .wrap,
  .kb-coded-showcase .wrap,
  .kb-capabilities-process .wrap,
  .kb-testimonials-section .wrap,
  .kb-showreel .wrap,
  .ref-footer.site .wrap{
    width:min(calc(100% - 22px),1320px)!important;
  }
  .hero h1{font-size:clamp(2.25rem,11.4vw,3.15rem)!important}
  .hero-badges span{font-size:.73rem!important}
  .ref-footer.site .footer-grid{gap:28px!important}
}


/* =========================================================
   V32 — REAL SITE SHOWCASE / FOOTER / SINGLE BLOG / SERVICE HERO
   ========================================================= */

/* Real scrolling website screenshot */
.kb-coded-viewport{
  position:relative!important;
  height:560px!important;
  overflow:hidden!important;
  background:#fff!important;
}
.kb-real-site-scroll{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#fff;
}
.kb-real-site-image{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  transform:translateY(0);
  will-change:transform;
  animation:kbRealSiteScroll 22s ease-in-out infinite;
}
.kb-real-site-fade{
  position:absolute;
  left:0;right:0;bottom:0;
  height:60px;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.86));
}
@keyframes kbRealSiteScroll{
  0%,8%{transform:translateY(0)}
  48%,56%{transform:translateY(calc(-100% + 560px))}
  92%,100%{transform:translateY(0)}
}
.kb-coded-browser:hover .kb-real-site-image{
  animation-play-state:paused;
}

/* Footer redesign */
.kb-footer-v32{
  position:relative;
  padding:82px 0 0!important;
  background:
    radial-gradient(circle at 12% 0,rgba(36,148,255,.08),transparent 30%),
    #080a0e!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}
.kb-footer-v32 .kb-footer-grid-v32{
  display:grid!important;
  grid-template-columns:1.35fr .8fr .8fr 1fr!important;
  gap:64px!important;
  padding-bottom:62px!important;
}
.kb-footer-v32 .footer-brand{
  max-width:390px!important;
}
.kb-footer-v32 .footer-brand img{
  max-width:235px!important;
  margin-bottom:24px!important;
}
.kb-footer-v32 .footer-brand p{
  color:#8793a4!important;
  line-height:1.78!important;
}
.kb-footer-v32 h4{
  margin:0 0 20px!important;
  color:#2494FF!important;
  font:800 .64rem var(--font-mono)!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
.kb-footer-v32 a{
  color:#aeb8c5!important;
  transition:color .2s ease,transform .2s ease!important;
}
.kb-footer-v32 a:hover{
  color:#fff!important;
  transform:translateX(3px);
}
.kb-footer-v32 .footer-bottom{
  padding:26px 0 30px!important;
  border-top:1px solid rgba(255,255,255,.075)!important;
}
.kb-footer-v32 .kb-footer-socials-v32 a{
  width:38px!important;
  height:38px!important;
  border-radius:10px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.025)!important;
}

/* Single blog */
.kb-single-blog-page{
  background:#07090d;
}
.kb-single-blog-hero{
  padding-top:94px!important;
  padding-bottom:56px!important;
  background:
    radial-gradient(circle at 78% 8%,rgba(36,148,255,.10),transparent 32%),
    #07090d!important;
}
.kb-single-blog-hero h1{
  max-width:980px!important;
  font-size:clamp(2.7rem,5vw,5.35rem)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
}
.kb-single-blog-hero p{
  max-width:760px!important;
  color:#98a4b4!important;
  line-height:1.75!important;
}
.kb-single-blog-article,
.kb-blog-content{
  min-width:0;
}
.kb-blog-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:56px;
  align-items:start;
}
.kb-blog-content{
  max-width:820px;
}
.kb-blog-content h2,
.kb-single-blog-article h2{
  margin-top:52px!important;
  margin-bottom:18px!important;
  font-size:clamp(1.9rem,3vw,2.8rem)!important;
  line-height:1.08!important;
}
.kb-blog-content h3,
.kb-single-blog-article h3{
  margin-top:36px!important;
  font-size:1.45rem!important;
}
.kb-blog-content p,
.kb-single-blog-article p{
  color:#a8b1be!important;
  font-size:1rem!important;
  line-height:1.88!important;
}
.kb-blog-content img,
.kb-single-blog-article img{
  border-radius:16px!important;
  margin:32px 0!important;
}
.kb-single-blog-sidebar{
  position:sticky;
  top:105px;
}
.kb-blog-side-card{
  padding:24px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:
    radial-gradient(circle at 90% 0,rgba(36,148,255,.10),transparent 36%),
    #0b0e14;
}
.kb-blog-side-card h3{
  margin:10px 0 18px;
  color:#fff;
  font-size:1.15rem;
}
.kb-blog-side-card ul{
  list-style:none;
  padding:0;
  margin:0;
}
.kb-blog-side-card li{
  padding:11px 0;
  border-top:1px solid rgba(255,255,255,.07);
  color:#8491a3;
  font-size:.78rem;
}

/* Single service hero */
.kb-single-service-hero{
  padding-top:96px!important;
  padding-bottom:72px!important;
}
.kb-single-service-hero .wrap{
  align-items:center!important;
}
.kb-single-service-h1{
  max-width:880px!important;
  font-size:clamp(2.8rem,4.8vw,5.2rem)!important;
  line-height:.97!important;
  letter-spacing:-.055em!important;
  margin-bottom:20px!important;
}
.kb-single-service-lead{
  max-width:720px!important;
  margin-top:0!important;
  margin-bottom:28px!important;
  line-height:1.72!important;
}
.kb-single-service-actions{
  margin-top:26px!important;
  gap:12px!important;
}

/* Responsive */
@media(max-width:1100px){
  .kb-footer-v32 .kb-footer-grid-v32{
    grid-template-columns:1.2fr 1fr 1fr!important;
    gap:40px!important;
  }
  .kb-footer-v32 .kb-footer-grid-v32>*:last-child{
    grid-column:1 / -1;
  }
  .kb-blog-layout{
    grid-template-columns:1fr 260px;
    gap:36px;
  }
}
@media(max-width:900px){
  .kb-coded-viewport{height:480px!important}
  @keyframes kbRealSiteScroll{
    0%,8%{transform:translateY(0)}
    48%,56%{transform:translateY(calc(-100% + 480px))}
    92%,100%{transform:translateY(0)}
  }
  .kb-blog-layout{
    grid-template-columns:1fr;
  }
  .kb-single-blog-sidebar{
    position:static;
  }
  .kb-footer-v32 .kb-footer-grid-v32{
    grid-template-columns:1fr 1fr!important;
  }
}
@media(max-width:680px){
  .kb-coded-viewport{height:380px!important}
  @keyframes kbRealSiteScroll{
    0%,8%{transform:translateY(0)}
    48%,56%{transform:translateY(calc(-100% + 380px))}
    92%,100%{transform:translateY(0)}
  }
  .kb-single-service-hero{
    padding-top:72px!important;
    padding-bottom:52px!important;
  }
  .kb-single-service-h1{
    font-size:clamp(2.35rem,11vw,3.4rem)!important;
  }
  .kb-single-service-actions{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .kb-single-service-actions .btn{
    width:100%!important;
    justify-content:center!important;
  }
  .kb-footer-v32{
    padding-top:56px!important;
  }
  .kb-footer-v32 .kb-footer-grid-v32{
    grid-template-columns:1fr!important;
    gap:30px!important;
    padding-bottom:42px!important;
  }
}
@media(max-width:480px){
  .kb-coded-viewport{height:320px!important}
  @keyframes kbRealSiteScroll{
    0%,8%{transform:translateY(0)}
    48%,56%{transform:translateY(calc(-100% + 320px))}
    92%,100%{transform:translateY(0)}
  }
  .kb-single-blog-hero h1{
    font-size:clamp(2.3rem,10.5vw,3.25rem)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .kb-real-site-image{animation:none!important}
}


/* =========================================================
   V33 — SHOWCASE SCALE / VIDEO SCROLL SCALE / FOOTER REDESIGN
   ========================================================= */

/* Real-site showcase: a little smaller, cleaner and more informative */
.kb-coded-showcase-grid{
  grid-template-columns:minmax(330px,.82fr) minmax(0,1.18fr)!important;
  gap:58px!important;
}
.kb-coded-browser{
  max-width:860px!important;
  margin-left:auto!important;
}
.kb-coded-viewport{
  height:470px!important;
}
@keyframes kbRealSiteScroll{
  0%,8%{transform:translateY(0)}
  48%,56%{transform:translateY(calc(-100% + 470px))}
  92%,100%{transform:translateY(0)}
}
.kb-showcase-points{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.kb-showcase-points>div{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  align-items:start;
}
.kb-showcase-points i{
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:10px;
  border:1px solid rgba(36,148,255,.16);
  background:rgba(21,108,221,.07);
  color:#2494FF;
  font-size:1rem;
}
.kb-showcase-points b{
  display:block;
  color:#eef4fb;
  font-size:.82rem;
}
.kb-showcase-points span{
  display:block;
  margin-top:3px;
  color:#748195;
  font-size:.72rem;
  line-height:1.5;
}

/* Video section: starts smaller, grows gently as it reaches viewport center */
.kb-showreel-scrollscale{
  padding-top:86px!important;
  padding-bottom:104px!important;
  overflow:clip;
}
.kb-showreel-scrollscale .section-head{
  max-width:780px;
  margin-bottom:36px;
}
.kb-video-scroll-frame{
  width:min(88%,1120px)!important;
  margin-inline:auto!important;
  transform:scale(.90);
  transform-origin:center center;
  will-change:transform;
  transition:box-shadow .25s ease;
  border-radius:22px!important;
  overflow:hidden!important;
  box-shadow:
    0 30px 75px -32px rgba(0,0,0,.82),
    0 0 0 1px rgba(36,148,255,.06);
}
.kb-video-scroll-frame video{
  width:100%!important;
  display:block!important;
}
.kb-video-scroll-frame.kb-video-in-focus{
  box-shadow:
    0 38px 90px -34px rgba(0,0,0,.9),
    0 0 0 1px rgba(36,148,255,.16),
    0 0 65px rgba(21,108,221,.10);
}

/* Footer: premium shell with blue dividers and real spacing */
.kb-footer-v33{
  margin-top:0!important;
  padding:54px 0 34px!important;
  background:#05070a!important;
  border-top:0!important;
}
.kb-footer-v33 .ref-footer-shell{
  position:relative;
  padding:0 34px!important;
  border:1px solid rgba(255,255,255,.075);
  border-radius:24px;
  background:
    radial-gradient(circle at 8% 0,rgba(36,148,255,.10),transparent 28%),
    linear-gradient(180deg,#0b0e14,#080a0f);
  box-shadow:0 28px 80px rgba(0,0,0,.24);
  overflow:hidden;
}
.kb-footer-v33 .ref-footer-shell:before{
  content:"";
  position:absolute;
  left:34px;
  right:34px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#156CDD 25%,#2494FF 50%,#156CDD 75%,transparent);
  opacity:.85;
}
.kb-footer-topline{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.kb-footer-topline span:first-child{
  color:#f4f8fc;
  font:800 .67rem var(--font-mono);
  letter-spacing:.13em;
}
.kb-footer-topline span:last-child{
  color:#5f6d80;
  font-size:.68rem;
}
.kb-footer-v33 .footer-grid{
  grid-template-columns:1.35fr .85fr .85fr 1fr!important;
  gap:0!important;
  padding:48px 0 46px!important;
}
.kb-footer-v33 .kb-footer-column{
  position:relative;
  padding:0 34px!important;
}
.kb-footer-v33 .kb-footer-column:first-child{
  padding-left:0!important;
}
.kb-footer-v33 .kb-footer-column:last-child{
  padding-right:0!important;
}
.kb-footer-v33 .kb-footer-column + .kb-footer-column:before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  bottom:4px;
  width:1px;
  background:linear-gradient(to bottom,transparent,rgba(36,148,255,.52) 18%,rgba(21,108,221,.22) 82%,transparent);
}
.kb-footer-v33 .footer-brand img{
  max-width:220px!important;
  margin:0 0 24px!important;
}
.kb-footer-v33 .footer-brand p{
  max-width:380px!important;
  margin-bottom:22px!important;
  color:#8d99a9!important;
  line-height:1.75!important;
}
.kb-footer-v33 .footer-col>b{
  display:block;
  margin-bottom:20px!important;
  color:#2494FF!important;
  font:800 .62rem var(--font-mono)!important;
  letter-spacing:.13em!important;
  text-transform:uppercase;
}
.kb-footer-v33 .footer-col ul{
  display:flex;
  flex-direction:column;
  gap:12px!important;
}
.kb-footer-v33 .footer-col li,
.kb-footer-v33 .footer-col a{
  color:#9ca8b8!important;
  font-size:.76rem!important;
  line-height:1.45;
}
.kb-footer-v33 .footer-col a:hover{
  color:#fff!important;
}
.kb-footer-v33 .socials{
  margin-top:8px!important;
}
.kb-footer-v33 .socials a{
  width:40px!important;
  height:40px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:11px!important;
  border:1px solid rgba(36,148,255,.18)!important;
  background:rgba(21,108,221,.06)!important;
  color:#2494FF!important;
}
.kb-footer-v33 .ref-footer-wordmark{
  margin:0!important;
  padding:22px 0 20px!important;
  border-top:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.055);
  color:rgba(255,255,255,.035)!important;
  font-size:clamp(2rem,5vw,5rem)!important;
  line-height:1!important;
  letter-spacing:-.06em!important;
}
.kb-footer-v33 .footer-bottom{
  min-height:64px;
  margin:0!important;
  padding:20px 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  border-top:0!important;
  color:#59677b!important;
  font-size:.67rem!important;
}
.kb-footer-v33 + *{
  margin-top:0!important;
}

/* keep visible breathing room under footer shell */
body:after{
  content:"";
  display:block;
  height:26px;
  background:#05070a;
}

/* responsive */
@media(max-width:1100px){
  .kb-coded-showcase-grid{
    grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr)!important;
    gap:38px!important;
  }
  .kb-coded-browser{max-width:760px!important}
  .kb-coded-viewport{height:430px!important}
  @keyframes kbRealSiteScroll{
    0%,8%{transform:translateY(0)}
    48%,56%{transform:translateY(calc(-100% + 430px))}
    92%,100%{transform:translateY(0)}
  }
  .kb-footer-v33 .footer-grid{
    grid-template-columns:1.2fr 1fr!important;
  }
  .kb-footer-v33 .kb-footer-column{
    padding:28px 30px!important;
    border-bottom:1px solid rgba(255,255,255,.055);
  }
  .kb-footer-v33 .kb-footer-column:nth-child(odd){
    padding-left:0!important;
  }
  .kb-footer-v33 .kb-footer-column:nth-child(even){
    padding-right:0!important;
  }
  .kb-footer-v33 .kb-footer-column + .kb-footer-column:before{
    top:28px;bottom:28px;
  }
  .kb-footer-v33 .kb-footer-column:nth-child(3):before{
    display:none;
  }
}
@media(max-width:900px){
  .kb-coded-showcase-grid{
    grid-template-columns:1fr!important;
  }
  .kb-coded-browser{
    max-width:780px!important;
    margin-inline:auto!important;
  }
  .kb-video-scroll-frame{
    width:94%!important;
    transform:scale(.94);
  }
}
@media(max-width:680px){
  .kb-coded-browser{max-width:100%!important}
  .kb-coded-viewport{height:340px!important}
  @keyframes kbRealSiteScroll{
    0%,8%{transform:translateY(0)}
    48%,56%{transform:translateY(calc(-100% + 340px))}
    92%,100%{transform:translateY(0)}
  }
  .kb-showreel-scrollscale{
    padding-top:62px!important;
    padding-bottom:72px!important;
  }
  .kb-video-scroll-frame{
    width:100%!important;
    transform:scale(.96);
    border-radius:16px!important;
  }
  .kb-footer-v33{
    padding:36px 0 24px!important;
  }
  .kb-footer-v33 .ref-footer-shell{
    padding:0 20px!important;
    border-radius:18px;
  }
  .kb-footer-v33 .ref-footer-shell:before{
    left:20px;right:20px;
  }
  .kb-footer-topline{
    padding:14px 0;
    min-height:0;
    flex-direction:column;
    align-items:flex-start;
  }
  .kb-footer-v33 .footer-grid{
    grid-template-columns:1fr!important;
    padding:26px 0 18px!important;
  }
  .kb-footer-v33 .kb-footer-column{
    padding:24px 0!important;
  }
  .kb-footer-v33 .kb-footer-column + .kb-footer-column:before{
    left:0;right:0;top:0;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,rgba(36,148,255,.55),rgba(21,108,221,.10),transparent);
  }
  .kb-footer-v33 .footer-bottom{
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    padding:18px 0 22px!important;
  }
}
@media(max-width:480px){
  .kb-coded-viewport{height:300px!important}
  @keyframes kbRealSiteScroll{
    0%,8%{transform:translateY(0)}
    48%,56%{transform:translateY(calc(-100% + 300px))}
    92%,100%{transform:translateY(0)}
  }
}


/* =========================================================
   V34 — FINAL POLISH: WIDTH / BLOG / FOOTER / VIDEO / CTA
   ========================================================= */

:root{
  --wrap:1240px;
}
.wrap{
  width:min(calc(100% - 56px),1240px)!important;
}
@media(min-width:1500px){
  .wrap{width:min(calc(100% - 72px),1280px)!important}
}

/* Footer readability */
.kb-footer-v34 .footer-brand p{
  color:#b2bdca!important;
}
.kb-footer-v34 .footer-col li,
.kb-footer-v34 .footer-col a{
  color:#c3ccd7!important;
}
.kb-footer-v34 .footer-col>b{
  color:#56b3ff!important;
}
.kb-footer-v34 .footer-bottom{
  color:#7f8da0!important;
}
.kb-footer-v34 .kb-footer-topline span:last-child{
  color:#8794a5!important;
}
.kb-footer-v34 .ref-footer-wordmark{
  color:rgba(255,255,255,.055)!important;
}

/* Video section: text same visual width as video and centered */
.kb-showreel-scrollscale .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.kb-showreel-scrollscale .section-head{
  width:min(88%,1120px)!important;
  max-width:1120px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}
.kb-showreel-scrollscale .section-head p{
  max-width:760px!important;
  margin-inline:auto!important;
}
.kb-video-scroll-frame{
  width:min(88%,1120px)!important;
}

/* Real website showcase: smaller browser and wider copy */
.kb-coded-showcase .wrap{
  width:min(calc(100% - 56px),1240px)!important;
}
.kb-coded-showcase-grid{
  grid-template-columns:minmax(360px,.95fr) minmax(0,1.05fr)!important;
  gap:52px!important;
}
.kb-coded-copy{
  max-width:520px!important;
}
.kb-coded-copy h2{
  max-width:520px!important;
}
.kb-coded-copy p{
  max-width:500px!important;
}
.kb-coded-browser{
  width:100%!important;
  max-width:720px!important;
}
.kb-coded-viewport{
  height:390px!important;
}
@keyframes kbRealSiteScroll{
  0%,8%{transform:translateY(0)}
  48%,56%{transform:translateY(calc(-100% + 390px))}
  92%,100%{transform:translateY(0)}
}

/* Single blog: full site container, no cramped sidebar */
.kb-single-blog-page .wrap{
  width:min(calc(100% - 56px),1240px)!important;
}
.kb-blog-content,
.kb-single-blog-wide,
.kb-single-blog-article{
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
}
.kb-blog-content > *,
.kb-single-blog-wide > *,
.kb-single-blog-article > *{
  max-width:100%!important;
}
.kb-blog-content p,
.kb-single-blog-wide p,
.kb-single-blog-article p{
  max-width:980px!important;
  margin-left:0!important;
  margin-right:auto!important;
}
.kb-blog-content h2,
.kb-blog-content h3,
.kb-single-blog-wide h2,
.kb-single-blog-wide h3,
.kb-single-blog-article h2,
.kb-single-blog-article h3{
  max-width:980px!important;
}
.kb-blog-content img,
.kb-single-blog-wide img,
.kb-single-blog-article img{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  object-fit:cover!important;
  margin:34px 0!important;
}
.kb-single-blog-page section,
.kb-single-blog-page article,
.kb-single-blog-page .wrap,
.kb-single-blog-page div{
  min-width:0;
}
.kb-single-blog-page .kb-blog-layout{
  display:block!important;
}
.kb-single-blog-page blockquote,
.kb-single-blog-page .note,
.kb-single-blog-page .callout{
  max-width:980px!important;
}

/* prevent overlap in blog content */
.kb-single-blog-page h2,
.kb-single-blog-page h3,
.kb-single-blog-page p,
.kb-single-blog-page img,
.kb-single-blog-page ul,
.kb-single-blog-page ol{
  position:relative!important;
  z-index:auto!important;
  clear:both!important;
}
.kb-single-blog-page img{
  display:block!important;
}

/* Rocket art higher in CTA */
.kb-rocket-lift-v34{
  transform:translateY(-28px)!important;
}
@media(max-width:760px){
  .kb-rocket-lift-v34{
    transform:translateY(-42px)!important;
  }
}

/* Responsive width normalization */
@media(max-width:1100px){
  .wrap,
  .kb-coded-showcase .wrap,
  .kb-single-blog-page .wrap{
    width:min(calc(100% - 40px),1240px)!important;
  }
  .kb-coded-showcase-grid{
    grid-template-columns:1fr 1fr!important;
    gap:34px!important;
  }
  .kb-coded-browser{
    max-width:650px!important;
  }
  .kb-coded-viewport{height:360px!important}
  @keyframes kbRealSiteScroll{
    0%,8%{transform:translateY(0)}
    48%,56%{transform:translateY(calc(-100% + 360px))}
    92%,100%{transform:translateY(0)}
  }
}
@media(max-width:900px){
  .kb-coded-showcase-grid{
    grid-template-columns:1fr!important;
  }
  .kb-coded-copy{
    max-width:760px!important;
  }
  .kb-coded-copy h2,
  .kb-coded-copy p{
    max-width:760px!important;
  }
  .kb-coded-browser{
    max-width:680px!important;
    margin-inline:auto!important;
  }
  .kb-showreel-scrollscale .section-head,
  .kb-video-scroll-frame{
    width:94%!important;
  }
}
@media(max-width:760px){
  .wrap,
  .kb-coded-showcase .wrap,
  .kb-single-blog-page .wrap{
    width:min(calc(100% - 28px),1240px)!important;
  }
  .kb-coded-browser{
    max-width:100%!important;
  }
  .kb-coded-viewport{height:320px!important}
  @keyframes kbRealSiteScroll{
    0%,8%{transform:translateY(0)}
    48%,56%{transform:translateY(calc(-100% + 320px))}
    92%,100%{transform:translateY(0)}
  }
  .kb-showreel-scrollscale .section-head,
  .kb-video-scroll-frame{
    width:100%!important;
  }
  .kb-single-blog-page .kb-single-blog-hero h1{
    font-size:clamp(2.25rem,10vw,3.2rem)!important;
  }
  .kb-single-blog-page p{
    font-size:.96rem!important;
    line-height:1.8!important;
  }
}
@media(max-width:480px){
  .wrap,
  .kb-coded-showcase .wrap,
  .kb-single-blog-page .wrap{
    width:min(calc(100% - 22px),1240px)!important;
  }
  .kb-coded-viewport{height:280px!important}
  @keyframes kbRealSiteScroll{
    0%,8%{transform:translateY(0)}
    48%,56%{transform:translateY(calc(-100% + 280px))}
    92%,100%{transform:translateY(0)}
  }
}


/* =========================================================
   V35 — LIGHT FOOTER / BLOG REDESIGN / SMART HEADER / MY WORK
   ========================================================= */

/* Global container: balanced, not overly wide */
:root{--wrap:1210px}
.wrap{width:min(calc(100% - 52px),1210px)!important}

/* ----- MY WORK ----- */
.kb-coded-showcase{
  padding:96px 0 104px!important;
  background:
    radial-gradient(circle at 72% 45%,rgba(36,148,255,.08),transparent 34%),
    #07090d!important;
}
.kb-coded-showcase-grid{
  grid-template-columns:minmax(0,.98fr) minmax(520px,1.02fr)!important;
  gap:62px!important;
  align-items:center!important;
}
.kb-coded-copy{
  max-width:570px!important;
}
.kb-work-project-label{
  margin:20px 0 22px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#7e8c9f;
  font:700 .62rem var(--font-mono);
  letter-spacing:.07em;
}
.kb-work-project-label i{
  color:#2494FF;
  font-size:.95rem;
}
.kb-work-project-label b{
  margin-left:auto;
  padding:5px 8px;
  border:1px solid rgba(36,148,255,.18);
  border-radius:6px;
  color:#2494FF;
  font-size:.52rem;
  background:rgba(21,108,221,.05);
}
.kb-coded-copy h2{
  max-width:570px!important;
  margin:0 0 20px!important;
  font-size:clamp(2.5rem,4vw,4.45rem)!important;
  line-height:.98!important;
  letter-spacing:-.06em!important;
}
.kb-work-lead{
  max-width:555px!important;
  margin:0 0 28px!important;
  color:#a6b1bf!important;
  font-size:1rem!important;
  line-height:1.78!important;
}
.kb-work-proof{
  display:grid;
  gap:10px;
  margin-bottom:24px;
}
.kb-work-proof>div{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:12px;
  background:rgba(255,255,255,.018);
}
.kb-work-proof i{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:10px;
  color:#2494FF;
  background:rgba(21,108,221,.08);
  border:1px solid rgba(36,148,255,.12);
}
.kb-work-proof b{
  display:block;
  color:#f4f7fb;
  font-size:.78rem;
}
.kb-work-proof small{
  display:block;
  margin-top:3px;
  color:#748196;
  font-size:.67rem;
  line-height:1.5;
}
.kb-work-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.kb-work-tags span{
  padding:7px 9px;
  border-radius:999px;
  border:1px solid rgba(36,148,255,.13);
  color:#8296ad;
  background:rgba(21,108,221,.035);
  font:700 .55rem var(--font-mono);
}
.kb-coded-browser{
  max-width:650px!important;
  margin-left:auto!important;
}
.kb-coded-viewport{
  height:350px!important;
}
@keyframes kbRealSiteScroll{
  0%,8%{transform:translateY(0)}
  48%,56%{transform:translateY(calc(-100% + 350px))}
  92%,100%{transform:translateY(0)}
}
.kb-work-browser-caption{
  grid-column:2;
  margin:-42px 12px 0 auto;
  color:#5f6d80;
  font:700 .57rem var(--font-mono);
}

/* ----- WHITE FOOTER using logo palette ----- */
.kb-footer-light-v35{
  margin:0!important;
  padding:48px 0 34px!important;
  background:#05070a!important;
  color:#0a1628!important;
}
.kb-footer-light-v35 .ref-footer-shell{
  padding:0 38px!important;
  overflow:hidden!important;
  border:1px solid #dce6f2!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 28px 70px rgba(0,0,0,.22)!important;
}
.kb-footer-light-v35 .ref-footer-shell:before{
  background:linear-gradient(90deg,transparent,#156CDD 20%,#2494FF 50%,#156CDD 80%,transparent)!important;
  opacity:1!important;
}
.kb-footer-light-v35 .kb-footer-topline{
  border-bottom:1px solid #e7edf5!important;
}
.kb-footer-light-v35 .kb-footer-topline span:first-child{
  color:#0a1628!important;
}
.kb-footer-light-v35 .kb-footer-topline span:last-child{
  color:#5f6f84!important;
}
.kb-footer-light-v35 .footer-grid{
  padding:52px 0 48px!important;
}
.kb-footer-light-v35 .kb-footer-column{
  padding:0 34px!important;
}
.kb-footer-light-v35 .kb-footer-column:first-child{padding-left:0!important}
.kb-footer-light-v35 .kb-footer-column:last-child{padding-right:0!important}
.kb-footer-light-v35 .kb-footer-column + .kb-footer-column:before{
  background:linear-gradient(to bottom,transparent,#2494FF 18%,#156CDD 50%,#2494FF 82%,transparent)!important;
  opacity:.52;
}
.kb-footer-light-v35 .footer-brand p{
  color:#4e5f75!important;
}
.kb-footer-light-v35 .footer-col>b,
.kb-footer-light-v35 h4{
  color:#156CDD!important;
}
.kb-footer-light-v35 .footer-col li,
.kb-footer-light-v35 .footer-col a{
  color:#1d3049!important;
}
.kb-footer-light-v35 .footer-col a:hover{
  color:#156CDD!important;
}
.kb-footer-light-v35 .socials a,
.kb-footer-light-v35 .kb-footer-socials-v32 a{
  color:#156CDD!important;
  border-color:#d7e4f2!important;
  background:#f5f9fd!important;
}
.kb-footer-light-v35 .ref-footer-wordmark{
  color:rgba(10,22,40,.055)!important;
  border-color:#e8eef5!important;
}
.kb-footer-light-v35 .footer-bottom{
  color:#617187!important;
  border-color:#e8eef5!important;
}
.kb-footer-light-v35 .footer-bottom a{
  color:#0a1628!important;
}
.kb-footer-light-v35 + *{background:#05070a!important}

/* ----- Rocket: visibly higher ----- */
.cta-band.kb-rocket-cta .kb-rocket-art,
.kb-rocket-art.kb-rocket-lift-v34{
  bottom:4px!important;
  transform:none!important;
  width:min(41%,450px)!important;
}
@media(max-width:900px){
  .cta-band.kb-rocket-cta .kb-rocket-art,
  .kb-rocket-art.kb-rocket-lift-v34{
    right:50%!important;
    bottom:8px!important;
    transform:translateX(50%)!important;
    width:310px!important;
  }
}
@media(max-width:620px){
  .cta-band.kb-rocket-cta .kb-rocket-art,
  .kb-rocket-art.kb-rocket-lift-v34{
    bottom:18px!important;
    width:290px!important;
  }
}

/* ----- Single blog full redesign ----- */
.kb-blog-v35{
  background:#07090d!important;
}
.kb-blog-hero-v35{
  padding:104px 0 72px!important;
  background:
    radial-gradient(circle at 82% 20%,rgba(36,148,255,.11),transparent 30%),
    linear-gradient(180deg,#06080c,#080a0f)!important;
}
.kb-blog-hero-v35 .article{
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.72fr)!important;
  column-gap:54px!important;
  align-items:center!important;
}
.kb-blog-hero-v35 .crumbs,
.kb-blog-hero-v35 .eyebrow,
.kb-blog-hero-v35 h1,
.kb-blog-hero-v35 .lead,
.kb-blog-hero-v35 .post-meta{
  grid-column:1!important;
}
.kb-blog-hero-v35 .kb-blog-feature-v35{
  grid-column:2!important;
  grid-row:1 / span 5!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 28px 70px rgba(0,0,0,.30)!important;
}
.kb-blog-hero-v35 .kb-blog-feature-v35 img{
  width:100%!important;
  min-height:390px!important;
  height:100%!important;
  object-fit:cover!important;
  margin:0!important;
}
.kb-blog-hero-v35 h1{
  margin:18px 0 18px!important;
  max-width:780px!important;
  font-size:clamp(2.75rem,4.7vw,5.05rem)!important;
  line-height:.98!important;
}
.kb-blog-hero-v35 .lead{
  max-width:720px!important;
  color:#a1adbc!important;
}
.kb-blog-hero-v35 .post-meta{
  margin-top:24px!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px 18px!important;
  color:#718096!important;
}
.kb-blog-body-v35{
  padding:78px 0 110px!important;
}
.kb-blog-body-v35 .blog-single-layout{
  width:100%!important;
  max-width:none!important;
}
.kb-blog-content-v35{
  width:100%!important;
  max-width:1040px!important;
  margin:0 auto!important;
}
.kb-blog-toc-v35{
  margin:0 0 56px!important;
  padding:26px 30px!important;
  border:1px solid rgba(36,148,255,.16)!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 95% 10%,rgba(36,148,255,.10),transparent 30%),
    #0c1017!important;
}
.kb-blog-toc-v35>b{
  display:block!important;
  margin-bottom:15px!important;
  color:#fff!important;
  font-size:.9rem!important;
}
.kb-blog-toc-v35 ol{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px 28px!important;
  margin:0!important;
  padding-left:22px!important;
}
.kb-blog-toc-v35 a{
  color:#8da0b7!important;
  font-size:.78rem!important;
}
.kb-blog-content-v35 h2{
  margin:64px 0 20px!important;
  padding-top:6px!important;
  max-width:900px!important;
  font-size:clamp(2rem,3.2vw,3rem)!important;
  line-height:1.08!important;
}
.kb-blog-content-v35 h3{
  margin:38px 0 13px!important;
  max-width:900px!important;
  color:#eef3f9!important;
  font-size:1.35rem!important;
}
.kb-blog-content-v35 p,
.kb-blog-content-v35 li{
  max-width:900px!important;
  color:#a9b4c1!important;
  font-size:1rem!important;
  line-height:1.9!important;
}
.kb-blog-content-v35 ul,
.kb-blog-content-v35 ol{
  max-width:900px!important;
}
.kb-blog-content-v35 table{
  width:100%!important;
  margin:30px 0 36px!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:14px!important;
  background:#0a0d12!important;
}
.kb-blog-content-v35 th{
  padding:16px!important;
  background:rgba(21,108,221,.11)!important;
  color:#ddecfa!important;
  text-align:left!important;
  font-size:.72rem!important;
}
.kb-blog-content-v35 td{
  padding:15px 16px!important;
  border-top:1px solid rgba(255,255,255,.06)!important;
  color:#96a4b6!important;
  font-size:.78rem!important;
  line-height:1.55!important;
}
.kb-blog-content-v35 blockquote{
  max-width:900px!important;
  margin:38px 0!important;
  padding:24px 26px!important;
  border-left:3px solid #2494FF!important;
  border-radius:0 13px 13px 0!important;
  background:linear-gradient(90deg,rgba(21,108,221,.10),rgba(21,108,221,.025))!important;
  color:#d5dfeb!important;
  line-height:1.75!important;
}
.kb-blog-content-v35 .faq{
  max-width:900px!important;
}
.kb-blog-content-v35 .cta-band{
  max-width:1040px!important;
}

/* ----- Smart sticky header: slides out down, returns on scroll up ----- */
.nav.kb-smart-scroll{
  transition:transform .34s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s!important;
  will-change:transform;
}
.nav.kb-smart-scroll.kb-nav-hidden{
  transform:translateY(-110%)!important;
}
.nav.kb-smart-scroll.kb-nav-visible{
  transform:translateY(0)!important;
}

/* Responsive */
@media(max-width:980px){
  .wrap{width:min(calc(100% - 38px),1210px)!important}
  .kb-coded-showcase-grid{
    grid-template-columns:1fr!important;
    gap:38px!important;
  }
  .kb-coded-copy{max-width:760px!important}
  .kb-coded-copy h2,.kb-work-lead{max-width:760px!important}
  .kb-coded-browser{max-width:680px!important;margin-inline:auto!important}
  .kb-work-browser-caption{grid-column:1;margin:-24px auto 0!important}
  .kb-blog-hero-v35 .article{
    grid-template-columns:1fr!important;
  }
  .kb-blog-hero-v35 .kb-blog-feature-v35{
    grid-column:1!important;
    grid-row:auto!important;
    margin-top:34px!important;
  }
  .kb-blog-hero-v35 .kb-blog-feature-v35 img{
    min-height:0!important;
    max-height:520px!important;
  }
  .kb-footer-light-v35 .footer-grid{
    grid-template-columns:1fr 1fr!important;
  }
}
@media(max-width:680px){
  .wrap{width:min(calc(100% - 26px),1210px)!important}
  .kb-coded-showcase{padding:64px 0 72px!important}
  .kb-coded-copy h2{font-size:clamp(2.2rem,10vw,3.25rem)!important}
  .kb-coded-viewport{height:285px!important}
  @keyframes kbRealSiteScroll{
    0%,8%{transform:translateY(0)}
    48%,56%{transform:translateY(calc(-100% + 285px))}
    92%,100%{transform:translateY(0)}
  }
  .kb-work-project-label{
    flex-wrap:wrap;
  }
  .kb-work-project-label b{margin-left:0}
  .kb-footer-light-v35{
    padding:30px 0 30px!important;
  }
  .kb-footer-light-v35 .ref-footer-shell{
    padding:0 22px!important;
    border-radius:18px!important;
  }
  .kb-footer-light-v35 .footer-grid{
    grid-template-columns:1fr!important;
    padding:24px 0 18px!important;
  }
  .kb-footer-light-v35 .kb-footer-column{
    padding:24px 0!important;
  }
  .kb-footer-light-v35 .kb-footer-column + .kb-footer-column:before{
    top:0!important;bottom:auto!important;left:0!important;right:0!important;
    width:auto!important;height:1px!important;
    background:linear-gradient(90deg,#2494FF,#156CDD 42%,transparent)!important;
  }
  .kb-blog-hero-v35{padding:80px 0 50px!important}
  .kb-blog-hero-v35 h1{font-size:clamp(2.25rem,10vw,3.2rem)!important}
  .kb-blog-body-v35{padding:54px 0 78px!important}
  .kb-blog-toc-v35{padding:22px!important}
  .kb-blog-toc-v35 ol{grid-template-columns:1fr!important}
  .kb-blog-content-v35 h2{margin-top:48px!important}
  .kb-blog-content-v35 table{
    display:block!important;
    overflow-x:auto!important;
    white-space:normal!important;
  }
}


/* =========================================================
   V36 — COMPACT MY WORK / MOBILE TESTIMONIAL SWIPER / BLOG CENTER FIX
   ========================================================= */

/* My Work more compact, browser taller */
.kb-coded-showcase{
  padding:82px 0 92px!important;
}
.kb-coded-showcase-grid{
  grid-template-columns:minmax(0,.9fr) minmax(540px,1.1fr)!important;
  gap:54px!important;
}
.kb-coded-copy{
  max-width:500px!important;
}
.kb-coded-copy h2{
  max-width:500px!important;
  font-size:clamp(2.35rem,3.55vw,3.9rem)!important;
  margin-bottom:16px!important;
}
.kb-work-lead{
  max-width:490px!important;
  font-size:.94rem!important;
  line-height:1.68!important;
  margin-bottom:20px!important;
}
.kb-work-project-label{
  margin:16px 0 16px!important;
}
.kb-work-proof{
  gap:8px!important;
  margin-bottom:18px!important;
}
.kb-work-proof>div{
  padding:10px 12px!important;
}
.kb-work-proof i{
  width:34px!important;height:34px!important;
}
.kb-work-proof b{font-size:.74rem!important}
.kb-work-proof small{font-size:.64rem!important}
.kb-work-tags{gap:6px!important}
.kb-work-tags span{padding:6px 8px!important}
.kb-coded-browser{
  max-width:700px!important;
}
.kb-coded-viewport{
  height:430px!important;
}
@keyframes kbRealSiteScroll{
  0%,8%{transform:translateY(0)}
  48%,56%{transform:translateY(calc(-100% + 430px))}
  92%,100%{transform:translateY(0)}
}

/* Single blog: same centered container as whole website */
.kb-blog-v35 .kb-blog-global-wrap,
.kb-blog-v35 .wrap.article,
.kb-blog-v35 .blog-single-layout{
  width:min(calc(100% - 52px),1210px)!important;
  max-width:1210px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}
.kb-blog-v35 .kb-blog-hero-v35 .article{
  width:min(calc(100% - 52px),1210px)!important;
  max-width:1210px!important;
  margin-inline:auto!important;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.72fr)!important;
  gap:56px!important;
}
.kb-blog-v35 .kb-blog-body-v35>.wrap{
  width:min(calc(100% - 52px),1210px)!important;
  max-width:1210px!important;
  margin-inline:auto!important;
}
.kb-blog-v35 .kb-blog-reading-width,
.kb-blog-v35 .kb-blog-content-v35{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
}
.kb-blog-v35 .kb-blog-content-v35 > h2,
.kb-blog-v35 .kb-blog-content-v35 > h3,
.kb-blog-v35 .kb-blog-content-v35 > p,
.kb-blog-v35 .kb-blog-content-v35 > ul,
.kb-blog-v35 .kb-blog-content-v35 > ol,
.kb-blog-v35 .kb-blog-content-v35 > blockquote,
.kb-blog-v35 .kb-blog-content-v35 > .faq{
  width:min(100%,980px)!important;
  max-width:980px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.kb-blog-v35 .kb-blog-toc-v35,
.kb-blog-v35 .kb-blog-content-v35 > table,
.kb-blog-v35 .kb-blog-content-v35 > .cta-band,
.kb-blog-v35 .kb-blog-content-v35 > img,
.kb-blog-v35 .kb-blog-content-v35 > .media-card{
  width:100%!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.kb-blog-v35 .kb-blog-toc-v35{
  box-sizing:border-box!important;
}
.kb-blog-v35 .kb-blog-content-v35 table{
  table-layout:fixed!important;
}
.kb-blog-v35 .kb-blog-content-v35 td,
.kb-blog-v35 .kb-blog-content-v35 th{
  overflow-wrap:anywhere!important;
}
.kb-blog-v35 .kb-blog-hero-v35 h1{
  max-width:760px!important;
}
.kb-blog-v35 .kb-blog-feature-v35 img{
  object-fit:cover!important;
  aspect-ratio:1/1!important;
}

/* Mobile testimonial swiper */
.kb-testimonial-nav{
  display:none;
}
@media(max-width:760px){
  .kb-testimonials-swiper{
    overflow:hidden!important;
  }
  .kb-testimonials-swiper .section-head{
    margin-bottom:24px!important;
  }
  .kb-testimonial-track{
    display:flex!important;
    grid-template-columns:none!important;
    gap:14px!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth!important;
    scrollbar-width:none!important;
    padding:2px 2px 8px!important;
  }
  .kb-testimonial-track::-webkit-scrollbar{display:none!important}
  .kb-testimonial-track .kb-testimonial-card{
    flex:0 0 calc(100% - 22px)!important;
    min-width:calc(100% - 22px)!important;
    scroll-snap-align:center!important;
    margin:0!important;
  }
  .kb-testimonial-nav{
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:18px;
  }
  .kb-testimonial-prev,
  .kb-testimonial-next{
    width:38px;height:38px;
    display:grid;place-items:center;
    border-radius:50%;
    border:1px solid rgba(36,148,255,.18);
    background:rgba(21,108,221,.06);
    color:#2494FF;
  }
  .kb-testimonial-dots{
    display:flex;
    gap:6px;
  }
  .kb-testimonial-dots button{
    width:7px;height:7px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#283548;
    transition:width .2s,background .2s,border-radius .2s;
  }
  .kb-testimonial-dots button.active{
    width:20px;
    border-radius:999px;
    background:#2494FF;
  }

  .kb-blog-v35 .kb-blog-global-wrap,
  .kb-blog-v35 .kb-blog-hero-v35 .article,
  .kb-blog-v35 .kb-blog-body-v35>.wrap,
  .kb-blog-v35 .blog-single-layout{
    width:min(calc(100% - 26px),1210px)!important;
  }
  .kb-blog-v35 .kb-blog-hero-v35 .article{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .kb-blog-v35 .kb-blog-feature-v35{
    width:100%!important;
  }
  .kb-blog-v35 .kb-blog-feature-v35 img{
    aspect-ratio:16/10!important;
  }
  .kb-blog-v35 .kb-blog-content-v35 > h2,
  .kb-blog-v35 .kb-blog-content-v35 > h3,
  .kb-blog-v35 .kb-blog-content-v35 > p,
  .kb-blog-v35 .kb-blog-content-v35 > ul,
  .kb-blog-v35 .kb-blog-content-v35 > ol,
  .kb-blog-v35 .kb-blog-content-v35 > blockquote,
  .kb-blog-v35 .kb-blog-content-v35 > .faq{
    width:100%!important;
    max-width:100%!important;
  }
}
@media(max-width:980px){
  .kb-coded-showcase-grid{
    grid-template-columns:1fr!important;
  }
  .kb-coded-copy{
    max-width:680px!important;
  }
  .kb-coded-browser{
    max-width:700px!important;
    margin-inline:auto!important;
  }
}
@media(max-width:680px){
  .kb-coded-viewport{height:340px!important}
  @keyframes kbRealSiteScroll{
    0%,8%{transform:translateY(0)}
    48%,56%{transform:translateY(calc(-100% + 340px))}
    92%,100%{transform:translateY(0)}
  }
}


/* =========================================================
   V37 — MOBILE PROCESS/PROJECT SWIPERS + CTA ROCKET NUDGE
   ========================================================= */

/* Rocket: 5px lower than V36 */
.cta-band.kb-rocket-cta .kb-rocket-art,
.kb-rocket-art.kb-rocket-lift-v34{
  bottom:-1px!important;
}
@media(max-width:900px){
  .cta-band.kb-rocket-cta .kb-rocket-art,
  .kb-rocket-art.kb-rocket-lift-v34{
    bottom:3px!important;
  }
}
@media(max-width:620px){
  .cta-band.kb-rocket-cta .kb-rocket-art,
  .kb-rocket-art.kb-rocket-lift-v34{
    bottom:13px!important;
  }
}

/* Mobile swipe for process + projects */
@media(max-width:760px){
  .kb-mobile-process-swiper,
  .kb-mobile-projects-swiper{
    overflow:hidden!important;
  }

  .kb-mobile-process-swiper .kb-mobile-swipe-track,
  .kb-mobile-projects-swiper .kb-mobile-swipe-track{
    display:flex!important;
    grid-template-columns:none!important;
    gap:14px!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    overscroll-behavior-inline:contain!important;
    padding:2px 2px 12px!important;
    margin-right:-14px!important;
  }
  .kb-mobile-process-swiper .kb-mobile-swipe-track::-webkit-scrollbar,
  .kb-mobile-projects-swiper .kb-mobile-swipe-track::-webkit-scrollbar{
    display:none!important;
  }

  .kb-mobile-process-swiper .kb-mobile-swipe-card{
    flex:0 0 82%!important;
    min-width:82%!important;
    scroll-snap-align:start!important;
  }

  .kb-mobile-projects-swiper .kb-mobile-swipe-card{
    flex:0 0 88%!important;
    min-width:88%!important;
    scroll-snap-align:start!important;
  }

  .kb-mobile-process-swiper .section-head,
  .kb-mobile-projects-swiper .section-head{
    margin-bottom:24px!important;
  }
}

/* V38 — arrows for mobile process/projects swipers */
.kb-mobile-section-nav{display:none}
@media(max-width:760px){
  .kb-mobile-section-nav{
    display:flex!important;align-items:center;justify-content:center;
    gap:14px;margin-top:14px
  }
  .kb-mobile-section-prev,.kb-mobile-section-next{
    width:38px;height:38px;padding:0;border-radius:50%;
    display:grid;place-items:center;
    border:1px solid rgba(36,148,255,.18);
    background:rgba(21,108,221,.06);color:#2494FF;
    transition:.2s ease;
  }
  .kb-mobile-section-prev:active,.kb-mobile-section-next:active{transform:scale(.94)}
  .kb-mobile-section-dots{display:flex;align-items:center;gap:6px}
  .kb-mobile-section-dots button{
    width:7px;height:7px;padding:0;border:0;border-radius:50%;
    background:#283548;transition:.2s ease
  }
  .kb-mobile-section-dots button.active{
    width:20px;border-radius:999px;background:#2494FF
  }
}


/* =========================================================
   V39 — SINGLE PROJECT MOBILE / ABOUT MOBILE / FOOTER CONSISTENCY
   ========================================================= */

/* Footer: homepage footer is now reused everywhere */
footer.ref-footer.site{
  width:100%;
}

/* Single project meta: cleaner desktop and compact mobile */
.kb-case-meta-v39{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin-top:32px!important;
}
.kb-case-meta-card-v39{
  position:relative!important;
  min-height:132px!important;
  padding:20px 18px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:8px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 92% 4%,rgba(36,148,255,.10),transparent 45%),
    #0b0e14!important;
}
.kb-case-meta-card-v39>i{
  width:38px!important;height:38px!important;
  display:grid!important;place-items:center!important;
  flex:0 0 38px!important;
  margin:0 0 3px!important;
  border-radius:10px!important;
  border:1px solid rgba(36,148,255,.18)!important;
  background:rgba(21,108,221,.07)!important;
  color:#2494FF!important;
  font-size:1rem!important;
}
.kb-case-meta-card-v39 .kb-case-meta-label{
  margin:0!important;
  color:#75869b!important;
  font:800 .57rem var(--font-mono)!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
}
.kb-case-meta-card-v39 .kb-case-meta-value{
  margin:0!important;
  color:#f0f4f9!important;
  font-size:.9rem!important;
  line-height:1.45!important;
  overflow-wrap:anywhere!important;
}

/* About intro: more polished and much better on mobile */
.kb-about-intro-v39{
  padding-top:86px!important;
  padding-bottom:82px!important;
}
.kb-about-intro-v39 .kb-about-intro-grid{
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr)!important;
  gap:70px!important;
  align-items:end!important;
}
.kb-about-intro-v39 .kb-about-intro-title h1{
  max-width:720px!important;
  font-size:clamp(2.8rem,4.8vw,5rem)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
}
.kb-about-intro-v39 .kb-about-intro-copy{
  padding:30px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 100% 0,rgba(36,148,255,.10),transparent 38%),
    rgba(255,255,255,.018)!important;
}
.kb-about-intro-v39 .kb-about-intro-copy>p{
  margin:0 0 26px!important;
  color:#a8b3c1!important;
  font-size:1rem!important;
  line-height:1.75!important;
}
.kb-about-stats-v39{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:10px!important;
}
.kb-about-stats-v39>div{
  min-width:0!important;
  padding:18px 14px!important;
  border-radius:13px!important;
  border:1px solid rgba(36,148,255,.12)!important;
  background:rgba(21,108,221,.045)!important;
}
.kb-about-stats-v39 b{
  display:block!important;
  margin-bottom:5px!important;
  color:#2494FF!important;
  font-size:1.65rem!important;
  line-height:1!important;
}
.kb-about-stats-v39 span{
  display:block!important;
  color:#8997a9!important;
  font-size:.67rem!important;
  line-height:1.45!important;
}

/* Tablet */
@media(max-width:980px){
  .kb-case-meta-v39{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .kb-about-intro-v39 .kb-about-intro-grid{
    grid-template-columns:1fr!important;
    gap:34px!important;
  }
  .kb-about-intro-v39 .kb-about-intro-copy{
    max-width:760px!important;
  }
}

/* Mobile */
@media(max-width:680px){
  .kb-case-meta-v39{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    margin-top:24px!important;
  }
  .kb-case-meta-card-v39{
    min-height:118px!important;
    padding:15px 13px!important;
    border-radius:14px!important;
    gap:6px!important;
  }
  .kb-case-meta-card-v39>i{
    width:32px!important;height:32px!important;
    flex-basis:32px!important;
    font-size:.9rem!important;
    border-radius:9px!important;
  }
  .kb-case-meta-card-v39 .kb-case-meta-label{
    font-size:.50rem!important;
    letter-spacing:.075em!important;
  }
  .kb-case-meta-card-v39 .kb-case-meta-value{
    font-size:.78rem!important;
    line-height:1.35!important;
  }
  /* Services meta gets full width because it carries more text */
  .kb-case-meta-card-v39:last-child{
    grid-column:1 / -1!important;
    min-height:auto!important;
  }

  .kb-about-intro-v39{
    padding-top:64px!important;
    padding-bottom:62px!important;
  }
  .kb-about-intro-v39 .kb-about-intro-grid{
    gap:24px!important;
  }
  .kb-about-intro-v39 .kb-about-intro-title h1{
    font-size:clamp(2.25rem,10.5vw,3.2rem)!important;
    line-height:1!important;
  }
  .kb-about-intro-v39 .kb-about-intro-copy{
    padding:20px!important;
    border-radius:17px!important;
  }
  .kb-about-intro-v39 .kb-about-intro-copy>p{
    font-size:.93rem!important;
    line-height:1.7!important;
    margin-bottom:20px!important;
  }
  .kb-about-stats-v39{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .kb-about-stats-v39>div{
    padding:14px 8px!important;
    border-radius:11px!important;
  }
  .kb-about-stats-v39 b{
    font-size:1.3rem!important;
  }
  .kb-about-stats-v39 span{
    font-size:.56rem!important;
    line-height:1.35!important;
  }
}
@media(max-width:420px){
  .kb-case-meta-v39{
    grid-template-columns:1fr 1fr!important;
  }
  .kb-about-stats-v39{
    grid-template-columns:1fr!important;
  }
  .kb-about-stats-v39>div{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    padding:13px 14px!important;
  }
  .kb-about-stats-v39 b{
    min-width:52px!important;
    margin:0!important;
  }
  .kb-about-stats-v39 span{
    font-size:.68rem!important;
  }
}


/* =========================================================
   V40 — MOBILE REDESIGN: ABOUT STATS + SINGLE PROJECT META
   ========================================================= */

/* Single Project metadata — reset old positioning completely */
.kb-case-meta-v39{
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.kb-case-meta-v39 .kb-case-meta-card-v39{
  position:relative!important;
  overflow:hidden!important;
}
.kb-case-meta-v39 .kb-case-meta-card-v39>i{
  position:static!important;
  top:auto!important;
  left:auto!important;
  margin:0!important;
}
.kb-case-meta-v39 .kb-case-meta-card-v39 .kb-case-meta-label,
.kb-case-meta-v39 .kb-case-meta-card-v39 .kb-case-meta-value{
  position:static!important;
  transform:none!important;
}

/* About statistics — one designed component rather than oversized boxes */
.kb-about-intro-v39 .kb-about-stats-v39{
  overflow:hidden!important;
  border:1px solid rgba(36,148,255,.16)!important;
  border-radius:15px!important;
  background:
    linear-gradient(135deg,rgba(21,108,221,.075),rgba(36,148,255,.018))!important;
}
.kb-about-intro-v39 .kb-about-stats-v39>div{
  position:relative!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.kb-about-intro-v39 .kb-about-stats-v39>div+div:before{
  content:"";
  position:absolute;
  left:0;
  top:18%;
  bottom:18%;
  width:1px;
  background:linear-gradient(to bottom,transparent,#2494FF,transparent);
  opacity:.38;
}

/* MOBILE — the exact layouts that were colliding */
@media(max-width:680px){

  /* ---- SINGLE PROJECT ---- */
  .case-hero.kb-case-hero .kb-case-meta-v39{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin:24px 0 28px!important;
    padding:0!important;
  }

  .case-hero.kb-case-hero .kb-case-meta-v39 .kb-case-meta-card-v39{
    min-height:0!important;
    padding:15px!important;
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:10px!important;
    row-gap:9px!important;
    align-items:center!important;
    justify-content:initial!important;
    border-radius:14px!important;
    border:1px solid rgba(36,148,255,.14)!important;
    background:
      radial-gradient(circle at 100% 0,rgba(36,148,255,.10),transparent 45%),
      linear-gradient(145deg,#0b0f16,#090c12)!important;
    box-shadow:none!important;
  }

  .case-hero.kb-case-hero .kb-case-meta-v39 .kb-case-meta-card-v39>i{
    grid-column:1!important;
    grid-row:1!important;
    position:static!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    flex:0 0 32px!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:9px!important;
    border:1px solid rgba(36,148,255,.18)!important;
    background:rgba(21,108,221,.075)!important;
    color:#2494FF!important;
    font-size:.9rem!important;
  }

  .case-hero.kb-case-hero .kb-case-meta-v39 .kb-case-meta-label{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    margin:0!important;
    padding:0!important;
    color:#72839a!important;
    font:800 .50rem/1 var(--font-mono)!important;
    letter-spacing:.09em!important;
    white-space:nowrap!important;
  }

  .case-hero.kb-case-hero .kb-case-meta-v39 .kb-case-meta-value{
    grid-column:1 / -1!important;
    grid-row:2!important;
    margin:0!important;
    padding:0!important;
    color:#f3f7fb!important;
    font-size:.80rem!important;
    line-height:1.4!important;
    font-weight:700!important;
    overflow-wrap:anywhere!important;
  }

  .case-hero.kb-case-hero .kb-case-meta-v39 .kb-case-meta-card-v39:last-child{
    grid-column:1 / -1!important;
  }
  .case-hero.kb-case-hero .kb-case-meta-v39 .kb-case-meta-card-v39:last-child .kb-case-meta-value{
    color:#9ed2ff!important;
  }

  /* ---- ABOUT INTRO ---- */
  .kb-about-intro-v39{
    padding-top:58px!important;
    padding-bottom:58px!important;
  }
  .kb-about-intro-v39 .kb-about-intro-grid{
    gap:22px!important;
  }
  .kb-about-intro-v39 .kb-about-intro-title h1{
    max-width:100%!important;
    font-size:clamp(2.2rem,10vw,3rem)!important;
    line-height:1.01!important;
    letter-spacing:-.05em!important;
  }
  .kb-about-intro-v39 .kb-about-intro-copy{
    padding:20px 18px!important;
    border-radius:18px!important;
    background:
      radial-gradient(circle at 100% 0,rgba(36,148,255,.09),transparent 42%),
      linear-gradient(145deg,#0b1017,#090c12)!important;
  }
  .kb-about-intro-v39 .kb-about-intro-copy>p{
    margin:0 0 20px!important;
    font-size:.92rem!important;
    line-height:1.68!important;
    color:#aab5c3!important;
  }

  .kb-about-intro-v39 .kb-about-stats-v39{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0!important;
    margin-top:0!important;
    border-radius:14px!important;
  }
  .kb-about-intro-v39 .kb-about-stats-v39>div{
    min-height:92px!important;
    padding:15px 9px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
    gap:6px!important;
  }
  .kb-about-intro-v39 .kb-about-stats-v39 b{
    min-width:0!important;
    margin:0!important;
    color:#2494FF!important;
    font-size:1.38rem!important;
    line-height:1!important;
    letter-spacing:-.04em!important;
  }
  .kb-about-intro-v39 .kb-about-stats-v39 span{
    margin:0!important;
    color:#7f8ea2!important;
    font-size:.55rem!important;
    line-height:1.35!important;
  }
}

/* Extra-small phones: keep the compact design, never stack into giant boxes */
@media(max-width:420px){
  .case-hero.kb-case-hero .kb-case-meta-v39{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .case-hero.kb-case-hero .kb-case-meta-v39 .kb-case-meta-card-v39{
    padding:13px!important;
    grid-template-columns:29px minmax(0,1fr)!important;
    column-gap:8px!important;
  }
  .case-hero.kb-case-hero .kb-case-meta-v39 .kb-case-meta-card-v39>i{
    width:29px!important;height:29px!important;min-width:29px!important;
  }
  .case-hero.kb-case-hero .kb-case-meta-v39 .kb-case-meta-value{
    font-size:.74rem!important;
  }

  .kb-about-intro-v39 .kb-about-stats-v39{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .kb-about-intro-v39 .kb-about-stats-v39>div{
    min-height:86px!important;
    padding:13px 7px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:5px!important;
  }
  .kb-about-intro-v39 .kb-about-stats-v39 b{
    min-width:0!important;
    font-size:1.25rem!important;
  }
  .kb-about-intro-v39 .kb-about-stats-v39 span{
    font-size:.50rem!important;
    line-height:1.3!important;
  }
}

/* =========================================================
   V42 — ALWAYS VISIBLE STICKY HEADER
   ========================================================= */
.nav,
.nav.kb-smart-scroll,
.nav.kb-smart-scroll.kb-nav-hidden,
.nav.kb-smart-scroll.kb-nav-visible{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:9997!important;
  transform:translateY(0)!important;
  opacity:1!important;
  visibility:visible!important;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease!important;
}
.nav.kb-scrolled{
  background:rgba(5,8,13,.88)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.22)!important;
}
body{padding-top:var(--nav-h)!important;}
.kb-mobile-menu{z-index:9999!important;}

/* v1.8 — portfolio showcase + trust modal */
.kb-trust-modal{position:fixed;inset:0;z-index:99998;display:grid;place-items:center;padding:28px;opacity:0;visibility:hidden;transition:.35s ease}.kb-trust-modal.is-open{opacity:1;visibility:visible}.kb-trust-backdrop{position:absolute;inset:0;background:rgba(2,6,12,.82);backdrop-filter:blur(10px)}.kb-trust-panel{position:relative;width:min(1040px,100%);max-height:min(760px,90vh);overflow:auto;padding:52px;border:1px solid rgba(255,255,255,.13);border-radius:34px;background:radial-gradient(circle at 75% 15%,rgba(36,148,255,.22),transparent 34%),linear-gradient(135deg,#0b1c31,#07101d 58%,#102b50);box-shadow:0 35px 100px rgba(0,0,0,.5);color:#fff;transform:translateY(24px) scale(.98);transition:.4s cubic-bezier(.2,.8,.2,1)}.is-open .kb-trust-panel{transform:none}.kb-trust-close{position:absolute;right:24px;top:18px;width:42px;height:42px;border:0;background:transparent;color:#fff;font-size:34px;cursor:pointer}.kb-trust-kicker{font:700 .72rem/1.2 monospace;letter-spacing:.18em;color:#63b4ff}.kb-trust-panel h2{font-size:clamp(2.4rem,5vw,5rem);line-height:.94;max-width:760px;margin:14px 0 14px}.kb-trust-panel>p{max-width:700px;color:#b9c7d8;font-size:1.05rem}.kb-trust-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:34px 0}.kb-trust-logo{min-height:118px;display:flex;align-items:center;justify-content:center;padding:22px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(255,255,255,.035);position:relative}.kb-trust-logo img{max-width:150px;max-height:56px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(0) invert(1);opacity:.88}.kb-trust-logo span{position:absolute;left:14px;bottom:10px;font-size:.66rem;color:#8ea4bb;opacity:0}.kb-trust-logo:hover{background:rgba(255,255,255,.07);transform:translateY(-2px)}.kb-trust-link{display:inline-flex;gap:8px;align-items:center;color:#fff;font-weight:700}.kb-modal-open{overflow:hidden}

/* Portfolio cards: image-first, premium editorial presentation */
.kb-project-feature{position:relative;display:block;min-height:clamp(460px,62vw,720px);border-radius:28px;overflow:hidden;background:#0a111b;border:1px solid rgba(255,255,255,.12);isolation:isolate}.kb-project-feature-visual{position:absolute;inset:0}.kb-project-feature-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,10,.08) 20%,rgba(2,6,10,.18) 50%,rgba(2,6,10,.88) 100%)}.kb-project-feature-visual img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.kb-project-feature:hover .kb-project-feature-visual img{transform:scale(1.025)}.kb-project-feature-info{position:absolute;inset:0;z-index:2;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}.kb-project-number{position:absolute;right:26px;top:24px;font:700 .76rem/1 monospace;letter-spacing:.12em}.kb-project-feature .work-tags{position:absolute;left:26px;top:24px;display:flex;gap:8px;flex-wrap:wrap}.kb-project-feature .work-tags span{padding:9px 14px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(4,10,18,.36);backdrop-filter:blur(12px);font-size:.76rem}.kb-project-feature h3{font-size:clamp(2.2rem,5vw,5.4rem);line-height:.92;letter-spacing:-.055em;max-width:850px;margin:0 0 12px;color:#fff}.kb-project-feature p{max-width:700px;color:#dce6f2;font-size:1rem;margin:0 0 14px}.kb-project-detail-line{color:#8fc9ff;font-size:.85rem;font-weight:700}.kb-project-feature .link-arrow{margin-top:16px;color:#fff;font-weight:700}

/* Homepage project cards use the same visual language */
.work-card .work-thumb{border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:#09111d}.work-card .work-thumb img{width:100%;height:100%;object-fit:cover}.work-card .work-info h3{letter-spacing:-.035em}

@media(max-width:780px){.kb-trust-modal{padding:14px}.kb-trust-panel{padding:38px 20px 24px;border-radius:24px}.kb-trust-panel h2{font-size:2.6rem}.kb-trust-logos{grid-template-columns:repeat(2,1fr);gap:8px;margin:24px 0}.kb-trust-logo{min-height:92px;padding:14px}.kb-trust-logo img{max-width:112px;max-height:44px}.kb-project-feature{min-height:520px;border-radius:22px}.kb-project-feature-info{padding:20px}.kb-project-feature .work-tags{left:18px;top:18px;right:60px}.kb-project-number{right:18px;top:22px}.kb-project-feature h3{font-size:2.65rem}.kb-project-feature p{font-size:.94rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}


/* =========================================================
   V1.9 — REAL PORTFOLIO VISUAL SYSTEM
   Image-first cards inspired by the supplied reference.
   ========================================================= */
.kb-project-list{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
  align-items:start!important;
}
.kb-project-showcase-card{
  display:block!important;
  text-decoration:none!important;
  color:#fff!important;
  min-width:0!important;
}
.kb-project-showcase-media{
  position:relative!important;
  aspect-ratio:4/5!important;
  overflow:hidden!important;
  border-radius:24px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:#0a0d13!important;
  box-shadow:0 24px 64px rgba(0,0,0,.26)!important;
  isolation:isolate!important;
}
.kb-project-showcase-media>img{
  width:100%!important;height:100%!important;display:block!important;
  object-fit:cover!important;object-position:top center!important;
  transform:scale(1.005)!important;
  transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .5s ease!important;
}
.kb-project-showcase-card:hover .kb-project-showcase-media>img{
  transform:scale(1.045)!important;
  filter:saturate(1.04) contrast(1.02)!important;
}
.kb-project-showcase-shade{
  position:absolute!important;inset:0!important;z-index:1!important;
  background:
    linear-gradient(180deg,rgba(3,7,14,.28) 0%,rgba(3,7,14,.03) 34%,rgba(3,7,14,.18) 58%,rgba(3,7,14,.94) 100%)!important;
}
.kb-project-showcase-tags{
  position:absolute!important;top:22px!important;left:22px!important;right:22px!important;
  display:flex!important;gap:8px!important;flex-wrap:wrap!important;z-index:3!important;
}
.kb-project-showcase-tags span{
  display:inline-flex!important;align-items:center!important;height:32px!important;padding:0 13px!important;
  border-radius:999px!important;background:rgba(7,10,16,.42)!important;
  border:1px solid rgba(255,255,255,.22)!important;backdrop-filter:blur(12px)!important;
  color:#fff!important;font-size:.71rem!important;letter-spacing:.04em!important;
}
.kb-project-showcase-market{
  position:absolute!important;top:22px!important;right:22px!important;z-index:4!important;
  display:none!important;
}
.kb-project-showcase-copy{
  position:absolute!important;left:24px!important;right:24px!important;bottom:24px!important;z-index:3!important;
}
.kb-project-showcase-kicker{
  display:block!important;margin-bottom:9px!important;color:#6bb6ff!important;
  font-family:'JetBrains Mono',monospace!important;font-size:.67rem!important;letter-spacing:.09em!important;
}
.kb-project-showcase-copy h3{
  color:#fff!important;font-size:clamp(1.55rem,2.1vw,2.25rem)!important;
  line-height:1!important;letter-spacing:-.035em!important;margin:0 0 11px!important;
}
.kb-project-showcase-copy p{
  color:rgba(255,255,255,.77)!important;font-size:.88rem!important;line-height:1.55!important;
  margin:0 0 17px!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;overflow:hidden!important;
}
.kb-project-showcase-link{
  color:#fff!important;display:inline-flex!important;align-items:center!important;gap:8px!important;
  font-weight:700!important;font-size:.82rem!important;
}
.kb-project-showcase-link i{color:#2494ff!important;transition:transform .25s ease!important}
.kb-project-showcase-card:hover .kb-project-showcase-link i{transform:translate(3px,-3px)!important}

/* Homepage keeps the existing mobile-swipe architecture, only the card visual changes. */
.work-grid:has(.kb-project-showcase-card){
  align-items:stretch!important;
}
.work-grid .kb-project-showcase-card{min-width:0!important}

/* Entrance brand popup — compact premium version of supplied reference */
.kb-trust-modal{
  position:fixed!important;inset:0!important;z-index:999990!important;
  display:grid!important;place-items:center!important;padding:24px!important;
  opacity:0!important;visibility:hidden!important;transition:opacity .35s ease,visibility .35s ease!important;
}
.kb-trust-modal.is-open{opacity:1!important;visibility:visible!important}
.kb-trust-backdrop{
  position:absolute!important;inset:0!important;background:rgba(0,4,10,.82)!important;
  backdrop-filter:blur(10px)!important;
}
.kb-trust-panel{
  width:min(1040px,94vw)!important;max-height:min(700px,88vh)!important;overflow:auto!important;
  position:relative!important;z-index:2!important;border-radius:30px!important;padding:56px 62px 48px!important;
  background:
    radial-gradient(circle at 92% 5%,rgba(36,148,255,.32),transparent 34%),
    radial-gradient(circle at 0 100%,rgba(21,108,221,.24),transparent 36%),
    linear-gradient(135deg,#0b1b32,#102b52)!important;
  border:1px solid rgba(87,174,255,.35)!important;
  box-shadow:0 38px 120px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.08)!important;
}
.kb-trust-panel:before{
  content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;border-radius:inherit!important;
  opacity:.14!important;background-image:
  radial-gradient(circle at 20% 40%,#fff 0 1px,transparent 1.2px),
  radial-gradient(circle at 70% 70%,#fff 0 1px,transparent 1.2px)!important;background-size:34px 34px,46px 46px!important;
}
.kb-trust-close{
  position:absolute!important;right:24px!important;top:20px!important;width:42px!important;height:42px!important;
  border-radius:50%!important;border:1px solid rgba(255,255,255,.18)!important;background:rgba(0,0,0,.14)!important;
  color:#fff!important;font-size:28px!important;cursor:pointer!important;z-index:4!important;
}
.kb-trust-kicker{
  display:block!important;text-align:center!important;color:#83c6ff!important;
  font-family:'JetBrains Mono',monospace!important;font-size:.75rem!important;letter-spacing:.17em!important;margin-bottom:10px!important;
}
.kb-trust-panel h2{
  color:#fff!important;text-align:center!important;margin:0!important;font-size:clamp(2.25rem,5vw,4.9rem)!important;
  line-height:.98!important;letter-spacing:-.055em!important;
}
.kb-trust-panel>p{
  max-width:680px!important;margin:16px auto 36px!important;text-align:center!important;
  color:rgba(255,255,255,.72)!important;font-size:.97rem!important;
}
.kb-trust-logos{
  position:relative!important;z-index:2!important;display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px 16px!important;
}
.kb-trust-logo{
  min-height:96px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  border-radius:18px!important;background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.09)!important;padding:18px!important;
}
.kb-trust-logo img{
  max-width:150px!important;max-height:54px!important;width:auto!important;height:auto!important;object-fit:contain!important;
  filter:grayscale(1) brightness(0) invert(1)!important;
  mix-blend-mode:screen!important;opacity:.92!important;
}
.kb-trust-logo span{display:none!important}
.kb-trust-link{
  position:relative!important;z-index:2!important;margin:30px auto 0!important;width:max-content!important;
  display:flex!important;align-items:center!important;gap:9px!important;color:#fff!important;text-decoration:none!important;
  border:1px solid rgba(255,255,255,.2)!important;border-radius:999px!important;padding:12px 18px!important;
}
html.kb-modal-open{overflow:hidden!important}

@media(max-width:980px){
  .kb-project-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .kb-trust-panel{padding:48px 34px 38px!important}
  .kb-trust-logos{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:680px){
  .kb-project-list{grid-template-columns:1fr!important;gap:18px!important}
  .kb-project-showcase-media{aspect-ratio:4/4.9!important;border-radius:20px!important}
  .kb-project-showcase-copy{left:20px!important;right:20px!important;bottom:20px!important}
  .kb-project-showcase-tags{top:17px!important;left:17px!important;right:17px!important}
  .kb-project-showcase-copy p{-webkit-line-clamp:2!important}
  .kb-trust-modal{padding:12px!important}
  .kb-trust-panel{width:100%!important;padding:46px 18px 28px!important;border-radius:24px!important}
  .kb-trust-panel h2{font-size:2.5rem!important}
  .kb-trust-panel>p{font-size:.88rem!important;margin-bottom:24px!important}
  .kb-trust-logos{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .kb-trust-logo{min-height:78px!important;padding:13px!important}
  .kb-trust-logo img{max-width:112px!important;max-height:44px!important}
}