@property --btn-shine{syntax: "<percentage>"; inherits: false; initial-value: -110%;}.folio{--rhythm: calc(var(--lh-body) * 1rem)}.folio{width:min(var(--max-w),calc(100% - (var(--px) * 2)));margin:0 auto;padding:clamp(7.5rem,11vw,9.2rem) 0 4rem;display:grid;gap:clamp(3rem,6vw,5rem)}.hero h1{font-size:clamp(2.4rem,7.2vw,5.4rem);letter-spacing:-.02em;line-height:1.05;font-weight:600;max-width:12ch;text-wrap:balance;animation:rise-in .7s var(--ease-out-expo) both}.services{display:grid;gap:1rem}.services-head h2{font-size:var(--text-title-md);line-height:var(--lh-tight);max-width:24ch}.svc-list{display:flex;flex-direction:column}.svc-row{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,5rem);padding:clamp(1.8rem,3vw,2.6rem) 0;border-bottom:1px solid var(--line);align-items:start}.svc-row:first-child{border-top:1px solid var(--line)}.svc-left{display:flex;flex-direction:column;gap:.55rem;transition:transform .25s var(--ease-out-expo)}.svc-row:hover .svc-left{transform:translate(5px)}.svc-num{font-size:var(--text-caption);font-weight:700;letter-spacing:.1em;color:var(--ink-3);font-variant-numeric:tabular-nums}.svc-row--main .svc-num{color:var(--accent)}.svc-name{font-size:var(--text-title-md);font-weight:700;letter-spacing:-.025em;line-height:var(--lh-tight);color:var(--ink);text-wrap:balance;transition:color .2s var(--ease-out-expo)}.svc-row--main .svc-name{font-size:clamp(1.35rem,2.2vw,1.8rem)}.svc-row:hover .svc-name{color:var(--accent)}.svc-right{display:flex;flex-direction:column;gap:.75rem;padding-top:.3rem}.svc-desc{font-size:var(--text-body);color:var(--ink-2);line-height:var(--lh-body);max-width:52ch;text-wrap:pretty;margin:0}.svc-proof{font-size:var(--text-ui);color:var(--ink-3);font-style:italic;line-height:1.4;margin:0}.service-logos{display:flex;flex-wrap:wrap;gap:.3rem}.logo-pill{display:inline-flex;align-items:center;padding:.18rem .52rem;font-size:var(--text-caption);font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid color-mix(in oklch,var(--line),transparent 20%);border-radius:999px;color:var(--ink-3);background:color-mix(in oklch,var(--surface),var(--bg-2) 50%)}.svc-list .svc-row:nth-child(1) .logo-pill{color:#204ec3;border-color:color-mix(in oklch,#5f8fff,transparent 60%);background:color-mix(in oklch,#5f8fff,transparent 93%)}.svc-list .svc-row:nth-child(2) .logo-pill{color:oklch(.43 .13 195);border-color:color-mix(in oklch,#4ca59b,transparent 60%);background:color-mix(in oklch,#4ca59b,transparent 93%)}.svc-list .svc-row:nth-child(3) .logo-pill{color:oklch(.5 .12 65);border-color:color-mix(in oklch,#c88a49,transparent 60%);background:color-mix(in oklch,#c88a49,transparent 93%)}.svc-list .svc-row:nth-child(4) .logo-pill{color:#50459e;border-color:color-mix(in oklch,#7c72bb,transparent 60%);background:color-mix(in oklch,#7c72bb,transparent 93%)}.kicker{margin-bottom:1rem;text-transform:uppercase;letter-spacing:.09em;font-size:var(--text-caption);font-weight:600;color:var(--ink-3);margin-bottom:var(--rhythm)}.lead{margin-top:calc(var(--rhythm) * .5);max-width:65ch;color:var(--ink-2);font-size:var(--text-body-lg);line-height:var(--lh-body);font-weight:400;text-wrap:pretty;animation:rise-in .8s .08s var(--ease-out-expo) both}.hero-actions{margin-top:var(--rhythm);display:flex;gap:.7rem;flex-wrap:wrap;animation:rise-in .85s .14s var(--ease-out-expo) both}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.65rem 1rem;font-size:var(--text-label);text-transform:uppercase;letter-spacing:.08em;font-weight:700}.btn-primary{background:linear-gradient(108deg,transparent var(--btn-shine),color-mix(in oklch,white,transparent 76%) calc(var(--btn-shine) + 30%),transparent calc(var(--btn-shine) + 60%)),var(--accent);color:#fbfaf8;transition:--btn-shine .55s var(--ease-out-expo),transform .2s var(--ease-out-expo),box-shadow .2s var(--ease-out-expo),filter .2s var(--ease-out-expo)}.btn-primary:hover{--btn-shine: 200%;transform:translateY(-1px);box-shadow:0 10px 20px color-mix(in oklch,var(--accent),transparent 75%);filter:saturate(1.06)}.btn-primary:active:not(:disabled){transform:scale(.97);box-shadow:none;filter:none;transition-duration:.06s}.btn-ghost{border:1px solid var(--line);color:var(--ink-2);background:var(--surface)}.btn-ghost:active:not(:disabled){transform:scale(.97);transition-duration:.06s}.btn:disabled:not([data-techno-loader=active]):not([data-state=sending]):not([data-state=success]):not([data-state=error]){opacity:.45;cursor:not-allowed}.projects{display:grid;gap:5rem}.oss{display:grid;gap:1rem}.oss-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.oss-item{position:relative;border:1px solid var(--line);border-radius:.9rem;padding:.85rem 2rem .85rem .85rem;background:linear-gradient(140deg,var(--surface),color-mix(in oklch,var(--bg-2),white 28%));display:grid;gap:.2rem;animation:rise-in .45s var(--d) var(--ease-out-expo) both;transition:transform .22s var(--ease-out-expo),border-color .22s var(--ease-out-expo),box-shadow .22s var(--ease-out-expo)}.oss-item:hover{transform:translateY(-3px);border-color:color-mix(in oklch,var(--accent),transparent 58%);box-shadow:0 10px 26px color-mix(in oklch,var(--ink),transparent 91%)}.oss-item:active{transform:scale(.98);box-shadow:none;transition-duration:.06s}.oss-name{font-size:var(--text-body-sm);color:var(--ink);font-weight:650}.oss-focus{font-size:var(--text-ui);color:var(--ink-2)}.oss-arrow{position:absolute;top:.72rem;right:.85rem;font-size:var(--text-ui);color:var(--ink-3)}.project-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:.9rem;animation:rise-in .65s var(--ease-out-expo) both}.project-head h2{font-size:var(--text-title-sm);line-height:var(--lh-tight);font-weight:700;margin-bottom:.35rem;text-wrap:balance}.project-head p{color:var(--ink-2);font-size:var(--text-body);line-height:var(--lh-body);max-width:65ch;text-wrap:pretty}.pill{white-space:nowrap;border-radius:999px;padding:.55rem .9rem;font-size:var(--text-caption);border:1px solid var(--line);background:var(--surface);text-transform:uppercase;letter-spacing:.08em;color:var(--accent-text);font-weight:700}.pill:active{transform:scale(.97);transition-duration:.06s}.shot-wrap{display:block;width:min(100%,980px);margin-inline:auto;aspect-ratio:16 / 9;overflow:hidden;border-radius:1.35rem;padding:0;background:var(--bg-2);border:1px solid var(--line);transition:transform .28s var(--ease-out-expo),box-shadow .28s var(--ease-out-expo);will-change:transform}.shot-wrap:hover{box-shadow:0 16px 40px color-mix(in oklch,var(--ink),transparent 85%)}.mockup-chrome{height:2rem;display:flex;align-items:center;gap:.4rem;padding:0 .8rem;background:linear-gradient(180deg,var(--bg-2),var(--bg-3));border-bottom:1px solid var(--line)}.dot{width:.62rem;height:.62rem;border-radius:999px;display:inline-block}.dot-red{background:#ff5f57}.dot-amber{background:#ffbd2e}.dot-green{background:#28c840}.shot-image{width:100%;aspect-ratio:16 / 9;height:calc(100% - 2rem);object-fit:cover;object-position:top center;display:block;box-shadow:0 12px 35px color-mix(in oklch,var(--ink),transparent 84%)}.split{display:grid;grid-template-columns:1fr 1.1fr;gap:2.5rem}.split h3{margin-bottom:calc(var(--rhythm) * .5);font-size:var(--text-title-sm);letter-spacing:-.01em;font-weight:700;line-height:var(--lh-tight);text-wrap:balance}.split ul{list-style:none;display:grid;gap:.7rem}.split li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.7rem;color:var(--ink-2);font-size:var(--text-body-sm);line-height:var(--lh-body);font-variant-numeric:tabular-nums}.split li strong{color:var(--ink);font-weight:600}.contact{border:1px solid var(--line);border-radius:1.1rem;padding:2rem;background:linear-gradient(160deg,var(--surface),color-mix(in oklch,var(--bg-2),white 30%));display:grid;grid-template-columns:1fr 1.2fr;gap:2rem;align-items:start}.contact-copy{display:grid;gap:.9rem}.contact-title{margin:0;color:var(--ink);font-family:var(--font-display);font-size:var(--text-title-xs);line-height:1.3;font-weight:650;text-wrap:balance}.contact-subtitle{margin:0;color:var(--ink-2);font-size:var(--text-body-sm);line-height:var(--lh-relaxed);max-width:38ch;text-wrap:pretty}.mini-form{width:100%;display:grid;gap:.65rem;border:1px solid var(--line);border-radius:.95rem;padding:1rem;background:var(--bg);animation:rise-in .75s .08s var(--ease-out-expo) both}.mini-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.mini-form input,.mini-form textarea{width:100%;border:1px solid color-mix(in oklch,var(--line),transparent 8%);border-radius:.8rem;padding:.7rem .85rem;background:var(--surface);color:var(--ink);font-size:var(--text-body);line-height:var(--lh-body);font-kerning:normal}.mini-form input::placeholder,.mini-form textarea::placeholder{color:var(--ink-3)}.mini-form input:focus,.mini-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);outline:none}.mini-form textarea{resize:vertical;min-height:110px}.form-status{margin:0;font-size:var(--text-ui);color:var(--ink-2)}.form-status[data-state=success]{color:var(--success)}.form-status[data-state=error]{color:var(--danger)}.btn-send{position:relative;min-width:140px;gap:.5rem;transition:--btn-shine .55s var(--ease-out-expo),background-color .3s var(--ease-out-expo),transform .2s var(--ease-out-expo),box-shadow .2s var(--ease-out-expo),filter .2s var(--ease-out-expo)}.btn-label{transition:opacity .15s var(--ease-out-expo)}.btn-icon{flex-shrink:0;opacity:0;transform:scale(.5) rotate(-30deg);transition:opacity .18s var(--ease-out-expo),transform .22s var(--ease-out-expo)}.btn-send[data-state=sending] .btn-label,.btn-send[data-state=success] .btn-label,.btn-send[data-state=error] .btn-label{opacity:0}.btn-send[data-state=sending] .btn-icon,.btn-send[data-state=success] .btn-icon,.btn-send[data-state=error] .btn-icon{opacity:1;transform:scale(1) rotate(0)}.btn-send[data-state=success]{background:var(--success);box-shadow:0 6px 18px color-mix(in oklch,var(--success),transparent 72%)}.btn-send[data-state=error]{background:var(--danger);animation:shake-btn .4s var(--ease-out-expo)}.icon-spinner{transform-origin:12px 12px}.btn-send[data-state=sending] .icon-spinner{animation:spin-ring .9s linear infinite}.icon-ring{stroke-dasharray:38 13}.icon-check{opacity:0;stroke-dasharray:28;stroke-dashoffset:28;transition:stroke-dashoffset .35s .08s var(--ease-out-expo),opacity .15s}.btn-send[data-state=success] .icon-check{opacity:1;stroke-dashoffset:0}.icon-x{opacity:0;transition:opacity .15s var(--ease-out-expo)}.btn-send[data-state=error] .icon-x{opacity:1}@keyframes spin-ring{to{transform:rotate(360deg)}}@keyframes shake-btn{0%{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-4px)}80%{transform:translate(3px)}to{transform:translate(0)}}.field-wrap{position:relative;display:flex;align-items:center}.field-wrap input{width:100%;padding-right:2.4rem}.field-valid-icon{position:absolute;right:.75rem;display:flex;align-items:center;color:var(--success);opacity:0;transform:scale(.7);transition:opacity .22s var(--ease-out-expo),transform .22s var(--ease-out-expo);pointer-events:none}.field-wrap input:not(:placeholder-shown):valid~.field-valid-icon{opacity:1;transform:scale(1)}.msg-wrap{position:relative}.msg-wrap textarea{width:100%}.msg-arc{position:absolute;bottom:.55rem;right:.6rem;pointer-events:none;opacity:.3;transition:opacity .2s}.msg-wrap:focus-within .msg-arc{opacity:.85}.arc-track{fill:none;stroke:var(--line);stroke-width:2}.arc-fill{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:44;stroke-dashoffset:44;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transform:rotate(-90deg);transition:stroke-dashoffset .2s var(--ease-out-expo),stroke .2s}.arc-fill.arc-near-limit{stroke:var(--danger)}@media(prefers-reduced-motion:reduce){.btn-send[data-state=sending] .icon-spinner{animation:none!important}.icon-check,.field-valid-icon,.arc-fill{transition-duration:.01ms!important}}@keyframes rise-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@media(max-width:860px){.project-head,.split,.contact{grid-template-columns:1fr}.project-head{display:grid}.svc-row{grid-template-columns:1fr;gap:.9rem}.svc-row:hover .svc-left{transform:none}.oss-grid,.mini-row{grid-template-columns:1fr}.projects{gap:3rem}}@media(max-width:640px){.hero h1{font-size:clamp(2.15rem,11vw,3.4rem);line-height:1.08;letter-spacing:-.01em;max-width:10ch}.lead{font-size:var(--text-body);max-width:40ch}.project-head h2,.split h3,.contact-title{line-height:1.18}.btn{min-height:44px}}
