:root{
  --bg:#111317; --panel:#2b2a2a; --surface:#1a1d23; --line:#33373f; --text:#eef0f3; --muted:#a8aeb8;
  --accent:#b985f7; --accent-ink:#1a0b2e; --ring:#fbbf24;
  --font:"Poppins","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
:root[data-theme="light"]{
  --bg:#f4f5f8; --panel:#e6e8ee; --surface:#ffffff; --line:#cfd4de; --text:#14171c; --muted:#4b5563;
  --accent:#7c3aed; --accent-ink:#ffffff; --ring:#d99a00;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:300 1.0625rem/1.7 var(--font)}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:70rem;margin:0 auto;padding:0 1.5rem}

/* Nav */
header.top{position:sticky;top:0;z-index:10;background:var(--panel)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem;max-width:none;padding:0 1.5rem}
.brand img{height:48px;width:auto;display:block}
nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--muted);font-size:.95rem}
nav a:hover{color:var(--text)}
nav .yt{display:inline-block;width:2rem;height:1.4rem;background:#f61c0d;border-radius:.4rem;position:relative}
nav .yt::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);border-left:.5rem solid #fff;border-top:.3rem solid transparent;border-bottom:.3rem solid transparent}
.switch{width:3.6rem;height:1.9rem;border-radius:999px;border:1px solid var(--line);background:linear-gradient(90deg,#1b2a3d,#2e4a3a);position:relative;cursor:pointer;padding:0}
.switch::after{content:"";position:absolute;top:.2rem;right:.2rem;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--accent);transition:transform .2s}
:root[data-theme="light"] .switch{background:linear-gradient(90deg,#bcd7ff,#ffe9a8)}
:root[data-theme="light"] .switch::after{transform:translateX(-1.6rem)}

/* Hero */
.hero{position:relative;min-height:calc(100vh - 4rem);display:grid;place-items:center;text-align:center;overflow:hidden;padding:3rem 1rem}
#bg{position:absolute;inset:0;width:100%;height:100%}
.hero .in{position:relative;z-index:1}
.hi{font-size:1.6rem;font-weight:400;margin:0 0 1rem}
.hi b{font-weight:600}
.greeting-wave{display:inline-block;width:1.2em;height:1.2em;object-fit:contain;vertical-align:-.22em}
.avatar{display:block;margin:0 auto 1.6rem;width:200px;height:200px;border-radius:50%;object-fit:cover;border:7px solid var(--ring);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.role{font-size:1.5rem;margin:0 0 .75rem;min-height:2.4em}
.role b{font-weight:400;border-right:2px solid var(--accent);padding-right:2px}
.pitch{max-width:36rem;margin:0 auto 1.5rem;color:var(--muted)}
.pitch strong{color:var(--text);font-weight:600}
.actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem}
.btn{display:inline-block;padding:.7rem 1.4rem;border-radius:999px;border:1px solid var(--accent);color:var(--text);text-decoration:none;font:400 1rem var(--font);background:none;cursor:pointer}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn:hover{transform:translateY(-1px)}
.social{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.social a{width:3rem;height:3rem;border-radius:50%;background:var(--surface);display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.social i{width:1.5rem;height:1.5rem;background:var(--c,#fff);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.social svg{width:1.5rem;height:1.5rem;color:var(--accent)}
.social a:hover{outline:2px solid var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Sections */
section{padding:4rem 0}
h2{font:600 clamp(1.7rem,4vw,2.3rem)/1.15 var(--font);margin:0 0 .5rem}
h2::after{content:"";display:block;width:3rem;height:3px;background:var(--accent);margin-top:.6rem;border-radius:2px}
.sub{color:var(--muted);margin:1rem 0 2rem;max-width:38rem}
.areas,.projects{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.area,.card{background:var(--surface);border:1px solid var(--line);border-radius:.9rem;padding:1.5rem}
.area h3,.card h3{font:600 1.15rem var(--font);margin:0 0 .5rem}
.area p,.card p{margin:0 0 .9rem;color:var(--muted);font-size:.98rem}
.area ul{margin:0;padding-left:1.1rem}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.filters button{font:400 .92rem var(--font);background:none;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.3rem .9rem;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.card{display:flex;flex-direction:column;gap:.4rem}
.card.ph{border-style:dashed}
.tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:auto}
.tags span{font-size:.82rem;border:1px solid var(--line);border-radius:999px;padding:.05rem .6rem;color:var(--muted)}
.card a{color:var(--accent)}

/* Footer / contact */
.foot{background:var(--panel);padding:3rem 0 2rem}
.quote{text-align:center;margin:0 0 3rem;font-size:.98rem}
.quote q{display:block;font-size:2rem;line-height:1;margin-bottom:.4rem;quotes:"\201C" "\201D"}
.contact{display:grid;gap:2.5rem;grid-template-columns:1fr;align-items:center}
@media(min-width:800px){.contact{grid-template-columns:1fr 1fr}}
.mascot{width:100%;max-width:22rem;justify-self:center}
form{display:grid;gap:1.1rem;max-width:26rem;width:100%;justify-self:center}
form h3{font:400 1.4rem var(--font);text-align:center;margin:0;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px}
input,textarea{font:inherit;font-size:.95rem;color:var(--text);background:transparent;border:0;border-bottom:2px solid var(--accent);padding:.7rem .6rem;width:100%;border-radius:0}
textarea{min-height:5rem;resize:vertical}
form .btn{justify-self:center;min-width:14rem;background:var(--accent);color:var(--accent-ink);font-size:1.15rem}
#status{min-height:1.5rem;text-align:center;color:var(--muted)}
.foot .social{margin-top:2.5rem}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:hover{transform:none}}

/* Enhancements */
#progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#e91e63,var(--accent),#29b6f6);z-index:20}
.hi b{background:linear-gradient(90deg,var(--accent),#29b6f6);-webkit-background-clip:text;background-clip:text;color:transparent}
.cue{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:1;color:var(--muted);text-decoration:none;font-size:.85rem}
.cue::after{content:"";display:block;width:10px;height:10px;margin:.3rem auto 0;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px) rotate(45deg)}}
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.rv.in{opacity:1;transform:none}
.area,.card{transition:border-color .2s,transform .2s,box-shadow .2s}
.area:hover,.card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));counter-reset:s}
.step{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:.9rem;padding:1.5rem 1.5rem 1.5rem 4rem;position:relative}
.step::before{content:counter(s);position:absolute;left:1.25rem;top:1.4rem;width:2rem;height:2rem;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:600}
.step h3{font:600 1.1rem var(--font);margin:0 0 .3rem}
.step p{margin:0;color:var(--muted);font-size:.96rem}
.meta{display:flex;gap:.9rem;color:var(--muted);font-size:.82rem;margin-top:.2rem}
#top{position:fixed;right:1.2rem;bottom:1.2rem;width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid var(--accent);background:var(--panel);color:var(--text);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s;z-index:15;font-size:1.1rem}
#top.on{opacity:1;pointer-events:auto}
.note{color:var(--muted);font-size:.85rem;margin-top:1rem}
@media(prefers-reduced-motion:reduce){.cue::after{animation:none}.rv{opacity:1;transform:none;transition:none}.area:hover,.card:hover{transform:none}}

/* More */
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;z-index:30;border-radius:0 0 .5rem 0}
.skip:focus{left:0}
.strip{overflow:hidden;border-block:1px solid var(--line);background:var(--panel);padding:.9rem 0}
.strip .track{display:flex;gap:.8rem;width:max-content;animation:slide 40s linear infinite}
.strip:hover .track{animation-play-state:paused}
.strip span{border:1px solid var(--line);border-radius:999px;padding:.25rem 1rem;color:var(--muted);font-size:.92rem;white-space:nowrap}
.strip span:nth-child(4n+1){border-color:#e91e63}.strip span:nth-child(4n+2){border-color:#29b6f6}.strip span:nth-child(4n+3){border-color:#26c281}.strip span:nth-child(4n){border-color:#f6b93b}
@keyframes slide{to{transform:translateX(-50%)}}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem 1rem;max-width:70rem}
.faq details{border-bottom:1px solid var(--line);padding:1rem 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:.7rem 0 0;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.strip{overflow-x:auto}.strip .track{animation:none}}

/* Developer look */
body{background-image:radial-gradient(color-mix(in srgb,var(--line) 75%,transparent) 1px,transparent 1px);background-size:26px 26px}
h2{font-family:var(--font)}
h2::before{content:"// ";font:400 .6em var(--mono);color:var(--accent);margin-right:.2rem}
code{font-family:var(--mono);color:var(--accent)}
.hero{background:linear-gradient(180deg,#0a0c10,var(--bg))}
:root[data-theme="light"] .hero{background:var(--bg)}
.hero-grid{display:grid;gap:2.5rem;grid-template-columns:1fr;align-items:center;width:100%;max-width:72rem;margin:0 auto;padding:0 1.5rem}
@media(min-width:920px){.hero-grid{grid-template-columns:1.05fr 1fr;text-align:left}.hero-grid .actions,.hero-grid .social{justify-content:flex-start}.hero-grid .avatar{margin-left:0}.hero-grid .pitch{margin-left:0}}
.hero-grid .avatar{width:150px;height:150px;margin-bottom:1.2rem}
.hero-grid .hi{font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.15}
.btn.primary{box-shadow:0 0 26px rgba(185,133,247,.45)}
.editor,.term{background:rgba(12,15,21,.88);backdrop-filter:none;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 0 1px rgba(185,133,247,.15);color:#e6e9ef;text-align:left}
.editor{box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 44px rgba(185,133,247,.22)}
.ebar{display:flex;align-items:center;gap:.45rem;padding:.65rem .9rem;background:#171b24;border-bottom:1px solid #262c38;font:400 .8rem var(--mono);color:#8b93a3}
.ebar i{width:.8rem;height:.8rem;border-radius:50%;display:block}
.ebar span{margin-left:.6rem}
.editor pre{margin:0;padding:1.1rem 1.2rem 1.3rem;font:400 clamp(.74rem,1.8vw,.9rem)/1.7 var(--mono);overflow-x:auto;white-space:pre}
.ln{display:block;min-height:1.7em}
.ln.hide{opacity:0;transform:translateX(-6px)}
.ln{transition:opacity .35s,transform .35s}
.k{color:#ff79c6}.f{color:#62d6e8}.s{color:#8be9a1}.c{color:#7d8799}
.cur{display:inline-block;width:.55em;height:1.05em;background:var(--accent);vertical-align:-.15em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.term{max-width:46rem}
.term .out{height:15rem;overflow-y:auto;padding:1rem 1.2rem .2rem;font:400 .9rem/1.7 var(--mono);white-space:pre-wrap;word-break:break-word}
.term .out .cmdline{color:#8be9a1}
.term .out .err{color:#ff8a8a}
.term .out a{color:#62d6e8}
.tline{display:flex;gap:.6rem;align-items:center;padding:.4rem 1.2rem 1rem;font:400 .9rem var(--mono)}
.tline span{color:#8be9a1;white-space:nowrap}
.tline input{flex:1;min-width:0;background:transparent;border:0;color:#e6e9ef;font:inherit;padding:.2rem 0;border-radius:0}
.tline input:focus{outline:none}
.term:focus-within{box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 0 2px var(--accent)}
.area:hover,.card:hover,.step:hover{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,#e91e63,var(--accent),#29b6f6) border-box}
.avatar{border-color:var(--ring)}
@media(prefers-reduced-motion:reduce){.cur{animation:none}.ln{transition:none}}

/* Pages (hash routes) */
.js [data-pages]:not(.show){display:none}
.js section.first{padding-top:4rem!important}
#main:focus{outline:none}
nav a[aria-current="page"]{color:var(--text);box-shadow:0 2px 0 var(--accent)}
.termbtn{font:600 .9rem var(--mono);background:var(--surface);color:var(--accent);border:1px solid var(--line);border-radius:.5rem;padding:.25rem .6rem;cursor:pointer}
.termbtn:hover{border-color:var(--accent)}
.sitefoot{background:var(--panel);text-align:center;padding:1.6rem 0;color:var(--muted);font-size:.92rem}
.foot{padding-top:4rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips span{border:1px solid var(--line);border-radius:999px;padding:.15rem .8rem;font-size:.9rem;color:var(--muted)}
.card .when{color:var(--accent);font:400 .85rem var(--mono)}

/* Mobile menu */
.burger{display:none;width:2.6rem;height:2.6rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface);cursor:pointer;padding:0;flex-direction:column;justify-content:center;align-items:center;gap:.28rem}
.burger span{display:block;width:1.2rem;height:2px;background:var(--text);transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.4rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.4rem) rotate(-45deg)}
@media(max-width:1000px){
  .burger{display:inline-flex}
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:center;gap:1rem;background:var(--panel);padding:1.1rem 1.5rem 1.4rem;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(0,0,0,.4)}
  nav ul.open{display:flex}
  nav a[aria-current="page"]{box-shadow:none;color:var(--accent)}
}
@media print{#bg,.cue,#top,#progress,header.top,.term,.editor,.strip{display:none!important}.js [data-pages]{display:block!important}body{background:#fff;color:#000}}

/* Glass UI */
:root{
  --glass:rgba(255,255,255,.06);--glass-hi:rgba(255,255,255,.11);--glass-line:rgba(255,255,255,.14);
  --glass-blur:none;
  --glass-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.14);
  --nav-bg:rgba(20,22,28,.5);
  --b1:rgba(185,133,247,.34);--b2:rgba(41,182,246,.24);--b3:rgba(233,30,99,.20);
}
:root[data-theme="light"]{
  --glass:rgba(255,255,255,.62);--glass-hi:rgba(255,255,255,.9);--glass-line:rgba(20,23,28,.09);
  --glass-shadow:0 8px 28px rgba(60,50,110,.12),inset 0 1px 0 rgba(255,255,255,.95);
  --nav-bg:rgba(255,255,255,.66);
  --b1:rgba(167,139,250,.40);--b2:rgba(56,189,248,.30);--b3:rgba(244,114,182,.26);
}
::selection{background:color-mix(in srgb,var(--accent) 45%,transparent)}
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 55%,transparent) transparent}

/* static aurora behind everything */
body{background-color:var(--bg);background-image:radial-gradient(color-mix(in srgb,var(--line) 45%,transparent) 1px,transparent 1px);background-size:26px 26px}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38rem 30rem at 15% 10%,var(--b1),transparent 65%),
    radial-gradient(34rem 30rem at 85% 30%,var(--b2),transparent 65%),
    radial-gradient(36rem 28rem at 30% 90%,var(--b3),transparent 65%)}
.hero,:root[data-theme="light"] .hero{background:transparent;min-height:calc(100vh - 5rem)}

/* glass surfaces */
header.top,.strip,.foot,.area,.card,.step,.social a,.chips span,.tags span,.filters button,.btn:not(.primary):not([type="submit"]),.burger,#top,.editor,.term,.faq details{
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
}
.btn:not(.primary):not([type="submit"]){border-color:var(--accent)}
.area,.card,.step,.social a,#top,.faq details{box-shadow:var(--glass-shadow)}

/* floating nav */
header.top{top:.6rem;margin:.6rem .8rem 0;border-radius:1.1rem;background:var(--nav-bg);box-shadow:var(--glass-shadow)}
header.top .wrap{padding:0 1rem}
nav a[data-page]{padding:.35rem .85rem;border-radius:999px;transition:background .2s,color .2s}
nav a[data-page]:hover{background:var(--glass-hi);color:var(--text)}
nav a[aria-current="page"]{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--text);box-shadow:none}
@media(min-width:1001px){nav ul{gap:.3rem}}
@media(max-width:1000px){
  nav ul{top:calc(100% + .5rem);border-radius:1rem;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-line)}
  nav a[data-page]{padding:.4rem 1.2rem}
}

/* sections */
h2::after{width:3.5rem;background:linear-gradient(90deg,var(--accent),#29b6f6)}
.strip{border-width:1px 0}
.foot{margin:2rem .8rem .8rem;border-radius:1.4rem;padding-top:3rem}
.editor,.term{background:rgba(12,15,21,.72);border-color:rgba(255,255,255,.14);box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 40px rgba(185,133,247,.18)}

/* cards: spotlight follows the pointer */
.area:hover,.card:hover,.step:hover{
  background:radial-gradient(22rem circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),var(--glass-hi);
  border-color:color-mix(in srgb,var(--accent) 70%,transparent);
}

/* buttons */
.filters button:hover{background:var(--glass-hi);color:var(--text)}
.filters button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn{position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,background .2s}
.btn.primary,.btn[type="submit"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 6px 24px color-mix(in srgb,var(--accent) 45%,transparent)}
.btn.primary::after,.btn[type="submit"]::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);transition:transform .6s}
.btn.primary:hover::after,.btn[type="submit"]:hover::after{transform:translateX(120%)}
.btn:not(.primary):not([type="submit"]):hover{background:var(--glass-hi)}

/* forms */
input,textarea{background:var(--glass);border:1px solid var(--glass-line);border-bottom:2px solid var(--accent);border-radius:.7rem .7rem 0 0;-webkit-backdrop-filter:none;backdrop-filter:none;transition:box-shadow .2s,border-color .2s}
input:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
::placeholder{color:var(--muted);opacity:.85}
.tline input{background:transparent;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* faq */
.faq details{border-radius:.9rem;padding:.8rem 1rem;margin:0}
.faq details[open]{background:var(--glass-hi)}
@media(max-width:700px){.faq{grid-template-columns:1fr}}

/* light mode fixes */
:root[data-theme="light"] .social i[style*="#ffffff"]{--c:#111!important}
:root[data-theme="light"] .cue,:root[data-theme="light"] .note{color:var(--muted)}
:root[data-theme="light"] .btn.primary,:root[data-theme="light"] .btn[type="submit"]{color:#fff}

/* Theme icon + coffee button */
.themebtn{width:2.4rem;height:2.4rem;display:inline-grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--text);cursor:pointer;padding:0;transition:background .2s}
.themebtn:hover{background:var(--glass-hi)}
.themebtn .i-moon{display:none}
:root[data-theme="light"] .themebtn .i-sun{display:none}
:root[data-theme="light"] .themebtn .i-moon{display:block}
nav .btn.coffee{padding:.55rem 1.3rem;font-weight:600;font-size:.95rem;color:var(--text);border-color:var(--glass-line);background:var(--glass-hi)}
nav .btn.coffee:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--glass-hi))}

@media(prefers-reduced-motion:reduce){.btn.primary::after,.btn[type="submit"]::after{display:none}}
/* browsers without backdrop-filter get a more solid fallback */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.top,.strip,.foot,.area,.card,.step,.chips span,.tags span,.filters button,.btn:not(.primary):not([type="submit"]),#top,.faq details{background:var(--surface)}
}

/* About page */
section{scroll-margin-top:6rem}
.about-hero{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center;justify-items:center;text-align:center}
.about-hero .avatar{margin:0;width:180px;height:180px}
.about-hero h1{font:600 clamp(2rem,5vw,2.8rem)/1.1 var(--font);margin:0 0 .8rem}
.about-hero .sub{margin:0;max-width:none}
.about-hero .actions{margin:1.4rem 0 0}
.jump{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;justify-content:center}
.jump a{text-decoration:none;color:var(--muted);font-size:.92rem;border:1px solid var(--glass-line);border-radius:999px;padding:.25rem 1rem;background:var(--glass);-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .2s,color .2s}
.jump a:hover{background:var(--glass-hi);color:var(--text)}
@media(min-width:800px){
  .about-hero{grid-template-columns:auto 1fr;justify-items:start;text-align:left}
  .about-hero .actions,.jump{justify-content:flex-start}
}
.pquote{margin:0 0 2rem;padding:1rem 1.3rem;border:1px solid var(--glass-line);border-left:3px solid var(--accent);border-radius:0 .9rem .9rem 0;background:var(--glass);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--muted);font-size:.98rem;font-style:italic}
.pquote cite{display:block;margin-top:.5rem;font-style:normal;font-size:.88rem;color:var(--accent)}
.timeline{list-style:none;margin:0;padding:0 0 0 1.6rem;position:relative;display:grid;gap:1.25rem}
.timeline::before{content:"";position:absolute;left:.45rem;top:.4rem;bottom:.4rem;width:2px;border-radius:2px;background:linear-gradient(var(--accent),#29b6f6)}
.tl{position:relative}
.tl::before{content:"";position:absolute;left:-1.62rem;top:1.8rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent);z-index:1}
.experience-card{flex-direction:row;align-items:stretch;gap:0;padding:0;overflow:hidden}
.experience-logo{flex:0 0 9.5rem;display:grid;place-items:center;padding:1rem;background:#fff}
.experience-logo img{display:block;width:100%;max-width:8rem;height:100%;max-height:6rem;object-fit:contain}
.experience-content{flex:1;min-width:0;padding:1.25rem 1.5rem}
.experience-content h3{margin:.25rem 0 .45rem}
.experience-content h3.experience-title{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.promotion-badge{display:inline-flex;align-items:center;gap:.2rem;padding:.1rem .55rem;border:1px solid color-mix(in srgb,#34d399 60%,transparent);border-radius:999px;background:color-mix(in srgb,#34d399 14%,transparent);color:#34d399;font:600 .68rem/1.5 var(--font);vertical-align:middle}
.promotion-badge svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.experience-content .facts{line-height:1.55}
.edu{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start}
.edu img{width:64px;height:64px;object-fit:contain;border-radius:.7rem;background:#fff;padding:.3rem}
.certification-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem}
.certification-card{align-items:flex-start;gap:.8rem;min-height:10rem;padding:1.2rem}
.certification-card img{width:auto;max-width:9rem;height:2.5rem;object-fit:contain;object-position:left center;padding:.35rem .55rem;border-radius:.5rem;background:#fff}
.certification-card h3{margin:auto 0 0;font-size:1rem;line-height:1.45}
.certification-card h3 a{color:var(--text);text-decoration:none}
.certification-card h3 a:hover{color:var(--accent)}
.edu h3 a{color:var(--text);text-decoration:none}
.edu h3 a:hover{color:var(--accent)}
.deg{margin:0 0 .4rem!important;color:var(--text)!important}
.score{display:inline-block;margin-left:.5rem;color:var(--accent);font:600 .85rem var(--mono);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:999px;padding:0 .6rem}
.facts{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.94rem}
@media(max-width:520px){
  .edu{grid-template-columns:1fr}
  .experience-card{flex-direction:column}
  .experience-logo{flex-basis:auto;min-height:8rem}
  .experience-logo img{max-width:10rem;max-height:5rem}
  .experience-content{padding:1.1rem}
}
@media print{.jump,.foot{display:none!important}}

/* Projects, journey and contact pages */
[hidden]{display:none!important}
.crumbs{font-size:.88rem;color:var(--muted);margin-bottom:1.2rem}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-hidden]{margin:0 .5rem}
.pagehead h1{font:600 clamp(2rem,5vw,2.8rem)/1.1 var(--font);margin:0 0 .8rem}
.pagehead h1::after{content:"";display:block;width:3.5rem;height:3px;background:linear-gradient(90deg,var(--accent),#29b6f6);margin-top:.6rem;border-radius:2px}
.pagehead .sub{margin:1rem 0 1.5rem}
.pagehead .chips{margin-bottom:.8rem}
.pagehead .meta{margin:0 0 1.2rem}
.btn.sm{padding:.4rem 1.1rem;font-size:.92rem}
.plinks{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.7rem}
.proj .tags{margin-top:.4rem}
.contact-grid{display:grid;gap:1.5rem;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 1.1fr}}
.ways{display:grid;gap:1.25rem}
.contact-ways{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));align-items:stretch}
.formcard{padding:1.8rem}
.formcard form{max-width:none}
.card .social{justify-content:flex-start;margin-top:.4rem}
.h2s{margin-top:3rem}
@media print{.filters,.plinks{display:none!important}}

/* Supporters page */
.sup-head{display:flex;gap:.85rem;align-items:center;margin-bottom:.3rem}
.sup-av{flex:none;width:2.7rem;height:2.7rem;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#e91e63,var(--accent),#29b6f6);color:#fff;font-weight:600;font-size:1.05rem}
.sup-head h3{margin:0!important}
.supporter p{font-style:italic}
.coffee-hero{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.coffee-hero .btn{font-size:1.05rem;padding:.7rem 1.6rem}

/* Buy me a coffee page (redesign) */
.cf-hero{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center;position:relative}
@media(min-width:900px){.cf-hero{grid-template-columns:1.2fr .8fr}}
.cf-hero h1{font:600 clamp(2.6rem,7vw,4.4rem)/1.05 var(--font);margin:0 0 1rem}
.grad{background:linear-gradient(90deg,#c084fc,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
.cf-hi{font-size:clamp(1.4rem,3vw,2rem);font-weight:400;margin:0 0 1rem}
.cf-hero p{max-width:34rem}
.cf-hero p.lead{color:var(--muted)}
.not-found-section{min-height:calc(100vh - 9rem);display:grid;align-items:center}
.not-found{width:100%;max-width:48rem;margin:0 auto;text-align:center;align-items:center;padding:clamp(2rem,6vw,4rem)}
.not-found-art{display:block;width:min(100%,22rem);height:auto;margin:0 auto 1rem;overflow:visible}
.nf-route-line{stroke-dasharray:7 9;animation:nf-route-flow 18s linear infinite}
.nf-question{transform-box:fill-box;transform-origin:center;animation:nf-float 3.6s ease-in-out infinite}
.nf-twinkle{animation:nf-twinkle 2.4s ease-in-out infinite}
.nf-delay{animation-delay:.8s}
.nf-delay-more{animation-delay:1.6s}
@keyframes nf-route-flow{to{stroke-dashoffset:-256}}
@keyframes nf-float{50%{transform:translateY(-7px)}}
@keyframes nf-twinkle{50%{opacity:.3;transform:scale(.7)}}
.not-found .not-found-code{margin:0;color:var(--accent);font:600 clamp(3rem,10vw,5rem)/.95 var(--mono);letter-spacing:.08em}
.not-found h1{font:600 clamp(2rem,5vw,3rem)/1.1 var(--font);margin:.8rem 0}
.not-found>p:not(.not-found-code){max-width:34rem;color:var(--muted);margin:0 auto}
.not-found .actions{justify-content:center;margin:1.5rem 0 0}
.not-found-links{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem;margin-top:1.5rem}
.not-found-links a{color:var(--accent);text-decoration:none}
.not-found-links a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.nf-route-line,.nf-question,.nf-twinkle{animation:none}}
.cf-art{justify-self:center;width:min(100%,22rem);height:auto;filter:drop-shadow(0 20px 40px rgba(139,92,246,.35))}
.cf-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.cf-actions .btn{font-size:1.05rem;padding:.75rem 1.7rem}
.cf-grid{display:grid;gap:1.5rem;grid-template-columns:1fr;align-items:start;margin-top:3rem}
@media(min-width:900px){.cf-grid{grid-template-columns:1.25fr 1fr}}
.help-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.card.help{flex-direction:row;align-items:center;gap:1.1rem;padding:1rem 1.3rem}
.help-ic{flex:none;width:3.2rem;height:3.2rem;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)}
.help h3{margin:0 0 .15rem}
.help p{margin:0}
.cf-quote{margin:1.6rem 0 0;padding:1.3rem 1.6rem;font-size:1.15rem;font-style:italic;position:relative}
.cf-quote::before{content:"\201C";position:absolute;left:1rem;top:.2rem;font:700 3rem/1 var(--font);color:var(--accent);opacity:.8}
.cf-quote p{margin:0 0 .4rem 2.2rem;color:var(--text)!important;font-size:1.15rem!important}
.cf-quote cite{display:block;text-align:right;font-style:normal;font-size:.92rem;color:var(--accent)}
.cf-social{margin-top:2rem}
.supbox{padding:1.4rem 1.5rem}
h2.supbox-h{display:flex;align-items:center;gap:.7rem;font:600 1.3rem var(--font);margin:0;padding-bottom:.8rem;border-bottom:1px solid var(--glass-line);position:relative}
h2.supbox-h::before{content:none}
h2.supbox-h::after{content:"";position:absolute;left:0;bottom:-1px;width:4.5rem;height:2px;margin:0;background:var(--accent);border-radius:2px}
.suplist{list-style:none;margin:1rem 0;padding:0 .4rem 0 0;max-height:19rem;overflow:auto;display:grid;gap:.2rem}
.sup{display:flex;align-items:center;gap:.9rem;padding:.7rem .2rem}
.sup .sup-av{background:#9b30ff;width:2.8rem;height:2.8rem}
.sup:nth-child(3n+2) .sup-av{background:#2563eb}
.sup:nth-child(3n+3) .sup-av{background:#0f9d7a}
.sup-who{flex:1;min-width:0;display:grid}
.sup-who small{color:var(--muted)}
.sup-meta{text-align:right;font-size:.88rem;color:var(--muted);display:grid;justify-items:end;gap:.2rem}
.amt{display:inline-block;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 .75rem;font-weight:600;font-size:.85rem}
.sup-empty{color:var(--muted);padding:.8rem .2rem}
.thanks{display:flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid var(--accent);border-radius:999px;padding:.7rem 1rem;color:var(--accent);font-size:.95rem;background:color-mix(in srgb,var(--accent) 10%,transparent)}

/* Project showcase */
.projects-intro{padding:2rem 0 1.5rem}
.projects-hero{display:grid;gap:1.5rem;align-items:center}
.projects-intro .pagehead h1{font-size:clamp(2.6rem,7vw,4.2rem);background:linear-gradient(100deg,var(--text),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.projects-intro .pagehead h1::after{display:none}
.projects-intro .pagehead .sub{max-width:38rem}
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;margin:0 0 .7rem;padding:.2rem .8rem;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-size:.88rem}
.eyebrow span{font-size:1.15rem}
.project-hero-art{display:none;min-height:12rem;align-items:center;justify-content:center;position:relative}
.project-hero-art::before{content:"";position:absolute;width:15rem;height:9rem;border-radius:50%;background:color-mix(in srgb,var(--accent) 24%,transparent);filter:blur(35px)}
.project-code-window{width:min(100%,17rem);aspect-ratio:1.55;display:grid;place-items:center;position:relative;border:1px solid color-mix(in srgb,var(--accent) 65%,var(--glass-line));border-radius:1rem;background:var(--glass);box-shadow:0 16px 45px color-mix(in srgb,var(--accent) 22%,transparent),var(--glass-shadow);transform:rotate(-5deg)}
.project-window-dots{position:absolute;top:.9rem;left:1rem;width:.45rem;height:.45rem;border-radius:50%;background:#fb7185;box-shadow:.8rem 0 #fbbf24,1.6rem 0 #34d399}
.project-code-symbol{font:600 clamp(2.5rem,7vw,4rem) var(--mono);color:var(--accent);text-shadow:0 0 28px color-mix(in srgb,var(--accent) 70%,transparent)}
.project-code-line{position:absolute;bottom:1.6rem;left:18%;width:48%;height:2px;background:color-mix(in srgb,var(--accent) 60%,transparent);border-radius:2px}
.project-code-line.short{left:18%;bottom:1rem;width:28%;opacity:.55}
.featured-section,.other-projects-section,.opensource-section{padding:1.6rem 0 2.4rem}
.project-section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.15rem}
.project-section-head h2{margin-bottom:0}
.project-section-head .sub{margin:.65rem 0 0}
.section-link{flex:none;color:var(--accent);text-decoration:none;font-size:.9rem}
.section-link:hover,.other-content a:hover{text-decoration:underline}
.featured-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.featured-card{position:relative;min-height:13rem;overflow:hidden;padding:1.2rem;gap:.75rem}
.featured-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(18rem circle at 100% 0,color-mix(in srgb,var(--accent) 18%,transparent),transparent 65%)}
.featured-card>*{position:relative}
.featured-top{display:flex;align-items:center;gap:.85rem}
.featured-top h3{margin:0 0 .1rem}
.featured-top .project-tagline{margin:0;color:var(--muted);font-size:.86rem}
.featured-card>p:not(.project-tagline){margin:0;color:var(--text);font-size:.9rem}
.featured-card .tags{margin-top:auto}
.featured-actions{margin-top:.25rem}
.featured-actions .btn{display:inline-flex;align-items:center;gap:.35rem}
.featured-mark,.other-mark{flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 80%,#fff),#5420bd 78%);box-shadow:0 5px 18px color-mix(in srgb,var(--accent) 28%,transparent)}
.featured-mark{width:3.6rem;height:3.6rem;border-radius:.9rem;font-size:1.7rem;position:relative;overflow:hidden}
.featured-mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.magic-mark{background:linear-gradient(145deg,#b34bf3,#452092)}
.motor-mark{background:linear-gradient(145deg,#1974b8,#10234c)}
.other-mark.motor-mark{overflow:hidden}
.other-mark.motor-mark img{width:100%;height:100%;object-fit:contain}
.stackbyb-mark{background:linear-gradient(145deg,#16a085,#14532d)}
.other-mark.stackbyb-mark{background:#fff;overflow:hidden}
.other-mark.stackbyb-mark img{width:100%;height:100%;object-fit:contain}
.other-projects{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:.8rem}
.other-card{flex-direction:row;align-items:center;gap:.9rem;min-height:6.7rem;padding:.9rem}
.other-mark{width:3.3rem;height:3.3rem;border-radius:.9rem;font-size:1.45rem}
.corevia-hrms-mark{background:linear-gradient(145deg,#16a085,#1d4ed8)}
.corevai-crm-mark{background:linear-gradient(145deg,#f97316,#9333ea)}
.elevate-mark{background:#fff;overflow:hidden}
.elevate-mark img{width:100%;height:100%;object-fit:contain}
.lakhiram-mark{background:#fff;overflow:hidden}
.lakhiram-mark img{width:100%;height:100%;object-fit:contain}
.mpd-mark{background:#fff;overflow:hidden}
.mpd-mark img{width:100%;height:100%;object-fit:contain}
.yourgynac-mark{background:#fff;overflow:hidden}
.yourgynac-mark img{width:100%;height:100%;object-fit:contain}
.swadesi-mark{background:#f5eedf;overflow:hidden}
.swadesi-mark img{width:100%;height:100%;object-fit:contain}
.other-content{min-width:0}
.other-content h3{margin:0 0 .1rem;font-size:1rem}
.other-content p{margin:0 0 .25rem;font-size:.8rem;line-height:1.45}
.other-content a{color:var(--accent);font-size:.78rem;text-decoration:none}
.other-projects-section .project-section-head .btn{flex:none}
.opensource-section{padding-top:1.5rem}
@media(min-width:800px){
  .projects-hero{grid-template-columns:minmax(0,1.1fr) minmax(15rem,.9fr)}
  .project-hero-art{display:flex}
}
@media(max-width:900px){.featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){
  .project-section-head{align-items:flex-start}
  .other-projects-section .project-section-head{flex-direction:column}
  .other-projects-section .project-section-head .btn{align-self:flex-start}
  .featured-grid,.other-projects{grid-template-columns:1fr}
}

/* Blog pages */
.blog-list-card{max-width:42rem}
.blog-list-card .eyebrow{align-self:flex-start}
.blog-card-image{display:block;width:calc(100% + 3rem);aspect-ratio:16/9;object-fit:cover;margin:-1.5rem -1.5rem .7rem;border-radius:.9rem .9rem 0 0}
.blog-list-meta{display:flex;flex-wrap:wrap;gap:.45rem 1rem;color:var(--muted);font-size:.86rem}
.blog-template-link{margin-top:1.5rem;font-size:.92rem}
.blog-template-link a{color:var(--accent)}
.blog-article-wrap{max-width:76rem}
.blog-article{max-width:72rem;margin:0 auto}
.blog-article-header{max-width:54rem;margin:0 auto 2rem}
.blog-article-header h1{font:600 clamp(2rem,5vw,3.4rem)/1.12 var(--font);margin:0 0 .9rem}
.blog-article-header .sub{font-size:1.08rem;line-height:1.7;max-width:48rem}
.blog-article-meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;color:var(--muted);font-size:.88rem;margin-top:1.2rem}
.blog-article-cover{margin:0 auto 2rem;max-width:72rem}
.blog-article-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:1rem}
.blog-article-content{max-width:70ch;margin:0 auto;font-size:1rem;line-height:1.85}
.blog-article-content h2{font:600 1.45rem/1.3 var(--font);margin:2.4rem 0 .7rem}
.blog-article-content p,.blog-article-content li{color:var(--muted)}
.blog-article-content li+li{margin-top:.45rem}
.blog-article-content a{color:var(--accent)}
.blog-callout{margin:1.5rem 0;padding:1rem 1.2rem;border-left:3px solid var(--accent);border-radius:0 .7rem .7rem 0;background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.blog-callout p{margin:0}
.blog-article-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;max-width:70ch;margin:2.5rem auto 0;padding-top:1.25rem;border-top:1px solid var(--line)}
.blog-article-footer a{color:var(--accent)}
.blog-template-note{max-width:70ch;margin:0 auto 1.5rem;padding:1rem 1.2rem;border:1px dashed var(--accent);border-radius:.8rem;color:var(--muted)}
@media(max-width:700px){
  .blog-article-footer{align-items:flex-start;flex-direction:column}
}