/* Ortak tasarım değişkenleri — tüm sayfalarda aynı görsel sistem. */
:root {
  color-scheme:dark;
  --bg:#0b0f17;
  --deep:#080b12;
  --surface:#101620;
  --blue:#087cfa;
  --blue-light:#5aa7ff;
  --text:#f3f5f8;
  --muted:#99a3b3;
  --line:#ffffff1c;
  --max:1240px;
  --section:112px;
  --radius:6px;
  --space:24px;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:108px;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

a:focus-visible,button:focus-visible {
  outline:2px solid var(--blue-light);
  outline-offset:6px;
}

::selection {
  background:#087cfa66;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  line-height:1.15;
  font-weight:550;
  letter-spacing:-.045em;
}

h2 {
  font-size:clamp(30px,3.3vw,45px);
}

h3 {
  letter-spacing:-.025em;
}

p {
  color:var(--muted);
}

.container {
  width:min(var(--max),calc(100% - 96px));
  margin-inline:auto;
}

.section {
  padding-block:var(--section);
}

.eyebrow {
  font-size:10px;
  font-weight:650;
  letter-spacing:.19em;
  display:flex;
  align-items:center;
  gap:10px;
  color:#b3bfd0;
  margin-bottom:26px;
}

.blue-dot {
  width:6px;
  height:6px;
  display:inline-block;
  flex-shrink:0;
  border-radius:50%;
  background:var(--blue);
}

.muted {
  color:var(--muted);
}

.bright {
  color:var(--text);
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:32px;
  padding:15px 23px;
  background:var(--blue);
  border:1px solid var(--blue);
  border-radius:4px;
  color:#fff;
  font-size:14px;
  font-weight:600;
  transition:background .2s,transform .2s;
  white-space:nowrap;
}

.button:hover {
  background:#006ee4;
  transform:translateY(-2px);
}

.button span,.text-link span {
  font-size:20px;
  line-height:1;
}

.button-small {
  font-size:12px;
  padding:10px 16px;
  gap:20px;
}

.text-link {
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:22px;
}

.text-link:hover {
  color:var(--blue-light);
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  padding:12px 20px;
  background:var(--blue);
  z-index:100;
}

.skip-link:focus {
  top:10px;
}

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--deep);
  border-bottom:1px solid var(--line);
}

.header-inner {
  height:89px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.brand {
  display:block;
  width:115px;
  flex-shrink:0;
}

.brand img {
  display:block;
  width:100%;
  height:auto;
}

.main-nav {
  display:flex;
  align-items:center;
  gap:27px;
}

.main-nav>a:not(.button) {
  font-size:12px;
  color:#a9b1bf;
  transition:color .2s;
}

.main-nav>a:hover,.main-nav>.home-link {
  color:#fff!important;
}

.home-link {
  position:relative;
}

.home-link:after {
  content:"";
  position:absolute;
  width:4px;
  height:4px;
  background:var(--blue);
  border-radius:50%;
  bottom:-12px;
  left:50%;
}

.menu-toggle {
  display:none;
}

.hero {
  overflow:hidden;
  background:radial-gradient(ellipse at 82% 41%,#0d28462e,transparent 50%);
}

.hero-grid {
  min-height:688px;
  display:grid;
  grid-template-columns:1.08fr 1fr;
  align-items:center;
  gap:45px;
  padding-block:65px;
}

.hero-copy .eyebrow {
  margin-bottom:28px;
}

.hero h1 {
  font-size:clamp(44px,4.65vw,66px);
  line-height:1.075;
  letter-spacing:-.055em;
}

.hero h1 em {
  font-style:normal;
  color:var(--blue-light);
}

.hero-description {
  max-width:430px;
  margin-top:25px;
  font-size:15px;
  line-height:1.85;
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:32px;
  margin-top:32px;
}

.hero-note {
  font-size:11px;
  margin-top:29px;
  color:#8793a4;
}

.hero-note>span {
  color:var(--blue-light);
  font-size:18px;
  margin-right:8px;
}

.architecture {
  height:535px;
  position:relative;
  isolation:isolate;
  background-image:radial-gradient(#5163783b .7px,transparent .7px);
  background-size:23px 23px;
  border:1px solid #ffffff09;
  border-radius:8px;
}

.diagram-top {
  position:absolute;
  top:16px;
  left:22px;
  right:22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:Consolas,monospace;
  font-size:9px;
  letter-spacing:.13em;
  color:#8f9fb4;
}

.diagram-mark {
  font-size:25px;
  color:var(--blue-light);
}

.orbital {
  position:absolute;
  width:340px;
  height:340px;
  left:50%;
  top:50%;
  border:1px solid #5aa7ff12;
  border-radius:50%;
  transform:translate(-50%,-50%);
  z-index:-1;
}

.orbital-two {
  width:470px;
  height:470px;
  border-style:dashed;
}

.diagram-axis {
  position:absolute;
  left:50%;
  top:73px;
  height:382px;
  width:1px;
  background:linear-gradient(transparent,#087cfa9c 15%,#087cfa9c 85%,transparent);
  transform:rotate(-27deg);
}

.flow-node {
  position:absolute;
  display:flex;
  align-items:center;
  gap:14px;
  width:263px;
  min-height:70px;
  border:1px solid #3f5a7e65;
  border-radius:5px;
  background:linear-gradient(120deg,#182230,#101722);
  box-shadow:0 12px 30px #0003;
  padding:13px 16px;
}

.node-number {
  font:10px Consolas,monospace;
  color:#7192bb;
  border-right:1px solid #51637855;
  padding-right:13px;
}

.flow-node small {
  display:block;
  font-size:7px;
  letter-spacing:.16em;
  color:#a1aec0;
  margin-bottom:3px;
}

.flow-node strong {
  display:block;
  font-size:17px;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.3;
}

.node-symbol {
  margin-left:auto;
  font-size:25px;
  color:#6f9bce;
}

.node-one {
  top:69px;
  left:9%;
}

.node-two {
  top:151px;
  left:17%;
}

.node-three {
  top:233px;
  left:25%;
  background:linear-gradient(115deg,#0a4388,#113055);
  border-color:#087cfa;
  box-shadow:0 4px 34px #087cfa19;
}

.node-three .node-number,.node-three .node-symbol {
  color:#8dc1ff;
}

.node-four {
  top:315px;
  left:33%;
}

.node-five {
  top:397px;
  left:41%;
}

.diagram-bottom {
  position:absolute;
  bottom:17px;
  left:22px;
  right:22px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#8fa3bc;
  font:8px Consolas,monospace;
  letter-spacing:.07em;
}

.diagram-bottom>span:last-child {
  margin-left:auto;
  font-size:19px;
}

.focus-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  border-top:1px solid var(--line);
  padding-block:28px;
}

.focus-strip>span:first-child {
  font-size:9px;
  letter-spacing:.14em;
  color:#7d899b;
}

.focus-strip p {
  font-size:13px;
  color:#b7bfcb;
}

.strip-plus {
  color:#46607f;
  font-weight:300;
}

.problem {
  border-top:1px solid var(--line);
}

.split-heading {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:90px;
}

.problem-copy {
  font-size:15px;
  padding-top:43px;
}

.problem-copy .bright {
  margin-top:20px;
  font-weight:500;
}

.problem-line {
  display:flex;
  align-items:center;
  gap:28px;
  padding-top:40px;
  margin-top:44px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--muted);
}

.problem-line>span:nth-child(even) {
  color:#40506a;
}

.problem-line>a {
  margin-left:auto;
  color:var(--blue-light);
}

.problem-line>a span {
  padding-left:10px;
}

.system-section {
  background:var(--deep);
  border-block:1px solid var(--line);
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:55px;
}

.section-heading>p {
  font-size:14px;
  max-width:350px;
}

.system-steps {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
}

.system-steps li {
  padding:0 25px;
  border-left:1px solid var(--line);
}

.system-steps li:first-child {
  padding-left:0;
  border-left:0;
}

.system-steps li:last-child {
  padding-right:0;
}

.step-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:29px;
  color:var(--blue-light);
  font:13px Consolas,monospace;
}

.step-top span:last-child {
  font-size:21px;
  color:#456382;
}

.system-steps h3 {
  font-size:19px;
  margin-bottom:14px;
}

.system-steps p {
  font-size:13px;
  line-height:1.85;
}

.feedback-line {
  margin-top:40px;
  border-top:1px solid #087cfa44;
  padding-top:19px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#8c9eb6;
  font-size:11px;
}

.feedback-line span {
  color:var(--blue-light);
  font-size:21px;
}

.solutions-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:36px;
}

.solution {
  position:relative;
  min-height:225px;
  border-top:1px solid var(--line);
  padding:28px 25px 28px 0;
}

.solution-index {
  color:#7e91ab;
  font:9px Consolas,monospace;
  letter-spacing:.1em;
}

.solution h3 {
  font-size:20px;
  margin-top:19px;
  margin-bottom:13px;
}

.solution p {
  font-size:13px;
  max-width:315px;
}

.solution-arrow {
  position:absolute;
  right:0;
  top:23px;
  color:#637995;
  font-size:21px;
}

.difference {
  background:#0e141f;
  border-block:1px solid var(--line);
}

.difference-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:95px;
  align-items:center;
}

.difference-description {
  font-size:14px;
  max-width:435px;
  margin-top:24px;
}

.positioning {
  font-size:20px;
  line-height:1.6;
  margin-top:32px;
  color:var(--text);
  letter-spacing:-.025em;
}

.positioning span {
  color:var(--blue-light);
}

.comparison>div {
  padding:30px;
}

.comparison-standard {
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:14px;
}

.comparison .eyebrow {
  margin-bottom:18px;
  font-size:9px;
}

.classic-flow {
  color:#b0bac8;
  font-size:19px;
}

.classic-flow span {
  color:#55657a;
  padding:0 10px;
}

.comparison>div>p:last-child {
  font-size:12px;
  margin-top:15px;
}

.comparison-zty {
  border:1px solid #087cfa66;
  background:#087cfa09;
  border-radius:var(--radius);
}

.zty-flow {
  color:#eef4ff;
  font-size:20px;
  line-height:2;
}

.zty-flow span {
  color:var(--blue);
  margin-inline:8px;
}

.status-tag {
  font-size:9px;
  color:#a7b6c9;
  border:1px solid var(--line);
  border-radius:3px;
  padding:7px 11px;
  letter-spacing:.09em;
}

.case-placeholder {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}





.case-copy {
  padding:46px 48px;
}

.case-copy h3 {
  font-size:28px;
}

.case-copy>p:not(.eyebrow) {
  font-size:13px;
  margin-top:20px;
}

.analysis-section {
  padding-top:25px;
}

.analysis-inner {
  text-align:center;
  border:1px solid #20436b;
  border-radius:8px;
  padding:68px 28px;
  background:radial-gradient(ellipse at 50% 110%,#087cfa24,transparent 70%),#0c1420;
}

.analysis-inner .eyebrow {
  justify-content:center;
}

.analysis-inner h2 {
  font-size:clamp(34px,4.1vw,56px);
}

.analysis-inner h2 span {
  color:var(--blue-light);
}

.analysis-inner>p:not(.eyebrow) {
  margin-top:23px;
  font-size:14px;
}

.analysis-inner .button {
  margin-top:28px;
}

.analysis-inner .analysis-footnote {
  font-size:10px!important;
  color:#8494ac;
  margin-top:15px!important;
}

.site-footer {
  background:var(--deep);
  border-top:1px solid var(--line);
}

.footer-main {
  display:grid;
  grid-template-columns:1fr .8fr 1fr;
  gap:70px;
  padding-block:55px;
}

.footer-main>div>p {
  font-size:11px;
  margin-top:16px;
}

.footer-main nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 28px;
  align-content:center;
  font-size:12px;
  color:#a4afbf;
}

.footer-main nav a:hover {
  color:#fff;
}

.footer-contact>span {
  color:#8e9aac;
  font-size:9px;
  letter-spacing:.17em;
}

.footer-contact .text-link {
  font-size:11px;
  margin-top:13px;
}

.footer-bottom {
  display:flex;
  gap:30px;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-block:22px;
  color:#8591a3;
  font-size:10px;
}

.footer-bottom small {
  font-size:inherit;
}

.footer-bottom>div {
  display:flex;
  gap:22px;
}

.footer-bottom>a {
  color:#b9c3d0;
}

.footer-bottom>a span {
  margin-left:10px;
}






@media(min-width:1450px) {
  .hero-grid {
    min-height:730px;
  }
}

@media(max-width:1100px) {
  .container {
    width:calc(100% - 64px);
  }
  .main-nav {
    gap:17px;
  }
  .hero-grid {
    gap:20px;
  }
  .flow-node {
    width:235px;
  }
  .node-five {
    left:36%;
  }
  .hero h1 {
    font-size:54px;
  }
  .split-heading,.difference-grid {
    gap:45px;
  }
  .system-steps li {
    padding-inline:16px;
  }
  .system-steps h3 {
    font-size:16px;
  }
  .problem-line {
    gap:17px;
  }
  .footer-main {
    gap:35px;
  }
}

@media(max-width:900px) {
  :root {
    --section:80px;
  }
  .header-inner {
    height:78px;
    flex-wrap:wrap;
  }
  .brand {
    width:105px;
  }
  .menu-toggle {
    display:none;
    width:44px;
    height:44px;
    border:1px solid var(--line);
    border-radius:4px;
    background:transparent;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
  }
  .menu-toggle span {
    display:block;
    width:20px;
    height:1px;
    background:#fff;
  }
  .js .menu-toggle {
    display:flex;
  }
  .main-nav {
    width:100%;
    flex-wrap:wrap;
    padding:20px 0;
    background:var(--deep);
  }
  .site-header:has(.main-nav) {
    position:relative;
  }
  .header-inner {
    height:auto;
    min-height:78px;
    padding-block:18px;
  }
  .js .site-header {
    position:sticky;
  }
  .js .header-inner {
    height:78px;
    padding-block:0;
  }
  .js .main-nav {
    display:none;
    position:absolute;
    left:0;
    top:77px;
    padding:25px 32px;
    border-bottom:1px solid var(--line);
  }
  .js .main-nav.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .js .main-nav>a:not(.button) {
    font-size:15px;
    padding:11px 0;
  }
  .main-nav .button {
    margin-top:12px;
  }
  .home-link:after {
    display:none;
  }
  .hero-grid {
    grid-template-columns:1fr 1fr;
    min-height:630px;
    padding-block:45px;
    gap:15px;
  }
  .hero h1 {
    font-size:43px;
  }
  .hero-description {
    font-size:13px;
  }
  .hero-actions {
    gap:19px;
    flex-wrap:wrap;
  }
  .hero-actions .button {
    padding:13px 17px;
    gap:23px;
  }
  .architecture {
    height:490px;
  }
  .flow-node {
    width:215px;
    min-height:64px;
    padding:11px;
  }
  .node-one {
    left:2%;
    top:60px;
  }
  .node-two {
    left:9%;
    top:136px;
  }
  .node-three {
    left:16%;
    top:212px;
  }
  .node-four {
    left:23%;
    top:288px;
  }
  .node-five {
    left:30%;
    top:364px;
  }
  .flow-node strong {
    font-size:15px;
  }
  .focus-strip {
    gap:15px;
    flex-wrap:wrap;
  }
  .focus-strip>span:first-child {
    width:100%;
  }
  .split-heading {
    gap:35px;
    grid-template-columns:1fr 1fr;
  }
  .problem-copy {
    padding-top:35px;
  }
  .problem-line {
    flex-wrap:wrap;
  }
  .problem-line>a {
    margin-left:0;
    width:100%;
  }
  .system-steps {
    grid-template-columns:repeat(3,1fr);
    gap:35px 0;
  }
  .system-steps li:nth-child(4) {
    border:0;
    padding-left:0;
  }
  .solutions-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .difference-grid {
    gap:30px;
  }
  .comparison>div {
    padding:23px;
  }
  .classic-flow {
    font-size:15px;
  }
  .classic-flow span {
    padding:0 4px;
  }
  .zty-flow {
    font-size:18px;
  }
  .case-copy {
    padding:35px;
  }
  .case-copy h3 {
    font-size:24px;
  }
  .footer-main {
    grid-template-columns:1fr 1fr;
  }
  .footer-contact {
    grid-column:1/-1;
  }
  .footer-bottom {
    flex-wrap:wrap;
  }
  .section-heading {
    gap:25px;
  }
  .section-heading>p {
    max-width:260px;
  }
}

@media(max-width:640px) {
  :root {
    --section:65px;
  }
  .container {
    width:calc(100% - 40px);
  }
  html {
    scroll-padding-top:96px;
  }
  .hero-grid {
    grid-template-columns:1fr;
    padding-top:47px;
    padding-bottom:28px;
    gap:35px;
  }
  .hero h1 {
    font-size:clamp(40px,10.8vw,61px);
  }
  .hero-description {
    font-size:14px;
    max-width:390px;
  }
  .hero-copy .eyebrow {
    font-size:9px;
    margin-bottom:23px;
  }
  .hero-actions {
    gap:28px;
    margin-top:27px;
  }
  .hero-note {
    margin-top:23px;
  }
  .architecture {
    width:100%;
    max-width:450px;
    margin-inline:auto;
    height:480px;
  }
  .flow-node {
    width:68%;
    max-width:270px;
    gap:10px;
  }
  .node-one {
    left:4%;
  }
  .node-two {
    left:10%;
  }
  .node-three {
    left:16%;
  }
  .node-four {
    left:22%;
  }
  .node-five {
    left:28%;
  }
  .diagram-top {
    font-size:8px;
  }
  .diagram-bottom {
    font-size:7px;
  }
  .focus-strip {
    gap:9px;
    justify-content:flex-start;
    padding-block:22px;
  }
  .focus-strip>span:first-child {
    margin-bottom:8px;
  }
  .focus-strip p {
    font-size:10px;
  }
  .strip-plus {
    font-size:11px;
  }
  .split-heading,.difference-grid {
    grid-template-columns:1fr;
    gap:28px;
  }
  .problem-copy {
    padding-top:0;
    font-size:14px;
  }
  .problem-line {
    margin-top:30px;
    padding-top:25px;
    gap:10px;
    font-size:10px;
  }
  .problem-line>a {
    font-size:12px;
    margin-top:10px;
  }
  .eyebrow {
    margin-bottom:20px;
    font-size:9px;
  }
  .section-heading {
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:34px;
    gap:24px;
  }
  .section-heading>p {
    max-width:100%;
    font-size:13px;
  }
  .section-heading>p br {
    display:none;
  }
  .system-steps {
    grid-template-columns:1fr;
    gap:0;
  }
  .system-steps li,.system-steps li:first-child,.system-steps li:nth-child(4) {
    border:0;
    border-top:1px solid var(--line);
    padding:24px 0 24px 48px;
    position:relative;
  }
  .step-top {
    position:absolute;
    left:0;
    top:24px;
    bottom:24px;
    margin:0;
    flex-direction:column;
    font-size:12px;
  }
  .step-top span:last-child {
    transform:rotate(90deg);
    font-size:18px;
  }
  .system-steps li:last-child .step-top span:last-child {
    transform:none;
  }
  .system-steps h3 {
    font-size:21px;
    margin-bottom:10px;
  }
  .system-steps p {
    max-width:400px;
  }
  .feedback-line {
    text-align:center;
    align-items:flex-start;
    line-height:1.7;
    font-size:10px;
    margin-top:12px;
  }
  .solutions-grid {
    grid-template-columns:1fr;
  }
  .solution {
    min-height:0;
    padding-block:25px;
  }
  .solution p {
    max-width:100%;
  }
  .solution h3 {
    font-size:21px;
  }
  .solution-index {
    font-size:9px;
  }
  .difference-grid {
    gap:35px;
  }
  .comparison>div {
    padding:24px;
  }
  .classic-flow {
    font-size:17px;
  }
  .classic-flow span {
    padding-inline:8px;
  }
  .positioning {
    font-size:21px;
  }
  .case-placeholder {
    grid-template-columns:1fr;
  }

.case-graphic span {
    height:100px;
  }

.case-graphic span:nth-child(3) {
    height:185px;
  }
  .case-copy {
    padding:28px;
  }
  .case-copy h3 {
    font-size:26px;
  }
  .analysis-section {
    padding-top:0;
  }
  .analysis-inner {
    padding:45px 20px;
  }
  .analysis-inner h2 {
    font-size:34px;
  }
  .analysis-inner>p:not(.eyebrow) {
    font-size:13px;
  }
  .analysis-inner>p br {
    display:none;
  }
  .analysis-inner .button {
    font-size:12px;
    gap:20px;
  }
  .footer-main {
    gap:35px 20px;
    padding-block:38px;
  }
  .footer-main nav {
    gap:12px;
    font-size:11px;
  }
  .footer-main>div>p {
    font-size:10px;
  }
  .footer-bottom {
    gap:15px;
    font-size:9px;
  }
  .footer-bottom>div {
    order:3;
    width:100%;
    gap:16px;
    flex-wrap:wrap;
  }
  .footer-bottom>a {
    margin-left:auto;
  }
  .status-tag {
    font-size:8px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
  .button:hover {
    transform:none;
  }
}

/* İkinci aşama: ortak iç sayfa bileşenleri. Ana sayfa düzeni korunur. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.main-nav a[aria-current="page"] { color: var(--text); }
.footer-contact > a { display: block; font-size: 13px; margin-top: 10px; }
.social-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: 11px; color: #b3bfd0; }
.footer-contact a:hover { color: var(--blue-light); }
.section-detail-link { margin-top: 30px; color: var(--blue-light); }
.case-detail-link { margin-top: 25px; color: var(--blue-light); }
.customer-journey { padding: 35px 40px; background: radial-gradient(ellipse at 50% 100%, #16365a55, transparent 80%), #0d131d; }
.customer-journey > .eyebrow { margin-bottom: 22px; }
.journey-steps { margin: 0; padding: 0; list-style: none; }
.journey-steps li { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid #3f5a7e65; border-radius: 4px; background: #111c2b; position: relative; }
.journey-steps li + li { margin-top: 24px; }
.journey-steps li + li::before { content: "↓"; position: absolute; top: -27px; left: 25px; font-size: 18px; color: var(--blue-light); }
.journey-steps li:last-child { border-color: #087cfa88; background: #123054; }
.journey-steps strong { display: block; font-size: 16px; font-weight: 550; }
.journey-steps small { display: block; font-size: 10px; color: #a3b0c2; }
.journey-caption { margin-top: 18px; font-size: 10px; }
.page-hero { padding: 30px 0 66px; background: radial-gradient(ellipse at 85% 40%, #0d284635, transparent 65%); border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; gap: 12px; align-items: center; margin-bottom: 58px; color: var(--muted); font-size: 11px; }
.breadcrumb a:hover { color: var(--blue-light); }
.breadcrumb > span[aria-hidden] { color: #47617d; }
.page-hero h1 { font-size: clamp(40px, 4.65vw, 66px); line-height: 1.12; max-width: 1000px; }
.page-hero h1 span { color: var(--blue-light); }
.page-intro { max-width: 680px; margin-top: 26px; font-size: 16px; line-height: 1.85; }
.detail-section { padding-top: 66px; }
.stage-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 25px; margin-top: 35px; }
.stage-nav a { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 13px; gap: 15px; }
.stage-nav a span { color: var(--blue-light); }
.stage-nav a:hover { color: var(--blue-light); }
.method-row { display: grid; grid-template-columns: .8fr 1.2fr; gap: 85px; padding: 50px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.method-row:first-child { padding-top: 0; }
.method-heading h2 { font-size: 34px; margin-top: 18px; }
.method-heading p { font-size: 14px; margin-top: 17px; }
.method-body h3 { font-size: 16px; letter-spacing: -.015em; margin-bottom: 10px; }
.method-body > h3:not(:first-child) { margin-top: 24px; }
.method-body p { font-size: 14px; }
.next-step { display: flex; align-items: flex-start; gap: 16px; border-left: 2px solid var(--blue); background: #087cfa09; padding: 20px; margin-top: 26px; }
.next-step > span { color: var(--blue-light); }
.next-step p { color: #b5c5db; font-size: 13px; }
.solution-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.solution-detail { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: #0e1520; display: flex; flex-direction: column; align-items: flex-start; }
.solution-detail h2 { font-size: 27px; margin-top: 22px; }
.solution-detail > p { margin-top: 18px; font-size: 14px; }
.solution-detail .solution-promise { font-size: 16px; }
.solution-connection { border-top: 1px solid var(--line); margin-top: 25px; padding-top: 22px; }
.solution-connection h3 { font-size: 14px; margin-bottom: 9px; }
.solution-connection p { font-size: 13px; }
.solution-detail .text-link { font-size: 12px; color: var(--blue-light); margin-top: auto; padding-top: 28px; }
.case-copy h2 { font-size: 32px; }
.prose p + p { margin-top: 20px; }
.prose > p { font-size: 15px; }
.prose .positioning { font-size: 24px; }
.principles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; }
.principles-grid article { border-top: 1px solid var(--line); padding-top: 26px; }
.principles-grid h3 { font-size: 24px; margin: 20px 0 15px; }
.principles-grid p { font-size: 14px; }
.contact-layout, .analysis-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 75px; align-items: start; }
.contact-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; border-top: 1px solid var(--line); padding: 24px 0; }
.contact-row .solution-index { grid-column: 1 / -1; }
.contact-row strong { font-size: 24px; font-weight: 500; letter-spacing: -.035em; overflow-wrap: anywhere; }
.contact-row > span:last-child { color: var(--blue-light); font-size: 23px; }
.contact-row:hover strong { color: var(--blue-light); }
.contact-aside { padding: 32px; border: 1px solid #087cfa55; border-radius: var(--radius); background: #0e1826; }
.contact-aside h2 { font-size: 32px; }
.contact-aside > p:not(.eyebrow) { margin-top: 25px; font-size: 14px; }
.contact-aside .button { margin-top: 30px; }
.contact-aside .text-link { margin-top: 23px; font-size: 12px; }
.analysis-layout { grid-template-columns: .75fr 1.25fr; gap: 65px; }
.analysis-guide h2 { font-size: 32px; }
.analysis-topics { padding-left: 22px; margin: 34px 0; }
.analysis-topics li { padding-left: 10px; margin-bottom: 24px; }
.analysis-topics li::marker { color: var(--blue-light); font-size: 12px; }
.analysis-topics strong { font-size: 15px; font-weight: 500; }
.analysis-topics p { margin-top: 5px; font-size: 13px; }
.form-panel { padding: 35px; background: #101722; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.form-panel h2 { font-size: 28px; }
.demo-notice { margin: 22px 0; padding: 16px; background: #087cfa0d; border-left: 2px solid var(--blue); font-size: 12px; }
.demo-notice strong { display: block; color: #c6daf5; margin-bottom: 5px; }
.demo-notice a { color: var(--blue-light); text-decoration: underline; text-underline-offset: 3px; }
.form-required-note { font-size: 11px; margin-bottom: 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: 12px; margin-bottom: 8px; color: #cbd3df; }
.field label span { color: var(--muted); }
.field input, .field select { width: 100%; min-width: 0; border: 1px solid #465267; background: var(--deep); border-radius: 4px; min-height: 46px; padding: 11px 12px; color: var(--text); font: inherit; font-size: 16px; }
.field input::placeholder { color: #8897ac; font-size: 12px; }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }
.field small { margin-top: 8px; color: #99a8bc; font-size: 10px; }
.consent-placeholder { border: 1px solid var(--line); border-radius: 4px; margin: 28px 0; padding: 14px; min-width: 0; }
.consent-placeholder legend { font-size: 11px; color: #acb9ca; padding-inline: 5px; }
.consent-placeholder label { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: #acb9ca; }
.consent-placeholder input { margin-top: 4px; }
.consent-placeholder p { margin-top: 9px; font-size: 11px; }
.form-status { color: #a7d0ff; font-size: 13px; margin-top: 20px; }
button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
@media (max-width: 1100px) {
  .contact-layout, .analysis-layout { gap: 35px; }
  .contact-aside, .form-panel { padding: 25px; }
  .method-row { gap: 45px; }
}
@media (max-width: 900px) {
  .customer-journey { padding: 28px; }
  .analysis-layout { grid-template-columns: 1fr; }
  .analysis-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .analysis-guide h2 br { display: none; }
  .contact-layout { grid-template-columns: 1fr 1fr; gap: 30px; }
  .contact-row strong { font-size: 20px; }
  .solution-detail { padding: 25px; }
  .principles-grid { gap: 25px; }
  .js .main-nav.is-open { max-height: calc(100dvh - 78px); overflow-y: auto; }
}
@media (max-width: 640px) {
  .page-hero { padding: 22px 0 40px; }
  .breadcrumb { margin-bottom: 35px; font-size: 10px; }
  .page-hero h1 { font-size: clamp(34px, 8.5vw, 48px); }
  .page-intro { font-size: 14px; margin-top: 22px; }
  .detail-section { padding-top: 40px; }
  .stage-nav { grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: 20px; }
  .stage-nav a { font-size: 11px; }
  .method-row { grid-template-columns: 1fr; gap: 25px; padding-block: 35px; }
  .method-heading h2 { font-size: 29px; }
  .solution-details, .contact-layout, .principles-grid { grid-template-columns: 1fr; }
  .solution-details { gap: 22px; }
  .solution-detail { padding: 23px; }
  .solution-detail h2 { font-size: 25px; }
  .customer-journey { padding: 28px; }
  .journey-steps small { font-size: 10px; }
  .case-copy h2 { font-size: 28px; }
  .analysis-topics { display: block; }
  .analysis-guide h2, .contact-aside h2 { font-size: 29px; }
  .form-panel { padding: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-panel .button { width: 100%; }
  .contact-row strong { font-size: 22px; }
  .social-links { gap: 15px; }
}
