/* Cargoship — calm theme layered over main.css */
:root{
  --abyss:#0B1624; --tide:#16314A; --sea:#6FB0A6; --lantern:#F2CF8E;
  --primary:#16314A; --secondary:#2C5B7A; --accent:#E7BE72;
  --bg:#EEF2F3; --text:#12202E; --muted:#5C6B78; --border:#D5DEE2;
  --radius:14px; --shadow:0 1px 24px rgba(11,22,36,.07);
}
body{font-family:'Figtree',system-ui,sans-serif;font-size:1.02rem}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:400;letter-spacing:-.01em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--sea);outline-offset:3px}
.btn{border-radius:999px;font-weight:500;transition:background .25s,color .25s,border-color .25s}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--abyss)}
.btn-primary:hover{background:var(--lantern);border-color:var(--lantern);color:var(--abyss)}
.btn-outline{color:var(--tide);border-color:var(--tide)}.btn-outline:hover{background:var(--tide)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Header */
#header{background:var(--abyss);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none}
#header .logo{display:inline-flex;align-items:center;gap:.6rem;font-family:'Fraunces',serif;font-size:1.45rem;font-weight:400;color:#fff;text-decoration:none}
#header .logo svg{width:30px;height:30px;color:var(--lantern)}
#header .nav-links a{color:rgba(255,255,255,.78);font-weight:400}
#header .nav-links a:hover{color:#fff;text-decoration:none}
#header .nav-links .nav-cta{background:transparent;border:1px solid var(--lantern);color:var(--lantern);border-radius:999px}
#header .nav-links .nav-cta:hover{background:var(--lantern);color:var(--abyss)}
#header .mobile-btn{color:#fff}
@media(max-width:768px){#header .nav-links{background:var(--abyss)}}

/* Hero: dusk over still water */
.hero{position:relative;overflow:hidden;padding:7rem 0 6rem;text-align:left;color:#fff;
  background:linear-gradient(180deg,var(--abyss) 0%,#122A40 55%,#1D4A5C 100%)}
.hero-sky{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;right:12%;bottom:30%;width:min(34vw,380px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#FBE7BC 0%,var(--lantern) 38%,rgba(242,207,142,0) 70%);
  opacity:.9;animation:breathe 9s ease-in-out infinite}
.horizon{position:absolute;left:0;right:0;bottom:30%;height:1px;background:rgba(255,255,255,.25)}
.sea{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,rgba(111,176,166,.18),rgba(11,22,36,.5))}
.vessel{position:absolute;bottom:calc(30% - 2px);left:-260px;width:240px;color:var(--abyss);animation:drift 150s linear infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.82}50%{transform:scale(1.07);opacity:1}}
@keyframes drift{to{transform:translateX(calc(100vw + 300px))}}
.hero-inner{position:relative;max-width:1180px}
.hero h1{font-size:clamp(2.6rem,6.5vw,5rem);font-weight:300;line-height:1.05;max-width:12em;margin-bottom:1.4rem}
.hero-lede{max-width:34em;font-size:1.15rem;color:rgba(255,255,255,.8);margin-bottom:2.2rem}
.hero-track{display:flex;gap:.6rem;max-width:520px;flex-wrap:wrap}
.hero-track input{flex:1 1 220px;padding:.85rem 1.2rem;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(11,22,36,.55);color:#fff;font:inherit}
.hero-track input::placeholder{color:rgba(255,255,255,.55)}
.hero-alt{margin-top:1rem;color:rgba(255,255,255,.7);font-size:.95rem}.hero-alt a{color:var(--lantern)}

/* Content sections */
.section{padding:6rem 0}
.lead-title{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:300;max-width:18em;margin-bottom:3rem;color:var(--tide)}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:3.5rem}
.ways h3{font-size:1.5rem;color:var(--tide);margin-bottom:.6rem}
.ways p{color:var(--muted);max-width:26em}
.ways svg{width:34px;height:34px;color:var(--sea);margin-bottom:1rem}
.principles{background:var(--tide);color:#fff}
.principles .lead-title{color:#fff}
.principles-list{display:grid;grid-template-columns:repeat(3,1fr);gap:3.5rem;border-top:1px solid rgba(255,255,255,.18);padding-top:2.5rem}
.principles h3{font-size:1.35rem;color:var(--lantern);margin-bottom:.5rem}
.principles p{color:rgba(255,255,255,.75);max-width:26em}
.now-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem}
.now-grid h3{font-size:1.15rem;color:var(--tide);margin-bottom:1.1rem}
.vessel-row{padding:.8rem 0;border-bottom:1px solid var(--border)}
.vessel-row small{color:var(--muted)}
.big-num{font-family:'Fraunces',serif;font-size:2.6rem;font-weight:300;color:var(--tide);line-height:1}
.num-lbl{color:var(--muted);font-size:.9rem;margin:.3rem 0 1.3rem}
.region-bar{background:var(--border);height:5px;border-radius:5px}.region-fill{background:var(--sea);height:100%;border-radius:5px}

/* Inner pages */
.page-hero{background:linear-gradient(180deg,var(--abyss),var(--tide));color:#fff;padding:4rem 0 3.5rem}
.page-hero h1{font-weight:300;font-size:clamp(2rem,4.5vw,3rem)}.page-hero p{color:rgba(255,255,255,.75);margin-top:.5rem}
.track-box,.form-card,.card{border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow)}
.track-box-header{background:var(--tide)}
.progress-fill{background:var(--sea);color:var(--abyss)}
.tl-done{background:var(--sea)!important;color:var(--abyss)!important}

/* Footer */
footer{background:var(--abyss);color:rgba(255,255,255,.7)}
footer h3{font-family:'Fraunces',serif;font-weight:400;color:#fff}
footer a{color:rgba(255,255,255,.75)}footer a:hover{color:var(--lantern)}
.demo-note{margin-top:1rem;font-size:.85rem;color:rgba(255,255,255,.55);max-width:30em}

@media(max-width:820px){.ways,.principles-list,.now-grid{grid-template-columns:1fr;gap:2.2rem}.orb{right:-10%;width:60vw}.hero{padding:5rem 0 4.5rem}.section{padding:4rem 0}}
@media(prefers-reduced-motion:reduce){.orb,.vessel{animation:none}.vessel{left:12%}}