/* === AL-NEXA GULF — Design System === */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --bg-primary: #f8f6f3;
  --bg-secondary: #f0ede8;
  --bg-surface: #ebe7e1;
  --bg-card: #ffffff;
  --bg-card-hover: #fdf6f0;

  --brand: #892C37;
  --brand-dim: rgba(137,44,55,0.08);
  --brand-glow: rgba(137,44,55,0.15);
  --brand-bright: #a33542;

  --accent: #c9a84c;
  --accent-dim: rgba(201,168,76,0.08);
  --accent-glow: rgba(201,168,76,0.15);
  --accent-bright: #d4b35e;

  --text-primary: #1a1a1a;
  --text-secondary: rgba(0,0,0,0.7);
  --text-muted: rgba(0,0,0,0.5);

  --border-subtle: rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.1);
  --border-accent: rgba(201,168,76,0.35);
  --border-brand: rgba(137,44,55,0.25);

  --font-heading: 'Manrope', sans-serif;
  --font-body: 'Manrope', sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 50%;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-height: 5rem;
  --container-max: 1280px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;font-size:16px;overflow-x:hidden}
body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);line-height:1.65;overflow-x:hidden;min-height:100vh}

h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.15;letter-spacing:-0.01em}
h1{font-size:clamp(2.5rem,6vw,5rem);font-weight:800}
h2{font-size:clamp(1.8rem,4vw,3.2rem);font-weight:700}
h3{font-size:clamp(1.2rem,2vw,1.6rem);font-weight:600}

a{color:inherit;text-decoration:none;transition:color .25s}
img{max-width:100%;display:block}
button{font-family:var(--font-body);cursor:pointer;border:none;outline:none}

.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-lg)}
.container-narrow{max-width:900px}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg-surface)}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:var(--radius-full)}
::selection{background:var(--brand);color:#fff}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;font-family:var(--font-heading);font-size:.9rem;font-weight:600;letter-spacing:.02em;border-radius:var(--radius-sm);transition:all .3s var(--ease-out-expo);text-transform:uppercase}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-bright);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.btn-outline:hover{background:var(--accent);color:#fff}
.btn-ghost{background:transparent;color:var(--text-primary);border:1px solid var(--border-default)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}

/* Badge */
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem 1rem;background:var(--brand-dim);border:1px solid var(--border-brand);border-radius:var(--radius-sm);font-family:var(--font-heading);font-size:.75rem;font-weight:600;color:var(--brand);letter-spacing:.1em;text-transform:uppercase}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--brand)}

/* Section Header */
.section-header{text-align:center;margin-bottom:var(--space-xl)}
.section-header .badge{margin-bottom:var(--space-sm)}
.section-header h2{margin-bottom:var(--space-sm)}
.section-header p{color:var(--text-secondary);max-width:540px;margin:0 auto;font-size:1.05rem}

/* Divider */
.gold-line{width:80px;height:3px;background:var(--accent);border-radius:var(--radius-full);transform-origin:left}

/* Keyframes */
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%{transform:scale(1);opacity:1}100%{transform:scale(2);opacity:0}}

@media(max-width:768px){
  :root{--nav-height:4rem;--space-3xl:5rem;--space-2xl:3.5rem;--space-xl:2.5rem}
  .container{padding:0 var(--space-md)}
}