/* צור קשר (contact.html). The base — background, aperture, card, entrance — is webinar.css; here:
   the three ways to reach us, the form's card, and "maybe the answer is already here". */

.ct-hero{display:grid;max-width:1280px;margin:0 auto;
  grid-template-columns:minmax(0,1fr) minmax(360px,460px);grid-template-areas:"copy form" "ways form";
  gap:clamp(28px,3.6vw,56px) clamp(40px,5vw,96px);align-items:start}
.ct-copy{grid-area:copy;padding-top:clamp(0px,2vh,28px);container-type:inline-size}
.ct-ways{grid-area:ways;container-type:inline-size}
.ct-form{grid-area:form}
@media (min-width:1100px) and (min-height:820px){ .ct-form{position:sticky;top:calc(var(--pad) + 92px)} }
@media (max-width:1099px){
  .ct-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "ways" "form"}
  .ct-ways,.ct-form{max-width:600px;width:100%}
}
.ctp .wb-h{font-size:clamp(44px,17cqi,122px)}
.ctp .wb-h .line.sm{font-size:clamp(18px,.34em,30px);white-space:normal;text-wrap:balance}
.ctp .wb-lead{max-width:38ch;text-wrap:pretty}

/* entrance, as the webinar page */
.ct-ways,.ct-form,.ct-more{opacity:0;transform:translateY(18px);
  transition:opacity .9s ease calc(var(--i,0) * 90ms + 320ms),transform 1.1s var(--ease-out) calc(var(--i,0) * 90ms + 320ms)}
body:not(.pre) :is(.ct-ways,.ct-form,.ct-more){opacity:1;transform:none}

/* ---------- the three ways ---------- */
.ct-ways{list-style:none;display:grid;gap:12px}
.ct-way{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:18px 20px;border-radius:20px;background:rgba(9,9,11,.6);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .35s,transform .45s var(--ease-out),background .35s}
/* a warm sweep from the start edge on hover — the site's buttons do the same */
.ct-way::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(210,173,107,.16),transparent 70%);
  transform:scaleX(0);transform-origin:right;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.ct-way:hover{border-color:rgba(210,173,107,.7);transform:translateY(-2px)}
.ct-way:hover::before{transform:scaleX(1)}
.ct-way:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.ct-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;border:1px solid rgba(210,173,107,.55);color:var(--accent)}
.ct-ic .ico{font-size:24px}
.ct-txt{min-width:0;display:grid;gap:2px}
.ct-txt b{font-size:14px;font-weight:400;letter-spacing:.12em;color:var(--ink-dim)}
/* the number reads left to right, and sits under its label on the start side */
.ct-txt bdi{justify-self:start;font-family:var(--display);font-size:clamp(20px,6.4cqi,28px);font-weight:700;letter-spacing:.01em;
  white-space:nowrap}
.ct-txt small{font-size:13.5px;color:var(--ink-soft)}
.ct-go{font-size:14px;color:var(--accent);white-space:nowrap;transition:transform .4s var(--ease-out)}
.ct-way:hover .ct-go{transform:translateX(-4px)}
/* WhatsApp: the way most people write — its own green */
.ct-way.wa{border-color:rgba(37,211,102,.4);background:linear-gradient(110deg,rgba(37,211,102,.1),rgba(9,9,11,.62) 60%)}
.ct-way.wa .ct-ic{background:var(--wa);border-color:var(--wa);color:#06240f}
.ct-way.wa .ct-go{color:#5fe08f}
.ct-way.wa::before{background:linear-gradient(270deg,rgba(37,211,102,.18),transparent 70%)}
.ct-way.wa:hover{border-color:var(--wa)}
/* a narrow column: "open a chat" moves under the number */
@container (max-width:480px){
  .ct-way{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px}
  .ct-go{grid-column:2;justify-self:start;margin-top:-6px}
  .ct-ic{width:48px;height:48px;border-radius:14px}
}

/* ---------- the form, inside the card (its own frame dropped) ---------- */
.ct-form .leadform{width:100%;margin-top:14px;padding:0;border:0;background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.ct-form .wbc-h h2{font-size:clamp(26px,2.3vw,32px)}

/* ---------- "maybe the answer is already here" ---------- */
.ct-more{max-width:1280px;margin:clamp(44px,6vw,84px) auto 0}
.ct-more h2{font-size:clamp(20px,1.8vw,26px);font-weight:600}
.ct-more ul{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}
.ct-more a{display:flex;flex-direction:column;gap:4px;height:100%;padding:16px 18px;border-radius:18px;background:rgba(9,9,11,.56);
  border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .3s,transform .4s var(--ease-out)}
.ct-more a:hover{border-color:var(--accent);transform:translateY(-2px)}
.ct-more b{font-size:16px;font-weight:600}
.ct-more span{font-size:13.5px;line-height:1.45;color:var(--ink-dim)}
@media (max-width:1100px){ .ct-more ul{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .ct-more ul{grid-template-columns:1fr 1fr} }

@media (prefers-reduced-motion:reduce){
  :is(.ct-ways,.ct-form,.ct-more){transition:none}
  .ct-way,.ct-way::before,.ct-go{transition:none}
}