:root {
  --cc-bg:#f7f7f5;
  --cc-ink:#111318;
  --cc-muted:#6e7480;
  --cc-primary:#315efb;
  --cc-surface:#e5ecff;
  --cc-white:#fff;
}

.cc-page { background:var(--cc-bg); color:var(--cc-ink); }
.cc-shell { width:1244px; max-width:calc(100% - 196px); margin-inline:auto; }
.cc-kicker { margin:0; color:var(--cc-muted); font:500 14px/16px "Gilroy",sans-serif; text-transform:uppercase; }

.cc-hero {
  width:1242px; max-width:calc(100% - 200px); min-height:661px;
  margin:66px auto 0; position:relative;
}
.cc-hero-copy { width:610px; display:flex; flex-direction:column; gap:32px; }
.cc-hero-title-group { display:flex; flex-direction:column; gap:38px; }
.cc-hero h1 { margin:0; width:610px; font:600 76px/82px "Gilroy",sans-serif; }
.cc-hero-lead { margin:0; width:610px; color:var(--cc-primary); font:600 24px/32px "Gilroy",sans-serif; }
.cc-tags { margin:0; color:var(--cc-muted); font:400 16px/24px "Gilroy",sans-serif; }

.cc-hero-visual { position:absolute; left:630px; top:0; width:660px; height:590px; }
.cc-hero-visual figure { position:absolute; margin:0; overflow:hidden; background:#fff; box-shadow:0 16px 32px -4px rgba(12,12,13,.1),0 4px 4px -4px rgba(12,12,13,.05); }
.cc-hero-visual img { width:100%; height:100%; display:block; object-fit:cover; }
.cc-hero-top { left:263px; top:48px; width:391px; height:115px; border-radius:8px; z-index:3; }
.cc-hero-message { left:21px; top:132px; width:605px; height:340px; border-radius:22px; z-index:2; }
.cc-hero-list { left:182px; top:290px; width:478px; height:294px; border-radius:22px; z-index:4; }

.cc-facts { margin-top:0; min-height:172px; }
.cc-facts-grid { margin-top:32px; display:grid; grid-template-columns:339px 198px 459px; grid-auto-rows:50px; gap:24px 35px; }
.cc-fact { display:flex; flex-direction:column; font:400 18px/28px "Gilroy",sans-serif; }
.cc-fact strong { font-weight:600; line-height:22px; }
.cc-fact-type { grid-column:1; grid-row:1; }
.cc-fact-area { grid-column:3; grid-row:1; }
.cc-facts-grid .cc-fact:nth-child(2){grid-column:2;grid-row:1;}
.cc-facts-grid .cc-fact:nth-child(4){grid-column:1;grid-row:2;width:254px;}
.cc-facts-grid .cc-fact:nth-child(5){grid-column:2;grid-row:2;width:97px;}

.cc-context { margin-top:130px; min-height:644px; position:relative; }
.cc-context-copy { width:474px; }
.cc-context-text { margin-top:32px; }
.cc-context h2 { margin:0; width:516px; font:600 40px/48px "Gilroy",sans-serif; }
.cc-context-text p { margin:32px 0 0; width:474px; font:400 18px/28px "Gilroy",sans-serif; }

.cc-flow { position:absolute; left:632px; top:245px; width:612px; }
.cc-flow-row { display:flex; align-items:center; width:612px; }
.cc-flow-card {
  width:112px; height:82px; padding:20px 8px;
  border-radius:18px; background:#fff; display:flex; flex-direction:column;
  justify-content:center; gap:4px; text-align:center;
}
.cc-flow-card strong { font:500 11px/16px "Gilroy",sans-serif; }
.cc-flow-card small { color:var(--cc-muted); font:500 10px/14px "Gilroy",sans-serif; }
.cc-flow-link { position:relative; width:13px; flex:0 0 13px; height:2px; background:var(--cc-primary); opacity:.72; }
.cc-flow-link::after { content:""; position:absolute; right:0; top:50%; width:5px; height:5px; border-top:1.5px solid var(--cc-primary); border-right:1.5px solid var(--cc-primary); transform:translateY(-50%) rotate(45deg); }

.cc-flow-branches {
  position:absolute;
  left:0;
  top:82px;
  width:612px;
  height:95px;
  pointer-events:none;
  z-index:0;
}

.cc-flow-branch {
  position:absolute;
  top:0;
  height:95px;
  background:
    linear-gradient(var(--cc-primary),var(--cc-primary)) right top / 1px 48px no-repeat,
    linear-gradient(var(--cc-primary),var(--cc-primary)) left 47px / 100% 1px no-repeat,
    linear-gradient(var(--cc-primary),var(--cc-primary)) left bottom / 1px 48px no-repeat;
  opacity:.62;
}

.cc-flow-branch-1 { left:81px; width:96px; }
.cc-flow-branch-2 { left:232px; width:76px; }
.cc-flow-branch-3 { left:380px; width:51px; }
.cc-flow-branch-4 { left:523px; width:33px; }

.cc-operations {
  position:relative;
  z-index:1;
  margin-top:78px;
  width:612px;
  height:156px;
  padding:16px;
  box-sizing:border-box;
  border:1px dashed var(--cc-primary);
  border-radius:18px;
  background:var(--cc-surface);
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow:visible;
}

.cc-operations-row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  width:100%;
  height:82px;
}

.cc-operations-row > div {
  height:82px;
  padding:28px 8px 30px;
  box-sizing:border-box;
  border-radius:18px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font:500 11px/16px "Gilroy",sans-serif;
}

.cc-operations > p {
  width:100%;
  margin:0;
  color:var(--cc-primary);
  text-align:center;
  font:500 16px/24px "Gilroy",sans-serif;
}

.cc-complexity { margin-top:68px; min-height:278px; }
.cc-complexity-grid { margin-top:32px; display:grid; grid-template-columns:repeat(4,296px); gap:20px; }
.cc-info-card { min-height:230px; padding:32px 24px; border-radius:36px; background:#fff; display:flex; flex-direction:column; gap:16px; }
.cc-info-card > img { width:24px; height:24px; object-fit:contain; }
.cc-info-card h3 { margin:0; font:600 18px/22px "Gilroy",sans-serif; }
.cc-info-card p { margin:auto 0 0; font:400 15px/22px "Gilroy",sans-serif; }

.cc-solutions { margin-top:83px; min-height:1461px; }
.cc-solutions-grid { margin-top:32px; display:grid; grid-template-columns:repeat(2,612px); gap:20px; }
.cc-solution-card { width:612px; height:338px; padding:32px; border-radius:36px; background:#fff; overflow:hidden; display:grid; grid-template-columns:314px 398px; gap:26px; }
.cc-solution-copy { width:314px; display:flex; flex-direction:column; gap:8px; }
.cc-solution-number { color:var(--cc-primary); font:600 34px/42px "Gilroy",sans-serif; }
.cc-solution-card h3 { margin:0; font:600 24px/32px "Gilroy",sans-serif; }
.cc-solution-card p { margin:14px 0 0; font:400 15px/22px "Gilroy",sans-serif; }
.cc-solution-visual { width:398px; height:224px; margin:0; border:1px solid rgba(0,0,0,.03); border-radius:4px; overflow:hidden; box-shadow:0 16px 16px -8px rgba(12,12,13,.1),0 4px 4px -4px rgba(12,12,13,.05); position:relative; }
.cc-solution-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cc-solution-visual-5 img { height:245.61%; top:-.21%; }
.cc-solution-visual-6 img { width:133.66%; height:252.74%; top:.02%; left:.01%; }
.cc-solution-visual-7 img { height:190.08%; top:.12%; }

.cc-system { margin-top:127px; min-height:479px; position:relative; }
.cc-system-copy { width:612px; }
.cc-system-text { margin-top:32px; }
.cc-system h2 { margin:0; width:612px; font:600 34px/42px "Gilroy",sans-serif; }
.cc-system-text p { margin:16px 0 0; width:612px; font:400 18px/28px "Gilroy",sans-serif; }
.cc-system-visual { position:absolute; left:612px; top:30px; width:660px; height:479px; margin:0; }
.cc-system-visual img { width:100%; height:100%; display:block; object-fit:contain; }

.cc-outcome { margin-top:72px; min-height:302px; }
.cc-outcome-layout { margin-top:32px; display:grid; grid-template-columns:284px 928px; gap:32px; }
.cc-outcome-layout > h2 { margin:0; width:284px; font:600 34px/42px "Gilroy",sans-serif; }
.cc-outcome-grid { display:grid; grid-template-columns:repeat(3,296px); gap:20px; }
.cc-outcome-card { min-height:254px; padding:32px 24px; border-radius:36px; background:#fff; }
.cc-outcome-head { display:flex; gap:16px; align-items:flex-start; }
.cc-outcome-head img { width:40px; height:40px; flex:0 0 40px; }
.cc-outcome-card h3 { min-height:86px; margin:0; font:600 18px/22px "Gilroy",sans-serif; }
.cc-outcome-card p { margin:16px 0 0; font:400 15px/22px "Gilroy",sans-serif; }

.cc-page .contact { padding-top:79px; padding-bottom:100px; }

@media (max-width:1180px) {
  .cc-shell,.cc-hero { width:calc(100% - 112px); max-width:none; }
  .cc-hero { min-height:610px; }
  .cc-hero-copy { width:52%; }
  .cc-hero h1,.cc-hero-lead { width:auto; }
  .cc-hero h1 { font-size:58px; line-height:64px; }
  .cc-hero-lead { font-size:21px; line-height:29px; }
  .cc-hero-visual { left:52%; transform:scale(.78); transform-origin:top left; }

  .cc-facts-grid { grid-template-columns:repeat(3,1fr); }
  .cc-fact-type,.cc-fact-area,.cc-facts-grid .cc-fact:nth-child(n){grid-column:auto;grid-row:auto;width:auto;}

  .cc-context { min-height:700px; }
  .cc-complexity { margin-top:56px; }
  .cc-context-copy { width:40%; }
  .cc-context h2,.cc-context-text p { width:auto; }
  .cc-flow { left:43%; width:57%; transform:scale(.9); transform-origin:top left; }

  .cc-complexity-grid { grid-template-columns:repeat(2,1fr); }
  .cc-solutions-grid { grid-template-columns:1fr; }
  .cc-solutions { min-height:0; }
  .cc-solution-card { width:100%; grid-template-columns:minmax(270px,314px) 1fr; }
  .cc-solution-visual { width:100%; }

  .cc-system { min-height:520px; }
  .cc-system-copy { width:48%; }
  .cc-system h2,.cc-system-text p { width:auto; }
  .cc-system-visual { left:48%; width:58%; height:auto; aspect-ratio:660/479; }

  .cc-outcome-layout { grid-template-columns:1fr; }
  .cc-outcome-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:760px) {
  .cc-shell,.cc-hero { width:calc(100% - 32px); max-width:none; }
  .cc-hero { margin-top:52px; min-height:0; }
  .cc-hero-copy { width:100%; gap:22px; }
  .cc-hero-title-group { gap:20px; }
  .cc-hero h1 { font-size:40px; line-height:44px; }
  .cc-hero-lead { font-size:21px; line-height:27px; }
  .cc-tags { font-size:12px; line-height:18px; }
  .cc-hero-visual { position:relative; left:auto; top:auto; width:100%; height:330px; margin-top:36px; transform:none; overflow:hidden; }
  .cc-hero-top { left:48%; top:0; width:48%; height:auto; aspect-ratio:391/115; }
  .cc-hero-message { left:0; top:62px; width:92%; height:auto; aspect-ratio:605/340; }
  .cc-hero-list { left:26%; top:180px; width:74%; height:auto; aspect-ratio:478/294; }

  .cc-facts { margin-top:48px; min-height:0; }
  .cc-facts-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .cc-fact { min-width:0; font-size:13px; line-height:19px; }
  .cc-fact strong { line-height:18px; }
  .cc-fact-type,.cc-fact-area { grid-column:1/-1 !important; }

  .cc-context { margin-top:64px; min-height:0; }
  .cc-context-copy { width:100%; }
  .cc-context h2 { width:auto; font-size:32px; line-height:38px; }
  .cc-context-text p { width:auto; font-size:15px; line-height:23px; }
  .cc-flow { position:relative; left:auto; top:auto; width:100%; margin-top:36px; transform:none; }
  .cc-flow-row { width:100%; display:grid; grid-template-columns:1fr; gap:10px; }
  .cc-flow-branches { display:none; }
  .cc-flow-card { width:100%; height:auto; min-height:76px; }
  .cc-flow-link { width:2px; height:12px; margin:0 auto; }
  .cc-flow-link::after { right:50%; top:auto; bottom:0; transform:translateX(50%) rotate(135deg); }
  .cc-operations { width:100%; height:auto; min-height:0; margin-top:20px; }
  .cc-operations-row { grid-template-columns:1fr 1fr; height:auto; }
  .cc-operations-row > div { height:auto; min-height:76px; padding:20px 12px; }

  .cc-complexity { margin-top:40px; min-height:0; }
  .cc-complexity-grid { grid-template-columns:1fr; }
  .cc-info-card { min-height:0; border-radius:28px; }

  .cc-solutions { margin-top:64px; min-height:0; }
  .cc-solutions-grid { grid-template-columns:1fr; }
  .cc-solution-card { width:100%; height:auto; min-height:0; padding:26px; border-radius:28px; display:block; }
  .cc-solution-copy { width:auto; }
  .cc-solution-number { font-size:28px; line-height:34px; }
  .cc-solution-card h3 { font-size:24px; line-height:30px; }
  .cc-solution-card p { font-size:14px; line-height:21px; }
  .cc-solution-visual { width:100%; height:auto; aspect-ratio:398/224; margin-top:26px; }

  .cc-system { margin-top:64px; min-height:0; }
  .cc-system-copy { width:100%; }
  .cc-system h2 { width:auto; font-size:30px; line-height:36px; }
  .cc-system-text p { width:auto; font-size:15px; line-height:23px; }
  .cc-system-visual { position:relative; left:auto; top:auto; width:112%; height:auto; aspect-ratio:660/479; margin:28px 0 0 -6%; }

  .cc-outcome { margin-top:64px; min-height:0; }
  .cc-outcome-layout { display:block; }
  .cc-outcome-layout > h2 { width:auto; font-size:30px; line-height:36px; }
  .cc-outcome-grid { grid-template-columns:1fr; margin-top:28px; }
  .cc-outcome-card { min-height:0; border-radius:28px; }
  .cc-outcome-card h3 { min-height:0; }

  .cc-page .contact { padding-top:34px; padding-bottom:40px; }
}