@howssatoshi/quantumcss 1.1.0 → 1.2.0

package/dist/quantum.css

@@ -1,207 +1,724 @@
-/* Quantum CSS - High Performance Output */
-*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
-html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
-body { margin: 0; line-height: inherit; }
-img { display: block; max-width: 100%; height: auto; }
-button { cursor: pointer; background: transparent; padding: 0; color: inherit; font: inherit; }
+/* Quantum CSS JIT Output */
+.p-12 {
+  padding: 3rem;
+}
 
-.block {
+.max-w-4xl {
+  max-width: 4xl;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.space-y-12 > * + * {
+  margin-top: 3rem;
+}
+
+.text-4xl {
+  font-size: 2.5rem;
+  line-height: 1.2;
+}
+
+.space-y-4 > * + * {
+  margin-top: 1rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.2;
+}
+
+.flex {
+  display: flex;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.btn-primary {
+  background-color: #2563eb;
+  color: #ffffff;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-radius: 0.5rem;
+}
+
+.btn-primary:hover {
+  background-color: #1d4ed8;
+}
+
+.btn-secondary {
+  background-color: #64748b;
+  color: #ffffff;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-radius: 0.5rem;
+}
+
+.btn-secondary:hover {
+  background-color: #475569;
+}
+
+.card-premium {
+  background-color: #ffffff;
+  padding: 2rem;
+  border-radius: 1rem;
+  border-color: #f1f5f9;
+}
+
+.card-premium:hover {
+  transform: scale(1.05);
+}
+
+.max-w-sm {
+  max-width: sm;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 1.2;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.p-10 {
+  padding: 2.5rem;
+}
+
+.space-y-8 > * + * {
+  margin-top: 2rem;
+}
+
+.bg-black {
+  background-color: #000000;
+}
+
+.text-white {
+  color: #ffffff;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.glass {
+  background-color: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-width: 1px;
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.bg-blue-500 {
+  background-color: #3b82f6;
+}
+
+.bg-red-500 {
+  background-color: #ef4444;
+}
+
+.input-starlight {
+  background-color: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: inherit;
+  border-radius: 0.75rem;
+  padding: 0 1rem;
+  appearance: none;
+  transition: all 0.2s ease;
+  height: 3rem;
+}
+
+.textarea-starlight {
+  background-color: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: inherit;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  appearance: none;
+  transition: all 0.2s ease;
+  min-height: 8rem;
+  width: 100%;
   display: block;
 }
 
-.shadow {
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+.bg-green-500 {
+  background-color: #10b981;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.p-8 {
+  padding: 2rem;
+}
+
+.bg-starlight-deep {
+  background-color: #08081a;
+}
+
+.min-h-screen {
+  min-height: screen;
+}
+
+.max-w-144 {
+  max-width: 36rem;
+}
+
+.mb-20 {
+  margin-bottom: 5rem;
+}
+
+.pt-16 {
+  padding-top: 4rem;
+}
+
+.text-6xl {
+  font-size: 4rem;
+  line-height: 1.2;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.text-gradient-starlight {
+  background: linear-gradient(to right, #ffb38a, #00d4ff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: inline-block;
+}
+
+.max-w-prose {
+  max-width: prose;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.gap-6 {
+  gap: 1.5rem;
+}
+
+.bg-starlight {
+  background: linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%);
+}
+
+.text-black {
+  color: #000000;
+}
+
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.glow-blue {
+  box-shadow: 0 0 30px rgba(0, 212, 255, 0.25);
+}
+
+.scale-105 {
+  transform: scale(1.05);
+}
+
+.hover\:bg-white:hover {
+  background-color: #ffffff;
+}
+
+.border-none {
+  border-width: 0;
+}
+
+.px-12 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-white {
+  border-color: #ffffff;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.text-starlight {
+  color: #00d4ff;
+}
+
+.gap-10 {
+  gap: 2.5rem;
+}
+
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
+.bg-white {
+  background-color: #ffffff;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.5;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.focus\:border-starlight:focus {
+  border-color: #00d4ff;
+}
+
+.hover\:scale-105:hover {
+  transform: scale(1.05);
+}
+
+.mt-32 {
+  margin-top: 8rem;
+}
+
+.pt-10 {
+  padding-top: 2.5rem;
+}
+
+.border-t {
+  border-top-width: undefinedpx;
+}
+
+.border-b {
+  border-bottom-width: undefinedpx;
+}
+
+.border-slate-100 {
+  border-color: #f1f5f9;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.bg-slate-50 {
+  background-color: #f8fafc;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.text-slate-500 {
+  color: #64748b;
+}
+
+.hover\:text-slate-900:hover {
+  color: #0f172a;
+}
+
+.border-slate-900 {
+  border-color: #0f172a;
+}
+
+.border-b-4 {
+  border-bottom-width: 4px;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.text-blue-600 {
+  color: #2563eb;
+}
+
+.gap-8 {
+  gap: 2rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
+.hover\:border-blue-600:hover {
+  border-color: #2563eb;
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+}
+
+.p-2 {
+  padding: 0.5rem;
 }
 
-.rounded {
-  border-radius: 0.25rem;
+.hover\:bg-slate-100:hover {
+  background-color: #f1f5f9;
 }
 
-.border {
-  border-width: 1px;
+.w-5 {
+  width: 1.25rem;
 }
 
-.gap {
-  gap: 0px;
+.h-5 {
+  height: 1.25rem;
 }
 
-.grid {
-  display: grid;
+.bg-slate-900 {
+  background-color: #0f172a;
 }
 
-.grid-template-columns {
-  display: grid;
+.rounded {
+  border-radius: 0.375rem;
 }
 
-.flex {
-  display: flex;
+.bg-blue-600 {
+  background-color: #2563eb;
 }
 
-.flex-direction {
-  display: flex;
+.overflow-hidden {
+  overflow: hidden;
 }
 
 .inline-block {
   display: inline-block;
 }
 
-.items-center {
-  align-items: center;
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1.2;
+}
+
+.text-slate-300 {
+  color: #cbd5e1;
+}
+
+.max-w-2xl {
+  max-width: 2xl;
+}
+
+.gap-12 {
+  gap: 3rem;
+}
+
+.aspect-video {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  height: auto;
+}
+
+.bg-slate-100 {
+  background-color: #f1f5f9;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.group:hover .group-hover\:scale-105 {
+  transform: scale(1.05);
+}
+
+.transition-transform {
+  transition-property: transform;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.space-y-6 > * + * {
+  margin-top: 1.5rem;
 }
 
 .items-start {
   align-items: flex-start;
 }
 
-.flex-start {
-  display: flex;
+.text-slate-100 {
+  color: #f1f5f9;
 }
 
-.items-end {
-  align-items: flex-end;
+.group:hover .group-hover\:text-blue-100 {
+  color: #dbeafe;
 }
 
-.flex-end {
-  display: flex;
+.group:hover .group-hover\:text-blue-600 {
+  color: #2563eb;
 }
 
-.justify-center {
-  justify-content: center;
+.text-slate-400 {
+  color: #94a3b8;
 }
 
-.justify-between {
-  justify-content: space-between;
+.mt-1 {
+  margin-top: 0.25rem;
 }
 
-.justify-start {
-  justify-content: flex-start;
+.p-6 {
+  padding: 1.5rem;
 }
 
-.justify-end {
-  justify-content: flex-end;
+.border-slate-200 {
+  border-color: #e2e8f0;
 }
 
-.flex-col {
-  flex-direction: column;
+.p-3 {
+  padding: 0.75rem;
 }
 
-.flex-grow {
-  flex-grow: 1;
+.focus\:border-blue-600:focus {
+  border-color: #2563eb;
 }
 
-.flex-wrap {
-  flex-wrap: wrap;
+.py-20 {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
 }
 
-.w-full {
-  width: 100%;
+.mt-24 {
+  margin-top: 6rem;
 }
 
-.h-full {
-  height: 100%;
+.border-slate-800 {
+  border-color: #1e293b;
 }
 
-.max-w-prose {
-  max-width: 65ch;
+.pb-16 {
+  padding-bottom: 4rem;
 }
 
-.min-h-screen {
-  min-height: 100vh;
+.col-span-1 {
+  grid-column: span 1 / span 1;
 }
 
-.font-bold {
-  font-weight: 700;
+.text-3xl {
+  font-size: 2rem;
+  line-height: 1.2;
 }
 
-.font-medium {
-  font-weight: 500;
+.max-w-md {
+  max-width: md;
 }
 
-.font-light {
-  font-weight: 300;
+.space-y-3 > * + * {
+  margin-top: 0.75rem;
 }
 
-.tracking-tighter {
-  letter-spacing: -0.05em;
+.p-0 {
+  padding: 0px;
 }
 
-.tracking-tight {
-  letter-spacing: -0.025em;
+.hover\:text-blue-600:hover {
+  color: #2563eb;
 }
 
-.text-center {
-  text-align: center;
+.pt-12 {
+  padding-top: 3rem;
 }
 
-.text-left {
-  text-align: left;
+.text-slate-600 {
+  color: #475569;
 }
 
-.text-right {
-  text-align: right;
+.w-6 {
+  width: 1.5rem;
 }
 
-.rounded-full {
-  border-radius: 9999px;
+.h-6 {
+  height: 1.5rem;
 }
 
-.rounded-xl {
-  border-radius: 0.75rem;
+.max-w-6xl {
+  max-width: 6xl;
 }
 
-.border-t {
-  border-top-width: 1px;
+.mb-12 {
+  margin-bottom: 3rem;
 }
 
-.border-b {
-  border-bottom-width: 1px;
+.mb-2 {
+  margin-bottom: 0.5rem;
 }
 
-.transition {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+.w-24 {
+  width: 6rem;
 }
 
-.scale-105 {
-  transform: scale(1.05);
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5;
 }
 
-.active-scale {
-  transform: scale(0.96);
+.w-20 {
+  width: 5rem;
 }
 
-.cursor-pointer {
-  cursor: pointer;
+.h-20 {
+  height: 5rem;
 }
 
-.overflow-hidden {
-  overflow: hidden;
+.bg-blue-100 {
+  background-color: #dbeafe;
 }
 
-.hidden {
-  display: none;
+.border-blue-200 {
+  border-color: #bfdbfe;
 }
 
-.glass {
-  background-color: rgba(255, 255, 255, 0.03);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+.w-32 {
+  width: 8rem;
 }
 
-.glow-blue {
-  box-shadow: 0 0 30px rgba(0, 212, 255, 0.25);
+.h-32 {
+  height: 8rem;
 }
 
-.bg-starlight {
-  background: linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%);
+.w-16 {
+  width: 4rem;
 }
 
-.text-gradient-starlight {
-  background: linear-gradient(to right, #ffb38a, #00d4ff);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  display: inline-block;
+.h-16 {
+  height: 4rem;
+}
+
+.bg-orange-500 {
+  background-color: #f97316;
+}
+
+.h-48 {
+  height: 12rem;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.bg-slate-500\/10 {
+  background-color: rgba(100, 116, 139, 0.1);
+}
+
+.bg-black\/20 {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.border-white\/20 {
+  border-color: rgba(255, 255, 255, 0.2);
 }
 
 .btn-starlight {
@@ -220,487 +737,577 @@ button { cursor: pointer; background: transparent; padding: 0; color: inherit; f
   cursor: pointer;
 }
 
-.btn-secondary {
+.mt-20 {
+  margin-top: 5rem;
+}
+
+.pt-8 {
+  padding-top: 2rem;
+}
+
+.border-white\/10 {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.hidden {
+  display: none;
+}
+
+.block {
+  display: block;
+}
+
+.h-14 {
+  height: 3.5rem;
+}
+
+.pb-12 {
+  padding-bottom: 3rem;
+}
+
+.max-w-3xl {
+  max-width: 3xl;
+}
+
+.text-muted {
+  color: var(--text-muted);
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.checkbox-starlight {
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
   background: rgba(255, 255, 255, 0.05);
-  color: inherit;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  font-weight: 700;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 0.375rem;
+  cursor: pointer;
   transition: all 0.2s ease;
-  height: 3rem;
-  padding: 0 1.5rem;
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 0.75rem;
-  cursor: pointer;
 }
 
-.input-starlight {
-  background-color: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  color: inherit;
-  border-radius: 0.75rem;
-  padding: 0 2.5rem 0 1rem;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.4)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 9l4 4 4-4' /%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 1rem center;
-  background-size: 1rem;
-  transition: all 0.2s ease;
-  height: 3rem;
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.w-3\/4 {
+  width: 75.00%;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.w-1\/2 {
+  width: 50.00%;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.hover\:text-starlight:hover {
+  color: #00d4ff;
+}
+
+.py-2.5 {
+  padding-top: 2.5;
+  padding-bottom: 2.5;
+}
+
+.gap-1.5 {
+  gap: 1.5;
+}
+
+.h-0.5 {
+  height: 0.5;
+}
+
+.bg-starlight-deep\/98 {
+  background-color: rgba(8, 8, 26, 0.98);
+}
+
+.z-40 {
+  z-index: 40;
+}
+
+.max-w-\[1200px] {
+  max-width: 1200px;
+}
+
+.hover\:bg-starlight:hover {
+  background: linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%);
+}
+
+.py-24 {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.border-starlight {
+  border-color: #00d4ff;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
+.hover\:text-white:hover {
+  color: #ffffff;
+}
+
+.hover\:border-white:hover {
+  border-color: #ffffff;
+}
+
+.duration-500 {
+  transition-duration: 500ms;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.mb-32 {
+  margin-bottom: 8rem;
+}
+
+.p-16 {
+  padding: 4rem;
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
+.max-w-160 {
+  max-width: 160;
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
+.hover\:bg-black:hover {
+  background-color: #000000;
+}
+
+.bg-blue-50 {
+  background-color: #eff6ff;
 }
 
-.checkbox-starlight {
-  appearance: none;
-  width: 1.25rem;
-  height: 1.25rem;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 0.375rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+.w-1\/4 {
+  width: 25.00%;
 }
 
-.radio-starlight {
-  appearance: none;
-  width: 1.25rem;
-  height: 1.25rem;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 50%;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+.max-w-128 {
+  max-width: 32rem;
 }
 
-.dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(12px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 400;
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
-.dialog-content {
-  background-color: rgba(10, 10, 20, 0.98);
-  backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 1.5rem;
-  width: 90%;
-  max-width: 600px;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-  overflow: hidden;
-  position: relative;
+.text-primary {
+  color: #3b82f6;
 }
 
-.dropdown-menu {
-  background-color: rgba(15, 15, 30, 0.98);
-  backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 1rem;
-  padding: 0.5rem;
-  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
-  min-width: 200px;
-  z-index: 600;
-  margin-top: 0.5rem;
+.left-0 {
+  left: 0px;
 }
 
-.dropdown-item {
-  padding: 0.625rem 1rem;
-  color: rgba(255,255,255,0.7);
-  border-radius: 0.625rem;
-  display: block;
-  width: 100%;
-  text-align: left;
-  transition: all 0.2s;
-  cursor: pointer;
-  font-size: 0.875rem;
+.-z-10 {
+  z-index: -10;
 }
 
-.tooltip {
-  position: absolute;
-  bottom: 125%;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 0.5rem 0.75rem;
-  background-color: rgba(10, 10, 30, 0.98);
-  backdrop-filter: blur(12px);
-  border: 1px solid rgba(0, 212, 255, 0.3);
-  border-radius: 0.5rem;
-  color: #f1f5f9;
-  font-size: 0.75rem;
-  white-space: nowrap;
-  pointer-events: none;
-  opacity: 0;
-  transition: all 0.2s ease;
-  z-index: 800;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
+.h-24 {
+  height: 6rem;
 }
 
-.skeleton {
-  background-color: rgba(255, 255, 255, 0.1);
-  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
-  background-size: 200% 100%;
-  background-repeat: no-repeat;
-  border-radius: 0.5rem;
-  width: 100%;
-  height: 1rem;
+.w-8 {
+  width: 2rem;
 }
 
-.p-8 {
-  padding: 2rem;
+.h-8 {
+  height: 2rem;
 }
 
-.bg-starlight-deep {
-  background-color: #08081a;
+.hover\:text-primary:hover {
+  color: #3b82f6;
 }
 
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
+.gap-16 {
+  gap: 4rem;
 }
 
-.mb-20 {
-  margin-bottom: 5rem;
+.space-y-16 > * + * {
+  margin-top: 4rem;
 }
 
-.pt-16 {
-  padding-top: 4rem;
+.text-secondary {
+  color: #64748b;
 }
 
-.text-6xl {
-  font-size: 4.5rem;
+.pt-4 {
+  padding-top: 1rem;
 }
 
-.mb-6 {
-  margin-bottom: 1.5rem;
+.w-12 {
+  width: 3rem;
 }
 
-.text-xl {
-  font-size: 1.25rem;
+.border-primary\/30 {
+  border-color: rgba(59, 130, 246, 0.3);
 }
 
-.text-gray-400 {
-  color: #9ca3af;
+.p-1 {
+  padding: 0.25rem;
 }
 
-.mb-10 {
-  margin-bottom: 2.5rem;
+.bg-black\/40 {
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
-.gap-6 {
-  gap: 1.5rem;
+.max-w-none {
+  max-width: none;
 }
 
-.text-black {
-  color: #000000;
+.space-y-10 > * + * {
+  margin-top: 2.5rem;
 }
 
-.px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
+.w-2 {
+  width: 0.5rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+.h-10 {
+  height: 2.5rem;
 }
 
-.hover\:bg-white:hover {
-  background-color: #ffffff;
+.border-l-4 {
+  border-left-width: 4px;
 }
 
-.text-white {
-  color: #ffffff;
+.border-primary {
+  border-color: #3b82f6;
 }
 
-.text-sm {
-  font-size: 0.875rem;
+.bg-primary\/5 {
+  background-color: rgba(59, 130, 246, 0.05);
 }
 
-.grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+.bg-white\/5 {
+  background-color: rgba(255, 255, 255, 0.05);
 }
 
-.gap-10 {
-  gap: 2.5rem;
+.mt-12 {
+  margin-top: 3rem;
 }
 
-.p-10 {
-  padding: 2.5rem;
+.mr-2 {
+  margin-right: 0.5rem;
 }
 
-.rounded-2xl {
-  border-radius: 0.25rem;
+.hover\:bg-white\/10:hover {
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
-.text-2xl {
-  font-size: 1.5rem;
+.border-white\/5 {
+  border-color: rgba(255, 255, 255, 0.05);
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
+.hover\:bg-white\/5:hover {
+  background-color: rgba(255, 255, 255, 0.05);
 }
 
-.bg-white {
-  background-color: #ffffff;
+.group:hover .group-hover\:text-primary {
+  color: #3b82f6;
 }
 
-.p-4 {
-  padding: 1rem;
+.backdrop-blur-md {
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
 }
 
-.border-white {
-  border-color: #ffffff;
+.space-x-12 > * + * {
+  margin-left: 3rem;
 }
 
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
 }
 
-.p-12 {
-  padding: 3rem;
+.py-1.5 {
+  padding-top: 1.5;
+  padding-bottom: 1.5;
 }
 
-.rounded-3xl {
-  border-radius: 0.375rem;
+.rounded-\[2.5rem] {
+  border-radius: 2.5rem;
 }
 
-.text-4xl {
-  font-size: 2.5rem;
+.max-w-5xl {
+  max-width: 5xl;
 }
 
-.text-lg {
-  font-size: 1.125rem;
+.flex-1 {
+  flex: 1 1 0%;
 }
 
-.gap-4 {
-  gap: 1rem;
+.mb-3 {
+  margin-bottom: 0.75rem;
 }
 
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
+.bg-transparent {
+  background-color: transparent;
 }
 
-.hover\:scale-105:hover {
-  transform: scale(1.05);
+.placeholder\:text-white\/10:placeholder {
+  color: rgba(255, 255, 255, 0.1);
 }
 
-.mt-32 {
-  margin-top: 8rem;
+.border-l {
+  border-left-width: undefinedpx;
 }
 
-.pt-10 {
-  padding-top: 2.5rem;
+.px-16 {
+  padding-left: 4rem;
+  padding-right: 4rem;
 }
 
-.text-gray-500 {
-  color: #6b7280;
+.h-auto {
+  height: auto;
 }
 
-.mb-2 {
-  margin-bottom: 0.5rem;
+.hover\:glow-blue:hover {
+  box-shadow: 0 0 30px rgba(0, 212, 255, 0.25);
 }
 
-.mb-8 {
-  margin-bottom: 2rem;
+.text-orange-600 {
+  color: #ea580c;
 }
 
-.text-xs {
-  font-size: 0.75rem;
+.transition-all {
+  transition-property: all;
 }
 
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
+.h-80 {
+  height: 80;
 }
 
-.pt-20 {
-  padding-top: 5rem;
+.group:hover .group-hover\:scale-110 {
+  transform: scale(1.1);
 }
 
-.pb-12 {
-  padding-bottom: 3rem;
+.duration-700 {
+  transition-duration: 700ms;
 }
 
-.pb-20 {
-  padding-bottom: 5rem;
+.z-10 {
+  z-index: 10;
 }
 
-.grid-3 {
-  display: grid;
+.bottom-8 {
+  bottom: 2rem;
 }
 
-.gap-3 {
-  gap: 0.75rem;
+.left-8 {
+  left: 2rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
+.z-20 {
+  z-index: 20;
 }
 
-.w-3\/4 {
-  width: 75.00%;
+.bg-blue-600\/20 {
+  background-color: rgba(37, 99, 235, 0.2);
 }
 
-.h-6 {
-  height: 1.5rem;
+.ml-2 {
+  margin-left: 0.5rem;
 }
 
-.h-12 {
-  height: 3rem;
+.hover\:text-black:hover {
+  color: #000000;
 }
 
-.w-1\/2 {
-  width: 50.00%;
+.bg-orange-600\/20 {
+  background-color: rgba(234, 88, 12, 0.2);
 }
 
-.h-4 {
-  height: 1rem;
+.rounded-\[3rem] {
+  border-radius: 3rem;
 }
 
-.bg-gray-50 {
-  background-color: #f9fafb;
+.max-w-xl {
+  max-width: xl;
 }
 
-.text-gray-900 {
-  color: #111827;
+.placeholder\:text-white\/20:placeholder {
+  color: rgba(255, 255, 255, 0.2);
 }
 
-.mb-16 {
-  margin-bottom: 4rem;
+.space-x-6 > * + * {
+  margin-left: 1.5rem;
 }
 
-.border-gray-200 {
-  border-color: #e5e7eb;
+.bg-white\/80 {
+  background-color: rgba(255, 255, 255, 0.8);
 }
 
-.pb-8 {
-  padding-bottom: 2rem;
+.max-w-\[1440px] {
+  max-width: 1440px;
 }
 
-.text-5xl {
-  font-size: 3.5rem;
+.text-slate-900 {
+  color: #0f172a;
 }
 
-.bg-blue-600 {
-  background-color: #2563eb;
+.hover\:text-orange-600:hover {
+  color: #ea580c;
 }
 
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+.hover\:bg-slate-200:hover {
+  background-color: #e2e8f0;
 }
 
-.text-blue-600 {
-  color: #2563eb;
+.right-0 {
+  right: 0px;
 }
 
-.text-gray-700 {
-  color: #374151;
+.bg-orange-600 {
+  background-color: #ea580c;
 }
 
-.text-base {
-  font-size: 1rem;
+.min-w-56 {
+  min-width: 56;
 }
 
-.text-gray-600 {
-  color: #4b5563;
+.flex-shrink-0 {
+  flex-shrink: 0;
 }
 
-.shadow-md {
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+.space-x-4 > * + * {
+  margin-left: 1rem;
 }
 
-.bg-gray-800 {
-  background-color: #1f2937;
+.group:hover .group-hover\:text-slate-900 {
+  color: #0f172a;
 }
 
-.hover\:bg-black:hover {
-  background-color: #000000;
+.w-10 {
+  width: 2.5rem;
 }
 
-.border-gray-300 {
-  border-color: #d1d5db;
+.hover\:scale-110:hover {
+  transform: scale(1.1);
 }
 
-.hover\:bg-gray-100:hover {
-  background-color: #f3f4f6;
+.min-w-0 {
+  min-width: 0;
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
+.gap-x-8 {
+  column-gap: 2rem;
 }
 
-.shadow-sm {
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+.gap-y-16 {
+  row-gap: 4rem;
 }
 
-.border-gray-100 {
-  border-color: #f3f4f6;
+.aspect-\[3\/4] {
+  aspect-ratio: 3 / 4;
+  width: 100%;
+  height: auto;
 }
 
-.mt-8 {
-  margin-top: 2rem;
+.top-4 {
+  top: 1rem;
 }
 
-.bg-blue-50 {
-  background-color: #eff6ff;
+.left-4 {
+  left: 1rem;
 }
 
-.w-1\/4 {
-  width: 25.00%;
+.space-y-2 > * + * {
+  margin-top: 0.5rem;
 }
 
-.gap-12 {
-  gap: 3rem;
+.bottom-4 {
+  bottom: 1rem;
 }
 
-.shadow-xl {
-  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+.duration-300 {
+  transition-duration: 300ms;
 }
 
-.bg-gray-900 {
-  background-color: #111827;
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 
-.border-gray-700 {
-  border-color: #374151;
+.bg-slate-900\/80 {
+  background-color: rgba(15, 23, 42, 0.8);
 }
 
-.text-gray-300 {
-  color: #d1d5db;
+.hover\:border-slate-900:hover {
+  border-color: #0f172a;
 }
 
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
+.text-slate-200 {
+  color: #e2e8f0;
 }
 
-.focus\:border-blue-600:focus {
-  border-color: #2563eb;
+.bg-slate-950 {
+  background-color: #020617;
 }
 
-.pt-8 {
-  padding-top: 2rem;
+.placeholder\:text-slate-600:placeholder {
+  color: #475569;
+}
+
+@media (min-width: 640px) {
+  .sm\:flex-row {
+    flex-direction: row;
+  }
 }
 
 @media (min-width: 768px) {
+  .md\:btn-primary {
+    background-color: #2563eb;
+    color: #ffffff;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-radius: 0.5rem;
+  }
+  
+  .md\:btn-primary:hover {
+    background-color: #1d4ed8;
+  }
+  
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -713,21 +1320,106 @@ button { cursor: pointer; background: transparent; padding: 0; color: inherit; f
     width: 80;
   }
   
+  .md\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  
+  .md\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  
+  .md\:flex {
+    display: flex;
+  }
+  
+  .md\:hidden {
+    display: none;
+  }
+  
+  .md\:w-96 {
+    width: 96;
+  }
+  
+  .md\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  
   .md\:text-5xl {
-    font-size: 3.5rem;
+    font-size: 3rem;
+    line-height: 1.2;
   }
   
   .md\:text-lg {
     font-size: 1.125rem;
+    line-height: 1.5;
   }
   
   .md\:w-1\/2 {
     width: 50.00%;
   }
+  
+  .md\:block {
+    display: block;
+  }
+  
+  .md\:h-full {
+    height: 100%;
+  }
 }
 
 @media (min-width: 1024px) {
+  .lg\:grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  
+  .lg\:col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  
+  .lg\:col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  
+  .lg\:flex {
+    display: flex;
+  }
+  
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+  
+  .lg\:w-64 {
+    width: 16rem;
+  }
+  
+  .lg\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .card-premium {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
 }