/* ===========================================================
   BIG STAR RVs — Premium dark redesign
   Design system: navy canvas · chrome display type · electric
   blue · Texas-red action accent
   =========================================================== */

/* ---------- Tokens ---------- */
:root{
  --navy-950:#0c1c3a;
  --navy-900:#102648;
  --navy-850:#163059;
  --navy-800:#1c3a68;
  --navy-700:#244479;
  --navy-600:#2d4f8a;
  --navy-line:#345283;

  --blue:#2a93ff;
  --blue-bright:#4aa8ff;
  --blue-deep:#0e63d6;
  --blue-glow:rgba(42,147,255,.55);

  --red:#e01f2b;
  --red-bright:#ff3b46;
  --red-deep:#b3131d;

  --ink:#eaf1fb;
  --muted:#9fb0cc;
  --muted-2:#7184a4;
  --hair:rgba(140,168,214,.16);
  --hair-strong:rgba(140,168,214,.28);

  --chrome-1:#ffffff;
  --chrome-2:#dde6f1;
  --chrome-3:#9fadc2;
  --chrome-4:#6c7c95;

  --maxw:1240px;
  --gut:clamp(20px,4vw,56px);

  --ff-disp:"Saira Condensed",Oswald,"Arial Narrow",sans-serif;
  --ff-body:"Barlow",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --r-sm:8px;
  --r-md:14px;
  --r-lg:20px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
*{min-width:0}
html{scroll-behavior:smooth;overflow-x:hidden}
html,body{margin:0}
body{
  font-family:var(--ff-body);
  background:var(--navy-950);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
  width:100%;
}
img,svg,video,table{max-width:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--red);color:#fff}

/* page atmosphere */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 600px at 82% -8%,rgba(42,147,255,.16),transparent 60%),
    radial-gradient(760px 520px at 6% 4%,rgba(42,147,255,.10),transparent 55%);
}
main,header,footer{position:relative;z-index:1}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(64px,8vw,116px)}
.section--tight{padding-block:clamp(48px,5vw,72px)}

/* ---------- Type ---------- */
.kicker{
  font-family:var(--ff-disp);
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-size:.82rem;
  color:var(--blue-bright);
  display:inline-flex;align-items:center;gap:.6em;
}
.kicker::before{
  content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--red),transparent);
}
.kicker--center{justify-content:center}
.kicker--center::before{display:none}

h1,h2,h3{font-family:var(--ff-disp);font-weight:700;line-height:.98;margin:0;letter-spacing:.005em}
.h-xl{font-size:clamp(2.7rem,6.4vw,5.6rem);text-transform:uppercase}
.h-lg{font-size:clamp(2.1rem,4.4vw,3.6rem);text-transform:uppercase}
.h-md{font-size:clamp(1.5rem,2.6vw,2.15rem);text-transform:uppercase}
.h-sm{font-size:clamp(1.15rem,1.7vw,1.4rem);text-transform:uppercase;letter-spacing:.02em}

.lede{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--muted);max-width:62ch}
.body{color:var(--muted)}
.sec-head{max-width:760px}
.sec-head.center{margin-inline:auto;text-align:center}

/* chrome metallic text */
.chrome{
  background:linear-gradient(176deg,#ffffff 4%,#eef3fb 20%,#aab9ce 44%,#ffffff 54%,#7b8aa3 76%,#d2dcec 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.35)) drop-shadow(0 1px 14px rgba(120,160,220,.18));
}
.blue-em{color:var(--blue-bright)}
.red-em{color:var(--red-bright)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--blue);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--ff-disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:1rem;line-height:1;
  padding:1.05em 1.6em;border:none;border-radius:var(--r-sm);
  color:#fff;position:relative;isolation:isolate;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .2s;
  white-space:nowrap;
}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn--red{background:linear-gradient(180deg,var(--red-bright),var(--red));box-shadow:0 10px 26px -10px rgba(224,31,43,.8),inset 0 1px 0 rgba(255,255,255,.28)}
.btn--blue{background:linear-gradient(180deg,var(--blue-bright),var(--blue-deep));box-shadow:0 10px 26px -10px rgba(42,147,255,.75),inset 0 1px 0 rgba(255,255,255,.28)}
.btn--ghost{background:rgba(255,255,255,.04);border:1px solid var(--hair-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.btn--lg{font-size:1.12rem;padding:1.2em 1.9em}
.btn:hover{transform:translateY(-2px)}
.btn--red:hover{box-shadow:0 16px 34px -10px rgba(224,31,43,.9),inset 0 1px 0 rgba(255,255,255,.3)}
.btn--blue:hover{box-shadow:0 16px 34px -10px rgba(42,147,255,.85),inset 0 1px 0 rgba(255,255,255,.3)}
.btn--ghost:hover{background:rgba(255,255,255,.09);border-color:var(--blue)}
.btn:active{transform:translateY(0)}

.txtlink{
  font-family:var(--ff-disp);font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  font-size:.92rem;color:var(--blue-bright);display:inline-flex;align-items:center;gap:.45em;
  transition:gap .2s var(--ease),color .2s;
}
.txtlink svg{width:.9em;height:.9em;transition:transform .2s var(--ease)}
.txtlink:hover{color:#fff;gap:.7em}
.txtlink:hover svg{transform:translateX(3px)}

/* ---------- Placeholder system ---------- */
.ph{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  background:
    repeating-linear-gradient(135deg,rgba(140,168,214,.07) 0 12px,rgba(140,168,214,.02) 12px 24px),
    linear-gradient(160deg,var(--navy-700),var(--navy-850));
  border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted-2);
  isolation:isolate;
}
.ph::after{
  content:attr(data-label);
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.5em .8em;border:1px dashed var(--hair-strong);border-radius:6px;
  background:rgba(5,10,24,.4);max-width:80%;text-align:center;
}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;z-index:1}

/* chrome divider line */
.hr-chrome{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--hair-strong) 18%,var(--hair-strong) 82%,transparent)}

/* card base */
.card{
  background:linear-gradient(165deg,rgba(25,48,89,.5),rgba(10,21,48,.62));
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  position:relative;
  transition:transform .28s var(--ease),border-color .28s,box-shadow .28s;
}
.card:hover{transform:translateY(-5px);border-color:var(--hair-strong);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.9)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}
.rv[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}