:root{
  --ink:        #0a2540;
  --ink-2:      #143b66;
  --primary:    #1a6fb5;
  --primary-2:  #2f8fd6;
  --sky:        #7cc5e8;
  --ice:        #e8f4fb;
  --mist:       #f3f9fd;
  --paper:      #fafcfe;
  --line:       #d8e7f2;
  --mint:       #3fb99a;
  --shadow:     0 30px 60px -30px rgba(10, 37, 64, .25);
  --radius:     22px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Montserrat', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing:antialiased;
  font-feature-settings: "ss01","cv11";
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-0.02em}
p{margin:0}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace; font-feature-settings:"zero"}
::selection{background:var(--ink); color:#fff}

/* container */
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}
@media (max-width:720px){ .wrap{padding:0 20px} }

/* nav */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(250,252,254,0.72);
  border-bottom: 1px solid rgba(216,231,242,0.6);
  transition: background .25s ease, border-color .25s ease;
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:74px}
.nav-links{display:flex; gap:8px; align-items:center}
.nav-links a{
  padding:10px 16px; border-radius:999px; font-size:14px; font-weight:500;
  color:var(--ink-2); transition: background .18s ease, color .18s ease;
}
.nav-links a:hover{ background: var(--ice); color:var(--ink) }
.nav-cta{
  padding:10px 18px; border-radius:999px; background:var(--ink); color:#fff!important;
  font-weight:600; font-size:14px; display:inline-flex; gap:8px; align-items:center;
  transition: transform .18s ease, background .18s ease;
}
.nav-cta:hover{ background: var(--primary); transform: translateY(-1px) }
.nav-right{display:flex; gap:14px; align-items:center}
.lang-toggle{ display:flex; gap:2px; padding:3px; background:var(--ice); border-radius:999px; font-size:12px }
.lang-toggle button{ padding:6px 12px; border-radius:999px; font-weight:600; color:var(--ink-2)}
.lang-toggle button.on{ background:#fff; color:var(--ink); box-shadow: 0 1px 3px rgba(10,37,64,.1)}
.hamburger{
  display:none; width:40px; height:40px; border-radius:10px;
  align-items:center; justify-content:center; color:var(--ink);
}
.hamburger:hover{ background:var(--ice) }
@media (max-width:880px){
  .nav-links{display:none}
  .hamburger{display:inline-flex}
  .nav-cta-desktop{display:none}
  .lang-toggle{display:none}
}
.mobile-menu{
  display:flex; flex-direction:column; padding:8px 20px 20px;
  border-top:1px solid var(--line); background:rgba(250,252,254,0.97);
}
.mobile-menu a{
  padding:14px 0; font-size:16px; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.mobile-menu a:last-child{ border-bottom:0 }

/* logo lockup */
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{ width:44px; height:44px; flex:0 0 auto; }
.brand-word{ font-weight:800; font-size:20px; letter-spacing:0.18em; color:var(--ink) }

/* hero */
.hero{
  position:relative;
  padding: 150px 0 80px;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(124,197,232,0.28), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(63,185,154,0.10), transparent 60%),
    linear-gradient(180deg, var(--mist) 0%, var(--paper) 60%);
}
.hero-grid{
  display:grid; grid-template-columns: 1.15fr 0.85fr; gap:60px; align-items:center;
}
@media(max-width:980px){ .hero-grid{grid-template-columns:1fr; gap:40px} }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:8px 14px;
  border-radius:999px; background:#fff; border:1px solid var(--line);
  font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--primary); box-shadow: 0 4px 12px -8px rgba(10,37,64,.15);
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(63,185,154,.18); animation: pulse 2.4s ease-in-out infinite }
@keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(63,185,154,0)} }

h1.display{
  font-size: clamp(48px, 7.4vw, 104px);
  line-height: 0.94;
  font-weight: 800;
  letter-spacing:-0.035em;
  margin: 22px 0 24px;
  color: var(--ink);
}
h1.display em{ font-style:italic; font-weight: 300; color: var(--primary); }
h1.display .underlined{
  background: linear-gradient(180deg, transparent 72%, rgba(124,197,232,0.55) 72%);
  padding: 0 .04em;
}
.hero-tag{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  font-size:14px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-2);
}
.hero-tag .sep{ width:6px; height:6px; border-radius:50%; background: var(--primary)}
.hero-lead{
  max-width: 540px; font-size: 17px; line-height: 1.6; color: var(--ink-2);
  margin: 28px 0 36px; font-weight:400;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center }
.btn{
  padding:16px 26px; border-radius:999px; font-weight:600; font-size:15px;
  display:inline-flex; gap:10px; align-items:center; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{ background:var(--ink); color:#fff }
.btn-primary:hover{ background:var(--primary); transform:translateY(-2px); box-shadow: 0 16px 30px -16px rgba(26,111,181,.6)}
.btn-ghost{ color:var(--ink); border:1px solid var(--line); background:#fff }
.btn-ghost:hover{ border-color: var(--ink); transform:translateY(-2px) }
.btn .arr{ transition: transform .25s ease }
.btn:hover .arr{ transform: translateX(4px) }
.play-icon{
  width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}

/* hero visual: drum */
.drum-wrap{ position:relative; aspect-ratio: 1; width: min(540px, 80vw); margin-left:auto }
@media(max-width:980px){ .drum-wrap{ margin: 0 auto } }
.drum{
  position:absolute; inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0%, var(--ice) 35%, #cfe6f4 70%, #a3cce3 100%);
  box-shadow:
    inset 0 0 0 14px rgba(255,255,255,.85),
    inset 0 0 0 16px rgba(26,111,181,.18),
    inset 0 -30px 80px rgba(10,37,64,.12),
    0 50px 100px -40px rgba(10,37,64,.4);
}
.drum-ring{
  position:absolute; inset:7%; border-radius:50%;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.5), transparent 60%),
    conic-gradient(from 0deg,#1a6fb5,#2f8fd6,#7cc5e8,#1a6fb5,#0a2540,#1a6fb5);
  filter: blur(0.4px);
  animation: spin 14s linear infinite;
  mask: radial-gradient(circle, transparent 56%, #000 56.5%, #000 100%);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 56.5%, #000 100%);
}
@keyframes spin { to{ transform: rotate(360deg) } }
.drum-glass{
  position:absolute; inset:14%; border-radius:50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.6), transparent 38%),
    radial-gradient(circle at 65% 75%, rgba(124,197,232,.45), transparent 50%),
    linear-gradient(160deg, rgba(26,111,181,.55), rgba(10,37,64,.85));
  box-shadow:
    inset 0 0 60px rgba(10,37,64,.4),
    inset 0 0 0 2px rgba(255,255,255,.3);
}
.drum-bubble{
  position:absolute; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.4));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  opacity:.7;
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-14px) } }

.infinity-mark{
  position:absolute; inset:30%;
  display:grid; place-items:center;
  animation: gentle 8s ease-in-out infinite;
}
@keyframes gentle { 0%,100%{transform: rotate(-2deg)} 50%{transform: rotate(2deg)} }

/* marquee */
.marquee{
  margin-top:90px; overflow:hidden; padding: 22px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: #fff;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track{
  display:flex; gap:50px; align-items:center; width:max-content;
  animation: marquee 38s linear infinite;
  font-size:34px; font-weight:800; letter-spacing:-0.02em; color:var(--ink);
}
.marquee-track span.dot{ width:10px; height:10px; border-radius:50%; background:var(--primary) }
.marquee-track span.italic{ font-style:italic; font-weight:300; color:var(--primary)}
@keyframes marquee { to { transform: translateX(-50%) } }

/* sections */
section{ padding: 110px 0; position:relative }
.section-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace; font-size:12px;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--primary);
  margin-bottom:18px;
}
.section-tag::before{
  content:''; width:24px; height:1px; background:var(--primary);
}
h2.section-title{
  font-size: clamp(36px, 4.6vw, 64px); line-height:1.02; font-weight:800;
  letter-spacing:-0.03em; max-width: 18ch;
}
h2.section-title em{ font-style:italic; font-weight:300; color:var(--primary)}

/* metrics */
.metrics{
  display:grid; grid-template-columns: repeat(4, 1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:#fff;
}
@media(max-width:780px){ .metrics{grid-template-columns: repeat(2,1fr)} }
.metric{
  padding: 44px 28px; border-right:1px solid var(--line); position:relative;
}
.metric:last-child{ border-right:0 }
@media(max-width:780px){
  .metric:nth-child(2n){ border-right:0 }
  .metric:nth-child(-n+2){ border-bottom:1px solid var(--line)}
}
.metric .num{
  font-size: clamp(48px, 6vw, 84px); font-weight:800; letter-spacing:-0.04em;
  color:var(--ink); line-height:1; display:flex; align-items:baseline; gap:6px;
}
.metric .num sup{ font-size: 0.4em; color: var(--primary); font-weight:600; top:-0.6em}
.metric .label{ margin-top:14px; font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-2)}
.metric .desc{ margin-top:8px; font-size:14px; color: var(--ink-2); opacity:.75 }

/* about split */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap:80px; align-items:start }
@media(max-width:980px){ .split{grid-template-columns:1fr; gap:40px} }

.feature-card{
  padding: 32px; border-radius:var(--radius); background:#fff; border:1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover{ border-color: var(--primary); transform:translateY(-3px); box-shadow: var(--shadow)}
.feature-card h3{ font-size:22px; margin-bottom:10px }
.feature-card p{ font-size:15px; line-height:1.6; color:var(--ink-2)}
.feature-card .icon{
  width:46px; height:46px; border-radius:14px; background:var(--ice); color:var(--primary);
  display:grid; place-items:center; margin-bottom:18px;
}

/* services tabs */
.industry-tabs{
  display:flex; gap:6px; padding:6px; background:var(--ice); border-radius:999px;
  width:max-content; margin: 30px 0 32px; flex-wrap:wrap;
}
.industry-tabs button{
  padding:10px 18px; border-radius:999px; font-size:13px; font-weight:600;
  color:var(--ink-2); transition: all .2s ease;
}
.industry-tabs button.on{ background:var(--ink); color:#fff }
.industry-tabs button:not(.on):hover{ background:#fff }

.industry-panel{
  display:grid; grid-template-columns: 1fr 1.1fr; gap:0; border-radius: var(--radius); overflow:hidden;
  background:#fff; border:1px solid var(--line); min-height: 460px;
}
@media(max-width:880px){ .industry-panel{ grid-template-columns: 1fr } }
.industry-img{
  background-color: var(--ice);
  background-size: cover; background-position:center;
  position:relative; min-height: 320px;
}
.industry-img::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(10,37,64,.1), rgba(26,111,181,.5));
  mix-blend-mode: multiply;
}
.industry-img .placeholder{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, var(--primary), var(--ink-2));
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:12px; color:rgba(255,255,255,.85);
  text-transform:uppercase; letter-spacing:0.14em;
}
.industry-content{ padding: 48px; display:flex; flex-direction:column; justify-content:space-between }
.industry-content h3{ font-size:30px; letter-spacing:-0.02em; margin-bottom:18px }
.industry-content p{ font-size:15px; line-height:1.65; color:var(--ink-2); margin-bottom:14px}
.iso-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; background: var(--mist); border:1px solid var(--line);
  border-radius:999px; font-size:12px; font-weight:600; color:var(--primary);
  letter-spacing:0.1em;
}

/* process */
.process{
  position:relative; padding:80px 0 110px;
  background: linear-gradient(180deg, var(--ink) 0%, #061a2e 100%); color: #fff;
  overflow:hidden;
}
.process .ring{
  position:absolute; right:-200px; top:50%; transform:translateY(-50%);
  width:700px; height:700px; border-radius:50%;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow:
    inset 0 0 0 80px rgba(255,255,255,.02),
    inset 0 0 0 200px rgba(255,255,255,.02);
}
.process h2{ color:#fff }
.process h2 em{ color: var(--sky)}
.process .section-tag{ color: var(--sky)}
.process .section-tag::before{ background: var(--sky)}
.process-steps{
  display:grid; grid-template-columns: repeat(5, 1fr); gap:24px; margin-top:60px; position:relative;
}
@media(max-width:980px){ .process-steps{ grid-template-columns: repeat(2,1fr) } }
@media(max-width:520px){ .process-steps{ grid-template-columns: 1fr } }
.process-step{
  padding: 28px 24px; border-radius:18px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  transition: all .25s ease;
}
.process-step:hover{ background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); transform:translateY(-3px) }
.process-step .step-num{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--sky);
  letter-spacing:0.16em; margin-bottom: 26px;
}
.process-step h4{ font-size:18px; font-weight:700; margin-bottom:8px; line-height:1.25}
.process-step p{ font-size:13px; color: rgba(255,255,255,.65); line-height:1.55}
.process-step .step-icon{
  width:40px; height:40px; border-radius:12px;
  background: rgba(124,197,232,.15); color:var(--sky);
  display:grid; place-items:center; margin-bottom: 18px;
}
.process-cta{
  margin-top: 56px; display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}

/* clients */
.client-strip{
  display:grid; grid-template-columns: repeat(5,1fr); gap:0;
  border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background:#fff;
  margin-top: 50px;
}
@media(max-width:880px){ .client-strip{ grid-template-columns: repeat(3,1fr) } }
@media(max-width:520px){ .client-strip{ grid-template-columns: repeat(2,1fr) } }
.client-cell{
  aspect-ratio: 1.6/1; display:grid; place-items:center;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  color:var(--ink-2); font-weight:600; font-size:14px; letter-spacing:0.04em;
  transition: background .2s ease, color .2s ease;
  text-align:center; padding: 12px;
}
.client-cell:hover{ background: var(--ice); color: var(--ink)}

/* testimonial */
.testimonial{
  padding: 100px 0; background: var(--mist); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.testimonial-card{
  max-width: 880px; margin: 0 auto; text-align:center;
}
.testimonial-card .quote{
  font-size: clamp(28px, 3.4vw, 44px); line-height:1.18; font-weight:600; letter-spacing:-0.02em;
  color:var(--ink);
}
.testimonial-card .quote::before{ content:'\201E'; color:var(--primary); margin-right:.1em}
.testimonial-card .quote::after{ content:'\201D'; color:var(--primary); margin-left:.1em}
.testimonial-card cite{
  display:block; margin-top: 24px; font-style:normal; font-size:13px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-2);
}
.testimonial-nav{
  display:flex; gap:10px; justify-content:center; margin-top:36px;
}
.testimonial-nav button{
  width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--line);
  color:var(--ink); display:grid; place-items:center; transition: all .18s ease;
}
.testimonial-nav button:hover{ background:var(--ink); color:#fff; border-color:var(--ink)}

/* blog */
.blog-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 50px;}
@media(max-width:1100px){ .blog-grid{ grid-template-columns: repeat(2,1fr) } }
@media(max-width:880px){ .blog-grid{ grid-template-columns: 1fr } }
.post{
  border-radius: var(--radius); overflow:hidden; background:#fff; border:1px solid var(--line);
  transition: all .25s ease;
}
.post:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--primary)}
.post-img{
  aspect-ratio: 16/10;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, var(--primary), var(--ink));
  display:grid; place-items:center;
  font-family:'JetBrains Mono',monospace; font-size:11px; color:rgba(255,255,255,.7);
  letter-spacing:0.14em; text-transform:uppercase;
}
.post-body{ padding: 26px }
.post-meta{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-2); letter-spacing:0.14em; text-transform:uppercase}
.post-body h4{ font-size:19px; line-height:1.3; margin: 12px 0 16px; font-weight:700; letter-spacing:-0.01em}
.post-link{ font-size:13px; font-weight:600; color:var(--primary); display:inline-flex; align-items:center; gap:6px}
.post-link:hover{ gap:10px }

/* CTA banner */
.cta-banner{
  padding: 100px 0; text-align:center;
  background: var(--ink); color:#fff; position:relative; overflow:hidden;
}
.cta-banner::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(800px 400px at 50% -20%, rgba(124,197,232,.25), transparent);
}
.cta-banner h2{ font-size: clamp(40px, 5vw, 76px); font-weight:800; letter-spacing:-0.03em; line-height:1; max-width: 18ch; margin:0 auto}
.cta-banner h2 em{ font-style:italic; font-weight:300; color: var(--sky)}
.cta-banner .lead{ margin-top:24px; font-size:16px; color: rgba(255,255,255,.7); max-width: 560px; margin-left:auto; margin-right:auto }
.cta-banner .actions{ margin-top: 40px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative}
.cta-banner .btn-primary{ background:#fff; color:var(--ink) }
.cta-banner .btn-primary:hover{ background: var(--sky) }
.cta-banner .btn-ghost{ background: transparent; color:#fff; border:1px solid rgba(255,255,255,.2)}
.cta-banner .btn-ghost:hover{ border-color:#fff }
.cta-big{ padding:18px 32px; font-size:17px }
.contact-details{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:24px;
  margin: 40px auto; max-width:800px;
}
@media(max-width:720px){ .contact-details{ grid-template-columns:1fr; gap:16px } }
.contact-item{
  padding:28px 20px; border-radius:16px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  text-align:center; transition: background .2s, border-color .2s, transform .2s;
  display:block; color:#fff;
}
a.contact-item:hover{ background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.25); transform:translateY(-3px) }
.contact-icon{ color:var(--sky); margin-bottom:12px }
.contact-label{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--sky); margin-bottom:8px;
}
.contact-value{ font-size:15px; font-weight:600; line-height:1.5 }

/* footer */
footer{ padding: 72px 0 30px; background: var(--paper); border-top:1px solid var(--line)}
.foot-grid{
  display:grid; grid-template-columns: 1.6fr 0.8fr 0.8fr 1fr; gap: 48px;
}
@media(max-width:880px){ .foot-grid{grid-template-columns: 1fr 1fr; gap:40px} }
@media(max-width:520px){ .foot-grid{grid-template-columns: 1fr} }
.foot h5{ font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-2); margin-bottom: 18px}
.foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px }
.foot a{ font-size:14px; color:var(--ink); transition: color .15s ease}
.foot a:hover{ color: var(--primary)}
.foot-info{ font-size:14px; color: var(--ink-2); line-height:1.7}
.newsletter{ display:flex; gap:0; margin-top:14px; max-width: 360px}
.newsletter input{
  flex:1; padding:14px 16px; border-radius:999px 0 0 999px; border:1px solid var(--line); border-right:0;
  font:inherit; font-size:14px; background:#fff;
}
.newsletter input:focus{ outline:none; border-color: var(--primary)}
.newsletter button{
  padding:14px 22px; border-radius: 0 999px 999px 0; background:var(--ink); color:#fff;
  font-weight:600; font-size:14px;
}
.newsletter button:hover{ background: var(--primary) }
.foot-bottom{
  margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--line);
  display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap;
  font-size:12px; color:var(--ink-2);
}
.foot-bottom a{ font-size:12px }
.socials{ display:flex; gap:8px}
.socials a{
  width:36px; height:36px; border-radius:50%; background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; transition: all .2s ease;
}
.socials a:hover{ background: var(--ink); color:#fff; border-color: var(--ink)}

/* logo lab */
.logo-lab{
  padding: 80px 0; background: var(--mist); border-top:1px solid var(--line); border-bottom:1px solid var(--line)
}
.lab-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top:40px}
@media(max-width:880px){ .lab-grid{ grid-template-columns: 1fr } }
.lab-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 40px; display:flex; flex-direction:column; gap:24px;
}
.lab-card .label{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-2);
}
.lab-mark{ height: 160px; display:grid; place-items:center }
.lab-card.dark{ background: var(--ink); color:#fff; border-color:var(--ink)}
.lab-card.dark .label{ color: var(--sky)}

.swatches{ display:flex; gap:8px; flex-wrap:wrap }
.sw{
  flex:1; min-width:60px; aspect-ratio: 1.2/1; border-radius:10px;
  display:flex; align-items:flex-end; justify-content:flex-start; padding:8px;
  font-family:'JetBrains Mono',monospace; font-size:9px; color:#fff; font-weight:600;
}

/* team */
.team-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; margin-top:50px;
}
@media(max-width:880px){ .team-grid{ grid-template-columns: repeat(2,1fr) } }
@media(max-width:520px){ .team-grid{ grid-template-columns: 1fr } }
.team-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; text-align:center;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.team-card:hover{ border-color:var(--primary); transform:translateY(-3px); box-shadow:var(--shadow) }
.team-photo{
  width:120px; height:120px; border-radius:50%; margin:0 auto 20px;
  overflow:hidden; background:var(--ice); border:3px solid var(--line);
}
.team-photo-placeholder{
  width:100%; height:100%;
  display:grid; place-items:center;
  color:var(--primary);
}
.team-photo img{ width:100%; height:100%; object-fit:cover }
.team-name{ font-size:18px; font-weight:700; letter-spacing:-0.01em }
.team-role{
  margin-top:6px; font-size:13px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--primary);
  font-family:'JetBrains Mono',monospace;
}
.team-join{
  margin-top:60px; padding:48px; border-radius:var(--radius);
  background:#fff; border:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
@media(max-width:880px){ .team-join{ grid-template-columns:1fr; gap:32px } }
.team-gallery{ min-height:280px; border-radius:16px; overflow:hidden }
.team-gallery-placeholder{
  width:100%; height:100%; min-height:280px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--primary), var(--ink-2));
  display:grid; place-items:center;
  font-family:'JetBrains Mono',monospace; font-size:12px; color:rgba(255,255,255,.85);
  text-transform:uppercase; letter-spacing:0.14em; border-radius:16px;
}

/* team video */
.team-video{
  margin-top:60px;
}
.video-embed{
  position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--line);
  box-shadow: var(--shadow);
}
.video-embed iframe{
  position:absolute; top:0; left:0; width:100%; height:100%;
  border-radius:var(--radius);
}

/* ═══════════════════════════════════════════════
   MOBILE OPTIMIZATIONS
   ═══════════════════════════════════════════════ */

/* prevent horizontal scroll everywhere */
html,body{ overflow-x:hidden; max-width:100vw }

@media(max-width:720px){
  /* reduce section padding on mobile */
  section{ padding: 60px 0 }
  .wrap{ padding:0 16px }

  /* hero */
  .hero{ padding:110px 0 50px }
  h1.display{ font-size: 38px; line-height:1 }
  .hero-lead{ font-size:15px; margin:20px 0 24px }
  .hero-cta{ flex-direction:column; align-items:stretch }
  .hero-cta .btn{ justify-content:center }
  .drum-wrap{ width:min(300px,70vw); margin:30px auto 0 }

  /* marquee smaller */
  .marquee{ margin-top:50px; padding:14px 0 }
  .marquee-track{ font-size:22px; gap:30px }

  /* metrics */
  .metric{ padding:28px 18px }
  .metric .num{ font-size:42px }

  /* feature cards single column */
  .feature-card h3{ font-size:18px }
  .feature-card{ padding:24px }

  /* industry tabs scroll */
  .industry-tabs{ width:100%; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch }
  .industry-tabs button{ white-space:nowrap; flex:0 0 auto }
  .industry-panel{ min-height:auto }
  .industry-content{ padding:28px 20px }
  .industry-content h3{ font-size:22px }

  /* process */
  .process{ padding:60px 0 70px }
  .process-cta{ flex-direction:column; align-items:flex-start }

  /* clients */
  .client-strip{ border-radius:16px }
  .client-cell{ padding:10px; font-size:12px }

  /* testimonial */
  .testimonial{ padding:60px 0 }

  /* blog */
  .post-body{ padding:18px }
  .post-body h4{ font-size:16px }

  /* CTA banner */
  .cta-banner{ padding:60px 0 }
  .cta-banner h2{ font-size:32px }
  .cta-banner .lead{ white-space:normal !important; font-size:14px }
  .cta-big{ padding:14px 24px; font-size:15px }
  .contact-details{ grid-template-columns:1fr; gap:12px }

  /* team */
  .team-grid{ gap:16px }
  .team-card{ padding:24px }
  .team-photo{ width:90px; height:90px }
  .team-name{ font-size:16px }
  .team-join{ padding:28px 20px; grid-template-columns:1fr }
  .video-embed{ border-radius:16px }

  /* footer */
  .foot-grid{ gap:30px }
  .foot-bottom{ flex-direction:column; text-align:center; gap:8px }

  /* logo lab */
  .logo-lab{ padding:50px 0 }

  /* buttons */
  .btn{ padding:14px 22px; font-size:14px }
  .nav-cta{ padding:8px 14px; font-size:13px }

  /* RFID cards */
  .split{ gap:40px }
}

/* about features grid */
.about-features{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
@media(max-width:520px){ .about-features{ grid-template-columns:1fr } }

/* hide sectie on small mobile */
@media(max-width:520px){ .sectie-hide{ display:none } }

/* RFID cards grid */
.rfid-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px;
}
@media(max-width:520px){ .rfid-cards{ grid-template-columns:1fr } }

/* tablet tweaks */
@media(max-width:980px) and (min-width:721px){
  .hero{ padding:130px 0 60px }
  h1.display{ font-size:52px }
  .drum-wrap{ width:min(400px,60vw) }
  section{ padding:80px 0 }
}

/* ═══════════════════════════════════════════════
   SHARED — nav dropdown, skip link, utilities
   ═══════════════════════════════════════════════ */
.skip{ position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:999px }
.skip:focus{ left:16px }
.nav.scrolled{ background:rgba(250,252,254,0.92) }
.nav-dd{ position:relative }
.nav-dd > a::after{ content:'▾'; font-size:10px; margin-left:6px; opacity:.6 }
.nav-dd-menu{
  position:absolute; top:100%; left:-12px; min-width:300px; padding:10px;
  background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:all .18s ease;
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu{ opacity:1; visibility:visible; transform:none }
.nav-links .nav-dd-menu a{ border-radius:12px; padding:10px 14px }
.mobile-menu[hidden]{ display:none }
.mobile-menu .sub{ padding-left:16px; font-weight:500; font-size:15px }
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.brand img{ display:block }

/* industry panels (all rendered, one visible) */
.industry-panel[hidden]{ display:none }
.industry-links{ display:flex; gap:10px; flex-wrap:wrap }

/* testimonial slides */
.testimonial-card blockquote{ margin:0 }
.testimonial-card blockquote[hidden]{ display:none }

/* blog card image */
.post-img img{ width:100%; height:100%; object-fit:cover; display:block }
.post-body h3{ font-size:19px; line-height:1.3; margin: 12px 0 16px; font-weight:700; letter-spacing:-0.01em}
.post{ display:block }

/* clients text list */
.client-names{ margin-top:22px; font-size:14px; line-height:1.7; color:var(--ink-2); max-width:90ch }

/* home: SEO intro + FAQ */
.intro-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap:80px; align-items:start }
@media(max-width:980px){ .intro-grid{ grid-template-columns:1fr; gap:32px } }
.intro-text p{ font-size:17px; line-height:1.7; color:var(--ink-2); margin-bottom:18px }
.intro-text strong{ color:var(--ink) }
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; margin:0 }
.facts > div{ padding:22px 24px; border-bottom:1px solid var(--line); border-right:1px solid var(--line) }
.facts > div:nth-child(2n){ border-right:0 }
.facts dt{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); margin-bottom:6px }
.facts dd{ margin:0; font-size:15px; font-weight:600; line-height:1.45 }
@media(max-width:520px){ .facts{ grid-template-columns:1fr } .facts > div{ border-right:0 } }

.faq{ margin-top:40px; display:flex; flex-direction:column; gap:12px; max-width:900px }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:0 26px; transition:border-color .2s }
.faq details[open]{ border-color:var(--primary) }
.faq summary{ cursor:pointer; list-style:none; padding:22px 0; font-size:17px; font-weight:700; display:flex; justify-content:space-between; gap:20px; align-items:center }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:'+'; font-size:24px; font-weight:300; color:var(--primary); flex:0 0 auto }
.faq details[open] summary::after{ content:'–' }
.faq details > div{ padding:0 0 22px; font-size:16px; line-height:1.7; color:var(--ink-2) }
.faq details > div p{ margin:0 0 12px }

/* ═══════════════════════════════════════════════
   SUBPAGES
   ═══════════════════════════════════════════════ */
.page-hero{ padding:140px 0 56px; background:linear-gradient(180deg,var(--mist) 0%,var(--paper) 100%); border-bottom:1px solid var(--line) }
.page-hero.center{ text-align:center }
.page-hero h1{ font-size:clamp(34px,5.2vw,64px); font-weight:800; letter-spacing:-0.03em; line-height:1.05; max-width:20ch; margin:18px 0 20px }
.page-hero.center h1{ margin-left:auto; margin-right:auto }
.page-hero h1 em{ font-style:italic; font-weight:300; color:var(--primary) }
.page-hero .lead{ font-size:18px; line-height:1.65; color:var(--ink-2); max-width:62ch }
.page-hero.center .lead{ margin:0 auto }
.page-hero .meta{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--primary) }
.page-hero .hero-cta{ margin-top:30px }
.page-hero.center .hero-cta{ justify-content:center }

.crumbs{ font-size:13px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.page-hero.center .crumbs{ justify-content:center }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0 }
.crumbs li + li::before{ content:'/'; margin-right:6px; opacity:.5 }
.crumbs a{ color:var(--primary) } .crumbs a:hover{ text-decoration:underline }

.page-body{ padding:72px 0 }
.page-grid{ display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:64px; align-items:start }
@media(max-width:980px){ .page-grid{ grid-template-columns:1fr; gap:40px } }
.aside-card{ position:sticky; top:100px; background:var(--ink); color:#fff; border-radius:var(--radius); padding:32px }
.aside-card h2{ font-size:22px; margin-bottom:12px; letter-spacing:-0.01em }
.aside-card p{ font-size:14px; line-height:1.6; color:rgba(255,255,255,.75); margin-bottom:20px }
.aside-card .btn{ width:100%; justify-content:center; margin-top:10px }
.aside-card .btn-primary{ background:#fff; color:var(--ink) }
.aside-card .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.25) }
.aside-card dl{ margin:22px 0 0; font-size:13px; line-height:1.6 }
.aside-card dt{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--sky); margin-top:12px }
.aside-card dd{ margin:0 }
.aside-links{ margin-top:24px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px }
.aside-links h2{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin-bottom:12px }
.aside-links ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.aside-links a{ font-size:14px; font-weight:600; color:var(--ink) } .aside-links a:hover{ color:var(--primary) }

.prose{ font-size:17px; line-height:1.8; color:var(--ink-2) }
.prose > *:first-child{ margin-top:0 }
.prose p{ margin:0 0 22px }
.prose h2{ font-size:clamp(24px,2.6vw,32px); font-weight:800; color:var(--ink); margin:52px 0 18px; letter-spacing:-0.02em; line-height:1.2 }
.prose h3{ font-size:20px; font-weight:700; color:var(--ink); margin:32px 0 12px }
.prose ul, .prose ol{ margin:0 0 24px; padding-left:22px }
.prose li{ margin-bottom:8px }
.prose strong, .prose b{ color:var(--ink) }
.prose a{ color:var(--primary); font-weight:600 } .prose a:hover{ text-decoration:underline }
.prose a.btn{ font-weight:600 } .prose a.btn-primary{ color:#fff } .prose a.btn:hover{ text-decoration:none }
.prose blockquote{ margin:32px 0; padding:24px 28px; border-left:3px solid var(--primary); background:var(--ice); border-radius:0 var(--radius) var(--radius) 0; font-style:italic; font-weight:500; color:var(--ink); font-size:18px; line-height:1.6 }
.prose figure{ margin:32px 0 }
.prose figure img, .prose > img{ width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); display:block }
.prose figcaption{ font-size:13px; margin-top:10px; color:var(--ink-2); opacity:.8 }
.prose .highlight{ padding:32px; background:var(--ink); color:#fff; border-radius:var(--radius); margin:40px 0; font-size:18px; line-height:1.7; font-weight:500 }
.prose .highlight em{ color:var(--sky); font-style:italic; font-weight:300 }
.prose .values-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin:36px 0 }
.prose .value-card{ padding:28px; background:#fff; border:1px solid var(--line); border-radius:18px; text-align:center }
.prose .value-card h3{ font-size:18px; font-weight:800; color:var(--ink); margin:0 0 8px }
.prose .value-card p{ font-size:14px; margin:0 }
@media(max-width:720px){ .prose .values-grid{ grid-template-columns:1fr } }
.prose .signature{ margin-top:56px; padding-top:32px; border-top:1px solid var(--line); text-align:center }
.prose .signature img{ height:80px; width:auto; margin-bottom:16px }
/* legacy blog list style */
.prose ol.steps{ padding-left:0; list-style:none; display:flex; flex-direction:column; gap:16px }
.article-body-legacy ol{ padding-left:0; list-style:none; display:flex; flex-direction:column; gap:16px }
.article-body-legacy ol li{ padding:20px 24px; background:#fff; border:1px solid var(--line); border-radius:16px; font-size:16px; line-height:1.6 }
.article-body-legacy ol li strong{ display:block; margin-bottom:4px; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.1em; color:var(--primary) }
.narrow{ max-width:760px; margin:0 auto }

.check-list{ list-style:none!important; padding:0!important; display:grid; gap:12px }
.check-list li{ position:relative; padding:16px 18px 16px 50px; background:#fff; border:1px solid var(--line); border-radius:14px; margin:0!important; line-height:1.55 }
.check-list li::before{ content:''; position:absolute; left:18px; top:19px; width:18px; height:18px; border-radius:50%; background:var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231a6fb5' stroke-width='2'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E") center/11px no-repeat }

.cover{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); margin-bottom:40px; aspect-ratio:16/9; background:var(--ice) }
.cover img{ width:100%; height:100%; object-fit:cover; display:block }

.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px }
@media(max-width:980px){ .card-grid{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:600px){ .card-grid{ grid-template-columns:1fr } }
.svc-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:all .25s ease }
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--primary) }
.svc-card .img{ aspect-ratio:16/10; overflow:hidden; background:var(--ice) }
.svc-card .img img{ width:100%; height:100%; object-fit:cover; display:block }
.svc-card .body{ padding:26px; display:flex; flex-direction:column; gap:10px; flex:1 }
.svc-card .kicker{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary) }
.svc-card h2, .svc-card h3{ font-size:21px; letter-spacing:-0.01em; line-height:1.25 }
.svc-card p{ font-size:15px; line-height:1.6; color:var(--ink-2); flex:1 }
.svc-card .post-link{ margin-top:6px }

.map-embed{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; background:var(--ice) }
.map-embed iframe{ width:100%; height:100%; border:0; display:block }
.contact-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:32px }
@media(max-width:600px){ .contact-cards{ grid-template-columns:1fr } }
.contact-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px 24px }
.contact-card .contact-label{ color:var(--primary) }
.contact-card .contact-value{ color:var(--ink) }
a.contact-card:hover{ border-color:var(--primary) }

.page-cta{ padding:80px 0 }
@media(max-width:720px){ .page-hero{ padding:110px 0 40px } .page-body{ padding:48px 0 } .prose{ font-size:16px } .aside-card{ position:static } }
.foot .h5{ font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-2); margin-bottom: 18px; font-weight:700 }