*{box-sizing:border-box;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:#334155;
    font-size:15px;
    line-height:1.7;
    background-color:#f6f8ff;
    background-image:
      radial-gradient(760px 440px at 6% -8%,rgba(6,182,212,.16),transparent 62%),
      radial-gradient(820px 480px at 98% -4%,rgba(124,58,237,.15),transparent 64%),
      radial-gradient(900px 560px at 52% 106%,rgba(236,72,153,.12),transparent 66%);
    background-repeat:no-repeat;
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;}
  a{color:#6d28d9;}
  .container{width:100%;max-width:1180px;margin:0 auto;padding-left:20px;padding-right:20px;}

  /* header */
  .site-header{
    position:sticky;top:0;z-index:60;
    background:rgba(255,255,255,.88);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid #e6ebf7;
    box-shadow:0 6px 24px rgba(15,23,42,.05);
  }
  .header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:66px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;}
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;}
  .brand .ai-page-logo{max-height:36px;display:block;}
  .brand-text{font-size:17px;font-weight:800;color:#0b1220;letter-spacing:.5px;white-space:nowrap;}
  .nav-links{display:flex;align-items:center;justify-content:flex-end;gap:0;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
  .nav-links li{display:flex;}
  .nav-links a{
    display:inline-block;padding:8px 10px;font-size:13px;font-weight:700;color:#475569;
    text-decoration:none;border-radius:8px;white-space:nowrap;
    transition:color .2s ease,background .2s ease,transform .2s ease;
  }
  .nav-links a:hover{color:#5b21b6;background:rgba(124,58,237,.09);transform:translateY(-1px);}
  .nav-toggle{
    display:none;align-items:center;justify-content:center;gap:6px;
    padding:8px 12px;border-radius:10px;border:1px solid #dbe2f2;background:#fff;
    color:#0b1220;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;
  }
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 22px;border-radius:12px;font-size:14.5px;font-weight:700;
    text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;
    transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
  }
  .btn-primary{background:linear-gradient(115deg,#0891b2,#6d28d9 55%,#be185d);color:#ffffff;box-shadow:0 10px 24px rgba(109,40,217,.28);}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(109,40,217,.38);}
  .btn-ghost{background:#ffffff;color:#0b1220;border-color:#dbe2f2;box-shadow:0 4px 14px rgba(15,23,42,.05);}
  .btn-ghost:hover{transform:translateY(-2px);border-color:#b9c6e6;box-shadow:0 10px 22px rgba(15,23,42,.1);}
  .btn-sm{padding:9px 16px;font-size:13px;border-radius:10px;}

  /* hero */
  .hero{position:relative;overflow:hidden;padding:62px 0 40px;}
  .hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(64px);}
  .hero::before{width:340px;height:340px;background:rgba(6,182,212,.26);top:-90px;left:-70px;}
  .hero::after{width:300px;height:300px;background:rgba(236,72,153,.2);bottom:-110px;right:-50px;}
  .hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:start;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
    font-size:12.5px;font-weight:800;letter-spacing:.6px;color:#5b21b6;
    background:linear-gradient(120deg,rgba(6,182,212,.14),rgba(124,58,237,.14),rgba(236,72,153,.14));
    border:1px solid rgba(124,58,237,.22);
  }
  .hero h1{margin:20px 0 16px;font-size:clamp(30px,4.3vw,50px);line-height:1.18;font-weight:900;color:#0b1220;letter-spacing:-.5px;}
  .hero-sub{margin:0 0 26px;font-size:16px;color:#4a5872;max-width:560px;}
  .hero-actions{display:flex;flex-wrap:wrap;gap:14px;}
  .hero-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:26px 0 0;padding:0;}
  .hero-tags li{
    padding:6px 13px;border-radius:999px;background:#ffffff;border:1px solid #e3e8f4;
    font-size:12.5px;font-weight:700;color:#4a5872;box-shadow:0 4px 12px rgba(15,23,42,.04);
  }
  .hero-panel{
    background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(246,248,255,.96));
    border:1px solid #e3e8f4;border-radius:20px;padding:24px;
    box-shadow:0 22px 50px rgba(76,29,149,.12);
  }
  .panel-title{display:block;font-size:16px;font-weight:800;color:#0b1220;}
  .panel-sub{margin:6px 0 0;font-size:13px;color:#5b6a85;}
  .panel-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px;}
  .panel-list li{display:flex;gap:12px;align-items:flex-start;}
  .dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;margin-top:8px;}
  .dot-1{background:#06b6d4;box-shadow:0 0 0 4px rgba(6,182,212,.16);}
  .dot-2{background:#7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,.16);}
  .dot-3{background:#ec4899;box-shadow:0 0 0 4px rgba(236,72,153,.16);}
  .panel-list b{display:block;font-size:14.5px;color:#0b1220;font-weight:800;}
  .panel-list span{display:block;font-size:13px;color:#5b6a85;line-height:1.6;}
  .panel-btn{margin-top:18px;width:100%;}

  .metrics{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px;}
  .metric{background:#ffffff;border:1px solid #e6ebf7;border-radius:16px;padding:18px 20px;box-shadow:0 10px 26px rgba(15,23,42,.05);}
  .metric-num{display:block;font-size:26px;font-weight:900;color:#0b1220;letter-spacing:-.5px;line-height:1.3;}
  .metric-label{display:block;font-size:13px;color:#5b6a85;font-weight:600;}
  .metric:nth-child(1){border-top:3px solid #06b6d4;}
  .metric:nth-child(2){border-top:3px solid #7c3aed;}
  .metric:nth-child(3){border-top:3px solid #ec4899;}
  .metric:nth-child(4){border-top:3px solid #f59e0b;}

  /* sections */
  .section{padding:58px 0;}
  .section-head{max-width:780px;margin-bottom:34px;}
  .section-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:2px;color:#7c3aed;margin-bottom:10px;}
  .section-head h2{margin:0 0 12px;font-size:clamp(22px,2.6vw,31px);font-weight:800;color:#0b1220;letter-spacing:-.3px;line-height:1.32;}
  .section-head p{margin:0;color:#5b6a85;font-size:15px;}

  .grid{display:grid;gap:18px;}
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-4{grid-template-columns:repeat(4,1fr);}

  .card{
    background:#ffffff;border:1px solid #e6ebf7;border-radius:18px;padding:22px;
    box-shadow:0 10px 26px rgba(15,23,42,.05);position:relative;overflow:hidden;
    transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease;
  }
  .card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(76,29,149,.14);border-color:#d6c8f5;}
  .card h3{margin:0 0 8px;font-size:16px;font-weight:800;color:#0b1220;}
  .card p{margin:0;font-size:14px;color:#5b6a85;line-height:1.72;}

  .service-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;}
  .service-card:nth-child(3n+1)::before{background:linear-gradient(90deg,#06b6d4,#22d3ee);}
  .service-card:nth-child(3n+2)::before{background:linear-gradient(90deg,#7c3aed,#a78bfa);}
  .service-card:nth-child(3n+3)::before{background:linear-gradient(90deg,#ec4899,#fb7185);}

  .step-num{
    display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;
    border-radius:12px;font-weight:900;color:#ffffff;font-size:14px;margin-bottom:12px;
    background:linear-gradient(115deg,#0891b2,#6d28d9);
  }
  .step:nth-child(2) .step-num{background:linear-gradient(115deg,#6d28d9,#a855f7);}
  .step:nth-child(3) .step-num{background:linear-gradient(115deg,#a855f7,#ec4899);}
  .step:nth-child(4) .step-num{background:linear-gradient(115deg,#ec4899,#f97316);}

  .industry{padding:20px 22px;}
  .industry h3{margin:0 0 6px;}
  .industry .tags-mini{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
  .tags-mini span{font-size:12px;font-weight:700;color:#5b21b6;background:rgba(124,58,237,.09);padding:3px 10px;border-radius:999px;}

  .timeline{position:relative;padding-left:30px;margin:0;list-style:none;}
  .timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:10px;width:2px;background:linear-gradient(180deg,#06b6d4,#7c3aed,#ec4899);border-radius:2px;}
  .timeline-item{position:relative;padding-bottom:22px;}
  .timeline-item:last-child{padding-bottom:0;}
  .timeline-item::before{
    content:"";position:absolute;left:-27px;top:6px;width:14px;height:14px;border-radius:50%;
    background:#ffffff;border:3px solid #7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,.12);
  }
  .timeline-item h3{margin:0 0 4px;font-size:15.5px;font-weight:800;color:#0b1220;}
  .timeline-item p{margin:0;font-size:14px;color:#5b6a85;}

  /* cases */
  .case-card{background:#ffffff;border:1px solid #e6ebf7;border-radius:18px;overflow:hidden;box-shadow:0 10px 26px rgba(15,23,42,.05);transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease;}
  .case-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(76,29,149,.14);border-color:#d6c8f5;}
  .case-media{aspect-ratio:4/3;background:#f2f5fd;display:flex;align-items:center;justify-content:center;padding:10px;}
  .case-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;border-radius:10px;}
  .case-body{padding:16px 18px 20px;}
  .case-body h3{margin:0 0 6px;font-size:15px;font-weight:800;color:#0b1220;}
  .case-body p{margin:0;font-size:13.5px;color:#5b6a85;}

  /* rating */
  .rating-card{
    display:flex;flex-wrap:wrap;align-items:center;gap:22px;
    background:linear-gradient(120deg,#ffffff,#fbf8ff);
    border:1px solid #e6ebf7;border-radius:20px;padding:24px 26px;margin-bottom:24px;
    box-shadow:0 14px 34px rgba(76,29,149,.1);
  }
  .rating-score{font-size:46px;font-weight:900;color:#6d28d9;line-height:1;letter-spacing:-2px;}
  .rating-score small{font-size:16px;font-weight:800;color:#8492ab;letter-spacing:0;margin-left:2px;}
  .rating-stars{font-size:20px;color:#f59e0b;letter-spacing:3px;line-height:1;}
  .rating-desc{flex:1 1 260px;min-width:220px;}
  .rating-desc strong{display:block;font-size:16px;color:#0b1220;margin-bottom:4px;}
  .rating-desc span{font-size:13.5px;color:#5b6a85;}

  .table-wrap{overflow-x:auto;border:1px solid #e6ebf7;border-radius:16px;background:#ffffff;box-shadow:0 10px 26px rgba(15,23,42,.05);}
  table{width:100%;border-collapse:collapse;min-width:700px;font-size:14px;}
  thead th{background:linear-gradient(120deg,#eef7fd,#f3efff);color:#0b1220;font-weight:800;text-align:left;padding:14px 18px;border-bottom:1px solid #e6ebf7;white-space:nowrap;}
  tbody td{padding:13px 18px;border-bottom:1px solid #eef2fa;color:#475569;vertical-align:top;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:#fafbff;}
  .hl{color:#6d28d9;font-weight:800;}
  .table-note{margin:12px 0 0;font-size:13px;color:#7a879e;}

  /* reviews */
  .review{background:#ffffff;border:1px solid #e6ebf7;border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 26px rgba(15,23,42,.05);transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease;}
  .review:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(76,29,149,.14);border-color:#d6c8f5;}
  .review-text{margin:0;font-size:14.5px;color:#3f4c63;line-height:1.78;}
  .review-meta{margin-top:auto;padding-top:12px;border-top:1px dashed #e6ebf7;}
  .review-name{display:block;font-size:14px;font-weight:800;color:#0b1220;}
  .review-role{display:block;font-size:12.5px;color:#7a879e;}

  /* form */
  .form-card{background:#ffffff;border:1px solid #e6ebf7;border-radius:20px;padding:26px;box-shadow:0 16px 38px rgba(15,23,42,.07);}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .field{display:flex;flex-direction:column;gap:6px;}
  .field-full{grid-column:1/-1;}
  .field label{font-size:13.5px;font-weight:800;color:#334155;}
  .field input,.field select,.field textarea{
    font-family:inherit;font-size:14.5px;color:#0b1220;background:#ffffff;
    border:1px solid #dbe2f2;border-radius:10px;padding:11px 14px;width:100%;
    transition:border-color .2s ease,box-shadow .2s ease;
  }
  .field textarea{min-height:112px;resize:vertical;}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.15);}
  .form-actions{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
  .form-hint{font-size:12.5px;color:#7a879e;margin:0;}

  /* contact */
  .contact-card{background:#ffffff;border:1px solid #e6ebf7;border-radius:20px;padding:24px;box-shadow:0 12px 30px rgba(15,23,42,.06);}
  .contact-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
  .contact-list li{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:#4a5872;align-items:baseline;}
  .contact-list b{font-weight:800;color:#0b1220;min-width:82px;}
  .qr-box{background:#ffffff;border:1px solid #e6ebf7;border-radius:16px;padding:14px;text-align:center;box-shadow:0 10px 26px rgba(15,23,42,.06);}
  .qr-box img{width:100%;max-width:180px;height:auto;display:block;margin:0 auto 10px;border-radius:10px;}
  .qr-box span{font-size:13px;font-weight:700;color:#4a5872;}

  .partner-card{
    margin-top:24px;border-radius:20px;padding:28px;
    background:linear-gradient(125deg,#0b1220,#231a46 55%,#3b1052);
    color:#e6edf9;box-shadow:0 20px 46px rgba(25,10,60,.28);
  }
  .partner-card h3{margin:0 0 10px;font-size:20px;font-weight:800;color:#ffffff;}
  .partner-card p{margin:0 0 18px;font-size:14px;color:#c3cfe6;max-width:720px;}

  /* faq */
  .faq-item{background:#ffffff;border:1px solid #e6ebf7;border-radius:14px;margin-bottom:12px;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease;}
  .faq-item.open{border-color:#c9b6f3;box-shadow:0 12px 28px rgba(76,29,149,.12);}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;padding:16px 20px;
    font-size:15px;font-weight:800;color:#0b1220;cursor:pointer;font-family:inherit;
    display:flex;justify-content:space-between;align-items:center;gap:14px;
  }
  .chev{flex:0 0 auto;width:18px;height:18px;position:relative;}
  .chev::before,.chev::after{content:"";position:absolute;left:50%;top:50%;background:#7c3aed;border-radius:2px;transform:translate(-50%,-50%);}
  .chev::before{width:12px;height:2px;}
  .chev::after{width:2px;height:12px;transition:transform .3s ease,opacity .3s ease;}
  .faq-item.open .chev::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
  .faq-a p{margin:0;padding:0 20px 18px;color:#4a5872;font-size:14.5px;}

  /* wiki tags */
  .tags{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0;}
  .tags li{
    padding:7px 14px;border-radius:999px;background:#ffffff;border:1px solid #e3e8f4;
    color:#3f4c63;font-size:13.5px;font-weight:700;
    transition:transform .22s ease,color .22s ease,border-color .22s ease,background .22s ease;
  }
  .tags li:hover{color:#6d28d9;border-color:#c9b6f3;background:#faf7ff;transform:translateY(-2px);}

  /* articles */
  .article-list{display:grid;gap:12px;}
  .article-item{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:16px 20px;background:#ffffff;border:1px solid #e6ebf7;border-radius:14px;
    text-decoration:none;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
  }
  .article-item:hover{transform:translateX(4px);border-color:#c9b6f3;box-shadow:0 10px 24px rgba(76,29,149,.1);}
  .article-item span{font-size:14.5px;font-weight:700;color:#0b1220;}
  .article-item em{font-style:normal;font-size:12.5px;font-weight:800;color:#6d28d9;white-space:nowrap;}

  /* footer */
  .site-footer{margin-top:20px;background:linear-gradient(180deg,#0f172a,#141d33);color:#c7d2e3;padding:46px 0 22px;position:relative;}
  .site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#06b6d4,#7c3aed,#ec4899);}
  .footer-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:start;}
  .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
  .footer-brand .ai-page-logo{max-height:34px;display:block;}
  .footer-brand strong{font-size:17px;font-weight:800;color:#ffffff;letter-spacing:.5px;}
  .footer-desc{margin:0;font-size:13.5px;color:#a9b6cc;line-height:1.8;max-width:420px;}
  .footer-title{margin:0 0 12px;font-size:14px;font-weight:800;color:#ffffff;}
  .friend-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;}
  .friend-links a{color:#b9c7de;text-decoration:none;font-size:13.5px;transition:color .2s ease;}
  .friend-links a:hover{color:#7dd3fc;}
  .footer-bottom{margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;}
  .footer-bottom p{margin:0;font-size:12.5px;color:#93a2ba;}
  .footer-bottom a{color:#b9c7de;text-decoration:none;}
  .footer-bottom a:hover{color:#7dd3fc;}

  /* floating */
  .float-dock{position:fixed;right:18px;bottom:22px;z-index:80;display:flex;flex-direction:column;gap:10px;}
  .dock-btn{
    width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
    color:#ffffff;background:linear-gradient(135deg,#0891b2,#6d28d9);
    box-shadow:0 10px 24px rgba(76,29,149,.32);transition:transform .2s ease,opacity .25s ease,visibility .25s ease;
    font-family:inherit;line-height:1.15;text-align:center;
  }
  .dock-btn:hover{transform:translateY(-3px) scale(1.05);}
  .dock-btn.ghost{background:#ffffff;color:#6d28d9;border:1px solid #dbe2f2;box-shadow:0 8px 20px rgba(15,23,42,.15);font-size:13px;}
  #backTop{opacity:0;visibility:hidden;}
  #backTop.show{opacity:1;visibility:visible;}
  .service-panel{
    position:fixed;right:18px;bottom:84px;width:262px;max-width:calc(100vw - 36px);
    background:#ffffff;border:1px solid #e6ebf7;border-radius:18px;padding:16px;
    box-shadow:0 24px 50px rgba(15,23,42,.2);z-index:81;display:none;
  }
  .service-panel.show{display:block;animation:popIn .25s ease;}
  .service-panel h4{margin:0 0 10px;font-size:14px;font-weight:800;color:#0b1220;}
  .service-panel img{width:100%;height:auto;display:block;border-radius:10px;margin-bottom:10px;}
  .service-panel p{margin:0 0 6px;font-size:13px;color:#4a5872;}
  .service-panel p:last-child{margin-bottom:0;}

  @keyframes popIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
  .reveal.visible{opacity:1;transform:none;}
  .hero-copy{animation:fadeUp .7s ease both;}
  .hero-panel{animation:fadeUp .7s ease .12s both;}

  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none;}
    .hero-copy,.hero-panel{animation:none;}
    html{scroll-behavior:auto;}
  }

  @media (max-width:1080px){
    .nav-toggle{display:inline-flex;}
    .nav-wrap{display:none;width:100%;order:3;border-top:1px solid #eef2fa;margin-top:6px;}
    .nav-wrap.open{display:block;}
    .nav-links{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:6px 0 10px;}
    .nav-links a{padding:11px 8px;font-size:14px;}
    .header-cta{display:none;}
    .hero-inner{grid-template-columns:1fr;gap:32px;}
    .grid-4{grid-template-columns:repeat(2,1fr);}
    .grid-3{grid-template-columns:repeat(2,1fr);}
    .metrics{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:760px){
    .section{padding:44px 0;}
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
    .form-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;gap:24px;}
    .hero{padding:44px 0 30px;}
    .rating-card{padding:20px;}
    .rating-score{font-size:38px;}
  }
  @media (max-width:420px){
    .metrics{grid-template-columns:1fr;}
  }