@font-face{font-family:"Space Grotesk";src:url(../assets/fonts/SpaceGrotesk.ttf) format("truetype");font-weight:300 700;font-display:swap}
:root{--ink:#23262f;--mint:#bfe8d4;--lav:#d6d3fb;--peach:#ffd9c2;--sky:#c6e4f6;--butter:#fbecb5;--mute:#666b7a;--bd:2.5px solid var(--ink);--sh:5px 5px 0 var(--ink);--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:#fff;color:var(--ink);font:500 16px/1.5 "Space Grotesk",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
.i{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:3px solid #4f46a5;outline-offset:2px}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px clamp(16px,4vw,48px);position:sticky;top:0;background:#fffe;backdrop-filter:blur(8px);z-index:20}
.brand{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none;font-weight:700;font-size:1.3rem;letter-spacing:.08em}
.brand img{transition:transform .5s var(--ease)}.brand:hover img{transform:rotate(-12deg) scale(1.08)}
.burger{width:46px;height:46px;border:var(--bd);border-radius:12px;background:var(--butter);box-shadow:3px 3px 0 var(--ink);display:grid;place-content:center;gap:5px;cursor:pointer;transition:.2s var(--ease)}
.burger i{width:20px;height:2.5px;background:var(--ink);border-radius:2px;transition:.35s var(--ease)}
.burger:active{transform:translate(3px,3px);box-shadow:none}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0}
.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.veil{position:fixed;inset:0;background:#23262f55;opacity:0;visibility:hidden;transition:.3s;z-index:30}
.veil.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(300px,86vw);background:#fff;border-left:var(--bd);z-index:40;padding:84px 20px 20px;display:flex;flex-direction:column;gap:10px;transform:translateX(105%);transition:transform .45s var(--ease)}
.drawer.open{transform:none}
.drawer a,.drawer button{padding:13px 16px;border:var(--bd);border-radius:12px;background:#fff;color:inherit;font:inherit;font-weight:700;text-align:left;text-decoration:none;cursor:pointer;transition:.25s var(--ease)}
.drawer a:hover,.drawer button:hover{background:var(--lav);transform:translateX(-6px);box-shadow:5px 5px 0 var(--ink)}
.wrap{max-width:1120px;margin:0 auto;padding:clamp(16px,4vw,40px)}
.hero h1{font-size:clamp(2rem,6.4vw,3.8rem);line-height:1.04;letter-spacing:-.03em;animation:rise .9s var(--ease) both}
.hero p{color:var(--mute);margin:14px 0 30px;max-width:44ch}
.grid{display:grid;gap:30px;align-items:start}
@media(min-width:900px){.grid{grid-template-columns:1fr 380px}.stage{position:sticky;top:92px}.card:nth-child(2){margin-left:34px}}
.steps{display:grid;gap:28px}
.card{background:linear-gradient(var(--c) 0 12px,#fff 12px);border:var(--bd);border-radius:18px;box-shadow:var(--sh);padding:32px 20px 22px;position:relative}
.card:has(.dd.open){z-index:5}
.card h2{font-size:1.3rem;display:flex;align-items:center;gap:10px}
.card h2 b{display:grid;place-items:center;width:30px;height:30px;border:var(--bd);border-radius:50%;background:var(--c);font-size:.9rem}
.lb{display:block;font-size:.85rem;font-weight:700;margin:16px 0 6px}
.in{width:100%;border:var(--bd);border-radius:12px;padding:11px 14px;background:#fff;color:inherit;font:inherit;transition:.2s var(--ease)}
.in:focus{outline:none;transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
textarea.in{min-height:92px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.row2{grid-template-columns:1fr;gap:0}}
.dd{position:relative}
.dd-btn{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;cursor:pointer}
.dd-btn .i{transition:transform .35s var(--ease)}.dd.open .dd-btn .i{transform:rotate(180deg)}
.dd.open .dd-btn{background:var(--butter);box-shadow:3px 3px 0 var(--ink)}
.dd-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:10;list-style:none;padding:6px;background:#fff;border:var(--bd);border-radius:14px;box-shadow:var(--sh);max-height:250px;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top;transition:.28s var(--ease)}
.dd.open .dd-list{opacity:1;visibility:visible;transform:none}
.dd-list li{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:9px;cursor:pointer;transition:background .15s,padding .25s var(--ease)}
.dd-list li:hover{background:var(--mint);padding-left:18px}
.dd-list li[aria-selected=true]{background:var(--butter)}
.dd-list li .i{opacity:0}.dd-list li[aria-selected=true] .i{opacity:1}
.clr{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.clr input[type=color]{width:48px;height:44px;border:var(--bd);border-radius:12px;padding:2px;background:#fff;cursor:pointer}
.clr .hex{width:112px;font-family:ui-monospace,monospace}
.sw{display:flex;gap:7px}
.sw button{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);cursor:pointer;transition:transform .25s var(--ease)}
.sw button:hover{transform:scale(1.25) rotate(8deg)}
.pv{background:var(--sky) radial-gradient(#23262f22 1.2px,transparent 1.2px) 0 0/16px 16px;border:var(--bd);border-radius:22px;box-shadow:8px 8px 0 var(--ink);padding:18px;display:grid;gap:12px;justify-items:stretch}
.chip{justify-self:start;background:#fff;border:var(--bd);border-radius:99px;padding:1px 12px;font-size:.8rem;font-weight:700}
.cv-wrap{background:#fff;border:var(--bd);border-radius:14px;padding:16px;display:grid;place-items:center;min-height:250px}
#cv{width:100%;max-width:330px;height:auto;transition:opacity .3s}
#cv.pop{animation:pop .5s var(--ease)}
#cv.dim{opacity:.4}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border:var(--bd);border-radius:14px;background:#fff;color:var(--ink);font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:none}
.btn.main{background:var(--mint)}
.btn:disabled{opacity:.5;pointer-events:none}
.hint{font-size:.85rem;color:var(--mute);margin-top:16px;max-width:36ch}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:#23262f66;backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.3s}
.modal.open{opacity:1;visibility:visible}
.mbox{position:relative;width:min(420px,100%);background:linear-gradient(var(--lav) 0 14px,#fff 14px);border:var(--bd);border-radius:22px;box-shadow:8px 8px 0 var(--ink);padding:34px 22px 22px;text-align:center;transform:translateY(26px) scale(.95);transition:transform .5s var(--ease)}
.modal.open .mbox{transform:none}
.mbox h2{font-size:1.9rem;line-height:1.1;letter-spacing:-.02em;margin:4px 0 20px}
.sub{color:var(--mute);font-size:.9rem}
.soc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.soc a{display:flex;align-items:center;gap:8px;padding:11px 12px;border:var(--bd);border-radius:12px;color:inherit;text-decoration:none;font-weight:700;font-size:.92rem;transition:.25s var(--ease)}
.soc a:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.soc a:nth-child(1):hover{background:var(--peach)}.soc a:nth-child(2):hover{background:var(--sky)}.soc a:nth-child(3):hover{background:var(--butter)}.soc a:nth-child(4):hover{background:var(--mint)}
.x{position:absolute;top:22px;right:12px;width:36px;height:36px;border:var(--bd);border-radius:10px;background:#fff;cursor:pointer;display:grid;place-items:center;transition:.2s}
.x:hover{background:var(--peach);transform:rotate(90deg)}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-weight:700;font-size:.9rem;opacity:0;pointer-events:none;transition:.4s var(--ease);z-index:60;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes pop{0%{transform:scale(.95)}60%{transform:scale(1.02)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.file{position:relative;display:none;margin-top:10px;padding:10px 14px;font-size:.92rem}
.file.on{display:inline-flex}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.ava{object-fit:cover;border:var(--bd);border-radius:50%;box-shadow:4px 4px 0 var(--ink);margin-bottom:12px;background:#fff}