/*
QFS-DailyNews Style System

Custom properties:
- Colors: semantic tokens (bg, surface, text, borders, accent)
- Typography: modular/fluid scale, heading/body hierarchies, line-heights
- Spacing: consistent step scale for layout rhythm
- Motion: standardized durations + easing curves

Breakpoints:
- 1920px (xxl desktop)
- 1440px (xl desktop)
- 1024px (lg desktop)
- 768px (md tablet)
- 375px (sm mobile)
- 320px (xs mobile)
*/

/* ==========================================================================
1) Design Tokens
========================================================================== */
:root {
    --color-bg: #f6f7fb;
    --color-surface: #ffffff;
    --color-surface-2: #f8fafc;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-border: rgba(15, 23, 42, 0.12);

    --ambient-ink-rgb: 15 23 42;
    --ambient-slate-rgb: 148 163 184;
    --ambient-sky-rgb: 14 165 233;

    --accent-rgb-a: 255 107 107;
    --accent-strong-rgb-a: 255 82 82;
    --accent-rgb-b: 217 59 59;
    --accent-strong-rgb-b: 197 50 50;
    --accent-rgb: var(--accent-rgb-b);
    --accent-strong-rgb: var(--accent-strong-rgb-b);

    --color-accent-a: #ff6b6b;
    --color-accent-strong-a: #ff5252;
    --color-accent-soft-a: rgba(255, 107, 107, 0.12);
    --color-accent-ring-a: rgba(255, 107, 107, 0.35);

    --color-accent-b: #d93b3b;
    --color-accent-strong-b: #c53232;
    --color-accent-soft-b: rgba(217, 59, 59, 0.12);
    --color-accent-ring-b: rgba(217, 59, 59, 0.35);

    --color-accent: var(--color-accent-b);
    --color-accent-strong: var(--color-accent-strong-b);
    --color-accent-soft: var(--color-accent-soft-b);
    --color-accent-ring: var(--color-accent-ring-b);

    --shadow-accent-a: 0 10px 24px rgba(255, 107, 107, 0.22);
    --shadow-accent-hover-a: 0 16px 32px rgba(255, 107, 107, 0.28);
    --shadow-accent-b: 0 10px 24px rgba(217, 59, 59, 0.22);
    --shadow-accent-hover-b: 0 16px 32px rgba(217, 59, 59, 0.28);
    --shadow-accent: var(--shadow-accent-b);
    --shadow-accent-hover: var(--shadow-accent-hover-b);

    --color-whatsapp: #25D366;
    --color-whatsapp-hover: #1ebe5d;
    --color-whatsapp-ring: rgba(37, 211, 102, 0.36);

    --color-info: #2563eb;
    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-danger: #dc2626;

    --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-heading: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --lh-tight: 1.12;
    --lh-snug: 1.25;
    --lh-body: 1.6;

    --fs-00: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
    --fs-0: clamp(0.875rem, 0.84rem + 0.22vw, 0.9375rem);
    --fs-1: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
    --fs-2: clamp(1.125rem, 1.05rem + 0.5vw, 1.25rem);
    --fs-3: clamp(1.375rem, 1.18rem + 1.0vw, 1.625rem);
    --fs-4: clamp(1.75rem, 1.35rem + 1.6vw, 2.125rem);
    --fs-5: clamp(2.125rem, 1.55rem + 2.5vw, 2.875rem);
    --fs-6: clamp(2.625rem, 1.75rem + 3.6vw, 3.625rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;
    --space-10: 4rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2.25rem;
    --radius-pill: 9999px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 30px rgba(2, 6, 23, 0.10);
    --shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.14);

    --dur-1: 120ms;
    --dur-2: 180ms;
    --dur-3: 260ms;
    --dur-4: 420ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --container-max: 80rem;
    --nav-max: 80rem;
}

html[data-accent='a'] {
    --color-accent: var(--color-accent-a);
    --color-accent-strong: var(--color-accent-strong-a);
    --color-accent-soft: var(--color-accent-soft-a);
    --color-accent-ring: var(--color-accent-ring-a);
    --shadow-accent: var(--shadow-accent-a);
    --shadow-accent-hover: var(--shadow-accent-hover-a);
    --accent-rgb: var(--accent-rgb-a);
    --accent-strong-rgb: var(--accent-strong-rgb-a);
}

html[data-accent='b'] {
    --color-accent: var(--color-accent-b);
    --color-accent-strong: var(--color-accent-strong-b);
    --color-accent-soft: var(--color-accent-soft-b);
    --color-accent-ring: var(--color-accent-ring-b);
    --shadow-accent: var(--shadow-accent-b);
    --shadow-accent-hover: var(--shadow-accent-hover-b);
    --accent-rgb: var(--accent-rgb-b);
    --accent-strong-rgb: var(--accent-strong-rgb-b);
}

/* ==========================================================================
2) Base
========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    color-scheme: light;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.18em;
}

#admin-mobile-sidebar a {
    color: #e2e8f0;
}

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

:focus-visible {
    outline: none;
}

.h-display,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
    line-height: var(--lh-tight);
}

/* ==========================================================================
3) Layout
========================================================================== */
.container {
    width: min(100% - 2rem, var(--container-max));
    margin-inline: auto;
}

@media (min-width: 768px) {
    .container {
        width: min(100% - 3rem, var(--container-max));
    }
}

@supports (content-visibility: auto) {
    [data-cv] {
        content-visibility: auto;
        contain-intrinsic-size: 900px;
    }
}

.stack > * + * {
    margin-top: var(--space-4);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.grid {
    display: grid;
    gap: var(--space-6);
}

.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-6);
}

.col-span-12 { grid-column: span 12 / span 12; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-1 { grid-column: span 1 / span 1; }

.row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.row-between {
    justify-content: space-between;
}

.row-start {
    justify-content: flex-start;
}

.row-center {
    justify-content: center;
}

.grid-2 {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@supports not (display: grid) {
    .grid {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-6);
    }
    .grid-12 {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-6);
    }
    .grid > * {
        flex: 1 1 320px;
    }
    .grid-12 > * {
        flex: 1 1 320px;
    }
}

/* ==========================================================================
4) Global Background (blobs + bubbles + half-gradient shapes)
========================================================================== */
.site-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(var(--ambient-ink-rgb), 0.045) 0%, rgba(var(--ambient-ink-rgb), 0) 55%),
        radial-gradient(65% 60% at 14% 10%, rgba(var(--ambient-sky-rgb), 0.09) 0%, rgba(var(--ambient-sky-rgb), 0) 60%),
        radial-gradient(60% 60% at 88% 92%, rgba(var(--ambient-slate-rgb), 0.12) 0%, rgba(var(--ambient-slate-rgb), 0) 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(246, 247, 251, 1) 58%, rgba(246, 247, 251, 1) 100%);
    contain: paint;
}

body.is-home .site-bg {
    background-image: 
        linear-gradient(to right, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.2)),
        url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=2000&q=80');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.site-bg::before,
.site-bg::after {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 20% 35%, rgba(var(--ambient-slate-rgb), 0.14) 0 18%, transparent 22%),
        radial-gradient(circle at 60% 70%, rgba(var(--ambient-sky-rgb), 0.10) 0 14%, transparent 18%),
        radial-gradient(circle at 80% 30%, rgba(var(--ambient-ink-rgb), 0.07) 0 16%, transparent 20%);
    filter: blur(20px);
    transform: translate3d(0, 0, 0);
}

.site-bg::after {
    inset: -30%;
    opacity: 0.65;
    filter: blur(28px);
    background:
        radial-gradient(circle at 18% 38%, rgba(var(--ambient-slate-rgb), 0.10) 0 18%, transparent 22%),
        radial-gradient(circle at 62% 72%, rgba(var(--ambient-sky-rgb), 0.07) 0 14%, transparent 18%),
        radial-gradient(circle at 82% 30%, rgba(var(--ambient-ink-rgb), 0.05) 0 16%, transparent 20%);
}

@keyframes bubblesDrift {
    0% {
        transform: translate3d(-1.5%, -1%, 0) scale(1);
    }
    50% {
        transform: translate3d(1%, -2%, 0) scale(1.02);
    }
    100% {
        transform: translate3d(2%, 1.5%, 0) scale(1.04);
    }
}

@keyframes waveShift {
    0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 0 0, 0 0, 0 0, 0 520px, 520px 0; }
}

@media (max-width: 768px) {
    .site-bg::before {
        filter: blur(12px);
    }

    .site-bg::after {
        filter: blur(16px);
    }
}

.shape-half-gradient {
    position: relative;
    overflow: hidden;
}

.shape-half-gradient::before {
    content: "";
    position: absolute;
    inset: auto -20% -40% -20%;
    height: 70%;
    background: linear-gradient(135deg, rgba(var(--ambient-sky-rgb), 0.14), rgba(var(--ambient-ink-rgb), 0.08));
    clip-path: ellipse(55% 70% at 50% 30%);
    transform: translate3d(0, 0, 0);
}

/* ==========================================================================
4.1) Lazy Background Media
========================================================================== */
.lazy-bg {
    position: relative;
    background-color: rgba(148, 163, 184, 0.22);
    background-image: var(--bg-overlay, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transform: translate3d(0, 0, 0);
    contain: paint;
}

.lazy-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 60% at 30% 25%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0) 70%);
    opacity: 0.65;
    transition: opacity var(--dur-4) var(--ease-out);
}

.lazy-bg.is-bg-loaded {
    background-image: var(--bg-overlay, none), var(--bg-image, none);
}

.lazy-bg.is-bg-loaded::after {
    opacity: 0;
}

/* ==========================================================================
5) Navigation (matches reference: top coral strip + rounded capsule)
========================================================================== */
.site-nav-wrap {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, var(--nav-max));
    z-index: 50;
}

.nav-topbar {
    display: none;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-pill);
    padding: 0.55rem 1.1rem;
    box-shadow: var(--shadow-md);
}

.nav-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    font-size: 0.85rem;
    line-height: 1.2;
}

.nav-topbar__left,
.nav-topbar__right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
}

.nav-topbar__center {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    opacity: 0.95;
    white-space: nowrap;
}

.nav-topbar a {
    color: rgba(255, 255, 255, 0.92);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.nav-topbar a:hover {
    opacity: 1;
    transform: translate3d(0, -1px, 0);
}

.nav-shell {
    margin-top: 0.6rem;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    padding: 0.55rem 0.75rem;
    contain: layout paint;
}

.nav-shell__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.brand__mark {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-accent);
    transform: translate3d(0, 0, 0);
    transition: transform var(--dur-3) var(--ease-spring);
}

.brand:hover .brand__mark {
    transform: translate3d(0, -2px, 0) scale(1.04);
}

.nav-links {
    display: none;
    gap: 0.25rem;
    align-items: center;
}

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-pill);
    font-weight: 650;
    font-size: 0.9rem;
    color: rgba(15, 23, 42, 0.72);
    transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.nav-link:hover {
    background: rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.92);
    transform: translate3d(0, -1px, 0);
}

.nav-link.is-active {
    background: rgba(15, 23, 42, 0.94);
    color: #fff;
}

.nav-social {
    display: none;
    align-items: center;
    gap: 0.35rem;
}

.nav-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-pill);
    display: grid;
    place-items: center;
    color: rgba(15, 23, 42, 0.45);
    transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.nav-icon:hover {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    transform: translate3d(0, -1px, 0);
}

@media (min-width: 1024px) {
    .nav-topbar {
        display: block;
    }
    .nav-links {
        display: inline-flex;
    }
    .nav-social {
        display: inline-flex;
    }
}

@keyframes morph-slow {
    0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
    67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; }
    100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
}

.animate-morph {
    animation: morph-slow 8s ease-in-out infinite;
}

.animate-morph-reverse {
    animation: morph-slow 10s ease-in-out infinite reverse;
}

/* ==========================================================================
6) Components (buttons, cards, links, micro-interactions)
========================================================================== */
.btn-primary,
.btn-ghost,
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-weight: 700;
    line-height: 1;
    transform: translate3d(0, 0, 0);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
    will-change: transform;
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--color-whatsapp);
    color: #fff;
    box-shadow: 0 12px 26px rgba(37, 211, 102, 0.22);
    transform: translate3d(0, 0, 0);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
    will-change: transform;
}

.btn-whatsapp:hover {
    background: var(--color-whatsapp-hover);
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 18px 34px rgba(37, 211, 102, 0.26);
}

.btn-whatsapp:active {
    transform: translate3d(0, -1px, 0);
}

.btn-primary {
    background: var(--color-accent);
    color: #fff;
    box-shadow: var(--shadow-accent);
}

.btn-primary:hover {
    background: var(--color-accent-strong);
    transform: translate3d(0, -3px, 0);
    box-shadow: var(--shadow-accent-hover);
}

.btn-primary:active {
    transform: translate3d(0, -1px, 0);
}

.btn-ghost {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.10);
    color: rgba(15, 23, 42, 0.92);
}

.btn-ghost:hover {
    background: rgba(15, 23, 42, 0.08);
    transform: translate3d(0, -3px, 0);
    box-shadow: var(--shadow-sm);
}

.btn-outline {
    background: transparent;
    border-color: rgba(var(--accent-rgb), 0.55);
    color: var(--color-accent);
}

.btn-outline:hover {
    background: var(--color-accent-soft);
    border-color: rgba(var(--accent-rgb), 0.75);
    transform: translate3d(0, -2px, 0);
}

.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-outline:focus-visible,
.nav-link:focus-visible,
.nav-icon:focus-visible {
    box-shadow: 0 0 0 4px var(--color-accent-ring);
}

.btn-whatsapp:focus-visible {
    box-shadow: 0 0 0 4px var(--color-whatsapp-ring);
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
    transform: translate3d(0, 0, 0);
}

.card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: var(--shadow-md);
}

.glass {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: var(--shadow-md);
}

.surface {
    background: var(--color-surface-2);
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: var(--shadow-sm);
}

.hover-lift {
    transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
    transform: translate3d(0, 0, 0);
}

.hover-lift:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: var(--shadow-md);
}

.link-soft {
    color: rgba(15, 23, 42, 0.60);
    transition: color var(--dur-2) var(--ease-out);
}

.link-soft:hover {
    color: rgba(15, 23, 42, 0.92);
}

.text-gradient-primary {
    background: linear-gradient(135deg, rgba(15, 23, 42, 1), rgba(15, 23, 42, 0.78));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-gradient-accent {
    background: linear-gradient(135deg, var(--color-accent), rgba(var(--accent-rgb), 0.55));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.line-clamp-2,
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    -webkit-line-clamp: 2;
}

.line-clamp-3 {
    -webkit-line-clamp: 3;
}

/* ==========================================================================
7) Page Transitions + Scroll Reveals
========================================================================== */
html[data-navigating='true'] main {
    opacity: 0.86;
    transform: translate3d(0, 2px, 0);
    transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

main {
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.scroll-fade-up {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
    will-change: transform, opacity;
}

.scroll-fade-up.active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.scroll-scale-in {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.97);
    transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
    will-change: transform, opacity;
}

.scroll-scale-in.active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

@keyframes kenBurns {
    0% { transform: scale(1); }
    100% { transform: scale(1.12); }
}

/* ==========================================================================
8) Hero Overlay (lighter, readable, not overly dark)
========================================================================== */
.hero {
    position: relative;
    isolation: isolate;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.42) 34%, rgba(15, 23, 42, 0.08) 64%, rgba(15, 23, 42, 0) 100%),
        radial-gradient(70% 70% at 20% 20%, rgba(var(--ambient-sky-rgb), 0.10) 0%, rgba(var(--ambient-sky-rgb), 0) 55%);
}

.hero__effects {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.hero__effects::before {
    content: "";
    position: absolute;
    left: -10%;
    bottom: -40%;
    width: 70%;
    height: 70%;
    background: linear-gradient(135deg, rgba(var(--ambient-sky-rgb), 0.16), rgba(var(--ambient-ink-rgb), 0.10));
    clip-path: ellipse(48% 52% at 46% 44%);
    filter: blur(10px);
    opacity: 0.95;
    transform: translate3d(0, 0, 0);
}

.hero__effects::after {
    content: "";
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(circle at 30% 55%, rgba(255, 255, 255, 0.12) 0 10%, transparent 12%),
        radial-gradient(circle at 55% 40%, rgba(255, 255, 255, 0.10) 0 8%, transparent 10%),
        radial-gradient(circle at 75% 62%, rgba(255, 255, 255, 0.10) 0 9%, transparent 11%);
    filter: blur(12px);
    opacity: 0.65;
    transform: translate3d(0, 0, 0);
}

/* ==========================================================================
9) Forms (accessible focus, subtle micro-interactions)
========================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 0.9rem;
    padding: 0.75rem 0.9rem;
    transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
    color: rgba(15, 23, 42, 0.45);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
textarea:hover,
select:hover {
    border-color: rgba(15, 23, 42, 0.22);
    background: rgba(255, 255, 255, 0.92);
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
    border-color: rgba(var(--accent-rgb), 0.65);
    box-shadow: 0 0 0 4px var(--color-accent-ring);
}

/* ==========================================================================
10) Google Translate Widget Styling
========================================================================== */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-icon,
.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
}

body {
    top: 0px !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#google_translate_element {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 50;
    padding: 0.5rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

#google_translate_element select {
    width: 100%;
    border-radius: 0.6rem;
    border: 1px solid rgba(15, 23, 42, 0.18);
    background: #fff;
    padding: 0.35rem 0.55rem;
    font-size: 0.9rem;
}

.goog-logo-link {
    display: none !important;
}

.goog-te-gadget {
    color: transparent !important;
}

/* ==========================================================================
11) Reduced Motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
12) Custom Animations (SVG & Interactions)
========================================================================== */
@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}