.dashicons-dd-card-performance {
    width: 24px;
    height: 24px;
    background: url(icon.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}




:root{
      --bg:#232943;
      --bg-2:#1d2237;
      --glass:rgba(255,255,255,0.08);
      --border:rgba(255,255,255,0.15);
      --text:#f3f4fa;
      --muted:rgba(243,244,250,.72);
      --blue:#6b78ff;
      --green:#67d64b;
    }

    .spacer{
      min-height: 90vh;
      display:grid;
      place-items:center;
      padding: 10vw 6vw;
    }

    .intro{
      max-width: 900px;
      text-align: center;
    }

    .eyebrow{
      font-size: 14px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 18px;
    }





    .section{
      position: relative;
      /* min-height: 180vh; */
    }

    .sticky{
      position: sticky;
      top: 0;
      /* min-height: 100vh; */
      display:grid;
      place-items:center;
      /* padding: 6vw; */
      overflow:hidden;
    }

    .bg-glow{
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(circle at 50% 40%, rgba(107,120,255,.18), transparent 18%),
        radial-gradient(circle at 30% 70%, rgba(255,255,255,.05), transparent 20%);
      filter: blur(40px);
      opacity:.8;
    }

    .card-wrap{
      /* width:min(92vw, 900px); */
      width:100%;
      aspect-ratio: 820 / 620;
      display:grid;
      place-items:center;
      perspective: 1600px;
      position:relative;
      z-index:2;
    }

    .card{
      width: 82%;
      height: 83%;
      border-radius: 30px;
      padding: 28px;
      background: var(--glass);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid var(--border);
      box-shadow: 0 30px 70px rgba(0,0,0,.28);
      transform-style: preserve-3d;
      will-change: transform, opacity;
      position: relative;
    }

    .browser{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:20px;
      opacity:0;
      transform: translateY(18px);
    }

    .dot{
      width:10px;
      height:10px;
      border-radius:50%;
    }
    .red{background:#ff5f56;}
    .yellow{background:#ffbd2e;}
    .green{background:#27c93f;}

    .url{
      flex:1;
      padding:12px 16px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.08);
      color:var(--muted);
      font-size:14px;
    }

    .input-row{
      display:flex;
      gap:10px;
      margin:18px 0 16px;
      opacity:0;
      transform: translateY(18px);
    }

    .input{
      flex:1;
      padding:13px 14px;
      border-radius:10px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.04);
      color:white;
      outline:none;
    }

    .btn{
      padding:13px 20px;
      border:none;
      border-radius:10px;
      background: var(--blue);
      color:white;
      cursor:pointer;
      box-shadow: 0 10px 20px rgba(107,120,255,.22);
    }

    .tabs{
      display:flex;
      gap:24px;
      justify-content:center;
      margin:18px 0 28px;
      color:var(--muted);
      opacity:0;
      transform: translateY(18px);
    }

    .tab-active{
      color:var(--text);
      position:relative;
    }

    .tab-active::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-10px;
      margin:auto;
      width:100%;
      height:4px;
      border-radius:999px;
      background:rgba(255,255,255,.9);
      border-bottom-left-radius:0;
      border-bottom-right-radius:0;
    }

    .scores{
      display:flex;
      justify-content:space-between;
      gap:4px;
      opacity:0;
      transform: translateY(24px);
      margin: 2em 0;
    }

    .score{
      width: 20%;
      min-width: 100px;
      text-align:center;
    }

    .ring{
      width:100%;
      height:auto;
      margin:0;
      position:relative;
    }

    .ring svg{
      transform: rotate(-90deg);
      overflow: visible;
    }

    .ring .bg{
      fill:none;
      stroke:rgba(255,255,255,.10);
      stroke-width:10;
    }

    .ring .progress{
      fill:none;
      stroke:var(--green);
      stroke-width:10;
      stroke-linecap:round;
      stroke-dasharray:314;
      stroke-dashoffset:314;
      filter: drop-shadow(0 0 8px rgba(103,214,75,.22));
    }

    .score-value {
      position: absolute; inset: 0;
      display: block; width: 100%; height: 100%; font-size: 24px;
      height: 118%; color:var(--green);line-height: 317%;
    }

    .score-label{
      font-size:12px;
      color:var(--muted);
    }

    .outro{
      max-width: 980px;
      padding: 12vw 6vw;
      margin: 0 auto;
      text-align:center;
    }

    .outro h2{
      margin:0 0 14px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(34px, 5vw, 64px);
      font-weight:400;
      letter-spacing:-0.03em;
    }

    .outro p{
      margin:0 auto;
      max-width:720px;
      color:var(--muted);
      font-size:18px;
      line-height:1.6;
    }