/* PLATA — components: bento, finder, steps, pricing, faq, forms, contacts */

.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.bcard{
  position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:190px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(165deg,#ffffff,#f8f6ef);
  padding:26px;transition:border-color .3s,transform .4s var(--ease);
}
.bcard{box-shadow:0 24px 48px -40px rgba(18,20,14,.45)}
.bcard:hover{border-color:rgba(18,20,14,.22);transform:translateY(-3px);box-shadow:0 30px 54px -40px rgba(18,20,14,.5)}
.bcard::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(140,175,20,.20),transparent 45%);
}
.bcard:hover::after{opacity:1}
.bcard--wide{grid-column:span 8}
.bcard--half{grid-column:span 6}
.bcard--third{grid-column:span 4}
.bcard--full{grid-column:span 12}
.bcard__icon{
  width:44px;height:44px;border-radius:12px;border:1px solid var(--line-strong);
  display:grid;place-items:center;color:var(--acc-deep);margin-bottom:auto;background:rgba(150,190,30,.16);
}
.bcard__icon svg{width:20px;height:20px}
.bcard h3{margin-top:22px;font-size:19px;letter-spacing:-.02em;font-weight:700}
.bcard p{margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--text-dim);max-width:42ch}
.bcard__tag{position:absolute;top:22px;right:22px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--text-mute);text-transform:uppercase}
.bcard--accent{background:linear-gradient(160deg,rgba(170,205,50,.34),rgba(200,247,81,.03));border-color:rgba(120,150,10,.38)}
.bcard--accent .bcard__icon{background:var(--acc);color:var(--acc-ink);border-color:var(--acc-deep)}
.bcard--accent p{color:#3f4636}
.bcard__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:100px;
  border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--text-dim);
  background:rgba(18,20,14,.02);transition:.2s;white-space:nowrap;
}
button.chip{cursor:pointer}
button.chip:hover{color:var(--text);border-color:var(--line-strong);background:rgba(18,20,14,.05)}
.chip.is-active{background:var(--acc);border-color:var(--acc-deep);color:var(--acc-ink)}
.chip--mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em}

.finder{
  position:relative;overflow:hidden;padding:clamp(22px,3.4vw,40px);
  border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  background:radial-gradient(ellipse at 50% 0%,rgba(150,190,30,.18),transparent 55%),#fbfaf6;
}
.finder__head{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.finder__head h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em}
.finder__head p{font-size:13.5px;color:var(--text-dim);margin-top:6px}
.finder__form{display:flex;gap:10px}
.search-field{
  position:relative;flex:1;display:flex;align-items:center;
  border:1px solid var(--line-strong);border-radius:14px;background:#ffffff;
  transition:border-color .25s,box-shadow .25s;
}
.search-field:focus-within{border-color:rgba(120,150,10,.65);box-shadow:0 0 0 4px rgba(140,175,20,.20)}
.search-field svg{width:18px;height:18px;color:var(--text-mute);margin-left:16px;flex:none}
.search-field input{
  width:100%;background:none;border:0;outline:0;padding:16px 16px 16px 12px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
}
.search-field input::placeholder{color:#8a8f80;font-weight:500}
.search-field kbd{
  font-family:var(--mono);font-size:10px;color:var(--text-mute);border:1px solid var(--line);
  border-radius:6px;padding:3px 6px;margin-right:12px;background:rgba(18,20,14,.03);flex:none;
}
.search-hint{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--text-mute)}
.finder__live{margin-top:22px;display:none;flex-direction:column;gap:6px;max-height:330px;overflow:auto;padding-right:4px}
.finder__live.is-open{display:flex}
.finder-hit{
  display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:14px;
  padding:11px 14px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:.15s;
}
.finder-hit:hover,.finder-hit:focus-visible{background:rgba(255,255,255,.04);border-color:var(--line)}
.finder-hit code{font-family:var(--mono);font-size:12px;color:var(--acc-deep);font-weight:700;letter-spacing:.02em}
.finder-hit b{font-size:13.5px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finder-hit small{font-size:11px;color:var(--text-mute)}
.finder-hit em{font-family:var(--mono);font-size:10px;color:var(--text-mute);font-style:normal;text-transform:uppercase;letter-spacing:.08em}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}
.step{position:relative;padding:26px 22px 24px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(18,20,14,.02);overflow:hidden}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--acc-deep)}
.step::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--acc),transparent 60%);opacity:.4}
.step h3{margin-top:44px;font-size:17px;letter-spacing:-.02em}
.step p{margin-top:8px;font-size:13px;color:var(--text-dim);line-height:1.55}
.step__time{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:rgba(18,20,14,.02)}
.stat{padding:26px 24px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat__v{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.05em;line-height:1}
.stat__v span{color:var(--acc-deep);font-size:.6em;vertical-align:super;margin-left:2px}
.stat__l{margin-top:8px;font-size:12px;color:var(--text-mute)}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.price{
  position:relative;display:flex;flex-direction:column;padding:28px 24px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fbfaf6;
  transition:border-color .3s,transform .3s var(--ease);
}
.price{box-shadow:0 24px 48px -40px rgba(18,20,14,.40)}
.price:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:0 30px 54px -40px rgba(18,20,14,.48)}
.price--featured{border-color:rgba(120,150,10,.55);background:linear-gradient(170deg,rgba(150,190,30,.20),#fbfaf6 55%)}
.price__badge{
  position:absolute;top:-11px;left:24px;background:var(--acc);color:var(--acc-ink);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:100px;font-weight:700;
}
.price h3{font-size:16px;letter-spacing:-.01em;color:var(--text-dim);font-weight:600}
.price__v{font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-.045em;margin-top:12px;line-height:1}
.price__v small{font-size:13px;font-weight:600;color:var(--text-mute);letter-spacing:0;margin-left:6px}
.price__list{margin:22px 0 26px;display:grid;gap:10px;font-size:13.5px;color:var(--text-dim)}
.price__list li{display:flex;gap:10px;align-items:flex-start}
.price__list svg{width:14px;height:14px;color:var(--acc-deep);flex:none;margin-top:4px}
.price .btn{margin-top:auto}

.faq{display:grid;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 4px;text-align:left;font-size:clamp(15px,1.6vw,18px);font-weight:700;letter-spacing:-.02em;
  transition:color .2s;
}
.faq__q:hover{color:var(--acc-deep)}
.faq__q i{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;position:relative;transition:.3s var(--ease)}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;background:currentColor;transition:.3s}
.faq__q i::before{width:11px;height:1.5px}
.faq__q i::after{width:1.5px;height:11px}
.faq__item.is-open .faq__q i{background:var(--acc);border-color:var(--acc-deep);color:var(--acc-ink);transform:rotate(90deg)}
.faq__item.is-open .faq__q i::after{opacity:0}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq__a p{padding:0 60px 26px 4px;color:var(--text-dim);font-size:14.5px;line-height:1.65;max-width:75ch}

.cta-band{position:relative;border:1px solid var(--line-strong);border-radius:var(--radius-lg);overflow:hidden;padding:clamp(30px,5vw,64px);background:#fbfaf6}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 15% 0%,rgba(170,205,50,.34),transparent 50%),radial-gradient(ellipse at 85% 100%,rgba(11,107,125,.10),transparent 55%)}
.cta-band__inner{position:relative;display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.cta-band h2{font-size:clamp(28px,4vw,52px);letter-spacing:-.045em;line-height:1.02;max-width:16ch}
.cta-band p{margin-top:16px;color:var(--text-dim);max-width:44ch;font-size:15px}
.cta-band__actions{display:flex;flex-direction:column;gap:10px;min-width:260px}

.field{display:grid;gap:8px}
.field label{font-size:11px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.field input,.field textarea,.field select{
  width:100%;background:#ffffff;border:1px solid var(--line-strong);border-radius:12px;
  padding:14px 16px;font-size:15px;font-weight:500;outline:0;transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(120,150,10,.65);box-shadow:0 0 0 4px rgba(140,175,20,.22)}
.field textarea{resize:vertical;min-height:96px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .field--full{grid-column:1/-1}
.form-note{font-size:11.5px;color:var(--text-mute);line-height:1.5}
.form-note a{color:var(--text-dim);text-decoration:underline;text-underline-offset:2px}

.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,3vw,44px);align-items:start}
.contact-card{border:1px solid var(--line);border-radius:var(--radius);background:rgba(18,20,14,.02);padding:28px}
.contact-list{display:grid;gap:20px;margin-top:24px}
.contact-item{display:flex;gap:14px;align-items:flex-start}
.contact-item__ic{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--acc-deep);flex:none;background:rgba(150,190,30,.12)}
.contact-item__ic svg{width:17px;height:17px}
.contact-item__k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
.contact-item__v{font-size:15px;font-weight:700;margin-top:4px;letter-spacing:-.01em}
.contact-item__v a:hover{color:var(--acc-deep)}
.contact-item small{display:block;font-size:12px;color:var(--text-mute);margin-top:3px;font-weight:500}