/* === THEME BASE === */
:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#616b86;
  --border:#e5e7eb;
  --card:#ffffff;
  --surface:#f6f7fb;
  --accent:#7c3aed;
  --link:#1e40af;
  --link-hover:#1d4ed8;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
}
html,body{background:var(--bg);color:var(--text)}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
hr{border:0;border-top:1px solid var(--border)}
.site-header{background:transparent}
.card,.tool-card{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}
.tool-logo-wrap{background:var(--surface)}
.nav a{color:var(--text);opacity:.9}
.nav a:hover{opacity:1}
.button,.btn,.btn-outline{transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.btn:hover{filter:brightness(1.02);box-shadow:0 6px 22px rgba(124,58,237,.25)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-red{background:#ef4444;border-color:#ef4444;color:#fff}
.btn-red:hover{filter:brightness(1.03)}
.btn-black{background:#0f172a;border-color:#0f172a;color:#fff}
.btn-black:hover{filter:brightness(1.08)}
/* Inputs */
input,textarea,select{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:.75rem .9rem}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);border-color:var(--accent)}
/* Code blocks */
pre,code{background:var(--surface);border:1px solid var(--border)}
pre{padding:1rem;border-radius:12px;overflow:auto}
code{border-radius:8px;padding:.15rem .35rem}
/* Footer */
.site-footer{color:var(--muted)}
/* Smooth theme transition */
body,.card,.tool-card,.site-header,.site-footer,.nav a,input,textarea,select,pre,code{transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}

/* === THEME DARK === */
[data-theme="dark"]{
  --bg:#0b1020;
  --text:#e5eaff;
  --muted:#9fb0d6;
  --border:#2a3355;
  --card:#0f152b;
  --surface:#141a33;
  --accent:#a78bfa;
  --link:#93c5fd;
  --link-hover:#bfdbfe;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
}
[data-theme="dark"] .btn-outline{color:var(--text);border-color:var(--border)}
[data-theme="dark"] .btn-black{background:#1f2a44;border-color:#1f2a44}
[data-theme="dark"] .site-footer{color:var(--muted)}

/* === Dark mode star background === */
html[data-theme="dark"] body{
  background-color: var(--bg);
  /* Subtle star field */
  background-image:
    radial-gradient(1px 1px at 25px 35px, rgba(255,255,255,.85), transparent 45%),
    radial-gradient(1px 1px at 140px 120px, rgba(255,255,255,.65), transparent 45%),
    radial-gradient(1.5px 1.5px at 80px 160px, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(2px 2px at 190px 60px, rgba(167,139,250,.35), transparent 60%);
  background-size: 220px 220px, 340px 340px, 420px 420px, 560px 560px;
  background-position: 0 0, 60px 100px, 150px 40px, 220px 150px;
  background-repeat: repeat;
  background-attachment: fixed;
}
/* Active nav link underline */



html{scroll-behavior:smooth}

/* === Intro Video Modal === */
.video-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.70);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:10000;
}
.video-modal.open{display:flex;}
.video-modal__panel{
  width:min(960px, 100%);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}
.video-modal__close{
  position:absolute;
  top:10px;
  right:10px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.90);
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
}
[data-theme="dark"] .video-modal__close{
  background:rgba(15,21,43,.85);
}
.video-modal__close:hover{box-shadow:0 10px 24px rgba(0,0,0,.15);}
.video-modal__ratio{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
}
.video-modal__ratio iframe{
  width:100%;
  height:100%;
  display:block;
}

/* Taller modal content for Resume + Calendly */
.video-modal__panel--tall{width:min(1040px, 100%);}
.video-modal__content{
  width:100%;
  height:min(78vh, 860px);
  background:#fff;
}
[data-theme="dark"] .video-modal__content{background:#0b1020;}
.video-modal__content iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
}
.video-modal__footer{
  display:flex;
  gap:12px;
  padding:14px 16px 16px;
  border-top:1px solid var(--border);
  background:var(--card);
}
@media (max-width:480px){
  .video-modal__content{height:78vh;}
  .video-modal__footer{flex-direction:column;}
}
@media (max-width:480px){
  .video-modal{padding:14px;}
  .video-modal__close{top:8px; right:8px;}
}

:root{
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#475569;
  --accent:#7c3aed;
  --accent-strong:#6d28d9;
  --card:#f8fafc;
  --border:#e2e8f0;
  --linkedin:#0a66c2;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
}

.container{max-width:1100px;margin:0 auto;padding:0 1rem}

.site-header{
  position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.logo{font-weight:800;text-decoration:none;color:var(--fg);letter-spacing:.5px;font-size:1.2rem}
.logo span{color:var(--accent)}
.nav{display:flex;gap:1.25rem}
.nav a{text-decoration:none;color:var(--muted);font-weight:500}
.nav a:hover{color:var(--fg)}
.nav-toggle{display:none;background:none;border:none;font-size:1.5rem}

@media (max-width: 800px){
  .nav{position:absolute;top:64px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border);display:none;flex-direction:column;padding:.5rem}
  .nav.open{display:flex}
  .nav-toggle{display:block}
}

.hero{
  padding:5rem 0 2rem;
  background:radial-gradient(80% 60% at 50% 0%, #f3e8ff 0%, rgba(255,255,255,0) 60%);
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media (min-width: 900px){
  .hero-grid{grid-template-columns:1.2fr .8fr}
}
.hero h1{font-size:clamp(1.6rem,4.2vw,2.4rem);line-height:1.1;margin:0 0 .35rem 0}
.subtitle{color:var(--muted);margin:.25rem 0 .5rem 0;font-weight:600}
.location{color:var(--muted);margin:0 0 1rem 0}
.cta{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-photo{display:flex;align-items:center;justify-content:center}
.hero-photo img{
  width: clamp(180px, 28vw, 260px);
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 999px;
  border: 8px solid #fff;
  box-shadow: 0 8px 30px rgba(124,58,237,.25);
  display:block;
}

.section{padding:3rem 0}
.section h2{font-size:1.8rem;margin:0 0 1rem 0}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1rem 1.25rem;margin:1rem 0}
.card-header{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.25rem}
.card-header--row{flex-direction:row;justify-content:space-between;align-items:baseline}
.meta{color:var(--muted);font-size:.95rem}

.card-list{margin:.5rem 0 0 1rem}
.card-list li{margin:.35rem 0}

.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.skill-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1rem}
.skill-box h4{margin:.25rem 0 .75rem 0}
@media (max-width: 900px){.skills-grid{grid-template-columns:1fr}}

.contact-grid{display:grid;grid-template-columns:1fr;gap:1rem}

.btn{
  --ring: rgba(124,58,237,.35);
  display:inline-block;padding:.7rem 1rem;border-radius:999px;text-decoration:none;font-weight:700;
  transition:transform .05s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  border:1px solid transparent;box-shadow:0 0 0 0 var(--ring);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:white;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-strong);box-shadow:0 0 0 8px var(--ring)}
.btn-outline{background:transparent;color:var(--fg);border-color:var(--border)}
.btn-outline:hover{box-shadow:0 0 0 8px var(--ring)}
.btn-neutral{background:#111827;color:#fff;border-color:#111827}
.btn-neutral:hover{box-shadow:0 0 0 8px var(--ring)}
.btn-linkedin{background:var(--linkedin);color:#fff;border-color:var(--linkedin)}
.btn-linkedin:hover{box-shadow:0 0 0 8px rgba(10,102,194,.25)}

.site-footer{border-top:1px solid var(--border);padding:2rem 0;background:var(--surface);color:var(--muted);text-align:center}


/* mobile padding tweaks */
@media (max-width: 480px){
  .section{padding:2rem 0}
  .hero{padding:3.5rem 0 1.25rem}
  .cta .btn{padding:.65rem .9rem;font-weight:700}
}
img{max-width:100%;height:auto}


/* Responsive video embed */
.video-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:0;overflow:hidden;box-shadow:0 6px 22px rgba(2,6,23,.06)}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}


/* Contact split: Calendly (left) + form (right) */
.contact-split{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:1.25rem;
}
.contact-left .small-muted,
.contact-right .small-muted{color:var(--muted);font-size:.9rem;margin-top:.5rem}

@media (max-width: 980px){
  .contact-split{grid-template-columns:1fr}
}

/* Form styling */
.contact-form{display:flex;flex-direction:column;gap:.75rem;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1rem 1.25rem}
.contact-form label{font-weight:600}
.contact-form input,
.contact-form textarea{
  width:100%;padding:.75rem .85rem;border-radius:12px;border:1px solid var(--border);background:#fff;font:inherit
}
.contact-form input:focus,
.contact-form textarea:focus{outline:none;box-shadow:0 0 0 6px rgba(124,58,237,.2);border-color:var(--accent)}
.contact-form button{align-self:flex-start}


/* faq styles */
#faq .card h3{margin:.25rem 0 .5rem 0;font-size:1.15rem}
#faq .card p{margin:.25rem 0}


/* services */
.muted{color:var(--muted)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.service-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1rem}
.service-card h3{margin:.25rem 0 .5rem 0;font-size:1.1rem}
.service-card ul{margin:.25rem 0 0 1rem}
@media (max-width: 900px){.services-grid{grid-template-columns:1fr}}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.post-card{display:block;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1rem;text-decoration:none;color:inherit}
.post-card h3{margin:.25rem 0 .5rem 0;font-size:1.1rem}
.post-card .post-meta{color:var(--muted);font-size:.9rem}
.post-card:hover{box-shadow:0 8px 24px rgba(2,6,23,.08)}
@media (max-width: 900px){.blog-grid{grid-template-columns:1fr}}


/* blog controls */
.blog-controls{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
#blog-search{flex:1 1 240px;padding:.6rem .75rem;border:1px solid var(--border);border-radius:12px}
.blog-filters{display:flex;gap:.5rem;flex-wrap:wrap}
.blog-filter{padding:.4rem .7rem;border:1px solid var(--border);border-radius:999px;background:var(--card);cursor:pointer}
.blog-filter.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(59,130,246,.15)}


/* Platforms grid */



.tool-text h3{margin:0 0 .2rem 0;font-size:1.05rem;line-height:1.2}
.tool-text p{margin:0;color:var(--muted);font-size:.95rem}
@media (min-width: 1024px){
  #platforms 
}


/* Tight, readable lists in skills cards */
#skills .card ul{margin:.25rem 0 0 1rem;padding:0}
#skills .card li{margin:.35rem 0;line-height:1.4}


/* Skills: exactly 3 cards per row on desktop (2 tablet, 1 mobile) */
#skills .grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width: 640px){#skills .grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width: 1024px){#skills .grid{grid-template-columns:repeat(3,1fr)}}


/* Hero tweaks for new layout */
.hero{padding:4.5rem 0 2.25rem;background:radial-gradient(100% 70% at 60% -10%, rgba(16,185,129,.06) 0%, rgba(99,102,241,.04) 30%, rgba(255,255,255,0) 60%)}
.hero .eyebrow{letter-spacing:.2em;color:#67e8f9;font-weight:800;font-size:.9rem;margin:0 0 .25rem 0}
.hero h1{font-size:clamp(1.6rem,4.2vw,2.4rem);line-height:1.1;margin:0 0 .35rem 0}
.hero .subtitle{max-width:52ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:.6rem;margin:.9rem 0 1rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:1rem;padding:0;margin:.4rem 0 0 0;list-style:none;color:var(--muted)}
.hero-meta li{display:flex;align-items:center;gap:.4rem}

.hero-name{font-weight:600;font-size:clamp(1.05rem,2.1vw,1.35rem);margin:.1rem 0 .7rem 0;letter-spacing:.02em;color:var(--muted)}


.hero-photo picture, .hero-photo img{
  display:block;
  width:100%;
  height:auto;
  border-radius:24px;
}

.hero-traits{font-size:clamp(.95rem,1.8vw,1.1rem);color:var(--muted);margin:.15rem 0 .8rem 0;letter-spacing:.01em}


/* Tag chips and notes */
.tag{
  display:inline-block;
  padding:.15rem .5rem;
  border-radius:999px;
  background:rgba(99,102,241,.12);
  color:var(--text);
  font-size:.8rem;
  font-weight:600;
}
.post-tags{margin:.4rem 0 .2rem 0}
.post-tags-inline{margin-right:.4rem}
.post-note{margin:.6rem 0 0 0;color:var(--muted);font-size:.95rem;font-style:italic}

.nav{flex-wrap:wrap}



/* Nav CTA button */
.nav .nav-cta{
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #6366f1 100%);
  color:#fff !important;
  font-weight:700;
  padding:.5rem .9rem;
  border-radius:999px;
  box-shadow: 0 6px 14px rgba(99,102,241,.25);
}
.nav .nav-cta:hover{transform:translateY(-1px); box-shadow:0 10px 20px rgba(99,102,241,.28)}
@media (max-width: 840px){ .nav .nav-cta{order: 99; margin-left:auto} }


/* ===== Nav CTA alignment rules ===== */
/* Desktop: push Contact to the far right */
@media (min-width: 1024px){
  .nav{justify-content:flex-start}
  .nav .nav-cta{margin-left:auto}
}

/* Mobile/tablet: center the whole nav (incl. Contact) */
@media (max-width: 1023px){
  .nav{justify-content:center}
  .nav .nav-cta{order:99; margin-left:0}
}



/* Hero CTA color variants */
.btn-violet{
  background: linear-gradient(135deg,#7c3aed 0%,#9333ea 45%,#6366f1 100%);
  color:#fff;
  box-shadow: 0 8px 20px rgba(99,102,241,.28);
}
.btn-violet:hover{transform:translateY(-1px); box-shadow:0 12px 24px rgba(99,102,241,.32)}

.btn-red{background:#ef4444; color:#fff}
.btn-red:hover{background:#dc2626}

.btn-black{background:#0f172a; color:#fff}
.btn-black:hover{background:#111827}

/* Tiny ring effect for Contact */
.btn-ring{position:relative}
.btn-ring::after{
  content:''; position:absolute; inset:-5px; border-radius:999px;
  box-shadow: 0 0 0 2px rgba(99,102,241,.25);
  pointer-events:none;
}



/* Tools / Platforms grid */
.tool-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:1rem;
  margin-top:1rem
}
@media (max-width: 1024px){
  .tool-grid{grid-template-columns: repeat(3, minmax(0,1fr));}
}
@media (max-width: 720px){
  .tool-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
.tool-card{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:1rem;
  border:1px solid var(--border, #e5e7eb);
  border-radius:14px;
  background:var(--card, #fff);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.tool-logo-wrap{
  width:44px; height:44px; flex:0 0 44px;
  display:grid; place-items:center;
  border-radius:10px;
  background:var(--surface, #f6f7fb);
  overflow:hidden;
}
.tool-logo-wrap img{
  width:100%; height:100%; object-fit:contain;
}
.tool-text h3{
  margin:0; font-size:1rem; line-height:1.2;
}
.tool-text p{
  margin:.1rem 0 0; color:var(--muted,#6b7280); font-size:.9rem;
}


/* === Tools: mobile font overlap fix (scoped) === */
@media (max-width: 560px){
  #tools .tool-card { padding: .85rem; gap: .75rem; }
  #tools .tool-logo-wrap { width: 40px; height: 40px; flex: 0 0 40px; }
  #tools .tool-text h3 { font-size: clamp(.9rem, 3.8vw, 1rem); line-height: 1.15; }
  #tools .tool-text p { font-size: clamp(.8rem, 3.2vw, .95rem); line-height: 1.25; }
}
@media (max-width: 400px){
  #tools .tool-logo-wrap { width: 36px; height: 36px; flex: 0 0 36px; }
  #tools .tool-text h3 { font-size: clamp(.85rem, 3.6vw, .95rem); }
  #tools .tool-text p { font-size: clamp(.78rem, 3.1vw, .9rem); }
}
/* === end Tools mobile fix === */

/* Mobile-only line break for tight headings */
.mobile-break{display:none}
@media (max-width:560px){.mobile-break{display:inline}}

/* Theme: dark */
[data-theme="dark"]{--bg:#0b1020;--text:#e5eaff;--card:#0f152b;--surface:#141a33;--border:#2a3355;--muted:#93a1c6;--accent:#a78bfa}
[data-theme="dark"] .card,[data-theme="dark"] .tool-card{background:var(--card);border-color:var(--border)}
[data-theme="dark"] a{color:var(--accent)}

/* Theme toggle button */
.theme-toggle{background:none;border:1px solid var(--border);border-radius:10px;padding:.35rem .5rem;margin-left:.5rem;cursor:pointer;line-height:1}
.theme-toggle:focus{outline:2px solid var(--accent);outline-offset:2px}



/* === Dark mode readability tweaks === */
[data-theme="dark"]{
  --bg:#0d1321;
  --text:#f3f4ff;
  --muted:#c7d2fe;
  --border:#3b4a7a;
  --card:#101830;
  --surface:#131c37;
  --accent:#b79cff;
  --link:#a5b4fc;
  --link-hover:#c7d2fe;
}
/* Header uses slight glass effect for contrast */
.site-header{background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
[data-theme="dark"] .site-header{background:rgba(13,19,33,.86);border-bottom:1px solid var(--border)}
/* Ensure nav links are full opacity in dark */
[data-theme="dark"] .nav a{opacity:1}
/* Paragraphs and list items clarity */
[data-theme="dark"] p,[data-theme="dark"] li{color:var(--text)}
/* Subtitles / muted text slightly brighter in dark */
.subtitle,.muted,.meta{color:var(--muted)}
/* Buttons: stronger outlines in dark */
[data-theme="dark"] .btn-outline{border-color:#4b5aa0}
/* Tool cards: clearer borders */
[data-theme="dark"] .tool-card{border-color:#3b4a7a}




/* === Dark mode text color fixes (high contrast) === */
[data-theme="dark"]{
  --bg:#0b1020;
  --text:#f1f4ff;      /* brighter */
  --muted:#c5cffc;     /* brighter muted */
  --border:#3a4a7a;
  --card:#0f1630;
  --surface:#131b35;
  --accent:#b79cff;
  --link:#c3d1ff;
  --link-hover:#e0e7ff;
}
/* Headings & body text */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6{ color:#ffffff; }
[data-theme="dark"] body,
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] .card p,
[data-theme="dark"] .card li,
[data-theme="dark"] .hero p,
[data-theme="dark"] .site-hero p{ color:var(--text); }
/* Subtitles / meta */
[data-theme="dark"] .subtitle,
[data-theme="dark"] .muted,
[data-theme="dark"] .meta{ color:var(--muted); }
/* Links */
[data-theme="dark"] a{ color:var(--link); }
[data-theme="dark"] a:hover{ color:var(--link-hover); }
/* Nav links and logo */
[data-theme="dark"] .nav a{ color:var(--text); opacity:1; }
[data-theme="dark"] .logo{ color:#cbb6ff; }
/* Buttons (outline readable) */
[data-theme="dark"] .btn-outline{ color:var(--text); border-color:#4b5aa0; }
/* Ensure bullets are visible */
[data-theme="dark"] ul li::marker{ color:var(--muted); }
/* Tool cards text */
[data-theme="dark"] .tool-text h3{ color:#ffffff; }
[data-theme="dark"] .tool-text p{ color:var(--muted); }


/* Disable nav active underline */
.nav a.active{border:0 !important; padding-bottom:0 !important; box-shadow:none !important; text-decoration:none !important;}
.nav a:active{border:0 !important; box-shadow:none !important; text-decoration:none !important;}
.nav a:focus{box-shadow:none !important; outline:none;}


/* === Theme-aware radiant gradient for hero title === */
:root{
  --radiant-1: #7C3AED; /* violet */
  --radiant-2: #60A5FA; /* soft blue */
  --radiant-3: #A78BFA; /* light violet */
}
[data-theme="dark"]{
  --radiant-1: #A78BFA; /* lighter violet for dark bg */
  --radiant-2: #60A5FA; /* soft blue */
  --radiant-3: #93C5FD; /* light sky blue */
}
.radiant-text{
  background-image: linear-gradient(90deg, var(--radiant-1), var(--radiant-2), var(--radiant-3));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}
@media (prefers-reduced-motion: no-preference){
  .radiant-text{ animation: sheen 6s ease-in-out infinite; }
}
@keyframes sheen{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* === Name emphasis === */
.my-name{ font-weight: 900; color: #0E1326; }
[data-theme="dark"] .my-name{ color: #FFFFFF; }


.site-footer a{color:var(--link)}
.site-footer a:hover{color:var(--link-hover)}


/* === Dark mode form readability tweaks === */
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .contact-form select {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
  caret-color: var(--link);
}

[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder {
  color: #cbd5e1; /* brighter placeholder for dark bg */
  opacity: .95;
}

/* === Dark mode button styling === */
[data-theme="dark"] .btn-primary {
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: #0b1020; /* high contrast label on violet */
}

[data-theme="dark"] .btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 22px rgba(139,92,246,.35);
}

/* === Dark mode star background (final, high visibility) === */
html[data-theme="dark"] body{
  /* Keep dark base */
  background-color: var(--bg);

  /* Star field (repeating, varied sizes) */
  background-image:
    radial-gradient(1px 1px at 22px 28px, rgba(255,255,255,.95), transparent 55%),
    radial-gradient(1px 1px at 120px 160px, rgba(255,255,255,.70), transparent 55%),
    radial-gradient(1px 1px at 240px 90px, rgba(255,255,255,.60), transparent 55%),
    radial-gradient(1.5px 1.5px at 80px 210px, rgba(255,255,255,.50), transparent 60%),
    radial-gradient(2px 2px at 300px 260px, rgba(183,156,255,.45), transparent 65%),
    radial-gradient(1px 1px at 40px 260px, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(1.5px 1.5px at 180px 44px, rgba(183,156,255,.35), transparent 65%),
    radial-gradient(1px 1px at 260px 180px, rgba(255,255,255,.45), transparent 60%);

  background-size:
    320px 320px,
    420px 420px,
    560px 560px,
    680px 680px,
    900px 900px,
    520px 520px,
    760px 760px,
    640px 640px;

  background-position:
    0 0,
    140px 80px,
    60px 180px,
    220px 40px,
    0 0,
    180px 220px,
    90px 300px,
    260px 140px;

  background-repeat: repeat;
  background-attachment: fixed;
}

/* === Dark mode stars (overlay layer so it stays visible behind sections) === */
html[data-theme="dark"] body{
  position: relative;
}

html[data-theme="dark"] body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Dense star field with varied sizes + colors (no canvas needed) */
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.95) 0, rgba(255,255,255,0) 2px),
    radial-gradient(1px 1px at 90px 120px, rgba(255,255,255,.75) 0, rgba(255,255,255,0) 2px),
    radial-gradient(1px 1px at 160px 60px, rgba(255,255,255,.65) 0, rgba(255,255,255,0) 2px),
    radial-gradient(1px 1px at 220px 180px, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 2px),

    radial-gradient(1.5px 1.5px at 40px 200px, rgba(255,255,255,.70) 0, rgba(255,255,255,0) 3px),
    radial-gradient(1.5px 1.5px at 140px 240px, rgba(255,255,255,.60) 0, rgba(255,255,255,0) 3px),
    radial-gradient(2px 2px at 260px 120px, rgba(167,139,250,.50) 0, rgba(167,139,250,0) 3.5px),
    radial-gradient(2px 2px at 320px 280px, rgba(56,189,248,.35) 0, rgba(56,189,248,0) 3.5px);

  background-size:
    180px 180px,
    260px 260px,
    320px 320px,
    420px 420px,
    560px 560px,
    700px 700px,
    920px 920px,
    1100px 1100px;

  background-position:
    0 0,
    80px 120px,
    140px 40px,
    220px 180px,
    40px 260px,
    180px 320px,
    0 0,
    260px 140px;

  background-repeat: repeat;
  opacity: .78;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.10));
}

/* Keep content above the star layer */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] main,
html[data-theme="dark"] .site-footer{
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference){
  html[data-theme="dark"] body::before{
    animation: starsTwinkle 8s ease-in-out infinite;
  }
  @keyframes starsTwinkle{
    0%,100%{ opacity: .72; }
    50%{ opacity: .88; }
  }
}

/* Medical VA blog page images */
.blog-hero-image-wrap{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:1rem;
  margin:1.25rem 0;
  box-shadow:var(--shadow);
}
.blog-hero-image,
.article-image-grid img{
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  border:0;
  border-radius:16px;
  box-shadow:none;
  display:block;
}
.blog-article h2{
  margin-top:1.75rem;
}
.article-image-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1rem;
  margin:1.25rem 0;
}
.article-image-grid figure{
  margin:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:.75rem;
}
@media (max-width: 760px){
  .article-image-grid{grid-template-columns:1fr}
}


/* Blog card images */
.post-card{
  display:block;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:0;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
}
.post-card-thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.post-card-content{
  padding:1rem;
}
.post-card h3{margin:.25rem 0 .5rem 0;font-size:1.1rem}
.post-card p{margin:0 0 .75rem 0}
.post-card .post-meta{color:var(--muted);font-size:.9rem}
.post-card:hover{box-shadow:0 8px 24px rgba(2,6,23,.08)}

/* Blog article hero and inline images */
.blog-hero-image,
.article-image-grid img{
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border:0;
  border-radius:16px;
  box-shadow:none;
  display:block;
}