:root {

  /* C-TRANS24 BRAND */
  --ct-navy: #061d35;
  --ct-navy-light: #102b49;
  --ct-orange: #ff7a00;
  --ct-orange-light: #ffad5c;

  --ct-white: #ffffff;
  --ct-background: #f4f7fa;
  --ct-surface: #ffffff;

  --ct-text: #102033;
  --ct-muted: #64748b;
  --ct-border: rgba(255,255,255,.15);


  /* TYPOGRAPHY */
  --ct-font:
    Inter,
    Arial,
    Helvetica,
    sans-serif;


  /* SPACING */
  --ct-space-xs: .5rem;
  --ct-space-sm: 1rem;
  --ct-space-md: 2rem;
  --ct-space-lg: 4rem;
  --ct-space-xl: 6rem;


  /* RADIUS */
  --ct-radius-sm: 6px;
  --ct-radius-md: 14px;
  --ct-radius-lg: 24px;


  /* SHADOW */
  --ct-shadow:
    0 20px 50px rgba(0,0,0,.18);


  /* CONTAINER */
  --ct-container:
    1280px;
}


* {
  box-sizing:border-box;
}


body {
  margin:0;
  font-family:var(--ct-font);
  color:var(--ct-text);
  background:var(--ct-background);
}


.ct-container {
  width:min(
    var(--ct-container),
    calc(100% - 40px)
  );
  margin:auto;
}


.ct-button-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:
  14px 28px;

  border-radius:
  var(--ct-radius-sm);

  background:
  var(--ct-orange);

  color:
  var(--ct-white);

  font-weight:700;
  text-decoration:none;

  transition:.2s ease;
}


.ct-button-primary:hover {
  background:
  var(--ct-orange-light);
}


.ct-panel {
  background:
  var(--ct-surface);

  border-radius:
  var(--ct-radius-md);

  box-shadow:
  var(--ct-shadow);
}


.ct-section {
  padding:
  var(--ct-space-xl) 0;
}