:root {
  --color-primary: #0543fd;
  --color-primary-hover: #0336d1;
  --color-primary-active: #022cae;
  --color-secondary: #050c47;
  --color-accent: #2e68ff;
  --color-surface: #eef3ff;
  --color-surface-soft: #f7f9ff;
  --color-white: #ffffff;
  --color-text: #10162f;
  --color-muted: #59647a;
  --color-border: #d9e1f2;
  --color-whatsapp: #128c52;
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;
  --shadow-sm: 0 0.5rem 1.5rem rgb(5 12 71 / 8%);
  --shadow-card: 0 1.25rem 3.75rem rgb(5 12 71 / 10%);
  --section-space: clamp(5rem, 9vw, 8rem);
  --container-max: 75rem;
  --transition-fast: 180ms ease;
  --z-nav: 1000;
  --z-floating: 1050;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { overflow-x: hidden; color: var(--color-text); background: var(--color-white); font-family: var(--font-body); line-height: 1.65; }
body, button, input, textarea { -webkit-font-smoothing: antialiased; }
h1, h2, h3, .navbar-brand, .btn { font-family: var(--font-heading); }
h1, h2, h3 { color: var(--color-secondary); font-weight: 700; letter-spacing: -0.04em; }
h1 { font-size: clamp(3rem, 7.4vw, 6rem); line-height: 0.98; }
h2 { font-size: clamp(2.15rem, 5vw, 4.25rem); line-height: 1.02; }
h3 { font-size: 1.35rem; line-height: 1.2; }
p { color: var(--color-muted); }
a { color: var(--color-primary); text-underline-offset: 0.2em; }
a:hover { color: var(--color-primary-hover); }
img { max-width: 100%; }
.container { max-width: var(--container-max); }
.bg-body-tertiary { background: var(--color-surface-soft) !important; }
.text-body-secondary { color: var(--color-muted) !important; }
.section-space { padding-block: var(--section-space); }
.section-space-sm { padding-block: 3rem; }
.skip-link { position: fixed; top: 0; left: 1rem; z-index: 1200; transform: translateY(-130%); padding: 0.75rem 1rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: var(--color-white); background: var(--color-secondary); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

.site-header { position: sticky; top: 0; z-index: var(--z-nav); border-color: rgb(217 225 242 / 75%) !important; background: rgb(255 255 255 / 94%) !important; backdrop-filter: blur(16px); }
.navbar { min-height: 5rem; }
.navbar-brand img, .site-footer img { display: block; width: 164px; height: 50px; object-fit: contain; object-position: left center; }
.navbar-toggler { border-color: var(--color-border); border-radius: var(--radius-sm); }
.navbar-toggler:focus { box-shadow: 0 0 0 0.22rem rgb(5 67 253 / 18%); }
.nav-link { color: var(--color-text); font-size: 0.92rem; font-weight: 600; }
.nav-link:hover, .nav-link:focus { color: var(--color-primary); }

.btn { min-height: 3rem; padding: 0.7rem 1.15rem; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; font-weight: 700; transition: color var(--transition-fast), background var(--transition-fast), border var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.1rem; height: 1.1rem; }
.btn i { font-size: 1rem; }
.btn-primary { border-color: var(--color-primary); background: var(--color-primary); box-shadow: 0 0.6rem 1.2rem rgb(5 67 253 / 18%); }
.btn-primary:hover, .btn-primary:focus { border-color: var(--color-primary-hover); background: var(--color-primary-hover); box-shadow: 0 0.8rem 1.4rem rgb(5 67 253 / 24%); }
.btn-primary:active { border-color: var(--color-primary-active) !important; background: var(--color-primary-active) !important; }
.btn-outline-primary { color: var(--color-secondary); border-color: var(--color-border); background: var(--color-white); }
.btn-outline-primary:hover, .btn-outline-primary:focus { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-surface-soft); }
.btn-lg { min-height: 3.5rem; padding-inline: 1.5rem; font-size: 1rem; }

.hero-section { position: relative; min-height: calc(100svh - 5rem); display: flex; align-items: center; isolation: isolate; background-image: url("../assets/images/ceronline-hero-stock.jpg"); background-position: center; background-size: cover; }
.hero-section::before { position: absolute; inset: 0; z-index: -1; background: rgb(255 255 255 / 72%); content: ""; }
.hero-section h1 { max-width: 13ch; min-height: 2.95em; margin-inline: auto; }
.terminal-cursor { display: inline-block; width: 0.08em; height: 0.82em; margin-left: 0.08em; background: var(--color-primary); vertical-align: -0.04em; animation: terminal-blink 760ms steps(1) infinite; }
@keyframes terminal-blink { 50% { opacity: 0; } }
.hero-section .lead { max-width: 38rem; color: var(--color-muted); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.hero-note { margin-top: 1rem; margin-bottom: 0; }

.benefit-line { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--color-border); }
.benefit-stat { min-width: 0; padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1rem, 2.5vw, 2rem); text-align: center; }
.benefit-stat + .benefit-stat { border-left: 1px solid var(--color-border); }
.benefit-stat strong, .benefit-stat span { display: block; }
.benefit-stat strong { color: var(--color-secondary); font-family: var(--font-heading); font-size: clamp(1.25rem, 2.6vw, 2.15rem); line-height: 1.05; letter-spacing: -0.04em; }
.benefit-stat span { margin-top: 0.55rem; color: var(--color-muted); font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; }

.section-heading { max-width: 48rem; margin-bottom: 2.5rem; }
.package-intro { position: sticky; top: 8rem; }
.package-intro p { max-width: 28rem; }
.feature-list { padding-left: 0; list-style: none; }
.feature-list li { position: relative; padding: 1.15rem 1rem 1.15rem 3.15rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-secondary); background: var(--color-white); font-weight: 600; }
.feature-list li::before { position: absolute; top: 1.1rem; left: 1rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; display: grid; place-items: center; color: var(--color-primary); background: var(--color-surface); content: "✓"; font-size: 0.78rem; font-weight: 700; }

.process-list { padding-left: 0; list-style: none; }
.content-block { position: relative; min-height: 15rem; overflow: hidden; padding: 1.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); }
.content-block::after { position: absolute; right: -2rem; bottom: -2rem; width: 6rem; height: 6rem; border: 1px solid var(--color-border); border-radius: 50%; content: ""; }
.content-block h3 { margin-top: 0.5rem; }

.project-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.project-media { height: 24rem; overflow: hidden; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.project-media picture, .project-media img { display: block; width: 100%; height: 100%; }
.project-media img { object-fit: cover; object-position: top; transition: transform 600ms ease; }
.project-card:hover .project-media img { transform: scale(1.025); }
.project-content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem; }
.project-content h3 { margin: 0.25rem 0 0; }
.project-tag { color: var(--color-muted); font-size: 0.75rem; font-weight: 600; }
.project-link { flex: 0 0 auto; width: 3rem; height: 3rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); display: grid; place-items: center; color: var(--color-primary); text-decoration: none; }
.project-link:hover { color: var(--color-white); border-color: var(--color-primary); background: var(--color-primary); }

.pricing-block { position: relative; overflow: hidden; padding: clamp(2rem, 6vw, 4.5rem); border: 1px solid #c8d6ff; border-radius: var(--radius-xl); background: var(--color-white); box-shadow: var(--shadow-card); }
.pricing-block::before, .pricing-block::after { position: absolute; border: 1px solid var(--color-border); border-radius: 50%; content: ""; }
.pricing-block::before { top: -5rem; left: -5rem; width: 12rem; height: 12rem; }
.pricing-block::after { right: -4rem; bottom: -4rem; width: 9rem; height: 9rem; }
.regular-price { margin-bottom: 0; }
.price { margin-block: 0.5rem 1.4rem; color: var(--color-secondary); font-family: var(--font-heading); font-size: clamp(3.4rem, 8vw, 5.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.06em; }
.price span { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; letter-spacing: 0; }
.pricing-points { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.2rem; }
.pricing-points span { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-muted); font-size: 0.82rem; }
.pricing-points svg { width: 1rem; color: var(--color-primary); }
.pricing-points i { color: var(--color-primary); font-size: 0.9rem; }

.accordion { --bs-accordion-border-color: var(--color-border); --bs-accordion-border-radius: var(--radius-md); --bs-accordion-inner-border-radius: var(--radius-md); }
.accordion-item { overflow: hidden; }
.accordion-item + .accordion-item { margin-top: 0.75rem; border-top: 1px solid var(--color-border); }
.accordion-button { min-height: 4.4rem; color: var(--color-secondary); font-family: var(--font-heading); font-weight: 700; box-shadow: none !important; }
.accordion-button:not(.collapsed) { color: var(--color-primary); background: var(--color-surface); }
.accordion-button:focus { box-shadow: 0 0 0 0.22rem rgb(5 67 253 / 14%) !important; }
.accordion-body { color: var(--color-muted); }

.contact-form { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); }
.form-label { color: var(--color-secondary); font-weight: 600; }
.form-control { min-height: 3.25rem; border-color: var(--color-border); border-radius: var(--radius-md); }
textarea.form-control { min-height: 8rem; }
.form-control:hover { border-color: #aebbd5; }
.form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 0.22rem rgb(5 67 253 / 14%); }
.form-note { margin: 0.75rem 0 0; font-size: 0.72rem; }

.site-footer { border-color: var(--color-border) !important; }
.site-footer p, .site-footer a { font-size: 0.88rem; }
.site-footer a:not(.btn) { color: var(--color-muted); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--color-primary); }
.footer-heading { margin-bottom: 1rem; font-size: 0.9rem; letter-spacing: 0; }
.site-footer li + li { margin-top: 0.5rem; }
.footer-bottom { border-color: var(--color-border) !important; }

.whatsapp-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: var(--z-floating); width: 3.6rem; height: 3.6rem; border: 4px solid var(--color-white); border-radius: 50%; display: grid; place-items: center; color: var(--color-white); background: var(--color-whatsapp); box-shadow: 0 0.7rem 1.7rem rgb(16 99 60 / 25%); transition: transform var(--transition-fast), background var(--transition-fast); }
.whatsapp-float:hover, .whatsapp-float:focus-visible { color: var(--color-white); background: #0d7543; transform: translateY(-3px); }
.whatsapp-float svg { width: 1.55rem; height: 1.55rem; }
.whatsapp-float i { font-size: 1.65rem; }

.error-page { min-height: 100vh; padding-block: 4rem; display: grid; place-items: center; background: var(--color-surface-soft); }
.error-logo { display: block; margin: 0 auto 3rem; }
.error-code { margin-bottom: 0; color: var(--color-primary); font-family: var(--font-heading); font-size: clamp(5rem, 18vw, 11rem); font-weight: 700; line-height: 0.8; letter-spacing: -0.08em; }
.error-page h1 { max-width: 12ch; margin: 1.5rem auto 1rem; font-size: clamp(2.2rem, 5vw, 4rem); }

@media (max-width: 991.98px) {
  .navbar-collapse { padding-block: 1rem; }
  .navbar-nav .btn { margin-top: 0.5rem; }
  .package-intro { position: static; }
  .project-media { height: 21rem; }
}

@media (max-width: 767.98px) {
  .benefit-line { grid-template-columns: repeat(2, 1fr); }
  .benefit-stat:nth-child(3) { border-left: 0; }
  .benefit-stat:nth-child(n+3) { border-top: 1px solid var(--color-border); }
  .content-block { min-height: 13rem; }
  .project-media { height: 18rem; }
}

@media (max-width: 575.98px) {
  .navbar { min-height: 4.5rem; }
  .navbar-brand img { width: 145px; height: 44px; }
  .hero-section { min-height: calc(100svh - 4.5rem); background-position: 38% center; }
  .hero-section::before { background: rgb(255 255 255 / 78%); }
  .btn-lg { width: 100%; }
  .benefit-line { grid-template-columns: 1fr; }
  .benefit-stat + .benefit-stat { border-top: 1px solid var(--color-border); border-left: 0; }
  .feature-list { margin-inline: 0; }
  .project-media { height: 15rem; }
  .pricing-points { flex-direction: column; align-items: center; }
  .whatsapp-float { right: 1rem; bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .terminal-cursor { display: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}