/* =========================================
   Ptech Digitals  |  Light-Mode Brand Redesign
   Primary: #3D176A  Accent: #7C3AED
   Fonts: Plus Jakarta Sans + Inter
   ========================================= */

:root {
  --brand:        #3D176A;
  --brand-mid:    #5B2194;
  --brand-light:  #7C3AED;
  --brand-pale:   #A855F7;
  --brand-soft:   rgba(61,23,106,0.07);
  --brand-border: rgba(61,23,106,0.15);
  --bg-page:      #FFFFFF;
  --bg-tint:      #F7F3FF;
  --bg-alt:       #F3F4F6;
  --text-head:    #1A0A2E;
  --text-body:    #374151;
  --text-muted:   #6B7280;
  --shadow-card:  0 4px 24px rgba(61,23,106,0.08);
  --shadow-hover: 0 16px 48px rgba(61,23,106,0.18);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  background-color:var(--bg-page);
  color:var(--text-body);
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-weight:700;
  line-height:1.2;
  color:var(--text-head);
}

p{color:var(--text-body);}

/* ── Tailwind overrides (accent-500 = purple, bg-dark = white) ── */
.text-accent-500,.text-accent-400,.text-accent-300{color:var(--brand-light)!important;}
.bg-accent-500{background-color:var(--brand-light)!important;}
.border-accent-500{border-color:var(--brand-light)!important;}
.hover\:text-accent-500:hover{color:var(--brand-light)!important;}
.hover\:border-accent-500:hover{border-color:var(--brand-light)!important;}
.hover\:bg-accent-500\/20:hover{background-color:rgba(124,58,237,0.12)!important;}
.focus\:border-accent-500:focus{border-color:var(--brand-light)!important;}
.group-hover\:text-accent-500{color:var(--brand-light)!important;}
.group:hover .group-hover\:text-accent-500{color:var(--brand-light)!important;}
.bg-dark-950,.bg-dark-900,.bg-dark-800{background-color:var(--bg-page)!important;}
.bg-gray-950{background-color:var(--bg-tint)!important;}
.text-white{color:var(--text-head)!important;}
.text-gray-300{color:var(--text-body)!important;}
.text-gray-400{color:var(--text-muted)!important;}
.text-gray-200{color:var(--text-head)!important;}

/* Override section backgrounds */
section,footer{background-color:var(--bg-page);}
.bg-dark-900{background-color:var(--bg-tint)!important;}

/* ── Typography ── */
.text-gradient{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-light) 55%,var(--brand-pale) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-title{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  -webkit-background-clip:text;
  font-weight:800;
  letter-spacing:-.03em;
  color:transparent;
  background-clip:text;
  background-image:linear-gradient(135deg,var(--brand) 0%,var(--brand-mid) 50%,var(--brand-light) 100%);
  line-height:1.1;
}

/* ── Glass / Card ── */
.glass-effect{
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--brand-border);
  box-shadow:var(--shadow-card);
}
.glass-effect-2{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--brand-border);
}

/* ── Navbar ── */
#navbar{
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.4);
  transition:all 0.35s ease;
}
#navbar.scrolled{
  background:rgba(255,255,255,0.96)!important;
  backdrop-filter:blur(24px)!important;
  border-bottom:1px solid var(--brand-border)!important;
  padding-top:0.6rem!important;
  padding-bottom:0.6rem!important;
  box-shadow:0 4px 24px rgba(61,23,106,0.10);
}
/* Nav links light */
#navbar a.text-gray-300{color:var(--text-body)!important;}
#navbar a.text-gray-300:hover{color:var(--brand)!important;}

/* ── Hero Background ── */
.hero-bg{
  background:linear-gradient(135deg,#F7F3FF 0%,#EDE9FE 50%,#F5F3FF 100%);
  position:relative;
  overflow:hidden;
}
.hero-bg::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 60% 40%,rgba(124,58,237,0.12) 0%,transparent 65%);
  pointer-events:none;
}

/* Page section hero banners */
.page-hero-banner{
  background:linear-gradient(135deg,#F7F3FF 0%,#EDE9FE 60%,#F3F0FF 100%);
  position:relative;
  overflow:hidden;
}
.page-hero-banner::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 30% 60%,rgba(61,23,106,0.08) 0%,transparent 60%);
  pointer-events:none;
}

/* ── Buttons ── */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--brand-light) 0%,var(--brand) 100%);
  color:#ffffff!important;
  border:none;
  padding:12px 30px;
  border-radius:10px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden;
  text-decoration:none;
  letter-spacing:0.01em;
}
.btn-primary::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.2) 0%,transparent 100%);
  opacity:0;
  transition:opacity 0.3s;
}
.btn-primary:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 36px rgba(61,23,106,0.35);
}
.btn-primary:hover::after{opacity:1;}
.btn-primary:active{transform:translateY(0) scale(1);}
.btn-shadow:hover{box-shadow:0 0 22px 6px rgba(61,23,106,0.25);}

/* ── Custom Shadow ── */
.custom-shadow{
  box-shadow:var(--shadow-card);
}

/* ── Card Hover ── */
.card-hover{
  background:var(--bg-page);
  transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
  border:1px solid var(--brand-border)!important;
}
.card-hover:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(124,58,237,0.35)!important;
}

/* ── Dropdown ── */
.dropdown{
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:all 0.25s ease;
  background:rgba(255,255,255,0.98)!important;
  border:1px solid var(--brand-border)!important;
  box-shadow:0 12px 40px rgba(61,23,106,0.15);
}
.dropdown.show{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown-item:hover{background:var(--brand-soft);}

/* ── Mobile menu ── */
#mobile-menu{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:all 0.35s ease;
  background:rgba(255,255,255,0.98);
  border:1px solid var(--brand-border);
}
#mobile-menu.show{max-height:520px;opacity:1;}
#mobile-menu a{color:var(--text-body)!important;}
#mobile-menu a:hover{color:var(--brand)!important;}

/* ── Section divider ── */
.section-divider{
  height:2px;
  background:linear-gradient(90deg,transparent,var(--brand-light),transparent);
  margin:64px auto;
  max-width:160px;
  border-radius:2px;
}

/* ── Portfolio filter ── */
.portfolio-filter{
  transition:all 0.25s ease;
  color:var(--text-muted);
  border:1px solid var(--brand-border)!important;
  background:var(--bg-page);
}
.portfolio-filter:hover{color:var(--brand);border-color:var(--brand-light)!important;}
.portfolio-filter.active{
  background:linear-gradient(135deg,var(--brand-light),var(--brand));
  color:#fff!important;
  box-shadow:0 4px 18px rgba(61,23,106,0.28);
  border-color:transparent!important;
}
.portfolio-item{transition:all 0.3s ease;}
.portfolio-item.hidden{opacity:0;transform:scale(0.88);pointer-events:none;}

/* ── Testimonial ── */
.testimonial-carousel{position:relative;}
.testimonial-slide{
  opacity:0;transform:translateX(32px);
  transition:all 0.5s ease;
  position:absolute;top:0;left:0;width:100%;
}
.testimonial-slide.active{opacity:1;transform:translateX(0);position:relative;}
.testimonial-slide.prev{transform:translateX(-32px);}

/* ── Review cards ── */
.review-card{
  transition:all 0.3s ease;
  background:var(--bg-page);
  border:1px solid var(--brand-border)!important;
}
.review-card:hover{
  transform:translateY(-5px);
  border-color:rgba(124,58,237,0.3)!important;
  box-shadow:var(--shadow-hover);
}

/* ── Forms ── */
input,select,textarea{
  background:var(--bg-page)!important;
  color:var(--text-head)!important;
  border-color:#D1D5DB!important;
}
input::placeholder,textarea::placeholder{color:var(--text-muted)!important;}
input:focus,select:focus,textarea:focus,
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none!important;
  border-color:var(--brand-light)!important;
  box-shadow:0 0 0 3px rgba(124,58,237,0.15)!important;
}

/* ── Scroll animations ── */
.scroll-animate{
  opacity:0;
  transform:translateY(36px);
  transition:opacity 0.75s cubic-bezier(0.22,1,0.36,1),
             transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.scroll-animate.animate{opacity:1;transform:translateY(0);}

/* Stagger helpers */
.stagger-1{transition-delay:0.08s;}
.stagger-2{transition-delay:0.16s;}
.stagger-3{transition-delay:0.24s;}
.stagger-4{transition-delay:0.32s;}
.stagger-5{transition-delay:0.40s;}
.stagger-6{transition-delay:0.48s;}

/* Slide-in from sides */
.slide-in-left{
  opacity:0;transform:translateX(-48px);
  transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.slide-in-left.animate{opacity:1;transform:translateX(0);}
.slide-in-right{
  opacity:0;transform:translateX(48px);
  transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.slide-in-right.animate{opacity:1;transform:translateX(0);}
.scale-in{
  opacity:0;transform:scale(0.9);
  transition:opacity 0.6s cubic-bezier(0.22,1,0.36,1),transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.scale-in.animate{opacity:1;transform:scale(1);}

/* Page entrance */
.page-enter{animation:pageEnter 0.6s cubic-bezier(0.22,1,0.36,1) both;}

/* ── Keyframes ── */
@keyframes pageEnter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(28px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes float-delay{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes glow{0%{box-shadow:0 0 18px rgba(61,23,106,0.2)}100%{box-shadow:0 0 38px rgba(61,23,106,0.45)}}
@keyframes grid-move{0%{transform:translate(0,0)}100%{transform:translate(50px,50px)}}
@keyframes grid-pulse{0%,100%{opacity:0.1}50%{opacity:0.35}}
@keyframes grid-float{0%,100%{transform:translateY(0) scale(1);opacity:0.5}50%{transform:translateY(-10px) scale(1.08);opacity:0.9}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes tilt{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulse-ring{0%{transform:scale(0.8);opacity:0.8}100%{transform:scale(2.5);opacity:0}}
@keyframes bounce-in{0%{transform:scale(0.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(0.9)}100%{transform:scale(1);opacity:1}}
@keyframes counter-up{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes underline-draw{from{width:0}to{width:100%}}
@keyframes orbit{from{transform:rotate(0deg) translateX(120px) rotate(0deg)}to{transform:rotate(360deg) translateX(120px) rotate(-360deg)}}

/* ── Animation utility classes ── */
.animate-fade-in{animation:fadeIn 0.5s ease-in-out;}
.animate-slide-up{animation:slideUp 0.65s cubic-bezier(0.22,1,0.36,1);}
.animate-float{animation:float 5s ease-in-out infinite;}
.animate-float-delay{animation:float-delay 5s ease-in-out infinite;animation-delay:1.5s;}
.animate-glow{animation:glow 2.5s ease-in-out infinite alternate;}
.animate-pulse-slow{animation:pulse 4s cubic-bezier(0.4,0,0.6,1) infinite;}
.animate-grid-move{animation:grid-move 22s linear infinite;}
.animate-grid-pulse{animation:grid-pulse 4s ease-in-out infinite;}
.animate-grid-float{animation:grid-float 3s ease-in-out infinite;}
.animate-grid-float-delay{animation:grid-float 3.5s ease-in-out infinite;animation-delay:1s;}
.animate-grid-float-slow{animation:grid-float 4.5s ease-in-out infinite;animation-delay:2s;}
.tilt-emoji{display:inline-block;animation:tilt 1s ease-in-out infinite;transform-origin:bottom;}
.toast-enter{animation:slideIn 0.3s ease-out;}
.toast-exit{animation:slideOut 0.3s ease-in;}
.spinner{border:2px solid rgba(61,23,106,0.15);border-radius:50%;border-top:2px solid var(--brand-light);width:20px;height:20px;animation:spin 0.9s linear infinite;}
.success-message{animation:bounce-in 0.6s cubic-bezier(0.22,1,0.36,1);}
.float-delay-1{animation-delay:1s;}
.float-delay-2{animation-delay:2s;}
.float-delay-3{animation-delay:3s;}

/* Nav link underline draw effect */
.nav-link-underline{position:relative;}
.nav-link-underline::after{
  content:'';position:absolute;bottom:-2px;left:0;height:2px;width:0;
  background:var(--brand-light);border-radius:2px;
  transition:width 0.3s cubic-bezier(0.22,1,0.36,1);
}
.nav-link-underline:hover::after,.nav-link-underline.active::after{width:100%;}

/* Shimmer button variant */
.btn-shimmer{
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand-light) 50%,var(--brand) 100%);
  background-size:200% 100%;
  animation:shimmer 2.5s linear infinite;
}

/* Pulse ring on icon badges */
.pulse-ring::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  animation:pulse-ring 1.8s ease-out infinite;
  border:2px solid var(--brand-light);
}

/* Stat counter animation */
.counter-item{animation:counter-up 0.5s cubic-bezier(0.22,1,0.36,1) both;}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:#F7F3FF;}
::-webkit-scrollbar-thumb{background:var(--brand-light);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--brand);}

section{scroll-margin-top:80px;}

/* ── Footer (stays dark for contrast) ── */
footer{
  background:var(--text-head)!important;
  border-top:none;
}
footer *{color:#CBD5E1!important;}
footer h3{color:#F1F5F9!important;}
footer a:hover{color:#C084FC!important;}

/* ── Back to top ── */
#backToTopBtn{
  background:linear-gradient(135deg,var(--brand-light),var(--brand))!important;
  border:none;
  transition:all 0.3s ease;
  box-shadow:0 4px 16px rgba(61,23,106,0.3);
}
#backToTopBtn:hover{
  box-shadow:0 8px 28px rgba(61,23,106,0.45);
  transform:translateY(-3px);
}

*:focus-visible{outline:2px solid var(--brand-light);outline-offset:3px;}

@media (max-width:768px){
  .text-4xl{font-size:2rem!important;}
  .text-5xl{font-size:2.4rem!important;}
  .text-7xl{font-size:2.7rem!important;}
}

/* ================================================================
   NUCLEAR DARK COLOR OVERRIDE
   Kills every dark bg class that output.css may compile
   These run last in the sheet so they always win
   ================================================================ */

/* Original site custom dark palette → white/light */
.bg-dark-950,.bg-dark-900,.bg-dark-800,.bg-dark-700,
.bg-dark-600,.bg-dark-500,.bg-dark,.dark-bg,
[class*="bg-dark-"]{background-color:#ffffff!important;}

/* Tailwind gray darks → off-white */
.bg-gray-900,.bg-gray-800,.bg-gray-700,
.bg-gray-900\/50,.bg-gray-800\/50,.bg-gray-700\/50,
.bg-gray-900\/80,.bg-gray-800\/80{background-color:#F7F3FF!important;}

/* Kill glass-effect dark anywhere it still appears */
.glass-effect{
  background:rgba(255,255,255,0.92)!important;
  backdrop-filter:blur(18px)!important;
  border:1px solid rgba(61,23,106,0.12)!important;
}

/* Force all card containers to white */
.card-hover{background:#ffffff!important;}
.custom-shadow{box-shadow:0 4px 24px rgba(61,23,106,0.08)!important;}

/* Accent color — orange is DEAD */
.text-accent-500,.text-accent-400,.text-accent-300,
.group:hover .group-hover\:text-accent-500,
.hover\:text-accent-500:hover{color:#7C3AED!important;}

.bg-accent-500,.hover\:bg-accent-500:hover{background-color:#7C3AED!important;}
.border-accent-500,.hover\:border-accent-500:hover{border-color:#7C3AED!important;}
.bg-accent-500\/10{background-color:rgba(124,58,237,0.08)!important;}
.bg-accent-500\/20{background-color:rgba(124,58,237,0.12)!important;}
.bg-accent-500\/30{background-color:rgba(124,58,237,0.18)!important;}
.border-accent-500\/20{border-color:rgba(124,58,237,0.2)!important;}
.border-accent-500\/30{border-color:rgba(124,58,237,0.3)!important;}

/* text-white → dark heading on white bg */
.card-hover *:not(button):not(a):not(.btn-primary):not([class*="bg-"]):not(svg):not(path):not(span.text-white) .text-white,
p.text-white,h1.text-white,h2.text-white,h3.text-white,h4.text-white,h5.text-white,h6.text-white{
  color:#1A0A2E!important;
}

/* Invisible text in cards */
.text-gray-300{color:#4B5563!important;}
.text-gray-200{color:#374151!important;}
.text-gray-100{color:#374151!important;}

/* Section backgrounds */
section:not(footer){background-color:inherit;}
.bg-white{background-color:#ffffff!important;}
.bg-purple-50{background-color:#F7F3FF!important;}
.bg-gray-50{background-color:#F9FAFB!important;}

/* Portfolio card image overlay — was dark, now light */
.bg-gradient-to-t.from-white\/80{
  background:linear-gradient(to top, rgba(255,255,255,0.85), transparent)!important;
}