/* Yebrax SMS Relay — Public UI V8
   Precision pass based on live landing screenshot. Public presentation only; no runtime logic changes. */
:root{
  --sms8-ink:#0d1829;
  --sms8-ink-2:#1a2b44;
  --sms8-muted:#64748b;
  --sms8-muted-2:#8b98aa;
  --sms8-line:#e6ebf1;
  --sms8-soft:#f7f9fc;
  --sms8-blue:#2563eb;
  --sms8-blue-soft:#edf4ff;
  --sms8-green:#18a875;
}

/* ---------- Global public shell ---------- */
.sms-public-v7{
  background:#fff;
  color:var(--sms8-ink);
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;
}

.sms-public-v7 .sms-topbar{
  position:sticky;
  top:0;
  z-index:70;
  width:min(1200px,calc(100% - 48px));
  min-height:72px;
  margin:0 auto;
  padding:14px 0;
  border:0;
  border-bottom:1px solid rgba(13,24,41,.07);
  border-radius:0;
  background:rgba(255,255,255,.96);
  box-shadow:none;
  backdrop-filter:blur(18px);
}
.sms-public-v7 .sms-topbar-brand .brand-logo{height:38px;max-width:170px}
.sms-public-v7 .sms-nav{gap:24px}
.sms-public-v7 .sms-nav-links{gap:4px}
.sms-public-v7 .sms-nav a.sms-nav-link{
  padding:8px 10px;
  border-radius:8px;
  color:#526176;
  font-size:13px;
  font-weight:750;
}
.sms-public-v7 .sms-nav a.sms-nav-link:hover,
.sms-public-v7 .sms-nav a.sms-nav-link.active{background:#f4f7fb;color:#174fb8}
.sms-public-v7 .sms-topbar-actions{gap:7px}
.sms-public-v7 .sms-topbar-actions .sms-btn,
.sms-public-v7 .lang-menu summary.btn{min-height:39px;border-radius:9px!important}
.sms-public-v7 .sms-btn.primary{background:#102039!important;border-color:#102039!important}

/* ---------- Hero ---------- */
.sms-home-v7{width:min(1200px,calc(100% - 48px));margin:0 auto;padding:0 0 96px}
.sms7-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(510px,1.08fr);
  gap:64px;
  align-items:center;
  min-height:590px;
  padding:68px 0 58px;
  border:0;
  border-radius:0;
  background:#fff;
  overflow:visible;
}
.sms7-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:420px;
  height:420px;
  inset-inline-start:-120px;
  top:48px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.10),rgba(37,99,235,0) 70%);
  pointer-events:none;
}
.sms7-hero-copy{max-width:560px;padding-inline:2px}
.sms7-kicker,.sms7-section-label{
  color:#275bbf;
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
}
.sms7-kicker span{width:7px;height:7px;box-shadow:0 0 0 4px rgba(47,111,237,.08)}
.sms7-hero h1{
  max-width:570px;
  margin:19px 0 18px;
  color:#101827;
  font-size:clamp(46px,4.3vw,62px);
  line-height:1.12;
  letter-spacing:-.035em;
  font-weight:900;
  text-wrap:balance;
}
[dir="rtl"] .sms7-hero h1{letter-spacing:0;line-height:1.22}
.sms7-hero p{
  max-width:555px;
  color:#66758a;
  font-size:17px;
  line-height:1.9;
}
.sms7-hero-actions{margin-top:27px;gap:9px}
.sms7-btn{min-height:46px;padding:11px 17px;border-radius:10px;font-size:13px;font-weight:850}
.sms7-btn-primary{background:#102039;color:#fff;box-shadow:0 10px 24px rgba(16,32,57,.14)}
.sms7-btn-secondary{border-color:#dfe5ec;background:#fff;color:#1a2b44}
.sms7-hero-meta{
  max-width:540px;
  margin-top:31px;
  padding-top:18px;
  border-top:1px solid #e5e9ef;
}
.sms7-hero-meta div{padding-inline:16px}
.sms7-hero-meta strong{font-size:11px;color:#253650}
.sms7-hero-meta span{margin-top:3px;color:#919cac;font-size:10px}

/* ---------- Product frame ---------- */
.sms7-product-preview{
  width:100%;
  max-width:620px;
  justify-self:start;
  overflow:hidden;
  border:1px solid #1b2c45;
  border-radius:22px;
  background:#0b1728;
  box-shadow:0 28px 65px rgba(19,36,61,.18),0 0 0 10px rgba(244,247,251,.75);
}
.sms7-preview-head{padding:13px 15px}
.sms7-preview-body{grid-template-columns:50px 1fr;min-height:385px}
.sms7-preview-body aside{padding:16px 9px;gap:10px}
.sms7-preview-body aside b,.sms7-preview-body aside span{width:27px;height:27px;border-radius:7px}
.sms7-preview-main{padding:20px}
.sms7-preview-title strong{font-size:15px}
.sms7-preview-stats{gap:8px;margin-top:16px}
.sms7-preview-stats article{padding:12px;border-radius:10px}
.sms7-preview-flow{padding:14px;border-radius:12px}
.sms7-flow-track{gap:6px;margin-top:14px}
.sms7-flow-track div{padding:9px;border-radius:9px}
.sms7-preview-footer{gap:8px;margin-top:9px}
.sms7-preview-footer>div{padding:10px 11px;border-radius:10px}

/* ---------- Capability row ---------- */
.sms7-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:0 0 88px;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.sms7-strip>div{
  min-height:86px;
  padding:17px 18px;
  border:1px solid var(--sms8-line)!important;
  border-radius:14px;
  background:#fff;
}
.sms7-strip>div::before{
  content:"";
  display:block;
  width:24px;
  height:3px;
  margin-bottom:12px;
  border-radius:999px;
  background:#2d65dc;
}
.sms7-strip strong{display:block;color:#1b2c45;font-size:12px}
.sms7-strip span{display:block;margin-top:5px;color:#8995a5;font-size:10px;line-height:1.55}

/* ---------- Section rhythm ---------- */
.sms7-section{margin-top:96px}
.sms7-section-heading{margin-bottom:30px}
.sms7-section-heading h2,.sms7-section-copy h2,.sms7-faq-head h2{
  color:#111b2b;
  font-size:clamp(32px,3.2vw,46px);
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.025em;
}
[dir="rtl"] .sms7-section-heading h2,
[dir="rtl"] .sms7-section-copy h2,
[dir="rtl"] .sms7-faq-head h2{letter-spacing:0;line-height:1.34}
.sms7-section-heading p,.sms7-section-copy p{color:#6a788c;font-size:15px;line-height:1.85}
.sms7-feature-card,.sms7-usecase-card{border-radius:16px!important;box-shadow:none!important}
.sms7-process,.sms7-dev,.sms7-app{border-radius:22px!important}
.sms7-final{border-radius:22px;margin-top:96px}

/* ---------- Floating WhatsApp: quieter ---------- */
.sms-public-v7 .whatsapp-float,
.sms-public-v7 .sms-whatsapp-float{transform:scale(.92);transform-origin:bottom left}

/* ---------- Arabic-specific tuning ---------- */
[dir="rtl"] .sms7-hero-copy,
[dir="rtl"] .sms7-section-copy,
[dir="rtl"] .sms7-section-heading{text-align:right}
[dir="rtl"] .sms7-hero p{font-weight:400}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .sms-public-v7 .sms-topbar,.sms-home-v7{width:min(100% - 32px,960px)}
  .sms7-hero{grid-template-columns:1fr;gap:44px;min-height:auto;padding:58px 0 48px}
  .sms7-hero-copy{max-width:720px}
  .sms7-hero h1,.sms7-hero p{max-width:720px}
  .sms7-product-preview{max-width:720px;justify-self:center}
  .sms7-strip{margin-bottom:72px}
}
@media(max-width:820px){
  .sms-public-v7 .sms-topbar{top:0;width:calc(100% - 24px);min-height:64px;padding:10px 0}
  .sms-public-v7 .sms-nav{top:calc(100% + 4px);padding:9px;border-radius:12px}
  .sms-home-v7{width:calc(100% - 24px);margin-top:0}
  .sms7-hero{padding:42px 0 36px;gap:34px}
  .sms7-hero::before{width:300px;height:300px;inset-inline-start:-120px;top:20px}
  .sms7-hero h1{font-size:clamp(38px,8.8vw,52px)}
  .sms7-hero p{font-size:16px;line-height:1.8}
  .sms7-product-preview{box-shadow:0 20px 45px rgba(19,36,61,.16),0 0 0 6px rgba(244,247,251,.75)}
  .sms7-strip{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:62px}
  .sms7-strip>div{border:1px solid var(--sms8-line)!important;min-height:78px}
  .sms7-section{margin-top:72px}
}
@media(max-width:540px){
  .sms-public-v7 .sms-topbar-brand .brand-logo{height:34px;max-width:148px}
  .sms-home-v7{width:calc(100% - 20px)}
  .sms7-hero{padding:34px 0 30px;gap:26px}
  .sms7-kicker{font-size:8px;letter-spacing:.085em}
  .sms7-hero h1{margin-top:14px;font-size:clamp(34px,10vw,44px);line-height:1.18}
  [dir="rtl"] .sms7-hero h1{line-height:1.3}
  .sms7-hero p{font-size:15px}
  .sms7-hero-meta{grid-template-columns:1fr 1fr;margin-top:24px}
  .sms7-hero-meta div{padding:0 12px 12px;border-inline-end:0}
  .sms7-hero-meta div:last-child{grid-column:1/-1;padding-top:10px;border-top:1px solid #e5e9ef}
  .sms7-product-preview{border-radius:16px;box-shadow:0 16px 34px rgba(19,36,61,.14)}
  .sms7-preview-body{min-height:340px}
  .sms7-preview-main{padding:14px}
  .sms7-strip{grid-template-columns:1fr;gap:7px;margin-bottom:56px}
  .sms7-strip>div{min-height:auto;padding:15px 16px}
  .sms7-section{margin-top:62px}
}