/* Cargo — shared site styles */
:root{
  --bg:#0e1320; --bg-soft:#141c2b; --card:#18202f; --card-2:#1c2536;
  --line:#283248; --line-soft:#212a3d;
  --ink:#f3f6fc; --muted:#97a4bd; --muted-2:#6f7d97;
  --brand:#ef7a3d; --brand-2:#f6a24f; --brand-ink:#fff;
  --radius:18px; --radius-sm:12px; --max:1080px;
  --shadow:0 30px 60px -20px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(60rem 40rem at 50% -10rem, rgba(239,122,61,.16), transparent 60%),
    radial-gradient(40rem 30rem at 100% 0, rgba(118,99,255,.10), transparent 55%);
  background-repeat:no-repeat;
}
a{color:var(--brand-2); text-decoration:none}
a:hover{color:var(--brand); text-decoration:underline}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.muted{color:var(--muted)}

/* nav */
header.site{position:sticky; top:0; z-index:20;
  background:rgba(14,19,32,.72); backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line-soft)}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:11px; font-weight:750; font-size:18px; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:32px; height:32px; border-radius:8px}
.nav nav a{color:var(--muted); margin-left:24px; font-size:14.5px; font-weight:500}
.nav nav a:hover{color:var(--ink); text-decoration:none}
.nav .btn{margin-left:24px}
@media(max-width:620px){ .nav nav a{display:none} .nav nav .btn{display:inline-flex} }

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px;
  padding:11px 18px; border-radius:12px; border:1px solid transparent; cursor:pointer; transition:.15s}
.btn-primary{background:linear-gradient(180deg,var(--brand-2),var(--brand)); color:var(--brand-ink);
  box-shadow:0 8px 24px -8px rgba(239,122,61,.6)}
.btn-primary:hover{filter:brightness(1.06); text-decoration:none; transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.03); color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.06); text-decoration:none}

/* hero */
.hero{padding:88px 0 30px; text-align:center}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:var(--brand-2); background:rgba(239,122,61,.10); border:1px solid rgba(239,122,61,.25);
  padding:6px 13px; border-radius:999px; letter-spacing:.01em}
.hero h1{font-size:clamp(34px,5.4vw,56px); line-height:1.07; letter-spacing:-.025em; margin:22px 0 18px}
.hero h1 .grad{background:linear-gradient(120deg,var(--brand-2),#f7c08a); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lead{font-size:clamp(17px,2.3vw,20px); color:var(--muted); max-width:660px; margin:0 auto 30px}
.hero .actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.trustbar{margin-top:26px; color:var(--muted-2); font-size:13.5px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap}
.trustbar b{color:var(--muted); font-weight:600}

/* framed screenshot */
.frame{margin:54px auto 0; max-width:960px; border-radius:var(--radius); border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow); overflow:hidden}
.frame .bar{display:flex; gap:7px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line-soft); background:var(--bg-soft)}
.frame .bar i{width:11px; height:11px; border-radius:50%; background:#39435c; display:inline-block}
.frame img{width:100%; display:block}

/* sections */
section{padding:64px 0}
.section-head{text-align:center; max-width:640px; margin:0 auto 40px}
.section-head h2{font-size:clamp(24px,3.4vw,34px); letter-spacing:-.02em; margin:0 0 12px}
.section-head p{color:var(--muted); margin:0; font-size:17px}

/* feature grid */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px}
.card{background:linear-gradient(180deg,var(--card-2),var(--card)); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px; transition:.18s}
.card:hover{border-color:#37425d; transform:translateY(-3px)}
.ico{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; margin-bottom:14px;
  background:rgba(239,122,61,.12); border:1px solid rgba(239,122,61,.22); color:var(--brand-2)}
.ico svg{width:22px; height:22px}
.card h3{margin:0 0 7px; font-size:17px}
.card p{margin:0; color:var(--muted); font-size:14.5px}

/* steps */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; counter-reset:s}
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; position:relative}
.step::before{counter-increment:s; content:counter(s); position:absolute; top:-14px; left:22px;
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-weight:700; font-size:15px;
  background:linear-gradient(180deg,var(--brand-2),var(--brand)); color:#fff; box-shadow:0 6px 16px -6px rgba(239,122,61,.7)}
.step h3{margin:10px 0 6px; font-size:17px}
.step p{margin:0; color:var(--muted); font-size:14.5px}

/* support band */
.band{background:linear-gradient(180deg,var(--card-2),var(--card)); border:1px solid var(--line);
  border-radius:24px; padding:46px 30px; text-align:center}
.band h2{font-size:clamp(24px,3.4vw,32px); margin:0 0 10px; letter-spacing:-.02em}
.band p{color:var(--muted); max-width:600px; margin:0 auto 22px}
.emailpill{display:inline-flex; align-items:center; gap:9px; font-weight:650; font-size:17px;
  background:var(--bg); border:1px solid var(--line); padding:11px 20px; border-radius:12px; color:var(--ink)}
.emailpill:hover{text-decoration:none; border-color:#3a4660}

/* faq */
.faq{max-width:760px; margin:0 auto}
details{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:2px 20px; margin-bottom:12px}
summary{cursor:pointer; padding:17px 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--brand-2); font-size:20px; font-weight:400; line-height:1}
details[open] summary::after{content:"\2013"}
details > p{margin:0 0 16px; color:var(--muted); font-size:15px}

/* footer */
footer.site{border-top:1px solid var(--line-soft); padding:34px 0; margin-top:30px}
.foot{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between; color:var(--muted-2); font-size:14px}
.foot nav a{color:var(--muted); margin-right:20px}
.foot nav a:hover{color:var(--ink)}

/* prose (legal pages) */
.prose{max-width:760px; margin:0 auto; padding:54px 0 20px}
.prose h1{font-size:clamp(28px,4vw,38px); letter-spacing:-.02em; margin:0 0 6px}
.prose .updated{color:var(--muted-2); font-size:14px; margin:0 0 34px}
.prose h2{font-size:20px; margin:34px 0 12px; letter-spacing:-.01em}
.prose p,.prose li{color:#c7d0e2}
.prose ul{padding-left:20px; margin:12px 0}
.prose li{margin:7px 0}
.prose strong{color:var(--ink)}
.prose a{color:var(--brand-2)}
.backlink{display:inline-block; margin-top:36px; color:var(--muted)}