/* ==========================================================================
   FORELAD · COMPONENTS — nav, buttons, chips, cards, footer, patterns, mobile
   ========================================================================== */

/* ============================ BUTTONS ==================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-sm); line-height:1;
  padding:15px 30px; border-radius:var(--r-pill); white-space:nowrap;
  border:1.5px solid transparent;
  transition:transform var(--t-fast) var(--ease), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-med) var(--ease), color var(--t-fast);
}
.btn:active{ transform:scale(.97); }
.btn .arr{ transition:transform var(--t-fast) var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn--sm{ padding:12px 24px; font-size:var(--fs-xs); }
.btn--lg{ padding:17px 34px; font-size:var(--fs-body); }
.btn--block{ display:flex; width:100%; }

.btn--primary{ background:var(--aubergine); color:#fff; box-shadow:0 10px 28px rgba(46,26,71,.24); }
.btn--primary:hover{ background:var(--violet-deep); color:#fff; transform:translateY(-2px); }
.btn--violet{ background:var(--violet); color:#fff; box-shadow:0 10px 28px rgba(109,63,191,.28); }
.btn--violet:hover{ background:var(--violet-600); color:#fff; transform:translateY(-2px); }
.btn--ghost{ background:rgba(255,255,255,.85); border-color:var(--border); color:var(--aubergine); }
.btn--ghost:hover{ border-color:var(--violet); color:var(--aubergine); transform:translateY(-2px); }
.btn--teal{ background:var(--teal); color:#fff; }
.btn--teal:hover{ background:var(--teal-deep); color:#fff; transform:translateY(-2px); }
.btn--white{ background:#fff; color:var(--aubergine); }
.btn--white:hover{ background:var(--ink-100); color:var(--aubergine); transform:translateY(-2px); }
.btn--outline-light{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn--outline-light:hover{ border-color:#fff; color:#fff; transform:translateY(-2px); }

/* ============================ CHIP / PILL =============================== */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.85); border:1px solid var(--border); border-radius:var(--r-pill);
  padding:8px 18px; font-size:var(--fs-xs); font-weight:500; color:var(--accent);
  box-shadow:var(--sh-xs);
}
.chip .dot{ position:relative; width:7px; height:7px; border-radius:50%; background:var(--teal); flex-shrink:0; }
.chip .dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; background:rgba(31,138,130,.25); animation:pulse 2.2s ease-out infinite; }
.chip--tint{ background:var(--ink-100); border-color:transparent; }
@keyframes pulse{ from{ transform:scale(.6); opacity:.9; } to{ transform:scale(1.7); opacity:0; } }

.trustline{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--text-faint); }
.trustline b{ color:var(--text-muted); font-weight:600; }

/* ============================ CARD ===================================== */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--sh-xs); }
.card--pad{ padding:clamp(24px,3vw,34px); }
.card--hover{ transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med); }
.card--hover:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); border-color:var(--ink-200); }

/* ============================ SITE NAV ================================= */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:100; padding:16px var(--gutter) 0; transition:padding var(--t-med) var(--ease); }
.site-header.scrolled{ padding-top:10px; }
.nav{
  max-width:var(--container); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%);
  border:1px solid var(--border); border-radius:var(--r-pill);
  padding:11px 12px 11px 24px; box-shadow:var(--sh-sm);
  transition:box-shadow var(--t-med) var(--ease), background var(--t-med);
}
.scrolled .nav{ background:rgba(255,255,255,.82); box-shadow:var(--sh-md); }
.brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--aubergine); letter-spacing:-.02em; }
.brand img{ width:30px; height:30px; }
.brand .dot{ color:var(--violet); }
.nav__links{ display:flex; align-items:center; gap:30px; font-size:var(--fs-sm); font-weight:500; }
.nav__links a{ color:var(--text-muted); }
.nav__links a:hover{ color:var(--accent); }
.nav__links a[aria-current="page"]{ color:var(--aubergine); font-weight:600; }
.nav__cta{ flex-shrink:0; }
.nav__toggle{ display:none; width:44px; height:44px; border-radius:50%; align-items:center; justify-content:center; color:var(--aubergine); }
.nav__toggle svg{ width:22px; height:22px; }

/* page needs top padding so fixed nav doesn't cover content (hero opts out) */
.has-fixed-nav main{ }

@media (max-width:920px){
  .nav__links, .nav > .nav__cta{ display:none; }
  .nav__toggle{ display:inline-flex; }
  .nav{ padding:9px 10px 9px 20px; }
}

/* ---- Full-screen mobile drawer ---- */
.drawer{ position:fixed; inset:0; z-index:130; visibility:hidden; }
.drawer[data-open="true"]{ visibility:visible; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(20,10,32,.5); opacity:0; transition:opacity var(--t-med) var(--ease); }
.drawer[data-open="true"] .drawer__scrim{ opacity:1; }
.drawer__panel{
  position:absolute; inset:0 0 0 auto; width:min(420px,90vw);
  background:rgba(255,255,255,.86); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  padding:92px 32px 32px; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--t-med) var(--ease);
  box-shadow:-20px 0 60px rgba(20,10,32,.18); overflow-y:auto;
}
.drawer[data-open="true"] .drawer__panel{ transform:none; }
.drawer__close{ position:absolute; top:24px; right:24px; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--aubergine); background:rgba(255,255,255,.7); }
.drawer__links{ display:flex; flex-direction:column; }
.drawer__links a{
  font-family:var(--font-display); font-weight:600; font-size:1.5rem; color:var(--aubergine);
  letter-spacing:-.02em; padding:16px 2px; border-bottom:1px solid var(--border);
  opacity:0; transform:translateY(14px);
}
.drawer[data-open="true"] .drawer__links a{ animation:drawIn .5s var(--ease) forwards; }
.drawer[data-open="true"] .drawer__links a:nth-child(1){ animation-delay:.06s; }
.drawer[data-open="true"] .drawer__links a:nth-child(2){ animation-delay:.12s; }
.drawer[data-open="true"] .drawer__links a:nth-child(3){ animation-delay:.18s; }
.drawer[data-open="true"] .drawer__links a:nth-child(4){ animation-delay:.24s; }
.drawer[data-open="true"] .drawer__links a:nth-child(5){ animation-delay:.30s; }
@keyframes drawIn{ to{ opacity:1; transform:none; } }
.drawer__foot{ margin-top:auto; padding-top:28px; }
.drawer__foot .btn{ margin-bottom:18px; }
.drawer__contact{ font-size:var(--fs-xs); color:var(--text-muted); line-height:1.7; }

/* ---- Sticky mobile action bar (thumb-reach conversion) ---- */
.action-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:none; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92) 34%);
  transform:translateY(120%); transition:transform var(--t-med) var(--ease);
}
.action-bar[data-show="true"]{ transform:none; }
.action-bar .btn{ width:100%; box-shadow:var(--sh-md); }
@media (max-width:920px){ .action-bar{ display:block; } }

/* ============================ BRAND PATTERN LAYER ====================== */
/* Reusable decoration. Drop <div class="deco deco--hero"> … </div> as the
   first child of a positioned section. Purely visual, click-through. */
.deco{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
/* ring / spin / sat / beam / grain are unscoped so they work inside any
   decoration wrapper: .deco, .deco-orbits, .deco-ripples, .cta__band, etc. */
.ring{ position:absolute; border-radius:50%; border:2px solid var(--pat-ring); }
.ring.teal{ border-color:var(--pat-ring-teal); }
.ring.dash{ border-style:dashed; }
.spin{ position:absolute; inset:0; animation:spin 46s linear infinite; }
.spin.slow{ animation-duration:74s; animation-direction:reverse; }
.spin.slowest{ animation-duration:88s; animation-direction:reverse; }
.sat{ position:absolute; left:50%; top:-5px; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 6px rgba(31,138,130,.12); }
.sat.v{ background:var(--violet); box-shadow:0 0 0 5px rgba(109,63,191,.12); }
.beam{ position:absolute; top:-25%; height:150%; width:280px; transform:rotate(24deg); background:linear-gradient(90deg,transparent,rgba(109,63,191,.07) 38%,rgba(109,63,191,.11) 50%,rgba(109,63,191,.07) 62%,transparent); }
.grain{ position:absolute; inset:0; opacity:.035; mix-blend-mode:multiply; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spin{ animation:none; } }

/* ============================ FOOTER =================================== */
.footer{ position:relative; overflow:hidden; background:var(--grad-dark); color:#fff; }
.footer__inner{ max-width:var(--container); margin-inline:auto; padding:clamp(56px,7vw,88px) var(--gutter) 36px; position:relative; z-index:1; }
.footer__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:clamp(32px,4vw,56px); padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer .brand{ color:#fff; }
.footer .brand .dot{ color:var(--ink-400); }
.footer__blurb{ margin-top:18px; max-width:260px; font-size:var(--fs-sm); line-height:1.7; color:var(--ink-300); }
.footer__col h4{ font-family:var(--font-mono); font-size:var(--fs-cap); font-weight:500; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-400); margin-bottom:16px; }
.footer__col a{ display:block; color:var(--ink-200); font-size:var(--fs-sm); padding:6px 0; }
.footer__col a:hover{ color:#fff; }
.footer__contact{ font-size:var(--fs-sm); line-height:1.8; color:var(--ink-300); }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; padding-top:26px; font-size:var(--fs-xs); color:var(--ink-400); }
.footer__social{ display:flex; gap:18px; }
.footer__social a{ color:var(--ink-400); }
.footer__social a:hover{ color:#fff; }
@media (max-width:820px){
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brandcol{ grid-column:1 / -1; }
  .footer__contactcol{ grid-column:1 / -1; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:520px){ .footer__top{ grid-template-columns:1fr; } }