/* =====================================================================
   Commit – a theme for developers. Terminal hero, code-comment headings,
   mono labels, glowing borders and a moving grid. Dark first.
   ===================================================================== */
.th-commit{--line:color-mix(in srgb,var(--tx) 12%,transparent);--glow:color-mix(in srgb,var(--p) 45%,transparent)}
.th-commit body,body.th-commit{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;background-attachment:fixed}
html[data-mode=light] body.th-commit{background-image:linear-gradient(color-mix(in srgb,var(--tx) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--tx) 5%,transparent) 1px,transparent 1px)}
.th-commit .b-sec{background:transparent}
.th-commit h1,.th-commit h2,.th-commit h3{letter-spacing:-.02em}
html[dir=rtl] .th-commit h1,html[dir=rtl] .th-commit h2,html[dir=rtl] .th-commit h3{letter-spacing:0}

/* section titles look like code comments */
.th-commit .b-title{font-size:clamp(28px,3.4vw,46px);font-weight:700}
.th-commit .b-title::before{content:"// ";display:block;font:600 14px/1 var(--mono);color:var(--p);letter-spacing:.06em;margin-bottom:14px;text-transform:lowercase}
.th-commit .b-skills .b-title::before{content:"// stack"}.th-commit .b-projects .b-title::before{content:"// projects"}.th-commit .b-timeline .b-title::before{content:"// git log --experience"}
.th-commit .b-process .b-title::before{content:"// workflow"}.th-commit .b-packages .b-title::before{content:"// pricing"}.th-commit .b-quotes .b-title::before{content:"// reviews"}.th-commit .b-contact .b-title::before{content:"// contact"}.th-commit .b-certs .b-title::before{content:"// certificates"}
.th-commit .b-lead{font-size:17px}

/* header + buttons */
.th-commit .s-header{background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.th-commit .s-logo span{font:700 18px var(--mono)}
.th-commit .s-logo span::before{content:"~/";color:var(--p)}
.th-commit .s-nav a{font-family:var(--mono);font-size:14px}
.th-commit .s-btn{font-family:var(--mono);font-weight:700;border-radius:10px;color:var(--bg)}
.th-commit .s-btn:not(.s-btn-ghost):hover{box-shadow:0 0 0 1px var(--p),0 0 30px var(--glow)}
.th-commit .s-btn-ghost{color:var(--tx);border-color:var(--line);background:transparent}
.th-commit .s-btn-ghost:hover{border-color:var(--p);color:var(--p);background:transparent}
.th-commit .s-header .s-btn{color:var(--bg)}

/* profile */
.th-commit .b-profile{padding-top:clamp(50px,7vw,110px)}
.th-commit .pr-badge{font-family:var(--mono);font-size:13px;background:transparent;border:1px dashed var(--p);color:var(--p);border-radius:8px}
.th-commit .pr-name{font-size:clamp(44px,6.6vw,92px);font-weight:700}
.th-commit .pr-name::after{content:"_";color:var(--p);animation:blink 1s steps(1) infinite;margin-inline-start:4px}
.th-commit .pr-roles{font-family:var(--mono);font-size:clamp(16px,1.6vw,21px);color:var(--p);font-weight:600}
.th-commit .pr-role::before{content:"> ";opacity:.6}
.th-commit .pr-term{box-shadow:0 0 0 1px var(--line),0 40px 100px -40px var(--glow);border-radius:14px}
html[data-mode=light] .th-commit .pr-term{box-shadow:0 30px 70px -30px rgba(0,0,0,.45)}
.th-commit .pr-avatar{width:118px;height:118px;border-radius:24px;background:linear-gradient(160deg,var(--p),var(--a));border:3px solid var(--bg);bottom:-36px}
.th-commit .pr-avatar img{object-fit:cover;object-position:bottom;transform:scale(1.15) translateY(6%)}
.th-commit .pr-deco{display:none}
.th-commit .pr-social a{border-radius:10px}
.th-commit .pr-stats{border-top:1px dashed var(--line)}
.th-commit .pr-stats b{font-family:var(--mono);font-weight:700;color:var(--p)}
.th-commit .pr-stats span{font-family:var(--mono);font-size:13px}

/* skills – chips look like package tags */
.th-commit .sk-group{border:1px solid var(--line);border-radius:14px;padding:20px;background:color-mix(in srgb,var(--sf) 70%,transparent)}
.th-commit .sk-group h3{font:600 13px var(--mono);color:var(--p);letter-spacing:.04em;text-transform:none}
.th-commit .sk-group h3::before{content:"import "}
.th-commit .sk-chip{font:600 14px var(--mono);border-radius:8px;background:var(--bg);border-color:var(--line);padding:8px 13px}
.th-commit .sk-chip:hover{border-color:var(--p);color:var(--p);box-shadow:0 0 18px -4px var(--glow)}

/* projects */
.th-commit .f-tabs button{font-family:var(--mono);font-size:13px;border-radius:8px;border-color:var(--line)}
.th-commit .f-tabs button.on,.th-commit .f-tabs button:hover{background:var(--p);color:var(--bg);border-color:var(--p)}
.th-commit .pj{background:var(--sf);border:1px solid var(--line);border-radius:14px}
.th-commit .pj:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--p) 60%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--p) 30%,transparent),0 30px 60px -30px var(--glow)}
.th-commit .pj-img{aspect-ratio:4/3;border-bottom:1px solid var(--line)}
.th-commit .pj-cat{font-family:var(--mono);text-transform:none;letter-spacing:0;font-weight:600}
.th-commit .pj-cat::before{content:"#";opacity:.6}
.th-commit .pj-metric{font-family:var(--mono);background:color-mix(in srgb,var(--p) 14%,transparent);color:var(--p);font-size:13px}
.th-commit .pj-tags span{font-family:var(--mono);font-size:12px;border-radius:6px}
.th-commit .pj-link{font-family:var(--mono);font-size:14px}

/* timeline as a git log */
.th-commit .tl::before{background:var(--line);width:2px}
.th-commit .tl-dot{border-radius:50%;border-color:var(--p);background:var(--bg);box-shadow:0 0 0 5px color-mix(in srgb,var(--p) 18%,transparent),0 0 20px var(--glow)}
.th-commit .tl-card{background:transparent;border:1px solid var(--line);border-radius:12px}
.th-commit .tl-period{font-family:var(--mono);font-weight:600}
.th-commit .tl-period::before{content:"commit · ";opacity:.55}
.th-commit .tl-place{font-family:var(--mono);font-size:14px;color:var(--a)}

/* process */
.th-commit .ps{background:transparent;border:1px solid var(--line);border-radius:12px}
.th-commit .ps-n{font:700 15px var(--mono);-webkit-text-stroke:0;color:var(--p);margin-bottom:10px}
.th-commit .ps-n::before{content:"step_"}

/* packages */
.th-commit .pk{background:var(--sf);border:1px solid var(--line);border-radius:14px}
.th-commit .pk.pop{background:var(--sf);color:var(--tx);border-color:var(--p);box-shadow:0 0 0 1px var(--p),0 30px 80px -30px var(--glow)}
.th-commit .pk.pop h3,.th-commit .pk.pop .pk-price b{color:var(--tx)}.th-commit .pk.pop small{color:var(--mu)}
.th-commit .pk.pop li .ic{color:var(--p)}
.th-commit .pk.pop .s-btn{background:var(--p);color:var(--bg);border-color:var(--p)}
.th-commit .pk-price b{font-family:var(--mono);font-size:clamp(28px,2.6vw,36px)}
.th-commit .pk h3{font-family:var(--mono);font-size:17px;color:var(--p)}
.th-commit .pk.pop h3{color:var(--p)}

/* quotes */
.th-commit .qt{background:transparent;border:1px solid var(--line);border-radius:14px}
.th-commit .qt-mark{font-family:var(--mono);color:var(--p);opacity:.5;font-size:60px}
.th-commit .qt-ini{background:var(--p);color:var(--bg);border-radius:10px}

/* contact & faq */
.th-commit .s-faq summary{font-family:var(--mono);font-size:15px}
.th-commit .b-contact .card-like{background:var(--sf);border:1px solid var(--line)}
.th-commit .s-form input,.th-commit .s-form textarea{font-family:var(--mono);background:var(--bg);border-color:var(--line);color:var(--tx)}
.th-commit .s-foot{border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg) 85%,transparent)}
.th-commit .s-wa{border-radius:14px}