/* ============================================================
   Tariki 360 — Vibrant Redesign CSS
   Design: dark forest (#071810) × vibrant lime (#9de314) × white
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', system-ui, sans-serif; background: #f5fdf5; color: #071810; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }

/* ---- RTL / Arabic mode ---- */
[dir="rtl"] body,
[dir="rtl"] { font-family: 'Cairo', 'Inter', system-ui, sans-serif; }
[dir="rtl"] .vh2, [dir="rtl"] .vh3, [dir="rtl"] .vh4, [dir="rtl"] .vdisplay,
[dir="rtl"] .vnav-logo, [dir="rtl"] .vfooter-logo, [dir="rtl"] .vstat-num,
[dir="rtl"] .vhero h1, [dir="rtl"] .vstep h4, [dir="rtl"] .vmodal h3,
[dir="rtl"] .hchip, [dir="rtl"] .vmarquee-item,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  font-family: 'Cairo', 'Plus Jakarta Sans', system-ui, sans-serif;
}
[dir="rtl"] .material-symbols-outlined { direction: ltr; }
[dir="rtl"] .vfield-row input,
[dir="rtl"] .vfield-row select,
[dir="rtl"] textarea { font-family: 'Cairo', 'Inter', system-ui, sans-serif; }

:root {
  --c-dark:       #071810;
  --c-dark-2:     #0d2318;
  --c-green:      #0c4d1c;
  --c-lime:       #85131D;
  --c-lime-h:     #6E0F18;
  --c-lime-dim:   rgba(133,19,29,0.12);
  --c-gold:       #C1614F;
  --c-gold-dim:   rgba(193,97,79,0.12);
  --c-red:        #dc2626;
  --c-red-dim:    rgba(220,38,38,0.07);
  --c-surf:       #f5fdf5;
  --c-surf-2:     #eaf5e8;
  --c-tint:       #eaf5e8;
  --c-muted:      #4a6b4e;
  --c-border:     #d5ead6;
  --ease:         cubic-bezier(0.4,0,0.2,1);
}

/* ---- Layout ---- */
.vc { max-width: 1200px; margin: 0 auto; padding: 0 52px; width: 100%; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.g2-sm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.g2 > *, .g3 > *, .g4 > *, .g2-sm > * { min-width: 0; }
@media(max-width:1024px){ .g4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:900px){ .vc{padding:0 20px;} .g2,.g3,.g4{grid-template-columns:1fr;} }
@media(max-width:560px){ .g2-sm{grid-template-columns:1fr;} }
@media(max-width:480px){ .vc{padding:0 16px;} }

/* ---- Nav ---- */
.vnav { position:sticky; top:0; z-index:100; background:#fff; border-bottom:1.5px solid var(--c-border); }
.vnav-inner { display:flex; align-items:center; justify-content:space-between; width:100%; height:72px; gap:12px; }
.vnav-logo { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; font-size:22px; letter-spacing:-0.02em; color:var(--c-green); background:none; border:none; cursor:pointer; padding:0; white-space:nowrap; flex-shrink:0; }
.vnav-links { display:flex; gap:4px; }
.vnav-link { font-size:14px; font-weight:500; color:var(--c-muted); background:none; border:none; cursor:pointer; padding:7px 15px; border-radius:999px; transition:background 0.18s,color 0.18s; }
.vnav-link:hover { background:var(--c-surf-2); color:var(--c-dark); }
.vnav-link.on { background:var(--c-lime-dim); color:var(--c-green); font-weight:600; }
.vnav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.vnav-toggle { display:none; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; padding:6px; border-radius:8px; color:var(--c-dark); }
.vnav-toggle:hover { background:var(--c-surf-2); }
.vnav-menu { display:none; flex-direction:column; gap:4px; padding-bottom:18px; }
.vlang-toggle { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:13px; font-weight:700; color:var(--c-green); background:var(--c-surf-2); border:1.5px solid var(--c-border); cursor:pointer; padding:7px 16px; border-radius:999px; transition:background 0.18s,color 0.18s; }
.vlang-toggle:hover { background:var(--c-lime-dim); }
.vlang-toggle-mobile { display:none; }
@media(max-width:900px){
  .vnav-links { display:none; }
  .vnav-actions .vbtn { display:none; }
  .vnav-actions .vlang-toggle { display:none; }
  .vnav-toggle { display:flex; }
  .vnav.open .vnav-menu { display:flex; }
  .vnav-menu .vnav-link { text-align:left; padding:13px 16px; border-radius:10px; font-size:15px; }
  .vnav-menu .vbtn { width:100%; }
  .vlang-toggle-mobile { display:block; width:100%; text-align:center; margin-top:8px; padding:12px 16px; }
}
[dir="rtl"] .vnav-menu .vnav-link { text-align:right; }

/* ---- Buttons ---- */
.vbtn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; border-radius:999px; border:2px solid transparent; cursor:pointer; transition:all 0.2s var(--ease); white-space:nowrap; }
.vbtn-sm { padding:8px 20px; font-size:13px; }
.vbtn-md { padding:13px 30px; font-size:15px; }
.vbtn-lg { padding:17px 42px; font-size:16px; }
.vbtn-lime { background:var(--c-lime); color:#fff; border-color:var(--c-lime); }
.vbtn-lime:hover { background:var(--c-lime-h); border-color:var(--c-lime-h); }
.vbtn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,0.35); }
.vbtn-ghost:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.65); }
.vbtn-outline { background:transparent; color:var(--c-green); border-color:var(--c-green); }
.vbtn-outline:hover { background:var(--c-green); color:#fff; }
.vbtn-white { background:#fff; color:var(--c-dark); border-color:#fff; }
.vbtn-white:hover { background:var(--c-lime); border-color:var(--c-lime); }
@media(max-width:480px){ .vbtn{ white-space:normal; max-width:100%; min-width:0; text-align:center; } }

/* ---- Tags ---- */
.vtag { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; }
.vtag-lime { background:var(--c-lime); color:#fff; }
.vtag-green { background:var(--c-lime-dim); color:var(--c-green); }
.vtag-gold { background:var(--c-gold-dim); color:var(--c-gold); }
.vtag-dark { background:rgba(51,90,50,0.12); color:#335a32; border:1px solid rgba(51,90,50,0.2); }
.vtag-red { background:var(--c-red-dim); color:var(--c-red); }

/* ---- Icon chip ---- */
.vchip { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vchip-lime { background:var(--c-lime); color:#fff; }
.vchip-green { background:var(--c-lime-dim); color:var(--c-green); }
.vchip-dark { background:rgba(255,255,255,0.08); color:var(--c-lime); }
.vchip-gold { background:var(--c-gold-dim); color:var(--c-gold); }

/* ---- Hero ---- */
.vhero { background:#F5EDD8; padding:64px 0; position:relative; overflow:hidden; min-height:auto; display:flex; align-items:center; }
.vhero-deco { position:absolute; inset:0; pointer-events:none; }
.vhero-blob { position:absolute; border-radius:50%; background:#335a32; opacity:0.07; }
.vhero-blob2 { position:absolute; border-radius:50%; background:#85131D; opacity:0.05; }
.vhero-content { position:relative; z-index:2; max-width:100%; min-width:0; }
.vhero-hl { color:#85131D; }
.vhero h1 { color:#335a32; margin:22px 0 26px; font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; font-size:clamp(32px,3.8vw,52px); line-height:1.08; letter-spacing:-0.03em; }
.vhero-sub { color:#4a6e4a; font-size:17px; line-height:1.65; max-width:580px; margin:0 0 36px; }
.vhero-cta { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:48px; }
.vhero-feats { display:flex; gap:36px; padding-top:24px; border-top:1px solid rgba(51,90,50,0.15); flex-wrap:wrap; }
.vhero-feat { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:#335a32; }
@media(max-width:600px){ .vhero{ padding:40px 0; } .vhero-cta{ margin-bottom:36px; } .vhero-cta .vbtn{ flex:1 1 auto; justify-content:center; } .vhero-feats{ gap:18px 28px; padding-top:20px; } }

/* ---- Stats bar ---- */
.vstatbar { background:#F5EDD8; border-top:1px solid rgba(51,90,50,0.12); border-bottom:1px solid rgba(51,90,50,0.12); padding:40px 0; }
.vstatbar-inner { display:flex; justify-content:center; gap:56px; flex-wrap:wrap; }
.vstat-num { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; font-size:clamp(30px,6vw,52px); letter-spacing:-0.03em; color:#335a32; line-height:1; }
.vstat-lbl { font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#6a8c6a; margin-top:7px; }
@media(max-width:600px){ .vstatbar{ padding:28px 0; } .vstatbar-inner{ gap:28px 40px; } }

/* ---- Marquee ---- */
.vmarquee { background:#335a33; padding:18px 0; overflow:hidden; }
.vmarquee-track { display:flex; gap:56px; white-space:nowrap; width:max-content; animation:vscroll 30s linear infinite; }
@keyframes vscroll { to { transform:translateX(-50%); } }
.vmarquee-item { display:flex; align-items:center; gap:10px; font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:600; font-size:16px; color:rgba(255,255,255,0.6); }
.vmarquee-q { color:var(--c-lime); font-size:20px; }

/* ---- Sections ---- */
.vsec { padding:100px 0; }
.vsec-dark { background:var(--c-dark); }
.vsec-dark-2 { background:var(--c-dark-2); }
.vsec-light { background:var(--c-surf); }
.vsec-mid { background:var(--c-surf-2); }
.vsec-lime { background:var(--c-lime); }
.vsec-head { margin-bottom:56px; }
.vsec-head.ctr { text-align:center; }
.vdisplay { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; font-size:clamp(40px,9vw,78px); line-height:1.03; letter-spacing:-0.03em; }
.vh2 { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:700; font-size:clamp(28px,5.5vw,46px); line-height:1.15; letter-spacing:-0.02em; }
.vh3 { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:700; font-size:26px; }
.vh4 { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:600; font-size:20px; }
.vlbl { font-size:11px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; }
@media(max-width:600px){ .vsec{ padding:56px 0; } .vsec-head{ margin-bottom:36px; } .vwhitepapers-head{ flex-direction:column; align-items:flex-start !important; gap:18px; } }

/* ---- Cards ---- */
.vcard { background:#fff; border:1.5px solid var(--c-border); border-radius:20px; padding:36px; display:flex; flex-direction:column; }
.vcard-hover { transition:transform 0.22s var(--ease), box-shadow 0.22s var(--ease); }
.vcard-hover:hover { transform:translateY(-6px); box-shadow:0 20px 48px rgba(7,24,16,0.1); }
.vcard-ltop { border-top:4px solid var(--c-lime); }
.vcard-gtop { border-top:4px solid var(--c-green); }
.vcard-dark { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.08); }
.vcard-prem { background:#335a32; border-color:transparent; }

/* ---- Feature item ---- */
.vfeat { display:flex; gap:14px; align-items:flex-start; }
.vfeat h5 { margin:0 0 4px; font-size:15px; font-weight:600; color:var(--c-dark); }
.vfeat p { margin:0; font-size:13px; color:var(--c-muted); line-height:1.5; }

/* ---- Journey steps ---- */
.vsteps { display:grid; grid-template-columns:repeat(5,1fr); gap:28px; }
@media(max-width:1100px){ .vsteps{grid-template-columns:repeat(3,1fr);} }
@media(max-width:900px){ .vsteps{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .vsteps{grid-template-columns:1fr; gap:36px;} }
.vstep { display:flex; flex-direction:column; align-items:center; text-align:center; }
.vstep-bubble { width:92px; height:92px; border-radius:50%; background:#F5EDD8; color:#335a32; display:flex; align-items:center; justify-content:center; margin-bottom:22px; position:relative; box-shadow:0 4px 16px rgba(0,0,0,0.18); }
.vstep-num { position:absolute; top:-8px; right:-8px; width:28px; height:28px; border-radius:50%; background:#85131D; color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.vstep h4 { color:#fff; margin:0 0 8px; font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:600; font-size:19px; }
.vstep p { color:rgba(255,255,255,0.6); font-size:14px; margin:0; line-height:1.55; }

/* ---- Before / After ---- */
.vba { background:#fff; border-radius:14px; padding:20px 22px; border:1.5px solid var(--c-border); }
.vba-before { border-left:4px solid var(--c-red); }
.vba-after { border-left:4px solid var(--c-lime); background:#fdf0f1; border-color:#d4848a; }
.vba h5 { margin:0 0 5px; font-size:16px; font-weight:700; }
.vba-before h5 { color:var(--c-red); }
.vba-after h5 { color:var(--c-green); }
.vba p { margin:0; font-size:14px; color:var(--c-muted); line-height:1.5; }

/* ---- Tier list ---- */
.vtiers { list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:13px; }
.vtiers li { display:flex; align-items:center; gap:10px; font-size:15px; }

/* ---- Form ---- */
.vfield { display:flex; flex-direction:column; gap:7px; }
.vfield label { font-size:13px; font-weight:600; }
.vfield-row { display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid var(--c-border); border-radius:12px; padding:13px 16px; transition:border-color 0.18s; }
.vfield-row:focus-within { border-color:var(--c-lime); }
.vfield-row input { border:none; outline:none; background:transparent; font-size:15px; color:var(--c-dark); width:100%; font-family:'Inter',system-ui,sans-serif; }

/* ---- Modal ---- */
.vscrim { position:fixed; inset:0; background:rgba(7,24,16,0.6); display:flex; align-items:center; justify-content:center; z-index:200; padding:24px; }
.vmodal { background:#fff; border-radius:28px; padding:44px; max-width:440px; width:100%; }
.vmodal h3 { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:28px; font-weight:800; margin:16px 0 8px; color:var(--c-green); }
.vmodal p { color:var(--c-muted); margin:0 0 24px; }

/* ---- Toast ---- */
.vtoast { position:fixed; bottom:32px; left:50%; transform:translateX(-50%); background:var(--c-dark); color:#fff; padding:14px 24px; border-radius:999px; display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; z-index:300; box-shadow:0 10px 36px rgba(0,0,0,0.3); white-space:nowrap; }

/* ---- Video section grid ---- */
.vvideo-grid { min-height:520px; }
@media(max-width:900px){ .vvideo-grid{ min-height:auto; } .vvideo-char{ display:none; } }

/* ---- Img placeholder ---- */
.vph { border-radius:24px; background:linear-gradient(135deg,rgba(133,19,29,0.10) 0%,rgba(12,77,28,0.08) 100%); border:1.5px solid var(--c-border); display:flex; align-items:center; justify-content:center; color:var(--c-green); }

/* ---- Footer ---- */
.vfooter { background:#335a33; padding:72px 0 36px; }
.vfooter-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; }
@media(max-width:900px){ .vfooter-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .vfooter-grid{grid-template-columns:1fr; gap:36px;} .vfooter{padding:56px 0 28px;} .vfooter hr{margin:36px 0 24px;} }
.vfooter-logo { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:26px; font-weight:800; color:var(--c-lime); margin-bottom:14px; letter-spacing:-0.02em; }
.vfooter-copy { color:rgba(255,255,255,0.38); font-size:14px; line-height:1.6; max-width:280px; }
.vfooter h6 { font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--c-lime); margin:0 0 20px; }
.vfooter ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.vfooter a { color:rgba(255,255,255,0.5); font-size:14px; cursor:pointer; text-decoration:none; transition:color 0.18s; }
.vfooter a:hover { color:var(--c-lime); }
.vfooter hr { border:none; border-top:1px solid rgba(255,255,255,0.08); margin:52px 0 24px; }
.vfooter-bottom { color:rgba(255,255,255,0.28); font-size:13px; text-align:center; }

/* ============================================================
   Home redesign — animations & decorative styles
   ============================================================ */

/* Scroll reveal */
.rv { opacity:0; transform:translateY(28px); transition:opacity .75s var(--ease), transform .75s var(--ease); will-change:opacity,transform; }
.rv.in { opacity:1; transform:translateY(0); }

@keyframes vfloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes vdrift { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-34px,22px) scale(1.07); } }
@keyframes vspin { to { transform:rotate(360deg); } }
@keyframes vpulse { 0%{ box-shadow:0 0 0 0 rgba(133,19,29,.35); } 70%{ box-shadow:0 0 0 24px rgba(133,19,29,0); } 100%{ box-shadow:0 0 0 0 rgba(133,19,29,0); } }
@keyframes vpop { 0%{ transform:scale(.6); opacity:0; } 70%{ transform:scale(1.06); } 100%{ transform:scale(1); opacity:1; } }

/* Hero decoration */
.vhero-blob, .vhero-blob2 { animation:vdrift 14s ease-in-out infinite; }
.vhero-blob2 { animation-duration:18s; animation-direction:reverse; }

.hero-img-wrap { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; }
.hero-ring { position:absolute; width:108%; height:108%; max-width:560px; border-radius:50%; border:2px dashed rgba(133,19,29,.16); animation:vspin 46s linear infinite; pointer-events:none; }
.hero-img-card { position:relative; border-radius:32px; overflow:hidden; background:#F5EDD8; border:1.5px solid rgba(51,90,50,.14); box-shadow:0 30px 80px rgba(51,90,50,.18); animation:vfloat 6.5s ease-in-out infinite; max-width:500px; width:100%; }
.hchip { position:absolute; background:#fff; border:1.5px solid var(--c-border); border-radius:16px; padding:11px 16px; display:flex; align-items:center; gap:10px; box-shadow:0 14px 36px rgba(7,24,16,.12); font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; font-size:14px; color:#335a32; z-index:3; line-height:1.2; }
.hchip small { display:block; font-weight:600; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-muted); }
.hchip-a { top:5%; left:-18px; animation:vfloat 5s ease-in-out infinite; }
.hchip-b { bottom:9%; right:-14px; animation:vfloat 6.2s ease-in-out infinite reverse; }
@media(max-width:900px){ .hero-img-wrap{ display:none; } }
@media(max-width:480px){ .hchip{ padding:9px 12px; font-size:12px; } }

/* Stats pop */
.vstat-pop.in .vstat-num { animation:vpop .6s var(--ease) both; }

/* Journey steps */
.vstep-bubble { transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.vstep:hover .vstep-bubble { transform:translateY(-8px) scale(1.06); box-shadow:0 14px 34px rgba(0,0,0,.28); }

/* Pulsing play button */
.vplay { animation:vpulse 2.4s infinite; }

/* Animated progress bars (width set via --w when revealed) */
.vbarfill { width:0; transition:width 1.1s var(--ease) .2s; }
.rv.in .vbarfill { width:var(--w); }

/* FAQ open animation */
.faq-body { animation:vfaq .35s var(--ease); }
@keyframes vfaq { from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* Tilted photo frame */
.tilt-img { transform:rotate(-2.5deg); transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.tilt-img:hover { transform:rotate(0) scale(1.01); }

/* Video testimonial thumb hover */
.vthumb .vplaymini { transition:transform .25s var(--ease), background .25s var(--ease); }
.vthumb:hover .vplaymini { transform:scale(1.12); background:rgba(133,19,29,.85) !important; }

/* Bottom CTA banner */
.cta-banner { position:relative; overflow:hidden; border-radius:32px; background:linear-gradient(120deg,#F5EDD8 0%,#fdf8ec 55%,#f1e6c8 100%); border:1.5px solid rgba(51,90,50,.14); padding:64px 56px; display:grid; grid-template-columns:1.4fr 1fr; align-items:center; gap:32px; }
.cta-banner-img { display:flex; justify-content:center; }
.cta-banner-img img { max-height:300px; width:auto; animation:vfloat 6s ease-in-out infinite; filter:drop-shadow(0 16px 32px rgba(7,24,16,.15)); }
@media(max-width:900px){ .cta-banner{ grid-template-columns:1fr; padding:48px 28px; text-align:center; } .cta-banner-img{ order:-1; } .cta-banner-img img{ max-height:220px; } }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity:1; transform:none; transition:none; }
  .vhero-blob, .vhero-blob2, .hero-img-card, .hchip-a, .hchip-b, .hero-ring, .vplay, .cta-banner-img img { animation:none; }
  .vstat-pop.in .vstat-num { animation:none; }
  .vbarfill { width:var(--w); transition:none; }
}