/* Vajgrt Labs — Design Options page (2026-11-01)
   External stylesheet only (site CSP discards inline styles).
   All demo widgets are real, rendered elements — no screenshots. */

/* ---------- shared demo bits ---------- */
.demo-stack{display:grid;gap:22px;max-width:1060px;margin:30px auto 0}
.layout-stack{display:grid;gap:22px;max-width:1060px;margin:30px auto 0}
.demo-frame{border:1px solid rgba(20,32,54,.14);border-radius:14px;background:#fff;padding:18px 18px 20px}
.demo-label{margin:0 0 12px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vl-muted)}
.demo-label-light{color:rgba(255,255,255,.82)}

/* ---------- 1 · palettes ---------- */
.pal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;max-width:1180px;margin:30px auto 0}
.pal-card{border:1px solid rgba(20,32,54,.14);border-radius:14px;background:#fff;padding:18px}
.pal-swatches{display:flex;border-radius:10px;overflow:hidden;border:1px solid rgba(20,32,54,.12);margin-bottom:14px}
.pal-sw{height:54px;flex:1}
.pal-card h3{margin:0 0 6px;font-size:1.08rem}
.pal-hex{margin:0 0 8px;font-size:.82rem;color:var(--vl-muted);line-height:1.55}
.pal-best{margin:0;font-size:.95rem;line-height:1.6;color:var(--vl-body)}
.pal-bg-harvest{background:#FAF3E3}.pal-ink-harvest{background:#3E2F1C}.pal-acc-harvest{background:#C07A1E}.pal-deep-harvest{background:#6B4226}
.pal-bg-river{background:#F4F7FA}.pal-ink-river{background:#16283C}.pal-acc-river{background:#1D5FA8}.pal-deep-river{background:#5B6B7C}
.pal-bg-ember{background:#1C1714}.pal-ink-ember{background:#F3E9DC}.pal-acc-ember{background:#E4572E}.pal-deep-ember{background:#8A7A6A}
.pal-bg-sage{background:#F2F5EC}.pal-ink-sage{background:#2E4023}.pal-acc-sage{background:#5B7553}.pal-deep-sage{background:#A8C686}
.pal-bg-cinema{background:#0E0E1A}.pal-ink-cinema{background:#F5F0E6}.pal-acc-cinema{background:#E3B505}.pal-deep-cinema{background:#8E2A32}
.pal-bg-berry{background:#FFF5F7}.pal-ink-berry{background:#4A1F2E}.pal-acc-berry{background:#D6336C}.pal-deep-berry{background:#7C4DBD}
.pal-bg-copper{background:#17181C}.pal-ink-copper{background:#EDEAE4}.pal-acc-copper{background:#C87F4A}.pal-deep-copper{background:#6E6A61}
.pal-bg-lake{background:#EFF6F6}.pal-ink-lake{background:#123B3C}.pal-acc-lake{background:#0E7C7B}.pal-deep-lake{background:#D9C7A7}
.pal-bg-news{background:#FBFAF7}.pal-ink-news{background:#111111}.pal-acc-news{background:#B91C1C}.pal-deep-news{background:#6B7280}

/* ---------- 2 · typography ---------- */
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px;max-width:1180px;margin:30px auto 0}
.type-card{border:1px solid rgba(20,32,54,.14);border-radius:14px;background:#fff;padding:22px}
.type-tag{margin:0 0 10px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vl-muted)}
.type-h{font-size:30px;line-height:1.15;margin:0 0 10px;color:var(--vl-ink)}
.type-b{margin:0;font-size:15px;line-height:1.65;color:var(--vl-body)}
.type-playfair{font-family:"Playfair Display",Georgia,serif;font-weight:800}
.type-oswald{font-family:Oswald,Inter,sans-serif;font-weight:600;letter-spacing:.01em}
.type-lora{font-family:Lora,Georgia,serif;font-weight:600}
.type-grotesk{font-family:"Space Grotesk",Inter,sans-serif;font-weight:700}
.type-mont{font-family:Montserrat,Inter,sans-serif;font-weight:800;letter-spacing:-.01em}
.type-editorial{font-family:"Playfair Display",Georgia,serif;font-weight:600}
.type-editorial + .type-b{font-family:Lora,Georgia,serif}

/* ---------- 3 · navigation demos ---------- */
.navdemo{display:flex;align-items:center;gap:18px;padding:14px 18px;border:1px solid rgba(20,32,54,.14);border-radius:10px;background:#FBFAF7;flex-wrap:wrap}
.nd-brand{font-weight:800;font-size:1.05rem;color:var(--vl-ink);white-space:nowrap}
.nd-links{display:inline-flex;gap:16px;flex-wrap:wrap}
.nd-links a{color:var(--vl-body);text-decoration:none;font-size:.95rem;font-weight:600}
.nd-links a:hover{color:var(--vl-blue);text-decoration:underline}
.nd-cta{background:var(--vl-blue);color:#fff;padding:8px 16px;border-radius:8px;text-decoration:none;font-weight:700;font-size:.92rem}
.nd-cta:hover{background:var(--vl-blue-dark)}
.nav-classic .nd-links{margin-left:auto}
.nav-centered{justify-content:center}
.nav-centered .nd-brand{font-size:1.2rem}
.nav-split{display:block;padding:0;overflow:hidden}
.nav-split .nd-util{display:flex;justify-content:space-between;gap:12px;padding:7px 18px;background:#16283C;color:#E8EEF4;font-size:.82rem;font-weight:600;flex-wrap:wrap}
.nav-split .nd-main{display:flex;align-items:center;gap:18px;padding:13px 18px;flex-wrap:wrap}
.nav-split .nd-links{margin-left:auto}
.nav-minimal{border:none;border-bottom:1px solid rgba(20,32,54,.16);border-radius:0;background:transparent;padding-left:2px;padding-right:2px}
.nav-minimal .nd-links{margin-left:auto}
.nav-minimal .nd-brand{font-weight:700}
.nav-band{background:#C07A1E;border-color:#C07A1E}
.nav-band .nd-brand{color:#FFF7E8}
.nav-band .nd-links a{color:#FFF3D9}
.nav-band .nd-links a:hover{color:#fff}
.nav-band .nd-links{margin-left:auto}
.nav-band .nd-cta{background:#3E2F1C;color:#FFF7E8}
.nav-band .nd-cta:hover{background:#241A0F}

/* ---------- 4 · buttons ---------- */
.btn-matrix{display:grid;gap:22px;max-width:1060px;margin:30px auto 0}
.btn-row-demo{border:1px solid rgba(20,32,54,.14);border-radius:14px;background:#fff;padding:18px}
.btn-line{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.dbtn{display:inline-block;padding:11px 22px;font-weight:700;font-size:.95rem;text-decoration:none;border:2px solid transparent;transition:background .15s ease,color .15s ease,border-color .15s ease}
.shape-sharp .dbtn{border-radius:2px}
.shape-soft .dbtn{border-radius:10px}
.shape-pill .dbtn{border-radius:999px}
.dbtn-primary{background:#1D5FA8;color:#fff}
.dbtn-primary:hover{background:#17497F}
.dbtn-secondary{background:#E8EEF4;color:#16283C}
.dbtn-secondary:hover{background:#D5DFEA}
.dbtn-outline{background:transparent;color:#1D5FA8;border-color:#1D5FA8}
.dbtn-outline:hover{background:#1D5FA8;color:#fff}
.dbtn-ghost{background:transparent;color:#16283C}
.dbtn-ghost:hover{background:rgba(20,32,54,.07)}

/* ---------- 5 · cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;max-width:1180px;margin:30px auto 0}
.scard{background:#fff;padding:22px}
.scard-tag{margin:0 0 8px;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vl-muted)}
.scard h3{margin:0 0 8px;font-size:1.12rem}
.scard p:last-child{margin:0;font-size:.95rem;line-height:1.6;color:var(--vl-body)}
.scard-sharp-flat{border-radius:0}
.scard-soft-border{border-radius:12px;border:1px solid rgba(20,32,54,.22)}
.scard-round-shadow{border-radius:24px;box-shadow:0 14px 30px rgba(20,32,54,.16)}
.scard-sharp-border{border-radius:0;border:2px solid #16283C}
.scard-soft-shadow{border-radius:12px;box-shadow:0 10px 24px rgba(20,32,54,.13)}
.scard-round-frame{border-radius:24px;border:1px solid rgba(20,32,54,.25);box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 6px rgba(20,32,54,.25)}

/* ---------- 6 · hero minis ---------- */
.hero-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:22px;max-width:1180px;margin:30px auto 0}
.hero-mini{border-radius:14px;overflow:hidden;border:1px solid rgba(20,32,54,.14);padding:26px;min-height:230px;display:flex;flex-direction:column;justify-content:center;position:relative}
.hm-brand{margin:0 0 6px;font-weight:800;letter-spacing:.14em;font-size:.85rem}
.hm-h{font-size:27px;line-height:1.15;font-weight:800;margin:0 0 8px;letter-spacing:-.015em}
.hm-sub{margin:0 0 16px;font-size:15px;line-height:1.6;max-width:420px}
.hm-btn{display:inline-block;align-self:flex-start;padding:10px 20px;border-radius:8px;font-weight:700;font-size:.92rem}
.hero-fullbleed{background:#1C1714;color:#F3E9DC}
.hero-fullbleed .hm-brand{color:#E4572E}
.hero-fullbleed .hm-sub{color:#CBBBA6}
.hero-fullbleed .hm-btn{background:#E4572E;color:#FFF4EA}
.hero-split{background:#fff;display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:stretch;padding:0}
.hm-split-text{padding:26px 0 26px 26px;display:flex;flex-direction:column;justify-content:center}
.hero-split .hm-sub{color:var(--vl-body)}
.hero-split .hm-btn{background:#1D5FA8;color:#fff}
.hm-art{position:relative;overflow:hidden;min-height:150px}
.hm-art-clinic{background:linear-gradient(180deg,#BCD9F5 0%,#E8F2FB 68%,#9DBE8C 68%,#7CA468 100%)}
.hm-art-meadow{background:linear-gradient(180deg,#F6DF9C 0%,#F2E7C8 55%,#A8C686 55%,#5B7553 100%)}
.hm-sun{position:absolute;top:16%;left:14%;width:42px;height:42px;border-radius:50%;background:#F7C948;box-shadow:0 0 0 10px rgba(247,201,72,.25)}
.hm-hill{position:absolute;border-radius:50%;background:rgba(46,64,35,.18)}
.hm-hill-a{width:220px;height:220px;right:-70px;bottom:-150px}
.hm-hill-b{width:160px;height:160px;left:-50px;bottom:-110px;background:rgba(46,64,35,.12)}
.hm-tree{position:absolute;bottom:24%;width:0;height:0}
.hm-tree-a{right:20%;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:40px solid #2E4023}
.hm-tree-b{right:30%;bottom:20%;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:28px solid #2E4023}
.hero-centered{background:#FBFAF7;text-align:center;align-items:center}
.hero-centered .hm-sub{color:var(--vl-body)}
.hm-btn-quiet{background:transparent;border:2px solid #111;color:#111}
.hero-image{padding:0;display:block;min-height:260px}
.hero-image .hm-art{position:absolute;inset:0;min-height:0}
.hm-image-text{position:relative;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:260px;color:#22331B}
.hm-image-text .hm-h{color:#22331B}
.hm-image-text .hm-sub{color:#33482A}
.hm-image-text .hm-btn{background:#2E4023;color:#F2F5EC}

/* ---------- 7 · layout flavors ---------- */
.lay-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lay-card{border:1px solid rgba(20,32,54,.14);border-radius:12px;padding:18px;background:#FBFAF7}
.lay-card h4{margin:0 0 6px;font-size:1rem}
.lay-card p{margin:0;font-size:.93rem;line-height:1.6;color:var(--vl-body)}
.lay-alt{display:grid;gap:20px}
.lay-row{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:center}
.lay-row h4{margin:0 0 6px;font-size:1.05rem}
.lay-row p{margin:0;font-size:.95rem;line-height:1.65;color:var(--vl-body)}
.lay-row-flip{direction:rtl}
.lay-row-flip > *{direction:ltr}
.lay-art{height:110px;border-radius:12px}
.lay-art-a{background:linear-gradient(135deg,#C07A1E 0%,#6B4226 100%)}
.lay-art-b{background:linear-gradient(135deg,#1D5FA8 0%,#16283C 100%)}
.lay-quote{text-align:center;padding:8px 10px 4px}
.lay-quote-big{font-size:24px;line-height:1.4;font-weight:700;color:var(--vl-ink);max-width:640px;margin:0 auto 8px}
.lay-quote-who{margin:0 0 20px;color:var(--vl-muted);font-size:.9rem}
.lay-quote-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.lay-quote-row p{margin:0;border-top:2px solid rgba(20,32,54,.14);padding-top:12px;font-size:.94rem;line-height:1.6;color:var(--vl-body)}
.lay-quote-row span{display:block;margin-top:6px;color:var(--vl-muted);font-size:.84rem}
.foot-simple{background:#16283C;color:#E8EEF4;border-radius:10px;padding:24px;text-align:center}
.foot-simple p{margin:0 0 6px;font-size:.93rem}
.foot-brand{font-weight:800;font-size:1.05rem;color:#fff}
.foot-simple .foot-fine{font-size:.8rem;color:#93A5B8;margin:0}
.foot-full{background:#16283C;color:#C9D5E0;border-radius:10px;padding:24px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:22px}
.foot-full p{margin:0;font-size:.9rem;line-height:1.65}
.foot-full h5{margin:0 0 8px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#fff}

/* ---------- configurator ---------- */
.cfg-controls{max-width:1060px;margin:26px auto 0;border:1px solid rgba(20,32,54,.14);border-radius:14px;background:#fff;padding:20px 22px;display:grid;gap:16px}
.cfg-group{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.cfg-group-label{margin:5px 0 0;width:92px;flex:none;font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--vl-muted)}
.cfg-opts{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.cfg-opt{appearance:none;border:1px solid rgba(20,32,54,.25);background:#fff;color:var(--vl-ink);border-radius:999px;padding:7px 15px;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer}
.cfg-opt:hover{border-color:var(--vl-blue)}
.cfg-opt[aria-pressed="true"]{background:var(--vl-ink);color:#fff;border-color:var(--vl-ink)}
.cfg-readout{text-align:center;color:var(--vl-muted);font-size:.92rem;margin:12px auto 0;max-width:1060px}

.pv{max-width:1060px;margin:18px auto 0;border:1px solid rgba(20,32,54,.2);overflow:hidden;background:var(--pv-bg);color:var(--pv-ink);border-radius:var(--pv-radius)}
.pv a{text-decoration:none}
.pv-nav-main{display:flex;align-items:center;gap:18px;padding:14px 22px;flex-wrap:wrap}
.pv-brand{font-weight:800;font-size:1.12rem;color:var(--pv-ink);white-space:nowrap}
.pv-links{display:inline-flex;gap:16px}
.pv-links a{color:var(--pv-ink);opacity:.78;font-weight:600;font-size:.94rem}
.pv-links a:hover{opacity:1;text-decoration:underline}
.pv-util{display:none;justify-content:space-between;gap:12px;padding:7px 22px;font-size:.8rem;font-weight:600;background:var(--pv-ink);color:var(--pv-bg);flex-wrap:wrap}
.pv-cta{margin-left:auto}
.pv-btn{display:inline-block;padding:10px 20px;font-weight:700;font-size:.93rem;border:2px solid transparent;border-radius:var(--pv-btn-radius)}
.pv-btn-primary{background:var(--pv-accent);color:var(--pv-on-accent)}
.pv-btn-secondary{background:var(--pv-surface);color:var(--pv-ink)}
.pv-btn-outline{background:transparent;color:var(--pv-ink);border-color:var(--pv-ink)}
.pv-hero{padding:44px 30px 38px;text-align:left}
.pv-eyebrow{margin:0 0 10px;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pv-accent)}
.pv-h{font-size:32px;line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:0 0 10px;max-width:520px}
.pv-sub{margin:0 0 20px;font-size:15.5px;line-height:1.65;max-width:480px;opacity:.85}
.pv-btn-row{display:flex;gap:12px;flex-wrap:wrap}
.pv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 30px 34px}
.pv-card{background:var(--pv-surface);border-radius:var(--pv-radius);padding:20px;border:1px solid rgba(127,127,127,.18)}
.pv-card h3{margin:0 0 7px;font-size:1.05rem}
.pv-card p{margin:0 0 14px;font-size:.93rem;line-height:1.6;opacity:.85}
.pv-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:15px 30px;border-top:1px solid rgba(127,127,127,.22);font-size:.85rem;opacity:.8}

/* nav layouts */
.pv[data-nav="centered"] .pv-nav-main{justify-content:center}
.pv[data-nav="centered"] .pv-brand{order:2;font-size:1.25rem}
.pv[data-nav="centered"] .pv-links-left{order:1}
.pv[data-nav="centered"] .pv-links-right{order:3}
.pv[data-nav="centered"] .pv-cta{display:none}
.pv[data-nav="split"] .pv-util{display:flex}
.pv[data-nav="split"] .pv-links-left{margin-left:auto}
.pv[data-nav="split"] .pv-links-right{margin-left:0}
.pv[data-nav="split"] .pv-cta{display:none}
.pv[data-nav="minimal"] .pv-nav-main{border-bottom:1px solid rgba(127,127,127,.25)}
.pv[data-nav="minimal"] .pv-links-left{margin-left:auto}
.pv[data-nav="minimal"] .pv-links-right{margin-left:0}
.pv[data-nav="minimal"] .pv-cta{display:none}
.pv[data-nav="band"] .pv-nav{background:var(--pv-accent)}
.pv[data-nav="band"] .pv-brand,.pv[data-nav="band"] .pv-links a{color:var(--pv-on-accent)}
.pv[data-nav="band"] .pv-links{opacity:1}
.pv[data-nav="band"] .pv-btn-primary{background:var(--pv-ink);color:var(--pv-bg)}
.pv[data-nav="band"] .pv-links-left{margin-left:0}
.pv[data-nav="classic"] .pv-links-left{margin-left:auto}
.pv[data-nav="classic"] .pv-links-right{margin-left:0}

/* button shapes + corner styles */
.pv[data-buttons="sharp"]{--pv-btn-radius:2px}
.pv[data-buttons="soft"]{--pv-btn-radius:10px}
.pv[data-buttons="pill"]{--pv-btn-radius:999px}
.pv[data-corners="sharp"]{--pv-radius:0px}
.pv[data-corners="soft"]{--pv-radius:12px}
.pv[data-corners="round"]{--pv-radius:26px}

/* palettes */
.pv[data-palette="river"]{--pv-bg:#F4F7FA;--pv-ink:#16283C;--pv-accent:#1D5FA8;--pv-on-accent:#FFFFFF;--pv-surface:#FFFFFF}
.pv[data-palette="harvest"]{--pv-bg:#FAF3E3;--pv-ink:#3E2F1C;--pv-accent:#C07A1E;--pv-on-accent:#FFF7E8;--pv-surface:#FFFFFF}
.pv[data-palette="ember"]{--pv-bg:#1C1714;--pv-ink:#F3E9DC;--pv-accent:#E4572E;--pv-on-accent:#FFF4EA;--pv-surface:#2A211B}
.pv[data-palette="sage"]{--pv-bg:#F2F5EC;--pv-ink:#2E4023;--pv-accent:#5B7553;--pv-on-accent:#F2F5EC;--pv-surface:#FFFFFF}
.pv[data-palette="cinema"]{--pv-bg:#0E0E1A;--pv-ink:#F5F0E6;--pv-accent:#E3B505;--pv-on-accent:#171302;--pv-surface:#1B1B2E}
.pv[data-palette="berry"]{--pv-bg:#FFF5F7;--pv-ink:#4A1F2E;--pv-accent:#D6336C;--pv-on-accent:#FFFFFF;--pv-surface:#FFFFFF}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr}
  .hero-split{grid-template-columns:1fr}
  .hm-split-text{padding:22px 22px 6px}
  .hm-art-clinic{min-height:130px}
  .lay-cards{grid-template-columns:1fr}
  .lay-quote-row{grid-template-columns:1fr}
  .lay-row{grid-template-columns:1fr}
  .foot-full{grid-template-columns:1fr 1fr}
  .pv-cards{grid-template-columns:1fr;padding:0 20px 26px}
  .pv-hero{padding:32px 20px 28px}
  .pv-h{font-size:26px}
  .cfg-group-label{width:100%}
  .pv-cta{display:none}
}

/* ---------- 8 · imagery ---------- */
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:22px;max-width:1180px;margin:30px auto 0}
.img-card{border:1px solid rgba(20,32,54,.14);border-radius:14px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.img-scene{position:relative;overflow:hidden;height:190px;background:linear-gradient(180deg,#F6DF9C 0%,#F2E7C8 55%,#A8C686 55%,#5B7553 100%)}
.img-scene::before{content:"";position:absolute;top:16%;left:12%;width:40px;height:40px;border-radius:50%;background:#F7C948;box-shadow:0 0 0 10px rgba(247,201,72,.25)}
.img-scene::after{content:"";position:absolute;right:-60px;bottom:-140px;width:210px;height:210px;border-radius:50%;background:rgba(46,64,35,.18)}
.img-scene-full{display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
.img-over-h{margin:0;font-size:21px;font-weight:800;color:#22331B}
.img-over-sub{margin:2px 0 0;font-size:13.5px;color:#33482A}
.img-framed-wrap{padding:18px 18px 6px}
.img-scene-small{height:120px;border-radius:10px;border:6px solid #fff;box-shadow:0 6px 18px rgba(20,32,54,.18)}
.img-framed-h{margin:14px 0 4px;font-size:19px;font-weight:800;color:var(--vl-ink)}
.img-framed-sub{margin:0;font-size:14px;color:var(--vl-body);line-height:1.6}
.img-graphic{position:relative;height:190px;background:#FFF5F7;overflow:hidden}
.ig-sun{position:absolute;top:22px;right:30px;width:58px;height:58px;border-radius:50%;background:#D6336C}
.ig-hill{position:absolute;border-radius:50%}
.ig-hill-a{width:300px;height:300px;left:-90px;bottom:-230px;background:#7C4DBD}
.ig-hill-b{width:240px;height:240px;right:-70px;bottom:-180px;background:#4A1F2E}
.ig-h{position:absolute;left:20px;bottom:16px;margin:0;font-size:21px;font-weight:800;color:#4A1F2E}
.img-typeonly{padding:26px;justify-content:flex-start}
.img-type-h{font-size:30px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--vl-ink);margin:6px 0 18px}
.img-cap{margin:0;padding:14px 18px 16px;font-size:.92rem;line-height:1.6;color:var(--vl-body);border-top:1px solid rgba(20,32,54,.08)}
.img-typeonly .img-cap{border-top:none;padding:0}

/* ---------- 9 · density ---------- */
.density-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1060px;margin:30px auto 0}
.density h4{margin:0;color:var(--vl-ink)}
.density p{color:var(--vl-body)}
.density-price{font-weight:800;color:var(--vl-ink)}
.density-roomy h4{font-size:24px;margin-bottom:14px}
.density-roomy p{font-size:16px;line-height:1.8;margin:0 0 16px}
.density-compact h4{font-size:17px;margin-bottom:5px}
.density-compact p{font-size:13.5px;line-height:1.5;margin:0 0 5px}

/* ---------- 10 · motion ---------- */
.motion-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;max-width:1180px;margin:30px auto 0}
.motion-card{border:1px solid rgba(20,32,54,.14);border-radius:14px;background:#fff;padding:18px}
.motion-stage{height:110px;display:flex;align-items:center;justify-content:center;background:#F4F7FA;border-radius:10px;margin-bottom:14px}
.motion-badge{background:#B91C1C;color:#fff;font-weight:700;font-size:.92rem;padding:10px 18px;border-radius:999px}
.motion-subtle{transition:transform .35s ease,box-shadow .35s ease,opacity .35s ease;opacity:.92}
.motion-subtle:hover{transform:translateY(-4px);box-shadow:0 12px 22px rgba(20,32,54,.22);opacity:1}
.motion-playful{animation:pv-bob 2.2s ease-in-out infinite}
@keyframes pv-bob{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-7px) rotate(-1.5deg)}60%{transform:translateY(2px) rotate(1.5deg)}}
.motion-cap{margin:0;font-size:.94rem;line-height:1.6;color:var(--vl-body)}
@media (prefers-reduced-motion: reduce){.motion-playful{animation:none}.motion-subtle{transition:none}}

/* ---------- 11 · icons ---------- */
.icon-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.icon-item h4{margin:0 0 6px;font-size:1rem}
.icon-item p{margin:0;font-size:.93rem;line-height:1.6;color:var(--vl-body)}
.ic{width:34px;height:34px;margin-bottom:10px}
.ic-line{fill:none;stroke:#1D5FA8;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic-fill{fill:#1D5FA8}

/* ---------- 12 · proof ---------- */
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1060px;margin:30px auto 0}
.proof-stars{display:grid;gap:14px}
.pstar-card{border:1px solid rgba(20,32,54,.12);border-radius:10px;padding:14px 16px;background:#FBFAF7}
.pstar-card p{margin:0 0 6px;font-size:.95rem;line-height:1.6;color:var(--vl-body)}
.pstars{color:#C07A1E;font-size:1.05rem;letter-spacing:.14em;margin:0 0 6px}
.pwho{font-size:.85rem;color:var(--vl-muted);margin:0}
.proof-bigquote{font-size:23px;line-height:1.45;font-weight:700;color:var(--vl-ink);margin:4px 0 10px}
.proof-stats{display:flex;gap:10px;text-align:center;margin-bottom:12px}
.proof-stats > div{flex:1;background:#16283C;border-radius:10px;padding:16px 6px}
.pstat-n{display:block;font-size:24px;font-weight:800;color:#fff}
.pstat-l{display:block;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:#A9BCD2;margin-top:4px}
.proof-list{margin:0;padding-left:20px;display:grid;gap:8px;font-size:.97rem;line-height:1.55;color:var(--vl-body)}

/* ---------- 13 · CTA placement ---------- */
.cta-strip{display:flex;align-items:center;gap:18px;padding:13px 18px;border:1px solid rgba(20,32,54,.14);border-radius:10px;background:#FBFAF7;flex-wrap:wrap}
.cta-strip .nd-links{margin-left:auto}
.cta-phone{border:1px solid rgba(20,32,54,.14);border-radius:10px;background:#F4F7FA;padding:16px 16px 0;overflow:hidden}
.cta-phone-txt{margin:0 0 10px;color:var(--vl-muted);font-size:.9rem;text-align:center}
.cta-sticky{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#16283C;color:#E8EEF4;margin:14px -16px 0;padding:12px 16px;font-weight:600;font-size:.92rem;flex-wrap:wrap}
.cta-band-demo{background:#16283C;border-radius:10px;padding:30px 24px;text-align:center;color:#E8EEF4}
.cta-band-h{margin:0 0 8px;font-size:24px;font-weight:800;color:#fff}
.cta-band-sub{margin:0 0 18px;font-size:14.5px;color:#C9D5E0}
.cta-band-btn{background:#fff;color:#16283C}

/* ---------- 14 · mood ---------- */
.mood-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;max-width:1180px;margin:30px auto 0}
.mood-card{border-radius:14px;padding:24px;border:1px solid rgba(20,32,54,.14)}
.mood-tag{margin:0 0 10px;font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.mood-h{margin:0 0 8px;font-size:20px;font-weight:800}
.mood-card p:last-child{margin:0;font-size:.94rem;line-height:1.65}
.mood-light{background:#FDFCF9;color:var(--vl-body)}
.mood-light .mood-tag{color:#C07A1E}
.mood-light .mood-h{color:var(--vl-ink)}
.mood-dark{background:#0E0E1A;color:#B9B4C7}
.mood-dark .mood-tag{color:#E3B505}
.mood-dark .mood-h{color:#F5F0E6}
.mood-mixed{background:#FDFCF9;color:var(--vl-body)}
.mood-mixed .mood-tag{color:#1D5FA8}
.mood-mixed .mood-h{color:var(--vl-ink)}
.mood-dark-chip{background:#17181C;color:#EDEAE4;padding:1px 7px;border-radius:5px;white-space:nowrap}

/* ---------- 15 · backgrounds ---------- */
.bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:22px;max-width:1180px;margin:30px auto 0}
.bg-card{border-radius:14px;border:1px solid rgba(20,32,54,.14);padding:22px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end}
.bg-h{margin:0;font-size:24px;font-weight:800}
.bg-flat{background:#FAF3E3}
.bg-flat .bg-h{color:#3E2F1C}
.bg-pattern{background-color:#F4F7FA;background-image:radial-gradient(rgba(29,95,168,.20) 1.6px,transparent 1.7px);background-size:18px 18px}
.bg-pattern .bg-h{color:#16283C}
.bg-gradient{background:linear-gradient(120deg,#8E2A32 0%,#E4572E 60%,#E3B505 130%);color:#FFF4EA}
.bg-gradient .bg-h{color:#fff}
.bg-photo{background:linear-gradient(180deg,rgba(28,23,20,.05) 40%,rgba(28,23,20,.55) 100%),linear-gradient(180deg,#F6DF9C 0%,#F2E7C8 55%,#A8C686 55%,#5B7553 100%);color:#fff}
.bg-photo .bg-h{color:#fff}

/* ---------- 16 · forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;max-width:1180px;margin:30px auto 0}
.fake-form{display:grid;gap:8px}
.ff-label{font-size:.86rem;font-weight:600;color:var(--vl-ink)}
.ff-input{width:100%;box-sizing:border-box;border:1px solid rgba(20,32,54,.3);border-radius:8px;padding:10px 12px;font:inherit;font-size:.95rem;background:#fff;color:var(--vl-ink)}
.ff-input:focus{outline:2px solid #1D5FA8;outline-offset:1px;border-color:#1D5FA8}
.ff-btn{display:inline-block;justify-self:start;background:#1D5FA8;color:#fff;font-weight:700;font-size:.93rem;padding:11px 22px;border-radius:8px;margin-top:6px}
.ff-two{grid-template-columns:1fr 1fr;gap:10px 14px}
.ff-two .ff-wide{grid-column:1 / -1}
.ff-float{position:relative;margin-top:8px}
.ff-float .ff-input{padding:16px 12px 8px}
.ff-float-label{position:absolute;left:12px;top:12px;font-size:.95rem;color:var(--vl-muted);pointer-events:none;transition:all .15s ease;background:transparent}
.ff-float .ff-input:focus + .ff-float-label,.ff-float .ff-input:not(:placeholder-shown) + .ff-float-label{top:5px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#1D5FA8}

/* ---------- configurator presets ---------- */
.cfg-presets{max-width:1060px;margin:14px auto 0;border:1px dashed rgba(20,32,54,.3);border-radius:14px;background:#FBFAF7;padding:18px 22px}
.cfg-presets .cfg-group-label{width:auto;margin:0 0 12px}
.cfg-preset-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cfg-preset{appearance:none;text-align:left;border:1px solid rgba(20,32,54,.22);background:#fff;border-radius:12px;padding:14px 16px;font:inherit;cursor:pointer;color:var(--vl-ink)}
.cfg-preset:hover{border-color:var(--vl-blue);box-shadow:0 8px 18px rgba(20,32,54,.10)}
.cfg-preset b{display:block;font-size:1rem;margin-bottom:4px}
.cfg-preset span{display:block;font-size:.86rem;line-height:1.55;color:var(--vl-body)}
.cfg-preset-note{margin:12px 0 0;font-size:.88rem;color:var(--vl-muted)}

@media (max-width:820px){
  .img-grid,.bg-grid{grid-template-columns:1fr}
  .density-grid,.proof-grid{grid-template-columns:1fr}
  .icon-row{grid-template-columns:1fr}
  .proof-stats{flex-direction:column}
  .cfg-preset-row{grid-template-columns:1fr}
  .ff-two{grid-template-columns:1fr}
}