:root {
  --navy-1: #0A1F44;
  --navy-2: #122B5A;
  --navy-3: #1B3D7A;
  --navy-4: #244F95;
  --blue: #1E4D9B;
  --blue-soft: #3D6FB8;
  --blue-glow: #4f8aff;
  --aurora-1: #67d0a8;
  --aurora-2: #4facfe;
  --aurora-3: #b57cfe;
  --aurora-4: #ff80c0;
  --off-white: #F4F5F7;
  --bone: #EDEFF3;
  --line: #D9DEE5;
  --line-strong: #C2CAD6;
  --mute: #6A7689;
  --mute-strong: #4A5468;
  --ink: #0A1F44;
  --white: #FFFFFF;
  --canvas: #FFFFFF;
  --canvas-soft: #F4F5F7;
  --card: #FFFFFF;
  --card-soft: #FBFCFD;
  --card-line: #D9DEE5;
  --headline: #0A1F44;
  --body: #6A7689;
  --inverse: #FFFFFF;
  --inverse-mute: rgba(255,255,255,0.7);
  --inverse-line: rgba(255,255,255,0.1);
  --pop-1: #1E4D9B;
  --pop-2: #67d0a8;
  --pop-3: #b57cfe;
  --serif: "Sora", "Manrope", system-ui, sans-serif;
  --display: "Sora", "Manrope", system-ui, sans-serif;
  --body-font: "Inter", "Manrope", system-ui, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", monospace;
  --easing: cubic-bezier(0.65, 0, 0.35, 1);
  --bounce: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card: 0 12px 36px -18px rgba(10, 31, 68, 0.20);
  --shadow-lift: 0 30px 80px -40px rgba(10, 31, 68, 0.32);
  --shadow-deep: 0 60px 140px -60px rgba(10, 31, 68, 0.45);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --accent-base: #1E4D9B;
  --accent-soft: rgba(30, 77, 155, 0.10);
  --accent-strong: #122B5A;
}

[data-theme="dark"] {
  --navy-1: #050B1E;
  --navy-2: #0A1530;
  --navy-3: #11214A;
  --navy-4: #1B3168;
  --blue: #4f8aff;
  --blue-soft: #6FA3FF;
  --blue-glow: #7BB0FF;
  --off-white: #0A1530;
  --bone: #0E1A36;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --mute: #98A4BD;
  --mute-strong: #B5C0D6;
  --ink: #F2F5FA;
  --white: #050B1E;
  --canvas: #050B1E;
  --canvas-soft: #0A1530;
  --card: #0E1A36;
  --card-soft: #11214A;
  --card-line: rgba(255,255,255,0.08);
  --headline: #F2F5FA;
  --body: #98A4BD;
  --inverse: #050B1E;
  --inverse-mute: rgba(255,255,255,0.55);
  --inverse-line: rgba(255,255,255,0.08);
  --accent-soft: rgba(79, 138, 255, 0.16);
  --shadow-card: 0 12px 36px -18px rgba(0,0,0,0.65);
  --shadow-lift: 0 30px 80px -40px rgba(0,0,0,0.75);
  --shadow-deep: 0 60px 140px -60px rgba(0,0,0,0.85);
}

[data-accent="sun"] {
  --accent-base: #D88A2C;
  --accent-soft: rgba(216, 138, 44, 0.08);
  --accent-strong: #9A5E16;
  --pop-1: #D88A2C;
  --pop-2: #E5B161;
}
[data-theme="dark"][data-accent="sun"] {
  --accent-base: #F5B45A;
  --accent-soft: rgba(245, 180, 90, 0.12);
  --accent-strong: #D88A2C;
}
[data-accent="mono"] {
  --accent-base: #0A1F44;
  --accent-soft: rgba(10, 31, 68, 0.10);
  --accent-strong: #050B1E;
  --pop-1: #0A1F44;
  --pop-2: #4A5468;
}
[data-theme="dark"][data-accent="mono"] {
  --accent-base: #9BB6E0;
  --accent-soft: rgba(155, 182, 224, 0.16);
  --accent-strong: #C7D8F2;
  --pop-1: #9BB6E0;
  --pop-2: #DDE4F4;
}
[data-theme="dark"][data-accent="legal"] {
  --accent-base: #98A4BD;
  --accent-soft: rgba(152, 164, 189, 0.16);
  --accent-strong: #C2CAD6;
}
[data-theme="dark"][data-accent="dash"],
[data-theme="dark"][data-accent="auth"],
[data-theme="dark"][data-accent="ocean"] {
  --accent-base: #6FA3FF;
  --accent-soft: rgba(111, 163, 255, 0.18);
  --accent-strong: #9BC0FF;
}
[data-theme="dark"][data-accent="violet"] {
  --accent-base: #a78bfa;
  --accent-soft: rgba(167, 139, 250, 0.18);
  --accent-strong: #c4b5fd;
}
[data-theme="dark"][data-accent="emerald"] {
  --accent-base: #5fd0a0;
  --accent-soft: rgba(95, 208, 160, 0.18);
  --accent-strong: #9be9bd;
}
[data-theme="dark"][data-accent="magma"] {
  --accent-base: #ff8866;
  --accent-soft: rgba(255, 136, 102, 0.18);
  --accent-strong: #ffb59a;
}
[data-theme="dark"][data-accent="cyan"] {
  --accent-base: #56cef0;
  --accent-soft: rgba(86, 206, 240, 0.18);
  --accent-strong: #9ee2f8;
}
[data-theme="dark"][data-accent="shield"] {
  --accent-base: #56d49b;
  --accent-soft: rgba(86, 212, 155, 0.18);
  --accent-strong: #9ce6c2;
}
[data-theme="dark"][data-accent="warm"] {
  --accent-base: #ffa56b;
  --accent-soft: rgba(255, 165, 107, 0.18);
  --accent-strong: #ffc69a;
}
[data-theme="dark"][data-accent="chat"] {
  --accent-base: #4fd97f;
  --accent-soft: rgba(79, 217, 127, 0.18);
  --accent-strong: #8de6a5;
}
[data-theme="dark"][data-accent="gallery"] {
  --accent-base: #e879ff;
  --accent-soft: rgba(232, 121, 255, 0.18);
  --accent-strong: #f1a7fd;
}
[data-theme="dark"][data-accent="demo"] {
  --accent-base: #ff8a8a;
  --accent-soft: rgba(255, 138, 138, 0.18);
  --accent-strong: #ffb8b8;
}
[data-theme="dark"][data-accent="auth-warm"] {
  --accent-base: #c4a4ff;
  --accent-soft: rgba(196, 164, 255, 0.18);
  --accent-strong: #ddc7ff;
}
[data-accent="auth"] {
  --accent-base: #1E4D9B;
  --accent-soft: rgba(30, 77, 155, 0.10);
  --accent-strong: #122B5A;
  --pop-1: #4facfe;
  --pop-2: #67d0a8;
}
[data-accent="auth-warm"] {
  --accent-base: #b57cfe;
  --accent-soft: rgba(181, 124, 254, 0.10);
  --accent-strong: #7d4ad4;
  --pop-1: #b57cfe;
  --pop-2: #ff80c0;
}
[data-accent="emerald"] {
  --accent-base: #2BAF7A;
  --accent-soft: rgba(43, 175, 122, 0.10);
  --accent-strong: #1E7E58;
  --pop-1: #2BAF7A;
  --pop-2: #67d0a8;
}
[data-accent="violet"] {
  --accent-base: #7c3aed;
  --accent-soft: rgba(124, 58, 237, 0.10);
  --accent-strong: #5b21b6;
  --pop-1: #7c3aed;
  --pop-2: #a78bfa;
}
[data-accent="magma"] {
  --accent-base: #DA3F2F;
  --accent-soft: rgba(218, 63, 47, 0.10);
  --accent-strong: #9A2417;
  --pop-1: #DA3F2F;
  --pop-2: #F47F36;
}
[data-accent="cyan"] {
  --accent-base: #0EA5C7;
  --accent-soft: rgba(14, 165, 199, 0.10);
  --accent-strong: #086F8A;
  --pop-1: #0EA5C7;
  --pop-2: #4facfe;
}
[data-accent="shield"] {
  --accent-base: #21C77F;
  --accent-soft: rgba(33, 199, 127, 0.10);
  --accent-strong: #128F58;
  --pop-1: #21C77F;
  --pop-2: #4f8aff;
}
[data-accent="demo"] {
  --accent-base: #FF6B6B;
  --accent-soft: rgba(255, 107, 107, 0.10);
  --accent-strong: #C9434B;
  --pop-1: #FF6B6B;
  --pop-2: #FFAFAF;
}
[data-accent="warm"] {
  --accent-base: #F47F36;
  --accent-soft: rgba(244, 127, 54, 0.10);
  --accent-strong: #B5511A;
  --pop-1: #F47F36;
  --pop-2: #FFA56B;
}
[data-accent="ocean"] {
  --accent-base: #1E4D9B;
  --accent-soft: rgba(30, 77, 155, 0.10);
  --accent-strong: #0A1F44;
  --pop-1: #1E4D9B;
  --pop-2: #4facfe;
}
[data-accent="chat"] {
  --accent-base: #25D366;
  --accent-soft: rgba(37, 211, 102, 0.10);
  --accent-strong: #168F44;
  --pop-1: #25D366;
  --pop-2: #67d0a8;
}
[data-accent="gallery"] {
  --accent-base: #D946EF;
  --accent-soft: rgba(217, 70, 239, 0.10);
  --accent-strong: #8D2BA1;
  --pop-1: #D946EF;
  --pop-2: #b57cfe;
}
[data-accent="dash"] {
  --accent-base: #1E4D9B;
  --accent-soft: rgba(30, 77, 155, 0.10);
  --accent-strong: #122B5A;
  --pop-1: #1E4D9B;
  --pop-2: #67d0a8;
}
[data-accent="legal"] {
  --accent-base: #4A5468;
  --accent-soft: rgba(74, 84, 104, 0.10);
  --accent-strong: #1F2536;
  --pop-1: #4A5468;
  --pop-2: #98A4BD;
}
[data-accent="danger"] {
  --accent-base: #DC2626;
  --accent-soft: rgba(220, 38, 38, 0.10);
  --accent-strong: #7F1212;
  --pop-1: #DC2626;
  --pop-2: #F47F36;
}
[data-accent="cosmic"] {
  --accent-base: #6F4DFF;
  --accent-soft: rgba(111, 77, 255, 0.10);
  --accent-strong: #3A1FA0;
  --pop-1: #6F4DFF;
  --pop-2: #4facfe;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
html, body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--body-font);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: transparent; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent-base); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--accent-base); color: var(--inverse); }

.theme-toggle {
  position: relative;
  width: 38px; height: 38px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--card-line);
  background: var(--card);
  color: var(--headline);
  transition: background 220ms var(--easing), color 220ms var(--easing), border-color 220ms var(--easing), transform 220ms var(--bounce);
}
.theme-toggle:hover { transform: translateY(-2px); border-color: var(--accent-base); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .sun { display: block; }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }

.brand-mark {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-mark svg, .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand__name {
  font-size: 13px; letter-spacing: 0.36em;
  color: var(--headline);
  font-weight: 500;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-radius: 999px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  font-family: var(--body-font);
  transition: background 220ms var(--easing), color 220ms var(--easing), transform 220ms var(--bounce), border-color 220ms var(--easing), box-shadow 220ms var(--easing);
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent-strong);
  color: #fff;
  box-shadow: 0 16px 40px -22px var(--accent-base);
}
.btn-primary:hover {
  background: var(--accent-base);
  transform: translateY(-3px);
  box-shadow: 0 20px 60px -22px var(--accent-base);
}
.btn-secondary {
  background: transparent; color: var(--headline);
  border: 1px solid var(--card-line);
}
.btn-secondary:hover {
  background: var(--accent-base); color: #fff;
  border-color: var(--accent-base);
  transform: translateY(-3px);
}
.btn-ghost {
  background: var(--accent-soft);
  color: var(--accent-base);
}
.btn-ghost:hover {
  background: var(--accent-base);
  color: #fff;
}
.btn svg, .btn-primary svg, .btn-secondary svg {
  width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6;
}
.btn-whatsapp { background: #25D366 !important; color: #0a0a0f !important; }
.btn-whatsapp:hover { background: #1ebe5d !important; color: #0a0a0f !important; }

.scroll-progress {
  position: fixed; left: 0; top: 0;
  height: 2px; width: 100%;
  z-index: 1100; pointer-events: none;
}
.scroll-progress__bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-base), var(--pop-2));
  box-shadow: 0 0 18px var(--accent-base);
  transform-origin: left center;
  will-change: width;
}

.cursor-glow {
  position: fixed; pointer-events: none; z-index: 1500;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 320ms var(--easing);
  mix-blend-mode: screen;
}
.cursor-glow.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

.tr-cursor {
  position: fixed; top: 0; left: 0;
  width: 20px; height: 20px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 320ms var(--easing);
  will-change: transform;
}
.tr-cursor.is-visible { opacity: 1; }
.tr-cursor__core {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--accent-base);
  mix-blend-mode: difference;
  filter: blur(0px);
  transition: width 320ms var(--easing), height 320ms var(--easing), filter 320ms var(--easing), background 320ms var(--easing), opacity 220ms var(--easing);
}
.tr-cursor__halo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-base) 0%, transparent 70%);
  opacity: 0;
  filter: blur(20px);
  mix-blend-mode: screen;
  transition: width 320ms var(--easing), height 320ms var(--easing), opacity 320ms var(--easing), background 320ms var(--easing);
}
.tr-cursor.is-hovered .tr-cursor__core {
  width: 80px; height: 80px;
  margin: -30px;
  background: color-mix(in srgb, var(--pop-2) 70%, white);
  filter: blur(28px);
  mix-blend-mode: overlay;
  opacity: 0.9;
}
.tr-cursor.is-hovered .tr-cursor__halo {
  width: 140px; height: 140px;
  opacity: 0.8;
  background: radial-gradient(circle, var(--pop-1) 0%, transparent 70%);
}
.tr-cursor__trail {
  position: fixed; left: 0; top: 0;
  pointer-events: none;
  z-index: 9998;
}
[data-theme="dark"] .tr-cursor.is-hovered .tr-cursor__core {
  background: color-mix(in srgb, var(--pop-2) 80%, white);
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .tr-cursor, .tr-cursor__trail { display: none !important; }
}

.back-to-top {
  position: fixed;
  right: 28px; bottom: 28px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--accent-strong);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 320ms var(--easing), transform 320ms var(--bounce), background 200ms var(--easing);
  box-shadow: 0 16px 40px -16px var(--accent-base);
}
.back-to-top.is-shown { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--accent-base); transform: translateY(-3px); }

.search-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(10, 31, 68, 0.65);
  backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: clamp(80px, 15vh, 200px);
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 260ms var(--easing), transform 260ms var(--easing);
}
.search-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.search-overlay__inner {
  width: 100%; max-width: 620px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.search-overlay__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--card-line);
}
.search-overlay__bar svg { color: var(--mute); flex-shrink: 0; }
.search-overlay__bar input {
  flex: 1; border: none; background: transparent;
  font-family: var(--body-font); font-size: 16px;
  color: var(--headline); outline: none;
}
.search-overlay__bar kbd {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; padding: 4px 10px;
  border: 1px solid var(--card-line); border-radius: 6px;
  background: var(--canvas-soft); color: var(--mute);
}
.search-overlay__results { max-height: 400px; overflow-y: auto; }
.search-result {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--card-line);
  transition: background 160ms var(--easing);
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--canvas-soft); }
.search-result strong { font-size: 15px; color: var(--headline); font-weight: 600; }
.search-result span { font-size: 13px; color: var(--body); }
.search-empty {
  padding: 36px 22px; text-align: center;
  font-size: 14px; color: var(--mute);
}