/* =============================
       BLURPLE THEME WITH TOGGLE
       ============================= */
    :root {
      /* core blurple palette */
      --blurple: #5865F2;      /* primary */
      --blurple-700: #4752C4;  /* hover */
      --blurple-300: #8EA1E1;  /* subtle */

      /* dark tokens */
      --bg-dark: #0b0c10;
      --panel-dark: #11121a;
      --line-dark: #26283a;
      --text-dark: #eef1ff;
      --muted-dark: #a7aecc;

      /* light tokens */
      --bg-light: #ffffff;
      --panel-light: #ffffff;
      --line-light: #e5e9ff;
      --text-light: #141622;
      --muted-light: #58607a;

      --radius: 16px;
      --shadow: 0 10px 30px rgba(0,0,0,.18);
      --container: 1120px;
    }

    /* theme maps */
    [data-theme="dark"] {
      --bg: linear-gradient(180deg, var(--bg-dark), #0e1020 55%, var(--bg-dark));
      --panel: var(--panel-dark);
      --line: var(--line-dark);
      --text: var(--text-dark);
      --muted: var(--muted-dark);
      --accent: var(--blurple);
      --accent-hover: var(--blurple-700);
      --accent-subtle: rgba(88,101,242,.14);
      --link: #fff;
      --btn-on: #fff;
    }
    [data-theme="light"] {
      --bg: linear-gradient(180deg, var(--bg-light), #f7f8ff);
      --panel: var(--panel-light);
      --line: var(--line-light);
      --text: var(--text-light);
      --muted: var(--muted-light);
      --accent: var(--blurple);
      --accent-hover: var(--blurple-700);
      --accent-subtle: rgba(88,101,242,.10);
      --link: var(--blurple);
      --btn-on: #fff;
    }

    /* base */
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;background:var(--bg);color:var(--text)}
    a{color:var(--link);text-decoration:none}
    a:hover{text-decoration:underline}
    .container{max-width:var(--container);margin:0 auto;padding:0 24px}

    /* atoms */
    .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
    .pad{padding:24px}
    .pill{display:inline-block;padding:.4rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--accent-subtle);color:var(--text);font-size:.85rem}
    .badge{border:1px solid var(--line);background:var(--accent-subtle);border-radius:999px;padding:.25rem .6rem;font-size:.75rem;color:var(--muted)}
    .btn{display:inline-flex;gap:.6rem;align-items:center;padding:.7rem 1rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text)}
    .btn.primary{background:var(--accent);border-color:transparent;color:var(--btn-on)}
    .btn.primary:hover{background:var(--accent-hover)}
    .btn.ghost:hover{background:var(--accent-subtle)}

    /* nav */
    .nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);backdrop-filter:blur(10px);background:rgba(0,0,0,.18)}
    [data-theme="light"] .nav{background:rgba(255,255,255,.6)}
    .nav-inner{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
    .brand{display:flex;gap:12px;align-items:center}
    .logo{width:30px;height:30px;border-radius:10px;background:linear-gradient(180deg,var(--accent),var(--accent-hover))}
    .brand strong{letter-spacing:.2px}
    .brand .sub{color:var(--muted);font-size:.85rem}
    .nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
    .nav a{padding:.5rem .9rem;border-radius:999px;color:var(--muted)}
    .nav a:hover,.nav a.active{background:var(--accent-subtle);color:var(--text)}

    /* hero */
    .hero{padding:64px 0 40px}
    .h1{font-weight:750;letter-spacing:-.02em;font-size:clamp(28px,3.4vw,44px);line-height:1.2;margin:0}
    .lead{color:var(--muted);max-width:56ch}
    .metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
    .metric{border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center;background:rgba(255,255,255,.02)}
    .metric .v{font-weight:800;font-size:1.35rem}
    .metric .l{color:var(--muted);font-size:.8rem}

    /* brands */
    .brand-list{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
    @media (max-width:1000px){.brand-list{grid-template-columns:repeat(3,1fr)}}
    @media (max-width:640px){.brand-list{grid-template-columns:repeat(2,1fr)}}
    .brand-card{padding:18px;text-align:center}
    .brand-card:hover{transform:translateY(-2px)}
    .brand-card .n{font-weight:600}
    .brand-card .t{font-size:.8rem;color:var(--muted)}

    /* layout */
    section{scroll-margin-top:90px;padding:56px 0}
    .section-title{display:flex;align-items:center;gap:10px;margin:0 0 16px}

    /* work */
    .work-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
    @media (max-width:900px){.work-grid{grid-template-columns:1fr}}
    .work-card h3{margin:0 0 4px}
    .work-card p{color:var(--muted);margin:8px 0 0}

    /* footer */
    footer{border-top:1px solid var(--line);padding:24px 0;color:var(--muted);text-align:center}

/* === Recruiter retention enhancements === */
.case-meta { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 4px; }
.case-meta .badge { font-weight:600; }

.skills-list { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 16px; }
.skills-list .badge { background:var(--accent-subtle); color:var(--text); }

.cta-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

.sticky-cta {
  position:sticky; bottom:0; z-index:60;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.25);
  border-top:1px solid var(--line);
  padding:10px 0;
}
[data-theme="light"] .sticky-cta { background: rgba(255,255,255,.6); }

.project-card-footer { margin-top:8px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.project-card-footer .badge { background:var(--accent-subtle); }

.nextprev { display:flex; justify-content:space-between; gap:10px; margin-top:20px; }
.nextprev a { display:inline-flex; align-items:center; gap:6px; }


/* === Tasteful color enhancements === */
:root{
  --teal: #2ec8c8;
  --teal-700:#249c9c;
  --pink:#ee6cff;
  --pink-700:#c24eda;
  --shadow-accent: 0 14px 34px rgba(88,101,242,.18);
}

/* Gradient headline */
.gradient-title{
  background: linear-gradient(90deg, var(--blurple), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Section title underline */
.section-title{
  position: relative;
  padding-bottom: 6px;
}
.section-title::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:72px; height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--blurple), var(--pink));
  opacity:.85;
}

/* Card gradient top edge + hover */
.card{ position:relative; overflow:hidden; }
.card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, var(--blurple), var(--teal));
  opacity:.9;
}
.card:hover{ box-shadow: var(--shadow-accent); transform: translateY(-1px); }

/* Colored pills */
.pill.teal{ background: rgba(46,200,200,.12); border-color: rgba(46,200,200,.35); }
.pill.pink{ background: rgba(238,108,255,.12); border-color: rgba(238,108,255,.35); }

/* Link underline animation */
a{
  text-decoration:none;
  background-image: linear-gradient(90deg, var(--blurple), var(--pink));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s ease;
}
a:hover{ text-decoration:none; background-size: 100% 2px; }

/* Active nav chip */
.nav a.active{
  background: linear-gradient(90deg, rgba(88,101,242,.18), rgba(238,108,255,.18));
  color: var(--text);
}

/* Soft hero backdrop */
.hero{ position:relative; }
.hero::after{
  content:"";
  position:absolute; inset:-10% -10% auto -10%; height:60%;
  background: radial-gradient(60% 60% at 20% 20%, rgba(88,101,242,.18), transparent 60%),
              radial-gradient(50% 50% at 90% 10%, rgba(46,200,200,.12), transparent 60%);
  pointer-events:none; z-index:-1;
}

/* Small brand logo next to Work titles */
.logo-sml{ width:24px; height:24px; border-radius:6px; vertical-align:middle; margin-right:8px; }


.brand-card .brand-logo{ width:56px; height:56px; display:block; margin:0 auto 8px; border-radius:12px; }