@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --accent: #39ff14;
  --accent-dim: rgba(57, 255, 20, 0.32);
  --accent-faint: rgba(57, 255, 20, 0.12);
  --glow-soft: 0 0 10px rgba(57,255,20,.35);
  --heading-font: 'Space Grotesk', sans-serif;
  --body-font: 'JetBrains Mono', ui-monospace, monospace;
  --ink: #eaf5e6;
  --sub: #93ab8d;
}

* { box-sizing: border-box; }

body {
  background-color: #07090a;
  color: var(--ink);
  font-family: var(--body-font);
  margin: 0;
  padding: 0;
  line-height: 1.65;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body::-webkit-scrollbar { display: none; }
html { scroll-behavior: smooth; }

/* ── Ambient backdrop — restrained: a faint grid, a handful of slow
   pulsing dots. No hotlinked photos to silently rot (source.unsplash.com
   /random stopped resolving years ago; every section background in the
   original depended on it and was quietly blank). ── */
.circuit-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(rgba(57,255,20,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,20,0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 35%, transparent 85%);
}
.background-grid { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.grid-dot { position: absolute; width: 2px; height: 2px; background: var(--accent); border-radius: 50%; animation: pulse 4s infinite; opacity: 0.18; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .14; } 50% { transform: scale(1.5); opacity: .32; } }

.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--accent); box-shadow: 0 0 6px var(--accent); z-index: 1200; transition: width .08s linear; }

/* ── Nav ── */
.nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.85rem 2rem; border-bottom: 1px solid rgba(57,255,20,.16);
  position: fixed; width: 100%; top: 0; background: rgba(7,9,10,.9);
  backdrop-filter: blur(14px); z-index: 1000; box-sizing: border-box;
}

/* ── Shattered wordmark ─────────────────────────────────────────────
   Kintsugi, minus the gold: the wordmark is split into angular shard
   layers (stacked duplicates of the same text, each clipped to a
   jagged polygon slice of the whole), offset a few px with independent
   rotation at REST. On hover, every shard animates to zero offset: the
   clip-path polygons are precise complements of each other, so at
   (0,0,0deg) they tile perfectly and the word reads as whole again.
   (An earlier pass drew glowing "seam" lines over the fractures to
   sell the kintsugi metaphor explicitly — dropped, it read as visual
   clutter rather than repair. The shards realigning is the metaphor;
   it doesn't need a label drawn on top of it.) ── */
.shatter {
  position: relative; display: inline-block;
  font-family: var(--heading-font); font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase;
  line-height: 1; cursor: default; user-select: none;
  --scale: 1;
}
.shatter .piece {
  color: var(--accent); text-shadow: 0 0 14px rgba(57,255,20,.25);
  display: block;
}
.shatter .piece + .piece { position: absolute; inset: 0; }
.shatter .piece:nth-child(1) { clip-path: polygon(0 0, 38% 0, 22% 100%, 0 100%); transform: translate(calc(-4px * var(--scale)), calc(2.5px * var(--scale))) rotate(-2.2deg); }
.shatter .piece:nth-child(2) { clip-path: polygon(38% 0, 64% 0, 55% 40%, 40% 100%, 22% 100%); transform: translate(calc(3px * var(--scale)), calc(-3.5px * var(--scale))) rotate(1.6deg); }
.shatter .piece:nth-child(3) { clip-path: polygon(64% 0, 100% 0, 100% 55%, 82% 100%, 40% 100%, 55% 40%); transform: translate(calc(3.5px * var(--scale)), calc(3.5px * var(--scale))) rotate(-1.2deg); }
.shatter .piece:nth-child(4) { clip-path: polygon(100% 55%, 100% 100%, 82% 100%); transform: translate(calc(-2px * var(--scale)), calc(2.5px * var(--scale))) rotate(1.8deg); }
.shatter:hover .piece:nth-child(1),
.shatter:hover .piece:nth-child(2),
.shatter:hover .piece:nth-child(3),
.shatter:hover .piece:nth-child(4) {
  transform: translate(0, 0) rotate(0deg);
}
.shatter, .shatter .piece { transition: transform .55s cubic-bezier(.22,1,.36,1); }

.brand-row { display: flex; align-items: center; gap: .55rem; }
.brand-mark { width: 26px; height: 26px; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(57,255,20,.35)); }
.brand.shatter { font-size: 1.7rem; --scale: 0.45; }
.hero-brand.shatter { font-size: clamp(2.6rem, 10vw, 6.4rem); --scale: 1.4; }

.nav-links { display: flex; gap: 2.6rem; }
.nav-links a {
  color: var(--ink); text-decoration: none; font-size: .88rem;
  position: relative; padding: 0.4rem 0; text-transform: uppercase;
  letter-spacing: 1.5px; transition: color .25s ease; opacity: .85;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
  background: var(--accent); transition: width .25s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent); opacity: 1; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.nav-mendy {
  color: var(--accent); opacity: 1; border: 1px solid var(--accent-dim); border-radius: 999px;
  padding: 0.3rem 0.9rem; text-shadow: var(--glow-soft);
}
.nav-links a.nav-mendy::after { display: none; }
.nav-links a.nav-mendy:hover { background: var(--accent-faint); }


/* ── Hero ── */
.hero {
  min-height: 88vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 1.4rem;
  padding: 7rem 1.5rem 3rem; position: relative; overflow: hidden;
}
.connect-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-crown {
  width: clamp(64px, 8vw, 108px); height: auto; position: relative; z-index: 2;
  filter: drop-shadow(0 0 14px rgba(57,255,20,.3));
  margin-bottom: -1.2rem;
}
.eyebrow {
  letter-spacing: .3em; font-size: .74rem;
  color: var(--sub); text-transform: uppercase;
  position: relative; z-index: 2;
}
.hero-tagline {
  max-width: 44ch; color: var(--sub); font-size: 1.05rem;
  position: relative; z-index: 2; margin: .3rem 0 0;
}
.hero .btn-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; position: relative; z-index: 2; margin-top: .6rem; }

/* ── Ticker ── */
.news-ticker {
  display: flex; align-items: center; gap: 1.1rem;
  padding: .75rem 1.5rem; border-top: 1px solid rgba(57,255,20,.14);
  border-bottom: 1px solid rgba(57,255,20,.14); background: rgba(0,0,0,.5);
}
.ticker-live {
  display: flex; align-items: center; gap: .45rem; flex-shrink: 0;
  color: var(--accent); font-size: .72rem; letter-spacing: .18em; font-weight: 700;
}
.ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: ticker-pulse 1.4s ease-in-out infinite; }
@keyframes ticker-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.news-ticker-track {
  overflow: hidden; white-space: nowrap; flex: 1; min-width: 0;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.news-ticker-content { display: inline-block; animation: ticker 34s linear infinite; padding-right: 3rem; font-size: .8rem; letter-spacing: .04em; color: var(--ink); }
.news-ticker-content .sep { color: var(--accent); padding: 0 .7em; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* ── Sections ── */
section, .cta-banner { padding: 5.5rem 1.5rem; scroll-margin-top: 4rem; }
.section-kicker { text-align: center; color: var(--sub); letter-spacing: .28em; font-size: .72rem; text-transform: uppercase; margin-bottom: .5rem; }
.section-title { font-family: var(--heading-font); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.2rem); text-align: center; margin: 0 0 1rem; color: var(--ink); }
.section-lede { text-align: center; max-width: 58ch; margin: 0 auto 3rem; color: var(--sub); font-size: .95rem; }

.services-container, .testimonial-grid, .steps-grid, .work-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem; max-width: 1200px; margin: 0 auto;
}

.card {
  background: rgba(57,255,20,.02);
  border: 1px solid rgba(57,255,20,.14); border-radius: 10px; padding: 1.75rem;
  position: relative; overflow: hidden;
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s cubic-bezier(.17,.55,.55,1), transform .6s cubic-bezier(.17,.55,.55,1), border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.card.in-view { opacity: 1; transform: translateY(0); }
.card:hover {
  border-color: rgba(57,255,20,.5);
  box-shadow: 0 10px 26px rgba(0,0,0,.3), 0 0 40px rgba(57,255,20,.1);
  background: rgba(57,255,20,.06);
}
.card-icon { width: 38px; height: 38px; margin-bottom: 1rem; color: var(--accent); }
.card h3 { font-family: var(--heading-font); font-weight: 700; font-size: 1.05rem; margin: 0 0 .6rem; color: var(--ink); }
.card p { color: var(--sub); margin: 0 0 .9rem; font-size: .92rem; }
.card .meta-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: auto; }
.meta-chip { font-size: .72rem; letter-spacing: .04em; color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 999px; padding: .25rem .65rem; }

.step-num {
  font-family: var(--heading-font); font-weight: 700; font-size: .85rem;
  color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 50%;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}

.testimonial-card p.quote { font-style: italic; color: var(--ink); opacity: .92; margin: 0 0 1rem; }
.testimonial-author { color: var(--accent); font-size: .85rem; letter-spacing: .02em; }

.cta-banner {
  text-align: center; border-top: 1px solid rgba(57,255,20,.14); border-bottom: 1px solid rgba(57,255,20,.14);
}
.cta-banner h2 { font-family: var(--heading-font); font-weight: 700; font-size: 1.4rem; margin: 0 0 .6rem; color: var(--ink); }
.cta-banner p { color: var(--sub); max-width: 50ch; margin: 0 auto 1.4rem; }

.approach { max-width: 720px; margin: 0 auto; text-align: center; }
.approach p { color: var(--sub); font-size: .98rem; margin: 0 0 1.2rem; }
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 2rem; }
.trust-pill {
  border: 1px solid rgba(57,255,20,.2); border-radius: 999px; padding: .5rem 1.1rem;
  font-size: .82rem; color: var(--ink); background: rgba(57,255,20,.03);
}

/* ── Stats strip ── */
.stats-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; max-width: 900px; margin: 0 auto; text-align: center; }
.stat-num { font-family: var(--heading-font); font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.6rem); color: var(--accent); text-shadow: 0 0 16px rgba(57,255,20,.25); }
.stat-label { color: var(--sub); font-size: .82rem; letter-spacing: .04em; margin-top: .3rem; line-height: 1.35; min-height: 2.7em; display: flex; align-items: center; justify-content: center; }
.stats-source { text-align: center; font-size: .72rem; color: var(--sub); opacity: .6; margin: 1.2rem 0 0; }
@media (min-width: 640px) {
  .stats-strip { grid-template-columns: repeat(4, 1fr); }
}

/* ── What we work on (device/product list) ── */
.work-grid { max-width: 1100px; }
.work-card h3 { display: flex; align-items: center; gap: .5rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.chip { font-size: .8rem; color: var(--ink); background: rgba(57,255,20,.05); border: 1px solid rgba(57,255,20,.16); border-radius: 6px; padding: .35rem .7rem; }

/* ── FAQ ── */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: .7rem; }
.faq-item {
  border: 1px solid rgba(57,255,20,.14); border-radius: 8px; background: rgba(57,255,20,.02);
  overflow: hidden;
}
.faq-item summary {
  padding: 1.1rem 1.3rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; font-weight: 500; color: var(--ink); font-size: .95rem;
  transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; color: var(--accent); font-size: 1.3rem; font-family: var(--heading-font);
  flex-shrink: 0; transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--accent); border-bottom: 1px solid rgba(57,255,20,.14); }
.faq-item p { padding: 0 1.3rem 1.1rem; margin: 0; color: var(--sub); font-size: .9rem; }

/* ── Mendy promo + demo conversations ── */
.mendy-feature-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; max-width: 900px; margin: 0 auto 3rem; }
.demo-chat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.5rem; max-width: 1100px; margin: 0 auto; }
.demo-card { cursor: default; }
.demo-header { margin-bottom: 1.1rem; }
.demo-badge {
  display: inline-block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 999px;
  padding: .25rem .65rem; margin-bottom: .7rem;
}
.demo-header h3 { font-family: var(--heading-font); font-weight: 700; font-size: 1rem; margin: 0; color: var(--ink); }
.demo-connect {
  font-size: .74rem; color: var(--sub); text-align: center; letter-spacing: .02em;
  padding-bottom: .8rem; margin: 0 0 1rem; border-bottom: 1px dashed rgba(57,255,20,.14);
}
.demo-bubble { font-size: .87rem; color: var(--ink); line-height: 1.55; margin-bottom: 1.1rem; padding-left: .9rem; border-left: 2px solid rgba(57,255,20,.16); }
.demo-bubble:last-child { margin-bottom: 0; }
.demo-bubble .who { display: block; font-size: .68rem; color: var(--sub); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem; }
.demo-bubble.customer { border-left-color: rgba(147,171,141,.35); }
.demo-bubble.customer .who { color: var(--ink); opacity: .7; }
.demo-bubble.mendy { border-left-color: var(--accent-dim); }
.demo-bubble.mendy .who { color: var(--accent); }
.demo-bubble.tech { border-left-color: var(--accent); background: rgba(57,255,20,.04); padding: .8rem .9rem; border-radius: 0 6px 6px 0; }
.demo-bubble.tech .who { color: var(--accent); }

.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; max-width: 880px; margin: 0 auto; }
.price-card {
  border: 1px solid rgba(57,255,20,.14); border-radius: 10px; padding: 2rem; text-align: center;
  background: rgba(57,255,20,.02); display: flex; flex-direction: column;
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s cubic-bezier(.17,.55,.55,1), transform .6s cubic-bezier(.17,.55,.55,1), border-color .3s ease;
}
.price-card.in-view { opacity: 1; transform: translateY(0); }
.price-card.featured { border-color: var(--accent-dim); box-shadow: 0 0 24px rgba(57,255,20,.06); }
.price-card:hover { transform: translateY(-6px); border-color: rgba(57,255,20,.4); }
.price-card .tag { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sub); }
.price-card h2 { font-family: var(--heading-font); font-weight: 700; font-size: 1.2rem; margin: .5rem 0; color: var(--ink); }
.price-card .price { font-size: 2.2rem; font-family: var(--heading-font); font-weight: 700; color: var(--accent); margin: .3rem 0 .8rem; }
.price-card .price small { font-size: .95rem; opacity: .7; font-weight: 500; }
.price-card p.desc { color: var(--sub); font-size: .88rem; margin-bottom: 1rem; }
.feature-list { list-style: none; margin: 0 0 1.4rem; padding: 0; text-align: left; flex-grow: 1; }
.feature-list li { display: flex; gap: .55rem; font-size: .87rem; color: var(--ink); padding: .4rem 0; border-bottom: 1px dashed rgba(57,255,20,.1); }
.feature-list li:last-child { border-bottom: none; }
.feature-list li::before { content: '✓'; color: var(--accent); flex-shrink: 0; font-weight: 700; }

.btn {
  background: var(--accent); color: #07090a; border: none; padding: .8rem 1.7rem;
  font-family: var(--body-font); font-weight: 700; font-size: .85rem; cursor: pointer;
  text-transform: uppercase; letter-spacing: 1.2px; border-radius: 5px;
  position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.175,.885,.32,1.275), box-shadow .25s ease;
  text-decoration: none; display: inline-block;
}
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent-dim); }
.btn.ghost:hover { border-color: var(--accent); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--glow-soft); }
.btn:active { transform: translateY(0) scale(.97); }

/* ── Contact ── */
.contact-wrap { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: start; }
.contact-form {
  padding: 2rem; border: 1px solid rgba(57,255,20,.14);
  border-radius: 12px; background: rgba(57,255,20,.02);
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s cubic-bezier(.17,.55,.55,1), transform .6s cubic-bezier(.17,.55,.55,1);
}
.contact-form.in-view { opacity: 1; transform: translateY(0); }
.contact-form h2 { font-family: var(--heading-font); font-weight: 700; font-size: 1.3rem; margin-top: 0; color: var(--ink); }
.contact-form > p.lede { color: var(--sub); margin-top: -.5rem; font-size: .9rem; }
.form-row { display: flex; gap: .8rem; }
.form-row > * { flex: 1; }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%; padding: .7rem .85rem; margin: .3rem 0; background: rgba(0,0,0,.5);
  border: 1px solid rgba(57,255,20,.16); color: var(--ink); font-family: var(--body-font);
  font-size: .88rem; border-radius: 5px; transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(147,171,141,.6); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57,255,20,.1);
}
.contact-form select option { background: #0a0f0a; color: var(--ink); }
.contact-form .btn { width: 100%; margin-top: .5rem; }

.contact-info { display: flex; flex-direction: column; gap: 1.2rem; padding-top: .4rem; }
.contact-info-item { display: flex; gap: .9rem; align-items: flex-start; }
.contact-info-icon { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; margin-top: .15rem; }
.contact-info-item h4 { margin: 0 0 .2rem; font-family: var(--heading-font); font-size: .92rem; color: var(--ink); }
.contact-info-item p, .contact-info-item a { margin: 0; color: var(--sub); font-size: .88rem; text-decoration: none; }
.contact-info-item a:hover { color: var(--accent); }

/* ── Footer ── */
footer { border-top: 1px solid rgba(57,255,20,.14); padding: 3.5rem 1.5rem 2rem; margin-top: 2rem; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.footer-section h4 { font-family: var(--heading-font); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: .8rem; }
.footer-section p, .footer-section a { color: var(--sub); font-size: .88rem; }
.footer-section a { text-decoration: none; display: block; line-height: 2; transition: color .2s ease; }
.footer-section a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(57,255,20,.1); padding-top: 1.4rem; text-align: center; color: #5f7a59; font-size: .8rem; }

.sparkle {
  position: absolute; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  mix-blend-mode: screen; animation: sparkle-fade .7s ease-out forwards; z-index: 1000;
}
@keyframes sparkle-fade { 0% { transform: scale(0); opacity: .8; } 100% { transform: scale(1); opacity: 0; } }

@media (max-width: 860px) {
  .contact-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav { padding: .7rem 1.1rem; flex-wrap: wrap; row-gap: .6rem; }
  .nav-links { order: 3; width: 100%; justify-content: center; gap: 1.1rem; flex-wrap: wrap; }
  .nav-links a { font-size: .78rem; }
  .brand.shatter { font-size: 1.4rem; }
  /* The wrapped two-row nav is taller than the fixed 4rem scroll-margin
     tuned for the single-row desktop nav, so an anchor jump (nav click,
     "Skip to content", or a #hash URL) landed a section partly under it. */
  section, .cta-banner { padding: 3.5rem 1.2rem; scroll-margin-top: 6.5rem; }
  .form-row { flex-direction: column; }
}

@media (max-width: 420px) {
  .nav-cta { padding: .4rem .85rem; font-size: .74rem; }
}

/* ── Honeypot (spam trap, invisible to real visitors, not display:none so
     it still gets filled by naive bots that skip hidden fields) ── */
.hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ── Inline form validation ── */
.contact-form input.invalid,
.contact-form select.invalid,
.contact-form textarea.invalid {
  border-color: #ff5c5c;
  box-shadow: 0 0 0 3px rgba(255, 92, 92, .12);
}
.field-error {
  color: #ff8a8a;
  font-size: .78rem;
  margin: -.6rem 0 .6rem;
}
.form-status {
  font-size: .85rem;
  color: var(--sub);
  min-height: 1.2em;
  margin: .6rem 0 0;
}

/* ── Accessibility: visible keyboard focus everywhere ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Skip-to-content link: hidden until focused via keyboard ── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--accent); color: #07090a; padding: .7rem 1.2rem;
  font-weight: 700; text-decoration: none; border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}

/* ── Print: strip the neon theatrics, keep the content ── */
@media print {
  body { background: #fff !important; color: #111 !important; }
  .nav, .news-ticker, .connect-canvas, .circuit-bg, .background-grid,
  .scroll-progress, .cta-banner, footer, .btn, .contact-form { display: none !important; }
  section { padding: 0.5rem 0 !important; page-break-inside: avoid; }
  a { color: #111 !important; text-decoration: underline; }
  .price-card, .card { border: 1px solid #999 !important; background: #fff !important; box-shadow: none !important; }
}