:root{--arch-blue: #0074d9;--arch-orange: #f6821f;--arch-pink: #ec4899;--arch-green: #22c55e;--arch-purple: #8b5cf6;--arch-bg: #f8fbff;--arch-bg-light: #ffffff;--arch-border: #dce8f0;}.architecture-section{position: relative;padding: 5rem 0 6rem;background: linear-gradient(to bottom, #f9fafb, #f3f4f6);overflow: hidden;}.architecture-section::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 16rem;background: linear-gradient(to bottom, #eff6ff, transparent);opacity: 0.7;pointer-events: none;}.architecture-section::after{content: '';position: absolute;bottom: -8rem;right: -8rem;width: 16rem;height: 16rem;background: #dbeafe;border-radius: 624.9375rem;filter: blur(3rem);opacity: 0.3;pointer-events: none;}.arch-decoration{position: absolute;top: 3.75rem;right: 2.5rem;width: 7.5rem;height: 7.5rem;opacity: 0.15;z-index: 1;}.arch-decoration svg{width: 100%;height: 100%;}.architecture-panel-0{position: relative;z-index: 1;background: radial-gradient(circle,rgba(0, 116, 217, 0.15) 0.0625rem,transparent 0.0625rem),linear-gradient(180deg, #f8fbff 0%, #f4f8fc 50%, #f9fbff 100%);background-size: 1.25rem 1.25rem, 100% 100%;border: 0.0625rem solid var(--arch-border);border-radius: 0.5rem;padding: 4rem 2rem 2.5rem;margin: 0 auto;max-width: 75rem;overflow: visible;}.architecture-panel-0::before,.architecture-panel-0::after{content: "";position: absolute;width: 0.75rem;height: 0.75rem;border: 0.125rem solid var(--arch-border);background: var(--arch-bg);}.architecture-panel-0::before{top: -0.375rem;left: -0.375rem;}.architecture-panel-0::after{top: -0.375rem;right: -0.375rem;}.architecture-panel-0 .corner-bl,.architecture-panel-0 .corner-br{position: absolute;width: 0.75rem;height: 0.75rem;border: 0.125rem solid var(--arch-border);background: var(--arch-bg);}.architecture-panel-0 .corner-bl{bottom: -0.375rem;left: -0.375rem;}.architecture-panel-0 .corner-br{bottom: -0.375rem;right: -0.375rem;}.arch-triangle{position: absolute;width: 5rem;height: 5rem;color: rgba(0, 116, 217, 0.05);pointer-events: none;}.arch-triangle-tr{top: 2.5rem;right: 2.5rem;}.arch-triangle-bl{bottom: 2.5rem;left: 2.5rem;}.architecture-header{text-align: center;margin-bottom: 2.5rem;position: relative;z-index: 2;}.architecture-header h2{font-size: 2.25rem;font-weight: 800;color: #0f172a;margin-bottom: 1rem;line-height: 1.2;}.architecture-header p{font-size: 0.9375rem;color: #64748b;max-width: 56.25rem;margin: 0 auto;}.architecture-tabs{display: inline-flex;justify-content: center;gap: 0.25rem;padding: 0.375rem;background: white;border-radius: 624.9375rem;box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08), 0 0 0 0.0625rem rgba(0, 0, 0, 0.04);position: absolute;top: 0;left: 50%;transform: translate(-50%, -50%);z-index: 20;flex-wrap: nowrap;}.tab-indicator{position: absolute;top: 0.375rem;left: 0.375rem;height: calc(100% - 0.75rem);background: var(--arch-blue);border-radius: 624.9375rem;box-shadow: 0 0.125rem 0.375rem rgba(0, 116, 217, 0.3);transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),width 0.3s cubic-bezier(0.4, 0, 0.2, 1);pointer-events: none;z-index: 0;}.arch-tab{display: inline-flex;align-items: center;gap: 0.5rem;padding: 0.625rem 1.125rem;background: transparent;border: none;border-radius: 624.9375rem;font-size: 0.875rem;font-weight: 500;color: #374151;cursor: pointer;transition: color 0.2s ease;white-space: nowrap;position: relative;z-index: 1;}.arch-tab:hover{color: #1f2937;}.arch-tab:focus{outline: none;}.arch-tab.active{color: white;background: transparent;}.arch-tab svg{width: 1rem;height: 1rem;flex-shrink: 0;transition: color 0.2s ease;}.arch-tab.active svg{color: white;}.architecture-diagram-container{position: relative;width: 100%;max-width: 68.75rem;margin: 0 auto;min-height: 20rem;}.arch-diagram-panel{position: absolute;top: 0;left: 0;width: 100%;opacity: 0;transform: translateY(0.5rem);transition: opacity 0.35s ease, transform 0.35s ease;pointer-events: none;visibility: hidden;}.arch-diagram-panel.active{position: relative;opacity: 1;transform: translateY(0);pointer-events: auto;visibility: visible;}.arch-diagram-svg{width: 100%;height: auto;max-height: 17.5rem;}.arch-box{fill: white;stroke-width: 2;stroke-dasharray: 8 4;transition: all 0.3s ease;}.arch-box:hover{filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.1));}.arch-box-blue{stroke: var(--arch-blue);}.arch-box-orange{stroke: var(--arch-orange);}.arch-box-pink{stroke: var(--arch-pink);}.arch-box-green{stroke: var(--arch-green);}.arch-box-purple{stroke: var(--arch-purple);}.arch-inner-box{fill: white;stroke-width: 1.5;transition: transform 0.2s ease;}.arch-inner-box:hover{transform: scale(1.02);}.corner-handle{fill: white;stroke-width: 1.5;}.arch-label{font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;font-size: 0.8125rem;font-weight: 600;font-style: italic;text-anchor: middle;}.label-blue{fill: var(--arch-blue);}.label-orange{fill: var(--arch-orange);}.label-pink{fill: var(--arch-pink);}.label-green{fill: var(--arch-green);}.label-purple{fill: var(--arch-purple);}.arch-icon{stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;fill: none;}.icon-blue{stroke: var(--arch-blue);}.icon-orange{stroke: var(--arch-orange);}.icon-pink{stroke: var(--arch-pink);}.icon-green{stroke: var(--arch-green);}.icon-purple{stroke: var(--arch-purple);}.arch-icon-filled{stroke: none;}.icon-fill-blue{fill: var(--arch-blue);}.icon-fill-orange{fill: var(--arch-orange);}.icon-fill-pink{fill: var(--arch-pink);}.icon-fill-green{fill: var(--arch-green);}.icon-fill-purple{fill: var(--arch-purple);}.arch-connection{fill: none;stroke-width: 2;stroke-dasharray: 8 4;stroke-linecap: round;}.connection-blue{stroke: var(--arch-blue);}.connection-orange{stroke: var(--arch-orange);}.connection-pink{stroke: var(--arch-pink);}.connection-green{stroke: var(--arch-green);}.connection-purple{stroke: var(--arch-purple);}.connection-gray{stroke: #94a3b8;}@keyframes flowDash{0%{stroke-dashoffset: 0;}100%{stroke-dashoffset: -24;}}@keyframes pulseGlow{0%,100%{opacity: 0.6;}50%{opacity: 1;}}@keyframes floatBox{0%,100%{transform: translateY(0);}50%{transform: translateY(-0.25rem);}}@keyframes scaleNode{0%,100%{transform: scale(1);}50%{transform: scale(1.1);}}.animate-flow{animation: flowDash 1.2s linear infinite;}.animate-pulse{animation: pulseGlow 2s ease-in-out infinite;}.animate-float{animation: floatBox 4s ease-in-out infinite;transform-origin: center;transform-box: fill-box;}.animate-scale{animation: scaleNode 2s ease-in-out infinite;transform-origin: center;transform-box: fill-box;}.delay-1{animation-delay: 0s;}.delay-2{animation-delay: 0.2s;}.delay-3{animation-delay: 0.4s;}.delay-4{animation-delay: 0.6s;}.delay-5{animation-delay: 0.8s;}.architecture-content{display: grid;grid-template-columns: 1fr 20rem;gap: 3rem;align-items: start;margin-top: 2rem;padding: 0 1rem;}.arch-description{max-width: 37.5rem;}.arch-description h3{font-size: 1.125rem;font-weight: 700;color: #1e293b;margin-bottom: 1rem;line-height: 1.5;}.arch-testimonial{font-size: 0.9375rem;color: #64748b;line-height: 1.7;margin-bottom: 1.25rem;font-style: italic;}.arch-testimonial::before{content: '"';}.arch-testimonial::after{content: '"';}.arch-source{display: inline-flex;align-items: center;gap: 0.5rem;padding: 0.5rem 1rem;background: white;border: 0.0625rem solid #e5e7eb;border-radius: 624.9375rem;font-size: 0.8125rem;font-weight: 500;color: #374151;}.arch-source img{width: 1.25rem;height: 1.25rem;border-radius: 0.25rem;}.arch-browser-preview{background: white;border-radius: 0.75rem;box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.08);overflow: hidden;border: 0.0625rem solid #e5e7eb;}.browser-header{display: flex;align-items: center;gap: 0.5rem;padding: 0.75rem 1rem;background: #f9fafb;border-bottom: 0.0625rem solid #e5e7eb;}.browser-dots{display: flex;gap: 0.375rem;}.browser-dot{width: 0.625rem;height: 0.625rem;border-radius: 50%;background: #e5e7eb;}.browser-logo{margin-left: auto;width: 1.5rem;height: 1.5rem;color: var(--arch-blue);}.browser-content{padding: 1.25rem;}.browser-content-line{height: 0.75rem;background: #f1f5f9;border-radius: 0.25rem;margin-bottom: 0.75rem;}.browser-content-line:nth-child(1){width: 80%;}.browser-content-line:nth-child(2){width: 100%;}.browser-content-line:nth-child(3){width: 60%;}.browser-content-line:nth-child(4){width: 90%;margin-top: 1.5rem;}.browser-content-line:nth-child(5){width: 70%;}.browser-connection{position: absolute;right: 0;top: 50%;width: 9.375rem;height: 12.5rem;pointer-events: none;}@media (max-width: 64rem){.architecture-content{grid-template-columns: 1fr;}.arch-browser-preview{max-width: 20rem;margin: 0 auto;}.browser-connection{display: none;}.architecture-panel-0{padding: 3.5rem 1.5rem 2rem;}.architecture-diagram-container{min-height: 17.5rem;}.arch-diagram-svg{max-height: 16.25rem;}}@media (max-width: 48rem){.architecture-section{padding: 3rem 1rem 4rem;}.architecture-header{margin-bottom: 2rem;}.architecture-header h2{font-size: 1.375rem;line-height: 1.3;}.architecture-header p{font-size: 0.8125rem;white-space: normal;max-width: 100%;padding: 0 0.5rem;}.architecture-tabs{gap: 0.125rem;padding: 0.25rem;max-width: calc(100% - 2rem);}.tab-indicator{top: 0.25rem;left: 0.25rem;height: calc(100% - 0.5rem);}.arch-tab{padding: 0.5rem 0.625rem;font-size: 0.6875rem;}.arch-tab svg{width: 0.875rem;height: 0.875rem;}.arch-diagram-svg{max-height: 12.5rem;}.architecture-diagram-container{min-height: 13.75rem;overflow-x: auto;-webkit-overflow-scrolling: touch;}.arch-description h3{font-size: 1rem;}.architecture-panel-0{padding: 3rem 0.75rem 1.5rem;border-radius: 0.5rem;margin: 0 0.5rem;}.architecture-panel-0::before,.architecture-panel-0::after,.architecture-panel-0 .corner-bl,.architecture-panel-0 .corner-br{width: 0.5rem;height: 0.5rem;}.architecture-panel-0::before{top: -0.25rem;left: -0.25rem;}.architecture-panel-0::after{top: -0.25rem;right: -0.25rem;}.architecture-panel-0 .corner-bl{bottom: -0.25rem;left: -0.25rem;}.architecture-panel-0 .corner-br{bottom: -0.25rem;right: -0.25rem;}.arch-triangle{width: 2.5rem;height: 2.5rem;}.arch-triangle-tr{top: 3.125rem;right: 0.9375rem;}.arch-triangle-bl{bottom: 0.9375rem;left: 0.9375rem;}}@media (max-width: 37.5rem){.arch-tab span{display: none;}.arch-tab{padding: 0.5rem 0.625rem;}.arch-tab svg{width: 1rem;height: 1rem;}}@media (max-width: 30rem){.architecture-section{padding: 2rem 0.5rem 3rem;}.architecture-header{margin-bottom: 1.75rem;}.architecture-header h2{font-size: 1.125rem;padding: 0 0.5rem;}.architecture-header p{font-size: 0.75rem;}.architecture-tabs{padding: 0.1875rem;gap: 0.0625rem;}.tab-indicator{top: 0.1875rem;left: 0.1875rem;height: calc(100% - 0.375rem);}.arch-tab{padding: 0.4375rem 0.5rem;}.arch-tab svg{width: 1rem;height: 1rem;}.architecture-panel-0{padding: 2.25rem 0.5rem 1.25rem;border-radius: 0.375rem;margin: 0 0.25rem;}.architecture-diagram-container{min-height: 11.25rem;}.arch-diagram-svg{max-height: 10rem;min-width: 31.25rem;}.arch-triangle{display: none;}.architecture-panel-0::before,.architecture-panel-0::after,.architecture-panel-0 .corner-bl,.architecture-panel-0 .corner-br{display: none;}}.features-grid-pattern{display: none;}.features-hero-section{display: none;}