/* ===================================================================
   Voltage theme - energy & electricity
   Version: 1.0.0
   Author: Reveloni
   For: CMS 6.0.2+

   Characteristics: high voltage. The signature is the electric discharge -
   a branching lightning bolt across the hero, a field of thin scattered
   sparks behind it, edges glowing as if under current, and elements that
   "charge up" (brighten their glow) on hover. Not neon city like Cyberpunk
   nor carbon speed like Apex - pure physical energy: the arc, the spark,
   the charged field. The full/energetic variant: thicker bolts, a busier
   spark field, a more charged surface.

   The admin colour scheme becomes the ENERGY COLOUR: bolts, glows, buttons
   and accents all take it, so one theme runs electric cyan, plasma violet,
   high-voltage yellow or green without touching the CSS. The base is cool
   white steel (light) or deep night (dark) - and dark mode is where the
   glow burns brightest.

   Signature devices, all pure CSS: a branching lightning hero with a spark
   field, glowing charged edges, a spark section divider, a power-symbol
   toggle, a charged price badge, and three energy motifs (lightning bolt,
   plasma ball, power symbol) as page-card placeholders.

   For electricians, energy and renewables firms (solar, storage), EV
   charging, electronics, gaming and e-sport, energy-drink and fitness
   brands, tech and power startups.

   Changelog:
     1.0.0 - Initial release. Built with auto-fit grids, .page-card-image
             styled as the image itself, the crop-safe gallery pipeline and
             a header-anchored dropdown from day one.
   =================================================================== */

/* === RESET === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === PALETTE ===
   Engine injects --primary / --secondary / --accent on :root (inline).
   --v-energy is the discharge colour (from --primary); the glow is built
   from it so the whole theme electrifies to the chosen scheme. */
:root {
    /* Cool steel surfaces */
    --v-surface: #eef1f5;
    --v-surface-raised: #f8fafc;
    --v-surface-deep: #dfe4ea;

    /* Steel ink */
    --v-ink: #141922;
    --v-ink-soft: #4a5464;
    --v-ink-faint: #8b95a5;

    /* Energy - the discharge colour, scheme-aware */
    --v-energy: color-mix(in srgb, var(--primary, #12b6e8) 82%, #0aa3d4);
    --v-energy-bright: color-mix(in srgb, var(--primary, #4dd6ff) 66%, #4dd6ff);
    --v-energy-soft: color-mix(in srgb, var(--v-energy) 18%, transparent);
    --v-energy-deep: color-mix(in srgb, var(--v-energy) 72%, #04263a);

    /* Glow halo built from the energy colour */
    --v-glow: color-mix(in srgb, var(--v-energy-bright) 55%, transparent);
    --v-glow-strong: color-mix(in srgb, var(--v-energy-bright) 80%, transparent);

    /* Structure */
    --v-line: color-mix(in srgb, var(--v-ink) 16%, transparent);
    --v-line-soft: color-mix(in srgb, var(--v-ink) 8%, transparent);

    /* Dark field used behind bolts in BOTH modes (hero / placeholders) */
    --v-field: #0b1018;
    --v-field-edge: #1c2430;

    --v-shadow-sm: 0 2px 8px rgba(20, 25, 34, 0.10);
    --v-shadow-md: 0 12px 30px rgba(20, 25, 34, 0.16);
    --v-shadow-lg: 0 22px 52px rgba(20, 25, 34, 0.22);

    --v-radius: 8px;
    --v-radius-lg: 14px;
    --v-pill: 999px;

    /* fast, snappy easing - a discharge, not a glide */
    --v-transition: 0.28s cubic-bezier(0.4, 0, 0.1, 1);

    --font-display: 'Chakra Petch', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif;

    /* Aliases some engine snippets rely on */
    --text: var(--v-ink);
    --text-light: var(--v-ink-soft);
}

/* Discharge in the dark - where the glow burns brightest */
[data-theme="dark"] {
    --v-surface: #0a0e15;
    --v-surface-raised: #121824;
    --v-surface-deep: #060910;

    --v-ink: #eaf0f8;
    --v-ink-soft: #9aa6b8;
    --v-ink-faint: #626d80;

    --v-energy: color-mix(in srgb, var(--primary, #35c9f5) 76%, #35c9f5);
    --v-energy-bright: color-mix(in srgb, var(--primary, #7ee0ff) 66%, #7ee0ff);
    --v-energy-soft: color-mix(in srgb, var(--v-energy) 24%, transparent);
    --v-energy-deep: color-mix(in srgb, var(--v-energy) 60%, #021a28);

    --v-glow: color-mix(in srgb, var(--v-energy-bright) 60%, transparent);
    --v-glow-strong: color-mix(in srgb, var(--v-energy-bright) 90%, transparent);

    --v-line: color-mix(in srgb, #ffffff 15%, transparent);
    --v-line-soft: color-mix(in srgb, #ffffff 8%, transparent);

    --v-field: #05080e;
    --v-field-edge: #161d28;

    --v-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --v-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.6);
    --v-shadow-lg: 0 22px 52px rgba(0, 0, 0, 0.7);
}

/* Spark field: many thin angled sparks scattered over a dark field. The
   energetic/full variant - a busy field, not a few strands. */
:root {
    --v-sparks:
        linear-gradient(74deg, transparent 0 12%, var(--v-energy-soft) 12% 12.4%, transparent 12.4% 30%),
        linear-gradient(-68deg, transparent 0 22%, var(--v-energy-soft) 22% 22.4%, transparent 22.4% 44%),
        linear-gradient(82deg, transparent 0 38%, var(--v-energy-soft) 38% 38.3%, transparent 38.3% 60%),
        linear-gradient(-78deg, transparent 0 54%, var(--v-energy-soft) 54% 54.4%, transparent 54.4% 72%),
        linear-gradient(70deg, transparent 0 66%, var(--v-energy-soft) 66% 66.3%, transparent 66.3% 84%),
        linear-gradient(-72deg, transparent 0 80%, var(--v-energy-soft) 80% 80.4%, transparent 80.4% 96%),
        linear-gradient(86deg, transparent 0 90%, var(--v-energy-soft) 90% 90.3%, transparent 90.3% 100%);
    --v-sparks-size: 220px 180px, 260px 200px, 190px 160px, 240px 210px, 200px 170px, 230px 190px, 210px 180px;
}

/* === BASE === */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--v-ink);
    background: var(--v-surface);
    transition: background var(--v-transition), color var(--v-transition);
}

::selection {
    background: var(--v-energy-soft);
    color: var(--v-ink);
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
}

img {
    max-width: 100%;
}

/* === ANIMATIONS (CMS framework) === */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(var(--animation-offset, 20px));
    transition: opacity 0.7s ease, transform 0.7s ease;
}

body.js-ready[data-animations-enabled="true"] .animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

body:not([data-animations-enabled="true"]) .animate-on-scroll {
    opacity: 1;
    transform: none;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--v-ink);
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--v-energy);
    text-decoration: none;
    transition: color var(--v-transition);
}

a:hover {
    color: var(--v-energy-bright);
}

/* Technical lettering for labels and UI */
.site-title,
.breadcrumbs,
.btn,
.cta-button,
.page-card-link,
.footer-section h3,
.hamburger-btn,
.form-group label,
.lightbox-counter {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* === HEADER === */
header {
    position: relative;
    z-index: 100;
    background: var(--v-surface-raised);
    border-bottom: 1px solid var(--v-line-soft);
    transition: background var(--v-transition);
}

/* Charged energy line under the bar */
header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--v-energy);
    box-shadow: 0 0 12px var(--v-glow-strong), 0 0 4px var(--v-energy);
    pointer-events: none;
}

/* The dropdown anchors to this box, so `top: 100%` is the bottom of the
   bar regardless of logo height. */
header .container {
    position: relative;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 0;
    gap: 1rem;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-container img {
    height: 80px;
    width: auto;
    display: block;
}

.site-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--v-ink);
}

/* === NAV / HAMBURGER === */
nav ul {
    list-style: none;
    display: flex;
    align-items: center;
}

.hamburger-menu {
    /* static on purpose: the header container is the anchor */
    position: static;
}

.hamburger-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--v-energy);
    border: none;
    border-radius: var(--v-radius);
    color: #04121a;
    font-size: 0.82rem;
    padding: 0.6rem 1.4rem;
    cursor: pointer;
    box-shadow: 0 0 14px var(--v-glow), var(--v-shadow-sm);
    transition: background var(--v-transition), box-shadow var(--v-transition), transform var(--v-transition);
}

.hamburger-btn:hover {
    background: var(--v-energy-bright);
    box-shadow: 0 0 22px var(--v-glow-strong), var(--v-shadow-sm);
    transform: translateY(-1px);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    /* aligns with the button: the container's padding box ends 1.5rem outside it */
    right: 1.5rem;
    min-width: 252px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--v-surface-raised);
    border: 1px solid var(--v-line);
    border-top: 2px solid var(--v-energy);
    border-radius: var(--v-radius);
    box-shadow: 0 0 20px var(--v-glow), var(--v-shadow-lg);
    z-index: 300;
}

.dropdown-menu.active {
    display: block;
}

.dropdown-menu ul {
    display: block;
    padding: 0.5rem 0;
}

.dropdown-menu li {
    display: block;
}

.dropdown-menu a {
    display: block;
    padding: 0.62rem 1.4rem;
    color: var(--v-ink);
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background var(--v-transition), border-color var(--v-transition), color var(--v-transition);
}

.dropdown-menu a:hover {
    background: var(--v-energy-soft);
    border-left-color: var(--v-energy);
}

.dropdown-menu a.active {
    border-left-color: var(--v-energy);
    color: var(--v-energy);
}

/* === BREADCRUMBS === */
.breadcrumbs {
    background: var(--v-surface-deep);
    border-bottom: 1px solid var(--v-line-soft);
    font-size: 0.78rem;
}

.breadcrumbs .container {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.breadcrumbs a {
    color: var(--v-ink-soft);
}

.breadcrumbs a:hover {
    color: var(--v-energy);
}

.breadcrumbs span {
    color: var(--v-energy);
}

.breadcrumbs strong {
    color: var(--v-ink);
    font-weight: 700;
}

/* === HERO - branching lightning over a spark field === */
.hero {
    position: relative;
    padding: 5.5rem 1.5rem 5rem;
    text-align: center;
    overflow: hidden;
    background:
        var(--v-sparks),
        radial-gradient(ellipse 90% 80% at 50% 30%, var(--v-field-edge), var(--v-field));
    background-size: var(--v-sparks-size), auto;
}

/* Main branching lightning bolt (drawn with clip-path), glowing */
.hero::before {
    content: '';
    position: absolute;
    top: -4%;
    left: 50%;
    width: 200px;
    height: 116%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(180deg, var(--v-energy-bright), var(--v-energy) 60%, var(--v-energy-deep));
    /* a jagged, branching bolt */
    clip-path: polygon(
        52% 0, 46% 22%, 58% 24%, 40% 48%,
        50% 50%, 44% 50%, 60% 50%,   /* branch node */
        38% 74%, 52% 76%, 30% 100%,
        36% 78%, 24% 78%, 44% 54%,
        34% 52%, 50% 30%, 42% 28%, 56% 6%);
    filter: drop-shadow(0 0 10px var(--v-glow-strong)) drop-shadow(0 0 22px var(--v-glow));
    opacity: 0.92;
    animation: v-flicker 5s ease-in-out infinite;
}

@keyframes v-flicker {
    0%, 100%   { opacity: 0.9; filter: drop-shadow(0 0 10px var(--v-glow-strong)) drop-shadow(0 0 22px var(--v-glow)); }
    47%        { opacity: 0.9; }
    48%        { opacity: 0.55; }
    49%        { opacity: 1; filter: drop-shadow(0 0 16px var(--v-glow-strong)) drop-shadow(0 0 34px var(--v-glow)); }
    50%        { opacity: 0.7; }
    51%        { opacity: 0.95; }
}

/* Dark veil so the title reads over the field + bolt */
.hero .container {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero h1 {
    font-size: clamp(2.5rem, 6.5vw, 4.4rem);
    font-weight: 700;
    color: #f4f9ff;
    letter-spacing: 0.02em;
    margin-bottom: 1.1rem;
    text-shadow: 0 0 24px var(--v-glow), 0 2px 20px rgba(0, 0, 0, 0.6);
}

/* Spark rule under the title */
.hero h1::after {
    content: '';
    display: block;
    width: 130px;
    height: 6px;
    margin: 1.35rem auto 0;
    background: linear-gradient(90deg, transparent, var(--v-energy) 20%, var(--v-energy-bright) 50%, var(--v-energy) 80%, transparent);
    box-shadow: 0 0 12px var(--v-glow-strong);
    /* jagged spark line */
    clip-path: polygon(0 50%, 12% 0, 24% 50%, 36% 20%, 48% 50%, 60% 10%, 72% 50%, 84% 30%, 100% 50%, 84% 70%, 72% 50%, 60% 90%, 48% 50%, 36% 80%, 24% 50%, 12% 100%);
}

.hero p {
    font-size: 1.15rem;
    color: rgba(228, 238, 250, 0.82);
    max-width: 54ch;
    margin: 0 auto 1.35rem;
    position: relative;
    z-index: 2;
}

/* === HERO WITH BACKGROUND IMAGE === */
.hero--has-bg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 58vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5.5rem 2rem;
    border-radius: var(--v-radius-lg);
    margin: 1.25rem auto 0;
    max-width: 1180px;
    border: 1px solid var(--v-energy);
    box-shadow: 0 0 24px var(--v-glow), inset 0 0 40px rgba(0, 0, 0, 0.3);
}

.hero--has-bg::before {
    /* keep a faint bolt over the image */
    content: '';
    position: absolute;
    top: -4%;
    left: 50%;
    width: 180px;
    height: 116%;
    transform: translateX(-50%);
    z-index: 0;
    background: linear-gradient(180deg, var(--v-energy-bright), var(--v-energy) 60%, var(--v-energy-deep));
    clip-path: polygon(
        52% 0, 46% 22%, 58% 24%, 40% 48%,
        50% 50%, 44% 50%, 60% 50%,
        38% 74%, 52% 76%, 30% 100%,
        36% 78%, 24% 78%, 44% 54%,
        34% 52%, 50% 30%, 42% 28%, 56% 6%);
    filter: drop-shadow(0 0 12px var(--v-glow-strong));
    opacity: 0.5;
    animation: none;
}

.hero--has-bg .hero-bg-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}

.hero--has-bg .hero-bg-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero--has-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 9, 14, 0.36) 0%, rgba(6, 9, 14, 0.70) 100%);
}

.hero--overlay-none::after   { background: linear-gradient(180deg, transparent 0%, rgba(6, 9, 14, 0.30) 100%); }
.hero--overlay-light::after  { background: linear-gradient(180deg, rgba(6, 9, 14, 0.16) 0%, rgba(6, 9, 14, 0.46) 100%); }
.hero--overlay-medium::after { background: linear-gradient(180deg, rgba(6, 9, 14, 0.36) 0%, rgba(6, 9, 14, 0.70) 100%); }
.hero--overlay-strong::after { background: linear-gradient(180deg, rgba(6, 9, 14, 0.54) 0%, rgba(6, 9, 14, 0.86) 100%); }

.hero--has-bg .container {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero--has-bg h1 {
    color: #fff;
    text-shadow: 0 0 24px var(--v-glow), 0 3px 22px rgba(0, 0, 0, 0.6);
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
}

.hero--has-bg p {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

/* === BUTTONS - charged === */
.btn,
.cta-button {
    display: inline-block;
    background: var(--v-energy);
    border: none;
    border-radius: var(--v-radius);
    color: #04121a;
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.85rem 2.2rem;
    cursor: pointer;
    box-shadow: 0 0 16px var(--v-glow), var(--v-shadow-sm);
    transition: background var(--v-transition), box-shadow var(--v-transition), transform var(--v-transition);
}

.btn:hover,
.cta-button:hover {
    background: var(--v-energy-bright);
    box-shadow: 0 0 26px var(--v-glow-strong), var(--v-shadow-md);
    transform: translateY(-2px);
}

.cta-button {
    margin-top: 0.85rem;
}

/* === CONTENT === */
main {
    background: var(--v-surface);
}

.content-section {
    padding: 3.25rem 0;
}

.content-section h1 {
    font-size: clamp(2rem, 4.4vw, 3rem);
    margin-bottom: 1.25rem;
}

.content-section h2 {
    font-size: 1.85rem;
    margin: 2.25rem 0 1rem;
}

/* Spark rule under section headings */
.content-section h2::after {
    content: '';
    display: block;
    width: 84px;
    height: 6px;
    margin-top: 0.6rem;
    background: linear-gradient(90deg, var(--v-energy), var(--v-energy-bright), var(--v-energy));
    box-shadow: 0 0 10px var(--v-glow);
    clip-path: polygon(0 50%, 12% 0, 24% 50%, 36% 20%, 48% 50%, 60% 10%, 72% 50%, 84% 30%, 100% 50%, 84% 70%, 72% 50%, 60% 90%, 48% 50%, 36% 80%, 24% 50%, 12% 100%);
}

.content-section h3 {
    font-size: 1.35rem;
    margin: 1.8rem 0 0.7rem;
}

.content-section ul,
.content-section ol {
    margin: 0 0 1.15rem 1.5rem;
}

.content-section ul li::marker {
    content: '\26A1  ';
    color: var(--v-energy);
}

.content-section ol li::marker {
    color: var(--v-energy);
    font-family: var(--font-display);
}

.content-section blockquote {
    margin: 1.85rem 0;
    padding: 1.15rem 1.5rem;
    background: var(--v-surface-raised);
    border-left: 3px solid var(--v-energy);
    border-radius: var(--v-radius);
    color: var(--v-ink-soft);
    box-shadow: 0 0 14px var(--v-energy-soft), var(--v-shadow-sm);
}

/* === PAGE CARDS - charged panels === */
.page-cards-grid {
    display: grid;
    /* auto-fit: a lone subpage fills the row, pairs split it evenly */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.25rem;
    margin: 2.5rem 0;
}

.page-card {
    display: flex;
    flex-direction: column;
    background: var(--v-surface-raised);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    box-shadow: var(--v-shadow-sm);
    transition: transform var(--v-transition), box-shadow var(--v-transition), border-color var(--v-transition);
}

.page-card:hover {
    transform: translateY(-6px);
    border-color: var(--v-energy);
    box-shadow: 0 0 22px var(--v-glow), var(--v-shadow-md);
}

/* The engine puts .page-card-image on the element ITSELF: an <img> for a
   thumbnail (optionally inside an unclassed <picture>), or a <div> for the
   placeholder. Style it as the image - object-fit is a no-op on the div. */
.page-card-image {
    display: block;
    width: 100%;
    height: 208px;
    object-fit: cover;
    object-position: center;
    background: var(--v-surface-deep);
    border-bottom: 2px solid var(--v-energy);
}

/* <picture> carries no class; make it a block so the image spans the card */
.page-card > picture {
    display: block;
    line-height: 0;
}

img.page-card-image {
    filter: saturate(1.04);
    transition: transform var(--v-transition), filter var(--v-transition);
}

.page-card:hover img.page-card-image {
    transform: scale(1.05);
    filter: saturate(1.15);
}

/* --- Placeholders: three energy motifs on a spark field --- */
.page-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background:
        var(--v-sparks),
        radial-gradient(ellipse 90% 90% at 50% 40%, var(--v-field-edge), var(--v-field));
    background-size: var(--v-sparks-size), auto;
}

/* Hide the engine emoji */
.page-card-placeholder span {
    display: none;
}

/* --- Motif 1: LIGHTNING BOLT --- */
.page-card:nth-child(3n+1) .page-card-placeholder::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 60px;
    height: 92px;
    background: linear-gradient(180deg, var(--v-energy-bright), var(--v-energy) 55%, var(--v-energy-deep));
    /* classic lightning bolt */
    clip-path: polygon(58% 0, 20% 52%, 46% 52%, 30% 100%, 82% 40%, 52% 40%, 74% 0);
    filter: drop-shadow(0 0 10px var(--v-glow-strong)) drop-shadow(0 0 20px var(--v-glow));
}

/* --- Motif 2: PLASMA BALL --- */
.page-card:nth-child(3n+2) .page-card-placeholder::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background:
        /* radiating arcs from the core */
        repeating-conic-gradient(from 0deg,
            var(--v-energy-bright) 0deg 1.5deg, transparent 1.5deg 30deg),
        /* glowing core */
        radial-gradient(circle, var(--v-energy-bright) 0 12px, var(--v-energy) 12px 20px, transparent 40px),
        /* globe tint */
        radial-gradient(circle, transparent 0 42px, var(--v-energy-soft) 42px 50px, transparent 50px);
    -webkit-mask: radial-gradient(circle, #000 0 51px, transparent 51px);
            mask: radial-gradient(circle, #000 0 51px, transparent 51px);
    border: 1px solid var(--v-energy-soft);
    box-shadow: 0 0 16px var(--v-glow), inset 0 0 20px var(--v-glow);
    filter: drop-shadow(0 0 8px var(--v-glow));
}

/* plasma ball core dot */
.page-card:nth-child(3n+2) .page-card-placeholder::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, var(--v-energy-bright));
    box-shadow: 0 0 14px var(--v-glow-strong);
}

/* --- Motif 3: POWER SYMBOL --- */
.page-card:nth-child(3n) .page-card-placeholder::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    /* the power ring: a circle with a gap at top */
    background:
        conic-gradient(from -32deg, var(--v-energy) 0deg 296deg, transparent 296deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 30px, #000 30px 40px, transparent 40px);
            mask: radial-gradient(circle, transparent 0 30px, #000 30px 40px, transparent 40px);
    filter: drop-shadow(0 0 8px var(--v-glow-strong)) drop-shadow(0 0 16px var(--v-glow));
}

/* power symbol vertical bar */
.page-card:nth-child(3n) .page-card-placeholder::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -62%);
    z-index: 2;
    width: 7px;
    height: 34px;
    border-radius: var(--v-pill);
    background: linear-gradient(var(--v-energy-bright), var(--v-energy));
    box-shadow: 0 0 12px var(--v-glow-strong);
}

.page-card:hover .page-card-placeholder::after {
    filter: drop-shadow(0 0 14px var(--v-glow-strong)) drop-shadow(0 0 28px var(--v-glow));
    transition: filter var(--v-transition);
}

.page-card-content {
    padding: 1.7rem 1.6rem 1.6rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page-card h3,
.page-card-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.65rem;
    color: var(--v-ink);
}

.page-card-excerpt {
    color: var(--v-ink-soft);
    font-size: 1rem;
    flex: 1;
    margin-bottom: 1.1rem;
}

.page-card-link {
    align-self: flex-start;
    color: var(--v-energy);
    font-size: 0.78rem;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--v-energy-soft);
    transition: color var(--v-transition), border-color var(--v-transition);
}

.page-card-link:hover {
    color: var(--v-energy-bright);
    border-color: currentColor;
}

/* === GALLERY === */
.gallery-grid {
    display: grid;
    /* auto-fit so one image spans the width and pairs split it evenly */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.75rem;
    margin: 2.25rem 0 2.75rem;
}

.gallery-item {
    position: relative;
    cursor: pointer;
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    background: var(--v-surface-deep);
    border: 1px solid var(--v-line);
    box-shadow: var(--v-shadow-sm);
    transition: transform var(--v-transition), box-shadow var(--v-transition), border-color var(--v-transition);
}

.gallery-item:hover {
    transform: translateY(-5px);
    border-color: var(--v-energy);
    box-shadow: 0 0 20px var(--v-glow), var(--v-shadow-md);
}

/* Energy bar sweeping in on hover */
.gallery-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--v-energy);
    box-shadow: 0 0 12px var(--v-glow-strong);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--v-transition);
    z-index: 2;
}

.gallery-item:hover::after {
    transform: scaleX(1);
}

/* The 4:3 window carries the ratio; the child fills it. Explicit
   height:auto overrides the engine's height attribute so portraits and
   squares crop to 4:3 instead of collapsing into vertical strips. */
.gallery-item > img,
.gallery-item > picture {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    overflow: hidden;
    transition: transform 0.4s ease;
}

.gallery-item > img {
    object-fit: cover;
}

.gallery-item > picture img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item source {
    display: none;
}

.gallery-item:hover > img,
.gallery-item:hover > picture {
    transform: scale(1.05);
}

/* === LIGHTBOX === */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4, 7, 12, 0.95);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 88vw;
    max-height: 84vh;
    border-radius: var(--v-radius);
    border: 1px solid var(--v-energy);
    box-shadow: 0 0 30px var(--v-glow), 0 26px 74px rgba(0, 0, 0, 0.7);
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    background: var(--v-energy);
    border: none;
    border-radius: var(--v-radius);
    color: #04121a;
    font-family: var(--font-display);
    cursor: pointer;
    box-shadow: 0 0 16px var(--v-glow), var(--v-shadow-md);
    transition: background var(--v-transition), box-shadow var(--v-transition), transform var(--v-transition);
}

.lightbox-close:hover,
.lightbox-nav:hover {
    background: var(--v-energy-bright);
    box-shadow: 0 0 24px var(--v-glow-strong);
    transform: scale(1.08);
}

.lightbox-close {
    top: 1.5rem;
    right: 1.7rem;
    width: 46px;
    height: 46px;
    font-size: 1.35rem;
    line-height: 1;
}

.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 1.5rem;
}

.lightbox-nav:hover {
    transform: translateY(-50%) scale(1.08);
}

.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

.lightbox-counter {
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--v-energy-bright);
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.15em;
    text-shadow: 0 0 10px var(--v-glow);
}

/* === PRICE TAG - charged badge === */
.price-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    background: var(--v-field);
    border: 1px solid var(--v-energy);
    border-radius: var(--v-radius);
    color: var(--v-energy-bright);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0.55rem 1.3rem;
    margin: 0.9rem 0 1.1rem;
    box-shadow: 0 0 16px var(--v-glow), inset 0 0 12px var(--v-energy-soft);
    text-shadow: 0 0 12px var(--v-glow-strong);
}

/* a bolt glyph before the price */
.price-tag::before {
    content: '\26A1';
    font-size: 1.1rem;
    color: var(--v-energy);
}

a.price-tag:hover {
    box-shadow: 0 0 24px var(--v-glow-strong), inset 0 0 16px var(--v-energy-soft);
    color: #fff;
}

/* === TESTIMONIALS - charged cards === */
.testimonials-grid {
    display: grid;
    /* auto-fit for consistent stretching with one or two testimonials */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.25rem;
    margin: 2.5rem 0;
}

.testimonial-card {
    position: relative;
    background: var(--v-surface-raised);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-lg);
    padding: 2.6rem 1.8rem 1.7rem;
    box-shadow: var(--v-shadow-sm);
    transition: transform var(--v-transition), box-shadow var(--v-transition), border-color var(--v-transition);
}

/* a bolt glyph pinned at the top */
.testimonial-card::before {
    content: '\26A1';
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.3rem;
    color: var(--v-energy);
    text-shadow: 0 0 12px var(--v-glow-strong);
}

.testimonial-card:hover {
    transform: translateY(-4px);
    border-color: var(--v-energy);
    box-shadow: 0 0 20px var(--v-glow), var(--v-shadow-md);
}

.testimonial-rating {
    color: var(--v-energy);
    letter-spacing: 0.18em;
    margin-bottom: 0.6rem;
    margin-top: 0.4rem;
    font-size: 0.95rem;
}

.testimonial-text {
    color: var(--v-ink-soft);
    margin-bottom: 0.9rem;
}

.testimonial-author {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--v-ink);
}

.testimonial-author::before {
    content: '\2014\00a0';
    color: var(--v-energy);
}

/* === CONTACT FORM === */
.contact-form {
    max-width: 680px;
    margin: 2.75rem auto;
    background: var(--v-surface-raised);
    border: 1px solid var(--v-line);
    border-top: 2px solid var(--v-energy);
    border-radius: var(--v-radius-lg);
    padding: 2.6rem 2.3rem;
    box-shadow: 0 0 20px var(--v-energy-soft), var(--v-shadow-md);
}

.contact-form h2 {
    text-align: center;
}

.contact-form h2::after {
    margin-left: auto;
    margin-right: auto;
}

.form-group {
    margin-bottom: 1.35rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.74rem;
    color: var(--v-ink-soft);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    background: var(--v-surface);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius);
    color: var(--v-ink);
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.8rem 1rem;
    transition: border-color var(--v-transition), box-shadow var(--v-transition);
}

.form-group textarea {
    min-height: 155px;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--v-energy);
    box-shadow: 0 0 0 3px var(--v-energy-soft), 0 0 14px var(--v-glow);
}

/* === ALERTS === */
.error,
.success {
    border-radius: var(--v-radius);
    padding: 0.9rem 1.2rem;
    margin-bottom: 1.25rem;
    font-size: 0.98rem;
    border-left: 4px solid;
}

.error {
    background: color-mix(in srgb, #e0405a 12%, var(--v-surface-raised));
    border-color: #e0405a;
    color: color-mix(in srgb, #c02a44 76%, var(--v-ink));
}

.success {
    background: color-mix(in srgb, var(--v-energy) 14%, var(--v-surface-raised));
    border-color: var(--v-energy);
    color: var(--v-ink);
}

/* === FOOTER - dark charged base === */
footer {
    position: relative;
    background:
        var(--v-sparks),
        radial-gradient(ellipse 90% 120% at 50% 0%, var(--v-field-edge), var(--v-field));
    background-size: var(--v-sparks-size), auto;
    color: rgba(228, 238, 250, 0.72);
    margin-top: 3.5rem;
    overflow: hidden;
}

/* charged energy line at the very top */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--v-energy);
    box-shadow: 0 0 14px var(--v-glow-strong);
    z-index: 1;
}

.footer-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 2.25rem;
    padding: 3.25rem 0 2.25rem;
}

.footer-section h3 {
    font-size: 0.86rem;
    color: #eaf0f8;
    margin-bottom: 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--v-energy-soft);
}

.footer-section p {
    margin-bottom: 0.45rem;
    font-size: 0.98rem;
}

.footer-section a {
    color: rgba(228, 238, 250, 0.72);
}

.footer-section a:hover {
    color: var(--v-energy-bright);
}

.footer-menu {
    list-style: none;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 0.4rem;
}

.social-links {
    display: flex;
    gap: 0.7rem;
    margin-top: 0.6rem;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--v-energy-soft);
    color: #eaf0f8;
    transition: background var(--v-transition), box-shadow var(--v-transition), transform var(--v-transition);
}

.social-links a:hover {
    background: var(--v-energy);
    color: #04121a;
    box-shadow: 0 0 16px var(--v-glow-strong);
    transform: translateY(-2px);
}

.copyright {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.1rem 0 1.3rem;
    text-align: center;
    font-size: 0.84rem;
    color: rgba(228, 238, 250, 0.5);
}

.copyright::before {
    content: '\26A1';
    display: block;
    color: var(--v-energy);
    font-size: 1.1rem;
    margin: 0 auto 0.5rem;
    text-shadow: 0 0 12px var(--v-glow);
}

/* === DARK MODE TOGGLE - power button === */
.dark-mode-toggle {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1200;
    width: 48px;
    height: 48px;
    border: 2px solid var(--v-energy);
    border-radius: 50%;
    background: var(--v-field);
    box-shadow: 0 0 18px var(--v-glow), var(--v-shadow-md);
    cursor: pointer;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--v-transition), box-shadow var(--v-transition);
}

.dark-mode-toggle::before {
    content: '\26A1';
    font-size: 1.2rem;
    line-height: 1;
    color: var(--v-energy-bright);
    text-shadow: 0 0 10px var(--v-glow-strong);
}

html[data-theme="dark"] .dark-mode-toggle::before {
    content: '\263D';
}

.dark-mode-toggle:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 0 26px var(--v-glow-strong), var(--v-shadow-lg);
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
    .hero {
        padding: 4rem 1.25rem 3.75rem;
    }

    .hero--has-bg {
        min-height: 48vh;
        margin: 1rem 1rem 0;
    }

    .page-cards-grid,
    .testimonials-grid {
        gap: 1.85rem;
    }
}

@media (max-width: 640px) {
    body {
        font-size: 1rem;
    }

    .header-content {
        padding: 0.85rem 0;
    }

    .logo-container img {
        height: 56px;
    }

    .site-title {
        font-size: 1.3rem;
    }

    .dropdown-menu {
        /* position and top come from the base rule (anchored to the header
           container); on small screens the menu spans the width */
        left: 1.5rem;
        right: 1.5rem;
        min-width: 0;
    }

    .hero h1 {
        font-size: 2.4rem;
    }

    .hero::before {
        width: 140px;
    }

    .content-section {
        padding: 2.25rem 0;
    }

    .gallery-grid {
        /* auto-fit here too, tighter columns on small screens */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1.25rem;
    }

    .contact-form {
        padding: 1.9rem 1.3rem;
    }

    .lightbox-nav {
        width: 44px;
        height: 44px;
    }

    .lightbox-prev { left: 0.6rem; }
    .lightbox-next { right: 0.6rem; }

    .dark-mode-toggle {
        bottom: 1.1rem;
        right: 1.1rem;
        width: 44px;
        height: 44px;
    }

    .footer-content {
        gap: 1.75rem;
        padding: 2.5rem 0 1.75rem;
    }
}

/* Reduced motion: still the flicker and sweeps */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero::before {
        animation: none;
    }

    .animate-on-scroll,
    .page-card,
    .gallery-item,
    .gallery-item > img,
    .gallery-item > picture,
    .gallery-item::after,
    .page-card-placeholder::after,
    .testimonial-card,
    .dark-mode-toggle {
        transition: none;
    }
}