:root{
  --navy:#11345A; /* lighter navy */
  --gold:#FFD23C;
  --ink:#0d233b;
  --muted:#6b7a90;
  --bg:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Vazirmatn', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.8;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1100px,92%);margin-inline:auto}

/* Header */
.site-header{position:sticky;top:0;background:rgba(10,26,47,.9);backdrop-filter:saturate(160%) blur(8px);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700}
.brand-logo{width:32px;height:32px}
.brand-logo svg, .brand-mark svg{width:100%;height:100%;display:block}
.nav-links{display:none;gap:20px;color:#cfe1ff}
.nav-links a{padding:8px 10px;border-radius:8px;transition:.2s ease;color:#e9f1ff}
.nav-links a:hover{background:rgba(255,255,255,.08);color:#fff}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;font-weight:700;border:1.5px solid transparent;transition:all .2s ease}
.btn-primary{background:var(--gold);color:#111}
.btn-primary:hover{filter:brightness(.95);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.2);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.menu-toggle{display:flex;flex-direction:column;gap:4px;background:transparent;border:0;cursor:pointer}
.menu-toggle span{display:block;width:22px;height:2px;background:#fff}

@media (min-width:900px){
  .nav{padding:14px 0}
  .nav-links{display:flex}
  .menu-toggle{display:none}
}

/* Hero */
.hero{background:linear-gradient(180deg,var(--navy) 0%, #17426F 60%, #17426F 100%);color:#fff;padding:64px 0}
.hero-inner{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.hero h1{font-size:clamp(28px,5vw,44px);margin:0 0 8px}
.hero .subtext{font-size:16px;color:#d3e3ff;margin:0 0 18px}
.cta-group{display:flex;gap:10px;flex-wrap:wrap}
.hero-art{display:flex;justify-content:center}
.card-mockup{width:320px;max-width:90vw;aspect-ratio:1.6/1;border-radius:18px;background:linear-gradient(135deg,#133257, #11345A 60%);position:relative;box-shadow:0 20px 40px rgba(0,0,0,.35);overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.card-mockup:before{content:"";position:absolute;inset:-40% -10% auto auto;width:140%;height:80%;background:linear-gradient(90deg,transparent 12%, var(--gold) 12%, var(--gold) 32%, transparent 32%, transparent 38%, var(--gold) 38%, var(--gold) 60%, transparent 60%);opacity:.9;transform:rotate(-8deg)}
.chip{position:absolute;top:22px;left:22px;width:34px;height:24px;border-radius:6px;background:linear-gradient(180deg,#f6d76b,#d4b544);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.brand-mark{position:absolute;top:18px;right:18px;width:40px;height:40px}
.brand-mark img{filter:brightness(1.1)}
.card-number{position:absolute;left:22px;bottom:50px;letter-spacing:2px;color:#e9f1ff;font-family:'Inter','Vazirmatn',sans-serif}
.card-name{position:absolute;left:22px;bottom:18px;color:#fff;font-weight:700}

@media (min-width:900px){
  .hero-inner{grid-template-columns:1.1fr .9fr}
  .hero{padding:90px 0}
}

/* Sections */
.section{padding:56px 0;background:#fff}
.section:nth-of-type(even){background:#f7f9fc}
.section-title{margin:0 0 26px;font-size:clamp(22px,3.2vw,30px);color:var(--navy)}
.lead{color:#29405b}
.grid{display:grid;gap:16px}

.features-grid{grid-template-columns:1fr;}
.features{position:relative}
.features .container{position:relative}
.features .container:before{content:"";position:absolute;inset:-8px;z-index:-1;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 30%, rgba(255,255,255,0) 100%);filter:blur(18px)}
.features-grid{background:#ffffff;border:1px solid #e6edf7;border-radius:24px;padding:16px;box-shadow:0 10px 30px rgba(10,26,47,.06);}
.feature-card{aspect-ratio:1/1;background:radial-gradient(80% 120% at 100% 0%, rgba(23,66,111,.06) 0%, transparent 60%), #fff;border:1px solid #e6edf7;border-radius:16px;padding:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(10,26,47,.12);border-color:#d8e4f4}
.feature-card .icon{color:#17426F;background:transparent;width:104px;height:104px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;border:none}
.feature-card .icon svg{width:80px;height:80px}
.feature-card .icon svg *{stroke-width:1.6}
.feature-card h3{margin:0 0 8px;color:#103456}
.feature-card p{margin:0;color:#556d88}
.feature-card h3{margin:0 0 6px;color:#103456}
.feature-card p{margin:0;color:#556d88}

@media (min-width:720px){
  .features-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1000px){
  .features-grid{grid-template-columns:repeat(3,1fr)}
}

.stores-grid{grid-template-columns:repeat(2,1fr)}
.store-card{border:1px dashed #cbd7e7;border-radius:12px;padding:24px;text-align:center;color:#6c7d92}
.placeholder{background:repeating-linear-gradient(45deg,#f4f7fb,#f4f7fb 10px,#eef3fa 10px,#eef3fa 20px)}

.blog-grid{grid-template-columns:1fr}
.post-card{background:#fff;border:1px solid #e6edf7;border-radius:14px;overflow:hidden;transition:transform .2s ease, box-shadow .2s ease}
.post-card:hover{transform:translateY(-4px);box-shadow:0 16px 28px rgba(10,26,47,.12)}
.post-card .thumb{height:140px;background:linear-gradient(135deg,#17426F,#1b3b60);position:relative}
.post-card .thumb:after{content:"";position:absolute;inset:auto 0 0 0;height:6px;background:var(--gold)}
.post-card h3{margin:12px 16px 6px}
.post-card p{margin:0 16px 10px;color:#485e78}
.readmore{display:inline-block;margin:0 16px 16px;color:#0f2b4a;font-weight:700}

@media (min-width:900px){
  .blog-grid{grid-template-columns:repeat(3,1fr)}
}

.app-inner{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
.app-screens{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.screen{height:220px;border-radius:18px;border:1px solid #e6edf7;display:grid;place-items:center;color:#6b7a90}
@media (min-width:900px){
  .app-inner{grid-template-columns:1fr 1fr}
  .screen{height:320px}
}

.guides-row{display:grid;grid-template-columns:repeat(2, minmax(280px, 1fr));gap:20px;margin-top:12px;justify-items:center;align-items:stretch}
.guide-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;border-radius:28px;padding:28px;min-height:280px;color:#0d233b;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease;text-align:center;width:100%;max-width:100%}
/* Center headings and lead in Guides section */
.guides .section-title, .guides .lead{text-align:center}
.guide-tile .tile-badge{width:88px;height:88px;border-radius:999px;display:grid;place-items:center;margin-bottom:18px}
.guide-tile .tile-badge svg{width:40px;height:40px}
.guide-tile h3{margin:0 0 10px;font-size:24px}
.guide-tile p{margin:0 0 16px;color:#2d3f57}
.tile-cta{display:inline-block;background:#0f2b4a;color:#fff;padding:10px 16px;border-radius:14px;font-weight:800}
.tile-gold{background:#FFE070;border:1px solid #ffde66;box-shadow:0 20px 40px rgba(212,178,32,.25)}
.tile-gold .tile-badge{background:rgba(255,255,255,.35);color:#0b2542}
.tile-navy{background:linear-gradient(135deg,#3d79b8,#1e4f80);color:#fff;box-shadow:0 20px 40px rgba(15,43,74,.35)}
.tile-navy .tile-badge{background:rgba(255,255,255,.12);color:#FFD23C}
.tile-navy .tile-cta{background:#FFD23C;color:#0f2b4a}
.guide-tile:hover{transform:translateY(-6px);box-shadow:0 26px 48px rgba(10,26,47,.18)}
@media (max-width:899px){
  .guides-row{grid-template-columns:1fr}
}

@media (min-width:900px){
  .guide-tile{width:50%}
}

/* Footer */
.site-footer{background:#0f2b4a;color:#cfe1ff;padding:26px 0}
.footer-top{display:grid;gap:20px;grid-template-columns:1fr}
.ft-col h4{margin:0 0 8px;color:#fff}
.ft-brand-row{display:flex;align-items:center;gap:10px;justify-content:flex-start}
.ft-brand .brand-name{font-weight:900;color:#fff;font-size:22px}
.ft-logo{width:36px;height:36px;display:inline-block}
.ft-slogan{margin:8px 0 0;color:#a8c1e6}
.ft-contact .ft-phone{display:inline-block;margin-top:6px;color:#fff;font-weight:800}
.ft-social-row{display:flex;gap:14px;margin-top:6px;align-items:center}
.ft-ico-circle, .ft-ico-circle_linkedin{width:32px;height:32px;border-radius:999px;background:#FFD23C;color:#0f2b4a;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.ft-ico-circle svg, .ft-ico-circle_linkedin svg{width:22px;height:22px}
.ft-ico-circle_linkedin{width:32px;height:32px;border-radius:999px;background:#FFD23C;color:#0f2b4a;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.ft-ico-circle_linkedin svg{width:18px;height:18px}
.footer-divider{height:1px;background:rgba(255,255,255,.18);margin:18px 0}
.footer-bottom.center{display:flex;justify-content:center;color:#b6c9e6}

@media (min-width:900px){
  .footer-top{grid-template-columns:1.2fr 1fr 1fr;align-items:start}
}

/* Utilities */
.section .btn{border-radius:12px}

/* Mobile menu */
@media (max-width:899px){
  .site-header.open .nav-links{display:flex;position:absolute;top:54px;right:0;left:0;background:#0A1A2F;flex-direction:column;padding:10px;border-bottom:1px solid rgba(255,255,255,.1)}
}