/* ============ collaboration request ============ */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes collabSpin{to{--ang:360deg}}
.section--collab{padding:4rem 0 min(9rem,10vw)}
.collab-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1fr;gap:4rem;padding:4rem 3rem;border-radius:4rem;color:#fff;
  background:
    radial-gradient(60% 80% at 92% 0%,rgba(228,87,46,.38),transparent 62%),
    radial-gradient(50% 70% at 0% 100%,rgba(255,179,71,.16),transparent 65%),
    linear-gradient(155deg,#2a100b 0%,#170a09 60%,#0d0708 100%);
  box-shadow:0 5rem 10rem -4rem rgba(228,87,46,.4)}
@media (min-width:64em){.collab-card{grid-template-columns:.9fr 1.1fr;gap:6rem;padding:7rem 7rem}}
.collab-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--ang),transparent 0 62%,#ffb347 80%,var(--c-primary-400) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:collabSpin 7s linear infinite}
.collab-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(30rem at var(--mx,72%) var(--my,25%),rgba(255,160,100,.2),transparent 62%)}
.collab-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(rgba(255,255,255,.3) 1px,transparent 1.5px) 0 0/3rem 3rem;
  -webkit-mask-image:radial-gradient(60% 70% at 25% 40%,#000,transparent);mask-image:radial-gradient(60% 70% at 25% 40%,#000,transparent)}
.collab-info,.collab-formwrap{position:relative;z-index:2}
.collab-tag{display:inline-flex;align-items:center;gap:1rem;padding:.7rem 1.6rem;border-radius:99px;font-size:var(--fs-14);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.collab-tag i{width:.9rem;height:.9rem;border-radius:50%;background:#ffb347;box-shadow:0 0 0 0 rgba(255,179,71,.6);animation:tagPulse 2s ease-out infinite}
@keyframes tagPulse{to{box-shadow:0 0 0 1.2rem rgba(255,179,71,0)}}
.collab-title{margin-top:2.4rem;font-size:clamp(3.8rem,4.6vw,6.6rem);line-height:1.25;font-weight:700;letter-spacing:-.02em}
.collab-title em{font-style:normal;background:linear-gradient(100deg,#ffd08a,#ff8a54 55%,#e4572e);-webkit-background-clip:text;background-clip:text;color:transparent}
.collab-lead{margin-top:2rem;max-width:50rem;font-size:var(--fs-18);line-height:2;color:rgba(255,255,255,.72)}
.collab-points{margin-top:3.4rem;display:grid;gap:2rem;list-style:none}
.collab-points li{display:flex;align-items:center;gap:1.8rem}
.collab-points li>span{flex:none;width:5.2rem;height:5.2rem;border-radius:1.6rem;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);transition:transform .6s var(--ease5),background .4s}
.collab-points li:hover>span{transform:translateY(-.4rem) rotate(-6deg);background:rgba(228,87,46,.28)}
.collab-points svg{width:2.4rem;height:2.4rem;fill:none;stroke:#ffb347;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.collab-points b{display:block;font-size:var(--fs-16);font-weight:600}
.collab-points small{font-size:var(--fs-14);color:rgba(255,255,255,.6)}
.collab-phone{margin-top:3.4rem;display:inline-flex;align-items:center;gap:1.4rem;flex-wrap:wrap;color:#fff;font-family:var(--ff-en)}
.collab-phone svg{width:2.6rem;height:2.6rem;fill:none;stroke:#ffb347;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.collab-phone span{font-size:3.2rem;font-weight:600;letter-spacing:.02em}
.collab-phone small{font-family:var(--ff-main);font-size:var(--fs-14);color:rgba(255,255,255,.6)}

.collab-formwrap{position:relative;padding:3rem;border-radius:3rem;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(1.6rem);backdrop-filter:blur(1.6rem)}
@media (max-width:49.99em){.collab-formwrap{padding:2rem 1.6rem}}
.collab-form{display:grid;gap:2.2rem}
.cf-row{display:grid;grid-template-columns:1fr;gap:1.8rem}
@media (min-width:50em){.cf-row{grid-template-columns:1fr 1fr}}
.cf-field{position:relative;display:block}
.cf-field input,.cf-field textarea{width:100%;padding:2.6rem 1.8rem .9rem;border-radius:1.8rem;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;font:inherit;font-size:var(--fs-16);text-align:right;
  transition:border-color .3s,background .3s,box-shadow .3s}
.cf-field textarea{resize:vertical;min-height:11rem}
.cf-field input{height:6.2rem}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:#ff8a54;background:rgba(255,255,255,.09);box-shadow:0 0 0 .5rem rgba(255,138,84,.16)}
.cf-field span{position:absolute;right:1.8rem;top:2.1rem;font-size:var(--fs-16);color:rgba(255,255,255,.55);pointer-events:none;transform-origin:100% 0;transition:transform .35s var(--ease5),color .3s}
.cf-field input:focus+span,.cf-field input:not(:placeholder-shown)+span,
.cf-field textarea:focus+span,.cf-field textarea:not(:placeholder-shown)+span{transform:translateY(-1.4rem) scale(.74);color:#ffb347}
.cf-field.bad input{border-color:#ff6b6b;box-shadow:0 0 0 .5rem rgba(255,107,107,.14)}

.cf-chips{border:0;display:flex;flex-wrap:wrap;gap:1rem}
.cf-chips legend{width:100%;margin-bottom:1.2rem;font-size:var(--fs-14);color:rgba(255,255,255,.7);float:right}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{position:relative;display:inline-flex;align-items:center;gap:.8rem;padding:1rem 1.9rem;border-radius:99px;font-size:var(--fs-14);color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);transition:transform .45s var(--ease5),background .35s,border-color .35s,color .35s,box-shadow .35s}
.chip span::before{content:"";width:0;height:1rem;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(40deg) translateY(-.15rem);opacity:0;transition:width .3s var(--ease5),opacity .3s;margin-left:-.2rem}
.chip:hover span{transform:translateY(-.3rem);border-color:rgba(255,255,255,.4)}
.chip input:focus-visible+span{outline:2px solid #ffb347;outline-offset:3px}
.chip input:checked+span{background:linear-gradient(120deg,#e4572e,#f28c4a);border-color:transparent;color:#fff;transform:scale(1.04);box-shadow:0 1rem 2.4rem -.8rem rgba(228,87,46,.75)}
.chip input:checked+span::before{width:.55rem;opacity:1}

.cf-budget-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.2rem;font-size:var(--fs-14);color:rgba(255,255,255,.7)}
.cf-budget-head b{font-size:var(--fs-18);font-weight:600;color:#fff}
#cf-budget{-webkit-appearance:none;appearance:none;width:100%;height:.6rem;border-radius:99px;outline:none;direction:ltr;cursor:pointer;
  background:linear-gradient(to right,#ffb347,#e4572e) 0 0/var(--p,10%) 100% no-repeat,rgba(255,255,255,.16)}
#cf-budget::-webkit-slider-thumb{-webkit-appearance:none;width:2.6rem;height:2.6rem;border-radius:50%;background:#fff;border:.5rem solid #e4572e;box-shadow:0 .6rem 1.6rem rgba(0,0,0,.4);transition:transform .3s var(--ease5)}
#cf-budget::-moz-range-thumb{width:2.6rem;height:2.6rem;border-radius:50%;background:#fff;border:.5rem solid #e4572e;box-shadow:0 .6rem 1.6rem rgba(0,0,0,.4)}
#cf-budget:active::-webkit-slider-thumb{transform:scale(1.18)}
.cf-budget-scale{display:flex;justify-content:space-between;margin-top:1rem;font-size:1.2rem;color:rgba(255,255,255,.45)}

.cf-error{min-height:2rem;font-size:var(--fs-14);color:#ff9a9a}
.cf-submit{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:1.4rem;height:6.2rem;border-radius:99px;font-size:var(--fs-16);font-weight:600;color:#fff;
  background:linear-gradient(110deg,#e4572e,#f28c4a 55%,#e4572e);background-size:220% 100%;box-shadow:0 1.6rem 4rem -1.4rem rgba(228,87,46,.85);
  transition:background-position .8s var(--ease5),transform .5s var(--ease5)}
.cf-submit:hover{background-position:100% 0;transform:translateY(-.3rem)}
.cf-submit::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:shimmer 3.4s ease-in-out infinite}
@keyframes shimmer{60%,100%{left:130%}}
.cf-arrow{width:2.2rem;height:2.2rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease5)}
.cf-submit:hover .cf-arrow{transform:translateX(-.6rem)}
.cf-spin{display:none;width:2.2rem;height:2.2rem;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:cfspin .7s linear infinite}
@keyframes cfspin{to{transform:rotate(360deg)}}
.cf-submit.loading .cf-arrow{display:none}
.cf-submit.loading .cf-spin{display:block}
.cf-submit.loading{pointer-events:none;opacity:.9}

.collab-done{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;padding:3rem;text-align:center;border-radius:inherit;
  background:linear-gradient(160deg,rgba(35,15,11,.96),rgba(15,8,7,.96))}
.collab-done[hidden]{display:none}
.done-ring{width:9rem;height:9rem}
.done-ring svg{width:100%;height:100%;fill:none;stroke:#ffb347;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.done-ring circle{stroke-dasharray:145;stroke-dashoffset:145;stroke:rgba(255,255,255,.2)}
.done-ring path{stroke-dasharray:44;stroke-dashoffset:44;stroke:#ffb347}
.collab-done.play .done-ring circle{animation:dr .9s .1s ease forwards;stroke:#e4572e}
.collab-done.play .done-ring path{animation:dr .6s .8s ease forwards}
@keyframes dr{to{stroke-dashoffset:0}}
.collab-done h3{font-size:2.8rem;font-weight:700}
.collab-done p{max-width:36rem;color:rgba(255,255,255,.7);line-height:2}
.cf-again{margin-top:1rem;padding:1rem 2.4rem;border-radius:99px;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:var(--fs-14);transition:background .3s,color .3s}
.cf-again:hover{background:#fff;color:#2a0c0a}
.spark-dot{position:absolute;width:.8rem;height:.8rem;border-radius:50%;pointer-events:none;background:#ffb347}
@media (prefers-reduced-motion:reduce){.collab-card::before,.cf-submit::after,.collab-tag i{animation:none}}
