/* ============================================================
   Al Ali Group — polish.css
   Visual polish overrides applied site-wide. Loaded after each
   page's inline styles so it wins specificity for shared classes.
   Brand: Manrope only. Navy #0B1B3A, Azure #3B82F6.
   ============================================================ */

:root{
  --navy:#0B1B3A;
  --azure:#3B82F6;
  --azure-2:#60a5fa;
  --azure-soft:#eaf1ff;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-card:0 1px 0 rgba(11,27,58,.04), 0 18px 38px -22px rgba(11,27,58,.22);
  --shadow-card-h:0 1px 0 rgba(11,27,58,.05), 0 36px 64px -26px rgba(11,27,58,.34);
  --shadow-panel:0 50px 120px -50px rgba(11,27,58,.55), 0 24px 50px -30px rgba(59,130,246,.4);
}

/* ----- 1. TYPOGRAPHY HIERARCHY ------------------------------- */
body{font-family:'Manrope',sans-serif !important;font-feature-settings:"ss01","cv11";text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:'Manrope',sans-serif !important;font-weight:800}
.hero h1, .top h1, header.hero h1{
  letter-spacing:-.035em !important;
  line-height:.98 !important;
  font-weight:800 !important;
}
.sec-head h2, section h2, .guar h2, .final h2{
  letter-spacing:-.028em !important;
  line-height:1.04 !important;
}
h3{letter-spacing:-.015em;line-height:1.2}
.eyebrow{letter-spacing:.18em !important;font-size:12.5px !important}
.sec-head p, .hero p.sub, .top p{line-height:1.55}

/* ----- 2. SECTION RHYTHM ------------------------------------- */
section.block{padding:96px 0 !important}
.sec-head{margin-bottom:56px !important}
@media(max-width:760px){
  section.block{padding:64px 0 !important}
  .sec-head{margin-bottom:36px !important}
  .hero, header.hero{padding:120px 0 70px !important}
}

/* ----- 3. VISUAL PANELS (navy / azure grid boxes) ------------ */
/* Shared deep-gradient + glow + subtle inner border for any panel
   that holds a brand mark on the navy/azure surface. */
.tc-visual, .hiw-visual{
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(96,165,250,.32), transparent 55%),
    radial-gradient(110% 80% at 88% 92%, rgba(37,99,235,.32), transparent 60%),
    linear-gradient(150deg,#13284f 0%, #0B1B3A 55%, #061227 100%) !important;
  box-shadow:var(--shadow-panel) !important;
  border:1px solid rgba(96,165,250,.18);
  isolation:isolate;
}
.hiw-visual{
  background:
    radial-gradient(120% 90% at 22% 14%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(120% 90% at 85% 95%, rgba(11,27,58,.55), transparent 55%),
    linear-gradient(150deg,#3B82F6 0%, #2563eb 55%, #1d4ed8 100%) !important;
  border-color:rgba(255,255,255,.22);
}
/* layered grid + sheen on top */
.tc-visual::after, .hiw-visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 85%);
  opacity:.55;
}
.tc-visual .tcv-grid, .hiw-visual .hv-grid{display:none !important} /* avoid double-grid */
/* soft animated halo behind the mark */
.tc-visual .tcv-mark, .hiw-visual .hv-mark{
  filter:drop-shadow(0 18px 40px rgba(59,130,246,.45));
  animation:floatMark 6s var(--ease) infinite;
}
@keyframes floatMark{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* corner glow accents */
.tc-visual::before{
  background:
    radial-gradient(circle at 78% 22%, rgba(96,165,250,.55), transparent 55%),
    radial-gradient(circle at 12% 88%, rgba(37,99,235,.35), transparent 60%) !important;
  filter:blur(2px);
}

/* ----- 4. CARD / BUTTON HOVER UNIFICATION -------------------- */
.svc, .pain, .panel, .card, .price, .step{
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease) !important;
  will-change:transform;
}
.svc:hover, .pain:hover, .card:hover, .price:hover, .step:hover{
  transform:translateY(-6px) !important;
  box-shadow:var(--shadow-card-h) !important;
}
.btn{transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease) !important}
.btn:hover{transform:translateY(-2px) !important}
.btn:active{transform:translateY(0) !important;transition-duration:.1s !important}

/* nav dropdown smoother */
.dd-menu{transition:opacity .22s var(--ease), transform .28s var(--ease) !important}

/* ----- 5. SCROLL REVEALS ------------------------------------- */
.reveal{transition:opacity .9s var(--ease), transform .9s var(--ease) !important;transform:translateY(28px)}
.reveal.in{transform:translateY(0)}

/* ----- 6. CALENDLY EMBED (launch page) ---------------------- */
.opt-wrap .panel{
  background:#fff;
  border:1px solid rgba(11,27,58,.08);
  border-radius:20px;
  box-shadow:0 1px 0 rgba(11,27,58,.04), 0 30px 60px -32px rgba(11,27,58,.25);
  padding:34px;
}
.cal{
  border:1px solid rgba(11,27,58,.08) !important;
  border-radius:16px !important;
  padding:0 !important;
  background:#fff !important;
  box-shadow:inset 0 1px 0 #fff, 0 10px 30px -18px rgba(11,27,58,.18);
  overflow:hidden !important;
}
.cal iframe, .cal .calendly-inline-widget iframe{border-radius:16px !important}

/* Form side */

.opt-head{display:flex;gap:14px;align-items:center;margin-bottom:22px}
.oh-ico{
  width:42px;height:42px;border-radius:11px;
  background:linear-gradient(135deg,#eaf1ff,#dbe6ff);
  color:#2563eb;display:grid;place-items:center;flex:none;
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.15);
}
.field input, .field select, .field textarea{
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease) !important;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none !important;
  border-color:#3B82F6 !important;
  box-shadow:0 0 0 4px rgba(59,130,246,.14) !important;
}

/* ----- 7. MOBILE POLISH -------------------------------------- */
@media(max-width:760px){
  .wrap{padding:0 20px !important}
  .hero h1, .top h1, header.hero h1{font-size:clamp(36px,9vw,52px) !important}
  .sec-head h2{font-size:clamp(28px,7vw,38px) !important}
  .pain-grid, .svc-grid, .twocol, .hiw, .opt-wrap{grid-template-columns:1fr !important;gap:18px !important}
  .opt-wrap .panel{padding:24px !important}
  .hero-cta .btn, .fcta .btn, #formInner .btn{width:100%;justify-content:center}
  .hero-cta, .fcta{width:100%}
  .stats-grid{grid-template-columns:1fr !important}
  .cal .calendly-inline-widget{height:620px !important}
  footer .sf-grid, .sf-grid{grid-template-columns:1fr !important;gap:28px !important}
  .sf-bottom{flex-direction:column;align-items:flex-start !important;gap:10px !important}
  nav{padding:14px 18px !important}
}
@media(max-width:420px){
  .cal .calendly-inline-widget{height:600px !important}
}

/* ----- 8. MICRO POLISH --------------------------------------- */
img{max-width:100%}
::selection{background:rgba(59,130,246,.22);color:var(--navy)}
a{-webkit-tap-highlight-color:transparent}
.jabal-bg{opacity:.06 !important}

/* ============================================================
   PANEL PHOTOGRAPHY OVERRIDE
   When a .tc-visual or .hiw-visual has --panel-img set, replace
   the gradient with a real image and a navy/azure tint overlay,
   and hide the logo mark.
   ============================================================ */
.tc-visual[style*="--panel-img"], .hiw-visual[style*="--panel-img"]{
  background-image:
    linear-gradient(150deg, rgba(11,27,58,.62) 0%, rgba(11,27,58,.35) 55%, rgba(37,99,235,.35) 100%),
    var(--panel-img) !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  border:1px solid rgba(96,165,250,.28);
}
.hiw-visual[style*="--panel-img"]{
  background-image:
    linear-gradient(150deg, rgba(37,99,235,.55) 0%, rgba(29,78,216,.45) 55%, rgba(11,27,58,.55) 100%),
    var(--panel-img) !important;
}
.tc-visual[style*="--panel-img"] .tcv-mark,
.hiw-visual[style*="--panel-img"] .hv-mark,
.tc-visual[style*="--panel-img"] .tcv-grid{display:none !important}
.tc-visual[style*="--panel-img"]::after,
.hiw-visual[style*="--panel-img"]::after{opacity:.18}
.tc-visual[style*="--panel-img"]::before,
.hiw-visual[style*="--panel-img"]::before{
  background:
    radial-gradient(circle at 82% 18%, rgba(96,165,250,.35), transparent 55%),
    radial-gradient(circle at 12% 88%, rgba(11,27,58,.45), transparent 60%) !important;
}

/* ============================================================
   FOOTER — 3-column layout (Brand / Company / Agency Services)
   Overrides per-page inline grid.
   ============================================================ */
.site-footer .sf-grid{
  grid-template-columns: 1.5fr 1fr 1.4fr !important;
  gap:48px !important;
}
@media(max-width:820px){
  .site-footer .sf-grid{grid-template-columns:1fr 1fr !important; gap:32px !important}
  .site-footer .sf-brand{grid-column:1/-1}
}
@media(max-width:520px){
  .site-footer .sf-grid{grid-template-columns:1fr !important}
}

/* === Footer: white plate behind brand logo so it pops on navy === */
.site-footer .sf-brand .logo{
  background:#ffffff;
  padding:12px 18px;
  border-radius:14px;
  color:#0a1b3d !important;
  box-shadow:0 8px 28px -10px rgba(0,0,0,.45);
  margin-bottom:20px;
}
.site-footer .sf-brand .logo span{color:#2563eb !important}
.site-footer .sf-brand .logo .logo-mark{filter:none}

/* === Guarantee list (Partner trial bullets) === */
.guar .guar-list{
  list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px;
}
.guar .guar-list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:15px; line-height:1.55; color:#ffffff;
}
.guar .guar-list li b{color:#ffffff}
.guar .guar-list .ck{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:999px;
  background:#3B82F6; color:#fff; font-size:12px; font-weight:700;
  flex-shrink:0; margin-top:2px;
}