
:root{
  --bg:#0b0b0b;
  --fg:#f5f5f5;
  --primary:#f97316;
  --muted:#9ca3af;
  --ring: rgba(249,115,22,.3);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.w-full{width:100%}

.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter:saturate(140%) blur(8px); background:rgba(11,11,11,.7);
}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(249,115,22,.1);color:var(--primary);font-weight:900}
.brand-name{font-weight:700; font-size:14px}
.brand-sub{font-size:12px;color:var(--muted);margin-top:-2px}

.site-nav{display:none; gap:20px; align-items:center}
.site-nav a{color:inherit; text-decoration:none}
.site-nav a:hover{color:var(--primary)}
.btn{border:0; background:var(--primary); color:#fff; border-radius:16px; padding:10px 14px; cursor:pointer; transition:.2s opacity}
.btn:hover{opacity:.9}
.btn-sm{padding:8px 12px; font-size:14px}
.btn-outline{background:transparent; color:inherit; border:1px solid rgba(255,255,255,.25)}
.hamburger{display:inline-flex; background:transparent; border:1px solid rgba(255,255,255,.25); border-radius:10px; padding:6px; color:inherit}
@media (min-width: 768px){
  .site-nav{display:flex}
  .hamburger{display:none}
}

.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40}
.mobile-sheet{position:fixed; left:0; right:0; top:56px; background:rgba(11,11,11,.98); border-bottom:1px solid rgba(255,255,255,.15); z-index:50}
.mobile-links{list-style:none; margin:0; padding:16px; display:grid; gap:14px}
.mobile-links a{color:inherit; text-decoration:none}

.split{display:flex; min-height:calc(100vh - var(--header-offset, 56px)); width:100%}
.panel{
  position:relative;
  flex:1 1 50%;
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden; min-height:50vh;
  transition:flex-basis .45s ease;
  background-image:var(--bg);
  background-size:cover; background-position:center;
}
.panel .overlay{position:absolute; inset:0; background:rgba(0,0,0,.4); transition:.3s}
.panel .gradient{position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.3), transparent)}
.panel .content{position:relative; z-index:2; width:100%; max-width:680px; padding:24px 24px 36px; color:#fff}
.panel h2{margin:0 0 6px; font-size:34px; line-height:1.1; font-weight:900; text-shadow:0 2px 12px rgba(0,0,0,.4); color:#fff}
.panel .sub{margin:0 0 18px; color:rgba(255,255,255,.85)}

.cards{display:grid; gap:12px}
.card{background:rgba(255,255,255,.9); color:#111; border-radius:18px; box-shadow:0 10px 24px rgba(0,0,0,.25); overflow:hidden}
.card-hd{display:flex; align-items:center; gap:10px; padding:14px 16px 6px}
.icon-dot{width:8px;height:8px;border-radius:999px;background:#111}
.card-title{font-weight:700}
.card-bd{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 16px 14px}
.card-bd p{margin:0; color:#555; font-size:14px}
.arrow{margin-left:6px}

.split.hovering .panel{flex-basis:40%}
.split.hovering .panel.is-hover{flex-basis:60%}
.panel:focus{outline:none; box-shadow:0 0 0 4px var(--ring) inset}

@media (max-width: 767px){
  .split{flex-direction:column}
  .panel{flex-basis:auto; min-height:52vh}
  .split.hovering .panel, .split.hovering .panel.is-hover{flex-basis:auto}
}
/* Modal */
.modal{position:fixed; inset:0; display:grid; place-items:center; z-index:70}
.modal::before{content:""; position:fixed; inset:0; background:rgba(0,0,0,.5)}
.modal-panel{position:relative; width:min(92vw, 560px); background:var(--bg); border:1px solid rgba(255,255,255,.2); border-radius:20px; box-shadow:0 20px 50px rgba(0,0,0,.5)}
.modal-hd{padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.12)}
.modal-hd h3{margin:0; font-size:18px}
.modal-bd{padding:18px 20px}
.label{display:block; font-size:14px}
input#zip{width:100%; margin-top:6px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.25); background:transparent; color:var(--fg); outline:none}
input#zip:focus{box-shadow:0 0 0 4px var(--ring)}
.hint{color:var(--muted); font-size:12px; margin-top:8px}
.error{color:#ef4444; font-size:13px; margin-top:8px}
.actions{display:flex; justify-content:flex-end; gap:8px; padding-top:10px}

/* ==== TFV landing balance tweaks (do not remove) ==== */
/* Center content vertically and enhance readability */
.split .panel{align-items:center}
.split .panel .overlay{background:rgba(0,0,0,.45)}
.split .panel .gradient{background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.30), rgba(0,0,0,.20))}
.split .panel .content{max-width:760px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px}
.split .panel h2{margin:0; font-size:clamp(28px, 3.2vw, 44px); text-shadow:0 4px 22px rgba(0,0,0,.45); color:#fff}
.split .panel .sub{margin:0; color:rgba(255,255,255,.9); font-size:clamp(14px, 1.2vw, 18px)}

/* Card restyle: glassy, centered, consistent width */
.split .cards{gap:18px; justify-items:center}
.split .card{background:rgba(17,24,39,.65); color:#fff; border-radius:18px; box-shadow:0 18px 40px rgba(0,0,0,.35); overflow:hidden; border:1px solid rgba(255,255,255,.12); backdrop-filter:saturate(140%) blur(6px); max-width:540px; width:100%}
.split .card-hd{padding:18px 20px 6px}
.split .icon-dot{display:none}
.split .card-title{font-weight:800; letter-spacing:.2px}
.split .card-bd{gap:16px; padding:0 20px 18px}
.split .card-bd p{margin:0; color:rgba(255,255,255,.88); font-size:15px}

/* Button: brand green, subtle lift */
.split .btn{transition:.2s transform, .2s opacity, .2s box-shadow}
.split .btn:hover{opacity:.95; transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.25)}
.split .btn-primary{background:var(--primary); border:1px solid rgba(255,255,255,.2)}
.split .btn-primary:hover{background:#ea580c}
/* Ensure titles are neutral (white) */
.split .card-title{color:#fff}
