html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01"; opacity: 0; transition: opacity .5s ease; }
body.loaded { opacity: 1; }

/* Full-width container used everywhere instead of max-w-7xl mx-auto */
.container-full { width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px) { .container-full { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .container-full { padding-left: 4rem; padding-right: 4rem; } }
@media (min-width: 1536px) { .container-full { padding-left: 6rem; padding-right: 6rem; } }

/* ---------- Scroll progress bar ---------- */
#scrollProgress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, #2563EB, #3B82F6, #16A34A); z-index: 70; transition: width .1s linear; }

/* ---------- Navbar ---------- */
#siteNav { transition: background-color .4s ease, box-shadow .4s ease, border-color .4s ease, padding .4s ease; }
#siteNav.nav-scrolled { background-color: rgba(255,255,255,0.75); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 1px 0 rgba(17,24,39,0.06), 0 8px 30px -12px rgba(17,24,39,0.1); border-bottom-color: transparent; }
#siteNav.nav-scrolled .nav-inner { height: 4.5rem; }

.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2563EB, #3B82F6); transition: width .3s cubic-bezier(.16,1,.3,1); }
.nav-link:hover::after { width: 100%; }

/* ---------- Buttons ---------- */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background-color .3s ease; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -8px rgba(37,99,235,0.45); }
.btn-primary:active { transform: translateY(-1px) scale(.98); }
.btn-primary .btn-icon { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.btn-primary:hover .btn-icon { transform: translateX(4px); }
.btn-ripple::after { content:''; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 65%); opacity:0; transform: scale(0); transition: opacity .6s ease, transform .6s ease; z-index: -1; }
.btn-ripple:active::after { opacity:1; transform: scale(1.8); transition: 0s; }

.btn-ghost { transition: transform .3s cubic-bezier(.16,1,.3,1), background-color .3s ease, border-color .3s ease; }
.btn-ghost:hover { transform: translateY(-3px); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
.reveal.reveal-up { transform: translateY(36px); }
.reveal.reveal-left { transform: translateX(-36px); }
.reveal.reveal-right { transform: translateX(36px); }
.reveal.reveal-zoom { transform: scale(.94); }
.reveal.is-visible { opacity: 1; transform: none; }
.delay-1.is-visible { transition-delay: .08s; }
.delay-2.is-visible { transition-delay: .16s; }
.delay-3.is-visible { transition-delay: .24s; }
.delay-4.is-visible { transition-delay: .32s; }
.delay-5.is-visible { transition-delay: .4s; }
.delay-6.is-visible { transition-delay: .48s; }

/* ---------- Cards ---------- */
.card-premium { transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .45s ease; }
.card-premium:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -14px rgba(17,24,39,0.18); border-color: rgba(37,99,235,0.18); }
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .8s cubic-bezier(.16,1,.3,1); }
.img-zoom:hover img { transform: scale(1.08); }

/* ---------- Floating shapes / blobs ---------- */
@keyframes floatSlow { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(18px,-24px) scale(1.05); } }
@keyframes floatSlower { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-16px,20px) scale(1.06); } }
.float-blob { animation: floatSlow 11s ease-in-out infinite; }
.float-blob-slow { animation: floatSlower 18s ease-in-out infinite; }
[data-parallax] { transition: transform .2s ease-out; }

/* ---------- Floating micro-cards ---------- */
@keyframes gentleFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.floaty { animation: gentleFloat 5s ease-in-out infinite; }

/* ---------- Counter ---------- */
.counter { font-variant-numeric: tabular-nums; }

/* ---------- Section divider ---------- */
.divider-fade { height: 1px; background: linear-gradient(90deg, transparent, #E5E7EB, transparent); }

/* ---------- Floating label inputs ---------- */
.field { position: relative; }
.field input, .field textarea, .field select {
    width: 100%; border: 1px solid #E5E7EB; border-radius: .875rem; background: #fff;
    padding: 1.15rem 1rem .55rem 1rem; font-size: .9rem; color: #111827;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { padding-top: 1.35rem; }
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: #2563EB; box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
}
.field label {
    position: absolute; left: 1rem; top: .95rem; font-size: .875rem; color: #6B7280;
    pointer-events: none; transition: all .2s ease; background: #fff; padding: 0 .2rem;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
    top: -.5rem; left: .7rem; font-size: .7rem; color: #2563EB; font-weight: 600;
}

.hero-dots {
    background-image: radial-gradient(circle, #E5E7EB 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 40%, transparent 85%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 40%, transparent 85%);
}

.hero-dots-light {
    background-image: radial-gradient(circle, #CBD5E1 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 85%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 85%);
}
.sparkline-path { 
    stroke-dasharray: 140; 
    stroke-dashoffset: 140; 
    animation: drawLine 1.6s ease forwards 0.6s; 
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes floatSlow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
.animate-float { animation: floatSlow 4s ease-in-out infinite; }
.animate-float-delayed { animation: floatSlow 4s ease-in-out infinite 2s; }

/* Custom Pure CSS/JS Slider Transitions */
.hero-slide {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}
.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
}
.hero-indicator {
    transition: all 0.3s ease;
}
.hero-indicator.active {
    background-color: #16A34A !important;
    width: 1.5rem !important;
}

.shadow-soft {
    box-shadow: 0 1px 2px rgba(17,24,39,.04),
                0 8px 24px -8px rgba(17,24,39,.08);
}

.shadow-lift {
    box-shadow: 0 24px 48px -14px rgba(17,24,39,.18);
}

.shadow-glow {
    box-shadow: 0 8px 30px -6px rgba(37,99,235,.35);
}