.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem;
  margin-bottom:3rem}

.footer-logo {
  display:flex;
  align-items:center;
  gap:0.75rem;
  font-weight:700;
  font-size:1.25rem;
  margin-bottom:1rem}

.footer-col p {
  color:var(--muted);
  margin-top:1rem}

.footer-col h4 {
  font-size:0.875rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:1rem}

.footer-col a {
  display:block;
  color:var(--muted);
  text-decoration:none;
  margin-bottom:0.75rem;
  transition:color 0.2s}

.footer-col a:hover {
  color:var(--primary)}

.footer-bottom {
  padding-top:2rem;
  border-top:1px solid var(--border);
  text-align:center;
  color:var(--muted);
  font-size:0.875rem}


@media (max-width:968px) {
  .nav-menu {
  display:none}

.mobile-toggle {
  display:block;
  position:relative;
  z-index:102;
  }

.hero {
  grid-template-columns:1fr;
  padding:8rem 2rem 4rem}

.hero-visual {
  display:none}

.hero-content h1 {
  font-size:2.5rem}

.footer-grid {
  grid-template-columns:1fr}

.services-grid {
  grid-template-columns:1fr}

.platform-grid {
  grid-template-columns:repeat(2,1fr)}

}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  * {
  margin:0;
  padding:0;
  box-sizing:border-box}

:root {
  --bg:#fff;
  --fg:#0f172a;
  --bg2:#f8fafc;
  --border:#e2e8f0;
  --primary:#6366f1;
  --primary-h:#4f46e5;
  --card:#fff;
  --shadow:rgba(0,0,0,.1);
  --shadow-lg:rgba(0,0,0,.15);
  --muted:#506173}

[data-theme="dark"] {
  --bg:#0f172a;
  --fg:#f1f5f9;
  --bg2:#1e293b;
  --border:#334155;
  --card:#1e293b;
  --shadow:rgba(0,0,0,.3);
  --shadow-lg:rgba(0,0,0,.5);
  --muted:#94a3b8}

body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
  transition:background .3s,color .3s}

.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem}

.header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:var(--bg);
  border-bottom:6px solid;
  border-image:linear-gradient(90deg,#ff0080,#ff8c00,#40e0d0,#4169e1,#9370db) 1;
  .header-container {
  max-width:1600px;
  margin:0 auto;
  padding:0 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:110px}

.logo {
  display:flex;
  align-items:center;
  gap:1rem;
  font-weight:700;
  font-size:1.75rem;
  text-decoration:none;
  background:linear-gradient(135deg,#ff0080,#ff8c00,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  flex-shrink:0}

.nav {
  display:flex;
  align-items:center;
  flex:1;
  margin:0 2rem}

.nav-row {
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap}

.nav-solutions {
  gap:.35rem}

.nav-link {
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1rem;
  color:var(--fg);
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  border-radius:.85rem;
  border:2px solid transparent;
  transition:all .3s}

.nav-link:hover {
  border-color:#ff0080;
  background:linear-gradient(135deg,rgba(255,0,128,.1),rgba(64,224,208,.1));
  transform:translateY(-2px) scale(1.05)}

.nav-link svg {
  width:1.75rem;
  height:1.75rem;
  opacity:.9}

.nav-svg {
  filter:drop-shadow(0 0 2px currentColor);
  transition:all .3s}

.nav-link:hover .nav-svg {
  transform:scale(1.2) rotate(-5deg);
  filter:drop-shadow(0 0 6px currentColor)}

.theme-btn {
  background:linear-gradient(135deg,#ff0080,#ff8c00);
  border:none;
  border-radius:1rem;
  width:3rem;
  height:3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .3s}

.theme-btn:hover {
  transform:rotate(180deg) scale(1.1)}

.theme-btn svg {
  width:1.5rem;
  height:1.5rem;
  color:#fff}

[data-theme="light"] .moon {
  display:none}

[data-theme="dark"] .sun {
  display:none}

.hero {
  padding:13rem 2rem 8rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
  max-width:1400px;
  margin:0 auto}

.hero h1 {
  font-size:4.5rem;
  font-weight:700;
  line-height:1.1;
  margin-bottom:2rem;
  background:linear-gradient(135deg,#ff0080,#ff8c00,#40e0d0,#4169e1);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}

.hero p {
  font-size:1.5rem;
  color:var(--muted);
  margin-bottom:2.5rem;
  line-height:1.8}

.badge {
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  padding:.75rem 1.5rem;
  background:linear-gradient(135deg,rgba(255,0,128,.1),rgba(64,224,208,.1));
  border:3px solid;
  border-image:linear-gradient(90deg,#ff0080,#40e0d0) 1;
  border-radius:2rem;
  font-size:1rem;
  font-weight:600;
  margin-bottom:2.5rem}

.badge svg {
  width:1.25rem;
  height:1.25rem;
  color:#ff0080}

.hero-btns {
  display:flex;
  gap:1.5rem;
  margin-bottom:3rem}

.btn {
  padding:1.25rem 3rem;
  border-radius:1.5rem;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  transition:all .3s;
  border:none;
  cursor:pointer;
  font-size:1.25rem}

.btn-primary {
  background:linear-gradient(135deg,#ff0080,#ff8c00);
  color:#fff;
  border:4px solid transparent}

.btn-primary:hover {
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 20px 40px rgba(255,0,128,.4)}

.btn-secondary {
  background:var(--bg);
  color:var(--fg);
  border:4px solid;
  border-image:linear-gradient(90deg,#ff0080,#40e0d0) 1}

.btn-secondary:hover {
  background:linear-gradient(135deg,rgba(255,0,128,.1),rgba(64,224,208,.1));
  transform:translateY(-4px)}

.btn-lg {
  padding:1.5rem 3.5rem;
  font-size:1.5rem}

.hero-stats {
  display:flex;
  gap:3rem;
  flex-wrap:wrap}

.hero-stats div {
  display:flex;
  align-items:center;
  gap:.75rem;
  color:var(--muted);
  font-size:1.125rem;
  font-weight:600}

.hero-stats svg {
  width:1.75rem;
  height:1.75rem;
  color:#ff0080}

.hero-visual {
  position:relative;
  height:600px}

.card {
  position:absolute;
  background:var(--card);
  border:4px solid;
  border-image:linear-gradient(135deg,#ff0080,#40e0d0) 1;
  border-radius:1.5rem;
  padding:2rem;
  display:flex;
  align-items:center;
  gap:1.5rem;
  box-shadow:0 20px 50px var(--shadow-lg);
  animation:float 6s ease-in-out infinite}

.card svg {
  width:3rem;
  height:3rem;
  color:#ff0080}

.card small {
  font-size:1rem;
  color:var(--muted);
  display:block;
  font-weight:600}

.card strong {
  font-weight:700;
  font-size:1.5rem;
  background:linear-gradient(135deg,#ff0080,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}

.c1 {
  top:10%;
  left:10%;
  animation-delay:0s}

.c2 {
  top:45%;
  right:5%;
  animation-delay:2s}

.c3 {
  bottom:10%;
  left:20%;
  animation-delay:4s}

@keyframes float {
  0%,100% {
  transform:translateY(0)}

50% {
  transform:translateY(-30px)}

}

.services {
  padding:8rem 0;
  background:linear-gradient(180deg,rgba(255,0,128,.05),rgba(64,224,208,.05))}

.services h2 {
  text-align:center;
  font-size:3.5rem;
  margin-bottom:1.5rem;
  background:linear-gradient(135deg,#ff0080,#ff8c00,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}

.subtitle {
  text-align:center;
  color:var(--muted);
  font-size:1.5rem;
  margin-bottom:5rem;
  font-weight:600}

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:3rem}

.service {
  background:var(--card);
  border:5px solid;
  border-image:linear-gradient(135deg,#ff0080,#40e0d0) 1;
  border-radius:2rem;
  padding:3rem;
  transition:all .3s}

.service:hover {
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 30px 60px var(--shadow-lg)}

.icon {
  width:5rem;
  height:5rem;
  border-radius:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:2rem}

.icon svg {
  width:2.5rem;
  height:2.5rem;
  color:#fff}

.service h3 {
  font-size:2rem;
  margin-bottom:1.5rem;
  background:linear-gradient(135deg,#ff0080,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}

.service p {
  color:var(--muted);
  margin-bottom:2rem;
  font-size:1.125rem;
  line-height:1.8}

.service ul {
  list-style:none}

.service li {
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
  color:var(--muted);
  font-size:1.125rem;
  font-weight:500}

.service li svg {
  width:1.5rem;
  height:1.5rem;
  color:#10b981;
  flex-shrink:0}

.platforms {
  padding:8rem 0}

.platforms h2 {
  text-align:center;
  font-size:3.5rem;
  margin-bottom:4rem;
  background:linear-gradient(135deg,#ff0080,#ff8c00,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}

.platform-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:2.5rem}

.platform {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
  padding:2.5rem;
  background:var(--bg2);
  border:4px solid;
  border-image:linear-gradient(135deg,#ff0080,#40e0d0) 1;
  border-radius:1.5rem;
  transition:all .3s}

.platform:hover {
  transform:translateY(-8px) rotate(2deg);
  border-image:linear-gradient(135deg,#40e0d0,#4169e1) 1}

.platform svg {
  width:4rem;
  height:4rem;
  color:#ff0080}

.platform span {
  font-weight:600;
  color:var(--muted);
  font-size:1.125rem}

.cta {
  padding:8rem 2rem;
  background:linear-gradient(135deg,#ff0080,#ff8c00,#40e0d0,#4169e1);
  text-align:center}

.cta h2 {
  font-size:3.5rem;
  color:#fff;
  margin-bottom:1.5rem;
  font-weight:700}

.cta p {
  font-size:1.5rem;
  color:rgba(255,255,255,.95);
  margin-bottom:3rem;
  font-weight:500}

.cta .btn-primary {
  background:#fff;
  color:#ff0080;
  border:4px solid #fff}

.cta .btn-primary:hover {
  background:rgba(255,255,255,.9);
  transform:translateY(-6px) scale(1.1)}

.footer {
  background:var(--bg2);
  padding:5rem 0 2.5rem;
  border-top:6px solid;
  border-image:linear-gradient(90deg,#ff0080,#ff8c00,#40e0d0,#4169e1,#9370db) 1}

.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:4rem;
  margin-bottom:4rem}

.footer-logo {
  display:flex;
  align-items:center;
  gap:1rem;
  font-weight:700;
  font-size:1.5rem;
  margin-bottom:1.5rem;
  background:linear-gradient(135deg,#ff0080,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}

.footer-grid p {
  color:var(--muted);
  margin-top:1.5rem;
  font-size:1.125rem}

.footer-grid h4 {
  font-size:1.125rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:1.5rem;
  background:linear-gradient(135deg,#ff0080,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}

.footer-grid a {
  display:block;
  color:var(--muted);
  text-decoration:none;
  margin-bottom:1rem;
  transition:color .2s;
  font-size:1.125rem;
  font-weight:500}

.footer-grid a:hover {
  color:#ff0080}

.footer-bottom {
  padding-top:2.5rem;
  border-top:3px solid var(--border);
  text-align:center;
  color:var(--muted);
  font-size:1.125rem;
  font-weight:500}

.people-section {
  padding:6rem 0;
  background:var(--bg2)}

.section-header {
  text-align:center;
  margin-bottom:4rem}

.section-title {
  font-size:2.5rem;
  font-weight:700;
  margin-bottom:1rem;
  background:linear-gradient(135deg,#ff0080,#ff8c00,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}

.section-subtitle {
  font-size:1.25rem;
  color:var(--muted);
  font-weight:500}

.people-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem}

.people-card {
  background:var(--card);
  border-radius:1.5rem;
  overflow:hidden;
  border:3px solid;
  border-image:linear-gradient(135deg,#ff0080,#40e0d0) 1;
  transition:all .3s}

.people-card:hover {
  transform:translateY(-8px);
  box-shadow:0 20px 40px var(--shadow-lg)}

.people-img-wrap {
  width:100%;
  height:280px;
  overflow:hidden}

.people-img-wrap img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s}

.people-card:hover .people-img-wrap img {
  transform:scale(1.1)}

.people-card-content {
  padding:1.5rem}

.people-card-content h3 {
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:.5rem;
  background:linear-gradient(135deg,#ff0080,#40e0d0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text}

.people-card-content p {
  font-size:.95rem;
  color:var(--muted);
  line-height:1.5}

@media(max-width:968px) {
  .nav {
  display:none}

.hero {
  grid-template-columns:1fr;
  padding:10rem 2rem 5rem}

.hero-visual {
  display:none}

.hero h1 {
  font-size:3rem}

.footer-grid {
  grid-template-columns:1fr}

.grid {
  grid-template-columns:1fr}

.platform-grid {
  grid-template-columns:repeat(2,1fr)}

.people-grid {
  grid-template-columns:repeat(2,1fr)}

.people-img-wrap {
  height:200px}

}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500&display=swap');
  :root {
  --bg:#ffffff;
  --fg:#000000;
  --border:#e0e0e0;
  --muted:#f9f9f9;
  --font-display:'Playfair Display',serif;
  --font-body:'Inter',system-ui,sans-serif}

*,*::before,*::after {
  box-sizing:border-box}

body {
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--fg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased}

h1,h2,h3 {
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-0.02em;
  margin-bottom:1rem}

a {
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color 0.2s}

a:hover {
  border-color:var(--fg)}

.container {
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:0 2rem}

.site-header {
  padding:2rem 0;
  border-bottom:1px solid var(--border)}

.header-inner {
  display:flex;
  justify-content:space-between;
  align-items:center}

.logo-link {
  font-family:var(--font-display);
  font-size:1.5rem}

.hero {
  padding:8rem 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center}

.hero h1 {
  font-size:4.5rem;
  line-height:1.1;
  margin-bottom:2rem}

.hero-sub {
  font-size:1.25rem;
  color:#666;
  margin-bottom:3rem}

.btn {
  display:inline-block;
  padding:1rem 2rem;
  border:1px solid var(--fg);
  text-transform:uppercase;
  font-size:0.75rem;
  letter-spacing:0.1em}

.btn-primary {
  background:var(--fg);
  color:var(--bg)}

.section {
  padding:6rem 0}

.section-label {
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.2em;
  color:#888;
  display:block;
  margin-bottom:1rem}

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3rem}

.service-card {
  border-top:1px solid var(--fg);
  padding-top:1.5rem}

.service-card h3 {
  font-size:1.5rem}

.platforms-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem}

.platform-card {
  padding:1.5rem;
  border:1px solid var(--border)}

.platform-card svg {
  width:2rem;
  height:2rem;
  margin-bottom:1rem}

.terminal {
  background:#f5f5f5;
  padding:2rem;
  border:1px solid var(--border);
  font-family:monospace;
  font-size:0.9rem}

.site-footer {
  padding:4rem 0;
  border-top:1px solid var(--border);
  font-size:0.8rem}

.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:4rem}


@media (max-width:768px) {
  .hero {
  grid-template-columns:1fr}

.hero h1 {
  font-size:3rem}

.services-grid,.platforms-grid {
  grid-template-columns:1fr}

.footer-grid {
  grid-template-columns:1fr}

}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Sans:wght@500;700&display=swap');
  *,*::before,*::after {
  box-sizing:border-box;
  margin:0;
  padding:0}

:root {
  --background:#fff;
  --foreground:hsl(220 15% 15%);
  --card:#fff;
  --card-foreground:hsl(220 15% 15%);
  --primary:hsl(220 10% 12%);
  --primary-foreground:#fff;
  --secondary:hsl(220 10% 96%);
  --secondary-foreground:hsl(220 15% 15%);
  --muted:hsl(220 10% 94%);
  --muted-foreground:hsl(220 10% 38%);
  --accent:hsl(220 10% 92%);
  --accent-foreground:hsl(220 15% 15%);
  --border:hsl(220 10% 90%);
  --radius:0.75rem;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'DM Sans','Inter',system-ui,sans-serif;
  --purple-600:#7c3aed;
  --blue-600:#2563eb;
  --cyan-600:#0891b2;
  --emerald-600:#059669;
  --indigo-600:#4f46e5;
  --amber-600:#d97706;
  --orange-600:#ea580c;
  --red-600:#dc2626;
  --rose-600:#e11d48;
  --pink-600:#db2777}

html {
  scroll-behavior:smooth}

body {
  font-family:var(--font-body);
  background:var(--background);
  color:var(--foreground);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6}

h1,h2,h3,h4 {
  font-family:var(--font-display),sans-serif}

a {
  color:inherit;
  text-decoration:none;
  font-weight:500}

img {
  max-width:100%;
  height:auto}

.container {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 1.5rem}

.page-hero {
  position:relative;
  padding:8rem 0 5rem;
  overflow:hidden}

.page-hero .hero-bg {
  position:absolute;
  inset:0;
  overflow:hidden}

.page-hero .hero-bg .blur-circle {
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.3;
  width:24rem;
  height:24rem}

.page-hero .hero-bg .blur-circle.tr {
  top:-10rem;
  right:-10rem}

.page-hero .hero-bg .blur-circle.bl {
  bottom:-10rem;
  left:-10rem}

.page-hero .container {
  position:relative;
  z-index:1}

.section {
  padding:5rem 0}

.section-lg {
  padding:6rem 0}

.section-alt {
  background:var(--muted)}

.section-dark {
  background:var(--primary);
  color:rgba(255,255,255,.9)}

.section-dark h2,.section-dark h3,.section-dark h4 {
  color:#fff}

.section-dark p {
  color:rgba(255,255,255,.7)}

.section-dark a {
  color:rgba(255,255,255,.9)}

.section-dark a:hover {
  color:#fff}

.section-gradient {
  background:linear-gradient(135deg,var(--primary) 0%,hsl(225 50% 20%) 100%);
  color:rgba(255,255,255,.9)}

.section-gradient h2 {
  color:#fff}

.section-gradient p {
  color:rgba(255,255,255,.7)}

.section-label {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.375rem .875rem;
  font-size:.75rem;
  font-weight:500;
  border:1px solid var(--border);
  border-radius:.5rem;
  background:rgba(255,255,255,.8);
  margin-bottom:1.5rem}

.badge {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.25rem .625rem;
  font-size:.625rem;
  font-weight:700;
  border-radius:.25rem;
  text-transform:uppercase;
  letter-spacing:.05em}

.badge-blue {
  background:rgba(37,99,235,.1);
  color:#2563eb;
  border:1px solid rgba(37,99,235,.2)}

.badge-emerald {
  background:rgba(5,150,105,.1);
  color:#059669;
  border:1px solid rgba(5,150,105,.2)}

.badge-purple {
  background:rgba(124,58,237,.1);
  color:#7c3aed;
  border:1px solid rgba(124,58,237,.2)}

.badge-cyan {
  background:rgba(8,145,178,.1);
  color:#0891b2;
  border:1px solid rgba(8,145,178,.2)}

.badge-amber {
  background:rgba(217,119,6,.1);
  color:#d97706;
  border:1px solid rgba(217,119,6,.2)}

.badge-red {
  background:rgba(220,38,38,.1);
  color:#dc2626;
  border:1px solid rgba(220,38,38,.2)}

.badge-indigo {
  background:rgba(79,70,229,.1);
  color:#4f46e5;
  border:1px solid rgba(79,70,229,.2)}

.badge-orange {
  background:rgba(234,88,12,.1);
  color:#ea580c;
  border:1px solid rgba(234,88,12,.2)}

.badge-pink {
  background:rgba(219,39,119,.1);
  color:#db2777;
  border:1px solid rgba(219,39,119,.2)}

.badge-rose {
  background:rgba(225,29,72,.1);
  color:#e11d48;
  border:1px solid rgba(225,29,72,.2)}

.badge-slate {
  background:rgba(51,65,85,.1);
  color:#475569;
  border:1px solid rgba(51,65,85,.2)}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.625rem 1.25rem;
  font-size:.875rem;
  font-weight:500;
  border-radius:.5rem;
  cursor:pointer;
  transition:all .2s ease;
  border:none;
  line-height:1.25;
  font-family:var(--font-body)}

.btn-primary {
  background:var(--primary);
  color:var(--primary-foreground);
  box-shadow:0 1px 3px rgba(0,0,0,.08)}

.btn-primary:hover {
  background:hsl(220 10% 18%)}

.btn-outline {
  background:transparent;
  color:var(--foreground);
  border:1px solid var(--border)}

.btn-outline:hover {