

    .frx-features{
    --frx-bg-0:#08080c;
    --frx-bg-1:#0d0d15;
    --frx-surface:#121220;
    --frx-border:rgba(255,255,255,0.07);
    --frx-border-hover:rgba(139,110,255,0.35);
    --frx-text-0:#f4f3fa;
    --frx-text-1:#a9a8c0;
    --frx-text-2:#75748f;
    --frx-violet:#8b6eff;

    box-sizing:border-box;
    font-family:'Inter',sans-serif;
    background:
      radial-gradient(1200px 600px at 20% -10%, rgba(139,110,255,0.16), transparent 60%),
      radial-gradient(1000px 500px at 90% 0%, rgba(255,93,162,0.08), transparent 55%),
      var(--frx-bg-0);
    color:var(--frx-text-0);
    padding:96px 24px 72px;
  }
  .frx-features *{box-sizing:border-box;}
  .frx-features .frx-wrap{max-width:1360px;margin:0 auto;}

  /* Header */
  .frx-features .frx-header{text-align:center;margin-bottom:64px;}
  .frx-features .frx-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Inter',sans-serif;
    font-size:13px;font-weight:700;letter-spacing:0.14em;
    color:var(--frx-violet);
    background:rgba(139,110,255,0.1);
    border:1px solid rgba(139,110,255,0.25);
    padding:7px 16px;border-radius:999px;
    text-transform:uppercase;
    margin-bottom:24px;
  }
  .frx-features .frx-eyebrow svg{width:14px;height:14px;stroke:var(--frx-violet);}
  .frx-features .frx-title{
    font-family:'Sora',sans-serif;
    font-weight:800;
    font-size:52px;
    line-height:1.15;
    letter-spacing:-0.01em;
    color:var(--frx-text-0);
    margin:0;
  }
  .frx-features .frx-title .frx-grad{
    background:linear-gradient(94deg,#a78bfa 0%, #8b6eff 45%, #ff5da2 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .frx-features .frx-subtitle{
    max-width:620px;margin:22px auto 0;
    font-size:16.5px;line-height:1.6;
    color:var(--frx-text-1);
    font-weight:400;
  }

  /* Grid */
  .frx-features .frx-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:14px;
    margin-bottom:28px;
  }
  .frx-features .frx-card{
          place-items: center!important;
    display: grid!important;
    background:linear-gradient(180deg, var(--frx-surface) 0%, var(--frx-bg-1) 100%);
    border:1px solid var(--frx-border);
    border-radius:18px;
    padding:22px 18px 24px;
    position:relative;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .frx-features .frx-card:hover{
    transform:translateY(-4px);
    border-color:var(--frx-border-hover);
    box-shadow:0 16px 40px -12px rgba(109,79,224,0.35);
  }
  .frx-features .frx-icon{
    width:52px;height:52px;
    padding:6px;
    border-radius:50px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:18px;
    position:relative;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.15), 0 6px 16px -6px rgba(0,0,0,0.5);
  }
  .frx-features .frx-icon svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8;}
  .frx-features .frx-icon--violet{background:white!important;}
  .frx-features .frx-icon--violet-soft{background:white!important;}
  .frx-features .frx-icon--green{background:white!important;}
  .frx-features .frx-icon--pink{background:white!important;}
  .frx-features .frx-icon--dark{background:white!important;}
  .frx-features .frx-icon--split{background:white!important;}

  .frx-features .frx-icon-badge{
    position:absolute;top:-6px;right:-6px;
    width:22px;height:22px;border-radius:999px;
    background:linear-gradient(140deg,#ff6fb0,#e63f8f);
    color:#fff;font-size:11px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 3px 8px rgba(230,63,143,0.5);
    font-family:'Inter',sans-serif;
  }
  .frx-features .frx-card-title{
          text-align: center!important;
    font-family:'Sora',sans-serif;
    font-size:15.5px;font-weight:700;
    color:var(--frx-text-0);
    margin:0 0 8px;
    letter-spacing:-0.01em;
  }
  .frx-features .frx-card-desc{
          text-align: center!important;
    font-size:13px;
    line-height:1.55;
    color:var(--frx-text-2);
    font-weight:400;
    margin:0;
  }

  /* Banner */
  .frx-features .frx-banner{
    margin-top:34px;
    background:linear-gradient(100deg,#5a3fc0 0%, #7d55e8 45%, #9a5be0 100%);
    border-radius:24px;
    padding:34px 44px;
    display:flex;
    align-items:center;
    gap:28px;
    position:relative;
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(93,53,220,0.55);
  }
  .frx-features .frx-banner::after{
    content:'';
    position:absolute;inset:0;
    background:radial-gradient(500px 300px at 85% -20%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events:none;
  }
  .frx-features .frx-banner-icon{
    flex:0 0 auto;
    width:148px!important;height:148px!important;
    border-radius:18px;
    display:flex;align-items:center;justify-content:center;
  }
  .frx-features .frx-banner-icon svg{width:38px;height:38px;stroke:#fff;stroke-width:1.6;fill:none;}
  .frx-features .frx-banner-text{flex:1 1 auto;min-width:220px;}
  .frx-features .frx-banner-title{
    font-family:'Sora',sans-serif;
    font-size:24px;font-weight:700;color:#fff;
    margin:0 0 8px;
  }
  .frx-features .frx-banner-desc{
    font-size:14.5px;color:rgba(255,255,255,0.82);
    line-height:1.55;max-width:520px;
    margin:0;
  }
  .frx-features .frx-banner-actions{display:flex;gap:12px;flex:0 0 auto;position:relative;z-index:1;}
  .frx-features .frx-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:13px 24px;
    border-radius:50px;
    font-family:'Inter',sans-serif;
    font-size:14.5px;font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    border:none;
  }
  .frx-features .frx-btn--primary{
    background:#0d0d15;
    color:#fff;
    box-shadow:0 8px 18px -6px rgba(0,0,0,0.5);
  }
  .frx-features .frx-btn--primary svg{width:16px;height:16px;stroke:#fff;}
  .frx-features .frx-btn--outline{
    background:rgba(255,255,255,0.06);
    color:#fff;
    border:1px solid rgba(255,255,255,0.35);
  }
  .frx-features .frx-btn--outline svg{width:16px;height:16px;stroke:#fff;fill:#fff;}

  @media (max-width:1180px){ .frx-features .frx-grid{grid-template-columns:repeat(4,1fr);} }
  @media (max-width:760px){
    .frx-features{padding:64px 16px 48px;}
    .frx-features .frx-grid{grid-template-columns:repeat(2,1fr);}
    .frx-features .frx-title{font-size:34px;}
    .frx-features .frx-banner{flex-wrap:wrap;padding:28px;}
    .frx-features .frx-banner-actions{width:100%;}
    .frx-features .frx-btn{flex:1;justify-content:center;}
  }

