/* /public/assets/css/main.css */

/* ==== Design Tokens ==== */
:root {
  --brand: #2563EB;        /* Blue (trust) */
  --brand-600: #1D4ED8;
  --accent: #F59E0B;       /* Amber (CTA) */
  --bg: #FFFFFF;
  --ink: #0F172A;          /* Slate-900 */
  --muted: #64748B;        /* Slate-500 */
  --surface: #FFFFFF;
  --ring: #93C5FD;
  --success: #10B981;
  --danger: #EF4444;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(2, 6, 23, .08);
}

[data-theme="dark"]{
  --bg:#0B1220; --ink:#E5E7EB; --muted:#94A3B8;
  --surface:#0F172A; --shadow: 0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* ==== Buttons ==== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1.1rem;border-radius:999px;border:1px solid transparent;
  font-weight:700;cursor:pointer;transition:.18s transform ease, .18s box-shadow ease;
  box-shadow:0 2px 0 rgba(0,0,0,.03);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:#111}
.btn--primary:hover{filter:brightness(1.05)}
.btn--ghost{border-color:#cbd5e1;background:transparent;color:var(--ink)}
.btn--ghost:hover{background:rgba(148,163,184,.12)}
.btn--login{
  border:2px solid var(--brand);
  color:var(--brand); background: #EFF6FF;
}
.btn--login:hover{
  background:#DBEAFE;
  box-shadow:0 0 0 4px rgba(37,99,235,.15);
}

/* ==== Header/Nav ==== */
.site-header{
  position:sticky;top:0;background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(148,163,184,.15);z-index:20;
}
[data-theme="dark"] .site-header{background:rgba(11,18,32,.8)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;gap:12px}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--ink)}
.logo img{height:30px;width:auto}
.nav{display:flex;gap:1.1rem;align-items:center}
.nav a{
  padding:.4rem .6rem;border-radius:8px;color:var(--ink);font-weight:600
}
.nav a:hover{background:rgba(148,163,184,.15);text-decoration:none}
.header-ctas{display:flex;gap:.5rem;align-items:center}

/* ==== FULL-WIDTH HERO (background image with overlay text) ==== */
.hero {
  position: relative;
  width: 100vw;          /* ensure full viewport width */
  left: 50%;
  right: 50%;
  margin-left: -50vw;    /* break out of .container to edge-to-edge */
  margin-right: -50vw;
  min-height: 68vh;
  display: flex;
  align-items: center;
  color: #fff;
  background-image: var(--hero, url('/assets/img/hero.jpg'));
  background-size: cover;
  background-position: center;
}
.hero::before {
  /* gradient overlay for better text contrast */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.20) 40%, rgba(2,6,23,.55));
}
.hero__content {
  position: relative; z-index: 1;
  width: 100%;
  padding: 72px 0;
}
.hero__content .headline {
  font-size: 3rem; line-height: 1.05; margin: .2rem 0;
}
@media (max-width: 720px){
  .hero__content .headline { font-size: 2.2rem; }
}
.hero__content p {
  font-size: 1.15rem; max-width: 60ch; color: #E5E7EB;
}
.hero__badges{display:flex;gap:.6rem;flex-wrap:wrap;margin:12px 0 18px}
.badge{
  padding:.4rem .7rem;border-radius:999px;background:#2563EB;
  color:#fff;font-weight:800;font-size:.85rem;border:1px solid rgba(255,255,255,.2)
}

/* ==== Sections ==== */
.section{padding:44px 0}
.section h2{font-size:1.9rem;margin:0 0 .8rem}

/* colorful alt section backgrounds */
.section--alt {
  background: linear-gradient(180deg, #F0F9FF, #FFF7ED);
}
[data-theme="dark"] .section--alt {
  background: linear-gradient(180deg, #0B1220, #0F172A);
}

/* ==== Tiles/Benefits ==== */
.tiles{
  display:grid;gap:16px;grid-template-columns:repeat(3,1fr);
}
@media (max-width: 920px){ .tiles{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .tiles{grid-template-columns:1fr} }
.tile{
  border:1px solid rgba(148,163,184,.25);
  border-radius:var(--radius); padding:16px;background:var(--surface);
  box-shadow:var(--shadow);min-height:110px
}
.tile strong{display:block;margin-bottom:6px}

/* ==== Banners ==== */
.band{
  border:1px dashed #cbd5e1;padding:18px;border-radius:var(--radius);
  margin:18px 0;background:linear-gradient(180deg,#F8FAFC, #FFFFFF);
}
[data-theme="dark"] .band{background:linear-gradient(180deg,#0B1220,#0F172A);border-color:#23314a;color:var(--ink)}

/* ==== Testimonials ==== */
.testimonials {
  display:grid; gap:16px;
  grid-template-columns: repeat(3,1fr);
}
@media (max-width: 920px){ .testimonials{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .testimonials{grid-template-columns:1fr} }
.testimonial {
  background: var(--surface); border:1px solid rgba(148,163,184,.25);
  border-radius: var(--radius); padding:18px; box-shadow: var(--shadow);
}
.testimonial .who { font-weight: 800; color: var(--brand-600); }

/* ==== Video embed (responsive) ==== */
.video {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.video iframe {
  position: absolute; top:0; left:0; width:100%; height:100%; border:0;
}

/* ==== Footer ==== */
.site-footer{border-top:1px solid rgba(148,163,184,.25);margin-top:40px;background:linear-gradient(180deg,transparent,#F8FAFC)}
[data-theme="dark"] .site-footer{background:linear-gradient(180deg,transparent,#0B1220)}
.footer-inner{padding:18px 0;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.footer-links{display:flex;gap:1rem;flex-wrap:wrap}
.socials{display:flex;gap:.6rem}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:1px solid rgba(148,163,184,.35)}
.socials a:hover{background:rgba(148,163,184,.18)}

/* ==== Modal (raise z-index above hero/video) ==== */
.modal__backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:.2s;
  z-index: 10000; /* <-- ensures modal is always on top */
}
.modal__backdrop[aria-hidden="false"]{opacity:1;pointer-events:auto}
.modal__wrapper{background:var(--surface);color:var(--ink);width:min(520px,92vw);border-radius:16px;padding:16px;border:1px solid rgba(148,163,184,.25);box-shadow:var(--shadow)}
.modal__logo{display:flex;align-items:center;justify-content:space-between}
.modal__title{margin:.6rem 0 1rem}
.modal_field{display:grid;margin:.6rem 0}
.modal_field_label{font-size:.9rem;color:var(--muted)}
.modal__routes{display:flex;align-items:center;justify-content:space-between;margin-top:1rem}
.modal__routes_item{border:1px solid rgba(148,163,184,.3);background:var(--surface);padding:.6rem 1rem;border-radius:10px}
.modal__close{border:none;background:transparent;font-size:1.6rem;line-height:1;cursor:pointer}

/* ==== Cards & Pricing ==== */
.card{
  border:1px solid rgba(148,163,184,.25);background:var(--surface);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:20px
}
.pricing{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start
}
@media (max-width: 920px){ .pricing{grid-template-columns:1fr} }
.price{
  font-size:2.2rem;font-weight:900;color:#111;letter-spacing:-.02em
}
[data-theme="dark"] .price{color:#fff}
.checklist{list-style:none;padding:0;margin:12px 0}
.checklist li{display:flex;gap:.6rem;align-items:flex-start;margin:.35rem 0}
.check {display:inline-block;width:20px;height:20px;border-radius:50%;background:var(--success);color:#fff;text-align:center;line-height:20px;font-weight:900}
.note{color:var(--muted);font-size:.95rem}

/* ==== Forms ==== */
.input {
  width:100%;padding:.7rem;border:1px solid #CBD5E1;border-radius:10px;
}