@charset "utf-8";

/* ========== Solution Detail Hero ========== */
.solution-detail-hero {
   color: var(--white);
}

.solution-detail-hero-media,
.solution-detail-hero-media img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
}

.solution-detail-hero-media img {
   object-fit: cover;
   object-position: var(--solution-hero-position, center 56%);
}

.solution-detail-hero-overlay {
   position: absolute;
   inset: 0;
   background:
      linear-gradient(90deg, rgba(4, 12, 24, 0.97) 0%, rgba(6, 19, 36, 0.88) 46%, rgba(8, 23, 42, 0.34) 100%),
      linear-gradient(0deg, rgba(4, 12, 24, 0.9) 0%, transparent 62%);
}

.solution-detail-hero-grid,
.solution-detail-cta-grid,
.solution-levels-grid {
   position: absolute;
   inset: 0;
   opacity: 0.08;
   background-image:
      linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
   background-size: 64px 64px;
   mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 100%);
}

.solution-detail-hero-content {
   z-index: 2;
}

.solution-detail-hero h1 {
   max-width: 1080px;
   letter-spacing: -0.04em;
}

.solution-detail-hero .hero-title-accent {
   margin-right: 0.12em;
}

.solution-detail-hero .hero-subtitle {
   max-width: 930px;
}

/* ========== Page Anchor Navigation ========== */
.solution-detail-anchor-nav {
   position: relative;
   z-index: 5;
   border-bottom: 1px solid var(--gray-200);
   background: rgba(255, 255, 255, 0.96);
   box-shadow: var(--shadow-sm);
}

.solution-detail-anchor-list {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   min-height: 68px;
   overflow-x: auto;
   scrollbar-width: none;
}

.solution-detail-anchor-list::-webkit-scrollbar {
   display: none;
}

.solution-detail-anchor-list a {
   flex: 0 0 auto;
   padding: 8px 15px;
   border-radius: 999px;
   color: var(--blue-700);
   font-size: 0.84rem;
   font-weight: 720;
   white-space: nowrap;
}

.solution-detail-anchor-list a:hover,
.solution-detail-anchor-list a:focus-visible {
   color: var(--blue-900);
   background: var(--blue-50);
}

/* ========== Shared Section Treatments ========== */
.solution-detail-section-title {
   max-width: 760px;
   margin-bottom: 0;
}

.solution-detail-intro {
   background: var(--white);
}

.solution-detail-intro-copy {
   padding: 5px 0 5px 28px;
   border-left: 3px solid var(--blue-500);
}

.solution-detail-intro-copy p {
   margin-bottom: 18px;
   color: var(--text-secondary);
   font-size: 1rem;
   line-height: 1.95;
}

.solution-detail-intro-copy p:last-child {
   margin-bottom: 0;
}

/* ========== Challenge Cards ========== */
.solution-challenge-grid {
   margin-top: 52px;
}

.solution-challenge-card {
   position: relative;
   height: 100%;
   min-height: 270px;
   padding: 30px;
   overflow: hidden;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-md);
   background: var(--white);
   transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.solution-challenge-card:hover {
   transform: translateY(-7px);
   border-color: var(--blue-200);
   box-shadow: var(--shadow-lg);
}

.solution-challenge-number {
   position: absolute;
   top: 22px;
   right: 24px;
   color: var(--gray-200);
   font-size: 2.7rem;
   font-weight: 900;
   line-height: 1;
}

.solution-challenge-icon,
.solution-architecture-icon,
.solution-related-card-body > span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 52px;
   height: 52px;
   margin-bottom: 24px;
   border-radius: var(--radius-sm);
   color: var(--white);
   background: var(--gradient-primary);
   box-shadow: var(--shadow-blue);
   font-size: 1.35rem;
}

.solution-challenge-card h3 {
   margin-bottom: 12px;
   color: var(--blue-800);
   font-size: 1.08rem;
   font-weight: 760;
}

.solution-challenge-card p {
   margin: 0;
   color: var(--text-secondary);
   font-size: 0.91rem;
   line-height: 1.78;
}

/* ========== Automation Levels ========== */
.solution-levels {
   position: relative;
   overflow: hidden;
   color: var(--white);
   background:
      radial-gradient(circle at 76% 18%, rgba(0, 212, 255, 0.13), transparent 31%),
      linear-gradient(145deg, #06101f 0%, #0b2443 100%);
}

.solution-levels-grid {
   opacity: 0.05;
}

.solution-dark-header .section-title {
   color: var(--white);
}

.solution-dark-header .section-subtitle {
   color: rgba(255, 255, 255, 0.68);
}

.solution-level-card {
   position: relative;
   height: 100%;
   min-height: 420px;
   padding: 34px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.13);
   border-radius: var(--radius-lg);
   background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025));
   backdrop-filter: blur(12px);
   transition: transform var(--transition-smooth), border-color var(--transition-smooth), background var(--transition-smooth);
}

.solution-level-card:hover {
   transform: translateY(-8px);
   border-color: rgba(0, 212, 255, 0.45);
   background: linear-gradient(145deg, rgba(0, 212, 255, 0.12), rgba(255, 255, 255, 0.035));
}

.solution-level-card-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 32px;
}

.solution-level-card-head span {
   color: var(--accent-cyan);
   font-size: 2.7rem;
   font-weight: 900;
   line-height: 1;
}

.solution-level-card-head small {
   color: rgba(255, 255, 255, 0.52);
   font-size: 0.68rem;
   font-weight: 800;
   letter-spacing: 0.14em;
   text-align: right;
}

.solution-level-card h3 {
   margin-bottom: 16px;
   color: var(--white);
   font-size: 1.5rem;
}

.solution-level-card > p {
   min-height: 112px;
   margin-bottom: 24px;
   color: rgba(255, 255, 255, 0.7);
   font-size: 0.93rem;
   line-height: 1.85;
}

.solution-level-card ul {
   display: grid;
   gap: 11px;
   padding: 21px 0 0;
   margin: 0;
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   list-style: none;
}

.solution-level-card li {
   display: flex;
   align-items: center;
   gap: 8px;
   color: rgba(255, 255, 255, 0.86);
   font-size: 0.84rem;
}

.solution-level-card li i {
   color: var(--accent-cyan);
}

/* ========== System Comparison ========== */
.solution-comparison {
   position: relative;
   overflow: hidden;
   background:
      radial-gradient(circle at 88% 12%, rgba(0, 181, 229, 0.1), transparent 28%),
      linear-gradient(145deg, #f7fbff 0%, #eef7fd 100%);
}

.solution-comparison-intro {
   margin: 0;
   padding-left: 24px;
   border-left: 3px solid var(--accent-cyan);
   color: var(--text-secondary);
   line-height: 1.9;
}

.solution-comparison-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 18px;
}

.solution-comparison-card {
   display: flex;
   flex-direction: column;
   min-height: 260px;
   padding: 27px;
   border: 1px solid rgba(34, 114, 192, 0.16);
   border-radius: var(--radius-md);
   background: rgba(255, 255, 255, 0.9);
   box-shadow: var(--shadow-sm);
}

.solution-comparison-card-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 18px;
   margin-bottom: 24px;
}

.solution-comparison-card-head span {
   color: var(--blue-800);
   font-size: 0.94rem;
   font-weight: 780;
   line-height: 1.45;
}

.solution-comparison-card-head strong {
   flex: 0 0 auto;
   color: var(--blue-700);
   font-size: 1.55rem;
   font-weight: 880;
   line-height: 1;
   white-space: nowrap;
}

.solution-comparison-bar {
   height: 8px;
   margin-bottom: 24px;
   overflow: hidden;
   border-radius: 999px;
   background: var(--blue-100);
}

.solution-comparison-bar span {
   display: block;
   width: var(--solution-comparison-width, 0%);
   height: 100%;
   border-radius: inherit;
   background: linear-gradient(90deg, var(--blue-500), var(--accent-cyan));
   box-shadow: 0 0 18px rgba(0, 181, 229, 0.32);
}

.solution-comparison-card p {
   margin: auto 0 0;
   color: var(--text-secondary);
   font-size: 0.86rem;
   line-height: 1.75;
}

.solution-comparison-note {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   max-width: 980px;
   padding: 18px 21px;
   margin: 28px auto 0;
   border: 1px solid rgba(34, 114, 192, 0.15);
   border-radius: var(--radius-sm);
   color: var(--text-secondary);
   background: rgba(255, 255, 255, 0.75);
   font-size: 0.82rem;
   line-height: 1.7;
}

.solution-comparison-note i {
   flex: 0 0 auto;
   margin-top: 2px;
   color: var(--blue-600);
}

/* ========== Integrated Architecture ========== */
.solution-architecture {
   background: var(--gray-50);
}

.solution-architecture-intro {
   margin: 0;
   padding-left: 24px;
   border-left: 3px solid var(--blue-500);
   color: var(--text-secondary);
   line-height: 1.9;
}

.solution-architecture-flow {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 18px;
}

.solution-architecture-card {
   position: relative;
   min-height: 305px;
   padding: 28px;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-md);
   background: var(--white);
   box-shadow: var(--shadow-sm);
}

.solution-architecture-card:not(:last-child)::after {
   position: absolute;
   z-index: 2;
   top: 50%;
   right: -28px;
   width: 38px;
   height: 2px;
   background: linear-gradient(90deg, var(--blue-300), var(--accent-cyan));
   content: "";
}

.solution-architecture-index {
   position: absolute;
   top: 24px;
   right: 24px;
   color: var(--gray-200);
   font-size: 2.25rem;
   font-weight: 900;
   line-height: 1;
}

.solution-architecture-card h3 {
   margin-bottom: 12px;
   color: var(--blue-800);
   font-size: 1.15rem;
}

.solution-architecture-card p {
   margin: 0;
   color: var(--text-secondary);
   font-size: 0.89rem;
   line-height: 1.78;
}

.solution-assessment-panel {
   display: grid;
   grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.8fr);
   gap: 40px;
   margin-top: 54px;
   padding: 40px;
   border-radius: var(--radius-lg);
   color: var(--white);
   background: linear-gradient(135deg, #0b2d54 0%, #0e5f94 100%);
   box-shadow: var(--shadow-xl);
}

.solution-assessment-heading span,
.solution-case-label,
.solution-detail-cta-inner > div > span {
   display: block;
   margin-bottom: 12px;
   color: var(--accent-cyan);
   font-size: 0.72rem;
   font-weight: 850;
   letter-spacing: 0.15em;
   text-transform: uppercase;
}

.solution-assessment-heading h3 {
   margin: 0;
   color: var(--white);
   font-size: clamp(1.45rem, 2.7vw, 2.1rem);
   line-height: 1.4;
}

.solution-assessment-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 13px;
   padding: 0;
   margin: 0;
   list-style: none;
}

.solution-assessment-grid li {
   display: flex;
   align-items: center;
   gap: 14px;
   min-height: 86px;
   padding: 16px;
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: var(--radius-sm);
   background: rgba(255, 255, 255, 0.07);
}

.solution-assessment-grid li > span {
   display: inline-flex;
   flex: 0 0 40px;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   color: var(--accent-cyan);
   background: rgba(0, 212, 255, 0.12);
   font-size: 0.74rem;
   font-weight: 850;
}

.solution-assessment-grid strong,
.solution-assessment-grid small {
   display: block;
}

.solution-assessment-grid strong {
   margin-bottom: 3px;
   color: var(--white);
   font-size: 0.9rem;
}

.solution-assessment-grid small {
   color: rgba(255, 255, 255, 0.62);
   font-size: 0.75rem;
   line-height: 1.55;
}

/* ========== Parallax Story Dividers ========== */
.solution-parallax {
   height: 470px;
   isolation: isolate;
}

.solution-parallax .parallax-divider-bg {
   background-image: var(--solution-parallax-image-l);
   background-position: var(--solution-parallax-position, center);
}

.solution-parallax .parallax-divider-overlay {
   background: linear-gradient(90deg, rgba(3, 12, 24, 0.92) 0%, rgba(5, 21, 39, 0.72) 48%, rgba(5, 21, 39, 0.28) 100%);
   backdrop-filter: none;
}

.solution-parallax-grid {
   position: absolute;
   z-index: 2;
   inset: 0;
   opacity: 0.22;
   background-image:
      linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
   background-size: 72px 72px;
   pointer-events: none;
   mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.52) 58%, transparent 100%);
}

.solution-parallax-content {
   position: relative;
   max-width: 760px;
   padding: 14px 0 14px 34px;
   border-left: 3px solid var(--accent-cyan);
   color: var(--white);
   text-shadow: 0 2px 22px rgba(0, 0, 0, 0.32);
}

.solution-parallax-index {
   position: absolute;
   top: 50%;
   left: -9px;
   color: rgba(255, 255, 255, 0.08);
   font-size: clamp(7rem, 14vw, 11rem);
   font-weight: 900;
   line-height: 1;
   transform: translateY(-50%);
}

.solution-parallax-kicker {
   position: relative;
   margin-bottom: 15px;
   color: var(--accent-cyan);
   font-size: 0.76rem;
   font-weight: 850;
   letter-spacing: 0.18em;
}

.solution-parallax-content h2 {
   position: relative;
   max-width: 720px;
   margin-bottom: 18px;
   color: var(--white);
   font-size: clamp(2rem, 4vw, 3.35rem);
   font-weight: 820;
   line-height: 1.28;
   letter-spacing: -0.035em;
}

.solution-parallax-content p {
   position: relative;
   max-width: 650px;
   margin: 0;
   color: rgba(255, 255, 255, 0.76);
   font-size: 1rem;
   line-height: 1.85;
}

.solution-parallax-next-step .parallax-divider-overlay {
   background: linear-gradient(270deg, rgba(3, 12, 24, 0.93) 0%, rgba(5, 21, 39, 0.68) 52%, rgba(5, 21, 39, 0.18) 100%);
}

.solution-parallax-next-step .solution-parallax-grid {
   mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.52) 58%, transparent 100%);
}

.solution-parallax-next-step .solution-parallax-content {
   padding: 14px 34px 14px 0;
   margin-left: auto;
   border-right: 3px solid var(--accent-cyan);
   border-left: 0;
   text-align: right;
}

.solution-parallax-next-step .solution-parallax-index {
   right: -9px;
   left: auto;
}

.solution-parallax-next-step .solution-parallax-content h2,
.solution-parallax-next-step .solution-parallax-content p {
   margin-left: auto;
}

/* ========== Field Cases ========== */
.solution-cases {
   background: var(--white);
}

.solution-case-list {
   display: grid;
   gap: 76px;
}

.solution-case {
   display: grid;
   grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
   gap: 44px;
   align-items: center;
   padding: 44px;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-xl);
   background: var(--gray-50);
   box-shadow: var(--shadow-md);
}

.solution-case-reverse .solution-case-copy {
   order: 2;
}

.solution-case-reverse .solution-case-media {
   order: 1;
}

.solution-case-industry {
   display: inline-flex;
   padding: 6px 10px;
   margin-bottom: 15px;
   border-radius: 999px;
   color: var(--blue-700);
   background: var(--blue-100);
   font-size: 0.76rem;
   font-weight: 720;
}

.solution-case-copy h3 {
   margin-bottom: 26px;
   color: var(--blue-900);
   font-size: clamp(1.6rem, 3vw, 2.35rem);
   line-height: 1.35;
}

.solution-case-copy dl {
   display: grid;
   gap: 18px;
   margin-bottom: 27px;
}

.solution-case-copy dl > div {
   padding-left: 17px;
   border-left: 2px solid var(--blue-200);
}

.solution-case-copy dt {
   margin-bottom: 4px;
   color: var(--blue-700);
   font-size: 0.79rem;
   font-weight: 800;
   letter-spacing: 0.05em;
}

.solution-case-copy dd {
   margin: 0;
   color: var(--text-secondary);
   font-size: 0.9rem;
   line-height: 1.78;
}

.solution-case-metric {
   display: inline-flex;
   flex-direction: column;
   min-width: 190px;
   padding: 17px 20px;
   border-radius: var(--radius-sm);
   background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
   box-shadow: var(--shadow-blue);
}

.solution-case-metric strong {
   color: var(--white);
   font-size: 1.35rem;
   line-height: 1.3;
}

.solution-case-metric span {
   color: rgba(255, 255, 255, 0.66);
   font-size: 0.74rem;
}

.solution-case-detail-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: 20px;
   color: var(--blue-700);
   font-weight: 700;
   text-decoration: none;
}

.solution-case-detail-link:hover,
.solution-case-detail-link:focus-visible {
   color: var(--blue-900);
}

.solution-cases-all {
   display: flex;
   justify-content: center;
   margin-top: 36px;
}

.solution-case-media {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
}

.solution-case-media figure {
   position: relative;
   height: 205px;
   margin: 0;
   overflow: hidden;
   border-radius: var(--radius-md);
   background: var(--gray-200);
}

.solution-case-media .solution-case-image-main {
   grid-column: 1 / -1;
   height: 340px;
}

.solution-cold-chain-page .solution-case-media:has(figure:nth-child(2):last-child) figure:nth-child(2) {
   grid-column: 1 / -1;
}

.solution-ecommerce-page .solution-case-media:has(figure:nth-child(2):last-child) figure:nth-child(2) {
   grid-column: 1 / -1;
}

.solution-case-media figure:nth-child(4) {
   grid-column: 1 / -1;
}

.solution-case-media picture,
.solution-case-media img {
   display: block;
   width: 100%;
   height: 100%;
}

.solution-case-media img {
   object-fit: cover;
   transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.solution-case-media figure:hover img {
   transform: scale(1.045);
}

.solution-case-media figcaption {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   padding: 26px 14px 12px;
   color: rgba(255, 255, 255, 0.92);
   background: linear-gradient(0deg, rgba(4, 12, 24, 0.88), transparent);
   font-size: 0.72rem;
   line-height: 1.45;
}

/* ========== Project Video ========== */
.solution-video {
   background: linear-gradient(135deg, #f8fbff 0%, #ffffff 54%, #eef7ff 100%);
}

.solution-video-intro {
   margin: 22px 0 0;
   color: var(--text-secondary);
   line-height: 1.9;
}

.solution-video-link {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   min-height: 48px;
   padding: 11px 18px;
   margin-top: 24px;
   border: 1px solid var(--blue-300);
   border-radius: var(--radius-sm);
   color: var(--blue-700);
   background: rgba(255, 255, 255, 0.76);
   font-size: 0.88rem;
   font-weight: 750;
   transition: transform var(--transition-smooth), border-color var(--transition-smooth), color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.solution-video-link:hover,
.solution-video-link:focus-visible {
   transform: translateY(-3px);
   border-color: var(--blue-500);
   color: var(--blue-800);
   box-shadow: var(--shadow-md);
}

.solution-video-frame {
   overflow: hidden;
   aspect-ratio: 16 / 9;
   border: 1px solid rgba(34, 114, 192, 0.18);
   border-radius: var(--radius-md);
   background: #07111f;
   box-shadow: 0 24px 58px rgba(12, 36, 68, 0.2);
}

.solution-video-frame iframe,
.solution-video-frame video {
   display: block;
   width: 100%;
   height: 100%;
   border: 0;
}

.solution-video-frame video {
   object-fit: contain;
}

/* ========== Structural Evidence ========== */
.solution-evidence {
   position: relative;
   overflow: hidden;
   color: var(--white);
   background: linear-gradient(145deg, #06101f 0%, #0a203d 100%);
}

.solution-evidence-glow {
   position: absolute;
   top: -180px;
   left: -130px;
   width: 520px;
   height: 520px;
   border-radius: 50%;
   background: rgba(0, 212, 255, 0.11);
   filter: blur(80px);
}

.solution-evidence .section-title {
   color: var(--white);
}

.solution-evidence-intro {
   margin: 23px 0 26px;
   color: rgba(255, 255, 255, 0.68);
   line-height: 1.9;
}

.solution-evidence-list {
   display: grid;
   gap: 13px;
   padding: 0;
   margin: 0;
   list-style: none;
}

.solution-evidence-list li {
   display: flex;
   gap: 10px;
   color: rgba(255, 255, 255, 0.86);
   font-size: 0.89rem;
   line-height: 1.65;
}

.solution-evidence-list i {
   flex: 0 0 auto;
   color: var(--accent-cyan);
}

.solution-evidence-gallery {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   grid-auto-rows: 180px;
   gap: 12px;
}

.solution-evidence-gallery figure {
   height: 100%;
   margin: 0;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: var(--radius-md);
   background: var(--card-bg);
}

.solution-evidence-gallery .solution-evidence-feature {
   grid-column: span 2;
   grid-row: span 2;
}

.solution-evidence-gallery picture,
.solution-evidence-gallery img {
   display: block;
   width: 100%;
   height: 100%;
}

.solution-evidence-gallery img {
   object-fit: cover;
}

/* ========== Process ========== */
.solution-process {
   background: var(--white);
}

.solution-process-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
   padding: 0;
   margin: 0;
   list-style: none;
   counter-reset: none;
}

.solution-process-grid li {
   position: relative;
   min-height: 220px;
   padding: 29px;
   overflow: hidden;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-md);
   background: var(--gray-50);
}

.solution-process-grid li > span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   margin-bottom: 23px;
   border-radius: 50%;
   color: var(--white);
   background: var(--gradient-primary);
   box-shadow: var(--shadow-blue);
   font-size: 0.8rem;
   font-weight: 850;
}

.solution-process-grid h3 {
   margin-bottom: 10px;
   color: var(--blue-800);
   font-size: 1.05rem;
}

.solution-process-grid p {
   margin: 0;
   color: var(--text-secondary);
   font-size: 0.88rem;
   line-height: 1.75;
}

/* ========== FAQ ========== */
.solution-faq {
   background: var(--gray-50);
}

.solution-faq-heading {
   position: sticky;
   top: 105px;
}

.solution-faq-heading .section-subtitle {
   text-align: left;
}

.solution-faq-list {
   display: grid;
   gap: 13px;
}

.solution-faq-list details {
   overflow: hidden;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-md);
   background: var(--white);
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.solution-faq-list details[open] {
   border-color: var(--blue-200);
   box-shadow: var(--shadow-md);
}

.solution-faq-list summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   min-height: 72px;
   padding: 18px 22px;
   color: var(--blue-900);
   cursor: pointer;
   font-weight: 750;
   list-style: none;
}

.solution-faq-list summary::-webkit-details-marker {
   display: none;
}

.solution-faq-list summary i {
   flex: 0 0 auto;
   color: var(--blue-500);
   transition: transform var(--transition-fast);
}

.solution-faq-list details[open] summary i {
   transform: rotate(45deg);
}

.solution-faq-answer {
   padding: 0 22px 22px;
}

.solution-faq-answer p {
   margin: 0;
   padding-top: 18px;
   border-top: 1px solid var(--gray-200);
   color: var(--text-secondary);
   font-size: 0.91rem;
   line-height: 1.85;
}

/* ========== Related Systems ========== */
.solution-related {
   background: var(--white);
}

.solution-related-card {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-md);
   color: inherit;
   background: var(--white);
   box-shadow: var(--shadow-sm);
   transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.solution-related-card:hover,
.solution-related-card:focus-visible {
   transform: translateY(-7px);
   border-color: var(--blue-200);
   color: inherit;
   box-shadow: var(--shadow-lg);
}

.solution-related-card-media {
   position: relative;
   overflow: hidden;
   aspect-ratio: 4 / 3;
   background: var(--gray-100);
}

.solution-related-card-media picture {
   display: block;
   width: 100%;
   height: 100%;
}

.solution-related-card-media img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.solution-related-card:hover .solution-related-card-media img,
.solution-related-card:focus-visible .solution-related-card-media img {
   transform: scale(1.045);
}

.solution-related-card-body {
   display: flex;
   flex: 1;
   flex-direction: column;
   padding: 28px 30px 30px;
}

.solution-related-card h3 {
   margin-bottom: 12px;
   color: var(--blue-800);
   font-size: 1.18rem;
}

.solution-related-card p {
   margin-bottom: 23px;
   color: var(--text-secondary);
   font-size: 0.88rem;
   line-height: 1.75;
}

.solution-related-card strong {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-top: auto;
   padding-top: 18px;
   border-top: 1px solid var(--gray-200);
   color: var(--blue-600);
   font-size: 0.84rem;
}

/* ========== Final CTA ========== */
.solution-detail-cta {
   position: relative;
   overflow: hidden;
   padding: 86px 0;
   color: var(--white);
   background: linear-gradient(120deg, #0b2c52 0%, #0b4f88 56%, #087ca7 100%);
}

.solution-detail-cta-grid {
   opacity: 0.1;
   mask-image: none;
}

.solution-detail-cta-inner {
   display: grid;
   grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.75fr);
   gap: 48px;
   align-items: center;
}

.solution-detail-cta h2 {
   max-width: 780px;
   margin-bottom: 18px;
   color: var(--white);
   font-size: clamp(2rem, 4vw, 3.5rem);
   font-weight: 800;
   line-height: 1.2;
   letter-spacing: -0.025em;
}

.solution-detail-cta p {
   max-width: 720px;
   margin: 0;
   color: rgba(255, 255, 255, 0.72);
   line-height: 1.85;
}

.solution-detail-cta-actions {
   display: grid;
   gap: 13px;
}

.solution-detail-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   min-height: 56px;
   padding: 14px 23px;
   border: 1px solid transparent;
   border-radius: var(--radius-sm);
   font-size: 0.9rem;
   font-weight: 750;
   line-height: 1.4;
   text-align: center;
   transition: transform var(--transition-smooth), border-color var(--transition-smooth), background var(--transition-smooth), box-shadow var(--transition-smooth);
}

.solution-detail-button:hover,
.solution-detail-button:focus-visible {
   transform: translateY(-3px);
}

.solution-detail-button-primary {
   color: var(--blue-900);
   background: linear-gradient(135deg, #ffffff 0%, #b9efff 100%);
   box-shadow: 0 14px 36px rgba(0, 212, 255, 0.2);
}

.solution-detail-button-primary:hover,
.solution-detail-button-primary:focus-visible {
   color: var(--blue-900);
   box-shadow: 0 18px 42px rgba(0, 212, 255, 0.3);
}

.solution-detail-button-secondary {
   color: rgba(255, 255, 255, 0.92);
   border-color: rgba(255, 255, 255, 0.34);
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(10px);
}

.solution-detail-button-secondary:hover,
.solution-detail-button-secondary:focus-visible {
   color: var(--white);
   border-color: rgba(0, 212, 255, 0.72);
   background: rgba(0, 212, 255, 0.14);
}

/* ========== Responsive ========== */
@media (max-width: 1199.98px) {
   .solution-parallax .parallax-divider-bg {
      background-image: var(--solution-parallax-image-m);
   }

   .solution-level-card {
      padding: 29px;
   }

   .solution-architecture-flow {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .solution-comparison-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .solution-architecture-card:not(:last-child)::after {
      display: none;
   }

   .solution-case {
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      padding: 36px;
   }

   .solution-case-media .solution-case-image-main {
      height: 290px;
   }

   .solution-case-media figure {
      height: 180px;
   }
}

@media (max-width: 991.98px) {
   .solution-parallax {
      height: 410px;
   }

   .solution-detail-anchor-list {
      justify-content: flex-start;
   }

   .solution-level-card {
      min-height: 0;
   }

   .solution-level-card > p {
      min-height: 0;
   }

   .solution-assessment-panel {
      grid-template-columns: 1fr;
   }

   .solution-case,
   .solution-case-reverse {
      grid-template-columns: 1fr;
   }

   .solution-case-reverse .solution-case-copy,
   .solution-case-reverse .solution-case-media {
      order: initial;
   }

   .solution-evidence-gallery {
      margin-top: 10px;
   }

   .solution-process-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .solution-faq-heading {
      position: static;
   }

   .solution-detail-cta-inner {
      grid-template-columns: 1fr;
   }

   .solution-detail-cta-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 767.98px) {
   .solution-parallax {
      height: 360px;
   }

   .solution-parallax .parallax-divider-bg {
      background-image: var(--solution-parallax-image-s);
   }

   .solution-parallax .parallax-divider-overlay,
   .solution-parallax-next-step .parallax-divider-overlay {
      background: linear-gradient(90deg, rgba(3, 12, 24, 0.91) 0%, rgba(5, 21, 39, 0.66) 70%, rgba(5, 21, 39, 0.34) 100%);
   }

   .solution-parallax-grid,
   .solution-parallax-next-step .solution-parallax-grid {
      background-size: 52px 52px;
      mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.4) 72%, transparent 100%);
   }

   .solution-parallax-content,
   .solution-parallax-next-step .solution-parallax-content {
      max-width: none;
      padding: 10px 0 10px 22px;
      margin-left: 0;
      border-right: 0;
      border-left: 2px solid var(--accent-cyan);
      text-align: left;
   }

   .solution-parallax-next-step .solution-parallax-index {
      right: auto;
      left: -6px;
   }

   .solution-parallax-content h2 {
      margin-bottom: 14px;
      font-size: clamp(1.72rem, 7.6vw, 2.25rem);
      line-height: 1.34;
   }

   .solution-parallax-content p {
      font-size: 0.9rem;
      line-height: 1.75;
   }

   .solution-detail-anchor-list {
      min-height: 62px;
   }

   .solution-detail-anchor-list a {
      padding: 7px 12px;
      font-size: 0.78rem;
   }

   .solution-detail-intro-copy {
      padding-left: 20px;
   }

   .solution-challenge-grid {
      margin-top: 38px;
   }

   .solution-challenge-card {
      min-height: 0;
      padding: 25px;
   }

   .solution-level-card {
      padding: 27px;
   }

   .solution-comparison-grid {
      grid-template-columns: 1fr;
   }

   .solution-comparison-card {
      min-height: 0;
      padding: 24px;
   }

   .solution-architecture-flow,
   .solution-assessment-grid {
      grid-template-columns: 1fr;
   }

   .solution-assessment-panel {
      gap: 28px;
      padding: 28px;
   }

   .solution-case-list {
      gap: 46px;
   }

   .solution-case {
      gap: 32px;
      padding: 25px;
      border-radius: var(--radius-lg);
   }

   .solution-case-media .solution-case-image-main {
      height: 260px;
   }

   .solution-case-media figure {
      height: 165px;
   }

   .solution-evidence-gallery {
      grid-auto-rows: 145px;
   }

   .solution-process-grid {
      grid-template-columns: 1fr;
   }

   .solution-process-grid li {
      min-height: 0;
   }

   .solution-detail-cta {
      padding: 68px 0;
   }

   .solution-detail-cta-actions {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 575.98px) {
   .solution-detail-hero-media img {
      object-position: var(--solution-hero-position-mobile, 58% center);
   }

   .solution-detail-hero .hero-subtitle {
      font-size: 0.92rem;
      line-height: 1.75;
   }

   .solution-detail-anchor-nav .container {
      padding-right: 0;
   }

   .solution-level-card-head span {
      font-size: 2.35rem;
   }

   .solution-assessment-panel {
      padding: 24px 20px;
   }

   .solution-case {
      padding: 20px;
   }

   .solution-case-copy h3 {
      font-size: 1.55rem;
   }

   .solution-case-media {
      grid-template-columns: 1fr;
   }

   .solution-case-media .solution-case-image-main,
   .solution-case-media figure,
   .solution-case-media figure:nth-child(4) {
      grid-column: auto;
      height: 230px;
   }

   .solution-case-media .solution-case-image-secondary:has(img[height="1024"]) {
      height: 300px;
   }

   .solution-evidence-gallery {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: 170px;
   }

   .solution-evidence-gallery .solution-evidence-feature {
      grid-column: span 2;
      grid-row: span 2;
   }

   .solution-faq-list summary {
      padding: 17px 18px;
      font-size: 0.92rem;
   }

   .solution-faq-answer {
      padding: 0 18px 19px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .solution-parallax .parallax-divider-bg {
      background-attachment: scroll;
      transform: none !important;
   }

   .solution-challenge-card,
   .solution-level-card,
   .solution-comparison-bar span,
   .solution-case-media img,
   .solution-related-card,
   .solution-related-card-media img,
   .solution-video-link,
   .solution-detail-button,
   .solution-faq-list summary i {
      transition: none;
   }
}