:root {
    --pfsc-primary: #FACC15;
    --pfsc-secondary: #EC4899;
    --pfsc-bg: #ffffff;
    --pfsc-bg-dark: #0b1020;
    --pfsc-surface: #ffffff;
    --pfsc-surface-dark: #0f172a;
    --pfsc-border: rgba(2, 6, 23, 0.08);
    --pfsc-border-dark: rgba(255, 255, 255, 0.08);
    --pfsc-text: #0b1020;
    --pfsc-text-dark: #f8fafc;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --shadow-soft: 0 8px 30px rgba(2,6,23,0.06), 0 2px 8px rgba(2,6,23,0.04);
    --shadow-glass: 0 10px 40px rgba(2,6,23,0.08), inset 0 1px 0 rgba(255,255,255,0.2);
}

.section-2 {
    --pfsc-primary: #FACC15;
    --pfsc-secondary: #EC4899;
    --pfsc-bg: #ffffff;
}

.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-glass { box-shadow: var(--shadow-glass); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.border-default { border-color: var(--pfsc-border); }
.dark .border-default { border-color: var(--pfsc-border-dark); }
.surface { background: var(--pfsc-surface); }
.dark .surface { background: var(--pfsc-surface-dark); }
.brand-gradient { background-image: linear-gradient(135deg, var(--pfsc-primary), var(--pfsc-secondary)); }
.brand-gradient-text { background-image: linear-gradient(135deg, var(--pfsc-primary), var(--pfsc-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ring-brand { box-shadow: 0 0 0 3px rgba(250, 204, 21, .35), 0 0 0 6px rgba(236, 72, 153, .15); }

@keyframes blob {
    0% { transform: translate(0,0) scale(1); }
    33% { transform: translate(20px,-30px) scale(1.05); }
    66% { transform: translate(-25px,20px) scale(0.98); }
    100% { transform: translate(0,0) scale(1); }
}
@keyframes fadeup {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover { transform: translateY(-2px); }
.btn-press { transition: transform .06s ease; }
.btn-press:active { transform: translateY(1px) scale(0.99); }

.skeleton {
    position: relative;
    overflow: hidden;
    background-color: rgba(2, 6, 23, 0.06);
}
.dark .skeleton { background-color: rgba(255, 255, 255, 0.08); }
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
    100% { transform: translateX(100%); }
}

.feature-gradient {
    background-image:
        radial-gradient(1200px 600px at 10% 10%, rgba(59,130,246,0.20), transparent 60%),
        radial-gradient(1000px 600px at 90% 20%, rgba(236,72,153,0.15), transparent 60%),
        linear-gradient(180deg, #0b1b3a 0%, #0b1430 100%);
}
.feature-dots {
    background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
    background-size: 12px 12px;
    background-position: 0 0;
    mask-image: radial-gradient(circle at center, black 60%, transparent 80%);
    pointer-events: none;
}
@keyframes float-slow {
    0% { transform: translateY(0) }
    50% { transform: translateY(-6px) }
    100% { transform: translateY(0) }
}
.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }

.reveal.is-visible .path-draw {
    stroke-dasharray: 800;
    stroke-dashoffset: 0;
    animation: pathdraw 2s ease forwards;
}
@keyframes pathdraw {
    from { stroke-dashoffset: 800; }
    to { stroke-dashoffset: 0; }
}

@keyframes input-glow {
	0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.45); }
	100% { box-shadow: 0 0 0 10px rgba(250, 204, 21, 0); }
}
.focus-glow:focus {
	animation: input-glow .7s ease-out;
}

.theme-rose {
	--pfsc-primary: #EC4899;
	--pfsc-secondary: #FACC15;
	--pfsc-surface: #fff1f7;
	--pfsc-surface-dark: #1c1220;
	--pfsc-border: rgba(236, 72, 153, 0.25);
	--pfsc-border-dark: rgba(236, 72, 153, 0.25);
}
.bg-rose-soft {
	background: linear-gradient(180deg, #fff7fb 0%, #fff1f7 100%);
}
.rose-gradient {
	background-image: radial-gradient(600px 300px at 10% 0%, rgba(236,72,153,.20), transparent 60%),
	                  radial-gradient(600px 300px at 90% 0%, rgba(250,204,21,.18), transparent 60%);
}