/* ============================================================
   OUMLAYLA PREMIUM CRAFT LAYER
   Evolve only — never downgrade · Stripe/Linear/Vercel density
   Brand locked: night · champagne · rose · RTL Maghrebi luxury
   ============================================================ */

:root{
  /* —— Design tokens (standardized) —— */
  --radius-xs:8px;
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-xl:28px;
  --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:0 4px 14px rgba(0,0,0,.28);
  --shadow-md:0 12px 32px rgba(0,0,0,.38);
  --shadow-lg:0 24px 64px rgba(0,0,0,.48);
  --shadow-glow:0 0 0 1px rgba(201,168,108,.12),0 0 48px rgba(201,168,108,.1);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur-fast:160ms;
  --dur:280ms;
  --dur-slow:480ms;

  /* type scale */
  --text-xs:.75rem;
  --text-sm:.875rem;
  --text-base:1.0625rem;
  --text-md:1.125rem;
  --text-lg:clamp(1.25rem,2.2vw,1.4rem);
  --text-xl:clamp(1.45rem,3vw,1.85rem);
  --text-2xl:clamp(1.7rem,4.2vw,2.55rem);
  --text-3xl:clamp(1.9rem,5vw,2.95rem);

  --lh-tight:1.25;
  --lh-snug:1.4;
  --lh-body:1.75;
  --lh-loose:1.9;

  --track-tight:-.01em;
  --track-wide:.04em;
  --track-display:.01em;
}

/* —— Base polish —— */
body{
  font-size:var(--text-base);
  line-height:var(--lh-body);
  letter-spacing:.01em;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}
::selection{
  background:rgba(201,168,108,.28);
  color:var(--ivory);
}

/* —— Typography hierarchy —— */
h1,.hero h1,.page-hero h1{
  letter-spacing:var(--track-display);
  line-height:var(--lh-tight) !important;
  font-weight:900;
  text-wrap:balance;
}
h2,.section-head h2{
  letter-spacing:var(--track-tight);
  line-height:var(--lh-snug);
  font-weight:800;
  text-wrap:balance;
}
h3,.card-body h3,.step h3,.plan h3,.secrecy-item h3{
  letter-spacing:var(--track-tight);
  line-height:var(--lh-snug);
  font-weight:800;
}
.lead,.page-hero .lead,[data-ai-summary],.ai-summary{
  line-height:var(--lh-loose) !important;
  font-size:var(--text-md) !important;
  letter-spacing:.015em;
  color:var(--sand);
}
.prose{
  font-size:var(--text-base);
  line-height:var(--lh-loose);
}
.prose p{margin-bottom:1.15em}
.prose h2{
  margin-top:2.5rem !important;
  margin-bottom:.85rem !important;
  font-size:var(--text-lg) !important;
}
.eyebrow{
  letter-spacing:var(--track-wide) !important;
  text-transform:none;
  font-size:var(--text-sm) !important;
  opacity:.95;
}
.section-ornament{
  letter-spacing:.18em !important;
  font-size:.7rem !important;
  opacity:.9;
}

/* —— Nav: glass depth + hairline —— */
.nav-inner{
  border-radius:var(--radius-pill) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 12px 40px rgba(0,0,0,.42),
    var(--shadow-glow) !important;
  backdrop-filter:blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.2) !important;
  transition:
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
.nav.is-scrolled .nav-inner{
  transform:translateY(0);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 16px 48px rgba(0,0,0,.55),
    0 0 0 1px rgba(201,168,108,.2),
    0 0 40px rgba(201,168,108,.08) !important;
}
.nav-links a{
  transition:
    color var(--dur-fast) var(--ease-soft),
    background var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft);
}
.nav-links a:hover{transform:translateY(-1px)}
.nav-links a:active{transform:translateY(0) scale(.98)}
.brand img{
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.topbar{
  backdrop-filter:blur(8px);
  border-bottom-color:rgba(201,168,108,.1) !important;
}

/* —— Buttons: handcrafted —— */
.btn{
  border-radius:var(--radius-pill) !important;
  letter-spacing:.02em;
  font-weight:800;
  box-shadow:var(--shadow-xs);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    filter var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast) !important;
}
.btn:hover{
  transform:translateY(-2px) !important;
}
.btn:active{
  transform:translateY(0) scale(.98) !important;
  transition-duration:80ms !important;
}
.btn-gold{
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 10px 28px rgba(201,168,108,.28),
    0 2px 0 rgba(0,0,0,.15) !important;
}
.btn-gold:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 14px 36px rgba(201,168,108,.38),
    0 0 0 1px rgba(232,213,163,.25) !important;
  filter:brightness(1.04);
}
.btn-wa{
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 8px 24px rgba(22,163,74,.32) !important;
}
.btn-ghost{
  backdrop-filter:blur(8px);
  box-shadow:none !important;
}
.btn-ghost:hover{
  box-shadow:0 0 0 1px rgba(201,168,108,.35),0 8px 24px rgba(0,0,0,.2) !important;
}
.btn:focus-visible{
  outline:2px solid var(--champagne);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(201,168,108,.2) !important;
}

/* —— Cards —— */
.card{
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-sm);
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-soft),
    box-shadow var(--dur) var(--ease-out) !important;
}
.card:hover{
  transform:translateY(-6px) !important;
  box-shadow:var(--shadow-lg),var(--shadow-glow) !important;
}
.card img{
  transition:transform var(--dur-slow) var(--ease-out) !important;
}
.card:hover img{transform:scale(1.05) !important}
.card-body{
  gap:.5rem !important;
  padding:1.25rem 1.3rem 1.4rem !important;
}
.card-body h3{font-size:1.1rem !important}
.card-body p{
  font-size:var(--text-sm) !important;
  line-height:1.65 !important;
  color:var(--mist) !important;
}
.card-body .more{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-top:.55rem !important;
  transition:gap var(--dur-fast) var(--ease-out),color var(--dur-fast);
}
.card:hover .more{gap:.55rem;color:var(--champagne-bright)}
.card .seal-num{
  box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 0 2px rgba(7,11,22,.5) !important;
  font-size:.72rem !important;
  letter-spacing:.04em;
}

/* —— Hero visual —— */
.hero-visual-frame{
  border-radius:var(--radius-xl) !important;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(201,168,108,.28),
    0 0 80px rgba(201,168,108,.12) !important;
}
.hero-badge{
  border-radius:var(--radius-md) !important;
  backdrop-filter:blur(14px) saturate(1.15) !important;
  box-shadow:var(--shadow-md),0 0 0 1px rgba(201,168,108,.25) !important;
  padding:.85rem 1.05rem !important;
}
.hero h1 em{
  filter:drop-shadow(0 0 24px rgba(201,168,108,.25));
}
.pill{
  border-radius:var(--radius-pill) !important;
  backdrop-filter:blur(10px) !important;
  transition:border-color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast);
}
.pill:hover{
  border-color:rgba(201,168,108,.4);
  transform:translateY(-1px);
}
.metric{
  border-radius:var(--radius-md) !important;
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur) !important;
}
.metric:hover{
  transform:translateY(-3px) !important;
  box-shadow:var(--shadow-sm),var(--shadow-glow) !important;
}
.metric strong{
  font-size:1.05rem !important;
  letter-spacing:.02em;
}

/* —— Sections —— */
.section-head{margin-bottom:clamp(1.75rem,3.5vw,2.5rem) !important}
.gold-rule{
  height:1px !important;
  opacity:1 !important;
  width:min(180px,42%) !important;
  margin:1.15rem auto !important;
  background:linear-gradient(90deg,transparent,rgba(201,168,108,.15),#C9A86C,#E8D5A3,#C9A86C,rgba(201,168,108,.15),transparent) !important;
}
.story{
  border-radius:var(--radius-xl) !important;
  box-shadow:var(--shadow-md),var(--shadow-glow) !important;
  backdrop-filter:blur(8px);
}
.story img{
  border-radius:var(--radius-lg) !important;
  transition:transform var(--dur-slow) var(--ease-out);
}
.story:hover img{transform:scale(1.015)}
.step{
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur) !important;
}
.step:hover{
  transform:translateY(-4px) !important;
  box-shadow:var(--shadow-md) !important;
}
.step .n{
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  background:linear-gradient(135deg,#e8d5a3,#C9A86C);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.plan{
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur) !important;
}
.plan:hover{
  transform:translateY(-4px) !important;
  box-shadow:var(--shadow-md) !important;
}
.plan.vip{
  box-shadow:var(--shadow-md),0 0 0 1px rgba(201,168,108,.28),0 0 40px rgba(201,168,108,.08) !important;
}
.secrecy-item{
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) !important;
}
.secrecy-item:hover{
  transform:translateY(-4px) !important;
  box-shadow:var(--shadow-md) !important;
}
.secrecy-item .ico{
  border-radius:var(--radius-sm) !important;
  transition:transform var(--dur) var(--ease-out),background var(--dur);
}
.secrecy-item:hover .ico{
  transform:scale(1.06);
  background:rgba(201,168,108,.18);
}

/* —— FAQ —— */
.faq details{
  border-radius:var(--radius-md) !important;
  transition:border-color var(--dur),box-shadow var(--dur),background var(--dur) !important;
}
.faq details[open]{
  box-shadow:var(--shadow-sm),0 0 0 1px rgba(201,168,108,.15);
  background:linear-gradient(180deg,rgba(26,34,56,.95),rgba(15,22,40,.98));
}
.faq summary{
  transition:color var(--dur-fast);
  line-height:1.45 !important;
  gap:1rem !important;
  min-height:28px;
}
.faq summary::after{
  width:28px;height:28px;flex-shrink:0;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(201,168,108,.1);
  border:1px solid rgba(201,168,108,.25);
  font-size:1.1rem;
  transition:transform var(--dur) var(--ease-out),background var(--dur);
}
.faq details[open] summary::after{
  transform:rotate(0deg);
  background:rgba(201,168,108,.18);
}

/* —— Chips / tags —— */
.chip{
  border-radius:var(--radius-pill) !important;
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast),
    background var(--dur-fast),
    color var(--dur-fast) !important;
  box-shadow:var(--shadow-xs);
}
.chip:hover{
  transform:translateY(-2px) !important;
  box-shadow:var(--shadow-sm) !important;
}
.tag-pill,.article-meta .tag-pill{
  letter-spacing:.03em;
  font-size:.72rem !important;
}

/* —— CTA band —— */
.cta-band{
  border-radius:var(--radius-xl) !important;
  box-shadow:var(--shadow-lg),var(--shadow-glow) !important;
  isolation:isolate;
}
.cta-band h2{text-wrap:balance}

/* —— Marquee —— */
.marquee{
  border-block-color:rgba(201,168,108,.1) !important;
}
.marquee-track{
  font-size:var(--text-sm) !important;
  letter-spacing:.06em;
  opacity:.92;
}

/* —— Forms (contact etc.) —— */
input,textarea,select{
  font-family:var(--font-b);
  font-size:var(--text-base);
  border-radius:var(--radius-md);
  border:1px solid rgba(201,168,108,.22);
  background:rgba(15,22,40,.85);
  color:var(--moon);
  padding:14px 16px;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);
  width:100%;
  box-sizing:border-box;
}
input:hover,textarea:hover,select:hover{
  border-color:rgba(201,168,108,.4);
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--champagne);
  box-shadow:0 0 0 3px rgba(201,168,108,.18);
  background:rgba(15,22,40,.95);
}
input::placeholder,textarea::placeholder{color:var(--mist);opacity:.75}

/* —— Page hero —— */
.page-hero{
  border-bottom-color:rgba(201,168,108,.1) !important;
}
.page-hero h1{font-size:var(--text-2xl) !important}
.breadcrumb{
  font-size:var(--text-sm) !important;
  letter-spacing:.01em;
  opacity:.9;
}
.breadcrumb a{transition:color var(--dur-fast)}

/* —— Blog article —— */
.banner-img{
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-md) !important;
  border-color:rgba(201,168,108,.18) !important;
}
.ai-summary,.lead-box{
  border-radius:0 var(--radius-md) var(--radius-md) 0 !important;
  line-height:var(--lh-loose) !important;
  box-shadow:inset 0 0 0 1px rgba(201,168,108,.06);
}
[dir=rtl] .ai-summary{
  border-radius:var(--radius-md) 0 0 var(--radius-md) !important;
}
.blog-toc{
  border-radius:var(--radius-md) !important;
  box-shadow:var(--shadow-xs);
  backdrop-filter:blur(8px);
}
.blog-toc a{
  transition:color var(--dur-fast),padding-inline-start var(--dur-fast);
}
.blog-toc a:hover{
  color:var(--champagne) !important;
  padding-inline-start:4px;
}
aside .plan.vip{
  backdrop-filter:blur(12px);
}

/* —— Dock —— */
.dock{
  backdrop-filter:blur(20px) saturate(1.15) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.15) !important;
  box-shadow:0 -8px 32px rgba(0,0,0,.4),0 -1px 0 rgba(201,168,108,.15) !important;
}
.dock a{
  border-radius:var(--radius-md) !important;
  transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast) !important;
  box-shadow:var(--shadow-xs);
}
.dock a:hover{filter:brightness(1.06)}
.dock a:active{transform:scale(.97) !important}
.dock .d-go{
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 6px 18px rgba(201,168,108,.3) !important;
}

/* —— Drawer —— */
.drawer{
  background:rgba(7,11,22,.98) !important;
}
.drawer-nav a{
  border-radius:var(--radius-md) !important;
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast),
    background var(--dur-fast),
    color var(--dur-fast) !important;
}
.drawer-nav a:hover,
.drawer-nav a:active{
  transform:translateX(-3px);
}
[dir=rtl] .drawer-nav a:hover,
[dir=rtl] .drawer-nav a:active{
  transform:translateX(3px);
}
.drawer-close{
  transition:background var(--dur-fast),transform var(--dur-fast);
}
.drawer-close:hover{
  background:rgba(201,168,108,.15) !important;
  transform:rotate(90deg);
}

/* —— Footer —— */
footer a{
  transition:color var(--dur-fast),opacity var(--dur-fast);
}
footer h4{
  letter-spacing:.06em;
  font-size:.8rem !important;
  text-transform:none;
  opacity:.95;
}
.foot-brand img{
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur);
}
.foot-brand:hover img{
  transform:scale(1.04);
  box-shadow:0 0 28px rgba(201,168,108,.25);
}

/* —— Scroll reveal (progressive enhancement) —— */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay:var(--delay, 0ms);
}
.reveal.is-in{
  opacity:1;
  transform:none;
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card:hover,.step:hover,.plan:hover,.metric:hover,.secrecy-item:hover,
  .btn:hover,.chip:hover{transform:none !important}
  .card:hover img,.story:hover img{transform:none !important}
  .drawer-close:hover{transform:none}
  .nav-inner,.btn,.card{transition-duration:80ms !important}
}

/* —— Touch targets —— */
@media(pointer:coarse){
  .nav-links a,.chip,.dock a,.drawer-nav a{
    min-height:44px;
  }
  .btn{min-height:48px}
}

/* —— Ultra-wide —— */
@media(min-width:1440px){
  :root{--max:1180px}
}
@media(min-width:1800px){
  :root{--max:1240px}
}

/* —— Print —— */
@media print{
  .dock,.topbar,.nav,.marquee,.read-progress,.backdrop,.drawer{display:none !important}
  body{padding:0 !important;background:#fff;color:#111}
}