so it escapes all wrappers */
#bc-root {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
z-index: 999999;
background: var(–bg-soft);
}

/* ============================================================
BUGGO BRAND COMPONENTS — Light Theme
Brand: Red #E31B23 · Green #6BBF24 · Dark #1a1a2e
Font: Plus Jakarta Sans
============================================================ */

:root {
/* Brand */
–red: #E31B23;
–red-dark: #c4161e;
–red-dim: rgba(227,27,35,0.08);
–red-mid: rgba(227,27,35,0.15);
–red-glow: rgba(227,27,35,0.25);
–green: #6BBF24;
–green-dark: #52991b;
–green-dim: rgba(107,191,36,0.1);
–green-mid: rgba(107,191,36,0.18);

/* Backgrounds */
–bg: #ffffff;
–bg-soft: #f8f9fb;
–bg-alt: #f1f3f6;
–bg-dark: #1a1a2e;
–bg-dark-2: #0f0f1e;
–bg-card: #ffffff;

/* Text */
–text: #1a1a2e;
–text-sub: #444;
–text-muted: #6b7280;
–text-light: #9ca3af;

/* UI */
–border: rgba(0,0,0,0.08);
–border-mid: rgba(0,0,0,0.12);
–shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
–shadow: 0 4px 20px rgba(0,0,0,0.08);
–shadow-lg: 0 8px 40px rgba(0,0,0,0.12);

–font: ‘Plus Jakarta Sans’, system-ui, sans-serif;
–radius: 12px;
–radius-lg: 18px;
–radius-xl: 24px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(–font);
background: var(–bg-soft);
color: var(–text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}

/* —- NAV —- */
.bc-nav {
position: sticky; top: 0; z-index: 100;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(–border);
padding: 0 32px;
display: flex; align-items: center;
height: 56px; overflow-x: auto;
box-shadow: var(–shadow-sm);
}
.bc-nav-logo {
font-size: 15px; font-weight: 900; letter-spacing: -0.02em;
color: var(–red); white-space: nowrap; margin-right: 32px; flex-shrink: 0;
}
.bc-nav-logo span { color: var(–text); }
.bc-nav a {
font-size: 13px; font-weight: 600; color: var(–text-muted);
text-decoration: none; padding: 0 14px; height: 56px;
display: flex; align-items: center; white-space: nowrap;
border-bottom: 2px solid transparent;
transition: color 0.2s, border-color 0.2s; flex-shrink: 0;
}
.bc-nav a:hover { color: var(–text); border-bottom-color: var(–red); }

/* —- LAYOUT —- */
.bc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.bc-section { padding: 80px 0; background: var(–bg); border-bottom: 1px solid var(–border); }
.bc-section–alt { background: var(–bg-soft); }
.bc-section-label {
font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
text-transform: uppercase; color: var(–red); margin-bottom: 8px;
}
.bc-section-title {
font-size: 36px; font-weight: 900; letter-spacing: -0.03em;
line-height: 1.1; margin-bottom: 12px; color: var(–text);
}
.bc-section-desc {
font-size: 16px; color: var(–text-muted); max-width: 540px;
margin-bottom: 48px; line-height: 1.7;
}

/* —- HERO —- */
.bc-hero {
background: var(–bg);
padding: 80px 0 72px;
border-bottom: 1px solid var(–border);
position: relative; overflow: hidden;
}
.bc-hero::before {
content: ”;
position: absolute; top: -100px; right: -100px;
width: 500px; height: 500px; border-radius: 50%;
background: radial-gradient(circle, rgba(227,27,35,0.05) 0%, transparent 70%);
pointer-events: none;
}
.bc-hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
background: var(–red-dim); border: 1px solid rgba(227,27,35,0.15);
border-radius: 100px; padding: 6px 14px;
font-size: 11px; font-weight: 800; letter-spacing: 0.15em;
text-transform: uppercase; color: var(–red); margin-bottom: 24px;
}
.bc-hero-eyebrow span {
width: 6px; height: 6px; border-radius: 50%;
background: var(–red); animation: pulse-dot 2s ease-in-out infinite;
}
.bc-hero h1 {
font-size: clamp(46px, 7vw, 80px); font-weight: 900;
letter-spacing: -0.04em; line-height: 1;
margin-bottom: 20px; color: var(–text);
}
.bc-hero h1 em { font-style: normal; color: var(–red); }
.bc-hero h1 strong { font-style: normal; color: var(–green); }
.bc-hero-sub {
font-size: 18px; color: var(–text-muted);
max-width: 480px; line-height: 1.7; margin-bottom: 40px;
}
.bc-hero-meta { display: flex; gap: 40px; flex-wrap: wrap; }
.bc-hero-meta-item { display: flex; flex-direction: column; gap: 2px; }
.bc-hero-meta-val {
font-size: 22px; font-weight: 900; letter-spacing: -0.03em; color: var(–text);
}
.bc-hero-meta-key {
font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(–text-light);
}

/* —- COLORS —- */
.bc-colors-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px;
}
.bc-color-chip {
border-radius: var(–radius); overflow: hidden;
border: 1px solid var(–border); box-shadow: var(–shadow-sm);
}
.bc-color-swatch { height: 80px; }
.bc-color-info { background: #fff; padding: 11px 13px; }
.bc-color-name { font-size: 13px; font-weight: 700; color: var(–text); margin-bottom: 2px; }
.bc-color-hex { font-size: 11px; color: var(–text-muted); font-family: ‘SF Mono’, ‘Fira Code’, monospace; }

/* —- TYPOGRAPHY —- */
.bc-type-stack { display: flex; flex-direction: column; }
.bc-type-row {
display: grid; grid-template-columns: 170px 1fr; gap: 24px;
align-items: center; padding: 28px 0; border-bottom: 1px solid var(–border);
}
.bc-type-row:last-child { border-bottom: none; }
.bc-type-label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(–text-muted); }
.bc-type-spec { font-size: 11px; color: var(–text-light); font-family: monospace; margin-top: 3px; }

/* ============================================================
PEST INFOGRAPHIC CARDS
============================================================ */
.bc-pests-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;
}
.pest-card {
background: var(–bg-card); border: 1px solid var(–border);
border-radius: var(–radius-xl); overflow: hidden;
box-shadow: var(–shadow);
transition: transform 0.3s, box-shadow 0.3s; cursor: default;
position: relative;
}
.pest-card:hover { transform: translateY(-5px); box-shadow: var(–shadow-lg); }
.pest-card::before {
content: ”; position: absolute; top: 0; left: 0; right: 0;
height: 3px; background: var(–accent, var(–red));
}

/* Accent colors per pest */
.pest-card[data-pest=”cockroach”] { –accent:#8B4513; –accent-bg:rgba(139,69,19,0.06); }
.pest-card[data-pest=”termite”] { –accent:#D2691E; –accent-bg:rgba(210,105,30,0.07); }
.pest-card[data-pest=”ant”] { –accent:#CC3300; –accent-bg:rgba(204,51,0,0.06); }
.pest-card[data-pest=”spider”] { –accent:#5c1aab; –accent-bg:rgba(92,26,171,0.06); }
.pest-card[data-pest=”rodent”] { –accent:#666; –accent-bg:rgba(100,100,100,0.06); }
.pest-card[data-pest=”possum”] { –accent:#5a7a3a; –accent-bg:rgba(90,122,58,0.06); }
.pest-card[data-pest=”bedbug”] { –accent:#9B1B1B; –accent-bg:rgba(155,27,27,0.06); }

.pest-stage {
height: 190px; position: relative; overflow: hidden;
background: var(–accent-bg);
display: flex; align-items: center; justify-content: center;
border-bottom: 1px solid var(–border);
}
.pest-info { padding: 20px 22px 24px; }
.pest-name {
font-size: 19px; font-weight: 900; letter-spacing: -0.02em;
color: var(–text); margin-bottom: 6px;
}
.pest-name span { color: var(–accent); }
.pest-fact { font-size: 13px; color: var(–text-muted); line-height: 1.6; margin-bottom: 14px; }
.pest-stat {
display: inline-flex; align-items: center; gap: 6px;
background: var(–accent-bg); border: 1px solid rgba(0,0,0,0.07);
border-radius: 100px; padding: 5px 12px;
font-size: 12px; font-weight: 700; color: var(–text-muted);
}
.pest-stat strong { color: var(–accent); }

/* ============================================================
COCKROACH
============================================================ */
.roach-wrap { position: relative; width: 90px; height: 90px; }
.roach { position: absolute; inset: 0; animation: roach-idle 0.4s ease-in-out infinite alternate; transform-origin: center; }
.pest-card:hover .roach { animation: roach-scatter 0.55s ease-in forwards; }
.pest-card:hover .roach-clone-1 { animation: roach-scatter-2 0.5s 0.05s ease-in forwards; }
.pest-card:hover .roach-clone-2 { animation: roach-scatter-3 0.5s 0.1s ease-in forwards; }
@keyframes roach-idle { from{transform:rotate(-2deg) translateY(0)} to{transform:rotate(2deg) translateY(-3px)} }
@keyframes roach-scatter { 0%{transform:rotate(0);opacity:1} 100%{transform:translate(120px,-80px) rotate(200deg);opacity:0} }
@keyframes roach-scatter-2 { 0%{transform:rotate(0);opacity:.7} 100%{transform:translate(-100px,-60px) rotate(-150deg);opacity:0} }
@keyframes roach-scatter-3 { 0%{transform:rotate(0);opacity:.4} 100%{transform:translate(50px,100px) rotate(280deg);opacity:0} }
.roach-leg { animation: leg-wave 0.3s ease-in-out infinite alternate; transform-origin: 0 50%; }
.roach-leg:nth-child(even) { animation-direction: alternate-reverse; }
@keyframes leg-wave { from{transform:rotate(-25deg)} to{transform:rotate(25deg)} }
.antenna { animation: antenna-wave 1s ease-in-out infinite alternate; transform-origin: 100% 100%; }
@keyframes antenna-wave { from{transform:rotate(-15deg)} to{transform:rotate(15deg)} }

/* ============================================================
TERMITES
============================================================ */
.termite-scene { width: 210px; }
.wood-plank {
width: 210px; height: 56px; border-radius: 8px;
position: relative; overflow: hidden;
background: linear-gradient(180deg,#c68642 0%,#a0632a 45%,#c68642 60%,#8b4a1e 100%);
border: 1px solid rgba(0,0,0,0.15); box-shadow: var(–shadow-sm);
}
.wood-grain {
position: absolute; inset: 0;
background: repeating-linear-gradient(90deg,transparent 0px,transparent 16px,rgba(0,0,0,0.06) 16px,rgba(0,0,0,0.06) 18px);
}
.wood-hole {
position: absolute; background: #3a1f08; border-radius: 50%;
animation: hole-grow 3s ease-in-out infinite;
}
.wood-hole:nth-child(3){width:13px;height:9px;top:18px;left:25px;animation-delay:0s}
.wood-hole:nth-child(4){width:9px;height:7px;top:32px;left:65px;animation-delay:.8s}
.wood-hole:nth-child(5){width:15px;height:11px;top:14px;left:125px;animation-delay:1.4s}
.wood-hole:nth-child(6){width:8px;height:6px;top:37px;left:175px;animation-delay:2.1s}
@keyframes hole-grow { 0%,40%{transform:scale(0);opacity:0} 60%,100%{transform:scale(1);opacity:1} }
.termite-bug {
width:13px;height:7px;background:#D2691E;border-radius:50%;
position:absolute;top:-12px;animation:termite-eat 3s ease-in-out infinite;
}
.termite-bug::before{content:”;position:absolute;width:5px;height:4px;background:#E8803A;border-radius:50%;top:-2px;left:4px}
.termite-bug:nth-child(7){left:21px;animation-delay:0s}
.termite-bug:nth-child(8){left:61px;animation-delay:.8s}
.termite-bug:nth-child(9){left:121px;animation-delay:1.4s}
.termite-bug:nth-child(10){left:171px;animation-delay:2.1s}
@keyframes termite-eat {
0%{transform:translateY(0) scale(1)} 30%{transform:translateY(13px) scale(1)}
50%{transform:translateY(13px) scale(.8)} 70%{transform:translateY(7px) scale(1)} 100%{transform:translateY(0)}
}

/* ============================================================
ANTS
============================================================ */
.ant-scene { position:relative;width:150px;height:150px; }
.sugar-cube {
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:34px;height:34px;background:linear-gradient(135deg,#fff 60%,#e8e8e8 100%);
border-radius:5px;box-shadow:0 2px 12px rgba(0,0,0,0.15);
border:1px solid rgba(0,0,0,0.08);
}
.sugar-cube::before{content:”;position:absolute;inset:3px;background:repeating-linear-gradient(0deg,rgba(0,0,0,0.04) 0px,rgba(0,0,0,0.04) 1px,transparent 1px,transparent 5px),repeating-linear-gradient(90deg,rgba(0,0,0,0.04) 0px,rgba(0,0,0,0.04) 1px,transparent 1px,transparent 5px);border-radius:3px}
.ant-marcher{position:absolute;top:50%;left:50%;width:10px;height:6px;margin:-3px -5px}
.ant-body{position:relative;width:100%;height:100%}
.ant-body::before{content:”;position:absolute;width:5px;height:5px;background:#1a1a1a;border-radius:50%;top:0;left:0}
.ant-body::after{content:”;position:absolute;width:4px;height:4px;background:#333;border-radius:50%;top:1px;left:5px}
.ant-marcher:nth-child(1){animation:orbit 4s linear infinite}
.ant-marcher:nth-child(2){animation:orbit 4s linear infinite;animation-delay:-1.33s}
.ant-marcher:nth-child(3){animation:orbit 4s linear infinite;animation-delay:-2.66s}
.ant-marcher:nth-child(4){animation:orbit 4s linear infinite;animation-delay:-0.66s}
.ant-marcher:nth-child(5){animation:orbit 4s linear infinite;animation-delay:-2s}
.ant-marcher:nth-child(6){animation:orbit 4s linear infinite;animation-delay:-3.33s}
@keyframes orbit{0%{transform:rotate(0deg) translateX(55px) rotate(90deg)} 100%{transform:rotate(360deg) translateX(55px) rotate(90deg)}}

/* ============================================================
SPIDER
============================================================ */
.spider-scene{position:relative;width:170px;height:170px}
.spider-web svg{position:absolute;inset:0;width:100%;height:100%}
.web-line{stroke:rgba(92,26,171,0.25);stroke-width:.9;fill:none;stroke-dasharray:300;stroke-dashoffset:300;animation:draw-web 3s ease forwards}
.web-ring{stroke:rgba(92,26,171,0.15);stroke-width:.6;fill:none;stroke-dasharray:600;stroke-dashoffset:600;animation:draw-web 3s ease forwards}
.web-line:nth-child(1){animation-delay:0s}.web-line:nth-child(2){animation-delay:.15s}
.web-line:nth-child(3){animation-delay:.3s}.web-line:nth-child(4){animation-delay:.45s}
.web-line:nth-child(5){animation-delay:.6s}.web-line:nth-child(6){animation-delay:.75s}
.web-ring:nth-child(7){animation-delay:1s}.web-ring:nth-child(8){animation-delay:1.3s}
.web-ring:nth-child(9){animation-delay:1.6s}.web-ring:nth-child(10){animation-delay:1.9s}
@keyframes draw-web{to{stroke-dashoffset:0}}
.spider-body{position:absolute;animation:spider-drop 2s 2s cubic-bezier(.23,1,.32,1) forwards;top:-30px;left:50%;transform:translateX(-50%)}
.spider-thread{width:1px;background:rgba(0,0,0,0.2);margin:0 auto;animation:thread-grow 2s 2s cubic-bezier(.23,1,.32,1) forwards;height:0}
.spider-icon{font-size:26px;display:block;animation:spider-sway 3s 4s ease-in-out infinite alternate}
@keyframes spider-drop{to{top:55px}}
@keyframes thread-grow{to{height:55px}}
@keyframes spider-sway{from{transform:translateX(-8px)} to{transform:translateX(8px)}}

/* ============================================================
RODENT
============================================================ */
.rodent-scene{position:relative;width:210px;height:170px;overflow:hidden}
.baseboard{position:absolute;bottom:0;left:0;right:0;height:38px;background:linear-gradient(180deg,#e8e0d8 0%,#d4c8bc 100%);border-top:2px solid #c4b8ac}
.mouse-hole{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:48px;height:52px;background:var(–bg-soft);border-radius:50% 50% 0 0 / 60% 60% 0 0;border:1px solid #c4b8ac;border-bottom:none}
.mouse{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:34px;height:22px;animation:mouse-peek 5s ease-in-out infinite}
.mouse-body{width:34px;height:22px;background:#b0b0b0;border-radius:50%;position:relative}
.mouse-ear{position:absolute;width:11px;height:11px;background:#c0c0c0;border-radius:50%;top:-6px}
.mouse-ear:nth-child(1){left:4px}.mouse-ear:nth-child(2){right:4px}
.mouse-eye{position:absolute;width:4px;height:4px;background:#2a2a2a;border-radius:50%;top:5px}
.mouse-eye:nth-child(3){left:8px}.mouse-eye:nth-child(4){right:8px}
.mouse-nose{position:absolute;width:5px;height:3px;background:#ffb3b3;border-radius:50%;bottom:5px;left:50%;transform:translateX(-50%)}
.mouse-tail{position:absolute;bottom:8px;right:-26px;width:26px;height:3px;background:#b0b0b0;border-radius:3px;transform-origin:left center;animation:tail-wag .5s ease-in-out infinite alternate}
@keyframes tail-wag{from{transform:rotate(-20deg)} to{transform:rotate(20deg)}}
@keyframes mouse-peek{0%{transform:translateX(-50%) translateY(60px)} 20%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(0)} 70%{transform:translateX(-50%) translateY(60px)} 100%{transform:translateX(-50%) translateY(60px)}}

/* ============================================================
POSSUM
============================================================ */
.possum-scene{position:relative;width:170px;height:155px}
.possum-body{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);animation:possum-breathe 3s ease-in-out infinite}
.possum-fur{width:78px;height:68px;background:radial-gradient(ellipse,#aaa 30%,#888 100%);border-radius:40px 40px 44px 44px;position:relative}
.possum-face{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:48px;height:38px;background:#d0d0d0;border-radius:24px}
.possum-eyes-wrap{position:absolute;top:11px;left:50%;transform:translateX(-50%);display:flex;gap:13px}
.possum-eye{width:10px;height:10px;background:#fff;border-radius:50%;position:relative;animation:possum-blink 4s ease-in-out infinite;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.possum-eye::after{content:”;position:absolute;width:6px;height:6px;background:#1a1a1a;border-radius:50%;top:2px;left:2px}
.possum-ear{position:absolute;width:20px;height:22px;background:#999;border-radius:50%;top:-12px}
.possum-ear:nth-child(1){left:6px}.possum-ear:nth-child(2){right:6px}
.possum-ear-inner{position:absolute;width:12px;height:14px;background:#ddaaaa;border-radius:50%;top:3px;left:4px}
.possum-nose{position:absolute;width:10px;height:7px;background:#ffaaaa;border-radius:50%;top:19px;left:50%;transform:translateX(-50%)}
.possum-tail{position:absolute;bottom:-4px;right:-24px;width:38px;height:5px;background:#999;border-radius:5px;transform-origin:left center;transform:rotate(-20deg);animation:possum-tail 3s ease-in-out infinite alternate}
@keyframes possum-tail{from{transform:rotate(-20deg)} to{transform:rotate(10deg)}}
@keyframes possum-breathe{0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(1.03)}}
@keyframes possum-blink{0%,90%,100%{transform:scaleY(1)} 94%,97%{transform:scaleY(0.1)}}
.possum-roof{position:absolute;top:0;left:0;right:0;height:40px;background:repeating-linear-gradient(90deg,#e8e0d8 0px,#e8e0d8 18px,#d4c8bc 18px,#d4c8bc 20px);opacity:.6}

/* ============================================================
BED BUGS
============================================================ */
.bedbug-scene{position:relative;width:195px;height:155px;overflow:hidden}
.fabric{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 9px,rgba(0,0,0,0.03) 9px,rgba(0,0,0,0.03) 10px),repeating-linear-gradient(90deg,transparent 0px,transparent 9px,rgba(0,0,0,0.03) 9px,rgba(0,0,0,0.03) 10px);background-color:#faf0f0;border-radius:6px}
.bedbug{position:absolute;width:13px;height:8px;background:radial-gradient(ellipse,#9B1B1B,#6b1010);border-radius:50%;animation:bug-crawl var(–dur,6s) linear infinite}
.bedbug::before{content:”;position:absolute;width:6px;height:5px;background:#b02020;border-radius:50%;top:-3px;left:3px}
.bedbug:nth-child(2){–dur:7s;top:18px;left:-18px;animation-delay:-1s}
.bedbug:nth-child(3){–dur:5s;top:50px;left:-18px;animation-delay:-2.5s}
.bedbug:nth-child(4){–dur:8s;top:85px;left:-18px;animation-delay:-0.5s}
.bedbug:nth-child(5){–dur:6s;top:120px;left:-18px;animation-delay:-3s}
.bedbug:nth-child(6){–dur:9s;top:38px;left:-18px;animation-delay:-4s}
@keyframes bug-crawl{0%{transform:translateX(0) rotate(0)} 20%{transform:translateX(55px) rotate(4deg)} 40%{transform:translateX(95px) rotate(-3deg)} 60%{transform:translateX(135px) rotate(7deg)} 80%{transform:translateX(170px) rotate(-4deg)} 100%{transform:translateX(230px) rotate(0)}}
.bedbug-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(155,27,27,0.04) 50%,transparent 100%);animation:scan 3s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translateY(-100%)} 50%{transform:translateY(100%)}}

/* ============================================================
BUTTONS
============================================================ */
.bc-buttons-grid { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.btn {
display:inline-flex; align-items:center; gap:8px;
font-family:var(–font); font-weight:800; font-size:15px;
border:none; cursor:pointer; text-decoration:none;
transition:transform .15s, box-shadow .15s;
white-space:nowrap;
}
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }

.btn-primary { background:linear-gradient(135deg,var(–red),var(–red-dark)); color:#fff; padding:14px 28px; border-radius:10px; box-shadow:0 4px 16px rgba(227,27,35,0.3); }
.btn-primary:hover { box-shadow:0 8px 28px rgba(227,27,35,0.45); }
.btn-green { background:linear-gradient(135deg,var(–green),var(–green-dark)); color:#fff; padding:14px 28px; border-radius:10px; box-shadow:0 4px 14px rgba(107,191,36,0.25); }
.btn-green:hover { box-shadow:0 8px 24px rgba(107,191,36,0.4); }
.btn-ghost { background:transparent; color:var(–text); border:1.5px solid var(–border-mid); padding:13px 27px; border-radius:10px; }
.btn-ghost:hover { background:var(–bg-soft); border-color:rgba(0,0,0,0.2); }
.btn-ghost-red { background:transparent; color:var(–red); border:1.5px solid rgba(227,27,35,0.3); padding:13px 27px; border-radius:10px; }
.btn-ghost-red:hover { background:var(–red-dim); border-color:var(–red); }
.btn-xl { padding:18px 40px; font-size:17px; border-radius:14px; }
.btn-sm { padding:9px 18px; font-size:13px; border-radius:8px; }
.btn-pill{ border-radius:100px; }
.btn-icon{ background:var(–bg-soft); color:var(–text); border:1px solid var(–border-mid); width:44px; height:44px; border-radius:10px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.btn-icon:hover { background:var(–bg-alt); }

/* ============================================================
FORMS
============================================================ */
.bc-form-demo { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-label { font-size:13px; font-weight:700; color:var(–text-sub); }
.form-input,.form-select,.form-textarea {
width:100%; background:#fff; border:1.5px solid #e5e7eb;
border-radius:10px; padding:12px 15px;
font-family:var(–font); font-size:15px; color:var(–text);
transition:border-color .2s, box-shadow .2s; outline:none; appearance:none;
}
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(–red); box-shadow:0 0 0 3px rgba(227,27,35,0.1); }
.form-input::placeholder { color:#c0c4cc; }
.form-textarea { resize:vertical; min-height:100px; line-height:1.6; }
.form-input.is-error { border-color:var(–red); }
.form-input.is-success { border-color:var(–green); }
.form-hint { font-size:12px; color:var(–text-light); }
.form-error { font-size:12px; color:var(–red); }
.form-success-msg { font-size:12px; color:var(–green-dark); font-weight:600; }
.form-check { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.form-check input[type=”checkbox”] { width:18px; height:18px; min-width:18px; accent-color:var(–red); cursor:pointer; margin-top:2px; }
.form-check-label { font-size:14px; color:var(–text-muted); }

/* Hero form card */
.form-card {
background:#fff; border:1px solid var(–border-mid);
border-radius:var(–radius-lg); padding:28px;
box-shadow:var(–shadow);
}
.form-card-title { font-size:16px; font-weight:800; text-align:center; margin-bottom:4px; }
.form-card-sub { font-size:13px; color:var(–text-muted); text-align:center; margin-bottom:18px; }

/* ============================================================
CARDS
============================================================ */
.bc-cards-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:20px; }
.card { background:#fff; border:1px solid var(–border); border-radius:var(–radius-lg); overflow:hidden; box-shadow:var(–shadow-sm); }
.card-body { padding:24px; }
.card-title { font-size:17px; font-weight:800; letter-spacing:-0.02em; margin-bottom:8px; color:var(–text); }
.card-text { font-size:14px; color:var(–text-muted); line-height:1.6; }

.card-service { transition:border-color .2s, transform .2s, box-shadow .2s; }
.card-service:hover { border-color:rgba(227,27,35,0.25); transform:translateY(-3px); box-shadow:var(–shadow); }
.card-service-icon { width:50px; height:50px; background:var(–red-dim); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px; }

.card-testimonial { position:relative; }
.card-testimonial-stars { color:#f59e0b; font-size:17px; margin-bottom:10px; letter-spacing:2px; }
.card-testimonial-quote { font-size:14px; color:var(–text-muted); line-height:1.7; font-style:italic; margin-bottom:14px; }
.card-testimonial-author { font-size:14px; font-weight:700; color:var(–text); }
.card-testimonial-location { font-size:12px; color:var(–text-light); }
.card-testimonial::before { content:'”‘; position:absolute; top:16px; right:18px; font-size:60px; line-height:1; color:rgba(227,27,35,0.08); font-weight:900; }

.card-stat { text-align:center; padding:32px 24px; }
.card-stat-val { font-size:46px; font-weight:900; letter-spacing:-0.04em; color:var(–green); line-height:1; margin-bottom:8px; }
.card-stat-label { font-size:14px; color:var(–text-muted); font-weight:600; }

/* ============================================================
TRUST BADGES
============================================================ */
.bc-trust-grid { display:flex; flex-wrap:wrap; gap:12px; }
.trust-badge {
display:inline-flex; align-items:center; gap:10px;
background:#fff; border:1px solid var(–border); border-radius:var(–radius);
padding:11px 16px; font-size:14px; font-weight:700; color:var(–text);
box-shadow:var(–shadow-sm); transition:box-shadow .2s, transform .2s;
}
.trust-badge:hover { box-shadow:var(–shadow); transform:translateY(-1px); }
.trust-badge-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.trust-badge-icon–green { background:rgba(107,191,36,0.12); }
.trust-badge-icon–red { background:rgba(227,27,35,0.08); }
.trust-badge-icon–gold { background:rgba(245,158,11,0.1); }

/* ============================================================
SECTION PATTERNS
============================================================ */
.bc-sections-demo { display:flex; flex-direction:column; gap:16px; }
.section-preview { border:1px solid var(–border); border-radius:var(–radius-lg); overflow:hidden; position:relative; box-shadow:var(–shadow-sm); }
.section-preview-label {
position:absolute; top:12px; left:12px; z-index:2;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
border:1px solid var(–border); border-radius:6px;
padding:4px 10px; font-size:11px; font-weight:700;
letter-spacing:.1em; text-transform:uppercase; color:var(–text-muted);
}

/* Hero pattern */
.sp-hero {
background:linear-gradient(135deg, #0a0a0a, #1a1a2e);
padding:44px 40px; display:flex; align-items:center;
justify-content:space-between; gap:32px;
}
.sp-hero-text h3 { font-size:26px; font-weight:900; letter-spacing:-0.03em; margin-bottom:8px; color:#fff; }
.sp-hero-text h3 em { font-style:normal; color:var(–red); }
.sp-hero-text p { font-size:14px; color:rgba(255,255,255,0.6); max-width:280px; }
.sp-price { display:inline-flex; align-items:baseline; gap:10px; margin-top:14px; }
.sp-price-new { font-size:36px; font-weight:900; color:var(–green); }
.sp-price-old { font-size:16px; text-decoration:line-through; color:rgba(255,255,255,0.3); }
.sp-hero-form { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:20px; min-width:230px; flex-shrink:0; }
.sp-hero-form-title { font-size:14px; font-weight:800; margin-bottom:12px; text-align:center; color:#fff; }
.sp-input-mini { width:100%; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:10px 12px; font-family:var(–font); font-size:13px; color:rgba(255,255,255,0.6); margin-bottom:8px; outline:none; }
.sp-btn-mini { width:100%; padding:12px; background:linear-gradient(135deg,var(–red),var(–red-dark)); color:#fff; font-family:var(–font); font-weight:800; font-size:13px; border:none; border-radius:8px; cursor:pointer; }

/* Trust bar pattern */
.sp-trust { background:#fff; padding:22px 40px; display:flex; justify-content:center; flex-wrap:wrap; gap:28px; border-top:1px solid #eee; }
.sp-trust-item { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#333; }

/* Light section */
.sp-section-light { background:var(–bg-soft); padding:36px 40px; }
.sp-section-light h3 { font-size:22px; font-weight:900; letter-spacing:-0.02em; margin-bottom:16px; color:var(–text); }
.sp-section-light h3 span { color:var(–red); }
.sp-cards-row { display:flex; gap:12px; }
.sp-mini-card { flex:1; background:#fff; border:1px solid var(–border); border-radius:12px; padding:16px; box-shadow:var(–shadow-sm); }
.sp-mini-card-icon { font-size:22px; margin-bottom:8px; }
.sp-mini-card-title { font-size:13px; font-weight:700; margin-bottom:4px; color:var(–text); }
.sp-mini-card-text { font-size:12px; color:var(–text-muted); }

/* Final CTA pattern */
.sp-final { background:linear-gradient(135deg,var(–red),var(–red-dark)); padding:40px; text-align:center; color:#fff; }
.sp-final h3 { font-size:26px; font-weight:900; margin-bottom:8px; }
.sp-final p { font-size:15px; color:rgba(255,255,255,0.8); margin-bottom:20px; }
.sp-final-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.sp-final-btn-w { background:#fff; color:var(–red); border:none; font-family:var(–font); font-weight:800; font-size:14px; padding:13px 28px; border-radius:10px; cursor:pointer; }
.sp-final-btn-g { background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.4); font-family:var(–font); font-weight:700; font-size:14px; padding:11px 26px; border-radius:10px; cursor:pointer; }

/* ============================================================
UTILITY
============================================================ */
@keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.5} }
.divider { display:flex; align-items:center; gap:16px; margin:32px 0; }
.divider-line { flex:1; height:1px; background:var(–border); }
.divider-text { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(–text-light); }

@media(max-width:768px){
.bc-wrap{padding:0 20px}
.bc-section-title{font-size:26px}
.bc-type-row{grid-template-columns:1fr}
.bc-form-demo{grid-template-columns:1fr}
.sp-hero{flex-direction:column}
.sp-hero-form{width:100%}
.sp-cards-row{flex-wrap:wrap}
}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#f1f1f1}
::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#aaa}