/* ==========================================================================
   Benira Rise — Corrected & Enhanced Stylesheet
   ========================================================================== */

/* -- Brand tokens --------------------------------------------------------- */
:root{
  --navy:#0E1B2C;
  --dark-navy:#13233A;
  --gold:#C9A86A;
  --teal:#0AA0A6;

  --ink:#1A1F2A;
  --silver:#E9EDF3;
  --sky:#F6F8FB;

  --white:#ffffff;
  --black:#000000;

  /* utility shades used in hero gradient */
  --navy-900:#0b1625;
  --navy-800:#13233A;
}

/* -- Base ----------------------------------------------------------------- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Calibri,Arial,sans-serif;
  color:var(--navy);
  background:var(--sky);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
  border-radius:10px;
}
.wrap{ max-width:1200px; margin:0 auto; padding:0 5vw }
img{ max-width:100%; display:block }

/* Inline SVG helpers (keep HTML clean) */
.fill-navy{ fill:var(--navy) }
.fill-gold{ fill:var(--gold) }
.fill-teal{ fill:var(--teal) }

/* -- Header / Navigation -------------------------------------------------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--silver);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 0;
}
.brand{ display:flex; align-items:center; gap:12px }
.emblem{ width:44px; height:44px }
.name{ display:flex; flex-direction:column; line-height:1.05 }
.name b{ letter-spacing:.03em }
.name small{ color:#596a86 }
.links{ display:flex; gap:18px; font-weight:700 }
.links a{ padding:8px 12px; border-radius:12px }
.links a:hover{ background:#eef3f8 }
.cta{ display:flex; gap:10px; align-items:center }

.btn{
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  letter-spacing:.02em;
  border:1px solid transparent;
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  cursor:pointer;
}
.btn.primary{ background:var(--navy); color:#fff }
.btn.secondary{ background:#fff; border-color:var(--navy); color:var(--navy) }
.btn.link{ background:var(--navy); color:#fff }
.btn.ghost{ background:#F5F7FB; color:#1F2B44; border:1px solid #d9e1ec }
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(14,27,44,.12) }
.btn:active{ transform:translateY(0) }

/* -- Hero ----------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(1200px 600px at 15% -10%, var(--teal), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(201,168,106,.8), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
  padding:64px 0 36px;
}
.hero-grid{
  position:relative;
  display:grid; grid-template-columns:1.2fr .8fr; gap:34px; align-items:center;
}
.eyebrow{
  display:inline-block; padding:8px 12px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.hero-title{ margin:10px 0 8px; font-size:clamp(30px,5.4vw,56px); line-height:1.05 }
.hero-title .grad{
  background:linear-gradient(90deg,#f7e5bf, #ffffff 35%, #8ce9ea 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{ margin:0 0 18px; color:#d6e2ff; font-size:clamp(14px,2.3vw,18px) }
.hero-buttons{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 16px }
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.kpi{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px; padding:14px;
}
.kpi b{ font-size:22px; color:#fff }
.kpi span{ display:block; color:#c9d6ff }

.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.92), #ffffff);
  border:1px solid var(--silver); border-radius:18px; padding:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
.lockup .wordmark{
  font-size:50px; font-family:Garamond, "Times New Roman", serif; font-weight:700; fill:var(--navy); letter-spacing:2px;
}
.lockup .descriptor{
  font-size:14px; font-family:Segoe UI, Calibri, Arial, sans-serif; fill:#1A1F2A; letter-spacing:4px;
}
.lockup .rule{ stroke:var(--gold); stroke-width:1 }

/* -- Section scaffolding -------------------------------------------------- */
section{ padding:48px 0 }
.sec{ font-size:13px; letter-spacing:.20em; text-transform:uppercase; color:#5f6f8a; margin:0 0 10px }
.title{ margin:0 0 10px; font-size:clamp(20px,3.6vw,28px) }
.sub{ margin:0 0 18px; color:#42506b }

/* Palette chips */
.chips{ display:flex; gap:10px; flex-wrap:wrap }
.chip{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; background:#fff; border:1px solid var(--silver);
  border-radius:999px;
}
.dot{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.06) }

/* -- Sub-brands panel ----------------------------------------------------- */
.panel{ background:#fff }
.brands{ display:grid; grid-template-columns:repeat(5, minmax(200px,1fr)); gap:14px }

/*  FIXED: overlay is behind content and ignores pointer events  */
.card{
  background:#fff; border:1px solid var(--silver); border-radius:16px; padding:16px;
  display:flex; flex-direction:column; gap:10px;
  position:relative;                                  /* stacking context */
  transition:transform .08s ease, box-shadow .12s ease;
}
.card::before{
  content:"";
  position:absolute; inset:0; border-radius:16px; padding:1px;
  background:linear-gradient(135deg, var(--teal), var(--gold));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.55;

  pointer-events:none;                                 /* critical */
  z-index:0;                                           /* behind */
}
.card > *{ position:relative; z-index:1 }              /* content above overlay */

.card:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(14,27,44,.14) }
.tag{
  font-size:11px; padding:4px 8px; border-radius:999px;
  background:#F0F6F7; color:#0E1B2C; border:1px dashed #bcd2d4;
}
.actions{ display:flex; gap:8px; margin-top:auto }

/* -- Showcase ------------------------------------------------------------- */
.showcase{ background:linear-gradient(180deg,#ffffff, #f7fafc) }
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.tile{
  background:#fff; border:1px solid var(--silver); border-radius:16px; padding:16px; min-height:140px
}
.muted{ color:#5a6a86 }

/* -- Compliance ----------------------------------------------------------- */
.compliance{
  background:var(--navy); color:#E9EEF6;
  border-top:4px solid var(--gold); padding:18px 0;
}
.light{ color:#E9EEF6 }
.comp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.comp{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:12px;
}
.legalnote{ font-size:12px; color:#aebddd; margin-top:10px }

/* -- Contact form --------------------------------------------------------- */
form.card{ max-width:740px }
.f{ display:block; margin-bottom:10px }
.f input,.f textarea,.f select{
  width:100%; padding:12px; margin-top:6px;
  border:1px solid var(--silver); border-radius:10px;
  background:#fff; color:var(--ink);
}
.f input:focus,.f textarea:focus,.f select:focus{
  border-color:var(--teal); box-shadow:0 0 0 3px rgba(10,160,166,.15);
}

/* -- Footer --------------------------------------------------------------- */
footer.site{
  background:#0f1830; color:#cbd6ea; padding:26px 0; border-top:1px solid #1d2a47;
}
.footgrid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px }
.foot-brand{ display:flex; align-items:center; gap:10px; margin-bottom:8px }
.foot-chip{ width:28px; height:28px; background:linear-gradient(135deg,var(--teal),var(--navy)); border-radius:8px }

/* -- Toasts / notices ----------------------------------------------------- */
.toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  background:#0E1B2C; color:#fff; padding:10px 14px; border-radius:10px;
  box-shadow:0 10px 24px rgba(14,27,44,.18); font:13px/1.3 system-ui, sans-serif;
  z-index:9999; opacity:.98;
}
.toast.ok{ background:#0AA0A6 }
.toast.err{ background:#B00020 }

/* -- Responsive ----------------------------------------------------------- */
@media (max-width:1100px){
  .brands{ grid-template-columns:repeat(3,1fr) }
  .tiles{ grid-template-columns:1fr 1fr }
  .hero-grid{ grid-template-columns:1fr }
}
@media (max-width:720px){
  .brands{ grid-template-columns:1fr 1fr }
  .tiles{ grid-template-columns:1fr }
  .links{ display:none }
  .footgrid{ grid-template-columns:1fr }
}