/* =========================================================
   Fab Glass Card UI (Reusable)
   - Brushed metal background
   - Dark glass card
   - Red gradient header
   - Tool cards + buttons
   ========================================================= */

:root{
  --fab-accent: #c40000;
  --fab-bg: #0a0d12;
  --fab-bg2:#0f1218;
  --fab-text:#e5e7eb;
  --fab-muted: rgba(229,231,235,0.75);

  --fab-card-radius: 26px;
  --fab-card-border: rgba(255,255,255,0.14);
  --fab-card-shadow: 0 26px 90px rgba(0,0,0,0.65);
}

/* ---------- Page background wrapper ---------- */
.fab-page{
  min-height: 100svh;
  display:grid; 
  place-items:center;
  padding: clamp(16px, 4vw, 40px);
  
  background: url(/background/brushed-aluminum.jpg) no-repeat center center fixed;
  background-size: cover;

  -webkit-font-smoothing: antialiased;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--fab-text);
}

/* ---------- Main card ---------- */
.fab-card{
  width: 90%;   
  margin:auto;
  border-radius: var(--fab-card-radius);
  overflow:hidden;
  border: 1px solid var(--fab-card-border);
  background: linear-gradient(180deg, var(--fab-bg2), var(--fab-bg));
  box-shadow: var(--fab-card-shadow);
  position: relative;
  }

/* subtle brushed lines overlay */
.fab-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.07) 0px,
      rgba(255,255,255,0.07) 1px,
      rgba(0,0,0,0.00) 2px,
      rgba(0,0,0,0.00) 7px
    );
  pointer-events:none;
  opacity:.65;
}

/* ---------- Header/top section ---------- */
.fab-top{
  padding: 28px 28px 22px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.10) 0px,
      rgba(255,255,255,0.10) 1px,
      rgba(0,0,0,0.00) 2px,
      rgba(0,0,0,0.00) 6px
    ),
    linear-gradient(135deg, #240006, var(--fab-accent) 45%, #3a0000);
  background-blend-mode: overlay, normal;
  text-align:center;
  position:relative;
  z-index:1;
}

.fab-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom:14px;
}

.fab-dot{
  width:7px;height:7px;border-radius:999px;
  background: rgba(255,255,255,0.85);
}

.fab-title{
  margin:0 0 10px;
  font-family: "Rajdhani", system-ui, sans-serif;
  font-size: clamp(1.7rem, 2.4vw + 1rem, 2.4rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color:#fff;
}

.fab-sub{
  margin:0;
  font-size:1rem;
  line-height:1.85;
  color: rgba(255,255,255,0.88);
  max-width: 46rem;
  margin-inline:auto;
}

/* ---------- Body/bottom section ---------- */
.fab-bottom{
  padding: 22px 28px 26px;
  background: rgba(255,255,255,0.05);
  border-top: 1px solid rgba(255,255,255,0.10);
  position:relative;
  z-index:1;
}

.fab-toprow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:102px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.fab-hint{
  margin:0;
  color: rgba(255,255,255,0.75);
  font-size:13px;
}

/* ---------- Buttons / pills ---------- */
.fab-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:10px 16px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color:#fff;

  transition: transform .14s ease, filter .14s ease, background-color .14s ease;
}

.fab-pill:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  background: rgba(255,255,255,0.12);
}

/* ---------- Tool grid/cards ---------- */
.fab-grid{
  display:grid;
  gap:12px;
}

.fab-tool{
  display:block;
  text-decoration:none;
  border-radius:18px;
  padding:16px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  transition: transform .14s ease, filter .14s ease, border-color .14s ease, background-color .14s ease;
}

.fab-tool:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  border-color: rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.26);
}

.fab-tool strong{
  display:block;
  font-size:16px;
  letter-spacing:.02em;
  color:#fff;
}

.fab-tool span{
  display:block;
  margin-top:6px;
  color: rgba(255,255,255,0.78);
  font-size:13px;
  line-height:1.6;
}

.fab-tool--primary{
  background: linear-gradient(135deg, rgba(196,0,0,0.90), rgba(90,0,0,0.85));
  border: 1px solid rgba(255,255,255,0.16);
}

.fab-tool--primary:hover{
  filter: brightness(1.05);
}

/* ---------- Footer line ---------- */
.fab-footerline{
  margin:18px 0 0;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--fab-muted);
  text-align:center;
}

.fab-footerline a{
  color:#fff;
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.fab-footerline a:hover{
  border-bottom-color: rgba(255,255,255,0.55);
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .fab-top{ padding: 22px 16px 18px; }
  .fab-bottom{ padding: 20px 16px 22px; }
}