/* ============ CAMEC website UI kit — layout & section styles ============ */
.ck-scroll { height: 100vh; overflow-y: auto; scroll-behavior: smooth; background: var(--surface-page); }
.ck-wrap { font-family: var(--font-body); }
.ck-inner, .ck-section__inner, .ck-trust__inner, .ck-approach__inner,
.ck-contact__inner, .ck-footer__inner, .ck-hero__inner {
  width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter);
}

/* ---------- Header ---------- */
.ck-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.ck-header.is-scrolled { border-bottom-color: var(--border-subtle); box-shadow: var(--shadow-sm); }
.ck-header__bar { max-width: var(--container-max); margin-inline: auto; padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 28px; }
.ck-header__brand { display: flex; align-items: center; }
.ck-header__nav { display: flex; gap: 28px; margin-left: 8px; }
.ck-header__link { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--slate-700);
  position: relative; padding: 4px 0; }
.ck-header__link::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--azure-600); border-radius: 2px; transition: width var(--dur-base) var(--ease-out); }
.ck-header__link:hover { color: var(--navy-900); text-decoration: none; }
.ck-header__link:hover::after { width: 100%; }
.ck-header__link.is-active { color: var(--azure-600); }
.ck-header__link.is-active::after { width: 100%; }
.ck-header__actions { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.ck-header__phone { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm);
  font-weight: var(--fw-bold); color: var(--navy-900); white-space: nowrap; }
.ck-header__phone:hover { color: var(--azure-600); text-decoration: none; }
.ck-header__phone svg { color: var(--azure-600); }
.ck-header__burger { display: none; border: 0; background: transparent; color: var(--navy-900); cursor: pointer; padding: 4px; }
.ck-drawer { position: fixed; inset: 0; z-index: 60; background: #fff; padding: 20px var(--gutter);
  display: flex; flex-direction: column; gap: 26px; animation: ckFade var(--dur-base) var(--ease-out); }
.ck-drawer__top { display: flex; align-items: center; justify-content: space-between; }
.ck-drawer__nav { display: flex; flex-direction: column; gap: 4px; }
.ck-drawer__link { font-family: var(--font-display); font-size: 26px; font-weight: var(--fw-bold);
  color: var(--navy-900); padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.ck-drawer__link:hover { text-decoration: none; color: var(--azure-600); }
@keyframes ckFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Hero ---------- */
.ck-hero { position: relative; overflow: hidden; background: var(--navy-gradient); color: #fff; }
.ck-hero__watermark { position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  width: 560px; opacity: 0.05; pointer-events: none; }
.ck-hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px;
  align-items: center; padding-top: 90px; padding-bottom: 96px; }
.ck-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-overline);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-overline); text-transform: uppercase;
  color: var(--azure-400); background: rgba(91,181,255,0.10); border: 1px solid rgba(91,181,255,0.22);
  padding: 8px 14px; border-radius: var(--radius-pill); }
.ck-hero__title { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display);
  color: #fff; margin: 22px 0 0; text-wrap: balance; }
.ck-hero__title span { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ck-hero__lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text-on-dark);
  margin: 22px 0 0; max-width: 540px; }
.ck-hero__cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.ck-hero__proof { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 34px 0 0; padding: 0; }
.ck-hero__proof li { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); color: #fff; }
.ck-hero__proof svg { color: var(--azure-400); }

/* Hero risk card */
.ck-hero__card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-xl); padding: 28px; backdrop-filter: blur(6px); box-shadow: var(--shadow-xl); }
.ck-hero__cardhead { display: flex; align-items: center; justify-content: space-between; }
.ck-hero__cardtag { font-size: var(--fs-overline); font-weight: var(--fw-bold); letter-spacing: var(--ls-overline);
  text-transform: uppercase; color: var(--text-on-dark); }
.ck-hero__gauge { display: flex; flex-direction: column; align-items: center; padding: 22px 0 8px; }
.ck-hero__gaugeval { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 76px;
  line-height: 1; color: #fff; }
.ck-hero__gaugeval span { font-size: 26px; color: var(--azure-400); }
.ck-hero__gaugelabel { color: var(--success-100); font-weight: var(--fw-bold); font-size: var(--fs-sm);
  background: rgba(30,158,106,0.22); padding: 5px 14px; border-radius: var(--radius-pill); margin-top: 10px; }
.ck-hero__bars { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.ck-hero__barhead { display: flex; justify-content: space-between; font-size: var(--fs-sm); margin-bottom: 6px; }
.ck-hero__barhead span { color: var(--text-on-dark); }
.ck-hero__barhead b { color: #fff; }
.ck-hero__track { height: 8px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.12); overflow: hidden; }
.ck-hero__track i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--brand-gradient);
  transform-origin: left; animation: ckGrow 1s var(--ease-out) both; }
@keyframes ckGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Trust bar ---------- */
.ck-trust { background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); }
.ck-trust__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-top: 40px; padding-bottom: 40px; }
.ck-trust__div { width: 1px; height: 56px; background: var(--border-subtle); flex: none; }

/* ---------- Generic section ---------- */
.ck-section { padding-block: var(--section-y); background: var(--surface-page); }
.ck-section__inner { display: flex; flex-direction: column; gap: 48px; align-items: center; }
.ck-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; }

/* ---------- Approach (navy) ---------- */
.ck-approach { background: var(--navy-900); padding-block: var(--section-y); position: relative; }
.ck-approach__inner { display: flex; flex-direction: column; gap: 48px; }
.ck-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ck-step { background: rgba(255,255,255,0.04); border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg); padding: 26px 24px; transition: border-color var(--dur-base), background var(--dur-base); }
.ck-step:hover { border-color: rgba(91,181,255,0.4); background: rgba(91,181,255,0.06); }
.ck-step__n { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 34px;
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ck-step__t { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-bold);
  color: #fff; margin: 14px 0 8px; }
.ck-step__d { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-on-dark); margin: 0; }

/* ---------- Contact ---------- */
.ck-contact { padding-block: var(--section-y); background: var(--surface-page); }
.ck-contact__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.ck-contact__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold);
  color: var(--navy-900); margin: 14px 0 0; line-height: var(--lh-heading); }
.ck-contact__lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text-muted); margin: 16px 0 0; }
.ck-contact__list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 16px; }
.ck-contact__list li { display: flex; align-items: center; gap: 14px; font-size: var(--fs-body);
  font-weight: var(--fw-semibold); color: var(--navy-900); }
.ck-contact__ic { width: 44px; height: 44px; border-radius: var(--radius-md); flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--azure-600);
  background: var(--azure-50); border: 1px solid var(--azure-100); }
.ck-form { display: flex; flex-direction: column; gap: 16px; }
.ck-form__error { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--danger-600); background: var(--danger-100); border: 1px solid var(--danger-500); border-radius: var(--radius-sm); padding: 11px 14px; }
.ck-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ck-contact__done { text-align: center; padding: 22px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ck-contact__donic { width: 70px; height: 70px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; background: var(--success-500); box-shadow: 0 10px 24px rgba(30,158,106,0.3); }
.ck-contact__done h3 { font-family: var(--font-display); color: var(--navy-900); margin: 6px 0 0; }
.ck-contact__done p { color: var(--text-muted); margin: 0 0 8px; max-width: 320px; }

/* ---------- Footer ---------- */
.ck-footer { background: var(--navy-950); color: var(--text-on-dark); }
.ck-footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
  padding-top: 64px; padding-bottom: 48px; }
.ck-footer__brand p { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--slate-400); margin: 18px 0 0; }
.ck-footer__col h4 { font-family: var(--font-display); font-size: var(--fs-sm); color: #fff;
  text-transform: uppercase; letter-spacing: var(--ls-overline); margin: 0 0 16px; }
.ck-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.ck-footer__col a { font-size: var(--fs-sm); color: var(--slate-400); }
.ck-footer__col a:hover { color: var(--azure-400); text-decoration: none; }
.ck-footer__bar { border-top: 1px solid rgba(255,255,255,0.08); padding: 22px var(--gutter);
  max-width: var(--container-max); margin-inline: auto; display: flex; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--slate-500); flex-wrap: wrap; gap: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .ck-header__nav, .ck-header__actions { display: none; }
  .ck-header__burger { display: inline-flex; margin-left: auto; }
  .ck-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .ck-services { grid-template-columns: 1fr 1fr; }
  .ck-steps { grid-template-columns: 1fr 1fr; }
  .ck-contact__inner { grid-template-columns: 1fr; }
  .ck-trust__inner { flex-wrap: wrap; justify-content: flex-start; gap: 28px 40px; }
  .ck-trust__div { display: none; }
  .ck-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .ck-services, .ck-steps, .ck-form__row { grid-template-columns: 1fr; }
  .ck-footer__inner { grid-template-columns: 1fr; }
}