/* GLOBAL */
:root{
  --bg:#000;
  --panel:rgba(255,255,255,0.05);
  --muted:#ccc;
  --accent:#c084fc;
  --accent-strong:rgba(168,85,247,0.25);
  --glass: rgba(255,255,255,0.06);
}

/* Theme variables */
:root{
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --card: #f8fafc;
  --accent: #0ea5a4;
  --overlay: rgba(0,0,0,0.35);
  --transition: 200ms ease;
}

/* Theme variables — Lila / modern */
:root{
  --bg: #fcfbff;
  --text: #0f1724;
  --muted: #6b7280;
  --card: #ffffff;
  --accent: linear-gradient(135deg,#7c3aed,#a78bfa);
  --accent-solid: #7c3aed;
  --overlay: rgba(39, 10, 67, 0.35);
  --glass: rgba(255,255,255,0.6);
  --transition: 240ms cubic-bezier(.2,.9,.3,1);
}

/* Dark theme */
.dark-theme {
  --bg: #0b1220;
  --text: #e6eef5;
  --muted: #9aa6b2;
  --card: #0f1724;
  --accent: #2dd4bf;
  --accent-solid: #2dd4bf;
  --overlay: rgba(0,0,0,0.5);
  --glass: rgba(255,255,255,0.03);
}

/* Scaleable base */
:root{
  /* typographic scale */
  --base-size: clamp(14px, 1.1vw + 12px, 18px);
  font-size: var(--base-size);

  --bg: #fbf7ff;
  --text: #0f1724;
  --muted: #6b7280;
  --card: #ffffff;
  --accent-solid: #7c3aed;
  --accent-grad: linear-gradient(135deg,#7c3aed,#a78bfa);
  --overlay: rgba(39, 10, 67, 0.25);
  --glass: rgba(255,255,255,0.6);
  --transition: 260ms cubic-bezier(.2,.9,.3,1);
  --radius: 12px;
}

/* Dark theme (lila) */
.dark-theme{
  --bg: #06030b;
  --text: #eae9f6;
  --muted: #b8b1d8;
  --card: #0b0810;
  --accent-solid: #a78bfa;
  --accent-grad: linear-gradient(135deg,#9f7aea,#6b21a8);
  --overlay: rgba(10, 4, 25, 0.6);
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background var(--transition), color var(--transition), font-size 200ms;
  line-height:1.5;
}

/* Container responsive */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* Header */
.site-header{
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.65), transparent);
  position:fixed;
  width:100%;
  top:0;
  z-index:50;
  padding:12px 0;
  transition:background var(--transition);
}
.dark-theme .site-header{background: linear-gradient(180deg, rgba(12,6,25,0.5), transparent)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo-link{font-weight:700;color:var(--accent-solid);text-decoration:none;font-size:1.05rem}

/* Nav */
.main-nav a{margin:0 10px;color:var(--muted);text-decoration:none}
.main-nav a:hover{color:var(--text)}

/* Theme toggle */
#theme-toggle{
  background:transparent;border:1px solid rgba(0,0,0,0.06);padding:8px 10px;border-radius:10px;cursor:pointer;color:var(--text);
  transition:transform 120ms,var(--transition);
}
#theme-toggle:active{transform:scale(.98)}

/* Hero */
.hero{
  position:relative;height:66vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-top:56px;
}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:grayscale(10%) contrast(92%) saturate(110%)}
.overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(124,58,237,0.14), transparent 30%), var(--overlay);mix-blend-mode:multiply;z-index:1}
.hero-content{position:relative;z-index:2;text-align:center;padding:40px;max-width:980px;color:#fff}

/* Hero text styling */
.reveal-text{font-size:clamp(28px, 5vw, 48px);margin:0 0 12px;line-height:1.02;color:var(--card);text-shadow:0 8px 36px rgba(15,10,30,0.45)}
.reveal-sub{font-size:clamp(14px,2.2vw,18px);color:rgba(255,255,255,0.95);margin-bottom:18px}

/* CTA */
.cta-btn{display:inline-block;padding:12px 18px;border-radius:14px;background:var(--accent-solid);background-image:var(--accent-grad);color:white;text-decoration:none;font-weight:700;box-shadow:0 10px 30px rgba(124,58,237,0.14)}

/* Sections */
.section{padding:80px 0}
.section h2{margin-top:0;color:var(--text);font-size:clamp(20px,2.6vw,28px)}
.section p{color:var(--muted);line-height:1.6;font-size:1rem}

/* Cards & portfolio */
.portfolio{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:16px}
.card{padding:16px;border-radius:var(--radius);background:var(--card);border:1px solid rgba(0,0,0,0.04)}
a{color:var(--accent-solid)}

/* Skills */
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:16px}
.skill-card{
  display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7));
  border:1px solid rgba(124,58,237,0.08);transition:transform 260ms var(--transition), box-shadow 260ms;
  cursor:default;
}
.dark-theme .skill-card{background:linear-gradient(180deg,var(--glass), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.03)}
.skill-card:hover{transform:translateY(-10px);box-shadow:0 22px 50px rgba(15,10,30,0.12)}
.skill-emoji{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:12px;font-size:22px;line-height:1;
  background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.82));
  color:var(--accent-solid);flex:0 0 52px;box-shadow:0 8px 22px rgba(15,10,30,0.06)
}

/* Responsive tweaks */
@media (max-width:900px){
  .hero{height:56vh;padding-top:48px}
  .reveal-text{font-size:clamp(24px,6vw,40px)}
  .container{padding:0 18px}
}
@media (max-width:520px){
  .hero{height:50vh;padding-top:44px}
  .skill-emoji{width:40px;height:40px;font-size:18px}
  .header-inner{gap:10px}
}

/* Reveal animations */
.fade-in{opacity:0;transform:translateY(18px);transition:opacity 560ms var(--transition), transform 560ms var(--transition)}
.fade-in.visible{opacity:1;transform:none}
.reveal-text{opacity:0;transform:translateY(6px) scale(.995);transition:opacity 520ms var(--transition), transform 520ms var(--transition)}
.reveal-text.visible{opacity:1;transform:none}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
  .fade-in,.reveal-text{opacity:1;transform:none}
}

/* slightly different gradient for dark theme to keep contrast */
.dark-theme .name-highlight{
  background:linear-gradient(90deg,#9f7aea,#6b21a8);
}

/* Prevent text from becoming too small when zooming / keep scalable */
html{
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
  /* Ensure a readable minimum and a sensible maximum while remaining responsive */
  font-size: clamp(15px, calc(12px + 1.2vw), 18px);
}

/* Use rem-based base so all typography scales consistently */
:root{
  --base-font-size: 1rem; /* equals html font-size above */
}
body{ font-size: var(--base-font-size); }

/* Contact form styles */
.contact-card{
  margin-top:18px;
  padding:18px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.85));
  box-shadow:0 10px 30px rgba(15,10,30,0.06);
  border:1px solid rgba(124,58,237,0.06);
}
.dark-theme .contact-card{background:linear-gradient(180deg,var(--glass), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.03)}

/* Unified contact form styles */
.contact-card{
  margin-top:18px;
  padding:20px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.86));
  box-shadow:0 12px 36px rgba(15,10,30,0.06);
  border:1px solid rgba(124,58,237,0.06);
}
.dark-theme .contact-card{background:linear-gradient(180deg,var(--glass), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.03)}

.contact-form{display:flex;flex-direction:column;gap:12px}
.contact-form .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.contact-form .field{display:flex;flex-direction:column;gap:8px}
.contact-form label{font-weight:600;font-size:.95rem;color:var(--text)}
.contact-form .muted{font-weight:400;color:var(--muted);font-size:.85rem;margin-left:6px}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(15,10,30,0.06);
  background:transparent;
  font-size:1rem;
  color:var(--text);
  transition:box-shadow 180ms,var(--transition);
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  box-shadow:0 10px 30px rgba(124,58,237,0.12);
  border-color:var(--accent-solid);
}

/* actions row */
.row-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.checkbox{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.95rem}
.checkbox input{width:16px;height:16px;border-radius:4px}

/* submit button */
.contact-btn{
  display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;background:var(--accent-solid);background-image:var(--accent-grad);
  color:#fff;border:0;font-weight:700;cursor:pointer;box-shadow:0 10px 30px rgba(124,58,237,0.14)
}
.contact-btn[disabled]{opacity:.6;cursor:not-allowed;box-shadow:none}
.btn-spinner{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,0.25);border-top-color:rgba(255,255,255,0.95);animation:spin 900ms linear infinite;opacity:0;transform:scale(.9);transition:opacity 160ms}
.contact-btn.loading .btn-spinner{opacity:1}
.contact-btn.loading .btn-text{opacity:.75}

/* toast */
.contact-toast{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(124,58,237,0.08);color:var(--text);font-weight:600;border:1px solid rgba(124,58,237,0.12);display:inline-block;opacity:0;transform:translateY(6px);transition:opacity 260ms,var(--transition)}
.contact-toast.show{opacity:1;transform:none}

/* responsive */
@media (max-width:820px){
  .contact-form .grid{grid-template-columns:1fr}
  .row-actions{flex-direction:column;align-items:stretch}
  .contact-btn{width:100%;justify-content:center}
}

/* ...existing code... */