/* ===================================================================
   Send4Sale / AppAI — shared public UI design system  (v2)
   Light-dominant modern SaaS. Green/teal accent. Loaded LAST in
   frontend/themes/default/layouts/main.blade.php (public pages only).
   Fixes: clean white navbar (no hero clipping), no giant black blocks,
   consistent spacing, stronger typography. No markup/JS/logic changes.
   =================================================================== */
:root{
  --s4s-bg:#ffffff; --s4s-bg-soft:#f6f8f7; --s4s-bg-card:#ffffff; --s4s-bg-dark:#0b1220;
  --s4s-fg:#0b1220; --s4s-fg-muted:#5b6472; --s4s-fg-faint:#8a93a1; --s4s-fg-on-dark:#e8f1ee; --s4s-fg-on-dark-muted:#9fb0ab;
  --s4s-border:#e8ebe9; --s4s-border-strong:#d5dbd8;
  --s4s-accent:#0ea371; --s4s-accent-2:#0d9488; --s4s-accent-deep:#047857; --s4s-accent-soft:#e7f6f0;
  --s4s-sans:"Manrope",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --s4s-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --s4s-radius-sm:9px; --s4s-radius:14px; --s4s-radius-lg:20px;
  --s4s-shadow-sm:0 1px 2px rgba(11,18,32,.05);
  --s4s-shadow:0 1px 3px rgba(11,18,32,.06),0 10px 26px -10px rgba(11,18,32,.10);
  --s4s-shadow-lg:0 6px 14px rgba(11,18,32,.05),0 26px 52px -14px rgba(11,18,32,.16);
  --s4s-grad:linear-gradient(120deg,#0ea371 0%,#0d9488 100%);
  --s4s-maxw:1180px;
}

/* ---------- base ---------- */
body{font-family:var(--s4s-sans);color:var(--s4s-fg);background:var(--s4s-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{font-family:var(--s4s-sans);color:var(--s4s-fg);letter-spacing:-.02em;line-height:1.15}
p{color:var(--s4s-fg-muted)}
a{color:var(--s4s-accent-2);text-decoration:none}
a:hover{color:var(--s4s-accent-deep)}
.text-gradient,.text--gradient{background:var(--s4s-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- NAVBAR: clean white, in-flow (no hero clipping) ---------- */
.header{position:relative!important;background:#fff!important;border-bottom:1px solid var(--s4s-border);z-index:50}
header.sticky{position:sticky!important;top:0;background:#fff!important;box-shadow:var(--s4s-shadow-sm);z-index:1000}
.header-wrapper{max-width:var(--s4s-maxw);margin:0 auto;padding:14px 24px!important}
.header .menu-link{font-family:var(--s4s-sans);font-weight:600;color:var(--s4s-fg)!important;font-size:15px}
.header .menu-link:hover,.header .menu-link.active{color:var(--s4s-accent-2)!important}
.logo-wrapper img{max-height:40px;width:auto}

/* ---------- buttons ---------- */
.i-btn,.btn,.s4s-btn{font-family:var(--s4s-sans)!important;font-weight:700!important;border-radius:999px!important;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;letter-spacing:-.005em}
.i-btn,.i-btn span,.i-btn i,.i-btn *{-webkit-text-fill-color:currentColor!important;-webkit-background-clip:border-box!important;background-clip:border-box!important}
.i-btn.btn--primary:not(.outline),.btn-primary,.i-btn.bg--gradient,.btn.bg--gradient{background:var(--s4s-grad)!important;border:1px solid transparent!important;color:#fff!important;box-shadow:0 4px 12px rgba(14,163,113,.28)!important}
.i-btn.btn--primary:not(.outline):hover,.btn-primary:hover,.i-btn.bg--gradient:hover{filter:brightness(1.05);transform:translateY(-1px);color:#fff!important}
.i-btn.btn--primary.outline,.i-btn.outline,.btn-outline-primary{background:#fff!important;color:var(--s4s-fg)!important;border:1px solid var(--s4s-border-strong)!important}
.i-btn.outline:hover,.i-btn.btn--primary.outline:hover,.btn-outline-primary:hover{border-color:var(--s4s-accent-2)!important;color:var(--s4s-accent-2)!important;background:#fff!important}

.s4s-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 26px;font-size:15.5px;border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap}
.s4s-btn i{font-size:18px}
.s4s-btn-primary{background:var(--s4s-grad);color:#fff;box-shadow:0 6px 16px rgba(14,163,113,.3)}
.s4s-btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px);color:#fff}
.s4s-btn-ghost{background:#fff;color:var(--s4s-fg);border-color:var(--s4s-border-strong)}
.s4s-btn-ghost:hover{border-color:var(--s4s-accent-2);color:var(--s4s-accent-2)}
.s4s-btn-sm{height:42px;padding:0 18px;font-size:14.5px}

/* ---------- forms ---------- */
.form-control,.form-select{border-radius:var(--s4s-radius-sm);border:1px solid var(--s4s-border-strong);padding:.72rem .9rem;font-family:var(--s4s-sans);background:#fff;color:var(--s4s-fg);box-shadow:none}
.form-control::placeholder{color:var(--s4s-fg-faint)}
.form-control:focus,.form-select:focus{border-color:var(--s4s-accent);box-shadow:0 0 0 3px var(--s4s-accent-soft);background:#fff}
.form-label{font-weight:600;color:var(--s4s-fg);font-size:14px;margin-bottom:.4rem}

/* ---------- cards / alerts ---------- */
.card{border-radius:var(--s4s-radius-lg);border:1px solid var(--s4s-border);box-shadow:var(--s4s-shadow);background:#fff}
.alert{border-radius:var(--s4s-radius);border:1px solid var(--s4s-border)}

/* ---------- auth pages ---------- */
.auth{background:var(--s4s-bg-soft)}
.auth-left{background:var(--s4s-bg-dark)!important;color:var(--s4s-fg-on-dark);position:relative;overflow:hidden}
.auth-left::after{content:"";position:absolute;top:-160px;right:-160px;width:520px;height:520px;background:radial-gradient(circle,rgba(14,163,113,.28),rgba(13,148,136,.08) 40%,transparent 70%);pointer-events:none}
.auth-left h3,.auth-left .text-gradient,.auth-left .section-title h3{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;position:relative;z-index:1}
.auth-left .auth-feature-info h6{color:#fff}
.auth-left .auth-feature-info p,.auth-left p,.auth-nav-link{color:var(--s4s-fg-on-dark-muted)!important}
.auth-nav-link:hover{color:#fff!important}
.auth-feature-item{position:relative;z-index:1}
.auth-feature-icon{color:#fff!important;-webkit-text-fill-color:#fff!important;background:rgba(255,255,255,.10)!important;width:46px;height:46px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:20px}
.auth-right{background:var(--s4s-bg-soft)}
.auth-form-wrapper{background:#fff;border:1px solid var(--s4s-border);border-radius:var(--s4s-radius-lg);box-shadow:var(--s4s-shadow);padding:38px 34px}
.auth-form-wrapper h3{font-weight:800;margin-bottom:4px;font-size:26px}
.s4s-auth-sub{color:var(--s4s-fg-muted);font-size:15px;margin-bottom:22px}
.forget-password{color:var(--s4s-accent-2);font-size:13px;font-weight:600}
.sign-option-btn{border-radius:var(--s4s-radius-sm);border:1px solid var(--s4s-border-strong);font-weight:600}
.divider span{color:var(--s4s-fg-faint);font-size:13px}

/* ---------- layout: container + sections (light-dominant) ---------- */
.s4s-container{max-width:var(--s4s-maxw);margin:0 auto;padding:0 24px}
.s4s-section{padding:clamp(56px,7vw,96px) 0}
.s4s-section--soft{background:var(--s4s-bg-soft)}
.s4s-head{max-width:720px;margin:0 auto 44px;text-align:center}
.s4s-eyebrow{font-family:var(--s4s-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--s4s-accent-2);font-weight:600;display:inline-flex;align-items:center;gap:8px}
.s4s-eyebrow::before{content:"";width:20px;height:2px;background:var(--s4s-accent);border-radius:2px}
.s4s-h2{font-size:clamp(26px,3.6vw,40px);font-weight:800;letter-spacing:-.03em;margin:14px 0 12px}
.s4s-lead{font-size:clamp(16px,2vw,18.5px);line-height:1.65;color:var(--s4s-fg-muted);margin:0 auto;max-width:640px}

/* ---------- HERO (split: text + visual) ---------- */
.s4s-hero{position:relative;overflow:hidden;background:
   radial-gradient(900px 420px at 78% -6%,rgba(14,163,113,.10),transparent 60%),
   radial-gradient(700px 360px at 6% 0%,rgba(13,148,136,.07),transparent 55%),var(--s4s-bg);
   padding:clamp(56px,7vw,88px) 0 clamp(52px,6vw,80px)}
.s4s-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.s4s-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--s4s-border);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;color:var(--s4s-fg);box-shadow:var(--s4s-shadow-sm)}
.s4s-badge i{color:var(--s4s-accent)}
.s4s-hero h1{font-size:clamp(32px,4.6vw,52px);line-height:1.06;font-weight:800;letter-spacing:-.035em;margin:20px 0 18px}
.s4s-hero .s4s-sub{font-size:clamp(16px,1.9vw,19px);line-height:1.62;color:var(--s4s-fg-muted);max-width:560px;margin:0 0 28px}
.s4s-cta-row{display:flex;flex-wrap:wrap;gap:12px}
.s4s-trust{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.s4s-trust__ok{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--s4s-fg)}
.s4s-dot{width:9px;height:9px;border-radius:50%;background:var(--s4s-accent);box-shadow:0 0 0 4px var(--s4s-accent-soft)}
.s4s-trust__logos{display:flex;flex-wrap:wrap;gap:8px}
.s4s-pill{font-size:12.5px;font-weight:600;color:var(--s4s-fg-muted);background:var(--s4s-bg-soft);border:1px solid var(--s4s-border);border-radius:999px;padding:5px 12px}

/* hero visual cards */
.s4s-visual{display:flex;flex-direction:column;gap:16px}
.s4s-vcard{background:#fff;border:1px solid var(--s4s-border);border-radius:var(--s4s-radius-lg);box-shadow:var(--s4s-shadow-lg);overflow:hidden}
.s4s-vcard__bar{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--s4s-border);background:var(--s4s-bg-soft)}
.s4s-vcard__bar span{width:10px;height:10px;border-radius:50%;background:#d7ddda}
.s4s-vcard__name{margin-left:8px;font-family:var(--s4s-mono);font-size:12px;color:var(--s4s-fg-faint)}
.s4s-code{margin:0;padding:16px;font-family:var(--s4s-mono);font-size:12.5px;line-height:1.7;color:#0b1220;background:#fff;overflow-x:auto;white-space:pre}
.s4s-code .k{color:var(--s4s-accent-2)} .s4s-code .s{color:#b45309} .s4s-code .c{color:var(--s4s-fg-faint)}
.s4s-vrow{display:flex;align-items:center;gap:12px;padding:14px 16px}
.s4s-vrow+.s4s-vrow{border-top:1px solid var(--s4s-border)}
.s4s-vico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.s4s-vico--ok{background:var(--s4s-accent-soft);color:var(--s4s-accent-deep)}
.s4s-vico--wh{background:#eef2ff;color:#4f46e5}
.s4s-vrow h6{margin:0;font-size:14px;font-weight:700}
.s4s-vrow p{margin:2px 0 0;font-size:12.5px;color:var(--s4s-fg-muted)}
.s4s-vtag{margin-left:auto;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px}
.s4s-vtag--ok{background:var(--s4s-accent-soft);color:var(--s4s-accent-deep)}

/* ---------- generic card grids ---------- */
.s4s-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.s4s-fcard{background:#fff;border:1px solid var(--s4s-border);border-radius:var(--s4s-radius-lg);padding:26px 24px;transition:transform .18s ease,box-shadow .18s ease;height:100%}
.s4s-fcard:hover{transform:translateY(-4px);box-shadow:var(--s4s-shadow-lg);border-color:var(--s4s-border-strong)}
.s4s-fico{width:50px;height:50px;border-radius:13px;background:var(--s4s-accent-soft);color:var(--s4s-accent-deep);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.s4s-fcard h3{font-size:17.5px;font-weight:700;margin:0 0 8px}
.s4s-fcard p{font-size:14.5px;line-height:1.6;margin:0;color:var(--s4s-fg-muted)}

/* ---------- problem / solution ---------- */
.s4s-two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.s4s-panel{border-radius:var(--s4s-radius-lg);padding:30px 28px;border:1px solid var(--s4s-border)}
.s4s-panel--p{background:var(--s4s-bg-soft)}
.s4s-panel--s{background:#fff;box-shadow:var(--s4s-shadow);border-color:var(--s4s-accent-soft)}
.s4s-panel h3{font-size:20px;font-weight:800;margin:0 0 10px}
.s4s-panel p{font-size:15.5px;line-height:1.65;margin:0}
.s4s-panel .s4s-tagp{font-family:var(--s4s-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.s4s-panel--p .s4s-tagp{color:#b45309}.s4s-panel--s .s4s-tagp{color:var(--s4s-accent-deep)}

/* ---------- steps ---------- */
.s4s-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.s4s-step{background:#fff;border:1px solid var(--s4s-border);border-radius:var(--s4s-radius-lg);padding:26px 24px}
.s4s-step__n{font-family:var(--s4s-mono);font-size:13px;color:#fff;font-weight:700;background:var(--s4s-grad);width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.s4s-step h4{font-size:16.5px;font-weight:700;margin:0 0 7px}
.s4s-step p{font-size:14px;line-height:1.6;margin:0;color:var(--s4s-fg-muted)}

/* ---------- pricing ---------- */
.s4s-price{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;align-items:stretch}
.s4s-pcard{background:#fff;border:1px solid var(--s4s-border);border-radius:var(--s4s-radius-lg);padding:30px 26px;display:flex;flex-direction:column}
.s4s-pcard--pop{border:1.5px solid var(--s4s-accent);box-shadow:var(--s4s-shadow-lg);position:relative}
.s4s-pcard__badge{position:absolute;top:-11px;left:26px;background:var(--s4s-grad);color:#fff;font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:999px}
.s4s-pcard h3{font-size:19px;font-weight:800;margin:0 0 6px}
.s4s-pcard .s4s-pdesc{font-size:14px;color:var(--s4s-fg-muted);margin:0 0 16px;min-height:40px}
.s4s-pcard ul{list-style:none;padding:0;margin:0 0 22px;flex:1}
.s4s-pcard li{font-size:14px;color:var(--s4s-fg);padding:7px 0;display:flex;gap:9px;align-items:flex-start}
.s4s-pcard li i{color:var(--s4s-accent-deep);font-size:15px;margin-top:2px}

/* ---------- responsible use ---------- */
.s4s-resp{display:flex;gap:16px;align-items:center;background:var(--s4s-accent-soft);border:1px solid var(--s4s-accent-soft);border-radius:var(--s4s-radius-lg);padding:24px 26px}
.s4s-resp i{font-size:30px;color:var(--s4s-accent-deep);flex:none}
.s4s-resp h4{margin:0 0 4px;font-size:17px;font-weight:700}
.s4s-resp p{margin:0;font-size:14.5px;color:var(--s4s-fg-muted)}

/* ---------- final CTA (light accent panel, NOT a giant black block) ---------- */
.s4s-cta-panel{background:linear-gradient(120deg,#0b1220,#10352c);border-radius:24px;padding:clamp(40px,5vw,60px);text-align:center;position:relative;overflow:hidden}
.s4s-cta-panel::after{content:"";position:absolute;top:-140px;right:-120px;width:420px;height:420px;background:radial-gradient(circle,rgba(14,163,113,.35),transparent 65%);pointer-events:none}
.s4s-cta-panel h2{color:#fff;font-size:clamp(24px,3.2vw,34px);font-weight:800;margin:0 0 10px;position:relative}
.s4s-cta-panel p{color:var(--s4s-fg-on-dark-muted);font-size:17px;margin:0 auto 26px;max-width:520px;position:relative}
.s4s-cta-panel .s4s-cta-row{justify-content:center;position:relative}
.s4s-btn-on-dark{background:#fff;color:var(--s4s-fg)}
.s4s-btn-on-dark:hover{background:#eef2f0;color:var(--s4s-fg)}
.s4s-btn-ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.s4s-btn-ghost-dark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);color:#fff}

/* ---------- footer polish ---------- */
footer,.footer,.footer-area{background:var(--s4s-bg-soft)}

/* ---------- blog ---------- */
.blog-card,.blog-item,.post-card{border-radius:var(--s4s-radius-lg)!important;border:1px solid var(--s4s-border)!important;box-shadow:var(--s4s-shadow)!important;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;background:#fff}
.blog-card:hover,.blog-item:hover,.post-card:hover{transform:translateY(-4px);box-shadow:var(--s4s-shadow-lg)!important}
.blog-details p,.post-content p,.blog-content p{font-size:16.5px;line-height:1.8;color:#39414c}
.blog-details,.post-content,.blog-content{max-width:760px;margin-inline:auto}

/* ---------- responsive + RTL ---------- */
[dir="rtl"] .s4s-eyebrow::before{margin-left:8px}
@media (max-width:900px){
  .s4s-hero__grid{grid-template-columns:1fr;gap:36px}
  .s4s-two{grid-template-columns:1fr}
  .s4s-hero .s4s-sub{max-width:none}
}
@media (max-width:575px){
  .s4s-section{padding:44px 0}
  .s4s-hero{padding:40px 0 44px}
  .auth-form-wrapper{padding:26px 20px}
  .s4s-btn{height:46px;font-size:15px;padding:0 20px;width:100%}
  .s4s-cta-row{width:100%}
}

/* Hide all pricing links/buttons site-wide per request */
a[href$="/pricing"], a[href$="/pricing/"], .menu-link[href*="/pricing"]{display:none!important}