/* Hire a TaniX Builder: public, no app frame. */
:root { --ink: #eef2fb; --mute: #9aa8c7; --line: rgba(255,255,255,.12); --blue: #38b6ff; --bg: #030b1f; --panel: #081433; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 'Inter', system-ui, sans-serif; }
.hr { max-width: 1180px; margin: 0 auto; padding: 40px 20px 72px; }
.hr-top h1 { margin: 0; font: 700 clamp(1.9rem, 5vw, 2.7rem)/1.15 'Space Grotesk', sans-serif; }
.hr-top p { margin: 8px 0 30px; color: var(--mute); }
.hr h2 { margin: 0 0 14px; font: 600 1.2rem/1.2 'Space Grotesk', sans-serif; }
.hr-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 34px; align-items: start; }
.hr-form-wrap { padding: 22px; background: var(--panel); border: 1px solid var(--line); }
.hr label { display: block; margin-bottom: 13px; font-size: .88rem; color: var(--mute); }
.hr input, .hr textarea { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; font: 400 16px/1.4 'Inter', sans-serif; color: var(--ink); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 0; }
.hr input:focus-visible, .hr textarea:focus-visible, .hr button:focus-visible, .hr a:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.hr input::placeholder, .hr textarea::placeholder { color: #6f7f9f; }
.hr .hr-hp { position: absolute; left: -9999px; height: 1px; overflow: hidden; }
.hr button { padding: 11px 20px; font: 600 .95rem/1.2 'Inter', sans-serif; color: #06223a; background: var(--blue); border: 0; cursor: pointer; }
.hr button:disabled { opacity: .55; cursor: default; }
.hr-msg { margin: 10px 0 0; font-size: .92rem; color: #8ee6c0; min-height: 1.3em; }
.hr-msg.is-bad { color: #f0a198; }
.hr-for { margin: 0 0 13px; padding: 8px 12px; font-size: .9rem; background: rgba(56,182,255,.1); box-shadow: inset 3px 0 0 var(--blue); }
.hr .hr-q { margin: 0 0 14px; }
.hr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.hr-card { padding: 16px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.hr-card strong { font-size: 1.04rem; }
.hr-card small { color: var(--mute); }
.hr-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-skills span { padding: 2px 8px; font-size: .78rem; color: #cdd7ec; border: 1px solid var(--line); }
.hr-work a { display: block; font-size: .9rem; color: #7fd0ff; overflow-wrap: anywhere; margin-bottom: 3px; }
.hr-card button { align-self: flex-start; margin-top: auto; padding: 8px 14px; font-size: .86rem; color: var(--ink); background: transparent; border: 1px solid var(--line); }
.hr-empty { margin: 0; color: var(--mute); grid-column: 1 / -1; }
@media (max-width: 860px) { .hr { padding: 26px 16px 56px; } .hr-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } }