/* ============================================
   RZWare — Website Styles
   Built on the v1.0 design system
   ============================================ */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/geist-300.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/geist-400.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/geist-500.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/geist-600.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/geist-700.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/geist-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/geist-mono-500.woff2") format("woff2");
}

:root{
  --ink:        oklch(0.22 0.025 245);
  --ink-2:      oklch(0.34 0.025 245);
  --muted:      oklch(0.54 0.020 235);
  --muted-2:    oklch(0.72 0.016 230);
  --line:       oklch(0.88 0.014 230);
  --line-2:     oklch(0.92 0.010 230);
  --surface:    oklch(0.96 0.012 230);
  --paper:      oklch(0.985 0.008 230);
  --white:      #ffffff;

  --blue:       oklch(0.55 0.17 245);
  --blue-deep:  oklch(0.42 0.16 248);
  --blue-soft:  oklch(0.94 0.04 240);

  --moss:       oklch(0.48 0.12 165);
  --moss-deep:  oklch(0.38 0.10 168);
  --moss-soft:  oklch(0.93 0.045 165);

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-1: 3px; --r-2: 6px; --r-3: 10px; --r-4: 16px;

  --sh-1: 0 1px 0 rgba(20,30,60,.04), 0 1px 2px rgba(20,30,60,.05);
  --sh-2: 0 1px 0 rgba(20,30,60,.04), 0 4px 12px -2px rgba(20,30,60,.09);
  --sh-3: 0 1px 0 rgba(20,30,60,.05), 0 14px 32px -10px rgba(20,30,60,.18);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;
  --s-20:80px; --s-24:96px; --s-32:128px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:64px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  font-feature-settings: "ss01","cv11";
}
a{color:inherit}
button{font:inherit;cursor:pointer}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--s-8)}

/* NAV */
.nav{
  border-bottom:1px solid var(--line);
  background: color-mix(in oklch, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  position:sticky;top:0;z-index:50;
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding: var(--s-4) var(--s-8);
  max-width:1240px;margin:0 auto;
}

.lk{
  font-family:var(--sans);font-weight:700;font-size:20px;line-height:1;
  letter-spacing:-0.04em;color:var(--ink);
  display:inline-flex;align-items:flex-end;text-decoration:none;
}
.lk .rz{display:inline-flex;position:relative}
.lk .rz .z{display:inline-block;margin-left:-0.18em;color:var(--blue)}
.lk .rest{margin-left:-0.01em;font-weight:500;color:var(--ink-2)}
.lk .dot{width:5px;height:5px;background:var(--blue);display:inline-block;margin:0 0 3px 4px}

.lk-lg{font-size:36px}
.lk-lg .dot{width:8px;height:8px;margin-bottom:6px;margin-left:6px}

.nav-links{display:flex;gap:var(--s-6);font-size:14px;font-weight:500}
.nav-links a{text-decoration:none;color:var(--ink-2);letter-spacing:-0.005em}
.nav-links a:hover{color:var(--blue)}

/* BUTTONS */
.btn{
  font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:-0.005em;
  padding:11px 18px;border-radius:var(--r-2);border:1px solid transparent;
  background:var(--ink);color:var(--paper);cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;gap:8px;
  transition: all .15s ease;text-decoration:none;
}
.btn:hover{background:var(--ink-2);transform:translateY(-1px)}
.btn.accent{background:var(--blue)}
.btn.accent:hover{background:var(--blue-deep)}
.btn.secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.secondary:hover{border-color:var(--ink);background:var(--surface)}
.btn.lg{padding:14px 22px;font-size:15px}
.btn svg{width:14px;height:14px}

/* HERO */
.hero{
  padding: var(--s-24) var(--s-8) var(--s-20);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line-2) 1px, transparent 1px);
  background-size: calc((100% - 0px) / 12) 100%;
  opacity:.5;
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
}
.hero-inner{position:relative;z-index:1;max-width:1240px;margin:0 auto}

.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:0.06em;
  color:var(--blue);text-transform:uppercase;
  display:flex;gap:var(--s-3);align-items:center;
  margin-bottom:var(--s-6);
}
.eyebrow .bar{width:24px;height:1px;background:var(--blue)}

h1.hero-title{
  font-size: clamp(56px, 9vw, 132px);
  font-weight:700;letter-spacing:-0.045em;line-height:0.92;
  margin: 0 0 var(--s-8);
  max-width: 16ch;
}
h1.hero-title .blue{color:var(--blue)}
h1.hero-title em{font-style:normal;color:var(--muted)}
h1.hero-title .dot{
  display:inline-block;width:0.12em;height:0.12em;background:var(--blue);
  margin-left:0.04em;vertical-align:baseline;
  transform:translateY(-0.04em);
}

.hero-lede{
  font-size:22px;line-height:1.5;max-width:54ch;
  color:var(--ink-2);font-weight:400;letter-spacing:-0.005em;
  margin: 0 0 var(--s-10);
}

.hero-ctas{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-16)}

.hero-meta{
  border-top:1px solid var(--line);
  padding-top:var(--s-6);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6);
}
.hero-meta .item .k{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:0.06em;text-transform:uppercase;
  margin-bottom:6px;
}
.hero-meta .item .v{
  font-size:15px;color:var(--ink);font-weight:500;letter-spacing:-0.005em;
}

/* SERVICES */
.services{
  padding: var(--s-20) var(--s-8) var(--s-24);
  border-top:1px solid var(--line);
  background:var(--surface);
}
.services-inner{max-width:1240px;margin:0 auto}

.section-head{
  display:grid;grid-template-columns:160px 1fr;gap:var(--s-12);
  margin-bottom:var(--s-12);
}
.section-num{
  font-family:var(--mono);font-size:12px;color:var(--muted);
  letter-spacing:0.06em;
}
.section-num b{color:var(--ink);font-weight:500;display:block;margin-top:2px;font-family:var(--sans);font-size:13px;letter-spacing:-0.005em}
.section-title h2{
  font-size:48px;font-weight:600;letter-spacing:-0.03em;
  line-height:1.02;margin:0 0 var(--s-3);max-width:18ch;
}
.section-title .blue{color:var(--blue)}
.section-title p{
  margin:0;color:var(--ink-2);font-size:18px;max-width:54ch;
  line-height:1.5;
}

.svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s-4);
}
@media (max-width: 1100px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
}
.svc{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-3);
  padding: var(--s-8);
  display:flex;flex-direction:column;gap:var(--s-5);
  transition: all .2s ease;
  position:relative;overflow:hidden;
}
.svc:hover{
  border-color:var(--ink);
  transform:translateY(-2px);
  box-shadow:var(--sh-2);
}
.svc::before{
  content:"";position:absolute;top:0;left:0;width:32px;height:3px;background:var(--blue);
  transform:translateX(-100%);transition:transform .25s ease;
}
.svc:hover::before{transform:translateX(0)}

.svc .head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--s-4);
}
.svc .num{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:0.06em;
}
.svc .icon{
  width:40px;height:40px;border-radius:var(--r-2);
  border:1px solid var(--line);background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);
}
.svc .icon svg{width:20px;height:20px}
.svc h3{
  font-size:24px;font-weight:600;letter-spacing:-0.018em;
  margin:0;line-height:1.15;
}
.svc p{
  margin:0;color:var(--ink-2);font-size:15px;line-height:1.55;
}
.svc .tags{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:var(--s-3);
}
.svc .tag{
  font-family:var(--mono);font-size:10.5px;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);
  padding:3px 7px;border-radius:var(--r-1);
  letter-spacing:0.04em;text-transform:uppercase;
}

/* CONTACT */
.contact{
  padding: var(--s-24) var(--s-8);
  background:var(--ink);color:var(--paper);
  position:relative;overflow:hidden;
}
.contact::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image: linear-gradient(to right, oklch(0.30 0.025 245) 1px, transparent 1px);
  background-size: calc((100% - 0px) / 12) 100%;
  opacity:.45;
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}
.contact-inner{
  max-width:1240px;margin:0 auto;position:relative;z-index:1;
  display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s-12);align-items:end;
}
.contact .eyebrow{color:var(--blue)}
.contact .eyebrow .bar{background:var(--blue)}
.contact h2{
  font-size: clamp(40px, 5.5vw, 76px);
  font-weight:600;letter-spacing:-0.035em;line-height:1;
  margin:0 0 var(--s-3);
}
.contact h2 em{font-style:normal;color:var(--muted-2)}
.contact h2 .blue{color:var(--blue)}
.contact .sub{
  font-size:18px;color:var(--muted-2);line-height:1.5;margin:0 0 var(--s-8);max-width:42ch;
}
.contact .ctas{display:flex;gap:var(--s-3);flex-wrap:wrap}
.contact .btn.accent{background:var(--blue);color:var(--white)}
.contact .btn.accent:hover{background:var(--blue-deep)}
.contact .btn.secondary{background:transparent;color:var(--paper);border-color:oklch(0.40 0.018 245)}
.contact .btn.secondary:hover{border-color:var(--paper);background:transparent}

.contact-info{
  border-top:1px solid oklch(0.32 0.022 245);
  padding-top:var(--s-6);
  display:flex;flex-direction:column;gap:var(--s-4);
  font-family:var(--mono);font-size:13px;
}
.contact-info .row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4)}
.contact-info .k{color:var(--muted-2);letter-spacing:0.06em;text-transform:uppercase;font-size:11px}
.contact-info .v{color:var(--paper)}
.contact-info .v a{color:inherit;text-decoration:none;border-bottom:1px solid oklch(0.40 0.018 245)}
.contact-info .v a:hover{border-color:var(--blue);color:var(--blue)}

/* FOOTER */
footer.foot{
  padding: var(--s-12) var(--s-8) var(--s-8);
  border-top:1px solid var(--line);
  background:var(--paper);
}
.foot-inner{
  max-width:1240px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--s-8);flex-wrap:wrap;
}
.foot-left{display:flex;flex-direction:column;gap:var(--s-4)}
.foot-left .lk{font-size:24px}
.foot-left .lk .dot{width:6px;height:6px;margin-bottom:4px;margin-left:5px}
.foot-left .copy{
  font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:0.04em;
}
.foot-right{
  font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:0.04em;
  text-align:right;display:flex;flex-direction:column;gap:6px;
}
.foot-right .row{display:flex;gap:var(--s-4);justify-content:flex-end}
.foot-right a{color:var(--muted);text-decoration:none}
.foot-right a:hover{color:var(--blue)}

/* RESPONSIVE */
@media (max-width: 880px){
  .hero{padding:var(--s-16) var(--s-6) var(--s-12)}
  .hero-meta{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
  .section-head{grid-template-columns:1fr;gap:var(--s-4)}
  .svc-grid{grid-template-columns:1fr}
  .contact-inner{grid-template-columns:1fr;gap:var(--s-8)}
  .nav-links{display:none}
  .nav-inner, .hero, .services, .contact{padding-left:var(--s-6);padding-right:var(--s-6)}
}