:root{
  --gold:#b97f13;
  --gold-2:#d8a13a;
  --dark:#22262a;
  --dark-2:#111417;
  --text:#262626;
  --muted:#666;
  --soft:#f6f2ea;
  --line:#e9e2d4;
  --white:#fff;
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 80% 10%, rgba(185,127,19,.14), transparent 26%),
    radial-gradient(circle at 0% 70%, rgba(185,127,19,.10), transparent 26%),
    #fafafa;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

.header{
  width:100%;
  height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:22px 5vw;
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(0,0,0,.04);
}

.brand img{
  width:150px;
  display:block;
}

.nav{
  display:flex;
  gap:34px;
  align-items:center;
  font-size:.88rem;
  font-weight:700;
  text-transform:uppercase;
}

.nav a{
  position:relative;
}

.nav a::after{
  content:"";
  width:0;
  height:2px;
  background:var(--gold);
  position:absolute;
  left:0;
  bottom:-10px;
  transition:.25s;
}

.nav a:hover::after,
.nav a.active::after{
  width:100%;
}

.menu-btn{
  display:none;
}

.btn{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:0 24px;
  border-radius:8px;
  font-weight:800;
  font-size:.9rem;
  border:1px solid transparent;
  transition:.25s;
  cursor:pointer;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-gold{
  color:#fff;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  box-shadow:0 16px 35px rgba(185,127,19,.22);
}

.btn-outline{
  color:var(--gold);
  background:#fff;
  border-color:var(--gold);
}

.hero{
  min-height:720px;
  padding:72px 5vw 42px;
  display:grid;
  grid-template-columns:1fr 1.22fr;
  align-items:center;
  gap:34px;
}

.hero-content{
  position:relative;
  z-index:2;
}

.eyebrow,
.section-label::before{
  content:"";
  display:inline-block;
  width:42px;
  height:2px;
  background:var(--gold);
  vertical-align:middle;
  margin-right:12px;
}

.hero-content > span,
.section-label{
  color:var(--gold);
  text-transform:uppercase;
  font-size:.88rem;
  font-weight:800;
  letter-spacing:.03em;
}

.hero h1{
  font-size:clamp(2.5rem,4vw,5rem);
  line-height:1.04;
  margin:24px 0 22px;
  letter-spacing:-.05em;
  max-width:760px;
}

.hero h1 strong{
  display:block;
  color:var(--gold);
}

.hero p{
  max-width:630px;
  color:#3f3f3f;
  font-size:1.13rem;
  line-height:1.75;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:34px;
}

.pill-row{
  margin-top:44px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  max-width:850px;
}

.pill{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.pill .icon{
  min-width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--gold);
  background:rgba(185,127,19,.11);
  font-weight:900;
}

.pill b{
  display:block;
  line-height:1.1;
  font-size:.95rem;
}

.pill small{
  color:#666;
}







.hero-visual{
  height:580px;
  position:relative;
  perspective:1200px;
  overflow:visible;
}

.city-scene{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  animation:sceneFloat 7s ease-in-out infinite;
}

.scene-grid{
  position:absolute;
  inset:42px 0 0;
  border-radius:38px;
  transform:rotateX(62deg) rotateZ(-32deg) translateZ(-80px);
  background:
    linear-gradient(90deg, rgba(185,127,19,.16) 1px, transparent 1px),
    linear-gradient(rgba(185,127,19,.16) 1px, transparent 1px),
    radial-gradient(circle, rgba(185,127,19,.14) 1px, transparent 2px);
  background-size:54px 54px, 54px 54px, 28px 28px;
  opacity:.78;
  filter:drop-shadow(0 50px 45px rgba(185,127,19,.08));
}

.building-css{
  position:absolute;
  transform-style:preserve-3d;
  background:linear-gradient(145deg,#fff,#d8d8d8);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:22px 32px 50px rgba(0,0,0,.13);
}

.building-css::before{
  content:"";
  position:absolute;
  inset:-18px 0 auto;
  height:18px;
  background:linear-gradient(145deg,#fff,#e9e9e9);
  transform:skewX(-45deg);
  transform-origin:bottom;
  border-radius:10px 10px 0 0;
}

.building-css::after{
  content:"";
  position:absolute;
  right:-18px;
  top:-9px;
  width:18px;
  height:100%;
  background:linear-gradient(180deg,#cfcfcf,#f2f2f2);
  transform:skewY(-45deg);
  transform-origin:left;
  border-radius:0 10px 10px 0;
}

.tower{
  width:156px;
  height:215px;
  right:126px;
  top:82px;
  border-radius:14px;
  animation:buildingPulse 5s ease-in-out infinite;
}

.tower span{
  position:absolute;
  z-index:3;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  color:var(--gold);
  font-weight:900;
  font-size:2rem;
  text-shadow:0 8px 20px rgba(185,127,19,.25);
}

.tower i,
.block i{
  position:relative;
  z-index:3;
  display:inline-block;
  width:18px;
  height:34px;
  margin:72px 4px 0 13px;
  border-radius:4px;
  background:linear-gradient(180deg,rgba(185,127,19,.25),rgba(255,255,255,.7));
}

.block{
  border-radius:12px;
}

.block i{
  width:14px;
  height:24px;
  margin:28px 3px 0 12px;
}

.block-1{
  width:138px;
  height:112px;
  left:95px;
  top:178px;
  animation:softRise 6s ease-in-out infinite .2s;
}

.block-2{
  width:108px;
  height:94px;
  right:34px;
  bottom:140px;
  animation:softRise 6s ease-in-out infinite .8s;
}

.block-3{
  width:128px;
  height:96px;
  left:330px;
  bottom:98px;
  animation:softRise 6s ease-in-out infinite 1.1s;
}

.block-4{
  width:118px;
  height:82px;
  right:320px;
  top:130px;
  animation:softRise 6s ease-in-out infinite 1.5s;
}

.shield-3d{
  width:122px;
  height:142px;
  position:absolute;
  left:37%;
  top:42%;
  display:grid;
  place-items:center;
  color:white;
  font-size:4rem;
  font-weight:900;
  background:linear-gradient(145deg,var(--gold),var(--gold-2));
  border-radius:38px 38px 56px 56px;
  box-shadow:0 30px 60px rgba(185,127,19,.34);
  animation:shieldFloat 4.8s ease-in-out infinite;
  z-index:8;
}

.connection{
  position:absolute;
  height:4px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius:999px;
  transform-origin:left;
  opacity:.85;
  z-index:2;
  overflow:hidden;
}

.connection::after{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  background:#fff;
  filter:blur(4px);
  animation:lineTravel 3.2s linear infinite;
}

.connection-1{width:310px;left:230px;top:286px;transform:rotate(18deg);}
.connection-2{width:250px;right:205px;top:330px;transform:rotate(-24deg);}
.connection-3{width:310px;left:380px;bottom:178px;transform:rotate(-8deg);}
.connection-4{width:260px;left:365px;top:210px;transform:rotate(-20deg);}

.node{
  width:15px;
  height:15px;
  position:absolute;
  border-radius:50%;
  background:var(--gold-2);
  box-shadow:0 0 0 8px rgba(185,127,19,.14);
  animation:nodePulse 2.4s ease-in-out infinite;
  z-index:4;
}

.node-1{left:248px;top:282px;}
.node-2{right:250px;top:326px;animation-delay:.4s;}
.node-3{left:520px;bottom:176px;animation-delay:.8s;}
.node-4{left:430px;top:205px;animation-delay:1.2s;}

.document{
  position:absolute;
  width:180px;
  height:118px;
  border-radius:16px;
  background:rgba(255,255,255,.86);
  box-shadow:14px 24px 45px rgba(0,0,0,.08);
  transform:rotate(-15deg);
  padding:20px;
  z-index:3;
  animation:paperFloat 6s ease-in-out infinite;
}

.document b{
  display:block;
  color:var(--gold);
  margin-bottom:12px;
}

.document span,
.chart-card span{
  display:block;
  height:8px;
  border-radius:999px;
  background:#ececec;
  margin-bottom:8px;
}

.doc-1{right:170px;top:28px;}
.doc-2{left:150px;bottom:72px;animation-delay:1.3s;}

.chart-card{
  position:absolute;
  right:120px;
  bottom:32px;
  width:210px;
  height:150px;
  border-radius:18px;
  background:rgba(255,255,255,.88);
  padding:28px;
  box-shadow:14px 24px 45px rgba(0,0,0,.08);
  transform:rotate(8deg);
  animation:paperFloat 6s ease-in-out infinite .8s;
  z-index:3;
}

.chart-card span:nth-child(1){width:70%;}
.chart-card span:nth-child(2){width:90%;}
.chart-card span:nth-child(3){width:55%;}

.magnifier{
  position:absolute;
  right:215px;
  bottom:18px;
  width:82px;
  height:82px;
  border:12px solid #34383b;
  border-radius:50%;
  z-index:7;
  animation:magnifierMove 5.8s ease-in-out infinite;
}

.magnifier::after{
  content:"";
  position:absolute;
  width:78px;
  height:14px;
  background:#34383b;
  border-radius:999px;
  right:-62px;
  bottom:-34px;
  transform:rotate(42deg);
}

.person{
  position:absolute;
  width:12px;
  height:28px;
  border-radius:10px 10px 3px 3px;
  background:#484848;
  z-index:5;
  animation:personWalk 5s ease-in-out infinite;
}

.person::before{
  content:"";
  width:12px;
  height:12px;
  position:absolute;
  top:-12px;
  left:0;
  border-radius:50%;
  background:#5a5a5a;
}

.p1{right:345px;top:292px;}
.p2{right:90px;top:300px;animation-delay:1s;}
.p3{left:390px;bottom:132px;animation-delay:1.8s;}

@keyframes sceneFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-12px) rotate(.35deg);}
}

@keyframes shieldFloat{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-16px) scale(1.03);}
}

@keyframes buildingPulse{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

@keyframes softRise{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

@keyframes nodePulse{
  0%,100%{box-shadow:0 0 0 6px rgba(185,127,19,.14);}
  50%{box-shadow:0 0 0 16px rgba(185,127,19,0);}
}

@keyframes lineTravel{
  from{left:-40%;}
  to{left:110%;}
}

@keyframes paperFloat{
  0%,100%{translate:0 0;}
  50%{translate:0 -10px;}
}

@keyframes magnifierMove{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(-18px,-10px) rotate(-4deg);}
}

@keyframes personWalk{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(16px);}
}

@media (prefers-reduced-motion: reduce){
  .city-scene,
  .shield-3d,
  .building-css,
  .document,
  .chart-card,
  .magnifier,
  .person,
  .node,
  .connection::after{
    animation:none !important;
  }
}

.trust-panel{
  width:90vw;
  margin:-18px auto 0;
  border-radius:18px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 90% 20%, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(135deg,#202428,#111417);
  box-shadow:0 24px 70px rgba(0,0,0,.25);
  position:relative;
  z-index:5;
}

.trust-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 70%, rgba(185,127,19,.13), transparent 22%),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,.05), transparent 24%);
}

.metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  padding:34px 28px;
  position:relative;
  z-index:2;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.metrics div{
  display:grid;
  grid-template-columns:auto auto;
  column-gap:18px;
  align-items:center;
  padding:12px 28px;
  border-right:1px solid rgba(255,255,255,.16);
}

.metrics div:last-child{
  border-right:none;
}

.metric-icon{
  grid-row:span 2;
  font-size:2.2rem;
  color:var(--gold);
  filter:grayscale(1) sepia(1) saturate(4) hue-rotate(355deg);
}

.metrics strong{
  font-size:2rem;
}

.metrics p{
  color:#ededed;
}

.client-logos{
  padding:52px 46px 44px;
  position:relative;
  z-index:2;
  background:rgba(255,255,255,.025);
}

.client-heading{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:28px;
  max-width:1100px;
  margin:0 auto;
}

.client-heading span{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

.client-heading p{
  color:var(--gold-2);
  text-transform:uppercase;
  font-size:.88rem;
  font-weight:800;
  letter-spacing:.08em;
  text-align:center;
}

.client-logos h2{
  margin:18px auto 34px;
  text-align:center;
  font-size:clamp(1.65rem,2.2vw,2.6rem);
  letter-spacing:-.04em;
}

.logo-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.logo-card{
  min-height:138px;
  padding:18px 20px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:.25s ease;
}

.logo-card:hover{
  transform:translateY(-4px);
  border-color:rgba(216,161,58,.55);
  background:rgba(255,255,255,.075);
}

.logo-card img{
  display:block;
  width:100%;
  max-width:165px;
  height:58px;
  object-fit:contain;
  background:#f7f7f7;
  border-radius:12px;
  padding:10px 14px;
}

.logo-name{
  display:block;
  color:#f7f7f7;
  font-size:.82rem;
  font-weight:600;
  line-height:1.2;
  text-align:center;
}

.logo-card:hover .logo-name{
  color:#d6b067;
}

.trust-cta{
  margin:42px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  text-align:left;
}

.trust-cta-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:1.7rem;
}

.trust-cta p{
  font-size:1.2rem;
  color:#fff;
  margin-bottom:6px;
}

.trust-cta a{
  display:inline-flex;
  gap:12px;
  align-items:center;
  color:var(--gold-2);
  font-weight:900;
  text-transform:uppercase;
  font-size:1rem;
}


.services{
  margin-top:-24px;
  padding:120px 5vw 72px;
  display:grid;
  grid-template-columns:320px 1fr;
  gap:42px;
  background:
    radial-gradient(circle at 0% 50%, rgba(185,127,19,.12), transparent 28%),
    linear-gradient(180deg,#fbf6ec,#fff);
  border-radius:34px 34px 0 0;
}

.section-side h2,
.about h2,
.difference h2,
.contact h2{
  margin-top:24px;
  font-size:clamp(2rem,3vw,3.4rem);
  line-height:1.12;
  letter-spacing:-.04em;
}

.section-side p,
.about p,
.difference p,
.contact p{
  color:#555;
  line-height:1.75;
  margin:24px 0 34px;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.card{
  min-height:190px;
  padding:26px;
  border-radius:16px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(185,127,19,.08);
  box-shadow:0 18px 45px rgba(0,0,0,.06);
  transition:.25s;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 60px rgba(185,127,19,.13);
}

.card-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:var(--gold);
  background:rgba(185,127,19,.10);
  margin-bottom:18px;
  font-weight:900;
}

.card h3{
  font-size:1.05rem;
  margin-bottom:12px;
}

.card p{
  color:#555;
  line-height:1.55;
  font-size:.92rem;
}

.card a{
  display:inline-block;
  color:var(--gold);
  font-size:1.5rem;
  margin-top:14px;
}

.about{
  padding:90px 5vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  background:#fff;
}

.about-box{
  padding:46px;
  border-radius:24px;
  background:var(--dark);
  color:white;
}

.about-box p{
  color:#ddd;
}

.about-list{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
}

.about-list div{
  padding:28px;
  border-radius:18px;
  background:#faf7f0;
  border:1px solid var(--line);
  display:flex;
  gap:18px;
  align-items:center;
}

.about-list b{
  color:var(--gold);
  font-size:1.4rem;
}

.difference{
  padding:90px 5vw;
  background:#f7f7f7;
}

.difference-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:42px;
}

.difference-grid div{
  padding:34px;
  border-radius:22px;
  background:white;
  border:1px solid #eee;
}

.difference-grid h3{
  margin-bottom:14px;
  color:var(--gold);
}

.contact{
  padding:90px 5vw;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:50px;
  background:
    radial-gradient(circle at 95% 0%, rgba(185,127,19,.20), transparent 26%),
    #fff;
}

.contact-form{
  display:grid;
  gap:16px;
}

input,
textarea{
  width:100%;
  padding:18px;
  border:1px solid #ddd;
  border-radius:12px;
  font:inherit;
  background:#fff;
}

textarea{
  min-height:150px;
  resize:vertical;
}

.footer{
  display:grid;
  gap:14px;
  place-items:center;
  text-align:center;
  padding:54px 5vw;
  background:var(--dark-2);
  color:#fff;
}

.footer img{
  width:150px;
  filter:brightness(1.2);
}

.footer p{
  color:#ddd;
}

.footer small{
  color:#999;
}

@media(max-width:1180px){
  .hero{
    grid-template-columns:1fr;
  }

  .hero-visual{
    height:430px;
    transform:scale(.86);
    transform-origin:center top;
  }

  .pill-row{
    grid-template-columns:repeat(2,1fr);
  }

  

.hero-visual{
  height:580px;
  position:relative;
  perspective:1200px;
  overflow:visible;
}

.city-scene{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  animation:sceneFloat 7s ease-in-out infinite;
}

.scene-grid{
  position:absolute;
  inset:42px 0 0;
  border-radius:38px;
  transform:rotateX(62deg) rotateZ(-32deg) translateZ(-80px);
  background:
    linear-gradient(90deg, rgba(185,127,19,.16) 1px, transparent 1px),
    linear-gradient(rgba(185,127,19,.16) 1px, transparent 1px),
    radial-gradient(circle, rgba(185,127,19,.14) 1px, transparent 2px);
  background-size:54px 54px, 54px 54px, 28px 28px;
  opacity:.78;
  filter:drop-shadow(0 50px 45px rgba(185,127,19,.08));
}

.building-css{
  position:absolute;
  transform-style:preserve-3d;
  background:linear-gradient(145deg,#fff,#d8d8d8);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:22px 32px 50px rgba(0,0,0,.13);
}

.building-css::before{
  content:"";
  position:absolute;
  inset:-18px 0 auto;
  height:18px;
  background:linear-gradient(145deg,#fff,#e9e9e9);
  transform:skewX(-45deg);
  transform-origin:bottom;
  border-radius:10px 10px 0 0;
}

.building-css::after{
  content:"";
  position:absolute;
  right:-18px;
  top:-9px;
  width:18px;
  height:100%;
  background:linear-gradient(180deg,#cfcfcf,#f2f2f2);
  transform:skewY(-45deg);
  transform-origin:left;
  border-radius:0 10px 10px 0;
}

.tower{
  width:156px;
  height:215px;
  right:126px;
  top:82px;
  border-radius:14px;
  animation:buildingPulse 5s ease-in-out infinite;
}

.tower span{
  position:absolute;
  z-index:3;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  color:var(--gold);
  font-weight:900;
  font-size:2rem;
  text-shadow:0 8px 20px rgba(185,127,19,.25);
}

.tower i,
.block i{
  position:relative;
  z-index:3;
  display:inline-block;
  width:18px;
  height:34px;
  margin:72px 4px 0 13px;
  border-radius:4px;
  background:linear-gradient(180deg,rgba(185,127,19,.25),rgba(255,255,255,.7));
}

.block{
  border-radius:12px;
}

.block i{
  width:14px;
  height:24px;
  margin:28px 3px 0 12px;
}

.block-1{
  width:138px;
  height:112px;
  left:95px;
  top:178px;
  animation:softRise 6s ease-in-out infinite .2s;
}

.block-2{
  width:108px;
  height:94px;
  right:34px;
  bottom:140px;
  animation:softRise 6s ease-in-out infinite .8s;
}

.block-3{
  width:128px;
  height:96px;
  left:330px;
  bottom:98px;
  animation:softRise 6s ease-in-out infinite 1.1s;
}

.block-4{
  width:118px;
  height:82px;
  right:320px;
  top:130px;
  animation:softRise 6s ease-in-out infinite 1.5s;
}

.shield-3d{
  width:122px;
  height:142px;
  position:absolute;
  left:37%;
  top:42%;
  display:grid;
  place-items:center;
  color:white;
  font-size:4rem;
  font-weight:900;
  background:linear-gradient(145deg,var(--gold),var(--gold-2));
  border-radius:38px 38px 56px 56px;
  box-shadow:0 30px 60px rgba(185,127,19,.34);
  animation:shieldFloat 4.8s ease-in-out infinite;
  z-index:8;
}

.connection{
  position:absolute;
  height:4px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius:999px;
  transform-origin:left;
  opacity:.85;
  z-index:2;
  overflow:hidden;
}

.connection::after{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  background:#fff;
  filter:blur(4px);
  animation:lineTravel 3.2s linear infinite;
}

.connection-1{width:310px;left:230px;top:286px;transform:rotate(18deg);}
.connection-2{width:250px;right:205px;top:330px;transform:rotate(-24deg);}
.connection-3{width:310px;left:380px;bottom:178px;transform:rotate(-8deg);}
.connection-4{width:260px;left:365px;top:210px;transform:rotate(-20deg);}

.node{
  width:15px;
  height:15px;
  position:absolute;
  border-radius:50%;
  background:var(--gold-2);
  box-shadow:0 0 0 8px rgba(185,127,19,.14);
  animation:nodePulse 2.4s ease-in-out infinite;
  z-index:4;
}

.node-1{left:248px;top:282px;}
.node-2{right:250px;top:326px;animation-delay:.4s;}
.node-3{left:520px;bottom:176px;animation-delay:.8s;}
.node-4{left:430px;top:205px;animation-delay:1.2s;}

.document{
  position:absolute;
  width:180px;
  height:118px;
  border-radius:16px;
  background:rgba(255,255,255,.86);
  box-shadow:14px 24px 45px rgba(0,0,0,.08);
  transform:rotate(-15deg);
  padding:20px;
  z-index:3;
  animation:paperFloat 6s ease-in-out infinite;
}

.document b{
  display:block;
  color:var(--gold);
  margin-bottom:12px;
}

.document span,
.chart-card span{
  display:block;
  height:8px;
  border-radius:999px;
  background:#ececec;
  margin-bottom:8px;
}

.doc-1{right:170px;top:28px;}
.doc-2{left:150px;bottom:72px;animation-delay:1.3s;}

.chart-card{
  position:absolute;
  right:120px;
  bottom:32px;
  width:210px;
  height:150px;
  border-radius:18px;
  background:rgba(255,255,255,.88);
  padding:28px;
  box-shadow:14px 24px 45px rgba(0,0,0,.08);
  transform:rotate(8deg);
  animation:paperFloat 6s ease-in-out infinite .8s;
  z-index:3;
}

.chart-card span:nth-child(1){width:70%;}
.chart-card span:nth-child(2){width:90%;}
.chart-card span:nth-child(3){width:55%;}

.magnifier{
  position:absolute;
  right:215px;
  bottom:18px;
  width:82px;
  height:82px;
  border:12px solid #34383b;
  border-radius:50%;
  z-index:7;
  animation:magnifierMove 5.8s ease-in-out infinite;
}

.magnifier::after{
  content:"";
  position:absolute;
  width:78px;
  height:14px;
  background:#34383b;
  border-radius:999px;
  right:-62px;
  bottom:-34px;
  transform:rotate(42deg);
}

.person{
  position:absolute;
  width:12px;
  height:28px;
  border-radius:10px 10px 3px 3px;
  background:#484848;
  z-index:5;
  animation:personWalk 5s ease-in-out infinite;
}

.person::before{
  content:"";
  width:12px;
  height:12px;
  position:absolute;
  top:-12px;
  left:0;
  border-radius:50%;
  background:#5a5a5a;
}

.p1{right:345px;top:292px;}
.p2{right:90px;top:300px;animation-delay:1s;}
.p3{left:390px;bottom:132px;animation-delay:1.8s;}

@keyframes sceneFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-12px) rotate(.35deg);}
}

@keyframes shieldFloat{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-16px) scale(1.03);}
}

@keyframes buildingPulse{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

@keyframes softRise{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

@keyframes nodePulse{
  0%,100%{box-shadow:0 0 0 6px rgba(185,127,19,.14);}
  50%{box-shadow:0 0 0 16px rgba(185,127,19,0);}
}

@keyframes lineTravel{
  from{left:-40%;}
  to{left:110%;}
}

@keyframes paperFloat{
  0%,100%{translate:0 0;}
  50%{translate:0 -10px;}
}

@keyframes magnifierMove{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(-18px,-10px) rotate(-4deg);}
}

@keyframes personWalk{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(16px);}
}

@media (prefers-reduced-motion: reduce){
  .city-scene,
  .shield-3d,
  .building-css,
  .document,
  .chart-card,
  .magnifier,
  .person,
  .node,
  .connection::after{
    animation:none !important;
  }
}

.trust-panel{
  width:90vw;
  margin:-18px auto 0;
  border-radius:18px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 90% 20%, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(135deg,#202428,#111417);
  box-shadow:0 24px 70px rgba(0,0,0,.25);
  position:relative;
  z-index:5;
}

.trust-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 70%, rgba(185,127,19,.13), transparent 22%),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,.05), transparent 24%);
}

.metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  padding:34px 28px;
  position:relative;
  z-index:2;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.metrics div{
  display:grid;
  grid-template-columns:auto auto;
  column-gap:18px;
  align-items:center;
  padding:12px 28px;
  border-right:1px solid rgba(255,255,255,.16);
}

.metrics div:last-child{
  border-right:none;
}

.metric-icon{
  grid-row:span 2;
  font-size:2.2rem;
  color:var(--gold);
  filter:grayscale(1) sepia(1) saturate(4) hue-rotate(355deg);
}

.metrics strong{
  font-size:2rem;
}

.metrics p{
  color:#ededed;
}

.client-logos{
  padding:52px 46px 44px;
  position:relative;
  z-index:2;
  background:rgba(255,255,255,.025);
}

.client-heading{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:28px;
  max-width:1100px;
  margin:0 auto;
}

.client-heading span{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

.client-heading p{
  color:var(--gold-2);
  text-transform:uppercase;
  font-size:.88rem;
  font-weight:800;
  letter-spacing:.08em;
  text-align:center;
}

.client-logos h2{
  margin:18px auto 34px;
  text-align:center;
  font-size:clamp(1.65rem,2.2vw,2.6rem);
  letter-spacing:-.04em;
}

.logo-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.logo-card{
  min-height:138px;
  padding:18px 20px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:.25s ease;
}

.logo-card:hover{
  transform:translateY(-4px);
  border-color:rgba(216,161,58,.55);
  background:rgba(255,255,255,.075);
}

.logo-card img{
  display:block;
  width:100%;
  max-width:165px;
  height:58px;
  object-fit:contain;
  background:#f7f7f7;
  border-radius:12px;
  padding:10px 14px;
}

.logo-name{
  display:block;
  color:#f7f7f7;
  font-size:.82rem;
  font-weight:600;
  line-height:1.2;
  text-align:center;
}

.logo-card:hover .logo-name{
  color:#d6b067;
}

.trust-cta{
  margin:42px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  text-align:left;
}

.trust-cta-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:1.7rem;
}

.trust-cta p{
  font-size:1.2rem;
  color:#fff;
  margin-bottom:6px;
}

.trust-cta a{
  display:inline-flex;
  gap:12px;
  align-items:center;
  color:var(--gold-2);
  font-weight:900;
  text-transform:uppercase;
  font-size:1rem;
}


.services{
    grid-template-columns:1fr;
  }

  .service-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .metrics{
    grid-template-columns:repeat(2,1fr);
  }

  .metrics div{
    border-right:none;
  }

  .logo-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:780px){
  .header{
    height:auto;
    padding:16px 5vw;
  }

  .brand img{
    width:128px;
  }

  .nav,
  .header > .btn{
    display:none;
  }

  .menu-btn{
    display:block;
    border:0;
    background:var(--dark);
    color:white;
    width:44px;
    height:44px;
    border-radius:10px;
    font-size:1.4rem;
  }

  .hero{
    padding-top:44px;
  }

  .hero-actions{
    flex-direction:column;
  }

  .btn{
    width:100%;
  }

  .pill-row,
  .metrics,
  .service-grid,
  .about,
  .difference-grid,
  .contact{
    grid-template-columns:1fr;
  }

  
.hero-visual{
  height:580px;
  position:relative;
  perspective:1200px;
  overflow:visible;
}

.city-scene{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  animation:sceneFloat 7s ease-in-out infinite;
}

.scene-grid{
  position:absolute;
  inset:42px 0 0;
  border-radius:38px;
  transform:rotateX(62deg) rotateZ(-32deg) translateZ(-80px);
  background:
    linear-gradient(90deg, rgba(185,127,19,.16) 1px, transparent 1px),
    linear-gradient(rgba(185,127,19,.16) 1px, transparent 1px),
    radial-gradient(circle, rgba(185,127,19,.14) 1px, transparent 2px);
  background-size:54px 54px, 54px 54px, 28px 28px;
  opacity:.78;
  filter:drop-shadow(0 50px 45px rgba(185,127,19,.08));
}

.building-css{
  position:absolute;
  transform-style:preserve-3d;
  background:linear-gradient(145deg,#fff,#d8d8d8);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:22px 32px 50px rgba(0,0,0,.13);
}

.building-css::before{
  content:"";
  position:absolute;
  inset:-18px 0 auto;
  height:18px;
  background:linear-gradient(145deg,#fff,#e9e9e9);
  transform:skewX(-45deg);
  transform-origin:bottom;
  border-radius:10px 10px 0 0;
}

.building-css::after{
  content:"";
  position:absolute;
  right:-18px;
  top:-9px;
  width:18px;
  height:100%;
  background:linear-gradient(180deg,#cfcfcf,#f2f2f2);
  transform:skewY(-45deg);
  transform-origin:left;
  border-radius:0 10px 10px 0;
}

.tower{
  width:156px;
  height:215px;
  right:126px;
  top:82px;
  border-radius:14px;
  animation:buildingPulse 5s ease-in-out infinite;
}

.tower span{
  position:absolute;
  z-index:3;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  color:var(--gold);
  font-weight:900;
  font-size:2rem;
  text-shadow:0 8px 20px rgba(185,127,19,.25);
}

.tower i,
.block i{
  position:relative;
  z-index:3;
  display:inline-block;
  width:18px;
  height:34px;
  margin:72px 4px 0 13px;
  border-radius:4px;
  background:linear-gradient(180deg,rgba(185,127,19,.25),rgba(255,255,255,.7));
}

.block{
  border-radius:12px;
}

.block i{
  width:14px;
  height:24px;
  margin:28px 3px 0 12px;
}

.block-1{
  width:138px;
  height:112px;
  left:95px;
  top:178px;
  animation:softRise 6s ease-in-out infinite .2s;
}

.block-2{
  width:108px;
  height:94px;
  right:34px;
  bottom:140px;
  animation:softRise 6s ease-in-out infinite .8s;
}

.block-3{
  width:128px;
  height:96px;
  left:330px;
  bottom:98px;
  animation:softRise 6s ease-in-out infinite 1.1s;
}

.block-4{
  width:118px;
  height:82px;
  right:320px;
  top:130px;
  animation:softRise 6s ease-in-out infinite 1.5s;
}

.shield-3d{
  width:122px;
  height:142px;
  position:absolute;
  left:37%;
  top:42%;
  display:grid;
  place-items:center;
  color:white;
  font-size:4rem;
  font-weight:900;
  background:linear-gradient(145deg,var(--gold),var(--gold-2));
  border-radius:38px 38px 56px 56px;
  box-shadow:0 30px 60px rgba(185,127,19,.34);
  animation:shieldFloat 4.8s ease-in-out infinite;
  z-index:8;
}

.connection{
  position:absolute;
  height:4px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius:999px;
  transform-origin:left;
  opacity:.85;
  z-index:2;
  overflow:hidden;
}

.connection::after{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  background:#fff;
  filter:blur(4px);
  animation:lineTravel 3.2s linear infinite;
}

.connection-1{width:310px;left:230px;top:286px;transform:rotate(18deg);}
.connection-2{width:250px;right:205px;top:330px;transform:rotate(-24deg);}
.connection-3{width:310px;left:380px;bottom:178px;transform:rotate(-8deg);}
.connection-4{width:260px;left:365px;top:210px;transform:rotate(-20deg);}

.node{
  width:15px;
  height:15px;
  position:absolute;
  border-radius:50%;
  background:var(--gold-2);
  box-shadow:0 0 0 8px rgba(185,127,19,.14);
  animation:nodePulse 2.4s ease-in-out infinite;
  z-index:4;
}

.node-1{left:248px;top:282px;}
.node-2{right:250px;top:326px;animation-delay:.4s;}
.node-3{left:520px;bottom:176px;animation-delay:.8s;}
.node-4{left:430px;top:205px;animation-delay:1.2s;}

.document{
  position:absolute;
  width:180px;
  height:118px;
  border-radius:16px;
  background:rgba(255,255,255,.86);
  box-shadow:14px 24px 45px rgba(0,0,0,.08);
  transform:rotate(-15deg);
  padding:20px;
  z-index:3;
  animation:paperFloat 6s ease-in-out infinite;
}

.document b{
  display:block;
  color:var(--gold);
  margin-bottom:12px;
}

.document span,
.chart-card span{
  display:block;
  height:8px;
  border-radius:999px;
  background:#ececec;
  margin-bottom:8px;
}

.doc-1{right:170px;top:28px;}
.doc-2{left:150px;bottom:72px;animation-delay:1.3s;}

.chart-card{
  position:absolute;
  right:120px;
  bottom:32px;
  width:210px;
  height:150px;
  border-radius:18px;
  background:rgba(255,255,255,.88);
  padding:28px;
  box-shadow:14px 24px 45px rgba(0,0,0,.08);
  transform:rotate(8deg);
  animation:paperFloat 6s ease-in-out infinite .8s;
  z-index:3;
}

.chart-card span:nth-child(1){width:70%;}
.chart-card span:nth-child(2){width:90%;}
.chart-card span:nth-child(3){width:55%;}

.magnifier{
  position:absolute;
  right:215px;
  bottom:18px;
  width:82px;
  height:82px;
  border:12px solid #34383b;
  border-radius:50%;
  z-index:7;
  animation:magnifierMove 5.8s ease-in-out infinite;
}

.magnifier::after{
  content:"";
  position:absolute;
  width:78px;
  height:14px;
  background:#34383b;
  border-radius:999px;
  right:-62px;
  bottom:-34px;
  transform:rotate(42deg);
}

.person{
  position:absolute;
  width:12px;
  height:28px;
  border-radius:10px 10px 3px 3px;
  background:#484848;
  z-index:5;
  animation:personWalk 5s ease-in-out infinite;
}

.person::before{
  content:"";
  width:12px;
  height:12px;
  position:absolute;
  top:-12px;
  left:0;
  border-radius:50%;
  background:#5a5a5a;
}

.p1{right:345px;top:292px;}
.p2{right:90px;top:300px;animation-delay:1s;}
.p3{left:390px;bottom:132px;animation-delay:1.8s;}

@keyframes sceneFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-12px) rotate(.35deg);}
}

@keyframes shieldFloat{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-16px) scale(1.03);}
}

@keyframes buildingPulse{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

@keyframes softRise{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

@keyframes nodePulse{
  0%,100%{box-shadow:0 0 0 6px rgba(185,127,19,.14);}
  50%{box-shadow:0 0 0 16px rgba(185,127,19,0);}
}

@keyframes lineTravel{
  from{left:-40%;}
  to{left:110%;}
}

@keyframes paperFloat{
  0%,100%{translate:0 0;}
  50%{translate:0 -10px;}
}

@keyframes magnifierMove{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(-18px,-10px) rotate(-4deg);}
}

@keyframes personWalk{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(16px);}
}

@media (prefers-reduced-motion: reduce){
  .city-scene,
  .shield-3d,
  .building-css,
  .document,
  .chart-card,
  .magnifier,
  .person,
  .node,
  .connection::after{
    animation:none !important;
  }
}

.trust-panel{
    width:94vw;
    margin-top:20px;
  }

  .client-logos{
    padding:38px 18px 34px;
  }

  .client-heading{
    grid-template-columns:1fr;
    gap:14px;
  }

  .client-heading span{
    display:none;
  }

  .logo-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

  .logo-card{
    min-height:124px;
    padding:14px;
  }

  .logo-card img{
    height:50px;
    max-width:145px;
  }

  .logo-name{
    font-size:.76rem;
  }

  .trust-cta{
    flex-direction:column;
    text-align:center;
  }

  .hero-visual{
    height:310px;
    transform:scale(.68);
    transform-origin:center top;
  }

  .metrics{
    margin-top:20px;
  }

  .metrics div{
    padding:18px 10px;
  }

  

.hero-visual{
  height:580px;
  position:relative;
  perspective:1200px;
  overflow:visible;
}

.city-scene{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  animation:sceneFloat 7s ease-in-out infinite;
}

.scene-grid{
  position:absolute;
  inset:42px 0 0;
  border-radius:38px;
  transform:rotateX(62deg) rotateZ(-32deg) translateZ(-80px);
  background:
    linear-gradient(90deg, rgba(185,127,19,.16) 1px, transparent 1px),
    linear-gradient(rgba(185,127,19,.16) 1px, transparent 1px),
    radial-gradient(circle, rgba(185,127,19,.14) 1px, transparent 2px);
  background-size:54px 54px, 54px 54px, 28px 28px;
  opacity:.78;
  filter:drop-shadow(0 50px 45px rgba(185,127,19,.08));
}

.building-css{
  position:absolute;
  transform-style:preserve-3d;
  background:linear-gradient(145deg,#fff,#d8d8d8);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:22px 32px 50px rgba(0,0,0,.13);
}

.building-css::before{
  content:"";
  position:absolute;
  inset:-18px 0 auto;
  height:18px;
  background:linear-gradient(145deg,#fff,#e9e9e9);
  transform:skewX(-45deg);
  transform-origin:bottom;
  border-radius:10px 10px 0 0;
}

.building-css::after{
  content:"";
  position:absolute;
  right:-18px;
  top:-9px;
  width:18px;
  height:100%;
  background:linear-gradient(180deg,#cfcfcf,#f2f2f2);
  transform:skewY(-45deg);
  transform-origin:left;
  border-radius:0 10px 10px 0;
}

.tower{
  width:156px;
  height:215px;
  right:126px;
  top:82px;
  border-radius:14px;
  animation:buildingPulse 5s ease-in-out infinite;
}

.tower span{
  position:absolute;
  z-index:3;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  color:var(--gold);
  font-weight:900;
  font-size:2rem;
  text-shadow:0 8px 20px rgba(185,127,19,.25);
}

.tower i,
.block i{
  position:relative;
  z-index:3;
  display:inline-block;
  width:18px;
  height:34px;
  margin:72px 4px 0 13px;
  border-radius:4px;
  background:linear-gradient(180deg,rgba(185,127,19,.25),rgba(255,255,255,.7));
}

.block{
  border-radius:12px;
}

.block i{
  width:14px;
  height:24px;
  margin:28px 3px 0 12px;
}

.block-1{
  width:138px;
  height:112px;
  left:95px;
  top:178px;
  animation:softRise 6s ease-in-out infinite .2s;
}

.block-2{
  width:108px;
  height:94px;
  right:34px;
  bottom:140px;
  animation:softRise 6s ease-in-out infinite .8s;
}

.block-3{
  width:128px;
  height:96px;
  left:330px;
  bottom:98px;
  animation:softRise 6s ease-in-out infinite 1.1s;
}

.block-4{
  width:118px;
  height:82px;
  right:320px;
  top:130px;
  animation:softRise 6s ease-in-out infinite 1.5s;
}

.shield-3d{
  width:122px;
  height:142px;
  position:absolute;
  left:37%;
  top:42%;
  display:grid;
  place-items:center;
  color:white;
  font-size:4rem;
  font-weight:900;
  background:linear-gradient(145deg,var(--gold),var(--gold-2));
  border-radius:38px 38px 56px 56px;
  box-shadow:0 30px 60px rgba(185,127,19,.34);
  animation:shieldFloat 4.8s ease-in-out infinite;
  z-index:8;
}

.connection{
  position:absolute;
  height:4px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius:999px;
  transform-origin:left;
  opacity:.85;
  z-index:2;
  overflow:hidden;
}

.connection::after{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  background:#fff;
  filter:blur(4px);
  animation:lineTravel 3.2s linear infinite;
}

.connection-1{width:310px;left:230px;top:286px;transform:rotate(18deg);}
.connection-2{width:250px;right:205px;top:330px;transform:rotate(-24deg);}
.connection-3{width:310px;left:380px;bottom:178px;transform:rotate(-8deg);}
.connection-4{width:260px;left:365px;top:210px;transform:rotate(-20deg);}

.node{
  width:15px;
  height:15px;
  position:absolute;
  border-radius:50%;
  background:var(--gold-2);
  box-shadow:0 0 0 8px rgba(185,127,19,.14);
  animation:nodePulse 2.4s ease-in-out infinite;
  z-index:4;
}

.node-1{left:248px;top:282px;}
.node-2{right:250px;top:326px;animation-delay:.4s;}
.node-3{left:520px;bottom:176px;animation-delay:.8s;}
.node-4{left:430px;top:205px;animation-delay:1.2s;}

.document{
  position:absolute;
  width:180px;
  height:118px;
  border-radius:16px;
  background:rgba(255,255,255,.86);
  box-shadow:14px 24px 45px rgba(0,0,0,.08);
  transform:rotate(-15deg);
  padding:20px;
  z-index:3;
  animation:paperFloat 6s ease-in-out infinite;
}

.document b{
  display:block;
  color:var(--gold);
  margin-bottom:12px;
}

.document span,
.chart-card span{
  display:block;
  height:8px;
  border-radius:999px;
  background:#ececec;
  margin-bottom:8px;
}

.doc-1{right:170px;top:28px;}
.doc-2{left:150px;bottom:72px;animation-delay:1.3s;}

.chart-card{
  position:absolute;
  right:120px;
  bottom:32px;
  width:210px;
  height:150px;
  border-radius:18px;
  background:rgba(255,255,255,.88);
  padding:28px;
  box-shadow:14px 24px 45px rgba(0,0,0,.08);
  transform:rotate(8deg);
  animation:paperFloat 6s ease-in-out infinite .8s;
  z-index:3;
}

.chart-card span:nth-child(1){width:70%;}
.chart-card span:nth-child(2){width:90%;}
.chart-card span:nth-child(3){width:55%;}

.magnifier{
  position:absolute;
  right:215px;
  bottom:18px;
  width:82px;
  height:82px;
  border:12px solid #34383b;
  border-radius:50%;
  z-index:7;
  animation:magnifierMove 5.8s ease-in-out infinite;
}

.magnifier::after{
  content:"";
  position:absolute;
  width:78px;
  height:14px;
  background:#34383b;
  border-radius:999px;
  right:-62px;
  bottom:-34px;
  transform:rotate(42deg);
}

.person{
  position:absolute;
  width:12px;
  height:28px;
  border-radius:10px 10px 3px 3px;
  background:#484848;
  z-index:5;
  animation:personWalk 5s ease-in-out infinite;
}

.person::before{
  content:"";
  width:12px;
  height:12px;
  position:absolute;
  top:-12px;
  left:0;
  border-radius:50%;
  background:#5a5a5a;
}

.p1{right:345px;top:292px;}
.p2{right:90px;top:300px;animation-delay:1s;}
.p3{left:390px;bottom:132px;animation-delay:1.8s;}

@keyframes sceneFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-12px) rotate(.35deg);}
}

@keyframes shieldFloat{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-16px) scale(1.03);}
}

@keyframes buildingPulse{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

@keyframes softRise{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

@keyframes nodePulse{
  0%,100%{box-shadow:0 0 0 6px rgba(185,127,19,.14);}
  50%{box-shadow:0 0 0 16px rgba(185,127,19,0);}
}

@keyframes lineTravel{
  from{left:-40%;}
  to{left:110%;}
}

@keyframes paperFloat{
  0%,100%{translate:0 0;}
  50%{translate:0 -10px;}
}

@keyframes magnifierMove{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(-18px,-10px) rotate(-4deg);}
}

@keyframes personWalk{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(16px);}
}

@media (prefers-reduced-motion: reduce){
  .city-scene,
  .shield-3d,
  .building-css,
  .document,
  .chart-card,
  .magnifier,
  .person,
  .node,
  .connection::after{
    animation:none !important;
  }
}

.trust-panel{
  width:90vw;
  margin:-18px auto 0;
  border-radius:18px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 90% 20%, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(135deg,#202428,#111417);
  box-shadow:0 24px 70px rgba(0,0,0,.25);
  position:relative;
  z-index:5;
}

.trust-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 70%, rgba(185,127,19,.13), transparent 22%),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,.05), transparent 24%);
}

.metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  padding:34px 28px;
  position:relative;
  z-index:2;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.metrics div{
  display:grid;
  grid-template-columns:auto auto;
  column-gap:18px;
  align-items:center;
  padding:12px 28px;
  border-right:1px solid rgba(255,255,255,.16);
}

.metrics div:last-child{
  border-right:none;
}

.metric-icon{
  grid-row:span 2;
  font-size:2.2rem;
  color:var(--gold);
  filter:grayscale(1) sepia(1) saturate(4) hue-rotate(355deg);
}

.metrics strong{
  font-size:2rem;
}

.metrics p{
  color:#ededed;
}

.client-logos{
  padding:52px 46px 44px;
  position:relative;
  z-index:2;
  background:rgba(255,255,255,.025);
}

.client-heading{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:28px;
  max-width:1100px;
  margin:0 auto;
}

.client-heading span{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

.client-heading p{
  color:var(--gold-2);
  text-transform:uppercase;
  font-size:.88rem;
  font-weight:800;
  letter-spacing:.08em;
  text-align:center;
}

.client-logos h2{
  margin:18px auto 34px;
  text-align:center;
  font-size:clamp(1.65rem,2.2vw,2.6rem);
  letter-spacing:-.04em;
}

.logo-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.logo-card{
  min-height:138px;
  padding:18px 20px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:.25s ease;
}

.logo-card:hover{
  transform:translateY(-4px);
  border-color:rgba(216,161,58,.55);
  background:rgba(255,255,255,.075);
}

.logo-card img{
  display:block;
  width:100%;
  max-width:165px;
  height:58px;
  object-fit:contain;
  background:#f7f7f7;
  border-radius:12px;
  padding:10px 14px;
}

.logo-name{
  display:block;
  color:#f7f7f7;
  font-size:.82rem;
  font-weight:600;
  line-height:1.2;
  text-align:center;
}

.logo-card:hover .logo-name{
  color:#d6b067;
}

.trust-cta{
  margin:42px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  text-align:left;
}

.trust-cta-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:1.7rem;
}

.trust-cta p{
  font-size:1.2rem;
  color:#fff;
  margin-bottom:6px;
}

.trust-cta a{
  display:inline-flex;
  gap:12px;
  align-items:center;
  color:var(--gold-2);
  font-weight:900;
  text-transform:uppercase;
  font-size:1rem;
}


.services{
    margin-top:0;
    padding-top:72px;
  }

  .about-box{
    padding:30px;
  }
}

/* Fundo hero aplicado a partir da imagem aprovada */
.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 28%, rgba(255,255,255,.35) 52%, rgba(255,255,255,.02) 100%),
    url("assets/hero-adp-background.png") center right / cover no-repeat;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at 18% 50%, rgba(255,255,255,.42), transparent 38%);
}

.hero-content{
  z-index:2;
}

.hero-visual{
  min-height:580px;
}

.hero-visual .city-scene{
  display:none !important;
}

@media (max-width: 980px){
  .hero{
    background:
      linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.74) 48%, rgba(255,255,255,.28) 100%),
      url("assets/hero-adp-background.png") center bottom / cover no-repeat;
  }
  .hero-visual{
    display:none;
  }
}