@import "_layout.css";
@import "_header.css";
@import "_footer.css";
@import "_inputs.css";
@import "_typography.css";
@import "_components.css";
@import "_buttons.css";
@import "_cards.css";
@import "_slider.css";
@import "_icons.css";
@import "_hero.css";
@import "_utility.css";

:root {
  /* Brand */
  --brand-10:#EBF2FA;
  --brand-25: #ddebfe;
  --brand-100: #94c0fa;
  --brand-400: #2b82f1;
  --brand-500: #116fe4;
  --brand-600: #105fbf;
  --brand-700: #0f4f9a;

  /* Text */
  --text-primary: #181d27;
  --text-secondary: #414651;
  --text-tertiary: #535862;
  --text-quaternary: #717680;
  --text-disabled: #717680;
  --text-white: #ffffff;
  --text-body: #4b5563;

  --link-color:var(--brand-700);

  /* Surfaces */
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-quaternary: #e9eaeb;
  --bg-brand-solid: #105fbf;
  --bg-disabled:var(--bg-quaternary);


  /* Borders */
  --border-primary: #d5d7da;
  --border-brand: #105fbf;
  --border-disabled:#E9EAEB;

  /* Gray scale */
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-300: #d5d7da;
  --gray-400: #a4a7ae;
  --gray-600: #535862;
  --gray-800: #252b37;

  /* Status */
  --success-500: #17b26a;
  --success-100: #dcfae6;
  --warning-100:#FEF0C7;
  --warning-600: #dc6803;
  --error-900: #7A271A;
  --error-800: #912018;
  --error-700: #B42318;
  --error-600: #D92D20;
  --error-500: #f04438;
  --error-400: #F97066;
  --error-300: #FDA29B;
  --error-200: #FECDCA;
  --error-100: #FEE4E2;
  --error-50: #FEF3F2;
  --green-dot: #4ade80;

  /* Utility Colors */
  --color-green-100:#D3F8DF;
  --color-green-light-100:#E3FBCC; 
  --color-teal-100:#CCFBEF;
  --color-cyan-100:#CFF9FE;
  --color-purple-100:#EBE9FE;
  --color-orange-dark-100:#FFE6D5; 

/* Typography */
  --display-2xl: 4.5rem;   /* 72px */
  --display-xl: 3.75rem;   /* 60px */
  --display-lg: 3rem;      /* 48px */
  --display-md: 2.25rem;   /* 36px */
  --display-sm: 1.875rem;  /* 30px */
  --display-xs: 1.5rem;    /* 24px */
  --text-xl: 1.25rem;      /* 20px */
  --text-lg: 1.125rem;     /* 18px */
  --text-md: 1rem;         /* 16px */
  --text-sm: 0.875rem;     /* 14px */
  --text-xs: 0.75rem;      /* 12px */

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Spacing */
  --space-xxs: 0.125rem;  /* 2px */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.375rem;   /* 6px */
  --space-md: 0.5rem;     /* 8px */
  --space-lg: 0.75rem;    /* 12px */
  --space-xl: 1rem;       /* 16px */
  --space-2xl: 1.25rem;   /* 20px */
  --space-3xl: 1.5rem;    /* 24px */
  --space-4xl: 2rem;      /* 32px */
  --space-6xl: 4rem;      /* 64px */
  --space-7xl: 5rem;      /* 80px */

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
  --shadow-sm: 0 1px 2px -1px rgba(10, 13, 18, 0.1), 0 1px 3px 0 rgba(10, 13, 18, 0.1);
  --shadow-md: 0 2px 4px -2px rgba(10, 13, 18, 0.06), 0 4px 6px -1px rgba(10, 13, 18, 0.1);
  --shadow-lg: 0 2px 2px -1px rgba(10, 13, 18, 0.04), 0 4px 6px -2px rgba(10, 13, 18, 0.03), 0 12px 16px -4px rgba(10, 13, 18, 0.08);

  /* Transitions */
  --transition-hover: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container: 1170px;
  --gutter: 24px;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

}

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight:400;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  display:flex;
  flex-direction: column;
}

img, svg {
  display: block;
  max-width: 100%;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

.plan--basic {
  color:var(--gray-600);
}
.plan--business {
  color:var(--brand-600);
}
.plan--partner {
  color:var(--warning-600);
}
.text--xs {
  font-size:var(--text-xs);
}
.text--sm {
  font-size:var(--text-sm);
}
.align-center {
  align-self:center;
}
.color--brand {
  color:var(--brand-600);
}
.space-between {
  display:flex;
  justify-content:space-between;
}

/* monitoring.svg row animations */
@keyframes svg-row-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.svg-row {
  opacity: 0;
}

.in-view .svg-row {
  animation: svg-row-in 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.in-view .svg-row--1 { animation-delay: 0.2s; }
.in-view .svg-row--2 { animation-delay: 0.7s; }
.in-view .svg-row--3 { animation-delay: 1.2s; }
.in-view .svg-row--4 { animation-delay: 1.7s; }
.in-view .svg-row--5 { animation-delay: 2.2s; }

/* marketshare.svg pie segment animations */
@keyframes pie-seg-1 { from { stroke-dasharray: 0 314; } to { stroke-dasharray: 110 204; } }
@keyframes pie-seg-2 { from { stroke-dasharray: 0 314; } to { stroke-dasharray:  70 244; } }
@keyframes pie-seg-3 { from { stroke-dasharray: 0 314; } to { stroke-dasharray:  50 264; } }
@keyframes pie-seg-4 { from { stroke-dasharray: 0 314; } to { stroke-dasharray:  84 230; } }

.pie-seg { stroke-dasharray: 0 314; }

.in-view .pie-seg--1 { animation: pie-seg-1 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.in-view .pie-seg--2 { animation: pie-seg-2 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.in-view .pie-seg--3 { animation: pie-seg-3 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.in-view .pie-seg--4 { animation: pie-seg-4 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

/* monitoring-panel.svg progress bar animations */
@keyframes progress-fill-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.progress-fill {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
}

.in-view .progress-fill {
  animation: progress-fill-in 1s linear(
    0, 0.071, 0.230, 0.418, 0.596, 0.745, 0.861, 0.943, 0.994,
    1.024, 1.037, 1.039, 1.035, 1.029, 1.021, 1.014, 1.009,
    1.005, 1.002, 1, 1
  ) forwards;
}

.in-view .progress-fill--1 { animation-delay: 0.3s; }
.in-view .progress-fill--2 { animation-delay: 0.6s; }
.in-view .progress-fill--3 { animation-delay: 0.9s; }