:root{--brand:#0B5CF6;--brand2:#0e9f6e;--text:#0b1220;--muted:#55607a;--bg:#f8fafc;--line:#e6ebf3;--card:#fff}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Arial,Helvetica,sans-serif;direction:rtl;background:var(--bg);color:var(--text);line-height:1.55;overflow-wrap:break-word}a{text-decoration:none;color:inherit}.container{max-width:1180px;margin:0 auto;padding:0 18px}
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}.nav{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:68px}.brand{display:flex;align-items:center;gap:12px;font-weight:700}.logo{width:60px;height:44px;display:block;background-image:url("logo.svg");background-repeat:no-repeat;background-position:center;background-size:contain;background-color:transparent;border:none;border-radius:0;color:transparent;font-size:0;line-height:0;overflow:hidden;flex:0 0 auto}.menu{display:flex;gap:6px;flex-wrap:nowrap;align-items:center;min-width:0}.menu a{padding:8px 10px;border-radius:10px;white-space:nowrap;overflow-wrap:anywhere;text-align:center}.menu a:hover{background:#eef4ff}.btns{display:flex;gap:8px;flex-wrap:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:9px 12px;font-weight:700;border:1px solid var(--line);background:white;color:var(--text);white-space:normal;line-height:1.35;text-align:center;max-width:100%}.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}.btn.wa{background:#25D366;color:#fff;border-color:#25D366}
.hero{background:linear-gradient(180deg,#fff,#eef4ff 68%,#f8fafc);border-bottom:1px solid var(--line);padding:48px 0 34px}.hero h1{font-size:clamp(28px,4.4vw,48px);margin:0 0 10px;overflow-wrap:anywhere}.hero p{margin:0;color:var(--muted);max-width:900px}.kicker{display:inline-block;margin-bottom:10px;padding:6px 10px;border-radius:999px;background:#eef4ff;border:1px solid var(--line);font-size:13px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;align-items:flex-start}.chip{padding:8px 12px;border-radius:999px;background:white;border:1px solid var(--line);font-size:14px}
section{padding:42px 0}h2{margin:0 0 12px;font-size:30px}h3{margin:0 0 8px;font-size:21px}.sub{color:var(--muted);margin:0 0 18px}.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(10,20,40,.05)}.card p{margin:0;color:var(--muted)}.card ul{margin:10px 0 0;padding-right:18px}.badge{display:inline-block;margin-bottom:8px;font-size:12px;padding:6px 10px;border-radius:999px;background:#ecfeff;color:#0c7187;border:1px solid #b7edf6}.table-wrap{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:12px;border-top:1px solid var(--line);vertical-align:top;text-align:right}thead th{background:#f7f9ff}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.ph{aspect-ratio:4/3;border:2px dashed #cdd7e6;border-radius:16px;display:grid;place-items:center;background:#fff;color:#7b8799;font-weight:700;text-align:center;padding:12px}.cta-band{background:#0b1220;color:#fff;border-radius:20px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}footer{padding:24px 0 40px;color:#6b7280}.note{font-size:13px;color:#64748b}
@media (max-width:900px){.grid-2,.grid-3,.gallery{grid-template-columns:1fr}.nav{align-items:flex-start;padding:10px 0}.hero{padding-top:34px}h2{font-size:26px}}

@media (max-width:900px){
  .nav{flex-wrap:wrap;align-items:flex-start;padding:10px 0}
  .brand{flex:1 1 auto}
  .btns{width:100%;justify-content:flex-start}
  .menu{
    width:100%;
    order:3;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
  }
  .menu a{white-space:nowrap}
}


/* Mobile polish: tighter spacing, safer header, stacked CTAs in dark sections */
@media (max-width:640px){
  .logo{width:50px;height:36px}
.container{padding:0 14px}
  .hero{padding:28px 0 22px}
  section{padding:30px 0}
  .card{padding:16px}
  h2{font-size:24px}
  h3{font-size:19px}
  .kicker,.chip,.badge{font-size:12px}
  .menu a{padding:8px 10px}
  
  .btn{padding:9px 11px}
  .table-wrap{border-radius:14px}
  .ph{border-radius:12px}
  .cta-band,
  .top-cta .cta-box,
  .site-next-step .next-box{
    padding:16px;
    border-radius:18px;
  }
  .cta-band .btns,
  .top-cta .btns,
  .site-next-step .btns{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .cta-band .btns .btn,
  .top-cta .btns .btn,
  .site-next-step .btns .btn{
    width:100%;
  }
}


.menu{
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.menu::-webkit-scrollbar{
  height:6px;
}
.menu::-webkit-scrollbar-thumb{
  background:#cfd8e6;
  border-radius:999px;
}


/* Context back button + aligned service/quick card buttons */
.bucket .grid,
.chooser .grid,
.site-next-step .quick-grid{align-items:stretch;}
.bucket .card,
.chooser .card,
.site-next-step .quick-card{display:flex;flex-direction:column;height:100%;}
.bucket .card > .btn,
.chooser .card > .btn,
.site-next-step .quick-card > .btn,
.bucket .card > .btns:last-child,
.chooser .card > .btns:last-child,
.site-next-step .quick-card > .btns:last-child,
.bucket .card > .section-actions:last-child,
.chooser .card > .section-actions:last-child,
.site-next-step .quick-card > .section-actions:last-child{margin-top:auto;align-self:flex-start;}
.bucket .card > p,
.chooser .card > p,
.site-next-step .quick-card > p{margin-bottom:16px;}


/* v7: align card CTAs and keep service/example buttons visually consistent */
.bucket .grid,
.chooser .grid,
.example-section .grid,
.example-links .grid,
.site-next-step .quick-grid{
  align-items:stretch;
}

.bucket .card,
.chooser .card,
.example-section .card,
.example-links .card,
.site-next-step .quick-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.bucket .card > .btn:last-child,
.chooser .card > .btn:last-child,
.example-section .card > .btn:last-child,
.example-links .card > .btn:last-child,
.site-next-step .quick-card > .btn:last-child,
.bucket .card > .btns:last-child,
.chooser .card > .btns:last-child,
.example-section .card > .btns:last-child,
.example-links .card > .btns:last-child,
.site-next-step .quick-card > .btns:last-child{
  margin-top:auto;
  align-self:flex-start;
}

.bucket .card > p,
.chooser .card > p,
.example-section .card > p,
.example-links .card > p,
.site-next-step .quick-card > p{
  margin-bottom:16px;
}

.bucket .card > .btn:not(.wa),
.chooser .card > .btn:not(.wa),
.example-section .card > .btn:not(.wa),
.example-links .card > .btn:not(.wa),
.site-next-step .quick-card > .btn:not(.wa){
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}

.bucket .card > .btn:not(.wa):hover,
.chooser .card > .btn:not(.wa):hover,
.example-section .card > .btn:not(.wa):hover,
.example-links .card > .btn:not(.wa):hover,
.site-next-step .quick-card > .btn:not(.wa):hover{
  background:#0a50d6;
  border-color:#0a50d6;
}


/* v8: unify teaser/next-step CTAs and keep card titles/buttons aligned */
section[data-key$="about-process-teaser"] .grid,
.site-next-step .quick-grid{
  align-items:stretch;
}

section[data-key$="about-process-teaser"] .card,
.site-next-step .quick-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

section[data-key$="about-process-teaser"] .card > .kicker,
.site-next-step .quick-card > .badge{
  align-self:flex-start;
}

section[data-key$="about-process-teaser"] .card > h2{
  margin:0 0 10px;
}

.site-next-step .quick-card > h3{
  margin:0 0 10px;
}

section[data-key$="about-process-teaser"] .card > p,
.site-next-step .quick-card > p{
  margin:0 0 16px;
}

section[data-key$="about-process-teaser"] .card > .btn:last-child,
.site-next-step .quick-card > .btn:last-child{
  margin-top:auto;
  align-self:flex-start;
}

section[data-key$="about-process-teaser"] .card > .btn:not(.wa),
.site-next-step .quick-card > .btn:not(.wa){
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}

section[data-key$="about-process-teaser"] .card > .btn:not(.wa):hover,
.site-next-step .quick-card > .btn:not(.wa):hover{
  background:#0a50d6;
  border-color:#0a50d6;
}


/* v9: contact page CTA consistency + more breathing room in next-step */
.contact-grid .grid,
.contact-grid .card,
.contact-grid .section-actions{
  align-items:stretch;
}

.contact-grid .card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.contact-grid .card > p{
  margin-bottom:16px;
}

.contact-grid .card > .btn:not(.wa),
.contact-grid .card .section-actions .btn:not(.wa){
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}

.contact-grid .card > .btn:not(.wa):hover,
.contact-grid .card .section-actions .btn:not(.wa):hover{
  background:#0a50d6;
  color:#fff;
  border-color:#0a50d6;
}

.contact-grid .card .section-actions{
  margin-top:auto;
}

.site-next-step .quick-grid{
  margin-top:28px;
}

.site-next-step .quick-card{
  padding-top:22px;
}

.site-next-step .quick-card > h3{
  margin:0 0 14px;
}

.site-next-step .quick-card > p{
  margin:0 0 20px;
}

@media (max-width:640px){
  .site-next-step .quick-grid{
    margin-top:22px;
  }

  .site-next-step .quick-card{
    padding-top:18px;
  }

  .contact-grid .card .section-actions{
    gap:12px;
  }

  .contact-grid .card .section-actions .btn{
    width:100%;
  }
}


/* v10: contact page remaining white buttons -> blue consistency */
.contact-hero .btn:not(.wa),
.chooser .card > .btn:not(.wa){
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.contact-hero .btn:not(.wa):hover,
.chooser .card > .btn:not(.wa):hover{
  background:#0a50d6;
  color:#fff;
  border-color:#0a50d6;
}


/* v11: header phone CTA should be blue too */
header .btns .btn:not(.wa){
  background: var(--brand);
  color:#fff;
  border-color: var(--brand);
}

header .btns .btn:not(.wa):hover{
  background:#0a50d6;
  color:#fff;
  border-color:#0a50d6;
}

/* translation-safe hardening */
.notranslate{unicode-bidi:isolate;}
h1,h2,h3,.hero h1,.examples-hero h1,.detail-hero h1{overflow-wrap:anywhere;word-break:normal;}
p,li,.badge,.kicker,.chip{overflow-wrap:anywhere;}
.btns{flex-wrap:wrap;}
@media (max-width:900px){
  .menu{overflow:visible;flex-wrap:wrap;row-gap:8px;}
  .menu a{white-space:normal;}
}
@media (max-width:640px){
  .menu{gap:8px;}
  .menu a{flex:0 1 auto;max-width:100%;}
  .btn{min-height:46px;}
}