.contact{padding-top:clamp(110px,16vw,170px)}.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,64px);align-items:center}.contact-intro h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;margin:14px 0 18px}.contact-lead{color:var(--text-dim);font-size:1.05rem;max-width:46ch;margin-bottom:30px}.contact-points{list-style:none;display:flex;flex-direction:column;gap:16px}.contact-points li{display:flex;align-items:center;gap:14px}.cp-ico{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:var(--surface);border:1px solid var(--border)}.cp-ico svg{width:22px;height:22px}.contact-points b{display:block;font-family:var(--font-display);font-size:.95rem}.contact-points div>a,.contact-points div>span{color:var(--text-dim);font-size:.92rem}.contact-points div>a:hover{color:var(--c-cyan)}.contact-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-md);overflow:hidden}.contact-card:before{content:"";position:absolute;inset:-2px -2px auto;height:4px;background:var(--grad-rgb)}.contact-form{display:flex;flex-direction:column;gap:16px;transition:opacity .4s ease,transform .4s ease}.field{display:flex;flex-direction:column;gap:7px}.field label{font-family:var(--font-display);font-size:.85rem;font-weight:600;color:var(--text-dim)}.field input,.field select,.field textarea{width:100%;font:inherit;color:var(--text);background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;transition:border-color .2s ease,box-shadow .2s ease;resize:vertical}.field input::placeholder,.field textarea::placeholder{color:var(--text-faint)}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--c-purple-bright);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-purple-bright) 25%,transparent)}.field select{appearance:none;cursor:pointer}.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}.cf-error{margin:0;color:#ff8095;font-size:.9rem}.cf-submit{width:100%;justify-content:center;margin-top:4px}.cf-fineprint{text-align:center;font-size:.8rem;color:var(--text-faint);margin:0}.cf-fineprint a{color:var(--text-dim);text-decoration:underline}.solve-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .4s ease}.solve-overlay[data-state=solving],.solve-overlay[data-state=done]{opacity:1;pointer-events:auto}.contact-card:has(.solve-overlay[data-state=solving]) .contact-form,.contact-card:has(.solve-overlay[data-state=done]) .contact-form{opacity:.12;pointer-events:none}.solve-board{width:min(260px,70%);height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.4))}.solve-piece{transform-box:view-box;opacity:1}.solve-overlay[data-state=solving] .solve-piece,.solve-overlay[data-state=done] .solve-piece{animation:solve-out .62s cubic-bezier(.5,0,.75,0) forwards;animation-delay:calc(var(--i) * .3s)}@keyframes solve-out{to{transform:translate(calc(var(--ex) * 1px),calc(var(--ey) * 1px));opacity:0}}.solve-stars{opacity:0;transform-box:view-box;transform-origin:150px 150px;transform:scale(.3)}.stars-text{font-size:64px;fill:#ffd166;font-weight:900}.solve-overlay[data-state=done] .solve-stars{animation:stars-pop .6s cubic-bezier(.2,1.4,.4,1) .2s forwards}@keyframes stars-pop{0%{opacity:0;transform:scale(.3) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}}.solve-label{font-family:var(--font-display);font-weight:700;font-size:1.05rem;text-align:center;margin:0;color:var(--text)}.solve-overlay[data-state=done] .solve-label{color:var(--c-green)}.solve-again{display:none;margin-top:2px}.solve-overlay[data-state=done] .solve-again{display:inline-flex;animation:again-in .4s ease .5s both}@keyframes again-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:880px){.contact-grid{grid-template-columns:1fr}.contact-intro{text-align:center}.contact-lead{margin-inline:auto}.contact-points{max-width:420px;margin-inline:auto}}@media(prefers-reduced-motion:reduce){.solve-overlay[data-state=solving] .solve-piece,.solve-overlay[data-state=done] .solve-piece,.solve-overlay[data-state=done] .solve-stars{animation-duration:.01s}}
