/* =========================================================================
   راونو (Raveno) — Landing / marketing site
   Design tokens grounded in the product itself: a visual node/wire builder
   that outputs MQL4/MQL5. Dark trading-terminal base (functionally correct
   for this audience, not decorative), teal signal accent shared with the
   in-app brand, category colors borrowed 1:1 from the builder's own block
   palette so the "features" section reads as the real product taxonomy.
   ========================================================================= */

@font-face{
  font-family:"Vazirmatn";
  src: local("Vazirmatn"), local("Vazirmatn RD");
}

:root{
  --bg:        #08090b;
  --bg-2:      #0d1013;
  --panel:     #12151a;
  --panel-2:   #171b21;
  --border:    #23282f;
  --border-2:  #2c323b;
  --text:      #e9edf1;
  --text-dim:  #939fac;
  --text-faint:#5b6572;

  --accent:    #22d3ac;
  --accent-dim:#17a889;
  --amber:     #f5b942;
  --buy:       #34c976;
  --sell:      #ff5c6a;

  --rtm:       #8b91ff;
  --ict:       #e0a940;
  --pa:        #4fc3d9;
  --grid:      #c07ef0;
  --ind:       #6fd08a;

  --radius-sm: 6px;
  --radius:    10px;
  --mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --sans: "Vazirmatn", -apple-system, "Segoe UI", Tahoma, Roboto, Arial, sans-serif;

  --maxw: 1180px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); direction:rtl;
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
section{position:relative;}

::selection{ background:var(--accent); color:#04110d; }

/* ---------------------------------------------------------- nav */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(8,9,11,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 24px;
  height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text); font-weight:700; font-size:17px; flex:0 0 auto;}
.logo-mark{
  width:26px; height:26px; border-radius:7px;
  background:linear-gradient(155deg, var(--accent), var(--accent-dim));
  display:flex; align-items:center; justify-content:center;
  color:#04110d; font-family:var(--mono); font-weight:800; font-size:14px;
}
.nav-links{display:flex; align-items:center; gap:28px; font-size:14.5px; color:var(--text-dim);}
.nav-links a{text-decoration:none; transition:color .15s;}
.nav-links a:hover{color:var(--text);}
.nav-cta{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
.nav-toggle{ display:none; }
@media (max-width: 920px){
  .nav-toggle{
    display:flex; align-items:center; justify-content:center; width:34px; height:34px;
    background:transparent; border:1px solid var(--border-2); border-radius:7px; color:var(--text); cursor:pointer;
  }
  .nav-links{
    display:none; position:absolute; top:64px; left:0; right:0; background:var(--bg);
    border-bottom:1px solid var(--border); flex-direction:column; align-items:flex-start;
    padding:18px 24px 22px; gap:16px; z-index:49;
  }
  .nav-links.is-open{ display:flex; }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:var(--radius-sm); font-size:14.5px; font-weight:600;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  font-family:var(--sans); transition:transform .12s ease, background .15s, border-color .15s;
}
.btn:active{transform:translateY(1px);}
.btn-accent{ background:var(--accent); color:#04140f; }
.btn-accent:hover{ background:#3fe0bd; }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border-2); }
.btn-ghost:hover{ border-color:var(--accent-dim); color:var(--accent); }
.btn-sm{ padding:7px 13px; font-size:13.5px; }

/* ---------------------------------------------------------- hero */
.hero{
  padding:76px 0 40px;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-dim); margin-bottom:18px;
  border:1px solid var(--border-2); padding:5px 11px; border-radius:100px;
}
.hero-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent);}
.hero h1{
  font-size:44px; line-height:1.32; margin:0 0 20px; font-weight:800; letter-spacing:-.01em;
}
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero p.lead{
  font-size:17px; color:var(--text-dim); max-width:52ch; margin:0 0 30px;
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px;}
.hero-flags{display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--text-faint);}
.hero-flags span{display:flex; align-items:center; gap:6px;}
.hero-flags span::before{content:"✓"; color:var(--accent); font-weight:700;}

/* hero visual: node graph */
.hero-visual{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:20px; position:relative; overflow:hidden;
}
.hero-visual .glow{
  position:absolute; inset:-40% -20% auto auto; width:280px; height:280px;
  background:radial-gradient(circle, rgba(34,211,172,.16), transparent 70%);
  pointer-events:none;
}
.hero-visual svg{ position:relative; z-index:1; }
.hero-code{
  margin-top:14px; background:var(--bg-2); border:1px solid var(--border);
  border-radius:8px; padding:12px 14px; font-family:var(--mono); font-size:12.3px;
  color:var(--text-dim); overflow:hidden; white-space:pre; direction:ltr; text-align:left;
}
.hero-code .k{color:var(--rtm);}
.hero-code .f{color:var(--accent);}
.hero-code .c{color:var(--text-faint);}

/* ---------------------------------------------------------- ticker */
.ticker-wrap{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--bg-2); overflow:hidden; padding:13px 0;
}
.ticker{
  display:flex; gap:40px; white-space:nowrap; font-family:var(--mono); font-size:13px;
  color:var(--text-faint); animation:ticker 32s linear infinite; width:max-content;
}
.ticker span b{color:var(--text-dim); font-weight:600;}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------------------------------------------------------- trust bar */
.trust-bar{
  display:flex; flex-wrap:wrap; gap:22px 34px; justify-content:center;
  padding:26px 24px; color:var(--text-faint); font-size:12.8px;
}
.trust-item{ display:flex; align-items:center; gap:9px; }
.trust-item svg{ color:var(--accent); flex:0 0 auto; }
@media (max-width:700px){ .trust-bar{ gap:16px 22px; } }

/* ---------------------------------------------------------- section heads */
.sec{ padding:88px 0; }
.sec-head{ max-width:640px; margin:0 0 48px; }
.sec-kicker{ font-size:13.5px; color:var(--accent); font-weight:700; margin:0 0 10px; }
.sec-head h2{ font-size:30px; line-height:1.4; margin:0 0 14px; font-weight:800; }
.sec-head p{ color:var(--text-dim); font-size:15.5px; margin:0; max-width:60ch; }

/* ---------------------------------------------------------- problem grid */
.problem-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.problem-card{ background:var(--panel); padding:28px 26px; }
.problem-card .tag{ font-family:var(--mono); font-size:12px; color:var(--sell); margin-bottom:14px; display:block;}
.problem-card h3{ font-size:16.5px; margin:0 0 10px; font-weight:700;}
.problem-card p{ font-size:14px; color:var(--text-dim); margin:0; }

/* ---------------------------------------------------------- style/category showcase */
.style-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.style-card{
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:22px;
  border-inline-start:3px solid var(--c, var(--accent));
  transition:border-color .15s, transform .15s;
}
.style-card:hover{ transform:translateY(-2px); }
.style-card .n{ font-family:var(--mono); font-size:12px; color:var(--c, var(--accent)); margin-bottom:10px; display:block;}
.style-card h3{ font-size:16px; margin:0 0 8px; font-weight:700; }
.style-card p{ font-size:13.6px; color:var(--text-dim); margin:0; }

/* ---------------------------------------------------------- how it works */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.step{ padding:0 20px 0 0; position:relative; }
.step .idx{ font-family:var(--mono); font-size:13px; color:var(--accent); margin-bottom:14px; }
.step h3{ font-size:16px; margin:0 0 8px; font-weight:700; }
.step p{ font-size:13.8px; color:var(--text-dim); margin:0; }
.step:not(:last-child)::after{
  content:""; position:absolute; top:9px; left:0; right:-8px; height:1px; background:var(--border-2);
}
.step:not(:last-child)::before{
  content:"◂"; position:absolute; top:2px; left:-4px; color:var(--border-2); font-size:14px;
}

/* ---------------------------------------------------------- comparison table */
.cmp-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; }
table.cmp{ width:100%; border-collapse:collapse; font-size:14px; min-width:640px;}
table.cmp th, table.cmp td{ padding:14px 18px; text-align:center; border-bottom:1px solid var(--border); }
table.cmp th{ background:var(--panel-2); font-weight:700; font-size:13.5px; color:var(--text-dim); }
table.cmp td:first-child, table.cmp th:first-child{ text-align:right; color:var(--text-dim); font-weight:500; }
table.cmp tr:last-child td{ border-bottom:none; }
table.cmp td.us{ color:var(--accent); font-weight:700; background:rgba(34,211,172,.05); }
table.cmp th.us{ color:var(--accent); background:rgba(34,211,172,.08); }
.yes{color:var(--buy);} .no{color:var(--text-faint);}

/* ---------------------------------------------------------- pricing */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.price-card{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:30px 26px; display:flex; flex-direction:column; }
.price-card.hi{ border-color:var(--accent-dim); box-shadow:0 0 0 1px var(--accent-dim), 0 16px 40px -20px rgba(34,211,172,.35); background:linear-gradient(165deg, var(--panel-2), var(--panel)); position:relative; }
.price-card.hi::before{
  content:"پیشنهاد ما"; position:absolute; top:-11px; right:24px; background:var(--accent); color:#04140f;
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:100px;
}
.price-card .plan{ font-size:14px; color:var(--text-dim); margin-bottom:6px; }
.price-card .amt{ font-size:32px; font-weight:800; margin-bottom:4px; }
.price-card .amt small{ font-size:14px; color:var(--text-dim); font-weight:500; }
.price-card .note{ font-size:12.5px; color:var(--text-faint); margin-bottom:22px; }
.price-card ul{ list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:11px; font-size:13.8px; color:var(--text-dim); flex:1; }
.price-card ul li{ display:flex; gap:9px; align-items:flex-start; }
.price-card ul li::before{ content:"✓"; color:var(--accent); flex:0 0 auto; font-weight:700; }
.price-card ul li.off::before{ content:"–"; color:var(--text-faint); }
.price-card ul li.off{ color:var(--text-faint); }
.badge-soon{ display:inline-block; font-size:11px; background:var(--panel-2); border:1px solid var(--border-2); color:var(--text-faint); padding:2px 8px; border-radius:100px; margin-inline-start:6px; }

.btn-arrow{ transform:scaleX(-1); vertical-align:-2px; }
.btn{ box-shadow:0 1px 0 rgba(255,255,255,.03) inset; }
.btn-accent{ box-shadow:0 6px 20px -8px rgba(34,211,172,.55); }
.btn-accent:hover{ box-shadow:0 8px 24px -6px rgba(34,211,172,.6); transform:translateY(-1px); }
.btn-ghost:hover{ transform:translateY(-1px); }

/* ---------------------------------------------------------- buy panel */
.buy-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.buy-panel-head h3{ font-size:17px; margin:0; font-weight:700; }
.pay-tabs{ display:inline-flex; gap:2px; background:var(--bg-2); border:1px solid var(--border); border-radius:9px; padding:3px; }
.pay-tab{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:7px; border:none;
  background:transparent; color:var(--text-dim); font-family:var(--sans); font-size:13.2px; font-weight:600;
  cursor:pointer; transition:background .15s, color .15s;
}
.pay-tab.is-active{ background:var(--accent); color:#04140f; }
.pay-content{ animation:fadeIn .25s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
.contact-row{ display:flex; gap:10px; }
.contact-row .btn{ padding:9px 14px; }
.buy-warn{ color:var(--amber) !important; }
.card-number{ word-break:break-all; }
.buy-panel{
  margin-top:20px; background:var(--panel); border:1px solid var(--accent-dim);
  border-radius:14px; padding:30px 28px;
}
.buy-panel h3{ font-size:17px; margin:0 0 22px; font-weight:700; }
.buy-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.buy-step{ display:flex; gap:12px; align-items:flex-start; }
.buy-step-n{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--accent);
  color:#04140f; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center;
}
.buy-step p{ font-size:13.6px; color:var(--text-dim); margin:0 0 10px; }
.card-box{
  display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg-2);
  border:1px dashed var(--border-2); border-radius:8px; padding:11px 14px; margin-bottom:6px;
}
.card-number{ font-family:var(--mono); font-size:14.5px; letter-spacing:1px; direction:ltr; }
.card-holder{ font-size:12.5px; color:var(--text-faint); }
.buy-note{ margin:22px 0 0; font-size:12.3px; color:var(--amber); }
@media (max-width:920px){ .buy-steps{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------- samples */
.sample-row{ display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
.sample-card{ flex:0 0 260px; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:20px; }
.sample-card .badge{ display:inline-block; font-family:var(--mono); font-size:11px; padding:3px 8px; border-radius:5px; margin-bottom:12px; }
.sample-card h4{ font-size:14.5px; margin:0 0 8px; font-weight:700;}
.sample-card p{ font-size:12.8px; color:var(--text-dim); margin:0;}

/* ---------------------------------------------------------- risk note */
.risk{
  border:1px solid var(--border-2); background:var(--bg-2); border-radius:10px;
  padding:18px 22px; font-size:13.3px; color:var(--text-dim); display:flex; gap:12px;
}
.risk .ic{ color:var(--amber); font-size:18px; flex:0 0 auto; }

/* ---------------------------------------------------------- final cta */
.cta-band{
  background:linear-gradient(155deg, var(--panel), var(--bg-2));
  border:1px solid var(--border); border-radius:16px; padding:56px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-band h2{ font-size:26px; margin:0 0 8px; font-weight:800; }
.cta-band p{ margin:0; color:var(--text-dim); font-size:14.5px; }

/* ---------------------------------------------------------- footer */
footer{ border-top:1px solid var(--border); padding:46px 0 30px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; margin-bottom:36px; }
.foot-col h4{ font-size:13px; color:var(--text-dim); margin:0 0 14px; font-weight:700; }
.foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.foot-col ul a{ text-decoration:none; color:var(--text-faint); font-size:13.5px; transition:color .15s; }
.foot-col ul a:hover{ color:var(--text); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid var(--border); font-size:12.5px; color:var(--text-faint); }

/* ---------------------------------------------------------- reveal */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 920px){
  .hero{ grid-template-columns:1fr; padding-top:44px; }
  .hero h1{ font-size:32px; }
  .problem-grid, .style-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .step:not(:last-child)::after, .step:not(:last-child)::before{ display:none; }
  .price-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .nav-links{ display:none; }
  .cta-band{ padding:36px 24px; }
}
@media (max-width: 560px){
  .steps{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .sec{ padding:56px 0; }
  .hero{ padding-top:32px; }
}

/* ============================================================================
   حالت انگلیسی/LTR — فقط قوانین جهت‌محوری که خودکار با dir="ltr" درست
   نمی‌شوند (بقیه‌ی صفحه با تغییر dir روی <html> به‌طور طبیعی آینه می‌شود).
   html.lang-en توسط assets/i18n-core.js موقع تغییر زبان اضافه/حذف می‌شود.
   ============================================================================ */
html.lang-en body{ direction:ltr; }

html.lang-en .step{ padding:0 0 0 20px; }
html.lang-en .step:not(:last-child)::after{ left:-8px; right:0; }
html.lang-en .step:not(:last-child)::before{ content:"▸"; left:auto; right:-4px; }

html.lang-en table.cmp td:first-child,
html.lang-en table.cmp th:first-child{ text-align:left; }

html.lang-en .price-card.hi::before{ content:"Our Pick"; right:auto; left:24px; }