/* ============ Light Theme Vars ============ */
:root{
  --bg:#ffffff;
  --panel:#f8fafc;
  --text:#0b1221;
  --muted:#51607a;
  --accent:#4b6bfb;   /* blue */
  --accent-2:#22c55e; /* green */
  --line:#e6eaf0;

  --radius:14px;
  --container:1120px;
  --shadow:0 10px 24px rgba(20, 30, 55, .08);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--muted);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:80px 0}
.section.alt{background:var(--panel)}
.section-head h2{margin:0 0 6px;color:var(--text);font-size:clamp(24px,4vw,34px)}
.section-head p{margin:0;color:var(--muted)}
.tiny{font-size:12px;color:#7c8aa4;text-align:center}
.link{color:var(--accent);text-decoration:underline}

/* ====== Buttons ====== */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  background: #0073e6;   /* 🔵 Contact button color */
  color: #fff;
  border: none;
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.9rem;
  background: #00aaff;   /* Sky Blue */
  color: #fff;
}

.btn-sm:hover {
  background: #0088cc;   /* Darker Sky Blue */
}
/* Topbar */
.topbar{position:sticky;top:0;z-index:50;background:#ffffffcc;backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--line)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.brand{font-weight:900;color:var(--text)}
.brand span{color:var(--accent)}
.nav a{margin-left:16px;color:#46536b;font-weight:600}
.nav a:hover{color:#000}

/* Hero */
.hero{padding:90px 0 110px;background:
  radial-gradient(900px 400px at 15% -10%, rgba(75,107,251,.08), transparent 65%),
  radial-gradient(900px 500px at 95% -15%, rgba(34,197,94,.08), transparent 60%),
  #fff;}
.hero-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:28px;align-items:center}
.eyebrow{letter-spacing:.22em;text-transform:uppercase;color:#8694ac;margin:0 0 4px}
.hero h1{color:#0b1221;font-size:clamp(38px,7.5vw,68px);line-height:1.05;margin:.1em 0}
.accent{color:var(--accent)}
.lead{font-size:18px;margin-bottom:16px;color:#46536b}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 18px}
.stats{list-style:none;display:flex;gap:14px;padding:0;margin:0}
.stats li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:#2b3954;box-shadow:var(--shadow)}
.portrait{border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}

/* About */
.about-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.about-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.about-card h3{margin:0 0 10px;color:var(--text)}

/* Clients marquee — seamless + in full color */
.logo-marquee{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background:#fff;
  box-shadow:var(--shadow);
  --gap: 40px;      /* easy to tweak spacing */
  --speed: 22s;     /* easy to tweak speed */
}

/* one strip of logos */
.marquee-inner{
  display:flex;
  gap:var(--gap);
  width:max-content;           /* <<< content width (not 100%) */
  flex:0 0 auto;               /* don't stretch */
  animation:marquee var(--speed) linear infinite;
}

/* offset the second, duplicated strip for seamless loop */
.marquee-inner:nth-child(2){ animation-delay: calc(var(--speed) / -2); }

/* logos in full color, fixed height but keep aspect */
.clients-logos img{
  height:62px;
  width:auto;
  opacity:1;                   /* <<< no fading */
  filter:none;                 /* <<< remove grayscale */
  transition:transform .2s ease;
}
.clients-logos img:hover{ transform:scale(1.03); }

/* move only half the total width because we have two identical strips */
@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}


/* Achievements Gallery (slideshow) */
.achv{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.slides{position:relative;height:0;padding-bottom:54%}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.slide.current{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover}

/* Controls & dots */
.slide-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:4;border:0;background:#ffffffd9;color:#2b3954;font-size:22px;width:42px;height:42px;border-radius:50%;cursor:pointer;box-shadow:var(--shadow)}
.slide-btn:hover{background:#fff}
.slide-btn.prev{left:10px}
.slide-btn.next{right:10px}
.dots{display:flex;gap:8px;justify-content:center;padding:12px;background:#fff;border-top:1px solid var(--line)}
.dots button{width:9px;height:9px;border-radius:50%;border:0;background:#c3cad6;cursor:pointer}
.dots button.active{background:var(--accent)}

/* Caption ticker */
.caption-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:linear-gradient(180deg, transparent 0, rgba(255,255,255,.75) 35%, #ffffff 100%);
  padding:10px 0;border-top:1px solid var(--line)
}
.caption-ticker{overflow:hidden;white-space:nowrap}
.caption-ticker span{
  display:inline-block;padding-left:100%;
  animation:captionMove 8s linear infinite;
  color:#0b1221;font-weight:700;letter-spacing:.3px;
}
@keyframes captionMove{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* Packages */
.packages-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:36px}
.package-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;text-align:center;transition:transform .2s ease;box-shadow:var(--shadow)}
.package-card:hover{transform:translateY(-6px)}
.package-card h3{margin:0 0 8px;font-size:20px;color:var(--text)}
.package-card .price{font-size:18px;font-weight:800;color:var(--accent);margin-bottom:12px}
.package-card ul{list-style:none;padding:0;margin:0 0 20px}
.package-card ul li{font-size:14px;margin:6px 0;color:#51607a}
.package-card.highlight{border:2px solid var(--accent);background:#f6f9ff}

/* Best edits grid */
.best-edits{margin-top:18px}
.best-edits h3{margin-bottom:6px;font-size:22px;color:var(--text)}
.best-edits p{margin-bottom:16px}
.video-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:18px}
.video-grid iframe{border-radius:10px;border:1px solid var(--line);width:100%;height:220px;background:#fff}

/* Resume & Education */
.resume-edu-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.subhead{margin-bottom:10px;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.8px}
.exp-item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px;transition:transform .2s ease;box-shadow:var(--shadow)}
.exp-item:hover{transform:translateY(-4px)}
.exp-item h4{margin:0 0 5px;font-size:16px;color:var(--text)}
.when{font-size:13px;color:#15803d;display:block;margin-bottom:6px}
.exp-item p{margin:0;font-size:14px;color:#51607a}
.edu-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow)}
.edu-card h4{margin:0 0 6px;font-size:16px;color:var(--text)}
.edu-card p{margin:0;font-size:14px;color:#51607a}
.edu-year{margin-top:6px;font-size:13px;color:#2563eb;display:block}

/* Contact */
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-form textarea{grid-column:1 / -1}
.contact-form input,.contact-form textarea{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;color:#0b1221;box-shadow:var(--shadow)}
.socials{display:flex;gap:12px;margin-top:14px}
.soc{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--line);color:#1f2b44;transition:transform .2s ease, box-shadow .2s ease, color .2s ease;box-shadow:var(--shadow)}
.soc:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(20, 30, 55, .12);color:#000}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:translateY(0)}

.site-footer{padding:38px 0;border-top:1px solid var(--line);background:#fff}

/* Responsive */
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr} }
@media (max-width:780px){
  .resume-edu-grid{grid-template-columns:1fr}
  .packages-grid{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
}