@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* -------------------------------------------------
   jbsdata – Clean CSS (no Tailwind)
   Inspired by the original Lovable/React design
-------------------------------------------------- */

:root{
  --background: hsl(192 70% 12%);
  --foreground: hsl(180 20% 95%);

  --card: hsl(192 60% 15%);
  --secondary: hsl(192 50% 20%);

  --muted: hsl(192 40% 18%);
  --muted-foreground: hsl(180 15% 65%);

  --primary: hsl(168 70% 55%);
  --primary-foreground: hsl(192 70% 10%);

  --border: hsl(192 40% 25%);

  --radius: 0.75rem;

  --gradient-start: hsl(192 70% 12%);
  --gradient-end: hsl(195 65% 8%);

  --shadow: 0 18px 50px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--background);
  color: var(--foreground);
  line-height: 1.5;
}

img, svg{ max-width:100%; height:auto; }
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--primary); }

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

.container{
  width: min(1120px, calc(100% - 2rem));
  margin-inline:auto;
}

/* Typography */
h1,h2,h3,h4{
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  letter-spacing:-0.02em;
  margin:0 0 .6rem;
}
p{ margin: 0 0 1rem; }
.muted{ color: var(--muted-foreground); }

.text-gradient{
  background: linear-gradient(135deg, var(--primary) 0%, hsl(168 80% 70%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Layout */
.main{
  padding-top: 80px; /* fixed navbar */
}

/* -------------------------------------------------
   Navbar
-------------------------------------------------- */
.nav{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: color-mix(in srgb, var(--background) 80%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
}
.nav__inner{
  height: 80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}
.brand__text{
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}
.brand__accent{ color: var(--primary); }

.nav__toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 50%, transparent);
  color: var(--foreground);
  cursor: pointer;
}
.nav__toggle:hover{ border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }

.nav__links{
  display:none;
  align-items:center;
  gap: 1.5rem;
}
.nav__link{
  position: relative;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 80%, transparent);
  padding: .25rem 0;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  height:2px;
  width:0;
  background: var(--primary);
  transition: width .25s ease;
}
.nav__link:hover::after{ width:100%; }
.nav__link.is-active{ color: var(--primary); }

.nav__cta{ margin-left: .5rem; }

@media (min-width: 768px){
  .nav__toggle{ display:none; }
  .nav__links{ display:flex; }
}

/* Mobile menu open state */
.nav.is-open .nav__links{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap: .75rem;
  padding: 0 0 1.25rem;
}
.nav.is-open .nav__inner{
  align-items:flex-start;
  padding-top: 1rem;
  height: auto;
  flex-wrap: wrap;
}
@media (min-width: 768px){
  .nav.is-open .nav__inner{ height:80px; padding-top:0; align-items:center; }
  .nav.is-open .nav__links{ flex-direction:row; padding:0; }
}

/* -------------------------------------------------
   Buttons & forms
-------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: .9rem 1.25rem;
  font-weight: 600;
  cursor:pointer;
  transition: transform .2s ease, filter .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn--primary{
  background: var(--primary);
  color: var(--primary-foreground);
}
.btn--primary:hover{ filter: brightness(1.04); transform: translateY(-1px); }
.btn--primary:active{ transform: translateY(0); }

.btn[disabled]{ opacity:.65; cursor:not-allowed; }

.icon{ width: 22px; height: 22px; }
.icon--sm{ width: 18px; height: 18px; }

/* Form */
.form__row{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px){
  .form__row--2{ grid-template-columns: 1fr 1fr; }
}

.form{
  display:grid;
  gap: 1rem;
}
label{
  display:block;
  font-weight: 600;
  margin-bottom: .4rem;
}
input, textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  background: color-mix(in srgb, var(--card) 55%, transparent);
  color: var(--foreground);
  padding: .9rem 1rem;
  outline: none;
}
textarea{ min-height: 150px; resize: vertical; }
input:focus, textarea:focus{
  border-color: color-mix(in srgb, var(--primary) 65%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* -------------------------------------------------
   Sections
-------------------------------------------------- */
.section{
  padding: 5rem 0;
}
@media (min-width: 768px){
  .section{ padding: 7rem 0; }
}
.section--alt{
  background: color-mix(in srgb, var(--secondary) 30%, transparent);
}

.hero{
  position: relative;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}
.hero--home{ min-height: 90vh; }
.hero--page{ min-height: 50vh; }
.hero--about{ min-height: 60vh; }

.hero__inner{
  position:relative;
  z-index: 2;
  padding: 5rem 0 3rem;
}
.hero__title{
  font-size: clamp(2.2rem, 4.8vw, 4.6rem);
  font-weight: 800;
  margin-bottom: 1rem;
}
.hero__lead{
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--muted-foreground);
  max-width: 62ch;
  margin: 0 auto 2rem;
}
.hero__fade{
  position:absolute;
  left:0; right:0; bottom:0;
  height: 130px;
  background: linear-gradient(to top, var(--background), transparent);
  z-index: 1;
}

/* Waves */
.wave-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.wave-bg__svg{
  position:absolute;
  inset:auto 0 0 0;
  width:100%;
  height:100%;
}
.wave-bg__svg--main{ animation: wave-flow 10s ease-in-out infinite; }
.wave-bg__svg--delayed{
  opacity: .5;
  animation: wave-flow 10s ease-in-out infinite;
  animation-delay: 5s;
}
.wave-bg__radial{
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse at 70% 60%, hsl(168 60% 50% / 0.05) 0%, transparent 50%);
}

@keyframes wave-flow{
  0%{ transform: translateX(0) translateY(0); }
  50%{ transform: translateX(-25px) translateY(-15px); }
  100%{ transform: translateX(0) translateY(0); }
}

/* Fade in */
.fade-up{
  opacity:0;
  transform: translateY(30px);
  animation: fade-in-up .8s ease-out forwards;
}
@keyframes fade-in-up{
  to{ opacity:1; transform: translateY(0); }
}

/* Cards & grids */
.grid{
  display:grid;
  gap: 1.25rem;
}
.grid--services{ grid-template-columns: 1fr; }
.grid--tech{ grid-template-columns: repeat(2, 1fr); }
.grid--values{ grid-template-columns: 1fr; }
.grid--stats{ grid-template-columns: repeat(2, 1fr); }
.grid--contact{ grid-template-columns: 1fr; gap: 3rem; }

@media (min-width: 768px){
  .grid--services{ grid-template-columns: repeat(2, 1fr); }
  .grid--values{ grid-template-columns: repeat(2, 1fr); }
  .grid--contact{ grid-template-columns: 1.05fr .95fr; }
}
@media (min-width: 1024px){
  .grid--services{ grid-template-columns: repeat(4, 1fr); }
  .grid--values{ grid-template-columns: repeat(4, 1fr); }
  .grid--tech{ grid-template-columns: repeat(6, 1fr); }
  .grid--stats{ grid-template-columns: repeat(4, 1fr); }
}

.card{
  background: color-mix(in srgb, var(--card) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
  border-radius: calc(var(--radius) + .25rem);
  padding: 1.5rem;
  backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.card__icon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  display:grid;
  place-items:center;
  margin-bottom: 1rem;
  color: var(--primary);
}
.card__title{
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: .4rem;
}
.card__text{
  color: var(--muted-foreground);
  font-size: .95rem;
}

/* Tech pills */
.tech{
  text-align:center;
  padding: 1.25rem 1rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--card) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
  transition: border-color .2s ease, transform .2s ease;
}
.tech:hover{
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  transform: translateY(-2px);
}
.tech__name{ font-weight: 700; }
.tech__desc{ font-size: .85rem; color: var(--muted-foreground); margin-top:.2rem; }

/* CTA block */
.cta{
  position:relative;
  border-radius: 1.75rem;
  padding: 3rem 1.5rem;
  text-align:center;
  overflow:hidden;
  background: linear-gradient(to bottom right,
    color-mix(in srgb, var(--primary) 20%, transparent),
    color-mix(in srgb, var(--primary) 10%, transparent),
    transparent
  );
}
@media (min-width: 768px){ .cta{ padding: 4rem 3rem; } }
.cta__decor{
  position:absolute; inset:0;
  pointer-events:none;
}
.cta__blob{
  position:absolute;
  width: 24rem; height: 24rem;
  border-radius: 999px;
  filter: blur(45px);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.cta__blob--tr{ top:-6rem; right:-6rem; }
.cta__blob--bl{ bottom:-6rem; left:-6rem; opacity:.7; }
.cta__title{ font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; }
.cta__text{ color: var(--muted-foreground); max-width: 60ch; margin: .8rem auto 1.75rem; }

/* Contact */
.info-list{ list-style:none; padding:0; margin: 0; display:grid; gap: 1rem; }
.info{
  display:flex;
  gap: 1rem;
  align-items:flex-start;
}
.info__icon{
  width: 48px; height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  display:grid; place-items:center;
  color: var(--primary);
  flex: 0 0 auto;
}
.checklist{ list-style:none; padding:0; margin: 0; display:grid; gap: .75rem; }
.checklist li{
  display:flex; gap:.75rem; align-items:flex-start;
  color: var(--muted-foreground);
}
.checklist svg{ color: var(--primary); margin-top: .1rem; }

/* Alerts */
.alert{
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
}
.alert--error{
  border-color: color-mix(in srgb, hsl(0 84% 60%) 45%, var(--border));
  background: color-mix(in srgb, hsl(0 84% 60%) 12%, transparent);
}

/* Footer */
.site-footer{
  border-top: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
  background: color-mix(in srgb, var(--secondary) 50%, transparent);
}
.footer__grid{
  padding: 4rem 0 3rem;
  display:grid;
  gap: 2rem;
}
@media (min-width: 768px){
  .footer__grid{ grid-template-columns: 1.2fr 1fr 1fr; gap: 3rem; }
}
.footer__title{
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: .8rem;
}
.footer__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: .6rem;
  color: var(--muted-foreground);
}
.footer__list a{ color: var(--muted-foreground); }
.footer__list a:hover{ color: var(--primary); }
.footer__contact{ display:flex; gap:.75rem; align-items:center; }
.footer__icon{
  width: 28px; height: 28px;
  display:grid; place-items:center;
  color: var(--primary);
}
.footer__lead{ max-width: 38ch; }
.footer__bottom{
  padding: 1.6rem 0 2rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
  text-align:center;
  color: var(--muted-foreground);
  font-size: .95rem;
}

/* 404 */
.notfound{
  min-height: 100vh;
  display:grid;
  place-items:center;
  padding: 3rem 0;
  background: color-mix(in srgb, var(--muted) 100%, transparent);
}
.notfound__card{
  text-align:center;
  padding: 2.5rem 1.75rem;
  border-radius: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
  background: color-mix(in srgb, var(--card) 55%, transparent);
}