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

:root{

  --red:#E42527;
  --blue:#146EF5;
  --green:#19B36B;
  --yellow:#F4B400;

  --dark:#0F172A;
  --text:#334155;
  --light:#64748B;

  --bg:#F8FAFC;
  --white:#ffffff;

  --border:#E2E8F0;

  --radius:24px;

  --shadow:
  0 10px 40px rgba(15,23,42,.08);

  --transition:.35s cubic-bezier(.4,0,.2,1);
}

/* =========================
   RESET
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  font-family:'Inter',sans-serif;

  background:var(--bg);

  color:var(--text);

  line-height:1.7;

  overflow-x:hidden;
}

/* =========================
   HEADER
========================= */

header{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  height:90px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 7%;

  backdrop-filter:blur(14px);

  background:rgba(255,255,255,.82);

  border-bottom:1px solid rgba(255,255,255,.4);

  z-index:1000;

  transition:var(--transition);
}

.header-scrolled{

  box-shadow:
  0 10px 30px rgba(15,23,42,.06);
}

.logo{

  font-size:1.4rem;

  font-weight:800;

  color:var(--dark);

  z-index:1002;
}

.logo span{
  color:var(--red);
}

/* =========================
   NAVIGATION
========================= */

nav{

  display:flex;

  gap:2rem;

  align-items:center;
}

nav a{

  color:var(--light);

  text-decoration:none;

  font-weight:500;

  transition:var(--transition);
}

nav a:hover{
  color:var(--dark);
}

/* =========================
   HAMBURGER
========================= */

.hamburger{

  display:none;

  font-size:2rem;

  cursor:pointer;

  color:var(--dark);

  z-index:1002;
}

/* =========================
   HERO
========================= */

.hero{

  min-height:100vh;

  display:flex;
  align-items:center;

  padding:140px 7% 80px;

  position:relative;

  overflow:hidden;
}

.hero-grid{

  position:absolute;

  inset:0;

  background-image:
  linear-gradient(rgba(20,110,245,.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(20,110,245,.04) 1px, transparent 1px);

  background-size:60px 60px;

  mask-image:
  radial-gradient(circle at center, black 40%, transparent 90%);
}

.hero-content{

  position:relative;

  z-index:2;

  max-width:760px;
}

.eyebrow{

  display:inline-flex;

  padding:10px 18px;

  border-radius:100px;

  background:rgba(20,110,245,.08);

  color:var(--blue);

  font-size:.85rem;

  font-weight:700;

  margin-bottom:28px;
}

.hero h1{

  font-size:clamp(3rem,7vw,6rem);

  line-height:1;

  letter-spacing:-3px;

  color:var(--dark);

  margin-bottom:24px;
}

.hero h2{

  font-size:1.15rem;

  color:var(--light);

  max-width:640px;

  margin-bottom:40px;
}

.hero-actions{

  display:flex;

  gap:18px;

  flex-wrap:wrap;
}

/* =========================
   BUTTONS
========================= */

button{

  border:none;

  cursor:pointer;

  padding:16px 28px;

  border-radius:16px;

  background:var(--red);

  color:white;

  font-weight:600;

  transition:var(--transition);

  box-shadow:
  0 10px 25px rgba(228,37,39,.2);
}

button:hover{
  transform:translateY(-4px);
}

.ghost-btn{

  display:flex;

  align-items:center;

  justify-content:center;

  padding:16px 28px;

  border-radius:16px;

  border:1px solid var(--border);

  color:var(--dark);

  text-decoration:none;

  background:white;
}

/* =========================
   SECTIONS
========================= */

main section{
  padding:100px 7%;
}

.section-label{

  display:flex;

  align-items:center;

  gap:12px;

  margin-bottom:24px;

  color:var(--blue);

  font-size:.85rem;

  font-weight:700;

  text-transform:uppercase;
}

.section-label span{

  width:40px;

  height:2px;

  background:var(--red);
}

section h1{

  font-size:clamp(2rem,4vw,3.5rem);

  line-height:1.1;

  color:var(--dark);

  margin-bottom:28px;
}

/* =========================
   GRID
========================= */

.container{

  display:grid;

  grid-template-columns:1.2fr .8fr;

  gap:60px;
}

.stats-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:20px;
}

.stat-card{

  background:white;

  padding:28px;

  border-radius:var(--radius);

  border:1px solid var(--border);

  box-shadow:var(--shadow);
}

/* =========================
   SERVICES
========================= */

.services-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(280px,1fr));

  gap:28px;

  margin-top:40px;
}

.services-grid article{

  background:white;

  padding:36px;

  border-radius:var(--radius);

  border:1px solid var(--border);

  transition:var(--transition);
}

.services-grid article:hover{

  transform:translateY(-8px);

  box-shadow:var(--shadow);
}

/* =========================
   TIMELINE
========================= */

.timeline{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(240px,1fr));

  gap:24px;
}

.timeline-item{

  background:white;

  padding:32px;

  border-radius:var(--radius);

  border:1px solid var(--border);
}

.timeline-number{

  font-size:2rem;

  font-weight:800;

  color:rgba(20,110,245,.15);

  margin-bottom:16px;
}

/* =========================
   CTA
========================= */

.cta-banner{

  background:
  linear-gradient(
  135deg,
  rgba(20,110,245,.06),
  rgba(228,37,39,.06)
  );

  text-align:center;

  border-radius:40px;

  margin:0 7%;
}

/* =========================
   CONTACT
========================= */

.contact{
  text-align:center;
}

.details{

  max-width:700px;

  margin:50px auto 0;
}

.details input,
.details textarea{

  width:100%;

  padding:18px 20px;

  margin-bottom:18px;

  border-radius:18px;

  border:1px solid var(--border);

  background:white;

  outline:none;

  font-size:1rem;
}

textarea{
  min-height:180px;
}

#form-msg{
  display:none;
}

/* =========================
   FOOTER
========================= */

.footer{

  background:var(--dark);

  color:white;

  padding:80px 7%;

  display:flex;

  justify-content:space-between;

  flex-wrap:wrap;

  gap:40px;
}

.footer-links{

  display:flex;

  gap:24px;

  flex-wrap:wrap;
}

.footer-links a{

  color:rgba(255,255,255,.7);

  text-decoration:none;
}

.copy{

  width:100%;

  padding-top:24px;

  border-top:1px solid rgba(255,255,255,.08);
}

/* =========================
   REVEAL
========================= */

.reveal{

  opacity:0;

  transform:translateY(40px);

  transition:1s ease;
}

.reveal.visible{

  opacity:1;

  transform:none;
}

/* =========================
   TABLETS
========================= */

@media(max-width:900px){

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

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

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

  header{
    padding:0 5%;
  }

  /* HAMBURGER */

  .hamburger{
    display:block;
  }

  nav{

    position:absolute;

    top:90px;

    left:0;

    width:100%;

    background:white;

    flex-direction:column;

    align-items:flex-start;

    padding:30px 5%;

    gap:24px;

    display:none;

    border-bottom:
    1px solid var(--border);
  }

  nav.active{
    display:flex;
  }

  .hero{

    padding:140px 5% 80px;
  }

  .hero h1{

    font-size:3rem;

    letter-spacing:-2px;
  }

  .hero h2{
    font-size:1rem;
  }

  .hero-actions{

    flex-direction:column;

    align-items:flex-start;
  }

  main section{
    padding:80px 5%;
  }

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

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

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

  .cta-banner{
    margin:0 5%;
    border-radius:24px;
  }

  .footer{

    flex-direction:column;

    padding:60px 5%;
  }

  .footer-links{
    flex-direction:column;
    gap:12px;
  }
}

.logo{

  font-size:1.4rem;

  font-weight:800;

  color:var(--dark);

  white-space:nowrap;
}

.footer .logo{

  color:white;

  white-space:nowrap;
}