/* Freight Pilot ERP — public landing page (self-contained, no frameworks) */
:root{
  --bg:#070d1f; --bg2:#0b1530; --card:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.12); --txt:#eaf0ff; --mut:#9fb0d6;
  --cyan:#38e1ff; --blue:#4f7cff; --amber:#ffc247; --green:#3ddc84; --pink:#ff6ea9;
  --radius:18px; --wrap:1180px;
  --shadow:0 30px 80px -20px rgba(0,0,0,.65);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(1100px 500px at 85% -5%, rgba(79,124,255,.28), transparent 60%),
    radial-gradient(900px 480px at 8% 12%, rgba(56,225,255,.16), transparent 60%),
    radial-gradient(700px 600px at 50% 110%, rgba(255,110,169,.12), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2) 60%,#060b1a);
  min-height:100vh; overflow-x:hidden;
}
#fp-particles{position:fixed; inset:0; z-index:0; opacity:.55; pointer-events:none}
.fp-wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px; position:relative; z-index:1}
a{color:inherit}

/* ---------- nav ---------- */
.fp-nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(7,13,31,.72); border-bottom:1px solid var(--line); transition:box-shadow .3s}
.fp-nav.scrolled{box-shadow:0 10px 40px -12px rgba(0,0,0,.7)}
.fp-nav-inner{display:flex; align-items:center; gap:28px; height:68px}
.fp-brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-size:19px; letter-spacing:.2px}
.fp-brand-mark{display:inline-flex; width:38px; height:38px; border-radius:12px; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--cyan),var(--blue)); color:#04122e; font-size:18px; box-shadow:0 8px 24px -6px rgba(56,225,255,.6)}
.fp-brand-text em{font-style:normal; color:var(--cyan)}
.fp-links{display:flex; gap:22px; margin-left:auto}
.fp-links a{text-decoration:none; color:var(--mut); font-size:14.5px}
.fp-links a:hover{color:#fff}

/* ---------- buttons ---------- */
.fp-btn{display:inline-flex; align-items:center; text-decoration:none; font-weight:600; border-radius:12px; border:1px solid transparent; transition:transform .18s, box-shadow .18s, background .18s}
.fp-btn:hover{transform:translateY(-2px)}
.fp-btn-sm{padding:9px 18px; font-size:14px}
.fp-btn-lg{padding:14px 28px; font-size:16px}
.fp-btn-primary{background:linear-gradient(135deg,var(--cyan),var(--blue)); color:#04122e; box-shadow:0 14px 34px -10px rgba(56,225,255,.55)}
.fp-btn-ghost{border-color:var(--line); color:var(--txt); background:rgba(255,255,255,.04)}
.fp-btn-light{background:#fff; color:#0a1633; box-shadow:0 18px 44px -12px rgba(255,255,255,.35)}

/* ---------- hero ---------- */
.fp-hero{padding:72px 0 30px}
.fp-hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:center}
.fp-pill{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--cyan); border:1px solid rgba(56,225,255,.35);
  background:rgba(56,225,255,.08); padding:7px 14px; border-radius:999px}
.fp-hero-copy h1{font-size:clamp(38px,5vw,62px); line-height:1.06; margin:20px 0 16px; letter-spacing:-1px}
.fp-grad{background:linear-gradient(92deg,var(--cyan),var(--blue) 55%,var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent}
.fp-lead{color:var(--mut); font-size:18px; line-height:1.65; margin:0 0 28px; max-width:34rem}
.fp-cta-row{display:flex; gap:14px; flex-wrap:wrap}
.fp-ticks{list-style:none; padding:0; margin:26px 0 0; display:flex; gap:20px; flex-wrap:wrap; color:var(--mut); font-size:14px}
.fp-ticks i{color:var(--green); margin-right:6px}

/* 3D scene */
.fp-hero-scene{perspective:1400px; min-height:440px; display:flex; align-items:center; justify-content:center}
.fp-tilt{position:relative; width:min(460px,100%); transform-style:preserve-3d;
  transform:rotateX(var(--rx,12deg)) rotateY(var(--ry,-16deg)); transition:transform .25s ease-out}
.fp-mock{background:linear-gradient(160deg,#101c3d,#0a132c); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); overflow:hidden}
.fp-mock-top{display:flex; gap:7px; padding:12px 16px; border-bottom:1px solid var(--line)}
.fp-mock-top span{width:11px; height:11px; border-radius:50%; background:#2a3c6e}
.fp-mock-top span:first-child{background:#ff5f57}.fp-mock-top span:nth-child(2){background:#febc2e}.fp-mock-top span:nth-child(3){background:#28c840}
.fp-mock-body{display:flex; min-height:300px}
.fp-mock-side{width:64px; border-right:1px solid var(--line); padding:16px 0; display:flex; flex-direction:column; gap:12px; align-items:center}
.fp-mock-side i{width:30px; height:10px; border-radius:6px; background:#22335f}
.fp-mock-side i:first-child{background:linear-gradient(90deg,var(--cyan),var(--blue))}
.fp-mock-main{flex:1; padding:18px; display:flex; flex-direction:column; gap:14px}
.fp-mock-stats{display:flex; gap:10px}
.fp-mock-stats b{flex:1; height:52px; border-radius:12px; background:linear-gradient(150deg,rgba(56,225,255,.25),rgba(79,124,255,.12)); border:1px solid var(--line)}
.fp-mock-chart{flex:1; min-height:130px; display:flex; align-items:flex-end; gap:9px; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02)}
.fp-mock-chart i{flex:1; height:var(--h); border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,var(--cyan),rgba(79,124,255,.35)); animation:fp-bar 3.2s ease-in-out infinite alternate; transform-origin:bottom}
.fp-mock-chart i:nth-child(2n){animation-delay:.5s; background:linear-gradient(180deg,var(--amber),rgba(255,194,71,.3))}
@keyframes fp-bar{from{transform:scaleY(.82)}to{transform:scaleY(1)}}
.fp-mock-rows{display:flex; flex-direction:column; gap:8px}
.fp-mock-rows i{height:12px; border-radius:6px; background:#1b2a52}
.fp-mock-rows i:nth-child(2){width:82%}.fp-mock-rows i:nth-child(3){width:64%}
.fp-float{position:absolute; display:flex; gap:10px; align-items:center; background:rgba(13,24,52,.85); border:1px solid var(--line);
  border-radius:14px; padding:11px 15px; font-size:13px; box-shadow:0 18px 44px -12px rgba(0,0,0,.7); backdrop-filter:blur(8px);
  transform:translateZ(70px); animation:fp-float 5s ease-in-out infinite}
.fp-float i{width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:15px}
.fp-float strong{display:block; font-size:13.5px}.fp-float small{color:var(--mut)}
.fp-float-a{top:6%; left:-46px}.fp-float-a i{background:rgba(61,220,132,.18); color:var(--green)}
.fp-float-b{bottom:14%; right:-38px; animation-delay:1.4s}.fp-float-b i{background:rgba(255,194,71,.16); color:var(--amber)}
.fp-float-c{bottom:-24px; left:8%; animation-delay:2.6s}.fp-float-c i{background:rgba(56,225,255,.16); color:var(--cyan)}
@keyframes fp-float{0%,100%{margin-top:0}50%{margin-top:-14px}}

/* stat strip */
.fp-hero-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:56px}
.fp-stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px}
.fp-stat strong{display:flex; align-items:center; justify-content:center; min-height:2.6em; margin:0; font-size:20px; line-height:1.3; background:linear-gradient(92deg,var(--cyan),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent}
.fp-stat span:last-child{color:var(--mut); font-size:13.5px; line-height:1.55}

/* ---------- sections ---------- */
.fp-section{padding:88px 0}
.fp-alt{background:rgba(255,255,255,.018); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.fp-kicker{color:var(--cyan); text-transform:uppercase; letter-spacing:2.5px; font-size:12.5px; margin:0 0 10px}
.fp-section h2{font-size:clamp(28px,3.4vw,42px); margin:0 0 12px; letter-spacing:-.5px}
.fp-sub{color:var(--mut); max-width:44rem; font-size:16.5px; line-height:1.65}
.fp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px}
.fp-grid-4{grid-template-columns:repeat(4,1fr)}
.fp-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; transition:transform .22s, border-color .22s, box-shadow .22s}
.fp-card:hover{transform:translateY(-6px) rotateX(2deg); border-color:rgba(56,225,255,.4); box-shadow:0 24px 60px -18px rgba(56,225,255,.25)}
.fp-card h3{margin:16px 0 8px; font-size:18px}
.fp-card p{margin:0; color:var(--mut); font-size:14.5px; line-height:1.65}
.fp-ico{display:inline-flex; width:48px; height:48px; border-radius:14px; align-items:center; justify-content:center; font-size:20px}
.fp-i1{background:rgba(56,225,255,.14); color:var(--cyan)}
.fp-i2{background:rgba(255,194,71,.14); color:var(--amber)}
.fp-i3{background:rgba(79,124,255,.16); color:#9db4ff}
.fp-i4{background:rgba(61,220,132,.14); color:var(--green)}
.fp-i5{background:rgba(255,110,169,.14); color:var(--pink)}
.fp-i6{background:rgba(178,132,255,.16); color:#c9a8ff}

/* modules */
.fp-module{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-top:56px; background:var(--card);
  border:1px solid var(--line); border-radius:22px; padding:44px}
.fp-module.fp-flip .fp-module-copy{order:2}
.fp-module-copy h3{font-size:23px; margin:0 0 10px}
.fp-module-copy h3 i{color:var(--cyan); margin-right:8px}
.fp-module-copy p{color:var(--mut); line-height:1.7}
.fp-module-copy ul{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:9px; font-size:14.5px}
.fp-module-copy li::before{content:"◆"; color:var(--cyan); margin-right:9px; font-size:11px}
.fp-module-visual{min-height:250px; display:flex; align-items:center; justify-content:center; perspective:800px}
/* cube */
.fp-cube{position:relative; width:130px; height:130px; transform-style:preserve-3d; animation:fp-spin 9s linear infinite}
.fp-cube span{position:absolute; inset:0; border:2px solid var(--cyan); border-radius:16px; background:rgba(56,225,255,.07)}
.fp-cube span:nth-child(1){transform:translateZ(65px)}
.fp-cube span:nth-child(2){transform:rotateY(90deg) translateZ(65px); border-color:var(--blue)}
.fp-cube span:nth-child(3){transform:rotateX(90deg) translateZ(65px); border-color:var(--pink)}
.fp-cube span:nth-child(4){transform:translateZ(-65px); border-color:var(--cyan)}
.fp-cube span:nth-child(5){transform:rotateY(-90deg) translateZ(65px); border-color:var(--blue)}
.fp-cube span:nth-child(6){transform:rotateX(-90deg) translateZ(65px); border-color:var(--pink)}
@keyframes fp-spin{from{transform:rotateX(-18deg) rotateY(0)}to{transform:rotateX(-18deg) rotateY(360deg)}}
/* rings */
.fp-rings{position:relative; width:200px; height:200px; transform-style:preserve-3d; animation:fp-spin 14s linear infinite reverse}
.fp-rings span{position:absolute; inset:0; border-radius:50%; border:2px dashed rgba(255,194,71,.7)}
.fp-rings span:nth-child(2){inset:34px; border-color:rgba(56,225,255,.7); border-style:solid}
.fp-rings span:nth-child(3){inset:68px; background:radial-gradient(circle,var(--amber),transparent 70%); border:none}
/* orbit */
.fp-orbit{position:relative; width:210px; height:210px}
.fp-orbit span{position:absolute; border-radius:50%}
.fp-orbit span:nth-child(1){inset:0; border:2px solid rgba(61,220,132,.4)}
.fp-orbit span:nth-child(2){width:26px; height:26px; top:8px; left:50%; background:var(--green); box-shadow:0 0 24px var(--green); animation:fp-orbit 5s linear infinite; transform-origin:-84px 96px}
.fp-orbit span:nth-child(3){width:64px; height:64px; top:73px; left:73px; background:radial-gradient(circle at 35% 35%,#9db4ff,var(--blue)); box-shadow:0 0 40px rgba(79,124,255,.6)}
@keyframes fp-orbit{to{transform:rotate(360deg)}}

/* tenant */
.fp-tenant-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.fp-tenant-points{display:flex; flex-direction:column; gap:16px; margin-top:28px}
.fp-tenant-points div{display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px}
.fp-tenant-points i{font-size:20px; color:var(--cyan); margin-top:2px}
.fp-tenant-points strong{display:block}
.fp-tenant-points span{color:var(--mut); font-size:13.5px}
.fp-tenant-visual{position:relative; min-height:340px; perspective:900px}
.fp-tenant-card{position:absolute; width:250px; background:linear-gradient(160deg,#122046,#0a132c); border:1px solid var(--line);
  border-radius:18px; padding:24px; box-shadow:var(--shadow); text-align:center}
.fp-tenant-card i{font-size:30px; color:var(--cyan)}
.fp-tenant-card b{display:block; margin:10px 0 4px; font-size:17px}
.fp-tenant-card span{color:var(--mut); font-size:12.5px}
.fp-tc1{top:10px; left:6%; transform:rotateY(14deg) rotateX(6deg)}
.fp-tc2{bottom:10px; right:4%; transform:rotateY(-14deg) rotateX(6deg)}
.fp-tc2 i{color:var(--amber)}
.fp-tenant-lock{position:absolute; top:50%; left:50%; width:76px; height:76px; margin:-38px; border-radius:50%;
  background:linear-gradient(135deg,var(--green),#1d9e57); display:flex; align-items:center; justify-content:center;
  font-size:28px; color:#04160c; box-shadow:0 0 0 12px rgba(61,220,132,.12),0 0 50px rgba(61,220,132,.5); animation:fp-pulse 2.6s ease-in-out infinite}
@keyframes fp-pulse{50%{box-shadow:0 0 0 20px rgba(61,220,132,.06),0 0 60px rgba(61,220,132,.6)}}

/* CTA + footer */
.fp-cta{padding:90px 0; text-align:center; background:radial-gradient(600px 300px at 50% 100%, rgba(79,124,255,.25), transparent 70%)}
.fp-cta h2{font-size:clamp(30px,3.6vw,46px); margin:0 0 10px}
.fp-cta p{color:var(--mut); margin:0 0 30px; font-size:17px}
.fp-footer{border-top:1px solid var(--line); padding:22px 0; color:var(--mut); font-size:14px}
.fp-footer-inner{display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.fp-footer a{text-decoration:none; color:var(--cyan)}

/* reveal */
.fp-reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.fp-reveal.in{opacity:1; transform:none}

/* responsive */
@media (max-width:1020px){
  .fp-hero-grid,.fp-tenant-grid{grid-template-columns:1fr}
  .fp-grid{grid-template-columns:repeat(2,1fr)}
  .fp-grid-4{grid-template-columns:repeat(2,1fr)}
  .fp-hero-strip{grid-template-columns:repeat(2,1fr)}
  .fp-module{grid-template-columns:1fr; padding:30px}
  .fp-module.fp-flip .fp-module-copy{order:0}
  .fp-float-a{left:0}.fp-float-b{right:0}
  .fp-links{display:none}
}
@media (max-width:620px){
  .fp-grid,.fp-grid-4{grid-template-columns:1fr}
  .fp-hero-strip{grid-template-columns:repeat(2,1fr); gap:10px; margin-top:36px}
  .fp-stat{padding:16px 12px}
  .fp-stat strong{font-size:17px}
  .fp-stat span:last-child{font-size:12.5px}
  .fp-hero{padding-top:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .fp-reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}