/* ============================================
   CAMBAY SOLUTIONS — PAGE TEMPLATES CSS
   Contact | Service | Solution
============================================ */

/* ═══════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════ */

/* Info Cards Row */
.contact-info-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  height: 100%;
  transition: all 0.35s;
  position: relative;
  overflow: hidden;
}
.contact-info-card::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--sky));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s ease;
}
.contact-info-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px var(--shadow); }
.contact-info-card:hover::after { transform: scaleX(1); }
.contact-info-card.featured {
  background: linear-gradient(135deg, var(--navy-d), var(--navy));
  border-color: transparent;
}
.contact-info-card.featured h5 { color: #fff; }
.contact-info-card.featured p  { color: rgba(255,255,255,0.55); }
.contact-info-card.featured::after { background: rgba(255,255,255,0.3); }
.cic-icon {
  width: 64px; height: 64px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin: 0 auto 18px;
}
.contact-info-card h5 { font-size: 17px; font-weight: 700; color: var(--navy-d); margin-bottom: 8px; }
.contact-info-card p  { font-size: 13px; color: var(--muted); margin-bottom: 14px; line-height: 1.6; }
.cic-link {
  font-size: 14px; font-weight: 700; color: var(--navy);
  text-decoration: none; transition: 0.2s;
}
.cic-link:hover { color: var(--red); }

/* Contact Form */
.contact-form-wrap { }

.cambay-contact-form .row { }
.cf-group { margin-bottom: 4px; }
.cf-group label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--navy-d); margin-bottom: 8px;
}
.cf-group label span { color: var(--red); }
.cf-group input,
.cf-group select,
.cf-group textarea {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  color: var(--text);
  font-family: 'Sora', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  -webkit-appearance: none;
}
.cf-group input::placeholder,
.cf-group textarea::placeholder { color: var(--light-muted); }
.cf-group input:focus,
.cf-group select:focus,
.cf-group textarea:focus {
  border-color: var(--navy);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(48,66,118,0.07);
}
.cf-group textarea { resize: vertical; min-height: 130px; }
.cf-group select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7b9e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

.cf-checkbox {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 4px;
}
.cf-checkbox input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--navy); cursor: pointer; }
.cf-checkbox label { font-size: 13px; color: var(--muted); cursor: pointer; line-height: 1.6; }
.cf-checkbox label a { color: var(--navy); font-weight: 600; }

/* Office Card */
.contact-office-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
}
.contact-office-card h5 {
  font-size: 15px; font-weight: 700; color: var(--navy-d);
  margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
}
.office-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 0;
}
.office-flag {
  font-size: 28px; flex-shrink: 0; line-height: 1;
}
.office-item strong { display: block; font-size: 14px; font-weight: 700; color: var(--navy-d); margin-bottom: 4px; }
.office-item span { font-size: 13px; color: var(--muted); line-height: 1.7; }
.office-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* Hours Card */
.contact-hours-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
}
.contact-hours-card h5 {
  font-size: 15px; font-weight: 700; color: var(--navy-d);
  margin-bottom: 18px; display: flex; align-items: center; gap: 8px;
}
.hours-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--muted);
}
.hours-row:last-of-type { border-bottom: none; }
.hours-val { font-weight: 700; color: var(--navy-d); }
.muted-val { color: var(--light-muted) !important; }
.hours-badge {
  margin-top: 16px; background: var(--white);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; font-size: 12px; font-weight: 600;
  color: var(--navy); display: flex; align-items: center; gap: 8px;
}

/* Social Card */
.contact-social-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
}
.contact-social-card h5 { font-size: 15px; font-weight: 700; color: var(--navy-d); margin-bottom: 16px; }
.contact-socials { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 10px; font-size: 13px; font-weight: 600;
  text-decoration: none; transition: all 0.2s; border: 1.5px solid var(--border);
}
.cs-btn.linkedin  { color: #0a66c2; } .cs-btn.linkedin:hover  { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.cs-btn.twitter   { color: #000; }    .cs-btn.twitter:hover   { background: #000; color: #fff; border-color: #000; }
.cs-btn.facebook  { color: #1877f2; } .cs-btn.facebook:hover  { background: #1877f2; color: #fff; border-color: #1877f2; }
.cs-btn.youtube   { color: #ff0000; } .cs-btn.youtube:hover   { background: #ff0000; color: #fff; border-color: #ff0000; }

/* Expect Steps */
.expect-step {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 20px; padding: 32px 24px; text-align: center;
  height: 100%; transition: 0.3s; position: relative; overflow: hidden;
}
.expect-step:hover { transform: translateY(-6px); box-shadow: 0 20px 40px var(--shadow); }
.es-num {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  color: var(--light-muted); letter-spacing: 2px; margin-bottom: 14px;
}
.es-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--navy), var(--navy-l));
  color: #fff; font-size: 22px; display: flex;
  align-items: center; justify-content: center; margin: 0 auto 16px;
}
.expect-step h5 { font-weight: 700; color: var(--navy-d); font-size: 15px; margin-bottom: 8px; }
.expect-step p  { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; }

/* ═══════════════════════════════════════════
   SERVICE PAGE
═══════════════════════════════════════════ */

.service-hero { padding-bottom: 100px; }
.service-blob {
  position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none;
}
.service-blob.blob-1 { width: 500px; height: 500px; background: rgba(8,145,178,0.1); top: -150px; right: -100px; }
.service-blob.blob-2 { width: 300px; height: 300px; background: rgba(217,33,41,0.06); bottom: -80px; left: 5%; }

/* Service Hero Card */
.service-hero-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(20px);
  border-radius: 24px; padding: 36px;
  text-align: center;
}
.shc-icon {
  width: 80px; height: 80px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; margin: 0 auto 20px;
}
.service-hero-card h4 { color: #fff; font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.service-hero-card p  { color: rgba(255,255,255,0.5); font-size: 13px; margin-bottom: 24px; }
.shc-stats { display: flex; gap: 0; margin-bottom: 24px; background: rgba(255,255,255,0.07); border-radius: 14px; overflow: hidden; }
.shc-stat  { flex: 1; padding: 16px 10px; text-align: center; }
.shc-divider { width: 1px; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.shc-num   { display: block; font-size: 22px; font-weight: 800; color: #fff; line-height: 1; }
.shc-lbl   { display: block; font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 4px; }
.shc-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px; padding: 8px 18px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8);
}

/* Tech Pills */
.tech-pill {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 14px;
  text-align: center; transition: 0.3s; cursor: default;
  height: 100%;
}
.tech-pill:hover { transform: translateY(-4px); box-shadow: 0 16px 36px var(--shadow); border-color: rgba(48,66,118,0.15); }
.tech-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin: 0 auto 10px;
}
.tech-pill span { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.3; display: block; }

/* FAQ */
.service-faq { }
.faq-item {
  border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 10px; overflow: hidden; transition: box-shadow 0.2s;
}
.faq-item.open { box-shadow: 0 8px 24px var(--shadow); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--navy-d);
  background: var(--white); gap: 16px;
  user-select: none;
}
.faq-q:hover { background: var(--bg); }
.faq-icon { font-size: 16px; color: var(--navy); flex-shrink: 0; transition: transform 0.3s; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  padding: 0 22px;
  font-size: 14px; color: var(--muted); line-height: 1.8;
  background: var(--bg);
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.open .faq-a { max-height: 200px; padding: 16px 22px; }

/* ═══════════════════════════════════════════
   SOLUTION PAGE
═══════════════════════════════════════════ */

.solution-hero { padding-bottom: 100px; }
.solution-hero-accent {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 700px 500px at 100% 50%, rgba(8,145,178,0.12), transparent 70%);
}

/* Partner chip */
.solution-partner-chip {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px; padding: 8px 20px;
  margin-bottom: 20px;
}
.solution-partner-chip span { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 1px; }

/* Hero stats */
.solution-hero-stats {
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; overflow: hidden; width: fit-content;
}
.shs-item { padding: 14px 24px; text-align: center; }
.shs-sep  { width: 1px; background: rgba(255,255,255,0.1); align-self: stretch; flex-shrink: 0; }
.shs-num  { display: block; font-size: 24px; font-weight: 800; color: #fff; line-height: 1; }
.shs-num sup { font-size: 13px; color: rgba(255,255,255,0.5); }
.shs-lbl  { display: block; font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 4px; }

/* Intro band */
.solution-intro-band {
  background: var(--navy);
  padding: 56px 0;
  position: relative; z-index: 1;
}
.solution-intro-band h3 { font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 16px; }
.solution-intro-band p  { color: rgba(255,255,255,0.55); font-size: 15px; line-height: 1.8; }

.sib-stat {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 22px 20px; height: 100%;
}
.sib-num { font-size: 32px; font-weight: 800; line-height: 1; margin-bottom: 6px; }
.sib-lbl { font-size: 12px; color: rgba(255,255,255,0.45); }

/* Implementation steps */
.solution-steps { }
.ss-item {
  display: flex; gap: 16px; align-items: flex-start;
  margin-bottom: 24px;
}
.ss-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: var(--navy); margin-top: 6px;
  box-shadow: 0 0 0 4px rgba(48,66,118,0.12);
}
.ss-item strong { display: block; font-size: 15px; font-weight: 700; color: var(--navy-d); margin-bottom: 6px; }
.ss-item p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; }

/* Value Cards */
.value-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 20px; padding: 32px 24px; height: 100%;
  text-align: center; transition: 0.35s;
  position: relative; overflow: hidden;
}
.value-card::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--sky));
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s;
}
.value-card:hover { transform: translateY(-8px); box-shadow: 0 28px 56px var(--shadow); }
.value-card:hover::after { transform: scaleX(1); }
.vc-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin: 0 auto 16px;
}
.vc-num  { font-size: 40px; font-weight: 900; color: var(--navy-d); line-height: 1; margin-bottom: 6px; }
.vc-title { font-size: 15px; font-weight: 700; color: var(--navy-d); margin-bottom: 10px; }
.value-card p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; }

/* Solution Testimonial */
.solution-testimonial {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 24px; padding: 48px; text-align: center;
  position: relative;
}
.solution-testimonial::before {
  content: '"'; position: absolute; top: 20px; left: 36px;
  font-size: 120px; font-weight: 900; color: rgba(48,66,118,0.06);
  line-height: 1; font-family: Georgia, serif;
}
.st-stars { color: #f59e0b; font-size: 18px; margin-bottom: 20px; }
.solution-testimonial blockquote {
  font-size: 18px; color: var(--navy-d); line-height: 1.8;
  font-style: italic; font-weight: 500; margin-bottom: 28px;
  position: relative; z-index: 1;
}
.st-author { display: flex; align-items: center; gap: 16px; justify-content: center; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .solution-hero-stats { flex-wrap: wrap; width: 100%; }
  .shc-stats { flex-direction: row; }
  .contact-office-card, .contact-hours-card, .contact-social-card { margin-bottom: 16px; }
  .solution-intro-band { padding: 40px 0; }
  .solution-testimonial { padding: 32px 24px; }
  .solution-testimonial blockquote { font-size: 16px; }
}