/* SuperVitrin MVP UI polish (no build step) */
:root{
  --sv-ring: 0 0 0 4px rgba(249,115,22,.18);
  --sv-ease: cubic-bezier(.2,.9,.2,1);
}

/* Page background */
body{
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(249,115,22,.10), transparent 55%),
    radial-gradient(900px 500px at 95% 5%, rgba(56,189,248,.10), transparent 50%),
    radial-gradient(900px 600px at 30% 110%, rgba(99,102,241,.10), transparent 50%),
    #f8fafc;
}

/* Glass + header */
.sv-glass{ backdrop-filter: blur(10px); }
#svHeader{
  transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
#svHeader.sv-scrolled{
  box-shadow: 0 10px 30px rgba(15,23,42,.10);
  border-color: rgba(148,163,184,.35);
  background-color: rgba(255,255,255,.92);
}

/* Cards + buttons */
.sv-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  will-change: transform;
}
.sv-card:hover{ transform: translateY(-3px); }
.sv-shadow-soft{ box-shadow: 0 10px 30px rgba(15,23,42,.08); }

.sv-btn{ transition: transform .08s ease, box-shadow .15s ease, filter .15s ease; }
.sv-btn:hover{ filter: brightness(1.02); }
.sv-btn:active{ transform: translateY(1px); }

/* Primary buttons pop a bit more */
.bg-orange-600.sv-btn,
.sv-btn.bg-orange-600{
  background-image: linear-gradient(135deg, rgba(234,88,12,1), rgba(249,115,22,1));
}
.bg-orange-600.sv-btn:hover,
.sv-btn.bg-orange-600:hover{
  filter: brightness(1.06);
  box-shadow: 0 12px 26px rgba(234,88,12,.18);
}

.sv-focus:focus{ outline: none; box-shadow: var(--sv-ring); }

.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
[x-cloak]{display:none !important;}

/* Hero blobs */
.sv-blob{
  animation: svFloat 10s ease-in-out infinite;
  transform-origin: center;
}

/* Tiny pulse on brand mark */
.sv-logo-pulse{
  position: relative;
}
.sv-logo-pulse::after{
  content:"";
  position:absolute; inset:-8px;
  border-radius: 1rem;
  background: radial-gradient(closest-side, rgba(249,115,22,.22), transparent 70%);
  opacity: .55;
  transform: scale(.92);
  animation: svPulse 3.5s var(--sv-ease) infinite;
  pointer-events:none;
}
@keyframes svPulse{
  0%,100%{ opacity:.38; transform: scale(.92); }
  50%{ opacity:.62; transform: scale(1.03); }
}
.sv-blob.sv-blob-2{ animation-duration: 13s; }
.sv-blob.sv-blob-3{ animation-duration: 16s; }
@keyframes svFloat{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(10px,-12px,0) scale(1.04); }
}

/* Reveal on scroll */
.sv-reveal{
  opacity: 0;
  transform: translate3d(0,10px,0);
  transition: opacity .45s ease, transform .45s ease;
}
.sv-reveal.is-visible{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* Image loading shimmer */
.sv-img-wrap{ position: relative; overflow: hidden; }
.sv-img-wrap::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(110deg, rgba(148,163,184,.15) 8%, rgba(148,163,184,.30) 18%, rgba(148,163,184,.15) 33%);
  background-size: 200% 100%;
  animation: svShimmer 1.2s linear infinite;
}
.sv-img-wrap.is-loaded::before{ display:none; }
@keyframes svShimmer{
  to{ background-position-x: -200%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .sv-card, #svHeader, .sv-reveal{ transition: none !important; }
  .sv-blob{ animation: none !important; }
  .sv-img-wrap::before{ animation: none !important; }
  .sv-logo-pulse::after{ animation: none !important; }
}

/* Page enter */
.sv-page{ opacity: 0; transform: translate3d(0,6px,0); }
.sv-page.is-ready{ opacity: 1; transform: translate3d(0,0,0); transition: opacity .35s ease, transform .35s ease; }

/* Scroll progress */
.sv-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 60;
  background: linear-gradient(90deg, rgba(249,115,22,1), rgba(56,189,248,1), rgba(99,102,241,1));
  box-shadow: 0 6px 18px rgba(15,23,42,.18);
  transform-origin: 0 50%;
  opacity: .95;
}

/* Mobile menu animation */
[data-sv-menu-backdrop]{
  opacity: 0;
  transition: opacity .18s var(--sv-ease);
}
[data-sv-menu-backdrop].sv-open{ opacity: 1; }
[data-sv-menu-backdrop] > div{
  transform: translate3d(18px,0,0);
  transition: transform .22s var(--sv-ease);
}
[data-sv-menu-backdrop].sv-open > div{ transform: translate3d(0,0,0); }

/* Slightly nicer scrollbar on supporting browsers */
@supports (scrollbar-width: thin){
  *{ scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.55) transparent; }
}

/* Card shine */
.sv-shine{
  background: radial-gradient(800px 200px at 20% 10%, rgba(255,255,255,.20), transparent 55%);
  mix-blend-mode: screen;
  transition: opacity .25s ease;
}

/* Subtle moving background (very light) */
body{
  background-size: 140% 140%;
  animation: svBgShift 18s ease-in-out infinite;
}
@keyframes svBgShift{
  0%,100%{ background-position: 0% 0%; }
  50%{ background-position: 100% 20%; }
}
@media (prefers-reduced-motion: reduce){
  body{ animation: none !important; }
}


/* prevent background scroll when mobile menu open */
.sv-no-scroll{overflow:hidden !important;}

/* --- Tailwind-lite utilities (local, build-free) --- */
html.scroll-smooth{ scroll-behavior:smooth; }
.font-sans{ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
.font-medium{ font-weight:500; }
.font-semibold{ font-weight:600; }
.font-bold{ font-weight:700; }
.font-extrabold{ font-weight:800; }
.tracking-tight{ letter-spacing:-.02em; }
.leading-snug{ line-height:1.35; }
.leading-relaxed{ line-height:1.6; }

.block{ display:block; } .inline{ display:inline; } .inline-flex{ display:inline-flex; }
.hidden{ display:none; } .flex{ display:flex; } .grid{ display:grid; }
.flex-1{ flex:1 1 0%; } .flex-col{ flex-direction:column; } .flex-wrap{ flex-wrap:wrap; }
.items-center{ align-items:center; } .items-start{ align-items:flex-start; } .items-end{ align-items:flex-end; }
.justify-between{ justify-content:space-between; } .justify-center{ justify-content:center; }
.pointer-events-none{ pointer-events:none; }
.overflow-hidden{ overflow:hidden; }
.whitespace-pre-wrap{ white-space:pre-wrap; }
.object-cover{ object-fit:cover; }

.relative{ position:relative; } .absolute{ position:absolute; } .fixed{ position:fixed; } .sticky{ position:sticky; }
.inset-0{ inset:0; } .top-0{ top:0; } .top-3{ top:.75rem; } .left-3{ left:.75rem; } .right-0{ right:0; }
.-top-24{ top:-6rem; } .-right-24{ right:-6rem; } .-bottom-24{ bottom:-6rem; } .-left-24{ left:-6rem; }
.z-40{ z-index:40; } .z-50{ z-index:50; }

.w-full{ width:100%; } .w-2{ width:.5rem; } .w-9{ width:2.25rem; } .w-64{ width:16rem; } .w-80{ width:20rem; }
.h-full{ height:100%; } .h-2{ height:.5rem; } .h-9{ height:2.25rem; } .h-40{ height:10rem; } .h-44{ height:11rem; } .h-64{ height:16rem; }

.max-w-6xl{ max-width:72rem; } .max-w-3xl{ max-width:48rem; } .max-w-md{ max-width:28rem; } .max-w-lg{ max-width:32rem; }
.max-w-\[85\%\]{ max-width:85%; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.ml-auto{ margin-left:auto; } .ml-2{ margin-left:.5rem; }
.mt-1{ margin-top:.25rem; } .mt-2{ margin-top:.5rem; } .mt-3{ margin-top:.75rem; } .mt-4{ margin-top:1rem; }
.mt-5{ margin-top:1.25rem; } .mt-6{ margin-top:1.5rem; } .mt-8{ margin-top:2rem; } .mt-10{ margin-top:2.5rem; }
.mb-2{ margin-bottom:.5rem; } .mb-3{ margin-bottom:.75rem; } .mb-4{ margin-bottom:1rem; } .mb-5{ margin-bottom:1.25rem; }

.p-3{ padding:.75rem; } .p-4{ padding:1rem; } .p-5{ padding:1.25rem; } .p-6{ padding:1.5rem; }
.px-2{ padding-left:.5rem; padding-right:.5rem; } .px-3{ padding-left:.75rem; padding-right:.75rem; }
.px-4{ padding-left:1rem; padding-right:1rem; } .px-5{ padding-left:1.25rem; padding-right:1.25rem; }
.py-1{ padding-top:.25rem; padding-bottom:.25rem; }
.py-1\.5{ padding-top:.375rem; padding-bottom:.375rem; }
.py-2{ padding-top:.5rem; padding-bottom:.5rem; } .py-3{ padding-top:.75rem; padding-bottom:.75rem; }
.py-6{ padding-top:1.5rem; padding-bottom:1.5rem; } .py-8{ padding-top:2rem; padding-bottom:2rem; }
.pt-4{ padding-top:1rem; }

.gap-1{ gap:.25rem; } .gap-2{ gap:.5rem; } .gap-3{ gap:.75rem; } .gap-4{ gap:1rem; }
.grid-cols-1{ grid-template-columns:repeat(1,minmax(0,1fr)); }
.grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.col-span-2{ grid-column:span 2 / span 2; }

.rounded{ border-radius:.25rem; } .rounded-xl{ border-radius:.75rem; } .rounded-2xl{ border-radius:1rem; }
.rounded-3xl{ border-radius:1.5rem; } .rounded-full{ border-radius:9999px; }

.border{ border:1px solid rgba(148,163,184,.35); }
.border-b{ border-bottom:1px solid rgba(148,163,184,.35); }
.border-t{ border-top:1px solid rgba(148,163,184,.35); }
.border-emerald-200{ border-color: rgba(167,243,208,.9); }
.border-red-200{ border-color: rgba(254,202,202,.9); }

.bg-transparent{ background:transparent; }
.bg-white{ background:#fff; }
.bg-white\/80{ background: rgba(255,255,255,.80); }
.bg-white\/90{ background: rgba(255,255,255,.90); }
.bg-slate-50{ background:#f8fafc; }
.bg-slate-900{ background:#0f172a; }
.bg-slate-900\/40{ background: rgba(15,23,42,.40); }
.bg-sky-200{ background:#bae6fd; }
.bg-emerald-50{ background:#ecfdf5; }
.bg-emerald-600{ background:#059669; }
.bg-red-50{ background:#fef2f2; }
.bg-red-600{ background:#dc2626; }
.bg-brand-200{ background:#a7f3d0; }
.bg-brand-500{ background:#10b981; }
.bg-orange-600{ background:#059669; }

.text-left{ text-align:left; } .text-center{ text-align:center; }
.text-xs{ font-size:.75rem; line-height:1rem; }
.text-sm{ font-size:.875rem; line-height:1.25rem; }
.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-white{ color:#fff; }
.text-white\/70{ color: rgba(255,255,255,.70); }
.text-slate-400{ color:#94a3b8; }
.text-slate-500{ color:#64748b; }
.text-slate-600{ color:#475569; }
.text-slate-700{ color:#334155; }
.text-slate-800{ color:#1f2937; }
.text-slate-900{ color:#0f172a; }
.text-emerald-700{ color:#047857; }
.text-emerald-800{ color:#065f46; }
.text-red-700{ color:#b91c1c; }
.text-red-800{ color:#991b1b; }
.text-amber-700{ color:#b45309; }

.opacity-0{ opacity:0; } .opacity-60{ opacity:.6; } .opacity-70{ opacity:.7; }
.blur-3xl{ filter: blur(64px); }

.underline{ text-decoration:underline; }

.transition-transform{ transition: transform .18s ease; }
.duration-300{ transition-duration:.3s; }
.hover\:shadow:hover{ box-shadow: 0 8px 18px rgba(15,23,42,.12); }
.hover\:shadow-lg:hover{ box-shadow: 0 14px 34px rgba(15,23,42,.16); }
.hover\:bg-slate-50:hover{ background:#f8fafc; }
.hover\:bg-slate-100:hover{ background:#f1f5f9; }
.hover\:bg-red-100:hover{ background:#fee2e2; }
.hover\:border-slate-200:hover{ border-color: rgba(148,163,184,.55); }

.group:hover .group-hover\:opacity-100{ opacity:1; }
.group:hover .group-hover\:scale-\[1\.03\]{ transform: scale(1.03); }

/* Responsive (lite) */
@media (min-width: 640px){
  .sm\:inline{ display:inline; }
  .sm\:flex-row{ flex-direction:row; }
  .sm\:items-center{ align-items:center; }
  .sm\:justify-between{ justify-content:space-between; }
  .sm\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sm\:p-8{ padding:2rem; }
  .sm\:p-10{ padding:2.5rem; }
  .sm\:text-4xl{ font-size:2.25rem; line-height:2.5rem; }
  .sm\:h-80{ height:20rem; }
}
@media (min-width: 768px){
  .md\:flex{ display:flex; }
  .md\:hidden{ display:none; }
  .md\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1024px){
  .lg\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lg\:grid-cols-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .lg\:col-span-2{ grid-column: span 2 / span 2; }
  .lg\:col-span-3{ grid-column: span 3 / span 3; }
}


/* Pagination */
.sv-pg-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px;
  padding:0 14px;
  border-radius:9999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  font-weight:800;
  color:#0f172a;
  box-shadow:0 1px 0 rgba(15,23,42,.04);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sv-pg-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(15,23,42,.10); border-color:rgba(15,23,42,.18); }
.sv-pg-active{ background:rgba(234,88,12,.12); border-color:rgba(234,88,12,.35); color:rgb(234,88,12); }
.sv-pg-disabled{ opacity:.45; pointer-events:none; }