/*
 * PanelLaunch homepage v3 (simplified, 2026-10-09).
 * Loaded by resources/views/home-v3.blade.php only, after pl-v2.css (via the
 * layout's styles stack). pl-v2.css still provides the header, buttons,
 * pricing cards, accordions and the final call to action; this file adds the
 * new sections and tightens the spacing. Logical properties throughout, so
 * Arabic (RTL) mirrors correctly.
 */

/* Shorter page, calmer rhythm. */
.sec{padding:96px 0}
.sec-h{margin-bottom:44px}
@media (max-width:860px){.sec{padding:68px 0}.sec-h{margin-bottom:32px}}

/* ------------------------------------------------------------- hero */
.v3-hero{position:relative;padding:56px 0 76px;overflow:hidden}
.v3-hero::before{content:"";position:absolute;inset-block-start:-30%;inset-inline-end:-15%;width:75%;height:140%;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 15%,transparent),transparent 72%);pointer-events:none}
.v3-hero-g{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.22fr);gap:56px;align-items:center}
.v3-hero h1{margin:16px 0 18px;font-size:clamp(2.3rem,1.2rem + 3.3vw,3.7rem);line-height:1.04;letter-spacing:-.04em;font-weight:800;text-wrap:balance}
.v3-hero .lede{font-size:1.15rem}

.v3-shot{margin:0}
.v3-frame{position:relative}
.v3-shot picture{display:block}
.v3-shot .win img{width:100%;height:auto;background:#f4f6fb}
.v3-live{position:absolute;z-index:2;inset-block-start:-15px;inset-inline-end:22px;display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2);font-size:.8125rem;font-weight:700;color:var(--ok);white-space:nowrap}
.v3-live i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px var(--ok-soft)}
/* 2026-10-18: the hero is a sample dashboard, so its pill reads as a label (amber), not a live status (green) */
.v3-live.sample{color:#b45309}.v3-live.sample i{box-shadow:0 0 0 4px rgba(245,158,11,.2)}
[data-theme="dark"] .v3-live.sample{color:#fbbf24}
.v3-shot .v3-cap{margin-top:16px}   /* the orders badge that needed the room is gone */
.v3-badge{position:absolute;z-index:2;inset-inline-start:-26px;inset-block-end:-26px;display:flex;align-items:center;gap:12px;padding:13px 18px 13px 13px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-3)}
.v3-badge-i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--ok-soft);color:var(--ok)}
.v3-badge-i .ico{width:22px;height:22px;stroke-width:2.2}
.v3-badge b{display:block;font-size:1.45rem;line-height:1.1;font-weight:800;letter-spacing:-.025em}
.v3-badge small{display:block;font-size:.8125rem;font-weight:600;color:var(--faint)}
.v3-cap{margin-top:42px;font-size:.8125rem;line-height:1.5;color:var(--faint);text-align:end}

@media (max-width:1023px){
  .v3-hero{padding:32px 0 56px}
  .v3-hero-g{grid-template-columns:1fr;gap:52px}
  .v3-badge{inset-inline-start:12px;inset-block-end:-24px;padding:10px 14px 10px 10px}
  .v3-cap{text-align:start;margin-top:40px}
}
@media (max-width:480px){
  .v3-live{inset-inline-end:12px;font-size:.75rem;padding:5px 11px}
  .v3-badge-i{width:36px;height:36px}
  .v3-badge b{font-size:1.15rem}
  .v3-badge small{font-size:.75rem}
}

/* --------------------------------------------------------- payments */
.v3-pay{border-block:1px solid var(--line);background:var(--surface)}
.v3-pay .pays{border-top:0;justify-content:center}
.v3-pay .pays-more{margin-inline-start:0}
@media (max-width:860px){.v3-pay .pays{justify-content:flex-start}}

/* ------------------------------------------------------------ steps */
.v3-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1080px;margin:0 auto}
.v3-step{position:relative;padding:30px 28px;background:var(--surface);border:1px solid var(--line);border-radius:20px}
.v3-step .n{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--brand);color:#fff;font-weight:800;font-size:1.15rem}
.v3-step h3{margin:20px 0 6px;font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.v3-step p{color:var(--muted)}
.v3-step:not(:last-child)::after{content:"";position:absolute;inset-block-start:52px;inset-inline-end:-23px;width:24px;height:2px;background:var(--line-2)}
@media (max-width:860px){
  .v3-steps{grid-template-columns:1fr;gap:12px}
  .v3-step{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;padding:20px}
  .v3-step .n{grid-row:span 2;width:40px;height:40px;font-size:1rem}
  .v3-step h3{margin:0;font-size:1.125rem;align-self:end}
  .v3-step::after{display:none}
}

/* --------------------------------------------------------- features */
.v3-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.v3-feat{padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:20px}
.v3-feat .i{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--brand-soft);color:var(--brand-text)}
.v3-feat .i .ico{width:24px;height:24px}
.v3-feat h3{margin:18px 0 6px;font-size:1.1875rem;font-weight:800;letter-spacing:-.015em}
.v3-feat p{color:var(--muted);font-size:1rem}
.v3-more{margin-top:26px;text-align:center}
@media (max-width:1023px){.v3-feats{grid-template-columns:1fr 1fr;gap:14px}}
@media (max-width:600px){
  .v3-feats{grid-template-columns:1fr;gap:12px}
  .v3-feat{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;padding:20px}
  .v3-feat .i{grid-row:span 2;width:44px;height:44px}
  .v3-feat h3{margin:0;font-size:1.0625rem;align-self:end}
  .v3-feat p{font-size:.9375rem}
}

/* -------------------------------------------------------- live demo */
/* Since 2026-10-17: copy with the demo button at the end, then the theme gallery (it replaced the single screenshot). */
.v3-demo-h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end}
.v3-demo-h h2{margin-top:12px}
.v3-demo-h .sec-p{max-width:34em}
@media (max-width:860px){.v3-demo-h{grid-template-columns:1fr;align-items:start}.v3-demo-go{justify-self:start}}

/* ---------------------------------------------------- theme gallery */
/* 14 cards on the ink band: 3 / 2 columns, a swipe row on phones. Each card is one link (the "See it" link stretches
   over it). Screenshots swap with the site's own light/dark switch; Neon has one (dark) image. */
.thm-head{margin-top:56px;padding-top:36px;border-top:1px solid var(--ink-line)}
.thm-head h3{font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);font-weight:800;letter-spacing:-.025em;color:#fff}
.thm-head p{max-width:42em;margin-top:6px;color:var(--ink-muted)}
.thm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.thm-grid.is-cut>.thm:nth-child(n+7){display:none}
.thm{position:relative;display:flex;flex-direction:column;border:1px solid var(--ink-line);border-radius:18px;background:var(--ink-2);overflow:hidden;transition:transform .2s var(--ease),border-color .2s var(--ease)}
.thm:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.3)}
.thm:has(:focus-visible){outline:3px solid #8cb2ff;outline-offset:2px}
.thm-shot{aspect-ratio:778/486;background:#1b2440;border-bottom:1px solid var(--ink-line)}
.thm-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.thm-shot img.d{display:none}
[data-theme="dark"] .thm-shot img.l{display:none}
[data-theme="dark"] .thm-shot img.d{display:block}
.thm-b{display:flex;flex-direction:column;flex:1;padding:18px 20px 12px}
.thm-t{display:flex;align-items:center;justify-content:space-between;gap:10px}
.thm-t h4{margin:0;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.thm-plan{flex:none;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:700;white-space:nowrap}
.thm-plan.p-starter{background:rgba(74,222,128,.14);color:#86efac}
.thm-plan.p-pro{background:rgba(140,178,255,.16);color:#a9c4ff}
.thm-plan.p-business{background:rgba(251,191,36,.14);color:#fcd34d}
.thm-k{align-self:flex-start;margin-top:10px;padding:3px 8px;border:1px solid var(--ink-line);border-radius:6px;font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.thm-p{flex:1;margin-top:10px;font-size:.9375rem;line-height:1.55;color:var(--ink-muted)}
.thm-go{align-self:flex-start;margin-top:4px;font-size:.9375rem}
.thm-go::after{content:"";position:absolute;inset:0}
.thm-cta{justify-content:center;align-items:flex-start;gap:12px;padding:30px 28px;border-style:dashed;border-color:rgba(255,255,255,.22);background:radial-gradient(120% 90% at 0% 0%,rgba(37,99,235,.28),transparent 60%),var(--ink-2)}
.thm-cta:hover{transform:none}
.thm-cta h4{margin:0;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:#fff}
.thm-cta p{color:var(--ink-muted)}
.thm-cta .btn{margin-top:6px}
.thm-cta-i{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--brand);color:#fff}
.thm-cta-i .ico{width:22px;height:22px}
.thm-swipe{display:none}
.thm-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.thm-foot .btn[hidden]{display:none}
.thm-note{max-width:44em;margin:18px auto 0;text-align:center;font-size:.8125rem;line-height:1.55;color:var(--ink-muted)}
@media (max-width:1023px){.thm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:641px) and (max-width:1023px){.thm-grid>.thm-cta{display:none}}
@media (max-width:640px){
  .thm-head{margin-top:40px;padding-top:28px}
  .thm-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);padding-block-end:4px;scrollbar-width:none;overscroll-behavior-x:contain}
  .thm-grid::-webkit-scrollbar{display:none}
  .thm{flex:0 0 84%;scroll-snap-align:start}
  .thm-grid.is-cut>.thm:nth-child(n+7){display:flex}
  .thm:hover{transform:none}
  .thm-foot .thm-all{display:none}
  .thm-swipe{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-size:.8125rem;color:var(--ink-muted)}
}
@media (prefers-reduced-motion:reduce){.thm,.thm:hover{transition:none;transform:none}}

/* ---------------------------------------------------------- pricing */
.v3-plus{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);font-size:.9375rem;font-weight:750}
.v3-plus+.plan-f{margin-top:12px;padding-top:0;border-top:0}
.v3-pnote{margin-top:28px;text-align:center;font-size:.9375rem;color:var(--faint)}
.v3-pnote .lnk{min-height:40px}
.v3-offer{display:inline-block;margin-bottom:10px;padding:6px 14px;border-radius:999px;background:var(--brand-soft);color:var(--text);font-weight:600}
.v3-offer b{color:var(--brand-text);letter-spacing:.04em}

/* -------------------------------------------------------------- faq */
.v3-faq{max-width:840px}
.v3-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:36px;text-align:center}
.v3-ask p{flex:1 1 100%;color:var(--muted)}

/* Phones: the square crop already shows the order total large, so the badge
   would only repeat it and cover the chart. */
@media (max-width:640px){.v3-badge{display:none}.v3-cap{margin-top:14px}}

/* Three plans (2026-10-17): Starter / Pro / Business side by side on wide screens, one column below that. */
.plans.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px;gap:20px}
.plans.three .plan{padding:30px 26px}
.plans.three .plan-h .plan-tag{white-space:nowrap}
@media (max-width:1040px){.plans.three{grid-template-columns:1fr;max-width:560px}}