/* ============================================================
   frontend.css — the prototype's \3c style> block, verbatim.
   Loaded as its own Vite entry by <x-layouts.frontend>.
   ============================================================ */

html, body { background:#FFFFFF; }

body { font-family:'Plus Jakarta Sans','IBM Plex Sans Arabic',Inter,sans-serif; color:#111735; -webkit-font-smoothing:antialiased; }

.serif { font-family:'Instrument Serif',serif; letter-spacing:-0.014em; }

.mono  { font-family:'JetBrains Mono',monospace; }

.hairline   { border:1px solid #E4E7F1; }

.hairline-b { border-bottom:1px solid #E4E7F1; }

.hairline-t { border-top:1px solid #E4E7F1; }

[dir="ltr"] .hairline-r { border-right:1px solid #E4E7F1; }

[dir="rtl"] .hairline-r { border-left:1px solid #E4E7F1; }

[dir="ltr"] .hairline-l { border-left:1px solid #E4E7F1; }

[dir="rtl"] .hairline-l { border-right:1px solid #E4E7F1; }

.pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:500; }

.chat-grid { background-color:#ECE5DD; background-image:radial-gradient(rgba(37,57,128,0.07) 1px,transparent 1px); background-size:14px 14px; }

.dot-pattern { background-image:radial-gradient(circle at 1px 1px, rgba(37,57,128,0.15) 1px, transparent 0); background-size:14px 14px; }

.grid-bg { background-size:56px 56px; }

[dir="ltr"] .grid-bg { background-image: linear-gradient(#E4E7F1 1px,transparent 1px), linear-gradient(90deg, #E4E7F1 1px, transparent 1px); }

[dir="rtl"] .grid-bg { background-image: linear-gradient(#E4E7F1 1px,transparent 1px), linear-gradient(-90deg, #E4E7F1 1px, transparent 1px); }

.pulse-dot { animation:pulseD 1.6s ease-in-out infinite; }

@keyframes pulseD {
 0%,100%{opacity:1;transform:scale(1)}

 50%{opacity:.4;transform:scale(1.35)} }

.marquee { display:flex; gap:48px; animation:scroll 38s linear infinite; }

@keyframes scroll {
 from{transform:translateX(0)}

 to{transform:translateX(-50%)} }

.float-y { animation:floatY 6s ease-in-out infinite; }

.float-y-2 { animation:floatY 7s ease-in-out infinite -2s; }

.float-y-3 { animation:floatY 8s ease-in-out infinite -3s; }

@keyframes floatY {
 0%,100%{transform:translateY(0)}

 50%{transform:translateY(-10px)} }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d,0ms); }

.reveal.in { opacity:1; transform:translateY(0); }

[dir="ltr"] .gradient-deep { background:linear-gradient(135deg,#253980 0%, #111735 100%); }

[dir="rtl"] .gradient-deep { background:linear-gradient(-135deg,#253980 0%, #111735 100%); }

.glow-green { box-shadow:0 0 0 1px rgba(234,95,75,0.4), 0 0 24px -4px rgba(234,95,75,0.5); }

.badge-num { font-family:'Instrument Serif',serif; font-size:13px; line-height:1; padding:3px 10px 4px; border:1px solid #E4E7F1; border-radius:999px; color:#3A5A55; background:#FBFAF6; display:inline-block; }

.feature-num { font-family:'Instrument Serif',serif; font-size:140px; line-height:0.85; color:#E4E7F1; letter-spacing:-0.04em; }

.feature-num-sm { font-family:'Instrument Serif',serif; font-size:64px; line-height:0.85; color:#E4E7F1; letter-spacing:-0.04em; }

.blur-bub { filter:blur(80px); }

.tabular { font-variant-numeric:tabular-nums; }
/* premium word-glow for big numbers */
@keyframes glow {
  0%,100% { text-shadow: 0 0 0 rgba(234,95,75,0); filter:brightness(1); }

  50%     { text-shadow: 0 0 22px rgba(234,95,75,.55), 0 0 44px rgba(234,95,75,.35); filter:brightness(1.04); }
}

.glow-word { animation: glow 3.6s ease-in-out infinite; }

.glow-word-2 { animation: glow 3.6s ease-in-out infinite -1.2s; }

.glow-word-3 { animation: glow 3.6s ease-in-out infinite -2.4s; }
/* shimmer underline */
.shimmer { position:relative; display:inline-block; }

.shimmer::after { content:""; position:absolute; left:0; right:0; bottom:6%; height:14%; animation: shimmer 3.2s linear infinite; }

[dir="ltr"] .shimmer::after { background:linear-gradient(90deg, transparent, rgba(234,95,75,.45), transparent); }

[dir="rtl"] .shimmer::after { background:linear-gradient(-90deg, transparent, rgba(234,95,75,.45), transparent); }

[dir] .shimmer::after { background-size:200% 100%; }

@keyframes shimmer {
 from { background-position:200% 0; }

 to { background-position:-200% 0; } }
/* counter ticker rising digits */
@keyframes digitFloat {
  0%,100% { transform:translateY(0); opacity:1 }

  50% { transform:translateY(-1px); opacity:.94 }
}

.digit-float { animation: digitFloat 2.4s ease-in-out infinite; }

.ticker      { animation: digitFloat 2.4s ease-in-out infinite; }
/* heartbeat pulse for live tag */
@keyframes heartbeat {
  0%,100% { transform:scale(1); }

  25% { transform:scale(1.25); }

  50% { transform:scale(1); }

  75% { transform:scale(1.1); }
}

.heartbeat { animation: heartbeat 1.4s ease-in-out infinite; }
/* live chart trace draw */
@keyframes draw {
 to { stroke-dashoffset: 0; } }
/* live spark */
.spark-dot { animation: sparkD 1.8s ease-out infinite; }

@keyframes sparkD {
 0% { transform:scale(.6); opacity:.9 }

 100% { transform:scale(3); opacity:0 } }

details > summary { list-style:none; cursor:pointer; }

details > summary::-webkit-details-marker { display:none; }

.check-li { display:flex; gap:12px; align-items:flex-start; }

.check-li::before { content:""; width:18px; height:18px; border-radius:6px; background:#EA5F4B; color:#111735; flex-shrink:0; margin-top:2px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3 3 7-7' stroke='%230B1F1C' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:14px; }

.ring-img { box-shadow: 0 30px 70px -30px rgba(37,57,128,0.4); }

.scroll-x { scrollbar-width:none; }

.scroll-x::-webkit-scrollbar { display:none; }

.num-tick { transition: transform .4s ease, color .4s ease; }

.stat-card:hover .num-tick { transform: translateY(-2px); color:#253980; }
/* slim divider with mono label */
.section-rule { display:flex; align-items:center; gap:14px; margin-bottom:28px; }

.section-rule::before, .section-rule::after { content:""; flex:1; height:1px; background:#E4E7F1; }

.section-rule::before { max-width:80px; }

/* ====== TWO-DEVICE STAGE ====== */
.glass { background: rgba(255,255,255,.7); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }

.lift { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }

.lift:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -25px rgba(37,57,128,.3); border-color:#253980; }

/* flying messages */
.fly-msg { position:absolute; background:#E7FFDB; padding:8px 12px; font-size:11.5px; color:#111735; box-shadow: 0 8px 30px -8px rgba(37,57,128,.4), 0 0 0 1px rgba(37,57,128,.08); transform-origin: center; opacity:0; z-index:30; pointer-events:none; white-space:nowrap; }

[dir="ltr"] .fly-msg { border-radius:14px 14px 14px 4px; }

[dir="rtl"] .fly-msg { border-radius:14px 14px 4px 14px; }

.fly-1 { animation: fly1 6.5s ease-in-out infinite; }

.fly-2 { animation: fly2 6.5s ease-in-out infinite; animation-delay:2.2s; }

.fly-3 { animation: fly3 6.5s ease-in-out infinite; animation-delay:4.4s; }

@keyframes fly1 {
  0%   { left: 28%; top: 58%; opacity:0; transform: scale(.6) rotate(-6deg); }

  10%  { left: 28%; top: 58%; opacity:1; transform: scale(1) rotate(-3deg); }

  50%  { left: 50%; top: 2%;  opacity:1; transform: scale(1.05) rotate(2deg); }

  82%  { left: 62%; top: 28%; opacity:1; transform: scale(.9) rotate(-1deg); }

  92%  { left: 64%; top: 32%; opacity:0; transform: scale(.5) rotate(-3deg); }

  100% { left: 64%; top: 32%; opacity:0; transform: scale(0) rotate(-3deg); }
}

@keyframes fly2 {
  0%   { left: 28%; top: 58%; opacity:0; transform: scale(.6) rotate(4deg); }

  10%  { left: 28%; top: 58%; opacity:1; transform: scale(1) rotate(2deg); }

  50%  { left: 50%; top: -2%; opacity:1; transform: scale(1.05) rotate(-2deg); }

  82%  { left: 62%; top: 28%; opacity:1; transform: scale(.9) rotate(1deg); }

  92%  { left: 64%; top: 32%; opacity:0; transform: scale(.5) rotate(2deg); }

  100% { left: 64%; top: 32%; opacity:0; transform: scale(0) rotate(2deg); }
}

@keyframes fly3 {
  0%   { left: 28%; top: 58%; opacity:0; transform: scale(.6) rotate(-2deg); }

  10%  { left: 28%; top: 58%; opacity:1; transform: scale(1) rotate(1deg); }

  50%  { left: 50%; top: 4%;  opacity:1; transform: scale(1.05) rotate(3deg); }

  82%  { left: 62%; top: 28%; opacity:1; transform: scale(.9) rotate(0deg); }

  92%  { left: 64%; top: 32%; opacity:0; transform: scale(.5) rotate(2deg); }

  100% { left: 64%; top: 32%; opacity:0; transform: scale(0) rotate(2deg); }
}

/* trail dots — follow the high arc */
.trail-dot { position:absolute; width:8px; height:8px; border-radius:50%; background:#EA5F4B; box-shadow:0 0 16px 4px rgba(234,95,75,.7); z-index:25; opacity:0; pointer-events:none; }

.trail-dot.t1 { animation: trail1 6.5s linear infinite; }

.trail-dot.t2 { animation: trail1 6.5s linear infinite; animation-delay:2.2s; }

.trail-dot.t3 { animation: trail1 6.5s linear infinite; animation-delay:4.4s; }

@keyframes trail1 {
  0%   { left:28%; top:60%; opacity:0; }

  10%  { left:30%; top:56%; opacity:.7; }

  50%  { left:50%; top:4%;  opacity:1; }

  90%  { left:70%; top:44%; opacity:.7; }

  100% { left:72%; top:46%; opacity:0; }
}

/* arc line */
.arc-line { stroke-dasharray: 800; stroke-dashoffset: 800; animation: drawArc 6.5s ease-in-out infinite; }

@keyframes drawArc {
  0%   { stroke-dashoffset: 800; opacity:0; }

  15%  { stroke-dashoffset: 800; opacity:.6; }

  55%  { stroke-dashoffset: 0;   opacity:.6; }

  88%  { stroke-dashoffset: 0;   opacity:0; }

  100% { stroke-dashoffset: 0;   opacity:0; }
}

/* incoming pop on receiver — bubbles persist, briefly highlight when fly-msg lands */
.recv-pop { animation: recvPop 6.5s ease-in-out infinite; }

.recv-pop-2 { animation: recvPop 6.5s ease-in-out infinite -2.2s; }

.recv-pop-3 { animation: recvPop 6.5s ease-in-out infinite -4.4s; }

@keyframes recvPop {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(234,95,75,0); }

  86%  { transform: scale(1); box-shadow: 0 0 0 0 rgba(234,95,75,0); }

  90%  { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(234,95,75,.35); }

  96%  { transform: scale(1); box-shadow: 0 0 0 12px rgba(234,95,75,0); }

  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(234,95,75,0); }
}

/* landing pulse — small green spark at receiver chat edge */
.landing-pulse { position:absolute; top:32%; width:12px; height:12px; border-radius:50%; background:#EA5F4B; z-index:24; opacity:0; pointer-events:none; box-shadow: 0 0 10px 2px rgba(234,95,75,.5); }

[dir="ltr"] .landing-pulse { left:62%; transform:translate(-50%,-50%); }

[dir="rtl"] .landing-pulse { right:62%; transform:translate(50%,-50%); }

.landing-pulse.lp1 { animation: landingPulse 6.5s ease-out infinite; }

.landing-pulse.lp2 { animation: landingPulse 6.5s ease-out infinite -2.2s; }

.landing-pulse.lp3 { animation: landingPulse 6.5s ease-out infinite -4.4s; }

@keyframes landingPulse {
  0%, 84% { transform: translate(-50%,-50%) scale(0); opacity:0; }

  88%     { transform: translate(-50%,-50%) scale(1); opacity:.85; }

  94%     { transform: translate(-50%,-50%) scale(1.6); opacity:.4; }

  100%    { transform: translate(-50%,-50%) scale(2); opacity:0; }
}

/* typing dots */
@keyframes typingDot {
 0%,100%{opacity:.3;transform:translateY(0)}

 50%{opacity:1;transform:translateY(-2px)} }

.typing-dot { animation: typingDot 1.4s ease-in-out infinite; }

.typing-dot:nth-child(2) { animation-delay:.18s; }

.typing-dot:nth-child(3) { animation-delay:.36s; }

/* sound rings */
@keyframes ring {
 0%{transform:scale(.7);opacity:.7}

 100%{transform:scale(2);opacity:0} }

.ring-out { position:absolute; inset:0; border-radius:9999px; border:2px solid #EA5F4B; animation: ring 2s ease-out infinite; }

.ring-out.r2 { animation-delay:.7s; }

.ring-out.r3 { animation-delay:1.4s; }

/* live activity stream */
.stream-dot { position:absolute; top:50%; width:6px; height:6px; border-radius:50%; background:#EA5F4B; box-shadow:0 0 10px 2px rgba(234,95,75,.55); transform:translateY(-50%); opacity:0; }

[dir="ltr"] .stream-dot { left:0; }

[dir="rtl"] .stream-dot { right:0; }

.sd1 { animation: streamFlow 5s linear infinite; }

.sd2 { animation: streamFlow 5s linear infinite -.8s; }

.sd3 { animation: streamFlow 5s linear infinite -1.6s; }

.sd4 { animation: streamFlow 5s linear infinite -2.4s; }

.sd5 { animation: streamFlow 5s linear infinite -3.2s; }

.sd6 { animation: streamFlow 5s linear infinite -4s; }

@keyframes streamFlow {
  0%   { left:-2%; opacity:0; transform:translateY(-50%) scale(.6); }

  8%   { opacity:1; transform:translateY(-50%) scale(1); }

  92%  { opacity:1; transform:translateY(-50%) scale(1); }

  100% { left:102%; opacity:0; transform:translateY(-50%) scale(.6); }
}

/* mini emoji message bubbles flying across */
.stream-bub { position:absolute; top:50%; font-size:14px; line-height:1; transform:translateY(-50%); opacity:0; padding:2px 6px; border-radius:8px; background:#E7FFDB; border:1px solid rgba(37,57,128,.15); box-shadow:0 4px 12px -4px rgba(37,57,128,.25); }

[dir="ltr"] .stream-bub { left:0; }

[dir="rtl"] .stream-bub { right:0; }

.sb1 { animation: bubFlow 7.5s ease-in-out infinite; }

.sb2 { animation: bubFlow 7.5s ease-in-out infinite -2.5s; font-family:'JetBrains Mono',monospace; font-size:10px; color:#253980; }

.sb3 { animation: bubFlow 7.5s ease-in-out infinite -5s; }

@keyframes bubFlow {
  0%   { left:-3%; opacity:0; transform:translateY(-50%) scale(.6) rotate(-4deg); }

  10%  { opacity:1; transform:translateY(-50%) scale(1) rotate(0); }

  90%  { opacity:1; transform:translateY(-50%) scale(1) rotate(0); }

  100% { left:103%; opacity:0; transform:translateY(-50%) scale(.6) rotate(4deg); }
}

/* feature bento cards (features page) */
.feat-card { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; position:relative; }

.feat-card:hover { transform: translateY(-6px); border-color:#253980; box-shadow: 0 40px 80px -40px rgba(37,57,128,0.4); }

.feat-card:hover .feat-arrow { color:#253980; }

[dir="ltr"] .feat-card:hover .feat-arrow { transform: translateX(6px); }

[dir="rtl"] .feat-card:hover .feat-arrow { transform: translateX(-6px); }

.feat-arrow { transition: transform .35s ease, color .35s ease; }

.feat-card .feat-mock { transition: transform .5s cubic-bezier(.2,.7,.2,1); }

.feat-card:hover .feat-mock { transform: translateY(-4px) scale(1.02); }

/* brand tile + hover */
.brand-tile { transition: transform .25s ease, box-shadow .25s ease; box-shadow: 0 4px 12px -6px rgba(37,57,128,0.2); }

.feat-card:hover .brand-tile { transform: translateY(-2px); }

/* pulse ring (around active wizard step) */
@keyframes pulseRing {
 0% { transform: scale(.6); opacity:.8; }

 100% { transform: scale(2.2); opacity:0; } }

.pulse-ring { animation: pulseRing 2s ease-out infinite; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #EA5F4B; }

/* blink-green dot */
@keyframes blinkGreen {
  0%,100% { background:#EA5F4B; box-shadow:0 0 0 0 rgba(234,95,75,.7); }

  50%     { background:#D94E3B; box-shadow:0 0 0 6px rgba(234,95,75,0); }
}

.blink-green { animation: blinkGreen 1.8s ease-in-out infinite; }

/* bar grow */
@keyframes barGrow {
 from { width:0; } }

.bar-grow { animation: barGrow 2.5s ease-out; }

/* flowing dashed line (flow builder canvas) */
@keyframes flow {
 0% { stroke-dashoffset: 60; }

 100% { stroke-dashoffset: 0; } }

.flow-line { stroke-dasharray: 4 4; animation: flow 1.5s linear infinite; }

/* text shimmer */
.text-shimmer {
  color: transparent;
  animation: shimmer 3s linear infinite;
}

[dir="ltr"] .text-shimmer {
  background: linear-gradient(90deg, #253980 0%, #EA5F4B 50%, #253980 100%);
}

[dir="rtl"] .text-shimmer {
  background: linear-gradient(-90deg, #253980 0%, #EA5F4B 50%, #253980 100%);
}

[dir] .text-shimmer {
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

/* ──────────────────────────────────────────────────────────────────
 * Mobile-responsiveness backstop (public marketing site).
 * Bare element selectors so any Tailwind utility still wins — desktop
 * is untouched. Stops inner content from forcing a horizontal scrollbar.
 * ────────────────────────────────────────────────────────────────── */
/* `svg` intentionally excluded — inline SVGs are sized icons or functional
   canvases; clamping them to 100% breaks diagrams. Only real media is clamped. */
img, video, canvas, iframe { max-width: 100%; }
/* Root-level horizontal-overflow net. overflow-x:clip on <html> directly
   (not just <body>) so a decorative absolutely-positioned element that
   escapes its section on mobile can never widen the page / cause the
   left-clip + right dead-strip. Vertical scroll is unaffected. */
html { overflow-x: clip; }

/* ---- Homepage FAQ infinite slider (x-frontend.faq-slider) ---------------- */
.wd-faq-marquee { overflow: hidden; }

.wd-faq-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: wd-faq-scroll 46s linear infinite;
}

.wd-faq-track.rev { animation-name: wd-faq-scroll-rev; animation-duration: 54s; }

.wd-faq-marquee:hover .wd-faq-track { animation-play-state: paused; }

@keyframes wd-faq-scroll      {
 from { transform: translateX(0); }

      to { transform: translateX(-50%); } }

@keyframes wd-faq-scroll-rev  {
 from { transform: translateX(-50%); }

   to { transform: translateX(0); } }

.wd-faq-card {
    width: 340px;
    flex-shrink: 0;
    border: 1px solid rgba(17,23,53, 0.10);
    background: #fff;
    border-radius: 1rem;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 1px 2px rgba(17,23,53, 0.04);
}

.wd-faq-answer {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Fade the edges so cards slide in/out softly. */
.wd-faq-mask {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .wd-faq-track { animation: none; }
}

/* ============================================================
   2026 redesign — shared "wd-" building blocks for the new
   homepage sections (professional SaaS look, WhatsApp green).
   ============================================================ */
.wd-site { --wd-ink:#111735; --wd-muted:#5D6480; --wd-line:#E4E7F1; --wd-soft:#F5F6FB; }

.wd-container { max-width:1240px; margin:0 auto; padding-left:20px; padding-right:20px; }

@media (min-width:1024px) {
 .wd-container { padding-left:32px; padding-right:32px; } }

.wd-h1 { font-weight:800; letter-spacing:-0.035em; line-height:1.04; color:var(--wd-ink); }

.wd-h2 { font-weight:800; letter-spacing:-0.03em; line-height:1.1; color:var(--wd-ink); }

.wd-lead { color:var(--wd-muted); line-height:1.65; }

/* Marker highlight behind a key word in a headline. */
.wd-hl { position:relative; display:inline-block; z-index:0; white-space:nowrap; }

.wd-hl::before { content:""; position:absolute; left:-0.08em; right:-0.08em; bottom:0.06em; height:0.42em; background:#EA5F4B; opacity:.35; border-radius:6px; z-index:-1; }
/* Vendor/admin headline HTML still uses <span class="italic …">; inside .wd-legacy-hl it becomes the same marker. */
.wd-legacy-hl .italic { font-style:normal; color:inherit; position:relative; display:inline-block; z-index:0; }

.wd-legacy-hl .italic::before { content:""; position:absolute; left:-0.08em; right:-0.08em; bottom:0.06em; height:0.42em; background:#EA5F4B; opacity:.35; border-radius:6px; z-index:-1; }

.wd-eyebrow { display:inline-flex; align-items:center; gap:8px; border-radius:999px; background:#fff; border:1px solid var(--wd-line); font-size:13px; font-weight:600; color:var(--wd-ink); box-shadow:0 1px 2px rgba(17,23,53,.04); }

[dir="ltr"] .wd-eyebrow { padding:6px 14px 6px 6px; }

[dir="rtl"] .wd-eyebrow { padding:6px 6px 6px 14px; }

.wd-eyebrow-tag { padding:3px 9px; border-radius:999px; background:#253980; color:#fff; font-size:11px; font-weight:700; letter-spacing:.02em; }

.wd-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 22px; border-radius:999px; font-size:15px; font-weight:700; transition:background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; white-space:nowrap; }

.wd-btn-sm { height:40px; padding:0 18px; font-size:14px; }

.wd-btn-primary { background:#253980; color:#fff; box-shadow:0 8px 20px -8px rgba(37,57,128,.55); }

.wd-btn-primary:hover { background:#0A6F63; transform:translateY(-1px); }

.wd-btn-ghost { background:#fff; color:var(--wd-ink); border:1px solid #D5DEDB; }

.wd-btn-ghost:hover { border-color:#253980; color:#253980; }

.wd-card { background:#fff; border:1px solid var(--wd-line); border-radius:20px; box-shadow:0 1px 2px rgba(17,23,53,.04), 0 12px 32px -16px rgba(17,23,53,.12); }

[dir="ltr"] .wd-hero-bg { background:
    radial-gradient(900px 480px at 85% 10%, rgba(234,95,75,.16), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, rgba(37,57,128,.10), transparent 60%),
    linear-gradient(180deg, #F3F5FC 0%, #FFFFFF 100%); }

[dir="rtl"] .wd-hero-bg { background:
    radial-gradient(900px 480px at 85% 10%, rgba(234,95,75,.16), transparent 60%),
    radial-gradient(700px 420px at 0% 100%, rgba(37,57,128,.10), transparent 60%),
    linear-gradient(-180deg, #F3F5FC 0%, #FFFFFF 100%); }

.wd-dots { background-image:radial-gradient(rgba(17,23,53,.08) 1px, transparent 1px); background-size:22px 22px; }

.wd-float { animation:wdFloat 6s ease-in-out infinite; }

.wd-float-2 { animation:wdFloat 7s ease-in-out infinite; animation-delay:-2s; }

@keyframes wdFloat {
 0%,100% { transform:translateY(0); }

 50% { transform:translateY(-8px); } }

.wd-typing i { display:inline-block; width:6px; height:6px; margin:0 1.5px; border-radius:99px; background:#7C8E8A; animation:typingDot 1.2s infinite; }

.wd-typing i:nth-child(2) { animation-delay:.15s; }

 .wd-typing i:nth-child(3) { animation-delay:.3s; }

@media (prefers-reduced-motion: reduce) {
 .wd-float, .wd-float-2, .wd-typing i { animation:none; } }


/* ---- 2026 redesign: Features page bento (feature-bento.blade.php keeps vendor markup) ---- */
.wd-bento .serif, .wd-bento .mono { font-family:'Plus Jakarta Sans','IBM Plex Sans Arabic',Inter,sans-serif; }

.wd-bento h3.serif { font-size:clamp(24px,2.1vw,30px); font-weight:800; letter-spacing:-0.03em; line-height:1.12; color:var(--wd-ink); }

.wd-bento .feat-mock .serif { font-weight:800; letter-spacing:-0.02em; }

.wd-bento .mono.uppercase { letter-spacing:.06em; }

.wd-bento .feature-num { display:inline-grid; place-items:center; height:30px; min-width:42px; padding:0 10px; border-radius:999px; background:#253980; color:#fff; font-family:'Plus Jakarta Sans','IBM Plex Sans Arabic',Inter,sans-serif; font-size:13px; font-weight:800; letter-spacing:0; line-height:1; }

.wd-bento [data-fc$="_eyebrow"] { font-size:12px; font-weight:700; letter-spacing:.08em; color:#3B4FA0; margin-top:12px; }

.wd-bento .feat-card { border:1px solid var(--wd-line); border-radius:22px; background:#fff; box-shadow:0 1px 2px rgba(17,23,53,.04),0 12px 32px -18px rgba(17,23,53,.18); }

.wd-bento .feat-card:hover { border-color:rgba(234,95,75,.55); box-shadow:0 30px 60px -32px rgba(37,57,128,.45); }

.wd-bento .feat-card > p { font-size:14.5px; color:var(--wd-muted); }

.wd-bento .feat-card > ul { font-size:13.5px; }

.wd-bento .feat-card .hairline, .wd-bento .feat-card .hairline-t, .wd-bento .feat-card .hairline-b,
.wd-bento .feat-card .hairline-r, .wd-bento .feat-card .hairline-l { border-color:var(--wd-line); }

.wd-bento .feat-card > .hairline-t { font-size:13.5px; }

.wd-bento .feat-arrow { font-weight:700; color:#253980; }

.wd-bento .pill { font-weight:700; font-size:11.5px; }
/* the one dark card (security) */
.wd-bento .feat-card.bg-ink-950 { background:#131D45; border-color:rgba(255,255,255,.08); }

.wd-bento .feat-card.bg-ink-950 h3.serif { color:#fff; }

.wd-bento .feat-card.bg-ink-950 > p { color:rgba(255,255,255,.7); }

.wd-bento .feat-card.bg-ink-950 .feature-num { background:#EA5F4B; color:#111735; }

.wd-bento .feat-card { scroll-margin-top:96px; }
/* bento mini-mocks: swap the old beige paper tones for the new soft green-grey */
.wd-bento .bg-paper-50 { background-color:#F5F6FB; }

.wd-bento .bg-paper-100 { background-color:#EAF0EE; }

[dir="ltr"] .wd-bento .grid-bg { background-image:linear-gradient(#E4E7F1 1px,transparent 1px),linear-gradient(90deg,#E4E7F1 1px,transparent 1px); }

[dir="rtl"] .wd-bento .grid-bg { background-image:linear-gradient(#E4E7F1 1px,transparent 1px),linear-gradient(-90deg,#E4E7F1 1px,transparent 1px); }

@media (max-width:639px) {
  .wd-bento .feat-card { padding:20px; }

  .wd-bento .feat-card > ul { grid-template-columns:1fr; }

  .wd-bento .feat-card > .hairline-t { flex-wrap:wrap; gap:6px 16px; }
}

.wd-bento .feat-card.bg-ink-950 .feat-arrow, .wd-bento .feat-card.bg-ink-950:hover .feat-arrow { color:#EA5F4B; }

/* ---- 2026: Arabic / RTL polish ---- */
/* Arabic script must never be letter-spaced (breaks the cursive joins). */
[dir="rtl"] .wd-site, [dir="rtl"] .wd-site * { letter-spacing:0 !important; }

[dir="rtl"] .wd-site { line-height:1.7; }

[dir="rtl"] .wd-h1, [dir="rtl"] .wd-h2, [dir="rtl"] .wd-site h1, [dir="rtl"] .wd-site h2, [dir="rtl"] .wd-site h3 { line-height:1.35; }
/* Direction-carrying icons (arrows, chevrons, send) point the other way in RTL. */
[dir="rtl"] .wd-site svg:has(> path[d^="M3 8h10"]),
[dir="rtl"] .wd-site svg:has(> path[d^="M5 4l4 4"]),
[dir="rtl"] .wd-site svg:has(> path[d^="M3 20l18-8"]),
[dir="rtl"] .wd-site svg:has(> path[d^="M9 18l6-6"]),
[dir="rtl"] .wd-site svg:has(> path[d^="M0 6h72"]),
[dir="rtl"] .wd-site .lucide-chevron-right,
[dir="rtl"] .wd-site .lucide-arrow-right { transform:scaleX(-1); }
/* Hover nudges follow the reading direction. */
[dir="rtl"] .feat-card:hover .feat-arrow { transform:translateX(-6px); }
/* Logo marquee: keep the scrolling track LTR so the loop stays seamless. */
[dir="rtl"] .marquee { direction:ltr; }
/* Numbers, phone numbers, prices and code stay LTR inside Arabic text. */
[dir="rtl"] .wd-site .tabular-nums, [dir="rtl"] .wd-site .font-mono, [dir="rtl"] .wd-site [href^="tel:"] { unicode-bidi:isolate; }/* Arabic glyphs are wider: scale the largest headlines down a step so the hero stays at ~3 lines. */
[dir="rtl"] .wd-site h1.wd-h1 { font-size:clamp(34px, 3.9vw, 54px); line-height:1.3; }

[dir="rtl"] .wd-arrow { display:inline-block; transform:scaleX(-1); }/* Feature-grid bullet arrows ("→" glyphs in the vendor markup) follow the reading direction. */
[dir="rtl"] .wd-bento .feat-card > ul li > span:first-child { display:inline-block; transform:scaleX(-1); }
/* ═══════════ Blog (frontend/blog/index + show, components/frontend/wd-post-card) ═══════════ */
.wd-chips { display:flex; flex-wrap:wrap; gap:8px; }

.wd-chip { display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:999px; background:#fff; border:1px solid var(--wd-line); font-size:14px; font-weight:600; color:var(--wd-ink); transition:border-color .15s, color .15s, background .15s; }

.wd-chip:hover { border-color:#253980; color:#253980; }

.wd-chip.is-active { background:#253980; border-color:#253980; color:#fff; }

.wd-chip--sm { height:32px; padding:0 12px; font-size:13px; font-weight:500; color:var(--wd-muted); }

.wd-post { display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1px solid var(--wd-line); border-radius:22px; box-shadow:0 1px 2px rgba(17,23,53,.04); transition:transform .25s, box-shadow .25s, border-color .25s; }

.wd-post:hover { transform:translateY(-4px); border-color:#CBD2E6; box-shadow:0 22px 44px -24px rgba(17,23,53,.28); }

.wd-post__media { position:relative; aspect-ratio:16/10; overflow:hidden; background:#ECEEF6; }

.wd-post__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }

.wd-post:hover .wd-post__media img { transform:scale(1.04); }

.wd-post__ph { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; }

[dir="ltr"] .wd-post__ph {
  background:radial-gradient(90% 90% at 100% 0%, rgba(234,95,75,.35), rgba(234,95,75,0) 60%), linear-gradient(150deg, #2B428F, #131D45); }

[dir="rtl"] .wd-post__ph {
  background:radial-gradient(90% 90% at 100% 0%, rgba(234,95,75,.35), rgba(234,95,75,0) 60%), linear-gradient(-150deg, #2B428F, #131D45); }

.wd-post__ph-ring { position:absolute; width:150%; aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.12); box-shadow:0 0 0 40px rgba(255,255,255,.03), 0 0 0 80px rgba(255,255,255,.02); }

.wd-post__ph-ic { position:relative; width:44px; height:44px; color:#fff; opacity:.9; }

.wd-post__flag { position:absolute; top:16px; padding:6px 12px; border-radius:999px; background:#EA5F4B; color:#fff; font-size:12px; font-weight:700; }

[dir="ltr"] .wd-post__flag { left:16px; }

[dir="rtl"] .wd-post__flag { right:16px; }

.wd-post__body { display:flex; flex-direction:column; flex:1; padding:22px 24px 24px; }

.wd-post__cat { align-self:flex-start; margin-bottom:10px; padding:4px 10px; border-radius:999px; background:#FDEFEC; color:#C9412F; font-size:12px; font-weight:700; }

.wd-post__title { font-size:20px; font-weight:700; line-height:1.4; color:var(--wd-ink); transition:color .15s; }

.wd-post:hover .wd-post__title { color:#253980; }

.wd-post__excerpt { margin-top:10px; font-size:14.5px; line-height:1.75; color:var(--wd-muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.wd-post__meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:auto; padding-top:20px; font-size:13px; color:#6E7591; }

.wd-post__meta i { width:3px; height:3px; border-radius:50%; background:#9AA0B7; }

.wd-post__go { display:inline-flex; align-items:center; gap:4px; font-weight:700; color:#253980; }

[dir="ltr"] .wd-post__go { margin-left:auto; }

[dir="rtl"] .wd-post__go { margin-right:auto; }

.wd-post__go-ic { width:15px; height:15px; transition:transform .2s; }

[dir="ltr"] .wd-post:hover .wd-post__go-ic { transform:translateX(3px); }

[dir="rtl"] .wd-post:hover .wd-post__go-ic { transform:translateX(-3px); }

[dir="rtl"] .wd-post__go-ic { transform:scaleX(-1); }

[dir="rtl"] .wd-post:hover .wd-post__go-ic { transform:scaleX(-1) translateX(3px); }

@media (min-width:1024px) {
  .wd-post--featured { flex-direction:row; }

  .wd-post--featured .wd-post__media { flex:0 0 54%; aspect-ratio:auto; min-height:380px; }

  .wd-post--featured .wd-post__body { justify-content:center; padding:44px 48px; }

  .wd-post--featured .wd-post__title { font-size:32px; line-height:1.3; }

  .wd-post--featured .wd-post__excerpt { font-size:16px; -webkit-line-clamp:4; }

  .wd-post--featured .wd-post__meta { margin-top:28px; padding-top:0; }
}

.wd-empty { max-width:760px; margin:0 auto; padding:56px 24px; text-align:center; border-radius:28px; border:1px dashed #CBD2E6; }

[dir="ltr"] .wd-empty { background:linear-gradient(180deg, #F8F9FD, #fff); }

[dir="rtl"] .wd-empty { background:linear-gradient(-180deg, #F8F9FD, #fff); }

.wd-empty__ic { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 18px; border-radius:16px; background:#253980; color:#fff; box-shadow:0 12px 26px -12px rgba(37,57,128,.7); }

.wd-pager nav { display:flex; justify-content:center; }

/* Article */
.wd-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13.5px; color:#6E7591; }

.wd-crumbs a { font-weight:500; transition:color .15s; }

.wd-crumbs a:hover { color:#253980; }

.wd-crumbs__sep { width:14px; height:14px; opacity:.6; }

[dir="rtl"] .wd-crumbs__sep { transform:scaleX(-1); }

.wd-byline { display:flex; align-items:center; gap:12px; }

.wd-byline__av { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#253980; color:#fff; font-weight:700; font-size:17px; }

.wd-byline strong { display:block; font-size:15px; color:var(--wd-ink); }

.wd-byline div > span { display:block; font-size:13.5px; color:#6E7591; }

.wd-article { color:#2A3465; font-size:17.5px; line-height:1.9; }

.wd-article > * + * { margin-top:1.3em; }

.wd-article h2 { font-size:28px; font-weight:700; line-height:1.4; color:#111735; margin-top:1.9em; }

.wd-article h3 { font-size:22px; font-weight:700; line-height:1.45; color:#111735; margin-top:1.7em; }

.wd-article h4 { font-size:18px; font-weight:700; color:#111735; margin-top:1.5em; }

.wd-article a { color:#253980; font-weight:600; text-decoration:underline; text-decoration-color:rgba(37,57,128,.35); text-underline-offset:4px; }

.wd-article a:hover { color:#EA5F4B; text-decoration-color:currentColor; }

.wd-article strong { color:#111735; font-weight:700; }

.wd-article ul, .wd-article ol { padding-inline-start:1.4em; }

.wd-article ul { list-style:disc; }

.wd-article ol { list-style:decimal; }

.wd-article li { margin-top:.5em; }

.wd-article li::marker { color:#EA5F4B; }

.wd-article img { border-radius:18px; max-width:100%; height:auto; }

.wd-article blockquote { padding:18px 22px; border-inline-start:4px solid #EA5F4B; border-radius:14px; background:#F5F6FB; color:#2A3465; font-size:18px; font-weight:500; }

.wd-article pre { background:#111735; color:#ECEEF6; padding:1.1em 1.3em; border-radius:14px; overflow-x:auto; font-family:"JetBrains Mono", monospace; font-size:13.5px; line-height:1.7; }

[dir="ltr"] .wd-article pre { direction:ltr; text-align:left; }

[dir="rtl"] .wd-article pre { direction:rtl; text-align:right; }

.wd-article code { font-family:"JetBrains Mono", monospace; font-size:.88em; }

.wd-article :not(pre) > code { background:#ECEEF6; padding:.12em .4em; border-radius:6px; }

.wd-article hr { border:0; border-top:1px solid #E4E7F1; margin:2.2em 0; }

.wd-article table { width:100%; border-collapse:collapse; font-size:15px; }

.wd-article th, .wd-article td { padding:10px 12px; border:1px solid #E4E7F1; text-align:start; }

.wd-article th { background:#F5F6FB; font-weight:700; }

.wd-share { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; border-radius:18px; border:1px solid #E4E7F1; background:#FAFBFD; }

.wd-share > span { font-size:15px; font-weight:700; color:#111735; }

.wd-share > div { display:flex; gap:8px; }

.wd-share a { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid #E4E7F1; color:#253980; transition:background .15s, color .15s, border-color .15s; }

.wd-share a:hover { background:#253980; border-color:#253980; color:#fff; }

.wd-share svg { width:17px; height:17px; }

.wd-post-cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:36px 40px; border-radius:28px; color:#fff; }

[dir="ltr"] .wd-post-cta {
  background:radial-gradient(80% 120% at 100% 0%, rgba(234,95,75,.35), rgba(234,95,75,0) 60%), linear-gradient(150deg, #2B428F, #131D45); }

[dir="rtl"] .wd-post-cta {
  background:radial-gradient(80% 120% at 100% 0%, rgba(234,95,75,.35), rgba(234,95,75,0) 60%), linear-gradient(-150deg, #2B428F, #131D45); }

.wd-post-cta h2 { font-size:26px; font-weight:700; line-height:1.4; }

.wd-post-cta p { margin-top:6px; font-size:15.5px; color:rgba(255,255,255,.75); }

@media (max-width:639px) {
 .wd-post-cta { padding:28px 24px; } }