/* styles.css
   Shared CSS for all pages
*/
:root{
  --bg: #f7fbff;
  --card: #ffffff;
  --primary: #2b86ff;   /* main blue */
  --accent: #07b6d4;    /* secondary */
  --dark: #0f1724;
  --muted: #6b7280;
  --radius: 12px;
  --container: 1100px;
}

* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--dark); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:inherit; text-decoration:none; }
.container { width: min(var(--container), 94%); margin: 0 auto; padding: 36px 0; }

/* Header / nav */
.site-header {
  background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.6));
  backdrop-filter: blur(6px);
  position: sticky;
  top:0;
  z-index:100;
  box-shadow: 0 1px 0 rgba(16,24,40,0.04);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0; }
.brand {
  display:flex; align-items:center; gap:12px;
}
.brand img.logo { width:56px; height:56px; object-fit:contain; border-radius:8px; }
.brand .title { font-weight:700; color:var(--primary); font-size:20px; }
.nav {
  display:flex; gap:18px; align-items:center;
}
.nav a {
  padding:10px 8px;
  color:var(--dark);
  font-weight:600;
  position:relative;
}
.nav a::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:4px;
  width:0;
  height:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  border-radius:4px;
  transition:width .25s;
}
.nav a:hover::after{ width:60%; }

/* Hero */
.hero {
  display:flex;
  gap:36px;
  align-items:center;
  padding:64px 0;
  min-height:520px;
}
.hero-left { flex:1 1 520px; animation:slideIn .9s ease both; }
.hero-title {
  font-size:56px;
  line-height:1.02;
  margin:0 0 18px 0;
  font-weight:800;
  color:var(--dark);
  letter-spacing:-1px;
}
.lead { color:var(--muted); font-size:16px; margin-bottom:22px; max-width:62ch; }

/* CTA */
.btn {
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  color:#fff;
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  box-shadow: 0 8px 22px rgba(43,134,255,0.14);
  transform:translateZ(0);
  transition:transform .18s ease, box-shadow .18s;
}
.btn:hover { transform:translateY(-4px); box-shadow: 0 18px 36px rgba(43,134,255,0.18); }
.btn .arrow { display:inline-block; transform:translateX(0); transition:transform .18s; }
.btn:hover .arrow { transform:translateX(6px); }

/* Hero card */
.hero-right {
  width:520px;
  max-width:44%;
  min-width:260px;
  border-radius:18px;
  padding:28px;
  background: linear-gradient(180deg,#eaf5ff 0%, #f9fbff 100%);
  position:relative;
  overflow:hidden;
  box-shadow: 0 20px 50px rgba(16,24,40,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Remove old placeholder style */
.hero-illustration {
  width:100%;
  height:auto;
  border-radius:12px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ============================== */
/*   NEW — ANIMATED SVG STYLE     */
/* ============================== */

.illustration-svg { 
  width:100%; 
  height:auto; 
  max-height:420px; 
  display:block;
  animation: illuFloat 6s ease-in-out infinite;
  transform-origin: 50% 50%;
}

/* shimmer sweep */
.illustration-svg .shimmer {
  animation: shimmerMove 3.5s linear infinite;
  filter: url(#softGlow);
}

/* sparkles */
.illustration-svg .spark {
  transform-origin: center center;
  animation: sparkle 3.2s ease-in-out infinite;
  opacity: 0;
}
.illustration-svg .s1 { animation-delay: 0s; }
.illustration-svg .s2 { animation-delay: 0.6s; }
.illustration-svg .s3 { animation-delay: 1.2s; }

/* bobbing animations */
.illustration-svg .person { animation: personBob 6.6s ease-in-out infinite; }
.illustration-svg .monitor { 
  animation: monitorTilt 7s ease-in-out infinite;
  transform-origin: 200px 120px;
}

/* hover interactivity */
.hero-illustration:hover .illustration-svg {
  transform: translateY(-6px) scale(1.01);
  transition: transform .28s ease;
}

/* ==================== */
/* Cards and sections   */
/* ==================== */

.section { padding:42px 0; }
.card { background:var(--card); border-radius:var(--radius); padding:20px; box-shadow: 0 8px 28px rgba(15,23,36,0.04); }
.grid { display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Service card hover */
.service {
  padding:18px;
  border-radius:12px;
  transition:transform .18s ease, box-shadow .18s ease;
  border:1px solid rgba(16,24,40,0.04);
}
.service:hover { transform:translateY(-8px); box-shadow: 0 18px 36px rgba(16,24,40,0.06); }

/* small utilities */
.kicker { display:inline-block; background:rgba(7,182,212,0.08); color:var(--accent); padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px; margin-bottom:12px; }
.h3 { font-size:20px; margin:6px 0 8px 0; font-weight:700; color:var(--dark); }

/* Footer */
.site-footer { padding:26px 0; text-align:center; color:var(--muted); font-size:14px; }

/* About page extra */
.team { display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; }
.person { flex:1 1 220px; border-radius:12px; padding:14px; background:linear-gradient(180deg,#fff,#fbfdff); text-align:center; box-shadow: 0 6px 18px rgba(15,23,36,0.04); }

/* Contact form */
.form-row { display:flex; gap:12px; }
.form-row .form-control { flex:1; }
.form-control { width:100%; padding:12px 14px; border-radius:10px; border:1px solid #e6eef8; font-size:14px; }
.textarea { min-height:120px; resize:vertical; }

/* small responsive */
@media (max-width:980px){
  .hero { flex-direction:column-reverse; padding:36px 0; min-height:unset; }
  .hero-right { width:100%; max-width:none; min-width:unset; }
  .header-inner { padding:10px 0; }
  .brand .title { font-size:18px; }
  .hero-title { font-size:36px; }
}
@media (max-width:480px){
  .nav { display:none; }
  .container { padding:18px 0; }
  .hero-title { font-size:28px; margin-bottom:12px; }
}

/* ================================= */
/*          KEYFRAMES               */
/* ================================= */

/* old float */
@keyframes float {
  0% { transform:translateY(0); }
  50% { transform:translateY(-12px); }
  100% { transform:translateY(0); }
}

@keyframes slideIn {
  0% { opacity:0; transform:translateY(18px); }
  100% { opacity:1; transform:translateY(0); }
}

/* new animated SVG keyframes */

@keyframes illuFloat {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes shimmerMove {
  0% { transform: translateX(-420px) rotate(-18deg); opacity:0; }
  20% { opacity:0.12; }
  50% { transform: translateX(420px) rotate(-18deg); opacity:0.45; }
  80% { opacity:0.08; }
  100% { transform: translateX(900px) rotate(-18deg); opacity:0; }
}

@keyframes sparkle {
  0% { transform: scale(0.6); opacity:0; }
  10% { transform: scale(1.05); opacity:0.95; }
  40% { transform: scale(0.9); opacity:0.6; }
  100% { transform: scale(0.7); opacity:0; }
}

@keyframes personBob {
  0% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
  100% { transform:translateY(0); }
}

@keyframes monitorTilt {
  0% { transform:rotate(0deg) translateY(0px); }
  50% { transform:rotate(-0.6deg) translateY(-4px); }
  100% { transform:rotate(0deg) translateY(0px); }
}