/* Tifawt landing — features, how it works, coverage, pricing, faq, closing, footer.
   Tokens and base live in landing.css. */

/* features */
.features { padding: 120px 0 40px; }
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--cardline); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -46px rgba(74,26,140,.35); }
.feat { padding: 30px 26px 32px; border-inline-end: 1px solid var(--line); transition: background .2s; position: relative; }
.feat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); opacity: 0; transition: opacity .25s; }
.feat:hover::before { opacity: 1; }
.feat:last-child { border-inline-end: 0; }
.feat:hover { background: #fdf8fe; }
.feat .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; }
.feat .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feat .ic.green { background: #e8f7f0; color: var(--green); } .feat .ic.purple { background: var(--tint); color: var(--magenta); }
.feat .ic.blue { background: #eaf6fd; color: var(--blue); } .feat .ic.gold { background: #fff4dc; color: #c98a0b; }
.feat .eyebrow { font-size: 11px; }
.feat h3 { font-size: 18px; font-weight: 700; margin-top: 8px; }
.feat p:last-child { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* how it works — trace line with numbered nodes */
.how { padding: 100px 0 60px; }
.steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 20px; padding-top: 10px; }
.trace { position: absolute; top: 33px; left: 10%; right: 10%; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.trace i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--magenta), var(--violet)); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) .2s; }
[dir="rtl"] .trace i { transform-origin: right; }
.visible .trace i { transform: scaleX(1); }
.step { text-align: center; position: relative; }
.node { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 2px solid var(--line); font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--purple); box-shadow: 0 0 0 6px var(--bg); transition: border-color .4s, background .4s, color .4s, transform .4s var(--ease); }
.visible .step .node { border-color: transparent; background: var(--grad); color: #fff; }
.visible .step:nth-child(2) .node { transition-delay: .2s; } .visible .step:nth-child(3) .node { transition-delay: .5s; }
.visible .step:nth-child(4) .node { transition-delay: .8s; } .visible .step:nth-child(5) .node { transition-delay: 1.1s; } .visible .step:nth-child(6) .node { transition-delay: 1.4s; }
.step h3 { font-size: 17px; font-weight: 700; margin-top: 18px; }
.step p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* coverage */
.coverage { padding: 80px 0 40px; }
.coverage .grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; }
.coverage h2 { font-weight: 800; font-size: clamp(2rem, 3.9vw, 2.9rem); margin-top: 16px; }
.countries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 30px; }
.countries > span { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #fff; border: 1px solid var(--cardline); border-radius: 12px; font-weight: 500; font-size: 14.5px; transition: border-color .2s, transform .2s var(--ease); }
.countries > span:hover { border-color: var(--tintline); transform: translateY(-2px); }

.countries i { margin-inline-start: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px #e8f7f0; }
.map-card { background: #fff; border: 1px solid var(--cardline); border-radius: 20px; padding: 10px; box-shadow: 0 30px 60px -38px rgba(122,18,160,.45); }
.map-card svg { width: 100%; height: auto; display: block; direction: ltr; }
#regionMap .inactive path { fill: #1c1026; fill-opacity: .03; stroke: #1c1026; stroke-opacity: .14; }
#regionMap .inactive text { fill: #1c1026; fill-opacity: .3; font-size: 12px; text-anchor: middle; font-family: var(--body); }
#regionMap .pin .pulse-ring { fill: none; stroke: var(--c); stroke-opacity: .3; animation: pulse-ring 4s ease-in-out infinite; animation-delay: var(--d, 0s); transform-origin: center; transform-box: fill-box; }
#regionMap .pin .dot { fill: var(--c); }
#regionMap .pin rect { fill: #fff; stroke: var(--cardline); }
#regionMap .pin text { fill: #1c1026; font-size: 13px; font-weight: 600; font-family: var(--body); }
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.35); opacity: .1; } 100% { transform: scale(1); opacity: .5; } }

/* pricing */
.pricing { padding: 100px 0 40px; }
.pricing .shead .sub { margin-top: 16px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1px solid var(--cardline); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -46px rgba(74,26,140,.35); }
.tile { padding: 28px 20px; text-align: center; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.tile:last-child { border-inline-end: 0; }
.tile > span { font-size: 14px; color: var(--muted); }
.tile b { font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -.03em; background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; margin-inline: auto; }
.tile b small { font-size: 16px; font-weight: 700; color: var(--muted); -webkit-text-fill-color: var(--muted); letter-spacing: 0; }
.tile i { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
[dir="rtl"] .tile i { font-family: var(--body); letter-spacing: 0; font-size: 13px; text-transform: none; }

.flow-card { margin-top: 22px; background: #fff; border: 1px solid var(--cardline); border-radius: 22px; padding: 44px 40px; box-shadow: 0 24px 60px -46px rgba(74,26,140,.35); }
.flow-head { text-align: center; margin-bottom: 34px; }
.flow-head h3 { font-size: 24px; font-weight: 800; }
.flow-head p { color: var(--muted); margin-top: 6px; font-size: 15px; }
.flow-row { display: flex; justify-content: center; align-items: flex-start; gap: 28px; }
.fnode { width: 150px; text-align: center; }
.fnode .ring { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 10px; border: 2px solid; }
.fnode .ring svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fnode.purple .ring { color: var(--magenta); background: var(--tint); border-color: var(--tintline); }
.fnode.blue .ring { color: var(--blue); background: #eaf6fd; border-color: #bfe3f7; }
.fnode b { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.fnode.purple b { color: var(--magenta); } .fnode.blue b { color: #1d8fd1; }
.fnode b small { font-size: 12px; font-weight: 600; color: var(--muted); }
.fnode .n { display: block; font-weight: 600; font-size: 14px; margin-top: 4px; }
.fnode .s { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.farrow { display: flex; align-items: center; margin-top: 22px; color: #b9a4d6; font-size: 18px; }
.farrow span:first-child { width: 56px; border-top: 2px dashed var(--tintline); }
.fork { display: block; width: 100%; max-width: 640px; height: 50px; margin: 8px auto 0; stroke-width: 2; }
.fork line, .fork path { stroke: var(--tintline); fill: none; }
.fork .ok { stroke: var(--green); } .fork path.ok { fill: var(--green); }
.fork .bad { stroke: var(--red); } .fork path.bad { fill: var(--red); }
.branches { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
.branch { border-radius: 16px; padding: 26px; display: flex; flex-direction: column; align-items: center; gap: 18px; border: 1px solid; }
.branch.ok { background: #f3fbf7; border-color: #cdebdc; }
.branch.bad { background: #fff5f5; border-color: #f6cfd1; }
.pill { font-weight: 600; font-size: 13.5px; padding: 6px 14px; border-radius: 999px; border: 1px solid; }
.branch.ok .pill { color: #0f7a52; background: #e3f5ec; border-color: #bfe8d3; }
.branch.bad .pill { color: #c0262d; background: #fde8e9; border-color: #f6cfd1; }
.sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sum em { font-style: normal; color: #b9a4d6; font-size: 22px; }
.box { text-align: center; padding: 10px 14px; border-radius: 12px; border: 1px solid; background: #fff; min-width: 108px; }
.box b { display: block; font-family: var(--display); font-size: 22px; font-weight: 800; }
.box span { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.box.green { border-color: #bfe8d3; } .box.green b { color: var(--green); }
.box.gold { border-color: #f6dfa8; } .box.gold b { color: #c98a0b; }
.box.purple { border-color: var(--tintline); } .box.purple b { color: var(--magenta); }
.ret { text-align: center; }
.ret b { font-family: var(--display); font-size: 36px; font-weight: 800; color: var(--red); letter-spacing: -.02em; }
.ret b small { font-size: 14px; color: var(--muted); font-weight: 600; }
.ret span { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }

/* faq */
.faq { padding: 100px 0 30px; }
.faq-shell { background: #fff; border: 1px solid var(--cardline); border-radius: 26px; padding: 56px 60px; box-shadow: 0 24px 60px -46px rgba(74,26,140,.3); display: grid; grid-template-columns: .7fr 1.55fr; gap: 70px; align-items: start; }
.faq-left h2 { font-weight: 800; font-size: clamp(2.6rem, 5vw, 3.6rem); }
.faq-left p { color: var(--muted); font-size: 14px; margin-top: 12px; }
.faq-left a { display: inline-flex; gap: 6px; align-items: center; color: var(--magenta); font-weight: 600; font-size: 14px; margin-top: 6px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 16px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--magenta); position: relative; flex-shrink: 0; transition: transform .3s var(--ease), background .2s; }
.faq-list summary i::before, .faq-list summary i::after { content: ""; position: absolute; background: var(--magenta); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.faq-list summary i::before { width: 10px; height: 1.5px; } .faq-list summary i::after { width: 1.5px; height: 10px; }
.faq-list details[open] summary i { transform: rotate(45deg); background: var(--tint); }
.faq-list details p { padding: 0 40px 20px 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
[dir="rtl"] .faq-list details p { padding: 0 0 20px 40px; }

/* closing */
.closing { text-align: center; padding: 70px 0 130px; overflow: hidden; }
.closing .rip { inset: 0; width: 100%; height: 100%; -webkit-mask-image: radial-gradient(ellipse 120% 130% at 50% 115%, #000 0%, #000 32%, rgba(0,0,0,.3) 47%, transparent 60%); mask-image: radial-gradient(ellipse 120% 130% at 50% 115%, #000 0%, #000 32%, rgba(0,0,0,.3) 47%, transparent 60%); }
.closing .rip path { stroke-opacity: .2; }
.closing h2 { font-weight: 800; font-size: clamp(2.3rem, 5vw, 3.5rem); }
.closing p { margin: 18px auto 30px; max-width: 520px; font-size: 18px; color: var(--muted); }

/* footer */
.big-footer { position: relative; border-top: 1px solid var(--line); padding: 84px 24px 32px; background: #f5f0fb; }
.big-footer::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 3px; background: var(--grad); }
.fwrap { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.fbrand .logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 20px; }
.fbrand .logo img { width: 44px; height: 44px; }
.fbrand p { margin-top: 14px; color: var(--muted); font-size: 14px; max-width: 30ch; line-height: 1.6; }
.fchip { display: inline-flex; margin-top: 16px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--cardline); background: #fff; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
[dir="rtl"] .fchip { font-family: var(--body); letter-spacing: 0; font-size: 13px; text-transform: none; }
.fcol { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--muted); }
.fcol h4 { margin: 0 0 4px; font-size: 14px; color: var(--ink); font-weight: 700; }
.fcol a:hover { color: var(--magenta); }
.fbase { max-width: 1120px; margin: 56px auto 0; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); }
[dir="rtl"] .fbase { font-family: var(--body); letter-spacing: 0; font-size: 13px; }

@media (max-width: 960px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .feat:nth-child(2n) { border-inline-end: 0; }
  .feat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; gap: 30px; padding-inline-start: 64px; }
  .trace { top: 0; bottom: 0; left: 23px; right: auto; width: 2px; height: auto; }
  [dir="rtl"] .trace { left: auto; right: 23px; }
  .trace i { transform: scaleY(0); transform-origin: top; }
  .visible .trace i { transform: scaleY(1); }
  .step { text-align: start; }
  .step .node { position: absolute; inset-inline-start: -64px; top: -2px; }
  .step h3 { margin-top: 0; }
  .coverage .grid { grid-template-columns: 1fr; gap: 36px; }
  .tiles { grid-template-columns: 1fr; }
  .tile { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .tile:last-child { border-bottom: 0; }
  .branches { grid-template-columns: 1fr; }
  .flow-card { padding: 30px 20px; }
  .faq-shell { grid-template-columns: 1fr; gap: 30px; padding: 32px 24px; border-radius: 18px; }
  .fwrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .feat-grid { grid-template-columns: 1fr; }
  .feat { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .feat:last-child { border-bottom: 0; }
  .flow-row { flex-direction: column; align-items: center; gap: 10px; }
  .farrow { transform: rotate(90deg); margin: 0; }
  .fork { display: none; }
  .countries { grid-template-columns: 1fr; }
  .fwrap { grid-template-columns: 1fr; gap: 28px; }
  .features, .how, .pricing, .faq { padding-top: 70px; }
}