/* ============================================================
   Rayo Quick Repair — styles
   Palette: electronics-bench navy + electric cyan + warm amber
   Type: Archivo (display) / Inter (body) / Space Mono (readout)
   ============================================================ */

:root{
  --ink:      #0B1220;   /* base background */
  --panel:    #111a2e;   /* raised panels */
  --panel-2:  #0e1626;   /* alt sections */
  --line:     #21304a;   /* hairlines */
  --cyan:     #22D3EE;   /* tech accent */
  --cyan-dim: #0e7d90;
  --amber:    #FBBF24;   /* CTA / energy */
  --amber-ink:#3a2a00;
  --text:     #EAF1F8;
  --muted:    #91A4BD;
  --white:    #ffffff;

  --radius:   14px;
  --radius-sm:10px;
  --wrap:     1120px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  background:var(--ink);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{ font-family:"Archivo",sans-serif; line-height:1.08; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.mono{ font-family:"Space Mono",monospace; letter-spacing:-.02em; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:"Archivo",sans-serif; font-weight:700; font-size:.98rem;
  padding:.85rem 1.4rem; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--amber); color:#20180a; box-shadow:0 8px 24px -8px rgba(251,191,36,.55); }
.btn-primary:hover{ background:#ffc93c; transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(251,191,36,.6); }
.btn-ghost{ background:rgba(255,255,255,.06); color:var(--text); border-color:rgba(255,255,255,.22); backdrop-filter:blur(4px); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn-call{ background:transparent; border-color:var(--cyan); color:var(--cyan); padding:.6rem 1rem; }
.btn-call:hover{ background:rgba(34,211,238,.12); }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,18,32,.72);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:1.5rem; height:70px; }
.brand{ display:flex; align-items:center; gap:.65rem; margin-right:auto; }
.brand-mark{ color:var(--cyan); display:grid; place-items:center; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:"Archivo",sans-serif; font-weight:900; font-size:1.2rem; letter-spacing:.02em; color:var(--white); }
.brand-sub{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); font-weight:600; }
.nav{ display:flex; gap:1.6rem; }
.nav a{ font-size:.95rem; color:var(--muted); font-weight:500; transition:color .15s; }
.nav a:hover{ color:var(--text); }
.header-call{ font-size:.9rem; }

.menu-toggle{ display:none; background:none; border:0; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.menu-toggle span{ width:24px; height:2px; background:var(--text); border-radius:2px; transition:.25s var(--ease); }
.menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{ display:none; flex-direction:column; gap:.25rem; padding:0 24px; max-height:0; overflow:hidden; transition:max-height .3s var(--ease); border-bottom:1px solid transparent; }
.mobile-nav.open{ max-height:340px; padding-bottom:16px; border-color:var(--line); }
.mobile-nav a{ padding:.75rem 0; color:var(--muted); border-bottom:1px solid var(--line); }
.mobile-nav a:last-child{ border:0; margin-top:.5rem; align-self:flex-start; }

/* ---------- Hero (storefront background + scrim) ---------- */
.hero{
  position:relative;
  min-height:min(88vh,760px);
  display:flex; align-items:center;
  background-image:url("assets/storefront.jpg");
  background-size:cover;
  background-position:center 38%;
  overflow:hidden;
}
/* semi-transparent overlay so the photo shows through slightly */
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,18,32,.62) 0%, rgba(11,18,32,.55) 45%, rgba(11,18,32,.86) 100%),
    linear-gradient(90deg, rgba(11,18,32,.72) 0%, rgba(11,18,32,.30) 60%, rgba(11,18,32,.15) 100%);
}
.hero-scrim::after{ /* subtle scanline / circuit texture */
  content:""; position:absolute; inset:0; opacity:.06; mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(34,211,238,.5) 3px 4px);
}
.hero-inner{ position:relative; z-index:2; padding:5rem 24px; max-width:720px; }
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--cyan); background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.4);
  padding:.4rem .9rem; border-radius:999px; margin-bottom:1.5rem;
}
.pill .dot{ width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5);} 70%{box-shadow:0 0 0 8px rgba(52,211,153,0);} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0);} }
.hero-title{ font-size:clamp(2.5rem,6.5vw,4.3rem); font-weight:900; margin-bottom:1.1rem; }
.hero-title .accent{ color:var(--amber); }
.hero-lead{ font-size:clamp(1.05rem,2.2vw,1.25rem); color:#d3ddea; max-width:34em; margin-bottom:2rem; }
.hero-cta{ display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:2.2rem; }
.hero-trust{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1.4rem; font-size:.95rem; color:#c3cfdd; }
.hero-trust .check{ color:var(--cyan); font-weight:700; margin-right:.35rem; }

/* ---------- Sections ---------- */
.section{ padding:6rem 0; }
.section-alt{ background:var(--panel-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ max-width:640px; margin-bottom:3rem; }
.eyebrow{ font-family:"Space Mono",monospace; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); }
.section-head h2{ font-size:clamp(1.7rem,3.8vw,2.6rem); font-weight:800; margin:.7rem 0 .9rem; }
.section-head p{ color:var(--muted); font-size:1.08rem; }

/* ---------- Services grid ---------- */
.grid{ display:grid; gap:1.1rem; }
.services{ grid-template-columns:repeat(3,1fr); }
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.7rem; transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  position:relative; overflow:hidden;
}
.card::before{ content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--cyan); transition:width .3s var(--ease); }
.card:hover{ transform:translateY(-4px); border-color:rgba(34,211,238,.4); box-shadow:0 20px 40px -24px rgba(0,0,0,.7); }
.card:hover::before{ width:100%; }
.card-icon{ display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background:rgba(34,211,238,.1); color:var(--cyan); margin-bottom:1.1rem; }
.card-icon svg{ width:26px; height:26px; }
.card h3{ font-size:1.2rem; font-weight:700; margin-bottom:.5rem; }
.card p{ color:var(--muted); font-size:.96rem; }

/* ---------- Pricing ---------- */
.pricing{ grid-template-columns:repeat(4,1fr); }
.price-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.5rem; position:relative; display:block; color:inherit; text-decoration:none;
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
a.price-card:hover{ transform:translateY(-4px); border-color:rgba(34,211,238,.45); box-shadow:0 20px 40px -24px rgba(0,0,0,.7); }
a.price-card:hover .amount{ color:var(--cyan); }
a.price-card.featured:hover .amount{ color:var(--amber); }
.price-card.featured{ border-color:var(--amber); background:linear-gradient(180deg, rgba(251,191,36,.08), var(--panel)); }
.price-card .tag{
  position:absolute; top:-11px; left:1.4rem; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  background:var(--amber); color:#20180a; padding:.25rem .6rem; border-radius:999px; font-family:"Archivo",sans-serif;
}
.price-card h3{ font-size:1.05rem; font-weight:700; color:var(--muted); margin-bottom:.6rem; }
.price{ display:flex; align-items:baseline; gap:.4rem; margin-bottom:.6rem; }
.price .from{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.price .amount{ font-size:1.35rem; font-weight:700; color:var(--cyan); }
.price-card.featured .amount{ color:var(--amber); }
.price-note{ font-size:.9rem; color:var(--muted); }
.price-disclaimer{ margin-top:1.6rem; font-size:.9rem; color:var(--muted); }
.price-disclaimer a{ color:var(--cyan); }

/* ---------- Why us ---------- */
.why-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3.5rem; align-items:start; }
.why-copy h2{ font-size:clamp(1.7rem,3.6vw,2.5rem); font-weight:800; margin:.7rem 0 1rem; }
.why-copy p{ color:var(--muted); font-size:1.08rem; margin-bottom:1.6rem; }
.why-list{ list-style:none; margin:0; padding:0; display:grid; gap:1.4rem; }
.why-list li{ display:flex; gap:1.1rem; align-items:flex-start; }
.why-num{ color:var(--cyan); font-size:1rem; font-weight:700; padding-top:.15rem; opacity:.8; min-width:1.8rem; }
.why-list h3{ font-size:1.15rem; font-weight:700; margin-bottom:.25rem; }
.why-list p{ color:var(--muted); font-size:.96rem; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:2.5rem; align-items:start; }
.contact-info{ display:flex; flex-direction:column; gap:1.4rem; }
.info-row{ display:flex; flex-direction:column; gap:.25rem; }
.info-label{ font-family:"Space Mono",monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--cyan); }
.info-value{ font-size:1.05rem; color:var(--text); transition:color .15s; }
a.info-value:hover{ color:var(--cyan); }
.hours{ border-top:1px solid var(--line); padding-top:1.3rem; margin-top:.4rem; }
.hours-list{ list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.45rem; font-size:.95rem; }
.hours-list li{ display:flex; justify-content:space-between; color:var(--text); border-bottom:1px dashed var(--line); padding-bottom:.4rem; }
.hours-list li span:last-child{ color:var(--muted); }
.hours-note{ font-size:.82rem; color:var(--muted); margin-top:.7rem; }

/* Form */
.contact-form{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; }
.hidden-field{ display:none; }
.field{ margin-bottom:1rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field label{ display:block; font-size:.85rem; font-weight:600; color:var(--muted); margin-bottom:.4rem; }
.field input, .field textarea{
  width:100%; background:var(--ink); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--text); padding:.75rem .85rem; font-family:inherit; font-size:.98rem; transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder, .field textarea::placeholder{ color:#5f7590; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(34,211,238,.15); }
.field textarea{ resize:vertical; }
.form-note{ text-align:center; font-size:.88rem; color:var(--muted); margin-top:.9rem; }
.form-note a{ color:var(--cyan); }

/* Map */
.map{ margin-top:2.5rem; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.map iframe{ width:100%; height:360px; border:0; display:block; filter:grayscale(.2) contrast(1.05); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); border-top:1px solid var(--line); padding-top:3rem; }
.footer-inner{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2rem; padding-bottom:2.5rem; }
.footer-brand .brand-name{ font-size:1.3rem; }
.footer-brand .brand-sub{ color:var(--cyan); letter-spacing:.16em; text-transform:uppercase; font-size:.75rem; }
.footer-brand p{ color:var(--muted); margin-top:.7rem; max-width:28em; font-size:.95rem; }
.footer-col{ display:flex; flex-direction:column; gap:.5rem; }
.footer-col a{ color:var(--muted); font-size:.95rem; transition:color .15s; }
.footer-col a:hover{ color:var(--cyan); }
.footer-col address{ font-style:normal; color:var(--muted); font-size:.95rem; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:1.3rem 24px; border-top:1px solid var(--line); font-size:.85rem; color:var(--muted); }
.footer-bottom a{ color:var(--muted); }
.footer-bottom a:hover{ color:var(--cyan); }

/* ---------- Floating call button (mobile) ---------- */
.fab{
  position:fixed; right:18px; bottom:18px; z-index:40;
  width:56px; height:56px; border-radius:50%; display:none; place-items:center;
  background:var(--amber); color:#20180a; box-shadow:0 10px 30px -6px rgba(251,191,36,.6);
  transition:transform .18s var(--ease);
}
.fab:hover{ transform:scale(1.06); }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .services{ grid-template-columns:repeat(2,1fr); }
  .pricing{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:720px){
  .nav, .header-call{ display:none; }
  .menu-toggle{ display:flex; }
  .mobile-nav{ display:flex; }
  .fab{ display:grid; }
  .section{ padding:4.5rem 0; }
  .hero-inner{ padding:4rem 24px; }
  .services, .pricing{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; gap:.6rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
}