/* Dark Glassmorphism Theme (aligned with calculator.html) */
:root{
  --bg1:#0f1226;/*deep indigo*/
  --bg2:#0b1f39;/*blue*/
  --glass: rgba(255,255,255,.08);
  --glass-strong: rgba(255,255,255,.14);
  --accent:#7dd3fc;/*sky*/
  --accent2:#a78bfa;/*violet*/
  --ok:#22c55e;/*green*/
  --warn:#f59e0b;/*amber*/
  --err:#ef4444;/*red*/
  --text:#e5e7eb;/*light*/
  --muted:#a5b4fc;/*periwinkle*/
}

html,body{height:100%}
body{
  color:var(--text);
  background: radial-gradient(1200px 600px at 80% -10%, #1e3a8a33, transparent),
              radial-gradient(900px 500px at 10% -20%, #7c3aed33, transparent),
              linear-gradient(135deg, var(--bg1), var(--bg2));
}

/* Navbar */
#mainNav{
  background-color: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(10px);
  border-bottom:1px solid #ffffff1a;
}
#mainNav .navbar-brand, 
#mainNav .nav-link{ color: var(--text) !important; }
#mainNav .nav-link.active, #mainNav .nav-link:hover{ color: white !important; }

/* Headings & text */
h1,h2,h3,h4,h5,h6{ color: var(--text); }
.section-header p, p, .text-muted{ color:#c7d2fe; }

/* Buttons -> gradient */
.btn-primary{
  background: linear-gradient(90deg, #22d3ee, #a78bfa) !important;
  border: none !important; color:white !important;
  box-shadow: 0 10px 20px #00000055;
}
.btn-outline-primary{
  color: var(--text) !important; border:1px solid #ffffff2a !important;
  background: #ffffff14 !important;
}
.btn-outline-primary:hover{ background:#ffffff22 !important; }

/* Hero */
.hero-section{ background: transparent !important; }
.hero-text h1{ text-shadow: 0 0 30px #7dd3fc33; }
.wave-bg{ display:none !important; }

/* Cards and panels */
.service-card,
.portfolio-item,
.contact-form,
.team-member,
.bg-white,
.shadow,
.shadow-sm{
  background: var(--glass) !important;
  border:1px solid #ffffff1a !important;
  box-shadow: 0 10px 30px #00000055 !important;
  backdrop-filter: blur(10px);
  color: var(--text);
}
.portfolio-info{ background: transparent !important; color: var(--text); }

/* Section backgrounds */
.section-padding{ background: transparent; }
.bg-light{ background: #ffffff10 !important; }
.bg-primary{ background: linear-gradient(135deg, #38bdf8, #8b5cf6) !important; }
.cta-section{ background: linear-gradient(135deg, #38bdf8, #8b5cf6) !important; }

/* Portfolio overlay tint match */
.portfolio-overlay{ background: rgba(125, 211, 252, 0.28) !important; }

/* Forms */
.form-control{
  background: var(--glass-strong) !important;
  border:1px solid #ffffff22 !important;
  color: var(--text) !important;
}
.form-control::placeholder{ color:#cbd5e1; }

/* Tech Stack Pills - ensure dark text on white pill */
.tech-items span{ color:#1f2937 !important; font-weight:600; }

/* Utilities inspired by calculator page */
.card-like{ background:var(--glass); border:1px solid #ffffff1a; border-radius:20px; padding:18px 20px; box-shadow: 0 10px 30px #00000055; backdrop-filter: blur(10px) }
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#ffffff14; border:1px solid #ffffff28; font-size:12px}
.subtitle{color:#c7d2fe}
.glow{background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 0 30px #7dd3fc33;}

/* Links */
a{ color: var(--accent); }
a:hover{ color: #a78bfa; }

/* Tables (if any) */
th,td{ color: var(--text); border-color:#ffffff17 !important; }
th{ background:#0b1431 !important; }

/* Footer (if any) */
footer{ color: var(--text); background: #ffffff10; border-top:1px solid #ffffff1a }

/* Responsive tweaks */
@media (max-width: 980px){
  .section-padding{ padding: 70px 0; }
}