/* trckIQ premium industrial redesign — 2026-10-22
   HTML/CSS product visual is ILLUSTRATIVE ONLY; not connected to a customer account.
   This file intentionally overrides existing layout without changing other pages. */
:root{--blue:#117cf7}
.site-header{background:rgba(255,255,255,.97);border-bottom:1px solid #e7edf4;box-shadow:0 3px 16px rgba(7,23,49,.055)}
.nav-wrap{min-height:74px}.site-header .brand{gap:0}.site-header .brand-wordmark{width:165px;max-height:58px}
.site-header .nav-links a{color:#26354b;font-size:13px;font-weight:700}
.site-header .nav-links a.active,.site-header .nav-links a:hover{color:#117cf7}
.site-header .nav-links a.active::after{bottom:-28px;height:3px;border-radius:3px;background:#117cf7}
.site-header .nav-cta{min-width:174px;border-radius:7px}
.site-header .menu-toggle span{background:#152d4a}
/* Cinematic homepage */
.tr-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#061425}
.tr-hero-backdrop{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(2,14,29,.97) 0%,rgba(3,16,33,.88) 30%,rgba(3,16,32,.41) 57%,rgba(3,16,32,.10) 100%),linear-gradient(0deg,rgba(1,13,26,.88),transparent 48%),url('../images/photography/trckiq-hero-field.webp') center 45%/cover no-repeat}
.tr-hero-inner{display:grid;grid-template-columns:44% 56%;align-items:center;min-height:585px;position:relative;padding-top:45px;padding-bottom:55px}
.tr-hero-copy{z-index:3;padding:0 0 18px}
.tr-kicker{color:#c2d9ef;font-size:11px;font-weight:700;letter-spacing:.27em;margin:0 0 23px}
.tr-hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(51px,4.9vw,80px);letter-spacing:-.067em;line-height:1.01;margin:0 0 22px;font-weight:700;white-space:nowrap;color:#fff}
.tr-hero h1 span{color:#147fff}
.tr-subtitle{max-width:455px;color:#f0f5fc;font-size:16.5px;line-height:1.57;margin:0 0 31px;text-wrap:pretty}
.tr-hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
.tr-hero-buttons .button{min-height:50px;min-width:182px;font-size:13px;padding:14px 18px}
.tr-hero-buttons .button svg{width:16px;height:16px}
.tr-button-outline{color:white;border-color:#a2cbe9;background:rgba(1,19,37,.49);box-shadow:inset 0 0 0 1px rgba(170,211,242,.2)}
.tr-button-outline:hover{background:rgba(16,85,148,.64)}
/* Device pair uses real markup instead of a static, artificially generated UI screenshot */
.tr-device-composition{position:relative;height:482px;min-width:0;align-self:end;pointer-events:none}
.tr-laptop{position:absolute;top:56px;left:0;width:94%;z-index:1;filter:drop-shadow(0 22px 29px rgba(0,9,18,.65))}
.tr-screen{border:9px solid #101820;border-bottom-width:11px;border-radius:17px 17px 7px 7px;background:#071a30;height:350px;overflow:hidden;box-shadow:inset 0 0 0 2px #273746,0 0 0 1px rgba(241,251,255,.45)}
.tr-laptop-bottom{height:13px;background:linear-gradient(#b0bcc5,#667886 43%,#c1cbd5 72%,#566774);width:108%;margin-left:-4%;border-radius:0 0 80% 80%;position:relative}
.tr-laptop-bottom:after{content:'';position:absolute;width:18%;height:4px;background:#738594;top:1px;left:41%;border-radius:0 0 6px 6px}
.tr-laptop-foot{height:4px;width:105%;margin-left:-2.5%;background:#172535;border-radius:0 0 100% 100%;opacity:.8}
.tr-ui-top{display:flex;align-items:center;gap:12px;height:46px;padding:0 13px;background:#061b33;color:#eef6ff;border-bottom:1px solid #1b3855}
.tr-ui-top>img{width:80px;height:auto;max-height:34px;object-fit:contain}
.tr-ui-search{display:flex;gap:7px;align-items:center;color:#789dbf;background:#112b46;border:1px solid #193a57;border-radius:4px;padding:5px 9px;flex:1;min-width:0;font-size:8px;white-space:nowrap;overflow:hidden}
.tr-ui-search svg{width:12px;height:12px}.tr-avatar{display:grid;place-items:center;width:26px;height:26px;background:#2d7be1;color:#fff;font-size:9px;border-radius:50%}
.tr-ui-body{display:grid;grid-template-columns:107px minmax(0,1fr);height:calc(100% - 46px)}
.tr-ui-side{background:#071c31;border-right:1px solid #21405a;padding:17px 7px;display:flex;flex-direction:column;gap:5px}
.tr-ui-side>div{display:flex;align-items:center;gap:7px;padding:7px 8px;font-size:9px;color:#adcae4;border-radius:4px;white-space:nowrap}.tr-ui-side>div svg{width:12px;height:12px}
.tr-ui-side>.tr-ui-menu-active{background:#147cf8;color:#fff}
.tr-ui-main{padding:16px 13px;min-width:0}.tr-ui-title{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:12px}.tr-ui-title strong{font:700 13px 'Space Grotesk',sans-serif;color:white}.tr-ui-title span{font-size:7px;letter-spacing:.12em;color:#7ba4c7}
.tr-ui-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:19px}
.tr-ui-stats>div{min-width:0;background:#112c4a;border:1px solid #254967;border-radius:5px;padding:8px 7px}
.tr-ui-stats small,.tr-ui-stats em{display:block;color:#9fbad1;font-size:7px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-ui-stats strong{display:block;font-size:20px;line-height:1.4;color:#fff;font-weight:800}
.tr-ui-table-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 7px;gap:7px}.tr-ui-table-head strong{font-size:10px}.tr-ui-table-head span{font-size:7px;color:#90adc8}
.tr-ui-table{width:100%;border-collapse:collapse;color:#cbdcf0;font-size:8px;text-align:left}.tr-ui-table thead{background:#173655;color:#8aaaca}.tr-ui-table th{font-size:7px;text-transform:uppercase;letter-spacing:.03em;padding:5px 7px}.tr-ui-table td{padding:6px 7px;border-bottom:1px solid #1b3a59}
.tr-ui-equipment-name,.ui-equipment-name{display:flex;gap:6px;align-items:center}.ui-equipment-name strong{font-size:8px;font-weight:700}.ui-equipment-name small{font-size:7px;display:block;color:#7099bc}.ui-item-icon{width:20px;height:20px;flex:none;border-radius:4px;background:#24466c;color:#9ac8fb;display:grid;place-items:center;font-size:12px}
.ui-status{font-size:7px;font-weight:700;padding:4px 5px;border-radius:3px;white-space:nowrap}.ui-status.ok{background:#0d5544;color:#86e9ba}.ui-status.blue{background:#134e8c;color:#a2ceff}.ui-status.warn{background:#745123;color:#ffe1a5}
.tr-phone{position:absolute;z-index:3;right:-7%;bottom:4px;width:172px;height:337px;border:6px solid #101821;border-radius:29px;background:#071a31;box-shadow:0 0 0 2px #8da2b3,0 19px 30px rgba(0,0,0,.55);overflow:hidden}
.tr-phone-notch{width:59px;height:12px;border-radius:0 0 11px 11px;background:#101821;position:absolute;top:0;left:calc(50% - 29px);z-index:4}
.tr-phone-content{padding:25px 9px 5px;color:white;height:100%;display:flex;flex-direction:column;gap:8px;background:linear-gradient(160deg,#071b32,#0d3157)}
.tr-phone-content>img{width:90px;height:33px;object-fit:contain;align-self:center}.tr-phone-search{background:#102c4b;border:1px solid #254562;color:#91aeca;font-size:8px;padding:7px;display:flex;align-items:center;gap:6px;border-radius:5px}.tr-phone-search svg{width:10px;height:10px}
.tr-phone-action{display:flex;align-items:center;gap:8px;border:1px solid #285174;background:linear-gradient(90deg,#143a64,#0c2b4b);padding:8px 6px;border-radius:7px;min-width:0}.tr-phone-action svg{width:25px;height:25px;padding:4px;flex:none;border-radius:4px;background:#096be0}.tr-phone-action strong,.tr-phone-action small{display:block}.tr-phone-action strong{font-size:8px}.tr-phone-action small{font-size:7px;color:#a9c5de;line-height:1.4}
.tr-phone-footer{margin-top:auto;border-top:1px solid #204767;display:flex;justify-content:space-between;gap:4px;padding:8px 4px 4px;font-size:7px;color:#81b8f4}
.tr-features-band{position:relative;background:rgba(4,20,38,.90);border-top:1px solid rgba(155,197,230,.19)}
.tr-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;padding-top:21px;padding-bottom:23px}
.tr-feature{display:flex;gap:12px;align-items:flex-start;padding:0 15px;border-right:1px solid rgba(182,219,250,.2)}.tr-feature:first-child{padding-left:0}.tr-feature:last-child{border:0}
.tr-feature-icon{width:40px;height:40px;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(145deg,#126bca,#083660);border-radius:10px}.tr-feature-icon svg{width:23px;height:23px}
.tr-feature h3{font:700 12px 'DM Sans',sans-serif;letter-spacing:.015em;color:#fff;margin:1px 0 5px}.tr-feature p{color:#aec7df;font-size:11px;line-height:1.5;margin:0}
/* Photography cards */
.tr-industries{background:#fff;padding:29px 0 47px;text-align:center}
.tr-section-kicker{color:#3d6082;font-size:10px;font-weight:700;letter-spacing:.29em;margin:0 0 7px}
.tr-industries h2{font-size:clamp(26px,3vw,39px);line-height:1.14;color:#0c1b31;margin:0 0 24px;letter-spacing:-.05em}
.tr-industry-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px;text-align:left}
.tr-industry-card{position:relative;isolation:isolate;min-width:0;height:157px;overflow:hidden;background:#16293b;border-radius:10px;color:white;box-shadow:0 7px 15px rgba(4,22,44,.08)}
.tr-industry-card:after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,rgba(2,14,32,.94),transparent 85%)}
.tr-industry-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s;filter:saturate(.95)}
.tr-industry-card:hover img{transform:scale(1.055)}.tr-industry-bottom{position:absolute;left:9px;bottom:10px;right:6px;display:flex;align-items:center;gap:7px;z-index:2}
.tr-industry-icon{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:6px;background:rgba(17,124,247,.93)}.tr-industry-icon svg{width:17px;height:17px}
.tr-industry-bottom strong,.tr-industry-bottom small{display:block}.tr-industry-bottom strong{font-size:10px;line-height:1.2}.tr-industry-bottom small{font-size:8px;color:#d6e8f7;line-height:1.3;margin-top:3px}
.tr-industry-footnote{font-size:11px;color:#8390a0;margin:13px 0 0}
/* Visually separate supporting narrative sections, but retain all previously working pages / tour */
.section-intro{padding:72px 0}.product-section{padding:86px 0}
@media(max-width:1320px){.tr-hero-inner{grid-template-columns:43% 57%;min-height:540px}.tr-hero h1{font-size:clamp(48px,5vw,65px)}.tr-device-composition{height:430px}.tr-laptop{top:42px}.tr-screen{height:327px}.tr-phone{width:155px;height:315px}.tr-subtitle{font-size:15px}.tr-industry-bottom small{display:none}}
@media(max-width:1050px){.tr-hero-inner{grid-template-columns:1fr 1fr;min-height:505px}.tr-hero h1{font-size:clamp(46px,5.7vw,61px)}.tr-device-composition{height:370px}.tr-laptop{top:25px;left:1%;width:105%}.tr-screen{height:286px}.tr-phone{width:129px;height:270px;right:-2%}.tr-phone-action{gap:5px;padding:6px 4px}.tr-phone-action svg{width:22px;height:22px}.tr-ui-body{grid-template-columns:87px minmax(0,1fr)}.tr-ui-side>div{font-size:7px}.tr-ui-side>div svg{width:10px}.tr-ui-main{padding:12px 9px}.tr-ui-stats{gap:4px}.tr-ui-stats>div{padding:5px}.tr-ui-table td{padding:4px}.tr-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tr-feature:nth-child(2){border:0}.tr-industry-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tr-industry-card{height:180px}.tr-industry-bottom small{display:block}}
@media(max-width:940px){.site-header .menu-toggle{color:#163a5b}.site-header .nav{background:#fff;border-top:1px solid #dbe4ed}.site-header .nav-links a{color:#1d3852;border-bottom:1px solid #edf1f5}.site-header .nav-links a.active{color:#117cf7}.site-header .nav-cta{width:100%}.site-header .nav-links{width:100%}}
@media(max-width:780px){.tr-hero-backdrop{background:linear-gradient(90deg,rgba(2,14,29,.97),rgba(3,17,33,.58)),linear-gradient(0deg,#051629,transparent 70%),url('../images/photography/trckiq-hero-field.webp') 60% 22%/cover no-repeat}.tr-hero-inner{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:65px;padding-bottom:34px}.tr-hero-copy{max-width:600px}.tr-hero h1{font-size:clamp(48px,8.6vw,74px)}.tr-device-composition{width:min(100%,630px);height:430px;margin:14px auto 0;align-self:center}.tr-laptop{width:92%;left:0;top:18px}.tr-screen{height:330px}.tr-phone{width:143px;height:290px;right:0;bottom:18px}.tr-subtitle{max-width:490px}.tr-feature-grid{gap:12px}.tr-industry-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.site-header .brand-wordmark{width:138px}.tr-hero-inner{padding-top:43px;padding-bottom:13px}.tr-kicker{font-size:9px;letter-spacing:.15em}.tr-hero h1{font-size:clamp(41px,10vw,56px)}.tr-subtitle{font-size:14px;max-width:400px}.tr-hero-buttons .button{flex:1;min-width:155px}.tr-device-composition{height:305px;width:100%;margin-top:22px}.tr-laptop{top:5px;width:102%;left:-2%}.tr-screen{height:255px;border-width:6px;border-bottom-width:8px;border-radius:10px 10px 4px 4px}.tr-ui-top{height:33px;padding:0 7px}.tr-ui-top>img{width:61px}.tr-ui-search{font-size:6px}.tr-avatar{width:19px;height:19px;font-size:7px}.tr-ui-body{grid-template-columns:62px minmax(0,1fr);height:calc(100% - 33px)}.tr-ui-side{padding:12px 4px}.tr-ui-side>div{font-size:6px;padding:4px 2px;gap:3px}.tr-ui-side>div svg{width:9px;height:9px}.tr-ui-main{padding:9px 6px}.tr-ui-title{margin-bottom:6px}.tr-ui-title strong{font-size:9px}.tr-ui-title span{font-size:5px}.tr-ui-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-bottom:6px}.tr-ui-stats>div{padding:4px}.tr-ui-stats strong{font-size:13px}.tr-ui-stats small,.tr-ui-stats em{font-size:6px}.tr-ui-table-head{margin-bottom:4px}.tr-ui-table-head strong{font-size:7px}.tr-ui-table-head span{font-size:6px}.tr-ui-table th,.tr-ui-table td{font-size:6px;padding:3px}.ui-item-icon{width:12px;height:12px;font-size:7px}.ui-equipment-name strong{font-size:6px}.ui-equipment-name small{font-size:5px}.ui-status{font-size:5px;padding:3px}.tr-phone{width:112px;height:229px;bottom:3px;right:-2%;border-width:4px;border-radius:19px}.tr-phone-content{padding:18px 5px 3px;gap:5px}.tr-phone-notch{width:40px;left:calc(50% - 20px);height:9px}.tr-phone-content>img{width:63px;height:21px}.tr-phone-search{font-size:6px;padding:4px}.tr-phone-action{gap:4px;padding:5px 3px}.tr-phone-action svg{width:20px;height:20px}.tr-phone-action strong{font-size:6px}.tr-phone-action small{font-size:5px}.tr-phone-footer{font-size:5px;padding:4px 2px}.tr-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 8px;padding-top:20px;padding-bottom:22px}.tr-feature{gap:7px;padding:0 4px;border:0}.tr-feature-icon{width:29px;height:29px;border-radius:7px}.tr-feature-icon svg{width:17px;height:17px}.tr-feature h3{font-size:10px}.tr-feature p{font-size:9px}.tr-industries{padding:30px 0}.tr-industries h2{font-size:27px}.tr-industry-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.tr-industry-card{height:147px}.tr-industry-bottom small{display:none}}
@media(max-width:385px){.tr-hero h1{font-size:39px}.tr-hero-buttons .button{min-width:0;padding:13px 11px;font-size:11px}.tr-device-composition{height:279px}.tr-screen{height:238px}.tr-phone{width:101px;height:216px}.tr-feature-grid{grid-template-columns:1fr 1fr}.tr-industry-card{height:132px}}

/* Subtle photo zoom and readability over the cropped concept photos. */
.tr-industry-card img{object-fit:cover;object-position:center 42%;transform:scale(1.03);filter:saturate(1.06)}
.tr-industry-card:hover img{transform:scale(1.09)}


/* === wolvIQ official brand, approved colorful hero, and homepage promo video === */
.site-header .brand-wordmark{width:188px;max-height:54px;height:auto;object-fit:contain}
.brand-footer .brand-wordmark{width:186px;max-height:60px;height:auto;object-fit:contain}
.tr-hero-backdrop{background:linear-gradient(90deg,rgba(2,14,29,.97),rgba(3,16,33,.88) 35%,rgba(3,16,32,.30) 74%),linear-gradient(0deg,rgba(1,13,26,.73),transparent 70%),url('../images/photography/trckiq-hero-field.webp') center 45%/cover no-repeat}
.tr-hero-inner{grid-template-columns:39% minmax(0,61%);column-gap:18px;min-height:580px;padding-top:55px;padding-bottom:46px}
.tr-hero-visual{position:relative;align-self:center;z-index:2;min-width:0;width:100%;border-radius:17px;overflow:hidden;border:1px solid rgba(180,217,246,.42);box-shadow:0 30px 70px rgba(0,10,27,.55),0 0 0 8px rgba(255,255,255,.035);background:#071a2f}
.tr-hero-visual img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover;filter:saturate(1.13) contrast(1.03)}
.tr-hero-visual-tag{position:absolute;right:13px;bottom:12px;padding:6px 10px;border-radius:5px;background:rgba(3,13,28,.84);font-size:10px;letter-spacing:.02em;color:#cfdef1;backdrop-filter:blur(8px)}
.wolviq-video-section{background:linear-gradient(120deg,#06172a 0%,#0b2543 62%,#0d3358 100%);color:white;padding:92px 0}
.wolviq-video-layout{display:grid;grid-template-columns:minmax(280px,.84fr) minmax(0,1.16fr);gap:clamp(34px,5vw,80px);align-items:center}
.wolviq-video-copy h2{color:white;font-size:clamp(36px,4vw,62px);line-height:1.07;letter-spacing:-.06em;margin:16px 0 20px}
.wolviq-video-copy h2 span{color:#238cff}
.wolviq-video-copy p{font-size:16px;line-height:1.7;color:#bcd0e5;max-width:450px;margin:0 0 22px}
.wolviq-video-copy .wolviq-video-label{font-size:12px;font-weight:600;color:#dbeafb;display:flex;gap:10px;align-items:center;margin:0 0 26px}
.wolviq-video-dot{width:8px;height:8px;border-radius:50%;background:#238cff;box-shadow:0 0 0 5px rgba(35,140,255,.14)}
.wolviq-video-frame{position:relative;aspect-ratio:16/9;background:#091d34;border:1px solid rgba(175,213,255,.33);box-shadow:0 30px 65px rgba(0,6,18,.45);overflow:hidden;border-radius:15px}
.wolviq-video-placeholder,.wolviq-video-placeholder img,.wolviq-video-frame video{width:100%;height:100%;display:block}
.wolviq-video-placeholder img{object-fit:cover;filter:saturate(1.15)}
.wolviq-video-scrim{position:absolute;inset:0;background:linear-gradient(130deg,rgba(2,12,29,.46),rgba(2,10,25,.75))}
.wolviq-video-coming{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:11px;padding:20px}
.wolviq-video-play{display:grid;place-items:center;background:#147efc;color:white;width:73px;height:73px;border-radius:50%;box-shadow:0 12px 28px rgba(2,16,39,.55);margin-bottom:5px}
.wolviq-video-coming strong{font:700 clamp(22px,2.6vw,33px) 'Space Grotesk',sans-serif;letter-spacing:-.03em;color:#fff}
.wolviq-video-coming small{font-size:13px;letter-spacing:.05em;color:#daebff}
.wolviq-video-frame video{object-fit:contain;background:#000}
@media(max-width:1100px){.tr-hero-inner{grid-template-columns:41% minmax(0,59%);gap:12px;min-height:515px}.tr-hero h1{font-size:clamp(47px,5.1vw,67px)}.tr-hero-visual-tag{font-size:9px}}
@media(max-width:780px){.tr-hero-inner{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:52px;padding-bottom:35px}.tr-hero-copy{max-width:640px}.tr-hero-visual{margin:30px auto 0;max-width:660px;align-self:center}.wolviq-video-layout{grid-template-columns:1fr;gap:34px}.wolviq-video-section{padding:65px 0}.wolviq-video-copy{max-width:620px}}
@media(max-width:560px){.site-header .brand-wordmark{width:153px;max-height:48px}.tr-hero-inner{padding-top:42px;padding-bottom:28px}.tr-hero-visual{margin-top:25px;border-radius:10px}.tr-hero-visual-tag{font-size:8px;right:6px;bottom:6px;padding:5px 7px}.wolviq-video-section{padding:51px 0}.wolviq-video-coming small{font-size:11px}.wolviq-video-play{width:58px;height:58px}.wolviq-video-copy h2{font-size:38px}}

/* Final hero text-to-image balance to avoid desktop heading collision. */
@media(min-width:1101px){.tr-hero-inner{grid-template-columns:42% minmax(0,58%)}.tr-hero h1{font-size:clamp(46px,4.35vw,68px)}}
@media(min-width:781px) and (max-width:1100px){.tr-hero-inner{grid-template-columns:43% minmax(0,57%)}.tr-hero h1{font-size:clamp(41px,4.6vw,55px)}}