/* HandyAce shared visual system — Conversion V2 */
:root {
  --ha-bg: #131313;
  --ha-surface: #181716;
  --ha-surface-2: #211f1d;
  --ha-primary: #ffb77d;
  --ha-primary-soft: rgba(255,183,125,.10);
  --ha-text: #e9e4e1;
  --ha-muted: #bba99d;
  --ha-line: rgba(255,183,125,.22);
  --ha-success: #b7d7b0;
  --ha-error: #ffb4ab;
}

html { scroll-behavior: smooth; }
body { min-height: 100dvh; overflow-x: hidden; background: var(--ha-bg); }
main { padding-top: 96px; }
.scroll-mt, .scroll-mt-32 { scroll-margin-top: 108px; }
.ha-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.ha-muted { color: var(--ha-muted); line-height: 1.7; }

/* Global chrome */
.ha-utility {
  background: #0d0d0d;
  border-bottom: 1px solid rgba(255,183,125,.16);
  color: rgba(255,183,125,.78);
  font: 700 10px/1 'JetBrains Mono', monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.ha-header {
  background: rgba(19,19,19,.94);
  border-bottom: 1px solid rgba(255,183,125,.18);
  backdrop-filter: blur(16px);
}
.ha-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ha-text); text-decoration: none; line-height: 1; }
.ha-brand-icon { color: var(--ha-primary); font-size: 26px !important; }
.ha-brand strong { display: block; font-size: 18px; letter-spacing: -.03em; }
.ha-brand small { display: block; margin-top: 5px; color: var(--ha-muted); font: 700 8px/1 'JetBrains Mono', monospace; letter-spacing: .18em; }
.ha-nav-link { color: #c9bbb2; font-size: 13px; font-weight: 600; text-decoration: none; transition: color .2s ease; }
.ha-nav-link:hover, .ha-phone-link:hover { color: var(--ha-primary); }
.ha-phone-link { color: var(--ha-text); font-size: 13px; font-weight: 700; text-decoration: none; }
.ha-primary-btn, .ha-secondary-btn {
  min-height: 42px; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; border: 1px solid transparent; text-decoration: none;
  font: 700 12px/1 'JetBrains Mono', monospace; letter-spacing: .07em;
  text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.ha-primary-btn { background: var(--ha-primary); color: #24160e; }
.ha-primary-btn:hover { transform: translateY(-1px); background: #ffc89e; }
.ha-secondary-btn { border-color: rgba(255,183,125,.34); color: var(--ha-primary); background: rgba(255,183,125,.03); }
.ha-secondary-btn:hover { background: var(--ha-primary-soft); border-color: rgba(255,183,125,.65); }
.ha-menu-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ha-line); color: var(--ha-primary); background: transparent; }
.ha-mobile-menu { max-height: 0; overflow: hidden; background: #151515; border-top: 1px solid rgba(255,183,125,.12); transition: max-height .32s ease; }
.ha-mobile-menu.open { max-height: 560px; }
.ha-mobile-link { display: block; padding: 13px 0; color: #d7cbc3; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14px; font-weight: 600; }

/* Footer */
.ha-footer { background: #0f0f0f; border-top: 1px solid rgba(255,183,125,.18); }
.ha-footer a { display: block; color: #cdbfb6; text-decoration: none; margin: 9px 0; font-size: 14px; }
.ha-footer a:hover { color: var(--ha-primary); }
.ha-footer .ha-brand { margin-top: 0; }
.ha-footer .ha-secondary-btn { display: inline-flex; margin: 0; }
.ha-footer-title { color: var(--ha-primary); font: 700 11px/1 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.ha-footer-bottom { display: grid; grid-template-columns: 1fr 2fr auto; gap: 20px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); color: #8f8178; font-size: 11px; line-height: 1.6; }
.ha-footer-bottom a { display: inline; margin: 0; font-size: inherit; }
.ha-mobile-cta { position: fixed; inset-inline: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr 1.35fr; background: #111; border-top: 1px solid rgba(255,183,125,.28); box-shadow: 0 -8px 30px rgba(0,0,0,.38); }
.ha-mobile-cta a { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #e4d7cf; text-decoration: none; font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: .07em; text-transform: uppercase; border-right: 1px solid rgba(255,255,255,.07); }
.ha-mobile-cta a.primary { background: var(--ha-primary); color: #24160e; }
.ha-mobile-cta .material-symbols-outlined { font-size: 18px !important; }

/* Existing design language */
.cyber-grid {
  background-image: linear-gradient(to right, rgba(255,183,125,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,183,125,.045) 1px, transparent 1px);
  background-size: 42px 42px; pointer-events: none;
}
.scanline::after { content:""; position: fixed; inset: 0; background: linear-gradient(to bottom, transparent 0%, rgba(255,183,125,.025) 50%, rgba(255,183,125,.05) 50.5%, transparent 100%); background-size: 100% 20px; animation: scan 10s linear infinite; pointer-events:none; z-index:5; opacity:.55; }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(100vh); } }
.glitch-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,0,.2,1); }
.glitch-reveal.active { opacity: 1; transform: none; }
.btn-bracket { position: relative; transition: all .25s ease; }
.btn-bracket:hover { box-shadow: 0 0 18px rgba(255,183,125,.18); }
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; }
.faq-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-item.open .faq-body { max-height: 720px; }
.icon-bootup { opacity: 1; }
.ha-mascot-wrap { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.ha-mascot { display: block; }
.ha-mascot-img { display: block; object-fit: contain; border-radius: 6px; }
.ha-badge-slot { display: none; }

.perk-card { position: relative; background: #181716; border: 1px solid rgba(255,183,125,.24); clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)); transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.perk-card::before { content:""; position:absolute; inset:7px; pointer-events:none; border:1px solid rgba(255,183,125,.11); clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); }
.perk-card:hover { border-color: rgba(255,183,125,.58); background:#1d1b19; transform:translateY(-3px); }
.perk-ribbon { position:absolute; top:12px; left:-30px; transform:rotate(-45deg); background:var(--ha-primary); color:#181716; font-size:9px; font-weight:700; letter-spacing:.18em; padding:3px 34px; z-index:4; }
.perk-sweep, .perk-tick { display: none; }

/* V2 conversion components */
.ha-kicker { color: var(--ha-primary); font: 700 11px/1.4 'JetBrains Mono', monospace; letter-spacing: .20em; text-transform: uppercase; }
.ha-display { color: var(--ha-text); font-weight: 700; letter-spacing: -.055em; line-height: .92; }
.ha-lead { color: #cdbfb6; font-size: clamp(17px, 2vw, 21px); line-height: 1.65; }
.ha-card { background: linear-gradient(180deg, rgba(255,183,125,.055), rgba(255,183,125,.018)); border: 1px solid rgba(255,183,125,.20); }
.ha-card:hover { border-color: rgba(255,183,125,.42); }
.ha-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(255,183,125,.22); background: rgba(255,183,125,.04); color: #d8c8be; font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.ha-chip .material-symbols-outlined { color: var(--ha-primary); font-size: 16px !important; }
.ha-section-title { color: var(--ha-text); font-size: clamp(32px, 5vw, 58px); line-height: .98; letter-spacing: -.045em; font-weight: 700; }
.ha-number { color: rgba(255,183,125,.28); font: 700 38px/1 'JetBrains Mono', monospace; }
.ha-rule { height: 1px; background: rgba(255,183,125,.16); }
.ha-service-link { color: inherit; text-decoration: none; }
.ha-service-link .material-symbols-outlined { color: var(--ha-primary); }
.ha-service-link:hover h3 { color: var(--ha-primary); }

.ha-estimate-panel { background: #171615; border: 1px solid rgba(255,183,125,.30); box-shadow: 0 30px 70px rgba(0,0,0,.24); }
.ha-label { display: block; margin-bottom: 8px; color: #c8b9af; font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.ha-input { width: 100%; min-height: 48px; border: 1px solid rgba(255,183,125,.22); background: #111; color: #eee7e2; padding: 12px 13px; border-radius: 0; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
textarea.ha-input { min-height: 120px; resize: vertical; }
.ha-input:focus { border-color: rgba(255,183,125,.75); box-shadow: 0 0 0 3px rgba(255,183,125,.08); }
.ha-input::placeholder { color: #756961; }
.ha-input.ha-invalid { border-color: var(--ha-error); }
.err { color: var(--ha-error); font-size: 12px; margin-top: 6px; }
.ha-form-message { padding: 14px 16px; border: 1px solid rgba(255,183,125,.22); background: rgba(255,183,125,.05); color: #dbcac0; font-size: 14px; line-height: 1.5; }
.ha-form-message.is-success { border-color: rgba(183,215,176,.45); background: rgba(183,215,176,.08); color: var(--ha-success); }
.ha-form-message.is-error { border-color: rgba(255,180,171,.45); background: rgba(255,180,171,.07); color: var(--ha-error); }
.ha-form-message a { color: inherit; text-decoration: underline; }
button[disabled] { opacity: .6; cursor: wait; }

/* Blog photo cards retained for existing content */
.blog-photo-card { display:block; position:relative; overflow:hidden; background:#2a2a28; }
.blog-photo-card img { transition:transform .55s ease; will-change:transform; }
.blog-photo-card:hover img { transform:scale(1.035); }
.blog-photo-card::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,183,125,0); transition:box-shadow .3s ease; z-index:30; pointer-events:none; }
.blog-photo-card:hover::after { box-shadow:inset 0 0 0 1px rgba(255,183,125,.45); }
.blog-accent { position:absolute; top:0; left:0; right:0; height:2px; z-index:20; background:var(--ha-primary); }
.blog-hover-text { opacity:.9; }

/* Existing article pages */
.article-body { max-width:760px; }
.article-body p { font-family:'IBM Plex Sans'; font-size:17px; line-height:1.75; color:#ddc1ae; margin-bottom:1.5rem; }
.article-body h2 { font-family:'IBM Plex Sans'; font-size:26px; font-weight:600; color:#e5e2e1; text-transform:uppercase; letter-spacing:-.01em; margin:2.75rem 0 1rem; padding-left:1rem; border-left:3px solid var(--ha-primary); }
.article-body h3 { font-size:19px; font-weight:600; color:var(--ha-primary); margin:2rem 0 .75rem; }
.article-body ul, .article-body ol { margin:0 0 1.5rem 1.25rem; color:#ddc1ae; font-size:17px; line-height:1.7; }
.article-body li { margin-bottom:.6rem; }
.article-body strong { color:#e5e2e1; font-weight:600; }
.article-body a { color:var(--ha-primary); text-decoration:underline; text-underline-offset:2px; }
.article-body .callout { border:1px solid rgba(255,183,125,.3); background:rgba(255,183,125,.05); padding:1.5rem; margin:2rem 0; }
.article-body .callout p { margin:0; font-size:15px; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0e0e0e; }
::-webkit-scrollbar-thumb { background: #8d664a; }

@media (max-width: 900px) {
  .ha-footer-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  body { padding-bottom: 58px; }
  .ha-shell { width: min(100% - 28px, 1180px); }
  main { padding-top: 96px; }
  .cyber-grid { background-size: 32px 32px; opacity: .6; }
  .scanline::after { display:none; }
  .perk-card:hover { transform:none; }
  .blog-photo-card:hover img { transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .glitch-reveal { opacity:1 !important; transform:none !important; }
}