/* CPOS modern theme — loaded after app.css. Pure visual refinements: no markup depends on it. */
:root {
  --c-brand: #3f857c; --c-brand-2: #2c6b64; --c-brand-3: #5a968f; --c-ink: #0f2a27; --c-soft: #eef6f4;
  --c-accent: #ffa55c; --c-line: rgba(63, 133, 124, .22);
  --shadow-sm: 0 2px 6px rgba(20, 60, 55, .06);
  --shadow-md: 0 12px 32px -14px rgba(20, 60, 55, .28);
  --shadow-lg: 0 28px 60px -24px rgba(20, 60, 55, .38);
  --ease: cubic-bezier(.22, .8, .24, 1);
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: #f5faf9; color: var(--c-ink); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(63, 133, 124, .25); }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(63, 133, 124, .55); outline-offset: 2px; border-radius: 6px; }

/* page backdrop: soft aurora behind the first screen, gentle wash elsewhere */
main > section:first-child {
  background:
    radial-gradient(900px 420px at 88% -8%, rgba(90, 150, 143, .22), transparent 62%),
    radial-gradient(700px 360px at -6% 6%, rgba(255, 165, 92, .12), transparent 60%),
    #f5faf9;
}
main { background: linear-gradient(#fff, #f5faf9 40%, #f5faf9) !important; }

/* header: frosted glass pill */
header[data-site-header] { background: rgba(245, 251, 250, .78) !important; -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
header[data-site-header] > nav > div:first-child { box-shadow: var(--shadow-md); border-color: var(--c-line); background: rgba(255, 255, 255, .82); }
header[data-site-header] a[href] { transition: opacity .2s, color .2s; }
header[data-site-header] a > span.h-0\.5 { background: linear-gradient(90deg, var(--c-brand), var(--c-accent)) !important; height: 3px; border-radius: 3px; }
.nav-dropdown > div > div > div { box-shadow: var(--shadow-lg); border-color: var(--c-line); animation: dropIn .22s var(--ease); }
@keyframes dropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* buttons & brand surfaces */
.bg-\[\#5a968f\] { background-image: linear-gradient(135deg, var(--c-brand-3), var(--c-brand) 55%, var(--c-brand-2)); }
a.bg-\[\#5a968f\], button.bg-\[\#5a968f\] { box-shadow: 0 8px 20px -8px rgba(44, 107, 100, .65); transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s; }
a.bg-\[\#5a968f\]:hover, button.bg-\[\#5a968f\]:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(44, 107, 100, .75); filter: brightness(1.05); }
a.bg-\[\#5a968f\]:active, button.bg-\[\#5a968f\]:active { transform: translateY(0); }
a.bg-white.rounded-full, a.bg-\[\#ffffff\] { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
a.bg-white.rounded-full:hover, a.bg-\[\#ffffff\]:hover { transform: translateY(-2px); }
a.border-\[\#5a968f\].rounded-full, a.rounded-full.border { transition: transform .25s var(--ease), background-color .25s, box-shadow .25s; }
a.border-\[\#5a968f\].rounded-full:hover { transform: translateY(-2px); background: #fff; box-shadow: var(--shadow-md); }

/* cards */
.rounded-4xl, .rounded-3xl, .rounded-\[30px\], .rounded-\[28px\] { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, background-color .35s; }
[class*="border-[#5a968f]/40"], [class*="border-[#5a968f]/30"] { border-color: var(--c-line); }
.rounded-4xl.bg-\[\#f7faf9\], .rounded-3xl.bg-\[\#f7faf9\], .rounded-3xl.bg-\[\#f8fbfa\], .rounded-\[28px\].bg-\[\#f7faf9\] {
  background: linear-gradient(180deg, #fff, #f7fbfa); box-shadow: var(--shadow-sm);
}
.group.rounded-3xl:hover, .group.rounded-4xl:hover, article.rounded-3xl:hover { box-shadow: var(--shadow-md); }
.rounded-4xl.bg-\[\#5a968f\] { box-shadow: var(--shadow-lg); background-image: linear-gradient(120deg, #4a8f86 0%, #2f6f67 70%, #285f58 100%); position: relative; overflow: hidden; }
.rounded-4xl.bg-\[\#5a968f\]::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%); pointer-events: none; }
img.rounded-3xl, img.rounded-2xl { box-shadow: var(--shadow-lg); }

/* typography polish */
h1, h2 { letter-spacing: -.02em; text-wrap: balance; }
h2 > span.text-\[\#5a968f\], h2 > span[style*="5a968f"] {
  background: linear-gradient(90deg, var(--c-brand), #2c6b64 60%, #e8893a); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
main p { text-wrap: pretty; }

/* icon chips get a soft ring */
.rounded-full.bg-\[\#e4efec\], .rounded-full.bg-\[\#5a968f\]\/10 { box-shadow: inset 0 0 0 1px rgba(63, 133, 124, .18); }

/* FAQ + pricing */
article.rounded-2xl > button[aria-expanded] { background-image: linear-gradient(120deg, var(--c-brand-3), var(--c-brand-2)); transition: filter .2s; }
article.rounded-2xl > button[aria-expanded]:hover { filter: brightness(1.06); }
[data-pricing] article { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
[data-pricing] article:hover { box-shadow: var(--shadow-lg); }

/* footer */
footer { background: linear-gradient(180deg, #f5faf9, #e9f3f1) !important; }
footer a[aria-label] { transition: transform .25s var(--ease), background-color .25s; }
footer a[aria-label]:hover { transform: translateY(-3px) scale(1.06); }

/* scroll reveal (only active when JS adds .js to <html>) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; }
}
@media (max-width: 640px) { header[data-site-header] { -webkit-backdrop-filter: none; backdrop-filter: none; } }