/* Basic, lightweight, responsive styles for Blue Penguin Freight */
:root{
  --bg:#0b1220;
  --ink:#0f172a;
  --ink-soft:#334155;
  --card:#ffffff;
  --brand:#2563eb;
  --brand-ink:#0b3ea6;
  --muted:#f1f5f9;
  --ring:rgba(37,99,235,.25);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:#ffffff;
  line-height:1.6;
}

.container{width:min(1100px, 92%); margin-inline:auto}

.site-header{
  background:#fff;
  position:sticky; top:0; z-index:10;
  border-bottom:1px solid #e2e8f0;
}
.header-inner{display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:0.9rem 0;}
.brand{display:flex; gap:.75rem; align-items:center}
.brand-mark{font-size:1.75rem}
.brand-name{font-size:1.05rem; line-height:1.1; margin:0}
.brand-tag{margin:0; color:var(--ink-soft); font-size:.9rem}

.header-cta{display:flex; gap:.5rem; flex-wrap:wrap}
.btn{
  display:inline-block; padding:.6rem .95rem; border-radius:999px;
  text-decoration:none; font-weight:600; border:1px solid transparent;
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:focus{outline:none; box-shadow:0 0 0 4px var(--ring)}
.btn:hover{transform:translateY(-1px)}
.btn-solid{background:var(--brand); color:#fff}
.btn-solid:hover{background:var(--brand-ink)}
.btn-outline{border-color:#cbd5e1; color:var(--ink)}
.btn-outline:hover{border-color:var(--brand); color:var(--brand)}

.hero{
  min-height:58vh;
  color:#fff;
  background-image:
    linear-gradient(180deg, rgba(10,16,30,.55), rgba(10,16,30,.55)),
    url("./assets/bg_01.png");
  background-size:cover;
  background-position:center;
  display:flex; align-items:center;
}
.hero-inner{padding:8vh 0}
.hero h2{font-size:clamp(1.8rem, 2.6vw + 1rem, 3rem); margin:.25rem 0 0.5rem}
.hero p{max-width:62ch; margin:.25rem 0 1.25rem; font-size:1.05rem}
.hero-actions{display:flex; gap:.6rem; flex-wrap:wrap}

.info{padding:3rem 0; background:var(--muted)}
.grid-2{display:grid; grid-template-columns:1fr; gap:1rem}
@media (min-width: 820px){ .grid-2{grid-template-columns: 1.2fr .8fr}}

.card{
  background:var(--card);
  border:1px solid #e2e8f0;
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:0 6px 18px rgba(2,6,23,.04);
}
.card h3{margin-top:0}
.checklist{padding-left:1.1rem; margin:.75rem 0 0}
.checklist li{margin:.25rem 0}

.gallery{padding:2.6rem 0}
.gallery .center{text-align:center; margin-top:0}
.gallery-grid{
  display:grid; gap:1rem; grid-template-columns:1fr;
}
@media (min-width: 720px){ .gallery-grid{grid-template-columns:1fr 1fr}}
.gallery img{
  width:100%; height:260px; object-fit:cover; border-radius:14px; border:1px solid #e2e8f0;
  display:block; background:#e5e7eb;
}
figure{margin:0}
figcaption{font-size:.9rem; color:var(--ink-soft); margin-top:.4rem}

.features{padding:2.6rem 0 3.2rem; background:#fff}
.grid-3{display:grid; gap:1rem; grid-template-columns:1fr}
@media (min-width: 880px){ .grid-3{grid-template-columns: repeat(3,1fr)}}
.mini{
  background:var(--card); border:1px solid #e2e8f0; border-radius:var(--radius);
  padding:1rem; box-shadow:0 6px 18px rgba(2,6,23,.04);
}
.mini h4{margin:.2rem 0 .35rem}

.contact a{color:inherit; text-decoration:underline dotted}
.small{font-size:.92rem; color:var(--ink-soft)}

.site-footer{
  border-top:1px solid #e2e8f0; background:#fff; color:var(--ink);
}
.footer-inner{padding:1.2rem 0; display:grid; gap:.5rem}
@media (min-width: 720px){
  .footer-inner{grid-template-columns:1fr auto; align-items:center}
}
.footer-contact{display:flex; gap:.5rem; flex-wrap:wrap; color:var(--ink-soft)}
.footer-contact a{color:inherit; text-decoration:underline dotted}
.tiny{font-size:.85rem; color:var(--ink-soft); margin:.2rem 0 0}