/* Styles for FREIGHT GURU INC landing page */
/* Light, responsive, semantic; no external assets or JS */

:root{
  --bg: #0f172a;        /* slate-900 */
  --surface: #111827;   /* gray-900 */
  --muted: #9ca3af;     /* gray-400 */
  --text: #f8fafc;      /* slate-50 */
  --accent: #22d3ee;    /* cyan-400 */
  --accent-ink: #0b1020;
  --card: #0b1224;
  --ring: #334155;
  --shadow: rgba(0,0,0,.35);
}

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

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

.site-header{
  position:sticky; top:0; z-index:100;
  background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.6));
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--ring);
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: .9rem 0;
}

.brand-name{ font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin:0; }
.brand-tagline{ margin:.15rem 0 0; color:var(--muted); font-size:.95rem; }

.quick-actions{ display:flex; gap:.6rem; }
.btn{
  display:inline-block; padding:.6rem .9rem; border-radius:.75rem;
  background: var(--accent); color: var(--accent-ink); text-decoration:none;
  font-weight:600; border:1px solid transparent; box-shadow: 0 8px 20px var(--shadow);
}
.btn:hover{ filter:brightness(1.05) }
.btn:focus{ outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-secondary{
  background:transparent; color:var(--text);
  border:1px solid var(--ring);
}

/* Hero */
.hero{
  position:relative; min-height: 62vh; display:grid; place-items:center;
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0;
  background: url("./assets/bg_01.png") center/cover no-repeat;
  opacity:.32; z-index:-2;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(80% 60% at 50% 40%, rgba(34,211,238,.18), transparent 60%);
}
.hero-content{ text-align:center; padding: 4rem 0; }
.hero-content h2{
  margin:0 0 .5rem; font-size: clamp(1.8rem, 4vw, 2.4rem);
}
.hero-content p{ margin:.2rem auto 1rem; color:var(--muted); max-width: 60ch; }
.hero-ctas{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }

/* Cards / Sections */
.services{ padding: 2.5rem 0 1rem; }
.grid-3{
  display:grid; gap:1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 720px){
  .grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card{
  background: linear-gradient(180deg, rgba(17,24,39,.9), rgba(11,18,36,.9));
  border:1px solid var(--ring);
  border-radius: 1rem; padding:1.1rem;
  box-shadow: 0 10px 30px var(--shadow);
}
.card h3{ margin:.2rem 0 .25rem; }
.card p{ margin:0; color:var(--muted); }

/* Visuals */
.visuals{ padding: 1.5rem 0 2.25rem; }
.visuals-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 900px){
  .visuals-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.visual{
  background: var(--card);
  border:1px solid var(--ring);
  border-radius: 1rem;
  overflow:hidden;
  box-shadow: 0 10px 30px var(--shadow);
}
.visual img{ display:block; width:100%; height:auto; }
.visual figcaption{
  padding:.75rem 1rem; color:var(--muted); font-size:.95rem;
}

/* Stats */
.why-us{ padding: 1rem 0 2.25rem; }
.stat{
  text-align:center;
  background: linear-gradient(180deg, rgba(17,24,39,.9), rgba(11,18,36,.9));
  border:1px solid var(--ring);
  border-radius: 1rem; padding:1.2rem;
}
.stat h4{ margin:.1rem 0 .25rem; font-size:1.35rem }
.stat p{ margin:0; color:var(--muted); }

/* Footer */
.site-footer{
  border-top:1px solid var(--ring);
  background: rgba(11,18,36,.9);
}
.footer-grid{
  display:grid; gap:1rem; padding:1.2rem 0 1.8rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 720px){
  .footer-grid{ grid-template-columns: 2fr 3fr; }
}
.site-footer h5{ margin:.1rem 0 .3rem; }
address{ font-style:normal; color:var(--muted); }
.legal{ color:var(--muted); font-size:.95rem }
.fine{ font-size:.85rem; opacity:.85 }