:root{
    --bg:#111318;
    --panel:#181b21;
    --panel-2:#1f232b;
    --line:rgba(255,255,255,0.09);
    --text:#eef0ee;
    --text-dim:#9aa0a6;
    --chroma:#2FE07A;
    --chroma-dim:rgba(47,224,122,0.14);
    --danger:#ff6b6b;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',system-ui,sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Space Grotesk',system-ui,sans-serif;
    font-weight:700;
    margin:0 0 .5em 0;
    letter-spacing:-0.01em;
  }
  .mono{font-family:'JetBrains Mono',monospace;}
  a{color:var(--chroma);}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

  /* NAV */
  nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 24px;border-bottom:1px solid var(--line);
    position:sticky;top:0;background:rgba(17,19,24,0.85);backdrop-filter:blur(10px);z-index:20;
  }
  .logo{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk';font-weight:700;font-size:18px;}
  .logo-mark{
    width:22px;height:22px;border-radius:5px;
    background:
      linear-gradient(135deg, var(--chroma) 50%, transparent 50%),
      repeating-conic-gradient(#3a3f47 0% 25%, #2a2d33 0% 50%) 50%/8px 8px;
    box-shadow:0 0 0 1px var(--line);
  }
  nav .tag{color:var(--text-dim);font-size:13px;}

  /* HERO */
  header.hero{padding:64px 0 40px;text-align:center;}
  .eyebrow{
    display:inline-block;font-family:'JetBrains Mono';font-size:12px;color:var(--chroma);
    background:var(--chroma-dim);border:1px solid rgba(47,224,122,0.3);
    padding:5px 12px;border-radius:100px;margin-bottom:20px;letter-spacing:.02em;
  }
  h1{font-size:clamp(32px,5vw,52px);max-width:780px;margin:0 auto 16px;}
  .hero-sub{color:var(--text-dim);font-size:17px;max-width:600px;margin:0 auto;}

  /* TOOL */
  .tool{
    max-width:820px;margin:44px auto 0;background:var(--panel);
    border:1px solid var(--line);border-radius:20px;padding:28px;
  }
  .stage{
    position:relative;border-radius:14px;overflow:hidden;
    min-height:340px;
    background:
      repeating-conic-gradient(#2b2f36 0% 25%, #22252b 0% 50%) 50%/22px 22px;
    border:1px dashed var(--line);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:border-color .15s ease;
  }
  .stage.drag-over{border-color:var(--chroma);}
  .stage canvas{max-width:100%;max-height:420px;display:none;}
  .placeholder{
    text-align:center;color:var(--text-dim);padding:40px;
  }
  .placeholder svg{margin-bottom:12px;opacity:.7;}
  .placeholder strong{color:var(--text);display:block;margin-bottom:4px;font-size:15px;}
  .placeholder span{font-size:13px;}

  .progress-wrap{
    display:none;position:absolute;inset:0;background:rgba(17,19,24,.72);
    align-items:center;justify-content:center;flex-direction:column;gap:10px;
  }
  .progress-wrap.active{display:flex;}
  .spinner{
    width:34px;height:34px;border-radius:50%;
    border:3px solid rgba(47,224,122,.25);border-top-color:var(--chroma);
    animation:spin .8s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .progress-text{font-family:'JetBrains Mono';font-size:12px;color:var(--chroma);}

  .controls{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;}
  .btn{
    flex:1;min-width:150px;
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 18px;border-radius:11px;border:1px solid var(--line);
    font-family:'Inter';font-weight:600;font-size:14.5px;cursor:pointer;
    background:var(--panel-2);color:var(--text);
    transition:transform .12s ease, border-color .12s ease, opacity .12s ease;
  }
  .btn:hover:not(:disabled){border-color:rgba(255,255,255,0.25);transform:translateY(-1px);}
  .btn:disabled{opacity:.4;cursor:not-allowed;}
  .btn-primary{background:var(--chroma);color:#0b1410;border-color:var(--chroma);}
  .btn-primary:hover:not(:disabled){background:#3dfb92;}
  .btn svg{width:17px;height:17px;flex-shrink:0;}
  #fileInput{display:none;}

  .meta-row{
    display:flex;justify-content:space-between;margin-top:14px;
    font-family:'JetBrains Mono';font-size:11.5px;color:var(--text-dim);
    flex-wrap:wrap;gap:6px;
  }
  .sensitivity{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13px;color:var(--text-dim);}
  .sensitivity input{accent-color:var(--chroma);flex:1;}

  /* SECTIONS */
  section{padding:64px 0;border-top:1px solid var(--line);}
  section h2{font-size:clamp(24px,3vw,32px);text-align:center;margin-bottom:10px;}
  .section-sub{text-align:center;color:var(--text-dim);max-width:560px;margin:0 auto 40px;}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .step{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;}
  .step-num{
    font-family:'JetBrains Mono';color:var(--chroma);font-size:13px;
    border:1px solid rgba(47,224,122,.35);width:30px;height:30px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  }
  .step h3{font-size:16px;margin-bottom:6px;}
  .step p{color:var(--text-dim);font-size:14px;margin:0;}

  .features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  .feature{padding:20px;border-radius:14px;background:var(--panel);border:1px solid var(--line);}
  .feature h3{font-size:15px;margin-bottom:6px;display:flex;align-items:center;gap:8px;}
  .feature h3::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--chroma);flex-shrink:0;}
  .feature p{color:var(--text-dim);font-size:13.5px;margin:0;}

  .usecases{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
  .usecases span{
    font-size:13.5px;padding:9px 16px;border-radius:100px;
    background:var(--panel-2);border:1px solid var(--line);color:var(--text-dim);
  }

  .faq-item{border-bottom:1px solid var(--line);padding:18px 0;}
  .faq-q{
    display:flex;justify-content:space-between;align-items:center;cursor:pointer;
    font-weight:600;font-size:15px;
  }
  .faq-q::after{content:"+";color:var(--chroma);font-size:20px;transition:transform .15s ease;}
  .faq-item.open .faq-q::after{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .2s ease;color:var(--text-dim);font-size:14px;}
  .faq-item.open .faq-a{max-height:200px;padding-top:10px;}

  footer{padding:36px 0 60px;text-align:center;color:var(--text-dim);font-size:13px;}
  footer a{color:var(--text-dim);text-decoration:underline;}

  @media (max-width:720px){
    .steps,.features{grid-template-columns:1fr;}
  }