/* Clickombo one-page site */
:root{
  --bg:#0b0c10;
  --card:#111216;
  --muted:#b8c1cc;
  --text:#eaf0f6;
  --brand:#7c5cff;
  --brand-2:#31e1a3;
  --shadow: 0 10px 25px rgba(0,0,0,.25);
  --brand-3: #ff3d81;  /* pink/magenta */
  --brand-4: #ffb84d;  /* warm orange */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;scroll-behavior:smooth}
.container{width:min(1100px,92%);margin:0 auto}
h1,h2,h3{line-height:1.15;margin:0 0 .6rem}
h1{font-size:clamp(2rem,6vw,3.4rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3.6vw,2.2rem)}
h3{font-size:1.15rem}
p{margin:.4rem 0 1rem;color:var(--muted)}
a{color:var(--text);text-decoration:none}
.btn {
  display: inline-block;
  padding: .85rem 1.1rem;
  border-radius: 14px;
  font-weight: 700;
  color: #0a0a0a;
  background: linear-gradient(135deg, var(--brand), var(--brand-2), var(--brand), var(--brand-2));
  background-size: 400% 400%; /* make gradient large enough to animate */
  box-shadow: var(--shadow);
  transition: transform .15s ease;
  animation: btnShimmer 4s ease infinite; /* shimmer animation */
}
.btn:hover{transform:translateY(-1px);animation:pulse .6s ease}
.btn-ghost{background:#ffffff10;color:var(--text);backdrop-filter:blur(4px)}
.btn-sm {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #0a0a0a;
  padding: .55rem .8rem;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: transform .15s ease;
}
.btn-sm:hover {
  transform: translateY(-1px);
  animation:pulse .6s ease;
}

.pill{display:inline-block;background:#ffffff12;padding:.25rem .6rem;border-radius:999px;font-size:.8rem;letter-spacing:.02em}

.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,#0b0c10 40%,#0b0c10dd 80%,transparent);backdrop-filter:saturate(140%) blur(6px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800}
.brand span{letter-spacing:.2px}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{opacity:.85;transition:opacity .2s ease}
.nav a:hover{opacity:1}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:transparent;border:0}
.nav-toggle span{width:22px;height:2px;background:var(--text);display:block;border-radius:2px}

.text-bg {
  background: rgba(0, 0, 0, 0.6); /* semi-transparent black */
  padding: 2rem 1.5rem;
  border-radius: 20px;
  display: inline-block; /* shrink-wrap around text */
}

.hero {
  background: url("assets/skyline.jpg") no-repeat center center;
  background-size: cover;
  color: white;
  text-align: center;
  padding: 120px 20px;
  position: relative;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:.35;animation:floatBg 20s linear infinite alternate}
.hero-inner{display:grid;gap:1rem;max-width:800px;margin:0 auto}
.hero .accent {
  display: inline-block;
  background: linear-gradient(
    270deg,
    var(--brand),
    var(--brand-2),
    var(--brand-3),
    var(--brand-4),
    var(--brand),
    var(--brand-2)
  );
  background-size: 600% 100%; /* wide gradient for smooth shimmer */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: shimmer 16s linear infinite, flicker 8s infinite;
  text-shadow:
  0 0 1px rgba(124, 92, 255, 0.5),
  0 0 1px rgba(0, 255, 240, 0.5),
}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.4rem}
.trust{display:flex;flex-direction:column;gap:.4rem;margin-top:1.2rem}
.trust img{height:28px;opacity:.9;filter:drop-shadow(0 6px 16px #0008)}

.section{
  padding:4rem 0;
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s ease, transform .8s ease;
}
.section.visible{
  opacity:1;
  transform:translateY(0);
}
.section.alt{background:radial-gradient(1200px 600px at 50% 0, #ffffff06 0, transparent 60%)}
.section-lead{font-size:1.05rem}

.grid{display:grid;gap:1.2rem}
.cards{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid #ffffff10;border-radius:20px;padding:1.2rem;box-shadow:var(--shadow);transition:transform .3s ease, box-shadow .3s ease}
.card .icon{width:36px;height:36px;color:var(--brand-2);margin-bottom:.5rem}
.card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 15px 35px rgba(0,0,0,.4)}



#work {
  position: relative;
  background: url("assets/work-bg.jpg") no-repeat center center;
  background-size: cover; /* cover entire section */
  padding: 4rem 0;
  overflow: hidden;
}

/* Optional overlay to improve text readability */
#work::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 12, 16, 0.6); /* semi-transparent dark overlay */
  z-index: 0;
  pointer-events: none;
}

#work .container {
  position: relative; /* content above overlay */
  z-index: 1;
}
.work{grid-template-columns:repeat(3,1fr)}
.work-card{background:linear-gradient(180deg,#111216,#0e0f13);border:1px solid #ffffff12;padding:1.2rem;border-radius:20px;transition:transform .3s ease, box-shadow .3s ease}
.work-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 15px 35px rgba(0,0,0,.4)}

.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:.6rem}
.metrics div{background:#ffffff08;border:1px solid #ffffff10;border-radius:12px;padding:.6rem;text-align:center}
.metrics strong{font-size:1.3rem}

.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.step{background:var(--card);border:1px solid #ffffff10;border-radius:18px;padding:1.1rem;position:relative;transition:transform .3s ease, box-shadow .3s ease}
.step:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 15px 35px rgba(0,0,0,.4)}
.step-num{position:absolute;top:-12px;left:-12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#0a0a0a;font-weight:800;border-radius:999px;width:38px;height:38px;display:grid;place-items:center;box-shadow:var(--shadow)}

#pricing {
  position: relative;
  background: url("assets/pricing-bg.jpg") no-repeat center center;
  background-size: cover;
  padding: 4rem 0;
  overflow: hidden;
}

/* Optional overlay to improve text readability */
#pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 12, 16, 0.6); /* semi-transparent dark overlay */
  z-index: 0;
  pointer-events: none;
}

/* Ensure container content is above overlay */
#pricing .container {
  position: relative;
  z-index: 1;
}
.pricing{grid-template-columns:repeat(3,1fr)}
.price-card{background:var(--card);border:1px solid #ffffff10;border-radius:20px;padding:1.2rem;transition:transform .3s ease, box-shadow .3s ease}
.price-card.highlight{border-color:#ffffff25;box-shadow:0 0 0 2px #ffffff10 inset, var(--shadow)}
.price-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 15px 35px rgba(0,0,0,.4)}
.price{font-size:2rem;font-weight:900;margin:.25rem 0 1rem}
.price span{font-size:1rem;color:var(--muted)}

.contact{background:var(--card);border:1px solid #ffffff10;border-radius:20px;padding:1.2rem}
.form-grid{grid-template-columns:repeat(2,1fr)}
.form-grid .full{grid-column:1/-1}
label{display:grid;gap:.4rem}
input,textarea{background:#0d0f14;border:1px solid #252834;border-radius:12px;color:var(--text);padding:.8rem;font:inherit;transition:border-color .2s ease, outline .2s ease}
input:focus,textarea:focus{outline:2px solid #2d89ff44;border-color:#2d89ff44}
.form-actions{display:flex;align-items:center;gap:1rem;margin-top:.6rem}
.form-note{color:var(--muted);font-size:.9rem}
.form-success{margin-top:1rem;background:#1b7f5a;padding:.8rem 1rem;border-radius:12px}

.site-footer{padding:2.2rem 0;border-top:1px solid #ffffff10;background:linear-gradient(180deg,transparent,#00000050)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-nav{display:flex;gap:1rem;flex-wrap:wrap}
.legal{color:#98a3b1}

@media (max-width: 920px){
  .cards,.work,.timeline,.pricing{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .nav{display:none;position:absolute;right:4%;top:64px;background:#0d0f14;border:1px solid #ffffff14;border-radius:14px;padding:.6rem;flex-direction:column;gap:.4rem;box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav-toggle{display:flex}
  .hero{padding:5rem 0 3rem}
  .cards,.work,.timeline,.pricing,.form-grid{grid-template-columns:1fr}
}

@media (max-width: 640px) {
  #work {
    padding: 3rem 1rem;
    background-position: top center; /* keep important part visible */
  }
}
@media (max-width: 640px) {
  #pricing {
    padding: 3rem 1rem;
    background-position: top center; /* keep key part of image visible */
  }

  #pricing .grid.pricing {
    grid-template-columns: 1fr; /* stack pricing cards on small screens */
    gap: 1rem;
  }
}
/* Mobile hero adjustments */
@media (max-width: 640px) {
  .hero {
    padding: 3rem 1rem; /* reduce top/bottom padding */
    text-align: center; /* center text */
  }

  .hero-inner {
    max-width: 100%; /* allow it to fit smaller screens */
    gap: 1rem;
  }

  .text-bg {
    padding: 1.5rem 1rem; /* smaller padding */
    border-radius: 16px; /* optional: slightly smaller */
  }

  .hero h1 {
    font-size: 1.8rem; /* smaller heading */
    line-height: 1.2; 
  }

  .hero p {
    font-size: 0.95rem; /* smaller paragraph */
  }

  .cta {
    flex-direction: column; /* stack buttons */
    gap: 0.6rem;
  }

  .trust img {
    height: 22px; /* scale down partner badges */
  }

  .trust small {
    font-size: 0.75rem;
  }

  .hero-bg {
    object-fit: cover;
    width: 100%;
    height: auto;
    opacity: 0.35;
  }
}

/* Animations */
@keyframes floatBg {
  from { transform: scale(1.05) translateY(0); }
  to   { transform: scale(1.1) translateY(-20px); }
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Subtle flicker effect for neon realism */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }
  20%, 22%, 24%, 55% {
    opacity: 0.85; /* brief flicker */
  }
}
@keyframes btnShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}