/* ============================================================
   Landing Page Styles — آوای دریا
   Theme: Navy + Gold (Coastal Trust)
   Design system: single source of truth lives in this file.
   ============================================================

   DESIGN SYSTEM RULES
   --------------------
   1. Brand axis is Navy (`--primary`) + Gold (`--gold`).
      All CTAs default to Gold. Never use raw `bg-blue-500`
      or `bg-amber-500` inline — they're auto-aliased here, but
      prefer the brand-aware components below.
   2. Backgrounds must be the warm off-white (`--bg`).
      Do NOT use flat pure-gray sections; use `--surface-alt`.
   3. NO vivid off-palette colors (pink-500, purple-500,
      violet-50, rose-50, emerald-500 etc.) for decorative UI.
      External brand icons (Instagram, WhatsApp, Telegram) keep
      their identity colors — that's the only exception.
   4. Status semantics:
      --color-success / --color-danger / --color-info
      are the only sanctioned non-brand hues.
   5. Dark mode is intentionally deferred — single mode only.

   Map of changes
   --------------
   - `:root` exposes the full 50–900 brand & gold ramps AND
     semantic role tokens (`--color-success`, etc.).
   - `@theme` blocks feed Tailwind v4 Browser CDN, so any
     `bg-amber-500` / `bg-slate-900` in HTML auto-resolves to
     the brand palette WITHOUT touching module files.
   ============================================================ */

:root {
    /* === Brand core === */
    --primary: #252B78;
    --primary-dark: #171B55;
    --primary-light: #343B91;

    /* === Accent core === */
    --gold: #D9A64F;
    --gold-light: #F2C875;
    --gold-dark: #B9822F;

    /* === Surface / ink === */
    --bg: #F8F7F3;
    --bg-alt: #F0EDE8;
    --surface: #FFFFFF;
    --surface-alt: #FBF9F4;
    --text: #171717;
    --text-strong: #1F1F1F;
    --text-muted: #6B6B6B;
    --text-placeholder: #9CA3AF;
    --text-on-dark-muted: rgba(219, 234, 254, 0.7);
    --border: #E5E3DC;
    --border-soft: rgba(15, 23, 42, 0.06);

    /* === Brand ramp (derived from --primary) === */
    --brand-50:  #EEF0FA;
    --brand-100: #D9DCF1;
    --brand-200: #B6BBE3;
    --brand-300: #8E97D2;
    --brand-400: #5F6BC0;
    --brand-500: #252B78; /* == --primary */
    --brand-600: #1F2566;
    --brand-700: #171B55; /* == --primary-dark */
    --brand-800: #11174A;
    --brand-900: #0B123F;

    /* === Gold ramp (derived from --gold) === */
    --gold-50:  #FBF3DC;
    --gold-100: #F6E5B8;
    --gold-200: #F2C875; /* == --gold-light */
    --gold-300: #E6B65D;
    --gold-400: #D9A64F; /* == --gold */
    --gold-500: #C89040;
    --gold-600: #B9822F; /* == --gold-dark */
    --gold-700: #94631F;
    --gold-800: #6F4916;
    --gold-900: #4A310F;

    /* === Neutral ramp (warm-tinted, not cold pure-gray) === */
    --neutral-50:  #FBFAF6;
    --neutral-100: #F5F3EB;
    --neutral-200: #E5E3DC;
    --neutral-300: #C9C6BB;
    --neutral-400: #9A968A;
    --neutral-500: #6B6B6B;
    --neutral-600: #4A4A45;
    --neutral-700: #2D2D2A;
    --neutral-800: #1F1F1F;
    --neutral-900: #14140E;

    /* === Semantic roles === */
    --color-success: #1B8A44;
    --color-success-bg: rgba(27, 138, 68, 0.10);
    --color-success-border: rgba(27, 138, 68, 0.18);
    --color-danger: #B43A3A;
    --color-danger-bg: rgba(180, 58, 58, 0.10);
    --color-danger-border: rgba(180, 58, 58, 0.20);
    --color-info: var(--primary-light);
    --color-info-bg: rgba(37, 43, 120, 0.06);
    --color-info-border: rgba(37, 43, 120, 0.15);

    /* === Brand-tinted backdrop helpers === */
    --brand-soft: rgba(37, 43, 120, 0.06);
    --brand-ring: rgba(37, 43, 120, 0.20);
    --gold-soft: rgba(217, 166, 79, 0.12);
    --gold-ring: rgba(185, 130, 47, 0.30);

    /* === Legacy aliases (kept for back-compat with rules below) === */
    --color-primary: #252B78;
    --color-primary-dark: #171B55;
    --color-primary-light: rgba(37, 43, 120, 0.06);
    --color-accent: #D9A64F;
    --color-accent-light: rgba(217, 166, 79, 0.1);
    --color-accent-hover: #B9822F;
    --color-text: #171717;
    --color-text-secondary: #6B6B6B;
    --color-bg: #F8F7F3;
    --color-dark: #171B55;
    --color-surface: #FFFFFF;
    --color-border: #E5E3DC;
}

/* ============================================================
   Tailwind v4 @theme bridge
   These tokens are picked up by `cdn.jsdelivr.net/npm/@tailwindcss/browser@4`
   loaded from `views/layouts/landing.php`. Aliasing the Tailwind defaults
   to our brand palette means EXISTING `bg-amber-500`/`bg-slate-900` Tailwind
   usages across `modules/landing/*.php` snap to the brand palette at zero
   HTML cost, while still leaving the same class names working.
   ============================================================ */
@theme {
    /* Brand family — overrides default amber scale so any gold-ish CTAs,
       badges, accents are aligned with --gold (D9A64F) instead of the
       generic Tailwind amber-400/500/600. */
    --color-amber-50:  var(--gold-50);
    --color-amber-100: var(--gold-100);
    --color-amber-200: var(--gold-200);
    --color-amber-300: var(--gold-300);
    --color-amber-400: var(--gold-light);
    --color-amber-500: var(--gold);
    --color-amber-600: var(--gold-dark);
    --color-amber-700: var(--gold-700);
    --color-amber-800: var(--gold-800);
    --color-amber-900: var(--gold-900);

    /* Slate 900 (used for hero/footer dark sections) → navy primary-dark
       so dark sections read as part of the brand, not a foreign slate. */
    --color-slate-900: var(--primary-dark);
    --color-slate-800: var(--brand-800);

    /* Indigo blue (used for service cards, header text) → brand-700. */
    --color-indigo-50:  var(--brand-50);
    --color-indigo-100: var(--brand-100);
    --color-indigo-200: var(--brand-200);
    --color-indigo-300: var(--brand-300);
    --color-indigo-400: var(--brand-400);
    --color-indigo-500: var(--brand-500);
    --color-indigo-600: var(--brand-600);
    --color-indigo-700: var(--brand-700);
    --color-indigo-800: var(--primary-dark);
    --color-indigo-900: var(--brand-900);

    /* Custom semantic tokens usable as `bg-success`, `bg-info`, etc. */
    --color-success:  var(--color-success);
    --color-info:     var(--primary-light);
    --color-danger:   var(--color-danger);
    --color-brand:    var(--primary);
    --color-brand-dark:  var(--primary-dark);
    --color-brand-light: var(--primary-light);
    --color-brand-soft:  var(--brand-soft);
    --color-gold:     var(--gold);
    --color-gold-light: var(--gold-light);
    --color-gold-dark:  var(--gold-dark);
}

/* === Navbar === */
.nav-link {
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-dark);
    border-radius: 9999px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.nav-link:hover {
    background-color: rgba(37, 43, 120, 0.06);
    color: var(--primary);
}
.nav-link.active {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--primary-dark);
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(217, 166, 79, 0.35);
}
.nav-link.active::after { display: none; }

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--neutral-700);
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}
.mobile-nav-link:hover {
    background: rgba(37, 43, 120, 0.04);
    color: var(--primary-dark);
}
.mobile-nav-link.active {
    background: rgba(217, 166, 79, 0.1);
    color: var(--gold-dark);
    font-weight: 600;
}

/* === Hero Section === */
.hero-section {
    position: relative;
    overflow: hidden;
    min-height: 60vh;
    background: var(--primary-dark);
}
.hero-section .hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right center;
    filter: brightness(0.45) contrast(1.1) saturate(1.1);
}
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(23,27,85,0.5) 0%, rgba(23,27,85,0.25) 40%, rgba(23,27,85,0.85) 100%),
        linear-gradient(135deg, rgba(217,166,79,0.12) 0%, transparent 50%);
    z-index: 1;
}
.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    z-index: 1;
    pointer-events: none;
}

/* Hero Search Box */
.hero-search {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 1rem;
    padding: 0.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.hero-search-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.hero-search-select {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: white;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    padding-left: 2rem;
}
.hero-search-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 43, 120, 0.08);
}
.hero-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(37, 43, 120, 0.3);
}
.hero-search-btn:hover {
    box-shadow: 0 4px 16px rgba(37, 43, 120, 0.4);
    transform: translateY(-1px);
}
@media (max-width: 640px) {
    .hero-search-form {
        flex-direction: column;
    }
    .hero-search-select,
    .hero-search-btn {
        width: 100%;
    }
}

/* === Section Spacing === */
.landing-section {
    padding: 3.5rem 0;
    background: var(--surface);
}
@media (min-width: 768px) {
    .landing-section { padding: 5rem 0; }
}
.landing-section.bg-gray-50 {
    background: var(--surface-alt);
}

/* === Section Header — Airbnb Style === */
.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(37, 43, 120, 0.08);
}
@media (min-width: 768px) {
    .section-header { margin-bottom: 2rem; }
}
.section-header-text h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-strong);
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-shadow: none;
}
@media (min-width: 768px) {
    .section-header-text h2 { font-size: 1.75rem; }
}
.section-header-text p {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
    line-height: 1.6;
    font-weight: 400;
}
.section-header-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
    border-bottom: 2px solid transparent;
}
.section-header-link:hover {
    background: rgba(37, 43, 120, 0.05);
    border-bottom-color: var(--primary);
}
.section-header-link i {
    transition: transform 0.2s;
}
.section-header-link:hover i {
    transform: translateX(-3px);
}

/* === Location Cards === */
.location-card {
    position: relative;
    display: block;
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 1 / 1.1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.location-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(37, 43, 120, 0.12);
}
.location-card-bg {
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/location-bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.location-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
    z-index: 1;
}
.location-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    z-index: 2;
    color: white;
}
.location-card-name {
    font-size: 1.375rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    line-height: 1.2;
}
.location-card-count {
    font-size: 0.8rem;
    opacity: 0.9;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* === Property Cards — Airbnb Inspired === */
.property-card {
    display: block;
    background: var(--surface);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.property-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}
.property-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--neutral-100);
}
.property-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.property-card:hover .property-card-image img {
    transform: scale(1.04);
}
.property-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-50), var(--surface-alt));
}
.property-card-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-dark);
}
.property-card-body {
    padding: 0.875rem 1rem 1rem;
}
.property-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    margin-bottom: 0.375rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.property-card-location {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.property-card-location i {
    font-size: 0.75rem;
}
.property-card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.625rem;
}
.property-card-specs span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.property-card-specs i {
    font-size: 0.75rem;
}
.property-card-price {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--primary);
    border-top: 1px solid var(--border-soft);
    padding-top: 0.625rem;
}

/* === Category Cards === */
.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--surface);
    border-radius: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    text-decoration: none;
}
.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(37, 43, 120, 0.1);
    border-color: rgba(37, 43, 120, 0.15);
}
.category-card-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(37, 43, 120, 0.08), rgba(37, 43, 120, 0.03));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 0.875rem;
    transition: all 0.3s;
}
.category-card:hover .category-card-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    transform: scale(1.08);
}
.category-card-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
}
.category-card-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* === Why Cards === */
.why-card {
    background: var(--surface);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(37, 43, 120, 0.08);
}
.why-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(37, 43, 120, 0.1), rgba(37, 43, 120, 0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.125rem;
    margin-bottom: 1rem;
}
.why-card h3 {
    font-size: 0.9375rem;
}
.why-card p {
    font-size: 0.8125rem;
    line-height: 1.7;
}

/* === Service Cards === */
.service-card {
    background: var(--surface);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
@media (min-width: 768px) {
    .service-card { padding: 2rem; }
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(37, 43, 120, 0.08);
}

/* === Stats === */
.stat-item { text-align: center; }
.stat-number {
    font-size: 2.25rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.35rem;
    font-weight: 500;
}
@media (min-width: 768px) {
    .stat-number { font-size: 2.75rem; }
}

/* === Contact Cards === */
.contact-card {
    background: var(--surface);
    border-radius: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    transition: all 0.25s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.contact-card:hover {
    box-shadow: 0 8px 24px rgba(37, 43, 120, 0.08);
    transform: translateY(-2px);
}
.contact-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(217,166,79,0.12), rgba(217,166,79,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-dark);
    flex-shrink: 0;
}

/* === Team Cards === */
.team-card {
    background: var(--surface);
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.team-card:hover {
    box-shadow: 0 16px 48px rgba(37, 43, 120, 0.1);
    transform: translateY(-4px);
}
.team-card-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

/* === FAQ Accordion === */
.faq-item {
    background: var(--surface);
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.faq-item.open {
    border-color: rgba(37, 43, 120, 0.15);
    box-shadow: 0 4px 16px rgba(37, 43, 120, 0.06);
}
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary-dark);
    cursor: pointer;
    transition: background-color 0.15s;
    background: none;
    border: none;
    font-family: inherit;
}
.faq-question:hover {
    background-color: rgba(37, 43, 120, 0.03);
}
.faq-answer {
    padding: 0 1.25rem 1.125rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.8;
}
.faq-item.open .faq-icon {
    transform: rotate(180deg);
}

/* === Contact Form === */
.landing-input {
    width: 100%;
    padding: 0.875rem 1.125rem;
    border-radius: 0.75rem;
    border: 1.5px solid var(--border);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.875rem;
    font-family: inherit;
    transition: all 0.25s ease;
    outline: none;
    color: var(--text);
}
.landing-input::placeholder { color: var(--text-placeholder); }
.landing-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 43, 120, 0.1);
    background: rgba(255, 255, 255, 0.9);
}

.landing-textarea {
    width: 100%;
    padding: 0.875rem 1.125rem;
    border-radius: 0.75rem;
    border: 1.5px solid var(--border);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.875rem;
    font-family: inherit;
    resize: none;
    transition: all 0.25s ease;
    outline: none;
    color: var(--text);
}
.landing-textarea::placeholder { color: var(--text-placeholder); }
.landing-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 43, 120, 0.1);
    background: rgba(255, 255, 255, 0.9);
}

/* === CTA Banner === */
.cta-banner {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-dark) 100%);
}
.cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(217,166,79,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(52,59,145,0.2) 0%, transparent 50%);
}
.cta-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* === Specialty Pills === */
.specialty-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: rgba(37, 43, 120, 0.06);
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid rgba(37, 43, 120, 0.1);
    transition: all 0.2s ease;
}
.specialty-pill:hover {
    background: rgba(37, 43, 120, 0.1);
    border-color: rgba(37, 43, 120, 0.2);
}

/* ============================================================
   Brand-aware component utilities
   Replace ad-hoc Tailwind color classes with these when you need
   a real component. They pull from --primary/--gold so changing
   the brand variable re-skins the whole site.
   ============================================================ */

/* === .btn-gold — solid gold CTA button ===
   Use for: primary calls-to-action (consult, sign-up, send, save).
   Replaces: `bg-amber-500 hover:bg-amber-600 text-white shadow-md` chains. */
.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--primary-dark);
    border: 1px solid transparent;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 2px 10px var(--gold-ring);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    text-decoration: none;
}
.btn-gold:hover {
    filter: brightness(0.95);
    box-shadow: 0 4px 18px var(--gold-ring);
    transform: translateY(-1px);
}
.btn-gold:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-ring), 0 2px 10px var(--gold-ring);
}

/* === .badge-brand — navy-tinted chip for specialty/category labels ===
   Replaces: `bg-indigo-50 text-indigo-800` or `bg-primary-light text-primary-dark`. */
.badge-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    background: var(--brand-soft);
    color: var(--primary);
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1px solid var(--color-info-border);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.badge-brand:hover {
    background: var(--color-info);
    border-color: var(--brand-ring);
}

/* === .surface-card — generic card surface (white + warm shadow) ===
   Replaces: ad-hoc `bg-white border border-gray-100 shadow-sm` blocks. */
.surface-card {
    background: var(--surface);
    border-radius: 1rem;
    border: 1px solid var(--border-soft);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.surface-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(37, 43, 120, 0.10);
}

/* === Status helpers (semantic colors only) === */
.status-success  { color: var(--color-success); }
.status-danger   { color: var(--color-danger); }
.status-info     { color: var(--primary-light); }
.bg-status-success { background: var(--color-success-bg); border: 1px solid var(--color-success-border); }
.bg-status-danger  { background: var(--color-danger-bg);  border: 1px solid var(--color-danger-border); }
.bg-status-info    { background: var(--color-info-bg);    border: 1px solid var(--color-info-border); }

/* === Scroll Animations === */
.anim {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.anim.animate-in {
    opacity: 1;
    transform: translateY(0);
}
.anim.d1 { transition-delay: 0.1s; }
.anim.d2 { transition-delay: 0.2s; }
.anim.d3 { transition-delay: 0.3s; }
.anim.d4 { transition-delay: 0.4s; }

/* === Responsive === */
@media (max-width: 640px) {
    .hero-section { min-height: 80vh; }
    .location-card { aspect-ratio: 1 / 0.9; }
}

/* === Print === */
@media print {
    .no-print, nav, footer, [aria-label="ارسال پیام در واتساپ"],
    #backToTop { display: none !important; }
    body { font-size: 11pt; direction: rtl; }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    .anim { transition: none; opacity: 1; transform: none; }
    .service-card, .contact-card, .team-card, .faq-item,
    .property-card, .location-card, .category-card, .why-card { transition: none; }
}