.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Inter", sans-serif; }
.nav-link { color: #334155; transition: color .2s ease; }
.nav-link:hover, .nav-link.active { color: #4f46e5; }
.mobile-link { display: block; padding: .6rem 0; font-weight: 500; color: #334155; }
.mobile-link:hover { color: #4f46e5; }
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: .75rem 1.25rem; font-weight: 600; transition: .2s ease; }
.btn-primary { background: linear-gradient(90deg, #4f46e5, #7c3aed); color: #fff; box-shadow: 0 10px 25px rgba(79, 70, 229, .3); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-secondary { border: 1px solid #cbd5e1; color: #1e293b; background: #fff; }
.btn-secondary:hover { border-color: #4f46e5; color: #4f46e5; }
.floating-shape { position: absolute; border-radius: 999px; filter: blur(30px); opacity: .4; pointer-events: none; }
.shape-one { width: 220px; height: 220px; background: #c7d2fe; top: 80px; left: -30px; animation: floatY 9s ease-in-out infinite; }
.shape-two { width: 300px; height: 300px; background: #ddd6fe; top: 200px; right: -80px; animation: floatY 11s ease-in-out infinite; }
.shape-three { width: 170px; height: 170px; background: #bfdbfe; bottom: 20px; left: 40%; animation: floatY 10s ease-in-out infinite; }
@keyframes floatY { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-20px);} }
.service-card { border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; background: rgba(255,255,255,.8); backdrop-filter: blur(8px); transition: .2s ease; }
.service-card i { color: #4f46e5; font-size: 1.2rem; }
.service-card h3 { margin-top: .8rem; font-size: 1.05rem; font-weight: 700; }
.service-card p { margin-top: .4rem; color: #64748b; font-size: .95rem; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(15,23,42,.08); }
.portfolio-card { border: 1px solid #e2e8f0; border-radius: 1rem; overflow: hidden; background: #fff; }
.portfolio-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.portfolio-card div { padding: 1rem; }
.portfolio-card h3 { font-weight: 700; }
.portfolio-card p { color: #64748b; margin-top: .4rem; }
.footer-heading { font-size: .9rem; font-weight: 700; margin-bottom: .8rem; color: #0f172a; }
footer a { display: block; color: #475569; margin-bottom: .5rem; font-size: .92rem; }
footer a:hover { color: #4f46e5; }
.skeleton-card { height: 240px; border-radius: 1rem; background: linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 37%,#e2e8f0 63%); background-size: 400% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.blog-card { border: 1px solid #e2e8f0; border-radius: 1rem; overflow: hidden; background: #fff; transition: .2s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 25px rgba(15,23,42,.08); }
.blog-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.blog-card-content { padding: 1rem; }
.blog-card h3 { font-size: 1rem; font-weight: 700; line-height: 1.4; }
.blog-card p { margin-top: .6rem; color: #64748b; font-size: .92rem; }
.page-hero { padding: 9rem 1rem 4rem; background: radial-gradient(circle at top left, #e0e7ff, transparent 38%), radial-gradient(circle at top right, #ede9fe, transparent 35%); }
.content-wrap { max-width: 72rem; margin: 0 auto; }
.info-card { border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; padding: 1.25rem; }
.timeline { border-left: 2px solid #cbd5e1; padding-left: 1.2rem; }
.timeline .item { margin-bottom: 1rem; position: relative; }
.timeline .item::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: #4f46e5; position: absolute; left: -1.63rem; top: .3rem; }
.form-input, .form-select, .form-textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: .75rem; padding: .75rem .85rem; outline: none; background: #fff; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
@media (max-width: 767px) {
  .page-hero { padding-top: 7.5rem; }
}