/* ===========================================================
   media-backup.com – Site Styles (complete)
   - Doubled logo
   - Contained feature icons (privacy/expert/fast)
   - Explore cards are clickable and images fit
   - Contact section styling
   =========================================================== */

/* Reset */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img,picture,video{ max-width:100%; display:block; height:auto; }
button,input,select,textarea{ font:inherit; }
a{ color:inherit; text-decoration:none; }

/* Theme */
:root{
  --mb-bg:#0B1220;
  --mb-elev:#0F1627;
  --mb-text:#E5E7EB;
  --mb-muted:#9CA3AF;
  --mb-border:rgba(255,255,255,.08);
  --mb-card:#0E1626;
  --mb-ghost:rgba(255,255,255,.06);
  --mb-accent:#5B8CFF;
  --mb-shadow:0 20px 60px rgba(0,0,0,.45);
  --mb-radius:16px;
  --mb-radius-lg:20px;

  --mb-maxw:1120px;
  --mb-pad:20px;

  --mb-title:clamp(28px,4vw,44px);
  --mb-h2:clamp(22px,3vw,30px);
  --mb-h3:clamp(16px,2.2vw,18px);
  --mb-lead:clamp(14px,2vw,18px);
  --mb-text-size:16px;
  --mb-btn:14px;

  --focus:0 0 0 3px rgba(110,231,249,.35);
}

/* Base */
html,body{
  background:var(--mb-bg);
  color:var(--mb-text);
  font-size:var(--mb-text-size);
  line-height:1.6;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
}
.mb-body{ min-height:100vh; display:flex; flex-direction:column; }

/* Layout container */
.mb-container{ width:min(100% - calc(2*var(--mb-pad)), var(--mb-maxw)); margin-inline:auto; }
.mb-section{ padding:64px 0; background:var(--mb-bg); }
.mb-section--alt{ background:var(--mb-elev); }
.mb-section__title{ font-size:var(--mb-h2); font-weight:800; margin:0 0 10px; letter-spacing:.2px; }
.mb-section__lead{ font-size:var(--mb-lead); color:var(--mb-muted); margin:0 0 26px; }

/* Header */
.mb-header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(130%) blur(6px);
  background:color-mix(in srgb, var(--mb-bg), transparent 35%);
  border-bottom:1px solid var(--mb-border);
}
.mb-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; }
.mb-logo{ display:flex; align-items:center; gap:10px; }
/* Doubled logo size (responsive) */
.mb-logo img{ height:clamp(44px, 6.4vw, 76px); width:auto; }
.mb-logo__text{ font-weight:700; letter-spacing:.2px; }

.mb-nav{ display:flex; gap:18px; align-items:center; }
.mb-nav__link{ padding:8px 10px; border-radius:10px; color:var(--mb-muted); transition:background .15s ease, color .15s ease; }
.mb-nav__link:hover,.mb-nav__link:focus-visible{ background:var(--mb-ghost); color:var(--mb-text); outline:none; box-shadow:var(--focus); }

/* Nav toggle (mobile) */
.mb-nav__toggle{ display:none; position:relative; width:40px; height:40px; border-radius:12px; border:1px solid var(--mb-border); background:rgba(255,255,255,.03); color:var(--mb-text); }
.mb-nav__bar{ position:absolute; left:10px; right:10px; height:2px; background:currentColor; border-radius:2px; }
.mb-nav__bar:nth-child(1){ top:12px; } .mb-nav__bar:nth-child(2){ top:19px; } .mb-nav__bar:nth-child(3){ top:26px; }

/* Mobile drawer */
.mb-drawer{ position:fixed; inset:0; z-index:90; display:none; background:rgba(0,0,0,.45); }
.mb-drawer[aria-hidden="false"]{ display:block; }
.mb-drawer__nav{ position:absolute; right:0; top:0; bottom:0; width:min(86vw,360px); background:var(--mb-elev); border-left:1px solid var(--mb-border); padding:18px; display:flex; flex-direction:column; gap:8px; }
.mb-drawer__link{ padding:12px 10px; border-radius:12px; }
.mb-drawer__link:hover,.mb-drawer__link:focus-visible{ background:var(--mb-ghost); outline:none; box-shadow:var(--focus); }

/* Hero */
.mb-hero{ padding:64px 0; background: radial-gradient(1200px 600px at 10% -10%, rgba(91,140,255,.12), transparent 60%), var(--mb-bg); }
.mb-hero__inner{ display:grid; gap:26px; align-items:center; grid-template-columns:1fr; }
.mb-hero__title{ font-size:var(--mb-title); line-height:1.15; margin:0 0 10px; font-weight:800; }
.mb-hero__subtitle{ color:var(--mb-muted); font-size:var(--mb-lead); margin:0 0 18px; }
.mb-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.mb-hero__media{ border-radius:var(--mb-radius-lg); overflow:hidden; border:1px solid var(--mb-border); box-shadow:var(--mb-shadow); }

/* Grid & cards */
.mb-grid{ display:grid; gap:18px; }
.mb-grid--3{ grid-template-columns:1fr; }
.mb-grid--2{ grid-template-columns:1fr; }
@media (min-width:720px){
  .mb-grid--3{ grid-template-columns:repeat(3,1fr); }
  .mb-grid--2{ grid-template-columns:repeat(2,1fr); }
}

.mb-card{
  background:var(--mb-card); border:1px solid var(--mb-border);
  border-radius:var(--mb-radius); overflow:hidden; box-shadow:var(--mb-shadow);
  display:flex; flex-direction:column;
}

/* Generic card image (photo-style thumbnails) */
.mb-card__img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#0A0F1B;
}

/* ---------- Feature icons (privacy/expert/fast) – contained & centered ---------- */
/* If the image filename contains these substrings, treat as icon and contain it */
.mb-card__img[src*="icon_privacy"],
.mb-card__img[src*="icon_expert"],
.mb-card__img[src*="icon_fast"]{
  aspect-ratio:auto !important;
  object-fit:contain !important;
  width:140px !important;
  max-width:60% !important;
  height:auto !important;
  margin:28px auto 14px !important;
  background:transparent !important;
  display:block !important;
}
@media (max-width:520px){
  .mb-card__img[src*="icon_privacy"],
  .mb-card__img[src*="icon_expert"],
  .mb-card__img[src*="icon_fast"]{
    width:96px !important;
    max-width:70% !important;
    margin:22px auto 12px !important;
  }
}

/* Titles & body text on cards */
.mb-card__title{ margin:8px 14px 6px; font-size:var(--mb-h3); font-weight:700; }
.mb-card__text{ margin:0 14px 16px; color:var(--mb-muted); }

/* Buttons (generic) */
.mb-btn{
  --btn-bg:var(--mb-accent); --btn-fg:#0B1020; --btn-bg-h:#76A2FF;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; font-size:var(--mb-btn); font-weight:700; letter-spacing:.2px;
  color:var(--btn-fg); background:var(--btn-bg); border:0; border-radius:8px;
  box-shadow:0 10px 30px rgba(91,140,255,.35);
  transition:transform .06s ease, background .15s ease, box-shadow .15s ease;
  min-height:56px; line-height:1;
}
.mb-btn:hover,.mb-btn:focus-visible{ background:var(--btn-bg-h); transform:translateY(-1px); outline:none; box-shadow:var(--focus),0 14px 40px rgba(91,140,255,.35); }
.mb-btn--ghost{ color:var(--mb-text); background:rgba(255,255,255,.06); border:1px solid var(--mb-border); }

/* ---------- Explore cards become clickable links ---------- */
/* make the anchor behave like a card */
.mb-card--link{
  display:flex;
  flex-direction:column;
  gap:0;
  color:inherit;
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease;
  cursor:pointer;
}
.mb-card--link:focus{ outline: none; box-shadow: var(--focus); border-radius: var(--mb-radius); }
.mb-card--link:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0,0,0,.45); }

/* make sure card contents still follow card styling */
.mb-card--link .mb-card__img{ border-bottom: 1px solid var(--mb-border); }

/* ---------- Fit images for explore cards (avoid crop) ---------- */
/* Provide a 'fit' variant that uses contain and centers within a fixed media window */
.mb-card__img--fit{
  /* Override the 16/9 crop behavior for explore preview images so they fit */
  aspect-ratio: auto !important;
  object-fit: contain !important;
  width: 100% !important;
  max-height: 240px;            /* restrict height so cards align */
  height: auto !important;
  background: #07101a;          /* subtle background */
  padding: 18px;                /* breathe space around graphic */
  display: block;
}

/* ensure smaller screens get smaller max-height */
@media (max-width:720px){
  .mb-card__img--fit{ max-height: 180px; padding: 12px; }
}

/* Titles & text remain same for link-cards */
.mb-card--link .mb-card__title{ margin:12px 14px 8px; }
.mb-card--link .mb-card__text{ margin:0 14px 18px; color:var(--mb-muted); }

/* ---------- Contact section ---------- */
.mb-contact{
  font-size:16px;
  color:var(--mb-text);
  background: transparent;
  margin: 10px 0 0;
  line-height:1.6;
}
.mb-contact a{ color: var(--mb-accent); text-decoration: underline; }
.mb-contact strong{ color:var(--mb-text); }

/* Footer */
.mb-footer{ margin-top:auto; background:var(--mb-elev); border-top:1px solid var(--mb-border); }
.mb-footer__inner{ display:grid; gap:12px; align-items:center; padding:20px 0; }
.mb-footer__brand{ display:flex; gap:10px; align-items:center; font-weight:700; }
/* Footer logo doubled proportionally */
.mb-footer__brand img{ height:clamp(36px, 5.6vw, 64px); width:auto; }
.mb-footer__links{ list-style:none; display:flex; gap:12px; padding:0; margin:0; flex-wrap:wrap; }
.mb-footer__links a{ color:var(--mb-muted); padding:6px 8px; border-radius:10px; }
.mb-footer__links a:hover,.mb-footer__links a:focus-visible{ background:var(--mb-ghost); color:var(--mb-text); outline:none; box-shadow:var(--focus); }
.mb-footer__fineprint{ color:var(--mb-muted); margin:4px 0 0; font-size:13px; text-align:left; }

/* Responsive adjustments */
@media (min-width:720px){
  .mb-hero__inner{ grid-template-columns:1.1fr 1fr; }
}
@media (max-width:920px){
  .mb-nav{ display:none; }
  .mb-nav__toggle{ display:inline-block; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}