/* AdventureSafe — FULL CSS FILE (replace everything with this) */

/* 1) Theme & sizing */
:root{
  --brand-primary:#CC6A14;   /* copper orange */
  --brand-accent:#6B8F71;    /* sage green */
  --ink:#e8eef5;             /* main text color */
  --ink-2:#c9d5e1;           /* secondary text */
  --muted:#91a0b0;
  --bg:#12171d;              /* lightened background so logo pops more */
  --card:#14191f;            /* slightly brighter cards */
  --ring:rgba(204,106,20,0.30);
  --radius:18px;

  /* Wider, fluid page width:
     - never smaller than 1120px
     - grows with your screen (92% of width)
     - stops growing at 1440px */
  --maxw:clamp(1120px, 92vw, 1440px);
}

/* 2) Global */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(107,143,113,0.14), transparent 50%),
    radial-gradient(800px 600px at 110% 10%, rgba(204,106,20,0.14), transparent 50%),
    var(--bg);
  line-height:1.6;
}
a{color:var(--ink);text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* 3) Header */
header{
  position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(1.2) blur(10px);
  background:rgba(12,15,18,0.80);
  border-bottom:1px solid rgba(255,255,255,0.08)
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px}
.logo{display:flex;align-items:center;justify-content:center;width:auto;height:auto;background:transparent;box-shadow:none;padding:0}
.logo img{height:56px;width:auto;display:block;object-fit:contain;border-radius:0}
@media (max-width:640px){.logo img{height:42px}}
.logo svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.navlinks{display:flex;align-items:center;gap:18px}
.navlinks a{color:#d6dfeb;font-weight:600;opacity:.95}

/* 4) Buttons */
.cta-btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;
  font-weight:800;background:linear-gradient(180deg,var(--brand-primary),#B6560E);
  box-shadow:0 10px 24px rgba(204,106,20,.35), inset 0 -6px 12px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12)
}
.cta-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(204,106,20,.42), inset 0 -6px 12px rgba(0,0,0,.25)}
.ghost-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;font-weight:700;color:#e6eef8
}

/* 5) Hero */
.hero{padding:72px 0 40px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(107,143,113,.18);
  color:#eaf3ee;font-weight:700;font-size:13px
}
h1{font-size:clamp(36px,5.0vw,58px);line-height:1.06;margin:14px 0 16px;letter-spacing:-.02em}
.sub{font-size:clamp(16px,2vw,19px);color:#d6dfeb;max-width:68ch}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.hero-card{
  background:linear-gradient(180deg, rgba(20,25,31,.9), rgba(20,25,31,.6));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);padding:20px;
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center
}
.hero-card strong{font-size:15px}
.hero aside{display:grid;gap:12px}

/* 6) Trust row */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.trust .pill{border-radius:12px;padding:12px 14px;border:1px dashed rgba(255,255,255,.16);color:#cfe0f0;display:flex;align-items:center;gap:10px}

/* 7) Sections */
section{padding:64px 0}
.kicker{color:var(--brand-accent);font-weight:800;letter-spacing:.08em;font-size:12px;text-transform:uppercase}
h2{font-size:clamp(26px,3.2vw,38px);margin:8px 0 12px;letter-spacing:-.01em}
.lead{color:#d0dae6;max-width:72ch}

/* 8) Cards */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);padding:18px;border-radius:var(--radius)
}
.card h3{margin:8px 0 6px}
.badge{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;
  border:1px solid rgba(255,255,255,.14);color:#e8f2ea;background:rgba(107,143,113,.12);
  font-weight:700;font-size:12px
}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:#dee7f2;font-size:12px}
.pill{padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}

.scoreband{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.scoreband div{padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.10);text-align:center;font-weight:700}
.s0{background:rgba(255,255,255,.03)}
.s1{background:rgba(204,106,20,.14)}
.s2{background:rgba(204,106,20,.20)}
.s3{background:rgba(204,106,20,.28)}

.list{margin:10px 0 0 0;padding:0;list-style:none}
.list li{display:grid;grid-template-columns:20px 1fr;gap:10px;margin:8px 0}

/* 9) About layout */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px}

/* 10) CTA band */
.cta-band{
  background:linear-gradient(135deg, rgba(107,143,113,.24), rgba(204,106,20,.24));
  border:1px solid rgba(255,255,255,.14);padding:24px;border-radius:var(--radius);
  display:grid;grid-template-columns:1.4fr .6fr;gap:14px;align-items:center
}

/* 11) Footer */
footer{padding:32px 0 64px;color:#b8c6d4;font-size:14px}
.footgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.fineprint{font-size:12px;color:var(--muted)}

/* 12) Inputs */
.input{width:100%;padding:12px 12px;color:#f1f6fb;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:12px;outline:none}
.input:focus{border-color:rgba(204,106,20,.6);box-shadow:0 0 0 6px var(--ring)}

/* 13) Helpers */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid rgba(255,255,255,.12);padding:12px;text-align:left}

/* 14) Mobile layout adjustments */
@media (max-width:960px){
  .hero-grid,.grid-3,.grid-2,.about,.cta-band,.footgrid{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr 1fr}
}

/* === Header Logo Tuning v2 (keeps badge inside header, enlarges logo) === */

/* Make the header a bit taller so the badge fits cleanly */
.nav{
  height: 92px; /* was ~72px */
}

/* Light badge behind the logo—slightly tighter padding */
header .logo{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(242,247,244,0.96));
  padding: 6px 10px;             /* tighter so it doesn't spill */
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
}

/* Enlarge the logo itself on desktop */
header .logo img{
  height: 76px;   /* bigger logo */
  width: auto;
  display: block;
}

/* Very large screens: give it a touch more presence */
@media (min-width: 1440px){
  .nav{ height: 100px; }
  header .logo img{ height: 84px; }
}

/* Mobile: keep things compact */
@media (max-width: 640px){
  .nav{ height: 64px; }
  header .logo{
    padding: 4px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.14);
  }
  header .logo img{ height: 46px; }
}

/* Ensure the header line remains crisp against the badge */
header{
  border-bottom: 2px solid rgba(204,106,20,0.28);
}

/* === Brand Masthead (large, readable logo) === */
.brand-masthead{
  background: #ffffff;                /* light backdrop so logo pops */
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 24px 0;                    /* compact on smaller screens */
}

.brand-masthead .brand-card{
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(16px, 3vw, 28px);
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.08);
}

/* Make the logo LARGE but responsive.
   - min ~260px wide on phones
   - scales up to ~560px on big monitors */
.brand-masthead img{
  width: clamp(260px, 45vw, 560px);
  height: auto;
  display: block;
}

/* Small tagline under the logo (optional) */
.brand-caption{
  font-size: 14px;
  letter-spacing: .06em;
  color: #2F6B57; /* sage */
  text-transform: uppercase;
  font-weight: 700;
  opacity: .9;
}

/* Add breathing room before your existing hero */
.brand-masthead + .hero{
  margin-top: 14px;
}

/* === Turn OFF the old header badge (since logo now lives big in masthead) === */
header .logo{
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
header .logo img{
  height: 44px;        /* small header logo for navigation */
}
.nav{ height: 72px; }  /* restore standard header height */