/* Shared styles for the public marketing pages (index, pricing, guide, ...).
   The logged-in app uses css/app.css instead. */
html { scroll-behavior: smooth; }
body { font-family: 'Sarabun', ui-sans-serif, system-ui, sans-serif; }

.site-body {
    background-color: #F7F8FC;
    background-image:
        radial-gradient(900px 500px at 85% -10%, rgba(124, 92, 255, .10), transparent 60%),
        radial-gradient(800px 500px at 0% 0%, rgba(20, 99, 255, .08), transparent 60%);
    background-repeat: no-repeat;
}

/* Thai stacks vowel + tone marks up to two levels above the base letter (and
   below it, e.g. ุ ู) — Tailwind's tight heading leading (1.1–1.25) is tuned
   for Latin text and makes Thai lines collide. Give every heading room. */
h1, h2, h3, h4 { line-height: 1.45 !important; letter-spacing: 0 !important; }
p, li { line-height: 1.75; }

.text-gradient {
    background: linear-gradient(90deg, #1463FF 0%, #5B5BF6 50%, #A855F7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* background-clip:text only paints inside the box — pad it so upper
       tone marks (and lower vowels) aren't clipped off as invisible. */
    display: inline-block;
    padding: .2em .02em .12em;
    margin: -.2em 0 -.12em;
}
.bg-brand-gradient { background: linear-gradient(110deg, #1463FF 0%, #4F46E5 55%, #8B5CF6 100%); }

/* Nav */
.site-nav-link { color: #475569; border-radius: 9999px; padding: .5rem .9rem; transition: color .15s, background-color .15s; }
.site-nav-link:hover { color: #0B4FD9; background: #EEF4FF; }
.site-nav-link.active { color: #1463FF; font-weight: 600; }

/* Entrance + floating decorations */
.animate-up { animation: siteFadeUp .8s ease-out forwards; opacity: 0; transform: translateY(20px); }
@keyframes siteFadeUp { to { opacity: 1; transform: translateY(0); } }
.float-slow { animation: siteFloat 6s ease-in-out infinite; }
.float-slower { animation: siteFloat 8s ease-in-out infinite; animation-delay: -2s; }
@keyframes siteFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
    .animate-up { animation: none; opacity: 1; transform: none; }
    .float-slow, .float-slower { animation: none; }
}

/* Soft glossy 3D-ish shapes (pure CSS, no image assets) */
.deco-sphere {
    border-radius: 9999px;
    background: radial-gradient(circle at 30% 28%, #ffffff 0%, #9DB8FF 18%, #4F6BFF 55%, #3B2FD8 100%);
    box-shadow: 0 30px 60px -20px rgba(59, 47, 216, .55);
}
.deco-gem {
    border-radius: 14px;
    background: linear-gradient(135deg, #C4B5FD 0%, #8B5CF6 55%, #6D28D9 100%);
    box-shadow: 0 18px 36px -14px rgba(109, 40, 217, .55);
    transform: rotate(18deg);
}
.deco-ring {
    border-radius: 9999px;
    border: 14px solid #4F6BFF;
    box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .15), 0 18px 30px -14px rgba(79, 107, 255, .6);
}

/* FAQ chevron */
details > summary::-webkit-details-marker { display: none; }

/* Two-tone CareKru wordmark. Light backgrounds only: on the login gradient and
   the dark admin sidebar it stays white so it remains readable. */
.ck-logo { color: #0F1D47; }
.ck-logo span { color: #1488EB; }