/* Page themes — shared DNA, distinct personality */

.theme-home {
 --accent: #0a84ff;
 --accent-rgb: 10, 132, 255;
 --accent-light: #38bdf8;
 --accent-subtle: rgba(10, 132, 255, 0.1);
 --accent-glow: rgba(10, 132, 255, 0.28);
 --accent-muted: rgba(10, 132, 255, 0.06);
}


.hl--business {
 color: #059669;
}

.hl--startup {
 color: #ea580c;
}

.theme-business .hl--business,
.theme-startup .hl--startup {
 color: var(--accent);
}

/* Growth · trust · local prosperity — SMB websites */
.theme-business {
 --accent: #059669;
 --accent-rgb: 5, 150, 105;
 --accent-light: #34d399;
 --accent-subtle: rgba(5, 150, 105, 0.1);
 --accent-glow: rgba(5, 150, 105, 0.28);
 --accent-muted: rgba(5, 150, 105, 0.06);
}

/* Momentum · energy · ship fast — startups */
.theme-startup {
 --accent: #ea580c;
 --accent-rgb: 234, 88, 12;
 --accent-light: #fb923c;
 --accent-subtle: rgba(234, 88, 12, 0.1);
 --accent-glow: rgba(234, 88, 12, 0.28);
 --accent-muted: rgba(234, 88, 12, 0.06);
}

/* Personal portfolio — Samuel Sampaio */
.theme-samuel {
 --accent: #18181b;
 --accent-rgb: 24, 24, 27;
 --accent-light: #3f3f46;
 --accent-subtle: rgba(24, 24, 27, 0.06);
 --accent-glow: rgba(24, 24, 27, 0.12);
 --accent-muted: rgba(24, 24, 27, 0.04);
}

.theme-samuel .hl,
.theme-business .hl,
.theme-startup .hl {
 color: var(--accent);
}

.theme-business .work-highlight,
.theme-startup .work-highlight {
 color: var(--accent);
}

.theme-business .btn--blue,
.theme-business .btn--primary,
.theme-startup .btn--blue,
.theme-startup .btn--primary,
.theme-samuel .btn--blue,
.theme-samuel .btn--primary {
 background: var(--accent);
 box-shadow: none;
}

.theme-business .btn--blue:hover,
.theme-business .btn--primary:hover,
.theme-startup .btn--blue:hover,
.theme-startup .btn--primary:hover,
.theme-samuel .btn--blue:hover,
.theme-samuel .btn--primary:hover {
 background: color-mix(in srgb, var(--accent) 88%, #000);
 box-shadow: none;
}

.theme-business .nav__toggle.is-active,
.theme-startup .nav__toggle.is-active,
.theme-samuel .nav__toggle.is-active {
 background: var(--accent);
}

.theme-business .card__icon svg,
.theme-startup .card__icon svg {
 color: var(--accent);
}

.theme-business .card:hover h3,
.theme-startup .card:hover h3,
.theme-business .practices__item:hover .practices__content h3,
.theme-startup .practices__item:hover .practices__content h3 {
 color: var(--accent);
}

.theme-business .practices__item:hover .practices__arrow,
.theme-startup .practices__item:hover .practices__arrow {
 color: var(--accent);
}

.theme-business .step__num,
.theme-startup .step__num,
.theme-business .pricing-card__label,
.theme-startup .pricing-card__label {
 color: var(--accent);
}

.theme-business .origin__card-label,
.theme-startup .origin__card-label {
 color: var(--accent);
}

.theme-business .origin__region-dot,
.theme-startup .origin__region-dot {
 background: var(--accent);
 box-shadow: 0 0 10px var(--accent-glow);
}

.theme-business input:focus,
.theme-business select:focus,
.theme-business textarea:focus,
.theme-startup input:focus,
.theme-startup select:focus,
.theme-startup textarea:focus {
 border-color: var(--accent);
}


/* ─── Hero mouse-reactive background (all pages) ─── */

.hero__mouse-field {
 position: absolute;
 inset: 0;
 --hero-x: 50%;
 --hero-y: 45%;
 overflow: hidden;
}

.hero__orb {
 position: absolute;
 border-radius: 50%;
 pointer-events: none;
 will-change: transform;
 filter: blur(72px);
}

.hero__orb--1 {
 width: min(520px, 70vw);
 height: min(520px, 70vw);
 left: var(--hero-x);
 top: var(--hero-y);
 transform: translate(-50%, -50%);
 background: rgba(var(--accent-rgb), 0.14);
}

.hero__orb--2 {
 width: min(340px, 48vw);
 height: min(340px, 48vw);
 left: calc(var(--hero-x) + 18%);
 top: calc(var(--hero-y) - 12%);
 transform: translate(-50%, -50%);
 background: rgba(var(--accent-rgb), 0.08);
 filter: blur(64px);
}

.hero__orb--3 {
 width: min(260px, 38vw);
 height: min(260px, 38vw);
 left: calc(var(--hero-x) - 20%);
 top: calc(var(--hero-y) + 14%);
 transform: translate(-50%, -50%);
 background: rgba(var(--accent-rgb), 0.06);
 filter: blur(56px);
}

.hero__grid-fade {
 position: absolute;
 inset: 0;
 background-image:
  linear-gradient(rgba(var(--accent-rgb), 0.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(var(--accent-rgb), 0.04) 1px, transparent 1px);
 background-size: 72px 72px;
 mask-image: radial-gradient(ellipse 80% 70% at var(--hero-x) var(--hero-y), black 0%, transparent 72%);
 opacity: 0.55;
}

.hero__bg-glow {
 display: none;
}

.hero__eyebrow--accent {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
}

.hero__eyebrow-dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--accent);
 box-shadow: 0 0 14px var(--accent-glow);
 flex-shrink: 0;
}

.hero__scroll-thumb {
 background: var(--accent);
}

/* ─── Business hero personality ─── */

.hero--brand-business .hero__copy {
 max-width: 36rem;
}

.hero--brand-business h1 {
 font-size: clamp(2.5rem, 6.8vw, 4.25rem);
 line-height: 1.06;
}

.hero--brand-business .hero__lead {
 max-width: 30rem;
}

.hero__tags {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 0.5rem;
 margin: 1.75rem 0 0;
 padding: 0;
 list-style: none;
}

.hero__tags li {
 font-size: 0.75rem;
 font-weight: 500;
 letter-spacing: 0.04em;
 color: var(--muted);
 padding: 0.4rem 0.85rem;
 border: 1px solid var(--border);
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.6);
 backdrop-filter: blur(8px);
 transition: border-color 0.3s ease, color 0.3s ease;
}

.hero__tags li:hover {
 border-color: rgba(var(--accent-rgb), 0.35);
 color: var(--accent);
}

/* ─── Startup hero personality ─── */

.hero--brand-startup .hero__copy {
 max-width: 38rem;
}

.hero--brand-startup h1 {
 font-size: clamp(2.85rem, 8vw, 5rem);
 line-height: 0.98;
 letter-spacing: -0.05em;
}

.hero--brand-startup .hero__line--solo {
 display: block;
}

.hero--brand-startup .hero__subline {
 display: block;
 margin-top: 0.35em;
 font-size: 0.42em;
 font-weight: 500;
 letter-spacing: -0.03em;
 color: var(--muted);
 line-height: 1.25;
}

.hero--brand-startup .hero__lead {
 max-width: 32rem;
 margin-top: 1.5rem;
}

.hero__modes {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 gap: 0.75rem 1.25rem;
 margin-top: 2rem;
 padding-top: 1.75rem;
 border-top: 1px solid var(--border);
 max-width: 22rem;
 margin-inline: auto;
}

.hero__mode {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.2rem;
 min-width: 6.5rem;
}

.hero__mode strong {
 font-size: 0.8125rem;
 font-weight: 600;
 color: var(--ink);
 letter-spacing: -0.02em;
}

.hero__mode span {
 font-size: 0.6875rem;
 color: var(--muted);
}

.hero__mode-divider {
 width: 1px;
 height: 2rem;
 background: var(--border);
}

@media (max-width: 500px) {
 .hero__mode-divider {
  display: none;
 }

 .hero__modes {
  gap: 1rem;
 }
}

@media (prefers-reduced-motion: reduce) {
 .hero__orb {
  filter: blur(72px);
  transition: none;
 }
}