/* ============================================================
   BizPortal — Tailwind-syntax utility layer (dependency-free)
   ------------------------------------------------------------
   Real Tailwind needs Node/npm to compile. Since this server has
   no Node and we don't want a runtime CDN <script> (bad for
   perf/SEO — Google flags it as "not production ready" and it
   causes flash-of-unstyled-content), this file hand-implements
   the actual Tailwind utility classes/spec used across the site.
   Same class names, same spacing/color scale — just pre-compiled
   into a plain static CSS file. Upload it like any other CSS.

   ADDITIVE ONLY: nothing in style.css / enhance.css / dashboard.css
   is removed or overridden. This is a new layer for new markup.
   Brand colors are pulled from the site's existing CSS variables
   (see style.css :root) so everything stays on-brand.
   ============================================================ */

*, ::before, ::after { box-sizing: border-box; }

/* ---------- Container ---------- */
.container-tw { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px)  { .container-tw { max-width: 640px; } }
@media (min-width: 768px)  { .container-tw { max-width: 768px; } }
@media (min-width: 1024px) { .container-tw { max-width: 1100px; padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1280px) { .container-tw { max-width: 1280px; } }

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

/* ---------- Flex / Grid ---------- */
.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}
.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}
.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-around{justify-content:space-around}
.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}

/* ---------- Spacing (padding / margin) — Tailwind's 0.25rem scale ---------- */
:root{--sp-0:0;--sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.25rem;--sp-6:1.5rem;--sp-8:2rem;--sp-10:2.5rem;--sp-12:3rem;--sp-14:3.5rem;--sp-16:4rem;--sp-20:5rem;--sp-24:6rem;--sp-32:8rem;}
.p-0{padding:var(--sp-0)}.p-1{padding:var(--sp-1)}.p-2{padding:var(--sp-2)}.p-3{padding:var(--sp-3)}.p-4{padding:var(--sp-4)}.p-5{padding:var(--sp-5)}.p-6{padding:var(--sp-6)}.p-8{padding:var(--sp-8)}.p-10{padding:var(--sp-10)}.p-12{padding:var(--sp-12)}
.px-1{padding-left:var(--sp-1);padding-right:var(--sp-1)}.px-2{padding-left:var(--sp-2);padding-right:var(--sp-2)}.px-3{padding-left:var(--sp-3);padding-right:var(--sp-3)}.px-4{padding-left:var(--sp-4);padding-right:var(--sp-4)}.px-5{padding-left:var(--sp-5);padding-right:var(--sp-5)}.px-6{padding-left:var(--sp-6);padding-right:var(--sp-6)}.px-8{padding-left:var(--sp-8);padding-right:var(--sp-8)}
.py-1{padding-top:var(--sp-1);padding-bottom:var(--sp-1)}.py-2{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}.py-3{padding-top:var(--sp-3);padding-bottom:var(--sp-3)}.py-4{padding-top:var(--sp-4);padding-bottom:var(--sp-4)}.py-5{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}.py-6{padding-top:var(--sp-6);padding-bottom:var(--sp-6)}.py-8{padding-top:var(--sp-8);padding-bottom:var(--sp-8)}.py-10{padding-top:var(--sp-10);padding-bottom:var(--sp-10)}.py-12{padding-top:var(--sp-12);padding-bottom:var(--sp-12)}.py-16{padding-top:var(--sp-16);padding-bottom:var(--sp-16)}.py-20{padding-top:var(--sp-20);padding-bottom:var(--sp-20)}
.pt-2{padding-top:var(--sp-2)}.pt-4{padding-top:var(--sp-4)}.pt-6{padding-top:var(--sp-6)}.pt-8{padding-top:var(--sp-8)}.pb-2{padding-bottom:var(--sp-2)}.pb-4{padding-bottom:var(--sp-4)}.pb-6{padding-bottom:var(--sp-6)}.pb-8{padding-bottom:var(--sp-8)}
.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}
.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}.mt-8{margin-top:var(--sp-8)}.mt-10{margin-top:var(--sp-10)}
.mb-1{margin-bottom:var(--sp-1)}.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}.mb-8{margin-bottom:var(--sp-8)}

/* ---------- Sizing ---------- */
.w-full{width:100%}.w-auto{width:auto}.h-full{height:100%}.min-h-screen{min-height:100vh}
.max-w-xs{max-width:20rem}.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}

/* ---------- Typography ---------- */
.text-xs{font-size:.75rem;line-height:1.1rem}.text-sm{font-size:.875rem;line-height:1.3rem}.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.65rem}.text-xl{font-size:1.25rem;line-height:1.7rem}.text-2xl{font-size:1.5rem;line-height:1.9rem}
.text-3xl{font-size:1.875rem;line-height:2.2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1.1}.text-6xl{font-size:3.75rem;line-height:1.05}
.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.italic{font-style:italic}.leading-tight{line-height:1.2}.leading-snug{line-height:1.35}.leading-relaxed{line-height:1.65}
.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}
.tracking-tight{letter-spacing:-0.02em}.tracking-wide{letter-spacing:.02em}.uppercase{text-transform:uppercase}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.font-display{font-family:var(--font-display)}.font-body{font-family:var(--font-body)}

/* ---------- Brand color utilities (mapped to existing :root vars) ---------- */
.bg-navy{background-color:var(--navy-950)}.bg-navy-800{background-color:var(--navy-800)}.bg-teal{background-color:var(--teal-500)}.bg-teal-600{background-color:var(--teal-600)}
.bg-amber{background-color:var(--amber-500)}.bg-paper{background-color:var(--paper)}.bg-paper-dim{background-color:var(--paper-dim)}.bg-white{background-color:#fff}.bg-transparent{background-color:transparent}
.text-navy{color:var(--navy-950)}.text-ink{color:var(--ink)}.text-ink-soft{color:var(--ink-soft)}.text-teal{color:var(--teal-600)}.text-amber{color:var(--amber-600)}.text-white{color:#fff}
.text-white\/70{color:rgba(255,255,255,.7)}.text-white\/80{color:rgba(255,255,255,.85)}
.border-line{border-color:var(--line)}

.bg-gradient-hero{background:radial-gradient(120% 140% at 15% 0%, var(--navy-800) 0%, var(--navy-950) 55%, #0a1420 100%);}
.bg-gradient-teal{background:linear-gradient(135deg, var(--teal-500), var(--teal-600));}
.bg-gradient-amber{background:linear-gradient(135deg, var(--amber-500), var(--amber-600));}

/* ---------- Borders / Radius / Shadow ---------- */
.border{border:1px solid var(--line)}.border-0{border:0}.border-t{border-top:1px solid var(--line)}.border-b{border-bottom:1px solid var(--line)}
.rounded-md{border-radius:.5rem}.rounded-lg{border-radius:.75rem}.rounded-xl{border-radius:1rem}.rounded-2xl{border-radius:1.25rem}.rounded-3xl{border-radius:1.75rem}.rounded-full{border-radius:9999px}
.shadow-sm{box-shadow:0 1px 3px rgba(15,27,45,.08)}.shadow-md{box-shadow:0 6px 20px rgba(15,27,45,.10)}.shadow-lg{box-shadow:0 14px 34px rgba(15,27,45,.16)}.shadow-xl{box-shadow:0 24px 54px rgba(15,27,45,.22)}
.shadow-glow-teal{box-shadow:0 10px 30px rgba(42,157,143,.35)}

/* ---------- Position / z-index / overflow ---------- */
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{top:0;right:0;bottom:0;left:0}.top-0{top:0}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}
.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}

/* ---------- Effects / transitions ---------- */
.transition{transition:all .2s ease}.transition-transform{transition:transform .2s ease}.transition-colors{transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.duration-300{transition-duration:.3s}
.hover\:-translate-y-1:hover{transform:translateY(-4px)}
.hover\:scale-105:hover{transform:scale(1.05)}
.hover\:shadow-xl:hover{box-shadow:0 24px 54px rgba(15,27,45,.22)}
.active\:scale-95:active{transform:scale(.95)}
.backdrop-blur{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ---------- Aspect ratio (for image/card consistency) ---------- */
.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.object-cover{object-fit:cover}

/* ---------- Components: buttons ---------- */
.btn-tw{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-family:var(--font-body);
  padding:.7rem 1.35rem;border-radius:.7rem;font-size:.95rem;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;border:1px solid transparent;cursor:pointer;text-decoration:none;}
.btn-tw:active{transform:scale(.96)}
.btn-tw-primary{background:var(--teal-500);color:#fff;box-shadow:0 8px 22px rgba(42,157,143,.30)}
.btn-tw-primary:hover{background:var(--teal-600);color:#fff}
.btn-tw-amber{background:var(--amber-500);color:var(--navy-950);box-shadow:0 8px 22px rgba(244,162,97,.30)}
.btn-tw-amber:hover{background:var(--amber-600)}
.btn-tw-outline{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.35);color:#fff}
.btn-tw-outline:hover{background:rgba(255,255,255,.14);color:#fff}
.btn-tw-ghost{background:#fff;border-color:var(--line);color:var(--navy-950)}
.btn-tw-ghost:hover{border-color:var(--teal-500);color:var(--teal-600)}
.btn-tw-lg{padding:.9rem 1.75rem;font-size:1.02rem;border-radius:.85rem}
.btn-tw-block{width:100%}

/* ---------- Components: cards (mobile-app style) ---------- */
.card-tw{background:#fff;border:1px solid var(--line);border-radius:1.1rem;padding:1.25rem;transition:transform .2s ease,box-shadow .2s ease;}
.card-tw:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(15,27,45,.12)}
.card-tw-flat{background:#fff;border:1px solid var(--line);border-radius:1.1rem;}
.chip-tw{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;padding:.35rem .75rem;border-radius:9999px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);}
.chip-tw-light{background:var(--paper-dim);color:var(--navy-950);border:1px solid var(--line);}

/* ---------- Responsive helpers (mobile-first; matches Tailwind breakpoints) ---------- */
@media (min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:flex-row{flex-direction:row}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .sm\:hidden{display:none}.sm\:block{display:block}.sm\:flex{display:flex}
}
@media (min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .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\:flex-row{flex-direction:row}
  .md\:text-5xl{font-size:3rem;line-height:1.1}
  .md\:hidden{display:none}.md\:block{display:block}.md\:flex{display:flex}
  .md\:p-8{padding:var(--sp-8)}.md\:py-20{padding-top:var(--sp-20);padding-bottom:var(--sp-20)}
}
@media (min-width:1024px){
  .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\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lg\:text-6xl{font-size:3.75rem;line-height:1.05}
  .lg\:hidden{display:none}.lg\:block{display:block}.lg\:flex{display:flex}
  .lg\:py-24{padding-top:var(--sp-24);padding-bottom:var(--sp-24)}
}

/* ---------- Mobile-app polish (this is the part that makes it FEEL like an app) ---------- */
/* Safe-area padding so content clears the iPhone home-indicator / notch */
.safe-bottom{padding-bottom:calc(env(safe-area-inset-bottom, 0) + var(--sp-2));}
.safe-top{padding-top:env(safe-area-inset-top, 0);}
/* Tap targets: 44px is Apple/Google's minimum recommended hit area */
.tap-target{min-height:44px;min-width:44px;}
/* Momentum scrolling for horizontal chip/card rails on iOS */
.snap-x{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.snap-start{scroll-snap-align:start;}
/* Hide scrollbar on horizontal rails but keep them scrollable (app-like) */
.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none;}
.no-scrollbar::-webkit-scrollbar{display:none;}

@media (prefers-reduced-motion: reduce){
  .transition,.transition-transform,.transition-colors,.card-tw,.btn-tw{transition:none!important}
  .hover\:-translate-y-1:hover,.hover\:scale-105:hover{transform:none!important}
}