/* Modern, minimal CSS for one-page personal site */
:root {--bg:#0b0c10;--surface:#111218;--muted:#1a1c24;--border:#232634;--text:#e6e8ee;--text-dim:#a9afbc;--accent:#7c3aed;--accent-2:#06b6d4;--ok:#10b981;--warn:#f59e0b;--error:#ef4444;--shadow:0 10px 30px rgba(0,0,0,.35);--radius:14px;--radius-sm:10px;--radius-lg:22px;--container:1200px}
@media (prefers-color-scheme: light){:root{--bg:#f8fafc;--surface:#ffffff;--muted:#f1f5f9;--border:#e5e7eb;--text:#0b0c10;--text-dim:#495061;--shadow:0 10px 30px rgba(2,6,23,.08)}}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:radial-gradient(1px 1px at 25% 20%,#fff,transparent),radial-gradient(1px 1px at 60% 40%,#fff,transparent),radial-gradient(1px 1px at 80% 70%,#fff,transparent);background-size:auto}
*{box-sizing:border-box}html,body{padding:0;margin:0}html{scroll-behavior:smooth}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:var(--text);background:radial-gradient(1200px 600px at 80% -10%,rgba(124,58,237,.15),transparent),radial-gradient(800px 400px at -20% 10%,rgba(6,182,212,.12),transparent),var(--bg);line-height:1.3}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);padding:0 24px;margin:0 auto}
.section{padding:72px 0}
.grid{display:grid;gap:20px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(2,1fr)}.grid.cols-2{grid-template-columns:1fr}}
@media (max-width:640px){.grid{gap:14px}.section{padding:56px 0}}
.header{position:sticky;top:0;z-index:30;background:color-mix(in oklab,var(--bg) 86%, transparent);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-name{font-family:'Bricolage Grotesque', Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-weight:700;font-size:clamp(20px,2.6vw,28px);letter-spacing:-.01em}
.brand .dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 8px 18px rgba(124,58,237,.35)}
.nav-links{display:flex;gap:10px;align-items:center}

h1{font-family:'Inter Tight', Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-size:clamp(28px,5vw,44px);line-height:1.12;margin:0 0 12px}
h2{font-size:clamp(22px,4vw,30px);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.h2-icon{width:22px;height:22px;color:var(--accent)}
h3{font-size:18px;margin:0 0 8px}
.hero-name{font-family:'Inter Tight', Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-weight:300;font-size:clamp(48px,12vw,140px);line-height:.9;letter-spacing:-.02em;margin:0 0 10px}
.hero-name span{display:block}

.lead{font-size:clamp(16px,2.2vw,18px);color:var(--text-dim)}
.small{font-size:13px;color:var(--text-dim)}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
.muted{color:var(--text-dim)}

.hero{padding:88px 0 40px;position:relative;overflow:visible}
.hero-card{border:1px solid var(--border);background:linear-gradient(180deg,color-mix(in oklab,var(--surface) 92%, transparent),color-mix(in oklab,var(--muted) 80%, transparent));box-shadow:var(--shadow);border-radius:var(--radius-lg);padding:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
/* Hero layout with photo placeholder */
/* Name + photo row inside hero */
.hero-row{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.hero-photo-inline{width:240px;height:auto;display:block;border:none;background:transparent;box-shadow:none}

.about-photo img{width:80%;height:auto;display:block;border:none;background:transparent;border-radius:16px}
#about .container{display:grid;grid-template-columns:minmax(220px,40%) 1fr;align-items:start;gap:20px}
#about .about-photo{grid-column:1;grid-row:1;justify-self:start;align-self:start}
#about .container .stack{grid-column:2;grid-row:1;align-self:start}
@media (max-width:800px){#about .container{grid-template-columns:1fr}#about .about-photo,#about .container .stack{grid-column:1;grid-row:auto}}

/* Contact section right-side circular photo */
.contact-photo{justify-self:end;align-self:center}
.contact-photo img{width:clamp(160px,28vw,320px);aspect-ratio:1/1;border-radius:999px;object-fit:cover;display:block;border:none;background:transparent}


@media (max-width:800px){.hero .container{display:block}}
.hero-photo{width:100%;aspect-ratio:1/1;border-radius:16px;border:1px solid var(--border);background:linear-gradient(135deg,color-mix(in oklab,var(--muted) 86%, transparent),color-mix(in oklab,var(--surface) 96%, transparent));box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-family:'Bricolage Grotesque',Inter,system-ui;font-weight:700;font-size:clamp(28px,6vw,44px)}
.hero .section{grid-column:1/-1}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:color-mix(in oklab,var(--surface) 96%, transparent);color:var(--text);transition:.2s ease;box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translateY(-1px);border-color:color-mix(in oklab,var(--border) 70%, var(--text) 30%)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;border-color:transparent}
.btn-primary:hover{filter:saturate(110%)}
.btn-ghost{background:transparent}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--muted);border:1px solid var(--border)}
.badge svg{width:14px;height:14px}

.card{border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,color-mix(in oklab,var(--accent) 45%, transparent), color-mix(in oklab,var(--accent-2) 45%, transparent)) border-box;border-radius:var(--radius);padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.card:hover{border-color:color-mix(in oklab,var(--border) 70%, var(--text) 30%)}
.kicker{letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:var(--text-dim)}

.logo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:14px}
.logo-badge{display:flex;align-items:center;justify-content:center;height:54px;border-radius:12px;border:1px dashed var(--border);background:#fff;font-weight:600;color:var(--text-dim)}
.logo-badge .mini{font-size:12px;font-weight:600;opacity:.9}
.logo-badge img,.logo-badge svg{max-height:26px;max-width:90%;height:auto;width:auto;object-fit:contain;opacity:.9}
.logo-badge img[alt="CredStart logo"]{max-height:28px}

/* Experience card logos */
.card.stack{position:relative}
.exp-logo{position:absolute;top:14px;right:14px;width:106px;height:56px;border-radius:12px;background:linear-gradient(135deg,color-mix(in oklab,var(--muted) 86%, transparent),color-mix(in oklab,var(--surface) 96%, transparent));border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-weight:700;font-size:14px;user-select:none}
.exp-logo img{max-height:30px;max-width:90%;opacity:.95;filter:saturate(1.05)}
.card.stack h3{padding-right:84px}


/* Section tints (alternating subtle gradients) */
.section.tint-1{background:radial-gradient(900px 500px at -10% 10%, color-mix(in oklab,var(--accent) 18%, transparent), transparent),radial-gradient(700px 400px at 110% 0%, color-mix(in oklab,var(--accent-2) 14%, transparent), transparent)}
.section.tint-2{background:radial-gradient(900px 500px at 110% 10%, color-mix(in oklab,var(--accent-2) 18%, transparent), transparent),radial-gradient(700px 400px at -10% 0%, color-mix(in oklab,var(--accent) 14%, transparent), transparent)}

/* Card polish */
.card{transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(0,0,0,.16)}

/* Pills hover */
.pill{transition:transform .2s ease, border-color .2s ease, background-color .2s ease}
.pill:hover{transform:translateY(-1px);border-color:color-mix(in oklab,var(--border) 60%, var(--text) 40%)}

/* Hero floating gradient blobs */
.hero::before,.hero::after{content:"";position:absolute;inset:auto;pointer-events:none;filter:blur(40px);opacity:.6}
.hero::before{top:-40px;left:-80px;width:260px;height:260px;background:radial-gradient(closest-side, color-mix(in oklab,var(--accent) 40%, transparent), transparent);transition:transform .4s ease;transform:translate(var(--hx,0px), var(--hy,0px))}
.hero::after{top:-20px;right:-60px;width:220px;height:220px;background:radial-gradient(closest-side, color-mix(in oklab,var(--accent-2) 40%, transparent), transparent);transition:transform .4s ease;transform:translate(calc(var(--hx,0px) * -0.6), calc(var(--hy,0px) * 0.6))}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(18px)}}
@keyframes floatX{0%,100%{transform:translateX(0)}50%{transform:translateX(-18px)}}
@media (prefers-reduced-motion: reduce){
  .hero::before,.hero::after{transition:none}
}

/* Scroll reveal utility (paired with small JS) */
.reveal-init{opacity:0;transform:translateY(10px) scale(.98)}
.reveal-in{opacity:1;transform:none;transition:opacity .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1)}



.pills{display:flex;flex-wrap:wrap;gap:8px}
/* One-column Experience layout */
.grid.cols-1{grid-template-columns:1fr}

/* Decorative list bullets for role duties */
ul.stack-sm{list-style:none;margin:0;padding:0}

.stack-sm li{position:relative;padding-left:18px}
.stack-sm li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2));opacity:.7}

/* Per-tech pill color mapping (borders only for subtlety) */
.pill-angular{border-color:#dd1b16}
.pill-react{border-color:#61dafb}
.pill-ionic{border-color:#3880ff}
.pill-capacitor{border-color:#2e2e2e}
.pill-react-native{border-color:#61dafb}
.pill-graphql{border-color:#e10098}
.pill-rest{border-color:#16a34a}
.pill-json{border-color:#f59e0b}
.pill-soap{border-color:#8b5cf6}
.pill-xml{border-color:#f97316}
.pill-aws{border-color:#f90}
.pill-cloudflare{border-color:#f48120}
.pill-mongo{border-color:#10a760}
.pill-mysql{border-color:#00758f}
.pill-swift{border-color:#f05138}
.pill-kotlin{border-color:#7f52ff}
.pill-visionos{border-color:#0ea5e9}
.pill-redux{border-color:#764abc}
.pill-ngrx{border-color:#b51d53}
.pill-test{border-color:#22c55e}
.pill-typescript{border-color:#3178c6}
.pill-node{border-color:#339933}
.pill-supabase{border-color:#3ecf8e}

.pill-ci{border-color:#3b82f6}

.pill{padding:6px 10px;border-radius:999px;background:var(--muted);border:1px solid var(--border);font-size:13px}
/* Subtle color accents for technology pills */
.pills .pill:nth-child(6n+1){border-color:color-mix(in oklab,#7dd3fc, var(--border) 70%)}
.pills .pill:nth-child(6n+2){border-color:color-mix(in oklab,#a7f3d0, var(--border) 70%)}
.pills .pill:nth-child(6n+3){border-color:color-mix(in oklab,#fbcfe8, var(--border) 70%)}
.pills .pill:nth-child(6n+4){border-color:color-mix(in oklab,#fde68a, var(--border) 70%)}
.pills .pill:nth-child(6n+5){border-color:color-mix(in oklab,#c7d2fe, var(--border) 70%)}
.pills .pill:nth-child(6n+6){border-color:color-mix(in oklab,#fca5a5, var(--border) 70%)}

.meta{display:flex;gap:10px;flex-wrap:wrap}
.meta .item{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:var(--muted);border:1px solid var(--border)}
.meta svg{width:16px;height:16px}

.footer{padding:36px 0;border-top:1px solid var(--border);color:var(--text-dim)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Links styling */
.link{display:inline-flex;gap:8px;align-items:center;color:inherit}
.link:hover svg{transform:translateX(2px)}
.link svg{width:16px;height:16px;transition:.15s ease}

/* Responsive tweaks */
.stack-sm{display:flex;flex-direction:column;gap:12px}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-lg{display:flex;flex-direction:column;gap:24px}

hr.sep{border:none;border-top:1px solid var(--border);margin:28px 0}