/* FleetTrained design system */
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0B1220;--panel:#111B31;--panel2:#0E1830;--line:#1E2A45;--acc:#FF7A1A;--acc2:#FF9142;
--mut:#AAB7D4;--dim:#6E7FA5;--good:#2EA05A;--r:16px}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,Arial,sans-serif;background:var(--bg);color:#fff;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
/* nav */
nav{position:sticky;top:0;background:rgba(11,18,32,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:90}
.nav{display:flex;align-items:center;justify-content:space-between;padding:15px 0}
.logo{font-size:22px;font-weight:900;letter-spacing:-.02em}.logo b{color:var(--acc)}
.nav .links{display:flex;gap:24px;font-size:15px;font-weight:600;color:var(--mut)}
.nav .links a{position:relative;padding:4px 0}
.nav .links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--acc);transition:width .25s}
.nav .links a:hover{color:#fff}.nav .links a:hover::after,.nav .links a.on::after{width:100%}
.nav .links a.on{color:#fff}
/* buttons */
.btn{display:inline-block;background:var(--acc);color:#0B1220;font-weight:900;padding:15px 36px;border-radius:12px;
font-size:17px;transition:transform .18s,box-shadow .18s,background .18s;box-shadow:0 6px 24px #ff7a1a33}
.btn:hover{background:var(--acc2);transform:translateY(-2px);box-shadow:0 10px 34px #ff7a1a55}
.btn.ghost{background:transparent;color:#fff;border:2px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--acc);background:#ff7a1a11}
.btn.small{padding:10px 22px;font-size:15px}
.btn.xl{font-size:19px;padding:18px 46px}
/* hero */
.hero{position:relative;padding:96px 0 70px;text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-40% -20% auto;height:120%;
background:radial-gradient(800px 460px at 30% 10%,#1a2c55 0%,transparent 60%),
radial-gradient(700px 420px at 70% 0%,#3a2410 0%,transparent 55%);
animation:heroFloat 14s ease-in-out infinite alternate;z-index:-1}
@keyframes heroFloat{from{transform:translateX(-3%) scale(1)}to{transform:translateX(3%) scale(1.06)}}
.hero h1{font-size:clamp(32px,5.4vw,60px);font-weight:900;line-height:1.1;max-width:940px;margin:0 auto;letter-spacing:-.02em}
.hero h1 b{color:var(--acc)}
.hero .sub{margin:24px auto 0;max-width:680px;font-size:20px;color:var(--mut)}
.cta-row{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.trust{margin-top:28px;color:var(--dim);font-size:15px}.trust b{color:var(--mut)}
/* sections */
section{padding:76px 0}
section.alt{background:var(--panel2)}
h2{font-size:clamp(26px,3.4vw,38px);font-weight:900;text-align:center;letter-spacing:-.01em}
h2 b{color:var(--acc)}
.sub2{color:var(--mut);text-align:center;max-width:660px;margin:14px auto 46px;font-size:17px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:30px;
transition:transform .22s,border-color .22s,box-shadow .22s}
.card:hover{transform:translateY(-4px);border-color:#2c3c66;box-shadow:0 14px 40px #0007}
.card h3{font-size:20px;font-weight:800;margin-bottom:10px}
.card p{color:var(--mut);font-size:15px}
.num{font-size:42px;font-weight:900;color:var(--acc)}
/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;text-align:center}
.stat .v{font-size:46px;font-weight:900;color:var(--acc)}
.stat .l{color:var(--dim);font-size:14.5px;margin-top:4px}
/* video cards */
.vid{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
transition:transform .22s,box-shadow .22s}
.vid:hover{transform:translateY(-4px);box-shadow:0 16px 44px #0008}
.vid video{width:100%;display:block;aspect-ratio:16/9;background:#000}
.vid .cap{padding:16px 20px}.vid .cap b{display:block;font-size:16px}
.vid .cap span{color:var(--dim);font-size:13.5px}
/* pricing */
.price{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px;text-align:center;
position:relative;transition:transform .22s,box-shadow .22s}
.price:hover{transform:translateY(-5px)}
.price.hot{border-color:var(--acc);box-shadow:0 0 54px #ff7a1a26}
.price .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--acc);color:#0B1220;
font-size:13px;font-weight:900;padding:4px 16px;border-radius:99px;white-space:nowrap}
.price .amt{font-size:50px;font-weight:900;margin:12px 0 2px}
.price .per{color:var(--dim);font-size:14px}
.price ul{list-style:none;margin:18px 0;color:var(--mut);font-size:15px}
.price li{padding:6px 0}.price li b{color:#fff}
/* topic cards */
.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px;counter-reset:t}
.topic{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 24px;
transition:transform .2s,border-color .2s}
.topic:hover{transform:translateX(4px);border-color:var(--acc)}
.topic::before{counter-increment:t;content:"FILE " counter(t);color:var(--acc);font-weight:900;
font-size:12.5px;letter-spacing:.14em;display:block;margin-bottom:5px}
.topic b{font-size:16.5px}.topic p{color:var(--dim);font-size:13.5px;margin-top:5px}
/* demo widget */
.demo{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:36px;display:grid;
grid-template-columns:1fr 1.3fr;gap:34px;align-items:center}
@media(max-width:860px){.demo{grid-template-columns:1fr}}
.demo label{display:block;color:var(--dim);font-size:13px;font-weight:700;letter-spacing:.08em;margin:18px 0 6px}
.demo input[type=text]{width:100%;background:#0B1220;border:1px solid var(--line);border-radius:10px;
padding:13px 16px;color:#fff;font-size:16px;font-weight:700;font-family:inherit}
.demo input[type=text]:focus{outline:none;border-color:var(--acc)}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:38px;height:38px;border-radius:10px;cursor:pointer;border:3px solid transparent;transition:transform .15s}
.sw:hover{transform:scale(1.12)}.sw.on{border-color:#fff}
.screen{background:#0B1220;border:1px solid var(--line);border-radius:14px;aspect-ratio:16/9;position:relative;
overflow:hidden;box-shadow:0 20px 60px #000a}
.screen .kick{position:absolute;top:14%;width:100%;text-align:center;font-size:clamp(8px,1.4vw,15px);
font-weight:900;letter-spacing:.32em;color:#B9C2FF}
.screen .cname{position:absolute;top:26%;width:100%;text-align:center;font-size:clamp(20px,4vw,44px);font-weight:900}
.screen .title{position:absolute;top:48%;width:100%;text-align:center;font-size:clamp(13px,2.4vw,26px);
font-weight:900;color:#fff}
.screen .chipD{position:absolute;top:66%;left:50%;transform:translateX(-50%);padding:.5em 1.2em;border-radius:99px;
font-size:clamp(8px,1.3vw,14px);font-weight:800;border:2px solid;white-space:nowrap}
.screen .bar{position:absolute;bottom:12%;left:10%;width:80%;height:6%;background:#0B0E33;border-radius:99px;overflow:hidden}
.screen .bar i{display:block;height:100%;width:40%;border-radius:99px;animation:demoBar 3s ease-in-out infinite alternate}
@keyframes demoBar{from{width:18%}to{width:82%}}
/* tables */
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--dim);font-weight:700;font-size:13.5px;letter-spacing:.06em}
td b{color:var(--acc)}
/* faq */
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-bottom:12px}
.faq summary{font-weight:800;cursor:pointer;font-size:16.5px}
.faq p{color:var(--mut);margin-top:12px;font-size:15px}
/* reveal animations */
.rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
/* marquee */
.marq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;background:var(--panel2)}
.marq .inner{display:flex;gap:44px;white-space:nowrap;animation:marq 30s linear infinite;font-weight:800;color:var(--dim);font-size:15px}
.marq b{color:var(--acc)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* final + footer */
.final{background:linear-gradient(165deg,#1a2c55 0%,var(--panel2) 70%);border-top:1px solid var(--line);text-align:center;padding:86px 0}
footer{border-top:1px solid var(--line);padding:36px 0;color:var(--dim);font-size:14px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot .links{display:flex;gap:22px;flex-wrap:wrap}
.foot a:hover{color:#fff}
.pagehead{padding:70px 0 10px;text-align:center}
.pagehead h1{font-size:clamp(30px,4.4vw,46px);font-weight:900}
.pagehead h1 b{color:var(--acc)}
.pagehead p{color:var(--mut);max-width:640px;margin:16px auto 0;font-size:17px}


/* mobile nav */
.nav{position:relative}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:1.5px solid var(--line);
  border-radius:9px;padding:10px 11px;cursor:pointer}
.burger i{width:18px;height:2px;background:#fff;display:block;border-radius:2px}
.links .mlogin{display:none}
@media(max-width:760px){
  .burger{display:flex}
  .nav .links{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;
    background:#0d1526;border-bottom:1px solid var(--line);flex-direction:column;
    padding:8px 24px 14px;gap:0;z-index:99;box-shadow:0 24px 50px #000a}
  .nav .links.open{display:flex}
  .nav .links a{padding:13px 0;font-size:16px;border-bottom:1px solid #16203a;width:100%}
  .nav .links a::after{display:none}
  .nav .links .mlogin{display:block}
  nav .btn.small.ghost{display:none}
  .totalbar{flex-wrap:wrap}
  .hero{padding-top:60px}
  section{padding:54px 0}
  .demo{padding:24px}
  .userchip{display:none}
}