.site-footer{
      --fg:#ffffff;
      --fg-muted:#e6efff;
      --divider:rgba(255,255,255,.16);
      --radius:12px;
      --ring:0 0 0 3px color-mix(in srgb, var(--accent) 35%, white);
    }

    .site-footer{
      width:100%;
      position:relative; isolation:isolate;
      color:var(--fg);
      background:linear-gradient(135deg, var(--primary-blue) 0%, var(--cyan) 45%, var(--accent) 100%);
      padding:40px 0 28px;
    }
    .site-footer::before{
      content:"";
      position:absolute; left:0; right:0; top:0; height:4px;
      background:linear-gradient(90deg, var(--primary-blue) 0%, var(--accent) 55%, #ef4444 100%);
      z-index:0;
    }

    .footer-wrap{ width:min(1200px,92%); margin-inline:auto; position:relative; z-index:1; }

    .footer-grid{
      display:grid;
      grid-template-columns: 1fr 1.6fr 1fr;
      gap:clamp(20px, 3vw, 40px);
      align-items:start;
    }
    .footer-col{min-width:0}

    .footer-title{
      display:flex; align-items:center; gap:10px;
      color:#fff; font-weight:800; font-size:16px; margin:0 0 12px;
    }
    .footer-title .dot{
      width:8px; height:8px; border-radius:999px; background:var(--accent);
      box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
      flex:0 0 8px;
    }

    .footer-brand img{height:42px; width:auto; margin-bottom:12px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.18))}
    .footer-brand p{margin:6px 0 14px; color:var(--fg-muted); font-size:14px; line-height:1.55}
    .social{display:flex; gap:10px; flex-wrap:wrap}
    .social a{
      width:36px; height:36px; display:grid; place-items:center;
      border-radius:10px; background:rgba(255,255,255,.12); color:#fff; border:1px solid var(--divider);
      transition:transform .15s ease, background-color .2s ease, border-color .2s ease;
    }
    .social a:hover{transform:translateY(-1px); background:rgba(255,255,255,.2); border-color:#fff}
    .social a:focus-visible{outline:none; box-shadow:var(--ring)}

    .company-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
    .company-list li{
      display:flex; align-items:center; gap:10px;
      font-size:15px; line-height:1.5; color:#fff;
      padding-block:2px;
    }
    .company-list i{color:#fff; width:18px; text-align:center; flex:0 0 18px}
    .company-list a{color:#fff; text-decoration:none}
    .company-list a:hover{text-decoration:underline}
    .company-list .value{
      overflow-wrap:anywhere;
      word-break:break-word;
      -ms-word-break:break-all;
    }

    .support-two-col{
      display:grid;
      grid-template-columns: repeat(2, minmax(240px,1fr));
      gap:clamp(16px, 2.5vw, 28px);
    }
    .support-block .support-subtitle{
      margin:0 0 10px; font-weight:800; color:#fff; font-size:15px; display:flex; align-items:center; gap:8px;
    }
    .support-block .support-subtitle i{color:#fff}

    .footer-bottom{
      margin-top: clamp(22px, 4vw, 32px);
      padding-top:14px; border-top:1px solid var(--divider);
      display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
      color:var(--fg-muted); font-size:13px;
    }
    .footer-bottom a{color:var(--fg-muted); opacity:.95}
    .footer-bottom a:hover{color:#fff; opacity:1}

    @media (max-width: 1200px){
      .footer-grid{grid-template-columns: 1fr 1.4fr 1fr;}
    }
    @media (max-width: 960px){
      .footer-grid{grid-template-columns: 1fr 1fr;}
    }
    @media (max-width: 900px){
      .support-two-col{grid-template-columns: 1fr;}
    }
    @media (max-width: 640px){
      .footer-grid{grid-template-columns: 1fr; row-gap: 26px;}
      .footer-bottom{justify-content:center; text-align:center}
      .footer-title{font-size:15px}
      .company-list li{font-size:16px; padding-block:4px}
      .company-list i{width:20px; font-size:18px}
      .company-list a.value{display:inline-block; padding:4px 6px; border-radius:8px; background:rgba(255,255,255,.10)}
    }