:root {
  --white:#fff;
  --bg:#fafaf8;
  --cream:#f5f0ea;
  --pink-light:#fce8e8;
  --green-soft:#e8f2ec;
  --border:#e8e2da;
  --text:#1a1a1a;
  --muted:#888;
  --accent:#c9845e;
  --accent2:#4a8c6e;
  --sale:#e05252;
  --dark:#1a1a1a;
  --shadow: 0 2px 20px rgba(0,0,0,0.07);
  --font-display: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
}
[dir="rtl"] {
  --font-display: 'Noto Serif Arabic', serif;
  --font-body: 'Noto Sans Arabic', sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);overflow-x:hidden;}

/* PROMO BAR */
.promo-bar{background:var(--dark);color:#fff;text-align:center;padding:10px 20px;font-size:13px;letter-spacing:0.03em;position:relative;z-index:200;}
[dir="rtl"] .promo-bar{letter-spacing:0;}
.promo-bar span{color:#f0c080;font-weight:500;}

/* NAV */
nav{background:#faf7f4;border-bottom:1px solid #ede8e1;position:sticky;top:0;z-index:150;box-shadow:none;}
.nav-inner{max-width:1340px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:0 36px;height:72px;}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
.nav-logo-emblem{width:46px;height:46px;border-radius:50%;border:1.5px solid #c9a89a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;flex-shrink:0;background:#fff;}
.nav-logo-emblem-letter{font-family:'Playfair Display',serif;font-size:15px;font-weight:400;font-style:italic;color:#1a1a1a;line-height:1;}
.nav-logo-emblem-line{width:22px;height:1px;background:#c9a89a;margin:1px 0;}
.nav-logo-emblem-sub{font-size:6px;letter-spacing:0.18em;text-transform:uppercase;color:#c9a89a;font-family:'DM Sans',sans-serif;font-weight:500;}
.nav-logo-words{display:flex;flex-direction:column;gap:1px;}
.nav-logo-main{font-family:'Playfair Display',serif;font-size:19px;font-weight:400;color:#1a1a1a;letter-spacing:0.02em;line-height:1.1;display:flex;align-items:baseline;gap:4px;}
.nav-logo-main em{font-style:italic;font-size:21px;}
.nav-logo-sub{font-size:9px;letter-spacing:0.25em;text-transform:uppercase;color:#b8a090;font-family:'DM Sans',sans-serif;font-weight:500;}
.nav-links{display:flex;gap:0;list-style:none;justify-content:center;}
[dir="rtl"] .nav-links{direction:rtl;}
.nav-links>li{position:relative;}
.nav-links>li>a{display:block;padding:10px 18px;text-decoration:none;color:#2a2a2a;font-size:13.5px;font-weight:400;letter-spacing:0.01em;transition:color 0.2s;white-space:nowrap;}
[dir="rtl"] .nav-links>li>a{font-size:14px;}
.nav-links>li>a:hover{color:var(--accent);}
.nav-links>li>a.active{color:#1a1a1a;font-weight:500;}
.dropdown{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);min-width:200px;padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all 0.2s;z-index:200;}
[dir="rtl"] .dropdown{left:auto;right:0;}
.nav-links>li:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{display:block;padding:9px 14px;text-decoration:none;color:var(--text);font-size:13px;border-radius:6px;transition:background 0.15s;}
.dropdown a:hover,.dropdown a.active-drop{background:var(--cream);color:var(--accent);}
.nav-actions{display:flex;gap:14px;align-items:center;}
.lang-btn{font-size:12px;font-weight:500;padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:#fff;cursor:pointer;color:var(--text);transition:all 0.2s;font-family:var(--font-body);letter-spacing:0;}
.lang-btn:hover{border-color:var(--accent);color:var(--accent);}
.nav-icon-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#3a3a3a;transition:color 0.2s;position:relative;text-decoration:none;border:none;background:none;cursor:pointer;}
.nav-icon-btn:hover{color:var(--accent);}
.cart-count{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;}
[dir="rtl"] .cart-count{right:auto;left:-4px;}
/* BREADCRUMB */
.breadcrumb{
  max-width:1300px;margin:0 auto;padding:16px 30px;
  font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
[dir="rtl"] .breadcrumb{direction:rtl;}
.breadcrumb a{color:var(--muted);text-decoration:none;transition:color 0.2s;}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb span{color:var(--text);}
.bc-sep{color:var(--border);}

/* ───── HERO ───── */
.about-hero{
  background:linear-gradient(150deg,#f2ece6 0%,#fce8e8 50%,#e8f2ec 100%);
  padding:100px 30px 80px;
  text-align:center;
  position:relative;overflow:hidden;
}
.about-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 60%,rgba(201,132,94,0.1) 0%,transparent 60%),
             radial-gradient(ellipse at 70% 30%,rgba(74,140,110,0.08) 0%,transparent 55%);
}
.about-hero-inner{position:relative;z-index:1;max-width:700px;margin:0 auto;}
.about-eyebrow{
  font-size:11px;letter-spacing:0.35em;text-transform:uppercase;
  color:var(--accent);font-weight:500;margin-bottom:18px;
  display:block;
}
[dir="rtl"] .about-eyebrow{letter-spacing:0;font-size:13px;}
.about-hero-title{
  font-family:var(--font-display);
  font-size:clamp(42px,6vw,72px);
  line-height:1.1;font-weight:600;color:var(--dark);
  margin-bottom:22px;
}
[dir="rtl"] .about-hero-title{line-height:1.4;font-size:clamp(36px,5vw,60px);}
.about-hero-title em{font-style:italic;color:var(--accent);}
[dir="rtl"] .about-hero-title em{font-style:normal;}
.about-hero-lead{
  font-size:17px;line-height:1.85;color:#555;font-weight:300;
  max-width:560px;margin:0 auto;
}
[dir="rtl"] .about-hero-lead{font-size:16px;line-height:2.1;}

/* Decorative circle behind hero */
.deco-circle{
  position:absolute;
  border-radius:50%;border:1px solid rgba(201,132,94,0.2);
  pointer-events:none;
}
.deco-circle-1{width:500px;height:500px;top:-100px;right:-150px;}
.deco-circle-2{width:320px;height:320px;bottom:-80px;left:-80px;border-color:rgba(74,140,110,0.15);}

/* ───── BRAND STORY ───── */
.about-main{max-width:1300px;margin:0 auto;padding:80px 30px;}

/* INTRO BLOCK */
.brand-intro{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
  align-items:center;margin-bottom:100px;
}
[dir="rtl"] .brand-intro{direction:rtl;}
.brand-intro-visual{
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.brand-circle-art{
  width:360px;height:360px;border-radius:50%;
  background:linear-gradient(135deg,#fce8e8,#f5f0ea,#e8f2ec);
  display:flex;align-items:center;justify-content:center;
  font-size:140px;
  box-shadow:0 20px 60px rgba(201,132,94,0.15);
  position:relative;
}
.brand-circle-art::before{
  content:'';position:absolute;inset:-12px;
  border-radius:50%;border:1.5px solid rgba(201,132,94,0.25);
}
.brand-circle-art::after{
  content:'';position:absolute;inset:-28px;
  border-radius:50%;border:1px dashed rgba(201,132,94,0.15);
}
.brand-intro-text{}
.section-eyebrow{
  font-size:11px;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--accent2);font-weight:500;margin-bottom:14px;display:block;
}
[dir="rtl"] .section-eyebrow{letter-spacing:0;font-size:13px;}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(28px,3.5vw,42px);line-height:1.2;
  font-weight:600;color:var(--dark);margin-bottom:20px;
}
[dir="rtl"] .section-title{line-height:1.5;}
.section-title em{font-style:italic;color:var(--accent);}
[dir="rtl"] .section-title em{font-style:normal;}
.section-body{
  font-size:15px;line-height:1.95;color:#555;font-weight:300;
}
[dir="rtl"] .section-body{font-size:15px;line-height:2.1;}

/* ───── PILLARS GRID ───── */
.pillars-section{
  background:var(--cream);
  margin:0 -30px;padding:80px 30px;
  margin-bottom:0;
}
.pillars-header{text-align:center;margin-bottom:60px;}
.pillars-grid{
  max-width:1300px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.pillar-card{
  background:#fff;border-radius:20px;
  padding:36px 30px;
  border:1px solid var(--border);
  position:relative;overflow:hidden;
  transition:transform 0.3s,box-shadow 0.3s;
}
.pillar-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,0.08);}
.pillar-card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));
}
.pillar-icon{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,var(--cream),#fff);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;margin-bottom:20px;
}
.pillar-label{
  font-size:10px;letter-spacing:0.25em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:8px;display:block;
}
[dir="rtl"] .pillar-label{letter-spacing:0;font-size:12px;}
.pillar-title{
  font-family:var(--font-display);
  font-size:20px;font-weight:600;color:var(--dark);
  margin-bottom:12px;line-height:1.3;
}
[dir="rtl"] .pillar-title{line-height:1.5;}
.pillar-body{font-size:13.5px;line-height:1.85;color:#666;font-weight:300;}
[dir="rtl"] .pillar-body{font-size:14px;line-height:2;}

/* ───── PHILOSOPHY STRIP ───── */
.philosophy-strip{
  background:linear-gradient(120deg,#2d2420,#4a3830);
  padding:80px 30px;text-align:center;position:relative;overflow:hidden;
}
.philosophy-strip::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(201,132,94,0.12) 0%,transparent 65%);
}
.philosophy-inner{position:relative;z-index:1;max-width:800px;margin:0 auto;}
[dir="rtl"] .philosophy-inner{direction:rtl;}
.philosophy-quote{
  font-family:var(--font-display);
  font-size:clamp(24px,4vw,42px);
  font-weight:400;font-style:italic;
  color:#fff;line-height:1.5;margin-bottom:20px;
}
[dir="rtl"] .philosophy-quote{font-style:normal;line-height:1.7;font-size:clamp(20px,3.5vw,36px);}
.philosophy-source{font-size:13px;color:rgba(255,255,255,0.45);letter-spacing:0.1em;}
[dir="rtl"] .philosophy-source{letter-spacing:0;}

/* ───── DESIGN DETAILS ───── */
.design-section{
  max-width:1300px;margin:0 auto;padding:80px 30px;
}
.design-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;
}
[dir="rtl"] .design-grid{direction:rtl;}
.design-items{display:flex;flex-direction:column;gap:32px;}
.design-item{
  display:flex;gap:20px;align-items:flex-start;
  padding-bottom:32px;border-bottom:1px solid var(--border);
}
.design-item:last-child{border-bottom:none;padding-bottom:0;}
[dir="rtl"] .design-item{flex-direction:row-reverse;}
.design-icon{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  background:var(--cream);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.design-text-label{
  font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:4px;display:block;
}
[dir="rtl"] .design-text-label{letter-spacing:0;font-size:12px;}
.design-text-title{
  font-family:var(--font-display);
  font-size:18px;font-weight:600;color:var(--dark);margin-bottom:6px;
}
.design-text-body{font-size:13.5px;line-height:1.85;color:#666;font-weight:300;}
[dir="rtl"] .design-text-body{font-size:14px;line-height:2;}

.design-visual{
  position:sticky;top:100px;
  display:flex;flex-direction:column;gap:16px;
}
.design-visual-main{
  width:100%;aspect-ratio:1;border-radius:24px;
  background:linear-gradient(135deg,#fce8e8 0%,#f5f0ea 50%,#e8f2ec 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:120px;
  box-shadow:0 12px 40px rgba(0,0,0,0.08);
  position:relative;overflow:hidden;
}
.design-visual-main::after{
  content:'아리';position:absolute;
  bottom:20px;right:20px;
  font-size:32px;color:rgba(201,132,94,0.25);
  font-family:var(--font-display);font-weight:600;
  letter-spacing:0.05em;
}
.design-swatch-row{display:flex;gap:10px;}
.design-swatch{
  flex:1;height:50px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:500;letter-spacing:0.05em;
}
.swatch-blush{background:#f5c6c6;color:#8b4a4a;}
.swatch-cream{background:var(--cream);color:var(--muted);border:1px solid var(--border);}
.swatch-dark{background:var(--dark);color:#fff;}

/* ───── VALUES ───── */
.values-section{
  background:var(--green-soft);
  padding:80px 30px;
}
.values-inner{max-width:1300px;margin:0 auto;}
.values-header{margin-bottom:50px;}
[dir="rtl"] .values-header{direction:rtl;}
.values-row{
  display:flex;gap:0;
  border:1px solid var(--border);border-radius:16px;overflow:hidden;
  background:#fff;
}
[dir="rtl"] .values-row{flex-direction:row-reverse;}
.value-item{
  flex:1;padding:32px 28px;
  border-right:1px solid var(--border);
  transition:background 0.2s;
}
[dir="rtl"] .value-item{border-right:none;border-left:1px solid var(--border);}
.value-item:last-child{border-right:none;}
[dir="rtl"] .value-item:last-child{border-left:none;}
.value-item:hover{background:var(--cream);}
.value-num{
  font-family:var(--font-display);
  font-size:36px;font-weight:600;color:rgba(201,132,94,0.2);
  margin-bottom:8px;line-height:1;
}
.value-title{
  font-size:14px;font-weight:600;color:var(--dark);margin-bottom:8px;
}
.value-body{font-size:12.5px;line-height:1.8;color:var(--muted);}
[dir="rtl"] .value-body{font-size:13px;line-height:2;}

/* ───── FOOTER ───── */
footer{background:var(--dark);color:rgba(255,255,255,0.8);padding:60px 30px 0;}
.footer-inner{max-width:1340px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:50px;padding-bottom:50px;}
[dir="rtl"] .footer-inner{direction:rtl;}
.footer-logo-text{font-family:var(--font-display);font-size:26px;color:#fff;letter-spacing:0.05em;}
.footer-tagline{font-size:13px;color:rgba(255,255,255,0.45);margin-top:8px;font-weight:300;line-height:1.7;}
.footer-col-title{font-size:12px;font-weight:600;color:#fff;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:18px;}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{color:rgba(255,255,255,0.55);text-decoration:none;font-size:13px;transition:color 0.2s;}
.footer-col ul li a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-size:12px;color:rgba(255,255,255,0.35);max-width:1340px;margin:0 auto;}
[dir="rtl"] .footer-bottom{direction:rtl;}

/* REVEAL ANIMATIONS */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.65s ease,transform 0.65s ease;}
.reveal.visible{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;}
.reveal-delay-4{transition-delay:0.4s;}

/* WHATSAPP */
.whatsapp-btn{
  position:fixed;bottom:24px;right:24px;
  width:54px;height:54px;border-radius:50%;
  background:#25d366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,0.4);
  z-index:500;transition:transform 0.2s;
}
[dir="rtl"] .whatsapp-btn{right:auto;left:24px;}
.whatsapp-btn:hover{transform:scale(1.08);}

/* RESPONSIVE */
@media(max-width:900px){
  .brand-intro,.design-grid{grid-template-columns:1fr;gap:40px;}
  .brand-circle-art{width:260px;height:260px;font-size:100px;}
  .pillars-grid{grid-template-columns:1fr 1fr;}
  .values-row{flex-direction:column;}
  .value-item{border-right:none;border-bottom:1px solid var(--border);}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .design-visual{position:static;}
}
@media(max-width:600px){
  .pillars-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .about-hero{padding:60px 20px 50px;}
}