/* PCMFlash Module Finder website (dark + neon + glass) */
:root{
  --bg0:#05070b; --bg1:#070b12;
  --line: rgba(255,255,255,.10);
  --text:#e8eefb; --muted: rgba(232,238,251,.68);
  --accent:#54ff8a; --accent2:#42d7ff;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:var(--sans); color:var(--text);
  background:
    radial-gradient(1200px 600px at 70% -20%, rgba(84,255,138,.18), transparent 60%),
    radial-gradient(900px 500px at 20% 10%, rgba(66,215,255,.14), transparent 55%),
    radial-gradient(600px 400px at 60% 110%, rgba(84,255,138,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}
a{color:inherit} code{font-family:var(--mono);background:rgba(84,255,138,.12);border:1px solid rgba(84,255,138,.22);padding:.12rem .35rem;border-radius:.5rem}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  padding:.9rem 1.25rem;
  border-bottom:1px solid var(--line);
  background: rgba(5,7,11,.72);
  backdrop-filter: blur(16px);
}
.brand{display:flex;gap:.85rem;align-items:center;text-decoration:none;min-width:280px}
.logo{width:46px;height:46px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.brand-name{font-weight:800;letter-spacing:.2px}
.brand-sub{display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--muted);font-family:var(--mono)}
.status-dot{width:10px;height:10px;border-radius:99px;background:var(--accent);box-shadow:0 0 0 0 rgba(84,255,138,.65);animation:pulse 1.4s infinite}
.status-dot.small{width:8px;height:8px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(84,255,138,.55)}70%{box-shadow:0 0 0 10px rgba(84,255,138,0)}100%{box-shadow:0 0 0 0 rgba(84,255,138,0)}}

.nav{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;justify-content:center}
.nav-link{text-decoration:none;font-weight:600;font-size:.95rem;color:rgba(232,238,251,.78);padding:.4rem .6rem;border-radius:.75rem;border:1px solid transparent}
.nav-link:hover{border-color:rgba(84,255,138,.25);background:rgba(84,255,138,.06)}
.nav-link.active{border-color:rgba(84,255,138,.35);background:rgba(84,255,138,.10);color:var(--text)}
.topbar-cta{display:flex;gap:.65rem;align-items:center}

.btn{cursor:pointer;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);padding:.62rem .95rem;border-radius:1rem;font-weight:700;letter-spacing:.2px;transition:transform .08s ease,border-color .2s ease,background .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{border-color:rgba(84,255,138,.42);background:linear-gradient(180deg, rgba(84,255,138,.17), rgba(84,255,138,.08));box-shadow:0 10px 28px rgba(84,255,138,.10)}
.btn-primary:hover{border-color:rgba(84,255,138,.65)}
.btn-ghost:hover{border-color:rgba(66,215,255,.35);background:rgba(66,215,255,.08)}
.btn-note{font-size:.8rem;color:var(--muted);margin-left:.45rem;font-weight:600}

main{max-width:1200px;margin:0 auto;padding:0 1.2rem 3.2rem}

.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:1.6rem;padding:2.2rem 0 1.2rem;align-items:start}
.tag{display:inline-flex;gap:.5rem;align-items:center;border:1px solid rgba(84,255,138,.30);background:rgba(84,255,138,.06);border-radius:999px;padding:.35rem .7rem;font-family:var(--mono);font-size:.85rem}
h1{margin:.9rem 0 .6rem;font-size:clamp(2.1rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.02em}
.accent{color:var(--accent);text-shadow:0 0 20px rgba(84,255,138,.18)}
.lead{color:rgba(232,238,251,.80);font-size:1.05rem;line-height:1.55;max-width:60ch}
.hero-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.1rem 0}
.hero-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;margin-top:1.2rem}
.badge{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:1.1rem;padding:.9rem;box-shadow:0 10px 28px rgba(0,0,0,.25)}
.badge-title{font-weight:800}
.badge-text{margin-top:.4rem;color:var(--muted);font-size:.92rem;line-height:1.45}
.note{margin-top:1.1rem;padding:.8rem 1rem;border-radius:1rem;border:1px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.03);max-width:520px}

.glass{background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.10);border-radius:1.35rem;box-shadow:var(--shadow)}
.card{padding:1.05rem}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.8rem;border-bottom:1px solid rgba(255,255,255,.10)}
.card-title{font-weight:800}
.chip{display:inline-flex;gap:.45rem;align-items:center;font-family:var(--mono);font-size:.85rem;padding:.35rem .55rem;border-radius:999px;border:1px solid rgba(84,255,138,.30);background:rgba(84,255,138,.08)}
.cube-wrap{padding:1.1rem 0 .6rem}
.cube-scene{position:relative;height:200px;display:flex;align-items:center;justify-content:center;perspective:900px}
.cube{position:relative;width:110px;height:110px;transform-style:preserve-3d;animation:spin 5.5s linear infinite;transform:translateY(-6px) rotateX(-30deg) rotateY(35deg)}
@keyframes spin{0%{transform:translateY(-6px) rotateX(-30deg) rotateY(35deg)}100%{transform:translateY(-6px) rotateX(-30deg) rotateY(395deg)}}
.face{position:absolute;inset:0;border-radius:14px;border:1px solid rgba(232,238,251,.22);background:linear-gradient(135deg, rgba(66,215,255,.26), rgba(84,255,138,.12));box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.f1{transform:translateZ(55px)} .f2{transform:rotateY(90deg) translateZ(55px)} .f3{transform:rotateY(180deg) translateZ(55px)}
.f4{transform:rotateY(-90deg) translateZ(55px)} .f5{transform:rotateX(90deg) translateZ(55px)} .f6{transform:rotateX(-90deg) translateZ(55px)}
.shadow{position:absolute;width:150px;height:45px;background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent 70%);filter:blur(2px);transform:translateY(92px)}
.card-body{padding-top:.85rem}
.code-block{font-family:var(--mono);border-radius:1rem;padding:.9rem;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22)}
.code-line{display:flex;gap:.55rem;line-height:1.7} .k{color:rgba(66,215,255,.92)} .v{color:rgba(232,238,251,.90)}
.mini-actions{display:flex;gap:.7rem;margin-top:.8rem}
.mini-link{font-family:var(--mono);font-size:.88rem;color:rgba(232,238,251,.80);text-decoration:none;border-bottom:1px dashed rgba(232,238,251,.25)}
.mini-link:hover{color:var(--text);border-bottom-color:rgba(84,255,138,.6)}
.hero-foot{margin-top:.7rem;color:var(--muted);font-family:var(--mono);font-size:.9rem}
.hero-foot a{color:rgba(84,255,138,.92)}

.section{padding:2.2rem 0 1.2rem}
.section-head h2{margin:0 0 .3rem;font-size:1.9rem}
.section-head h1{margin:0 0 .3rem}
.section-head p{margin:.15rem 0 0;color:rgba(232,238,251,.78);max-width:80ch;line-height:1.6}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;margin-top:1.2rem}
.feature{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:1.2rem;padding:1rem}
.feature-title{font-weight:800}
.feature-text{color:var(--muted);margin-top:.45rem;line-height:1.5}

.callout{margin-top:1.2rem;padding:1rem 1.15rem;border-radius:1.3rem;border:1px solid rgba(84,255,138,.26);background:rgba(84,255,138,.06)}
.callout-title{font-weight:900;margin-bottom:.4rem}
.callout-list{margin:.5rem 0 0 1.1rem;color:rgba(232,238,251,.86)}
.callout-list li{margin:.3rem 0}

.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;margin-top:1.2rem}
.shot{padding:0;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);border-radius:1.2rem;overflow:hidden;cursor:zoom-in;box-shadow:0 14px 40px rgba(0,0,0,.35);transition:transform .12s ease,border-color .2s ease}
.shot:hover{transform:translateY(-2px);border-color:rgba(84,255,138,.30)}
.shot img{width:100%;height:220px;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02)}

.pricing{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem;margin-top:1.1rem}
.price-card{padding:1.1rem}
.price-top{padding-bottom:.95rem;border-bottom:1px solid rgba(255,255,255,.10)}
.price-name{font-weight:900;font-size:1.2rem}
.price-amount{font-weight:900;font-size:3rem;letter-spacing:-.02em;margin-top:.2rem;color:var(--accent);text-shadow:0 0 30px rgba(84,255,138,.18)}
.price-sub{color:var(--muted);margin-top:.3rem}
.price-list{margin:1rem 0 0 0;padding:0;list-style:none;color:rgba(232,238,251,.88)}
.price-list li{display:flex;align-items:flex-start;gap:.55rem;margin:.55rem 0;line-height:1.4}
.tick{color:var(--accent);font-weight:900}
.price-actions{margin-top:1.05rem;display:flex;flex-direction:column;gap:.7rem}
.small-note{color:var(--muted);font-family:var(--mono);font-size:.9rem}

.faq{padding:1.1rem} .faq-title{font-weight:900;margin-bottom:.4rem}
details{border-top:1px solid rgba(255,255,255,.10);padding:.7rem 0} details:first-of-type{border-top:none}
summary{cursor:pointer;font-weight:700} details p{color:var(--muted);margin:.55rem 0 0;line-height:1.6}

.contact-card{padding:1rem 1.1rem}
.contact-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-top:1px solid rgba(255,255,255,.10)}
.contact-row:first-child{border-top:none}
.contact-label{color:var(--muted);font-family:var(--mono)}
.contact-value a{color:rgba(84,255,138,.92)}

.footer{margin-top:2.2rem;padding:1.2rem 1.2rem;border-top:1px solid var(--line);color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-links{display:flex;gap:1rem}
.footer-links a{color:rgba(232,238,251,.70);text-decoration:none}
.footer-links a:hover{color:var(--text)}
.muted{color:var(--muted)}

/* Lightbox */
.lightbox{position:fixed;inset:0;display:none}
.lightbox[aria-hidden="false"]{display:block}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px)}
.lightbox-content{position:relative;max-width:min(1100px,92vw);max-height:min(82vh,820px);margin:6vh auto 0;border-radius:1.35rem;border:1px solid rgba(255,255,255,.14);background:rgba(12,16,24,.68);box-shadow:0 25px 80px rgba(0,0,0,.60);overflow:hidden}
.lightbox-close{position:absolute;top:.65rem;right:.65rem;border-radius:999px;width:40px;height:40px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer}
.lightbox-close:hover{border-color:rgba(84,255,138,.35)}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);border-radius:999px;width:44px;height:44px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;font-size:20px;line-height:1}
.lightbox-nav:hover{border-color:rgba(84,255,138,.35)}
.lightbox-prev{left:.65rem}
.lightbox-next{right:.65rem}
#lightboxImg{width:100%;height:min(72vh,720px);object-fit:contain;display:block;background:rgba(0,0,0,.25)}
.lightbox-caption{padding:.65rem .95rem;color:rgba(232,238,251,.78);font-family:var(--mono);border-top:1px solid rgba(255,255,255,.10)}

/* Docs */
.doc-layout{display:grid;grid-template-columns:320px 1fr;gap:1rem;margin-top:1.1rem;align-items:start}
.doc-nav{padding:1rem} .doc-nav-title{font-weight:900;margin-bottom:.55rem}
.doc-link{display:block;padding:.45rem .55rem;border-radius:.9rem;text-decoration:none;color:rgba(232,238,251,.78);border:1px solid transparent;font-family:var(--mono);font-size:.92rem}
.doc-link:hover{border-color:rgba(84,255,138,.25);background:rgba(84,255,138,.06);color:var(--text)}
.doc-home{margin-top:.6rem;border-top:1px solid rgba(255,255,255,.10);padding-top:.75rem}
.doc-body{padding:1rem 1.2rem}
.doc-body p,.doc-body li{color:rgba(232,238,251,.84);line-height:1.65}
.doc-bottom{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.10)}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;padding-top:1.4rem}
  .hero-badges{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .shot img{height:240px}
  .pricing{grid-template-columns:1fr}
  .nav{display:none}
  .doc-layout{grid-template-columns:1fr}
}


/* 3D ECU canvas container (Home page) */
.ecu3d-wrap{ padding: 1rem 0 .6rem; }
.ecu3d{
  width: 100%;
  height: 280px;
  border-radius: 1.2rem;
  border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(900px 240px at 50% 60%, rgba(84,255,138,.12), transparent 60%),
              rgba(0,0,0,.22);
  overflow: hidden;
  position: relative;
}
.ecu3d::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%, rgba(0,0,0,.18));
}
.docs-preview{ padding: 1.05rem; margin-top: 1rem; }

/* Extra mobile polish (phones) */
@media (max-width: 560px){
  .topbar{
    flex-wrap: wrap;
    justify-content: center;
    padding: .75rem .9rem;
  }

  .brand{ min-width: 0; }
  .brand-sub{ display:none; } /* cleaner header on phones */
  .logo{ width:40px; height:40px; }

  .topbar-cta{
    width: 100%;
    justify-content: center;
  }

  .hero-actions .btn{
    width: 100%;
    text-align: center;
  }

  /* slightly shorter preview box on phones */
  .ecu3d{ height: 220px; }

  /* Hide the whole preview card on phones (remove the empty box entirely) */
  .hero-right .glass.card{ display:none; }
}