.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)}
    }

    .scroll-top{
      position:fixed; right:16px; bottom:16px; z-index:9999;
      display:grid; place-items:center; width:44px; height:44px;
      border-radius:12px; border:0; background:#F2632E; color:#fff;
      box-shadow:0 6px 20px rgba(0,0,0,.25);
      transform:translateY(10px); opacity:0; pointer-events:none;
      transition:opacity .2s ease, transform .2s ease;
    }
    .scroll-top.show{ opacity:1; transform:translateY(0); pointer-events:auto }
    .scroll-top .fa-solid{ font-size:18px }

    .tl-inline{ display:inline-block; margin-left:12px; line-height:0; vertical-align:middle; }
    .tl-inline a{ display:inline-block; background:transparent!important; border:none!important; box-shadow:none!important; padding:0!important; }
    .tl-inline img{ display:block; width:80px; height:15px; border:0; }
    .social{ display:flex; gap:10px; margin-top:8px; }
    .social a{
      --c:#ffffff;
      width:36px; height:36px; border-radius:12px;
      display:grid; place-items:center; text-decoration:none;
      color:var(--c);
      background:rgba(255,255,255,.10);
      border:1px solid color-mix(in srgb, var(--c) 45%, transparent);
      box-shadow:0 2px 10px rgba(0,0,0,.15);
      transition:transform .15s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .social a:hover{
      transform:translateY(-2px);
      background:color-mix(in srgb, var(--c) 18%, transparent);
      border-color:var(--c);
      box-shadow:0 6px 18px rgba(0,0,0,.25);
    }
    .social a.fb{ --c:#1877F2; }
    .social a.wa{ --c:#25D366; }
    .social a.gm{ --c:#00AC47; }
    .social a svg.svg-icon{ width:18px; height:18px; display:block; }

    .brand-slogan{
      display:inline-block; margin:6px 0 12px; line-height:1.55;
      opacity:.001; transform:translateY(6px);
    }
    .brand-slogan .reveal{
      display:inline-block;
      clip-path: inset(0 100% 0 0); 
    }
    .brand-slogan.is-animate{ animation: fadeUp .6s ease forwards; }
    .brand-slogan.is-animate .reveal{ animation: textReveal .9s cubic-bezier(.19,.71,.29,1) .05s forwards; }

    @keyframes fadeUp{ to{ opacity:1; transform:translateY(0);} }
    @keyframes textReveal{ to{ clip-path: inset(0 0 0 0); } }

    @media (prefers-reduced-motion: reduce){
      .brand-slogan, .brand-slogan .reveal{ animation:none!important; opacity:1!important; transform:none!important; clip-path:none!important; }
    }