:root{
  --blue:#14275f;
  --blue2:#0f2b67;
  --bright:#2563eb;
  --text:#152033;
  --muted:#526071;
  --light:#f6f8fc;
  --line:#e5e9f1;
  --white:#ffffff;
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:Inter, Arial, sans-serif;
  color:var(--text);
  background:white;
  overflow-x:hidden;
}

a{
  text-decoration:none;
  color:inherit;
}

.container{
  width:95%;
  max-width:1440px;
  margin:0 auto;
}

/* HEADER */

.header{
  height:86px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20;
  transition:.3s ease;
}

.header.scrolled{
  height:74px;
  box-shadow:0 12px 30px rgba(20,39,95,.09);
}

.nav{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo-mark{
  width:46px;
  height:46px;
  border:2px solid var(--blue);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:var(--blue);
  font-size:18px;
  transition:.3s ease;
}

.logo:hover .logo-mark{
  background:var(--blue);
  color:white;
  transform:rotate(-3deg) scale(1.05);
}

.logo-text strong{
  display:block;
  font-size:20px;
  color:var(--blue);
  line-height:1;
}

.logo-text span{
  display:block;
  font-size:10px;
  letter-spacing:4px;
  color:#596274;
  margin-top:5px;
}

.menu{
  display:flex;
  align-items:center;
  gap:42px;
  font-weight:700;
  font-size:15px;
}

.menu a{
  padding:34px 0 28px;
  border-bottom:4px solid transparent;
  position:relative;
  transition:.25s ease;
}

.menu a:hover,
.menu a.active{
  color:var(--blue);
  border-bottom-color:var(--bright);
}

.top-btn{
  background:var(--blue2);
  color:white;
  padding:16px 25px;
  border-radius:8px;
  font-weight:900;
  font-size:16px;
  display:flex;
  gap:10px;
  align-items:center;
  box-shadow:0 12px 28px rgba(15,43,103,.18);
  transition:.3s ease;
}

.top-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(37,99,235,.28);
}

/* HERO */

.hero{
  min-height:525px;
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.91) 36%, rgba(255,255,255,.30) 64%, rgba(255,255,255,.06) 100%),
    url("photo_big_background.jpg");
  background-size:cover;
  background-position:center right;
  border-bottom:1px solid var(--line);
  position:relative;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 20% 30%, rgba(37,99,235,.12), transparent 35%);
}

.hero-inner{
  padding:76px 0;
  position:relative;
  z-index:1;
}

.hero-content{
  max-width:730px;
}

.hero h1{
  max-width:720px;
  color:#081b4d;
  font-size:60px;
  line-height:1.08;
  letter-spacing:-2px;
  font-weight:900;
  margin-bottom:28px;
}

.hero p{
  max-width:670px;
  color:#424c5f;
  font-size:20px;
  line-height:1.55;
  font-weight:500;
  margin-bottom:30px;
}

.hero-actions{
  display:flex;
  gap:18px;
}

.btn{
  min-height:56px;
  padding:0 26px;
  border-radius:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:900;
  font-size:15px;
  cursor:pointer;
  transition:.3s ease;
}

.btn:hover{
  transform:translateY(-3px);
}

.btn-primary{
  background:var(--blue2);
  color:white;
  box-shadow:0 8px 18px rgba(15,43,103,.18);
  position:relative;
  overflow:hidden;
}

.btn-primary::before{
  content:"";
  position:absolute;
  top:0;
  left:-110%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transition:.75s ease;
}

.btn-primary:hover::before{
  left:110%;
}

.btn-primary:hover{
  box-shadow:0 16px 36px rgba(37,99,235,.32);
}

.btn-outline{
  background:white;
  border:2px solid var(--blue2);
  color:var(--blue2);
}

.btn-outline:hover{
  background:var(--blue2);
  color:white;
}

/* TITLES */

.section-title{
  text-align:center;
  margin-bottom:42px;
}

.section-title h2{
  font-size:35px;
  color:var(--blue);
  font-weight:900;
  letter-spacing:-.8px;
}

.underline{
  width:70px;
  height:4px;
  border-radius:4px;
  background:var(--bright);
  margin:18px auto 0;
}

.sub{
  color:#667085;
  margin-top:10px;
  font-size:15px;
}

/* SERVICES */

.services{
  background:white;
  padding:58px 0 74px;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:42px;
}

.card{
  border:1px solid #e3e8f0;
  border-radius:12px;
  overflow:hidden;
  background:white;
  box-shadow:0 5px 13px rgba(20,39,95,.05);
  transition:.35s ease;
}

.card:hover{
  transform:translateY(-9px);
  box-shadow:0 18px 42px rgba(20,39,95,.14);
  border-color:rgba(37,99,235,.35);
}

.image-wrap{
  overflow:hidden;
}

.card-img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
  transition:.5s ease;
}

.card:hover .card-img{
  transform:scale(1.06);
}

.card-body{
  padding:32px 36px 34px;
}

.circle-icon{
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--blue);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  margin-bottom:24px;
  transition:.35s ease;
}

.card:hover .circle-icon{
  transform:rotate(-8deg) scale(1.06);
  box-shadow:0 12px 25px rgba(37,99,235,.25);
}

.card h3{
  color:var(--blue);
  font-size:25px;
  line-height:1.18;
  font-weight:900;
  margin-bottom:16px;
}

.card p{
  color:#4b5668;
  font-size:16px;
  line-height:1.65;
  margin-bottom:24px;
}

.learn{
  color:var(--blue);
  font-weight:900;
  transition:.25s ease;
}

.learn:hover{
  color:var(--bright);
  letter-spacing:.3px;
}

/* FEATURES */

.features{
  background:var(--blue);
  color:white;
  padding:46px 0;
  position:relative;
  overflow:hidden;
}

.features::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  right:-120px;
  top:-180px;
  background:rgba(255,255,255,.06);
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:36px;
  position:relative;
}

.feature{
  display:flex;
  gap:18px;
  align-items:flex-start;
  transition:.3s ease;
}

.feature:hover{
  transform:translateY(-5px);
}

.feature i{
  font-size:34px;
  min-width:40px;
  color:white;
}

.feature h4{
  font-size:18px;
  font-weight:900;
  margin-bottom:8px;
}

.feature p{
  color:#dce6ff;
  line-height:1.45;
  font-size:15px;
}

/* PRICING */

.pricing{
  background:#f7f8fc;
  padding:72px 0 78px;
}

.price-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:36px;
  margin-top:10px;
}

.price-card{
  background:white;
  border:1px solid #e3e8f0;
  border-radius:12px;
  padding:38px 44px;
  box-shadow:0 5px 13px rgba(20,39,95,.05);
  position:relative;
  overflow:hidden;
  transition:.35s ease;
}

.price-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(37,99,235,.14), transparent 45%);
  opacity:0;
  transition:.35s ease;
}

.price-card:hover{
  background:var(--blue);
  color:white;
  transform:translateY(-10px);
  border-color:var(--bright);
  box-shadow:
    0 22px 50px rgba(37,99,235,.30),
    0 0 30px rgba(37,99,235,.18);
}

.price-card:hover::before{
  opacity:1;
}

.price-card.dark{
  background:var(--blue);
  color:white;
  border-color:var(--blue);
  transform:translateY(-4px);
}

.price-card.dark:hover{
  transform:translateY(-13px);
}

.badge{
  position:absolute;
  top:18px;
  right:18px;
  background:white;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  padding:7px 12px;
  border-radius:999px;
}

.price-card h3,
.price-card .price,
.price-card ul,
.price-card .small-btn{
  position:relative;
  z-index:1;
}

.price-card h3{
  font-size:24px;
  font-weight:900;
  margin-bottom:18px;
}

.price-card .price{
  color:var(--blue);
  font-size:30px;
  line-height:1.1;
  font-weight:900;
  margin-bottom:25px;
  transition:.35s ease;
}

.price-card.dark .price,
.price-card:hover .price{
  color:white;
}

.price-card ul{
  list-style:none;
  display:grid;
  gap:14px;
  margin-bottom:31px;
  color:#263246;
  font-size:15px;
  line-height:1.4;
  transition:.35s ease;
}

.price-card.dark ul,
.price-card:hover ul{
  color:white;
}

.price-card li::before{
  content:"✓";
  font-weight:900;
  margin-right:12px;
}

.small-btn{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  padding:0 23px;
  border-radius:7px;
  background:var(--blue);
  color:white;
  font-weight:900;
  font-size:14px;
  transition:.3s ease;
}

.price-card.dark .small-btn,
.price-card:hover .small-btn{
  background:white;
  color:var(--blue);
}

.small-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 25px rgba(255,255,255,.15);
}

/* ABOUT */

.about{
  background:white;
  padding:84px 0;
  text-align:center;
}

.about h2{
  color:var(--blue);
  font-size:32px;
  font-weight:900;
  margin-bottom:25px;
}

.about p{
  max-width:1180px;
  margin:auto;
  color:#4b5668;
  font-size:17px;
  line-height:1.7;
}

/* CTA */

.cta{
  background:var(--blue);
  color:white;
  text-align:center;
  padding:76px 0 82px;
  position:relative;
  overflow:hidden;
}

.cta::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  left:-180px;
  bottom:-260px;
  background:rgba(255,255,255,.06);
}

.cta .container{
  position:relative;
}

.cta h2{
  font-size:33px;
  font-weight:900;
  margin-bottom:18px;
}

.cta p{
  color:#dce6ff;
  font-size:16px;
  margin-bottom:32px;
}

.cta-actions{
  display:flex;
  justify-content:center;
  gap:16px;
}

.btn-light{
  background:white;
  color:var(--blue);
}

.btn-outline-white{
  background:transparent;
  color:white;
  border:2px solid white;
}

.btn-outline-white:hover{
  background:white;
  color:var(--blue);
}

/* SCROLL TOP */

.scroll-top{
  position:fixed;
  right:22px;
  bottom:22px;
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:var(--blue);
  color:white;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(20,39,95,.25);
  opacity:0;
  pointer-events:none;
  transform:translateY(14px);
  transition:.3s ease;
  z-index:30;
}

.scroll-top.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

/* ANIMATIONS */

.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .8s ease, transform .8s ease;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

.card:nth-child(2),
.price-card:nth-child(2){
  transition-delay:.12s;
}

.card:nth-child(3),
.price-card:nth-child(3){
  transition-delay:.24s;
}

/* RESPONSIVE */

@media(max-width:900px){
  .container{width:95%}
  .top-btn{display:none}
  .menu{gap:24px;font-size:13px}
  .hero{min-height:390px;background-position:center}
  .hero-inner{padding:55px 0}
  .hero h1{font-size:38px;max-width:560px;letter-spacing:-1px}
  .hero p{font-size:16px;max-width:560px}
  .service-grid{grid-template-columns:repeat(3, 1fr);gap:24px}
  .card-img{height:150px}
  .card-body{padding:24px 22px}
  .card h3{font-size:20px}
  .card p{font-size:14px}
  .feature-grid{grid-template-columns:repeat(2, 1fr)}
  .price-grid{grid-template-columns:repeat(3, 1fr);gap:24px}
  .price-card{padding:28px 24px}
}

@media(max-width:650px){
  .header,.nav{height:56px}
  .logo-mark{width:31px;height:31px;font-size:12px;border-width:1px}
  .logo-text strong{font-size:14px}
  .logo-text span{font-size:7px;letter-spacing:3px}
  .menu{gap:20px;font-size:11px}
  .menu a{padding:20px 0 15px}
  .menu a:nth-child(n+4){display:none}

  .hero{
    min-height:390px;
    background:
      linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 52%, rgba(255,255,255,.22) 100%),
      url("photo_big_background.jpg");
    background-size:cover;
    background-position:center right;
  }

  .hero-inner{padding:55px 0}
  .hero h1{font-size:33px;line-height:1.18;max-width:520px}
  .hero p{font-size:15px;line-height:1.55;max-width:500px}
  .hero-actions{gap:12px}
  .btn{min-height:42px;padding:0 18px;font-size:12px}

  .services{padding:45px 0 50px}
  .section-title{margin-bottom:34px}
  .section-title h2{font-size:26px}
  .underline{width:55px;height:3px;margin-top:12px}

  .service-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }

  .card{border-radius:8px}
  .card-img{height:155px}
  .card-body{padding:22px 18px 24px}
  .circle-icon{width:43px;height:43px;font-size:16px;margin-bottom:18px}
  .card h3{font-size:18px}
  .card p{font-size:12px;line-height:1.65}
  .learn{font-size:12px}

  .features{padding:34px 0}
  .feature-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:24px 42px;
  }
  .feature i{font-size:24px;min-width:29px}
  .feature h4{font-size:14px}
  .feature p{font-size:11px}

  .pricing{padding:54px 0}
  .price-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
  }
  .price-card{padding:24px 22px}
  .price-card h3{font-size:17px}
  .price-card .price{font-size:22px}
  .price-card ul{font-size:11px}
  .small-btn{min-height:38px;font-size:11px;padding:0 15px}

  .about{padding:60px 0}
  .about h2{font-size:24px}
  .about p{font-size:13px}

  .cta{padding:60px 0}
  .cta h2{font-size:24px}
  .cta p{font-size:13px}
}

@media(max-width:430px){
  body{min-width:690px;}
}