/* ============================================================
   AI CALLER — DETAIL MOTION
   Security, Pricing, FAQ, CTA and Footer. These sit at the
   bottom of the page where attention drops, so they carry the
   heaviest, most deliberate motion on the site.
   ============================================================ */

/* ============================================================
   SECURITY: a scanning system, not four static icons
   ============================================================ */
.secgrid{gap:var(--s-m)}
.seci{
  position:relative;padding:var(--s-m);border-radius:var(--r-m);
  border:1px solid var(--on-night-12);overflow:hidden;
  background:linear-gradient(160deg,rgba(246,243,237,.035),transparent);
  transition:border-color var(--d-base) var(--ease),transform var(--d-base) var(--ease);
}
.seci:hover{border-color:var(--amber);transform:translateY(-4px)}

/* a scan line sweeps down each panel, staggered so it reads
   as one system sweeping rather than four separate loops */
.seci::before{
  content:'';position:absolute;left:0;right:0;top:-30%;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(232,130,26,.16),transparent);
  animation:scan-down 6.5s var(--ease-soft) infinite;
}
.secgrid .seci:nth-child(2)::before{animation-delay:.9s;animation-duration:7.4s}
.secgrid .seci:nth-child(3)::before{animation-delay:1.8s;animation-duration:6.9s}
.secgrid .seci:nth-child(4)::before{animation-delay:2.7s;animation-duration:7.8s}
@keyframes scan-down{0%{top:-34%;opacity:0}12%{opacity:1}70%{top:104%;opacity:0}100%{top:104%;opacity:0}}

/* the icon gets a lock-up: pulsing ring + drawn stroke */
.sec-ic{
  position:relative;width:44px;height:44px;flex-shrink:0;border-radius:var(--r-m);
  display:grid;place-items:center;background:rgba(232,130,26,.12);color:var(--amber-hot);
  transition:background var(--d-base) var(--ease)
}
.sec-ic::after{
  content:'';position:absolute;inset:0;border-radius:inherit;border:1.5px solid var(--amber);
  opacity:0;animation:ring-out 4.2s var(--ease) infinite;
}
.secgrid .seci:nth-child(2) .sec-ic::after{animation-delay:1.05s}
.secgrid .seci:nth-child(3) .sec-ic::after{animation-delay:2.1s}
.secgrid .seci:nth-child(4) .sec-ic::after{animation-delay:3.15s}
@keyframes ring-out{0%{opacity:.8;transform:scale(1)}55%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}
.seci:hover .sec-ic{background:var(--amber);color:#12100D}
.sec-ic svg path,.sec-ic svg rect,.sec-ic svg circle{
  stroke-dasharray:90;animation:sec-draw 7s var(--ease) infinite}
@keyframes sec-draw{0%{stroke-dashoffset:90}18%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:90}}

/* a live data stream ticking along the bottom edge */
.seci::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:34%;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--amber-hot),transparent);
  animation:stream-x 5.5s linear infinite;
}
.secgrid .seci:nth-child(2)::after{animation-delay:-1.4s;animation-duration:6.2s}
.secgrid .seci:nth-child(3)::after{animation-delay:-2.8s;animation-duration:5.9s}
.secgrid .seci:nth-child(4)::after{animation-delay:-4.2s;animation-duration:6.6s}
@keyframes stream-x{from{left:-34%}to{left:100%}}

/* ============================================================
   PRICING
   ============================================================ */
.price-toggle{
  display:inline-flex;align-items:center;gap:.9em;margin-top:var(--s-m);
  padding:.45em .5em .45em 1em;border:1px solid var(--ink-12);border-radius:var(--r-pill);
  background:var(--surface)
}
.price-toggle span{font-size:var(--t-sm);font-weight:600;color:var(--ink-55);
  transition:color var(--d-fast) var(--ease)}
.price-toggle span.on{color:var(--ink)}
.pt-switch{
  position:relative;width:50px;height:28px;border-radius:99px;border:none;
  background:var(--ink-20);cursor:pointer;transition:background var(--d-base) var(--ease);flex-shrink:0}
.pt-switch::after{
  content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(18,16,13,.28);
  transition:transform var(--d-base) var(--ease)}
.pt-switch[aria-checked="true"]{background:var(--amber)}
.pt-switch[aria-checked="true"]::after{transform:translateX(22px)}
.pt-save{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--amber-ink);background:var(--amber-tint);
  padding:.3em .7em;border-radius:var(--r-pill);font-weight:700}

/* the price itself rolls when the period changes */
.price-amt{position:relative;overflow:hidden}
.price-num{display:inline-block;transition:transform 340ms var(--ease),opacity 340ms var(--ease)}
.price-amt.rolling .price-num{transform:translateY(-70%);opacity:0}
.price-period{font-family:var(--font-body);font-size:var(--t-sm);font-weight:400;color:var(--ink-55);letter-spacing:0}
.price-sub{font-size:var(--t-micro);color:var(--ink-40);min-height:1.2em;
  transition:opacity 300ms var(--ease)}

/* featured card: a light genuinely orbits the border */
.price--best{isolation:isolate;background:var(--surface)}
.price-glow{
  position:absolute;inset:-70%;z-index:-2;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 250deg,
    rgba(232,130,26,.85) 300deg,rgba(255,154,46,.4) 330deg,transparent 360deg);
  animation:orbit 6s linear infinite;
}
.price--best::after{
  content:'';position:absolute;inset:2px;z-index:-1;border-radius:calc(var(--r-l) - 2px);
  background:var(--surface);animation:none;left:2px;width:auto;height:auto;top:2px}
@keyframes orbit{to{transform:rotate(360deg)}}

/* feature ticks draw themselves, then loop */
.price li svg path{stroke-dasharray:20;animation:tick-loop 8s var(--ease) infinite}
.prices .price:nth-child(1) li:nth-child(1) svg path{animation-delay:.0s}
.prices .price:nth-child(1) li:nth-child(2) svg path{animation-delay:.18s}
.prices .price:nth-child(1) li:nth-child(3) svg path{animation-delay:.36s}
.prices .price:nth-child(1) li:nth-child(4) svg path{animation-delay:.54s}
.prices .price:nth-child(2) li:nth-child(1) svg path{animation-delay:.3s}
.prices .price:nth-child(2) li:nth-child(2) svg path{animation-delay:.48s}
.prices .price:nth-child(2) li:nth-child(3) svg path{animation-delay:.66s}
.prices .price:nth-child(2) li:nth-child(4) svg path{animation-delay:.84s}
.prices .price:nth-child(3) li:nth-child(1) svg path{animation-delay:.6s}
.prices .price:nth-child(3) li:nth-child(2) svg path{animation-delay:.78s}
.prices .price:nth-child(3) li:nth-child(3) svg path{animation-delay:.96s}
.prices .price:nth-child(3) li:nth-child(4) svg path{animation-delay:1.14s}
@keyframes tick-loop{0%{stroke-dashoffset:20}10%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:20}}

.price li{transition:transform var(--d-fast) var(--ease)}
.price:hover li{transform:translateX(3px)}
.price:hover li:nth-child(2){transition-delay:40ms}
.price:hover li:nth-child(3){transition-delay:80ms}
.price:hover li:nth-child(4){transition-delay:120ms}

/* ============================================================
   FAQ: a growing accent rail + smoother open
   ============================================================ */
.faq details{position:relative;padding-left:0;transition:padding-left var(--d-base) var(--ease)}
.faq details::before{
  content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:var(--amber);transform:scaleY(0);transform-origin:center;
  transition:transform var(--d-base) var(--ease)}
.faq details:hover,.faq details[open]{padding-left:var(--s-s)}
.faq details:hover::before,.faq details[open]::before{transform:scaleY(1)}
.faq summary{transition:color var(--d-fast) var(--ease)}
.faq details[open] summary{color:var(--amber-deep)}
.faq-a{animation:faq-slide 360ms var(--ease)}
@keyframes faq-slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ============================================================
   CTA: orbiting light + a pulse on the primary action
   ============================================================ */
.cta{isolation:isolate}
.cta-orbit{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.cta-orbit i{
  position:absolute;border-radius:50%;background:rgba(255,180,90,.55);
  animation:orbit-drift 15s linear infinite}
.cta-orbit i:nth-child(1){width:4px;height:4px;left:14%;top:70%;animation-duration:16s}
.cta-orbit i:nth-child(2){width:3px;height:3px;left:32%;top:80%;animation-duration:21s;animation-delay:-5s}
.cta-orbit i:nth-child(3){width:5px;height:5px;left:56%;top:75%;animation-duration:18s;animation-delay:-9s}
.cta-orbit i:nth-child(4){width:3px;height:3px;left:74%;top:85%;animation-duration:23s;animation-delay:-3s}
.cta-orbit i:nth-child(5){width:4px;height:4px;left:88%;top:72%;animation-duration:19s;animation-delay:-13s}
@keyframes orbit-drift{
  from{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.75}
  85%{opacity:.4}
  to{transform:translateY(-260px) translateX(30px);opacity:0}
}
.cta h2{position:relative;z-index:2}
.cta p,.cta .hero-actions{position:relative;z-index:2}

/* ============================================================
   FOOTER: links wipe, headings tick, badges shimmer
   ============================================================ */
.ftr-col a{position:relative;display:inline-block}
.ftr-col a::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--amber-hot);
  transform:scaleX(0);transform-origin:right;transition:transform var(--d-base) var(--ease)}
.ftr-col a:hover::after{transform:scaleX(1);transform-origin:left}
.ftr-col a{transition:color var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)}
.ftr-col a:hover{transform:translateX(2px)}

.ftr-col h5{position:relative;padding-left:14px}
.ftr-col h5::before{
  content:'';position:absolute;left:0;top:50%;width:8px;height:1px;background:var(--amber);
  transform:translateY(-50%) scaleX(0);transform-origin:left;
  animation:head-tick 7s var(--ease) infinite}
.ftr-top .ftr-col:nth-child(3) h5::before{animation-delay:-1.6s}
.ftr-top .ftr-col:nth-child(4) h5::before{animation-delay:-3.2s}
.ftr-top .ftr-col:nth-child(5) h5::before{animation-delay:-4.8s}
@keyframes head-tick{0%,88%,100%{transform:translateY(-50%) scaleX(0)}
  12%,76%{transform:translateY(-50%) scaleX(1)}}

.ftr-badge{position:relative;overflow:hidden}
.ftr-badge::after{
  content:'';position:absolute;top:0;bottom:0;left:-70%;width:50%;
  background:linear-gradient(100deg,transparent,rgba(255,180,90,.22),transparent);
  animation:sweep-x 6s var(--ease-soft) infinite}
.ftr-badges .ftr-badge:nth-child(2)::after{animation-delay:-2s}
.ftr-badges .ftr-badge:nth-child(3)::after{animation-delay:-4s}

.ftr-legal a{position:relative}
.ftr-legal a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform var(--d-base) var(--ease)}
.ftr-legal a:hover::after{transform:scaleX(1);transform-origin:left}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .seci::before,.seci::after,.sec-ic::after,.sec-ic svg path,.sec-ic svg rect,.sec-ic svg circle,
  .price-glow,.price li svg path,.cta-orbit i,.ftr-col h5::before,.ftr-badge::after{
    animation:none!important}
  .sec-ic svg path,.sec-ic svg rect,.sec-ic svg circle{stroke-dasharray:none}
  .price li svg path{stroke-dasharray:none}
  .cta-orbit{display:none}
  .price-num{transition:none!important}
  .faq-a{animation:none!important}
}