/**
 * Da3wetnaa Theme — Main Stylesheet
 * Brand: دعوتنا / Da3wetnaa
 * Tagline: "دعوة تليق بفرحتك"
 *
 * Color System:
 *   Primary Burgundy:   #5B132C (Base), #4A1025 (Deep), #6A1734 (Light)
 *   Dark Burgundy:      #2A0A16 (Footer/Dark sections)
 *   Rose Gold:          #D6A097 (Base), #E5B9AF (Light), #C98D83 (Dark)
 *   Ivory:              #FBF7F4 (Main background)
 *   Warm Champagne:     #F1E1D9 (Alternate section)
 *   Dark Text:          #24171A
 *
 * Typography:
 *   Headings (EN): Cormorant Garamond
 *   Headings (AR): Tajawal / Noto Naskh Arabic
 *   Body (Sans):   Inter
 *
 * @package Da3wetnaaTheme
 * @since   2.0.0
 */

/* ═══════════════════════════════════════════════════════
   1. Custom Properties
═══════════════════════════════════════════════════════ */
:root {
	--burgundy-dark:  #2A0A16;
	--burgundy-deep:  #4A1025;
	--burgundy:       #5B132C;
	--burgundy-light: #6A1734;
	--burgundy-soft:  #7D1F3F;

	--rose-gold-dark: #C98D83;
	--rose-gold:      #D6A097;
	--rose-gold-light:#E5B9AF;
	--rose-gold-pale: #F4E2DE;

	--ivory:          #FBF7F4;
	--champagne:      #F1E1D9;
	--champagne-dark: #E4CFBF;
	--beige-border:   #E2D5CC;

	--text-main:      #24171A;
	--text-sub:       #5A454B;
	--text-muted:     #8C7279;
	--text-light:     #FBF7F4;
	--text-light-sub: rgba(251,247,244,0.72);

	--font-serif:     'Cormorant Garamond', Georgia, serif;
	--font-arabic:    'Tajawal', 'Noto Naskh Arabic', sans-serif;
	--font-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	--container-width:1240px;
	--gutter:         28px;
	--header-height:  82px;

	--radius-sm:      4px;
	--radius:         10px;
	--radius-lg:      18px;

	--shadow-soft:    0 4px 20px rgba(42,10,22,0.06);
	--shadow-medium:  0 8px 32px rgba(42,10,22,0.12);
	--shadow-deep:    0 16px 48px rgba(42,10,22,0.22);
	--glow-rose:      0 0 36px rgba(214,160,151,0.28);

	--transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	--transition:      0.32s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 0.6s  cubic-bezier(0.4, 0, 0.2, 1);

	--z-header:       1000;
	--z-drawer:       900;
	--z-fab:          500;
}

/* ═══════════════════════════════════════════════════════
   2. Reset & Base
═══════════════════════════════════════════════════════ */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	color: var(--text-main);
	background-color: var(--ivory);
	line-height: 1.7;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

body.lang-ar {
	font-family: var(--font-arabic);
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul, ol {
	list-style: none;
}

button {
	cursor: pointer;
	font-family: inherit;
	border: none;
	background: none;
}

/* ═══════════════════════════════════════════════════════
   3. Common Layout & Section Hierarchy
═══════════════════════════════════════════════════════ */
.da3w-container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.da3w-section {
	padding: 120px 0;
	position: relative;
}

/* Section Header */
.da3w-section-header {
	text-align: center;
	margin-bottom: 72px;
}

.da3w-eyebrow-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: var(--rose-gold-dark);
	margin-bottom: 16px;
}
.da3w-eyebrow-tag--light {
	color: var(--rose-gold-light);
}

.da3w-section-title {
	font-family: var(--font-serif);
	font-size: clamp(34px, 4.5vw, 54px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--burgundy-deep);
	margin-bottom: 16px;
}
body.lang-ar .da3w-section-title {
	font-family: var(--font-arabic);
}
.da3w-section-title--light {
	color: var(--text-light);
}

.da3w-section-lead {
	font-size: 17px;
	color: var(--text-sub);
	max-width: 540px;
	margin: 0 auto;
	line-height: 1.75;
}
.da3w-section-lead--light {
	color: var(--text-light-sub);
}

/* Buttons */
.da3w-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 34px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: 2px;
	transition: all var(--transition);
	cursor: pointer;
	border: 1px solid transparent;
	white-space: nowrap;
}

.da3w-btn--primary {
	background: var(--burgundy);
	color: var(--rose-gold-light);
	border-color: var(--burgundy);
}
.da3w-btn--primary:hover {
	background: var(--burgundy-deep);
	border-color: var(--burgundy-deep);
	color: var(--text-light);
	transform: translateY(-2px);
	box-shadow: var(--shadow-medium);
}

.da3w-btn--outline {
	background: transparent;
	color: var(--rose-gold-light);
	border-color: rgba(229,185,175,0.4);
}
.da3w-btn--outline:hover {
	background: rgba(229,185,175,0.1);
	border-color: var(--rose-gold-light);
	color: var(--text-light);
}

.da3w-btn--ghost {
	background: rgba(251,247,244,0.15);
	color: var(--text-light);
	border-color: rgba(251,247,244,0.35);
	backdrop-filter: blur(8px);
}
.da3w-btn--ghost:hover {
	background: rgba(251,247,244,0.25);
	border-color: var(--text-light);
}

/* ═══════════════════════════════════════════════════════
   4. Floating Glass Capsule Header (One Row, Grid Layout)
═══════════════════════════════════════════════════════ */
.site-header,
.da3w-header {
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	width: min(88%, 1180px);
	z-index: 9999;
	pointer-events: none;
}

.header-inner,
.da3w-header-capsule {
	pointer-events: auto;
	height: 72px;
	border-radius: 9999px;
	padding: 0 26px;
	background: rgba(251, 247, 244, 0.72);
	backdrop-filter: blur(22px) saturate(120%);
	-webkit-backdrop-filter: blur(22px) saturate(120%);
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 10px 35px rgba(42, 10, 22, 0.10);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled .header-inner,
.da3w-header.is-scrolled .da3w-header-capsule {
	background: rgba(251, 247, 244, 0.92);
	box-shadow: 0 14px 40px rgba(42, 10, 22, 0.14);
}

/* Explicit Grid Placement */
.header-brand,
.da3w-header-logo {
	grid-column: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.main-navigation,
.da3w-header-nav {
	grid-column: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.header-actions,
.da3w-header-controls {
	grid-column: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
}

/* Logo */
.brand-link,
.da3w-header-logo-link { display: flex; align-items: center; }
.brand-logo-img,
.da3w-header-logo-img {
	max-height: 48px !important;
	width: auto !important;
	max-width: 170px !important;
	object-fit: contain;
	display: block;
}

/* Navigation (One Row Only) */
.nav-menu,
.da3w-header-nav-list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	list-style: none;
}
.nav-link,
.da3w-header-nav-link {
	font-size: 14px;
	font-weight: 500;
	color: #4A1025;
	transition: color 0.18s ease;
	position: relative;
	letter-spacing: 0.2px;
	text-decoration: none;
}
.nav-link::after,
.da3w-header-nav-link::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 1px;
	background: #4A1025;
	transform: scaleX(0);
	transition: transform 0.18s ease;
}
.nav-link:hover,
.da3w-header-nav-link:hover { color: #6A1734; }
.nav-link:hover::after,
.da3w-header-nav-link:hover::after { transform: scaleX(1); }

/* Language Segmented Control [ AR | EN ] */
.lang-segmented-control,
.da3w-lang-control {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 3px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.35);
	border: 1px solid rgba(74, 16, 37, 0.15);
	font-size: 12px;
	font-weight: 600;
	gap: 6px;
}
.lang-btn,
.da3w-lang-btn {
	color: #8C7279;
	background: none;
	border: none;
	padding: 3px 8px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.18s ease;
}
.lang-btn.is-active,
.da3w-lang-btn.is-active {
	color: #FBF7F4;
	background: #4A1025;
	font-weight: 700;
}
.lang-btn:hover,
.da3w-lang-btn:hover { color: #4A1025; }
.lang-divider,
.da3w-lang-sep { color: rgba(74, 16, 37, 0.25); font-size: 11px; }

/* Mobile Menu Trigger */
.mobile-menu-trigger,
.da3w-mobile-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	width: 28px;
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
}
.mobile-menu-trigger span,
.da3w-mobile-toggle span {
	display: block;
	height: 1.5px;
	background: #4A1025;
	transition: all 0.2s ease;
}

/* Mobile Glass Panel */
.mobile-glass-panel,
.da3w-mobile-drawer {
	display: none;
	pointer-events: auto;
	margin-top: 10px;
	border-radius: 24px;
	background: rgba(251, 247, 244, 0.96);
	backdrop-filter: blur(22px);
	border: 1px solid rgba(255, 255, 255, 0.7);
	padding: 24px 28px;
	box-shadow: 0 16px 48px rgba(42, 10, 22, 0.18);
}
.mobile-glass-panel.is-open,
.da3w-mobile-drawer.is-open { display: block; }
.mobile-nav-list,
.da3w-mobile-nav-list { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.mobile-nav-link,
.da3w-mobile-nav-link { font-size: 15px; font-weight: 500; color: #4A1025; display: block; padding: 6px 0; text-decoration: none; }

/* ═══════════════════════════════════════════════════════
   5. Hero Section — Two-Column Editorial Composition
═══════════════════════════════════════════════════════ */
.da3w-hero {
	position: relative;
	min-height: 100vh;
	padding-top: 130px;
	padding-bottom: 80px;
	background-color: #260914;
	display: flex;
	align-items: center;
	overflow: hidden;
	margin: 0;
}

.hero-bg-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.hero-gradient-overlay {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 65% 35%, rgba(91,19,44,0.65) 0%, #260914 75%);
}
.hero-radial-glow {
	position: absolute;
	width: 550px;
	height: 550px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(214,160,151,0.14) 0%, transparent 70%);
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.hero-frame-border {
	position: absolute;
	inset: 32px;
	border: 1px solid rgba(214,160,151,0.14);
	pointer-events: none;
}
.hero-corner { position: absolute; width: 18px; height: 18px; }
.hero-corner::before, .hero-corner::after {
	content: ''; position: absolute; background: #D6A097; opacity: 0.35;
}
.hero-corner::before { width: 18px; height: 1px; top: 0; left: 0; }
.hero-corner::after  { width: 1px; height: 18px; top: 0; left: 0; }
.hero-corner--tl { top: -1px; left: -1px; }
.hero-corner--tr { top: -1px; right: -1px; transform: rotate(90deg); }
.hero-corner--bl { bottom: -1px; left: -1px; transform: rotate(270deg); }
.hero-corner--br { bottom: -1px; right: -1px; transform: rotate(180deg); }

.hero-container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.hero-editorial-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

/* Info Column */
.hero-info-column {
	color: #FBF7F4;
}

.hero-brand-logo {
	margin-bottom: 24px;
}
.hero-logo-img {
	width: 200px;
	height: 200px;
	object-fit: contain;
	filter: drop-shadow(0 12px 36px rgba(214,160,151,0.35));
}

.hero-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 3.5px;
	text-transform: uppercase;
	color: #D6A097;
	margin-bottom: 14px;
}

.hero-headline {
	font-family: var(--font-arabic);
	font-size: clamp(38px, 5vw, 64px);
	font-weight: 700;
	color: #FBF7F4;
	line-height: 1.25;
	margin-bottom: 18px;
}

.hero-description {
	font-size: 17px;
	color: rgba(251,247,244,0.78);
	max-width: 480px;
	margin-bottom: 36px;
	line-height: 1.8;
}

.hero-cta-group {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* Preview Mockup Column */
.hero-preview-column {
	display: flex;
	justify-content: center;
}

.invitation-mockup-card {
	width: 100%;
	max-width: 380px;
	background: #FBF7F4;
	border: 1px solid #E2D5CC;
	border-radius: 18px;
	padding: 36px 28px;
	box-shadow: 0 20px 50px rgba(38,9,20,0.35), 0 0 36px rgba(214,160,151,0.25);
	text-align: center;
	position: relative;
	transform: rotate(-3deg);
	transition: transform 0.35s ease;
}
.invitation-mockup-card:hover {
	transform: rotate(0deg) scale(1.02);
}

.mockup-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #C98D83;
	margin-bottom: 18px;
}

.mockup-typography-card {
	padding: 10px 0;
}
.mockup-monogram {
	font-family: var(--font-serif);
	font-size: 32px;
	font-weight: 600;
	color: #4A1025;
	margin-bottom: 10px;
}
.mockup-sub {
	font-size: 13.5px;
	color: #5A454B;
	margin-bottom: 18px;
}
.mockup-date {
	font-family: var(--font-serif);
	font-size: 20px;
	letter-spacing: 3px;
	color: #C98D83;
	margin-bottom: 22px;
}
.mockup-badge {
	font-size: 11.5px;
	padding: 6px 14px;
	background: #F1E1D9;
	border-radius: 99px;
	color: #5B132C;
	display: inline-block;
}
.mockup-img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	object-fit: cover;
}

.hero-scroll-indicator {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	z-index: 2;
}
.scroll-label {
	font-size: 9.5px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(251,247,244,0.4);
}
.scroll-line {
	width: 1px;
	height: 32px;
	background: linear-gradient(to bottom, #D6A097, transparent);
}
.da3w-hero-border-frame {
	position: absolute;
	inset: 32px;
	border: 1px solid rgba(214,160,151,0.15);
	pointer-events: none;
}
.da3w-hero-corner {
	position: absolute;
	width: 18px;
	height: 18px;
}
.da3w-hero-corner::before,
.da3w-hero-corner::after {
	content: '';
	position: absolute;
	background: var(--rose-gold);
	opacity: 0.3;
}
.da3w-hero-corner::before { width: 18px; height: 1px; top: 0; left: 0; }
.da3w-hero-corner::after  { width: 1px; height: 18px; top: 0; left: 0; }
.da3w-hero-corner--tl { top: -1px; left: -1px; }
.da3w-hero-corner--tr { top: -1px; right: -1px; transform: rotate(90deg); }
.da3w-hero-corner--bl { bottom: -1px; left: -1px; transform: rotate(270deg); }
.da3w-hero-corner--br { bottom: -1px; right: -1px; transform: rotate(180deg); }

.da3w-hero-container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.da3w-hero-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 60px;
	align-items: center;
}

/* Main Text Block */
.da3w-hero-text-block {
	color: var(--text-light);
}

.da3w-hero-brand-mark {
	margin-bottom: 28px;
}
.da3w-hero-logo-img {
	width: 210px;
	height: 210px;
	object-fit: contain;
	filter: drop-shadow(0 12px 36px rgba(214,160,151,0.35));
}

.da3w-hero-title {
	font-family: var(--font-arabic);
	font-size: clamp(38px, 5.5vw, 68px);
	font-weight: 700;
	color: var(--text-light);
	line-height: 1.25;
	margin-bottom: 20px;
}

.da3w-hero-subtitle {
	font-size: 18px;
	color: var(--text-light-sub);
	max-width: 480px;
	margin-bottom: 40px;
	line-height: 1.8;
}

.da3w-hero-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* Interactive Card Mockup Showcase (Right Side) */
.da3w-hero-showcase {
	position: relative;
	display: flex;
	justify-content: center;
}
.da3w-hero-invitation-card {
	width: 100%;
	max-width: 380px;
	background: var(--ivory);
	border: 1px solid var(--beige-border);
	border-radius: var(--radius-lg);
	padding: 40px 32px;
	box-shadow: var(--shadow-deep), var(--glow-rose);
	text-align: center;
	position: relative;
	z-index: 2;
	transform: rotate(-2deg);
	transition: transform var(--transition);
}
.da3w-hero-invitation-card:hover {
	transform: rotate(0deg) scale(1.02);
}
.da3w-hero-card-ribbon {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--rose-gold-dark);
	margin-bottom: 20px;
}
.da3w-hero-card-monogram {
	font-family: var(--font-serif);
	font-size: 32px;
	font-weight: 600;
	color: var(--burgundy-deep);
	margin-bottom: 12px;
}
.da3w-hero-card-event {
	font-size: 14px;
	color: var(--text-sub);
	margin-bottom: 20px;
}
.da3w-hero-card-date {
	font-family: var(--font-serif);
	font-size: 20px;
	letter-spacing: 3px;
	color: var(--rose-gold-dark);
	margin-bottom: 24px;
}
.da3w-hero-card-badge {
	font-size: 12px;
	padding: 6px 14px;
	background: var(--champagne);
	border-radius: 99px;
	color: var(--burgundy);
	display: inline-block;
}

/* Scroll Cue */
.da3w-hero-scroll {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	z-index: 2;
}
.da3w-hero-scroll-label {
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(251,247,244,0.4);
}
.da3w-hero-scroll-bar {
	width: 1px;
	height: 36px;
	background: linear-gradient(to bottom, var(--rose-gold), transparent);
}

/* ═══════════════════════════════════════════════════════
   6. Section: Process (How It Works Timeline)
═══════════════════════════════════════════════════════ */
.da3w-process {
	background-color: var(--ivory);
}

.da3w-process-timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	margin-top: 40px;
}

.da3w-process-step {
	position: relative;
}
.da3w-process-number-wrap {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}
.da3w-process-number {
	font-family: var(--font-serif);
	font-size: 42px;
	font-weight: 700;
	color: var(--rose-gold-dark);
	line-height: 1;
}
.da3w-process-line {
	flex: 1;
	height: 1px;
	background: var(--beige-border);
}
.da3w-process-step-title {
	font-family: var(--font-arabic);
	font-size: 20px;
	font-weight: 600;
	color: var(--burgundy-deep);
	margin-bottom: 10px;
}
.da3w-process-step-desc {
	font-size: 14px;
	color: var(--text-sub);
	line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════
   7. Section: Portfolio / Designs Showcase
═══════════════════════════════════════════════════════ */
.da3w-designs {
	background-color: var(--champagne);
}

.da3w-portfolio-filters {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 48px;
}

.da3w-filter-pill {
	padding: 8px 24px;
	border: 1px solid var(--champagne-dark);
	background: var(--ivory);
	border-radius: 2px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-sub);
	transition: all var(--transition-fast);
	cursor: pointer;
}
.da3w-filter-pill:hover,
.da3w-filter-pill.is-active {
	background: var(--burgundy);
	border-color: var(--burgundy);
	color: var(--rose-gold-light);
}

.da3w-portfolio-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 36px;
}

.da3w-portfolio-card {
	background: var(--ivory);
	border: 1px solid var(--beige-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: all var(--transition);
	box-shadow: var(--shadow-soft);
}
.da3w-portfolio-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-medium);
}
.da3w-portfolio-card.is-hidden { display: none; }

.da3w-portfolio-preview {
	aspect-ratio: 4/3;
	position: relative;
	overflow: hidden;
	background: var(--burgundy-dark);
}
.da3w-portfolio-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}
.da3w-portfolio-card:hover .da3w-portfolio-img {
	transform: scale(1.05);
}

.da3w-portfolio-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: linear-gradient(135deg, var(--burgundy-dark) 0%, var(--burgundy) 100%);
	color: var(--rose-gold-light);
}
.da3w-placeholder-monogram {
	font-family: var(--font-serif);
	font-size: 48px;
	color: var(--rose-gold);
}
.da3w-placeholder-title {
	font-family: var(--font-arabic);
	font-size: 20px;
	color: var(--text-light);
}

.da3w-portfolio-category {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 4px 12px;
	background: rgba(42,10,22,0.85);
	color: var(--rose-gold-light);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	border-radius: 2px;
}

.da3w-portfolio-overlay {
	position: absolute;
	inset: 0;
	background: rgba(42,10,22,0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--transition);
}
.da3w-portfolio-card:hover .da3w-portfolio-overlay {
	opacity: 1;
}
.da3w-portfolio-overlay-inner {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
	padding: 20px;
}

.da3w-portfolio-meta {
	padding: 28px;
}
.da3w-portfolio-name {
	font-family: var(--font-arabic);
	font-size: 22px;
	font-weight: 600;
	color: var(--burgundy-deep);
	margin-bottom: 8px;
}
.da3w-portfolio-desc {
	font-size: 14px;
	color: var(--text-sub);
	line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════
   8. Section: Why Da3wetnaa
═══════════════════════════════════════════════════════ */
.da3w-why-us {
	background-color: var(--burgundy-dark);
}

.da3w-benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.da3w-benefit-card {
	background: rgba(251,247,244,0.04);
	border: 1px solid rgba(214,160,151,0.15);
	border-radius: var(--radius);
	padding: 40px 32px;
	transition: all var(--transition);
}
.da3w-benefit-card:hover {
	background: rgba(251,247,244,0.08);
	border-color: var(--rose-gold);
	transform: translateY(-4px);
}

.da3w-benefit-icon {
	width: 42px;
	height: 42px;
	border: 1px solid rgba(214,160,151,0.3);
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}
.da3w-benefit-icon svg {
	width: 20px;
	height: 20px;
	stroke: var(--rose-gold);
	fill: none;
	stroke-width: 1.5;
}

.da3w-benefit-title {
	font-family: var(--font-arabic);
	font-size: 20px;
	font-weight: 600;
	color: var(--text-light);
	margin-bottom: 12px;
}
.da3w-benefit-desc {
	font-size: 14px;
	color: var(--text-light-sub);
	line-height: 1.75;
}

/* ═══════════════════════════════════════════════════════
   9. Section: Pricing (Luxury Stationery Cards)
═══════════════════════════════════════════════════════ */
.da3w-pricing {
	background-color: var(--ivory);
}

.da3w-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	align-items: stretch;
}

.da3w-pricing-card {
	border-radius: var(--radius-lg);
	padding: 48px 36px;
	position: relative;
	border: 1px solid var(--beige-border);
	display: flex;
	flex-direction: column;
	transition: all var(--transition);
}
.da3w-pricing-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-medium);
}

.da3w-pricing-card--standard {
	background: var(--ivory);
}
.da3w-pricing-card--premium {
	background: var(--burgundy-deep);
	border-color: var(--burgundy-deep);
	color: var(--text-light);
	box-shadow: var(--shadow-medium);
}
.da3w-pricing-card--premium .da3w-pricing-title { color: var(--rose-gold-light); }
.da3w-pricing-card--premium .da3w-pricing-amount { color: var(--text-light); }
.da3w-pricing-card--premium .da3w-pricing-unit { color: var(--rose-gold); }
.da3w-pricing-card--premium .da3w-pricing-divider { background: rgba(214,160,151,0.2); }
.da3w-pricing-card--premium .da3w-pricing-feature-list li { color: var(--text-light-sub); }
.da3w-pricing-card--premium .da3w-feature-bullet { color: var(--rose-gold); }

.da3w-pricing-card--customized {
	background: var(--champagne);
	border: 1px dashed var(--champagne-dark);
}

.da3w-pricing-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 18px;
	background: var(--rose-gold);
	color: var(--burgundy-dark);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: 2px;
	white-space: nowrap;
}

.da3w-pricing-title {
	font-family: var(--font-arabic);
	font-size: 24px;
	font-weight: 600;
	color: var(--burgundy-deep);
	margin-bottom: 16px;
}
.da3w-pricing-cost {
	margin-bottom: 24px;
}
.da3w-pricing-amount {
	font-family: var(--font-serif);
	font-size: 52px;
	font-weight: 700;
	color: var(--burgundy);
	line-height: 1;
}
.da3w-pricing-unit {
	font-size: 16px;
	color: var(--text-muted);
	margin-left: 6px;
}
.da3w-pricing-custom-text {
	font-family: var(--font-serif);
	font-size: 32px;
	font-style: italic;
	color: var(--burgundy);
}

.da3w-pricing-divider {
	height: 1px;
	background: var(--beige-border);
	margin-bottom: 28px;
}

.da3w-pricing-feature-list {
	margin-bottom: 36px;
	flex: 1;
}
.da3w-pricing-feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	color: var(--text-sub);
	padding: 8px 0;
}
.da3w-feature-bullet {
	color: var(--rose-gold-dark);
	font-size: 12px;
	margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════
   10. Section: Testimonials
═══════════════════════════════════════════════════════ */
.da3w-testimonials {
	background-color: var(--champagne);
}

.da3w-testimonial-slider {
	overflow: hidden;
}
.da3w-testimonial-track {
	display: flex;
	transition: transform 0.5s ease;
}
.da3w-testimonial-slide {
	min-width: 100%;
	padding: 0 20px;
}

.da3w-testimonial-card {
	max-width: 720px;
	margin: 0 auto;
	background: var(--ivory);
	border: 1px solid var(--beige-border);
	border-radius: var(--radius-lg);
	padding: 48px;
	text-align: center;
	box-shadow: var(--shadow-soft);
}
.da3w-quote-symbol {
	font-family: var(--font-serif);
	font-size: 80px;
	line-height: 0.4;
	color: var(--rose-gold-light);
	display: block;
	margin-bottom: 24px;
}
.da3w-star-rating {
	margin-bottom: 20px;
}
.da3w-star-icon { color: var(--champagne-dark); font-size: 18px; }
.da3w-star-icon.is-filled { color: var(--rose-gold-dark); }

.da3w-testimonial-quote {
	font-family: var(--font-serif);
	font-size: 22px;
	font-style: italic;
	color: var(--text-main);
	line-height: 1.7;
	margin-bottom: 32px;
}
body.lang-ar .da3w-testimonial-quote { font-family: var(--font-arabic); font-style: normal; }

.da3w-testimonial-author {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}
.da3w-author-initial {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--burgundy);
	color: var(--rose-gold-light);
	font-size: 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.da3w-author-name { display: block; font-weight: 600; font-size: 16px; color: var(--burgundy-deep); }
.da3w-author-location { display: block; font-size: 13px; color: var(--text-muted); }

.da3w-slider-pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 32px;
}
.da3w-pagination-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--champagne-dark);
	transition: all var(--transition-fast);
}
.da3w-pagination-dot.is-active {
	background: var(--burgundy);
	transform: scale(1.4);
}

/* ═══════════════════════════════════════════════════════
   11. Section: FAQ (Minimal Editorial Accordion)
═══════════════════════════════════════════════════════ */
.da3w-faq {
	background-color: var(--ivory);
}

.da3w-faq-list {
	max-width: 800px;
	margin: 0 auto;
}
.da3w-faq-row {
	border-bottom: 1px solid var(--beige-border);
}
.da3w-faq-row:first-child {
	border-top: 1px solid var(--beige-border);
}

.da3w-faq-trigger {
	width: 100%;
	padding: 24px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	text-align: start;
	font-size: 18px;
	font-weight: 500;
	color: var(--text-main);
	transition: color var(--transition-fast);
}
.da3w-faq-trigger:hover,
.da3w-faq-trigger[aria-expanded="true"] {
	color: var(--burgundy);
}

.da3w-faq-plus-icon {
	color: var(--rose-gold-dark);
	font-size: 20px;
	transition: transform var(--transition);
}
.da3w-faq-trigger[aria-expanded="true"] .da3w-faq-plus-icon {
	transform: rotate(45deg);
}

.da3w-faq-content {
	padding-bottom: 24px;
	font-size: 15px;
	color: var(--text-sub);
	line-height: 1.8;
}
.da3w-faq-content[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════
   12. Section: Contact Us
═══════════════════════════════════════════════════════ */
.da3w-contact {
	background-color: var(--burgundy-dark);
}

.da3w-contact-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.da3w-contact-box {
	background: rgba(251,247,244,0.04);
	border: 1px solid rgba(214,160,151,0.15);
	border-radius: var(--radius-lg);
	padding: 44px 32px;
	text-align: center;
	transition: all var(--transition);
}
.da3w-contact-box:hover {
	background: rgba(251,247,244,0.08);
	border-color: var(--rose-gold);
}
.da3w-contact-box-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(214,160,151,0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
}
.da3w-contact-box-icon svg { width: 22px; height: 22px; stroke: var(--rose-gold); fill: none; stroke-width: 1.5; }

.da3w-contact-box-title { font-family: var(--font-arabic); font-size: 20px; color: var(--text-light); margin-bottom: 8px; }
.da3w-contact-box-sub { font-size: 14px; color: var(--text-light-sub); margin-bottom: 24px; }

.da3w-social-pills { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.da3w-social-pill {
	padding: 6px 16px;
	border: 1px solid rgba(214,160,151,0.3);
	border-radius: 99px;
	font-size: 12px;
	color: var(--rose-gold-light);
	transition: all var(--transition-fast);
}
.da3w-social-pill:hover {
	background: var(--rose-gold);
	color: var(--burgundy-dark);
}

/* ═══════════════════════════════════════════════════════
   13. Footer (3-Column Grid)
═══════════════════════════════════════════════════════ */
.da3w-footer {
	background-color: #1A060E;
	color: var(--text-light-sub);
	padding: 80px 0 32px;
	border-top: 1px solid rgba(214,160,151,0.12);
}

.da3w-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 64px;
	padding-bottom: 60px;
	border-bottom: 1px solid rgba(214,160,151,0.1);
}

.da3w-footer-brand-col { }
.da3w-footer-brand-link { display: inline-block; margin-bottom: 20px; }
.da3w-footer-logo-img { height: 60px; width: auto; object-fit: contain; }

.da3w-footer-tagline {
	font-family: var(--font-arabic);
	font-size: 20px;
	font-weight: 600;
	color: var(--rose-gold-light);
	margin-bottom: 12px;
}
.da3w-footer-about {
	font-size: 14px;
	line-height: 1.7;
	max-width: 400px;
}

.da3w-footer-heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--rose-gold);
	margin-bottom: 24px;
}
.da3w-footer-link-list { display: flex; flex-direction: column; gap: 12px; }
.da3w-footer-link-list a {
	font-size: 14px;
	color: var(--text-light-sub);
	transition: color var(--transition-fast);
}
.da3w-footer-link-list a:hover {
	color: var(--rose-gold-light);
}

.da3w-footer-bottom {
	padding-top: 32px;
	text-align: center;
}
.da3w-footer-copyright {
	font-size: 13px;
	color: rgba(251,247,244,0.4);
}

/* Floating WhatsApp FAB */
.da3w-whatsapp-fab {
	position: fixed;
	bottom: 28px;
	right: 28px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: var(--z-fab);
	box-shadow: 0 4px 20px rgba(37,211,102,0.4);
	transition: all var(--transition);
}
.da3w-whatsapp-fab svg { width: 28px; height: 28px; }
.da3w-whatsapp-fab:hover {
	transform: scale(1.1) translateY(-2px);
}

/* Animations */
.reveal-fade {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-fade.revealed {
	opacity: 1;
	transform: none;
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* Responsive Breaks */
@media (max-width: 1200px) {
	.nav-menu { gap: 18px; }
	.nav-link { font-size: 13px; }
	.header-inner { padding: 0 20px; }
}

@media (max-width: 980px) {
	.site-header {
		width: calc(100vw - 28px);
		top: 14px;
	}
	.header-inner {
		height: 62px;
		padding: 0 18px;
		grid-template-columns: auto 1fr;
	}
	.main-navigation { display: none; }
	.mobile-menu-trigger { display: flex; }
	.brand-logo-img { max-height: 40px; }
}

@media (max-width: 1024px) {
	.hero-editorial-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
	.hero-cta-group { justify-content: center; }
	.hero-description { margin-left: auto; margin-right: auto; }
	.hero-preview-column { margin-top: 20px; }
	.da3w-process-timeline { grid-template-columns: repeat(2, 1fr); }
	.da3w-benefits-grid { grid-template-columns: repeat(2, 1fr); }
	.da3w-pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
	.da3w-contact-card-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
	.da3w-footer-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
	.da3w-portfolio-grid { grid-template-columns: 1fr; }
	.da3w-process-timeline { grid-template-columns: 1fr; }
	.da3w-benefits-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.site-header {
		width: calc(100vw - 20px);
		top: 10px;
	}
	.header-inner {
		height: 58px;
		padding: 0 14px;
	}
	.brand-logo-img { max-height: 34px; }
}