:root{
    --bg:#fff;
    --panel:#14171c;
    --panel-2:#1b1f26;
    --line:#262b33;
    --text:#15171a;
    --muted:#c1c9d9;
    --amber:#ffb020;
    --amber-dim:#7a5417;
    --teal:#3ddc97;
    --mono:'IBM Plex Mono','Courier New',monospace;
    --body:'Inter',system-ui,-apple-system,sans-serif;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    min-height:100vh;
    background:var(--bg);
    color:var(--text);
    font-family:var(--body);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:0px 16px;
    padding-top: 16px;
    flex-direction: column;
  }

  .bg-fixed{
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("../images/neangart-watercolor-5062356_1920.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

  .wrap{width:100%;max-width:920px;}
  .eyebrow{
    font-family:var(--mono);
    font-size:20px;
    letter-spacing:0.18em;
    color:var(--amber);
    text-transform:uppercase;
    margin-bottom:6px;
    font-weight: 900;
  }
  h1{
    font-family:var(--mono);
    font-size:clamp(28px,4vw,40px);
    font-weight:700;
    margin:0 0 4px 0;
    letter-spacing:-0.01em;
  }
  .sub{color:var(--muted);font-size:14px;margin-bottom:32px;}
  .sub2{color:var(--text);font-size:18px;margin-bottom:32px;font-weight: 500;}

  .grid{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:24px;
  }
  @media (max-width:720px){ .grid{grid-template-columns:1fr;} }

  .panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:10px;
    padding:24px;
  }

  label{
    display:block;
    font-size:12px;
    font-family:var(--mono);
    color:var(--muted);
    letter-spacing:0.04em;
    text-transform:uppercase;
    margin-bottom:8px;
  }
  input[type=text], select{
    width:100%;
    background:var(--panel-2);
    border:1px solid var(--line);
    color:var(--amber);
    border-radius:6px;
    padding:11px 12px;
    font-size:14px;
    font-family:var(--body);
  }
  input[type=text]:focus, select:focus{
    outline:none;
    border-color:var(--amber);
  }
  .field{margin-bottom:18px;}

  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

  input[type=range]{
    width:100%;
    accent-color:var(--amber);
  }
  .range-val{font-family:var(--mono);color:var(--amber);font-size:13px;}

  button{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.03em;
    border-radius:10px;
    border:1px solid var(--amber);
    padding:11px 16px;
    cursor:pointer;
    transition:border-color 0.15s, transform 0.1s;
  }
  button:active{transform:scale(0.98);}
  .btn-primary{
    background:var(--amber);
    color:#1a1200;
    border-color:var(--amber);
    font-weight:600;
    width:100%;
  }
  .btn-primary:hover{background:#ffc04d;}
  .btn-secondary{
    background:transparent;
    color:var(--amber);
    width:100%;
    margin-top:8px;
  }
  .btn-secondary:hover{border-color:var(--muted);}
  .btn-secondary:disabled{opacity:0.4;cursor:not-allowed;}

  .file-row{display:flex;gap:8px;align-items:center;}
  .file-row button{flex-shrink:0;}
  .file-name{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  .preview-panel{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
  }
  .canvas-wrap{
    position:relative;
    width:260px;
    height:260px;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
  }
  .canvas-wrap.empty{background:var(--panel-2);border:1px dashed var(--line);}
  .empty-msg{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center;padding:20px;}
  canvas{display:block;max-width:100%;max-height:100%;}

  .scanline{
    position:absolute;
    left:0; right:0; top:0;
    height:3px;
    background:linear-gradient(90deg, transparent, var(--amber), transparent);
    box-shadow:0 0 8px 1px var(--amber);
    opacity:0;
    pointer-events:none;
  }
  .scanline.sweep{
    animation:sweep 0.9s ease-in-out;
  }
  @keyframes sweep{
    0%{ top:0; opacity:1; }
    90%{ opacity:1; }
    100%{ top:100%; opacity:0; }
  }

  .hint{font-size:12px;color:var(--muted);margin-top:16px;text-align:center;line-height:1.5;}
  .hint b{color:var(--teal);}

  .divider{height:1px;background:var(--line);margin:20px 0;}

footer {
    clear: both;
    position: fixed;
    bottom: 0px;
    background-color:var(--amber);
    color: var(--amber-dim);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.support-row{
  width:100%;
  max-width:920px;
  display:flex;
  justify-content:center;
  margin-top:20px;
}
.btn-support{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.03em;
  color:var(--amber);
  background:var(--panel);
  border:1px solid var(--amber-dim);
  border-radius:999px;
  padding:10px 20px;
  text-decoration:none;
  transition:border-color 0.15s, background 0.15s, transform 0.1s;
  text-align: center;
}

.btn-support:hover{
  border-color:var(--amber);
  background:var(--panel-2);
}
.btn-support:active{transform:scale(0.98);}

/* ===== FAQ Accordion ===== */
.faq{
  margin-top:32px;
  padding-bottom:100px; /* clears the fixed footer */
}
.faq h2{
  font-family:var(--mono);
  font-size:clamp(20px,3vw,26px);
  font-weight:700;
  margin:0 0 20px 0;
  letter-spacing:-0.01em;
  color:var(--text);
}

.accordion{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.faq-item{
  border-bottom:1px solid var(--line);
  overflow:hidden;
  border-radius:0;
  transition:border-radius 0.25s ease;
}
.faq-item.is-open{
  border-radius:10px;
}

.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:transparent;
  border:none;
  border-radius:0;
  text-align:left;
  padding:16px 20px;
  color:var(--text);
  font-family:var(--body);
  font-size:15px;
  font-weight:600;
  letter-spacing:normal;
  cursor:pointer;
}
.faq-question:hover{border-color:transparent;}

.faq-icon{
  font-family:var(--mono);
  font-size:18px;
  color:var(--amber);
  flex-shrink:0;
  transition:transform 0.2s ease;
}
.faq-question[aria-expanded="true"] .faq-icon{
  transform:rotate(45deg);
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.25s ease, padding 0.25s ease;
  padding:0 20px;
  background-color: rgba(0,0,0,0.55);
}
.faq-answer p{
  margin:0 0 18px 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  padding-top: 1em;
}
.faq-item.is-open .faq-answer{
  max-height:400px;
}

/* Highlighted trust/privacy answer */
.faq-item.faq-highlight{
  border-color:var(--teal);
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
}
.faq-item.faq-highlight .faq-question span:first-child{
  color:var(--teal);
}
.faq-item.faq-highlight .faq-icon{
  color:var(--teal);
}