/* FAIMA Website-Check — Corporate Gold, scoped */
.faima-wcheck {
  --bg: #07060a;
  --bg1: #0e0c11;
  --bg2: #161318;
  --bg3: #1e1b22;
  --t1: #ffffff;
  --t2: #ede8da;
  --t3: #b8b0a0;
  --t4: #786e5e;
  --g: #2ec4b6;
  --g2: #5eead4;
  --g3: #f0d878;
  --M: "Montserrat", system-ui, sans-serif;
  --card:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09);
  --text:#f3f7ff;
  --muted:#b8b0a0;
  --primary:#2ec4b6;
  --secondary:#5eead4;
  --accent:#f0d878;
  --success:#22c55e;
  --danger:#ef4444;
  --radius:24px;
  --shadow:0 20px 70px rgba(0,0,0,.38);
}

    .faima-wcheck *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
    .faima-wcheck-inner{margin:0;padding:0}
    .faima-wcheck-inner{
      min-height:100vh;
      color:var(--text);
      font-family:var(--M),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background:
        radial-gradient(circle at 10% 10%, rgba(46,196,182,.18), transparent 24%),
        radial-gradient(circle at 90% 8%, rgba(223,192,106,.18), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(240,216,120,.10), transparent 22%),
        linear-gradient(180deg,var(--bg) 0%, var(--bg1) 55%, var(--bg) 100%);
      padding:18px;
    }

    .app{
      max-width:1100px;
      margin:0 auto;
    }

    .hero{
      padding:22px 0 18px;
      text-align:center;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 14px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      color:var(--t2);
      font-size:13px;
      margin-bottom:14px;
      backdrop-filter: blur(10px);
    }

    h1{
      margin:0 0 10px;
      font-size:clamp(30px, 6vw, 58px);
      line-height:1.02;
      letter-spacing:-.04em;
    }

    .hero p{
      margin:0 auto;
      max-width:760px;
      color:var(--muted);
      line-height:1.6;
      font-size:16px;
    }

    .shell{
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
      border:1px solid var(--line);
      border-radius:32px;
      box-shadow:var(--shadow);
      overflow:hidden;
      backdrop-filter: blur(12px);
    }

    .topbar{
      padding:18px;
      display:flex;
      gap:12px;
      border-bottom:1px solid var(--line);
      background:rgba(255,255,255,.025);
    }

    .url-wrap{
      position:relative;
      flex:1;
    }

    .url-icon{
      position:absolute;
      left:16px;
      top:50%;
      transform:translateY(-50%);
      opacity:.8;
      font-size:18px;
    }

    .url{
      width:100%;
      height:58px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.11);
      background:var(--bg2);
      color:#fff;
      padding:0 18px 0 46px;
      font-size:16px;
      outline:none;
      transition:.2s ease;
    }

    .url:focus{
      border-color:rgba(46,196,182,.6);
      box-shadow:0 0 0 4px rgba(46,196,182,.12);
    }

    .start{
      height:58px;
      min-width:210px;
      border:none;
      border-radius:18px;
      background:linear-gradient(135deg, var(--primary), var(--secondary));
      color:white;
      font-weight:800;
      font-size:15px;
      cursor:pointer;
      box-shadow:0 16px 40px rgba(46,196,182,.22);
      transition:.18s ease;
    }

    .start:active{transform:scale(.99)}
    .start[disabled]{opacity:.6;cursor:not-allowed}

    .content{
      padding:18px;
    }

    .error{
      margin-bottom:16px;
      padding:14px 16px;
      border-radius:16px;
      border:1px solid rgba(239,68,68,.24);
      background:rgba(239,68,68,.12);
      color:#ffd3d3;
    }

    .hidden{display:none!important}

    .grid-intro{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
    }

    .mini-card, .loading, .result-shell, .analysis, .preview{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.07);
      border-radius:22px;
    }

    .mini-card{
      padding:16px;
    }

    .mini-icon{
      width:42px;height:42px;border-radius:14px;
      display:grid;place-items:center;
      background:rgba(46,196,182,.12);
      border:1px solid rgba(46,196,182,.18);
      margin-bottom:12px;
      font-size:18px;
    }

    .mini-card strong{
      display:block;
      font-size:17px;
      margin-bottom:6px;
    }

    .mini-card p{
      margin:0;
      color:var(--muted);
      line-height:1.55;
      font-size:14px;
    }

    .loading{
      padding:20px;
    }

    .loading-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:12px;
      margin-bottom:14px;
    }

    .loading-head strong{
      font-size:22px;
      display:block;
      margin-bottom:6px;
    }

    .loading-head p{
      margin:0;
      color:var(--muted);
      line-height:1.55;
      font-size:14px;
    }

    .percent{
      font-size:28px;
      font-weight:900;
    }

    .progress{
      height:16px;
      background:var(--bg2);
      border:1px solid rgba(255,255,255,.08);
      border-radius:999px;
      overflow:hidden;
    }

    .bar{
      height:100%;
      width:0%;
      background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
      transition:width .22s ease;
      position:relative;
    }

    .bar::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
      animation:shine 1.2s linear infinite;
    }

    @keyframes shine{
      0%{transform:translateX(-100%)}
      100%{transform:translateX(100%)}
    }

    .steps{
      display:grid;
      gap:10px;
      margin-top:16px;
    }

    .step{
      padding:12px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.025);
      border:1px solid rgba(255,255,255,.06);
      color:var(--muted);
      font-size:14px;
    }

    .step.active{
      background:rgba(46,196,182,.08);
      border-color:rgba(46,196,182,.28);
      color:#fff;
    }

    .result-shell{
      padding:18px;
    }

    .result-grid{
      display:grid;
      grid-template-columns:1.06fr .94fr;
      gap:18px;
    }

    .card-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      padding:14px 16px;
      border-bottom:1px solid rgba(255,255,255,.07);
    }

    .card-head strong{font-size:16px}
    .tag{
      font-size:12px;
      color:var(--t2);
      background:rgba(46,196,182,.12);
      border:1px solid rgba(46,196,182,.2);
      padding:6px 10px;
      border-radius:999px;
    }

    .screens{
      display:grid;
      grid-template-columns:1fr 1fr;
      min-height:500px;
    }

    .screen{
      background:var(--bg2);
    }

    .screen + .screen{
      border-left:1px solid rgba(255,255,255,.08);
    }

    .browserbar{
      display:flex;
      align-items:center;
      gap:7px;
      padding:10px 12px;
      background:var(--bg2);
      border-bottom:1px solid rgba(255,255,255,.08);
      color:var(--t4);
      font-size:12px;
      overflow:hidden;
    }

    .browserbar span{
      width:10px;height:10px;border-radius:50%;
      background:rgba(255,255,255,.16);
      flex:0 0 10px;
    }

    .browser-url{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      margin-left:8px;
    }

    .browser.faima-wcheck-inner{
      padding:16px;
    }

    .oldhero{
      background:linear-gradient(180deg,#dce3ec,#eef2f7);
      color:#111827;
      border-radius:18px;
      padding:18px;
    }

    .oldhero h3{
      margin:0 0 8px;
      font-size:22px;
    }

    .old-lines{
      display:grid;
      gap:8px;
      margin-top:12px;
    }

    .old-line{
      height:12px;
      border-radius:999px;
      background:#cfd8e4;
    }

    .old-boxes{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
      margin-top:14px;
    }

    .old-box{
      height:84px;
      border-radius:14px;
      background:#e6ebf3;
      border:1px solid rgba(0,0,0,.05);
    }

    .newhero{
      background:
        radial-gradient(circle at 86% 12%, rgba(46,196,182,.32), transparent 18%),
        radial-gradient(circle at 12% 10%, rgba(223,192,106,.24), transparent 20%),
        linear-gradient(180deg,var(--bg2),var(--bg));
      color:#fff;
      border-radius:18px;
      padding:18px;
      border:1px solid rgba(255,255,255,.08);
    }

    .newhero h3{
      margin:0 0 8px;
      font-size:30px;
      line-height:1.02;
      letter-spacing:-.03em;
    }

    .newhero p{
      margin:0 0 14px;
      color:var(--t2);
      line-height:1.6;
      font-size:14px;
    }

    .cta-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:14px;
    }

    .cta-row button{
      border:none;
      border-radius:12px;
      padding:12px 14px;
      font-weight:800;
      color:white;
      background:linear-gradient(135deg,var(--primary),var(--secondary));
      font-size:14px;
    }

    .cta-row .secondary{
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
    }

    .new-stats{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
    }

    .stat{
      padding:12px;
      border-radius:14px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
    }

    .stat strong{
      display:block;
      font-size:17px;
      margin-bottom:4px;
    }

    .stat span{
      color:var(--t3);
      font-size:12px;
      line-height:1.45;
    }

    .analysis{
      padding:16px;
    }

    .scorebox{
      display:flex;
      gap:16px;
      align-items:center;
      margin-bottom:16px;
    }

    .score{
      width:112px;height:112px;border-radius:50%;
      background:conic-gradient(var(--success) 0deg 300deg, rgba(255,255,255,.08) 300deg 360deg);
      display:grid;place-items:center;
      flex:0 0 112px;
    }

    .score span{
      width:82px;height:82px;border-radius:50%;
      display:grid;place-items:center;
      background:var(--bg3);
      border:1px solid rgba(255,255,255,.08);
      font-size:28px;
      font-weight:900;
    }

    .scorecopy strong{
      display:block;
      font-size:20px;
      margin-bottom:6px;
    }

    .scorecopy p{
      margin:0;
      color:var(--muted);
      line-height:1.55;
      font-size:14px;
    }

    .kpis{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
      margin-bottom:16px;
    }

    .kpi{
      padding:12px;
      border-radius:14px;
      background:rgba(255,255,255,.025);
      border:1px solid rgba(255,255,255,.06);
    }

    .kpi small{
      display:block;
      color:var(--t4);
      margin-bottom:6px;
      font-size:12px;
    }

    .kpi strong{
      font-size:16px;
    }

    .tips{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }

    .tips li{
      padding:12px 14px;
      border-radius:14px;
      background:rgba(255,255,255,.025);
      border:1px solid rgba(255,255,255,.06);
      color:var(--t3);
      line-height:1.5;
      font-size:14px;
    }

    .footer-note{
      margin-top:16px;
      color:var(--muted);
      font-size:13px;
      line-height:1.55;
    }

    .extras{
      margin-top:18px;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
    }

    .extra{
      padding:16px;
      border-radius:18px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.07);
    }

    .extra strong{
      display:block;
      margin-bottom:6px;
      font-size:16px;
    }

    .extra p{
      margin:0;
      color:var(--muted);
      line-height:1.55;
      font-size:14px;
    }

    @media (max-width:980px){
      .topbar{flex-direction:column}
      .start{width:100%}
      .grid-intro,.result-grid,.screens,.kpis,.new-stats,.extras,.old-boxes{grid-template-columns:1fr}
      .screen + .screen{border-left:0;border-top:1px solid rgba(255,255,255,.08)}
    }

    @media (max-width:640px){
      .faima-wcheck-inner{padding:10px}
      .shell{border-radius:24px}
      .hero{padding:20px 14px 12px}
      .topbar,.content{padding:14px}
      .loading-head{flex-direction:column;align-items:flex-start}
      .percent{font-size:24px}
      .scorebox{align-items:flex-start}
      .score{width:96px;height:96px;flex-basis:96px}
      .score span{width:70px;height:70px;font-size:24px}
    }