/* ============================================================
   B2B Media Global — Homepage v2 (premium agency redesign)
   Loaded only on index.html. Uses variables from style.css.
   ============================================================ */

:root{
  --h-navy:#050c17;
  --h-navy-2:#0a1830;
  --h-navy-3:#0f2340;
  --h-beam:#2f8fff;
  --h-line-dark:rgba(255,255,255,0.10);
  --h-text-dim:#9db1cc;
}

/* ---------- Reveal / motion system ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:transform,opacity;
}
[data-reveal].in-view{opacity:1;transform:translateY(0)}
[data-reveal-scale]{
  opacity:0;transform:scale(1.05);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay, 0ms);
}
[data-reveal-scale].in-view{opacity:1;transform:scale(1)}

@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal-scale]{opacity:1 !important;transform:none !important;transition:none !important}
  .marquee-track{animation:none !important}
  .hero2-beams span{animation:none !important}
  .hero2-roam span{animation:none !important}
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:22px 24px 0;
  transition:padding .3s ease;
}
.site-header-inner{
  max-width:1360px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:16px;
  padding:16px 32px;border-radius:999px;
  background:rgba(10,20,38,0.35);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.scrolled{padding-top:0}
.site-header.scrolled .site-header-inner{
  background:rgba(6,13,26,0.82);
  box-shadow:0 12px 32px rgba(0,0,0,0.35);
  border-color:rgba(255,255,255,0.12);
}
.site-header .brand2{display:flex;align-items:center;gap:8px;justify-self:start}
.site-header .brand2 .logo-chip{
  background:#fff;border-radius:12px;padding:7px 12px;display:flex;align-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,0.15);
}
.site-header .brand2 img{height:34px;width:auto;display:block}
.site-header .nav2-links{
  display:flex;gap:26px;list-style:none;margin:0;padding:0;justify-self:center;
}
.site-header .nav2-links a{
  font-size:14.5px;font-weight:700;color:#ffffff;opacity:0.9;transition:opacity .15s;white-space:nowrap;
}
.site-header .nav2-links a:hover{opacity:1}
.site-header-right{display:flex;align-items:center;gap:14px;justify-self:end}
.site-header .lang-toggle{border-color:rgba(255,255,255,0.22)}
.site-header .lang-toggle button{color:#ffffff;font-weight:700;font-size:13px;padding:7px 14px}
.site-header .lang-toggle button.active{background:#fff;color:var(--ink)}
.site-header .cart-btn{color:#fff}
.site-header .cart-btn svg{width:23px;height:23px}
.site-header .btn-sm{font-size:14.5px;padding:12px 24px;font-weight:700;white-space:nowrap}
@media (max-width:1200px){
  .site-header .nav2-links{display:none}
}

/* ============================================================
   HERO 2
   ============================================================ */
.hero2{
  position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 15% 0%, var(--h-navy-3) 0%, var(--h-navy-2) 45%, var(--h-navy) 100%);
  padding:150px 24px 80px;color:#fff;
  min-height:640px;display:flex;align-items:center;
}
.hero2-inner{max-width:1180px;margin:0 auto;position:relative;z-index:2;width:100%;display:flex;justify-content:center}
.hero2-content{max-width:720px;text-align:center}
.hero2 .eyebrow2{
  font-size:12.5px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;
  color:#5fa8ff;margin-bottom:18px;
}
.hero2 h1{
  font-size:clamp(34px,5.4vw,58px);line-height:1.08;margin:0 0 20px;
  letter-spacing:-0.02em;font-weight:700;
}
.hero2 p.lede2{font-size:17px;color:var(--h-text-dim);max-width:520px;margin:0 0 32px;line-height:1.6}
.hero2-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:56px;justify-content:center}
.btn-hero-primary{
  background:var(--signal);color:#fff;padding:14px 26px;border-radius:999px;
  font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 10px 30px rgba(0,113,227,0.35);transition:transform .15s, box-shadow .15s;
}
.btn-hero-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,113,227,0.45)}
.btn-hero-secondary{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.28);
  padding:14px 26px;border-radius:999px;font-size:14.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;transition:background .15s, border-color .15s;
}
.btn-hero-secondary:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.45)}

.hero2-trust{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:64px;justify-content:center}
.hero2-trust div{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--h-text-dim)}
.hero2-trust svg{width:16px;height:16px;color:#5fa8ff;flex:none}

.hero2-stats{display:flex;gap:44px;flex-wrap:wrap;justify-content:center}
.hero2-stats .stat{display:flex;align-items:center;gap:10px}
.hero2-stats .stat svg{width:20px;height:20px;color:#5fa8ff;flex:none}
.hero2-stats .num2{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.hero2-stats .lbl2{display:none}

/* Roaming ambient light — drifts behind the panel lines for a mystical, wave-like feel */
.hero2-roam{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  mix-blend-mode:screen;
}
.hero2-roam span{
  position:absolute;filter:blur(60px);
  mix-blend-mode:screen;
  border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;
}
.hero2-roam span:nth-child(1){
  width:520px;height:520px;top:6%;left:6%;
  background:radial-gradient(circle, rgba(70,160,255,0.8), transparent 72%);
  animation:roam1 7s linear infinite, morph1 5s ease-in-out infinite;
}
.hero2-roam span:nth-child(2){
  width:440px;height:440px;top:45%;left:62%;
  background:radial-gradient(circle, rgba(140,200,255,0.72), transparent 72%);
  animation:roam2 8.4s linear infinite, morph2 6.2s ease-in-out infinite;
}
.hero2-roam span:nth-child(3){
  width:400px;height:400px;top:64%;left:18%;
  background:radial-gradient(circle, rgba(100,175,255,0.66), transparent 72%);
  animation:roam3 9.2s linear infinite, morph3 5.6s ease-in-out infinite;
}
.hero2-roam span:nth-child(4){
  width:360px;height:360px;top:10%;left:70%;
  background:radial-gradient(circle, rgba(180,220,255,0.6), transparent 72%);
  animation:roam4 7.6s linear infinite, morph1 6.8s ease-in-out infinite reverse;
}
@keyframes roam1{
  0%{transform:translate(0.0px,0.0px)}
  5%{transform:translate(64.9px,88.2px)}
  10%{transform:translate(123.4px,142.7px)}
  15%{transform:translate(169.9px,142.7px)}
  20%{transform:translate(199.7px,88.2px)}
  25%{transform:translate(210.0px,0.0px)}
  30%{transform:translate(199.7px,-88.2px)}
  35%{transform:translate(169.9px,-142.7px)}
  40%{transform:translate(123.4px,-142.7px)}
  45%{transform:translate(64.9px,-88.2px)}
  50%{transform:translate(0.0px,-0.0px)}
  55%{transform:translate(-64.9px,88.2px)}
  60%{transform:translate(-123.4px,142.7px)}
  65%{transform:translate(-169.9px,142.7px)}
  70%{transform:translate(-199.7px,88.2px)}
  75%{transform:translate(-210.0px,0.0px)}
  80%{transform:translate(-199.7px,-88.2px)}
  85%{transform:translate(-169.9px,-142.7px)}
  90%{transform:translate(-123.4px,-142.7px)}
  95%{transform:translate(-64.9px,-88.2px)}
  100%{transform:translate(-0.0px,-0.0px)}
}
@keyframes roam2{
  0%{transform:translate(0.0px,138.6px)}
  5%{transform:translate(71.1px,146.2px)}
  10%{transform:translate(135.2px,33.3px)}
  15%{transform:translate(186.1px,-107.1px)}
  20%{transform:translate(218.7px,-159.1px)}
  25%{transform:translate(230.0px,-80.0px)}
  30%{transform:translate(218.7px,65.1px)}
  35%{transform:translate(186.1px,156.5px)}
  40%{transform:translate(135.2px,118.9px)}
  45%{transform:translate(71.1px,-16.7px)}
  50%{transform:translate(0.0px,-138.6px)}
  55%{transform:translate(-71.1px,-146.2px)}
  60%{transform:translate(-135.2px,-33.3px)}
  65%{transform:translate(-186.1px,107.1px)}
  70%{transform:translate(-218.7px,159.1px)}
  75%{transform:translate(-230.0px,80.0px)}
  80%{transform:translate(-218.7px,-65.1px)}
  85%{transform:translate(-186.1px,-156.5px)}
  90%{transform:translate(-135.2px,-118.9px)}
  95%{transform:translate(-71.1px,16.7px)}
  100%{transform:translate(-0.0px,138.6px)}
}
@keyframes roam3{
  0%{transform:translate(0.0px,147.2px)}
  5%{transform:translate(58.7px,69.1px)}
  10%{transform:translate(111.7px,-35.3px)}
  15%{transform:translate(153.7px,-126.3px)}
  20%{transform:translate(180.7px,-169.1px)}
  25%{transform:translate(190.0px,-147.2px)}
  30%{transform:translate(180.7px,-69.1px)}
  35%{transform:translate(153.7px,35.3px)}
  40%{transform:translate(111.7px,126.3px)}
  45%{transform:translate(58.7px,169.1px)}
  50%{transform:translate(0.0px,147.2px)}
  55%{transform:translate(-58.7px,69.1px)}
  60%{transform:translate(-111.7px,-35.3px)}
  65%{transform:translate(-153.7px,-126.3px)}
  70%{transform:translate(-180.7px,-169.1px)}
  75%{transform:translate(-190.0px,-147.2px)}
  80%{transform:translate(-180.7px,-69.1px)}
  85%{transform:translate(-153.7px,35.3px)}
  90%{transform:translate(-111.7px,126.3px)}
  95%{transform:translate(-58.7px,169.1px)}
  100%{transform:translate(-0.0px,147.2px)}
}
@keyframes roam4{
  0%{transform:translate(0.0px,0.0px)}
  5%{transform:translate(52.5px,-113.3px)}
  10%{transform:translate(99.9px,-133.1px)}
  15%{transform:translate(137.5px,-43.3px)}
  20%{transform:translate(161.7px,82.3px)}
  25%{transform:translate(170.0px,140.0px)}
  30%{transform:translate(161.7px,82.3px)}
  35%{transform:translate(137.5px,-43.3px)}
  40%{transform:translate(99.9px,-133.1px)}
  45%{transform:translate(52.5px,-113.3px)}
  50%{transform:translate(0.0px,-0.0px)}
  55%{transform:translate(-52.5px,113.3px)}
  60%{transform:translate(-99.9px,133.1px)}
  65%{transform:translate(-137.5px,43.3px)}
  70%{transform:translate(-161.7px,-82.3px)}
  75%{transform:translate(-170.0px,-140.0px)}
  80%{transform:translate(-161.7px,-82.3px)}
  85%{transform:translate(-137.5px,43.3px)}
  90%{transform:translate(-99.9px,133.1px)}
  95%{transform:translate(-52.5px,113.3px)}
  100%{transform:translate(-0.0px,0.0px)}
}
@keyframes morph1{
  0%,100%{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%}
  33%{border-radius:63% 37% 41% 59% / 58% 39% 61% 42%}
  66%{border-radius:37% 63% 56% 44% / 44% 61% 39% 56%}
}
@keyframes morph2{
  0%,100%{border-radius:58% 42% 39% 61% / 46% 60% 40% 54%}
  33%{border-radius:39% 61% 58% 42% / 60% 46% 54% 40%}
  66%{border-radius:61% 39% 46% 54% / 42% 58% 46% 54%}
}
@keyframes morph3{
  0%,100%{border-radius:48% 52% 60% 40% / 55% 45% 55% 45%}
  33%{border-radius:60% 40% 48% 52% / 45% 55% 45% 55%}
  66%{border-radius:40% 60% 55% 45% / 52% 48% 60% 40%}
}

/* Screen / panel divider lines — static-ish, like a paravan the light moves behind */
.hero2-beams{
  position:absolute;top:0;left:0;right:0;bottom:0;width:100%;
  pointer-events:none;z-index:1;
  mask-image:linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
}
.hero2-beams span{
  position:absolute;top:-10%;bottom:-10%;width:2px;
  background:linear-gradient(180deg, transparent, rgba(160,205,255,0.5), transparent);
  opacity:0.4;filter:blur(0.5px);
  animation:panelGlint 7s ease-in-out infinite;
  animation-delay:var(--d, 0s);
}
@keyframes panelGlint{
  0%,100%{opacity:0.3}
  50%{opacity:0.6}
}
.hero2-glow{
  position:absolute;top:10%;left:50%;transform:translateX(-50%);width:900px;height:600px;border-radius:50%;
  background:radial-gradient(circle, rgba(47,143,255,0.15), transparent 70%);
  filter:blur(30px);z-index:0;
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-section{background:var(--h-navy);padding:0 0 96px;position:relative}
.marquee-head{
  max-width:1180px;margin:0 auto 32px;padding:0 24px;
  font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#8397b3;
  text-align:center;
}
.marquee-mask{
  position:relative;overflow:hidden;padding:36px 0;
  background:rgba(255,255,255,0.02);
  border-top:1px solid var(--h-line-dark);border-bottom:1px solid var(--h-line-dark);
  mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track{
  display:flex;align-items:center;width:max-content;
  animation:marqueeScroll 34s linear infinite;
}
.marquee-mask:hover .marquee-track{animation-play-state:paused}
@keyframes marqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.marquee-item{
  display:flex;align-items:center;gap:18px;padding:0 56px;white-space:nowrap;
  color:#c5d3e8;opacity:0.9;
  transition:color .2s, opacity .2s, filter .2s, transform .2s;
}
.marquee-item:hover{color:#fff;opacity:1;transform:scale(1.04)}
.marquee-item .ic6{
  width:52px;height:52px;border-radius:14px;background:rgba(95,168,255,0.12);
  border:1px solid rgba(95,168,255,0.22);display:flex;align-items:center;justify-content:center;
  color:#5fa8ff;flex:none;
}
.marquee-item .ic6 svg{width:26px;height:26px}
.marquee-item .m-title{font-size:20px;font-weight:700;letter-spacing:0.005em;color:#fff}
.marquee-item .m-sub{font-size:12px;color:#7a90ae;text-transform:uppercase;letter-spacing:0.05em;font-weight:600;margin-top:3px}
@media (max-width:700px){
  .marquee-track{animation-duration:52s}
  .marquee-item{padding:0 34px;gap:12px}
  .marquee-item .ic6{width:42px;height:42px;border-radius:12px}
  .marquee-item .ic6 svg{width:21px;height:21px}
  .marquee-item .m-title{font-size:16px}
}

/* ============================================================
   VALUE SECTION (white)
   ============================================================ */
.value2{padding:96px 24px;background:#fff}
.value2-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:start}
.value2 .tag2{font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--signal);margin-bottom:14px}
.value2 h2{font-size:clamp(26px,3.6vw,38px);line-height:1.15;margin-bottom:18px}
.value2 p.body2{color:var(--mute);font-size:16px;line-height:1.6;margin-bottom:28px;max-width:480px}
.value2-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.value2-chips span{
  display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:999px;
  background:#ff7a1a;border:none;font-size:13.5px;font-weight:700;color:#ffffff;
  box-shadow:0 4px 10px rgba(255,122,26,0.28);transition:transform .15s, box-shadow .15s;
}
.value2-chips span:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(255,122,26,0.36)}
.value2-link{font-size:13.5px;font-weight:600;color:var(--signal)}

.value2-card{
  background:var(--fog);border-radius:var(--radius);padding:32px;
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
}
.value2-card .item h4{font-size:14px;color:var(--mute);font-weight:600;margin-bottom:8px}
.value2-card .item .ic{
  width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--signal);margin-bottom:14px;
}
.value2-card .item .ic svg{width:18px;height:18px}
.value2-card .item p{font-size:14px;color:var(--ink);font-weight:600;line-height:1.4}

/* ============================================================
   PROJECTS
   ============================================================ */
.projects2{padding:96px 24px;background:#fff}
.projects2-inner{max-width:1180px;margin:0 auto}
.projects2-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.projects2-head h2{font-size:clamp(26px,3.6vw,38px);line-height:1.15}
.projects2-head p{color:var(--mute);font-size:15px;max-width:380px}
.projects2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.project-card2{
  background:var(--navy);border-radius:var(--radius);overflow:hidden;color:#fff;
  border:1px solid rgba(255,255,255,0.08);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.project-card2:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,20,50,0.28)}
.project-card2 .thumb{
  height:190px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.project-card2 .thumb svg{width:64px;height:64px;opacity:0.85;position:relative;z-index:1}
.project-card2 .thumb-tag{
  position:absolute;top:14px;left:14px;background:rgba(255,255,255,0.14);
  backdrop-filter:blur(6px);color:#fff;font-size:11px;font-weight:700;
  padding:5px 11px;border-radius:999px;z-index:2;letter-spacing:0.02em;
}
.project-card2 .body{padding:22px}
.project-card2 h3{font-size:17px;margin-bottom:6px}
.project-card2 p{font-size:13.5px;color:#a9bbd4;margin-bottom:16px;line-height:1.5}
.project-card2 .badges{display:flex;flex-wrap:wrap;gap:8px}
.project-card2 .badges span{
  font-size:11px;font-weight:600;color:#bcd6ff;background:rgba(47,143,255,0.14);
  border:1px solid rgba(47,143,255,0.25);padding:5px 10px;border-radius:999px;
}

.project-card2.project-placeholder{
  border-style:dashed;border-color:rgba(255,255,255,0.16);background:rgba(255,255,255,0.015);
}
.project-card2.project-placeholder:hover{transform:none;box-shadow:none}
.project-card2.project-placeholder h3{color:#8397b3;font-weight:600;font-size:15.5px}
.project-card2.project-placeholder p{color:#5c7191}

/* ============================================================
   SERVICES 2 (dark)
   ============================================================ */
.services2{background:var(--h-navy);padding:96px 24px;color:#fff}
.services2-inner{max-width:1180px;margin:0 auto}
.services2-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.services2-head h2{font-size:clamp(26px,3.6vw,38px);line-height:1.15}
.services2-head p{color:var(--h-text-dim);font-size:15px;max-width:380px}
.services2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service-card2{
  background:rgba(255,255,255,0.03);border:1px solid var(--h-line-dark);border-radius:var(--radius);
  padding:30px 26px;transition:transform .25s, border-color .25s, background .25s;
}
.service-card2:hover{transform:translateY(-4px);border-color:rgba(95,168,255,0.4);background:rgba(255,255,255,0.05)}
.service-card2 .ic2{
  width:46px;height:46px;border-radius:12px;background:rgba(47,143,255,0.14);
  display:flex;align-items:center;justify-content:center;color:#5fa8ff;margin-bottom:20px;
}
.service-card2 .ic2 svg{width:22px;height:22px}
.service-card2 h3{font-size:19px;margin-bottom:10px}
.service-card2 p{font-size:14px;color:var(--h-text-dim);margin-bottom:18px;line-height:1.55}
.service-card2 ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px}
.service-card2 li{font-size:13.5px;color:#c5d3e8;display:flex;gap:8px;align-items:flex-start}
.service-card2 li svg{width:15px;height:15px;color:#5fa8ff;flex:none;margin-top:2px}
.service-card2 .link2{font-size:13px;font-weight:600;color:#5fa8ff}

/* ============================================================
   INDUSTRIES GRID
   ============================================================ */
.industries2{padding:96px 24px;background:#fff}
.industries2-inner{max-width:1180px;margin:0 auto}
.industries2-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.industries2-head h2{font-size:clamp(26px,3.6vw,38px);line-height:1.15}
.industries2-head p{color:var(--mute);font-size:15px;max-width:380px}
.industries2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.industry-card{
  position:relative;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:1/0.95;
  background:linear-gradient(160deg,var(--navy-2),var(--navy));
  background-size:cover;background-position:center;
  display:flex;flex-direction:column;justify-content:flex-end;padding:18px;color:#fff;
  transition:transform .25s;
}
.industry-card:hover{transform:translateY(-4px)}
.industry-card::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg, rgba(6,18,31,0.15) 0%, rgba(6,18,31,0.55) 55%, rgba(6,18,31,0.92) 100%);
}
.industry-card.has-photo:hover::before{background:linear-gradient(180deg, rgba(6,18,31,0.05) 0%, rgba(6,18,31,0.45) 55%, rgba(6,18,31,0.88) 100%)}
.industry-card .ic3{
  position:absolute;top:16px;left:16px;width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,0.15);backdrop-filter:blur(4px);z-index:1;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.industry-card .ic3 svg{width:17px;height:17px}
.industry-card h4{font-size:14.5px;font-weight:700;position:relative;z-index:1}
.industry-card p{font-size:11.5px;color:rgba(255,255,255,0.75);margin-top:4px;position:relative;z-index:1;line-height:1.4}
.industries2-cta{text-align:center;margin-top:36px}

/* ============================================================
   PROCESS 2
   ============================================================ */
.process2{padding:96px 24px;background:var(--fog)}
.process2-inner{max-width:1180px;margin:0 auto}
.process2-head{text-align:center;max-width:600px;margin:0 auto 56px}
.process2-head h2{font-size:clamp(26px,3.6vw,36px)}
.process2-line{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.process2-line::before{
  content:"";position:absolute;top:17px;left:6%;right:6%;height:2px;background:var(--line);z-index:0;
}
.process2-line .bar{
  content:"";position:absolute;top:17px;left:6%;height:2px;background:var(--signal);z-index:1;
  width:0%;transition:width 1.1s cubic-bezier(.2,.7,.2,1);
}
.process2-step{position:relative;z-index:2}
.process2-step .dot{
  width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:var(--mute);
  margin-bottom:18px;transition:border-color .3s, color .3s, background .3s;
}
.process2-step.active .dot{border-color:var(--signal);color:#fff;background:var(--signal)}
.process2-step h4{font-size:15.5px;margin-bottom:8px}
.process2-step p{font-size:13.5px;color:var(--mute);line-height:1.5}
@media (max-width:900px){
  .process2-line{grid-template-columns:1fr;gap:0}
  .process2-line::before{display:none}
  .process2-step{padding-left:24px;border-left:2px solid var(--line);padding-bottom:32px}
  .process2-step:last-child{padding-bottom:0}
}

/* ============================================================
   ABOUT / WHY US 2
   ============================================================ */
.about2{padding:96px 24px;background:#fff}
.about2-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about2 .tag2{font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--signal);margin-bottom:14px}
.about2 h2{font-size:clamp(24px,3.2vw,34px);line-height:1.2;margin-bottom:20px}
.about2-benefits{display:flex;flex-direction:column;gap:16px}
.about2-benefits div{display:flex;align-items:flex-start;gap:12px}
.about2-benefits .ic4{
  width:32px;height:32px;border-radius:9px;background:var(--fog);display:flex;align-items:center;
  justify-content:center;color:var(--signal);flex:none;
}
.about2-benefits .ic4 svg{width:16px;height:16px}
.about2-benefits p{font-size:14.5px;font-weight:600;color:var(--ink);padding-top:6px}
.about2-visual{
  border-radius:var(--radius);overflow:hidden;position:relative;aspect-ratio:4/3.4;
  background:linear-gradient(150deg,var(--h-navy-3),var(--h-navy));
  display:flex;align-items:center;justify-content:center;
}
.about2-visual .grid-pattern{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size:20px 20px;
}
.about2-visual .map-dot{
  position:absolute;width:8px;height:8px;border-radius:50%;background:#5fa8ff;
  box-shadow:0 0 0 6px rgba(95,168,255,0.2);
}
.about2-visual-content{position:relative;z-index:2;text-align:center;color:#fff;padding:24px}
.about2-visual-content .badge2{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);padding:8px 16px;border-radius:999px;font-size:12.5px;margin-bottom:16px;
}
.about2-visual-content h3{font-size:20px;margin-bottom:8px}
.about2-visual-content p{font-size:13px;color:var(--h-text-dim)}

/* ============================================================
   CONTACT 2
   ============================================================ */
.contact2{background:var(--h-navy);padding:96px 24px;color:#fff;position:relative;overflow:hidden}
.contact2-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:0.9fr 1.15fr 0.8fr;gap:40px;position:relative;z-index:1}
.contact2 .tag2{font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#5fa8ff;margin-bottom:14px}
.contact2 h2{font-size:clamp(24px,3.2vw,32px);line-height:1.2;margin-bottom:16px}
.contact2 > .contact2-inner > div > p{color:var(--h-text-dim);font-size:14.5px;line-height:1.6;margin-bottom:28px}
.contact2-detail{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
.contact2-detail .ic5{
  width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.06);
  border:1px solid var(--h-line-dark);display:flex;align-items:center;justify-content:center;color:#5fa8ff;flex:none;
}
.contact2-detail .ic5 svg{width:17px;height:17px}
.contact2-detail .t{font-size:14px;font-weight:600}
.contact2-detail .s{font-size:12.5px;color:var(--h-text-dim);margin-top:2px}

.contact2-form-card{
  background:rgba(255,255,255,0.04);border:1px solid var(--h-line-dark);border-radius:var(--radius);
  padding:30px;backdrop-filter:blur(6px);
}
.contact2-form-card .field2{margin-bottom:14px}
.contact2-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact2-form-card label{display:block;font-size:12px;font-weight:600;margin-bottom:6px;color:#c5d3e8}
.contact2-form-card input, .contact2-form-card select, .contact2-form-card textarea{
  width:100%;border:1px solid rgba(255,255,255,0.14);border-radius:10px;padding:11px 13px;
  font-size:14px;font-family:inherit;background:rgba(255,255,255,0.05);color:#fff;
}
.contact2-form-card textarea{resize:vertical;min-height:90px}
.contact2-form-card input::placeholder, .contact2-form-card textarea::placeholder{color:#7488a3}
.contact2-form-card select option{color:#000}
.contact2-privacy{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--h-text-dim);margin:6px 0 16px}
.contact2-privacy input{width:auto;margin-top:2px}

.contact2-benefits-card{
  background:rgba(255,255,255,0.04);border:1px solid var(--h-line-dark);border-radius:var(--radius);
  padding:26px;height:fit-content;
}
.contact2-benefits-card .b-label{font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#5fa8ff;margin-bottom:18px}
.contact2-benefit{display:flex;gap:10px;margin-bottom:16px;align-items:flex-start}
.contact2-benefit svg{width:16px;height:16px;color:#5fa8ff;flex:none;margin-top:2px}
.contact2-benefit p{font-size:13.5px;font-weight:600}
.contact2-wa{
  margin-top:20px;display:flex;align-items:center;gap:10px;background:rgba(37,211,102,0.12);
  border:1px solid rgba(37,211,102,0.3);border-radius:12px;padding:12px 14px;
}
.contact2-wa svg{width:20px;height:20px;color:#25D366;flex:none}
.contact2-wa .t{font-size:13px;font-weight:600}
.contact2-wa .s{font-size:11.5px;color:var(--h-text-dim)}

/* ============================================================
   TECH STRIP
   ============================================================ */
.tech-strip{background:var(--h-navy-2);padding:32px 24px;border-top:1px solid var(--h-line-dark);border-bottom:1px solid var(--h-line-dark)}
.tech-strip-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center}
.tech-strip-label{font-size:11px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:#5c7191;margin-right:8px}
.tech-chip{
  display:flex;align-items:center;gap:7px;color:#c5d3e8;font-size:13px;font-weight:600;opacity:0.8;
}
.tech-chip svg{width:16px;height:16px;color:#5fa8ff}

/* ============================================================
   FOOTER 2
   ============================================================ */
.footer2{background:var(--h-navy);color:#fff;padding:64px 24px 28px}
.footer2-inner{max-width:1180px;margin:0 auto}
.footer2-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.footer2-brand img{height:26px;filter:brightness(0) invert(1);margin-bottom:14px}
.footer2-brand p{font-size:13.5px;color:var(--h-text-dim);line-height:1.6;max-width:280px}
.footer2 h4{font-size:12.5px;font-weight:700;letter-spacing:0.04em;color:#8397b3;margin-bottom:16px;text-transform:uppercase}
.footer2 ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer2 ul a{font-size:13.5px;color:#c5d3e8;transition:color .15s}
.footer2 ul a:hover{color:#fff}
.footer2-bottom{
  border-top:1px solid var(--h-line-dark);padding-top:22px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;font-size:12.5px;color:#6f88ab;
}
.footer2-bottom a{color:#6f88ab}
.footer2-bottom a:hover{color:#fff}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:980px){
  .value2-inner, .about2-inner{grid-template-columns:1fr}
  .projects2-grid, .services2-grid{grid-template-columns:1fr}
  .industries2-grid{grid-template-columns:repeat(2,1fr)}
  .contact2-inner{grid-template-columns:1fr}
  .contact2-form-row{grid-template-columns:1fr}
  .footer2-top{grid-template-columns:1fr 1fr}
  .hero2-content{max-width:100%}
  .hero2-beams{width:100%;opacity:0.5}
}
@media (max-width:560px){
  .industries2-grid{grid-template-columns:1fr 1fr}
  .footer2-top{grid-template-columns:1fr}
}