/* ============================================================
   RRS.WORKS — Shared Stylesheet
   Black/white foundation · Amber accent · Electric blue accent
   ============================================================ */

:root {
  --black:       #000000;
  --near-black:  #0a0a0a;
  --dark-1:      #0f0f0f;
  --dark-2:      #141414;
  --dark-3:      #1a1a1a;
  --dark-4:      #222222;
  --mid:         #333333;
  --muted:       #555555;
  --dim:         #888888;
  --light:       #cccccc;
  --near-white:  #e8e8e8;
  --white:       #ffffff;

  --amber:       #f5a623;
  --amber-hi:    #ffcf3d;
  --amber-dim:   #b87a10;
  --amber-glow:  rgba(245,166,35,.25);

  --blue:        #00d4ff;
  --blue-hi:     #5de8ff;
  --blue-dim:    #0099cc;
  --blue-glow:   rgba(0,212,255,.22);

  --border:      rgba(255,255,255,.08);
  --border-hi:   rgba(255,255,255,.16);

  --font-display: 'Share Tech Mono', monospace;
  --font-body:    'IBM Plex Mono', monospace;
  --font-vt:      'VT323', monospace;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background:var(--near-black);
  color:var(--light);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.7;
  overflow-x:hidden;
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--dark-1); }
::-webkit-scrollbar-thumb { background:var(--mid); }
::-webkit-scrollbar-thumb:hover { background:var(--amber); }

/* ── ANIMATIONS ── */
@keyframes fadeUp    { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes blink     { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes scanMove  { from{transform:translateY(-100%)} to{transform:translateY(100vh)} }
@keyframes glowAmber { 0%,100%{box-shadow:0 0 16px var(--amber-glow)} 50%{box-shadow:0 0 32px rgba(245,166,35,.45)} }
@keyframes glowBlue  { 0%,100%{box-shadow:0 0 16px var(--blue-glow)} 50%{box-shadow:0 0 32px rgba(0,212,255,.4)} }
@keyframes spin      { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ── NAV ── */
#sitenav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  background:rgba(0,0,0,.92);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px; height:60px;
  transition:background .3s;
}
#sitenav.scrolled { background:rgba(0,0,0,.98); border-color:rgba(245,166,35,.25); }

.nav-logo {
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.nav-logo img { height:44px; width:auto; object-fit:contain; }
.nav-logo-text {
  font-family:var(--font-display);
  font-size:16px; letter-spacing:.2em;
  color:var(--white);
  text-shadow:0 0 12px var(--blue-glow);
}
.nav-logo-text span { color:var(--amber); }

.nav-links {
  display:flex; align-items:center; gap:4px;
  list-style:none;
}
.nav-links a {
  font-family:var(--font-display);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); padding:6px 12px;
  border:1px solid transparent;
  transition:all .2s;
}
.nav-links a:hover, .nav-links a.active {
  color:var(--white);
  border-color:var(--border-hi);
  text-shadow:0 0 8px var(--blue-glow);
}
.nav-links a.cta-btn {
  color:var(--black); background:var(--amber);
  border-color:var(--amber); margin-left:8px;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.nav-links a.cta-btn:hover { background:var(--amber-hi); }

.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:4px; background:none; border:none;
}
.nav-hamburger span { display:block; width:22px; height:2px; background:var(--light); transition:all .25s; }

/* ── HERO ── */
.hero {
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
  padding:80px 48px 60px;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(245,166,35,.06) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 30%, rgba(0,212,255,.06) 0%, transparent 55%),
    var(--black);
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:60px 60px;
}
.hero-scan {
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(0,212,255,.3), transparent);
  animation:scanMove 6s linear infinite;
  pointer-events:none;
}
.hero-content { position:relative; z-index:2; max-width:1000px; }

.hero-logo-wrap {
  margin-bottom:32px;
  opacity:0; animation:fadeIn .6s .2s forwards;
}
.hero-logo-img { height:80px; object-fit:contain; }

.hero-eyebrow {
  font-family:var(--font-display);
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--blue); margin-bottom:16px;
  opacity:0; animation:fadeUp .5s .4s forwards;
}
.hero-eyebrow::before { content:'// '; color:var(--amber); }

.hero-h1 {
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,3.8rem);
  color:var(--white); line-height:1.1; letter-spacing:-.01em;
  margin-bottom:8px;
  opacity:0; animation:fadeUp .5s .55s forwards;
}
.hero-h1 em { color:var(--amber); font-style:normal; }
.hero-h1 .blue-word { color:var(--blue); }

.hero-sub {
  font-size:clamp(.85rem,1.8vw,1.05rem);
  color:var(--dim); max-width:640px; line-height:1.8;
  margin-top:20px; margin-bottom:40px;
  opacity:0; animation:fadeUp .5s .7s forwards;
}

.hero-ctas {
  display:flex; gap:14px; flex-wrap:wrap;
  opacity:0; animation:fadeUp .5s .85s forwards;
}
.btn {
  font-family:var(--font-display);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:14px 28px; cursor:pointer; display:inline-block;
  transition:all .2s; border:1px solid; text-align:center;
}
.btn-amber {
  color:var(--black); background:var(--amber); border-color:var(--amber);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.btn-amber:hover { background:var(--amber-hi); box-shadow:0 0 28px var(--amber-glow); transform:translateY(-2px); }
.btn-outline {
  color:var(--white); background:transparent; border-color:rgba(255,255,255,.25);
}
.btn-outline:hover { border-color:var(--blue); color:var(--blue); box-shadow:0 0 20px var(--blue-glow); transform:translateY(-2px); }
.btn-blue {
  color:var(--black); background:var(--blue); border-color:var(--blue);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.btn-blue:hover { background:var(--blue-hi); box-shadow:0 0 28px var(--blue-glow); transform:translateY(-2px); }

.hero-stats {
  margin-top:60px;
  display:flex; gap:2px; flex-wrap:wrap;
  opacity:0; animation:fadeUp .5s 1s forwards;
}
.hero-stat {
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  padding:16px 28px; min-width:130px;
  transition:border-color .25s;
}
.hero-stat:hover { border-color:rgba(245,166,35,.3); }
.hero-stat-val {
  font-family:var(--font-vt);
  font-size:2rem; color:var(--amber); display:block;
  text-shadow:0 0 14px var(--amber-glow);
}
.hero-stat-lbl { font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

/* ── SECTIONS ── */
.section { padding:96px 48px; position:relative; }
.section-alt { background:var(--dark-1); }
.section-dark { background:var(--black); }

.section-tag {
  font-family:var(--font-display);
  font-size:9px; letter-spacing:.25em; text-transform:uppercase;
  color:var(--amber); margin-bottom:12px;
}
.section-tag::before { content:'// '; }

.section-h2 {
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3.5vw,2.6rem);
  color:var(--white); line-height:1.15; margin-bottom:16px;
}
.section-h2 em { color:var(--amber); font-style:normal; }
.section-h2 .blue { color:var(--blue); }

.section-lead {
  font-size:13.5px; color:var(--dim);
  max-width:620px; line-height:1.9;
  margin-bottom:56px;
}

.section-rule {
  width:48px; height:2px;
  background:linear-gradient(90deg,var(--amber),transparent);
  margin-bottom:20px;
}

/* ── GRID SYSTEMS ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.grid-split { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }

/* ── CARDS ── */
.card {
  background:var(--dark-2);
  border:1px solid var(--border);
  padding:32px; position:relative;
  transition:border-color .3s, box-shadow .3s, transform .25s;
  overflow:hidden;
}
.card::before {
  content:''; position:absolute; top:0; left:0;
  width:3px; height:100%;
  background:var(--amber); opacity:0;
  transition:opacity .3s;
}
.card:hover { border-color:rgba(245,166,35,.3); transform:translateY(-3px); box-shadow:0 8px 40px rgba(0,0,0,.6); }
.card:hover::before { opacity:1; }

.card-blue::before { background:var(--blue); }
.card-blue:hover { border-color:rgba(0,212,255,.3); box-shadow:0 8px 40px rgba(0,212,255,.08); }

.card-icon {
  width:44px; height:44px;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; margin-bottom:20px;
  color:var(--amber); background:rgba(245,166,35,.08);
}
.card-icon.blue { color:var(--blue); background:rgba(0,212,255,.08); }

.card-tag {
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber); margin-bottom:10px;
}
.card-tag.blue { color:var(--blue); }

.card h3 {
  font-family:var(--font-display);
  font-size:15px; letter-spacing:.06em; color:var(--white);
  margin-bottom:10px;
}
.card p { font-size:12.5px; color:var(--dim); line-height:1.8; }

/* ── SERVICE CARDS (expanded) ── */
.svc-accordion { border:1px solid var(--border); margin-bottom:2px; overflow:hidden; }
.svc-accordion-hdr {
  display:flex; align-items:center; gap:20px;
  padding:24px 28px; cursor:pointer; user-select:none;
  transition:background .2s;
}
.svc-accordion-hdr:hover { background:rgba(245,166,35,.04); }
.svc-accordion-hdr.open { background:rgba(245,166,35,.06); border-bottom:1px solid var(--border); }
.svc-icon-wrap {
  width:40px; height:40px; flex-shrink:0;
  border:1px solid rgba(245,166,35,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--amber);
}
.svc-hdr-text { flex:1; }
.svc-hdr-title {
  font-family:var(--font-display);
  font-size:14px; letter-spacing:.08em; color:var(--white); margin-bottom:3px;
}
.svc-hdr-sub { font-size:11.5px; color:var(--dim); }
.svc-price-tag { text-align:right; white-space:nowrap; }
.svc-price-val { font-family:var(--font-vt); font-size:1.6rem; color:var(--amber); display:block; line-height:1; }
.svc-price-note { font-size:9px; letter-spacing:.1em; color:var(--muted); }
.svc-chevron { font-size:12px; color:var(--muted); margin-left:12px; transition:transform .3s; }
.svc-accordion-hdr.open .svc-chevron { transform:rotate(180deg); color:var(--amber); }
.svc-body { max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.4,0,.2,1); }
.svc-accordion.open .svc-body { max-height:2000px; }
.svc-body-inner { padding:32px 28px 32px; display:grid; grid-template-columns:1.2fr 1fr; gap:48px; }
.svc-desc { font-size:13px; color:var(--light); line-height:1.9; margin-bottom:16px; }
.svc-features { list-style:none; }
.svc-features li { font-size:12.5px; color:var(--dim); padding:6px 0; border-bottom:1px solid var(--border); display:flex; gap:10px; align-items:baseline; }
.svc-features li::before { content:'→'; color:var(--amber); flex-shrink:0; }
.svc-right { border-left:1px solid var(--border); padding-left:40px; display:flex; flex-direction:column; gap:20px; }
.svc-right-title { font-family:var(--font-display); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--amber); margin-bottom:6px; }
.svc-right-note { font-size:12px; color:var(--dim); line-height:1.8; }
.svc-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:16px; }
.svc-tag-pill { font-size:9px; letter-spacing:.1em; text-transform:uppercase; border:1px solid rgba(245,166,35,.2); padding:3px 8px; color:var(--amber-dim); }

/* ── PROCESS STEPS ── */
.process-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0; }
.process-step { padding:32px 28px; border:1px solid var(--border); position:relative; }
.process-step + .process-step { border-left:none; }
.process-step-num {
  font-family:var(--font-vt); font-size:3.5rem;
  color:rgba(245,166,35,.15); position:absolute;
  top:12px; right:16px; line-height:1;
}
.process-step h4 { font-family:var(--font-display); font-size:13px; letter-spacing:.08em; color:var(--white); margin-bottom:8px; }
.process-step p { font-size:12px; color:var(--dim); line-height:1.7; }
.process-step .step-icon { font-size:20px; color:var(--amber); margin-bottom:12px; }

/* ── TESTIMONIALS / CALLOUT ── */
.callout {
  border-left:3px solid var(--amber);
  padding:24px 28px;
  background:rgba(245,166,35,.04);
  font-size:13px; color:var(--light); line-height:1.9;
}
.callout strong { color:var(--amber); }

/* ── PROOF STRIP ── */
.proof-strip {
  background:var(--dark-3);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:28px 48px;
  display:flex; align-items:center; gap:48px;
  flex-wrap:wrap;
}
.proof-item { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--dim); letter-spacing:.08em; }
.proof-item span { color:var(--white); font-family:var(--font-display); }
.proof-dot { width:5px; height:5px; border-radius:50%; background:var(--amber); flex-shrink:0; }

/* ── CONTACT FORM ── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field.full { grid-column:1/-1; }
.form-field label { font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.form-field input,
.form-field select,
.form-field textarea {
  background:var(--dark-3);
  border:1px solid var(--border);
  color:var(--light);
  font-family:var(--font-body);
  font-size:13px;
  padding:12px 14px;
  outline:none;
  transition:border-color .2s;
  width:100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color:var(--amber); }
.form-field textarea { resize:vertical; min-height:120px; }
.form-field select { cursor:pointer; appearance:none; }
.form-note { font-size:11px; color:var(--muted); margin-top:4px; }

/* ── FOOTER ── */
#sitefooter {
  background:var(--black);
  border-top:1px solid var(--border);
  padding:56px 48px 28px;
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-brand img { width:44px; margin-bottom:14px; }
.footer-brand p { font-size:12px; color:var(--muted); line-height:1.8; max-width:260px; }
.footer-col h4 { font-family:var(--font-display); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--white); margin-bottom:16px; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { font-size:12.5px; color:var(--muted); transition:color .2s; }
.footer-col ul li a:hover { color:var(--amber); }
.footer-bottom {
  border-top:1px solid var(--border); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
  font-size:11px; color:var(--muted); letter-spacing:.06em;
}
.footer-bottom a { color:var(--muted); }
.footer-bottom a:hover { color:var(--white); }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#3dff6e; box-shadow:0 0 6px rgba(61,255,110,.6); animation:pulse 2s infinite; margin-right:6px; }

/* ── UTILITY ── */
.text-amber  { color:var(--amber); }
.text-blue   { color:var(--blue); }
.text-white  { color:var(--white); }
.text-dim    { color:var(--dim); }
.text-muted  { color:var(--muted); }
.text-center { text-align:center; }
.mt-8  { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.mt-32 { margin-top:32px; }
.mt-48 { margin-top:48px; }
.mb-8  { margin-bottom:8px; }
.mb-16 { margin-bottom:16px; }
.mb-24 { margin-bottom:24px; }
.mb-32 { margin-bottom:32px; }
.highlight-bar {
  display:inline-block;
  border-bottom:2px solid var(--amber);
  padding-bottom:2px;
}
.amber-glow-txt { text-shadow:0 0 18px var(--amber-glow); }
.blue-glow-txt  { text-shadow:0 0 18px var(--blue-glow); }

/* ── MOBILE NAV ── */
@media(max-width:900px){
  .nav-links { display:none; flex-direction:column; position:fixed; top:60px; left:0; right:0; bottom:0; background:rgba(0,0,0,.97); padding:32px; gap:4px; overflow-y:auto; }
  .nav-links.open { display:flex; }
  .nav-links a { padding:14px; border-bottom:1px solid var(--border); font-size:14px; }
  .nav-hamburger { display:flex; }
}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .grid-2, .grid-3, .grid-4, .grid-split { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .svc-body-inner { grid-template-columns:1fr; gap:28px; }
  .svc-right { border-left:none; border-top:1px solid var(--border); padding-left:0; padding-top:24px; }
  .process-steps { grid-template-columns:1fr 1fr; }
  .process-step + .process-step { border-left:1px solid var(--border); }
  .process-step:nth-child(2n+1) + .process-step { border-left:none; }
}
@media(max-width:640px){
  .section { padding:64px 20px; }
  .hero { padding:80px 20px 48px; }
  #sitenav { padding:0 16px; }
  .proof-strip { padding:20px; gap:24px; }
  .form-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .hero-stats { gap:2px; }
  .hero-ctas { flex-direction:column; }
  .process-steps { grid-template-columns:1fr; }
  .process-step + .process-step { border-left:1px solid var(--border); border-top:none; }
  #sitefooter { padding:40px 20px 24px; }
}