.izf-footer{
    --izf-red:#ee1111;
    --izf-bg:#0a0a0b;
    --izf-border:#232326;
    --izf-gray-1:#a1a1a6;
    --izf-gray-2:#6b6b70;
  }
  /* NOTE: the two rules below (*, html/body) are ONLY for previewing this
     file standalone in a browser. When you paste the footer into your real
     page, skip these two rules — they are not part of the footer component
     and are scoped broadly on purpose just for this demo file. */
  * { box-sizing: border-box; }
  html, body {
    margin:0; padding:0;
    font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    background:#f4f5f7;
  }
 
  /* Everything below this line IS the reusable, self-contained footer
     component — every selector is scoped under .izf-footer or .izf-demo-*
     so it cannot restyle or override anything already on your page. */
  .izf-footer, .izf-footer *, .izf-demo-content, .izf-demo-content *{
    box-sizing: border-box;
  }
  .izf-footer{
    font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  }
 
  .izf-demo-content{
    max-width:1240px;
    margin:0 auto;
    padding:40px 40px 0;
  }
  .izf-demo-card{
    background:#fff;
    border-radius:16px;
    padding:40px;
    box-shadow:0 4px 20px rgba(0,0,0,0.06);
    color:#111;
    text-align:center;
  }
  @media (max-width: 640px){
    .izf-demo-content{ padding:24px 22px 0; }
    .izf-demo-card{ border-radius:16px 16px 0 0; margin-bottom:-1px; }
  }
 
  .izf-footer{
    background:var(--izf-bg);
    color:#fff;
    padding:56px 40px 0;
  }
 
  .izf-footer-inner{
    max-width:1240px;
    margin:0 auto;
  }
 
  .izf-footer-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:40px;
    padding-bottom:36px;
  }
 
  /* ---------------- Brand column ---------------- */
  .izf-brand-logo{
    margin-bottom:18px;
  }
  .izf-brand-logo img{
    height:55px;
    width:auto;
    display:block;
  }
 
  .izf-brand-desc{
    font-size:13.5px;
    line-height:1.6;
    color:var(--izf-gray-1);
    max-width:290px;
    padding-top: 16px;
    margin:0 0 22px 0;
  }
 
  .izf-get-in-touch{
    font-size:12px;
    font-weight:800;
    color:var(--izf-red);
    letter-spacing:0.6px;
    margin:0 0 14px 0;
  }
 
  .izf-contact-row{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:12px;
    font-size:13.5px;
    color:#e5e5e7;
  }
  .izf-contact-row svg{
    color:var(--izf-gray-1);
    flex:0 0 auto;
    margin-top:2px;
  }
 
  .izf-footer-links-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:22px;
  }
  .izf-footer-links-row a{
    color:#fff;
    font-size:13.5px;
    font-weight:600;
    text-decoration:none;
  }
  .izf-footer-links-row a:hover{ color:var(--izf-red); }
 
  /* ---------------- Link columns ---------------- */
  .izf-col-heading{
    font-size:12px;
    font-weight:800;
    letter-spacing:0.6px;
    color:#fff;
    margin:0 0 18px 0;
  }
  .izf-link-list{
    list-style:none;
    margin:0; padding:0;
    display:flex;
    flex-direction:column;
    gap:13px;
  }
  .izf-app-link{
    padding: 0  ;
  }
  .izf-link-list a{
    color:var(--izf-gray-1);
    font-size:13.5px;
    text-decoration:none;
  }
  .izf-link-list a:hover{ color:#fff; }
 
  /* ---------------- Download / Follow column ---------------- */
  .izf-app-badges{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:14px;
  }
  .izf-app-badge{
    display:flex;
    align-items:center;
    cursor:pointer;
    width:fit-content;
  }
  .izf-app-badge .izf-badge-text{ line-height:1.15; }
  .izf-app-badge .izf-badge-text .izf-small{ font-size:9px; color:var(--izf-gray-1); display:block; }
  .izf-app-badge .izf-badge-text .izf-big{ font-size:13.5px; font-weight:700; color:#fff; display:block; }
 
  .izf-rating-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:26px;
    font-size:12.5px;
  }
  .izf-stars{ color:var(--izf-red); letter-spacing:1px; font-size:13px; }
  .izf-rating-row .izf-score{ font-weight:700; color:#fff; }
  .izf-rating-row .izf-count{ color:var(--izf-gray-1); }
 
  .izf-social-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .izf-social-icon{
    width:36px; height:36px;
    border-radius:50%;
    border:1px solid var(--izf-border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#c7c7cc;
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
  }
  .izf-social-icon:hover{
    border-color:var(--izf-red);
    color:var(--izf-red);
  }
 
  /* ---------------- Bottom bar ---------------- */
  .izf-footer-bottom{
    border-top:1px solid var(--izf-border);
    padding:20px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
  }
  .izf-footer-bottom .izf-copyright{
    font-size:12.5px;
    color:var(--izf-gray-2);
  }
  .izf-footer-bottom .izf-legal-links{
    display:flex;
    gap:24px;
    flex-wrap:wrap;
  }
  .izf-footer-bottom .izf-legal-links a{
    font-size:12.5px;
    color:var(--izf-gray-1);
    text-decoration:none;
  }
  .izf-footer-bottom .izf-legal-links a:hover{ color:#fff; }
 
  /* ---------------- Responsive ---------------- */
  @media (max-width: 980px){
    .izf-footer-grid{
      grid-template-columns:1fr 1fr;
      row-gap:36px;
    }
  }
 
  @media (max-width: 640px){
    .izf-footer{
      padding:44px 22px 0;
      border-radius:28px 28px 0 0;
      margin-top:-16px;
      position:relative;
      z-index:1;
    }
    .izf-footer-bottom .izf-legal-links a{
      font-size: 11.5px;
    }
    .izf-footer-grid{
      grid-template-columns:1fr;
      gap:32px;
    }
    .izf-brand-desc{ max-width:100%; }
    .izf-footer-links-row{ gap:18px; }
    .izf-footer-bottom{
      flex-direction:column;
      align-items:flex-start;
      text-align:left;
    }
    .izf-footer-bottom .izf-legal-links{ gap:0px; }
  }