/* ============================================================
   START A PROJECT — premium onboarding experience (desktop)
   Standalone page · reuses the site design system (Poppins,
   #070707 / #F6F4F0 / #FF5A1F, cubic-bezier ease).
   Frosted glass = MATTE acrylic (no gloss / no reflection).
   Does not touch the landing page, category or mobile files.
   ============================================================ */
:root{
  --black:#070707;
  --white:#F6F4F0;
  --orange:#FF5A1F;
  --orange-soft:#FF7A45;
  --dim:rgba(246,244,240,.62);
  --faint:rgba(246,244,240,.34);
  --line:rgba(246,244,240,.14);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --pad:clamp(24px,5vw,84px);
  --font:'Poppins',system-ui,-apple-system,sans-serif;
  /* MATTE frosted glass */
  --glass-bg:rgba(255,255,255,.045);
  --glass-bd:rgba(255,255,255,.12);
  --glass-blur:blur(9px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--black);color:var(--white);
  font-family:var(--font);font-weight:400;line-height:1.5;min-height:100vh;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
::selection{background:var(--orange);color:#0a0a0a}
em,i{font-style:normal}

/* ============ ANIMATED ATMOSPHERE ============ */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg__base{position:absolute;inset:0;background:
  radial-gradient(120% 120% at 50% 118%, #120b06 0%, #0a0706 42%, #060606 100%)}
.bg__glow{position:absolute;border-radius:50%;filter:blur(72px);will-change:transform}
.bg__glow--1{width:62vw;height:62vw;left:-12vw;top:-24vh;
  background:radial-gradient(circle at 50% 50%, rgba(255,90,31,.22), rgba(255,90,31,0) 62%);
  animation:drift1 26s var(--ease) infinite}
.bg__glow--2{width:56vw;height:56vw;right:-14vw;bottom:-22vh;
  background:radial-gradient(circle at 50% 50%, rgba(206,54,24,.16), rgba(206,54,24,0) 64%);
  animation:drift2 34s var(--ease) infinite}
.bg__smoke{position:absolute;inset:-25%;
  background:radial-gradient(46% 38% at 54% 46%, rgba(255,120,60,.07), transparent 70%),
             radial-gradient(40% 32% at 30% 74%, rgba(255,90,31,.05), transparent 72%);
  animation:smoke 22s ease-in-out infinite}
.bg__grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
@keyframes drift1{0%{transform:translate(-5%,-4%) scale(1)}50%{transform:translate(7%,6%) scale(1.14)}100%{transform:translate(-5%,-4%) scale(1)}}
@keyframes drift2{0%{transform:translate(5%,4%) scale(1.06)}50%{transform:translate(-6%,-5%) scale(1)}100%{transform:translate(5%,4%) scale(1.06)}}
@keyframes smoke{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}

/* ============ TOP BAR ============ */
.sp-top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;
  padding:clamp(18px,2.4vw,30px) var(--pad);gap:1.4rem}
.sp-top__logo img{height:clamp(40px,3.3vw,52px);width:auto;transition:opacity .4s var(--ease)}
.sp-top__logo:hover img{opacity:.72}
.sp-top__back{display:inline-flex;align-items:center;gap:.45em;margin-left:.4rem;
  font-size:.82rem;letter-spacing:.06em;color:var(--dim);
  padding:.5em .85em;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  transition:color .3s,border-color .3s,transform .4s var(--ease),opacity .4s var(--ease)}
.sp-top__back:hover{color:var(--white);border-color:rgba(255,255,255,.28);transform:translateX(-2px)}
.sp-top__back[hidden]{display:none}
.sp-top__close{margin-left:auto;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  position:relative;transition:color .3s}
.sp-top__close::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--orange);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.sp-top__close:hover{color:var(--white)}
.sp-top__close:hover::after{transform:scaleX(1);transform-origin:left}

/* ============ STEP INDICATOR ============ */
.steps{position:fixed;top:clamp(78px,9vh,104px);left:50%;transform:translateX(-50%);z-index:25;
  display:flex;align-items:center;gap:0}
.steps__dot{position:relative;flex:none;width:clamp(30px,2.6vw,36px);height:clamp(30px,2.6vw,36px);border-radius:50%;
  display:grid;place-items:center;border:1.5px solid rgba(246,244,240,.24);color:var(--faint);
  font-size:.82rem;font-weight:600;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.02);
  transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.steps__dot b{transition:opacity .3s var(--ease)}
.steps__tick{position:absolute;width:56%;height:56%;opacity:0;transform:scale(.5);color:#0a0a0a;
  transition:opacity .35s var(--ease) .05s,transform .35s var(--ease) .05s}
.steps__dot.is-current{background:var(--orange);border-color:var(--orange);color:#0a0a0a;
  box-shadow:0 0 0 5px rgba(255,90,31,.14),0 8px 26px -10px rgba(255,90,31,.6);transform:scale(1.06)}
.steps__dot.is-done{background:var(--orange);border-color:var(--orange)}
.steps__dot.is-done b{opacity:0}
.steps__dot.is-done .steps__tick{opacity:1;transform:scale(1)}
.steps__line{flex:none;width:clamp(26px,3vw,52px);height:2px;background:rgba(246,244,240,.16);border-radius:2px;overflow:hidden;margin:0 -1px}
.steps__line i{display:block;height:100%;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease)}
.steps__line.is-done i{transform:scaleX(1)}

/* ============ STAGE / QUESTIONS ============ */
.stage{position:relative;z-index:10;min-height:100vh}
.q{position:absolute;inset:0;display:flex;overflow-y:auto;overflow-x:hidden;
  padding:clamp(150px,20vh,210px) var(--pad) clamp(48px,8vh,96px);
  opacity:0;visibility:hidden;transform:translateY(28px);filter:blur(9px);pointer-events:none;
  transition:opacity .55s var(--ease),transform .6s var(--ease),filter .55s var(--ease),visibility 0s linear .6s}
.q::-webkit-scrollbar{width:0;height:0}
.q.is-active{opacity:1;visibility:visible;transform:none;filter:none;pointer-events:auto;
  transition:opacity .6s var(--ease) .04s,transform .65s var(--ease) .04s,filter .6s var(--ease) .04s,visibility 0s}
.q.is-exit{opacity:0;visibility:visible;transform:translateY(-30px);filter:blur(9px);
  transition:opacity .5s var(--ease),transform .55s var(--ease),filter .5s var(--ease)}
.q__inner{margin:auto;width:100%;max-width:1180px}
.q__inner--wide{max-width:900px}
.q__inner--center{max-width:640px;text-align:center;display:flex;flex-direction:column;align-items:center}

/* question head — the hero element */
.q__head{margin-bottom:clamp(2.2rem,5vh,3.8rem)}
.q__label{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--orange);margin-bottom:1.1rem}
.q__title{font-size:clamp(2.3rem,5.4vw,4.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.02;max-width:20ch}

/* staggered entrance of the head + options when a step becomes active.
   NOTE: option cards fade in with OPACITY ONLY — their transform is left free
   so hover-lift and the selected scale animation aren't overridden. */
.q .q__label,.q .q__title,.q .field,.q .upload,.q .form,.q .q__cta{
  opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
/* option cards fade with the section (opacity handled by .card's own transition,
   so transform stays free for hover-lift + the selected scale animation) */
.q .q__options>*{opacity:0}
.q.is-active .q__label{opacity:1;transform:none;transition-delay:.10s}
.q.is-active .q__title{opacity:1;transform:none;transition-delay:.16s}
.q.is-active .field,.q.is-active .upload,.q.is-active .form,.q.is-active .q__cta{opacity:1;transform:none;transition-delay:.24s}
.q.is-active .q__options>*{opacity:1}

/* ============ OPTION CARDS (matte frosted glass) ============ */
.q__options{display:grid;gap:clamp(14px,1.3vw,20px)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{position:relative;display:flex;align-items:center;gap:1rem;text-align:left;
  padding:clamp(20px,1.9vw,30px) clamp(20px,1.9vw,30px);border-radius:20px;min-height:clamp(84px,9vw,120px);
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-bd);color:var(--white);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.7);
  transition:transform .5s var(--ease),border-color .4s var(--ease),background .4s var(--ease),box-shadow .5s var(--ease),opacity .5s var(--ease)}
.card__ico{font-size:clamp(1.5rem,1.9vw,2rem);line-height:1;flex:none;filter:saturate(1.05)}
.card__label{font-size:clamp(1rem,1.25vw,1.24rem);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.card__check{position:absolute;top:clamp(14px,1.1vw,18px);right:clamp(14px,1.1vw,18px);
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--orange);color:#0a0a0a;opacity:0;transform:scale(.4);
  transition:opacity .35s var(--ease),transform .4s var(--ease)}
.card__check svg{width:15px;height:15px}
.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.65),0 12px 40px -18px rgba(255,90,31,.20)}
.card:focus-visible{outline:none;border-color:rgba(255,140,90,.6);box-shadow:0 0 0 3px rgba(255,90,31,.22)}
.card:active{transform:scale(.98)}
.card.is-selected{border-color:var(--orange);background:rgba(255,90,31,.10);transform:scale(1.03);
  box-shadow:0 0 0 1.5px var(--orange),0 18px 50px -20px rgba(255,90,31,.42)}
.card.is-selected .card__check{opacity:1;transform:scale(1)}
.card.is-selected .card__label{color:#fff}

/* ============ FIELDS / TEXTAREA (frosted) ============ */
.field{width:100%;background:rgba(255,255,255,.035);border:1px solid var(--glass-bd);border-radius:14px;
  padding:.95em 1.1em;color:var(--white);font-family:inherit;font-size:1.02rem;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.field::placeholder{color:rgba(246,244,240,.38)}
.field:focus{outline:none;border-color:rgba(255,120,70,.75);background:rgba(255,255,255,.05);
  box-shadow:0 0 0 3px rgba(255,90,31,.14)}
.field--area{min-height:clamp(150px,24vh,230px);resize:vertical;line-height:1.55;margin-bottom:clamp(1.2rem,2.4vh,1.8rem)}

/* ============ UPLOAD (frosted, drag & drop) ============ */
.upload{border:1.5px dashed rgba(246,244,240,.2);border-radius:18px;background:rgba(255,255,255,.025);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  padding:clamp(22px,3vh,34px) clamp(20px,2.4vw,34px);
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)}
.upload__inner{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;pointer-events:none}
.upload__inner .upload__browse{pointer-events:auto}
.upload__icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--orange);
  background:rgba(255,90,31,.1);border:1px solid rgba(255,90,31,.28)}
.upload__title{font-size:1rem;font-weight:500;color:var(--white)}
.upload__browse{color:var(--orange);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.upload__hint{font-size:.78rem;letter-spacing:.06em;color:var(--faint)}
.upload.is-drag{border-color:var(--orange);background:rgba(255,90,31,.08);transform:scale(1.01)}
.upload__list{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.upload__list:empty{margin-top:0}
.upload__file{display:inline-flex;align-items:center;gap:.55em;font-size:.82rem;color:var(--dim);
  background:rgba(255,255,255,.05);border:1px solid var(--glass-bd);border-radius:12px;padding:.5em .7em .5em .8em;
  max-width:100%;animation:pop .35s var(--ease)}
.upload__file b{color:var(--white);font-weight:500;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload__file span{color:var(--faint)}
.upload__file button{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:var(--dim);
  background:rgba(255,255,255,.08);font-size:.8rem;line-height:1;transition:background .3s,color .3s}
.upload__file button:hover{background:var(--orange);color:#0a0a0a}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}

/* ============ FORM (step 05) ============ */
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.6vw,26px)}
.form__row{display:flex;flex-direction:column;gap:.5em}
.form__lbl{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600}
.form__err{color:#ff8a5a;font-size:.88rem;margin-top:1rem}
.form__err[hidden]{display:none}

/* ============ BUTTONS ============ */
.q__cta{margin-top:clamp(2rem,4.5vh,3rem)}
.btn-primary{display:inline-flex;align-items:center;gap:.6em;padding:1em 1.75em;border-radius:16px;
  background:var(--orange);color:#0a0a0a;font-weight:600;font-size:1.02rem;
  box-shadow:0 16px 42px -18px rgba(255,90,31,.6);
  transition:transform .4s var(--ease),background .3s,box-shadow .4s var(--ease)}
.btn-primary i{transition:transform .4s var(--ease)}
.btn-primary:hover{transform:translateY(-2px);background:var(--orange-soft);box-shadow:0 22px 56px -18px rgba(255,90,31,.7)}
.btn-primary:hover i{transform:translateX(4px)}
.btn-primary:active{transform:scale(.98)}
.btn-primary:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,90,31,.3),0 16px 42px -18px rgba(255,90,31,.6)}
.btn-primary--lg{padding:1.1em 2.1em;font-size:1.08rem}
.btn-ghost{display:inline-flex;align-items:center;gap:.5em;padding:1em 1.6em;border-radius:16px;
  color:var(--white);border:1px solid var(--line);background:rgba(255,255,255,.03);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  transition:border-color .3s,background .3s,transform .4s var(--ease)}
.btn-ghost:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06);transform:translateY(-2px)}

/* ============ SUCCESS ============ */
.done__mark{width:clamp(88px,9vw,116px);height:clamp(88px,9vw,116px);display:grid;place-items:center;
  border-radius:50%;background:rgba(255,90,31,.08);border:1px solid rgba(255,90,31,.24);margin-bottom:2rem}
.done__mark svg{width:64%;height:64%;overflow:visible}
.done__ring{stroke:var(--orange);stroke-width:3.5;stroke-dasharray:226;stroke-dashoffset:226;transform-origin:center;transform:rotate(-90deg)}
.done__tick{stroke:var(--orange);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60}
.q--done.is-active .done__ring{animation:draw-ring .7s var(--ease) .1s forwards}
.q--done.is-active .done__tick{animation:draw-tick .45s var(--ease) .55s forwards}
.q--done.is-active .done__mark{animation:pop-in .6s var(--ease)}
@keyframes draw-ring{to{stroke-dashoffset:0}}
@keyframes draw-tick{to{stroke-dashoffset:0}}
@keyframes pop-in{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
.done__title{font-size:clamp(2.4rem,5vw,4rem);font-weight:800;letter-spacing:-.035em;line-height:1.02}
.done__sub{margin-top:1.1rem;color:var(--dim);font-size:1.1rem;max-width:44ch}
.done__sub b{color:var(--white);font-weight:600}
.done__actions{margin-top:clamp(2.2rem,5vh,3.2rem);display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

/* ============ PAGE LOAD ============ */
body:not(.is-ready) .q.is-active .q__label,
body:not(.is-ready) .q.is-active .q__title,
body:not(.is-ready) .q.is-active .q__options>*{opacity:0}
.sp-top,.steps{opacity:0;transform:translateY(-10px);transition:opacity .8s var(--ease) .1s,transform .8s var(--ease) .1s}
body.is-ready .sp-top,body.is-ready .steps{opacity:1;transform:none}

/* ============ RESPONSIVE (desktop scaling) ============ */
@media(max-width:1040px){
  .g3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .g3,.g2{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
}

/* ============ PHONE SCALE ============
   Same flow, same components — roughly 30–40% off the visual weight of the
   chrome (headings, step dots, icons, symbols, paddings) so the form reads
   light rather than bulky on a small screen.

   Two things are deliberately NOT shrunk by that much:
   • .field font-size stays at 16px. iOS auto-zooms the whole page when a
     focused input is under 16px, which would break the layout mid-form.
     Its padding is what gets tightened instead.
   • .card__label only drops ~15%. It is the text a visitor actually reads to
     make each choice, and the brief asks to maintain readability — so the
     decoration around it absorbs the reduction instead. */
/* floating WhatsApp — MOBILE ONLY. Hidden by default so the desktop project
   form is unchanged; the frosted circular button appears on phone widths, in
   step with the rest of the mobile site. */
.wa{display:none}
@media(max-width:767px){
  .wa{position:fixed;z-index:1200;
    right:calc(env(safe-area-inset-right) + 16px);
    bottom:calc(env(safe-area-inset-bottom) + 16px);
    width:52px;height:52px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;color:#fff;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
    transition:transform .4s var(--ease)}
  .wa svg{width:25px;height:25px;display:block}
  .wa:active{transform:scale(.92)}
}

@media(max-width:680px){
  /* top bar */
  .sp-top{padding:14px var(--pad)}
  .sp-top__logo img{height:32px}
  .sp-top__back{font-size:.68rem;padding:.4em .7em;margin-left:.2rem}
  /* padding, not size: shrinking the type alone left a 16px-tall tap target */
  .sp-top__close{font-size:.66rem;letter-spacing:.13em;padding:.9em .2em}

  /* step indicator — now in-flow, centered, sitting between the heading and the
     options (start.js has moved the node into the active step). Desktop keeps the
     fixed-top position from the base rule; only mobile drops it into the flow. */
  .steps{position:static;left:auto;top:auto;transform:none;z-index:auto;
    width:100%;justify-content:center;gap:.15rem;
    margin:0 0 clamp(1.5rem,3.6vh,2rem)}
  .steps__dot{width:22px;height:22px;font-size:.6rem}
  .steps__line{width:15px;height:1.5px}

  /* question shell + head — top padding only needs to clear the fixed top bar now
     that the indicator no longer floats at the top */
  .q{padding:clamp(80px,11vh,100px) var(--pad) clamp(32px,6vh,56px)}
  .q__head{margin-bottom:clamp(1.3rem,3vh,1.8rem)}
  .q__label{font-size:.55rem;letter-spacing:.22em;margin-bottom:.65rem}
  .q__title{font-size:clamp(1.35rem,5.8vw,1.85rem);line-height:1.1}

  /* option cards */
  .q__options{gap:9px}
  .card{padding:13px 15px;min-height:58px;gap:.7rem;border-radius:15px}
  .card__ico{font-size:1.05rem}
  .card__label{font-size:.88rem}
  .card__check{top:10px;right:10px}
  .card__check svg{width:11px;height:11px}
  .card.is-selected{transform:scale(1.015)}

  /* inputs */
  .field{padding:.68em .85em;border-radius:12px}
  .field--area{min-height:108px;margin-bottom:1rem}
  .form__lbl{font-size:.58rem;letter-spacing:.12em}
  .form__err{font-size:.78rem;margin-top:.7rem}

  /* upload */
  .upload{padding:16px 15px;border-radius:14px}
  .upload__icon{width:32px;height:32px}
  .upload__icon svg{width:15px;height:15px}
  .upload__title{font-size:.85rem}
  .upload__hint{font-size:.64rem}
  .upload__file{font-size:.7rem;border-radius:10px}
  .upload__list{gap:.45rem;margin-top:.8rem}

  /* actions */
  .q__cta{margin-top:clamp(1.3rem,3vh,1.9rem)}
  .btn-primary{padding:.78em 1.25em;font-size:.9rem;border-radius:13px}
  .btn-primary--lg{padding:.85em 1.5em;font-size:.95rem}
  .btn-ghost{padding:.78em 1.15em;font-size:.9rem;border-radius:13px}

  /* success */
  .done__mark{width:66px;height:66px}
}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  .bg__glow--1,.bg__glow--2,.bg__smoke{animation:none}
  .q,.q *{transition-duration:.001s!important}
  .q--done.is-active .done__ring,.q--done.is-active .done__tick{animation:none;stroke-dashoffset:0}
  .card:hover{transform:none}
}