/* ===========================================================
   TRUSTUM GROUP — luxury real estate & consulting
   Design system: dark charcoal + gold + warm beige
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Poppins:wght@300;400;500;600;700&family=Cairo:wght@400;500;600;700;800&display=swap');

:root{
  --dark: #14140f;
  --dark-2: #1d1b14;
  --dark-3: #262319;
  --gold: #c9a24b;
  --gold-light: #e6cc8c;
  --gold-dim: #8a7134;
  --beige: #f7f2e7;
  --beige-2: #efe6d1;
  --cream: #fbf8f1;
  --text-dark: #23211a;
  --text-muted: #6f6a5c;
  --text-light: #f6f2e6;
  --text-light-muted: #cfc6ac;
  --border-soft: rgba(201,162,75,0.25);
  --shadow: 0 20px 50px rgba(20,20,15,0.12);
  --radius: 2px;
  --maxw: 1200px;
  --font-head-latin: 'Playfair Display', serif;
  --font-body-latin: 'Poppins', sans-serif;
  --font-arabic: 'Cairo', sans-serif;
  --topbar-h: 130px; /* fallback; JS recalculates precisely once banner+header are measured */
}

*,*::before,*::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-body-latin);
  color: var(--text-dark);
  background: var(--cream);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
button{ font-family: inherit; cursor: pointer; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

h1,h2,h3,h4{ font-family: var(--font-head-latin); font-weight:700; letter-spacing:.2px; line-height:1.2; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; letter-spacing:3px; text-transform:uppercase;
  color: var(--gold-dim); font-weight:600; margin-bottom:14px;
}
.eyebrow::before{ content:""; width:28px; height:1px; background: var(--gold); display:inline-block; }

/* ---------- Arabic language mode ---------- */
html[lang="ar"] body, body.lang-ar{
  font-family: var(--font-arabic);
}
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar h4{
  font-family: var(--font-arabic);
  font-weight: 800;
}
body.lang-ar{ direction: rtl; }
body.lang-ar .eyebrow::before{ order:2; }
body.lang-ar .btn svg.arrow{ transform: scaleX(-1); }

/* ---------- language visibility ---------- */
[data-lang]{ display:none; }
body.lang-en [data-lang="en"],
body.lang-ar [data-lang="ar"],
body.lang-ru [data-lang="ru"]{ display: revert; }
body.lang-en span[data-lang="en"],
body.lang-ar span[data-lang="ar"],
body.lang-ru span[data-lang="ru"]{ display:inline; }
body.lang-en li[data-lang="en"],
body.lang-ar li[data-lang="ar"],
body.lang-ru li[data-lang="ru"]{ display:list-item; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 30px; font-size:.92rem; font-weight:600;
  letter-spacing:.5px; border-radius: var(--radius);
  border:1px solid transparent; transition: all .25s ease;
  white-space: nowrap;
}
.btn-gold{ background: var(--gold); color: var(--dark); }
.btn-gold:hover{ background: var(--gold-light); transform: translateY(-2px); }
.btn-outline{ border-color: rgba(255,255,255,0.35); color: var(--text-light); }
.btn-outline:hover{ background: rgba(255,255,255,0.08); border-color: var(--gold); }
.btn-dark-outline{ border-color: rgba(20,20,15,0.3); color: var(--text-dark); }
.btn-dark-outline:hover{ background: var(--dark); color: var(--text-light); border-color: var(--dark); }
.btn svg{ width:16px; height:16px; }

/* ============ HEADER ============ */
.site-header{
  position: fixed; top: var(--banner-h, 0px); left:0; right:0; z-index: 500;
  background: rgba(20,20,15,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,162,75,0.15);
  transition: background .3s ease, top .2s ease;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 28px; max-width: var(--maxw); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:38px; height:38px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text .name{ font-family: var(--font-head-latin); font-size:1.18rem; color: var(--text-light); letter-spacing:1px; font-weight:700; }
body.lang-ar .brand-text .name{ font-family: var(--font-arabic); }
.brand-text .sub{ font-size:.62rem; letter-spacing:3px; color: var(--gold); text-transform:uppercase; }

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav a{
  color: var(--text-light-muted); font-size:.9rem; font-weight:500;
  position:relative; padding: 6px 0; transition: color .2s;
}
.main-nav a:hover, .main-nav a.active{ color: var(--gold-light); }
.main-nav a.active::after{
  content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; background: var(--gold);
}

.header-actions{ display:flex; align-items:center; gap:18px; }
.lang-switch{ display:flex; gap:2px; background: rgba(255,255,255,0.06); border-radius: var(--radius); padding:3px; }
.lang-switch button{
  background:transparent; border:none; color: var(--text-light-muted);
  padding:6px 10px; font-size:.75rem; letter-spacing:1px; font-weight:600; border-radius:2px;
}
.lang-switch button.active{ background: var(--gold); color: var(--dark); }

.nav-toggle{ display:none; background:none; border:none; color: var(--text-light); font-size:1.4rem; }

@media (max-width: 960px){
  .main-nav{
    position:fixed; top: var(--topbar-h); left:0; right:0; bottom:0; background: var(--dark);
    flex-direction:column; align-items:flex-start; padding: 30px 30px;
    gap: 22px; transform: translateX(100%); transition: transform .3s ease;
    overflow-y:auto;
  }
  body.lang-ar .main-nav{ transform: translateX(-100%); }
  .main-nav.open{ transform: translateX(0); }
  .main-nav a{ font-size:1.1rem; }
  .nav-toggle{ display:block; flex: none; }
  .header-actions{ gap:10px; }
  .header-actions .btn-gold{ display:none; }
  .brand-text .sub{ display:none; }
}

@media (max-width: 520px){
  .lang-switch button{ padding:6px 7px; font-size:.68rem; }
  .brand img{ width:32px; height:32px; }
  .brand-text .name{ font-size:1rem; }
  .header-inner{ padding: 14px 16px; }
}

/* ============ HERO ============ */
.hero{
  position: relative; min-height: 92vh; display:flex; align-items:center;
  background: radial-gradient(ellipse at 30% 20%, #24221a 0%, var(--dark) 60%);
  overflow:hidden; padding-top: var(--topbar-h);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image: url('../assets/pattern.svg');
  background-size: 220px; opacity:.10; mix-blend-mode: screen;
}
.hero::after{
  content:""; position:absolute; right:-10%; top:10%; width:60%; height:80%;
  background: radial-gradient(circle, rgba(201,162,75,0.18), transparent 60%);
}
.hero-inner{ position:relative; z-index:2; max-width: var(--maxw); margin:0 auto; padding: 60px 28px; }
.hero-content{ max-width: 720px; }
.hero h1{
  font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--text-light);
  margin-bottom: 22px;
}
.hero h1 em{ font-style:normal; color: var(--gold); }
.hero p.lead{ color: var(--text-light-muted); font-size:1.12rem; max-width:560px; margin-bottom: 34px; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-stats{
  display:flex; gap:0; margin-top: 60px; border-top:1px solid rgba(255,255,255,0.12); padding-top:28px;
  flex-wrap:wrap;
}
.hero-stats .stat{ flex:1; min-width:140px; padding-right:30px; }
.hero-stats .stat .num{ font-family: var(--font-head-latin); font-size:2rem; color: var(--gold-light); font-weight:700; }
.hero-stats .stat .label{ font-size:.8rem; color: var(--text-light-muted); letter-spacing:.5px; margin-top:4px; }

/* ============ PAGE HEADER (inner pages) ============ */
.page-hero{
  position:relative; padding: 90px 0; background: var(--dark); overflow:hidden;
  padding-top: calc(var(--topbar-h) + 60px);
}
.page-hero::before{
  content:""; position:absolute; inset:0; background-image:url('../assets/pattern.svg');
  background-size:180px; opacity:.08;
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{ color: var(--text-light); font-size: clamp(1.9rem, 4vw, 2.8rem); }
.breadcrumb{ color: var(--text-light-muted); font-size:.85rem; margin-top:14px; }
.breadcrumb .gold{ color: var(--gold); }

/* ============ SECTIONS ============ */
section{ padding: 100px 0; }
.section-tight{ padding: 70px 0; }
.section-dark{ background: var(--dark); color: var(--text-light); }
.section-beige{ background: var(--beige); }
.section-header{ max-width: 640px; margin-bottom: 56px; }
.section-header.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-header h2{ font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.section-dark .section-header p{ color: var(--text-light-muted); }
.section-header p{ color: var(--text-muted); margin-top: 14px; font-size:1.02rem; }

/* ============ GRID / CARDS ============ */
.grid{ display:grid; gap: 30px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .grid-3, .grid-4, .grid-2{ grid-template-columns: 1fr; } }

.card{
  background: var(--cream); border: 1px solid rgba(20,20,15,0.08);
  border-radius: var(--radius); overflow:hidden; transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }

/* service card */
.service-card{ padding: 40px 32px; background:#fff; border:1px solid rgba(20,20,15,0.07); position:relative; }
.service-card .icon{
  width:58px; height:58px; border-radius:50%; background: var(--beige-2);
  display:flex; align-items:center; justify-content:center; margin-bottom:24px;
  color: var(--gold-dim);
}
.service-card .icon svg{ width:26px; height:26px; stroke: var(--gold-dim); }
.service-card h3{ font-size:1.2rem; margin-bottom:12px; }
.service-card p{ color: var(--text-muted); font-size:.95rem; }
.service-card .num{
  position:absolute; top:24px; right:28px; font-family: var(--font-head-latin);
  font-size:1.6rem; color: var(--beige-2); font-weight:700;
}
body.lang-ar .service-card .num{ right:auto; left:28px; }

/* property card */
.property-card{ background:#fff; }
.property-media{
  position:relative; height: 230px;
  background: linear-gradient(135deg, var(--dark-3), var(--dark));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.property-media svg{ width:64px; height:64px; opacity:.35; stroke: var(--gold-light); }
.property-media .tag{
  position:absolute; top:16px; left:16px; background: var(--gold); color: var(--dark);
  font-size:.72rem; font-weight:700; letter-spacing:1px; padding:6px 12px; border-radius:2px;
  text-transform:uppercase;
}
body.lang-ar .property-media .tag{ left:auto; right:16px; }
.property-media .price{
  position:absolute; bottom:16px; left:16px; color:#fff; font-family: var(--font-head-latin);
  font-size:1.25rem; font-weight:700;
}
body.lang-ar .property-media .price{ left:auto; right:16px; }
.property-body{ padding: 26px 26px 28px; }
.property-body h3{ font-size:1.15rem; margin-bottom:8px; }
.property-body .loc{ display:flex; align-items:center; gap:6px; color: var(--gold-dim); font-size:.85rem; margin-bottom:16px; }
.property-body .loc svg{ width:14px; height:14px; }
.property-specs{ display:flex; gap:18px; padding-top:16px; border-top:1px solid rgba(20,20,15,0.08); font-size:.85rem; color: var(--text-muted); }
.property-specs span{ display:flex; align-items:center; gap:6px; }
.property-specs svg{ width:15px; height:15px; stroke: var(--gold-dim); }

.filter-bar{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 40px; }
.filter-bar button{
  background:#fff; border:1px solid rgba(20,20,15,0.15); padding:10px 22px;
  border-radius:20px; font-size:.85rem; font-weight:500; transition: all .2s;
}
.filter-bar button.active, .filter-bar button:hover{ background: var(--dark); color: var(--text-light); border-color: var(--dark); }

/* about / split sections */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center; }
@media (max-width: 860px){ .split{ grid-template-columns: 1fr; gap:36px; } }
.media-block{
  position:relative; height: 420px; border-radius: var(--radius);
  background: linear-gradient(150deg, var(--dark-3), var(--dark) 70%);
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--border-soft);
}
.media-block::before{
  content:""; position:absolute; inset:14px; border:1px solid var(--border-soft);
}
.media-block svg{ width:120px; height:120px; opacity:.5; }
.media-caption{
  position:absolute; bottom:22px; left:22px; right:22px; color: var(--text-light-muted);
  font-size:.78rem; letter-spacing:1px; text-transform:uppercase;
}

.values-list{ margin-top: 30px; display:grid; gap:20px; }
.value-item{ display:flex; gap:16px; align-items:flex-start; }
.value-item .dot{
  width:38px; height:38px; min-width:38px; border-radius:50%; background: var(--gold);
  color: var(--dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-family: var(--font-head-latin);
}
.value-item h4{ font-size:1.02rem; margin-bottom:4px; }
.value-item p{ color: var(--text-muted); font-size:.92rem; }

/* stats strip */
.stats-strip{ background: var(--beige-2); padding: 50px 0; }
.stats-strip .grid{ text-align:center; }
.stats-strip .num{ font-family: var(--font-head-latin); font-size:2.4rem; color: var(--gold-dim); font-weight:800; }
.stats-strip .label{ font-size:.85rem; color: var(--text-muted); margin-top:6px; letter-spacing:.4px; }

/* testimonial / cta */
.cta-band{
  background: var(--dark); color: var(--text-light); text-align:center; position:relative; overflow:hidden;
  padding: 90px 0;
}
.cta-band::before{ content:""; position:absolute; inset:0; background-image:url('../assets/pattern.svg'); background-size:200px; opacity:.08; }
.cta-band .container{ position:relative; z-index:2; }
.cta-band h2{ font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom:20px; }
.cta-band p{ color: var(--text-light-muted); max-width:600px; margin: 0 auto 34px; }
.cta-actions{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* contact */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap: 60px; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info-card{ background: var(--dark); color: var(--text-light); padding: 44px 36px; border-radius: var(--radius); }
.contact-info-card h3{ color: var(--gold-light); font-size:1.3rem; margin-bottom: 26px; }
.contact-row{ display:flex; gap:16px; align-items:flex-start; margin-bottom: 26px; }
.contact-row .icon{ width:40px; height:40px; min-width:40px; border-radius:50%; background: rgba(201,162,75,0.15); display:flex; align-items:center; justify-content:center; }
.contact-row .icon svg{ width:18px; height:18px; stroke: var(--gold-light); }
.contact-row .label{ font-size:.78rem; letter-spacing:1px; text-transform:uppercase; color: var(--text-light-muted); margin-bottom:4px; }
.contact-row .value{ font-size:1rem; }
.social-row{ display:flex; gap:12px; margin-top:30px; }
.social-row a{ width:38px; height:38px; border:1px solid rgba(255,255,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition: all .2s; }
.social-row a:hover{ background: var(--gold); border-color: var(--gold); color: var(--dark); }
.social-row svg{ width:16px; height:16px; }

.form-card{ background:#fff; padding: 44px 40px; border-radius: var(--radius); border:1px solid rgba(20,20,15,0.08); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:22px; }
.field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:8px; color: var(--text-dark); }
.field input, .field select, .field textarea{
  width:100%; padding: 13px 16px; border:1px solid rgba(20,20,15,0.18);
  border-radius: var(--radius); font-family: inherit; font-size:.95rem; background: var(--cream);
}
.field textarea{ min-height: 130px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--gold); }

.map-note{ margin-top: 40px; padding: 24px; border:1px dashed rgba(20,20,15,0.2); border-radius: var(--radius); color: var(--text-muted); font-size:.9rem; text-align:center; }

/* team / demo notice */
.demo-banner{
  background: var(--gold-light); color: var(--dark); text-align:center; font-size:.85rem; padding: 10px 16px;
  position: fixed; top:0; left:0; right:0; z-index: 600;
}
.demo-banner .container{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.demo-banner strong{ font-weight:700; }

/* footer */
.site-footer{ background: var(--dark-2); color: var(--text-light-muted); padding: 70px 0 26px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 50px; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h4{ color: var(--text-light); font-size:.95rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:20px; font-family: var(--font-body-latin); }
.footer-grid ul li{ margin-bottom:12px; font-size:.92rem; }
.footer-grid ul a:hover{ color: var(--gold-light); }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.footer-brand .name{ font-family: var(--font-head-latin); color: var(--text-light); font-size:1.1rem; font-weight:700; }
.footer-about p{ font-size:.9rem; max-width:320px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.08); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; }

/* utility */
.mt-0{ margin-top:0; } .center-text{ text-align:center; }
.tag-pill{ display:inline-block; background: var(--beige-2); color: var(--gold-dim); font-size:.78rem; font-weight:600; padding:6px 16px; border-radius:20px; letter-spacing:.5px; }

/* reveal animation — content is visible by default (no-JS / slow-JS safe);
   JS adds .reveal-armed only when it can guarantee the .in class will follow */
.reveal.reveal-armed{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.reveal-armed.in{ opacity:1; transform:none; }