.bf-page { --bf-red:#d51822; --bf-deep:#250206; --bf-yellow:#ffd83d; background:#fff8f4; }
.bf-hero { position:relative; min-height:calc(100vh - 112px); display:grid; align-items:center; overflow:hidden; padding:72px 0 82px; color:#fff; background:radial-gradient(circle at 82% 12%,rgba(255,216,61,.22),transparent 22%),radial-gradient(circle at 18% 85%,rgba(255,74,74,.23),transparent 25%),linear-gradient(135deg,#210105 0%,#74070d 47%,#d51822 100%); }
.bf-hero::before { content:"BLACK FRIDAY"; position:absolute; left:-2vw; top:10%; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.09); font-size:clamp(5rem,14vw,13rem); font-weight:950; letter-spacing:-.08em; white-space:nowrap; transform:rotate(-4deg); }
.bf-confetti { position:absolute; inset:0; pointer-events:none; opacity:.13; background-image:linear-gradient(35deg,transparent 49%,rgba(255,216,61,.8) 50% 52%,transparent 53%),linear-gradient(125deg,transparent 49%,rgba(255,255,255,.38) 50% 51.5%,transparent 52.5%); background-size:310px 300px,390px 360px; animation:bf-drift 22s linear infinite; }
@keyframes bf-drift { to { background-position:310px 300px,-390px 360px; } }
.bf-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:64px; }
.bf-copy { max-width:650px; }
.bf-kicker { display:inline-flex; align-items:center; gap:9px; margin:0 0 20px; padding:8px 13px; border:1px solid rgba(255,216,61,.45); border-radius:999px; color:var(--bf-yellow); background:rgba(20,0,2,.32); font-size:.78rem; font-weight:950; letter-spacing:.12em; text-transform:uppercase; }
.bf-kicker::before { content:"✦"; color:#fff; }
.bf-hero h1 { max-width:720px; color:#fff; font-size:clamp(3rem,6.4vw,6.4rem); line-height:.91; letter-spacing:-.065em; }
.bf-hero h1 strong { display:block; color:var(--bf-yellow); font-weight:950; text-shadow:0 5px 0 rgba(18,0,0,.24); }
.bf-lead { max-width:590px; margin:25px 0 0; color:#ffecee; font-size:clamp(1.05rem,1.7vw,1.27rem); line-height:1.6; }
.bf-countdown { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:34px; }
.bf-countdown > div { min-width:0; padding:17px 9px 13px; border:1px solid rgba(255,255,255,.18); border-radius:16px; text-align:center; background:rgba(24,0,3,.46); box-shadow:inset 0 1px rgba(255,255,255,.1); backdrop-filter:blur(8px); }
.bf-countdown strong { display:block; color:var(--bf-yellow); font-size:clamp(1.6rem,3vw,2.65rem); line-height:1; font-variant-numeric:tabular-nums; }
.bf-countdown span { display:block; margin-top:7px; color:#ffdadd; font-size:.68rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.bf-card { position:relative; padding:34px; border:1px solid rgba(255,255,255,.24); border-radius:28px; color:#241014; background:rgba(255,251,246,.97); box-shadow:0 30px 80px rgba(24,0,3,.35); transform:rotate(1deg); }
.bf-card::before { content:"50%"; position:absolute; right:-20px; top:-28px; width:96px; height:96px; display:grid; place-items:center; border:5px solid #7f070d; border-radius:50%; color:#241014; background:var(--bf-yellow); box-shadow:0 12px 35px rgba(25,0,0,.3); font-size:1.65rem; font-weight:950; transform:rotate(8deg); }
.bf-card-tag { margin:0 0 8px; color:#b10d16; font-size:.74rem; font-weight:950; letter-spacing:.11em; text-transform:uppercase; }
.bf-card h2 { max-width:420px; color:#240307; font-size:clamp(1.8rem,3vw,2.7rem); }
.bf-card > p { margin:14px 0 22px; color:#664c51; line-height:1.55; }
.bf-form { display:grid; gap:11px; }
.bf-form label { color:#311116; font-size:.8rem; font-weight:850; }
.bf-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.bf-field { display:grid; gap:6px; min-width:0; }
.bf-field-wide { grid-column:1/-1; }
.bf-field input { min-width:0; width:100%; height:50px; padding:0 15px; border:1px solid #d9b9b9; border-radius:13px; color:#2c0a0d; background:#fff; outline:none; }
.bf-field input:focus { border-color:#d51822; box-shadow:0 0 0 4px rgba(213,24,34,.11); }
.bf-submit { min-height:52px; width:100%; padding:0 19px; border:0; border-radius:13px; color:#1f080a; background:var(--bf-yellow); font-weight:900; cursor:pointer; box-shadow:0 10px 22px rgba(174,121,0,.18); }
.bf-submit:hover { background:#ffe66f; transform:translateY(-1px); }
.bf-fineprint { margin:2px 0 0 !important; color:#80696d !important; font-size:.7rem; line-height:1.4 !important; }
.bf-form .form-message { margin:0; font-size:.78rem; }
.bf-success { padding:17px; border:1px solid #a8d8b7; border-radius:16px; color:#064a2e; background:#eaffef; }
.bf-success strong,.bf-success span { display:block; }
.bf-success span { margin-top:3px; font-size:.84rem; }
.bf-details { padding:66px 0 74px; background:#fff8f4; }
.bf-details-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.bf-detail { padding:25px; border:1px solid #f0d6d4; border-radius:20px; background:#fff; box-shadow:0 14px 35px rgba(82,5,10,.06); }
.bf-detail b { width:38px; height:38px; display:grid; place-items:center; margin-bottom:16px; border-radius:12px; color:#8d090f; background:#fff0b5; }
.bf-detail h3 { color:#3c090d; font-size:1.12rem; }
.bf-detail p { margin:9px 0 0; color:#73575c; font-size:.9rem; line-height:1.55; }
@media(max-width:820px){.bf-hero{min-height:0;padding:54px 0 62px}.bf-grid{grid-template-columns:1fr;gap:44px}.bf-copy{text-align:center;margin:auto}.bf-kicker{font-size:.68rem}.bf-lead{margin-inline:auto}.bf-card{max-width:560px;margin:auto;transform:none}.bf-details-grid{grid-template-columns:1fr}.bf-countdown{max-width:560px;margin-inline:auto}.bf-card::before{right:-8px}}
@media(max-width:520px){.bf-hero{padding:42px 0 50px}.bf-hero h1{font-size:clamp(2.8rem,14vw,4.1rem)}.bf-countdown{gap:6px}.bf-countdown>div{padding:13px 4px 10px;border-radius:12px}.bf-countdown strong{font-size:1.55rem}.bf-countdown span{font-size:.53rem}.bf-card{padding:26px 19px 22px;border-radius:22px}.bf-card::before{top:-27px;width:78px;height:78px;font-size:1.25rem}.bf-fields{grid-template-columns:1fr}.bf-field-wide{grid-column:auto}.bf-details{padding:44px 0 52px}}
@media(prefers-reduced-motion:reduce){.bf-confetti{animation:none}}