:root{
  --navy:#0b1330;
  --navy-2:#111b45;
  --red:#d7263d;
  --red-soft:#ee596b;
  --gold:#ffcf57;
  --ink:#f6f8ff;
  --muted:#c9d4ff;
  --panel:#0e183d;
  --line:#1f2d66;
  --shadow:0 14px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 900px at 10% -10%, #192a6b 0%, var(--navy) 55%),
    radial-gradient(900px 600px at 90% -20%, #0f1c49 0%, transparent 60%),
    var(--navy);
  font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* Top ribbon */
.top-ribbon{
  display:flex; gap:16px; justify-content:center; align-items:center;
  padding:8px 12px; font-weight:800; letter-spacing:.4px;
  background:linear-gradient(180deg,#081028,#0b1533);
  border-bottom:1px solid #0f1c49; color:#b8c4ff;
}

/* Masthead */
.mast{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 18px; max-width:1180px; margin:0 auto;
  border-bottom:2px solid var(--line);
}
.brand{display:flex; align-items:center; gap:14px; color:inherit; text-decoration:none}
.seal{
  width:56px; height:56px; border-radius:50%;
  border:2px solid var(--gold);
  box-shadow:0 0 18px rgba(255,207,87,.35); object-fit:cover;
}
.lockup .title{
  font-family:Cinzel, serif; font-weight:900; letter-spacing:1.2px; font-size:22px;
}
.lockup .subtitle{
  font-weight:800; color:#b8c4ff; letter-spacing:.4px; margin-top:2px;
}
.nav{display:flex; gap:16px; align-items:center}
.nav a{color:#eaf0ff; text-decoration:none; font-weight:800}
.btn{
  display:inline-block; padding:10px 14px; border-radius:12px; font-weight:900; text-decoration:none
}
.buy{
  background:linear-gradient(180deg,var(--gold),#ffb72b); color:#241300;
  border:2px solid #ffb72b; box-shadow:0 10px 24px rgba(255,183,43,.35), inset 0 -2px 0 rgba(0,0,0,.2);
}

/* Hero */
.hero{
  position:relative; max-width:1180px; margin:10px auto 0; padding:22px 18px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center;
}
.hero h1{
  font-family:Cinzel, serif; font-weight:900; text-transform:uppercase;
  font-size: clamp(34px, 5.6vw, 78px); line-height:.98; margin:0 0 10px;
}
.gold{color:var(--gold); text-shadow:0 0 14px rgba(255,207,87,.35)}
.lead{color:var(--muted); max-width:58ch}
.cta{display:flex; gap:12px; margin:14px 0}
.btn.ghost{border:2px dashed rgba(255,255,255,.3); color:#eaf0ff}

.visits{
  display:inline-flex; gap:8px; align-items:center; margin-top:10px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  padding:8px 12px; border-radius:999px; font-weight:800; color:#f2f6ff
}

/* Hero art */
.hero-art{
  position:relative; min-height:320px; border-radius:22px; overflow:hidden;
  background:var(--panel); border:2px solid var(--line); box-shadow:var(--shadow)
}
.hero-art::before{
  content:""; position:absolute; inset:0;
  background-image: var(--hero);
  background-position:center; background-size:cover; background-repeat:no-repeat; opacity:1;
}
.eagle{
  position:absolute; bottom:12px; left:12px; font-size:40px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
}
.stars{
  position:absolute; top:10px; right:14px; display:flex; gap:6px; opacity:.9
}
.stars i{color:var(--gold); text-shadow:0 0 10px rgba(255,207,87,.5); font-style:normal}
.stars i:nth-child(odd){filter:hue-rotate(-12deg)}

/* Background flag */
.flag{
  position:absolute; inset:0; pointer-events:none; z-index:-1; overflow:hidden; opacity:.25;
  mask-image:linear-gradient(180deg,transparent 0%, black 20%, black 70%, transparent 100%);
}
.canton{
  position:absolute; left:4%; top:10%; width:180px; height:120px;
  background:linear-gradient(180deg,#18306f,#142658); display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; padding:8px; border-radius:6px
}
.canton span{color:#fff; opacity:.9}
.stripes{
  --stripe-h:40px;
  position:absolute; left:0; right:0; top:0; bottom:0;
  background:
    repeating-linear-gradient(
      180deg,
      #b3202a 0, #b3202a var(--stripe-h),
      #ffffff var(--stripe-h), #ffffff calc(var(--stripe-h)*2)
    );
  animation:wave 7s ease-in-out infinite;
  transform:skewY(-4deg); transform-origin:left center;
}
@keyframes wave{
  0%{background-position:0 0} 50%{background-position:0 20px} 100%{background-position:0 0}
}

/* Principles */
.principles{
  max-width:1180px; margin:18px auto; padding:0 18px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px
}
.card{
  background:linear-gradient(180deg,#101c45,#0c1636); border:2px solid var(--line);
  border-radius:16px; padding:16px; text-align:center; box-shadow:var(--shadow)
}
.card .icon{font-size:28px}
.card h3{
  margin:8px 0 6px; font-family:Cinzel, serif; letter-spacing:.8px
}
.card p{color:#c8d3ff}

/* Calculator */
.calc{max-width:1180px; margin:24px auto; padding:0 18px}
.section-title{
  font-family:Cinzel, serif; font-weight:900; letter-spacing:1px; margin:0 0 12px; color:var(--gold)
}
.calc-wrap{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.panel{
  background:linear-gradient(180deg,#0f1d48,#0d183a); border:2px solid var(--line);
  border-radius:16px; padding:16px; box-shadow:var(--shadow)
}
label{display:block; margin:8px 0 6px; font-weight:800}
input{
  width:100%; padding:12px 12px; border-radius:12px; border:2px solid #2a4393;
  background:#0b1533; color:#f6f8ff; font-weight:900
}
.note{color:#aebcf5; margin-top:8px}
.result{margin-top:12px; font-weight:900; font-size:20px}
.aside{
  background:linear-gradient(180deg,#0d1f46,#0b1836); border:2px solid var(--line);
  border-radius:16px; padding:16px; box-shadow:var(--shadow); display:grid; align-content:center; gap:10px
}
.ribbon{
  display:inline-block; font-weight:900; letter-spacing:2px; padding:8px 12px; border-radius:10px;
  background:linear-gradient(90deg, var(--red) 0%, var(--red-soft) 32%, var(--gold) 100%);
  color:#2b0a0a; box-shadow:0 10px 24px rgba(215,38,61,.25)
}
.aside-copy{color:#d4ddff}
.slash{text-decoration:line-through; color:#ff7c8c}

/* Footer */
.foot{border-top:2px solid var(--line); margin-top:28px; padding:18px}
.foot .grid{
  max-width:1180px; margin:0 auto; padding:0 18px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px
}
.foot-title{font-family:Cinzel, serif; font-weight:900; margin-bottom:8px}
.foot a{display:block; color:#dbe4ff; text-decoration:none; margin:3px 0; font-weight:700}
.foot small{display:block; text-align:center; color:#b8c4ff; margin-top:14px}

/* CA bubble */
.ca-bubble{
  position:fixed; right:18px; bottom:18px; z-index:9999; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:999px;
  background:linear-gradient(135deg,#ffcf57 0%,#ffb72b 50%,#d7263d 100%);
  color:#2b1200; font-weight:900; letter-spacing:.5px;
  box-shadow:0 12px 30px rgba(255,183,43,.35), 0 0 0 4px rgba(255,207,87,.20);
  animation:cbob 3s ease-in-out infinite, cpulse 1.6s ease-in-out infinite alternate;
}
.ca-bubble .icon{font-size:22px; transform:rotate(-6deg)}
.ca-bubble .text{font-size:18px; white-space:nowrap}
.ca-bubble::after{
  content:""; position:absolute; right:18px; bottom:-8px; width:16px; height:16px;
  transform:rotate(45deg); background:inherit; filter:brightness(.92)
}
.ca-bubble:hover{animation-play-state:paused; transform:translateY(-2px) scale(1.05)}
@keyframes cbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes cpulse{0%{filter:saturate(1) brightness(1)}100%{filter:saturate(1.1) brightness(1.06)}}

/* Responsive */
@media (max-width:980px){
  .nav{display:none}
  .hero{grid-template-columns:1fr}
  .principles{grid-template-columns:1fr}
  .calc-wrap{grid-template-columns:1fr}
  .ca-bubble{left:50%; right:auto; transform:translateX(-50%)}
  .ca-bubble:hover{transform:translateX(-50%) translateY(-2px) scale(1.05)}
}
/* American Spirit */
.spirit{
  max-width:1180px;
  margin:36px auto;
  padding:0 18px 40px;
  position:relative;
  text-align:center;
}
.spirit::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    url('usa-banner.png') center/cover no-repeat;
  opacity:.12;
  z-index:-1;
}
.spirit-wrap{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:20px;
}
.pillar{
  background:linear-gradient(180deg,#141c3d,#0d1533);
  border:2px solid var(--line);
  border-radius:18px;
  padding:24px 16px;
  box-shadow:var(--shadow);
}
.pillar .icon{
  font-size:40px;
  margin-bottom:12px;
  text-shadow:0 0 10px rgba(255,207,87,.4);
}
.pillar h3{
  font-family:Cinzel,serif;
  font-weight:900;
  color:var(--gold);
  margin:0 0 10px;
}
.pillar p{color:#d0d8ff}
.spirit-cta{
  margin-top:30px;
}
.spirit-cta .btn.huge{
  font-size:22px;
  padding:14px 26px;
}
@media(max-width:980px){
  .spirit-wrap{grid-template-columns:1fr}
}