/* Shop Spot template - base + responsive */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ss {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background: #ffffff;
  color: #0f1729;
}
.ss a { color: inherit; text-decoration: none; }
.ss h1, .ss h2, .ss h3 { font-family: 'Montserrat', sans-serif; margin: 0; }
.ss button { font-family: 'Montserrat', sans-serif; cursor: pointer; }
.ss img { max-width: 100%; display: block; }

/* ---- Header ---- */
.ss-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 22px 80px; border-bottom: 1px solid #eceff4; position: sticky; top: 0;
  background: #ffffff; z-index: 50;
}
.ss-logo { display: flex; align-items: center; gap: 10px; }
.ss-logo-text { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; font-family: 'Montserrat', sans-serif; }
.ss-nav { display: flex; align-items: center; gap: 40px; }
.ss-nav a { font-size: 15px; font-weight: 500; color: #4b5468; }
.ss-nav a.is-active { font-weight: 600; color: #0f1729; }
.ss-header-right { display: flex; align-items: center; gap: 24px; }
.ss-lang { font-size: 14px; font-weight: 600; color: #4b5468; }
.ss-btn {
  display: inline-flex; align-items: center; gap: 10px; background: #2e5fec; color: #ffffff;
  font-size: 15px; font-weight: 700; letter-spacing: 0.01em; padding: 14px 26px; border-radius: 999px; border: none;
  white-space: nowrap; line-height: 1;
}
.ss-btn:hover { background: #1e46c9; }
.ss-mobile-toggle { display: none; }

/* ---- Hero ---- */
.ss-hero { position: relative; overflow: hidden; padding: 96px 80px 130px; background: linear-gradient(180deg, #f2f6ff 0%, #ffffff 78%); }
.ss-hero-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; position: relative; }
.ss-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: #2e5fec; }
.ss-h1 { font-size: 54px; line-height: 1.14; font-weight: 700; color: #0f1729; max-width: 560px; }
.ss-hero-visual { position: relative; height: 520px; }

/* ---- Sections shared ---- */
.ss-section { padding: 110px 80px; }
.ss-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 48px; }
.ss-h2 { font-size: 38px; font-weight: 700; color: #0f1729; line-height: 1.2; }

/* ---- Solutions grid ---- */
.ss-solutions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ss-card { border-radius: 22px; padding: 36px; display: flex; flex-direction: column; gap: 18px; min-height: 300px; }

/* ---- Projects grid ---- */
.ss-projects-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; }
.ss-project-feature-body { display: flex; gap: 24px; align-items: flex-start; }

/* ---- Steps ---- */
.ss-steps-wrap { display: grid; grid-template-columns: 0.9fr 1.6fr; gap: 56px; align-items: flex-start; }
.ss-steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; position: relative; }
.ss-steps-line { position: absolute; top: 26px; left: 6%; right: 6%; height: 1px; border-top: 2px dashed #dbe2ef; }

/* ---- CTA ---- */
.ss-cta { position: relative; overflow: hidden; padding: 90px 80px; background: #0b1730; }
.ss-cta-inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 40px; position: relative; }

/* ---- Footer ---- */
.ss-footer { padding: 56px 80px 40px; background: #ffffff; }
.ss-footer-row { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid #eceff4; }
.ss-footer-nav { display: flex; gap: 28px; padding-top: 6px; }
.ss-footer-nav a { font-size: 13px; font-weight: 600; color: #4b5468; }

/* =======================================================
   Responsive
   ======================================================= */
@media (max-width: 1180px) {
  .ss-header, .ss-hero, .ss-section, .ss-cta { padding-left: 40px; padding-right: 40px; }
  .ss-footer { padding-left: 40px; padding-right: 40px; }
  .ss-h1 { font-size: 44px; }
}

@media (max-width: 980px) {
  .ss-nav { display: none; }
  .ss-hero-inner { grid-template-columns: 1fr; }
  .ss-hero-visual { display: none; }
  .ss-solutions-grid, .ss-projects-grid { grid-template-columns: 1fr; }
  .ss-steps-wrap { grid-template-columns: 1fr; }
  .ss-steps-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .ss-steps-line { display: none; }
  .ss-section-head { flex-direction: column; align-items: flex-start; }
  .ss-cta-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .ss-footer-row { flex-wrap: wrap; row-gap: 20px; }
}

@media (max-width: 640px) {
  .ss-header, .ss-hero, .ss-section, .ss-cta, .ss-footer { padding-left: 20px; padding-right: 20px; }
  .ss-hero { padding-top: 48px; padding-bottom: 64px; }
  .ss-section { padding-top: 64px; padding-bottom: 64px; }
  .ss-h1 { font-size: 34px; }
  .ss-h2 { font-size: 28px; }
  .ss-lang { display: none; }
  .ss-btn { padding: 10px 16px; font-size: 13px; }
  .ss-steps-grid { grid-template-columns: 1fr; }
}