/* Billman Digital — Dark Modern Studio */
:root{
  --bg:#0F1115; --panel:#171B22; --panel2:#1D232D;
  --text:#EDEFF2; --muted:#9AA3AF;
  --accent:#3B82F6; --accent-hover:#60A5FA;
  --border:rgba(255,255,255,.08);
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent-hover);text-decoration:none}
a:hover{text-decoration:underline}

/* Nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:2rem;padding:.9rem 1.5rem;background:rgba(15,17,21,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.logo{font-weight:800;font-size:1.15rem;color:var(--text)}
.logo:hover{text-decoration:none}
.logo .dot{color:var(--accent)}
.nav-links{display:flex;gap:1.4rem;margin-left:auto}
.nav-links a{color:var(--muted);font-weight:500}
.nav-links a:hover{color:var(--text);text-decoration:none}
.nav .btn{margin-left:.5rem}

/* Buttons */
.btn{display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:600;padding:.8rem 1.5rem;border-radius:10px;transition:background .15s ease,transform .15s ease}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);text-decoration:none}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--muted);text-decoration:none}
.btn-sm{padding:.5rem 1rem;font-size:.92rem}

/* Hero */
.hero{max-width:880px;margin:0 auto;padding:5.5rem 1.5rem 3.5rem;text-align:center}
.hero h1{font-size:clamp(2.1rem,5.5vw,3.4rem);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.hero-sub{color:var(--muted);font-size:1.13rem;margin:1.4rem auto 0;max-width:680px}
.hero-ctas{display:flex;gap:.9rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}
.trust-strip{margin-top:2.2rem;color:var(--muted);font-size:.95rem;font-weight:500}
.hero-art{display:flex;gap:1rem;justify-content:center;margin-top:3rem}
.phone-tile{width:150px;height:230px;border-radius:18px;border:1px solid var(--border);display:flex;align-items:flex-end;padding:.9rem;font-weight:700;font-size:.9rem;background:linear-gradient(160deg,var(--panel2),var(--panel));position:relative;overflow:hidden}
.phone-tile img,.work-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-a{background:linear-gradient(160deg,#1E3A5F,#12161D)}
.tile-b{background:linear-gradient(160deg,#3B2F63,#12161D)}
.tile-c{background:linear-gradient(160deg,#14532D,#12161D)}
.phone-tile span{opacity:.9}

/* Sections */
.section{max-width:1080px;margin:0 auto;padding:3.5rem 1.5rem}
.section h2{font-size:2rem;font-weight:800;letter-spacing:-.01em}
.section-sub{color:var(--muted);margin:.5rem 0 2rem}
.grid{display:grid;gap:1.1rem}
.cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
.card h3{font-size:1.1rem;margin-bottom:.3rem}
.card p{color:var(--muted)}
.card .price{color:var(--accent-hover);font-weight:700;margin-bottom:.5rem}
.work-thumb{height:130px;border-radius:10px;border:1px solid var(--border);display:flex;align-items:flex-end;padding:.7rem;font-weight:700;margin-bottom:1rem;background:linear-gradient(150deg,var(--panel2),var(--panel));position:relative;overflow:hidden}
.thumb-xfinite{background:linear-gradient(150deg,#1E3A5F,#12161D)}
.thumb-aimverse{background:linear-gradient(150deg,#3B2F63,#12161D)}
.thumb-eventpal{background:linear-gradient(150deg,#14532D,#12161D)}
.thumb-weather{background:linear-gradient(150deg,#155E63,#12161D)}
.thumb-paint{background:linear-gradient(150deg,#7C2D4E,#12161D)}
.thumb-course{background:linear-gradient(150deg,#7C4A12,#12161D)}
.work-more{color:var(--muted);margin-top:1.4rem}
.steps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;margin-bottom:.8rem}
.step h3{font-size:1.05rem;margin-bottom:.3rem}
.step p{color:var(--muted)}
.about-body{max-width:720px}
.about-body p{color:var(--muted);margin-bottom:1rem;font-size:1.05rem}
.about-body p:first-child{color:var(--text)}

/* FAQ */
.faq-list{max-width:760px}
.faq-item{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.7rem;padding:1rem 1.3rem}
.faq-item summary{cursor:pointer;font-weight:600;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";float:right;color:var(--accent-hover);font-weight:700}
.faq-item[open ] summary::after{content:"–"}
.faq-item p{color:var(--muted);margin-top:.6rem}

/* Contact + footer */
.contact{text-align:center}
.contact p{color:var(--muted);max-width:560px;margin:.6rem auto}
.contact-note{font-size:.95rem}
.contact .btn{margin-top:1.2rem}
.footer{border-top:1px solid var(--border);padding:1.6rem 1.5rem;text-align:center;color:var(--muted);font-size:.92rem}

@media (max-width:768px){
  .nav-links{display:none}
  .hero{padding-top:3.5rem}
  .phone-tile{width:100px;height:160px;font-size:.78rem}
}

/* Work links + image crop (v1.3) */
.work-thumb-link{display:block}
.work-thumb img{object-position:top}
.work-link{margin-top:.8rem}
.work-link a{font-weight:600}