/* TRAFFIC EUROPE V6 | Services and scroll-controlled product visual.
   No animation libraries, WebGL downloads, or third-party requests. */

/* A clearer, detailed presentation of the original service scope. */
.services-v6 { background: #f4f7f9; padding-block: clamp(84px, 9vw, 130px); }
.services-heading-v6 { max-width: 950px; margin-bottom: 44px; }
.services-heading-v6 .section-label { margin-bottom: 24px; }
.services-heading-v6 h2 { font-size:clamp(32px, 4vw, 57px); letter-spacing:-.058em; line-height:1.18; margin:0 0 22px; font-weight:700; }
.services-heading-v6 h2 span { color:#6f8796; }
.services-heading-v6>p { max-width:850px; margin:0; color:#536b7b; font-size:15px; line-height:1.9; }
.services-grid-v6 { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.service-card-v6 { border:1px solid #d9e4eb; border-top:3px solid transparent; background:#fff; min-height:375px; padding:clamp(23px,3vw,37px);transition:border-color .25s,box-shadow .25s,transform .25s; position:relative; }
.service-card-v6:hover { border-top-color:#548eac;box-shadow:0 17px 42px rgba(8,43,76,.065);transform:translateY(-3px); }
.service-card-top-v6 { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; }
.service-card-index-v6 { font-size:11px; font-weight:800; color:#7195aa; letter-spacing:.12em; }
.service-symbol-v6 { width:56px; height:56px; display:grid;place-items:center; color:#28718d; background:#eef5f8; border:1px solid #e1eef3; }
.service-symbol-v6 svg {width:31px;height:31px;}
.service-card-v6 h3 { font-size:clamp(21px,2.05vw,28px);line-height:1.26;letter-spacing:-.045em;margin:0 0 10px;color:#092d4e; }
.service-summary-v6 { color:#647989; font-size:12px; line-height:1.8; margin:0 0 23px; max-width:435px; }
.service-details-v6 { list-style:none; margin:0; padding:18px 0 0; border-top:1px solid #e7edf1; display:grid;gap:11px; }
.service-details-v6 li { font-size:13px;line-height:1.6; color:#334e60; position:relative; padding-left:21px; }
.service-details-v6 li:before { content:''; position:absolute; left:0; top:.69em; width:7px; height:7px; background:#6da6c0; border-radius:2px; transform:rotate(45deg); }
.workflow-v6 { display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:center;border-top:1px solid #ccdae3;margin-top:44px;padding-top:27px; }
.workflow-caption-v6 { font-size:10px;line-height:1.8;letter-spacing:.12em;font-weight:800;color:#39718d; }
.workflow-v6 ol {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.workflow-v6 li {display:flex;align-items:center;gap:9px; font-size:11px; line-height:1.4; font-weight:750; color:#1b405c;white-space:normal; }
.workflow-number-v6 {font-weight:800;color:#85afc3;font-size:10px;display:inline-block; flex:0 0 auto;}
.workflow-v6 li:not(:last-child):after {content:'';width:20px;height:1px;margin-left:auto;background:#a6c2d0;flex:0 1 20px;}

/* Scroll-driven 3D signal: CSS surfaces and light lenses, animated by small JS state updates. */
.has-signal .hero { isolation:isolate; }
.has-signal .hero:before {opacity:.095;}
.has-signal .hero-lines { opacity:.17;right:-13%; }
.has-signal .hero-content { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(305px,.75fr); gap:clamp(10px,3vw,44px);align-items:center;min-height:685px; }
.has-signal .hero-copy { max-width:710px;padding:80px 0 82px; }
.has-signal .hero-copy h1 { font-size:clamp(51px,5vw,75px); }
.has-signal .hero-side-label {display:none;}
.hero-signal {width:min(100%,440px);height:550px;position:relative;justify-self:end;isolation:isolate;pointer-events:none;--signal-lift:0px;--signal-rotate:-12deg;--signal-scale:1; }
.signal-art {position:relative;height:480px;width:100%;perspective:1100px;}
.signal-orbit {position:absolute;left:50%;top:46%;width:400px;height:400px;border:1px solid rgba(168,211,227,.15);border-radius:50%;transform:translate(-50%,-50%) rotateX(65deg);pointer-events:none;}
.signal-orbit-one {box-shadow:0 0 0 58px rgba(129,196,220,.014),0 0 0 115px rgba(129,196,220,.011);}
.signal-orbit-two {width:265px;height:265px;border-color:rgba(141,213,236,.15);}
.signal-floor {width:245px;height:34px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,7,19,.62) 0%,rgba(11,43,62,.22) 52%,transparent 73%);position:absolute;left:50%;bottom:10px;transform:translateX(-45%);filter:blur(9px)}
.signal-object {height:470px;width:210px;position:absolute;left:50%;top:0;margin-left:-105px;transform:translateY(var(--signal-lift)) rotateY(var(--signal-rotate)) rotateX(2deg) scale(var(--signal-scale));transform-style:preserve-3d;transform-origin:50% 48%;will-change:transform;}
.signal-pole { position:absolute;width:30px;height:180px;top:340px;left:91px;border-left:2px solid #6b7d87;border-right:3px solid #142b3d;background:linear-gradient(90deg,#0b1926 0%,#415665 19%,#596b77 38%,#1a3041 73%,#07151f 100%);box-shadow:14px 10px 25px rgba(0,0,0,.12); }
.signal-housing {position:absolute;left:20px;top:31px;width:171px;height:379px;border-radius:27px;background:linear-gradient(108deg,#283b48 0%,#0d1f2e 23%,#04101c 72%,#152b3a 100%);border:5px solid #182e40;box-shadow: inset 5px 4px 8px rgba(171,192,205,.14), inset -8px 3px 12px rgba(0,0,0,.5), 15px 24px 36px rgba(0,3,12,.55), -8px -4px 30px rgba(125,171,195,.06);transform-style:preserve-3d;}
.signal-housing:before {content:'';position:absolute;top:9px;bottom:12px;width:31px;right:-25px;border-radius:0 17px 21px 0;background:linear-gradient(90deg,#142d3d,#030b12 78%);transform:rotateY(66deg);transform-origin:left center;box-shadow:12px 8px 22px #010b16;}
.signal-housing:after {content:'';position:absolute;left:13px;right:10px;top:-23px;height:31px;border-radius:18px;background:linear-gradient(180deg,#566672,#182d3d 63%,#0a1825);transform:rotateX(65deg);transform-origin:center bottom;}
.signal-front {position:absolute;inset:9px 9px 10px;background:linear-gradient(90deg,#030c17,#0a1a27 36%,#071420 73%,#020b12);border-radius:20px;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;box-shadow:inset 3px 3px 12px #01060a,inset -2px -1px 6px #263b4b;transform:translateZ(8px);}
.signal-lamp {width:104px;height:104px;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle at 45% 40%,#101d28,#020911 69%);box-shadow:inset 0 5px 9px rgba(0,0,0,.98),0 2px 2px rgba(100,133,151,.12);border:4px solid #142431;}
.signal-visor {position:absolute;z-index:2;top:-10px;left:-9px;right:-9px;height:53px;border-top-left-radius:80px;border-top-right-radius:80px;border-bottom:4px solid transparent;background:linear-gradient(180deg,rgba(23,42,55,.94),rgba(14,27,39,.92) 35%,rgba(8,19,28,0) 92%);transform:translateZ(12px) rotateX(9deg);pointer-events:none;}
.signal-lens {width:84px;height:84px;border-radius:50%;position:relative;display:block;box-shadow:inset 4px 9px 15px rgba(0,0,0,.73),inset -3px -3px 13px rgba(0,0,0,.8),0 0 0 3px rgba(0,0,0,.72);transition:background .35s ease,box-shadow .35s ease;}
.signal-lens:after {content:'';position:absolute;left:20%;top:14%;width:45%;height:19%;border-radius:50%;background:rgba(255,255,255,.07);filter:blur(5px);transform:rotate(-25deg)}
.signal-lamp-red .signal-lens {background:radial-gradient(circle at 45% 37%,#62201b 0%,#3a1414 43%,#160b12 88%)}
.signal-lamp-amber .signal-lens {background:radial-gradient(circle at 45% 37%,#635024 0%,#3c321b 43%,#1a150f 88%)}
.signal-lamp-green .signal-lens {background:radial-gradient(circle at 45% 37%,#1d4a3a 0%,#153328 43%,#0a1919 88%)}
.hero-signal[data-signal-state="red"] .signal-lamp-red .signal-lens {background:radial-gradient(circle at 40% 32%,#ffbe8b 0%,#ff614c 18%,#ef241c 50%,#860d0c 88%);box-shadow:inset -8px -10px 15px rgba(79,0,0,.68),inset 3px 8px 12px rgba(255,211,153,.34),0 0 19px #ff3d2e,0 0 58px rgba(255,57,47,.46),0 0 95px rgba(253,61,51,.14)}
.hero-signal[data-signal-state="amber"] .signal-lamp-amber .signal-lens {background:radial-gradient(circle at 40% 32%,#fff4b8 0%,#ffd45e 22%,#f5a61d 57%,#965114 90%);box-shadow:inset -8px -10px 15px rgba(110,52,0,.48),inset 3px 8px 12px rgba(255,255,177,.38),0 0 22px #efad3b,0 0 58px rgba(251,184,58,.42),0 0 92px rgba(252,177,38,.13)}
.hero-signal[data-signal-state="green"] .signal-lamp-green .signal-lens {background:radial-gradient(circle at 40% 32%,#bbfff1 0%,#69f5bb 21%,#13be76 57%,#076946 93%);box-shadow:inset -8px -10px 15px rgba(0,62,37,.52),inset 3px 8px 12px rgba(204,255,219,.35),0 0 22px #40e4a2,0 0 56px rgba(37,216,143,.38),0 0 92px rgba(37,216,143,.13)}
.sr-only {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1060px) {
 .has-signal .hero-content {grid-template-columns:minmax(0,1.3fr) minmax(255px,.7fr);gap:0;min-height:635px;}
 .has-signal .hero-copy h1{font-size:clamp(45px,5.2vw,63px)}
 .hero-signal{width:340px;height:505px;justify-self:center;}
 .signal-art{height:445px;}
 .signal-object{scale:.86;transform-origin:center 22%;}
 .signal-orbit{width:310px;height:310px;}
 .signal-orbit-two{width:230px;height:230px;}
}
@media(max-width:820px) {
 .has-signal .hero-content {grid-template-columns:1fr;justify-items:stretch;min-height:auto;}
 .has-signal .hero-copy {padding:68px 0 0;max-width:700px;}
 .has-signal .hero-copy h1{font-size:clamp(46px,9vw,69px);}
 .has-signal .hero-copy>p{max-width:600px;}
 .hero-signal{width:min(100%,420px);height:425px;margin:0 auto;justify-self:center;}
 .signal-art{height:370px;}
 .signal-object{scale:.73;transform-origin:center 0%;}
 .signal-orbit{top:42%;width:300px;height:300px;}
 .signal-orbit-two{width:190px;height:190px;}
 .signal-floor{bottom:0;}
 .has-signal .hero-bottom{margin-top:0;}
 .workflow-v6{grid-template-columns:1fr;gap:16px;}
}
@media(max-width:680px) {
 .services-grid-v6{grid-template-columns:1fr;gap:13px;}
 .service-card-v6{min-height:0;padding:25px 24px;}
 .services-heading-v6 {margin-bottom:32px;}
 .services-heading-v6>p{font-size:14px;}
 .service-details-v6 li{font-size:13px;}
 .workflow-v6 ol{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px;}
 .workflow-v6 li:after{display:none;}
 .has-signal .hero-copy {padding-top:62px;}
 .has-signal .hero-copy h1 {font-size:clamp(43px,10.7vw,65px);}
 .hero-signal{height:412px;}
}
@media(max-width:360px) {
 .hero-signal{height:380px;}
 .signal-art{height:338px;}
 .signal-object{scale:.66;}
}
@media(prefers-reduced-motion:reduce) {
 .signal-object{transform:rotateY(-8deg) scale(.97)!important;transition:none!important;will-change:auto!important;}
 .signal-lens{transition:none!important;}
 .service-card-v6{transition:none!important;}
 .service-card-v6:hover{transform:none;}
}

/* Visor refinement: a real upper hood rather than a stripe across the lens. */
.signal-visor {
  top:-17px;
  left:-9px;
  right:-9px;
  height:28px;
  border:1px solid #1c303e;
  border-bottom:0;
  border-radius:90px 90px 7px 7px;
  background:linear-gradient(180deg,#233947 0%,#0d202d 45%,#04111c 100%);
  box-shadow:0 6px 9px rgba(0,0,0,.42);
  transform:translateZ(12px) rotateX(15deg);
}

/* Very narrow phones: keep the existing statistics strip inside the viewport. */
@media(max-width:380px) {
  .stats {grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .stats .stat {min-width:0;gap:7px;padding-right:0;}
  .stats .stat:not(:first-child){padding-left:10px;}
  .stats .stat strong{font-size:clamp(35px,11vw,44px);}
  .stats .stat>span{font-size:10px;overflow-wrap:anywhere;}
  .stats .stat-text{grid-column:1 / -1;padding-left:0!important;max-width:100%;}
}