/* ============================================================
   FAQ + POPUP
   Popup teaser (index) and the FAQ accordion page.
   Framework free. Inherits design tokens.
   ============================================================ */

/* ============================================================
   MODAL TEASER  (index.html)
   Centered modal that appears when the bottom of
   #use-cases is reached (sentinel #ucPopupTrigger).
   ============================================================ */

/* Full-screen dimmed backdrop */
.faq-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--s5);
  background:rgba(5,11,31,.72);
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  /* hidden */
  opacity:0;
  pointer-events:none;
  transition:opacity .38s var(--ease);
}
.faq-modal.show{
  opacity:1;
  pointer-events:auto;
}

/* Centered card */
.faq-modal__card{
  position:relative;
  width:min(480px,100%);
  padding:clamp(32px,5vw,52px) clamp(28px,4vw,48px) clamp(28px,4vw,44px);
  border-radius:var(--r-xl);
  background:var(--surface);
  border:1px solid var(--border-accent);
  box-shadow:var(--shadow-lg),0 0 60px -20px rgba(17,107,248,.38);
  overflow:hidden;
  /* entrance: scale up + rise from slight below */
  transform:scale(.92) translateY(20px);
  opacity:0;
  transition:
    transform .52s var(--ease),
    opacity .38s var(--ease);
}

/* Gradient accent stripe at top */
.faq-modal__card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--gradient);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}

/* Subtle blue glow behind the card (top-right corner bloom) */
.faq-modal__card::after{
  content:'';
  position:absolute;
  top:-60px;right:-50px;
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(17,107,248,.22) 0%,transparent 68%);
  pointer-events:none;
  border-radius:50%;
}

.faq-modal.show .faq-modal__card{
  transform:scale(1) translateY(0);
  opacity:1;
}

/* Close button */
.faq-modal__close{
  position:absolute;
  top:16px;right:16px;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--surface-2);
  color:var(--fg-muted);
  cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
  z-index:1;
}
.faq-modal__close:hover{background:var(--surface);color:var(--fg);border-color:var(--border-strong);}
.faq-modal__close svg{width:15px;height:15px;}
.faq-modal__close:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);}

/* Content */
.faq-modal__eyebrow{
  display:block;
  font-family:var(--font-body);font-weight:600;font-size:var(--text-eyebrow);
  text-transform:uppercase;letter-spacing:.16em;color:var(--accent);
  margin-bottom:var(--s3);
  position:relative;z-index:1;
}
.faq-modal__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.45rem,calc(1.2rem + .9vw),1.9rem);
  line-height:1.12;color:var(--fg-strong);
  margin:0 0 var(--s6) 0;
  text-wrap:balance;
  position:relative;z-index:1;
}
.faq-modal__cta{
  position:relative;z-index:1;
}

/* Mobile: bottom sheet */
@media (max-width:560px){
  .faq-modal{
    align-items:flex-end;
    padding:0;
  }
  .faq-modal__card{
    width:100%;
    max-width:none;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    padding:28px 24px 40px;
    transform:translateY(60px);
  }
  .faq-modal.show .faq-modal__card{
    transform:translateY(0);
  }
}

@media (prefers-reduced-motion:reduce){
  .faq-modal{transition:opacity .18s linear;}
  .faq-modal__card{
    transform:none !important;
    transition:opacity .18s linear;
  }
}

/* ============================================================
   FAQ PAGE  (faq.html)
   ============================================================ */
.faq-page{padding-top:clamp(48px,6vw,88px);}

.faq-hero{max-width:760px;margin-bottom:clamp(36px,5vw,64px);}
.faq-hero .marker{margin-bottom:16px;}
.faq-hero h1{margin:0;}
.faq-hero .lead{margin-top:18px;}

/* ---- Accordion list ---- */
.faq-list{display:flex;flex-direction:column;gap:16px;max-width:1080px;}

.faq-item{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.faq-item:hover{border-color:var(--border-accent);}
.faq-item.open{border-color:var(--border-accent);box-shadow:var(--shadow-md);}

/* Question row (button) */
.faq-q{
  width:100%;
  display:flex;align-items:center;gap:18px;
  padding:clamp(18px,2.4vw,26px) clamp(20px,2.6vw,30px);
  background:transparent;border:none;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(0.9rem,0.85rem + .35vw,0.9375rem);line-height:1.3;color:var(--fg-strong);
  transition:color var(--dur) var(--ease);
}
.faq-q:hover{color:var(--accent);}
.faq-q:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--ring);border-radius:var(--r-lg);}

.faq-q__num{
  flex:none;font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;
  color:var(--accent);opacity:.85;min-width:2ch;
}
.faq-q__text{flex:1 1 auto;}

.faq-q__icon{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border-strong);color:var(--fg-2);
  transition:transform var(--dur-slow) var(--ease),background var(--dur) var(--ease),
             color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.faq-q__icon svg{width:16px;height:16px;}
.faq-item.open .faq-q__icon{
  transform:rotate(180deg);
  background:var(--gradient-soft);color:#fff;border-color:transparent;
}

/* Answer (collapsible via grid-template-rows) */
.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-slow) var(--ease);
}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a__inner{
  overflow:hidden;
  min-height:0;
}
.faq-a__pad{
  padding:clamp(28px,3.2vw,44px) clamp(24px,3vw,40px) clamp(30px,3.4vw,46px) clamp(24px,3vw,40px);
  border-top:1px solid var(--border);
  margin-top:0;
}
.faq-a__pad .head{margin-bottom:clamp(20px,2.4vw,32px);max-width:760px;}
.faq-a__pad .head h2,.faq-a__pad .head h3{margin:0;}
/* Lead intro text shown above moved content */
.faq-a__intro{color:var(--fg-2);font-size:var(--text-lg);line-height:1.6;margin:18px 0 28px;max-width:760px;}

/* Reveal elements inside an answer animate when the item opens */
.faq-a .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.faq-item.open .faq-a .reveal,
.faq-a .reveal.in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .faq-a{transition:none;}
  .faq-q__icon{transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
  .faq-a .reveal{opacity:1;transform:none;transition:none;}
}

/* ---- Floating back-to-top control ---- */
.faq-top{
  --faq-top-y:calc(100% + 28px);
  --faq-top-scale:.94;
  position:fixed;
  right:clamp(16px,3vw,34px);
  bottom:calc(clamp(16px,3vw,32px) + env(safe-area-inset-bottom));
  z-index:70;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  padding:0;
  border:1px solid transparent;
  border-radius:50%;
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    var(--gradient-soft) border-box;
  color:var(--accent);
  box-shadow:0 18px 38px -22px rgba(5,11,31,.45);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,var(--faq-top-y),0) scale(var(--faq-top-scale));
  transition:
    transform .48s cubic-bezier(.2,.82,.22,1),
    opacity .24s var(--ease),
    visibility 0s linear .48s,
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-position .4s var(--ease);
}
.faq-top::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:color-mix(in srgb,var(--signal-bg) 64%,transparent);
  opacity:.8;
  transform:scale(.72);
  transition:transform .48s var(--ease),opacity var(--dur) var(--ease);
}
.faq-top svg{
  position:relative;
  z-index:1;
  width:21px;
  height:21px;
  transition:transform var(--dur) var(--ease);
}
.faq-top.is-visible{
  --faq-top-y:0px;
  --faq-top-scale:1;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
.faq-top.is-visible:hover{
  --faq-top-y:-3px;
  color:var(--fg-on-accent);
  box-shadow:var(--shadow-accent),0 18px 38px -22px rgba(5,11,31,.45);
  background:
    var(--gradient-soft) padding-box,
    var(--gradient-soft) border-box;
}
.faq-top.is-visible:hover::before{
  opacity:0;
  transform:scale(1);
}
.faq-top.is-visible:hover svg{transform:translateY(-2px);}
.faq-top.is-visible:active{
  --faq-top-y:1px;
  --faq-top-scale:.98;
  transform:translate3d(0,var(--faq-top-y),0) scale(var(--faq-top-scale));
}
.faq-top:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--ring),var(--shadow-accent);
}

/* Moved sections live inside accordion answers: neutralise their
   own section padding / background so the panel reads as one surface. */
.faq-a__pad > .section{padding-block:0;background:none;}
.faq-a__pad > .section > .container{padding-inline:0;}
.faq-a__pad > .section .head{margin-bottom:clamp(20px,2.4vw,32px);}

/* ---- CTA block at the bottom of the FAQ page ---- */
.faq-cta{margin-top:clamp(48px,6vw,80px);}
.faq-cta .section{padding-block:0;}
.faq-cta .section > .container{padding-inline:0;}

/* ---- Polish: mobile accordion comfort ---- */
@media (max-width:620px){
  .faq-q{
    gap:12px;
    padding:clamp(16px,2.4vw,26px) clamp(16px,2.6vw,30px);
    font-size:clamp(0.9rem,0.85rem + .35vw,0.9375rem);
  }
  .faq-q__icon{width:26px;height:26px;}
  .faq-a__pad{
    padding:clamp(22px,3vw,32px) clamp(16px,2.6vw,30px) clamp(24px,2.8vw,32px) clamp(16px,2.6vw,30px);
  }
  .faq-hero{margin-bottom:clamp(28px,5vw,48px);}
  .faq-hero .lead{margin-top:12px;}
  .faq-top{
    right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom));
    width:50px;
    height:50px;
  }
  .faq-top svg{width:20px;height:20px;}
}

@media (prefers-reduced-motion:reduce){
  .faq-top,
  .faq-top::before,
  .faq-top svg{
    transition:opacity .18s linear,color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
  }
  .faq-top,
  .faq-top.is-visible,
  .faq-top.is-visible:hover,
  .faq-top.is-visible:active{
    transform:none;
  }
  .faq-top.is-visible:hover svg{transform:none;}
}

/* ---- Dark mode: slightly stronger accordion surface separation ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .faq-item{
    border-color:rgba(255,255,255,.12);
  }
}
[data-theme="dark"] .faq-item{
  border-color:rgba(255,255,255,.12);
}

/* ============================================================
   POPUP secondary button + ASK-THE-TEAM form modal
   ============================================================ */
.faq-modal__cta{width:100%;}
.faq-modal__ask{position:relative;z-index:1;width:100%;margin-top:12px;}

/* Modal shell (same behaviour as .faq-modal) */
.ask-modal{
  position:fixed;inset:0;z-index:260;
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,3vw,32px);
  background:rgba(5,11,31,.74);backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);
  opacity:0;pointer-events:none;transition:opacity .34s var(--ease);
}
.ask-modal.show{opacity:1;pointer-events:auto;}
.ask-modal__card{
  position:relative;width:min(460px,100%);max-height:92vh;overflow:auto;
  padding:clamp(28px,4vw,44px) clamp(24px,4vw,40px) clamp(24px,4vw,36px);
  border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--border-accent);
  box-shadow:var(--shadow-lg);
  transform:scale(.95) translateY(14px);transition:transform .42s var(--ease);
}
.ask-modal.show .ask-modal__card{transform:none;}
.ask-modal__close{
  position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:50%;
  background:var(--surface);color:var(--fg-2);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.ask-modal__close:hover{background:var(--surface-2);color:var(--fg);}
.ask-modal__close:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);}
.ask-modal__close svg{width:16px;height:16px;}
.ask-modal__title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,1.1rem+.8vw,1.7rem);
  line-height:1.15;color:var(--fg-strong);margin:8px 0 6px;}
.ask-modal__sub{color:var(--fg-2);font-size:var(--text-sm);line-height:1.5;margin:0 0 20px;}

.ask-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.ask-field label{font-size:var(--text-sm);font-weight:600;color:var(--fg-strong);}
.ask-field label span{font-weight:400;color:var(--fg-muted);}
.ask-field input,.ask-field textarea{
  font-family:var(--font-body);font-size:var(--text-body);color:var(--fg);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:11px 14px;width:100%;resize:vertical;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.ask-field input::placeholder,.ask-field textarea::placeholder{color:var(--fg-2);opacity:1;}
.ask-field input:focus,.ask-field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(33,188,238,.22);}
.ask-field input[aria-invalid="true"]{border-color:#ff5f57;box-shadow:0 0 0 4px rgba(255,95,87,.18);}
.ask-err{margin:0;font-size:var(--text-xs);color:#ff5f57;}
.ask-submit{width:100%;margin-top:6px;}
.ask-submit[disabled]{opacity:.6;cursor:progress;}
.ask-status{margin:14px 0 0;font-size:var(--text-sm);text-align:center;}
.ask-done{color:#16a34a;}
.ask-fail{color:#ff5f57;}

@media (max-width:560px){
  .ask-modal{align-items:flex-end;padding:0;}
  .ask-modal__card{width:100%;max-height:94vh;border-radius:var(--r-xl) var(--r-xl) 0 0;
    transform:translateY(100%);}
  .ask-modal.show .ask-modal__card{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .ask-modal,.ask-modal__card{transition:opacity .18s linear;}
  .ask-modal__card{transform:none;}
}