:root{
--accent-1: #2dd4bf;
--accent-2: #60a5fa;
--muted: #64748b;
--card-radius: 14px;

--logo-color: #2563eb;
--logo-color-2: #60a5fa;
}
html,body{height:100%;}
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui;
  position: relative;
  z-index: 0;
}


body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../images/pattern22.jpg");
  background-repeat: repeat;
  opacity: 0.5;
  z-index: -1;

}

    .container{max-width:1100px;margin:0 auto;padding:2.25rem;}

    header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}
    header img{height:64px}
    header h1{font-size:1.6rem;font-weight:800}

    .section-title{font-size:1.35rem;font-weight:800;color:#0b1220;margin:1.5rem 0}

    .grid-cards{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}
    @media(min-width:640px){.grid-cards{grid-template-columns:repeat(2,1fr)}}
    @media(min-width:1024px){.grid-cards{grid-template-columns:repeat(3,1fr)}}

    .card:focus{outline:3px solid rgba(96,165,250,0.18);outline-offset:3px}
    .card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(12,18,26,0.12)}

    .card-icon{
  min-width:64px;
  min-height:64px;

  border-radius:12px;

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

  color:#fff !important;

  font-size:26px;
  line-height:1;

  background: linear-gradient(
    135deg,
    var(--logo-color,#2563eb),
    var(--logo-color-2,#60a5fa)
  ) !important;

  background-color: var(--logo-color,#2563eb) !important;

  box-shadow:none !important;
  border:none !important;
}

.card-icon i,
.card-icon img,
.card-icon svg{
  width:28px;
  height:28px;
  filter:none !important;
}


    .icon-grad-blue, .icon-grad-green {
    background: linear-gradient(135deg, var(--logo-color, #2563eb), #1d3e6c) !important;
}

    .card-body{flex:1}
    .card-title{font-weight:700;font-size:1.05rem ;color:#1d3e6c}
    .card-text{margin:0;color:#213758;font-size:1rem;line-height:1.35;font-weight: bold;}

    .section-hr{height:1px;background:linear-gradient(90deg,transparent,#e6eef9,transparent);margin:1rem 0}


    .cards-row{display:flex;flex-wrap:wrap;gap:1rem}

    footer{margin-top:2.5rem;color:var(--muted);font-size:0.9rem}

section {
  background: transparent;
}


body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue";

  background:
    radial-gradient(1000px 400px at 10% 10%, rgba(37,99,235,0.10), transparent),
    radial-gradient(800px 350px at 90% 90%, rgba(96,165,250,0.08), transparent),
    linear-gradient(180deg, #e6f0f8 0%, #f1f6fb 40%, #f8fafc 100%);

  background-attachment: fixed;
}
.section-title {
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #fe853f;
  margin: 8px;
  border-radius: 2px;
}
.card:hover::before,
.card:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}
.card{
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: flex-start;


padding: 1.75rem;
min-height: 110px;
background-color: #fff;
background-image: radial-gradient(#eef2f7 1px, transparent 1px);
background-size: 18px 18px;

  border-radius: calc(var(--card-radius) + 6px);
  border: 1px solid rgba(15,23,42,0.05);

  box-shadow: 0 12px 28px rgba(12,18,26,0.08);

  overflow: hidden;

  text-decoration: none;
  color: inherit;

  transition: transform .25s ease, box-shadow .25s ease;
}
.card::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -30%;
  width: 160%;
  height: 120px;

  background: radial-gradient(
    ellipse at center,
    rgba(96,165,250,0.45) 0%,
    rgba(96,165,250,0.15) 40%,
    rgba(96,165,250,0) 70%
  );

  filter: blur(20px);
  opacity: 0;
  transform: translateY(-30px);
  transition: all 0.5s ease;
}
.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    #b6d4ef,
    transparent
  );
  margin: 25px 0;
}

.card-desc{
  color: #64748b;
  font-size: 12px;
  margin-top: 8px;
}
.card:hover,
.card:focus-visible{
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(12,18,26,0.12);
}