.site-header {
  padding-top: var(--safe-top);
  height: calc(4rem + var(--safe-top));
  transition: height var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.site-header > div { height: 4rem; }

.site-header.is-scrolled {
  height: calc(3.5rem + var(--safe-top));
  box-shadow: 0 1px 0 0 var(--color-base-300);
}

.site-header.is-scrolled > div { height: 3.5rem; }

[data-theme="nobregas-dark"] .site-header {
  background-color: color-mix(in oklab, var(--color-base-100) 60%, transparent);
  border-color: color-mix(in oklab, white 6%, transparent);
}

.theme-icon-dark { display: none; }
[data-theme="nobregas-dark"] .theme-icon-dark { display: inline-block; }
[data-theme="nobregas-dark"] .theme-icon-light { display: none; }

.nav-sheet {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

.nav-sheet-foot { padding-bottom: calc(1rem + var(--safe-bottom)); }

.drawer-side .nav-sheet {
  transition: transform var(--dur-base) var(--ease-out);
}

.site-toast { top: calc(var(--safe-top) + 0.5rem); }

.site-footer { padding-bottom: var(--safe-bottom); }

.footer-link {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-link:active,
.footer-link:hover { color: var(--color-base-content); }

.footer-col summary { list-style: none; }
.footer-col summary::-webkit-details-marker { display: none; }
.footer-caret { transition: transform var(--dur-base) var(--ease-out); }
.footer-col[open] .footer-caret { transform: rotate(180deg); }

@media (min-width: 768px) {
  .footer-col summary { pointer-events: none; cursor: default; }
}

.btn:active { transform: scale(0.98); }

/* Home hero */
.hero-home { position: relative; overflow: hidden; padding: clamp(2rem, 7vw, 4.5rem) 1.5rem clamp(3rem, 10vw, 6rem); }
.hero-home::before { content: ""; position: absolute; inset: -20% -10% auto; height: 70%; background: radial-gradient(60% 60% at 50% 0%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%); pointer-events: none; }
.hero-home__bg { position: absolute; inset: 0; background: url("/assets/img/servers-hero.webp") center / cover no-repeat; opacity: 0.12; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 85%); mask-image: linear-gradient(to bottom, black 0%, transparent 85%); }
[data-theme="nobregas-dark"] .hero-home__bg { opacity: 0.2; }
.hero-home__inner { position: relative; max-width: 56rem; margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.hero-home__title { font-size: clamp(2.5rem, 9vw, 5rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.hero-home__sub { font-size: clamp(1.0625rem, 3.6vw, 1.375rem); color: color-mix(in oklab, var(--color-base-content) 65%, transparent); max-width: 34rem; }
.hero-home__cta { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; margin-top: 0.75rem; }
.hero-home__cta .btn { min-height: 3rem; width: 100%; }
.hero-home__cta svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 640px) { .hero-home__cta { flex-direction: row; width: auto; } .hero-home__cta .btn { width: auto; } }
.status-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; border: 1px solid var(--color-base-300); background: var(--color-base-200); }
.status-pill__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-success) 50%, transparent); animation: pill-pulse 2.4s ease-out infinite; }
@keyframes pill-pulse { 70% { box-shadow: 0 0 0 0.5rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .status-pill__dot { animation: none; } }

/* Trust bar and pillars */
.trust-bar { border-block: 1px solid var(--color-base-300); background: var(--color-base-200); }
.trust-bar__list { max-width: 72rem; margin-inline: auto; padding: 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
.trust-bar__item { display: flex; flex-direction: column; gap: 0.125rem; }
.trust-bar__item strong { font-size: clamp(1.5rem, 6vw, 2rem); letter-spacing: -0.02em; font-weight: 700; }
.trust-bar__item span { font-size: 0.875rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
@media (min-width: 768px) { .trust-bar__list { grid-template-columns: repeat(4, 1fr); } }
.pillars { padding: clamp(3rem, 10vw, 6rem) 1.5rem; }
.pillars__grid { max-width: 72rem; margin-inline: auto; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pillars__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.pillar { padding: 1.5rem; border-radius: var(--radius-box); border: 1px solid var(--color-base-300); background: var(--color-base-200); }
.pillar__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.875rem; color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 10%, transparent); border: 1px solid color-mix(in oklab, var(--color-primary) 20%, transparent); }
.pillar__icon svg { width: 1.5rem; height: 1.5rem; }
.pillar__title { margin-top: 1rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.pillar__text { margin-top: 0.375rem; color: color-mix(in oklab, var(--color-base-content) 65%, transparent); }
.trust-bar__item:nth-child(2), .pillars__grid .pillar:nth-child(2) { transition-delay: 80ms; }
.trust-bar__item:nth-child(3), .pillars__grid .pillar:nth-child(3) { transition-delay: 160ms; }
.trust-bar__item:nth-child(4) { transition-delay: 240ms; }

/* Plans */
.plans { padding: 0 0 clamp(3rem, 10vw, 6rem); }
.plans__head { max-width: 72rem; margin-inline: auto; padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
@media (min-width: 640px) { .plans__head { flex-direction: row; justify-content: space-between; align-items: center; } }
.plans__title { font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; }
.plans__toggle { display: inline-flex; padding: 0.25rem; border-radius: 999px; background: var(--color-base-200); border: 1px solid var(--color-base-300); }
.plans__opt { min-height: 2.75rem; padding: 0 1.125rem; border-radius: 999px; font-size: 0.9375rem; font-weight: 500; transition: background-color .25s ease, color .25s ease; }
.plans__opt.is-active { background: var(--color-primary); color: var(--color-primary-content); }
.plans__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.5rem 1.5rem 1rem; scroll-padding-inline: 1.5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
.plans__track::-webkit-scrollbar { display: none; }
.plan { position: relative; flex: 0 0 82%; max-width: 20rem; scroll-snap-align: center; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: var(--radius-box); border: 1px solid var(--color-base-300); background: var(--color-base-200); }
.plan--featured { border-color: var(--color-primary); box-shadow: 0 12px 32px -12px color-mix(in oklab, var(--color-primary) 35%, transparent); }
.plan__badge { position: absolute; top: -0.75rem; left: 1.5rem; padding: 0.125rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--color-primary); color: var(--color-primary-content); }
.plan__name { font-size: 1.125rem; font-weight: 600; }
.plan__price { display: flex; align-items: baseline; gap: 0.375rem; }
.plan__amount { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; }
.plan__per { font-size: 0.875rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
[data-billing="monthly"] .plan__amount--yearly, [data-billing="yearly"] .plan__amount--monthly { display: none; }
.plan__features { display: flex; flex-direction: column; gap: 0.625rem; flex: 1; }
.plan__features li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9375rem; }
.plan__features svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--color-success); }
.plan .btn { min-height: 3rem; }
@media (min-width: 900px) { .plans__track { max-width: 72rem; margin-inline: auto; overflow: visible; } .plan { flex: 1 1 0; max-width: none; } }

/* Enterprise, FAQ, final CTA */
.enterprise { padding: 0 1.5rem clamp(3rem, 10vw, 6rem); }
.enterprise__inner { max-width: 72rem; margin-inline: auto; padding: clamp(2rem, 8vw, 4rem) clamp(1.5rem, 6vw, 4rem); border-radius: calc(var(--radius-box) * 1.5); color: var(--color-primary-content); background: var(--color-primary); display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.enterprise__title { font-family: var(--font-display); font-size: clamp(1.5rem, 5vw, 2.25rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; max-width: 22ch; text-wrap: balance; }
.enterprise__text { max-width: 32rem; opacity: 0.9; }
.enterprise__btn { min-height: 3rem; margin-top: 0.5rem; background: var(--color-base-100); color: var(--color-primary); border: 0; }
.enterprise__btn svg { width: 1.25rem; height: 1.25rem; }
.faq { max-width: 48rem; margin-inline: auto; padding: 0 1.5rem clamp(3rem, 10vw, 6rem); }
.faq__title { font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.faq__item { border-bottom: 1px solid var(--color-base-300); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.5rem; padding-block: 0.5rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { width: 1.25rem; height: 1.25rem; flex: none; transition: transform .25s ease; }
.faq__item[open] summary svg { transform: rotate(180deg); }
.faq__item p { padding-bottom: 1rem; color: color-mix(in oklab, var(--color-base-content) 65%, transparent); }
.final-cta { padding: 0 1.5rem clamp(4rem, 12vw, 7rem); text-align: center; }
.final-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.final-cta__title { font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.final-cta .btn { min-height: 3rem; }

/* Page head and comparison */
.page-head { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2rem, 7vw, 4.5rem) max(1.5rem, calc((100% - 72rem) / 2 + 1.5rem)) 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/img/servers-hero.webp") center / cover no-repeat; opacity: 0.12; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 85%); mask-image: linear-gradient(to bottom, black 0%, transparent 85%); }
[data-theme="nobregas-dark"] .page-head::before { opacity: 0.2; }
.page-head__title { font-size: clamp(2.25rem, 8vw, 4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.page-head__sub { font-size: clamp(1.0625rem, 3.6vw, 1.25rem); max-width: 34rem; color: color-mix(in oklab, var(--color-base-content) 65%, transparent); }
.compare { max-width: 72rem; margin-inline: auto; padding: 0 1.5rem clamp(3rem, 10vw, 6rem); }
.compare__title { font-size: clamp(1.5rem, 5vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1rem; }
.compare__scroll { overflow-x: auto; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); -webkit-overflow-scrolling: touch; }
.compare__table { width: 100%; min-width: 34rem; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 0.9375rem; }
.compare__table th, .compare__table td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--color-base-300); }
.compare__table thead th { font-weight: 600; background: var(--color-base-200); }
.compare__table tbody tr:last-child > * { border-bottom: 0; }
.compare__table tbody th { font-weight: 500; }
.compare__table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--color-base-200); min-width: 8rem; }

/* Enterprise page */
.services { padding: 0 1.5rem clamp(3rem, 10vw, 5rem); }
.services__grid { max-width: 72rem; margin-inline: auto; display: grid; gap: 1rem; grid-template-columns: 1fr; scroll-margin-top: 5rem; }
.services__grid .pillar { scroll-margin-top: 5rem; }
@media (min-width: 768px) { .services__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
.sla { max-width: 72rem; margin-inline: auto; padding: 0 1.5rem clamp(3rem, 10vw, 6rem); }
.sla__title { font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.sla__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.sla__grid .plan { max-width: none; }
@media (min-width: 768px) { .sla__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

/* About and partner */
.partner { padding: 0 1.5rem clamp(3rem, 10vw, 6rem); }
.partner__inner { max-width: 72rem; margin-inline: auto; padding: clamp(1.5rem, 6vw, 3rem); border-radius: calc(var(--radius-box) * 1.5); border: 1px solid var(--color-base-300); background: var(--color-base-200); display: flex; flex-direction: column; gap: 1.5rem; }
.partner__logo { display: flex; align-items: center; justify-content: center; min-height: 6rem; border-radius: var(--radius-box); border: 1px solid var(--color-base-300); gap: 0.75rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--color-base-content); }
.partner__logo img { width: 3rem; height: 3rem; border-radius: 0.75rem; }
.partner__title { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 700; letter-spacing: -0.02em; }
.partner__text { margin-top: 0.5rem; max-width: 36rem; color: color-mix(in oklab, var(--color-base-content) 65%, transparent); }
@media (min-width: 768px) { .partner__inner { flex-direction: row; align-items: center; } .partner__logo { flex: 0 0 16rem; } }
[data-theme="nobregas-dark"] .partner__inner { background: color-mix(in oklab, white 4%, transparent); border-color: color-mix(in oklab, white 10%, transparent); }

/* Contact and legal */
.contact { padding: 0 1.5rem clamp(3rem, 10vw, 6rem); }
.contact__form { max-width: 36rem; margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.25rem, 5vw, 2rem); border-radius: calc(var(--radius-box) * 1.5); border: 1px solid var(--color-base-300); background: var(--color-base-200); }
.contact__form .input, .contact__form .textarea { font-size: 1rem; }
.contact__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.legal { max-width: 44rem; margin-inline: auto; padding: 0 1.5rem clamp(3rem, 10vw, 6rem); display: flex; flex-direction: column; gap: 1.5rem; }
.legal__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.legal__text { margin-top: 0.25rem; color: color-mix(in oklab, var(--color-base-content) 65%, transparent); }
[data-theme="nobregas-dark"] .contact__form { background: color-mix(in oklab, white 4%, transparent); border-color: color-mix(in oklab, white 10%, transparent); backdrop-filter: blur(24px); }
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: "Sora", var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
.brand__tag { margin-top: 0.25rem; font-size: 0.625rem; font-weight: 300; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); }