/* ==========================================================================
   BITFORTZ — 2026 "Circuit" design system
   --------------------------------------------------------------------------
   Palette and concept taken from the logo: a fortress built from circuit
   board — neon traces on dark PCB. Bit + fortress, so the language is
   security-tech: near-black surfaces, terminal green, glowing traces,
   monospace for data.

   TWO JOBS:
     Part A  design tokens + the new bf-* component system (header, footer,
             homepage — the pages already rebuilt)
     Part B  overrides for the legacy markup still in use on shop, cart,
             checkout and account pages, so the whole site reads as one thing
             while the rebuild is staged

   Load last. Motion is CSS only — no JS, no build step.
   Everything decorative stops under prefers-reduced-motion.
   ========================================================================== */

/* ==========================================================================
   PART A — FOUNDATION
   ========================================================================== */

:root {
    --bf-neon:        #2bff88;
    --bf-neon-soft:   #12d96b;
    --bf-neon-deep:   #0b8f47;
    --bf-pcb:         #0a2e1f;

    --bf-void:        #04070a;
    --bf-panel:       #0a0f14;
    --bf-panel-2:     #101820;
    --bf-line:        #1b2733;

    --bf-text:        #dbe7e1;
    --bf-dim:         #8fa3a0;
    --bf-faint:       #5b6b6b;

    --bf-amber:       #ffb300;
    --bf-danger:      #ff4d5e;

    --bf-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
               "Helvetica Neue", Arial, sans-serif;
    --bf-mono: "JetBrains Mono", "SFMono-Regular", Consolas, Menlo, monospace;

    --bf-glow-sm: 0 0 12px rgba(43,255,136,.28);
    --bf-glow-md: 0 0 26px rgba(43,255,136,.34);
    --bf-glow-lg: 0 0 64px rgba(43,255,136,.20);
    --bf-shadow:  0 18px 44px -14px rgba(0,0,0,.9);

    --bf-r:    12px;
    --bf-r-lg: 18px;

    --bf-ease: cubic-bezier(.22,1,.36,1);
    --bf-snap: cubic-bezier(.16,1,.3,1);

    --bf-wrap: 1180px;
}

/* ---- Motion library ------------------------------------------------------ */

@keyframes bf-rise  { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@keyframes bf-fade  { from { opacity:0; } to { opacity:1; } }
@keyframes bf-zoom  { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:none; } }
@keyframes bf-pulse { 0%,100% { opacity:.5; transform:scale(1);} 50% { opacity:1; transform:scale(1.05);} }
@keyframes bf-sweep { from { transform:translateX(-130%) skewX(-18deg);} to { transform:translateX(340%) skewX(-18deg);} }
@keyframes bf-drift { from { background-position:0 0,0 0; } to { background-position:56px 56px,56px 56px; } }
@keyframes bf-scan  { 0%{top:-8%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:108%;opacity:0} }
@keyframes bf-shift { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
@keyframes bf-float { 0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(26px,-30px) scale(1.07)}66%{transform:translate(-20px,20px) scale(.95)} }
@keyframes bf-blink { 0%,49%{opacity:1}50%,100%{opacity:0} }

/* ---- Base ---------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
    background: var(--bf-void);
    color: var(--bf-text);
    font-family: var(--bf-font);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Ambient circuit grid, fixed so it parallaxes as the page moves over it. */
body::before {
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(43,255,136,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43,255,136,.04) 1px, transparent 1px);
    background-size: 56px 56px, 56px 56px;
    animation: bf-drift 26s linear infinite;
    mask-image: radial-gradient(ellipse 85% 55% at 50% 0%, #000 30%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 85% 55% at 50% 0%, #000 30%, transparent 76%);
}

.bf-header, main, footer, section, .container { position: relative; z-index: 1; }

h1,h2,h3,h4,h5,h6 { font-family: var(--bf-font); color:#fff; font-weight:700; letter-spacing:-.025em; line-height:1.15; }

p, li, td, dd { color: var(--bf-dim); }

a { color: var(--bf-neon); text-decoration:none; transition: color .2s var(--bf-ease), text-shadow .2s var(--bf-ease); }
a:hover, a:focus { color:#fff; text-shadow: var(--bf-glow-sm); }

img { max-width:100%; height:auto; }

:focus-visible { outline:2px solid var(--bf-neon); outline-offset:3px; border-radius:4px; }

::selection { background: var(--bf-neon); color: var(--bf-void); }

::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background: var(--bf-void); }
::-webkit-scrollbar-thumb { background: var(--bf-line); border-radius:99px; border:3px solid var(--bf-void); }
::-webkit-scrollbar-thumb:hover { background: var(--bf-neon-deep); }

.container { max-width: var(--bf-wrap); }

.bf-visually-hidden {
    position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Skip link — did not exist before. */
.bf-skip {
    position:absolute; left:-9999px; top:0; z-index:9999;
    background: var(--bf-neon); color: var(--bf-void);
    padding:12px 20px; border-radius:0 0 10px 0; font-weight:700;
}
.bf-skip:focus { left:0; color: var(--bf-void); }

/* ---- Scroll reveals ------------------------------------------------------
   Progressive enhancement. Without animation-timeline nothing is hidden and
   nothing animates — the page simply renders. The old markup used WOW.js with
   opacity:0 defaults, so any JS failure left the homepage blank.
   ------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .bf-reveal {
            animation: bf-rise .75s var(--bf-snap) both;
            animation-timeline: view();
            animation-range: entry 4% cover 24%;
        }
        .bf-cards > li, .bf-plans > li {
            animation: bf-rise .75s var(--bf-snap) both;
            animation-timeline: view();
            animation-range: entry 2% cover 22%;
        }
    }
}

/* ==========================================================================
   PART A — COMPONENTS
   ========================================================================== */

/* ---- Utility bar --------------------------------------------------------- */

.bf-utility {
    background:#020406; border-bottom:1px solid var(--bf-line);
    padding:8px 0; font-family:var(--bf-mono); font-size:12.5px;
}
.bf-utility__inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.bf-utility__right { display:flex; align-items:center; gap:8px; margin-left:auto; }

.bf-utility a { color: var(--bf-dim); }
.bf-utility a:hover { color: var(--bf-neon); text-shadow:none; }

.bf-utility__phone { display:inline-flex; align-items:center; gap:7px; font-weight:600; }
.bf-utility__phone i { color: var(--bf-neon); }

.bf-utility .social a,
.bf-utility__left a {
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:8px;
    background:rgba(43,255,136,.05); border:1px solid var(--bf-line);
    margin-right:6px; transition: all .22s var(--bf-ease);
}
.bf-utility .social a:hover, .bf-utility__left a:hover {
    background: var(--bf-neon); color: var(--bf-void);
    border-color: var(--bf-neon); box-shadow: var(--bf-glow-sm);
    transform: translateY(-2px);
}

.bf-iconbtn { position:relative; display:inline-flex; align-items:center; padding:6px 10px; }
.bf-iconbtn ul { margin:0; padding:0; list-style:none; }
.bf-iconbtn i { font-size:16px; }
.bf-iconbtn__label { display:none; }

.cart-block .cart-product {
    display:inline-block; margin-left:5px;
    background: var(--bf-neon); color: var(--bf-void);
    border-radius:999px; min-width:18px; height:18px; line-height:18px;
    font-family: var(--bf-mono); font-size:10.5px; font-weight:700;
    text-align:center; padding:0 5px;
    box-shadow: var(--bf-glow-sm);
    animation: bf-pulse 2.8s ease-in-out infinite;
}

.bf-account { display:flex; gap:6px; }
.bf-account__link {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 13px; border-radius:8px;
    border:1px solid var(--bf-line); background:rgba(43,255,136,.05);
    font-size:12.5px; font-weight:600;
    transition: all .22s var(--bf-ease);
}
.bf-account__link:hover { border-color:var(--bf-neon); color:var(--bf-neon); box-shadow:var(--bf-glow-sm); }
.bf-account__link--ghost { background:transparent; }

/* ---- Primary bar --------------------------------------------------------- */

.bf-bar {
    position:sticky; top:0; z-index:900;
    background:rgba(4,7,10,.8);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom:1px solid transparent;
    padding:16px 0;
    transition: padding .3s var(--bf-ease), border-color .3s var(--bf-ease), background .3s var(--bf-ease);
}
.bf-bar.is-stuck { padding:10px 0; border-bottom-color:var(--bf-line); background:rgba(4,7,10,.94); }

.bf-bar::after {
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background:linear-gradient(90deg, transparent, var(--bf-neon), transparent);
    background-size:200% 100%; animation: bf-shift 7s linear infinite; opacity:.6;
}

.bf-bar__inner { display:flex; align-items:center; justify-content:space-between; gap:26px; }

.bf-logo img {
    max-height:46px; width:auto;
    filter: drop-shadow(0 0 14px rgba(43,255,136,.3));
    transition: filter .3s var(--bf-ease), transform .3s var(--bf-ease);
}
.bf-logo:hover img { filter: drop-shadow(0 0 26px rgba(43,255,136,.6)); transform:scale(1.04); }

.bf-nav ul { display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none; }
.bf-nav li { margin:0; }

.bf-nav a {
    position:relative; display:block; padding:10px 16px; border-radius:9px;
    color: var(--bf-text); font-weight:600; font-size:14.5px;
    transition: color .22s var(--bf-ease), background .22s var(--bf-ease);
}
.bf-nav a::after {
    content:""; position:absolute; left:50%; bottom:4px;
    width:0; height:2px; border-radius:2px;
    background: var(--bf-neon); box-shadow: var(--bf-glow-sm);
    transform: translateX(-50%);
    transition: width .28s var(--bf-snap);
}
.bf-nav a:hover, .bf-nav li.active > a { color:var(--bf-neon); background:rgba(43,255,136,.05); text-shadow:none; }
.bf-nav a:hover::after, .bf-nav li.active > a::after { width:calc(100% - 32px); }

.bf-burger {
    display:none; flex-direction:column; gap:5px;
    background:none; border:0; padding:10px; cursor:pointer;
}
.bf-burger span { display:block; width:24px; height:2px; border-radius:2px; background:var(--bf-neon); box-shadow:var(--bf-glow-sm); }

/* ---- Hero ---------------------------------------------------------------- */

.bf-hero { position:relative; overflow:hidden; background:var(--bf-void); }

.bf-hero__grid {
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:
        linear-gradient(rgba(43,255,136,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43,255,136,.05) 1px, transparent 1px);
    background-size:44px 44px, 44px 44px;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 72%);
}

.bf-hero__glow {
    position:absolute; z-index:1; pointer-events:none;
    width:620px; height:620px; top:-220px; left:50%; margin-left:-310px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(43,255,136,.16) 0%, transparent 68%);
    filter: blur(50px);
    animation: bf-float 18s ease-in-out infinite;
}

.bf-hero__slider { position:relative; z-index:2; }
.bf-slide__media img { width:100%; height:auto; display:block; }

/* ---- Page head ----------------------------------------------------------- */

.bf-pagehead { position:relative; overflow:hidden; }

.bf-pagehead__inner {
    position:relative; min-height:300px;
    display:flex; align-items:center;
    background: radial-gradient(ellipse 70% 110% at 50% 0%, var(--bf-pcb) 0%, var(--bf-void) 64%);
    padding:64px 0;
}

.bf-pagehead__grid {
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:
        linear-gradient(rgba(43,255,136,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43,255,136,.05) 1px, transparent 1px);
    background-size:44px 44px, 44px 44px;
    mask-image: linear-gradient(180deg, #000, transparent);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent);
}

.bf-pagehead__scan {
    position:absolute; left:0; right:0; z-index:2; height:2px; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(43,255,136,.5), transparent);
    animation: bf-scan 7s linear infinite;
}

.bf-pagehead .container { position:relative; z-index:3; }

.bf-pagehead__title {
    font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem);
    margin:8px 0 14px;
    text-shadow:0 0 44px rgba(43,255,136,.3);
}
.bf-pagehead__title::after {
    content:"_"; color:var(--bf-neon); margin-left:.1em;
    animation: bf-blink 1.1s step-end infinite;
}

/* ---- Eyebrow + crumbs ---------------------------------------------------- */

.bf-eyebrow {
    display:inline-flex; align-items:center; gap:9px;
    color:var(--bf-neon); font-family:var(--bf-mono);
    font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
    margin:0 0 10px;
}
.bf-eyebrow--center { justify-content:center; }

.bf-dot {
    width:7px; height:7px; border-radius:50%;
    background:var(--bf-neon); box-shadow:var(--bf-glow-sm);
    animation: bf-pulse 2.2s ease-in-out infinite;
}

.bf-crumbs ol { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; font-size:13.5px; }
.bf-crumbs li { color:var(--bf-faint); }
.bf-crumbs li + li::before { content:"/"; margin-right:8px; color:var(--bf-line); }
.bf-crumbs a { color:var(--bf-dim); }
.bf-crumbs a:hover { color:var(--bf-neon); text-shadow:none; }

/* ---- Sections ------------------------------------------------------------ */

.bf-section { padding:96px 0; position:relative; }

.bf-sectionhead { max-width:720px; margin:0 auto 52px; text-align:center; }
.bf-sectionhead__title { font-size:clamp(1.7rem,1.15rem + 2.1vw,2.6rem); margin:0 0 14px; }

.bf-prose { color:var(--bf-dim); }
.bf-prose p { margin:0 0 14px; }
.bf-prose p:last-child { margin-bottom:0; }
.bf-prose ul { padding-left:20px; }
.bf-prose li { margin-bottom:7px; }
.bf-prose--center { text-align:center; }

/* ---- Buttons ------------------------------------------------------------- */

.bf-btn {
    position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding:14px 30px; border-radius:10px; overflow:hidden;
    font-family:var(--bf-font); font-weight:700; font-size:14.5px; letter-spacing:.02em;
    cursor:pointer; border:1px solid transparent;
    transition: all .28s var(--bf-ease);
}
.bf-btn::after {
    content:""; position:absolute; top:0; left:0; width:45%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
    transform:translateX(-130%) skewX(-18deg); pointer-events:none;
}
@media (prefers-reduced-motion: no-preference) {
    .bf-btn:hover::after { animation: bf-sweep .85s var(--bf-ease); }
}

.bf-btn--primary {
    background:linear-gradient(135deg, rgba(43,255,136,.18), rgba(43,255,136,.07));
    border-color:var(--bf-neon); color:var(--bf-neon);
}
.bf-btn--primary:hover {
    background:var(--bf-neon); color:var(--bf-void);
    box-shadow:var(--bf-glow-md), 0 12px 28px -10px rgba(43,255,136,.55);
    transform:translateY(-2px); text-shadow:none;
}

.bf-btn--outline { background:transparent; border-color:var(--bf-line); color:var(--bf-text); }
.bf-btn--outline:hover { border-color:var(--bf-neon); color:var(--bf-neon); box-shadow:var(--bf-glow-sm); text-shadow:none; }

.bf-btn--ghost { background:transparent; border-color:transparent; color:var(--bf-dim); }
.bf-btn--ghost:hover { color:var(--bf-neon); background:rgba(43,255,136,.05); text-shadow:none; }

.bf-btn:active { transform:translateY(0) scale(.985); }

/* ---- Intro --------------------------------------------------------------- */

.bf-intro__grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.bf-intro__title { font-size:clamp(2rem,1.3rem + 2.6vw,3.1rem); margin:0 0 18px; }
.bf-intro__body .bf-btn { margin-top:26px; }

/* Corner-bracketed frame — a small nod to targeting reticles / HUDs. */
.bf-frame { position:relative; border-radius:var(--bf-r-lg); overflow:hidden; border:1px solid var(--bf-line); }
.bf-frame img { display:block; width:100%; }
.bf-frame__corner { position:absolute; width:22px; height:22px; border:2px solid var(--bf-neon); z-index:2; }
.bf-frame__corner--tl { top:10px; left:10px;  border-right:0; border-bottom:0; }
.bf-frame__corner--tr { top:10px; right:10px; border-left:0;  border-bottom:0; }
.bf-frame__corner--bl { bottom:10px; left:10px;  border-right:0; border-top:0; }
.bf-frame__corner--br { bottom:10px; right:10px; border-left:0;  border-top:0; }

/* ---- Service cards ------------------------------------------------------- */

.bf-services { background:linear-gradient(180deg, var(--bf-void), var(--bf-panel) 50%, var(--bf-void)); }
.bf-services__glow {
    position:absolute; top:10%; left:-10%; width:520px; height:520px; border-radius:50%;
    background:radial-gradient(circle, rgba(43,255,136,.09), transparent 68%);
    filter:blur(60px); animation: bf-float 22s ease-in-out infinite; pointer-events:none;
}

.bf-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px; margin:0; padding:0; list-style:none; }

.bf-card {
    position:relative; display:flex; flex-direction:column; height:100%;
    background:var(--bf-panel); border:1px solid var(--bf-line);
    border-radius:var(--bf-r-lg); padding:32px 28px;
    box-shadow:var(--bf-shadow);
    transition: transform .34s var(--bf-snap), box-shadow .34s var(--bf-ease), border-color .34s var(--bf-ease);
}
.bf-card__rim {
    position:absolute; inset:0; border-radius:inherit; padding:1px; opacity:0;
    background:linear-gradient(135deg, var(--bf-neon), transparent 42%, transparent 58%, var(--bf-neon));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
    transition:opacity .34s var(--bf-ease); pointer-events:none;
}
.bf-card:hover { transform:translateY(-7px); border-color:transparent; box-shadow:var(--bf-shadow), var(--bf-glow-lg); }
.bf-card:hover .bf-card__rim { opacity:1; }

.bf-card__icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:60px; height:60px; margin-bottom:20px; border-radius:14px;
    background:rgba(43,255,136,.07); border:1px solid var(--bf-line);
    transition: background .3s var(--bf-ease), box-shadow .3s var(--bf-ease);
}
.bf-card:hover .bf-card__icon { background:rgba(43,255,136,.14); box-shadow:var(--bf-glow-sm); }
.bf-card__icon img { max-width:30px; height:auto; }

.bf-card__title { font-size:18px; margin:0 0 10px; }
.bf-card__body { flex:1; font-size:15px; }

.bf-card__cta {
    display:inline-flex; align-items:center; gap:8px; margin-top:20px;
    color:var(--bf-neon); font-weight:700; font-size:14px;
}
.bf-card__cta i { transition: transform .28s var(--bf-snap); }
.bf-card:hover .bf-card__cta i { transform:translateX(5px); }

/* ---- Pricing ------------------------------------------------------------- */

.bf-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:26px; margin:0; padding:0; list-style:none; }

.bf-plan {
    position:relative; height:100%; display:flex; flex-direction:column;
    background:var(--bf-panel); border:1px solid var(--bf-line);
    border-radius:var(--bf-r-lg); padding:34px 28px;
    transition: transform .34s var(--bf-snap), box-shadow .34s var(--bf-ease), border-color .3s var(--bf-ease);
}
.bf-plan:hover { transform:translateY(-6px); border-color:var(--bf-neon-deep); box-shadow:var(--bf-glow-lg); }

.bf-plan--featured { border-color:var(--bf-neon); box-shadow:var(--bf-glow-md); }
.bf-plan__flag {
    position:absolute; top:-11px; left:50%; transform:translateX(-50%);
    background:var(--bf-neon); color:var(--bf-void);
    font-family:var(--bf-mono); font-size:10.5px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    padding:4px 12px; border-radius:6px; box-shadow:var(--bf-glow-sm);
}

.bf-plan__name { font-size:15px; font-family:var(--bf-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--bf-neon); margin:0 0 14px; }
.bf-plan__price { display:flex; align-items:baseline; gap:3px; margin:0 0 20px; }
.bf-plan__currency { color:var(--bf-dim); font-size:18px; }
.bf-plan__amount { color:#fff; font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1; }
.bf-plan__period { color:var(--bf-faint); font-size:14px; }
.bf-plan__features { flex:1; font-size:14.5px; }
.bf-plan__features ul { list-style:none; padding:0; }
.bf-plan__features li { position:relative; padding-left:24px; margin-bottom:9px; }
.bf-plan__features li::before { content:"✓"; position:absolute; left:0; color:var(--bf-neon); font-weight:700; }
.bf-plan__cta { width:100%; margin-top:24px; }

/* ---- Reach --------------------------------------------------------------- */

.bf-reach__map { text-align:center; }
.bf-reach__map img { filter: drop-shadow(0 0 40px rgba(43,255,136,.16)); }

/* ---- Closing CTA --------------------------------------------------------- */

.bf-cta { position:relative; overflow:hidden; padding:96px 0; background:linear-gradient(135deg, var(--bf-pcb), var(--bf-void) 70%); border-top:1px solid var(--bf-line); }
.bf-cta__grid {
    position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(43,255,136,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43,255,136,.055) 1px, transparent 1px);
    background-size:44px 44px,44px 44px;
    mask-image:radial-gradient(ellipse 60% 90% at 50% 50%, #000, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse 60% 90% at 50% 50%, #000, transparent 70%);
}
.bf-cta__inner { position:relative; text-align:center; max-width:640px; margin:0 auto; }
.bf-cta__title { font-size:clamp(1.8rem,1.2rem + 2.4vw,2.8rem); margin:0 0 12px; }
.bf-cta__text { margin:0 0 28px; font-size:17px; }
.bf-cta__actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---- Footer -------------------------------------------------------------- */

.bf-footer { position:relative; background:#020406; border-top:1px solid var(--bf-line); padding-top:72px; }
.bf-footer::before {
    content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--bf-neon), transparent); opacity:.55;
}
.bf-footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.4fr; gap:40px; }

.bf-footer__logo { margin-bottom:18px; filter:drop-shadow(0 0 14px rgba(43,255,136,.24)); }
.bf-footer__blurb { font-size:14.5px; margin-bottom:18px; }
.bf-footer__contact { display:flex; flex-direction:column; gap:9px; font-size:14px; }
.bf-footer__contact a { color:var(--bf-dim); display:inline-flex; align-items:center; gap:9px; }
.bf-footer__contact a:hover { color:var(--bf-neon); text-shadow:none; }
.bf-footer__contact i { color:var(--bf-neon); width:16px; }

.bf-footer__heading {
    color:#fff; font-family:var(--bf-mono); font-size:12px;
    letter-spacing:.16em; text-transform:uppercase; margin:0 0 18px;
}
.bf-footer__heading--tight { margin-top:28px; }

.bf-footer .flist { list-style:none; padding:0; margin:0; }
.bf-footer .flist li { margin-bottom:10px; }
.bf-footer .flist a { color:var(--bf-dim); font-size:14.5px; display:inline-block; transition:color .2s var(--bf-ease), transform .2s var(--bf-ease); }
.bf-footer .flist a:hover { color:var(--bf-neon); transform:translateX(4px); text-shadow:none; }

.bf-footer__note { font-size:14px; margin-bottom:14px; }

.bf-subscribe__row { display:flex; gap:8px; }
.bf-subscribe input {
    flex:1; padding:11px 14px; border-radius:10px;
    background:var(--bf-panel); border:1px solid var(--bf-line); color:var(--bf-text);
    font-family:var(--bf-font); font-size:14.5px;
}
.bf-subscribe input:focus { outline:none; border-color:var(--bf-neon); box-shadow:0 0 0 3px rgba(43,255,136,.12); }
.bf-subscribe__btn {
    flex:0 0 auto; width:46px; border:1px solid var(--bf-neon); border-radius:10px;
    background:rgba(43,255,136,.1); color:var(--bf-neon); cursor:pointer;
    transition: all .24s var(--bf-ease);
}
.bf-subscribe__btn:hover { background:var(--bf-neon); color:var(--bf-void); box-shadow:var(--bf-glow-sm); }

.bf-footer__social a {
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:10px; margin-right:8px;
    background:rgba(43,255,136,.05); border:1px solid var(--bf-line);
    transition:all .26s var(--bf-ease);
}
.bf-footer__social a:hover { background:var(--bf-neon); color:var(--bf-void); border-color:var(--bf-neon); box-shadow:var(--bf-glow-md); transform:translateY(-3px); }

.bf-footer__bottom { border-top:1px solid var(--bf-line); margin-top:52px; padding:22px 0; }
.bf-footer__bottom .copyright { margin:0; font-family:var(--bf-mono); font-size:12.5px; color:var(--bf-faint); }

.bf-field-error { color:var(--bf-danger); font-size:13.5px; margin-top:8px; }
.bf-field-ok { color:var(--bf-neon); font-size:13.5px; margin-top:8px; }

/* ---- Grid + tiles (collections, product grids) --------------------------- */

.bf-grid { display:grid; gap:26px; margin:0; padding:0; list-style:none; }
.bf-grid--2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.bf-grid--3 { grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.bf-grid--4 { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }

.bf-tile {
    position:relative; display:flex; flex-direction:column; height:100%;
    background:var(--bf-panel); border:1px solid var(--bf-line);
    border-radius:var(--bf-r-lg); overflow:hidden;
    box-shadow:var(--bf-shadow);
    transition: transform .34s var(--bf-snap), box-shadow .34s var(--bf-ease), border-color .34s var(--bf-ease);
}
.bf-tile__rim {
    position:absolute; inset:0; border-radius:inherit; padding:1px; opacity:0; z-index:3;
    background:linear-gradient(135deg, var(--bf-neon), transparent 42%, transparent 58%, var(--bf-neon));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude; transition:opacity .34s var(--bf-ease); pointer-events:none;
}
.bf-tile:hover { transform:translateY(-7px); border-color:transparent; box-shadow:var(--bf-shadow), var(--bf-glow-lg); }
.bf-tile:hover .bf-tile__rim { opacity:1; }

.bf-tile__media { display:block; position:relative; overflow:hidden; aspect-ratio:1/1; background:#070c11; }
.bf-tile__media img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--bf-snap); }
.bf-tile:hover .bf-tile__media img { transform:scale(1.07); }

/* Scanline sweep across the image on hover. */
.bf-tile__media::after {
    content:""; position:absolute; left:0; right:0; top:-40%; height:40%;
    background:linear-gradient(180deg, transparent, rgba(43,255,136,.14), transparent);
    transition:top .7s var(--bf-ease); pointer-events:none;
}
.bf-tile:hover .bf-tile__media::after { top:110%; }

.bf-tile__body { display:flex; flex-direction:column; flex:1; padding:22px 22px 24px; }
.bf-tile__title { font-size:17px; margin:0 0 8px; color:#fff; }
.bf-tile__text { display:block; flex:1; color:var(--bf-dim); font-size:14.5px; line-height:1.6; }
.bf-tile__cta {
    display:inline-flex; align-items:center; gap:8px; margin-top:16px;
    color:var(--bf-neon); font-weight:700; font-size:14px;
}
.bf-tile__cta i { transition:transform .28s var(--bf-snap); }
.bf-tile:hover .bf-tile__cta i { transform:translateX(5px); }

/* ---- Empty states -------------------------------------------------------- */

.bf-empty {
    text-align:center; padding:72px 24px;
    background:var(--bf-panel); border:1px dashed var(--bf-line);
    border-radius:var(--bf-r-lg);
}
.bf-empty__icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:66px; height:66px; margin-bottom:18px; border-radius:18px;
    background:rgba(43,255,136,.06); border:1px solid var(--bf-line);
    color:var(--bf-neon); font-size:26px;
}
.bf-empty__title { font-size:19px; margin:0 0 8px; }
.bf-empty__text { margin:0 0 22px; }

/* ==========================================================================
   PART B — LEGACY PAGE OVERRIDES
   Shop, cart, checkout and account pages still use the old markup. These
   rules pull them into the same visual language until each is rebuilt.
   ========================================================================== */

.btn, .btn_black, .btn-rounded, button.btn, input[type="submit"].btn {
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding:13px 28px; border-radius:10px;
    border:1px solid var(--bf-neon);
    background:linear-gradient(135deg, rgba(43,255,136,.16), rgba(43,255,136,.06));
    color:var(--bf-neon); font-weight:700; font-size:14.5px; text-transform:none;
    box-shadow:none; transition:all .26s var(--bf-ease);
}
.btn:hover, .btn:focus, .btn_black:hover, .btn-rounded:hover {
    background:var(--bf-neon); color:var(--bf-void);
    box-shadow:var(--bf-glow-md); transform:translateY(-2px); text-shadow:none;
}
.btn_curtain::before, .circle_effect::before { display:none !important; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="tel"], input[type="number"], input[type="url"], select, textarea, .form-control {
    background:var(--bf-panel) !important;
    border:1px solid var(--bf-line) !important;
    border-radius:10px !important;
    color:var(--bf-text) !important;
    padding:12px 15px;
    box-shadow:none !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
    border-color:var(--bf-neon) !important;
    box-shadow:0 0 0 3px rgba(43,255,136,.12) !important;
    outline:none;
}
::placeholder { color:var(--bf-faint); opacity:1; }
label { color:var(--bf-text); font-weight:600; }

.bg-light, .light-layout, .bg-silver, .b-g-white, .bg-white {
    background:var(--bf-panel) !important;
}

.product-box, .product_box, .creative-card {
    background:var(--bf-panel); border:1px solid var(--bf-line);
    border-radius:var(--bf-r-lg); overflow:hidden;
    transition:transform .3s var(--bf-snap), box-shadow .3s var(--bf-ease), border-color .3s var(--bf-ease);
}
.product-box:hover, .product_box:hover {
    transform:translateY(-6px); border-color:var(--bf-neon-deep); box-shadow:var(--bf-glow-lg);
}
.product-box img { transition:transform .5s var(--bf-snap); }
.product-box:hover img { transform:scale(1.06); }
.product-box h6, .product-box h5, .product-box .product-title { color:#fff; }
.product-box .price, .product-box h4 { color:var(--bf-neon); font-family:var(--bf-mono); font-weight:700; }
.product-box del { color:var(--bf-faint); }

.comment-section { list-style:none; padding:0; }
.comment-section > li {
    background:var(--bf-panel); border:1px solid var(--bf-line);
    border-left:3px solid var(--bf-neon-deep);
    border-radius:var(--bf-r); padding:22px 24px; margin-bottom:16px;
    transition:border-left-color .26s var(--bf-ease), transform .26s var(--bf-snap);
}
.comment-section > li:hover { border-left-color:var(--bf-neon); transform:translateX(4px); }
.comment-section h6 { color:#fff; }
.comment-section h6 span { color:var(--bf-faint); font-family:var(--bf-mono); font-size:13px; }

table, .table {
    background:var(--bf-panel); border:1px solid var(--bf-line);
    border-radius:var(--bf-r-lg); overflow:hidden;
    border-collapse:separate; border-spacing:0;
}
table thead th, .table thead th {
    background:#070c11; color:var(--bf-neon);
    font-family:var(--bf-mono); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
    padding:15px 18px; border:0; border-bottom:1px solid var(--bf-line);
}
table tbody td, .table tbody td {
    padding:16px 18px; border:0; border-bottom:1px solid var(--bf-line); color:var(--bf-dim);
}
table tbody tr:last-child td { border-bottom:0; }
table tbody tr:hover { background:rgba(43,255,136,.03); }

.alert { background:var(--bf-panel); border:1px solid var(--bf-line); border-left:3px solid var(--bf-neon); border-radius:var(--bf-r); color:var(--bf-text); }
.alert-danger { border-left-color:var(--bf-danger); }
.alert-warning { border-left-color:var(--bf-amber); }

.rating i, .rating .fa { color:var(--bf-amber); }

.owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next {
    background:var(--bf-panel) !important; border:1px solid var(--bf-line);
    border-radius:10px; width:44px; height:44px; color:var(--bf-neon) !important;
    transition:all .26s var(--bf-ease);
}
.owl-carousel .owl-nav .owl-prev:hover, .owl-carousel .owl-nav .owl-next:hover {
    background:var(--bf-neon) !important; color:var(--bf-void) !important;
    border-color:var(--bf-neon); box-shadow:var(--bf-glow-md);
}
.owl-theme .owl-dots .owl-dot span { background:var(--bf-line); width:8px; height:8px; border-radius:99px; transition:width .3s var(--bf-snap), background .3s var(--bf-ease); }
.owl-theme .owl-dots .owl-dot.active span { background:var(--bf-neon); width:30px; box-shadow:var(--bf-glow-sm); }

/* Mobile drawer, driven by custom.js */
.responsive_nav { background:var(--bf-panel); border-right:1px solid var(--bf-line); }
.responsive_nav ul li a { color:var(--bf-text); }
.responsive_nav ul li a:hover { color:var(--bf-neon); }
.res_overlay { background:rgba(4,7,10,.78); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1100px) {
    .bf-footer__grid { grid-template-columns:1.4fr 1fr 1fr; }
    .bf-footer__subscribe { grid-column:1 / -1; }
}

@media (max-width:991px) {
    .bf-section, .bf-cta { padding:64px 0; }
    .bf-intro__grid { grid-template-columns:1fr; gap:38px; }
    .bf-nav { display:none; }
    .bf-burger { display:flex; }
    .bf-pagehead__inner { min-height:220px; padding:44px 0; }
}

@media (max-width:767px) {
    body { font-size:15.5px; }
    body::before { background-size:40px 40px,40px 40px; }

    .bf-utility { font-size:11.5px; }
    .bf-utility__left { display:none; }
    .bf-iconbtn { padding:6px; }
    .bf-account__link span { display:none; }

    .bf-logo img { max-height:36px; }

    .bf-section, .bf-cta { padding:48px 0; }
    .bf-sectionhead { margin-bottom:34px; }

    .bf-footer__grid { grid-template-columns:1fr; gap:32px; }
    .bf-footer { padding-top:52px; }

    /* 44px is the accessible minimum touch target. */
    .bf-btn, .btn, .btn_black { min-height:44px; padding:14px 24px; }

    .bf-cta__actions { flex-direction:column; }
    .bf-cta__actions .bf-btn { width:100%; }
}

/* ==========================================================================
   REDUCED MOTION
   This design is motion-heavy; vestibular disorders are common. Everything
   decorative stops. Nothing functional is lost.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
    body::before, .bf-hero__glow, .bf-pagehead__scan,
    .bf-bar::after, .bf-services__glow, .bf-dot { animation:none !important; }
    .bf-pagehead__title::after { animation:none !important; opacity:1; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
    body { background:#fff !important; color:#000 !important; }
    body::before, .bf-header, .bf-footer, .bf-cta, .bf-pagehead { display:none !important; }
    .product-box, table, .comment-section > li { border:1px solid #999 !important; background:#fff !important; }
    h1,h2,h3,p,td { color:#000 !important; }
}