:root{

  --bg:#05060a;

  --panel:
    rgba(255,255,255,.05);

  --border:
    rgba(255,255,255,.08);

  --text:#ffffff;

  --muted:#9ca3af;

  --purple:#8b5cf6;

  --cyan:#06b6d4;

}


/* =========================
   RESET
========================= */

*{

  margin:0;
  padding:0;

  box-sizing:border-box;

  -webkit-user-drag:none;

}


/* =========================
   BODY
========================= */

html,
body{

  width:100%;

  min-height:100%;

  overflow-x:hidden;

  background:
    radial-gradient(
      circle at top,
      #111827 0%,
      #050505 100%
    );

  color:var(--text);

  font-family:
    Inter,
    system-ui,
    sans-serif;

}


body{

  padding:32px;

}


/* =========================
   NOISE
========================= */

.noise{

  position:fixed;

  inset:0;

  opacity:.03;

  pointer-events:none;

  background-image:
    radial-gradient(
      #ffffff 1px,
      transparent 1px
    );

  background-size:4px 4px;

}


/* =========================
   APP
========================= */

.app{

  width:100%;

  max-width:1500px;

  margin:auto;

}


/* =========================
   HERO
========================= */

.hero{

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:12px;

  margin-bottom:30px;

}


.hero h1{

  font-size:
    clamp(2.4rem,5vw,4.5rem);

  letter-spacing:-2px;

}


.hero p{

  color:var(--muted);

  font-size:1.05rem;

}


/* =========================
   GLASS
========================= */

.glass{

  background:var(--panel);

  border:
    1px solid var(--border);

  backdrop-filter:blur(16px);

  border-radius:28px;

  box-shadow:
    0 10px 40px rgba(0,0,0,.35);

}


/* =========================
   CONTROLS
========================= */

.controls{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

  gap:22px;

  padding:26px;

  margin-bottom:30px;

}


.control-group{

  display:flex;

  flex-direction:column;

  gap:12px;

}


.control-group label{

  color:#d1d5db;

}


/* =========================
   INPUTS
========================= */

select,
input[type="range"]{

  width:100%;

}


select{

  background:#0f172a;

  color:white;

  border:
    1px solid rgba(255,255,255,.1);

  border-radius:16px;

  padding:14px;

  outline:none;

  transition:.25s;

}


select:hover{

  border-color:#8b5cf6;

}


/* =========================
   BUTTON
========================= */

.invert-btn{

  border:none;

  outline:none;

  cursor:pointer;

  padding:14px 18px;

  border-radius:16px;

  color:white;

  font-weight:700;

  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #4f46e5
    );

  transition:.25s;

  box-shadow:
    0 10px 30px
    rgba(124,58,237,.35);

}


.invert-btn:hover{

  transform:translateY(-2px);

}


/* =========================
   FRET VALUE
========================= */

#fretValue{

  color:#a78bfa;

  font-weight:700;

}


/* =========================
   NECK
========================= */

.neck-wrapper{

  position:relative;

  overflow:hidden;

  padding:26px;

}


.neck-scroll{

  width:100%;

  overflow:hidden;

}


#fretboard{

  width:100%;

  height:auto;

  display:block;

}


/* =========================
   WATERMARK
========================= */

.watermark{

  position:absolute;

  right:20px;
  bottom:12px;

  opacity:.07;

  letter-spacing:4px;

  font-size:11px;

  pointer-events:none;

}


/* =========================
   ADSENSE
========================= */

.ad-section{

  margin:30px 0;

}


.ad-placeholder{

  width:100%;

  min-height:110px;

  border-radius:24px;

  display:flex;

  align-items:center;
  justify-content:center;

  background:
    rgba(255,255,255,.03);

  border:
    1px dashed rgba(255,255,255,.08);

  color:
    rgba(255,255,255,.28);

}


/* =========================
   SUPPORT
========================= */

.support-section{

  margin-top:30px;

}


.support-card{

  padding:34px;

  text-align:center;

}


.support-card h3{

  font-size:1.5rem;

  margin-bottom:12px;

}


.support-card p{

  color:var(--muted);

  margin-bottom:24px;

}


.support-btn{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:14px 28px;

  border-radius:18px;

  text-decoration:none;

  color:white;

  font-weight:700;

  background:
    linear-gradient(
      135deg,
      #06b6d4,
      #2563eb
    );

  transition:.25s;

}


.support-btn:hover{

  transform:translateY(-2px);

}


/* =========================
   SEO CONTENT
========================= */

.seo-content{

  margin-top:30px;

  padding:32px;

}


.seo-content h2{

  margin-bottom:18px;

}


.seo-content p{

  color:var(--muted);

  line-height:1.7;

  margin-bottom:14px;

}


/* =========================
   MOBILE
========================= */

@media(max-width:768px){

  body{

    padding:18px;

  }

  .controls{

    grid-template-columns:1fr;

  }

}


/* =========================
   HERO BUTTONS
========================= */

.hero-buttons{

  display:flex;

  align-items:center;

  gap:14px;

  margin-top:10px;

}


/* =========================
   ABOUT BUTTON
========================= */

.about-btn{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:13px 22px;

  border-radius:16px;

  text-decoration:none;

  color:white;

  font-weight:700;

  background:
    linear-gradient(
      135deg,
      #111827,
      #1f2937
    );

  border:
    1px solid rgba(255,255,255,.08);

  transition:.25s;

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.25);

}


.about-btn:hover{

  transform:translateY(-2px);

  border-color:
    rgba(139,92,246,.45);

  box-shadow:
    0 14px 40px
    rgba(139,92,246,.18);

}



/* =========================
   ABOUT PAGE
========================= */

.about-page{

  display:grid;

  grid-template-columns:
    320px 1fr;

  gap:42px;

  padding:42px;

  margin-top:30px;

}


.about-photo-area{

  display:flex;

  align-items:flex-start;

  justify-content:center;

}


.about-photo{

  width:100%;

  max-width:300px;

  border-radius:28px;

  object-fit:cover;

  border:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    0 20px 60px rgba(0,0,0,.45);

}


.about-content h1{

  font-size:
    clamp(2rem,5vw,4rem);

  margin-bottom:18px;

}


.about-content p{

  color:var(--muted);

  line-height:1.9;

  margin-bottom:18px;

}


.about-tag{

  display:inline-flex;

  padding:10px 16px;

  border-radius:999px;

  margin-bottom:22px;

  background:
    rgba(139,92,246,.12);

  border:
    1px solid rgba(139,92,246,.18);

  color:#c4b5fd;

  font-size:.82rem;

  letter-spacing:1px;

}


.about-list{

  display:grid;

  gap:12px;

  margin:26px 0;

}


.about-item{

  padding:14px 18px;

  border-radius:18px;

  background:
    rgba(255,255,255,.03);

  border:
    1px solid rgba(255,255,255,.05);

}


.about-final{

  margin-top:30px;

  font-size:1.08rem;

}


/* =========================
   SOCIAL
========================= */

.social-buttons{

  display:flex;

  flex-wrap:wrap;

  gap:14px;

  margin-top:30px;

}


.social-btn{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:14px 22px;

  border-radius:16px;

  text-decoration:none;

  color:white;

  font-weight:700;

  background:
    linear-gradient(
      135deg,
      #111827,
      #1f2937
    );

  border:
    1px solid rgba(255,255,255,.08);

  transition:.25s;

}


.social-btn:hover{

  transform:translateY(-2px);

  border-color:
    rgba(139,92,246,.35);

}


/* =========================
   CONTACT
========================= */

.contact-btn{

  border:none;

  outline:none;

  cursor:pointer;

  margin-top:26px;

  padding:16px 24px;

  border-radius:18px;

  color:white;

  font-weight:700;

  background:
    linear-gradient(
      135deg,
      #06b6d4,
      #2563eb
    );

  transition:.25s;

}


.contact-btn:hover{

  transform:translateY(-2px);

}


.back-btn{

  display:inline-flex;

  margin-top:22px;

  color:#9ca3af;

  text-decoration:none;

}


/* =========================
   MODAL
========================= */

.contact-modal{

  position:fixed;

  inset:0;

  display:flex;

  align-items:center;
  justify-content:center;

  background:
    rgba(0,0,0,.6);

  opacity:0;

  visibility:hidden;

  transition:.25s;

  z-index:999;

}


.show-modal{

  opacity:1;

  visibility:visible;

}


.contact-box{

  width:90%;

  max-width:420px;

  padding:34px;

  text-align:center;

}


.contact-box h2{

  margin-bottom:14px;

}


.contact-box p{

  color:var(--muted);

  margin-bottom:24px;

}


.close-modal{

  margin-top:18px;

  border:none;

  background:none;

  color:#9ca3af;

  cursor:pointer;

}


/* =========================
   MOBILE
========================= */

@media(max-width:900px){

  .about-page{

    grid-template-columns:1fr;

  }

  .about-photo-area{

    justify-content:flex-start;

  }

}