/* =========================================================
   ROADMAP QUALITY CONSTRUCTION — Design tokens
   Palette: near-black canvas, violet/purple accent, white ink
   Type: Space Grotesk (display) + Inter (body/UI)
========================================================= */
:root{
  --ink-0:#050308;         /* deepest background */
  --ink-1:#0d0a16;         /* section background */
  --ink-2:#161020;         /* card background */
  --ink-3:#221a32;         /* card border / hover */
  --white:#f6f4fb;
  --grey:#a79fbd;          /* muted lavender-grey text */
  --grey-dim:#6f6785;

  --violet-900:#3b1264;
  --violet-700:#5b21b6;
  --violet-600:#7c3aed;
  --violet-500:#9457f2;
  --violet-300:#c4a7fb;

  --line: rgba(196,167,251,0.14);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 14px;
  --container: 1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink-0);
  color:var(--white);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:-0.01em;}
p{margin:0;}
.dot{color:var(--violet-500);}

::selection{background:var(--violet-600);color:var(--white);}

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

.eyebrow{
  font-family:var(--font-body);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:var(--violet-300);
  margin-bottom:14px;
  display:inline-block;
}

section{
  padding:120px 6vw;
  position:relative;
}

.section-head{
  max-width:640px;
  margin:0 0 60px;
}
.section-head h2{
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  margin-top:6px;
}
.section-sub{
  color:var(--grey);
  margin-top:16px;
  font-size:1.02rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-size:0.92rem;
  font-weight:600;
  font-family:var(--font-body);
  transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  border:1px solid transparent;
  cursor:pointer;
}
.btn--solid{
  background:linear-gradient(135deg,var(--violet-600),var(--violet-900));
  color:var(--white);
  box-shadow:0 8px 30px -8px rgba(124,58,237,0.6);
}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 12px 34px -6px rgba(124,58,237,0.75);}
.btn--outline{
  border-color:var(--violet-500);
  color:var(--white);
}
.btn--outline:hover{background:rgba(124,58,237,0.12);transform:translateY(-2px);}
.btn--ghost{
  border-color:var(--line);
  color:var(--white);
  padding:10px 22px;
}
.btn--ghost:hover{border-color:var(--violet-500);background:rgba(124,58,237,0.1);}

/* ---------- NAV ---------- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:rgba(5,3,8,0.7);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:18px 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.nav__logo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.2rem;
  letter-spacing:0.04em;
}
.nav__links{
  display:flex;
  gap:28px;
  flex:1;
  justify-content:center;
  font-size:0.9rem;
}
.nav__links a{color:var(--grey);transition:color .2s;}
.nav__links a:hover{color:var(--white);}
.nav__burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav__burger span{width:22px;height:2px;background:var(--white);border-radius:2px;}

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  align-items:center;
  padding:140px 6vw 80px;
  gap:40px;
  overflow:hidden;
}
.hero__blueprint{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(124,58,237,0.25), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(91,33,182,0.28), transparent 50%);
}
.hero__blueprint::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.15) 80%);
}
.hero__inner{position:relative;z-index:1;}
.hero__title{
  font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:1.02;
  margin:20px 0 24px;
  background:linear-gradient(100deg,var(--white) 40%, var(--violet-300));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__sub{
  max-width:520px;
  color:var(--grey);
  font-size:1.08rem;
  margin-bottom:34px;
}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:40px;}
.hero__tags{display:flex;gap:14px;flex-wrap:wrap;}
.hero__tags span{
  font-size:0.78rem;
  border:1px solid var(--line);
  padding:8px 16px;
  border-radius:999px;
  color:var(--grey);
}

.hero__panel{
  position:relative;
  z-index:1;
  background:linear-gradient(160deg, var(--ink-2), var(--ink-1));
  border:1px solid var(--line);
  border-radius:20px;
  padding:36px;
  display:flex;
  flex-direction:column;
  gap:26px;
  align-self:stretch;
  justify-content:space-between;
}
.hero__stat-num{
  font-family:var(--font-display);
  font-size:3rem;
  font-weight:700;
  display:block;
  color:var(--violet-300);
}
.hero__stat-label{
  color:var(--grey);
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.hero__panel-copy{color:var(--white);font-size:0.98rem;}
.hero__scroll{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.78rem;
  color:var(--grey-dim);
  text-transform:uppercase;
  letter-spacing:0.12em;
}
.hero__scroll-line{
  width:1px;
  height:34px;
  background:linear-gradient(var(--violet-500), transparent);
  display:inline-block;
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse{0%,100%{opacity:0.3;}50%{opacity:1;}}

/* ---------- ABOUT ---------- */
.about{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:60px;
  align-items:center;
  background:var(--ink-1);
}
.about__media{position:relative;}
.about__media img{border-radius:18px;border:1px solid var(--line);}
.about__badge{
  position:absolute;
  bottom:-24px;
  left:-24px;
  background:var(--ink-2);
  border:1px solid var(--violet-600);
  border-radius:14px;
  padding:18px 22px;
  display:flex;
  flex-direction:column;
  gap:2px;
  box-shadow:0 12px 40px -12px rgba(0,0,0,0.6);
}
.about__badge strong{font-family:var(--font-display);color:var(--violet-300);font-size:1.1rem;}
.about__badge span{font-size:0.78rem;color:var(--grey);}
.about__content h2{font-size:clamp(1.8rem,3vw,2.5rem);margin-bottom:20px;}
.about__lead{color:var(--white);margin-bottom:14px;}
.about__content p{color:var(--grey);margin-bottom:10px;}
.about__timeline{margin:30px 0;display:flex;flex-direction:column;gap:18px;}
.about__timeline li{
  border-left:2px solid var(--violet-600);
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.about__timeline strong{font-family:var(--font-display);font-size:1rem;}
.about__timeline span{color:var(--grey);font-size:0.9rem;}
.about__stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:36px;
  padding-top:30px;
  border-top:1px solid var(--line);
}
.about__stats .counter{
  font-family:var(--font-display);
  font-size:1.8rem;
  color:var(--violet-300);
  display:block;
}
.about__stats label{font-size:0.78rem;color:var(--grey);}

/* ---------- SERVICES ---------- */
.services__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.service-card{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:var(--violet-600);
  background:var(--ink-3);
}
.service-card__num{
  font-family:var(--font-display);
  color:var(--violet-500);
  font-size:0.85rem;
  opacity:0.8;
}
.service-card h3{margin:14px 0 10px;font-size:1.15rem;}
.service-card p{color:var(--grey);font-size:0.92rem;}

/* ---------- WHY ---------- */
.why{background:var(--ink-1);}
.why__block{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:50px;
  align-items:center;
  margin-bottom:60px;
}
.why__block:last-child{margin-bottom:0;}
.why__block--reverse{direction:rtl;}
.why__block--reverse > *{direction:ltr;}
.why__media img{border-radius:18px;border:1px solid var(--line);}
.why__content h3{font-size:1.6rem;margin-bottom:16px;}
.why__content p{color:var(--grey);margin-bottom:18px;}
.why__content ul{display:flex;flex-direction:column;gap:10px;}
.why__content li{
  color:var(--white);
  font-size:0.95rem;
  padding-left:20px;
  position:relative;
}
.why__content li::before{
  content:"";
  position:absolute;
  left:0;top:9px;
  width:8px;height:8px;
  background:var(--violet-500);
  border-radius:2px;
  transform:rotate(45deg);
}
.why__content strong{color:var(--violet-300);}

/* ---------- PROJECTS ---------- */
.projects__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.project-card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:3/4;
  border:1px solid var(--line);
}
.project-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.project-card:hover img{transform:scale(1.08);}
.project-card__tag{
  position:absolute;top:16px;left:16px;
  background:rgba(5,3,8,0.7);
  border:1px solid var(--violet-500);
  color:var(--violet-300);
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  padding:6px 12px;
  border-radius:999px;
}
.project-card__info{
  position:absolute;bottom:0;left:0;right:0;
  padding:20px;
  background:linear-gradient(0deg, rgba(5,3,8,0.95), transparent);
}
.project-card__info h3{font-size:1.1rem;margin-bottom:4px;}
.project-card__info span{font-size:0.82rem;color:var(--grey);}

/* ---------- CLIENTS ---------- */
.clients{text-align:center;background:var(--ink-1);}
.clients h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:40px;}
.clients__marquee{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:24px 0;
}
.clients__track{
  display:flex;
  gap:70px;
  width:max-content;
  animation:marquee 18s linear infinite;
  font-family:var(--font-display);
  font-size:1.4rem;
  color:var(--grey-dim);
}
.clients__track span:hover{color:var(--violet-300);}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.clients__note{margin-top:20px;color:var(--grey-dim);font-size:0.82rem;}

/* ---------- CAREERS ---------- */
.careers{
  background:linear-gradient(135deg, var(--violet-900), var(--ink-0) 70%);
  text-align:center;
}
.careers__inner{max-width:680px;margin:0 auto;}
.careers h2{font-size:clamp(1.8rem,3.4vw,2.4rem);margin-bottom:20px;}
.careers p{color:var(--grey);margin-bottom:32px;}
.careers__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ---------- BLOG ---------- */
.blog__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.blog-card{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .25s ease, border-color .25s ease;
}
.blog-card:hover{transform:translateY(-6px);border-color:var(--violet-600);}
.blog-card img{height:180px;width:100%;object-fit:cover;}
.blog-card__body{padding:22px;}
.blog-card__meta{font-size:0.75rem;color:var(--violet-300);text-transform:uppercase;letter-spacing:0.06em;}
.blog-card h3{font-size:1.1rem;margin:10px 0;}
.blog-card p{color:var(--grey);font-size:0.9rem;margin-bottom:14px;}
.blog-card__link{color:var(--violet-300);font-size:0.88rem;font-weight:600;}

/* ---------- CONTACT ---------- */
.contact__grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:24px;
}
.contact__map{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  min-height:340px;
}
.contact__info{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.contact__info h3{font-size:1.3rem;}
.contact__sub{color:var(--violet-300);font-size:0.85rem;}
.contact__info address{font-style:normal;color:var(--grey);font-size:0.92rem;}
.contact__info a{color:var(--white);font-size:0.95rem;transition:color .2s;}
.contact__info a:hover{color:var(--violet-300);}

.contact__form{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.contact__form input,
.contact__form textarea{
  width:100%;
  background:var(--ink-1);
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 16px;
  color:var(--white);
  font-family:var(--font-body);
  font-size:0.92rem;
  resize:vertical;
}
.contact__form input::placeholder,
.contact__form textarea::placeholder{color:var(--grey-dim);}
.contact__form input:focus,
.contact__form textarea:focus{border-color:var(--violet-500);outline:none;}
.contact__form-note{font-size:0.85rem;color:var(--violet-300);min-height:1.2em;}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--ink-1);
  border-top:1px solid var(--line);
  padding:70px 6vw 30px;
}
.footer__top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  max-width:var(--container);
  margin:0 auto 50px;
}
.footer__brand p{color:var(--grey);margin-top:16px;font-size:0.92rem;max-width:340px;}
.footer__col h4{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--violet-300);margin-bottom:16px;}
.footer__col a,.footer__col p{
  display:block;
  color:var(--grey);
  font-size:0.9rem;
  margin-bottom:10px;
  transition:color .2s;
}
.footer__col a:hover{color:var(--white);}
.footer__bottom{
  max-width:var(--container);
  margin:0 auto;
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:0.8rem;
  color:var(--grey-dim);
}
.footer__bottom span:first-child{font-family:var(--font-display);color:var(--violet-300);}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1024px){
  .services__grid{grid-template-columns:repeat(2,1fr);}
  .projects__grid{grid-template-columns:repeat(2,1fr);}
  .blog__grid{grid-template-columns:1fr;}
  .contact__grid{grid-template-columns:1fr;}
  .about{grid-template-columns:1fr;}
  .why__block,.why__block--reverse{grid-template-columns:1fr;direction:ltr;}
  .footer__top{grid-template-columns:1fr;}
}

@media (max-width: 860px){
  .nav__links{
    position:fixed;
    top:64px;left:0;right:0;
    background:var(--ink-1);
    flex-direction:column;
    padding:24px 6vw;
    border-bottom:1px solid var(--line);
    display:none;
    gap:18px;
  }
  .nav__links.open{display:flex;}
  .nav__burger{display:flex;}
  .nav__cta{display:none;}
  .hero{grid-template-columns:1fr;padding-top:120px;}
  .hero__panel{margin-top:20px;}
  .about__stats{grid-template-columns:repeat(2,1fr);}
  .services__grid{grid-template-columns:1fr;}
  .projects__grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .clients__track,.hero__scroll-line{animation:none;}
}