:root{
  /* Modern dark palette, guaranteed readable */
  --bg: #0b0f19;
  --bg-2: #0f172a;

  --card: rgba(255,255,255,.08);
  --card-strong: rgba(255,255,255,.10);

  --text: rgba(255,255,255,.94);
  --text-strong: #ffffff;
  --muted: rgba(255,255,255,.74);

  --border: rgba(255,255,255,.14);
  --border-strong: rgba(255,255,255,.20);

  --shadow: 0 18px 46px rgba(0,0,0,.38);

  --accent: #7c3aed;
  --accent-2: #06b6d4;
  --accent-3: #22c55e;

  --hero-border: rgba(255,255,255,.16);

  --glass: rgba(255,255,255,.10);
  --glass-strong: rgba(255,255,255,.14);
  --glass-border: rgba(255,255,255,.18);

  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;

  --focus: 0 0 0 3px rgba(124,58,237,.30);

  /* Responsive spacing + type */
  --container-pad: 16px;
  --section-gap: 18px;
  --hero-pad: 22px;

  --h1: clamp(1.8rem, 2.8vw, 3rem);
  --h2: clamp(1.35rem, 2.2vw, 2.1rem);
  --h3: clamp(1.15rem, 1.8vw, 1.55rem);
  --p: clamp(.98rem, 1.35vw, 1.05rem);

  /* Smooth */
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* Base */
html, body{ height: 100%; }
html{ scroll-behavior: smooth; }
body{
  color: var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Better container spacing on mobile */
.container{
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Animated blobs */
body::before{
  content:"";
  position: fixed;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(124,58,237,.20), transparent 60%),
    radial-gradient(820px 520px at 90% 12%, rgba(6,182,212,.16), transparent 60%),
    radial-gradient(900px 520px at 70% 90%, rgba(34,197,94,.14), transparent 60%);
  filter: blur(10px);
  animation: bgFloat 16s ease-in-out infinite alternate;
}

/* Subtle grid */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .10;
  pointer-events: none;
}

@keyframes bgFloat{
  0%{ transform: translate3d(-1%, -1%, 0) scale(1); }
  100%{ transform: translate3d(1.5%, 1.2%, 0) scale(1.03); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  body::before{ animation: none; }
  *{ transition: none !important; }
}

/* Ensure ALL text stays readable across pages */
h1, h2, h3, h4, h5, h6{
  color: var(--text-strong) !important;
}
p, li, span, label, small, div{
  color: inherit;
}
.text-dark{
  color: var(--text-strong) !important;
}
.text-muted{
  color: var(--muted) !important;
}
.small-muted,
.small.text-muted{
  color: var(--muted) !important;
}

/* Scale headings and paragraph to be responsive */
h1{ font-size: var(--h1) !important; }
h2{ font-size: var(--h2) !important; }
h3{ font-size: var(--h3) !important; }
p{ font-size: var(--p) !important; }

/* Links */
a{
  color: rgba(255,255,255,.92);
}
a:hover{
  color: var(--text-strong);
}

/* Navbar */
.navbar{
  background: rgba(15,23,42,.58) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
}
.navbar .navbar-brand{
  color: var(--text-strong) !important;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.navbar .nav-link{
  color: rgba(255,255,255,.86) !important;
  font-weight: 650;
}
.navbar .nav-link:hover{
  color: #ffffff !important;
}

/* Navbar toggler visible on dark */
.navbar .navbar-toggler{
  border: 1px solid rgba(255,255,255,.18) !important;
}
.navbar .navbar-toggler:focus{
  box-shadow: var(--focus) !important;
}
.navbar .navbar-toggler-icon{
  filter: invert(1);
  opacity: .9;
}

/* Navbar buttons */
.navbar .btn, .navbar .btn-outline-dark{
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.06) !important;
  transition: transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.navbar .btn:hover, .navbar .btn-outline-dark:hover{
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-1px);
}

/* Hero */
.hero{
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border-radius: var(--radius-lg);
  border: 1px solid var(--hero-border);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  padding: var(--hero-pad) !important;
}
.hero::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(560px 280px at 18% 22%, rgba(124,58,237,.26), transparent 60%),
    radial-gradient(560px 280px at 82% 26%, rgba(6,182,212,.20), transparent 60%),
    radial-gradient(560px 280px at 70% 88%, rgba(34,197,94,.16), transparent 60%);
  pointer-events:none;
  opacity: .95;
}
.hero > *{
  position: relative;
  z-index: 1;
}

.hero-title{
  letter-spacing: -0.03em;
  font-weight: 950;
  color: var(--text-strong) !important;
}
.hero-sub{
  color: rgba(255,255,255,.82) !important;
  max-width: 64ch;
  line-height: 1.65;
}

/* Profile */
.profile-wrap{
  display: inline-grid;
  place-items: center;
  width: 190px;
  height: 190px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.06),
    0 18px 42px rgba(0,0,0,.45);
  animation: floatCard 4.8s ease-in-out infinite alternate;
}
.profile-wrap img{
  width: 170px;
  height: 170px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.55);
}

@keyframes floatCard{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce){
  .profile-wrap{ animation: none; }
}

/* Badges */
.hero-badges{
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: center;
}
.badge-soft{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .48rem .85rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92) !important;
  font-size: .93rem;
}

/* Actions */
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
.hero-chip{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .95rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.95) !important;
  text-decoration: none;
  font-weight: 750;
  font-size: .95rem;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  cursor: pointer;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}
.hero-chip:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.26);
  transform: translateY(-2px);
  color: #fff !important;
}
.hero-chip:focus{
  outline: none;
  box-shadow: var(--focus);
}

/* CTA */
.btn-cta{
  border: none;
  font-weight: 950;
  border-radius: var(--radius-sm);
  padding: .70rem 1.05rem;
  color: rgba(255,255,255,.98) !important;
  background: linear-gradient(135deg, rgba(124,58,237,1), rgba(6,182,212,1));
  box-shadow: 0 16px 34px rgba(124,58,237,.22);
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.btn-cta:hover{
  opacity: .95;
  transform: translateY(-2px);
}

/* Cards */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
}
.section-title{
  letter-spacing: -0.02em;
  color: var(--text-strong) !important;
}

/* Panels */
.soft{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  color: rgba(255,255,255,.92) !important;
}

/* Skills pills */
.skill-pill{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .54rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92) !important;
  font-size: .93rem;
}

/* Thumbs */
.thumb{
  aspect-ratio: 4/3;
  width: 100%;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
}

/* List group readable on dark */
.list-group-item{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.list-group-item *{
  color: rgba(255,255,255,.92) !important;
}
.list-group-item:hover{
  background: rgba(255,255,255,.06) !important;
}

/* Buttons */
.btn-dark{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.btn-dark:hover{
  background: rgba(255,255,255,.14) !important;
  transform: translateY(-1px);
}

.btn-outline-dark{
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.92) !important;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.btn-outline-dark:hover{
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-1px);
}

/* Alerts */
.alert{
  border-radius: 14px;
}
.alert-danger{
  background: rgba(239,68,68,.14);
  border: 1px solid rgba(239,68,68,.28);
  color: rgba(255,255,255,.92) !important;
}

/* Forms */
.form-control{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.94) !important;
}
.form-control::placeholder{
  color: rgba(255,255,255,.60) !important;
}
.form-control:focus{
  box-shadow: var(--focus) !important;
  border-color: rgba(124,58,237,.50) !important;
}

/* Fix Services page specific issue */
.bg-light,
.bg-white{
  background: transparent !important;
}
.text-body,
.text-secondary{
  color: rgba(255,255,255,.82) !important;
}

/* =========================
   FOOTER, CENTER + TARONG
   paste this AT THE VERY END of your style.css
   ========================= */

.footer{
  margin-top: 2.5rem;
  padding: 1.1rem 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  backdrop-filter: blur(14px);
}

.footer-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  text-align: center;
}

.footer-text{
  font-size: .92rem;
  color: rgba(255,255,255,.78) !important;
}

.footer-links{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .75rem;
}

.footer-links a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .48rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92) !important;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.footer-links a:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}



/* ================================ */
/* ADMIN DASHBOARD, PREMIUM DARK UI */
/* ================================ */
.admin-dashboard .card{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.admin-dashboard .text-muted{
  color: rgba(255,255,255,.70) !important;
}
.admin-dashboard .btn{
  border-radius: 12px;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.admin-dashboard .btn-dark,
.admin-dashboard .btn-outline-dark{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}
.admin-dashboard .btn-dark:hover,
.admin-dashboard .btn-outline-dark:hover{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.28) !important;
  transform: translateY(-1px);
}
.admin-dashboard .btn-outline-danger{
  border: 1px solid rgba(239,68,68,.55) !important;
  color: rgba(255,255,255,.92) !important;
  background: rgba(239,68,68,.10) !important;
}
.admin-dashboard .btn-outline-danger:hover{
  background: rgba(239,68,68,.18) !important;
  transform: translateY(-1px);
}

/* TABLE FIX */
.admin-dashboard .table{
  width: 100%;
  color: rgba(255,255,255,.92) !important;
  background: transparent !important;
  margin-bottom: 0 !important;
  border-color: rgba(255,255,255,.10) !important;
}
.admin-dashboard .table thead th{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  font-weight: 800;
  letter-spacing: .01em;
  padding: .85rem .85rem;
}
.admin-dashboard .table tbody td{
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: .85rem .85rem;
  vertical-align: middle;
}
.admin-dashboard .table tbody tr:hover td{
  background: rgba(255,255,255,.05) !important;
}
.admin-dashboard .table-responsive{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.10);
}
.admin-dashboard .btn-sm{
  padding: .35rem .65rem;
  border-radius: 10px;
}
.admin-dashboard > .card{
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}
.admin-dashboard h1{ letter-spacing: -0.02em; }
.admin-dashboard h4{ letter-spacing: -0.01em; }

/* ============================== */
/* ADMIN FORMS, SELECT FIX (DARK) */
/* ============================== */
.admin-dashboard .form-label{
  color: rgba(255,255,255,.90) !important;
}
.admin-dashboard .form-control{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.94) !important;
}
.admin-dashboard .form-select{
  background-color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  color: #0b0f19 !important;
}
.admin-dashboard .form-select option{
  background-color: #ffffff !important;
  color: #0b0f19 !important;
}
.admin-dashboard input[type="date"]{
  color-scheme: dark;
}
.admin-dashboard .form-control::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* Recent Works scroll when many items */
.recent-works-scroll{
  max-height: 520px;
  overflow-y: auto;
  padding-right: 6px;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.recent-works-scroll::-webkit-scrollbar{
  width: 10px;
}
.recent-works-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
.recent-works-scroll::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}

/* ===================== */
/* MOBILE PROFESSIONAL UI */
/* ===================== */

/* Make cards breathe on small screens */
@media (max-width: 576px){
  :root{
    --container-pad: 14px;
    --hero-pad: 18px;
    --section-gap: 14px;
  }

  .hero{
    border-radius: 18px;
  }

  .profile-wrap{
    width: 150px;
    height: 150px;
  }
  .profile-wrap img{
    width: 132px;
    height: 132px;
  }

  .hero-actions{
    gap: .55rem;
  }

  /* Chips become full width, easy to tap */
  .hero-chip,
  .btn-cta{
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Prevent long words overflow */
  .card, .soft{
    overflow: hidden;
  }

  /* Recent works scroll height fits mobile viewport */
  .recent-works-scroll{
    max-height: 360px;
  }

  /* Buttons bigger for finger */
  .btn, .btn-sm{
    padding: .60rem .85rem;
  }
}

/* Tablet fine tuning */
@media (min-width: 577px) and (max-width: 991px){
  :root{
    --container-pad: 18px;
    --hero-pad: 22px;
  }
  .recent-works-scroll{
    max-height: 460px;
  }
}

/* ============================= */
/* CLICK FIX for overlay issues  */
/* ============================= */
.hero::after{
  pointer-events: none;
}
.hero,
.card,
.soft{
  position: relative;
  z-index: 1;
}

/* ============================= */
/* FINAL FORCE ALL TEXT TO WHITE */
/* ============================= */
html body,
html body *{
  color: #ffffff !important;
}
/* Admin tables scroll, prevent super tall dashboard */
.admin-dashboard .admin-table-scroll{
  max-height: 420px;
  overflow-y: auto;
  border-radius: 16px;
}

/* Sticky header while scrolling */
.admin-dashboard .admin-table-scroll thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Optional, nicer scrollbar */
.admin-dashboard .admin-table-scroll::-webkit-scrollbar{
  width: 10px;
}
.admin-dashboard .admin-table-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
.admin-dashboard .admin-table-scroll::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}

/* Logo base */
.nav-logo{
  height: 44px;
  width: 44px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  padding: 4px;
}

.brand-text{
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* Hero logo (index only) */
.hero-logo{
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  padding: 6px;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}

/* Footer centered */
.footer-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .9rem;
}

.footer-logo{
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  padding: 6px;
}

/* Mobile adjustments */
@media (max-width: 576px){
  .nav-logo{ height: 40px; width: 40px; }
  .hero-logo{ height: 48px; width: 48px; }
  .footer-logo{ height: 46px; width: 46px; }
}