/* ============================================================
 * Autometa AI — shared stylesheet for keyword landing pages
 * Used by /real-estate-crm-dubai, /whatsapp-crm-real-estate-dubai,
 * /real-estate-app-development-dubai, /best-real-estate-tech-provider-dubai
 * Mirrors the homepage design tokens so the pages read as one site.
 * ============================================================ */

:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-alt:#F5F6F7;
  --ink:#0E1116;
  --ink-soft:#3E4855;
  --ink-mute:#5F6977;
  --primary:#0B4A3A;
  --primary-hover:#083327;
  --accent:#D4623E;
  --accent-ink:#B04A22;
  --accent-soft:#FAD9CA;
  --border:#E5E9ED;
  --shadow: 0 1px 2px rgba(14,17,22,0.04), 0 6px 18px rgba(14,17,22,0.05);
  --shadow-lg: 0 2px 4px rgba(14,17,22,0.04), 0 18px 44px rgba(14,17,22,0.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0; scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Fraunces',serif; font-weight:500; letter-spacing:-0.015em; line-height:1.1; margin:0}
h1{font-size:clamp(38px, 5vw, 62px); line-height:1.03}
h2{font-size:clamp(29px, 3.4vw, 42px)}
h3{font-size:clamp(21px, 2vw, 26px); line-height:1.25}
h4{font-size:19px}
p{margin:0}
a{color:var(--primary); text-decoration:none}
a:hover{color:var(--primary-hover)}
em.serif-em{font-style:italic; color:var(--accent)}
strong{font-weight:600; color:var(--ink)}

.container{max-width:1180px; margin:0 auto; padding:0 28px}

/* ===== Nav ===== */
.nav{
  position:sticky; top:0; z-index:50; height:72px;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{height:100%; display:flex; align-items:center; justify-content:space-between}
.wordmark{
  font-family:'Fraunces',serif; font-weight:500; font-size:22px; letter-spacing:-0.02em;
  color:var(--ink); display:inline-flex; align-items:center; gap:8px;
}
.wordmark .dot{width:8px; height:8px; border-radius:50%; background:var(--accent)}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a{
  font-size:15px; color:var(--ink-soft); padding:10px 14px; border-radius:8px; font-weight:500;
  transition:color 150ms, background 150ms;
}
.nav-links a:hover{color:var(--ink); background:var(--surface-alt)}
.nav-cta{
  margin-left:14px; background:var(--primary); color:#fff !important;
  padding:10px 18px !important; border-radius:999px; font-weight:600;
}
.nav-cta:hover{background:var(--primary-hover) !important}
@media (max-width:900px){ .nav-links a:not(.nav-cta){display:none} }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 24px; border-radius:999px;
  font-weight:600; font-size:16px; border:1px solid transparent; cursor:pointer;
  transition:transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary); color:#fff !important; box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--primary-hover); box-shadow:var(--shadow-lg)}
.btn-ghost{background:transparent; color:var(--ink) !important; border-color:var(--border)}
.btn-ghost:hover{background:var(--surface-alt)}
.btn-cream{background:#fff; color:var(--primary) !important}

/* ===== Shared bits ===== */
/* inline-flex sizes to max-content, so the eyebrow must be capped and allowed
   to wrap or long labels push the page into horizontal scroll on phones. */
.eyebrow{
  display:flex; align-items:flex-start; gap:9px; max-width:100%;
  font-size:12.5px; font-weight:600; letter-spacing:0.11em; text-transform:uppercase;
  line-height:1.4; color:var(--accent-ink);
}
.eyebrow .d{
  width:6px; height:6px; margin-top:6px; border-radius:50%;
  background:var(--accent); flex:0 0 auto;
}

.crumbs{font-size:13.5px; color:var(--ink-mute); padding:22px 0 0}
.crumbs a{color:var(--ink-mute)}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 7px; opacity:0.55}

/* ===== Hero ===== */
.lp-hero{padding:44px 0 76px}
.lp-hero .eyebrow{margin-bottom:20px}
.lp-hero h1{max-width:19ch}
.lp-hero .sub{
  margin-top:22px; font-size:20px; line-height:1.55; color:var(--ink-soft); max-width:62ch;
}
.lp-hero .ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:52px;
  border-top:1px solid var(--border); padding-top:28px;
}
@media (max-width:820px){ .hero-facts{grid-template-columns:repeat(2,1fr); gap:22px} }
.hero-facts .f b{
  display:block; font-family:'Fraunces',serif; font-size:30px; font-weight:500;
  color:var(--accent-ink); letter-spacing:-0.02em; line-height:1.1;
}
.hero-facts .f span{display:block; margin-top:6px; font-size:14.5px; color:var(--ink-soft); line-height:1.45}

/* ===== Sections ===== */
.sec{padding:84px 0}
.sec.alt{background:var(--surface-alt)}
@media (max-width:900px){ .sec{padding:56px 0} }
.sec-head{max-width:760px}
.sec-head h2{max-width:22ch}
.sec-head .lead{margin-top:18px; font-size:18.5px; color:var(--ink-soft); line-height:1.6}

/* Long-form prose */
.prose{max-width:78ch; margin-top:34px}
.prose p{margin-bottom:18px; color:var(--ink-soft); line-height:1.72}
.prose h3{margin:34px 0 12px; color:var(--ink)}
.prose ul{margin:0 0 20px; padding-left:22px; color:var(--ink-soft)}
.prose li{margin-bottom:9px; line-height:1.62}
.prose a{text-decoration:underline; text-underline-offset:3px}

/* Card grid */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:42px}
@media (max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .cards{grid-template-columns:1fr} }
.cards.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){ .cards.two{grid-template-columns:1fr} }
.card{
  background:#fff; border:1px solid var(--border); border-radius:18px; padding:26px 24px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px;
  transition:transform 200ms ease, box-shadow 200ms ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.card .tag{font-size:12px; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:var(--accent-ink)}
.card h3{font-size:21px}
.card p{font-size:16px; line-height:1.58; color:var(--ink-soft)}
.card .gain{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--border);
  font-size:14.5px; color:var(--primary); font-weight:600;
}

/* Comparison table */
.tbl-wrap{margin-top:38px; overflow-x:auto; border:1px solid var(--border); border-radius:16px; background:#fff}
table.cmp{width:100%; border-collapse:collapse; min-width:680px; font-size:15.5px}
table.cmp th, table.cmp td{padding:16px 18px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top}
table.cmp thead th{
  background:var(--surface-alt); font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-mute);
}
table.cmp tbody th{font-weight:600; color:var(--ink); white-space:nowrap}
table.cmp td{color:var(--ink-soft); line-height:1.55}
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td{border-bottom:none}

/* Checklist / bullet rows */
.ticks{display:grid; grid-template-columns:1fr 1fr; gap:10px 36px; margin-top:34px}
@media (max-width:820px){ .ticks{grid-template-columns:1fr} }
.tick{display:flex; align-items:flex-start; gap:11px; font-size:16.5px; line-height:1.5; color:var(--ink); padding:8px 0}
.tick .ic{
  flex:0 0 auto; width:20px; height:20px; margin-top:2px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
}

/* Quote / emphasis block */
.pullquote{
  margin-top:34px; background:var(--primary); color:#fff; border-radius:16px; padding:26px 30px;
  font-family:'Fraunces',serif; font-size:21px; line-height:1.42; font-weight:500; max-width:60ch;
}
.pullquote em{color:var(--accent-soft); font-style:italic}

.callout{
  margin-top:28px; background:var(--surface-alt); border-left:3px solid var(--accent);
  border-radius:0 14px 14px 0; padding:20px 24px; max-width:70ch;
}
.callout p{font-size:16px; color:var(--ink-soft); line-height:1.62}
.sec.alt .callout{background:#fff}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.chip{
  font-size:14px; padding:8px 15px; border-radius:999px; font-weight:500;
  background:#fff; border:1px solid var(--border); color:var(--ink-soft);
}
.sec.alt .chip{background:#fff}

/* FAQ */
.faq{margin-top:38px; max-width:88ch}
.faq-q{border-top:1px solid var(--border); padding:24px 0}
.faq-q:last-child{border-bottom:1px solid var(--border)}
.faq-q h3{margin:0 0 11px}
.faq-q p{font-size:16.5px; line-height:1.68; color:var(--ink-soft)}
.faq-q p + p{margin-top:10px}

/* Related links */
.related{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px}
@media (max-width:820px){ .related{grid-template-columns:1fr} }
.related a{
  display:block; background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px 22px;
  transition:transform 180ms ease, box-shadow 180ms ease;
}
.related a:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.related a b{display:block; font-family:'Fraunces',serif; font-size:18px; font-weight:500; color:var(--ink); margin-bottom:5px}
.related a span{font-size:14.5px; color:var(--ink-soft); line-height:1.5}

/* Final CTA */
.lp-final{background:var(--primary); color:#fff; padding:88px 0}
@media (max-width:900px){ .lp-final{padding:60px 0} }
.lp-final h2{color:#fff; max-width:18ch}
.lp-final em{color:var(--accent-soft); font-style:italic}
.lp-final .sub{margin-top:20px; font-size:18.5px; line-height:1.6; color:rgba(255,255,255,0.86); max-width:60ch}
.lp-final .ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.lp-final .fine{margin-top:22px; font-size:14px; color:rgba(255,255,255,0.72)}
.lp-final .fine a{color:rgba(255,255,255,0.9); text-decoration:underline}

/* Footer */
.foot{background:var(--surface-alt); border-top:1px solid var(--border); padding:56px 0 30px}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr; gap:30px} }
.foot-brand p{margin-top:12px; font-size:15px; color:var(--ink-soft); max-width:42ch; line-height:1.6}
.foot h3{
  font-family:'Inter',sans-serif; font-size:13px; line-height:1.4; font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-mute); margin:0 0 14px;
}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:9px; font-size:15px}
.foot a{color:var(--ink-soft)}
.foot a:hover{color:var(--primary)}
.foot-bar{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  font-size:13.5px; color:var(--ink-mute);
}
.foot-bar a{color:var(--ink-mute)}