/* ─── Grupo GB — Design System ──────────────────────────────────────────────── */

/* ─── DARK THEME (default) ───────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
    --gb-blue:    #0099CC;
    --gb-dark:    #0077AA;

    --bg-primary:   #06070A;
    --bg-secondary: #0C0D12;
    --bg-tertiary:  #111318;
    --bg-elevated:  #191B22;
    --bg-card:      #14161D;

    --border-subtle:  #1A1C23;
    --border-default: #23262F;
    --border-strong:  #363944;

    --text-primary:   #F0F2F5;
    --text-secondary: #8B90A0;
    --text-tertiary:  #585D6E;
    --text-disabled:  #3E4252;

    --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:  0 8px 24px rgba(0,0,0,0.5);
    --shadow-lg:  0 24px 64px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 32px rgba(0,153,204,0.25);

    --nav-bg: rgba(6,7,10,0.96);
    --dropdown-bg: rgba(10,12,16,0.985);
    --glass-bg: rgba(20,22,30,0.85);
    --glass-border: rgba(255,255,255,0.07);

    --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,153,204,0.15) 0%, transparent 70%);
    --gradient-primary: linear-gradient(135deg, #0099CC 0%, #0055FF 100%);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    color-scheme: dark;
}

/* ─── LIGHT THEME ────────────────────────────────────────────────────────────── */
[data-theme="light"] {
    --gb-blue:    #0088BB;
    --gb-dark:    #006699;

    --bg-primary:   #FFFFFF;
    --bg-secondary: #F5F7FA;
    --bg-tertiary:  #EEF1F6;
    --bg-elevated:  #E8ECF2;
    --bg-card:      #FFFFFF;

    --border-subtle:  #E2E6ED;
    --border-default: #D0D6E0;
    --border-strong:  #B8C0CC;

    --text-primary:   #0D1117;
    --text-secondary: #4A5568;
    --text-tertiary:  #718096;
    --text-disabled:  #A0AEC0;

    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:  0 8px 24px rgba(0,0,0,0.10);
    --shadow-lg:  0 24px 64px rgba(0,0,0,0.12);
    --shadow-glow: 0 0 32px rgba(0,153,204,0.18);

    --nav-bg: rgba(255,255,255,0.985);
    --dropdown-bg: rgba(255,255,255,0.992);
    --glass-bg: rgba(255,255,255,0.85);
    --glass-border: rgba(0,0,0,0.08);

    --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,153,204,0.10) 0%, transparent 70%);
    --gradient-primary: linear-gradient(135deg, #0099CC 0%, #0055FF 100%);

    color-scheme: light;
}

/* ─── Base ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}
body.menu-open { overflow: hidden; }
[x-cloak] { display: none !important; }
*:focus-visible { outline: 2px solid var(--gb-blue); outline-offset: 3px; border-radius: 4px; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gb-blue); }
::selection { background: rgba(0,153,204,0.2); color: var(--text-primary); }

/* ─── Glass ──────────────────────────────────────────────────────────────────── */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
}

/* ─── Shared layout ──────────────────────────────────────────────────────────── */
.section-pad { padding: 6rem 0; }
@media (min-width: 1024px) { .section-pad { padding: 8rem 0; } }

.section-header { text-align: center; margin-bottom: 4rem; }
.section-title {
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.section-sub {
    color: var(--text-secondary);
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: 38rem;
    margin: 0 auto;
}
.text-overline {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gb-blue);
    display: block;
}
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--gb-blue);
    color: #fff; font-weight: 600; font-size: 0.875rem;
    border-radius: 0.6rem; border: none; cursor: pointer;
    transition: all 0.2s ease; text-decoration: none; white-space: nowrap;
}
.btn-primary:hover { background: var(--gb-dark); box-shadow: var(--shadow-glow); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled,
.btn-primary.is-loading {
    cursor: wait;
    pointer-events: none;
    opacity: 0.72;
    background: color-mix(in srgb, var(--gb-blue) 78%, var(--bg-elevated));
    box-shadow: none;
    transform: none;
}
.btn-primary:disabled:hover,
.btn-primary.is-loading:hover,
.btn-primary:disabled:active,
.btn-primary.is-loading:active {
    background: color-mix(in srgb, var(--gb-blue) 78%, var(--bg-elevated));
    box-shadow: none;
    transform: none;
}
.btn-whatsapp {
    background: #22C55E;
    color: #fff;
}
.btn-whatsapp:hover {
    background: #16A34A;
    box-shadow: 0 18px 44px rgba(34,197,94,0.24);
}

.btn-secondary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent; color: var(--text-primary);
    font-weight: 600; font-size: 0.875rem;
    border-radius: 0.6rem; border: 1px solid var(--border-default);
    cursor: pointer; transition: all 0.2s ease; text-decoration: none; white-space: nowrap;
}
.btn-secondary:hover { background: var(--bg-elevated); border-color: var(--gb-blue); }

/* ─── Badge ──────────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.85rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 500;
    background: rgba(0,153,204,0.08); border: 1px solid rgba(0,153,204,0.2);
    color: var(--gb-blue);
}

/* ─── Form ───────────────────────────────────────────────────────────────────── */
.form-label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.4rem; }
.form-input {
    width: 100%; padding: 0.7rem 1rem;
    background: var(--bg-tertiary); border: 1px solid var(--border-default);
    color: var(--text-primary); border-radius: 0.5rem;
    font-size: 0.9375rem; font-family: var(--font-sans);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input::placeholder { color: var(--text-tertiary); }
.form-input:focus { outline: none; border-color: var(--gb-blue); box-shadow: 0 0 0 3px rgba(0,153,204,0.12); }
select.form-input option { background: var(--bg-tertiary); }

/* ─── Header ────────────────────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.site-header-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    min-height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-brand-logo { height: 2.1rem; width: auto; transition: opacity 0.2s ease; }

.site-nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex: 1;
}
@media (min-width: 1024px) { .site-nav { display: flex; } }

.site-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-shrink: 0;
}
@media (max-width: 1023px) {
    .site-actions { gap: 0; }
    .site-actions .theme-toggle { display: none; }
}

.site-phone {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border-radius: 9999px;
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
}
.site-phone:hover { color: var(--text-primary); border-color: rgba(0,153,204,0.35); background: rgba(0,153,204,0.08); }
@media (min-width: 1280px) { .site-phone { display: inline-flex; } }

.site-cta { display: none !important; }
@media (min-width: 1024px) { .site-cta { display: inline-flex !important; } }

.nav-dropdown { position: relative; }
.nav-dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.9rem;
}

/* ─── Nav items ─────────────────────────────────────────────────────────────── */
.nav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.72rem 0.95rem;
    border-radius: 9999px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    cursor: pointer;
    background: none;
    border: 1px solid transparent;
    white-space: nowrap;
    text-decoration: none;
}
.nav-item:hover,
.nav-dropdown.is-open .nav-item {
    color: var(--text-primary);
    background: rgba(0,153,204,0.08);
    border-color: rgba(0,153,204,0.18);
}
.nav-item-active { color: var(--gb-blue) !important; }
.nav-caret { width: 0.95rem; height: 0.95rem; transition: transform 0.2s ease; }
.nav-dropdown.is-open .nav-caret { transform: rotate(180deg); }

/* Dropdown panel */
.dropdown-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    padding: 0.65rem;
    z-index: 100;
    min-width: 15rem;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.desktop-dropdown-panel {
    width: min(21rem, 80vw);
    background: var(--dropdown-bg);
}
.dropdown-item {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.8rem;
    font-size: 0.875rem; font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.dropdown-item:hover { background: rgba(0,153,204,0.08); color: var(--text-primary); }
.dropdown-item-highlight { color: var(--gb-blue); font-weight: 600; }
.dropdown-item-highlight:hover { background: rgba(0,153,204,0.08); color: var(--gb-blue); }
.dropdown-item-icon { font-size: 0.875rem; }
.dropdown-section-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); padding: 0.5rem 0.75rem 0.25rem; }
.dropdown-divider { height: 1px; background: var(--border-subtle); margin: 0.375rem 0.5rem; }

/* Mobile menu */
.mobile-menu-toggle {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 9999px;
    border: 1px solid var(--border-default);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.mobile-menu-toggle:hover { color: var(--text-primary); border-color: rgba(0,153,204,0.35); }
.mobile-menu-toggle svg { width: 1.35rem; height: 1.35rem; position: absolute; transition: opacity 0.2s ease, transform 0.2s ease; }
.mobile-menu-toggle { position: relative; }
.mobile-menu-icon-close { opacity: 0; transform: rotate(-90deg) scale(0.8); }
.mobile-menu-toggle.is-open .mobile-menu-icon-open { opacity: 0; transform: rotate(90deg) scale(0.8); }
.mobile-menu-toggle.is-open .mobile-menu-icon-close { opacity: 1; transform: rotate(0deg) scale(1); }
@media (min-width: 1024px) { .mobile-menu-toggle { display: none; } }

.mobile-menu {
    border-top: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-0.75rem);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.mobile-menu.is-open {
    opacity: 1;
    transform: translateY(0);
}
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }

.mobile-menu-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 1rem 1rem 1.35rem;
}

.mobile-menu-group + .mobile-menu-group { margin-top: 0.6rem; }

.mobile-group-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    color: var(--text-primary);
    font-weight: 700;
    background: none;
    border: none;
}
.mobile-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s ease;
}
.mobile-menu-link:hover,
.mobile-menu-link-active {
    color: var(--gb-blue);
}
.mobile-group-caret {
    width: 1rem;
    height: 1rem;
    color: var(--gb-blue);
    transition: transform 0.2s ease;
}
.mobile-group-trigger[aria-expanded="true"] .mobile-group-caret { transform: rotate(180deg); }

.mobile-group-panel {
    padding: 0 0 0.5rem;
}

.mobile-menu-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); padding: 0.4rem 0 0.2rem; }
.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.85rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.mobile-menu-item:hover { background: rgba(0,153,204,0.08); color: var(--text-primary); }
.mobile-menu-item-highlight { color: var(--gb-blue); font-weight: 600; }
.mobile-menu-divider { height: 1px; background: var(--border-subtle); margin: 0.8rem 0; }
.mobile-menu-contact {
    display: grid;
    gap: 0.75rem;
    margin-top: 0;
}
.mobile-menu-contact .btn-primary,
.mobile-menu-contact .mobile-whatsapp-cta {
    width: 100%;
    min-height: 3.35rem;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}
.mobile-menu-contact svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
}
.mobile-whatsapp-cta {
    text-decoration: none;
}

/* ─── Theme toggle button ────────────────────────────────────────────────────── */
.theme-toggle {
    position: relative;
    width: 2.9rem; height: 2.9rem;
    border-radius: 9999px;
    border: 1px solid var(--border-default);
    background: var(--bg-secondary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.theme-toggle:hover { border-color: rgba(0,153,204,0.35); color: var(--gb-blue); background: rgba(0,153,204,0.08); }
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { position: absolute; transition: opacity 0.2s, transform 0.3s; }
[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 1; transform: rotate(0deg); }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg); }
[data-theme="light"] .theme-toggle .icon-sun  { opacity: 0; transform: rotate(-90deg); }
[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg); }

/* ─────────────────────────────────────────────────────────────────────────────── */
/* SCROLL ANIMATIONS (Apple-style)                                                 */
/* ─────────────────────────────────────────────────────────────────────────────── */
[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
[data-animate].is-visible { opacity: 1; transform: translateY(0); }

[data-animate="scale"] { transform: scale(0.92); }
[data-animate="scale"].is-visible { transform: scale(1); }

[data-animate="left"] { transform: translateX(-32px); }
[data-animate="left"].is-visible { transform: translateX(0); }

[data-animate="right"] { transform: translateX(32px); }
[data-animate="right"].is-visible { transform: translateX(0); }

/* ─────────────────────────────────────────────────────────────────────────────── */
/* HERO                                                                            */
/* ─────────────────────────────────────────────────────────────────────────────── */
.hero-section {
    position: relative;
    background: var(--bg-primary);
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-hero);
    pointer-events: none;
}

/* Dot grid */
.hero-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(128,128,160,0.12) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 100%);
    pointer-events: none;
}
[data-theme="light"] .hero-dots {
    background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
}

/* Badge */
.hero-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 1rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    margin-bottom: 1.75rem;
}
.hero-badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gb-blue);
    box-shadow: 0 0 8px rgba(0,153,204,0.8);
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%,100% { box-shadow: 0 0 6px rgba(0,153,204,0.7); }
    50%      { box-shadow: 0 0 14px rgba(0,153,204,1); }
}

/* Title */
.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;
    color: var(--text-primary); margin-bottom: 1.5rem;
}
.hero-title-gradient {
    background: linear-gradient(135deg, #0099CC 0%, #33BBFF 50%, #0055FF 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    background-size: 200% 200%;
    animation: gradient-shift 4s ease-in-out infinite alternate;
    display: block;
}
@keyframes gradient-shift {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

.hero-sub { color: var(--text-secondary); font-size: 1.0625rem; line-height: 1.75; max-width: 36rem; margin: 0 auto 2.5rem; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.875rem; justify-content: center; margin-bottom: 1.75rem; }
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem; font-size: 0.8125rem; color: var(--text-tertiary); margin-bottom: 4rem; }
.hero-trust-sep { opacity: 0.3; }

/* ─── Hero visual (card mockup) ─────────────────────────────────────────────── */
.hero-visual-wrap { position: relative; max-width: 460px; margin: 0 auto; padding-bottom: 3rem; }

.hero-card-main {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 1.25rem; overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 60px rgba(0,153,204,0.06);
    animation: card-float 5s ease-in-out infinite;
}
@keyframes card-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.hero-card-header {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.875rem 1.25rem;
    background: var(--bg-tertiary); border-bottom: 1px solid var(--border-subtle);
}
.hero-card-dot { width: 10px; height: 10px; border-radius: 50%; opacity: 0.8; }
.hero-card-label { margin-left: auto; font-size: 0.7rem; font-weight: 500; color: var(--text-tertiary); font-family: var(--font-mono); }
.hero-card-body { padding: 1.75rem; }
.hero-device-icon {
    width: 60px; height: 60px; border-radius: 1rem;
    background: rgba(0,153,204,0.08); border: 1px solid rgba(0,153,204,0.15);
    display: flex; align-items: center; justify-content: center;
    color: var(--gb-blue); margin: 0 auto 1.25rem;
}
.hero-card-device { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; text-align: center; }
.hero-card-issue { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 1.25rem; text-align: center; }
.hero-progress-bar { height: 5px; background: var(--border-default); border-radius: 9999px; overflow: hidden; margin-bottom: 1rem; }
.hero-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gb-blue), #33BBFF);
    border-radius: 9999px;
    animation: progress-anim 3s ease-in-out infinite alternate;
}
@keyframes progress-anim { from { width: 55%; } to { width: 82%; } }
.hero-card-meta { display: flex; align-items: center; justify-content: space-between; }
.hero-status-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.75rem; font-weight: 600; color: #10B981;
    background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2);
    padding: 0.2rem 0.6rem; border-radius: 9999px;
}
.hero-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #10B981; animation: pulse-dot 1.5s ease-in-out infinite; }

/* Floating badges */
.hero-float {
    position: absolute; padding: 0.75rem 1rem; border-radius: 0.875rem;
    box-shadow: var(--shadow-md); animation: card-float 4s ease-in-out infinite;
    min-width: 140px; text-align: center;
}
.hero-float-left  { left: -1rem; bottom: 2.5rem; animation-delay: 0.5s; animation-duration: 4.5s; }
.hero-float-right { right: -1rem; top: 2rem; animation-delay: 1s; animation-duration: 5s; }
.hero-float-bottom {
    left: 50%; bottom: 0; transform: translateX(-50%);
    display: flex; align-items: center; gap: 0.5rem; white-space: nowrap;
    min-width: auto; font-size: 0.75rem; color: var(--text-secondary);
    animation-delay: 1.5s; animation-duration: 6s;
}
.hero-float-value { font-size: 1.375rem; font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; }
.hero-float-label { font-size: 0.6875rem; color: var(--text-tertiary); margin-top: 0.1rem; }
.hero-float-stars { color: #F59E0B; font-size: 0.875rem; letter-spacing: 1px; line-height: 1.2; }
@media (max-width: 640px) { .hero-float-left, .hero-float-right { display: none; } }

/* ─── Apple-style scroll reveal sections ────────────────────────────────────── */
/* Sticky text + side image */
.apple-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .apple-split { grid-template-columns: 1fr 1fr; gap: 7rem; }
    .apple-split.reverse { direction: rtl; }
    .apple-split.reverse > * { direction: ltr; }
}

/* Lottie / motion placeholder */
.motion-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 4/3;
    display: flex; align-items: center; justify-content: center;
}
.motion-card-inner {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 1rem;
    color: var(--text-tertiary);
}

/* ─── Trusted by ─────────────────────────────────────────────────────────────── */
.trusted-section { padding: 3rem 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--bg-secondary); }
.trusted-label { text-align: center; font-size: 0.75rem; color: var(--text-disabled); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; margin-bottom: 1.5rem; }
.trusted-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.5rem; }
.trusted-logo-text { font-size: 1rem; font-weight: 700; color: var(--text-disabled); letter-spacing: 0.05em; transition: color 0.2s; cursor: default; }
.trusted-logo-text:hover { color: var(--text-tertiary); }

/* ─── Stats ──────────────────────────────────────────────────────────────────── */
.stats-section { padding: 3.5rem 0; background: var(--bg-primary); border-bottom: 1px solid var(--border-subtle); }
.stats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; }
@media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4,1fr); } }
.stat-item { text-align: center; }
.stat-value { display: block; font-size: clamp(2rem,5vw,2.75rem); font-weight: 800; letter-spacing: -0.03em; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; margin-bottom: 0.4rem; }
.stat-label { font-size: 0.8125rem; color: var(--text-tertiary); }

/* ─── Services grid ──────────────────────────────────────────────────────────── */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: 1.25rem; overflow: hidden; }
@media (min-width: 640px)  { .services-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1280px) { .services-grid { grid-template-columns: repeat(4,1fr); } }

.svc-card { background: var(--bg-tertiary); padding: 1.75rem; text-decoration: none; transition: background 0.2s; display: flex; flex-direction: column; }
.svc-card:hover { background: var(--bg-elevated); }
.svc-card-icon { width: 44px; height: 44px; border-radius: 0.75rem; background: rgba(0,153,204,0.08); border: 1px solid rgba(0,153,204,0.15); display: flex; align-items: center; justify-content: center; color: var(--gb-blue); margin-bottom: 1rem; transition: transform 0.2s, background 0.2s; }
.svc-card:hover .svc-card-icon { transform: scale(1.08); background: rgba(0,153,204,0.14); }
.svc-card-name { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.3rem; transition: color 0.2s; }
.svc-card:hover .svc-card-name { color: var(--gb-blue); }
.svc-card-desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.45; flex: 1; margin-bottom: 0.7rem; }
.svc-card-repairs { font-size: 0.76rem; color: var(--text-tertiary); line-height: 1.45; margin-bottom: 0.8rem; }
.svc-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.62rem 0.8rem;
    border-radius: 9999px;
    background: rgba(0,153,204,0.1);
    border: 1px solid rgba(0,153,204,0.18);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--gb-blue);
    margin-top: auto;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.svc-card:hover .svc-card-link {
    background: var(--gb-blue);
    border-color: var(--gb-blue);
    color: #fff;
}
.svc-card-arrow { transition: transform 0.2s; }
.svc-card:hover .svc-card-arrow { transform: translateX(4px); }

/* ─── Split (Por qué elegirnos) ─────────────────────────────────────────────── */
.split-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
@media (min-width: 1024px) { .split-grid { grid-template-columns: 1fr 1fr; gap: 6rem; } }
.features-list { display: flex; flex-direction: column; gap: 1.25rem; }
.feature-item { display: flex; align-items: flex-start; gap: 1rem; }
.feature-icon { width: 38px; height: 38px; border-radius: 0.625rem; background: rgba(0,153,204,0.08); border: 1px solid rgba(0,153,204,0.15); display: flex; align-items: center; justify-content: center; color: var(--gb-blue); flex-shrink: 0; }
.split-visual { display: flex; flex-direction: column; gap: 0.875rem; }
.step-card { display: flex; align-items: flex-start; gap: 1rem; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 1rem; padding: 1.25rem; transition: border-color 0.2s, box-shadow 0.2s; }
.step-card:hover { border-color: rgba(0,153,204,0.3); box-shadow: var(--shadow-sm); }
.step-num { width: 36px; height: 36px; border-radius: 0.5rem; border: 1px solid; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.875rem; flex-shrink: 0; font-family: var(--font-mono); }
.split-mini-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.5rem; margin-top: 0.5rem; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 1rem; padding: 1.25rem 1rem; }

/* ─── Social section ─────────────────────────────────────────────────────────── */
.social-section { padding: 5rem 0; border-top: 1px solid var(--border-subtle); }
.social-cards { display: grid; grid-template-columns: repeat(1,1fr); gap: 1rem; }
@media (min-width: 640px)  { .social-cards { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .social-cards { grid-template-columns: repeat(3,1fr); } }

.social-card {
    position: relative; overflow: hidden;
    padding: 2rem; border-radius: 1.25rem;
    background: var(--bg-tertiary); border: 1px solid var(--border-default);
    text-decoration: none; display: flex; flex-direction: column; gap: 1rem;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
}
.social-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.social-card::before {
    content: '';
    position: absolute; inset: 0;
    opacity: 0; transition: opacity 0.3s;
    border-radius: inherit;
}
.social-card:hover::before { opacity: 1; }
.social-card-ig::before  { background: linear-gradient(135deg, rgba(193,53,132,0.06) 0%, rgba(131,58,180,0.06) 100%); }
.social-card-fb::before  { background: linear-gradient(135deg, rgba(24,119,242,0.06) 0%, transparent 100%); }
.social-card-yt::before  { background: linear-gradient(135deg, rgba(255,0,0,0.06) 0%, transparent 100%); }

.social-card-icon { width: 48px; height: 48px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; }
.social-card-ig .social-card-icon { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-card-fb .social-card-icon { background: #1877F2; }
.social-card-yt .social-card-icon { background: #FF0000; }

.social-card-network { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); }
.social-card-handle { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.social-card-followers { font-size: 0.875rem; color: var(--text-secondary); }
.social-card-followers strong { color: var(--text-primary); }
.social-card-cta { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--gb-blue); margin-top: auto; }

/* ─── FAQ ────────────────────────────────────────────────────────────────────── */
.faq-item { border: 1px solid var(--border-subtle); border-radius: 0.875rem; background: var(--bg-secondary); overflow: hidden; transition: border-color 0.2s; }
.faq-item:hover { border-color: var(--border-default); }
.faq-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.25rem 1.5rem; text-align: left; font-weight: 600; font-size: 0.9375rem; color: var(--text-primary); background: none; border: none; cursor: pointer; gap: 1rem; }
.faq-chevron { width: 1.125rem; height: 1.125rem; color: var(--gb-blue); flex-shrink: 0; transition: transform 0.25s ease; }
.faq-answer { padding: 0 1.5rem 1.25rem; color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.7; border-top: 1px solid var(--border-subtle); padding-top: 1rem; }

/* ─── Contact ────────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1.4fr; gap: 5rem; } }
.contact-info-cards { display: flex; flex-direction: column; gap: 0.75rem; }
.contact-info-card { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1rem 1.25rem; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 0.875rem; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
.contact-info-card:hover { border-color: rgba(0,153,204,0.24); transform: translateY(-1px); }
.contact-info-icon { width: 36px; height: 36px; border-radius: 0.5rem; background: rgba(0,153,204,0.08); display: flex; align-items: center; justify-content: center; color: var(--gb-blue); flex-shrink: 0; }
.contact-info-card-whatsapp {
    border-color: rgba(34,197,94,0.2);
    background: rgba(34,197,94,0.05);
}
.contact-info-card-whatsapp:hover {
    border-color: rgba(34,197,94,0.42);
    background: rgba(34,197,94,0.08);
}
.contact-info-icon-whatsapp {
    background: rgba(34,197,94,0.12);
    color: #4ade80;
}
.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 4rem;
}
.support-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 2rem 1.75rem;
    min-height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid var(--border-subtle);
    background:
        radial-gradient(circle at top center, rgba(0, 153, 204, 0.08), transparent 38%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 86%, transparent), color-mix(in srgb, var(--bg-card) 96%, transparent));
    box-shadow: var(--shadow-md);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.support-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 28%);
    pointer-events: none;
}
.support-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(0,153,204,0.22);
}
.support-card--whatsapp {
    border-color: rgba(37,211,102,0.24);
    background:
        radial-gradient(circle at top center, rgba(37, 211, 102, 0.12), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 86%, transparent), color-mix(in srgb, var(--bg-card) 96%, transparent));
}
.support-card--whatsapp:hover {
    border-color: rgba(37,211,102,0.38);
}
.support-card-icon-shell {
    width: 5rem;
    height: 5rem;
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.4rem;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.support-card--whatsapp .support-card-icon-shell {
    background: rgba(37,211,102,0.08);
    border-color: rgba(37,211,102,0.22);
}
.support-card-icon {
    width: 2.35rem;
    height: 2.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.support-card-icon svg {
    width: 100%;
    height: 100%;
}
.support-card-title {
    margin: 0 0 0.9rem;
    font-size: clamp(1.7rem, 2.5vw, 2.3rem);
    line-height: 1.05;
    font-weight: 800;
    color: var(--text-primary);
    max-width: 10ch;
    text-wrap: balance;
}
.support-card-desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.7;
    flex: 1;
    max-width: 26ch;
    text-wrap: pretty;
}
.support-card-actions {
    width: 100%;
    margin-top: 1.75rem;
    display: flex;
    justify-content: center;
}
.support-card-button {
    width: 100%;
    max-width: 22rem;
    min-height: 3.75rem;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.95rem 1.35rem;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 700;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 10px 24px rgba(15,23,42,0.05);
}
.support-card-button:hover {
    transform: translateY(-1px);
    border-color: rgba(0,153,204,0.24);
}
.footer-trustmarks {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.15rem;
    opacity: 0.72;
}
.footer-bottom-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}
.footer-trustmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer-trustmark:hover {
    opacity: 1;
    transform: translateY(-1px);
}
.footer-trustmark img {
    display: block;
}
.footer-trustmark-cardma img {
    height: 1rem;
    width: auto;
}
.footer-trustmark-afip img {
    height: 1.8rem;
    width: auto;
}
.footer-trustmark-cardma-dark {
    display: none;
}
[data-theme="dark"] .footer-trustmark-cardma-light {
    display: none;
}
[data-theme="dark"] .footer-trustmark-cardma-dark {
    display: block;
}
[data-theme="light"] .footer-trustmark-cardma-light {
    display: block;
}
[data-theme="light"] .footer-trustmark-cardma-dark {
    display: none;
}
.support-card-button--whatsapp {
    background: rgba(37,211,102,0.1);
    border-color: rgba(37,211,102,0.22);
    color: #159947;
}
.support-card-button--whatsapp:hover {
    background: rgba(37,211,102,0.14);
    border-color: rgba(37,211,102,0.3);
}
.support-card-button-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}
.bank-details-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: 1rem;
    padding: 1.5rem;
    font-family: var(--font-mono);
}
.bank-details-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border-subtle);
}
.bank-details-row:last-child {
    border-bottom: 0;
}
.bank-details-key {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}
.bank-details-value-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    min-width: 0;
}
.bank-details-value {
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}
.bank-copy-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem;
    border-radius: 9999px;
    border: 1px solid rgba(0, 153, 204, 0.18);
    background: rgba(0, 153, 204, 0.08);
    color: var(--gb-blue);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.bank-copy-button:hover {
    background: rgba(0, 153, 204, 0.14);
    border-color: rgba(0, 153, 204, 0.28);
    transform: translateY(-1px);
}
.bank-copy-button svg {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .support-card {
        padding: 1.5rem;
    }
    .support-card-title {
        font-size: 1.9rem;
        max-width: none;
    }
    .support-card-desc {
        max-width: none;
        font-size: 1rem;
    }
    .support-card-button {
        max-width: none;
    }
    .footer-bottom-right {
        align-items: center;
    }
    .footer-trustmarks {
        justify-content: center;
    }
    .bank-details-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .bank-details-value-wrap {
        width: 100%;
        justify-content: space-between;
    }
    .bank-details-value {
        text-align: left;
    }
}
.wa-btn { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1.5rem; background: #25D366; color: #fff; font-weight: 700; font-size: 0.9375rem; border-radius: 0.75rem; text-decoration: none; transition: all 0.2s ease; }
.wa-btn:hover { background: #1ebe5c; box-shadow: 0 0 24px rgba(37,211,102,0.3); transform: translateY(-1px); }
/* ─── CTA ────────────────────────────────────────────────────────────────────── */
.cta-section { position: relative; padding: 7rem 0; background: var(--bg-primary); overflow: hidden; border-top: 1px solid var(--border-subtle); }
.cta-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(0,153,204,0.06) 0%, transparent 70%); pointer-events: none; }

/* ─── Floating social sidebar ────────────────────────────────────────────────── */
.social-sidebar {
    position: fixed;
    right: 1.5rem;
    bottom: 6.3rem;
    z-index: 30;
    display: flex; flex-direction: column; gap: 0.5rem;
}
@media (max-width: 1280px) { .social-sidebar { display: none; } }
.social-sidebar-link {
    width: 36px; height: 36px;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    border: 1px solid var(--glass-border);
    color: var(--text-tertiary);
    text-decoration: none;
    transition: all 0.2s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.social-sidebar-link:hover { background: var(--gb-blue); border-color: var(--gb-blue); color: #fff; transform: translateY(-2px) scale(1.06); }
.social-sidebar-link-whatsapp { color: #25D366; }

/* ─── Page hero (interior pages) ────────────────────────────────────────────── */
.page-hero { padding: 7rem 0 4rem; text-align: center; border-bottom: 1px solid var(--border-subtle); background: var(--bg-secondary); position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: var(--gradient-hero); pointer-events: none; }
.page-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.page-hero-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: 1rem; }
.page-hero-sub { color: var(--text-secondary); font-size: 1.0625rem; max-width: 32rem; margin: 0 auto; }

/* ─── Office gallery ─────────────────────────────────────────────────────────── */
.office-gallery-section {
    position: relative;
    margin-top: 4rem;
}
.office-gallery-shell {
    display: grid;
    gap: 1.5rem;
    padding: 1.25rem;
    border-radius: 1.75rem;
    border: 1px solid var(--border-subtle);
    background:
        radial-gradient(circle at top right, rgba(0,153,204,0.08), transparent 26%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 88%, transparent), color-mix(in srgb, var(--bg-card) 96%, transparent));
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.office-gallery-copy {
    max-width: 36rem;
}
.office-gallery-sub {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.75;
}
.office-gallery-main {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--bg-card) 90%, transparent);
    box-shadow: var(--shadow-md);
}
.office-gallery-main-media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.office-gallery-main-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.02) 18%, rgba(0,0,0,0.62) 100%);
    pointer-events: none;
}
.office-gallery-main img,
.office-gallery-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.office-gallery-main img {
    transition: transform 0.55s ease;
}
.office-gallery-main:hover img {
    transform: scale(1.03);
}
.office-gallery-main-copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 1.25rem;
    display: grid;
    gap: 0.45rem;
}
.office-gallery-main-copy strong {
    font-size: clamp(1.2rem, 3vw, 1.55rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}
.office-gallery-main-copy p {
    max-width: 32rem;
    color: rgba(255,255,255,0.78);
    font-size: 0.92rem;
    line-height: 1.6;
}
.office-gallery-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 0.38rem 0.72rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.92);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.office-gallery-rail-wrap {
    min-width: 0;
}
.office-gallery-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 82vw);
    gap: 0.9rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.office-gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid var(--border-default);
    background: var(--bg-tertiary);
    min-height: 14rem;
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
    box-shadow: var(--shadow-sm);
}
.office-gallery-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.58) 100%);
    pointer-events: none;
}
.office-gallery-card img {
    transition: transform 0.45s ease;
}
.office-gallery-card:hover img {
    transform: scale(1.04);
}
.office-gallery-card figcaption {
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.8rem;
    z-index: 1;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.office-gallery-hint {
    margin-top: 0.75rem;
    color: var(--text-tertiary);
    font-size: 0.78rem;
    text-align: right;
}
@media (min-width: 768px) {
    .office-gallery-shell {
        padding: 1.5rem;
    }
    .office-gallery-main-media {
        aspect-ratio: 16 / 10;
    }
    .office-gallery-rail {
        grid-auto-columns: minmax(16rem, 26rem);
    }
}
@media (min-width: 1024px) {
    .office-gallery-shell {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 1.5rem;
        align-items: start;
        padding: 1.75rem;
    }
    .office-gallery-copy {
        grid-column: 1 / -1;
    }
    .office-gallery-main {
        height: 100%;
    }
    .office-gallery-main-media {
        aspect-ratio: 4 / 5;
        min-height: 100%;
    }
    .office-gallery-rail {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-columns: auto;
        overflow: visible;
        padding-bottom: 0;
    }
    .office-gallery-card {
        min-height: 12rem;
        aspect-ratio: 4 / 3;
    }
    .office-gallery-hint {
        display: none;
    }
}

/* ─── About / Nosotros ───────────────────────────────────────────────────────── */
.about-hero {
    position: relative;
    padding: 5rem 0 4rem;
    background:
        radial-gradient(circle at 15% 20%, rgba(0,153,204,0.12), transparent 24%),
        radial-gradient(circle at 90% 18%, rgba(0,85,255,0.1), transparent 22%),
        var(--bg-primary);
    overflow: hidden;
}
.about-hero-shell {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    gap: 2.25rem;
    align-items: center;
}
.about-hero-copy {
    max-width: 42rem;
}
.about-hero-title {
    font-size: clamp(2.6rem, 7vw, 5rem);
    line-height: 0.96;
    letter-spacing: -0.05em;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.about-hero-sub {
    font-size: 1.04rem;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 39rem;
}
.about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.75rem;
}
.about-hero-points {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.65rem;
    margin-top: 1.1rem;
}
.about-hero-point {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.72rem 1rem;
    border-radius: 9999px;
    border: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
    color: var(--text-secondary);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
    white-space: nowrap;
}
.about-hero-point svg {
    width: 1rem;
    height: 1rem;
    color: var(--gb-blue);
    flex: 0 0 auto;
}
@media (max-width: 768px) {
    .about-hero-points {
        flex-wrap: wrap;
        justify-content: center;
    }
}
.about-hero-stage {
    position: relative;
    overflow: hidden;
    min-height: 29rem;
    border-radius: 1.9rem;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
}
.about-hero-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.04) 22%, rgba(0,0,0,0.68) 100%);
    pointer-events: none;
}
.about-hero-stage img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.about-hero-stage-copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: grid;
    gap: 0.45rem;
    padding: 1.4rem;
}
.about-hero-stage-copy strong {
    color: #fff;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.05;
    font-weight: 800;
}
.about-hero-stage-copy p {
    max-width: 25rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.6;
    font-size: 0.92rem;
}
.about-hero-chip {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.75rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.92);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.about-hero-floating {
    position: absolute;
    z-index: 1;
    min-width: 9rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    background: rgba(6,10,16,0.72);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.about-hero-floating strong {
    display: block;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}
.about-hero-floating span {
    display: block;
    margin-top: 0.2rem;
    color: rgba(255,255,255,0.66);
    font-size: 0.76rem;
    line-height: 1.45;
}
.about-hero-floating-top {
    top: 1rem;
    right: 1rem;
}
.about-hero-floating-bottom {
    left: 1rem;
    bottom: 7rem;
}

.about-proof-band {
    padding: 0 0 4rem;
    background: var(--bg-primary);
}
.about-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}
.about-proof-card {
    padding: 1.15rem;
    border-radius: 1.2rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 100%), var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}
.about-proof-card strong {
    display: block;
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text-primary);
}
.about-proof-card span {
    display: block;
    margin-top: 0.45rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
}
.about-proof-card p {
    margin-top: 0.3rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.55;
}

.about-mission-section,
.about-reviews-section,
.about-clients-section,
.about-careers-section {
    padding: 6rem 0;
}
.about-mission-section {
    background: var(--bg-secondary);
}
.about-reviews-section {
    background: var(--bg-primary);
}
.about-clients-section {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
}
.about-careers-section {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-subtle);
}
.about-mission-grid {
    display: grid;
    gap: 2rem;
    align-items: start;
}
.about-section-copy {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1rem;
}
.about-section-copy + .about-section-copy {
    margin-top: 1rem;
}
.about-pillars-grid {
    display: grid;
    gap: 1rem;
}
.about-pillars-card {
    padding: 1.4rem;
    border-radius: 1.35rem;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}
.about-pillars-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 9999px;
    margin-bottom: 0.9rem;
    background: rgba(0,153,204,0.1);
    color: var(--gb-blue);
    font-size: 0.8rem;
    font-weight: 800;
    font-family: var(--font-mono);
}
.about-pillars-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.55rem;
}
.about-pillars-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 0.93rem;
}

.about-section-head {
    max-width: 42rem;
    margin: 0 auto 2rem;
    text-align: center;
}

.about-reviews-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(17rem, 86vw);
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    scroll-snap-type: x mandatory;
}
.about-review-card {
    padding: 1.4rem;
    border-radius: 1.35rem;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 100%), var(--bg-card);
    box-shadow: var(--shadow-sm);
    scroll-snap-align: start;
}
.about-review-rating {
    color: #f5b942;
    letter-spacing: 0.15em;
    font-size: 0.82rem;
    margin-bottom: 0.85rem;
}
.about-review-quote {
    color: var(--text-primary);
    line-height: 1.75;
    font-size: 0.98rem;
}
.about-review-card strong {
    display: block;
    margin-top: 1rem;
    color: var(--text-primary);
    font-size: 0.92rem;
}
.about-review-card span {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-tertiary);
    font-size: 0.78rem;
}

.about-logo-cloud {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}
.about-logo-tile {
    min-height: 5.2rem;
    padding: 1rem;
    border-radius: 1.15rem;
    border: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.about-logo-tile:hover {
    border-color: rgba(0,153,204,0.22);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.about-logo-image {
    width: 100%;
    max-width: 7rem;
    height: 2.2rem;
    object-fit: contain;
    object-position: center;
    display: block;
    opacity: 0.92;
}
.about-logo-image-verisure {
    max-width: 5.75rem;
    height: 3rem;
}
.about-logo-tile span {
    color: var(--text-primary);
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.about-clients-cta {
    display: flex;
    justify-content: center;
    margin-top: 1.4rem;
}

.about-careers-panel {
    display: grid;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: 1.75rem;
    border: 1px solid var(--border-subtle);
    background:
        radial-gradient(circle at top right, rgba(0,153,204,0.08), transparent 25%),
        linear-gradient(180deg, rgba(255,255,255,0.03), transparent 100%),
        var(--bg-secondary);
    box-shadow: var(--shadow-md);
}
.about-role-grid {
    display: grid;
    gap: 1rem;
}
.about-role-card {
    padding: 1.25rem;
    border-radius: 1.2rem;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
}
.about-role-card h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.about-role-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.65;
}

.careers-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.careers-modal.hidden,
.careers-modal[hidden] {
    display: none;
}
.careers-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,5,10,0.76);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.careers-modal-dialog {
    position: relative;
    width: min(100%, 42rem);
    max-height: min(92vh, 56rem);
    overflow-y: auto;
    margin: 0 1rem 1rem;
    padding: 1.25rem;
    border-radius: 1.5rem;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--bg-card) 96%, transparent);
    box-shadow: var(--shadow-lg);
}
.careers-modal-close {
    position: absolute;
    top: 0.95rem;
    right: 0.95rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid var(--border-default);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.careers-modal-close:hover {
    color: var(--text-primary);
    border-color: rgba(0,153,204,0.28);
}
.careers-modal-close svg {
    width: 1.1rem;
    height: 1.1rem;
}
.careers-modal-copy {
    margin-bottom: 1.25rem;
    padding-right: 3rem;
}
.careers-modal-copy h2 {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.65rem;
}
.careers-modal-copy p {
    color: var(--text-secondary);
    line-height: 1.7;
}
.careers-form-grid {
    display: grid;
    gap: 1rem;
}
.careers-form-span {
    grid-column: 1 / -1;
}
.form-input-file {
    padding: 0.75rem 0.9rem;
}
.careers-form-note {
    margin-top: 0.45rem;
    color: var(--text-tertiary);
    font-size: 0.78rem;
}
.careers-form-actions {
    padding-top: 0.25rem;
}

@media (min-width: 768px) {
    .about-proof-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .about-logo-cloud {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .careers-modal {
        align-items: center;
        padding: 1rem;
    }
    .careers-modal-dialog {
        margin: 0;
        padding: 1.6rem;
    }
    .careers-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .about-hero {
        padding: 6rem 0 4.5rem;
    }
    .about-hero-shell {
        grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
        gap: 3.5rem;
        padding: 0 1.5rem;
    }
    .about-mission-grid {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: 2rem;
    }
    .about-pillars-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .about-reviews-track {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-columns: auto;
        overflow: visible;
    }
    .about-logo-cloud {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    .about-careers-panel {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        align-items: start;
        padding: 1.75rem;
    }
    .about-role-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .about-hero {
        padding-top: 4rem;
    }
    .about-hero-stage {
        min-height: 24rem;
    }
    .about-hero-floating {
        min-width: 8rem;
        padding: 0.8rem 0.9rem;
    }
    .about-hero-floating-top {
        top: 0.8rem;
        right: 0.8rem;
    }
    .about-hero-floating-bottom {
        left: 0.8rem;
        bottom: 6rem;
    }
}

/* ─── Business / Empresas ────────────────────────────────────────────────────── */
.business-hero {
    position: relative;
    padding: 5rem 0 4rem;
    background:
        radial-gradient(circle at 14% 18%, rgba(0,153,204,0.11), transparent 25%),
        radial-gradient(circle at 88% 22%, rgba(0,85,255,0.1), transparent 23%),
        linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    overflow: hidden;
}
.business-hero-shell {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    gap: 2.4rem;
    align-items: center;
}
.business-hero-copy {
    max-width: 42rem;
}
.business-hero-title {
    font-size: clamp(2.45rem, 6.8vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.business-hero-sub {
    font-size: 1.03rem;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 39rem;
}
.business-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.75rem;
}
.business-hero-trust {
    margin-top: 1.5rem;
}
.business-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1.35rem;
    border-radius: 0.75rem;
    background: #25D366;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(37,211,102,0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.business-wa-btn:hover {
    background: #1ebe5c;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(37,211,102,0.3);
}
.business-wa-btn svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}
.business-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}
.business-hero-points span {
    padding: 0.5rem 0.8rem;
    border-radius: 9999px;
    border: 1px solid var(--border-default);
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}
.business-hero-stage {
    position: relative;
    min-height: 31rem;
    border-radius: 1.85rem;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background:
        radial-gradient(circle at 20% 20%, rgba(0,153,204,0.18), transparent 20%),
        linear-gradient(145deg, rgba(8,12,18,0.98), rgba(18,24,36,0.96));
    box-shadow: var(--shadow-lg);
}
.business-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 2.7rem 2.7rem;
    opacity: 0.18;
    mask-image: linear-gradient(180deg, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 100%);
}
.business-hero-panel {
    position: absolute;
    inset: 1.2rem;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(8,12,18,0.48);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.business-hero-panel-top {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.business-hero-panel-top span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.26);
}
.business-hero-panel-top p {
    margin-left: auto;
    color: rgba(255,255,255,0.45);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    font-family: var(--font-mono);
}
.business-hero-panel-body {
    padding: 1.2rem;
    display: grid;
    gap: 1rem;
}
.business-hero-kpi {
    padding: 1rem 1.1rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.business-hero-kpi strong {
    display: block;
    color: #fff;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.05;
}
.business-hero-kpi span {
    display: block;
    margin-top: 0.25rem;
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    line-height: 1.5;
}
.business-hero-track {
    display: grid;
    gap: 0.7rem;
}
.business-hero-track div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}
.business-hero-track span {
    color: rgba(255,255,255,0.76);
    font-size: 0.86rem;
}
.business-hero-track strong {
    color: #97f1c2;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.business-hero-floating {
    position: absolute;
    z-index: 1;
    min-width: 10.5rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
}
.business-hero-floating strong {
    display: block;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.15;
}
.business-hero-floating span {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.5;
}
.business-hero-floating-top {
    top: 1rem;
    right: 1rem;
}
.business-hero-floating-bottom {
    left: 1rem;
    bottom: 1rem;
}

.business-services-section,
.business-benefits-section,
.business-contact-section {
    padding: 6rem 0;
}
.business-proof-band {
    padding-top: 1.75rem;
}
.business-services-section {
    background: var(--bg-primary);
}
.business-benefits-section {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
}
.business-contact-section {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-subtle);
}
.business-services-grid {
    display: grid;
    gap: 1rem;
}
.business-services-card {
    padding: 1.45rem;
    border-radius: 1.35rem;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 100%), var(--bg-card);
    box-shadow: var(--shadow-sm);
}
.business-services-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.55rem;
}
.business-services-card p {
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.72;
}
.business-benefits-head {
    max-width: 42rem;
    margin-bottom: 2rem;
}
.business-benefits-grid {
    display: grid;
    gap: 1rem;
}
.business-contact-grid {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}
.business-contact-copy {
    max-width: 38rem;
}
.business-contact-sticky {
    align-self: start;
}

@media (min-width: 768px) {
    .business-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .business-hero {
        padding: 5.5rem 0 4.5rem;
    }
    .business-hero-shell {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 3.5rem;
        padding: 0 1.5rem;
    }
    .business-services-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .business-benefits-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .business-contact-grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 2rem;
    }
    .business-contact-scroll-demo {
        overflow: visible;
    }
    .business-contact-sticky {
        position: sticky;
        top: 7rem;
    }
}
@media (max-width: 767px) {
    .business-hero {
        padding-top: 4rem;
    }
    .business-proof-band {
        padding-top: 1.2rem;
    }
    .business-hero-stage {
        min-height: 26rem;
    }
    .business-hero-floating {
        min-width: 8.75rem;
        padding: 0.75rem 0.85rem;
    }
}

/* ─── Guild / Gremio ─────────────────────────────────────────────────────────── */
.guild-hero {
    position: relative;
    padding: 5rem 0 4rem;
    background:
        radial-gradient(circle at 16% 18%, rgba(0,153,204,0.1), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(37,211,102,0.08), transparent 20%),
        linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    overflow: hidden;
}
@media (max-width: 767px) {
    .guild-hero {
        padding-top: 4rem;
    }
}

/* ─── Marquee (logos/brands) ─────────────────────────────────────────────────── */
.marquee-wrap {
    overflow: hidden;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: 1.5rem 0;
    margin: 1rem 0 2rem;
    background: color-mix(in srgb, var(--bg-secondary) 64%, transparent);
}
.marquee-track { display: flex; align-items: center; gap: 1rem; animation: marquee 28s linear infinite; width: max-content; }
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
.marquee-item { font-size: 0.9rem; font-weight: 700; color: var(--text-disabled); letter-spacing: 0.05em; white-space: nowrap; }
.marquee-logo-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 8.8rem;
    height: 3.2rem;
    padding: 0.65rem 1.05rem;
    border-radius: 9999px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.92);
    color: #111827;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.marquee-logo-item img {
    display: block;
    max-width: 6.8rem;
    max-height: 1.45rem;
    object-fit: contain;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── WhatsApp FAB ───────────────────────────────────────────────────────────── */
.whatsapp-fab {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 40;
    width: 56px; height: 56px;
    background: #25D366; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(37,211,102,0.4);
    text-decoration: none; color: #fff;
    transition: all 0.2s ease;
}
.whatsapp-fab:hover { background: #1ebe5c; transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,0.5); }

/* ─── Home Refresh ───────────────────────────────────────────────────────────── */
.hero-section {
    align-items: center;
    min-height: auto;
    padding: 7.5rem 0 3.25rem;
}
.hero-section::before {
    background:
        radial-gradient(circle at 15% 20%, rgba(0,153,204,0.18), transparent 30%),
        radial-gradient(circle at 85% 18%, rgba(0,85,255,0.14), transparent 26%),
        linear-gradient(180deg, rgba(6,7,10,0.55) 0%, rgba(6,7,10,0) 24%, rgba(6,7,10,0) 100%);
}
.hero-noise {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image:
        linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 120px 120px;
    mask-image: radial-gradient(circle at center, black 25%, transparent 85%);
    -webkit-mask-image: radial-gradient(circle at center, black 25%, transparent 85%);
    pointer-events: none;
}
.hero-ambient {
    position: absolute;
    border-radius: 9999px;
    filter: blur(60px);
    opacity: 0.8;
    pointer-events: none;
}
.hero-ambient-a {
    width: 26rem;
    height: 26rem;
    left: -8rem;
    top: 8rem;
    background: rgba(0,153,204,0.12);
}
.hero-ambient-b {
    width: 24rem;
    height: 24rem;
    right: -6rem;
    bottom: 2rem;
    background: rgba(0,85,255,0.12);
}
.hero-shell {
    position: relative;
    z-index: 2;
    max-width: 76rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    gap: 3.5rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .hero-shell {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
        gap: 4rem;
        padding: 0 1.5rem;
    }
}
.hero-copy { position: relative; z-index: 2; }
.hero-title-left,
.hero-sub-left,
.hero-cta-row-left,
.hero-trust-left { text-align: left; justify-content: flex-start; margin-left: 0; }
.hero-title-left { max-width: 12ch; }
.hero-sub-left { max-width: 38rem; margin-bottom: 1.35rem; }
.hero-cta-row-left { margin-bottom: 1.75rem; }
.hero-trust-left { margin-bottom: 0; }
.hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.7rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}
.hero-trust-item svg {
    width: 1rem;
    height: 1rem;
    color: var(--gb-blue);
    flex: 0 0 auto;
}
@media (max-width: 1023px) {
    .hero-copy { text-align: center; }
    .hero-title-left,
    .hero-sub-left,
    .hero-cta-row-left,
    .hero-trust-left { text-align: center; justify-content: center; margin-right: auto; margin-left: auto; }
}
.hero-badge {
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
@keyframes beam-sweep { from { transform: translateX(-30%) rotate(18deg); } to { transform: translateX(35%) rotate(18deg); } }
@keyframes pulse-track { from { width: 48%; } to { width: 86%; } }
.hero-stage { position: relative; max-width: 34rem; margin: 0 auto; width: 100%; }
.hero-stage-frame {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--bg-card) 86%, transparent);
    box-shadow: var(--shadow-lg), 0 0 90px rgba(0,153,204,0.14);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}
.hero-stage-topbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}
.hero-stage-topbar span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.25);
}
.hero-stage-topbar p {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    letter-spacing: 0;
    text-align: right;
    max-width: 76%;
}
.hero-stage-screen {
    position: relative;
    padding: 2rem;
    min-height: 33rem;
    background:
        radial-gradient(circle at 30% 22%, rgba(0,153,204,0.18), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.02), transparent 100%);
}
.hero-stage-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.26;
    filter: saturate(0.9) contrast(1.05);
}
.hero-stage-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 2.75rem 2.75rem;
    opacity: 0.2;
    mask-image: linear-gradient(180deg, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 100%);
}
.hero-stage-beam {
    position: absolute;
    top: -18%;
    bottom: -18%;
    left: 18%;
    width: 38%;
    background: linear-gradient(180deg, transparent 0%, rgba(120,200,255,0.18) 45%, transparent 100%);
    filter: blur(16px);
    transform: rotate(18deg);
    animation: beam-sweep 5.5s ease-in-out infinite alternate;
}
.hero-stage-device {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 24rem;
    padding-left: 1.25rem;
}
.hero-stage-device-shell {
    position: relative;
    width: 15rem;
    height: 25.6rem;
    border-radius: 2.35rem;
    padding: 0.75rem;
    background: linear-gradient(160deg, #0d1118, #1c2230 60%, #0c1018);
    box-shadow: 0 24px 70px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.hero-stage-device-camera {
    position: absolute;
    left: 50%;
    top: 0.7rem;
    transform: translateX(-50%);
    width: 5.5rem;
    height: 1rem;
    border-radius: 9999px;
    background: rgba(0,0,0,0.55);
}
.hero-stage-ui {
    position: absolute;
    inset: 1.1rem;
    border-radius: 1.85rem;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background:
        radial-gradient(circle at 50% 15%, rgba(0,153,204,0.42), transparent 25%),
        linear-gradient(180deg, #0b1220 0%, #131b28 62%, #0a111d 100%);
    overflow: hidden;
}
.hero-stage-ui::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.09), transparent 60%);
    opacity: 0.4;
}
.hero-stage-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.38rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #97f1c2;
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.24);
}
.hero-stage-device-name,
.hero-stage-device-copy,
.hero-stage-track { position: relative; z-index: 1; }
.hero-stage-device-name {
    margin-top: 1rem;
    margin-bottom: 0.4rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}
.hero-stage-device-copy {
    color: rgba(255,255,255,0.72);
    font-size: 0.88rem;
    line-height: 1.6;
}
.hero-stage-track {
    margin-top: 1rem;
    height: 0.38rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.12);
    overflow: hidden;
}
.hero-stage-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #26d0ff 0%, #2d7bff 100%);
    animation: pulse-track 3.1s ease-in-out infinite alternate;
}
.hero-stage-card {
    position: absolute;
    width: 12.3rem;
    padding: 1rem;
    border-radius: 1.1rem;
    background: rgba(8,12,18,0.7);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.hero-stage-card-top { right: 1rem; top: 2rem; }
.hero-stage-card-bottom { right: 1rem; bottom: 2rem; }
.hero-stage-card-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.48);
    margin-bottom: 0.45rem;
}
.hero-stage-card strong {
    display: block;
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 0.35rem;
}
.hero-stage-card span {
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255,255,255,0.72);
}
.hero-stage-floating {
    position: absolute;
    min-width: 10rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    text-align: left;
    animation: card-float 5.5s ease-in-out infinite;
}
.hero-stage-floating strong {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}
.hero-stage-floating span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.hero-stage-floating-left { left: -1.25rem; bottom: -2rem; }
.hero-stage-floating-right { right: -0.75rem; top: -3rem; animation-delay: 1.2s; }
.hero-rating-stars {
    display: flex;
    gap: 0.1rem;
    margin-top: 0.35rem;
    font-size: 0.92rem;
    line-height: 1;
}
.hero-rating-stars span {
    color: #F59E0B !important;
}
.hero-rating-stars .is-muted {
    color: #d1d5db !important;
}
@media (max-width: 1023px) {
    .hero-section { padding-top: 6.75rem; }
    .hero-stage { max-width: 30rem; }
}
@media (max-width: 767px) {
    .hero-copy {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-right: 0;
        margin-left: 0;
        overflow: visible;
        text-align: left;
    }
    .hero-title {
        font-size: clamp(1.95rem, 9vw, 2.3rem);
        line-height: 1.12;
    }
    .hero-title-left {
        max-width: none;
        text-align: left;
    }
    .hero-badge {
        display: flex;
        width: 100%;
        max-width: 100%;
        white-space: nowrap;
        flex-wrap: nowrap;
        justify-content: center;
        text-align: center;
        padding-right: 0.85rem;
        padding-left: 0.85rem;
        font-size: clamp(0.66rem, 3.2vw, 0.75rem);
    }
    .hero-badge-dot { flex: 0 0 6px; }
    .hero-sub-left {
        font-size: 0.98rem;
        line-height: 1.65;
        max-width: none;
        text-align: left;
    }
    .hero-cta-row-left {
        width: 100%;
        max-width: none;
        justify-content: center;
    }
    .hero-cta-row-left a {
        width: 100%;
        justify-content: center;
    }
    .hero-trust-left {
        width: 100%;
        max-width: none;
        justify-content: center;
        gap: 0.45rem;
    }
    .hero-trust-item {
        flex: 1 1 100%;
        justify-content: center;
    }
    .hero-shell { gap: 2.2rem; }
    .hero-board {
        width: 100%;
        max-width: none;
        margin: 0 auto;
        padding: 0.5rem 0.2rem 0.9rem;
        overflow: visible;
    }
    .hb-frame {
        min-height: 22rem;
        height: 22rem;
        border-radius: 1.5rem;
        overflow: hidden;
        box-shadow: var(--shadow-lg), 0 0 68px rgba(0,153,204,0.16);
    }
    .hb-topbar {
        padding: 0.78rem 0.9rem;
        gap: 0.32rem;
    }
    .hb-topbar-dot {
        width: 0.44rem;
        height: 0.44rem;
    }
    .hb-live-badge {
        margin-left: 0.28rem;
        font-size: 0.68rem;
        min-width: 0;
    }
    .hb-active-label {
        font-size: 0.62rem;
        white-space: nowrap;
    }
    .hb-col-headers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 0.6rem;
        padding: 0.75rem 0.9rem 0.6rem;
    }
    .hb-col-head {
        min-width: 0;
        font-size: 0.62rem;
        overflow: visible;
        letter-spacing: 0.03em;
    }
    .hb-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem 0.6rem;
        padding: 0.75rem 0.9rem 1rem;
        min-height: 0;
        height: 14.2rem;
        overflow: hidden;
        align-items: start;
    }
    .hb-col-cards {
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
        gap: 0.45rem;
    }
    .hb-ticket {
        min-height: 4.25rem;
        padding: 0.62rem 0.65rem;
        border-radius: 0.75rem;
        background: color-mix(in srgb, var(--bg-card) 82%, transparent);
        border-color: color-mix(in srgb, var(--border-subtle) 82%, transparent);
    }
    .hb-ticket-device {
        font-size: 0.72rem;
    }
    .hb-ticket-issue {
        font-size: 0.66rem;
    }
    .hero-stage-screen { min-height: 28rem; padding: 1.25rem; }
    .hero-stage-device { justify-content: center; padding-left: 0; }
    .hero-stage-device-shell { width: 13.2rem; height: 22.5rem; }
    .hero-stage-card { display: none; }
    .hero-stage-floating { display: none; }
}
@media (max-width: 767px) {
    .story-visual-thumb { width: 7rem; right: 1rem; bottom: 1rem; }
}

.home-proof-section { padding: 4rem 0 5.5rem; }
.home-proof-panel {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 1.6rem;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 100%), var(--bg-secondary);
    box-shadow: var(--shadow-md);
}
@media (min-width: 1024px) {
    .home-proof-panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        align-items: center;
        padding: 1.75rem 2rem;
    }
}
.home-proof-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (min-width: 640px) { .home-proof-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .home-proof-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-proof-metric {
    padding: 1rem;
    border-radius: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
}
.home-proof-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
}
.home-proof-label {
    display: block;
    margin-top: 0.3rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}
.home-proof-clients {
    min-width: 0;
}
.home-proof-clients .trusted-label {
    margin-bottom: 1.1rem;
}
.trusted-logo-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8.8rem;
    height: 3.25rem;
    padding: 0.65rem 0.95rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.92);
}
.trusted-logo-tile img {
    display: block;
    width: 100%;
    max-height: 1.65rem;
    object-fit: contain;
    filter: grayscale(1) opacity(0.86);
    transition: filter 0.2s ease, transform 0.2s ease;
}
.trusted-logo-tile:hover img {
    filter: grayscale(0) opacity(1);
    transform: translateY(-1px);
}

.story-section {
    padding: 8rem 0;
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}
.story-grid {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .story-grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 2rem;
    }
}
.story-visual-column { position: relative; }
.story-visual-sticky { position: sticky; top: 7.5rem; }
.story-visual-shell {
    position: relative;
    min-height: 28rem;
    padding: 1.55rem;
    border-radius: 1.6rem;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: radial-gradient(circle at 30% 25%, rgba(0,153,204,0.22), transparent 25%), linear-gradient(145deg, rgba(12,14,20,0.95), rgba(20,25,36,0.96));
    box-shadow: var(--shadow-lg);
}
.story-visual-media {
    position: absolute;
    inset: 0;
    opacity: 0.28;
}
.story-visual-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.story-visual-thumb {
    position: absolute;
    right: 1.2rem;
    bottom: 1.2rem;
    width: 8.5rem;
    aspect-ratio: 4 / 5;
    border-radius: 1.1rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: var(--shadow-md);
    z-index: 3;
}
.story-visual-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.story-visual-layer {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.75;
}
.story-visual-layer-a {
    width: 18rem;
    height: 18rem;
    left: -3rem;
    top: -4rem;
    background: rgba(0,153,204,0.2);
}
.story-visual-layer-b {
    width: 16rem;
    height: 16rem;
    right: -2rem;
    bottom: -2rem;
    background: rgba(0,85,255,0.16);
}
.story-visual-center { position: relative; z-index: 2; max-width: 20rem; }
.story-visual-overline {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gb-blue);
    margin-bottom: 0.8rem;
}
.story-visual-center h3 {
    font-size: clamp(1.7rem, 3.2vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin-bottom: 0.8rem;
    color: #fff;
}
.story-visual-center p { color: rgba(255,255,255,0.72); line-height: 1.6; }
.story-orbit {
    position: absolute;
    padding: 0.55rem 0.8rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 0.76rem;
    font-weight: 600;
    animation: card-float 5s ease-in-out infinite;
}
.story-orbit-one { right: 1.1rem; top: 3.5rem; }
.story-orbit-two { left: 1.4rem; bottom: 4.4rem; animation-delay: 1.1s; }
.story-orbit-three { right: 1.5rem; bottom: 1.5rem; animation-delay: 2s; }
.story-steps-column { display: grid; gap: 0.8rem; }
.story-step {
    position: relative;
    padding: 1.25rem 1.35rem;
    border-radius: 1.15rem;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}
.story-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
    background: rgba(0,153,204,0.1);
    color: var(--gb-blue);
    font-size: 0.72rem;
    font-weight: 800;
    font-family: var(--font-mono);
}
.story-step-eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
}
.story-step-title {
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: 0.55rem;
}
.story-step-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
}
.story-step-metric {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-subtle);
}
.story-step-metric strong {
    font-size: 1.45rem;
    line-height: 1;
    font-weight: 800;
    color: var(--text-primary);
}
.story-step-metric span {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    max-width: 15rem;
    line-height: 1.5;
}

.home-services-section { background: var(--bg-primary); }
.services-grid-featured { gap: 0.85rem; background: transparent; border: none; overflow: visible; }
@media (min-width: 1024px) { .services-grid-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .services-grid-featured { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc-card-featured {
    position: relative;
    overflow: hidden;
    min-height: 15.25rem;
    padding: 1.25rem;
    border-radius: 1.25rem;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 100%), var(--bg-tertiary);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.svc-card-featured:hover {
    transform: translateY(-6px);
    border-color: rgba(0,153,204,0.25);
    box-shadow: var(--shadow-md);
}
.svc-card-featured > :not(.svc-card-noise) {
    position: relative;
    z-index: 1;
}
.svc-card-noise {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 15%, rgba(0,153,204,0.15), transparent 20%), radial-gradient(circle at 90% 82%, rgba(0,85,255,0.12), transparent 24%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.svc-card-featured:hover .svc-card-noise { opacity: 1; }
.svc-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}
.svc-card-featured .svc-card-icon {
    width: 2.35rem;
    height: 2.35rem;
    margin-bottom: 0;
}
.svc-card-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 6.2rem;
    height: 2.05rem;
    margin-left: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
}
.svc-card-logo img {
    display: block;
    width: 100%;
    max-width: 5.4rem;
    max-height: 1.3rem;
    object-fit: contain;
    object-position: right center;
}
.svc-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-subtle);
}
.svc-card-featured .svc-card-desc,
.svc-card-featured .svc-card-repairs {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.svc-card-featured .svc-card-desc { -webkit-line-clamp: 2; }
.svc-card-featured .svc-card-repairs { -webkit-line-clamp: 2; }

.ai-estimator-section {
    padding: 0 0 7rem;
    background: var(--bg-primary);
}
.ai-estimator-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 2rem;
    padding: 2rem;
    border-radius: 1.8rem;
    border: 1px solid var(--border-subtle);
    background:
        radial-gradient(circle at 10% 15%, rgba(0,153,204,0.16), transparent 26%),
        radial-gradient(circle at 90% 80%, rgba(0,85,255,0.12), transparent 28%),
        var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}
@media (min-width: 1024px) {
    .ai-estimator-panel {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        align-items: center;
        padding: 2.5rem;
    }
}
.ai-estimator-sub {
    max-width: 42rem;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.8;
}
.ai-estimator-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.ai-magic-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 9999px;
    color: var(--gb-blue);
    background: rgba(0,153,204,0.1);
    border: 1px solid rgba(0,153,204,0.18);
    box-shadow: 0 10px 28px rgba(0,153,204,0.14);
}
.ai-magic-icon svg {
    width: 1rem;
    height: 1rem;
}
.ai-estimator-flow {
    display: grid;
    gap: 0.85rem;
}
@media (min-width: 768px) {
    .ai-estimator-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .ai-estimator-flow { grid-column: 2; grid-row: 1 / span 2; }
}
.ai-flow-step {
    min-height: 12rem;
    padding: 1.25rem;
    border-radius: 1.2rem;
    border: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
}
.ai-flow-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
    background: rgba(0,153,204,0.1);
    color: var(--gb-blue);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 800;
}
.ai-flow-step strong {
    display: block;
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 0.55rem;
}
.ai-flow-step p {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.65;
}
.ai-estimator-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.cases-section {
    padding: 7rem 0;
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}
.cases-grid { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .cases-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case-card {
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
.case-card-media {
    position: relative;
    --case-split: 50%;
    display: block;
    min-height: 16rem;
    overflow: hidden;
    background: #f3f7fb;
    touch-action: pan-y;
    user-select: none;
}
.case-card-media::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--case-split);
    z-index: 4;
    width: 1px;
    background: rgba(0,92,130,0.42);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
    pointer-events: none;
}
.case-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.42;
    mix-blend-mode: multiply;
    filter: saturate(0.9) contrast(1.05);
}
.case-card-half {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    transition: width 0.18s ease, left 0.18s ease;
}
.case-card-before {
    left: 0;
    width: var(--case-split);
    background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.78));
    color: #111827;
}
.case-card-after {
    left: var(--case-split);
    right: 0;
    background: linear-gradient(180deg, rgba(0,153,204,0.34), rgba(0,85,255,0.28));
    color: #fff;
    border-left: 1px solid rgba(0,153,204,0.16);
}
.case-card-media.is-dragging .case-card-half {
    transition: none;
}
.case-card-half p {
    min-width: 11rem;
    font-size: 0.88rem;
    line-height: 1.7;
    color: inherit;
    transition: opacity 0.14s ease;
}
.case-card-state {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: auto;
    padding: 0.38rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(255,255,255,0.1);
    color: inherit;
    transition: opacity 0.14s ease;
}
.case-card-after .case-card-state {
    align-self: flex-end;
    background: rgba(255,255,255,0.16);
    color: #fff;
}
.case-card-handle {
    position: absolute;
    left: var(--case-split);
    top: 50%;
    z-index: 6;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.68);
    background: rgba(8,14,22,0.74);
    color: #fff;
    box-shadow: 0 14px 34px rgba(0,0,0,0.22);
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.case-card-handle:hover,
.case-card-handle:focus-visible {
    background: var(--gb-blue);
    box-shadow: 0 18px 44px rgba(0,153,204,0.34);
    transform: translate(-50%, -50%) scale(1.05);
}
.case-card-media.is-dragging .case-card-handle {
    background: var(--gb-blue);
    transform: translate(-50%, -50%) scale(1.08);
}
.case-card-media.is-near-start .case-card-before p,
.case-card-media.is-near-start .case-card-before .case-card-state,
.case-card-media.is-near-end .case-card-after p,
.case-card-media.is-near-end .case-card-after .case-card-state {
    opacity: 0;
}
.case-card-handle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.case-card-handle-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}
.case-card-badge {
    position: absolute;
    left: 50%;
    top: 1rem;
    transform: translateX(-50%);
    padding: 0.48rem 0.85rem;
    border-radius: 9999px;
    background: rgba(10,14,20,0.75);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 5;
}
.case-card-body { padding: 1.25rem 1.35rem 1.45rem; }
.case-card-kicker {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gb-blue);
    margin-bottom: 0.5rem;
}
.case-card-body h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
}

.testimonials-section {
    padding: 7rem 0;
    background: var(--bg-primary);
}
.testimonials-panel {
    display: grid;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 1.8rem;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 100%), var(--bg-secondary);
}
@media (min-width: 1024px) {
    .testimonials-panel { padding: 2.4rem; }
}
.testimonials-hero {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .testimonials-hero {
        grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
        gap: 2rem;
    }
}
.testimonials-copy {
    max-width: 38rem;
}
.testimonials-sub {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.75;
}
.testimonials-rating {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0.15rem 0.65rem;
    margin-top: 1.4rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}
.testimonials-rating strong {
    color: var(--text-primary);
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 800;
}
.testimonials-rating small {
    grid-column: 1 / -1;
    color: var(--text-tertiary);
    font-size: 0.78rem;
}
.testimonials-carousel {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.testimonials-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: testimonials-marquee calc(var(--testimonial-count, 9) * 8s) linear infinite;
    will-change: transform;
}
.testimonials-carousel:hover .testimonials-track {
    animation-play-state: paused;
}
@keyframes testimonials-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 0.5rem)); }
}
.testimonial-feature-image {
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
}
.testimonial-feature-image img {
    width: 100%;
    height: clamp(16rem, 28vw, 23rem);
    object-fit: cover;
    display: block;
}
.testimonial-card {
    flex: 0 0 min(24rem, calc(100vw - 3rem));
    padding: 1.25rem;
    border-radius: 1.2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
    .testimonial-card {
        flex-basis: min(25rem, calc((100vw - 8rem) / 2.2));
    }
}
@media (min-width: 1280px) {
    .testimonial-card {
        flex-basis: min(25rem, calc((100vw - 10rem) / 3.05));
    }
}
.testimonial-stars {
    color: #f5b942;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}
.testimonials-rating .testimonial-stars {
    margin-bottom: 0;
    letter-spacing: 0.04em;
}
.testimonial-stars span {
    color: color-mix(in srgb, #f5b942 35%, var(--text-disabled));
}
.testimonial-quote {
    color: var(--text-primary);
    font-size: 0.98rem;
    line-height: 1.65;
    margin-bottom: 1rem;
}
.testimonial-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}
.testimonial-meta {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    margin-top: 0.2rem;
}
@media (prefers-reduced-motion: reduce) {
    .testimonials-carousel {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
        padding-bottom: 0.3rem;
    }
    .testimonials-track {
        animation: none;
    }
}

/* ─── Service Pages Refresh ─────────────────────────────────────────────────── */
.service-breadcrumb {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
}

.service-hero {
    position: relative;
    overflow: hidden;
    padding: 5rem 0 4rem;
    background:
        radial-gradient(circle at 20% 15%, rgba(0,153,204,0.16), transparent 26%),
        radial-gradient(circle at 82% 20%, rgba(0,85,255,0.12), transparent 24%),
        var(--bg-primary);
}
.service-hero-grid {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .service-hero-grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 4rem;
        padding: 0 1.5rem;
    }
}
.service-hero-title {
    font-size: clamp(2.7rem, 5vw, 4.8rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 800;
    color: var(--text-primary);
    max-width: 10ch;
    margin-bottom: 1.4rem;
}
.service-hero-sub {
    max-width: 38rem;
    color: var(--text-secondary);
    font-size: 1.08rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}
.service-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 2rem;
}
.service-hero-actions > a {
    flex: 1 1 0;
    min-height: 3.8rem;
    min-width: 0;
    justify-content: center;
    border-radius: 1rem;
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    text-align: center;
}
.service-hero-actions > .btn-primary {
    box-shadow: 0 14px 28px rgba(0, 153, 204, 0.16);
}
.service-whatsapp-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(34, 197, 94, 0.12);
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}
.service-whatsapp-cta:hover {
    transform: translateY(-1px);
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.42);
    box-shadow: 0 16px 32px rgba(34, 197, 94, 0.16);
    color: #166534;
}
.service-whatsapp-cta svg {
    flex: 0 0 auto;
}
@media (min-width: 768px) {
    .service-hero-actions {
        flex-wrap: nowrap;
    }
}
@media (max-width: 767px) {
    .service-hero-actions > a {
        flex-basis: 100%;
    }
}
.service-hero-props {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}
.service-prop-card {
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 100%), var(--bg-tertiary);
}
.service-prop-label {
    display: block;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 0.4rem;
}
.service-prop-value {
    display: block;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}
.service-hero-media { position: relative; }
.service-hero-stage {
    position: relative;
    min-height: 34rem;
    overflow: hidden;
    border-radius: 2rem;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--bg-card) 86%, transparent);
    box-shadow: var(--shadow-lg), 0 0 90px rgba(0,153,204,0.12);
}
.service-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.42;
}
.service-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6,7,10,0.12), rgba(6,7,10,0.78)),
        radial-gradient(circle at center, rgba(0,153,204,0.14), transparent 52%);
}
.service-hero-device-card {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    z-index: 2;
    padding: 1.5rem;
    border-radius: 1.4rem;
    background: rgba(9,12,18,0.62);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.service-hero-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.36rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gb-blue);
    background: rgba(0,153,204,0.12);
    border: 1px solid rgba(0,153,204,0.22);
    margin-bottom: 1rem;
}
.service-hero-device-card h2 {
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin-bottom: 0.7rem;
}
.service-hero-device-card p {
    color: rgba(255,255,255,0.74);
    line-height: 1.7;
}
.service-hero-progress {
    margin-top: 1rem;
    height: 0.38rem;
    border-radius: 9999px;
    overflow: hidden;
    background: rgba(255,255,255,0.14);
}
.service-hero-progress span {
    display: block;
    height: 100%;
    width: 72%;
    border-radius: inherit;
    background: linear-gradient(90deg, #26d0ff 0%, #2d7bff 100%);
}
.service-hero-stats-card {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    display: grid;
    gap: 0;
    min-width: 12rem;
    padding: 0.95rem 1rem;
    border-radius: 1.35rem;
    box-shadow: var(--shadow-md);
}
.service-hero-stat-row {
    display: grid;
    gap: 0.18rem;
}
.service-hero-stat-divider {
    height: 1px;
    margin: 0.8rem 0;
    background: rgba(148, 163, 184, 0.22);
}
.service-hero-stat-row strong {
    display: block;
    color: var(--text-primary);
    font-size: 1.35rem;
    font-weight: 800;
}
.service-hero-stat-row span {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.service-hero-floating {
    position: relative;
    min-width: 10rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
}
.service-hero-floating strong {
    display: block;
    color: var(--text-primary);
    font-size: 1.35rem;
    font-weight: 800;
}
.service-hero-floating span {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.service-hero-stars {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    margin-bottom: 0.25rem;
}
.service-hero-stars svg {
    width: 0.88rem;
    height: 0.88rem;
    color: rgba(148, 163, 184, 0.6);
}
.service-hero-stars svg.is-active {
    color: #f59e0b;
}

.service-details-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-top: 1px solid var(--border-subtle);
    scroll-margin-top: 6.5rem;
}
@keyframes serviceQuoteBounce {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: var(--shadow-sm);
    }
    35% {
        transform: translateY(-6px) scale(1.01);
        box-shadow: 0 20px 44px rgba(0, 153, 204, 0.18);
    }
    100% {
        transform: translateY(0) scale(1);
        box-shadow: var(--shadow-sm);
    }
}
.service-details-section:target .service-panel {
    animation: serviceQuoteBounce 0.75s ease;
}
.service-details-grid {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 1024px) {
    .service-details-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        padding: 0 1.5rem;
    }
}
.service-panel {
    overflow: hidden;
    border-radius: 1.75rem;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 100%), var(--bg-card);
    box-shadow: var(--shadow-sm);
}
.service-panel-large { display: grid; }
.service-panel-copy { padding: 1.75rem 1.75rem 0; }
.service-panel-title {
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.9rem;
}
.service-panel-sub {
    color: var(--text-secondary);
    line-height: 1.8;
    max-width: 38rem;
}
.service-panel-media,
.service-models-hero {
    padding: 1.5rem;
}
.service-panel-media img,
.service-models-hero img {
    width: 100%;
    height: 17rem;
    object-fit: cover;
    border-radius: 1.25rem;
    display: block;
}
.service-repair-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding: 0 1.5rem 1.5rem;
}
.service-inline-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gb-blue);
}
@media (min-width: 640px) {
    .service-repair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.service-repair-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.8rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
    text-align: left;
    transition: 180ms ease;
}
.service-repair-item:hover,
.service-repair-item.is-active {
    border-color: rgba(0,153,204,0.24);
    background: rgba(0,153,204,0.1);
    color: var(--text-primary);
}
.service-repair-mark {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 9999px;
    border: 2px solid rgba(0,153,204,0.45);
    flex: 0 0 auto;
    transition: 180ms ease;
}
.service-repair-item.is-active .service-repair-mark {
    background: var(--gb-blue);
    border-color: var(--gb-blue);
    box-shadow: 0 0 0 4px rgba(0,153,204,0.14);
}
.service-repair-label {
    color: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
}
.service-repair-more {
    margin-top: 0.9rem;
}
.service-repair-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--gb-blue);
    font-size: 0.9rem;
    font-weight: 700;
}
.service-repair-grid-extra {
    margin-top: 0.9rem;
}
.service-chooser-layout {
    display: grid;
    gap: 1.5rem;
    padding: 0 1.5rem 1.5rem;
}
@media (min-width: 1024px) {
    .service-chooser-layout {
        grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
        align-items: start;
    }
}
.service-chooser-main {
    display: grid;
    gap: 1rem;
}
.service-step-card {
    padding: 1.15rem;
    border-radius: 1.15rem;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 100%), var(--bg-tertiary);
    transition: 180ms ease;
}
.service-step-card.is-disabled {
    opacity: 0.72;
    pointer-events: none;
}
.service-step-head {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
}
.service-step-head p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
}
.service-step-card-models {
    margin-top: 0.2rem;
}
.service-panel-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.service-brand-badge {
    width: auto;
    height: 2.9rem;
    max-width: 8rem;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 0.1rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.75rem;
    background: rgba(255,255,255,0.92);
}
.service-brand-badge-apple {
    height: 2.7rem;
    max-width: 2.7rem;
    padding: 0;
    background: transparent;
}
.service-chooser-aside {
    display: grid;
    gap: 0.9rem;
}
@media (min-width: 1024px) {
    .service-chooser-aside {
        position: sticky;
        top: 7rem;
    }
}
.service-models-search {
    padding: 0;
}
.service-model-searchbox {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.6rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--border-default);
    background: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.8), inset 0 1px 0 rgba(255,255,255,0.3);
    color: var(--text-tertiary);
}
.service-model-searchbox input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.96rem;
}
.service-model-searchbox input::placeholder {
    color: var(--text-tertiary);
}
.service-model-family-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.85rem;
}
.service-model-family-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid var(--border-default);
    background: rgba(255,255,255,0.76);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: 180ms ease;
}
.service-model-family-chip:hover,
.service-model-family-chip.is-active {
    border-color: rgba(0,153,204,0.24);
    background: rgba(0,153,204,0.12);
    color: var(--text-primary);
    box-shadow: 0 10px 20px rgba(0,153,204,0.08);
}
.service-field-hint {
    margin-top: 0.55rem;
    color: var(--text-tertiary);
    font-size: 0.88rem;
    line-height: 1.6;
}
.service-models-quick,
.service-model-search-results {
    display: grid;
    gap: 0.7rem;
}
.service-models-quick {
    padding-top: 0.2rem;
}
.service-models-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0;
}
.service-models-cloud-compact {
    min-height: 3rem;
    max-height: 12.5rem;
    overflow: auto;
    padding-right: 0.25rem;
}
.service-model-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: 0.45rem 0.8rem;
    border-radius: 0.9rem;
    border: 1px solid var(--border-default);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    transition: 180ms ease;
}
.service-model-chip:hover,
.service-model-chip.is-active {
    border-color: rgba(0,153,204,0.24);
    background: rgba(0,153,204,0.12);
    color: var(--text-primary);
}
.service-model-chip-featured {
    color: var(--text-primary);
    border-color: rgba(0,153,204,0.18);
    background: rgba(0,153,204,0.1);
}
.service-models-cloud-featured .service-model-chip {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.26);
}
.service-selection-card {
    padding: 1.15rem;
    border-radius: 1.15rem;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 100%), var(--bg-tertiary);
}
.service-selection-card-accent {
    background:
        linear-gradient(180deg, rgba(0,153,204,0.1), transparent 100%),
        var(--bg-tertiary);
}
.service-selection-card-main {
    box-shadow: 0 24px 48px rgba(10, 18, 34, 0.08);
}
.service-selection-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.service-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    color: var(--text-tertiary);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.service-status-pill.is-ready {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.2);
    color: #15803d;
}
.service-selection-title {
    color: var(--text-primary);
    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.service-selection-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.service-estimate-actions {
    margin-top: 1rem;
}
.service-estimate-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.95rem;
    appearance: none;
    width: 100%;
    min-height: 5rem;
    padding: 1rem 1rem 1rem 1.05rem;
    border: 1px solid rgba(7, 89, 133, 0.12);
    border-radius: 1.2rem;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.26), transparent 48%),
        linear-gradient(135deg, #071f38 0%, #0b4d78 52%, #15a1d7 100%);
    color: #f8fcff;
    text-align: left;
    overflow: hidden;
    isolation: isolate;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 18px 36px rgba(9, 57, 88, 0.2);
    transition: transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
}
.service-estimate-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 46px rgba(9, 57, 88, 0.24);
}
.service-estimate-trigger:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.45),
        0 0 0 6px rgba(0,153,204,0.22),
        0 24px 46px rgba(9, 57, 88, 0.24);
}
.service-estimate-trigger:disabled {
    cursor: wait;
}
.service-estimate-trigger.is-disabled-ui {
    opacity: 0.92;
}
.service-estimate-trigger-glow {
    position: absolute;
    inset: auto auto -40% -8%;
    width: 12rem;
    height: 12rem;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(255,255,255,0.24), transparent 65%);
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}
.service-estimate-trigger-icon,
.service-estimate-trigger-copy,
.service-estimate-trigger-badge {
    position: relative;
    z-index: 1;
}
.service-estimate-trigger-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.service-estimate-trigger-icon svg {
    width: 1.45rem;
    height: 1.45rem;
}
.service-estimate-trigger-copy {
    display: grid;
    gap: 0.18rem;
    flex: 1;
}
.service-estimate-trigger-copy strong {
    color: #ffffff;
    font-size: 1.06rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.service-estimate-trigger-copy span {
    color: rgba(236, 247, 255, 0.88);
    font-size: 0.82rem;
    line-height: 1.45;
}
.service-estimate-trigger-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    min-height: 2.4rem;
    padding: 0.35rem 0.65rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}
.service-estimate-trigger-spinner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}
.service-estimate-trigger-spinner span {
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 9999px;
    background: currentColor;
    opacity: 0.35;
    animation: gbEstimatePulse 1.1s infinite ease-in-out;
}
.service-estimate-trigger-spinner span:nth-child(2) {
    animation-delay: 0.12s;
}
.service-estimate-trigger-spinner span:nth-child(3) {
    animation-delay: 0.24s;
}
.service-estimate-trigger.is-loading .service-estimate-trigger-glow {
    animation: gbEstimateGlow 1.6s infinite ease-in-out;
}
.service-estimate-trigger.is-loading .service-estimate-trigger-icon {
    background: rgba(255,255,255,0.18);
    transform: scale(1.02);
}
.service-estimate-trigger.is-loading .service-estimate-trigger-badge {
    background: rgba(255,255,255,0.18);
}
.service-estimate-trigger.is-loading .service-estimate-trigger-copy span {
    color: rgba(255,255,255,0.94);
}
.service-estimate-result {
    margin-top: 0.9rem;
}
.service-estimate-kicker {
    color: var(--gb-blue);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.55rem;
}
.service-estimate-box {
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(0,153,204,0.18);
    background: rgba(255,255,255,0.42);
}
.service-estimate-box h4 {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 0.8rem;
}
.service-estimate-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}
.service-estimate-line strong {
    color: var(--text-primary);
    font-weight: 700;
}
.service-estimate-line-total {
    margin-top: 0.25rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-subtle);
}
.service-estimate-line-total strong {
    font-size: 1.02rem;
}
.service-estimate-line-total > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.service-estimate-tax-note {
    margin-top: 0.18rem;
    color: var(--text-tertiary);
    font-size: 0.68rem;
    line-height: 1.2;
}
.service-estimate-note {
    margin-top: 0.8rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.6;
}
.service-selection-tag {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    background: rgba(0,153,204,0.1);
    border: 1px solid rgba(0,153,204,0.18);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 700;
}
.service-lead-form {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.service-field {
    display: grid;
    gap: 0.35rem;
}
.service-lead-form input,
.service-lead-form textarea {
    width: 100%;
    border: 1px solid var(--border-default);
    outline: 0;
    border-radius: 0.95rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 0.9rem 0.95rem;
    font-size: 0.94rem;
}
.service-lead-form input.is-invalid,
.service-lead-form textarea.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.08);
}
.service-lead-form textarea {
    resize: vertical;
    min-height: 7rem;
}
.service-human-check {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.2rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 600;
}
@keyframes gbEstimatePulse {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.3;
    }
    40% {
        transform: translateY(-2px);
        opacity: 1;
    }
}
@keyframes gbEstimateGlow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.55;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.9;
    }
}
@media (max-width: 640px) {
    .service-estimate-trigger {
        align-items: flex-start;
        padding: 0.95rem;
    }
    .service-estimate-trigger-badge {
        display: none;
    }
}
.service-human-check input {
    width: 1rem;
    height: 1rem;
}
.service-field-error {
    color: #dc2626;
    font-size: 0.82rem;
    line-height: 1.4;
}
.service-recaptcha-note {
    color: var(--text-tertiary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.service-recaptcha-note a,
.recaptcha-disclosure a {
    color: currentColor;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.service-contact-actions {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.9rem;
}
.service-contact-link {
    justify-content: center;
    width: 100%;
}
.service-contact-link-whatsapp {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    box-shadow: 0 14px 28px rgba(34,197,94,0.2);
    font-size: 1rem;
    min-height: 3.3rem;
}
.service-contact-link-whatsapp:hover {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
    box-shadow: 0 18px 30px rgba(34,197,94,0.24);
}
.service-selection-footnote {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 0.88rem;
    margin-top: 0.85rem;
}
.service-models-note {
    margin: 1.15rem 0 0;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: rgba(0,153,204,0.08);
    border: 1px solid rgba(0,153,204,0.16);
    color: var(--text-secondary);
    line-height: 1.7;
}

.service-faq-section {
    padding: 6rem 0;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-primary);
}

.service-cta-section {
    padding: 6rem 0;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
}
.service-cta-panel {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    gap: 1.25rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .service-cta-panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
        padding: 0 1.5rem;
    }
}
.service-cta-copy {
    padding: 2rem;
    border-radius: 1.75rem;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 100%), var(--bg-card);
}
.service-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.service-cta-action {
    flex: 1 1 17rem;
    min-height: 3.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.95rem 1.5rem;
    border-radius: 1rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.service-cta-action-whatsapp {
    background: #22c55e;
    border: 1px solid #22c55e;
    color: #fff;
    box-shadow: 0 14px 28px rgba(34, 197, 94, 0.18);
}
.service-cta-action-whatsapp:hover {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(34, 197, 94, 0.22);
}
.service-cta-action-secondary {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}
.service-cta-action-secondary:hover {
    background: var(--bg-elevated);
    border-color: rgba(0, 153, 204, 0.28);
    color: var(--text-primary);
    transform: translateY(-1px);
}
.service-cta-media {
    overflow: hidden;
    border-radius: 1.75rem;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
}
.service-cta-media img {
    width: 100%;
    height: 100%;
    min-height: 22rem;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .service-hero { padding: 4rem 0 3rem; }
    .service-hero-props { grid-template-columns: 1fr; }
    .service-hero-stage { min-height: 28rem; }
    .service-hero-device-card { left: 1rem; right: 1rem; bottom: 1rem; }
    .service-hero-stats-card {
        top: 1rem;
        right: 1rem;
        min-width: 9.6rem;
        padding: 0.75rem 0.8rem;
    }
    .service-hero-stat-row strong {
        font-size: 1.1rem;
    }
    .service-hero-stat-row span {
        font-size: 0.72rem;
    }
    .service-panel-copy { padding: 1.35rem 1.35rem 0; }
    .service-panel-media,
    .service-models-hero { padding: 1rem; }
    .service-panel-topline { flex-direction: column; align-items: flex-start; }
    .service-chooser-layout,
    .service-repair-grid,
    .service-models-cloud { padding-left: 0; padding-right: 0; }
    .service-selection-topline { flex-direction: column; align-items: flex-start; }
    .service-models-note { margin-left: 0; margin-right: 0; }
    .service-contact-actions { grid-template-columns: 1fr; }
    .service-cta-copy { padding: 1.5rem; }
    .service-cta-action { flex-basis: 100%; }
}

.form-input.is-invalid {
    border-color: rgba(239, 68, 68, 0.9) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.order-status-feedback {
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    border: 1px solid var(--border-default);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.order-status-feedback.is-loading {
    border-color: rgba(0, 153, 204, 0.28);
    background: rgba(0, 153, 204, 0.08);
    color: var(--text-primary);
}

.order-status-feedback.is-success {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.08);
    color: var(--text-primary);
}

.order-status-feedback.is-error {
    border-color: rgba(239, 68, 68, 0.32);
    background: rgba(239, 68, 68, 0.08);
    color: var(--text-primary);
}

.order-status-feedback strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.98rem;
    color: var(--text-primary);
}

.order-status-result {
    width: 100%;
}

.order-status-result--compact {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.order-result-card {
    padding: clamp(1.2rem, 2vw, 2rem);
    border-radius: 1.5rem;
    border: 1px solid var(--border-default);
    background:
        radial-gradient(circle at top left, rgba(0, 153, 204, 0.10), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 88%, white 12%), var(--bg-secondary));
    box-shadow: 0 30px 80px rgba(4, 10, 25, 0.12);
}

.order-result-card--success {
    border-color: rgba(34, 197, 94, 0.22);
}

.order-result-card--info {
    border-color: rgba(59, 130, 246, 0.22);
}

.order-result-card--danger {
    border-color: rgba(239, 68, 68, 0.28);
    background:
        radial-gradient(circle at top left, rgba(239, 68, 68, 0.14), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 88%, white 12%), var(--bg-secondary));
}

.order-result-card--warning,
.order-result-card--missing {
    border-color: rgba(245, 158, 11, 0.24);
}

.order-result-card--compact {
    padding: 1.35rem 1.4rem;
    background:
        radial-gradient(circle at top left, rgba(245, 158, 11, 0.08), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 92%, white 8%), var(--bg-secondary));
    box-shadow: 0 18px 42px rgba(4, 10, 25, 0.08);
}

.order-result-head {
    display: grid;
    gap: 1rem;
    align-items: start;
}

.order-result-compact-head {
    display: grid;
    gap: 0.9rem;
    align-items: start;
}

.order-result-eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gb-blue);
}

.order-result-head h3 {
    margin: 0;
    font-size: clamp(1.55rem, 2.6vw, 2.4rem);
    line-height: 1.05;
    color: var(--text-primary);
}

.order-result-compact-head h3 {
    margin: 0;
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    line-height: 1.08;
    color: var(--text-primary);
}

.order-result-summary {
    margin: 0.65rem 0 0;
    max-width: 42rem;
    color: var(--text-secondary);
    font-size: 1rem;
}

.order-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border-default);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.order-status-pill--success {
    color: #166534;
    background: rgba(187, 247, 208, 0.72);
    border-color: rgba(34, 197, 94, 0.28);
}

.order-status-pill--info {
    color: #1d4ed8;
    background: rgba(191, 219, 254, 0.72);
    border-color: rgba(59, 130, 246, 0.28);
}

.order-status-pill--quote-pending {
    color: #92400e;
    background: rgba(253, 230, 138, 0.92);
    border-color: rgba(245, 158, 11, 0.38);
}

.order-status-pill--warning {
    color: #92400e;
    background: rgba(253, 230, 138, 0.76);
    border-color: rgba(245, 158, 11, 0.32);
}

.order-status-pill--danger {
    color: #991b1b;
    background: rgba(254, 202, 202, 0.88);
    border-color: rgba(239, 68, 68, 0.34);
}

.order-status-pill--neutral {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.order-result-layout {
    display: grid;
    gap: 1rem;
    margin-top: 1.35rem;
}

.order-result-main,
.order-result-side {
    display: grid;
    gap: 1rem;
}

.order-result-banner {
    padding: 1rem 1.1rem;
    border-radius: 1.15rem;
    border: 1px solid var(--border-default);
}

.order-result-banner--success {
    background: rgba(34, 197, 94, 0.11);
    border-color: rgba(34, 197, 94, 0.22);
}

.order-result-banner--info {
    background: rgba(59, 130, 246, 0.11);
    border-color: rgba(59, 130, 246, 0.22);
}

.order-result-banner--warning,
.order-result-banner--neutral {
    background: rgba(245, 158, 11, 0.11);
    border-color: rgba(245, 158, 11, 0.22);
}

.order-result-banner--danger {
    background: rgba(239, 68, 68, 0.13);
    border-color: rgba(239, 68, 68, 0.24);
}

.order-result-banner-label,
.order-result-mini-label,
.order-result-note-label {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.order-result-banner strong,
.order-result-amount strong,
.order-result-mini strong {
    display: block;
    color: var(--text-primary);
    line-height: 1.2;
}

.order-result-banner strong {
    font-size: 1.08rem;
}

.order-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.order-result-list li {
    position: relative;
    padding-left: 1.55rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.order-result-list li::before {
    content: '';
    position: absolute;
    top: 0.58rem;
    left: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--gb-blue);
    box-shadow: 0 0 0 0.28rem rgba(0, 153, 204, 0.12);
}

.order-result-card--danger .order-result-eyebrow,
.order-result-card--danger .order-result-summary a,
.order-result-card--danger .order-result-list a,
.order-result-card--danger .order-result-copy a,
.order-result-card--danger .order-result-note-body a {
    color: #dc2626;
}

.order-result-card--danger .order-result-list li::before {
    background: #ef4444;
    box-shadow: 0 0 0 0.28rem rgba(239, 68, 68, 0.14);
}

.order-result-list a,
.order-result-copy a,
.order-terms-content a,
.order-result-note-body a {
    color: var(--gb-blue);
    text-decoration: none;
}

.order-result-list a:hover,
.order-result-copy a:hover,
.order-terms-content a:hover,
.order-result-note-body a:hover {
    text-decoration: underline;
}

.order-result-note,
.order-result-mini,
.order-result-amount,
.order-result-panel {
    padding: 1rem 1.05rem;
    border-radius: 1.15rem;
    border: 1px solid var(--border-default);
    background: color-mix(in srgb, var(--bg-secondary) 84%, white 16%);
}

.order-result-note-body {
    color: var(--text-secondary);
    line-height: 1.7;
}

.order-result-amount strong {
    font-size: 1.7rem;
}

.order-result-copy {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.65;
}

.order-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.85rem;
}

.order-result-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.7rem;
    padding: 0.75rem 0.95rem;
    border-radius: 0.9rem;
    border: 1px solid var(--border-default);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.order-result-action svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    flex-shrink: 0;
}

.order-result-action span {
    display: inline-block;
}

.order-result-action:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 153, 204, 0.28);
    background: color-mix(in srgb, var(--bg-primary) 88%, rgba(0, 153, 204, 0.06));
}

.order-result-action--whatsapp {
    border-color: rgba(37, 211, 102, 0.28);
    background: rgba(37, 211, 102, 0.12);
    color: #166534;
}

.order-result-action--whatsapp:hover {
    border-color: rgba(37, 211, 102, 0.42);
    background: rgba(37, 211, 102, 0.18);
}

.order-result-action[href*="/contacto"] {
    border-color: rgba(0, 153, 204, 0.28);
    background: rgba(0, 153, 204, 0.09);
    color: var(--gb-blue);
}

.order-result-action[href*="/contacto"]:hover {
    border-color: rgba(0, 153, 204, 0.42);
    background: rgba(0, 153, 204, 0.14);
}

.order-quotes {
    display: grid;
    gap: 1rem;
    padding: 1rem 0 0.25rem;
    border-top: 1px solid var(--border-subtle);
}

.order-quotes-head {
    display: grid;
    gap: 0.9rem;
    align-items: start;
}

.order-quotes-head h4 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.order-quote-grid {
    display: grid;
    gap: 0.9rem;
}

.order-quote-card {
    padding: 1rem 1.05rem;
    border-radius: 1.15rem;
    border: 1px solid var(--border-default);
    background: color-mix(in srgb, var(--bg-secondary) 84%, white 16%);
}

.order-quote-head {
    display: grid;
    gap: 0.75rem;
    align-items: start;
    margin-bottom: 0.85rem;
}

.order-quote-head strong {
    font-size: 1.25rem;
    color: var(--text-primary);
}

.order-quote-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    margin-top: 0.35rem;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.order-quote-status--pending {
    color: #92400e;
    background: rgba(253, 230, 138, 0.9);
}

.order-quote-status--accepted {
    color: #166534;
    background: rgba(187, 247, 208, 0.82);
}

.order-quote-status--rejected {
    color: #991b1b;
    background: rgba(254, 202, 202, 0.82);
}

.order-quote-body {
    color: var(--text-secondary);
    line-height: 1.68;
}

.order-quote-meta {
    margin: 0.8rem 0 0;
    color: var(--text-tertiary);
    font-size: 0.88rem;
}

.order-quote-actions,
.order-quote-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

.order-quote-action--accept {
    border-color: rgba(34, 197, 94, 0.32);
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
}

.order-quote-action--accept:hover {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.18);
}

.order-quote-action--reject {
    border-color: rgba(239, 68, 68, 0.32);
    background: rgba(239, 68, 68, 0.1);
    color: #991b1b;
}

.order-quote-action--reject:hover {
    border-color: rgba(239, 68, 68, 0.44);
    background: rgba(239, 68, 68, 0.16);
}

.order-quote-legend {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.68;
}

.order-terms {
    border-top: 1px solid var(--border-subtle);
    padding-top: 1rem;
}

.order-terms h4 {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.order-terms-content {
    display: block;
}

.order-terms-content ul {
    margin: 0;
    padding-left: 1.05rem;
    display: grid;
    gap: 0.55rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.5;
}

.order-terms-more {
    margin-top: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 153, 204, 0.22);
    background: rgba(0, 153, 204, 0.08);
    color: var(--gb-blue);
    font-size: 0.78rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.order-terms-more:hover {
    border-color: rgba(0, 153, 204, 0.38);
    background: rgba(0, 153, 204, 0.14);
}

.order-terms-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.order-terms-modal.hidden,
.order-terms-modal[hidden] {
    display: none;
}

.order-terms-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,5,10,0.76);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.order-terms-modal-dialog {
    position: relative;
    width: min(100%, 48rem);
    max-height: min(92vh, 56rem);
    overflow-y: auto;
    margin: 0 1rem 1rem;
    padding: 1.25rem;
    border-radius: 1.5rem;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--bg-card) 96%, transparent);
    box-shadow: var(--shadow-lg);
}

.order-terms-modal-close {
    position: absolute;
    top: 0.95rem;
    right: 0.95rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid var(--border-default);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.order-terms-modal-close:hover {
    color: var(--text-primary);
    border-color: rgba(0,153,204,0.28);
}

.order-terms-modal-close svg {
    width: 1.1rem;
    height: 1.1rem;
}

.order-terms-modal-copy {
    padding-right: 3rem;
}

.order-terms-modal-copy h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.08;
    font-weight: 800;
    color: var(--text-primary);
}

.order-terms-modal-copy ul {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.8rem;
    color: var(--text-secondary);
    font-size: 0.94rem;
    line-height: 1.68;
}

@media (min-width: 860px) {
    .order-result-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .order-result-compact-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .order-quotes-head,
    .order-quote-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .order-result-layout {
        grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.75fr);
        align-items: start;
    }
}

.service-step-card.is-missing {
    border-color: rgba(239, 68, 68, 0.42);
    background: color-mix(in srgb, var(--bg-tertiary) 88%, rgba(239, 68, 68, 0.08));
}

.service-step-card.is-missing .service-inline-label,
.service-step-card.is-missing .service-step-head p {
    color: #ef4444;
}

.service-contact-link-mail {
    background: rgba(0, 153, 204, 0.08);
    border-color: rgba(0, 153, 204, 0.26);
    color: var(--text-primary);
}

.service-contact-link-mail:hover {
    background: rgba(0, 153, 204, 0.14);
    border-color: rgba(0, 153, 204, 0.4);
}

.service-contact-link[disabled],
.service-contact-link.is-disabled {
    opacity: 0.65;
    pointer-events: none;
}

.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ─── Print ──────────────────────────────────────────────────────────────────── */
@media print { body { background: white; color: black; } header, footer, .whatsapp-fab, .social-sidebar { display: none; } }

/* ─── Hero background particles ─────────────────────────────────────────────── */
.hero-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.hero-particle { position: absolute; border-radius: 9999px; animation: hp-float linear infinite; bottom: -10px; }
.hero-particle:nth-child(1) { width: 4px; height: 4px; left: 10%; animation-duration: 14s; animation-delay: 0s;    background: rgba(0,153,204,0.7); }
.hero-particle:nth-child(2) { width: 3px; height: 3px; left: 25%; animation-duration: 17s; animation-delay: -4s;   background: rgba(0,85,255,0.6); }
.hero-particle:nth-child(3) { width: 5px; height: 5px; left: 42%; animation-duration: 11s; animation-delay: -7s;   background: rgba(0,153,204,0.5); }
.hero-particle:nth-child(4) { width: 3px; height: 3px; left: 58%; animation-duration: 15s; animation-delay: -2s;   background: rgba(0,85,255,0.7); }
.hero-particle:nth-child(5) { width: 4px; height: 4px; left: 73%; animation-duration: 12s; animation-delay: -9s;   background: rgba(0,153,204,0.6); }
.hero-particle:nth-child(6) { width: 3px; height: 3px; left: 18%; animation-duration: 16s; animation-delay: -5s;   background: rgba(96,165,250,0.6); }
.hero-particle:nth-child(7) { width: 5px; height: 5px; left: 52%; animation-duration: 10s; animation-delay: -3s;   background: rgba(0,85,255,0.5); }
.hero-particle:nth-child(8) { width: 3px; height: 3px; left: 86%; animation-duration: 18s; animation-delay: -1s;   background: rgba(0,153,204,0.7); }
@keyframes hp-float {
    0%   { transform: translateY(0) scale(1);     opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateY(-95vh) scale(0.6); opacity: 0; }
}

/* Animate the existing ambient blobs for extra life */
.hero-ambient-a { animation: ha-drift-a 9s ease-in-out infinite alternate; }
.hero-ambient-b { animation: ha-drift-b 11s ease-in-out infinite alternate; }
@keyframes ha-drift-a {
    0%   { transform: translate(0, 0) scale(1);    opacity: 0.8; }
    100% { transform: translate(2.5rem, -1.5rem) scale(1.15); opacity: 0.55; }
}
@keyframes ha-drift-b {
    0%   { transform: translate(0, 0) scale(1);    opacity: 0.8; }
    100% { transform: translate(-2rem, 1.5rem) scale(1.1);  opacity: 0.5; }
}

/* ─── Hero Board (Live Repair Dashboard) ────────────────────────────────────── */
.hero-board { position: relative; max-width: 34rem; margin: 0 auto; width: 100%; }

.hb-frame {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    box-shadow: var(--shadow-lg), 0 0 80px rgba(0,153,204,0.12);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* Top bar */
.hb-topbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}
.hb-topbar-dot { width: 0.58rem; height: 0.58rem; border-radius: 9999px; background: rgba(255,255,255,0.22); flex-shrink: 0; }
.hb-live-badge {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    margin-left: 0.5rem;
}
.hb-live-dot {
    width: 0.48rem; height: 0.48rem;
    border-radius: 9999px;
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
    flex-shrink: 0;
    animation: hb-pulse-dot 1.8s ease-in-out infinite;
}
@keyframes hb-pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px #4ade80; }
    50%       { opacity: 0.45; box-shadow: 0 0 3px #4ade80; }
}
.hb-active-label { margin-left: auto; font-size: 0.67rem; color: var(--text-tertiary); font-family: var(--font-mono); }

/* Column headers */
.hb-col-headers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.375rem;
    padding: 0.7rem 1rem 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
}
.hb-col-head {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--col-c, #60a5fa);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
}
.hb-col-dot { width: 0.42rem; height: 0.42rem; border-radius: 9999px; background: var(--col-c, #60a5fa); flex-shrink: 0; }

/* Ticket columns */
.hb-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.375rem;
    padding: 0.75rem 1rem 1.25rem;
    min-height: 9.5rem;
    position: relative;
    z-index: 1;
}
.hb-col-cards { display: flex; flex-direction: column; gap: 0.375rem; }

/* Individual ticket */
.hb-ticket {
    padding: 0.55rem 0.6rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 0.6rem;
    transition: background 0.4s, border-color 0.4s;
}
.hb-ticket-top { display: flex; align-items: flex-start; gap: 0.38rem; margin-bottom: 0.45rem; }
.hb-ticket-icon { flex-shrink: 0; width: 1.1rem; height: 1.1rem; }
.hb-ticket-icon svg { width: 100%; height: 100%; }
.hb-ticket-body { flex: 1; min-width: 0; }
.hb-ticket-device {
    font-size: 0.595rem; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; margin: 0;
}
.hb-ticket-issue {
    font-size: 0.565rem; color: var(--text-tertiary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; margin: 0;
}
.hb-ticket-check { font-size: 0.62rem; font-weight: 800; color: #4ade80; flex-shrink: 0; line-height: 1.1; }
.hb-bar-wrap { height: 0.18rem; background: rgba(255,255,255,0.08); border-radius: 9999px; overflow: hidden; }
.hb-bar { height: 100%; border-radius: 9999px; transition: width 0.7s ease; }

/* Ticket animation classes */
.hb-out  { animation: hb-exit  0.3s ease forwards; }
.hb-in   { animation: hb-enter 0.3s ease forwards; }
.hb-complete-flash { animation: hb-flash 0.65s ease forwards; }
@keyframes hb-exit  { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(-10px) scale(0.92); } }
@keyframes hb-enter { from { opacity:0; transform:translateY(10px) scale(0.92); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes hb-flash {
    0%  { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.07); }
    45% { background:rgba(74,222,128,0.18); border-color:rgba(74,222,128,0.45); box-shadow:0 0 14px rgba(74,222,128,0.28); }
    100%{ background:rgba(74,222,128,0.09); border-color:rgba(74,222,128,0.22); }
}

/* Animated overlays inside the frame */
.hb-grid {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
    animation: hb-grid-scroll 14s linear infinite;
}
@keyframes hb-grid-scroll { from { background-position: 0 0; } to { background-position: 0 2.5rem; } }

.hb-scanline {
    position: absolute; left: 0; right: 0; height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,153,204,0.5) 30%, rgba(96,165,250,0.6) 50%, rgba(0,153,204,0.5) 70%, transparent 100%);
    animation: hb-scan 4s ease-in-out infinite;
    pointer-events: none; z-index: 3;
}
@keyframes hb-scan {
    0%   { top: 0%;   opacity: 0; }
    6%   { opacity: 1; }
    94%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.hb-beam {
    position: absolute; top: -20%; bottom: -20%; left: 10%; width: 35%;
    background: linear-gradient(180deg, transparent 0%, rgba(0,153,204,0.1) 45%, transparent 100%);
    filter: blur(18px);
    transform: rotate(15deg);
    animation: hb-beam-sweep 6s ease-in-out infinite alternate;
    pointer-events: none; z-index: 0;
}
@keyframes hb-beam-sweep {
    from { transform: translateX(-15%) rotate(15deg); opacity: 0.6; }
    to   { transform: translateX(50%) rotate(15deg);  opacity: 1; }
}

/* Responsive: hide floating pills on small screens (same as hero-stage) */
@media (max-width: 1023px) { .hero-board .hero-stage-floating { display: none; } }