:root{
  --navy:#001F44;
  --royal:#242C50;
  --cyan:#76BEDB;
  --teal:#76BEDB;
  --white:#FFFFFF;
  --ink:#001F44;
  --body:#4B4D53;
  --muted:#4B4D53;
  --soft:#F3F4F6;
  --line:rgba(0,31,68,.14);
  --shadow:0 24px 70px rgba(0,31,68,.11);
  --radius:22px;
  --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;color:var(--body);font-family:'DejaVu Sans',Arial,sans-serif;background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.nav-open{overflow:hidden}
button,a{font:inherit}
a{color:inherit;text-decoration:none}
button{border:0}
img,svg{display:block;max-width:100%}
/* Text wrapping: avoid orphaned single words at the end of lines. */
p,.faq-question span,.method-list li,.include-list li{text-wrap:pretty}
h1,h2,h3,.compare-title{text-wrap:balance}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}
.section{padding:120px 0}
.narrow-wide{max-width:1100px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.reveal.is-visible{opacity:1;transform:none}

.site-header{position:absolute;z-index:50;top:0;left:0;width:100%;padding:22px 0}
.header-inner{height:64px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 18px;background:rgba(255,255,255,.94);border:1px solid rgba(0,31,68,.08);border-radius:18px;box-shadow:0 14px 45px rgba(0,31,68,.09);backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{width:150px;height:auto;object-fit:contain}
.site-nav{display:flex;align-items:center;gap:28px;color:var(--navy);font-family:Poppins,Arial,sans-serif;font-size:14px;font-weight:600}
.site-nav a{position:relative}
.site-nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-7px;width:100%;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.site-nav a:hover::after,.site-nav a:focus-visible::after{transform:scaleX(1)}
.site-nav .nav-cta{padding:12px 16px;border-radius:11px;background:var(--navy);color:#fff;box-shadow:0 7px 20px rgba(0,31,68,.16)}
.nav-toggle{display:none;background:none;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:25px;height:2px;background:var(--navy);margin:5px 0;border-radius:2px;transition:.2s}

.hero{position:relative;padding-top:146px;min-height:830px;display:grid;align-items:center;background:radial-gradient(circle at 82% 40%,rgba(118,190,219,.16),transparent 26%),linear-gradient(180deg,#fff 0%,#fff 72%,#F3F4F6 100%);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,31,68,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,31,68,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(480px,.92fr);gap:70px;align-items:center}
.eyebrow,.kicker{display:inline-flex;align-items:center;gap:10px;font-family:Poppins,Arial,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--teal)}
.eyebrow::before,.kicker::before{content:"";width:30px;height:2px;background:currentColor}
h1,h2,h3{font-family:Poppins,Arial,sans-serif;color:var(--navy);margin:0}
h1{font-size:clamp(52px,5.3vw,78px);line-height:1.02;letter-spacing:-.045em;max-width:720px;margin-top:22px}
.hero-text{font-size:20px;line-height:1.65;max-width:660px;margin:28px 0 0;color:var(--body)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:0 20px;font-family:Poppins,Arial,sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;color:var(--navy)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--cyan);color:var(--navy);box-shadow:0 12px 28px rgba(118,190,219,.3)}
.btn-primary:hover{box-shadow:0 16px 32px rgba(118,190,219,.4)}
.btn-secondary{background:#fff;border:1px solid rgba(0,31,68,.24);color:var(--navy)}
.btn-soft{background:var(--soft);border:1px solid var(--line);color:var(--navy)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-outline-light{border:1px solid rgba(255,255,255,.5);color:#fff;background:transparent}
.centered{justify-content:center}

.hero-visual{position:relative;min-height:520px;display:grid;place-items:center}
.video-placeholder{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;text-align:center;background:linear-gradient(145deg,#001F44 0%,#242C50 58%,#242C50 100%);border:1px solid rgba(118,190,219,.26);box-shadow:0 34px 80px rgba(0,31,68,.24),inset 0 0 0 1px rgba(255,255,255,.035);color:#fff}
.video-placeholder::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(118,190,219,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(118,190,219,.055) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.86),rgba(0,0,0,.35))}
.video-placeholder::after{content:"";position:absolute;z-index:-1;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(118,190,219,.18),rgba(118,190,219,.04) 48%,transparent 70%);filter:blur(2px)}
.video-placeholder-hero{width:100%;max-width:535px;aspect-ratio:1.04;border-radius:32px}
.video-placeholder-demo{width:100%;aspect-ratio:16 / 9;height:auto;min-height:0;border-radius:24px}
.video-placeholder-proof{min-height:330px;border-radius:22px}
.video-badge{position:absolute;top:20px;left:20px;z-index:2;padding:7px 10px;border:1px solid rgba(118,190,219,.3);border-radius:999px;background:rgba(0,31,68,.5);backdrop-filter:blur(8px);font:700 10px/1 Poppins,Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan)}
.video-play{position:relative;z-index:2;width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:var(--cyan);border:1px solid rgba(255,255,255,.55);box-shadow:0 0 0 12px rgba(118,190,219,.08),0 18px 40px rgba(0,0,0,.24);animation:videoPulse 2.8s ease-in-out infinite}
.video-play svg{width:34px;height:34px;fill:var(--navy);transform:translateX(2px)}
.video-placeholder-copy{position:absolute;left:24px;right:24px;bottom:24px;z-index:2;display:grid;gap:4px;text-align:left}
.video-placeholder-copy strong{font:700 16px/1.3 Poppins,Arial,sans-serif;color:#fff}
.video-placeholder-copy span{font-size:13px;line-height:1.4;color:rgba(255,255,255,.72)}
.demo-caption{position:absolute;bottom:0;left:0;right:0;padding:13px 20px;background:rgba(0,31,68,.84);font-size:12px;text-align:center;color:rgba(255,255,255,.72);z-index:3}
.video-placeholder-demo .video-placeholder-copy{bottom:56px;text-align:center}
.video-placeholder-demo .video-placeholder-copy strong{font-size:18px}
@keyframes videoPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 10px rgba(118,190,219,.07),0 18px 40px rgba(0,0,0,.24)}50%{transform:scale(1.055);box-shadow:0 0 0 18px rgba(118,190,219,.025),0 22px 48px rgba(0,0,0,.28)}}

.section-heading{max-width:780px;margin-bottom:54px}.section-heading h2{font-size:clamp(36px,3.6vw,54px);line-height:1.08;letter-spacing:-.035em;margin-top:14px}.section-heading.light h2,.section-heading.light .section-lead{color:#fff}.section-heading.light .kicker{color:var(--cyan)}
.section-lead{font-size:18px;line-height:1.7;margin:20px 0 0;max-width:860px}
.problem{background:#F3F4F6}
.problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.info-card,.solution-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;min-height:260px;box-shadow:0 12px 35px rgba(0,31,68,.04)}
.icon-box{width:48px;height:48px;border-radius:13px;background:rgba(118,190,219,.16);display:grid;place-items:center;margin-bottom:26px}.icon-box svg{width:25px;height:25px;fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.info-card h3,.solution-card h3{font-size:19px;line-height:1.25;margin-bottom:12px}.info-card p,.solution-card p{font-size:15px;line-height:1.6;margin:0;color:var(--body)}

.method{position:relative;background:linear-gradient(135deg,var(--navy),#242C50 70%,var(--royal));color:rgba(255,255,255,.82);overflow:hidden}
.method::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(118,190,219,.18),transparent 28%)}
.method .container{position:relative;z-index:1}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.12);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.03)}
.compare-column{padding:34px}.compare-column.trackid{background:rgba(118,190,219,.08);border-left:1px solid rgba(255,255,255,.1)}
.compare-title{font:700 18px/1.2 Poppins,Arial,sans-serif;color:#fff;margin-bottom:26px}
.method-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.method-list li{display:flex;align-items:center;gap:16px;padding:15px 16px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.035);font-size:15px;line-height:1.4}.method-list li span{font:700 11px/1 Poppins,Arial,sans-serif;color:var(--cyan);letter-spacing:.08em}
.demo-label{margin:46px 0 12px;font:600 12px/1 Poppins,Arial,sans-serif;text-transform:uppercase;letter-spacing:.13em;color:var(--cyan)}

.transformation{padding-block:145px}.flow{display:grid;grid-template-columns:1fr 74px 1fr 74px 1fr;align-items:stretch;margin-top:66px}.flow-step{position:relative;border:1px solid var(--line);border-radius:20px;padding:30px;background:#fff;min-height:210px;box-shadow:0 14px 40px rgba(0,31,68,.05)}.flow-step.emphasis{background:linear-gradient(145deg,var(--navy),#242C50);border-color:transparent}.flow-step.emphasis h3,.flow-step.emphasis p{color:#fff}.flow-step.emphasis .step-number{color:var(--cyan)}.step-number{display:block;font:700 12px/1 Poppins,Arial,sans-serif;letter-spacing:.16em;color:var(--teal);margin-bottom:28px}.flow-step h3{font-size:21px;margin-bottom:10px}.flow-step p{margin:0;font-size:15px;line-height:1.6}.flow-arrow{display:grid;place-items:center}.flow-arrow svg{width:24px;height:24px;fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.scenarios{background:#F3F4F6}.scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.scenario-card{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 16px 44px rgba(0,31,68,.055);scroll-margin-top:110px}.scenario-visual{height:270px;position:relative;overflow:hidden;background:linear-gradient(145deg,#F3F4F6,#F3F4F6)}.scenario-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,31,68,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,31,68,.06) 1px,transparent 1px);background-size:28px 28px}.office-monitor{position:absolute;width:150px;height:105px;left:20%;top:24%;background:#fff;border:8px solid var(--navy);border-radius:9px;box-shadow:0 20px 40px rgba(0,31,68,.16)}.office-monitor::after{content:"";position:absolute;left:55px;bottom:-37px;width:25px;height:30px;background:var(--navy)}.office-laptop{position:absolute;width:190px;height:110px;right:12%;bottom:16%;border-radius:10px 10px 4px 4px;background:linear-gradient(145deg,var(--royal),var(--navy));transform:perspective(400px) rotateX(-12deg)}
.asset-tag{position:absolute;padding:7px 9px;border-radius:8px;background:#fff;border:1px solid rgba(118,190,219,.20);color:var(--teal);font:700 9px/1 Poppins,Arial,sans-serif;letter-spacing:.1em;box-shadow:0 9px 22px rgba(0,31,68,.12)}.t1{left:12%;bottom:20%}.t2{right:15%;top:16%}.t3{left:17%;top:17%}.t4{right:14%;bottom:18%}.warehouse{background:linear-gradient(145deg,#F3F4F6,#F3F4F6)}.shelf{position:absolute;width:38%;height:160px;bottom:32px;border-left:7px solid var(--navy);border-right:7px solid var(--navy);display:grid;grid-template-rows:repeat(3,1fr);gap:5px}.s1{left:9%}.s2{right:9%}.shelf i{display:block;border-top:6px solid var(--navy);background:repeating-linear-gradient(90deg,rgba(118,190,219,.25) 0 22px,transparent 22px 30px)}
.scenario-content{padding:30px}.scenario-tag{font:600 11px/1 Poppins,Arial,sans-serif;color:var(--teal);text-transform:uppercase;letter-spacing:.12em}.scenario-content h3{font-size:26px;margin:10px 0 10px}.scenario-content p{font-size:16px;line-height:1.65;margin:0 0 26px;min-height:80px}

.solution-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.solution-card{padding:22px;min-height:285px}.solution-card .icon-box{margin-bottom:20px}.solution-card h3{font-size:17px}.solution-card p{font-size:14px}

.configurator{position:relative;background:linear-gradient(135deg,var(--navy),#242C50 70%,var(--royal));overflow:hidden}.configurator::before{content:"";position:absolute;right:-170px;top:-170px;width:520px;height:520px;border:1px solid rgba(118,190,219,.15);border-radius:50%;box-shadow:0 0 0 60px rgba(118,190,219,.035),0 0 0 120px rgba(118,190,219,.025)}.config-layout{position:relative;z-index:1}.config-card{background:#fff;border-radius:26px;padding:34px;box-shadow:0 30px 80px rgba(0,0,0,.2);max-width:950px}.progress-meta{display:flex;justify-content:space-between;align-items:center;font:600 11px/1 Poppins,Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--body);margin-bottom:12px}.progress-track{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.progress-track span{height:5px;background:rgba(0,31,68,.10);border-radius:10px;transition:background .2s ease}.progress-track span.active{background:var(--cyan)}.config-question-wrap{padding:40px 0 32px}.config-label,.micro-label{display:block;font:600 11px/1.2 Poppins,Arial,sans-serif;color:var(--teal);text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}.config-question-wrap h3{font-size:30px;line-height:1.25;margin-bottom:24px}.config-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.option-btn{min-height:64px;padding:14px 16px;text-align:left;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;transition:.2s;font-size:15px;line-height:1.35}.option-btn:hover{border-color:var(--cyan);background:#F3F4F6}.option-btn.selected{border-color:var(--teal);box-shadow:0 0 0 2px rgba(118,190,219,.22);background:#F3F4F6;color:var(--navy);font-weight:700}.config-controls{display:flex;gap:12px;padding-top:24px;border-top:1px solid rgba(0,31,68,.10)}.config-card .btn-ghost{border-color:var(--line);color:var(--navy)}

.recommendation{background:#fff}.recommend-pending[hidden],.recommend-result[hidden]{display:none!important}.recommend-pending{min-height:420px;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);background:radial-gradient(circle at 50% 20%,rgba(118,190,219,.13),transparent 34%),linear-gradient(180deg,#FFFFFF 0%,#F3F4F6 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:56px 30px;overflow:hidden;position:relative}.recommend-pending::before{content:"";position:absolute;inset:auto -140px -190px auto;width:420px;height:420px;border-radius:50%;border:1px solid rgba(118,190,219,.12);box-shadow:0 0 0 54px rgba(118,190,219,.03),0 0 0 108px rgba(118,190,219,.02);pointer-events:none}.recommend-pending .micro-label{margin-top:6px}.recommend-pending h3{max-width:650px;font-size:28px;line-height:1.25;margin:8px auto 10px;color:var(--navy);transition:font-size .35s ease,margin .35s ease,opacity .35s ease}.recommend-pending p{max-width:560px;margin:0 auto;color:var(--muted);font-size:16px;line-height:1.65;transition:opacity .25s ease}.recommend-pending.is-processing{min-height:440px;background:radial-gradient(circle at 50% 32%,rgba(118,190,219,.18),transparent 36%),linear-gradient(180deg,#FFFFFF 0%,#F3F4F6 100%)}.recommend-pending.is-processing .micro-label,.recommend-pending.is-processing p{display:none}.recommend-pending.is-processing h3{max-width:820px;margin:0 auto 12px;font-size:clamp(36px,4.2vw,58px);line-height:1.05;letter-spacing:-.035em;background:linear-gradient(100deg,var(--navy) 0%,var(--navy) 18%,var(--cyan) 40%,#76BEDB 50%,var(--cyan) 60%,var(--navy) 82%,var(--navy) 100%);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:analysisWave 1.65s ease-in-out infinite}.recommend-pending.is-processing .spinner{margin-top:30px;animation:spinner-y0fdc1 2s infinite ease,loaderFloat 1.8s ease-in-out infinite}
/* Loader 3D: componente Uiverse/AqFox preservado, com apenas a paleta TrackID. */
.spinner{
  width:44px;
  height:44px;
  margin-top:28px;
  position:relative;
  animation:spinner-y0fdc1 2s infinite ease;
  transform-style:preserve-3d;
}
.spinner>div{
  background-color:rgba(118,190,219,.20);
  height:100%;
  position:absolute;
  width:100%;
  border:2px solid #76BEDB;
}
.spinner div:nth-of-type(1){transform:translateZ(-22px) rotateY(180deg)}
.spinner div:nth-of-type(2){transform:rotateY(-270deg) translateX(50%);transform-origin:top right}
.spinner div:nth-of-type(3){transform:rotateY(270deg) translateX(-50%);transform-origin:center left}
.spinner div:nth-of-type(4){transform:rotateX(90deg) translateY(-50%);transform-origin:top center}
.spinner div:nth-of-type(5){transform:rotateX(-90deg) translateY(50%);transform-origin:bottom center}
.spinner div:nth-of-type(6){transform:translateZ(22px)}
@keyframes spinner-y0fdc1{
  0%{transform:rotate(45deg) rotateX(-25deg) rotateY(25deg)}
  50%{transform:rotate(45deg) rotateX(-385deg) rotateY(25deg)}
  100%{transform:rotate(45deg) rotateX(-385deg) rotateY(385deg)}
}
.recommend-result{animation:recommendReveal .55s ease both}.recommend-card{border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}.recommend-top{padding:30px 34px;background:#F3F4F6;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line)}.recommend-top h3{font-size:27px;margin-bottom:8px}.recommend-top p{margin:0;font-size:15px}.recommend-mark{width:62px;height:62px;border-radius:18px;background:var(--navy);display:grid;place-items:center;flex:0 0 auto}.recommend-mark svg{width:32px;height:32px;fill:none;stroke:var(--cyan);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.recommend-body{display:grid;grid-template-columns:1.35fr .65fr;gap:0}.include-list,.pricing{padding:34px}.pricing{border-left:1px solid var(--line);background:#F3F4F6}.include-list ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}.include-list li{display:flex;align-items:center;gap:10px;font-size:15px}.include-list li svg{width:18px;height:18px;fill:none;stroke:var(--teal);stroke-width:2;flex:0 0 auto}.price-row{display:grid;gap:5px;margin:16px 0 24px}.price-row span{font-size:14px;color:var(--muted)}.price-row strong{font:700 25px/1.2 Poppins,Arial,sans-serif;color:var(--navy)}.conversion-block{margin-top:26px;padding:28px;border-radius:20px;background:#F3F4F6;border:1px solid var(--line)}.conversion-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.conversion-block p{font-size:14px;margin:18px 0 0;color:var(--muted)}

.proof{background:linear-gradient(135deg,var(--navy),#242C50);color:rgba(255,255,255,.82)}.proof .section-heading{margin-bottom:44px}.proof-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch}.authority-card{padding:34px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);display:flex;gap:24px;align-items:flex-start;min-height:330px}.authority-mark{width:62px;height:62px;border-radius:18px;background:rgba(118,190,219,.15);display:grid;place-items:center;flex:0 0 auto}.authority-mark svg{width:31px;height:31px;fill:none;stroke:var(--cyan);stroke-width:1.5}.authority-card .micro-label{color:var(--cyan)}.authority-card h3{color:#fff;font-size:25px;margin-bottom:10px}.authority-card p{margin:0;line-height:1.65;color:rgba(255,255,255,.78)}.proof-pending-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.proof-pending-card{min-height:128px;padding:24px 26px;border-radius:18px;border:1px dashed rgba(118,190,219,.38);background:rgba(255,255,255,.045)}.proof-pending-card .micro-label{color:var(--cyan)}.proof-pending-card p{margin:0;color:rgba(255,255,255,.78);line-height:1.6;font-size:14px}

.faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px;align-items:start}.faq .section-heading{position:sticky;top:110px;margin-bottom:0}.accordion{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:none;padding:24px 2px;text-align:left;cursor:pointer;color:var(--navy);font:600 17px/1.35 Poppins,Arial,sans-serif}.faq-question b{font-size:24px;font-weight:500;color:var(--teal)}.faq-answer{padding:0 45px 22px 2px}.faq-answer p{margin:0;line-height:1.7;font-size:15px}.faq-item.is-open .faq-question{padding-bottom:14px}

.closing{position:relative;background:var(--navy);color:#fff;overflow:hidden}.closing::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(118,190,219,.21),transparent 36%)}.closing-inner{position:relative;text-align:center;max-width:780px}.closing .kicker{color:var(--cyan)}.closing .kicker::before{display:none}.closing h2{font-size:clamp(38px,4vw,58px);line-height:1.06;letter-spacing:-.04em;color:#fff;margin:14px 0 14px}.closing p{font-size:18px;line-height:1.6;color:rgba(255,255,255,.80);margin:0 auto;max-width:620px}

@keyframes analysisWave{0%{background-position:115% 50%}50%{background-position:0% 50%}100%{background-position:-115% 50%}}
@keyframes loaderFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes recommendReveal{from{opacity:0;transform:translateY(22px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}

@media (max-width:1100px){
  .section{padding:100px 0}
  .site-nav{gap:18px;font-size:13px}
  .hero{min-height:auto;padding-bottom:90px}.hero-grid{grid-template-columns:1fr 1fr;gap:40px}.hero-visual{min-height:460px}.video-placeholder-hero{max-width:460px}
  .problem-grid{grid-template-columns:repeat(2,1fr)}
  .solution-grid{grid-template-columns:repeat(3,1fr)}
  .solution-card:nth-child(4),.solution-card:nth-child(5){min-height:240px}
  .flow{grid-template-columns:1fr 52px 1fr 52px 1fr}
  .proof-grid{gap:40px}.faq-layout{gap:55px}
}

@media (max-width:820px){.proof-pending-grid{grid-template-columns:1fr}
  html{scroll-padding-top:86px}.section{padding:84px 0}.container{width:min(calc(100% - 36px),var(--container))}
  .site-header{position:absolute;padding-top:16px}.header-inner{height:58px;padding:0 14px}.brand img{width:128px}.nav-toggle{display:block;position:relative;z-index:3}
  .site-nav{position:absolute;top:68px;left:18px;right:18px;display:grid;gap:0;padding:12px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 55px rgba(0,31,68,.18);transform:translateY(-8px);opacity:0;pointer-events:none;transition:.2s}.site-nav.is-open{transform:none;opacity:1;pointer-events:auto}.site-nav a{padding:13px;border-radius:9px}.site-nav .nav-cta{margin-top:6px;text-align:center}.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero{padding-top:118px}.hero-grid{grid-template-columns:1fr;gap:42px}.hero-copy{max-width:680px}.hero-visual{min-height:0}.video-placeholder-hero{max-width:560px}.hero-text{font-size:18px}
  .compare-grid{grid-template-columns:1fr}.compare-column.trackid{border-left:0;border-top:1px solid rgba(255,255,255,.1)}.video-placeholder-demo{width:100%;aspect-ratio:16 / 9;height:auto;min-height:0}
  .transformation{padding-block:100px}.flow{grid-template-columns:1fr;gap:16px}.flow-arrow{height:38px}.flow-arrow svg{transform:rotate(90deg)}.flow-step{min-height:0}
  .scenario-grid{grid-template-columns:1fr}.scenario-content p{min-height:0}
  .solution-grid{grid-template-columns:repeat(2,1fr)}.solution-card,.solution-card:nth-child(4),.solution-card:nth-child(5){min-height:240px}.solution-card:last-child{grid-column:1/-1}
  .recommend-body{grid-template-columns:1fr}.pricing{border-left:0;border-top:1px solid var(--line)}
  .proof-grid{grid-template-columns:1fr}.proof .section-heading{margin-bottom:36px}.authority-card{min-height:0}.faq-layout{grid-template-columns:1fr;gap:28px}.faq .section-heading{position:static}
}

@media (max-width:560px){
  .container{width:min(calc(100% - 40px),var(--container))}.section{padding:74px 0}
  h1{font-size:clamp(44px,13vw,62px)}.hero-text{font-size:17px;line-height:1.6}.hero .actions{display:grid}.hero .btn{width:100%}
  .hero-visual{margin-inline:-4px}.video-placeholder-hero{border-radius:24px}.video-play{width:70px;height:70px}.video-play svg{width:30px;height:30px}.video-placeholder-copy{left:18px;right:18px;bottom:18px}.video-placeholder-copy strong{font-size:14px}.video-placeholder-copy span{font-size:12px}
  .section-heading{margin-bottom:36px}.section-heading h2{font-size:clamp(34px,10vw,46px)}.section-lead{font-size:16px}
  .problem-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.info-card{padding:18px 15px;min-height:240px;border-radius:15px}.info-card .icon-box{width:40px;height:40px;margin-bottom:18px}.info-card h3{font-size:15px}.info-card p{font-size:13px;line-height:1.5}
  .compare-column{padding:22px}.compare-title{font-size:16px}.method-list li{padding:13px;font-size:13px}.video-placeholder-demo{width:100%;aspect-ratio:16 / 9;height:auto;min-height:0}.demo-caption{font-size:10px}.video-placeholder-demo .video-placeholder-copy{bottom:48px}.video-placeholder-proof{min-height:270px}
  .flow-step{padding:24px}.scenario-visual{height:220px}.scenario-content{padding:24px}.scenario-content h3{font-size:23px}.scenario-content p{font-size:15px}.scenario-content .btn{width:100%}
  .solution-grid{gap:10px}.solution-card{padding:18px 15px;min-height:230px}.solution-card:last-child{grid-column:auto}.solution-card h3{font-size:15px}.solution-card p{font-size:13px;line-height:1.5}
  .config-card{padding:22px;border-radius:20px}.config-question-wrap{padding:30px 0 26px}.config-question-wrap h3{font-size:24px}.config-options{grid-template-columns:1fr}.option-btn{min-height:56px}.config-controls .btn{flex:1;padding-inline:12px}
  .recommend-pending{min-height:360px;padding:42px 22px}.recommend-pending h3{font-size:23px}.recommend-pending p{font-size:15px}.recommend-top{padding:24px}.recommend-top h3{font-size:23px}.recommend-mark{display:none}.include-list,.pricing{padding:24px}.price-row strong{font-size:22px}.conversion-block{padding:22px}.conversion-actions{display:grid}.conversion-actions .btn{width:100%}
  .authority-card{padding:24px;display:grid}.video-placeholder-proof{min-height:280px}.faq-question{font-size:15px;padding:20px 0}.faq-answer{padding-right:10px}.closing .actions{display:grid}.closing .btn{width:100%}
}

@media (max-width:350px){
  .container{width:min(calc(100% - 28px),var(--container))}.problem-grid,.solution-grid{gap:8px}.info-card,.solution-card{padding:15px 12px}.info-card h3,.solution-card h3{font-size:14px}.info-card p,.solution-card p{font-size:12.5px}.video-play{width:62px;height:62px}.video-play svg{width:27px;height:27px}
}


@media (max-width:600px){.recommend-pending.is-processing{min-height:360px;padding-inline:20px}.recommend-pending.is-processing h3{font-size:clamp(32px,10vw,44px);max-width:330px}.recommend-pending.is-processing .spinner{margin-top:26px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.video-play,.recommend-result{animation:none}.btn,.site-nav{transition:none}
}
/* Final production guards */
@media (min-width:821px){.site-nav a{white-space:nowrap}}
@media (max-width:560px){.solution-card:last-child{grid-column:1/-1}}
.hero-copy h1{margin-top:0}
.section-heading>h2:first-child{margin-top:0}
@media (min-width:821px){.site-nav a{flex:0 0 auto;white-space:nowrap}.site-nav{gap:24px}}


/* ===== Hero redesign: editorial layout based on reference structure, preserving TrackID identity ===== */
.site-header{padding:24px 0 0}
.header-inner{height:72px;padding:0 20px;border-radius:22px;background:rgba(255,255,255,.84);border:1px solid rgba(0,31,68,.08);box-shadow:0 18px 48px rgba(0,31,68,.08);backdrop-filter:blur(18px)}
.brand img{width:164px}
.site-nav{gap:24px}
.site-nav .nav-cta{padding:13px 18px;border-radius:14px;box-shadow:0 10px 24px rgba(0,31,68,.14)}

.hero{padding-top:154px;padding-bottom:48px;min-height:88vh;background:
  radial-gradient(circle at 77% 24%,rgba(118,190,219,.18),transparent 19%),
  radial-gradient(circle at 96% 18%,rgba(36,44,80,.08),transparent 18%),
  linear-gradient(180deg,#FFFFFF 0%,#ffffff 70%,#F3F4F6 100%)}
.hero::after{content:"";position:absolute;right:-140px;top:135px;width:420px;height:420px;border-radius:40px;background:linear-gradient(180deg,rgba(118,190,219,.07),rgba(36,44,80,.03));filter:blur(0);transform:rotate(18deg);opacity:.6;pointer-events:none}
.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:48px;align-items:center}
.hero-copy{position:relative;z-index:2;max-width:650px;padding-block:28px}
.hero-copy::before{content:"";position:absolute;left:-14px;top:6px;width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,rgba(118,190,219,.16),rgba(118,190,219,0));z-index:-1;filter:blur(2px)}
.hero-copy h1{max-width:11ch;font-size:clamp(58px,5.7vw,86px);line-height:.96;letter-spacing:-.055em;text-wrap:balance}
.hero-text{font-size:19px;max-width:56ch;margin-top:26px}
.hero .actions{margin-top:30px;gap:14px}
.hero .btn{min-height:56px;padding-inline:24px;border-radius:14px}
.hero .btn-secondary{background:rgba(255,255,255,.72);border-color:rgba(0,31,68,.16);box-shadow:0 10px 26px rgba(0,31,68,.04)}

.hero-visual{min-height:620px;display:flex;align-items:center;justify-content:center}
.hero-visual-shell{position:relative;width:min(100%,580px);min-height:620px}
.hero-main-media{position:absolute;right:0;bottom:36px;width:min(100%,430px);z-index:2}
.video-placeholder-hero{max-width:none;width:100%;aspect-ratio:.94;border-radius:34px;box-shadow:0 34px 80px rgba(0,31,68,.24),0 18px 36px rgba(0,31,68,.08),inset 0 0 0 1px rgba(255,255,255,.045)}
.video-placeholder-hero::after{width:74%}
.hero-mini-card{position:absolute;width:240px;padding:14px;border-radius:26px;background:rgba(255,255,255,.86);border:1px solid rgba(0,31,68,.08);box-shadow:0 18px 52px rgba(0,31,68,.10);backdrop-filter:blur(12px)}
.hero-mini-card-top{top:8px;right:200px;z-index:3}
.hero-mini-card-bottom{left:0;bottom:0;z-index:3}
.hero-mini-copy{padding:2px 4px 12px}
.hero-mini-copy strong{display:block;font:700 16px/1.2 Poppins,Arial,sans-serif;color:var(--navy);text-wrap:balance}
.hero-mini-visual{height:168px;position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(145deg,#F3F4F6,#F3F4F6)}
.hero-mini-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,31,68,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,31,68,.05) 1px,transparent 1px);background-size:22px 22px}
.hero-mini-visual.office .office-monitor{width:94px;height:66px;left:18%;top:25%;border-width:6px;border-radius:7px;box-shadow:0 14px 28px rgba(0,31,68,.12)}
.hero-mini-visual.office .office-monitor::after{left:34px;bottom:-22px;width:16px;height:18px}
.hero-mini-visual.office .office-laptop{width:116px;height:66px;right:12%;bottom:16%;border-radius:8px 8px 4px 4px}
.hero-mini-visual .asset-tag{padding:6px 8px;font-size:8px;border-radius:7px;box-shadow:0 6px 18px rgba(0,31,68,.09)}
.hero-mini-visual .t1{left:10%;bottom:18%}.hero-mini-visual .t2{right:12%;top:14%}.hero-mini-visual .t3{left:14%;top:16%}.hero-mini-visual .t4{right:12%;bottom:18%}
.hero-mini-visual.warehouse{background:linear-gradient(145deg,#F3F4F6,#F3F4F6)}
.hero-mini-visual.warehouse .shelf{width:39%;height:100px;bottom:18px;border-left-width:5px;border-right-width:5px;gap:4px}
.hero-mini-visual.warehouse .shelf i{border-top-width:5px}
.hero-mini-visual.warehouse .s1{left:8%}.hero-mini-visual.warehouse .s2{right:8%}
.hero-seal{position:absolute;left:188px;top:205px;z-index:4;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--navy),#242C50);border:1px solid rgba(118,190,219,.35);box-shadow:0 18px 45px rgba(0,31,68,.18),0 0 0 10px rgba(118,190,219,.06)}
.hero-seal svg{width:32px;height:32px;fill:none;stroke:var(--cyan);stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.hero-seal,.hero-mini-card-top,.hero-mini-card-bottom{animation:heroFloat 7s ease-in-out infinite}
.hero-mini-card-top{animation-delay:-1.4s}.hero-mini-card-bottom{animation-delay:-3.2s}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

@media (max-width:1100px){
  .hero{min-height:auto;padding-bottom:70px}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:36px}
  .hero-copy h1{font-size:clamp(54px,5.2vw,74px)}
  .hero-visual-shell{min-height:560px;width:min(100%,520px)}
  .hero-main-media{width:min(100%,390px);bottom:22px}
  .hero-mini-card{width:220px}
  .hero-mini-card-top{right:150px}
  .hero-seal{left:146px;top:194px;width:66px;height:66px}
}

@media (max-width:820px){
  .site-header{padding-top:16px}.header-inner{height:60px;padding:0 14px;border-radius:16px}.brand img{width:132px}
  .hero{padding-top:116px;padding-bottom:54px;min-height:auto}
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-copy{max-width:680px;padding-block:0}
  .hero-copy h1{max-width:11.5ch;font-size:clamp(46px,8vw,64px)}
  .hero-text{font-size:18px;max-width:60ch}
  .hero-visual{min-height:0}
  .hero-visual-shell{display:grid;gap:14px;width:100%;min-height:0}
  .hero-main-media,.hero-mini-card,.hero-seal{position:relative;inset:auto;right:auto;left:auto;top:auto;bottom:auto;animation:none}
  .hero-main-media{width:100%;order:2}
  .hero-mini-card{width:100%;padding:12px}
  .hero-mini-card-top{order:1}
  .hero-mini-card-bottom{order:3}
  .hero-seal{order:0;width:58px;height:58px;justify-self:start;margin-left:8px;margin-bottom:-2px;box-shadow:0 12px 28px rgba(0,31,68,.14),0 0 0 8px rgba(118,190,219,.06)}
  .hero-mini-visual{height:140px}
  .video-placeholder-hero{aspect-ratio:1.05;border-radius:28px}
}

@media (max-width:560px){
  .hero{padding-top:108px;padding-bottom:42px}
  .hero-copy h1{max-width:10.8ch;font-size:clamp(42px,11.8vw,58px);line-height:.98}
  .hero-text{font-size:17px;line-height:1.62;margin-top:20px}
  .hero .actions{display:grid;grid-template-columns:1fr;gap:12px}.hero .btn{width:100%}
  .hero-visual-shell{gap:12px}
  .hero-mini-card{padding:10px;border-radius:22px}
  .hero-mini-copy{padding:2px 2px 10px}.hero-mini-copy strong{font-size:15px}
  .hero-mini-visual{height:124px;border-radius:16px}
  .hero-mini-visual.office .office-monitor{width:80px;height:56px;border-width:5px}
  .hero-mini-visual.office .office-monitor::after{left:29px;bottom:-18px;width:14px;height:15px}
  .hero-mini-visual.office .office-laptop{width:98px;height:58px}
  .hero-mini-visual.warehouse .shelf{height:84px}
  .hero-seal{width:54px;height:54px}.hero-seal svg{width:25px;height:25px}
}


/* ===== Hero strip refinement: remove floating cards and use scrolling highlight band ===== */
.hero{padding-bottom:0}
.hero-grid{padding-bottom:54px}
.hero-visual{min-height:560px}
.hero-visual-shell{display:flex;align-items:center;justify-content:flex-end;width:min(100%,560px);min-height:560px}
.hero-main-media{position:relative;right:auto;bottom:auto;width:min(100%,430px)}
.video-placeholder-hero{aspect-ratio:1.02}

.hero-marquee{position:relative;overflow:hidden;border-top:0;border-bottom:0;background:linear-gradient(90deg,var(--navy) 0%,#242C50 52%,var(--royal) 100%);box-shadow:0 -18px 42px rgba(0,31,68,.05)}
.hero-marquee::before,.hero-marquee::after{content:"";position:absolute;top:0;bottom:0;width:88px;z-index:2;pointer-events:none}
.hero-marquee::before{left:0;background:linear-gradient(90deg,#F3F4F6 0%,rgba(243,244,246,0) 100%)}
.hero-marquee::after{right:0;background:linear-gradient(270deg,#F3F4F6 0%,rgba(243,244,246,0) 100%)}
.hero-marquee-track{display:flex;align-items:center;gap:22px;width:max-content;min-width:100%;padding:26px 0;animation:heroTicker 38s linear infinite;will-change:transform}
.hero-marquee-track span,.hero-marquee-track b{flex:0 0 auto}
.hero-marquee-track span{font:600 18px/1.1 Poppins,Arial,sans-serif;letter-spacing:.01em;color:#fff;white-space:nowrap}
.hero-marquee-track b{font:700 20px/1 Poppins,Arial,sans-serif;color:var(--cyan)}
@keyframes heroTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:1100px){
  .hero-visual{min-height:500px}
  .hero-visual-shell{min-height:500px;width:min(100%,500px)}
  .hero-main-media{width:min(100%,390px)}
  .hero-marquee-track span{font-size:16px}
}

@media (max-width:820px){
  .hero{padding-bottom:0}
  .hero-grid{padding-bottom:34px}
  .hero-visual{min-height:0}
  .hero-visual-shell{justify-content:flex-start;min-height:0;width:100%}
  .hero-main-media{width:100%}
  .hero-marquee-track{padding:24px 0;gap:18px;animation-duration:30s}
  .hero-marquee-track span{font-size:15px}
  .hero-marquee::before,.hero-marquee::after{width:36px}
}

@media (max-width:560px){
  .hero-grid{padding-bottom:24px}
  .hero-marquee-track{padding:23px 0;gap:16px;animation-duration:26s}
  .hero-marquee-track span{font-size:13px}
  .hero-marquee-track b{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .hero-marquee-track{animation:none;transform:none}
}


/* ===== Header refinement based only on the reference layout ===== */
.site-header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  padding:0;
  background:rgba(255,255,255,.98);
  border-top:4px solid var(--cyan);
  border-bottom:1px solid rgba(0,31,68,.08);
  box-shadow:0 8px 26px rgba(0,31,68,.045);
  backdrop-filter:blur(12px);
}
.header-inner{
  height:84px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:34px;
}
.brand{justify-self:start}
.brand img{width:158px}
.site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:32px;
  font-size:13px;
  font-weight:500;
}
.site-nav a:not(.nav-cta){
  padding:30px 0 27px;
  color:var(--navy);
  opacity:.82;
}
.site-nav a:not(.nav-cta)::after{
  bottom:18px;
  height:1.5px;
  background:var(--navy);
}
.site-nav a:not(.nav-cta):hover,
.site-nav a:not(.nav-cta):focus-visible{opacity:1}
.site-nav .nav-cta{
  justify-self:end;
  padding:13px 22px;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  box-shadow:0 10px 24px rgba(0,31,68,.14);
}
.site-nav .nav-cta:hover{background:#242C50}

@media (max-width:1100px){
  .header-inner{gap:24px}
  .site-nav{gap:22px;font-size:12.5px}
  .site-nav .nav-cta{padding-inline:18px}
}

@media (max-width:820px){
  .site-header{padding:0;border-top-width:3px}
  .header-inner{
    height:68px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand img{width:132px}
  .nav-toggle{display:block}
  .site-nav{
    position:absolute;
    top:68px;
    left:18px;
    right:18px;
    display:grid;
    gap:0;
    padding:12px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 24px 55px rgba(0,31,68,.18);
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:.2s;
  }
  .site-nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .site-nav a:not(.nav-cta){padding:13px;border-radius:9px;opacity:1}
  .site-nav a:not(.nav-cta)::after{display:none}
  .site-nav .nav-cta{margin-top:6px;text-align:center;border-radius:12px}
}


/* ===== Header alignment refinement: logo and CTA at the content edges, centered nav area ===== */
.header-inner{grid-template-columns:minmax(160px,auto) minmax(0,1fr) auto;gap:22px}
.brand{align-self:center}
.brand img{width:176px}
.site-nav{justify-self:stretch;justify-content:center;gap:10px;min-height:58px;padding:0 18px;border-radius:999px;background:rgba(118,190,219,.08);border:1px solid rgba(0,31,68,.06)}
.site-nav a:not(.nav-cta){display:inline-flex;align-items:center;justify-content:center;padding:0 16px;height:58px;border-radius:999px;font-weight:600;opacity:.9;white-space:nowrap}
.site-nav a:not(.nav-cta)::after{bottom:12px;height:2px;background:var(--cyan)}
.header-cta{justify-self:end;display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 28px;border-radius:999px;background:var(--navy);color:#fff;font:700 14px/1 Poppins,Arial,sans-serif;box-shadow:0 10px 24px rgba(0,31,68,.14);white-space:nowrap;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.header-cta:hover{background:#242C50;transform:translateY(-1px);box-shadow:0 14px 28px rgba(0,31,68,.18)}
.mobile-nav-cta{display:none!important}

@media (max-width:1100px){
  .header-inner{gap:18px}
  .brand img{width:164px}
  .site-nav{padding-inline:14px;gap:4px}
  .site-nav a:not(.nav-cta){padding-inline:13px;font-size:12.5px}
  .header-cta{padding-inline:22px;font-size:13px}
}

@media (max-width:820px){
  .header-cta{display:none}
  .site-nav{background:#fff;border:1px solid var(--line);border-radius:16px;min-height:auto;padding:12px;gap:0}
  .site-nav a:not(.nav-cta){display:block;height:auto;padding:13px;border-radius:9px}
  .mobile-nav-cta{display:inline-flex!important}
}


/* ===== Header menu refinement: remove rounded container and slightly enlarge menu text ===== */
@media (min-width:821px){
  .site-nav{
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    min-height:58px;
    gap:18px;
    font-size:15px;
  }
  .site-nav a:not(.nav-cta){
    padding:0 12px;
    height:58px;
    font-size:15px;
  }
}

@media (max-width:1100px) and (min-width:821px){
  .site-nav{font-size:14px;gap:14px}
  .site-nav a:not(.nav-cta){padding:0 10px;font-size:14px}
}


/* ===== Global CTA button system based on supplied pulse/gradient reference ===== */
:root{
  --btn-grad-a:#001F44;
  --btn-grad-b:#242C50;
  --btn-grad-c:#76BEDB;
  --btn-pulse:rgba(118,190,219,.38);
}

.btn,
.header-cta,
.site-nav .nav-cta{
  border:none!important;
  color:#fff!important;
  background-image:linear-gradient(30deg,var(--btn-grad-a) 0%,var(--btn-grad-b) 46%,var(--btn-grad-c) 100%)!important;
  background-size:100% auto!important;
  border-radius:20px!important;
  font-family:Poppins,Arial,sans-serif!important;
  font-size:16px!important;
  font-weight:700!important;
  letter-spacing:-.01em;
  min-height:52px;
  padding:.68em 1.5em!important;
  box-shadow:0 10px 24px rgba(0,31,68,.14);
  transition:background-position .25s ease,background-size .25s ease,transform .18s ease,box-shadow .18s ease!important;
}

.btn:hover,
.btn:focus-visible,
.header-cta:hover,
.header-cta:focus-visible,
.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible{
  background-position:right center!important;
  background-size:200% auto!important;
  transform:translateY(-1px);
  animation:trackidButtonPulse 1.5s infinite;
}

.btn:active,
.header-cta:active,
.site-nav .nav-cta:active{
  transform:translateY(0) scale(.985);
}

.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  animation:none!important;
  transform:none!important;
  box-shadow:none!important;
}

/* Keep the selection buttons visually distinct while using the same rounded/pulse language. */
.option-btn{
  border:1px solid rgba(0,31,68,.12)!important;
  border-radius:20px!important;
  background-image:linear-gradient(30deg,#ffffff 0%,#f3f4f6 58%,rgba(118,190,219,.18) 100%)!important;
  background-size:100% auto!important;
  color:var(--navy)!important;
  font-family:Poppins,Arial,sans-serif!important;
  font-size:15px!important;
  font-weight:600;
  box-shadow:0 6px 16px rgba(0,31,68,.035);
  transition:background-position .25s ease,background-size .25s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.option-btn:hover,
.option-btn:focus-visible{
  border-color:var(--cyan)!important;
  background-position:right center!important;
  background-size:200% auto!important;
  transform:translateY(-1px);
  animation:trackidOptionPulse 1.5s infinite;
}
.option-btn.selected{
  border-color:transparent!important;
  color:#fff!important;
  background-image:linear-gradient(30deg,var(--btn-grad-a) 0%,var(--btn-grad-b) 46%,var(--btn-grad-c) 100%)!important;
  background-size:100% auto!important;
  box-shadow:0 10px 22px rgba(0,31,68,.14);
}

@keyframes trackidButtonPulse{
  0%{box-shadow:0 10px 24px rgba(0,31,68,.14),0 0 0 0 var(--btn-pulse)}
  70%{box-shadow:0 12px 28px rgba(0,31,68,.18),0 0 0 10px rgba(118,190,219,0)}
  100%{box-shadow:0 10px 24px rgba(0,31,68,.14),0 0 0 0 rgba(118,190,219,0)}
}
@keyframes trackidOptionPulse{
  0%{box-shadow:0 6px 16px rgba(0,31,68,.04),0 0 0 0 rgba(118,190,219,.28)}
  70%{box-shadow:0 8px 18px rgba(0,31,68,.06),0 0 0 8px rgba(118,190,219,0)}
  100%{box-shadow:0 6px 16px rgba(0,31,68,.04),0 0 0 0 rgba(118,190,219,0)}
}

/* Context-specific refinements so the new button system remains legible everywhere. */
.config-card .btn-ghost,
.btn-secondary,
.btn-soft,
.btn-outline-light{
  color:#fff!important;
  border:none!important;
}
.site-nav .nav-cta.mobile-nav-cta{color:#fff!important}

@media (max-width:560px){
  .btn,.header-cta,.site-nav .nav-cta{font-size:15px!important;border-radius:18px!important}
  .option-btn{font-size:14px!important;border-radius:18px!important}
}

@media (prefers-reduced-motion:reduce){
  .btn:hover,.btn:focus-visible,.header-cta:hover,.header-cta:focus-visible,.site-nav .nav-cta:hover,.site-nav .nav-cta:focus-visible,.option-btn:hover,.option-btn:focus-visible{animation:none!important}
}


/* ===== LumiMotion integration refinements ===== */
:root{
  --motion-distance:40px;
  --motion-blur:12px;
  --motion-duration:800ms;
}
/* Keep hover movement premium and avoid layout jumps. */
.info-card.motion-hover-lift,
.solution-card.motion-hover-lift,
.scenario-card.motion-hover-lift,
.flow-step.motion-hover-lift,
.compare-column.motion-hover-lift,
.authority-card.motion-hover-lift,
.proof-pending-card.motion-hover-lift,
.recommend-card.motion-hover-lift,
.conversion-block.motion-hover-lift{
  will-change:transform;
}
/* The motion kit controls entry on these elements; legacy reveal must not hide them. */
[data-motion="hero"],[data-motion="scroll"]{will-change:opacity,transform,filter}
/* Word masks should keep heading line-height and wrapping natural. */
h2.motion-reveal-words .motion-word-mask{overflow:clip}
/* Do not let scale effects clip outside rounded visual surfaces. */
.video-placeholder.motion-hover-scale-sm,.scenario-visual.motion-hover-scale-sm{transform-origin:center center}
@media (prefers-reduced-motion:reduce){
  .motion-hover-lift:hover,.motion-hover-scale:hover,.motion-hover-scale-sm:hover,.motion-hover-icon:hover{transform:none!important}
}


/* ===== Hero watermark + white CTA buttons on dark-blue backgrounds ===== */
.hero-watermark{
  position:absolute;
  z-index:0;
  right:-5%;
  top:90px;
  width:min(62vw,920px);
  height:auto;
  object-fit:contain;
  opacity:1;
  pointer-events:none;
  user-select:none;
  filter:saturate(.9);
}
.hero-grid,
.hero-marquee{
  position:relative;
  z-index:1;
}

/* Buttons that sit directly on the dark closing background use white surfaces. */
.closing .btn-primary,
.closing .btn-outline-light{
  background:#fff;
  background-image:none;
  color:var(--navy);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 12px 30px rgba(0,0,0,.16);
}
.closing .btn-primary:hover,
.closing .btn-outline-light:hover{
  background:#fff;
  background-image:none;
  color:var(--navy);
  border-color:#fff;
  box-shadow:0 0 0 10px rgba(255,255,255,.08),0 16px 34px rgba(0,0,0,.20);
}

/* Keep configurator buttons unchanged because they live inside the white configurator card. */

@media (max-width:1100px){
  .hero-watermark{
    right:-12%;
    top:120px;
    width:min(72vw,820px);
    opacity:1;
  }
}
@media (max-width:820px){
  .hero-watermark{
    top:auto;
    right:-28%;
    bottom:90px;
    width:118%;
    max-width:none;
    opacity:1;
  }
}
@media (max-width:560px){
  .hero-watermark{
    right:-38%;
    bottom:86px;
    width:138%;
    opacity:1;
  }
}


/* Global text rendering safety for motion effects */
h1, h2, h3, p, a, button, span, strong {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* ===== Conversion CTAs hierarchy =====
   Only "Comprar este kit" keeps the filled blue gradient style.
   Secondary conversion actions use a white surface with TrackID gradient border. */
.conversion-actions .btn:not(:first-child){
  color:var(--navy)!important;
  border:2px solid transparent!important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(30deg,var(--navy) 0%,var(--royal) 46%,var(--cyan) 100%) border-box!important;
  background-size:100% 100%!important;
  box-shadow:0 8px 20px rgba(0,31,68,.07)!important;
}
.conversion-actions .btn:not(:first-child):hover,
.conversion-actions .btn:not(:first-child):focus-visible{
  color:var(--navy)!important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(30deg,var(--cyan) 0%,var(--royal) 48%,var(--navy) 100%) border-box!important;
  box-shadow:0 0 0 9px rgba(118,190,219,.10),0 12px 26px rgba(0,31,68,.10)!important;
  animation:trackidSecondaryPulse 1.5s infinite;
}
@keyframes trackidSecondaryPulse{
  0%{box-shadow:0 8px 20px rgba(0,31,68,.07),0 0 0 0 rgba(118,190,219,.20)}
  70%{box-shadow:0 12px 26px rgba(0,31,68,.10),0 0 0 9px rgba(118,190,219,0)}
  100%{box-shadow:0 8px 20px rgba(0,31,68,.07),0 0 0 0 rgba(118,190,219,0)}
}
@media (prefers-reduced-motion:reduce){
  .conversion-actions .btn:not(:first-child):hover,
  .conversion-actions .btn:not(:first-child):focus-visible{animation:none!important}
}


/* ===== Final closing-section contrast fix ===== */
.closing .btn-primary,
.closing .btn-outline-light{
  background:#fff !important;
  background-image:none !important;
  color:var(--navy) !important;
  border:1px solid rgba(255,255,255,.92) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.16) !important;
}
.closing .btn-primary:hover,
.closing .btn-outline-light:hover,
.closing .btn-primary:focus-visible,
.closing .btn-outline-light:focus-visible{
  background:#fff !important;
  background-image:none !important;
  color:var(--navy) !important;
  border-color:#fff !important;
  box-shadow:0 0 0 10px rgba(255,255,255,.08),0 16px 34px rgba(0,0,0,.20) !important;
}


/* Added spacing between comparison blocks and demo video */
.demo-frame{margin-top:28px}
@media (max-width:820px){.demo-frame{margin-top:22px}}
@media (max-width:560px){.demo-frame{margin-top:18px}}


/* Demo video placeholder uses standard YouTube horizontal ratio */
.demo-frame{width:100%;max-width:100%;}


/* Scenario cards with provided images */
.scenario-visual-image{background:#F3F4F6;padding:0}
.scenario-visual-image::before{display:none}
.scenario-visual-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
@media (max-width:820px){.scenario-visual-image img{object-position:center center}}


/* ===== Section text alignment: centered intros across the page ===== */
.section-heading{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.section-heading h2,
.section-heading .section-lead{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.transformation .section-heading{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.faq .section-heading{
  text-align:center;
}
@media (max-width:820px){
  .section-heading,
  .section-heading h2,
  .section-heading .section-lead,
  .transformation .section-heading,
  .faq .section-heading{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
}


/* ===== Desktop hero banner applied by request ===== */
@media (min-width: 821px){
  .hero{
    background:
      linear-gradient(90deg, rgba(243,244,246,.985) 0%, rgba(243,244,246,.965) 24%, rgba(243,244,246,.92) 40%, rgba(243,244,246,.72) 54%, rgba(243,244,246,.34) 68%, rgba(243,244,246,.08) 82%, rgba(243,244,246,0) 100%),
      url('../images/hero-desktop-banner.webp') center right / cover no-repeat;
  }
  .hero::before{
    background-image:
      linear-gradient(rgba(118,190,219,.14) 1px, transparent 1px),
      linear-gradient(90deg, rgba(118,190,219,.14) 1px, transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(to right, rgba(0,0,0,.9) 0%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.34) 52%, transparent 74%);
  }
  .hero::after{
    display:none;
  }
  .hero-watermark{
    display:none;
  }
}


/* ===== Mobile hero banner applied by request ===== */
@media (max-width: 820px){
  .hero{
    background:
      linear-gradient(180deg, rgba(243,244,246,.985) 0%, rgba(243,244,246,.965) 26%, rgba(243,244,246,.90) 44%, rgba(243,244,246,.72) 60%, rgba(243,244,246,.32) 76%, rgba(243,244,246,.08) 88%, rgba(243,244,246,0) 100%),
      url('../images/hero-mobile.webp') center bottom / cover no-repeat;
  }
  .hero::before{
    background-image:
      linear-gradient(rgba(118,190,219,.14) 1px, transparent 1px),
      linear-gradient(90deg, rgba(118,190,219,.14) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.9) 0%, rgba(0,0,0,.74) 28%, rgba(0,0,0,.38) 56%, transparent 82%);
  }
  .hero-watermark{display:none !important;}
}
@media (max-width: 560px){
  .hero{
    background:
      linear-gradient(180deg, rgba(243,244,246,.985) 0%, rgba(243,244,246,.97) 22%, rgba(243,244,246,.92) 40%, rgba(243,244,246,.72) 58%, rgba(243,244,246,.34) 75%, rgba(243,244,246,.10) 88%, rgba(243,244,246,0) 100%),
      url('../images/hero-mobile.webp') center bottom / cover no-repeat;
  }
}

/* ===== Layout consistency: shared section rhythm and centered content blocks ===== */
:root{
  --section-space:clamp(76px,10vw,120px);
  --section-heading-gap:clamp(36px,4vw,54px);
}

/* One vertical rhythm keeps the hand-off from one section to the next intentional. */
.section:not(.hero),
.transformation{
  padding-block:var(--section-space);
}

.section-heading,
.proof .section-heading{
  margin-bottom:var(--section-heading-gap);
}

/* The configurator is a constrained component, so it must share the title's center axis. */
.config-card{
  margin-inline:auto;
}

/* FAQ becomes a single centered reading flow rather than a split, misaligned layout. */
.faq-layout{
  display:block;
}

.faq .section-heading{
  position:static;
  margin-bottom:var(--section-heading-gap);
}

.faq .accordion{
  width:min(100%,860px);
  margin-inline:auto;
}

@media (max-width:820px){
  .section:not(.hero),
  .transformation{
    padding-block:var(--section-space);
  }
}

/* ===== Method comparison: clear before-and-after visual language ===== */
.compare-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);
  align-items:center;
  gap:36px;
  max-width:1120px;
  margin-inline:auto;
  padding:0;
  border:0;
  border-radius:0;
  overflow:visible;
  background:transparent;
}

.compare-column,
.compare-column.trackid{
  padding:24px;
  border:1px solid rgba(118,190,219,.18);
  border-radius:18px;
  background:rgba(36,44,80,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 36px rgba(0,31,68,.14);
}

.compare-column.trackid{
  border-left:1px solid rgba(118,190,219,.24);
  background:rgba(0,31,68,.82);
}

.compare-title{
  margin-bottom:16px;
  font-size:20px;
  letter-spacing:-.02em;
}

.method-list{
  gap:8px;
}

.method-list li{
  min-height:38px;
  gap:12px;
  padding:7px 12px;
  border:0;
  border-radius:8px;
  background:rgba(255,255,255,.07);
  color:#FFFFFF;
  font-size:14px;
  font-weight:500;
}

.method-list li .compare-status{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  flex:0 0 28px;
  border-radius:8px;
  font:700 20px/1 Arial,sans-serif;
  letter-spacing:0;
}

.method-list li .compare-status-negative{
  border:1px solid rgba(239,91,103,.45);
  background:linear-gradient(135deg,#EF5B67,#C73E4C);
  color:#fff;
  box-shadow:0 5px 12px rgba(199,62,76,.28);
}

/* The back action is intentionally quiet; the progression action remains primary. */
.config-card #configBack{
  color:var(--navy)!important;
  border:1px solid rgba(0,31,68,.16)!important;
  background-image:linear-gradient(135deg,#fff 0%,#F3F4F6 100%)!important;
  box-shadow:0 6px 16px rgba(0,31,68,.07);
}

.config-card #configBack:hover:not(:disabled),
.config-card #configBack:focus-visible:not(:disabled){
  background-position:right center!important;
  background-size:140% auto!important;
  box-shadow:0 9px 18px rgba(0,31,68,.1);
  animation:none!important;
}

.method-list li .compare-status-positive{
  background:#76BEDB;
  color:#fff;
  box-shadow:0 5px 12px rgba(118,190,219,.28);
}

.compare-arrow{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  margin-inline:auto;
  border:1px solid rgba(118,190,219,.2);
  border-radius:50%;
  background:rgba(118,190,219,.32);
  box-shadow:0 10px 24px rgba(0,31,68,.18);
}

.compare-arrow svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:#fff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* The demo remains useful without competing with the comparison for attention. */
.demo-frame{
  width:min(100%,880px);
  margin:36px auto 0;
}

.video-placeholder-demo{
  aspect-ratio:16 / 9;
}

@media (max-width:820px){
  .compare-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .compare-column,
  .compare-column.trackid{
    padding:20px;
  }

  .compare-arrow{
    width:46px;
    height:46px;
  }

  .compare-arrow svg{
    transform:rotate(90deg);
  }

  .demo-frame{
    width:min(100%,680px);
    margin-top:28px;
  }
}

@media (max-width:560px){
  .compare-column,
  .compare-column.trackid{
    padding:16px;
    border-radius:16px;
  }

  .compare-title{
    margin-bottom:14px;
    font-size:18px;
  }

  .method-list li{
    min-height:36px;
    gap:10px;
    padding:6px 9px;
    font-size:13px;
  }

  .method-list li .compare-status{
    width:26px;
    height:26px;
    flex-basis:26px;
    font-size:18px;
  }

  .demo-frame{
    margin-top:24px;
  }
}

/* ===== Transformation flow: dimensional cards with a lit TrackID focal point ===== */
.transformation .flow{
  align-items:center;
  perspective:1400px;
}

.transformation .flow-step{
  isolation:isolate;
  overflow:hidden;
  min-height:238px;
  border:1px solid rgba(0,31,68,.1);
  border-radius:22px;
  background:linear-gradient(145deg,#ffffff 0%,#F3F4F6 100%);
  box-shadow:0 3px 0 rgba(0,31,68,.06),0 20px 30px rgba(0,31,68,.1),0 38px 60px rgba(0,31,68,.05),inset 0 1px 0 rgba(255,255,255,.95);
  transform:perspective(1400px) rotateY(2deg) rotateZ(-.35deg)!important;
  transform-style:preserve-3d;
}

.transformation .flow-step:last-child{
  transform:perspective(1400px) rotateY(-2deg) rotateZ(.35deg)!important;
}

.transformation .flow-step::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:radial-gradient(circle at 18% 6%,rgba(118,190,219,.22),transparent 28%),linear-gradient(145deg,rgba(255,255,255,.85),transparent 48%);
  pointer-events:none;
}

.transformation .flow-step.emphasis{
  z-index:2;
  border-color:rgba(118,190,219,.55);
  background:linear-gradient(145deg,#76BEDB 0%,#242C50 35%,#001F44 75%,#001F44 100%);
  box-shadow:0 5px 0 #001F44,0 24px 38px rgba(0,31,68,.26),0 45px 76px rgba(0,31,68,.18),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -22px 34px rgba(0,31,68,.22);
  transform:perspective(1400px) translateY(-14px) scale(1.035)!important;
}

.transformation .flow-step.emphasis::before{
  inset:-35% -26% auto;
  height:80%;
  z-index:0;
  background:radial-gradient(ellipse at 50% 48%,rgba(118,190,219,.55) 0%,rgba(118,190,219,.28) 24%,rgba(118,190,219,0) 67%);
}

.transformation .flow-step.emphasis::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:linear-gradient(115deg,transparent 24%,rgba(255,255,255,.12) 46%,transparent 61%);
  opacity:.72;
  pointer-events:none;
}

.transformation .flow-step > *{
  position:relative;
  z-index:1;
}

.transformation .step-number{
  width:max-content;
  margin-bottom:24px;
  padding:8px 10px;
  border:1px solid rgba(118,190,219,.18);
  border-radius:10px;
  background:rgba(118,190,219,.12);
  color:var(--teal);
}

.transformation .flow-step.emphasis .step-number{
  border-color:rgba(118,190,219,.28);
  background:rgba(118,190,219,.16);
  color:rgba(255,255,255,.88);
}

.transformation .flow-step h3{
  font-size:22px;
}

.transformation .flow-step.emphasis h3{
  text-shadow:0 2px 14px rgba(0,0,0,.18);
}

.transformation .flow-step.emphasis p{
  color:rgba(255,255,255,.86);
}

.transformation .flow-arrow{
  position:relative;
  z-index:3;
}

.transformation .flow-arrow svg{
  width:44px;
  height:44px;
  padding:10px;
  border:1px solid rgba(118,190,219,.3);
  border-radius:50%;
  background:#fff;
  box-shadow:0 10px 22px rgba(0,31,68,.1);
}

@media (max-width:820px){
  .transformation .flow-step,
  .transformation .flow-step:last-child,
  .transformation .flow-step.emphasis{
    min-height:0;
    transform:none!important;
  }

  .transformation .flow-step.emphasis{
    transform:none!important;
  }

  .transformation .flow-arrow svg{
    width:42px;
    height:42px;
  }
}

@media (max-width:560px){
  .transformation .flow-step{
    border-radius:18px;
  }

  .transformation .step-number{
    margin-bottom:18px;
  }
}

/* ===== Site-wide card depth: one visual language across every card family ===== */
.info-card,
.solution-card,
.scenario-card,
.config-card,
.recommend-card,
.conversion-block,
.recommend-pending{
  position:relative;
  isolation:isolate;
  border-color:rgba(0,31,68,.11);
  box-shadow:0 3px 0 rgba(0,31,68,.055),0 16px 28px rgba(0,31,68,.09),0 34px 56px rgba(0,31,68,.045),inset 0 1px 0 rgba(255,255,255,.92);
}

.info-card::after,
.solution-card::after,
.config-card::after,
.recommend-card::after,
.conversion-block::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 18% 0%,rgba(118,190,219,.16),transparent 28%),linear-gradient(130deg,rgba(255,255,255,.58),transparent 37%);
  pointer-events:none;
}

.info-card > *,
.solution-card > *,
.config-card > *,
.recommend-card > *,
.conversion-block > *{
  position:relative;
  z-index:1;
}

/* Scenario cards keep the media intact while receiving the same illuminated edge. */
.scenario-card::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 24%,transparent 72%,rgba(118,190,219,.12));
  pointer-events:none;
}

.recommend-pending{
  border-color:rgba(0,31,68,.12);
  box-shadow:0 4px 0 rgba(0,31,68,.04),0 18px 34px rgba(0,31,68,.09),0 38px 66px rgba(0,31,68,.05),inset 0 1px 0 rgba(255,255,255,.96);
}

/* Dark cards get depth and illumination without losing contrast or hierarchy. */
.compare-column,
.authority-card,
.proof-pending-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  box-shadow:0 4px 0 rgba(0,31,68,.28),0 18px 32px rgba(0,31,68,.2),0 36px 64px rgba(0,31,68,.14),inset 0 1px 0 rgba(255,255,255,.15);
}

.compare-column::after,
.authority-card::after,
.proof-pending-card::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:radial-gradient(circle at 18% 0%,rgba(118,190,219,.22),transparent 34%),linear-gradient(130deg,rgba(255,255,255,.12),transparent 38%);
  pointer-events:none;
}

.compare-column > *,
.authority-card > *,
.proof-pending-card > *{
  position:relative;
  z-index:1;
}

@media (max-width:820px){
  .info-card,
  .solution-card,
  .scenario-card,
  .config-card,
  .recommend-card,
  .conversion-block,
  .recommend-pending{
    box-shadow:0 3px 0 rgba(0,31,68,.05),0 13px 24px rgba(0,31,68,.08),0 26px 42px rgba(0,31,68,.04),inset 0 1px 0 rgba(255,255,255,.92);
  }

  .compare-column,
  .authority-card,
  .proof-pending-card{
    box-shadow:0 3px 0 rgba(0,31,68,.25),0 13px 25px rgba(0,31,68,.18),0 26px 46px rgba(0,31,68,.12),inset 0 1px 0 rgba(255,255,255,.13);
  }
}

/* Hero CTA hierarchy: one primary action and one quiet white alternative. */
.hero .btn-secondary{
  color:var(--navy)!important;
  border:1px solid rgba(0,31,68,.18)!important;
  background:#fff!important;
  background-image:none!important;
  box-shadow:0 10px 24px rgba(0,31,68,.1)!important;
}

.hero .btn-secondary:hover,
.hero .btn-secondary:focus-visible{
  color:var(--navy)!important;
  border-color:rgba(118,190,219,.42)!important;
  background:#fff!important;
  background-image:none!important;
  box-shadow:0 0 0 5px rgba(118,190,219,.14),0 14px 28px rgba(0,31,68,.14)!important;
  animation:none!important;
}

/* ===== Application proof: video, case and future client logos ===== */
.proof-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
}

.case-placeholder{
  min-height:330px;
  border-radius:22px;
  background:linear-gradient(145deg,#001F44 0%,#242C50 58%,#001F44 100%);
}

.case-placeholder::before{
  background-image:linear-gradient(rgba(118,190,219,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(118,190,219,.07) 1px,transparent 1px);
}

.case-symbol{
  position:relative;
  z-index:2;
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  border:1px solid rgba(118,190,219,.54);
  border-radius:50%;
  background:rgba(118,190,219,.18);
  box-shadow:0 0 0 13px rgba(118,190,219,.07),0 18px 40px rgba(0,0,0,.22);
}

.case-symbol svg{
  width:36px;
  height:36px;
  fill:none;
  stroke:#76BEDB;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.logo-showcase{
  position:relative;
  isolation:isolate;
  margin-top:28px;
  padding:26px;
  overflow:hidden;
  border:1px solid rgba(118,190,219,.24);
  border-radius:22px;
  background:rgba(255,255,255,.055);
  box-shadow:0 4px 0 rgba(0,31,68,.24),0 18px 36px rgba(0,31,68,.16),inset 0 1px 0 rgba(255,255,255,.12);
}

.logo-showcase::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:radial-gradient(circle at 10% 0%,rgba(118,190,219,.2),transparent 30%),linear-gradient(135deg,rgba(255,255,255,.08),transparent 34%);
  pointer-events:none;
}

.logo-showcase > *{
  position:relative;
  z-index:1;
}

.logo-showcase .micro-label{
  margin-bottom:0;
  color:var(--cyan);
}

.logo-carousel{
  position:relative;
  overflow:hidden;
  margin-top:20px;
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}

.logo-track{
  display:flex;
  gap:14px;
  width:max-content;
  animation:proofLogoCarousel 30s linear infinite;
  will-change:transform;
}

.logo-placeholder{
  width:142px;
  height:92px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:9px;
  flex:0 0 auto;
  border:1px solid rgba(118,190,219,.2);
  border-radius:14px;
  background:rgba(0,31,68,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.logo-placeholder svg{
  width:29px;
  height:29px;
  fill:none;
  stroke:var(--cyan);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.logo-placeholder span{
  color:rgba(255,255,255,.82);
  font:600 11px/1 Poppins,Arial,sans-serif;
  letter-spacing:.07em;
  text-transform:uppercase;
}

@keyframes proofLogoCarousel{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 7px))}
}

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

  .case-placeholder{
    min-height:300px;
  }
}

@media (max-width:560px){
  .logo-showcase{
    margin-top:22px;
    padding:20px;
    border-radius:18px;
  }

  .logo-placeholder{
    width:126px;
    height:82px;
  }

  .logo-track{
    gap:12px;
    animation-duration:24s;
  }

  .case-symbol{
    width:70px;
    height:70px;
  }
}

@media (prefers-reduced-motion:reduce){
  .logo-track{animation:none;transform:none}
}

/* ===== FAQ: accordion motion that feels soft instead of abrupt ===== */
.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  padding:0 45px 0 2px;
  overflow:hidden;
  transition:grid-template-rows .46s cubic-bezier(.22,1,.36,1),padding-bottom .46s cubic-bezier(.22,1,.36,1);
}

.faq-answer[hidden]{
  display:none;
}

.faq-answer p{
  min-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-9px);
  transition:opacity .3s ease .08s,transform .46s cubic-bezier(.22,1,.36,1);
}

.faq-answer.is-open{
  grid-template-rows:1fr;
  padding-bottom:22px;
}

.faq-answer.is-open p{
  opacity:1;
  transform:none;
}

.faq-question b{
  transition:transform .35s cubic-bezier(.22,1,.36,1),color .2s ease;
}

.faq-item.is-open .faq-question b{
  transform:rotate(180deg);
}

/* ===== Problem cards: cinematic, streaming-style presentation ===== */
.problem{
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 12% 18%,rgba(118,190,219,.20),transparent 26%),radial-gradient(circle at 88% 72%,rgba(118,190,219,.16),transparent 30%),linear-gradient(135deg,#001F44 0%,#242C50 52%,#001F44 100%);
}

.problem::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(118,190,219,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(118,190,219,.07) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.7),transparent 82%);
  pointer-events:none;
}

.problem .container{
  position:relative;
  z-index:1;
}

.problem .section-heading h2{
  color:#fff;
}

.problem-grid{
  gap:22px;
}

.problem .info-card{
  min-height:346px;
  padding:32px 28px;
  overflow:hidden;
  border-color:rgba(118,190,219,.18);
  background:linear-gradient(155deg,rgba(36,44,80,.96) 0%,rgba(0,31,68,.98) 66%,rgba(0,31,68,.99) 100%);
  box-shadow:0 5px 0 rgba(0,31,68,.32),0 20px 34px rgba(0,31,68,.24),0 42px 76px rgba(0,31,68,.15),inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1),border-color .3s ease;
}

.problem .info-card::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:radial-gradient(circle at 18% 0%,rgba(118,190,219,.28),transparent 33%),linear-gradient(130deg,rgba(255,255,255,.1),transparent 36%);
  pointer-events:none;
}

.problem .info-card::after{
  background:linear-gradient(120deg,transparent 44%,rgba(255,255,255,.09) 58%,transparent 71%);
  opacity:.7;
}

.problem .info-card h3,
.problem .info-card p{
  color:#fff;
}

.problem .info-card p{
  color:rgba(255,255,255,.80);
}

.problem .icon-box{
  width:56px;
  height:56px;
  margin-bottom:30px;
  border:1px solid rgba(118,190,219,.18);
  background:rgba(118,190,219,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 12px 22px rgba(0,31,68,.16);
}

.problem .icon-box svg{
  width:28px;
  height:28px;
  stroke:#76BEDB;
}

.problem .info-card:hover{
  z-index:2;
  border-color:rgba(118,190,219,.52);
  box-shadow:0 7px 0 rgba(0,31,68,.28),0 28px 44px rgba(0,31,68,.3),0 54px 92px rgba(0,31,68,.2),inset 0 1px 0 rgba(255,255,255,.22);
  transform:translateY(-12px) scale(1.025);
}

/* ===== Closing: animated texture and a more intentional final invitation ===== */
.closing{
  background:radial-gradient(circle at 15% 18%,rgba(118,190,219,.24),transparent 27%),radial-gradient(circle at 86% 78%,rgba(36,44,80,.7),transparent 34%),linear-gradient(135deg,#001F44 0%,#242C50 52%,#001F44 100%);
}

.closing::before{
  background:radial-gradient(circle at 48% 5%,rgba(118,190,219,.30),transparent 34%),radial-gradient(circle at 10% 90%,rgba(118,190,219,.14),transparent 28%);
  animation:closingGlowFloat 11s ease-in-out infinite alternate;
}

.closing::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:-28%;
  background-image:linear-gradient(rgba(118,190,219,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(118,190,219,.12) 1px,transparent 1px);
  background-size:48px 48px;
  opacity:.35;
  transform:rotate(-9deg);
  animation:closingGridDrift 18s linear infinite;
  pointer-events:none;
}

.closing-inner{
  isolation:isolate;
  padding:clamp(34px,5vw,54px);
  border:1px solid rgba(118,190,219,.19);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 54px rgba(0,31,68,.18);
  backdrop-filter:blur(4px);
}

.closing-inner > *{
  position:relative;
  z-index:1;
}

@keyframes closingGlowFloat{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(3%,2%,0) scale(1.08)}
}

@keyframes closingGridDrift{
  from{background-position:0 0,0 0}
  to{background-position:96px 96px,96px 96px}
}

@media (max-width:820px){
  .problem-grid{gap:16px}

  .problem .info-card{
    min-height:286px;
    padding:26px 22px;
  }

  .closing-inner{
    border-radius:24px;
  }
}

@media (max-width:560px){
  .problem .info-card{
    min-height:260px;
    padding:22px 18px;
  }

  .problem .icon-box{
    width:46px;
    height:46px;
    margin-bottom:22px;
  }

  .closing-inner{
    padding:30px 20px;
    border-radius:20px;
  }
}

/* One neutral placeholder mark keeps the client-logo carousel intentionally generic. */
.logo-placeholder svg{
  display:none;
}

.logo-placeholder::before{
  content:"";
  width:20px;
  height:20px;
  border:2px solid var(--cyan);
  border-radius:5px;
  background:linear-gradient(145deg,rgba(118,190,219,.34),rgba(118,190,219,.04));
  box-shadow:0 0 0 5px rgba(118,190,219,.06);
  transform:rotate(45deg);
}

/* The main navigation has one distinct vertical destination for each scenario. */
@media (min-width:821px){
  .scenario-grid{
    grid-template-columns:1fr;
    max-width:980px;
    margin-inline:auto;
    gap:30px;
  }

  .scenario-card{
    display:grid;
    grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);
    min-height:300px;
    scroll-margin-top:96px;
  }

  .scenario-card:nth-child(even) .scenario-visual{order:2}
  .scenario-card:nth-child(even) .scenario-content{order:1}
  .scenario-visual{height:100%}
  .scenario-content{display:flex;flex-direction:column;justify-content:center}
  .scenario-content .btn{align-self:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .closing::before,
  .closing::after{animation:none}
}

/* Keep the problem section light; only its cards carry the cinematic treatment. */
.problem{
  background:#F3F4F6;
}

.problem::before{
  display:none;
}

.problem .section-heading h2{
  color:var(--navy);
}

/* Card heights stay content-led; the premium finish must not create empty lower space. */
.problem .info-card{
  min-height:260px;
  padding:28px;
}

.problem .icon-box{
  width:48px;
  height:48px;
  margin-bottom:26px;
}

.problem .icon-box svg{
  width:25px;
  height:25px;
}

.solution-card,
.solution-card:nth-child(4),
.solution-card:nth-child(5){
  min-height:0;
}

@media (max-width:820px){
  .problem .info-card{
    min-height:0;
    padding:22px;
  }
}

@media (max-width:560px){
  .problem .info-card{
    min-height:0;
    padding:18px 15px;
  }

  .problem .icon-box{
    width:40px;
    height:40px;
    margin-bottom:18px;
  }
}

/* The problem is deliberately neutral; the premium blue treatment belongs to the deliverables. */
.problem .info-card{
  overflow:visible;
  background:#fff;
  border-color:rgba(0,31,68,.11);
  box-shadow:0 3px 0 rgba(0,31,68,.055),0 16px 28px rgba(0,31,68,.09),0 34px 56px rgba(0,31,68,.045),inset 0 1px 0 rgba(255,255,255,.92);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}

.problem .info-card::before{display:none}
.problem .info-card::after{
  background:radial-gradient(circle at 18% 0%,rgba(118,190,219,.16),transparent 28%),linear-gradient(130deg,rgba(255,255,255,.58),transparent 37%);
  opacity:1;
}
.problem .info-card h3{color:var(--navy)}
.problem .info-card p{color:var(--body)}
.problem .icon-box{
  border:0;
  background:rgba(118,190,219,.16);
  box-shadow:none;
}
.problem .icon-box svg{stroke:var(--teal)}
.problem .info-card:hover{
  border-color:rgba(118,190,219,.52);
  box-shadow:0 4px 0 rgba(0,31,68,.055),0 20px 34px rgba(0,31,68,.11),0 38px 62px rgba(0,31,68,.06),inset 0 1px 0 rgba(255,255,255,.92);
  transform:translateY(-6px);
}

/* Reuse the former premium blue card treatment for what the customer receives. */
.solution-card,
.solution-card:nth-child(4),
.solution-card:nth-child(5){
  min-height:260px;
  padding:28px;
  overflow:hidden;
  border-color:rgba(118,190,219,.18);
  background:linear-gradient(155deg,rgba(36,44,80,.96) 0%,rgba(0,31,68,.98) 66%,rgba(0,31,68,.99) 100%);
  box-shadow:0 5px 0 rgba(0,31,68,.32),0 20px 34px rgba(0,31,68,.24),0 42px 76px rgba(0,31,68,.15),inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1),border-color .3s ease!important;
}
.solution-card::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:radial-gradient(circle at 18% 0%,rgba(118,190,219,.28),transparent 33%),linear-gradient(130deg,rgba(255,255,255,.1),transparent 36%);
  pointer-events:none;
}
.solution-card::after{
  background:linear-gradient(120deg,transparent 44%,rgba(255,255,255,.09) 58%,transparent 71%);
  opacity:.7;
}
.solution-card h3{color:#fff}
.solution-card p{color:rgba(255,255,255,.80)}
.solution-card .icon-box{
  width:56px;
  height:56px;
  margin-bottom:30px;
  border:1px solid rgba(118,190,219,.18);
  background:rgba(118,190,219,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 12px 22px rgba(0,31,68,.16);
}
.solution-card .icon-box svg{
  width:28px;
  height:28px;
  stroke:#76BEDB;
}
.solution-card:hover{
  z-index:2;
  border-color:rgba(118,190,219,.52);
  box-shadow:0 7px 0 rgba(0,31,68,.28),0 28px 44px rgba(0,31,68,.3),0 54px 92px rgba(0,31,68,.2),inset 0 1px 0 rgba(255,255,255,.22);
  transform:translateY(-12px) scale(1.025)!important;
}

@media (max-width:820px){
  .solution-card,
  .solution-card:nth-child(4),
  .solution-card:nth-child(5){min-height:0;padding:22px}
}
@media (max-width:560px){
  .solution-card,
  .solution-card:nth-child(4),
  .solution-card:nth-child(5){min-height:0;padding:18px 15px}
  .solution-card .icon-box{width:40px;height:40px;margin-bottom:18px}
  .solution-card .icon-box svg{width:22px;height:22px}
}

/* Match the blue material, lighting and gloss of the TrackID focal card in the transformation flow. */
.solution-card,
.solution-card:nth-child(4),
.solution-card:nth-child(5){
  border-color:rgba(118,190,219,.55);
  background:linear-gradient(145deg,#76BEDB 0%,#242C50 35%,#001F44 75%,#001F44 100%);
  box-shadow:0 5px 0 #001F44,0 24px 38px rgba(0,31,68,.26),0 45px 76px rgba(0,31,68,.18),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -22px 34px rgba(0,31,68,.22);
}
.solution-card::before{
  inset:-35% -26% auto;
  height:80%;
  background:radial-gradient(ellipse at 50% 48%,rgba(118,190,219,.55) 0%,rgba(118,190,219,.28) 24%,rgba(118,190,219,0) 67%);
}
.solution-card::after{
  content:"";
  background:linear-gradient(115deg,transparent 24%,rgba(255,255,255,.12) 46%,transparent 61%);
  opacity:.72;
}
.solution-card h3{text-shadow:0 2px 14px rgba(0,0,0,.18)}
.solution-card p{color:rgba(255,255,255,.86)}
.solution-card .icon-box{
  border-color:rgba(118,190,219,.28);
  background:rgba(118,190,219,.16);
}

/* A slower, softer lift avoids the abrupt scale change on the premium delivery cards. */
.solution-card.motion-hover-lift{
  will-change:transform,box-shadow;
  transition:transform 1050ms cubic-bezier(.22,.61,.36,1),box-shadow 1050ms cubic-bezier(.22,.61,.36,1),border-color 800ms ease-in-out!important;
}
.solution-card.motion-hover-lift:hover{
  transform:translateY(-4px) scale(1.008)!important;
}

/* No hover treatment on the delivery cards: their visual impact stays static. */
.solution-card.motion-hover-lift,
.solution-card .motion-hover-icon{
  transition:none!important;
}
.solution-card.motion-hover-lift:hover,
.solution-card .motion-hover-icon:hover{
  transform:none!important;
}
.solution-card:hover{
  z-index:auto;
  border-color:rgba(118,190,219,.55);
  box-shadow:0 5px 0 #001F44,0 24px 38px rgba(0,31,68,.26),0 45px 76px rgba(0,31,68,.18),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -22px 34px rgba(0,31,68,.22);
}

.site-footer{
  background:#001F44;
  border-top:1px solid rgba(118,190,219,.2);
  color:rgba(255,255,255,.76);
}
.site-footer .container{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.site-footer p{
  margin:0;
  font:500 13px/1.5 Poppins,Arial,sans-serif;
}


/* ===== Hero bottom-edge fix =====
   The hero must end exactly at the lower edge of the animated marquee.
   Removing the viewport-based minimum height prevents extra banner background
   from appearing below the marquee on large/27-inch screens. */
.hero{
  min-height:0 !important;
  height:auto !important;
  align-content:start;
  grid-template-rows:auto auto;
  padding-bottom:0 !important;
}
.hero-marquee{
  margin-bottom:0 !important;
}

/* ===== Official client brand palette — final semantic application ===== */
:root{
  --navy:#001F44;
  --royal:#242C50;
  --cyan:#76BEDB;
  --teal:#76BEDB;
  --white:#FFFFFF;
  --ink:#001F44;
  --body:#4B4D53;
  --muted:#4B4D53;
  --soft:#F3F4F6;
  --line:rgba(0,31,68,.14);
}

body{background:var(--white);color:var(--body)}
h1,h2,h3{color:var(--navy)}
.compare-column .compare-title{color:var(--white)}
.eyebrow,.kicker,.step-number,.config-label,.micro-label{color:var(--cyan)}

.problem,.scenarios{background:var(--soft)}
.recommendation,.transformation{background:var(--white)}
.method,.configurator,.proof,.closing{
  background:linear-gradient(135deg,var(--navy) 0%,var(--royal) 100%);
}
.hero-marquee{
  background:linear-gradient(90deg,var(--navy) 0%,var(--royal) 100%);
}
.video-placeholder,
.flow-step.emphasis,
.solution-card,
.solution-card:nth-child(4),
.solution-card:nth-child(5){
  background:linear-gradient(145deg,var(--royal) 0%,var(--navy) 100%);
}
.site-footer{background:var(--navy);color:rgba(255,255,255,.76)}

/* Azul claro is the official action/accent color. */
.btn-primary,
.header-cta,
.site-nav .nav-cta{
  background:var(--cyan)!important;
  background-image:none!important;
  color:var(--navy)!important;
  border:1px solid var(--cyan)!important;
  box-shadow:0 10px 24px rgba(0,31,68,.14)!important;
}
.btn-primary:hover,
.btn-primary:focus-visible,
.header-cta:hover,
.header-cta:focus-visible,
.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible{
  background:var(--royal)!important;
  background-image:none!important;
  color:var(--white)!important;
  border-color:var(--royal)!important;
}

/* Secondary actions remain neutral and institutional. */
.btn-secondary,
.btn-soft,
.config-card #configBack{
  background:var(--white)!important;
  background-image:none!important;
  color:var(--navy)!important;
  border:1px solid rgba(0,31,68,.18)!important;
}
.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-soft:hover,
.btn-soft:focus-visible,
.config-card #configBack:hover:not(:disabled),
.config-card #configBack:focus-visible:not(:disabled){
  background:var(--soft)!important;
  color:var(--navy)!important;
  border-color:var(--cyan)!important;
}

/* Selected configurator options use the same official CTA treatment. */
.option-btn.selected{
  background:var(--cyan)!important;
  background-image:none!important;
  color:var(--navy)!important;
  border-color:var(--cyan)!important;
}

/* On dark surfaces, keep one clear primary action and one quiet secondary action. */
.closing .btn-primary{
  background:var(--cyan)!important;
  background-image:none!important;
  color:var(--navy)!important;
  border-color:var(--cyan)!important;
}
.closing .btn-outline-light{
  background:transparent!important;
  background-image:none!important;
  color:var(--white)!important;
  border:1px solid rgba(255,255,255,.72)!important;
}
.closing .btn-outline-light:hover,
.closing .btn-outline-light:focus-visible{
  background:var(--white)!important;
  color:var(--navy)!important;
  border-color:var(--white)!important;
}

.method-list li .compare-status-negative{
  background:var(--royal);
  color:var(--white);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 5px 12px rgba(0,31,68,.28);
}
.method-list li .compare-status-positive{
  background:var(--cyan);
  color:var(--navy);
  box-shadow:0 5px 12px rgba(118,190,219,.28);
}

.problem .icon-box,
.authority-mark{
  background:rgba(118,190,219,.16);
}
.problem .icon-box svg,
.solution-card .icon-box svg,
.authority-mark svg,
.recommend-mark svg,
.include-list li svg{
  stroke:var(--cyan);
}


/* ===== Hero demo video ===== */
.hero-video-card{
  display:block;
  background:var(--navy);
}
.hero-video-card::before,
.hero-video-card::after{
  display:none;
}
.hero-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:inherit;
  background:var(--navy);
}
.hero-video-card .video-badge{
  z-index:3;
  pointer-events:none;
}

/* Exceção aprovada: X do inventário tradicional em vermelho. */
.method-list li .compare-status-negative{
  background:linear-gradient(135deg,#EF5B67,#C73E4C)!important;
  color:#FFFFFF!important;
  border-color:rgba(239,91,103,.45)!important;
  box-shadow:0 5px 12px rgba(199,62,76,.28)!important;
}


/* ===== LP2 2026-10-14: high-quality portrait videos + proof cleanup ===== */
/* Hero keeps the designed wide/square card. The actual video stays portrait and
   the poster creates a lightweight blurred side-fill, so native fullscreen uses
   the sharp portrait source instead of a low-res baked horizontal composition. */
.hero-video-card{
  position:relative;
  isolation:isolate;
  background:#001F44;
}
.hero-video-card::before{
  content:"";
  display:block!important;
  position:absolute;
  z-index:0;
  inset:-8%;
  background:url("../images/clockid-demo-poster.webp") center/cover no-repeat;
  filter:blur(22px) brightness(.68) saturate(.86);
  transform:scale(1.10);
  opacity:.96;
  pointer-events:none;
}
.hero-video-card::after{
  content:"";
  display:block!important;
  position:absolute;
  z-index:0;
  inset:0;
  background:linear-gradient(90deg,rgba(0,31,68,.16),transparent 30%,transparent 70%,rgba(0,31,68,.16));
  pointer-events:none;
}
.hero-video-card .hero-video--hero{
  position:relative;
  z-index:1;
  object-fit:contain;
  background:transparent;
}

/* The two demonstrations below the hero are native portrait videos. */
.method .demo-frame{
  width:min(100%,420px)!important;
  max-width:420px!important;
  aspect-ratio:9 / 16!important;
  min-height:0!important;
  margin:40px auto 0!important;
  border-radius:24px;
  background:#001F44;
}
.video-placeholder-demo{
  aspect-ratio:9 / 16!important;
}
.hero-video--portrait{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain!important;
  background:#001F44;
  border-radius:inherit;
}

/* Application proof now contains only the real vertical video + client logos. */
.proof-grid{
  grid-template-columns:minmax(280px,420px)!important;
  justify-content:center;
  align-items:start;
  gap:0!important;
}
.video-placeholder-proof,
.portrait-video-frame{
  width:min(100%,420px);
  aspect-ratio:9 / 16;
  min-height:0!important;
  border-radius:24px;
  background:#001F44;
}
.case-placeholder{display:none!important;}
.logo-showcase{margin-top:34px;}

@media (max-width:820px){
  .method .demo-frame,
  .video-placeholder-proof,
  .portrait-video-frame{
    width:min(100%,390px)!important;
  }
}
@media (max-width:560px){
  .method .demo-frame,
  .video-placeholder-proof,
  .portrait-video-frame{
    width:min(100%,340px)!important;
    border-radius:20px;
  }
  .method .demo-frame{margin-top:28px!important;}
}


/* ===== LP2 2026-10-14: hero sem barras + comparação desktop em 3 colunas ===== */
/* Hero: o card acompanha o 9:16 nativo do vídeo. Não existe preenchimento lateral. */
.hero-visual-shell{
  justify-content:center;
}
.hero-main-media{
  width:min(100%,330px)!important;
}
.video-placeholder-hero,
.hero-video-card{
  width:100%!important;
  max-width:330px!important;
  aspect-ratio:9 / 16!important;
  border-radius:28px!important;
  background:#001F44!important;
}
.hero-video-card::before,
.hero-video-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
}
.hero-video-card .hero-video--hero{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  background:#001F44!important;
  border-radius:inherit!important;
}

/* Desktop: Inventário tradicional > vídeo > Inventário com TrackID. */
.method .compare-grid--with-video{
  grid-template-columns:minmax(250px,1fr) minmax(260px,320px) minmax(250px,1fr)!important;
  align-items:center!important;
  gap:28px!important;
  max-width:1180px!important;
}
.method .compare-grid--with-video .compare-column{
  width:100%;
  align-self:center;
}
.method .compare-grid--with-video .demo-frame{
  width:100%!important;
  max-width:320px!important;
  aspect-ratio:9 / 16!important;
  margin:0 auto!important;
  align-self:center;
}
.method .compare-grid--with-video .video-placeholder-demo{
  aspect-ratio:9 / 16!important;
}
.compare-grid--with-video .compare-arrow{
  display:none!important;
}

@media (max-width:980px){
  .method .compare-grid--with-video{
    grid-template-columns:minmax(220px,1fr) minmax(220px,280px) minmax(220px,1fr)!important;
    gap:18px!important;
  }
  .hero-main-media{
    width:min(100%,310px)!important;
  }
  .video-placeholder-hero,
  .hero-video-card{
    max-width:310px!important;
  }
}

@media (max-width:820px){
  .hero-visual-shell{
    justify-content:center!important;
  }
  .hero-main-media{
    width:min(78vw,360px)!important;
    margin-inline:auto!important;
  }
  .video-placeholder-hero,
  .hero-video-card{
    max-width:360px!important;
  }
  .method .compare-grid--with-video{
    grid-template-columns:1fr!important;
    gap:22px!important;
  }
  .method .compare-grid--with-video .traditional{order:1;}
  .method .compare-grid--with-video .demo-frame{
    order:2;
    width:min(100%,340px)!important;
    max-width:340px!important;
    margin:0 auto!important;
  }
  .method .compare-grid--with-video .trackid{order:3;}
}

@media (max-width:560px){
  .hero-main-media{
    width:min(84vw,330px)!important;
  }
  .video-placeholder-hero,
  .hero-video-card{
    max-width:330px!important;
    border-radius:22px!important;
  }
}


/* ===== Aplicação real: vídeo + até 3 logos fixas lado a lado ===== */
.proof .proof-grid{
  grid-template-columns:minmax(300px,420px) minmax(360px,520px)!important;
  justify-content:center;
  align-items:center;
  gap:56px!important;
  max-width:1040px;
  margin-inline:auto;
}
.proof .video-placeholder-proof,
.proof .portrait-video-frame{
  width:100%!important;
  max-width:420px!important;
  margin:0!important;
}
.proof .logo-showcase{
  width:100%;
  margin:0!important;
  padding:30px!important;
  overflow:visible;
}
.proof .logo-showcase .micro-label{
  display:block;
  margin-bottom:20px;
}
.proof .logo-list{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.proof .logo-list .logo-placeholder{
  width:100%;
  height:108px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  padding:18px 22px;
}
.proof .logo-list .logo-placeholder svg{
  width:34px;
  height:34px;
  flex:0 0 auto;
}
.proof .logo-list .logo-placeholder span{
  font-size:12px;
}
/* Remove comportamento antigo de carrossel dessa seção. */
.proof .logo-carousel,
.proof .logo-track{
  animation:none!important;
  transform:none!important;
  width:auto!important;
  overflow:visible!important;
  mask-image:none!important;
}
@media (max-width:900px){
  .proof .proof-grid{
    grid-template-columns:minmax(280px,390px) minmax(300px,1fr)!important;
    gap:32px!important;
  }
  .proof .logo-showcase{padding:24px!important;}
  .proof .logo-list .logo-placeholder{height:96px;}
}
@media (max-width:720px){
  .proof .proof-grid{
    grid-template-columns:1fr!important;
    justify-items:center;
    gap:28px!important;
  }
  .proof .logo-showcase{
    max-width:390px;
    width:100%;
  }
  .proof .logo-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }
  .proof .logo-list .logo-placeholder{
    height:88px;
    padding:12px 8px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:8px;
    text-align:center;
  }
  .proof .logo-list .logo-placeholder svg{width:27px;height:27px;}
  .proof .logo-list .logo-placeholder span{font-size:9px;}
}
@media (max-width:420px){
  .proof .logo-list{grid-template-columns:1fr;}
  .proof .logo-list .logo-placeholder{
    height:78px;
    display:flex;
    justify-content:flex-start;
    padding-inline:18px;
    text-align:left;
  }
  .proof .logo-list .logo-placeholder span{font-size:10px;}
}


/* ===== Fix 2026-10-14: recorte correto das bordas do bloco de logos ===== */
.proof .logo-showcase{
  overflow:hidden !important;
  border-radius:22px !important;
  background-clip:padding-box;
}
.proof .logo-showcase::before{
  border-radius:inherit;
}
@media (max-width:560px){
  .proof .logo-showcase{
    border-radius:18px !important;
  }
}


/* ===== Aplicação real: mesmo tamanho do vídeo da seção de comparação ===== */
.proof .video-placeholder-proof,
.proof .portrait-video-frame{
  width:100% !important;
  max-width:320px !important;
  aspect-ratio:9 / 16 !important;
  min-height:0 !important;
  height:auto !important;
  margin-inline:auto !important;
}
.proof .video-placeholder-proof video,
.proof .portrait-video-frame video{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  border-radius:inherit !important;
}

@media (max-width:980px){
  .proof .video-placeholder-proof,
  .proof .portrait-video-frame{
    max-width:280px !important;
  }
}

@media (max-width:820px){
  .proof .video-placeholder-proof,
  .proof .portrait-video-frame{
    width:min(100%,340px) !important;
    max-width:340px !important;
  }
}


/* ===== 2026-10-14: espaçamento da seção Aplicação real ===== */
.proof .proof-grid{
  grid-template-columns:auto minmax(0, 1fr) !important;
  gap:28px !important;
  justify-content:center !important;
  align-items:center !important;
  max-width:960px !important;
  margin-inline:auto !important;
}

.proof .video-placeholder-proof,
.proof .portrait-video-frame{
  margin-inline:0 !important;
}

.proof .logo-showcase{
  width:100% !important;
  max-width:520px !important;
  margin:0 !important;
}

@media (max-width:980px){
  .proof .proof-grid{
    gap:22px !important;
    max-width:820px !important;
  }
}

@media (max-width:820px){
  .proof .proof-grid{
    grid-template-columns:1fr !important;
    gap:22px !important;
    justify-items:center !important;
  }

  .proof .logo-showcase{
    max-width:520px !important;
  }
}


/* ===== 2026-10-14: fundo estático da seção final ===== */
.closing{
  position:relative;
  overflow:hidden;
}

.closing::before{
  animation:none !important;
  transform:none !important;
  opacity:.9;
}

.closing::after{
  inset:0 !important;
  transform:none !important;
  animation:none !important;
  background-position:0 0 !important;
  background-size:48px 48px !important;
  opacity:.20 !important;
}


/* ===== CORREÇÃO DEFINITIVA: vídeo da seção Aplicação real =====
   A coluna 'auto' colapsava porque o <video> interno é position:absolute.
   Reserva explicitamente a largura do card vertical. */
.proof .proof-grid{
  grid-template-columns:minmax(280px,320px) minmax(360px,520px) !important;
  gap:28px !important;
  justify-content:center !important;
  align-items:center !important;
  max-width:900px !important;
  margin-inline:auto !important;
}

.proof .video-placeholder-proof,
.proof .portrait-video-frame{
  width:320px !important;
  max-width:320px !important;
  aspect-ratio:9 / 16 !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  position:relative !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}

.proof .video-placeholder-proof video,
.proof .portrait-video-frame video{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:contain !important;
  opacity:1 !important;
  visibility:visible !important;
}

@media (max-width:980px){
  .proof .proof-grid{
    grid-template-columns:minmax(250px,280px) minmax(300px,480px) !important;
    gap:22px !important;
  }
  .proof .video-placeholder-proof,
  .proof .portrait-video-frame{
    width:280px !important;
    max-width:280px !important;
  }
}

@media (max-width:820px){
  .proof .proof-grid{
    grid-template-columns:1fr !important;
    gap:22px !important;
    justify-items:center !important;
  }
  .proof .video-placeholder-proof,
  .proof .portrait-video-frame{
    width:min(100%,320px) !important;
    max-width:320px !important;
  }
}


/* ===== 2026-10-14: logos sem textos ===== */
.proof .logo-showcase{
  padding:26px !important;
}

.proof .logo-list{
  grid-template-columns:1fr !important;
  gap:16px !important;
}

.proof .logo-list .logo-placeholder{
  min-height:104px !important;
  height:104px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  padding:18px 20px !important;
}

.proof .logo-list .logo-placeholder svg{
  width:54px !important;
  height:54px !important;
}

.proof .logo-list .logo-placeholder span,
.proof .logo-showcase .micro-label{
  display:none !important;
}

@media (max-width:720px){
  .proof .logo-list{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .proof .logo-list .logo-placeholder{
    min-height:88px !important;
    height:88px !important;
  }
  .proof .logo-list .logo-placeholder svg{
    width:44px !important;
    height:44px !important;
  }
}


/* ===== Aplicação real: 3 logos estáticas em lista ao lado do vídeo ===== */
@media (min-width:821px) {
  .proof .proof-grid {
    grid-template-columns:320px 260px !important;
    max-width:604px !important;
    gap:24px !important;
    justify-content:center !important;
    align-items:center !important;
  }
}
.proof .logo-showcase {
  width:100% !important;
  max-width:260px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.proof .logo-showcase::before {display:none !important;}
.proof .logo-list .logo-placeholder::before {content:none !important;display:none !important;}
.proof .logo-list {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:22px !important;
  justify-items:center !important;
  align-items:center !important;
}
.proof .logo-list .logo-placeholder,
.proof .logo-list .logo-placeholder:nth-child(1),
.proof .logo-list .logo-placeholder:nth-child(2),
.proof .logo-list .logo-placeholder:nth-child(3) {
  width:100% !important;
  height:120px !important;
  min-height:120px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  transform:none !important;
  animation:none !important;
  will-change:auto !important;
}
.proof .logo-list .logo-placeholder img {
  display:block;
  width:112px !important;
  height:112px !important;
  aspect-ratio:1;
  object-fit:contain;
  filter:none !important;
  transform:none !important;
  animation:none !important;
}
@media (max-width:980px) and (min-width:821px) {
  .proof .proof-grid {
    grid-template-columns:280px 220px !important;
    max-width:522px !important;
    gap:22px !important;
  }
  .proof .logo-showcase {max-width:220px !important;}
}
@media (max-width:820px) {
  .proof .proof-grid {
    grid-template-columns:1fr !important;
    justify-items:center !important;
    gap:22px !important;
  }
  .proof .logo-showcase {max-width:320px !important;}
  .proof .logo-list {gap:12px !important;}
  .proof .logo-list .logo-placeholder,
  .proof .logo-list .logo-placeholder:nth-child(n) {
    height:98px !important;
    min-height:98px !important;
  }
  .proof .logo-list .logo-placeholder img {
    width:92px !important;
    height:92px !important;
  }
}


/* ===== LP2: Aplicação real — vídeo + narrativa e logos em composição editorial ===== */
.proof .proof-grid--editorial{
  display:grid!important;
  grid-template-columns:320px minmax(0, 1fr)!important;
  align-items:center!important;
  justify-items:stretch!important;
  justify-content:center!important;
  gap:clamp(42px,5vw,72px)!important;
  width:100%!important;
  max-width:980px!important;
  margin:0 auto!important;
}
.proof .proof-grid--editorial .portrait-video-frame{
  width:320px!important;
  max-width:320px!important;
  aspect-ratio:9 / 16!important;
  height:auto!important;
  margin:0!important;
  overflow:hidden!important;
  position:relative!important;
  border-radius:24px!important;
}
.proof .proof-grid--editorial .portrait-video-frame video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
}
.proof .proof-editorial{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  min-width:0;
  width:100%;
}
.proof .proof-copy{
  max-width:550px;
}
.proof .proof-eyebrow{
  display:inline-block;
  font:700 12px/1.35 Poppins,Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#76BEDB;
  margin-bottom:15px;
}
.proof .proof-copy h2{
  color:#FFFFFF;
  font:700 clamp(36px,3.7vw,54px)/1.12 Poppins,Arial,sans-serif;
  letter-spacing:-.035em;
  margin:0 0 20px;
  text-wrap:balance;
}
.proof .proof-copy p{
  margin:0;
  color:rgba(255,255,255,.80);
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.75;
  max-width:49ch;
}
/* As três logos permanecem estáticas, sem cartões individuais ou carrossel. */
.proof .proof-grid--editorial .logo-showcase{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:26px 0 0!important;
  padding:22px 0 0!important;
  border:0!important;
  border-top:1px solid rgba(118,190,219,.22)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.proof .proof-grid--editorial .logo-list{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:18px!important;
}
.proof .proof-grid--editorial .logo-list .logo-placeholder,
.proof .proof-grid--editorial .logo-list .logo-placeholder:nth-child(n){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  flex:0 0 auto!important;
  height:80px!important;
  min-height:80px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  animation:none!important;
  transform:none!important;
}
.proof .proof-grid--editorial .logo-list .logo-placeholder img{
  width:80px!important;
  height:80px!important;
  object-fit:contain;
  animation:none!important;
  transform:none!important;
}
@media (max-width:980px) and (min-width:821px){
  .proof .proof-grid--editorial{
    grid-template-columns:280px minmax(0,1fr)!important;
    gap:34px!important;
    max-width:850px!important;
  }
  .proof .proof-grid--editorial .portrait-video-frame{
    width:280px!important;
    max-width:280px!important;
  }
  .proof .proof-copy h2{font-size:40px;}
  .proof .proof-grid--editorial .logo-list{gap:14px!important;}
  .proof .proof-grid--editorial .logo-list .logo-placeholder,
  .proof .proof-grid--editorial .logo-list .logo-placeholder:nth-child(n){height:70px!important;min-height:70px!important;}
  .proof .proof-grid--editorial .logo-list .logo-placeholder img{width:70px!important;height:70px!important;}
}
@media (max-width:820px){
  .proof .proof-grid--editorial{
    grid-template-columns:minmax(0,1fr)!important;
    max-width:560px!important;
    gap:34px!important;
    justify-items:center!important;
  }
  .proof .proof-grid--editorial .portrait-video-frame{
    width:min(100%,320px)!important;
    max-width:320px!important;
    margin:0 auto!important;
  }
  /* No mobile, texto primeiro, vídeo em seguida e logos abaixo. */
  .proof .proof-editorial{display:contents!important;}
  .proof .proof-copy{order:1;width:100%;}
  .proof .proof-grid--editorial .portrait-video-frame{order:2;}
  .proof .proof-grid--editorial .logo-showcase{order:3;margin:0!important;width:100%!important;}
  .proof .proof-copy h2{font-size:clamp(32px,7vw,46px);}
  .proof .proof-grid--editorial .logo-list{
    flex-direction:row!important;
    justify-content:center!important;
    align-items:center!important;
    gap:12px!important;
    flex-wrap:nowrap!important;
  }
  .proof .proof-grid--editorial .logo-list .logo-placeholder,
  .proof .proof-grid--editorial .logo-list .logo-placeholder:nth-child(n){
    width:auto!important;
    flex:0 1 33.333%!important;
    justify-content:center!important;
  }
}
@media (max-width:440px){
  .proof .proof-grid--editorial{gap:26px!important;}
  .proof .proof-grid--editorial .logo-list .logo-placeholder img{
    width:72px!important;
    height:72px!important;
  }
}

/* LP2 | Video da hero: proporcao original em tela cheia.
   Ajuste exclusivo para fullscreen; nao altera o enquadramento no card. */
video.hero-video--hero:fullscreen,
video.hero-video--hero:-webkit-full-screen,
.hero-video-card:fullscreen video.hero-video--hero,
.hero-video-card:-webkit-full-screen video.hero-video--hero {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #001F44 !important;
  transform: none !important;
}