/* =============================================
   HyMulti - Tailwind CDN Replacement CSS (Full)
   ============================================= */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background-color: #0f172a; color: white; font-family: 'Nunito Sans', sans-serif; }
body, p, span, a, button, div, h1, h2, h3, h4, h5, h6, li, label, input, textarea { font-family: 'Nunito Sans', sans-serif; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; font-family: inherit; }

/* --- Display --- */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }
.block       { display: block; }
.hidden      { display: none !important; }

/* --- Flex --- */
.flex-col        { flex-direction: column; }
.flex-row        { flex-direction: row; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.justify-start   { justify-content: flex-start; }
.shrink-0        { flex-shrink: 0; }

/* --- Gap --- */
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-5   { gap: 1.25rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }
.gap-10  { gap: 2.5rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-2 { row-gap: 0.5rem; }

/* --- Position --- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }

/* --- Placement --- */
.top-0     { top: 0; }
.top-6     { top: 1.5rem; }
.left-0    { left: 0; }
.left-4    { left: 1rem; }
.left-8    { left: 2rem; }
.right-0   { right: 0; }
.left-1\/2 { left: 50%; }
.-translate-x-1\/2 { transform: translateX(-50%); }

/* --- Z-index --- */
.z-40  { z-index: 40; }
.z-50  { z-index: 50; }
.-z-10 { z-index: -10; }

/* --- Width --- */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-5    { width: 1.25rem; }
.w-7    { width: 1.75rem; }
.w-14   { width: 3.5rem; }
.w-40   { width: 10rem; }

/* --- Height --- */
.h-5      { height: 1.25rem; }
.h-7      { height: 1.75rem; }
.h-14     { height: 3.5rem; }
.h-16     { height: 4rem; }
.h-full   { height: 100%; }
.h-screen { height: 100vh; }

/* --- Min/Max Height --- */
.min-h-screen { min-height: 100vh; }
.max-h-0      { max-height: 0; }

/* --- Max Width --- */
.max-w-md  { max-width: 28rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.mx-auto   { margin-left: auto; margin-right: auto; }

/* --- Overflow --- */
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

/* --- Padding --- */
.p-6   { padding: 1.5rem; }
.p-10  { padding: 2.5rem; }
.px-4  { padding-left: 1rem;   padding-right: 1rem; }
.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8  { padding-left: 2rem;   padding-right: 2rem; }
.px-12 { padding-left: 3rem;   padding-right: 3rem; }
.px-16 { padding-left: 4rem;   padding-right: 4rem; }
.py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4  { padding-top: 1rem;    padding-bottom: 1rem; }
.py-5  { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6  { padding-top: 1.5rem;  padding-bottom: 1.5rem; }
.py-8  { padding-top: 2rem;    padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem;  padding-bottom: 2.5rem; }
.py-16 { padding-top: 4rem;    padding-bottom: 4rem; }
.py-20 { padding-top: 5rem;    padding-bottom: 5rem; }
.py-24 { padding-top: 6rem;    padding-bottom: 6rem; }
.py-32 { padding-top: 8rem;    padding-bottom: 8rem; }
.pt-6  { padding-top: 1.5rem; }
.pt-7  { padding-top: 1.75rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-24 { padding-top: 6rem; }
.pb-6  { padding-bottom: 1.5rem; }

/* --- Margin --- */
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-7  { margin-bottom: 1.75rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-10 { margin-top: 2.5rem; }
.ml-1  { margin-left: 0.25rem; }
.ml-2  { margin-left: 0.5rem; }

/* --- Space Y --- */
.space-y-4  > * + * { margin-top: 1rem; }
.space-y-5  > * + * { margin-top: 1.25rem; }
.space-y-8  > * + * { margin-top: 2rem; }
.space-y-20 > * + * { margin-top: 5rem; }
.space-y-24 > * + * { margin-top: 6rem; }

/* --- Typography --- */
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;     line-height: 1; }

.font-bold      { font-weight: 700; }
.font-semibold  { font-weight: 600; }
.font-extrabold { font-weight: 800; }
.font-mono      { font-family: ui-monospace, monospace; }

.text-center { text-align: center; }
.text-left   { text-align: left; }

.uppercase        { text-transform: uppercase; }
.tracking-wide    { letter-spacing: 0.025em; }
.tracking-wider   { letter-spacing: 0.05em; }
.tracking-widest  { letter-spacing: 0.1em; }
.leading-relaxed  { line-height: 1.625; }
.underline        { text-decoration: underline; }

/* --- Text Colors --- */
.text-white       { color: #ffffff; }
.text-black       { color: #000000; }
.text-gray-200    { color: #e5e7eb; }
.text-gray-300    { color: #d1d5db; }
.text-gray-400    { color: #9ca3af; }
.text-sky-400     { color: #38bdf8; }
.text-red-400     { color: #f87171; }
.text-emerald-400 { color: #34d399; }
.text-emerald-300 { color: #6ee7b7; }

/* --- Background Colors --- */
.bg-slate-900  { background-color: #0f172a; }
.bg-slate-950  { background-color: #020617; }
.bg-slate-800  { background-color: #1e293b; }
.bg-sky-400    { background-color: #38bdf8; }

.bg-slate-900\/70   { background-color: rgba(15,23,42,0.70); }
.bg-slate-900\/80   { background-color: rgba(15,23,42,0.80); }
.bg-slate-800\/60   { background-color: rgba(30,41,59,0.60); }
.bg-slate-800\/80   { background-color: rgba(30,41,59,0.80); }
.bg-white\/5        { background-color: rgba(255,255,255,0.05); }
.bg-white\/\[0\.03\] { background-color: rgba(255,255,255,0.03); }
.bg-black\/40       { background-color: rgba(0,0,0,0.40); }
.bg-black\/80       { background-color: rgba(0,0,0,0.80); }
.bg-neutral-700\/90 { background-color: rgba(64,64,64,0.90); }

/* --- Gradients --- */
.bg-gradient-to-b  { background-image: linear-gradient(to bottom,      var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent)); }
.from-slate-900    { --tw-gradient-from: #0f172a; }
.from-black\/80    { --tw-gradient-from: rgba(0,0,0,0.80); }
.to-slate-950      { --tw-gradient-to: #020617; }
.to-slate-900\/80  { --tw-gradient-to: rgba(15,23,42,0.80); }

/* --- Borders --- */
.border   { border-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }

.border-white\/5   { border-color: rgba(255,255,255,0.05); }
.border-white\/10  { border-color: rgba(255,255,255,0.10); }
.border-white\/20  { border-color: rgba(255,255,255,0.20); }
.border-red-400    { border-color: #f87171; }
.border-sky-400    { border-color: #38bdf8; }

/* --- Border Radius --- */
.rounded-lg   { border-radius: 0.5rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-3xl  { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

/* --- Shadows --- */
.shadow-2xl      { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }
.drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgba(0,0,0,0.3)); }

/* --- Backdrop --- */
.backdrop-blur    { backdrop-filter: blur(8px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); }

/* --- Background image helpers --- */
.bg-cover     { background-size: cover; }
.bg-center    { background-position: center; }
.bg-no-repeat { background-repeat: no-repeat; }

/* --- Opacity & Transform --- */
.opacity-0      { opacity: 0; }
.opacity-100    { opacity: 1; }
.translate-x-0  { transform: translateX(0); }
.translate-x-10 { transform: translateX(2.5rem); }
.rotate-45      { transform: rotate(45deg); }
.rotate-6       { transform: rotate(6deg); }
.scale-110      { transform: scale(1.10); }
.scale-125      { transform: scale(1.25); }
.transform      { transform: translateZ(0); }

/* --- Transition --- */
.transition           { transition: all 150ms cubic-bezier(0.4,0,0.2,1); }
.transition-all       { transition: all 150ms cubic-bezier(0.4,0,0.2,1); }
.duration-300         { transition-duration: 300ms; }
.transition-transform { transition-property: transform; transition-duration: 300ms; }

/* --- Scroll --- */
.scroll-mt-24 { scroll-margin-top: 6rem; }

/* --- Fill --- */
.fill-current { fill: currentColor; }
.fill-white   { fill: #ffffff; }

/* --- Grid Columns --- */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

/* --- Focus --- */
.focus\:outline-none:focus   { outline: none; }
.focus\:ring-2:focus         { box-shadow: 0 0 0 2px #38bdf8; }
.focus\:ring-sky-400:focus   { box-shadow: 0 0 0 2px #38bdf8; }
.focus\:border-sky-400:focus { border-color: #38bdf8; }

/* --- Placeholder --- */
.placeholder-gray-400::placeholder { color: #9ca3af; }

/* --- Nav Buttons --- */
.nav-btn        { background-color: transparent; color: white; }
.nav-btn:hover  { background-color: rgba(255,255,255,0.12); }
.nav-active     { background-color: white; color: black; }

/* --- Content Section --- */
.content-section { transition: opacity 300ms, transform 300ms; }

/* --- Hover States --- */
.hover\:text-white:hover       { color: #ffffff; }
.hover\:text-sky-400:hover     { color: #38bdf8; }
.hover\:text-indigo-400:hover  { color: #818cf8; }
.hover\:text-pink-400:hover    { color: #f472b6; }
.hover\:text-red-500:hover     { color: #ef4444; }
.hover\:text-orange-500:hover  { color: #f97316; }
.hover\:text-emerald-300:hover { color: #6ee7b7; }
.hover\:text-black:hover       { color: #000000; }
.hover\:underline:hover        { text-decoration: underline; }
.hover\:bg-sky-300:hover       { background-color: #7dd3fc; }
.hover\:bg-sky-400:hover       { background-color: #38bdf8; }
.hover\:bg-slate-800:hover     { background-color: #1e293b; }
.hover\:bg-\[\#4752C4\]:hover  { background-color: #4752C4; }
.hover\:bg-red-400:hover       { background-color: #f87171; }
.hover\:border-sky-400:hover   { border-color: #38bdf8; }
.hover\:scale-105:hover        { transform: scale(1.05); }
.hover\:scale-110:hover        { transform: scale(1.10); }
.hover\:-translate-y-1:hover   { transform: translateY(-0.25rem); }
.hover\:scale-\[1\.02\]:hover  { transform: scale(1.02); }
.hover\:shadow-\[0_0_24px_rgba\(56\,189\,248\,0\.45\)\]:hover { box-shadow: 0 0 24px rgba(56,189,248,0.45); }
.hover\:shadow-\[0_0_24px_rgba\(88\,101\,242\,0\.5\)\]:hover  { box-shadow: 0 0 24px rgba(88,101,242,0.5); }
.hover\:shadow-\[0_0_25px_rgba\(56\,189\,248\,0\.18\)\]:hover { box-shadow: 0 0 25px rgba(56,189,248,0.18); }

/* --- Group Hover --- */
.group:hover .group-hover\:text-sky-400       { color: #38bdf8; }
.group:hover .group-hover\:border-sky-400     { border-color: #38bdf8; }
.group:hover .group-hover\:border-sky-400\/60 { border-color: rgba(56,189,248,0.60); }

/* --- Responsive --- */
@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
}

@media (min-width: 768px) {
    .md\:px-10       { padding-left: 2.5rem; padding-right: 2.5rem; }
    .md\:pt-10       { padding-top: 2.5rem; }
    .md\:pb-6        { padding-bottom: 1.5rem; }
    .md\:text-3xl    { font-size: 1.875rem; line-height: 2.25rem; }
    .md\:text-left   { text-align: left; }
    .md\:flex-row    { flex-direction: row; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .md\:w-52        { width: 13rem; }
}

@media (min-width: 1280px) {
    .xl\:flex { display: flex !important; }
}