/* CardForge landing — modern typography + asymmetric layout */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap");

:root{
  --cf-bg: #160d2a;
  --cf-bg-deep: #100820;
  --cf-bg-pinch: #0a0418;
  --cf-border: rgba(255,255,255,0.08);
  --cf-border-strong: rgba(255,255,255,0.14);
  --cf-purple: #8b7df0;
  --cf-purple-muted: #6a5fc1;
  --cf-purple-deep: #422082;
  --cf-lime: #c2ef4e;
  --cf-coral: #ffb287;
  --cf-pink: #fa7faa;
  --cf-fg-1: #ffffff;
  --cf-fg-2: #e8e6f0;
  --cf-fg-3: #a8a3bc;
  --cf-fg-muted: #6e6985;

  --cf-display: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --cf-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --cf-ui: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cf-bg);
  color:var(--cf-fg-1);
  font-family:var(--cf-ui);
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(106,95,193,0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 30%, rgba(194,239,78,0.04), transparent 70%);
  background-attachment:fixed;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
em{font-style:italic}

/* ----------- LAYOUT ----------- */
.container{max-width:1200px;margin:0 auto;padding:0 48px}
section{padding:clamp(80px, 10vw, 140px) 0}
@media (max-width:768px){
  .container{padding:0 22px}
}

/* ----------- TOPBAR ----------- */
.topbar{
  position:sticky;top:0;z-index:50;
  height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;
  background:rgba(22,13,42,0.65);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--cf-border);
}
.logo{display:flex;align-items:baseline;gap:0;font-family:var(--cf-display);font-size:22px;font-weight:700;letter-spacing:-0.04em;line-height:1}
.logo .c{color:var(--cf-fg-1)}
.logo .f{color:var(--cf-lime);font-style:italic;font-family:var(--cf-serif);font-weight:400;font-size:26px;margin-left:-2px}
@media (max-width:768px){.topbar{padding:0 22px}}

/* ----------- BUTTONS ----------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;
  background:var(--cf-fg-1);
  color:#160d2a;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--cf-ui);
  font-weight:500;font-size:15px;
  letter-spacing:-0.01em;
  transition:background 220ms cubic-bezier(.4,0,.2,1), color 220ms cubic-bezier(.4,0,.2,1), transform 220ms cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
}
.btn:hover{background:var(--cf-lime);color:#160d2a;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:16px 28px;font-size:16px}
.btn--ghost{background:transparent;color:var(--cf-fg-1);border-color:var(--cf-border-strong)}
.btn--ghost:hover{background:rgba(255,255,255,0.06);color:var(--cf-fg-1)}
.btn .arr{transition:transform 220ms cubic-bezier(.4,0,.2,1);font-size:1.05em;line-height:1}
.btn:hover .arr{transform:translateX(3px)}

/* ----------- TYPE ----------- */
.h1{
  font-family:var(--cf-display);
  font-size:clamp(48px, 8.6vw, 124px);
  font-weight:700;
  line-height:0.98;letter-spacing:-0.045em;
  margin:0;
}
.h1 em, .h2 em{font-family:var(--cf-serif);font-style:italic;font-weight:400;letter-spacing:-0.015em;color:var(--cf-fg-2)}
.h2{
  font-family:var(--cf-display);
  font-size:clamp(36px, 5.2vw, 76px);
  font-weight:700;
  line-height:1.0;letter-spacing:-0.04em;
  margin:0;
}
.h3{
  font-family:var(--cf-ui);
  font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-0.02em;
  margin:0;
}
.lede{font-family:var(--cf-ui);font-size:19px;line-height:1.5;color:var(--cf-fg-3);max-width:38ch;margin:0;font-weight:400;letter-spacing:-0.01em}
.body{font-size:17px;line-height:1.55;color:var(--cf-fg-3);margin:0;letter-spacing:-0.01em}
.body-mute{font-size:14px;line-height:1.55;color:var(--cf-fg-muted);margin:0}
.caption{font-size:14px;font-weight:500;color:var(--cf-fg-3);letter-spacing:-0.005em}
.micro{font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--cf-fg-muted)}

/* ----------- HERO (cinema) ----------- */
.hero-cinema{
  padding-top:clamp(80px, 12vw, 160px);
  padding-bottom:clamp(80px, 10vw, 140px);
  position:relative;overflow:hidden;
  text-align:center;
  min-height:90vh;
  display:flex;align-items:center;justify-content:center;
}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:0.32;filter:saturate(1.05) contrast(1.05)}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(16,8,32,0.55) 60%, var(--cf-bg) 100%),
    linear-gradient(180deg, rgba(16,8,32,0.45) 0%, rgba(16,8,32,0.25) 50%, rgba(16,8,32,0.7) 100%);
}
.hero-cinema .container{position:relative;z-index:1}
.hero-cinema .h1{margin:0 auto 40px;max-width:16ch;font-size:clamp(48px, 8.6vw, 124px);text-shadow:0 4px 40px rgba(0,0,0,0.6)}
.hero-cinema .btn{margin-bottom:18px}
.hero-cap{margin:0 0 clamp(48px, 7vw, 88px);font-size:14px;color:var(--cf-fg-3);letter-spacing:-0.005em}
.hero-cap--accent{
  font-family:var(--cf-serif);
  font-style:italic;
  font-size:clamp(20px, 1.8vw, 26px);
  color:var(--cf-lime);
  letter-spacing:-0.015em;
  text-shadow:0 0 24px rgba(194,239,78,0.35);
}

.hero-banners{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px, 1.6vw, 24px);
  max-width:760px;margin:0 auto;
}
.hero-banners img{
  width:100%;aspect-ratio:9/16;object-fit:cover;
  border-radius:18px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6), 0 0 40px rgba(106,95,193,0.15);
  transition:transform 320ms cubic-bezier(.4,0,.2,1);
  display:block;
}
.hero-banners img:hover{transform:translateY(-4px)}

@media (max-width:680px){
  .hero-banners{gap:10px;max-width:100%}
  .hero-banners img{border-radius:14px}
}

/* ----------- PROBLEM ----------- */
.problem{text-align:center}
.problem-quote{
  font-family:var(--cf-serif);
  font-size:clamp(28px, 4.4vw, 56px);
  font-style:italic;
  line-height:1.15;letter-spacing:-0.025em;
  max-width:20ch;margin:0 auto 32px;color:var(--cf-fg-1);
  font-weight:400;
}
.problem-sub{font-size:clamp(15px, 1.3vw, 18px);line-height:1.55;color:var(--cf-fg-3);max-width:54ch;margin:0 auto 56px;letter-spacing:-0.01em}
.problem-icons{display:flex;justify-content:center;gap:56px;opacity:0.6}
.problem-icons .ic{width:24px;height:24px;color:var(--cf-fg-3)}
@media (max-width:600px){
  .problem-icons{gap:36px}
}

/* ----------- HOW ----------- */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:72px}
.step{position:relative;padding:0;display:flex;flex-direction:column;gap:0}
.step-num{
  font-family:var(--cf-serif);
  font-style:italic;
  font-size:18px;line-height:1;color:var(--cf-lime);
  margin-bottom:20px;letter-spacing:-0.01em;
  font-weight:400;
}
.step-num::before{content:"";display:inline-block;width:24px;height:1px;background:var(--cf-lime);vertical-align:5px;margin-right:10px;opacity:0.5}
.step-screen{
  width:100%;aspect-ratio:9/12;
  border-radius:18px;
  border:1px solid var(--cf-border);
  background:linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  margin-bottom:28px;overflow:hidden;position:relative;
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.5);
}
.step-title{font-family:var(--cf-display);font-size:24px;font-weight:600;line-height:1.15;margin:0 0 10px;letter-spacing:-0.025em}
.step-cap{font-size:15px;color:var(--cf-fg-3);line-height:1.5;margin:0;letter-spacing:-0.005em}
@media (max-width:780px){
  .how-grid{grid-template-columns:1fr;gap:56px}
}

/* step screen mocks — clean, no fake browser dots */
.ss{position:absolute;inset:0;padding:22px;display:flex;flex-direction:column;font-family:var(--cf-ui);gap:12px}
.ss-toolbar{display:none}
.ss-input{
  background:rgba(0,0,0,0.25);
  border:1px solid var(--cf-border);
  border-radius:10px;
  padding:12px 14px;
  font-size:11.5px;color:var(--cf-fg-2);line-height:1.55;
  font-family:var(--cf-ui);
  flex:1;
  position:relative;letter-spacing:-0.005em;
}
.ss-input .cursor{display:inline-block;width:1.5px;height:11px;background:var(--cf-lime);vertical-align:-2px;animation:blink 1s steps(1) infinite;margin-left:1px}
@keyframes blink{50%{opacity:0}}
.ss-chips{display:flex;flex-wrap:wrap;gap:5px}
.ss-chip{font-size:10px;padding:3px 8px;border-radius:999px;background:rgba(194,239,78,0.10);color:var(--cf-lime);border:1px solid rgba(194,239,78,0.18);font-weight:500;letter-spacing:-0.005em}

.ss-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;flex:1}
.ss-thumb{border-radius:8px;border:1px solid var(--cf-border);min-height:0;overflow:hidden;position:relative}
.ss-thumb.sel{border-color:var(--cf-lime);box-shadow:0 0 0 1px var(--cf-lime), 0 0 24px rgba(194,239,78,0.2)}
.ss-swatches{display:flex;gap:8px;justify-content:center}
.ss-swatches i{width:16px;height:16px;border-radius:50%;outline-offset:2px}

.ss-preview{flex:1;border-radius:10px;border:1px solid var(--cf-border);min-height:0;position:relative;overflow:hidden}
.ss-dl{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:999px;background:var(--cf-fg-1);color:#160d2a;font-size:12px;font-weight:500;letter-spacing:-0.005em}
.ss-progress{height:2px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden}
.ss-progress i{display:block;height:100%;width:72%;background:var(--cf-lime);border-radius:2px}

/* ----------- TEMPLATES ----------- */
.tpl-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:64px;gap:48px}
.tpl-head .h2{max-width:14ch}
.tpl-head .body{max-width:32ch;text-align:left;flex:0 0 auto}
.tpl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){
  .tpl-grid{grid-template-columns:repeat(2,1fr)}
  .tpl-head{flex-direction:column;align-items:flex-start;gap:24px}
  .tpl-head .body{text-align:left}
}
.tpl-card{
  position:relative;border-radius:16px;overflow:hidden;
  cursor:pointer;
  transition:transform 320ms cubic-bezier(.4,0,.2,1);
  border:1px solid var(--cf-border);
  background:rgba(255,255,255,0.02);
  display:flex;flex-direction:column;
}
.tpl-card:hover{transform:translateY(-4px)}
.tpl-card .thumb{aspect-ratio:9/16;position:relative;overflow:hidden;background:#0a0418}
.tpl-card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tpl-card .meta{padding:18px 20px 20px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tpl-card .meta h4{margin:0;font-size:15px;font-weight:500;letter-spacing:-0.02em;color:var(--cf-fg-1)}
.tpl-card .meta p{margin:0;font-size:13px;color:var(--cf-fg-muted);line-height:1.4;letter-spacing:-0.005em;text-align:right}
.tpl-card .ovl{
  position:absolute;inset:0;background:rgba(15,10,26,0.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 240ms cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.tpl-card:hover .ovl{opacity:1}
.tpl-card .ovl span{font-size:13px;font-weight:500;letter-spacing:-0.01em;color:#160d2a;padding:10px 18px;background:var(--cf-fg-1);border-radius:999px}

.tpl-after{margin-top:80px;text-align:center}
.tpl-after h3{font-family:var(--cf-display);font-size:clamp(24px, 2.4vw, 36px);line-height:1.1;letter-spacing:-0.035em;margin:0 0 10px;font-weight:600}
.tpl-after p{margin:0;color:var(--cf-fg-3);font-size:17px;letter-spacing:-0.01em}

/* ----------- WHY ----------- */
.why{}
.why .h2{max-width:18ch}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:64px;background:var(--cf-border);border:1px solid var(--cf-border);border-radius:20px;overflow:hidden}
@media (max-width:780px){.why-grid{grid-template-columns:1fr}}
.why-card{
  background:var(--cf-bg);
  padding:40px;
  transition:background 240ms cubic-bezier(.4,0,.2,1);
}
.why-card:hover{background:rgba(255,255,255,0.02)}
.why-card .ic{width:22px;height:22px;color:var(--cf-lime);margin-bottom:28px;stroke-width:1.25}
.why-card h3{font-family:var(--cf-display);font-size:22px;font-weight:600;margin:0 0 10px;letter-spacing:-0.025em;color:var(--cf-fg-1)}
.why-card p{margin:0;font-size:15px;line-height:1.55;color:var(--cf-fg-3);letter-spacing:-0.005em;max-width:42ch}

/* ----------- USE CASES ----------- */
.usecases .h2{max-width:14ch}
.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:64px}
@media (max-width:780px){.uc-grid{grid-template-columns:1fr}}
.uc-card{
  background:transparent;
  border:1px solid var(--cf-border);
  border-radius:18px;
  padding:36px 32px 40px;
  position:relative;
  overflow:hidden;
  transition:border-color 240ms cubic-bezier(.4,0,.2,1), background 240ms cubic-bezier(.4,0,.2,1);
}
.uc-card:hover{border-color:var(--cf-border-strong);background:rgba(255,255,255,0.02)}
.uc-card::before{display:none}
.uc-card h3{font-family:var(--cf-display);font-size:21px;font-weight:600;margin:0 0 16px;letter-spacing:-0.025em;display:flex;align-items:center;gap:10px}
.uc-card h3::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cf-lime);flex:0 0 auto}
.uc-card p{margin:0;font-size:15px;line-height:1.55;color:var(--cf-fg-3);letter-spacing:-0.005em}

/* ----------- DEMO ----------- */
.demo{background:var(--cf-bg-deep);}
.demo-frame{
  max-width:1080px;margin:0 auto;
  aspect-ratio:16/10;
  background:#0a0418;
  border-radius:24px;
  border:1px solid var(--cf-border);
  overflow:hidden;
  position:relative;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.6);
}
.demo-cap{text-align:center;font-family:var(--cf-serif);font-style:italic;font-size:clamp(24px,2.6vw,36px);font-weight:400;margin:40px 0 0;letter-spacing:-0.02em;color:var(--cf-fg-2)}

/* demo scene */
.demo-scene{position:absolute;inset:0;display:flex;background:#100820}
.demo-pane{flex:1;padding:32px;display:flex;flex-direction:column;gap:18px;border-right:1px solid var(--cf-border)}
.demo-pane.right{border-right:0;align-items:center;justify-content:center;background:#0a0418}
.demo-textarea{
  flex:1;background:rgba(0,0,0,0.3);border:1px solid var(--cf-border);
  border-radius:12px;padding:18px;
  font-family:var(--cf-ui);font-size:14px;line-height:1.55;color:var(--cf-fg-2);
  position:relative;letter-spacing:-0.005em;
}
.demo-cursor-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--cf-lime);box-shadow:0 0 24px rgba(194,239,78,0.7);pointer-events:none;z-index:10;left:240px;top:120px;transition:all 800ms cubic-bezier(.4,0,.2,1)}
.demo-mini-banner{
  width:200px;aspect-ratio:9/16;border-radius:14px;
  background:linear-gradient(135deg,#422082,#6a5fc1);
  position:relative;overflow:hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}
.demo-mini-banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 50%, rgba(0,0,0,0.4));
}
.demo-tpl-row{display:flex;gap:8px}
.demo-tpl{width:38px;aspect-ratio:9/16;border-radius:6px;background:rgba(255,255,255,0.06);border:1px solid var(--cf-border)}
.demo-tpl.sel{border-color:var(--cf-lime);background:rgba(194,239,78,0.05)}
.demo-swatch-row{display:flex;gap:10px}
.demo-swatch-row i{width:22px;height:22px;border-radius:50%;border:2px solid transparent;transition:border-color 220ms cubic-bezier(.4,0,.2,1)}
.demo-swatch-row i.sel{border-color:var(--cf-lime)}
.demo-label{font-size:11px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--cf-fg-muted)}

/* ----------- PRICING ----------- */
.pricing{text-align:center}
.pricing .h2{margin:0 auto 18px;max-width:14ch}
.price-card{
  position:relative;
  width:460px;max-width:100%;
  margin:64px auto 0;
  padding:48px 40px 36px;
  background:rgba(255,255,255,0.025);
  border:1px solid var(--cf-border);
  border-radius:24px;
  text-align:left;
}
.price-badge{
  position:absolute;top:24px;right:24px;
  background:transparent;color:var(--cf-lime);
  padding:5px 10px;border-radius:999px;
  font-size:11px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;
  border:1px solid rgba(194,239,78,0.35);
}
.price-h{font-family:var(--cf-display);font-size:clamp(48px, 5.6vw, 72px);line-height:0.95;font-weight:700;letter-spacing:-0.045em;margin:0 0 36px;text-align:left}
.price-list{list-style:none;padding:0;margin:0 0 36px}
.price-list li{font-size:16px;line-height:2;color:var(--cf-fg-2);padding-left:24px;position:relative;letter-spacing:-0.01em}
.price-list li::before{
  content:"";position:absolute;left:0;top:13px;width:12px;height:1px;background:var(--cf-lime);
}
.price-card .btn{width:100%}
.price-hint{font-size:13px;color:var(--cf-fg-muted);line-height:1.5;margin:20px 0 0;text-align:center;letter-spacing:-0.005em}

/* ----------- MANIFESTO ----------- */
.manifesto-inner{max-width:640px;margin:0 auto}
.manifesto p{font-size:clamp(18px, 1.5vw, 22px);line-height:1.55;color:var(--cf-fg-2);margin:0 0 1.2em;font-weight:400;letter-spacing:-0.015em}
.manifesto .sig{font-family:var(--cf-serif);font-style:italic;color:var(--cf-fg-2);margin-top:36px;font-size:22px}
.manifesto-foot{display:flex;align-items:center;gap:16px;margin-top:48px;padding-top:32px;border-top:1px solid var(--cf-border)}
.manifesto-foot .av{
  width:48px;height:48px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,#5b4a87,#2e1a52);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--cf-display);font-size:18px;font-weight:600;color:rgba(255,255,255,0.7);
  letter-spacing:-0.02em;
}
.manifesto-foot .info{font-size:14px;color:var(--cf-fg-muted);line-height:1.5;letter-spacing:-0.005em}
.manifesto-foot .info b{display:block;color:var(--cf-fg-1);font-weight:500;font-size:15px;letter-spacing:-0.01em}

/* ----------- FINAL CTA ----------- */
.final{
  background:var(--cf-bg-deep);
  min-height:90vh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  position:relative;overflow:hidden;
}
.final-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.final-bg img{width:100%;height:100%;object-fit:cover;opacity:0.32;filter:saturate(1.1) contrast(1.05)}
.final-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(16,8,32,0.55) 60%, var(--cf-bg-deep) 100%),
    linear-gradient(180deg, rgba(16,8,32,0.4) 0%, rgba(16,8,32,0.2) 50%, rgba(16,8,32,0.6) 100%);
}
.final .container{position:relative;z-index:1}
.final .h2{margin:0 auto 40px;max-width:14ch;font-size:clamp(48px, 8vw, 112px);text-shadow:0 4px 40px rgba(0,0,0,0.6)}
.final-cap{margin-top:28px;font-size:14px;font-weight:400;letter-spacing:-0.005em;color:var(--cf-fg-3);text-transform:none}

/* ----------- FOOTER ----------- */
footer{padding:32px 0;text-align:center;font-size:13px;color:var(--cf-fg-muted);border-top:1px solid var(--cf-border);background:var(--cf-bg-deep);letter-spacing:-0.005em}
footer a{color:var(--cf-fg-3)}
footer a:hover{color:var(--cf-fg-1)}

/* ----------- BANNER STYLES (8 templates) -----------
   Modeled on the real CardForge product: title block,
   floorplan card, stats panel, footer pill. */
.bn{
  position:relative;width:100%;height:100%;overflow:hidden;
  font-family:var(--cf-ui);
  isolation:isolate;
  padding:18px 18px 16px;
  display:flex;flex-direction:column;gap:12px;
  --bn-fg:#fff;
  --bn-accent:#ed5750;
  --bn-stats-bg:#fefcf3;
  --bn-stats-fg:#1a1a1a;
}
.bn .bn-title{font-family:var(--cf-display);font-size:18px;line-height:1.1;font-weight:600;letter-spacing:-0.025em;color:var(--bn-fg)}
.bn .bn-sub{font-size:10px;font-weight:500;color:var(--bn-fg);opacity:0.8;margin-top:3px;letter-spacing:-0.005em}
.bn .bn-image{
  position:relative;flex:1;min-height:0;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.bn .bn-floorplan{
  width:62%;height:88%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.18) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 12px),
    #d8c8a8;
  border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25);
  position:relative;
}
.bn .bn-floorplan::before{
  content:"";position:absolute;left:18%;top:14%;width:28%;height:36%;
  background:#a78b62;border:1px solid rgba(0,0,0,0.3);border-radius:2px;
  box-shadow:inset 0 0 0 6px #d8c8a8, inset 0 0 0 7px rgba(0,0,0,0.25);
}
.bn .bn-floorplan::after{
  content:"";position:absolute;right:16%;bottom:14%;width:34%;height:30%;
  background:#a78b62;border:1px solid rgba(0,0,0,0.3);border-radius:2px;
  box-shadow:inset 0 0 0 6px #d8c8a8, inset 0 0 0 7px rgba(0,0,0,0.25);
}
.bn .bn-discount{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--bn-accent);color:#fff;
  padding:5px 10px;border-radius:5px;
  font-size:10px;font-weight:700;letter-spacing:0.1px;
  white-space:nowrap;
  box-shadow:0 6px 14px rgba(0,0,0,0.25);
  z-index:2;
}
.bn .bn-stats{
  background:var(--bn-stats-bg);
  color:var(--bn-stats-fg);
  border-radius:8px;
  padding:10px 12px 11px;
  display:flex;flex-direction:column;gap:6px;
}
.bn .bn-stats-lbl{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;color:var(--bn-accent)}
.bn .bn-stats-price{font-family:var(--cf-display);font-size:22px;line-height:1;font-weight:700;letter-spacing:-0.035em;color:var(--bn-accent)}
.bn .bn-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-top:1px solid rgba(0,0,0,0.10);padding-top:7px;margin-top:1px}
.bn .bn-stats-row > div{display:flex;flex-direction:column;gap:1px}
.bn .bn-stats-k{font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:0.25px;color:rgba(0,0,0,0.5)}
.bn .bn-stats-v{font-size:10px;font-weight:700;color:var(--bn-stats-fg)}
.bn .bn-cta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.bn .bn-cta-cap{font-size:9px;color:var(--bn-fg);opacity:0.85}
.bn .bn-cta-pill{background:#fff;color:#1a1a1a;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:6px 12px;border-radius:14px;white-space:nowrap}

/* Color schemes — solid bg + accent */
.bn-1{background:linear-gradient(180deg,#7d6ee0 0%, #5448b8 100%);--bn-accent:#5448b8}
.bn-2{background:linear-gradient(180deg,#33b8d8 0%, #1a8aa8 100%);--bn-accent:#1a8aa8}
.bn-3{background:linear-gradient(180deg,#ff5a4a 0%, #ff9b3a 100%);--bn-accent:#e0432d}
.bn-4{background:linear-gradient(180deg,#5a8a3a 0%, #3d6a26 100%);--bn-accent:#3d6a26}
.bn-5{background:linear-gradient(180deg,#0e0a14 0%, #1a1422 100%);--bn-accent:#d4af66;--bn-stats-bg:#1f1830;--bn-stats-fg:#f5e6c2}
.bn-5 .bn-stats-k{color:rgba(245,230,194,0.55)}
.bn-5 .bn-stats-row{border-top-color:rgba(212,175,102,0.25)}
.bn-5 .bn-cta-pill{background:#d4af66;color:#0e0a14}
.bn-6{background:#0a2540;background-image:linear-gradient(rgba(122,211,255,0.12) 1px, transparent 1px),linear-gradient(90deg, rgba(122,211,255,0.12) 1px, transparent 1px);background-size:18px 18px;--bn-accent:#7ad3ff;--bn-stats-bg:#0f3050;--bn-stats-fg:#e5f3ff}
.bn-6 .bn-stats-k{color:rgba(122,211,255,0.6)}
.bn-6 .bn-stats-row{border-top-color:rgba(122,211,255,0.25)}
.bn-6 .bn-cta-pill{background:#7ad3ff;color:#0a2540}
.bn-7{background:linear-gradient(160deg,#f7e4ec 0%, #e2dcf2 100%);--bn-accent:#6a5fc1;--bn-fg:#3d2952}
.bn-7 .bn-cta-cap{color:rgba(61,41,82,0.7)}
.bn-8{background:linear-gradient(180deg,#1a1a1a 0%, #2a2a2a 100%);--bn-accent:#c2ef4e;--bn-stats-bg:#fafafa;--bn-stats-fg:#1a1a1a}
.bn-8 .bn-cta-pill{background:#c2ef4e;color:#1a1a1a}

/* Hero banner — calm cyan, real-estate "Комфорт Сити" template */
.bn-hero{
  background:linear-gradient(180deg,#3ec3df 0%, #1ea2c4 100%);
  --bn-accent:#1499c0;
  --bn-stats-bg:#ffffff;
  --bn-stats-fg:#1a1a1a;
  padding:22px 22px 20px;
  gap:14px;
}
.bn-hero .bn-title{font-size:24px;font-weight:700;letter-spacing:-0.025em;line-height:1.05}
.bn-hero .bn-sub{font-size:11px;font-weight:500;opacity:0.92;margin-top:6px}
.bn-hero .bn-image{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.20);
  border-radius:12px;
  padding:14px;
}
.bn-hero .bn-floorplan{
  width:100%;height:100%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(240,250,253,0.88) 100%),
    repeating-linear-gradient(0deg, rgba(20,153,192,0.08) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(20,153,192,0.08) 0 1px, transparent 1px 10px);
  border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(20,153,192,0.18);
}
.bn-hero .bn-floorplan::before{
  content:"";position:absolute;left:24%;top:18%;width:24%;height:38%;
  background:#cbb893;border:1px solid rgba(0,0,0,0.18);border-radius:3px;
  box-shadow:inset 0 0 0 5px #efe2c5, inset 0 0 0 6px rgba(0,0,0,0.18);
}
.bn-hero .bn-floorplan::after{
  content:"";position:absolute;right:22%;bottom:16%;width:30%;height:32%;
  background:#cbb893;border:1px solid rgba(0,0,0,0.18);border-radius:3px;
  box-shadow:inset 0 0 0 5px #efe2c5, inset 0 0 0 6px rgba(0,0,0,0.18);
}
.bn-hero .bn-stats{
  border-radius:12px;padding:12px 14px 13px;
  box-shadow:0 1px 0 rgba(255,255,255,0.18) inset;
}
.bn-hero .bn-stats-lbl{font-size:9px;letter-spacing:0.04em;color:var(--bn-accent)}
.bn-hero .bn-stats-price{font-size:26px;font-weight:700;letter-spacing:-0.04em}
.bn-hero .bn-stats-k{font-size:8px;letter-spacing:0.02em;color:rgba(0,0,0,0.45);font-weight:600}
.bn-hero .bn-stats-v{font-size:11px;font-weight:700}
.bn-hero .bn-cta-cap{font-size:10px;color:#fff;opacity:0.95;letter-spacing:-0.005em}
.bn-hero .bn-cta-pill{
  background:#67dde9;color:#ffffff;
  font-size:9px;font-weight:700;letter-spacing:0.04em;
  padding:7px 14px;border-radius:999px;
  box-shadow:0 4px 10px rgba(20,153,192,0.25);
}