/* =========================================================
   raza-tech.com — design tokens
   Concept: the site itself is styled like a Figma canvas —
   dotted grid, ruler ticks, "frame" labels above each panel,
   selection handles + dimension callouts on hover.
   ========================================================= */

:root{
  --canvas:#F5F6F7;
  --canvas-dot:#E2E4E8;
  --panel:#FFFFFF;
  --line:#E3E4E7;
  --line-strong:#CBCDD3;
  --ink:#16171A;
  --muted:#6B6D74;
  --faint:#9A9CA3;

  --guide:#E93D82;      /* signature — smart-guide pink, precision/hover cues  */
  --guide-soft:#FCE4EE;
  --select:#2F6FED;     /* selection blue — links, tags                        */
  --select-soft:#E8EFFE;
  --maroon:#7C2D3B;      /* personal brand tie-in — CTA, name accents           */
  --maroon-soft:#F3E7E9;

  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius:2px;
  --shadow-panel: 0 1px 2px rgba(22,23,26,0.04), 0 8px 24px rgba(22,23,26,0.05);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(var(--canvas-dot) 1px, transparent 1px) 0 0/22px 22px,
    var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}

h1,h2,h3{
  font-family:var(--mono);
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
}

:focus-visible{
  outline:2px solid var(--select);
  outline-offset:3px;
}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--guide);
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;
  background:var(--guide);
  display:inline-block;
  border-radius:1px;
}

/* ---------- ruler strip (top of every page) ---------- */
.ruler{
  height:22px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  padding:0 24px;
}
.ruler span{
  flex:0 0 auto;
  width:80px;
  border-left:1px solid var(--line-strong);
  height:8px;
  font-family:var(--mono);
  font-size:9px;
  color:var(--faint);
  padding-left:3px;
}

/* ---------- top nav — styled like a builder toolbar ---------- */
.toolbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.toolbar-inner{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
}
.filetab{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;color:var(--ink);
}
.filetab .dot{width:9px;height:9px;background:var(--guide);border-radius:2px;flex:none;}
.filetab b{font-weight:600;}
.filetab span{color:var(--faint);}
.navlinks{display:flex;align-items:center;gap:2px;}
.navlinks a{
  font-family:var(--mono);font-size:13px;
  padding:8px 12px;border-radius:2px;color:var(--muted);
  transition:background .15s, color .15s;
}
.navlinks a:hover{background:var(--canvas);color:var(--ink);}
.navlinks a.active{color:var(--ink);background:var(--select-soft);}
.nav-cta{
  font-family:var(--mono);font-size:13px;font-weight:600;
  padding:9px 16px;background:var(--maroon);color:#fff;border-radius:2px;
  border:1px solid var(--maroon);
  transition:transform .15s, box-shadow .15s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(124,45,59,0.28);}
.navtoggle{display:none;}

/* ---------- shell / sections ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
section{padding:88px 0;}
section.tight{padding:56px 0;}
.hairline{border-top:1px solid var(--line);}

/* ---------- "frame" label — mimics a Figma frame name above a bounded panel ---------- */
.frame{position:relative;}
.frame-label{
  font-family:var(--mono);font-size:11px;color:var(--select);
  letter-spacing:0.02em;
  display:flex;align-items:center;gap:6px;
  margin-bottom:8px;
}
.frame-label::before{content:"▢";font-size:10px;}
.frame-box{
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--panel);
  position:relative;
}
.frame-box::before,.frame-box::after,
.frame-corners span{
  content:"";
  position:absolute;
  width:7px;height:7px;
  border:1.5px solid var(--select);
  background:#fff;
  opacity:0;
  transition:opacity .18s;
}
.frame:hover .frame-box::before,
.frame:hover .frame-box::after,
.frame:hover .frame-corners span{opacity:1;}
.frame-box::before{top:-4px;left:-4px;}
.frame-box::after{top:-4px;right:-4px;}
.frame-corners span:nth-child(1){bottom:-4px;left:-4px;}
.frame-corners span:nth-child(2){bottom:-4px;right:-4px;}

.dim-label{
  position:absolute;
  font-family:var(--mono);font-size:10px;
  background:var(--select);color:#fff;
  padding:2px 6px;border-radius:2px;
  opacity:0; transform:translateY(4px);
  transition:opacity .18s, transform .18s;
  pointer-events:none;
  white-space:nowrap;
}
.frame:hover .dim-label{opacity:1;transform:translateY(0);}
.dim-label.w{bottom:-26px;left:50%;transform:translateX(-50%) translateY(4px);}
.frame:hover .dim-label.w{transform:translateX(-50%) translateY(0);}

/* guide lines that sweep out from an element on hover */
.guides{position:absolute;inset:0;pointer-events:none;}
.guides i{
  position:absolute;background:var(--guide);opacity:0;
  transition:opacity .18s;
}
.guides .h{left:-40px;right:-40px;height:1px;top:50%;}
.guides .v{top:-40px;bottom:-40px;width:1px;left:50%;}
.frame:hover .guides i{opacity:.55;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:13px;font-weight:600;
  padding:12px 20px;border-radius:2px;border:1px solid transparent;
  transition:transform .15s,box-shadow .15s,background .15s;
}
.btn-primary{background:var(--maroon);color:#fff;}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(124,45,59,0.3);}
.btn-outline{border-color:var(--line-strong);color:var(--ink);}
.btn-outline:hover{border-color:var(--ink);background:var(--panel);}
.btn-ghost{color:var(--select);}
.btn-ghost:hover{text-decoration:underline;}

/* ---------- pills / tags ---------- */
.tag{
  font-family:var(--mono);font-size:12px;
  padding:6px 11px;border:1px solid var(--line-strong);
  border-radius:2px;color:var(--muted);background:var(--panel);
}
.tag.on{color:var(--select);border-color:var(--select);background:var(--select-soft);}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:36px 0;}
.foot-inner{
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:12px;color:var(--faint);
  flex-wrap:wrap;gap:10px;
}

/* ---------- utility ---------- */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.muted{color:var(--muted);}
.lede{font-size:19px;color:var(--muted);max-width:56ch;}
.mono-small{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.04em;}

@media (max-width:860px){
  .grid-2{grid-template-columns:1fr;gap:36px;}
  .navlinks{display:none;}
  .ruler span{width:48px;}
  .filetab span{display:none;}
  .toolbar-inner{padding:12px 16px;}
  .wrap{padding:0 18px;}
  section{padding:56px 0;}
}
@media (max-width:600px){
  div[style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
    row-gap:24px;
  }
}