/* source-sha256:30686d77cb274a34f755573c762b0c8d14d174872593e045499fb994a3ebc5ea */
:root { --navy-980: #020b16; --navy-950: #03101f; --navy-880: #082541; --cyan: #00d4ff; --turquoise: #23f0d0; --white: #ffffff; --offwhite: #f5fbff; --silver: #d7e7f2; --muted: #9cb5c7; --border: rgba(215, 231, 242, 0.16); --glow: rgba(0, 212, 255, 0.24); --bg: var(--navy-980); --bg-soft: var(--navy-950); --card: rgba(8, 37, 65, 0.7); --text: var(--white); --text-soft: var(--silver); --header: rgba(2, 11, 22, 0.82); --shadow: 0 28px 80px rgba(0, 0, 0, 0.34); --premium-ring: rgba(0, 212, 255, 0.32); --radius-sm: 14px; --radius-md: 20px; --radius-lg: 28px; --space-section: clamp(76px, 8vw, 112px); --header-height: 88px; --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --motion-duration: 620ms; } [data-theme="light"] { --bg: var(--offwhite); --bg-soft: #ffffff; --card: rgba(255, 255, 255, 0.86); --text: #06182d; --text-soft: #385a74; --muted: #5c7689; --border: rgba(6, 24, 45, 0.12); --header: rgba(255, 255, 255, 0.88); --shadow: 0 24px 70px rgba(6, 24, 45, 0.13); --premium-ring: rgba(0, 212, 255, 0.22); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html:focus-within { scroll-behavior: smooth; } main { min-width: 0; outline: none; } section[id] { scroll-margin-top: calc(var(--header-height) + 24px); } h1, h2, h3 { text-wrap: balance; } p, li { text-wrap: pretty; overflow-wrap: break-word; } .skip-link { position: fixed; z-index: 1200; inset-block-start: 12px; inset-inline-start: 16px; max-width: calc(100vw - 32px); padding: 11px 16px; border: 1px solid rgba(35, 240, 208, 0.5); border-radius: 12px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 16px 36px rgba(0, 212, 255, 0.24); font-weight: 900; transform: translateY(-160%); transition: transform 0.2s ease; } .skip-link:focus-visible { transform: translateY(0); } body { margin: 0; background: radial-gradient(circle at 14% 12%, rgba(0, 212, 255, 0.15), transparent 30rem), radial-gradient(circle at 84% 8%, rgba(35, 240, 208, 0.13), transparent 34rem), linear-gradient(180deg, var(--bg), var(--bg-soft)); color: var(--text); font-family: "Cairo", "Inter", system-ui, sans-serif; overflow-x: hidden; min-width: 320px; } .ambient-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 212, 255, 0.035) 1px, transparent 1px), linear-gradient(0deg, rgba(35, 240, 208, 0.026) 1px, transparent 1px), radial-gradient(circle at 18% 18%, rgba(0, 212, 255, 0.13), transparent 28rem), radial-gradient(circle at 84% 70%, rgba(35, 240, 208, 0.1), transparent 30rem); background-size: 84px 84px, 84px 84px, auto, auto; opacity: 0.82; transform: translateZ(0); } [data-theme="light"] .ambient-field { opacity: 0.58; background: linear-gradient(90deg, rgba(6, 24, 45, 0.04) 1px, transparent 1px), linear-gradient(0deg, rgba(0, 212, 255, 0.035) 1px, transparent 1px), radial-gradient(circle at 18% 18%, rgba(0, 212, 255, 0.12), transparent 28rem), radial-gradient(circle at 84% 70%, rgba(35, 240, 208, 0.09), transparent 30rem); } html[lang="en"] body { font-family: "Inter", "Cairo", system-ui, sans-serif; } a { color: inherit; text-decoration: none; } p { color: var(--text-soft); line-height: 1.9; } button, a, .navbar-toggler { cursor: pointer; } a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 3px solid rgba(35, 240, 208, 0.72); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(0, 212, 255, 0.16); } .section-pad { padding: var(--space-section) 0; } .section-muted { background: linear-gradient(135deg, rgba(0, 212, 255, 0.055), rgba(35, 240, 208, 0.025)); border-block: 1px solid var(--border); } .site-header { padding: 12px 0; transition: 0.25s ease; min-height: var(--header-height); } .site-header.is-scrolled { background: var(--header); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); box-shadow: 0 18px 56px rgba(0, 0, 0, 0.22); } .site-header::before { content: ""; position: absolute; inset-inline: 8%; inset-block-end: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(35, 240, 208, 0.42), transparent); opacity: 0; transition: opacity 0.25s ease; } .site-header.is-scrolled::before { opacity: 1; } .navbar { padding: 0; } .brand-lockup, .footer-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } .brand-lockup { padding: 2px 0; } .brand-logo-frame { width: auto; max-width: min(28vw, 230px); min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; flex: 0 0 auto; } .site-logo { width: auto; max-height: 54px; object-fit: contain; display: block; filter: drop-shadow(0 10px 24px rgba(0, 212, 255, 0.14)); } .footer-brand span { color: var(--text); display: block; font-size: 1rem; font-weight: 900; line-height: 1.35; } .nav-link { color: rgba(215, 231, 242, 0.86); font-weight: 800; padding: 10px 15px !important; position: relative; border-radius: 999px; transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; border: 1px solid transparent; } .nav-link::after { content: ""; position: absolute; inset-inline-start: 15px; inset-block-end: 5px; width: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--turquoise)); transition: 0.22s ease; } .nav-link:hover, .nav-link.active { color: var(--white); background: rgba(0, 212, 255, 0.08); text-shadow: 0 0 18px rgba(35, 240, 208, 0.32); border-color: rgba(35, 240, 208, 0.18); } .nav-link.active { box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.1), 0 10px 28px rgba(0, 212, 255, 0.1); } [data-theme="light"] .nav-link { color: rgba(6, 24, 45, 0.74); } [data-theme="light"] .nav-link:hover, [data-theme="light"] .nav-link.active { color: var(--navy-950); background: rgba(0, 212, 255, 0.1); } .nav-link:hover::after, .nav-link.active::after { width: 28px; } .nav-actions { display: flex; align-items: center; gap: 10px; } .navbar-toggler, .icon-btn { min-width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(215, 231, 242, 0.055); color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; transition: 0.22s ease; } .icon-btn { padding-inline: 14px; } .theme-toggle { width: 44px; padding-inline: 0; } .navbar-toggler:hover, .icon-btn:hover { border-color: var(--premium-ring); box-shadow: 0 12px 30px rgba(0, 212, 255, 0.14); color: var(--turquoise); } .theme-light-icon, [data-theme="light"] .theme-dark-icon { display: none; } [data-theme="light"] .theme-light-icon { display: inline-block; } .btn { border-radius: var(--radius-sm); padding: 13px 24px; font-weight: 900; border-width: 1px; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; position: relative; overflow: hidden; } .btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.24), transparent 78%); transform: translateX(120%); transition: transform 0.55s ease; } .btn:hover::before { transform: translateX(-120%); } .btn > * { position: relative; z-index: 1; } .btn-cyan { background: linear-gradient(135deg, var(--cyan), var(--turquoise)); color: var(--navy-980); border-color: transparent; box-shadow: 0 16px 38px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.34); } .btn-cyan:hover { color: var(--navy-980); transform: translateY(-3px); box-shadow: 0 22px 48px rgba(0, 212, 255, 0.28); } .btn-outline-tech { color: var(--text); border-color: var(--border); background: rgba(215, 231, 242, 0.045); } .btn-outline-tech:hover { color: var(--navy-980); background: var(--turquoise); border-color: var(--turquoise); } .hero-section, .page-hero { position: relative; min-height: 92svh; display: flex; align-items: center; padding: calc(var(--header-height) + 30px) 0 70px; overflow: hidden; perspective: 1200px; } .page-hero { min-height: 52vh; text-align: center; } .page-hero .container { max-width: 850px; } @media (min-width: 768px) { .page-hero { min-height: auto; padding-top: calc(var(--header-height) + 88px); padding-bottom: 32px; } .page-hero + .section-pad { padding-top: 40px; } } .hero-mesh { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 74px 74px; mask-image: radial-gradient(circle at center, black, transparent 74%); opacity: 0.42; animation: gridDrift 22s linear infinite; } .hero-mesh::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(35, 240, 208, 0.38) 0 2px, transparent 2.5px), radial-gradient(circle, rgba(0, 212, 255, 0.24) 0 1px, transparent 1.8px); background-size: 180px 180px, 260px 260px; background-position: 16px 42px, 120px 86px; opacity: 0.32; } .hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero-particles span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 20px rgba(35, 240, 208, 0.72); opacity: 0.5; animation: particleFloat 12s ease-in-out infinite; } .hero-particles span:nth-child(1) { inset-block-start: 22%; inset-inline-start: 16%; animation-delay: 0s; } .hero-particles span:nth-child(2) { inset-block-start: 35%; inset-inline-start: 42%; animation-delay: 1.8s; } .hero-particles span:nth-child(3) { inset-block-start: 18%; inset-inline-end: 14%; animation-delay: 3.2s; } .hero-particles span:nth-child(4) { inset-block-end: 24%; inset-inline-start: 10%; animation-delay: 4.4s; } .hero-particles span:nth-child(5) { inset-block-end: 30%; inset-inline-end: 28%; animation-delay: 2.6s; } .hero-particles span:nth-child(6) { inset-block-end: 14%; inset-inline-end: 8%; animation-delay: 5.8s; } .hero-copy { position: relative; z-index: 2; } .section-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--turquoise); font-weight: 900; margin-bottom: 16px; font-size: 0.95rem; letter-spacing: 0; } .hero-title, .page-hero h1 { color: var(--text); font-size: clamp(2.35rem, 4.5vw, 5.05rem); font-weight: 900; line-height: 1.16; margin-bottom: 22px; max-width: 760px; text-wrap: balance; letter-spacing: 0; text-shadow: 0 18px 52px rgba(0, 212, 255, 0.12); } .hero-title { background: linear-gradient(135deg, var(--white) 12%, var(--silver) 54%, var(--turquoise) 112%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 18px 34px rgba(0, 212, 255, 0.08)); } [data-theme="light"] .hero-title { background: linear-gradient(135deg, var(--navy-950) 10%, var(--navy-880) 58%, var(--cyan) 112%); -webkit-background-clip: text; background-clip: text; } .hero-text, .page-hero p { font-size: 1.15rem; max-width: 780px; } .hero-text { max-width: 720px; } .hero-actions, .cta-actions, .form-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .hero-note { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; color: var(--turquoise); font-weight: 800; } .hero-console { position: relative; min-height: clamp(430px, 45vw, 510px); border: 1px solid var(--border); border-radius: 32px; background: radial-gradient(circle at 28% 20%, rgba(0, 212, 255, 0.18), transparent 18rem), radial-gradient(circle at 78% 74%, rgba(35, 240, 208, 0.14), transparent 16rem), linear-gradient(145deg, rgba(8, 37, 65, 0.86), rgba(3, 16, 31, 0.62)); box-shadow: 0 0 120px rgba(0, 212, 255, 0.18), var(--shadow); backdrop-filter: blur(20px); overflow: hidden; isolation: isolate; transform-style: preserve-3d; transform: rotateX(var(--hero-rx, 0deg)) rotateY(var(--hero-ry, 0deg)); transition: transform 0.22s ease, box-shadow 0.25s ease, border-color 0.25s ease; will-change: transform; } .hero-console::before { content: ""; position: absolute; inset: 1px; border-radius: 35px; background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 32%, rgba(35, 240, 208, 0.08)), repeating-linear-gradient(90deg, transparent 0 34px, rgba(0, 212, 255, 0.045) 35px 36px); opacity: 0.78; transform: translateZ(20px); } [data-theme="light"] .hero-console { background: radial-gradient(circle at 28% 20%, rgba(0, 212, 255, 0.13), transparent 18rem), radial-gradient(circle at 78% 74%, rgba(35, 240, 208, 0.11), transparent 16rem), linear-gradient(145deg, rgba(255,255,255,0.9), rgba(245,251,255,0.76)); } .console-top { position: relative; z-index: 2; display: flex; gap: 8px; padding: 22px; border-bottom: 1px solid var(--border); } .console-top span { width: 11px; height: 11px; border-radius: 50%; background: var(--cyan); opacity: 0.82; } .dashboard-depth { position: absolute; pointer-events: none; border: 1px solid rgba(35, 240, 208, 0.12); border-radius: 28px; background: linear-gradient(145deg, rgba(0, 212, 255, 0.07), transparent); transform-style: preserve-3d; } .dashboard-depth-1 { inset: 78px 46px 80px; transform: translateZ(12px); } .dashboard-depth-2 { inset: 128px 92px 128px; border-color: rgba(0, 212, 255, 0.16); transform: translateZ(42px); } .console-logo { position: absolute; z-index: 2; inset: 92px 58px 92px; display: grid; place-items: center; border-radius: 30px; border: 1px solid rgba(0, 212, 255, 0.22); background: radial-gradient(circle at center, rgba(0, 212, 255, 0.16), transparent 74%), linear-gradient(145deg, rgba(6, 24, 45, 0.74), rgba(2, 11, 22, 0.48)); box-shadow: inset 0 0 80px rgba(0, 212, 255, 0.1), 0 24px 70px rgba(0, 0, 0, 0.18), 0 0 60px rgba(0, 212, 255, 0.08); transform: translate3d(var(--px, 0), var(--py, 0), 70px); transition: transform 0.2s ease; } [data-theme="light"] .console-logo { background: radial-gradient(circle at center, rgba(0, 212, 255, 0.12), transparent 74%), linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(245, 251, 255, 0.55)); } .console-logo img { width: min(76%, 380px); max-height: 78%; object-fit: contain; filter: drop-shadow(0 22px 46px rgba(0, 212, 255, 0.24)); } .network-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; transform: translate3d(var(--px, 0), var(--py, 0), 38px); transition: transform 0.2s ease; } .network-layer::before, .network-layer::after { content: ""; position: absolute; inset: 22% 12%; background: linear-gradient(32deg, transparent 49.6%, rgba(0, 212, 255, 0.22) 50%, transparent 50.4%), linear-gradient(148deg, transparent 49.6%, rgba(35, 240, 208, 0.18) 50%, transparent 50.4%); opacity: 0.72; } .network-layer::after { inset: 34% 18% 20%; transform: rotate(8deg); opacity: 0.42; } .node { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 22px var(--turquoise); animation: nodePulse 3.8s ease-in-out infinite; } .node-1 { inset-block-start: 23%; inset-inline-start: 16%; } .node-2 { inset-block-start: 38%; inset-inline-end: 18%; } .node-3 { inset-block-end: 27%; inset-inline-start: 23%; } .node-4 { inset-block-end: 18%; inset-inline-end: 26%; } .floating-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 999px; background: rgba(5, 22, 40, 0.74); color: var(--text); font-weight: 900; box-shadow: var(--shadow); backdrop-filter: blur(18px); animation: float 5s ease-in-out infinite; white-space: nowrap; transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform 0.2s ease, border-color 0.25s ease, box-shadow 0.25s ease; } [data-theme="light"] .floating-chip { background: rgba(255, 255, 255, 0.78); } .floating-chip i { color: var(--cyan); } .chip-1 { inset-block-start: 90px; inset-inline-start: 22px; } .chip-2 { inset-block-start: 124px; inset-inline-end: 24px; animation-delay: 0.6s; } .chip-3 { inset-block-end: 96px; inset-inline-start: 34px; animation-delay: 1s; } .chip-4 { inset-block-end: 34px; inset-inline-end: 34px; animation-delay: 1.4s; } @keyframes float { 0%,100% { translate: 0 0; } 50% { translate: 0 -13px; } } @keyframes gridDrift { from { background-position: 0 0, 0 0; } to { background-position: 74px 74px, 74px 74px; } } @keyframes particleFloat { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.28; } 50% { transform: translate3d(14px, -24px, 0); opacity: 0.72; } } @keyframes nodePulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } } .section-heading { max-width: 770px; margin: 0 auto 50px; text-align: center; } .section-title { color: var(--text); font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 900; margin-bottom: 18px; } .glass-panel, .service-card, .project-card, .info-card, .service-detail, .contact-card, .contact-form, .cta-panel { border: 1px solid var(--border); background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 34%), var(--card); box-shadow: var(--shadow); backdrop-filter: blur(18px); transform-style: preserve-3d; } .glass-panel, .cta-panel, .contact-form, .contact-card { border-radius: var(--radius-lg); padding: 34px; } .glass-panel { min-height: 100%; } .service-card, .project-card, .info-card, .service-detail { border-radius: var(--radius-md); padding: 30px; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; position: relative; overflow: hidden; } .tilt-card { transform-style: preserve-3d; } .tilt-card .card-icon, .tilt-card > i, .tilt-card h2, .tilt-card h3 { transform: translateZ(18px); } .tilt-card p, .tilt-card span, .tilt-card strong, .tilt-card .btn { transform: translateZ(10px); } .service-card { min-height: 100%; display: flex; flex-direction: column; } .service-card p { margin-bottom: 0; } .project-card { min-height: 100%; display: flex; flex-direction: column; } .service-card::before, .project-card::before, .service-detail::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), transparent 42%, rgba(35, 240, 208, 0.05)); opacity: 0; transition: 0.25s ease; } .service-card > *, .project-card > *, .service-detail > * { position: relative; z-index: 1; } .service-card:hover, .project-card:hover, .info-card:hover, .service-detail:hover { transform: translateY(-6px); border-color: rgba(35, 240, 208, 0.48); box-shadow: 0 34px 90px rgba(0, 212, 255, 0.14), 0 0 0 1px rgba(35, 240, 208, 0.1); } .service-card:hover::before, .project-card:hover::before, .service-detail:hover::before { opacity: 1; } .card-icon, .project-card > i, .info-card > i { width: 56px; height: 56px; border-radius: 16px; display: inline-grid; place-items: center; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); font-size: 1.55rem; margin-bottom: 20px; box-shadow: 0 14px 32px var(--glow); flex: 0 0 auto; } .service-card h3, .project-card h3, .project-card h2, .info-card h3, .service-detail h2, .contact-card h2 { color: var(--text); font-size: 1.25rem; font-weight: 900; margin-bottom: 14px; } .mini-stats, .contact-line { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .mini-stats span, .contact-line span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(0, 212, 255, 0.08); border: 1px solid var(--border); color: var(--text); font-weight: 800; } .timeline { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; direction: inherit; counter-reset: timeline; } .timeline-item, .method-item, .feature-item { border: 1px solid var(--border); background: var(--card); backdrop-filter: blur(16px); } .timeline-item { min-height: 150px; border-radius: var(--radius-md); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 20px 58px rgba(0, 212, 255, 0.06); position: relative; overflow: hidden; transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease; } .timeline-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(0, 212, 255, 0.1), transparent 42%), radial-gradient(circle at 20% 16%, rgba(35, 240, 208, 0.16), transparent 12rem); opacity: 0; transition: opacity 0.25s ease; } .timeline-item::after { content: ""; position: absolute; inset-inline: 22px; inset-block-start: 58px; height: 1px; background: linear-gradient(90deg, transparent, rgba(35, 240, 208, 0.34), transparent); } .timeline-item:hover { transform: translateY(-5px); border-color: rgba(35, 240, 208, 0.4); box-shadow: 0 24px 68px rgba(0, 212, 255, 0.12); } .timeline-item:hover::before { opacity: 1; } .timeline-item > * { position: relative; z-index: 1; } .timeline-item span, .method-item span { color: var(--turquoise); font-weight: 900; } .timeline-item span { font-family: "Inter", "Cairo", system-ui, sans-serif; font-size: 1.45rem; line-height: 1; } .timeline-item strong, .method-item strong { color: var(--text); font-size: 1.05rem; line-height: 1.65; } .feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .feature-item { border-radius: 17px; padding: 18px; display: flex; gap: 12px; align-items: flex-start; color: var(--text); font-weight: 800; min-height: 78px; transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; } .feature-item:hover { transform: translateY(-3px); border-color: rgba(35, 240, 208, 0.38); box-shadow: 0 18px 46px rgba(0, 212, 255, 0.08); } .feature-item i { color: var(--turquoise); font-size: 1.25rem; flex: 0 0 auto; margin-top: 3px; } .method-list { display: grid; gap: 14px; } .method-item { border-radius: 18px; padding: 20px; display: flex; gap: 16px; align-items: center; } .method-item span { width: 42px; height: 42px; border-radius: 14px; display: inline-grid; place-items: center; background: rgba(0, 212, 255, 0.08); border: 1px solid var(--border); flex: 0 0 auto; } .service-detail-head { display: flex; gap: 16px; align-items: flex-start; } .service-detail { display: flex; flex-direction: column; } .service-detail ul { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 10px; } .service-detail li { display: flex; gap: 10px; color: var(--text-soft); } .service-detail li i { color: var(--turquoise); } .service-detail .btn { margin-top: auto; align-self: flex-start; } .project-card-large { min-height: 100%; } .cta-panel { display: flex; justify-content: space-between; align-items: center; gap: 24px; background: radial-gradient(circle at 18% 22%, rgba(0, 212, 255, 0.18), transparent 26rem), radial-gradient(circle at 84% 72%, rgba(35, 240, 208, 0.12), transparent 22rem), var(--card); box-shadow: 0 34px 110px rgba(0, 212, 255, 0.14), var(--shadow); position: relative; overflow: hidden; transform-style: preserve-3d; } .cta-panel::after { content: ""; position: absolute; inset-inline: 7%; inset-block-start: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(35, 240, 208, 0.62), transparent); opacity: 0.78; } .cta-panel > * { position: relative; z-index: 1; } .cta-panel h2 { color: var(--text); font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 900; } .cta-actions { flex: 0 0 auto; justify-content: flex-end; } .cta-actions .btn { min-width: 148px; } .contact-logo-frame { width: 132px; min-height: 70px; margin-bottom: 22px; } .contact-logo-frame img { max-height: 58px; } .contact-methods { display: grid; gap: 12px; margin-top: 24px; } .contact-methods a, .profile-link { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; } .contact-methods a:hover, .profile-link:hover { color: var(--turquoise); } .contact-methods i, .profile-link i { color: var(--turquoise); } .contact-form label { display: block; color: var(--text); font-weight: 800; margin-bottom: 8px; } .form-control, .form-select { min-height: 54px; border-radius: 14px; border: 1px solid var(--border); background-color: rgba(215, 231, 242, 0.06); color: var(--text); } .form-control:focus, .form-select:focus { border-color: var(--cyan); box-shadow: 0 0 0 0.25rem rgba(0, 212, 255, 0.14); background-color: rgba(215, 231, 242, 0.08); color: var(--text); } .form-select option { color: var(--text); background-color: var(--navy-950); } [data-theme="light"] .form-select option { color: #021326; background-color: #ffffff; } .service-select { position: relative; } .service-select.is-open { z-index: 20; } .service-select.is-enhanced > select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .service-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(215, 231, 242, 0.06); color: var(--text); font: inherit; text-align: start; } .service-select-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .service-select-trigger i { flex: none; color: var(--cyan); transition: transform 0.18s ease; } .service-select.is-open .service-select-trigger i { transform: rotate(180deg); } .service-select-trigger:hover, .service-select.is-open .service-select-trigger { border-color: var(--cyan); background: rgba(215, 231, 242, 0.08); } .service-select-trigger:focus-visible { outline: 3px solid rgba(35, 240, 208, 0.72); outline-offset: 3px; } .service-select-trigger.is-invalid { border-color: #f18b96; } .service-select-list { position: absolute; inset-inline: 0; top: calc(100% + 8px); z-index: 30; max-height: min(300px, 55vh); overflow-y: auto; padding: 6px; border: 1px solid rgba(35, 240, 208, 0.32); border-radius: 14px; background: #071a2d; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.38); } .service-select.open-above .service-select-list { top: auto; bottom: calc(100% + 8px); } .service-select-list[hidden] { display: none; } .service-select-option { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 9px; color: #eaf8fc; font: inherit; text-align: start; cursor: pointer; } .service-select-option:hover, .service-select-option:focus-visible { outline: none; background: rgba(0, 212, 255, 0.15); } .service-select-option[aria-selected="true"] { color: var(--turquoise); background: rgba(35, 240, 208, 0.12); } [data-theme="light"] .service-select-trigger { color: #061a2e; border-color: rgba(6, 26, 46, 0.14); background: rgba(255, 255, 255, 0.94); } [data-theme="light"] .service-select-trigger:hover, [data-theme="light"] .service-select.is-open .service-select-trigger { background: #ffffff; border-color: rgba(0, 157, 194, 0.48); } [data-theme="light"] .service-select-list { background: #ffffff; border-color: rgba(6, 26, 46, 0.16); box-shadow: 0 18px 40px rgba(6, 35, 58, 0.16); } [data-theme="light"] .service-select-option { color: #061a2e; } [data-theme="light"] .service-select-option:hover, [data-theme="light"] .service-select-option:focus-visible { background: rgba(0, 157, 194, 0.1); } [data-theme="light"] .service-select-option[aria-selected="true"] { color: #006b80; background: rgba(0, 157, 194, 0.12); } .invalid-feedback { color: var(--turquoise); } .alert-success-subtle { background: rgba(35, 240, 208, 0.1); border: 1px solid rgba(35, 240, 208, 0.25); color: var(--text); border-radius: 16px; } .site-footer { padding: 78px 0 30px; border-top: 1px solid var(--border); background: rgba(2, 11, 22, 0.38); position: relative; overflow: hidden; } .site-footer::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.55), rgba(35, 240, 208, 0.35), transparent); } [data-theme="light"] .site-footer { background: rgba(255,255,255,0.72); } .footer-logo-frame .site-logo { max-height: 64px; } .footer-brand { margin-bottom: 18px; } .site-footer h3 { color: var(--text); font-size: 1.05rem; font-weight: 900; margin-bottom: 18px; } .footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .footer-links a { color: var(--text-soft); } .footer-links a:hover { color: var(--turquoise); } .footer-bottom { border-top: 1px solid var(--border); margin-top: 42px; padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted); } .whatsapp-float { position: fixed; inset-inline-end: 22px; inset-block-end: 22px; z-index: 20; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 18px 42px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.34); font-size: 1.7rem; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; } .whatsapp-float.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .whatsapp-float:hover { color: var(--navy-980); transform: translateY(-4px); box-shadow: 0 24px 58px rgba(0, 212, 255, 0.28); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } .hero-console, .network-layer, .floating-chip, .console-logo, .tilt-card { transform: none !important; } [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } } .admin-user-chip { min-height: 44px; max-width: 190px; padding: 8px 13px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(35, 240, 208, 0.16); border-radius: 14px; color: var(--text-soft); background: rgba(35, 240, 208, 0.045); font-size: 0.8rem; font-weight: 900; } .admin-user-chip i { color: var(--turquoise); } .admin-user-chip span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .admin-topbar-actions form { margin: 0; } .admin-logout-button:hover, .admin-logout-button:focus-visible { color: #ffadad; border-color: rgba(255, 98, 98, 0.26); background: rgba(255, 98, 98, 0.07); } .admin-login-body { display: grid; place-items: center; padding: 24px; overflow-x: hidden; } .admin-login-shell { width: 100%; min-height: calc(100vh - 48px); display: grid; place-items: center; } .admin-login-panel { position: relative; width: min(100%, 500px); padding: clamp(24px, 5vw, 42px); overflow: hidden; border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 26px; background: radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.11), transparent 18rem), linear-gradient(145deg, rgba(8, 37, 65, 0.92), rgba(2, 11, 22, 0.94)); box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); } .admin-login-panel::after { content: ""; position: absolute; inset-inline-end: -80px; inset-block-end: -105px; width: 230px; height: 230px; border: 1px solid rgba(0, 212, 255, 0.13); border-radius: 50%; pointer-events: none; } .admin-login-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; } .admin-login-brand img { width: 108px; height: 64px; object-fit: contain; } .admin-login-brand div { display: grid; gap: 2px; } .admin-login-brand span { color: var(--turquoise); font-family: "Inter", "Cairo", sans-serif; font-size: 0.72rem; font-weight: 900; } .admin-login-brand strong { color: var(--white); font-size: 0.95rem; font-weight: 950; } .admin-login-theme { position: absolute; inset-block-start: 24px; inset-inline-end: 24px; z-index: 2; } .admin-login-heading { position: relative; z-index: 1; margin: 34px 0 24px; } .admin-login-heading h1 { margin: 6px 0 8px; color: var(--white); font-size: clamp(1.7rem, 5vw, 2.25rem); font-weight: 950; } .admin-login-heading p { margin: 0; color: var(--text-soft); line-height: 1.8; } .admin-login-form { position: relative; z-index: 1; display: grid; gap: 17px; } .admin-login-form > label:not(.admin-login-remember) { display: grid; gap: 8px; color: var(--text-soft); font-size: 0.86rem; font-weight: 900; } .admin-login-input { min-height: 54px; padding-inline: 15px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(215, 231, 242, 0.15); border-radius: 15px; background: rgba(255, 255, 255, 0.045); transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; } .admin-login-input:focus-within { border-color: rgba(35, 240, 208, 0.42); background: rgba(35, 240, 208, 0.045); box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.08); } .admin-login-input > i { color: var(--cyan); } .admin-login-input input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--white); background: transparent; font-family: "Inter", "Cairo", sans-serif; } .admin-login-input input::placeholder { color: var(--muted); } .admin-login-input button { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 10px; color: var(--muted); background: transparent; } .admin-login-input button:hover, .admin-login-input button:focus-visible { color: var(--turquoise); background: rgba(35, 240, 208, 0.07); } .admin-login-remember { display: flex; align-items: center; gap: 9px; color: var(--text-soft); font-size: 0.82rem; font-weight: 800; cursor: pointer; } .admin-login-remember input { width: 18px; height: 18px; accent-color: var(--turquoise); } .admin-login-submit { width: 100%; min-height: 52px; margin-top: 3px; font-size: 0.94rem; line-height: 1.2; } .admin-login-security { position: relative; z-index: 1; margin: 22px 0 0; display: flex; justify-content: center; align-items: center; gap: 7px; color: var(--muted); font-size: 0.75rem; font-weight: 800; } .admin-login-security i { color: var(--turquoise); } [data-theme="light"] .admin-user-chip { color: #385a74; border-color: rgba(0, 166, 210, 0.18); background: rgba(255, 255, 255, 0.78); } [data-theme="light"] .admin-login-panel { border-color: rgba(0, 166, 210, 0.2); background: radial-gradient(circle at 100% 0%, rgba(23, 216, 255, 0.1), transparent 18rem), linear-gradient(145deg, #ffffff, #f5fbfd); box-shadow: 0 30px 76px rgba(6, 26, 46, 0.14); } [data-theme="light"] .admin-login-brand strong, [data-theme="light"] .admin-login-heading h1, [data-theme="light"] .admin-login-input input { color: #061a2e; } [data-theme="light"] .admin-login-heading p, [data-theme="light"] .admin-login-form > label:not(.admin-login-remember), [data-theme="light"] .admin-login-remember { color: #4a6478; } [data-theme="light"] .admin-login-input { border-color: rgba(0, 166, 210, 0.18); background: rgba(255, 255, 255, 0.88); } @media (max-width: 575px) { .admin-login-body { padding: 14px; } .admin-login-shell { min-height: calc(100vh - 28px); } .admin-login-panel { padding: 22px; border-radius: 22px; } .admin-login-brand img { width: 88px; } .admin-login-theme { inset-block-start: 18px; inset-inline-end: 18px; } .admin-user-chip, .admin-topbar-actions .admin-ghost-link { display: none; } } .admin-user-chip { text-decoration: none; } .admin-user-chip:hover, .admin-user-chip:focus-visible { color: var(--turquoise); border-color: rgba(35, 240, 208, 0.3); background: rgba(35, 240, 208, 0.075); } .admin-account-overview { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .admin-account-identity, .admin-account-state, .admin-account-card-head { display: flex; align-items: center; gap: 15px; } .admin-account-avatar { width: 68px; height: 68px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(35, 240, 208, 0.25); border-radius: 19px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 16px 36px rgba(0, 212, 255, 0.16); font-size: 1.65rem; font-weight: 950; } .admin-account-identity h2 { margin: 5px 0 2px; color: var(--white); font-size: 1.35rem; font-weight: 950; } .admin-account-identity p { margin: 0; color: var(--text-soft); font-family: "Inter", "Cairo", sans-serif; font-size: 0.84rem; } .admin-account-state { max-width: 360px; padding: 13px 15px; border: 1px solid rgba(35, 240, 208, 0.17); border-radius: 16px; background: rgba(35, 240, 208, 0.045); } .admin-account-state > i { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: var(--turquoise); background: rgba(35, 240, 208, 0.08); font-size: 1.15rem; } .admin-account-state div { display: grid; gap: 3px; } .admin-account-state strong { color: var(--white); font-size: 0.87rem; font-weight: 950; } .admin-account-state span { color: var(--text-soft); font-size: 0.74rem; line-height: 1.6; } .admin-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; } .admin-account-card { min-width: 0; } .admin-account-card-head { align-items: flex-start; margin-bottom: 22px; } .admin-account-card-head > i { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(0, 212, 255, 0.2); border-radius: 15px; color: var(--cyan); background: rgba(0, 212, 255, 0.06); font-size: 1.2rem; } .admin-account-card-head h2 { margin: 5px 0 5px; color: var(--white); font-size: 1.12rem; font-weight: 950; } .admin-account-card-head p { margin: 0; color: var(--text-soft); font-size: 0.8rem; line-height: 1.7; } .admin-account-form { display: grid; gap: 16px; } .admin-account-form > label { display: grid; gap: 8px; color: var(--text-soft); font-size: 0.83rem; font-weight: 900; } .admin-account-input { min-height: 52px; padding-inline: 14px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 14px; background: rgba(255, 255, 255, 0.04); transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; } .admin-account-input:focus-within { border-color: rgba(35, 240, 208, 0.38); background: rgba(35, 240, 208, 0.04); box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.075); } .admin-account-input > i { flex: 0 0 auto; color: var(--cyan); } .admin-account-input input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--white); background: transparent; font-family: "Inter", "Cairo", sans-serif; } .admin-account-input button { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 10px; color: var(--muted); background: transparent; } .admin-account-input button:hover, .admin-account-input button:focus-visible { color: var(--turquoise); background: rgba(35, 240, 208, 0.07); } .admin-account-form .admin-primary-button { width: 100%; min-height: 50px; margin-top: 3px; } [data-theme="light"] .admin-account-identity h2, [data-theme="light"] .admin-account-state strong, [data-theme="light"] .admin-account-card-head h2, [data-theme="light"] .admin-account-input input { color: #061a2e; } [data-theme="light"] .admin-account-identity p, [data-theme="light"] .admin-account-state span, [data-theme="light"] .admin-account-card-head p, [data-theme="light"] .admin-account-form > label { color: #4a6478; } [data-theme="light"] .admin-account-state, [data-theme="light"] .admin-account-input { border-color: rgba(0, 166, 210, 0.18); background: rgba(255, 255, 255, 0.78); } @media (max-width: 991px) { .admin-account-grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .site-body .brand-logo-frame { width: clamp(142px, 40vw, 164px); max-width: clamp(142px, 40vw, 164px); } .site-body .site-logo { max-height: 46px; } } @media (max-width: 575px) { .admin-account-overview { align-items: stretch; flex-direction: column; } .admin-account-state { max-width: none; } .admin-account-identity { align-items: flex-start; } .admin-account-avatar { width: 56px; height: 56px; border-radius: 16px; font-size: 1.3rem; } } @media (max-width: 1199px) { .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hero-title { font-size: clamp(2.25rem, 4.3vw, 4.1rem); } } @media (max-width: 991px) { .navbar-collapse { margin-top: 16px; padding: 20px; border: 1px solid var(--border); border-radius: 22px; background: var(--header); backdrop-filter: blur(20px); box-shadow: var(--shadow); } .navbar-nav { gap: 4px; margin-bottom: 14px; } .nav-link { padding: 12px 14px !important; } .nav-actions { align-items: stretch; flex-wrap: wrap; gap: 12px; } .nav-actions .icon-btn { flex: 1 1 0; } .theme-toggle { flex: 0 0 52px; width: 52px; } .nav-cta { width: 100%; } .hero-section { min-height: auto; padding-top: calc(var(--header-height) + 28px); } .hero-console { min-height: 420px; } .site-logo { max-height: 50px; } .cta-panel { align-items: flex-start; flex-direction: column; } .cta-actions { justify-content: flex-start; } } @media (max-width: 767px) { :root { --header-height: 76px; } .section-pad { padding: 70px 0; } .hero-section, .page-hero { padding-top: 106px; padding-bottom: 64px; } .page-hero { min-height: auto; padding-bottom: 34px; } .page-hero + .section-pad { padding-top: 28px; } .site-header { padding: 10px 0; } .brand-logo-frame { max-width: 190px; } .site-logo { max-height: 44px; } .hero-title, .page-hero h1 { font-size: clamp(2.1rem, 9vw, 2.7rem); line-height: 1.22; } .hero-text, .page-hero p { font-size: 1rem; } .hero-actions .btn { width: 100%; justify-content: center; } .hero-console { min-height: 360px; border-radius: 24px; } .hero-console, .network-layer, .floating-chip, .console-logo, .tilt-card { transform: none !important; } .hero-particles span:nth-child(n+4) { display: none; } .hero-mesh { animation: none; } .console-logo { inset: 84px 20px 96px; border-radius: 22px; } .console-logo img { width: min(82%, 290px); } .floating-chip { padding: 8px 10px; font-size: 0.78rem; } .chip-1 { inset-block-start: 76px; inset-inline-start: 14px; } .chip-2 { inset-block-start: 112px; inset-inline-end: 12px; } .chip-3 { inset-block-end: 72px; inset-inline-start: 14px; } .chip-4 { inset-block-end: 26px; inset-inline-end: 14px; } .timeline, .feature-grid { grid-template-columns: 1fr; } .timeline-item, .service-card, .project-card { min-height: auto; } .glass-panel, .cta-panel, .contact-form, .contact-card { padding: 24px; border-radius: 22px; } .footer-bottom { flex-direction: column; } .whatsapp-float { width: 48px; height: 48px; border-radius: 15px; font-size: 1.35rem; inset-inline-end: 12px; inset-block-end: 12px; } } @media (max-width: 420px) { .navbar > .container { gap: 8px; } .brand-logo-frame { max-width: 150px; } .site-logo { max-height: 40px; } .navbar-toggler { min-width: 42px; height: 42px; border-radius: 13px; } .hero-actions, .cta-actions, .form-actions { width: 100%; } .cta-actions .btn, .form-actions .btn { width: 100%; } .floating-chip { max-width: calc(50% - 18px); overflow: hidden; text-overflow: ellipsis; } .chip-1 { inset-inline-start: 10px; } .chip-2 { inset-inline-end: 10px; } .chip-3 { inset-inline-start: 10px; } .chip-4 { inset-inline-end: 10px; } } .container { --bs-gutter-x: clamp(1.5rem, 3vw, 2.5rem); } .site-header { background: transparent; border: 0; box-shadow: none; } .site-header .navbar > .container { padding-block: 8px; border: 1px solid transparent; border-radius: 20px; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .site-header.is-scrolled { background: transparent; border: 0; box-shadow: none; } .site-header.is-scrolled .navbar > .container { background: var(--header); border-color: var(--border); box-shadow: 0 20px 54px rgba(0, 0, 0, 0.2); backdrop-filter: blur(22px) saturate(140%); } .navbar-nav { gap: 2px; padding: 4px; border: 1px solid rgba(215, 231, 242, 0.08); border-radius: 999px; background: rgba(215, 231, 242, 0.025); } .language-toggle { gap: 8px; } .language-toggle i { color: var(--turquoise); } .btn { gap: 10px; } .btn i { font-size: 1rem; } html[lang="en"] .bi-arrow-up-left { transform: scaleX(-1); } .hero-section::after { content: ""; position: absolute; inset-inline: 8%; inset-block-end: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent); } .hero-copy::before { content: ""; position: absolute; inset-inline-start: -28px; inset-block: 5% 8%; width: 1px; background: linear-gradient(180deg, transparent, var(--cyan), var(--turquoise), transparent); opacity: 0.5; } .hero-title { max-width: 720px; } .hero-text { max-width: 650px; } .hero-proof { display: inline-flex; align-items: center; gap: 11px; margin-top: 25px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 999px; background: rgba(215, 231, 242, 0.035); color: var(--text-soft); font-size: 0.9rem; font-weight: 800; } .proof-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 0 5px rgba(35, 240, 208, 0.1), 0 0 20px rgba(35, 240, 208, 0.7); } .hero-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.68; filter: saturate(0.92) contrast(1.05); transform: scale(1.035) translateZ(1px); } .hero-console::before { z-index: 1; } .console-top { z-index: 5; } .floating-chip { z-index: 6; } .console-logo { z-index: 4; inset: 112px 78px 112px; background: rgba(2, 11, 22, 0.64); backdrop-filter: blur(13px) saturate(130%); box-shadow: inset 0 0 70px rgba(0, 212, 255, 0.08), 0 30px 80px rgba(0, 0, 0, 0.3); } [data-theme="light"] .hero-art { opacity: 0.32; filter: saturate(0.75) contrast(0.92); } [data-theme="light"] .console-logo { background: rgba(255, 255, 255, 0.74); } .section-heading { position: relative; } .section-index { display: block; width: max-content; margin: 0 auto 9px; color: rgba(0, 212, 255, 0.58); font-family: "Inter", "Cairo", sans-serif; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; } .section-index::after { content: ""; display: inline-block; width: 34px; height: 1px; margin-inline-start: 9px; vertical-align: middle; background: linear-gradient(90deg, var(--cyan), transparent); } .section-index-inline { margin: 0 0 10px; } .about-glass { position: relative; overflow: hidden; padding-inline-end: clamp(34px, 8vw, 108px); } .about-glass::after { content: ""; position: absolute; inset-inline-end: -52px; inset-block-start: -62px; width: 180px; height: 180px; border: 1px solid rgba(0, 212, 255, 0.16); border-radius: 50%; box-shadow: inset 0 0 50px rgba(0, 212, 255, 0.06); } .panel-index { position: absolute; inset-inline-end: 30px; inset-block-start: 20px; color: rgba(215, 231, 242, 0.08); font-family: "Inter", sans-serif; font-size: 4.5rem; font-weight: 900; line-height: 1; } [data-theme="light"] .panel-index { color: rgba(6, 24, 45, 0.07); } .card-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; width: 100%; } .card-sequence { color: var(--muted); font-family: "Inter", "Cairo", sans-serif; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; } .service-card { padding-bottom: 24px; } .service-card .card-arrow { width: 42px; height: 42px; margin-top: auto; border: 1px solid var(--border); border-radius: 13px; display: inline-grid; place-items: center; color: var(--turquoise); background: rgba(0, 212, 255, 0.05); transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease; } .service-card .card-arrow:hover { color: var(--navy-980); background: var(--turquoise); border-color: var(--turquoise); } .project-card .card-topline > i { width: 56px; height: 56px; border-radius: 16px; display: inline-grid; place-items: center; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); font-size: 1.55rem; margin-bottom: 20px; box-shadow: 0 14px 32px var(--glow); } .service-card p, .project-card p { margin-bottom: 22px; } .section-muted .service-card { background-color: rgba(8, 37, 65, 0.58); } [data-theme="light"] .section-muted .service-card { background-color: rgba(255, 255, 255, 0.88); } .row > div:nth-child(3n + 2) > .service-card, .row > div:nth-child(3n + 2) > .project-card { border-color: rgba(0, 212, 255, 0.24); } .timeline { position: relative; } .timeline-item { min-height: 174px; padding: 23px; } .timeline-item span { width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid rgba(35, 240, 208, 0.28); border-radius: 14px; background: rgba(0, 212, 255, 0.08); font-size: 1rem; } .timeline-item strong { max-width: 13ch; } .timeline-item::after { inset-block-start: 78px; } .feature-item { position: relative; align-items: center; min-height: 92px; padding: 19px 52px 19px 19px; overflow: hidden; } [dir="rtl"] .feature-item { padding: 19px 19px 19px 52px; } .feature-item .feature-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(35, 240, 208, 0.22); border-radius: 12px; background: rgba(0, 212, 255, 0.07); flex: 0 0 auto; } .feature-item .feature-icon i { margin: 0; } .feature-item small { position: absolute; inset-inline-end: 16px; inset-block-start: 14px; color: rgba(215, 231, 242, 0.13); font-family: "Inter", sans-serif; font-size: 1.3rem; font-weight: 900; } [data-theme="light"] .feature-item small { color: rgba(6, 24, 45, 0.1); } .feature-grid .feature-item:first-child, .feature-grid .feature-item:last-child { grid-column: span 2; } .why-section { position: relative; overflow: hidden; } .why-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 28%, rgba(0, 212, 255, 0.16), transparent 27rem), radial-gradient(circle at 82% 72%, rgba(35, 240, 208, 0.12), transparent 24rem); pointer-events: none; } .why-section > .container { position: relative; z-index: 1; } .why-panel { position: relative; display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 48px); align-items: stretch; padding: clamp(24px, 4vw, 46px); border: 1px solid rgba(0, 212, 255, 0.24); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 34%), radial-gradient(circle at 34% 10%, rgba(0, 212, 255, 0.12), transparent 22rem), rgba(4, 24, 43, 0.76); box-shadow: 0 34px 110px rgba(0, 0, 0, 0.24), 0 0 70px rgba(0, 212, 255, 0.07); backdrop-filter: blur(20px); overflow: hidden; isolation: isolate; } .why-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(90deg, black, transparent 82%); } .why-copy { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 100%; padding: clamp(4px, 1vw, 10px); } .why-copy .section-title { max-width: 11ch; margin-bottom: 18px; } .why-copy p { max-width: 520px; margin: 0; color: var(--text-soft); font-size: 1.05rem; line-height: 2; } .why-signal { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .why-signal span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid rgba(35, 240, 208, 0.2); border-radius: 999px; color: var(--text); background: rgba(0, 212, 255, 0.07); font-size: 0.82rem; font-weight: 900; } .why-signal i { color: var(--turquoise); } .why-feature-wrap { min-width: 0; } .why-feature-grid { height: 100%; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(118px, auto); gap: 16px; } .why-feature-grid .feature-item { grid-column: span 3; align-items: flex-start; min-height: 118px; padding: 22px 58px 22px 22px; border-color: rgba(215, 231, 242, 0.14); background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 42%), rgba(6, 30, 53, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 60px rgba(0, 0, 0, 0.12); } [dir="rtl"] .why-feature-grid .feature-item { padding: 22px 22px 22px 58px; } .why-feature-grid .feature-item:nth-child(1), .why-feature-grid .feature-item:nth-child(4), .why-feature-grid .feature-item:nth-child(7) { grid-column: span 6; } .why-feature-grid .feature-item::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 12%, rgba(35, 240, 208, 0.16), transparent 12rem), linear-gradient(135deg, rgba(0, 212, 255, 0.09), transparent 46%); opacity: 0; transition: opacity 0.24s ease; } .why-feature-grid .feature-item:hover::before { opacity: 1; } .why-feature-grid .feature-item > * { position: relative; z-index: 1; } .why-feature-grid .feature-icon { width: 46px; height: 46px; margin-top: 0; border-radius: 15px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 15px 32px rgba(0, 212, 255, 0.18); } .why-feature-grid .feature-icon i { color: var(--navy-980); font-size: 1.12rem; } .why-feature-grid .feature-item span:not(.feature-icon) { max-width: 36ch; line-height: 1.75; } .why-feature-grid .feature-item small { inset-block-start: 16px; font-size: 1.55rem; } .why-orbit { position: absolute; inset-inline-start: -110px; inset-block-end: -130px; width: 360px; height: 360px; border: 1px solid rgba(0, 212, 255, 0.13); border-radius: 50%; pointer-events: none; } .why-orbit span { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 22px rgba(35, 240, 208, 0.7); } .why-orbit span:nth-child(1) { inset-inline-start: 62%; inset-block-start: 4%; } .why-orbit span:nth-child(2) { inset-inline-start: 12%; inset-block-start: 48%; opacity: 0.72; } .why-orbit span:nth-child(3) { inset-inline-start: 74%; inset-block-start: 72%; opacity: 0.52; } [data-theme="light"] .why-panel { border-color: rgba(0, 150, 190, 0.2); background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 251, 255, 0.86)), radial-gradient(circle at 34% 10%, rgba(0, 180, 220, 0.12), transparent 22rem); } [data-theme="light"] .why-feature-grid .feature-item { border-color: rgba(6, 24, 45, 0.09); background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 251, 255, 0.86)); } [data-theme="light"] .why-signal span { background: rgba(0, 150, 190, 0.08); border-color: rgba(0, 150, 190, 0.18); } .why-trust-panel { position: relative; overflow: hidden; padding: clamp(24px, 4.5vw, 54px); border: 1px solid rgba(0, 212, 255, 0.26); border-radius: var(--radius-lg); background: radial-gradient(circle at 12% 8%, rgba(0, 212, 255, 0.16), transparent 24rem), radial-gradient(circle at 92% 90%, rgba(35, 240, 208, 0.12), transparent 24rem), linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 38%), rgba(4, 22, 41, 0.84); box-shadow: 0 34px 110px rgba(0, 0, 0, 0.26), 0 0 80px rgba(0, 212, 255, 0.07); backdrop-filter: blur(20px); isolation: isolate; } .why-trust-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, black, transparent 86%); } .why-trust-panel::after { content: ""; position: absolute; inset-inline-end: -120px; inset-block-start: -150px; width: 360px; height: 360px; border: 1px solid rgba(35, 240, 208, 0.13); border-radius: 50%; box-shadow: inset 0 0 70px rgba(0, 212, 255, 0.06); pointer-events: none; } .why-trust-head { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 54px); align-items: end; margin-bottom: clamp(24px, 4vw, 42px); } .why-trust-head .section-title { max-width: 11ch; margin-bottom: 0; } .why-trust-head > p { margin: 0; color: var(--text-soft); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 2; } .why-pillar-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .why-pillar { position: relative; overflow: hidden; min-height: 310px; padding: clamp(22px, 3vw, 30px); border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 26px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), transparent 44%), rgba(6, 31, 55, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 70px rgba(0, 0, 0, 0.16); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .why-pillar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 22% 16%, rgba(35, 240, 208, 0.18), transparent 13rem), linear-gradient(135deg, rgba(0, 212, 255, 0.1), transparent 52%); opacity: 0; transition: opacity 0.25s ease; } .why-pillar:hover { transform: translateY(-6px); border-color: rgba(35, 240, 208, 0.42); box-shadow: 0 30px 90px rgba(0, 212, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .why-pillar:hover::before { opacity: 1; } .why-pillar > * { position: relative; z-index: 1; } .why-pillar-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 34px; } .why-pillar-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 18px 40px rgba(0, 212, 255, 0.22); } .why-pillar-icon i { font-size: 1.45rem; } .why-pillar-number { color: rgba(215, 231, 242, 0.14); font-family: "Inter", "Cairo", sans-serif; font-size: 2.6rem; font-weight: 900; line-height: 1; } .why-pillar h3 { max-width: 16ch; margin: 0 0 14px; color: var(--text); font-size: clamp(1.24rem, 1.7vw, 1.55rem); font-weight: 900; line-height: 1.45; } .why-pillar p { margin: 0; color: var(--text-soft); line-height: 1.9; } .why-trust-bottom { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 18px; padding: 20px; border: 1px solid rgba(35, 240, 208, 0.18); border-radius: 24px; background: rgba(0, 212, 255, 0.055); } .why-trust-bottom > p { margin: 0; color: var(--text); font-weight: 900; line-height: 1.8; } .why-proof-list { display: flex; flex-wrap: wrap; gap: 10px; } .why-proof-list span { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 12px; border: 1px solid rgba(215, 231, 242, 0.12); border-radius: 999px; color: var(--text-soft); background: rgba(2, 11, 22, 0.22); font-size: 0.84rem; font-weight: 800; } .why-proof-list i { color: var(--turquoise); } [data-theme="light"] .why-trust-panel { border-color: rgba(0, 150, 190, 0.2); background: radial-gradient(circle at 12% 8%, rgba(0, 180, 220, 0.13), transparent 24rem), radial-gradient(circle at 92% 90%, rgba(20, 180, 160, 0.11), transparent 24rem), linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 251, 255, 0.88)); } [data-theme="light"] .why-pillar { border-color: rgba(6, 24, 45, 0.09); background: rgba(255, 255, 255, 0.72); } [data-theme="light"] .why-pillar-number { color: rgba(6, 24, 45, 0.1); } [data-theme="light"] .why-trust-bottom { background: rgba(0, 150, 190, 0.07); border-color: rgba(0, 150, 190, 0.16); } [data-theme="light"] .why-proof-list span { color: var(--text-soft); background: rgba(255, 255, 255, 0.72); border-color: rgba(6, 24, 45, 0.08); } @media (max-width: 1199px) { .why-pillar-grid { grid-template-columns: 1fr; } .why-pillar { min-height: auto; } .why-pillar h3 { max-width: none; } } @media (max-width: 991px) { .why-trust-head, .why-trust-bottom { grid-template-columns: 1fr; } .why-trust-head .section-title { max-width: none; } } @media (max-width: 767px) { .why-trust-panel { padding: 22px; border-radius: 24px; } .why-pillar { padding: 22px; border-radius: 22px; } .why-pillar-top { margin-bottom: 24px; } .why-pillar-number { font-size: 2.1rem; } .why-trust-bottom { padding: 16px; border-radius: 20px; } .why-proof-list span { width: 100%; } } @media (max-width: 1199px) { .why-panel { grid-template-columns: 1fr; } .why-copy .section-title, .why-copy p { max-width: 760px; } .why-feature-grid { grid-auto-rows: minmax(108px, auto); } } @media (max-width: 767px) { .why-panel { padding: 22px; border-radius: 24px; } .why-copy .section-title { max-width: none; } .why-copy p { font-size: 0.98rem; line-height: 1.9; } .why-signal { margin-top: 22px; } .why-signal span { flex: 1 1 140px; justify-content: center; } .why-feature-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; } .why-feature-grid .feature-item, .why-feature-grid .feature-item:nth-child(1), .why-feature-grid .feature-item:nth-child(4), .why-feature-grid .feature-item:nth-child(7) { grid-column: auto; min-height: 98px; padding: 18px 54px 18px 18px; } [dir="rtl"] .why-feature-grid .feature-item, [dir="rtl"] .why-feature-grid .feature-item:nth-child(1), [dir="rtl"] .why-feature-grid .feature-item:nth-child(4), [dir="rtl"] .why-feature-grid .feature-item:nth-child(7) { padding: 18px 18px 18px 54px; } .why-feature-grid .feature-icon { width: 42px; height: 42px; border-radius: 14px; } .why-orbit { width: 260px; height: 260px; inset-inline-start: -125px; inset-block-end: -120px; } } @media (max-width: 420px) { .why-panel { padding: 18px; } .why-signal span { flex-basis: 100%; } .why-feature-grid .feature-item, .why-feature-grid .feature-item:nth-child(1), .why-feature-grid .feature-item:nth-child(4), .why-feature-grid .feature-item:nth-child(7) { align-items: center; min-height: 92px; } .why-feature-grid .feature-item small { font-size: 1.28rem; opacity: 0.82; } } .service-detail-head { align-items: center; } .service-detail-head h2 { flex: 1; } .service-detail-head .card-sequence { align-self: flex-start; } .cta-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; padding: clamp(28px, 5vw, 58px); border-color: rgba(0, 212, 255, 0.3); } .cta-panel::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 212, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.045) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, black, transparent 78%); opacity: 0.75; } .cta-signal { width: 88px; height: 88px; display: grid; place-items: center; border: 1px solid rgba(35, 240, 208, 0.28); border-radius: 50%; box-shadow: 0 0 0 12px rgba(0, 212, 255, 0.035), 0 0 58px rgba(0, 212, 255, 0.14); } .cta-signal span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); font-size: 1.3rem; } .cta-copy { max-width: 720px; } .contact-line span { font-family: "Inter", "Cairo", sans-serif; } .page-hero { isolation: isolate; } .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(2, 11, 22, 0.52), var(--bg)), url("../images/tech-hero.jpg") center 44% / cover; opacity: 0.36; mask-image: linear-gradient(black 20%, transparent 100%); } [data-theme="light"] .page-hero::before { background: linear-gradient(180deg, rgba(245, 251, 255, 0.5), var(--bg)), url("../images/tech-hero.jpg") center 44% / cover; opacity: 0.18; } .page-hero h1 { margin-inline: auto; } .page-hero p { margin-inline: auto; } .footer-brand { width: min(100%, 255px); } .footer-logo-frame { max-width: 255px; } .footer-status { display: inline-flex; align-items: center; gap: 9px; margin: 4px 0 22px; color: var(--text-soft); font-size: 0.88rem; font-weight: 700; } .footer-status span { width: 8px; height: 8px; border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 15px rgba(35, 240, 208, 0.65); } .footer-links a { display: inline-flex; padding-block: 3px; transition: color 0.2s ease, transform 0.2s ease; } .footer-links a:hover { transform: translateX(calc(var(--link-shift, 1) * 3px)); } [dir="rtl"] .footer-links a { --link-shift: -1; } @media (max-width: 1199px) { .cta-panel { grid-template-columns: auto minmax(0, 1fr); } .cta-actions { grid-column: 2; justify-content: flex-start; } } @media (max-width: 991px) { .site-header .navbar > .container { padding-inline: 14px; } .navbar-collapse { background: var(--header); } .navbar-nav { border-radius: 18px; } .hero-copy::before { display: none; } .console-logo { inset: 104px 64px 104px; } .cta-panel { display: flex; } .cta-signal { width: 72px; height: 72px; } .cta-actions { width: 100%; } } @media (max-width: 767px) { .site-header .navbar > .container { border-radius: 16px; } .hero-section { padding-bottom: 54px; } .hero-proof { border-radius: 16px; } .hero-console { min-height: 390px; } .console-logo { inset: 96px 24px 100px; } .hero-art { opacity: 0.54; } .about-glass { padding-inline: 24px; padding-top: 72px; } .panel-index { inset-inline-end: 24px; font-size: 3.5rem; } .feature-grid .feature-item:first-child, .feature-grid .feature-item:last-child { grid-column: auto; } .timeline-item { min-height: 128px; } .timeline-item strong { max-width: none; } .cta-signal { display: none; } .cta-panel { gap: 10px; } .cta-actions { margin-top: 20px; } .page-hero::before { opacity: 0.26; } } @media (max-width: 420px) { .language-toggle span { display: inline; } .hero-console { min-height: 350px; } .console-logo { inset: 92px 18px 92px; } .card-topline { gap: 12px; } .feature-item { padding-block: 16px; } } .process-board { position: relative; overflow: hidden; padding: 20px 20px 26px; border: 1px solid rgba(0, 212, 255, 0.24); border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.11), transparent 34rem), linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 32%), rgba(4, 24, 43, 0.78); box-shadow: 0 32px 100px rgba(0, 0, 0, 0.24), 0 0 70px rgba(0, 212, 255, 0.06); backdrop-filter: blur(20px); isolation: isolate; } .process-board::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(0, 212, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.035) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(180deg, black, transparent 88%); } [data-theme="light"] .process-board { background: radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.1), transparent 34rem), linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(245, 251, 255, 0.84)); box-shadow: 0 28px 80px rgba(6, 24, 45, 0.11); } .process-board-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; padding: 0 8px 15px; border-bottom: 1px solid var(--border); color: var(--muted); font-family: "Inter", "Cairo", sans-serif; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; } .process-live { display: inline-flex; align-items: center; gap: 9px; } .process-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 0 5px rgba(35, 240, 208, 0.08), 0 0 18px rgba(35, 240, 208, 0.68); } .process-flow { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 34px 0 0; list-style: none; } .process-flow::before { content: ""; position: absolute; inset-inline: 7.2%; inset-block-start: 70px; height: 2px; background: linear-gradient(90deg, var(--cyan), rgba(35, 240, 208, 0.35), var(--turquoise)); box-shadow: 0 0 18px rgba(0, 212, 255, 0.35); opacity: 0.72; } .process-step { position: relative; min-width: 0; padding: 0 14px 12px; text-align: center; } .process-step:not(:last-child) { border-inline-end: 1px solid rgba(215, 231, 242, 0.07); } .process-node { position: relative; z-index: 1; height: 74px; display: flex; align-items: flex-start; justify-content: center; } .process-icon { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(0, 212, 255, 0.28); border-radius: 22px; color: var(--turquoise); background: rgba(3, 16, 31, 0.92); box-shadow: inset 0 0 28px rgba(0, 212, 255, 0.07), 0 14px 34px rgba(0, 0, 0, 0.18); font-size: 1.55rem; transform: rotate(45deg); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .process-icon i { transform: rotate(-45deg); } [data-theme="light"] .process-icon { background: rgba(255, 255, 255, 0.94); } .process-number { position: absolute; z-index: 2; inset-block-start: -7px; inset-inline-start: calc(50% + 24px); min-width: 28px; height: 21px; padding-inline: 6px; display: grid; place-items: center; border: 1px solid rgba(35, 240, 208, 0.24); border-radius: 999px; color: var(--turquoise); background: var(--navy-950); font-family: "Inter", sans-serif; font-size: 0.66rem; font-weight: 900; line-height: 1; } [data-theme="light"] .process-number { background: var(--white); } .process-content { padding-top: 24px; } .process-content h3 { margin: 0 0 10px; color: var(--text); font-size: 1.05rem; font-weight: 900; } .process-content p { margin: 0; color: var(--text-soft); font-size: 0.78rem; line-height: 1.75; } .process-step:hover .process-icon { border-color: rgba(35, 240, 208, 0.7); background: rgba(0, 212, 255, 0.11); box-shadow: inset 0 0 30px rgba(0, 212, 255, 0.12), 0 18px 42px rgba(0, 212, 255, 0.16); transform: rotate(45deg) translate(-3px, -3px); } .process-step.is-final .process-icon { color: var(--navy-980); border-color: transparent; background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 16px 42px rgba(0, 212, 255, 0.23); } .process-step.is-final .process-content h3 { color: var(--turquoise); } @media (max-width: 1199px) { .process-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .process-flow::before { display: none; } .process-step { padding: 22px 18px; border: 1px solid var(--border) !important; border-radius: 20px; background: rgba(215, 231, 242, 0.025); } .process-step:last-child { grid-column: 2 / span 2; } } @media (min-width: 768px) and (max-width: 991px) { .process-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process-step:last-child { grid-column: 1 / -1; width: calc(50% - 7px); justify-self: center; } } @media (max-width: 767px) { .process-board { padding: 16px; border-radius: 24px; } .process-board-top { padding-inline: 4px; } .process-flow { grid-template-columns: 1fr; gap: 0; padding: 24px 0 4px; } .process-flow::before { display: block; inset-inline-start: 35px; inset-inline-end: auto; inset-block: 54px 62px; width: 2px; height: auto; background: linear-gradient(180deg, var(--cyan), rgba(35, 240, 208, 0.3), var(--turquoise)); } .process-step, .process-step:last-child { display: grid; grid-template-columns: 70px minmax(0, 1fr); grid-column: auto; gap: 16px; min-height: 126px; padding: 10px 8px 20px; border: 0 !important; border-radius: 0; background: transparent; text-align: start; } .process-node { height: 70px; align-items: center; } .process-icon { width: 58px; height: 58px; border-radius: 18px; font-size: 1.25rem; } .process-number { inset-block-start: 0; inset-inline-start: 42px; } .process-content { padding-top: 5px; } .process-content h3 { margin-bottom: 6px; font-size: 1.08rem; } .process-content p { font-size: 0.86rem; line-height: 1.8; } } @media (max-width: 420px) { .process-track-label { font-size: 0.62rem; } .process-step, .process-step:last-child { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; padding-inline: 0; } .process-flow::before { inset-inline-start: 31px; } .process-icon { width: 52px; height: 52px; border-radius: 16px; } .process-number { inset-inline-start: 36px; } } .testimonials-section { position: relative; overflow: hidden; isolation: isolate; border-block: 1px solid var(--border); background: linear-gradient(130deg, rgba(0, 212, 255, 0.055), transparent 42%), linear-gradient(310deg, rgba(35, 240, 208, 0.045), transparent 46%); } .testimonials-section::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(0, 212, 255, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.028) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at center, black, transparent 82%); } .testimonials-orbit { position: absolute; z-index: -1; inset-inline-end: -220px; inset-block-start: 90px; width: 520px; height: 520px; border: 1px solid rgba(0, 212, 255, 0.13); border-radius: 50%; box-shadow: 0 0 0 58px rgba(0, 212, 255, 0.018), 0 0 0 118px rgba(35, 240, 208, 0.012), inset 0 0 90px rgba(0, 212, 255, 0.035); } .testimonials-orbit::before, .testimonials-orbit::after { content: ""; position: absolute; border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 24px rgba(35, 240, 208, 0.8); } .testimonials-orbit::before { width: 9px; height: 9px; inset-inline-start: 42px; inset-block-start: 84px; } .testimonials-orbit::after { width: 6px; height: 6px; inset-inline-end: 38px; inset-block-end: 116px; } .testimonials-stage { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 60px); align-items: center; } .testimonial-feature, .testimonial-pillar { border: 1px solid var(--border); background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 36%), var(--card); box-shadow: var(--shadow); backdrop-filter: blur(20px); } .testimonial-feature { position: relative; min-height: 500px; padding: clamp(30px, 4vw, 52px); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; } .testimonial-feature::before { content: ""; position: absolute; inset-inline-end: -70px; inset-block-end: -100px; width: 270px; height: 270px; border: 1px solid rgba(35, 240, 208, 0.13); border-radius: 50%; box-shadow: inset 0 0 70px rgba(0, 212, 255, 0.05); } .testimonial-feature::after { content: "“"; position: absolute; inset-inline-end: 24px; inset-block-start: 106px; color: rgba(0, 212, 255, 0.065); font-family: Georgia, serif; font-size: 13rem; font-weight: 900; line-height: 1; } [dir="rtl"] .testimonial-feature::after { content: "”"; } .testimonial-feature > * { position: relative; z-index: 1; } .testimonial-feature-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 48px; } .testimonial-quote { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 22px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 18px 46px rgba(0, 212, 255, 0.2); font-size: 2rem; } .testimonial-signal { display: inline-flex; align-items: center; gap: 9px; color: var(--text-soft); font-size: 0.78rem; font-weight: 800; } .testimonial-signal i { width: 8px; height: 8px; border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 0 5px rgba(35, 240, 208, 0.08), 0 0 18px rgba(35, 240, 208, 0.72); } .testimonial-feature-copy { max-width: 560px; } .testimonial-feature-copy h3 { margin: 0 0 18px; color: var(--text); font-size: clamp(2rem, 3.3vw, 3.35rem); font-weight: 900; line-height: 1.25; text-wrap: balance; } .testimonial-feature-copy p { margin: 0; font-size: 1.03rem; line-height: 1.95; } .testimonial-trust-note { display: flex; align-items: flex-start; gap: 11px; margin: auto 0 24px; padding-top: 28px; color: var(--muted); font-size: 0.82rem; line-height: 1.75; } .testimonial-trust-note i { color: var(--turquoise); font-size: 1.05rem; margin-top: 2px; } .testimonial-cta { align-self: flex-start; } .testimonial-pillars { display: grid; gap: 18px; } .testimonial-pillar { position: relative; min-height: 168px; padding: 27px 30px; border-radius: var(--radius-md); overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .testimonial-pillar:nth-child(1) { margin-inline-end: 52px; } .testimonial-pillar:nth-child(2) { margin-inline-start: 52px; } .testimonial-pillar:nth-child(3) { margin-inline-end: 24px; } .testimonial-pillar::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(0, 212, 255, 0.09), transparent 38%, rgba(35, 240, 208, 0.05)); opacity: 0; transition: opacity 0.25s ease; } .testimonial-pillar > * { position: relative; z-index: 1; } .testimonial-pillar:hover { transform: translateY(-4px); border-color: rgba(35, 240, 208, 0.44); box-shadow: 0 26px 70px rgba(0, 212, 255, 0.11); } .testimonial-pillar:hover::before { opacity: 1; } .testimonial-pillar-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 17px; } .testimonial-pillar-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(0, 212, 255, 0.24); border-radius: 14px; color: var(--turquoise); background: rgba(0, 212, 255, 0.07); font-size: 1.22rem; } .testimonial-pillar-number { color: rgba(215, 231, 242, 0.16); font-family: "Inter", sans-serif; font-size: 1.75rem; font-weight: 900; line-height: 1; } [data-theme="light"] .testimonial-pillar-number { color: rgba(6, 24, 45, 0.12); } .testimonial-pillar h3 { margin: 0 0 7px; color: var(--text); font-size: 1.18rem; font-weight: 900; } .testimonial-pillar p { max-width: 52ch; margin: 0; font-size: 0.9rem; line-height: 1.8; } .testimonial-pulse-line { display: block; width: 42%; height: 2px; margin-top: 18px; background: linear-gradient(90deg, var(--cyan), var(--turquoise), transparent); opacity: 0.68; } .testimonial-pillar:nth-child(2) .testimonial-pulse-line { width: 62%; } .testimonial-pillar:nth-child(3) .testimonial-pulse-line { width: 78%; } [data-theme="light"] .testimonial-feature, [data-theme="light"] .testimonial-pillar { background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 251, 255, 0.9)); } @media (max-width: 991px) { .testimonials-stage { grid-template-columns: 1fr; } .testimonial-feature { min-height: 430px; } .testimonial-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } .testimonial-pillar, .testimonial-pillar:nth-child(1), .testimonial-pillar:nth-child(2), .testimonial-pillar:nth-child(3) { min-height: 100%; margin: 0; } } @media (max-width: 767px) { .testimonials-orbit { width: 360px; height: 360px; inset-inline-end: -230px; } .testimonial-feature { min-height: 0; padding: 26px; border-radius: 24px; } .testimonial-feature-top { margin-bottom: 34px; } .testimonial-quote { width: 60px; height: 60px; border-radius: 18px; } .testimonial-feature-copy h3 { font-size: 2rem; } .testimonial-feature-copy p { font-size: 0.95rem; } .testimonial-trust-note { margin-top: 28px; } .testimonial-pillars { grid-template-columns: 1fr; } .testimonial-pillar { min-height: auto; padding: 24px; } .testimonial-cta { width: 100%; } } @media (max-width: 420px) { .testimonial-feature { padding: 22px; } .testimonial-feature::after { font-size: 9rem; } .testimonial-feature-top { align-items: flex-start; } .testimonial-signal { max-width: 130px; text-align: end; } } .testimonial-slider { min-width: 0; width: 100%; max-width: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 18px; } .testimonial-slider-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: 4px; } .testimonial-slider-count { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-family: "Inter", "Cairo", sans-serif; font-size: 0.74rem; font-weight: 900; direction: ltr; } .testimonial-slider-count span:first-child { color: var(--turquoise); } .testimonial-slider-count i { width: 34px; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--turquoise)); } .testimonial-slider-viewport { min-width: 0; width: 100%; max-width: 100%; overflow: hidden; border-radius: var(--radius-lg); } .testimonial-slider-track { width: 100%; max-width: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-inline: contain; cursor: grab; } .testimonial-slider-track:active { cursor: grabbing; } .testimonials-stage > * { min-width: 0; } .testimonial-slider-track::-webkit-scrollbar { display: none; } .testimonial-card { position: relative; flex: 0 0 100%; min-width: 0; min-height: 442px; padding: clamp(30px, 4vw, 46px); border: 1px solid rgba(0, 212, 255, 0.22); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent 34%), radial-gradient(circle at 90% 8%, rgba(0, 212, 255, 0.11), transparent 15rem), var(--card); box-shadow: var(--shadow); scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; overflow: hidden; } .testimonial-card::before { content: ""; position: absolute; inset-inline-start: -100px; inset-block-end: -150px; width: 310px; height: 310px; border: 1px solid rgba(35, 240, 208, 0.1); border-radius: 50%; box-shadow: 0 0 0 44px rgba(0, 212, 255, 0.018); } .testimonial-card > * { position: relative; z-index: 1; } .testimonial-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 42px; } .testimonial-card-quote { color: var(--turquoise); font-size: 3.2rem; line-height: 1; opacity: 0.86; } .testimonial-demo-badge { padding: 7px 11px; border: 1px solid rgba(35, 240, 208, 0.2); border-radius: 999px; color: var(--turquoise); background: rgba(35, 240, 208, 0.06); font-size: 0.72rem; font-weight: 800; } .testimonial-card blockquote { max-width: 52ch; margin: 0 0 36px; color: var(--text); font-size: clamp(1.18rem, 2vw, 1.48rem); font-weight: 700; line-height: 1.95; } .testimonial-client { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 14px; } .testimonial-avatar, .testimonial-avatar-preview { position: relative; display: grid; place-items: center; flex: 0 0 auto; color: var(--navy-980); background: linear-gradient(145deg, var(--cyan), var(--turquoise)); overflow: hidden; } .testimonial-avatar { width: 62px; height: 62px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 20px; box-shadow: 0 15px 34px rgba(0, 212, 255, 0.18); font-size: 1.85rem; } .testimonial-avatar.is-female, .testimonial-avatar-preview.is-female { background: linear-gradient(145deg, var(--turquoise), var(--cyan)); } .testimonial-avatar::after, .testimonial-avatar-preview::after { content: ""; position: absolute; inset-inline-end: -13px; inset-block-end: -16px; width: 40px; height: 40px; border: 1px solid rgba(2, 11, 22, 0.16); border-radius: 50%; } .testimonial-avatar i, .testimonial-avatar-preview i { position: relative; z-index: 1; } .testimonial-client-copy { min-width: 0; display: grid; gap: 4px; } .testimonial-client-copy strong { overflow: hidden; color: var(--text); font-size: 1.06rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } .testimonial-client-copy small { color: var(--muted); font-size: 0.78rem; } .testimonial-verified { margin-inline-start: auto; color: var(--turquoise); font-size: 1.1rem; } .testimonial-slider-dots { min-height: 9px; display: flex; align-items: center; justify-content: center; gap: 7px; } .testimonial-slider-dots span { width: 7px; height: 7px; border-radius: 999px; background: var(--border); transition: width 0.22s ease, background 0.22s ease, box-shadow 0.22s ease; } .testimonial-slider-dots span.is-active { width: 25px; background: linear-gradient(90deg, var(--cyan), var(--turquoise)); box-shadow: 0 0 16px rgba(0, 212, 255, 0.36); } .testimonial-empty { flex: 0 0 100%; min-height: 380px; display: grid; place-items: center; align-content: center; gap: 16px; border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--muted); text-align: center; } .testimonial-empty i { color: var(--turquoise); font-size: 2rem; } [data-theme="light"] .testimonial-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 251, 255, 0.9)); box-shadow: 0 28px 80px rgba(6, 24, 45, 0.12); } .testimonial-modal { --bs-modal-width: 620px; } .testimonial-modal .modal-dialog { padding: 12px; } .testimonial-modal .modal-content { position: relative; overflow: hidden; border: 1px solid rgba(0, 212, 255, 0.26); border-radius: 28px; color: var(--text); background: radial-gradient(circle at 8% 0%, rgba(0, 212, 255, 0.13), transparent 18rem), rgba(3, 16, 31, 0.96); box-shadow: 0 42px 120px rgba(0, 0, 0, 0.5), 0 0 80px rgba(0, 212, 255, 0.1); backdrop-filter: blur(26px); } [data-theme="light"] .testimonial-modal .modal-content { background: radial-gradient(circle at 8% 0%, rgba(0, 212, 255, 0.12), transparent 18rem), rgba(255, 255, 255, 0.98); box-shadow: 0 38px 100px rgba(6, 24, 45, 0.2); } .testimonial-modal-accent { position: absolute; inset-inline: 9%; inset-block-start: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), var(--turquoise), transparent); } .testimonial-modal-progress { position: absolute; z-index: 4; inset-inline: 0; inset-block-start: 0; height: 3px; overflow: hidden; background: rgba(0, 212, 255, 0.09); } .testimonial-modal-progress[hidden] { display: none; } .testimonial-modal-progress > span { position: absolute; inset-block: 0; inset-inline-start: -42%; width: 42%; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--cyan), var(--turquoise)); box-shadow: 0 0 18px rgba(35, 240, 208, 0.48); } .testimonial-modal.is-submitting .testimonial-modal-progress > span { animation: testimonial-progress-loading 1.05s ease-in-out infinite; } .testimonial-modal.is-submit-success .testimonial-modal-progress > span { inset-inline-start: 0; width: 100%; animation: testimonial-progress-complete 0.38s ease-out both; } .testimonial-modal.is-submitting .testimonial-modal-close { opacity: 0.45; pointer-events: none; } .testimonial-modal .modal-header { align-items: center; justify-content: space-between; padding: 26px 28px 20px; border-bottom: 1px solid var(--border); } .testimonial-modal-heading { display: flex; align-items: center; gap: 14px; } .testimonial-modal-heading > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); font-size: 1.3rem; box-shadow: 0 14px 34px rgba(0, 212, 255, 0.19); } .testimonial-modal-heading div > span { display: block; margin-bottom: 3px; color: var(--turquoise); font-size: 0.72rem; font-weight: 800; } .testimonial-modal .modal-title { color: var(--text); font-size: 1.35rem; font-weight: 900; } .testimonial-modal-close { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 13px; color: var(--text); background: rgba(215, 231, 242, 0.045); } .testimonial-modal-close:hover { color: var(--turquoise); border-color: rgba(35, 240, 208, 0.4); } .testimonial-modal .modal-body { padding: 26px 28px 30px; } .testimonial-form-intro { max-width: 480px; margin: 0 0 20px; font-size: 0.92rem; } .testimonial-avatar-preview { width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 24px; box-shadow: 0 18px 42px rgba(0, 212, 255, 0.2); font-size: 2.1rem; transition: background 0.22s ease, transform 0.22s ease; } .feedback-field { margin: 0 0 19px; } .feedback-field label, .feedback-field legend { display: block; margin: 0 0 8px; color: var(--text); font-size: 0.86rem; font-weight: 800; } .feedback-control-wrap { position: relative; } .feedback-control-wrap > i { position: absolute; z-index: 2; inset-inline-start: 17px; inset-block-start: 50%; color: var(--turquoise); transform: translateY(-50%); } .feedback-control-wrap .form-control { padding-inline-start: 46px; } .testimonial-form .form-control { border-color: var(--border); background: rgba(215, 231, 242, 0.045); } .testimonial-form textarea.form-control { min-height: 132px; padding: 15px; resize: vertical; } .feedback-label-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .feedback-label-row > span { color: var(--muted); font-size: 0.69rem; } .feedback-label-row strong { color: var(--turquoise); } .feedback-gender-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .feedback-gender-option { margin: 0 !important; cursor: pointer; } .feedback-gender-option input { position: absolute; opacity: 0; pointer-events: none; } .feedback-gender-option span { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--border); border-radius: 15px; color: var(--text-soft); background: rgba(215, 231, 242, 0.035); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .feedback-gender-option input:checked + span { color: var(--text); border-color: rgba(35, 240, 208, 0.52); background: rgba(0, 212, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.09); } .feedback-gender-option input:focus-visible + span { outline: 3px solid rgba(35, 240, 208, 0.72); outline-offset: 3px; } .feedback-consent { display: flex; align-items: flex-start; gap: 11px; margin: 2px 0 6px; cursor: pointer; } .feedback-consent input { position: absolute; opacity: 0; } .feedback-consent > span { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 7px; color: transparent; background: rgba(215, 231, 242, 0.04); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .feedback-consent input:checked + span { color: var(--navy-980); border-color: var(--turquoise); background: var(--turquoise); } .feedback-consent input:focus-visible + span { outline: 3px solid rgba(35, 240, 208, 0.72); outline-offset: 3px; } .feedback-consent small { color: var(--text-soft); line-height: 1.65; } .feedback-field-error { min-height: 18px; margin-top: 5px; color: var(--turquoise); font-size: 0.75rem; } .feedback-form-error:not(:empty) { min-height: 0; padding: 10px 12px; border: 1px solid rgba(255, 98, 98, 0.22); border-radius: 11px; color: #ffb4b4; background: rgba(255, 98, 98, 0.065); font-weight: 800; line-height: 1.7; } [data-theme="light"] .feedback-form-error:not(:empty) { color: #9f2424; border-color: rgba(177, 38, 38, 0.2); background: rgba(177, 38, 38, 0.055); } .testimonial-submit { width: 100%; min-height: 52px; margin-top: 16px; } .testimonial-submit-spinner { width: 18px; height: 18px; flex: 0 0 auto; border: 2px solid rgba(2, 19, 38, 0.24); border-top-color: var(--navy-980); border-radius: 50%; animation: testimonial-spinner 0.72s linear infinite; } .testimonial-submit-spinner[hidden] { display: none; } .testimonial-form-success { min-height: 330px; place-items: center; align-content: center; gap: 14px; text-align: center; } .testimonial-form-success:not([hidden]) { display: grid; } .testimonial-success-icon { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 24px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 20px 48px rgba(0, 212, 255, 0.22); font-size: 2rem; } .testimonial-success-icon i { display: block; color: var(--navy-980); font-size: 2.15rem; line-height: 1; } .testimonial-form-success p { max-width: 430px; margin: 4px 0 0; color: var(--text); font-weight: 800; line-height: 1.9; } @keyframes testimonial-progress-loading { from { inset-inline-start: -42%; } to { inset-inline-start: 100%; } } @keyframes testimonial-progress-complete { from { transform: scaleX(0.72); opacity: 0.7; } to { transform: scaleX(1); opacity: 1; } } @keyframes testimonial-spinner { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .testimonial-modal-progress > span, .testimonial-submit-spinner { animation: none !important; } } @media (max-width: 991px) { .testimonial-slider { min-height: 520px; } .testimonial-card { min-height: 450px; } } @media (max-width: 767px) { .testimonial-slider { min-height: 0; } .testimonial-card { min-height: 430px; padding: 26px; } .testimonial-card-top { margin-bottom: 30px; } .testimonial-card blockquote { font-size: 1.08rem; } .testimonial-slider-toolbar { padding-inline: 0; } .testimonial-modal .modal-dialog { padding: 6px; margin: 8px auto; } .testimonial-modal .modal-content { border-radius: 23px; } .testimonial-modal .modal-header { padding: 20px 18px 17px; } .testimonial-modal .modal-body { padding: 22px 18px 24px; } .testimonial-modal-heading > span { width: 46px; height: 46px; border-radius: 15px; } .testimonial-modal .modal-title { font-size: 1.16rem; } } @media (max-width: 420px) { .testimonial-card { min-height: 450px; padding: 22px; } .testimonial-avatar { width: 56px; height: 56px; border-radius: 18px; } .testimonial-client-copy strong { font-size: 0.95rem; } .feedback-gender-options { gap: 8px; } .feedback-gender-option span { min-height: 48px; } } .company-proof-section { position: relative; z-index: 4; margin-top: -30px; padding-bottom: 18px; } .company-metrics { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid rgba(0, 212, 255, 0.2); border-radius: var(--radius-lg); background: linear-gradient(110deg, rgba(0, 212, 255, 0.075), transparent 38%, rgba(35, 240, 208, 0.04)), rgba(4, 24, 43, 0.94); box-shadow: 0 28px 84px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04); backdrop-filter: blur(22px); } .company-metrics::before { content: ""; position: absolute; inset-inline: 8%; inset-block-start: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), var(--turquoise), transparent); opacity: 0.7; } .company-metric { position: relative; min-width: 0; min-height: 170px; padding: 30px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; } .company-metric:not(:last-child)::after { content: ""; position: absolute; inset-inline-end: 0; inset-block: 22%; width: 1px; background: linear-gradient(180deg, transparent, var(--border), transparent); } .company-metric:first-child { background: linear-gradient(145deg, rgba(0, 212, 255, 0.08), rgba(35, 240, 208, 0.025)); } .company-metric-value { display: inline-flex; align-items: center; justify-content: center; color: var(--cyan); font-family: "Inter", "Cairo", sans-serif; font-size: clamp(2.7rem, 4.4vw, 4rem); font-weight: 900; line-height: 1; text-shadow: 0 0 30px rgba(0, 212, 255, 0.22); } .company-metric-plus { margin-inline-end: 0.08em; color: var(--turquoise); font-size: 0.62em; transform: translateY(0.08em); } .company-metric > span { color: var(--text-soft); font-size: 0.94rem; font-weight: 700; } [data-theme="light"] .company-metrics { background: linear-gradient(110deg, rgba(0, 212, 255, 0.08), transparent 42%), rgba(255, 255, 255, 0.96); box-shadow: 0 26px 72px rgba(6, 24, 45, 0.11); } .portfolio-showcase { position: relative; } .portfolio-toolbar { position: relative; display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 42px; } .portfolio-filters { width: min(100%, 980px); max-width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-inline: auto; } .portfolio-filter { min-height: 48px; padding: 10px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); background: rgba(215, 231, 242, 0.035); font-size: 0.88rem; font-weight: 800; white-space: nowrap; transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .portfolio-filter i { color: var(--cyan); font-size: 0.95rem; } .portfolio-filter:hover { color: var(--text); border-color: rgba(0, 212, 255, 0.35); background: rgba(0, 212, 255, 0.07); } .portfolio-filter.is-active { color: var(--navy-980); border-color: transparent; background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 15px 38px rgba(0, 212, 255, 0.2); } .portfolio-filter.is-active i { color: var(--navy-980); } .portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } .portfolio-case { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 34%), var(--card); box-shadow: 0 24px 72px rgba(0, 0, 0, 0.18); overflow: hidden; cursor: pointer; transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease; } .portfolio-case:focus-visible { outline: 3px solid rgba(35, 240, 208, 0.75); outline-offset: 5px; } .portfolio-case[hidden] { display: none !important; } .portfolio-case:hover { transform: translateY(-6px); border-color: rgba(35, 240, 208, 0.42); box-shadow: 0 32px 88px rgba(0, 212, 255, 0.12); } .portfolio-case-media { position: relative; min-height: 265px; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--border); background: radial-gradient(circle at 78% 22%, rgba(0, 212, 255, 0.2), transparent 15rem), linear-gradient(145deg, #082541, #03101f); } .portfolio-case-media::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(215, 231, 242, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(215, 231, 242, 0.045) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(black, transparent 94%); } .portfolio-case-media.has-cover-image { background: #03101f; } .portfolio-cover-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 10px; transform: scale(1); transition: transform 0.35s ease, filter 0.35s ease; } .portfolio-case-media.has-cover-image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(2, 11, 22, 0.12), rgba(2, 11, 22, 0.62)), radial-gradient(circle at 82% 18%, rgba(35, 240, 208, 0.2), transparent 15rem); } .portfolio-case:hover .portfolio-cover-image { transform: scale(1.025); filter: saturate(1.08) contrast(1.04); } .portfolio-media-open { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; color: transparent; background: transparent; cursor: pointer; } .portfolio-media-open:focus-visible { outline: 3px solid rgba(35, 240, 208, 0.85); outline-offset: -8px; } .portfolio-media-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .portfolio-tone-mobile { background: radial-gradient(circle at 20% 76%, rgba(35, 240, 208, 0.24), transparent 16rem), linear-gradient(145deg, #062a3c, #03101f); } .portfolio-tone-ai { background: radial-gradient(circle at 74% 22%, rgba(35, 240, 208, 0.2), transparent 14rem), radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.18), transparent 16rem), #03101f; } .portfolio-tone-cybersecurity { background: linear-gradient(120deg, rgba(0, 212, 255, 0.12), transparent 48%), repeating-linear-gradient(135deg, rgba(35, 240, 208, 0.045) 0 1px, transparent 1px 18px), #020b16; } .portfolio-tone-research { background: radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.2), transparent 13rem), linear-gradient(145deg, #071e36, #020b16); } .portfolio-media-top { position: absolute; inset-inline: 18px; inset-block-start: 17px; z-index: 2; display: flex; align-items: center; gap: 6px; } .portfolio-media-top span { margin-inline-end: auto; color: rgba(215, 231, 242, 0.42); font-family: "Inter", sans-serif; font-size: 0.72rem; font-weight: 900; } .portfolio-media-top i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); opacity: 0.68; } .portfolio-visual { position: absolute; inset: 42px 22px 46px; display: grid; place-items: center; } .portfolio-visual-ring { position: absolute; width: 168px; height: 168px; border: 1px solid rgba(0, 212, 255, 0.17); border-radius: 50%; box-shadow: 0 0 0 28px rgba(0, 212, 255, 0.025), inset 0 0 54px rgba(35, 240, 208, 0.045); } .portfolio-visual-window { position: relative; z-index: 2; width: 112px; height: 112px; display: grid; place-items: center; border: 1px solid rgba(35, 240, 208, 0.28); border-radius: 28px; color: var(--turquoise); background: rgba(2, 11, 22, 0.64); box-shadow: inset 0 0 42px rgba(0, 212, 255, 0.08), 0 20px 48px rgba(0, 0, 0, 0.24); backdrop-filter: blur(12px); font-size: 2.7rem; transform: rotate(45deg); transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease; } .portfolio-visual-window i { transform: rotate(-45deg); } .portfolio-case:hover .portfolio-visual-window { border-color: rgba(35, 240, 208, 0.62); box-shadow: inset 0 0 44px rgba(0, 212, 255, 0.12), 0 25px 56px rgba(0, 212, 255, 0.13); transform: rotate(45deg) scale(1.025); } .portfolio-visual-line { position: absolute; width: 74%; height: 1px; background: linear-gradient(90deg, transparent, rgba(35, 240, 208, 0.34), transparent); } .portfolio-visual-line.line-one { transform: rotate(22deg); } .portfolio-visual-line.line-two { transform: rotate(-22deg); } .portfolio-type-badge { position: absolute; z-index: 3; inset-inline-start: 18px; inset-block-end: 16px; max-width: calc(100% - 36px); overflow: hidden; padding: 7px 11px; border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 999px; color: var(--silver); background: rgba(2, 11, 22, 0.72); font-size: 0.69rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(12px); } .portfolio-case-body { min-height: 292px; padding: 26px; display: flex; flex-direction: column; } .portfolio-category { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 13px; color: var(--turquoise); font-size: 0.77rem; font-weight: 800; } .portfolio-category i { flex: none; font-size: 0.95rem; line-height: 1; } .portfolio-case-body h3 { margin: 0 0 12px; color: var(--text); font-size: 1.28rem; font-weight: 900; line-height: 1.45; } .portfolio-case-body p { margin: 0 0 24px; font-size: 0.9rem; line-height: 1.85; } .portfolio-details-button { width: fit-content; min-height: 40px; margin-bottom: 14px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(35, 240, 208, 0.18); border-radius: 999px; color: var(--turquoise); background: rgba(35, 240, 208, 0.055); font-weight: 900; transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease; } .portfolio-details-button:hover, .portfolio-details-button:focus-visible { transform: translateY(-2px); border-color: rgba(35, 240, 208, 0.36); background: rgba(35, 240, 208, 0.1); } .portfolio-case-link { margin-top: auto; width: 100%; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 17px; border-top: 1px solid var(--border); color: var(--text); background: transparent; font-size: 0.82rem; font-weight: 800; text-align: inherit; } .portfolio-case-link i { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 11px; color: var(--turquoise); background: rgba(0, 212, 255, 0.05); transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .portfolio-case-link:hover { color: var(--turquoise); } .portfolio-case-link:hover i { color: var(--navy-980); border-color: var(--turquoise); background: var(--turquoise); } .project-details-modal { --bs-modal-bg: transparent; --bs-modal-border-color: transparent; } .project-details-modal .modal-content { position: relative; overflow: hidden; border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 28px; color: var(--white); background: radial-gradient(circle at 18% 12%, rgba(0, 212, 255, 0.16), transparent 24rem), radial-gradient(circle at 92% 84%, rgba(35, 240, 208, 0.12), transparent 24rem), linear-gradient(145deg, rgba(8, 37, 65, 0.96), rgba(2, 11, 22, 0.98)); box-shadow: 0 38px 110px rgba(0, 0, 0, 0.44); } .project-details-modal.is-viewing-image .modal-content { overflow: visible; } .project-modal-glow { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(215, 231, 242, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(215, 231, 242, 0.03) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(black, transparent 82%); } .project-details-modal .modal-header { position: relative; z-index: 2; display: block; align-items: flex-start; border: 0; padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 36px) 0; } .project-details-modal .modal-header > div { width: calc(100% - 64px); } .project-modal-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--turquoise); font-weight: 950; } .project-modal-kicker i { flex: none; font-size: 1rem; line-height: 1; } .project-details-modal .modal-title { margin-top: 8px; font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: 950; line-height: 1.15; } .project-modal-close { position: absolute; inset-block-start: clamp(22px, 3vw, 34px); inset-inline-end: clamp(22px, 3vw, 36px); z-index: 4; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 15px; color: var(--text); background: rgba(255, 255, 255, 0.045); } .project-details-modal .modal-body { position: relative; z-index: 2; padding: clamp(18px, 3vw, 36px); } .project-modal-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr); gap: clamp(18px, 3vw, 30px); align-items: start; } .project-modal-gallery, .project-modal-copy { display: grid; gap: 14px; } .project-modal-preview { width: 100%; min-height: 0; aspect-ratio: 16 / 10; position: relative; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(0, 212, 255, 0.18); border-radius: 24px; background-color: #03101f; } .project-modal-preview-button { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; border: 0; padding: 0; color: var(--white); background: transparent; cursor: zoom-in; } .project-modal-preview img { width: 100%; height: 100%; min-height: 0; padding: 10px; object-fit: contain; object-position: center; user-select: none; -webkit-user-drag: none; } .project-modal-preview-button > span { position: absolute; inset-inline-end: 16px; inset-block-end: 16px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 13px; color: var(--turquoise); background: rgba(2, 11, 22, 0.78); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26); backdrop-filter: blur(12px); transition: transform 0.22s ease, border-color 0.22s ease, color 0.22s ease; } .project-modal-preview-button:hover > span, .project-modal-preview-button:focus-visible > span { color: var(--white); border-color: rgba(35, 240, 208, 0.56); transform: translateY(-2px); } .project-modal-preview-button:focus-visible { outline: 3px solid rgba(35, 240, 208, 0.78); outline-offset: -5px; } .project-modal-icon-fallback { width: 126px; height: 126px; display: grid; place-items: center; border-radius: 34px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 28px 70px rgba(0, 212, 255, 0.28); } .project-modal-icon-fallback i { font-size: 3rem; } .project-modal-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .project-modal-thumbs button { aspect-ratio: 1.35; overflow: hidden; border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 14px; padding: 0; background: rgba(255, 255, 255, 0.045); opacity: 0.72; transition: opacity 0.22s ease, border-color 0.22s ease, transform 0.22s ease; } .project-modal-thumbs button:hover, .project-modal-thumbs button.is-active { opacity: 1; transform: translateY(-2px); border-color: rgba(35, 240, 208, 0.58); } .project-modal-thumbs img { width: 100%; height: 100%; padding: 4px; object-fit: contain; object-position: center; user-select: none; -webkit-user-drag: none; } .project-image-viewer { position: fixed; z-index: 1095; inset: 0; display: grid; place-items: center; padding: clamp(14px, 3vw, 36px); color: var(--white); background: rgba(1, 8, 16, 0.94); backdrop-filter: blur(18px); } .project-image-viewer[hidden] { display: none; } .project-image-viewer-backdrop { position: absolute; inset: 0; border: 0; background: transparent; } .project-image-viewer-stage { position: relative; z-index: 1; width: min(94vw, 1560px); height: min(92vh, 980px); display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; grid-template-rows: auto minmax(0, 1fr); align-items: center; gap: 14px; } .project-image-viewer-toolbar { position: relative; grid-column: 1 / -1; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .project-image-viewer[aria-busy="true"] .project-image-viewer-toolbar::after, .project-modal-preview-button[aria-busy="true"]::after { content: ''; position: absolute; inset-inline-end: 64px; inset-block-start: 16px; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .3); border-top-color: var(--turquoise); border-radius: 50%; animation: project-image-loading .75s linear infinite; pointer-events: none; } .project-modal-preview-button[aria-busy="true"]::after { inset-inline-end: 16px; } @keyframes project-image-loading { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .project-image-viewer[aria-busy="true"] .project-image-viewer-toolbar::after, .project-modal-preview-button[aria-busy="true"]::after { animation: none; } } .project-image-viewer-toolbar > span { color: rgba(255, 255, 255, 0.72); font-family: "Inter", "Cairo", sans-serif; font-size: 0.78rem; font-weight: 800; } .project-image-viewer-toolbar button, .project-image-viewer-nav { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; color: var(--white); background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(12px); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .project-image-viewer-toolbar button:hover, .project-image-viewer-nav:hover, .project-image-viewer-toolbar button:focus-visible, .project-image-viewer-nav:focus-visible { color: var(--turquoise); border-color: rgba(35, 240, 208, 0.5); background: rgba(0, 212, 255, 0.1); } .project-image-viewer-nav:disabled { opacity: 0.28; pointer-events: none; } .project-image-viewer-stage figure { min-width: 0; min-height: 0; height: 100%; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; place-items: center; } .project-image-viewer-stage figure img { width: 100%; height: 100%; max-height: calc(92vh - 110px); object-fit: contain; object-position: center; user-select: none; -webkit-user-drag: none; } .project-image-viewer-stage figcaption { max-width: min(760px, 90vw); overflow: hidden; color: rgba(255, 255, 255, 0.76); font-size: 0.84rem; line-height: 1.7; text-align: center; text-overflow: ellipsis; white-space: nowrap; } body.project-viewer-open { overflow: hidden; } @media (max-width: 767px) { .project-image-viewer-stage { width: 100%; height: 94vh; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 7px; } .project-image-viewer-toolbar button, .project-image-viewer-nav { width: 42px; height: 42px; border-radius: 12px; } .project-image-viewer-stage figure img { max-height: calc(94vh - 106px); } .project-modal-preview-button > span { width: 38px; height: 38px; inset: auto 12px 12px auto; } [dir="rtl"] .project-modal-preview-button > span { inset: auto auto 12px 12px; } } @media (prefers-reduced-motion: reduce) { .project-modal-preview-button > span, .project-image-viewer-toolbar button, .project-image-viewer-nav { transition: none; } } .project-modal-meta { display: flex; flex-wrap: wrap; gap: 8px; } .project-modal-meta span { min-height: 38px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(35, 240, 208, 0.16); border-radius: 999px; color: var(--text-soft); background: rgba(35, 240, 208, 0.045); font-weight: 850; } .project-modal-techs { display: flex; flex-wrap: wrap; gap: 10px; } .project-modal-tech-icon { width: 44px; height: 44px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(35, 240, 208, 0.16); border-radius: 14px; color: var(--turquoise); background: rgba(255, 255, 255, 0.9); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12); } .project-modal-tech-icon img { width: 27px; height: 27px; object-fit: contain; } .project-modal-tech-icon i { color: #087d8f; font-size: 1.2rem; line-height: 1; } .project-modal-lead { margin: 0; color: var(--text); font-size: 1.05rem; line-height: 1.9; } .project-modal-features { padding: 18px; border: 1px solid rgba(35, 240, 208, 0.14); border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgba(35, 240, 208, 0.08), transparent 14rem), rgba(35, 240, 208, 0.035); } .project-modal-features h3 { margin: 0 0 12px; color: var(--white); font-size: 1.08rem; font-weight: 950; } .project-modal-features ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .project-modal-features li { display: flex; align-items: flex-start; gap: 8px; color: var(--text-soft); line-height: 1.75; font-weight: 800; } .project-modal-features li i { margin-top: 4px; color: var(--turquoise); } .project-modal-summary { padding: 18px; border: 1px solid rgba(215, 231, 242, 0.12); border-radius: 20px; background: rgba(255, 255, 255, 0.035); } .project-modal-summary h3 { margin: 0 0 8px; color: var(--white); font-size: 1.08rem; font-weight: 950; } .project-modal-summary p { margin: 0; color: var(--text-soft); line-height: 1.8; } .project-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; } [data-theme="light"] .portfolio-case { background: rgba(255, 255, 255, 0.92); box-shadow: 0 24px 66px rgba(6, 24, 45, 0.11); } [data-theme="light"] .portfolio-filter { background: rgba(255, 255, 255, 0.72); } .portfolio-empty { min-height: 260px; place-items: center; align-content: center; gap: 14px; border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--muted); text-align: center; } .portfolio-empty:not([hidden]) { display: grid; } .portfolio-empty i { color: var(--turquoise); font-size: 2rem; } @media (max-width: 1199px) { .portfolio-toolbar { flex-direction: column; align-items: center; margin-bottom: 34px; } .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .company-proof-section { margin-top: -20px; padding-bottom: 0; } .company-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; } .company-metric { min-height: 128px; padding: 22px 14px; gap: 9px; } .company-metric:nth-child(2)::after { display: none; } .company-metric:nth-child(-n + 2) { border-bottom: 1px solid var(--border); } .company-metric-value { font-size: 2.35rem; } .company-metric > span { max-width: 15ch; font-size: 0.8rem; line-height: 1.6; } .portfolio-toolbar { align-items: center; } .portfolio-filters { width: 100%; flex-wrap: wrap; justify-content: center; overflow: visible; padding: 2px; scrollbar-width: auto; scroll-snap-type: none; } .portfolio-filters::-webkit-scrollbar { display: none; } .portfolio-filter { scroll-snap-align: none; } .portfolio-grid { grid-template-columns: 1fr; gap: 20px; } .portfolio-case-media { min-height: 240px; } .portfolio-case-body { min-height: 270px; padding: 23px; } .project-modal-layout { grid-template-columns: 1fr; } .project-modal-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 420px) { .company-metric { min-height: 118px; padding-inline: 10px; } .company-metric-value { font-size: 2.1rem; } .portfolio-filter { min-height: 44px; padding: 9px 14px; font-size: 0.8rem; } .portfolio-case-media { min-height: 220px; } .portfolio-visual-window { width: 98px; height: 98px; border-radius: 24px; font-size: 2.3rem; } .portfolio-visual-ring { width: 146px; height: 146px; } .portfolio-case-body h3 { font-size: 1.18rem; } .project-details-modal .modal-dialog { margin: 10px; } .project-details-modal .modal-content { border-radius: 22px; } .project-modal-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .project-modal-preview { min-height: 240px; } } [data-theme="light"] { --bg: #eef8fd; --bg-soft: #fbfeff; --card: rgba(255, 255, 255, 0.94); --text: #021326; --text-soft: #24445e; --muted: #55738a; --border: rgba(2, 19, 38, 0.14); --header: rgba(238, 248, 253, 0.54); --shadow: 0 26px 80px rgba(2, 19, 38, 0.15); --premium-ring: rgba(0, 166, 210, 0.34); --glow: rgba(0, 166, 210, 0.22); } [data-theme="light"] body { background: radial-gradient(circle at 12% 8%, rgba(0, 212, 255, 0.18), transparent 30rem), radial-gradient(circle at 88% 12%, rgba(35, 240, 208, 0.14), transparent 34rem), linear-gradient(180deg, #eef8fd 0%, #fbfeff 48%, #eaf7fc 100%); } [data-theme="light"] .ambient-field { opacity: 0.96; background: linear-gradient(90deg, rgba(2, 19, 38, 0.064) 1px, transparent 1px), linear-gradient(0deg, rgba(0, 166, 210, 0.058) 1px, transparent 1px), linear-gradient(135deg, transparent 0 48%, rgba(0, 166, 210, 0.052) 49% 51%, transparent 52% 100%), radial-gradient(circle at 18% 20%, rgba(0, 212, 255, 0.2), transparent 30rem), radial-gradient(circle at 82% 70%, rgba(35, 240, 208, 0.16), transparent 30rem); background-size: 78px 78px, 78px 78px, 180px 180px, auto, auto; } [data-theme="light"] .section-muted { position: relative; overflow: hidden; background: radial-gradient(circle at 10% 12%, rgba(0, 212, 255, 0.12), transparent 28rem), linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(229, 247, 253, 0.64)); border-color: rgba(2, 19, 38, 0.1); } [data-theme="light"] .site-header.is-scrolled, [data-theme="light"] .navbar-collapse { background: rgba(238, 248, 253, 0.5); border-color: rgba(0, 166, 210, 0.18); box-shadow: 0 18px 54px rgba(0, 90, 130, 0.1); backdrop-filter: blur(22px) saturate(1.2); } [data-theme="light"] .nav-link, [data-theme="light"] .footer-links a, [data-theme="light"] .portfolio-filter { color: #24445e; } [data-theme="light"] .nav-link:hover, [data-theme="light"] .nav-link.active { color: #021326; background: linear-gradient(135deg, rgba(0, 212, 255, 0.16), rgba(35, 240, 208, 0.11)); border-color: rgba(0, 166, 210, 0.22); box-shadow: inset 0 0 0 1px rgba(0, 166, 210, 0.1), 0 12px 32px rgba(0, 166, 210, 0.12); text-shadow: none; } [data-theme="light"] .navbar-toggler, [data-theme="light"] .icon-btn, [data-theme="light"] .theme-toggle, [data-theme="light"] .language-toggle { background: rgba(255, 255, 255, 0.82); border-color: rgba(2, 19, 38, 0.13); box-shadow: 0 10px 26px rgba(2, 19, 38, 0.06); } [data-theme="light"] .site-header { background: transparent; } [data-theme="light"] .site-header .navbar > .container { background: transparent; border-color: transparent; box-shadow: none; } [data-theme="light"] .site-header.is-scrolled .navbar > .container { background: linear-gradient(135deg, rgba(238, 248, 253, 0.56), rgba(225, 247, 253, 0.34)); border-color: rgba(0, 166, 210, 0.2); box-shadow: 0 18px 54px rgba(0, 90, 130, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.48); backdrop-filter: blur(22px) saturate(1.22); } [data-theme="light"] .site-header.is-scrolled::before { background: linear-gradient(90deg, transparent, rgba(0, 166, 210, 0.48), rgba(35, 240, 208, 0.34), transparent); } [data-theme="light"] .hero-section::before, [data-theme="light"] .page-hero::before { opacity: 0.74; background-image: linear-gradient(rgba(0, 166, 210, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(2, 19, 38, 0.055) 1px, transparent 1px); background-size: 72px 72px; } [data-theme="light"] .hero-section, [data-theme="light"] .page-hero { background: radial-gradient(circle at 18% 18%, rgba(0, 212, 255, 0.12), transparent 26rem), radial-gradient(circle at 86% 22%, rgba(35, 240, 208, 0.09), transparent 28rem); } [data-theme="light"] .section-muted::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(0, 166, 210, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(2, 19, 38, 0.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent); } [data-theme="light"] .section-muted > .container { position: relative; z-index: 1; } [data-theme="light"] .hero-title { background: linear-gradient(135deg, #021326 8%, #074369 56%, #009ed1 106%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 18px 30px rgba(0, 166, 210, 0.1)); } [data-theme="light"] .section-kicker { color: #006f91; background: rgba(0, 166, 210, 0.08); border-color: rgba(0, 166, 210, 0.18); } [data-theme="light"] .hero-console, [data-theme="light"] .glass-panel, [data-theme="light"] .service-card, [data-theme="light"] .service-detail, [data-theme="light"] .project-card, [data-theme="light"] .info-card, [data-theme="light"] .contact-card, [data-theme="light"] .contact-form, [data-theme="light"] .cta-panel, [data-theme="light"] .company-metrics, [data-theme="light"] .process-board, [data-theme="light"] .testimonial-feature, [data-theme="light"] .testimonial-card, [data-theme="light"] .portfolio-case, [data-theme="light"] .why-trust-panel { border-color: rgba(2, 19, 38, 0.14); background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 249, 254, 0.82)); box-shadow: 0 28px 86px rgba(2, 19, 38, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9); } [data-theme="light"] .hero-console { box-shadow: 0 34px 110px rgba(0, 166, 210, 0.18), 0 20px 70px rgba(2, 19, 38, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9); } [data-theme="light"] .hero-art { opacity: 0.82; filter: saturate(1.02) contrast(1.02); } [data-theme="light"] .console-logo { background: radial-gradient(circle at center, rgba(0, 212, 255, 0.16), transparent 72%), linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(226, 247, 253, 0.72)); border-color: rgba(0, 166, 210, 0.24); box-shadow: inset 0 0 70px rgba(0, 166, 210, 0.12), 0 24px 70px rgba(2, 19, 38, 0.12); } [data-theme="light"] .floating-chip, [data-theme="light"] .mini-stats span, [data-theme="light"] .contact-line span, [data-theme="light"] .why-proof-list span, [data-theme="light"] .portfolio-filter, [data-theme="light"] .testimonial-demo-badge, [data-theme="light"] .testimonial-signal, [data-theme="light"] .testimonial-trust-note { background: rgba(255, 255, 255, 0.78); border-color: rgba(2, 19, 38, 0.12); box-shadow: 0 10px 30px rgba(2, 19, 38, 0.06); } [data-theme="light"] .card-icon, [data-theme="light"] .project-card > i, [data-theme="light"] .info-card > i, [data-theme="light"] .why-pillar-icon, [data-theme="light"] .process-icon { box-shadow: 0 16px 34px rgba(0, 166, 210, 0.22); } [data-theme="light"] .service-card:hover, [data-theme="light"] .service-detail:hover, [data-theme="light"] .project-card:hover, [data-theme="light"] .info-card:hover, [data-theme="light"] .portfolio-case:hover, [data-theme="light"] .why-pillar:hover { border-color: rgba(0, 166, 210, 0.34); box-shadow: 0 34px 92px rgba(0, 166, 210, 0.15), 0 18px 60px rgba(2, 19, 38, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92); } [data-theme="light"] .why-pillar, [data-theme="light"] .why-trust-bottom, [data-theme="light"] .testimonial-modal .modal-content { border-color: rgba(2, 19, 38, 0.13); background: radial-gradient(circle at 12% 0%, rgba(0, 212, 255, 0.1), transparent 18rem), linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(236, 250, 254, 0.86)); box-shadow: 0 24px 70px rgba(2, 19, 38, 0.12); } [data-theme="light"] .process-icon { color: #007fa8; background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(225, 247, 253, 0.86)); border-color: rgba(0, 166, 210, 0.28); } [data-theme="light"] .process-flow::before { opacity: 0.95; box-shadow: 0 0 20px rgba(0, 166, 210, 0.26); } [data-theme="light"] .portfolio-case-media { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58); } [data-theme="light"] .portfolio-case-media.has-cover-image::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(2, 19, 38, 0.58)), radial-gradient(circle at 82% 18%, rgba(0, 212, 255, 0.2), transparent 15rem); } [data-theme="light"] .portfolio-type-badge { color: #eaf7fc; background: rgba(2, 19, 38, 0.72); border-color: rgba(255, 255, 255, 0.18); } [data-theme="light"] .project-details-modal .modal-content { color: #021326; background: radial-gradient(circle at 18% 12%, rgba(0, 212, 255, 0.16), transparent 24rem), radial-gradient(circle at 92% 84%, rgba(35, 240, 208, 0.12), transparent 24rem), linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(238, 248, 253, 0.98)); box-shadow: 0 34px 96px rgba(6, 24, 45, 0.22); } [data-theme="light"] .project-details-modal .modal-title, [data-theme="light"] .project-modal-summary h3, [data-theme="light"] .project-modal-features h3 { color: #021326; } [data-theme="light"] .project-modal-lead, [data-theme="light"] .project-modal-summary p, [data-theme="light"] .project-modal-features li, [data-theme="light"] .project-modal-meta span { color: #31546e; } [data-theme="light"] .project-modal-summary, [data-theme="light"] .project-modal-features, [data-theme="light"] .project-modal-close, [data-theme="light"] .project-modal-thumbs button { border-color: rgba(6, 24, 45, 0.12); background: rgba(255, 255, 255, 0.72); } [data-theme="light"] .portfolio-filter.is-active, [data-theme="light"] .btn-cyan { color: #021326; box-shadow: 0 18px 44px rgba(0, 166, 210, 0.24); } [data-theme="light"] .btn-outline-tech { color: #021326; background: rgba(255, 255, 255, 0.72); border-color: rgba(2, 19, 38, 0.14); } [data-theme="light"] .form-control, [data-theme="light"] .form-select, [data-theme="light"] .testimonial-form .form-control { color: #021326; background-color: rgba(255, 255, 255, 0.82); border-color: rgba(2, 19, 38, 0.16); } [data-theme="light"] .form-control::placeholder, [data-theme="light"] .testimonial-form .form-control::placeholder { color: #6f8798; } [data-theme="light"] .site-footer { background: radial-gradient(circle at 12% 0%, rgba(0, 212, 255, 0.1), transparent 24rem), linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(232, 248, 253, 0.92)); border-color: rgba(2, 19, 38, 0.12); } :root { --header-height: 78px; } html:not([data-theme="light"]) .ambient-field { opacity: 0.66; } html:not([data-theme="light"]) .hero-particles { opacity: 0.72; } .site-header { padding: 8px 0; min-height: var(--header-height); } .site-header .navbar > .container { min-height: 72px; padding-block: 5px; border-radius: 18px; } .brand-logo-frame { width: clamp(120px, 10vw, 150px); max-width: clamp(120px, 10vw, 150px); } .site-logo { width: 100%; max-height: 48px; } .navbar-nav { align-items: center; } .nav-link { min-height: 42px; display: inline-flex; align-items: center; } .navbar-toggler, .icon-btn, .theme-toggle { min-width: 42px; height: 42px; border-radius: 13px; } .language-toggle { min-width: 82px; } .nav-cta { min-height: 44px; padding: 11px 18px; border-radius: 13px; white-space: nowrap; } .hero-section { min-height: 88svh; padding: calc(var(--header-height) + 28px) 0 64px; } .hero-section .row { --bs-gutter-x: clamp(2rem, 5vw, 5rem); } .hero-copy { position: relative; z-index: 2; } .hero-copy .section-kicker { margin-bottom: 20px; } .hero-title { max-width: 760px; font-size: clamp(42px, 5vw, 72px); line-height: 1.12; margin-bottom: 24px; } .hero-text { max-width: 680px; font-size: clamp(1rem, 1.2vw, 1.18rem); line-height: 2; } .hero-actions { gap: 14px; margin-top: 34px; } .hero-actions .btn { min-height: 52px; padding: 13px 24px; } .btn { transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .btn-cyan { box-shadow: 0 16px 38px rgba(0, 212, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.34); } .btn-outline-tech { background: rgba(215, 231, 242, 0.06); backdrop-filter: blur(16px); } .btn:hover { transform: translateY(-3px); } .hero-console { width: min(100%, 560px); min-height: clamp(390px, 38vw, 465px); margin-inline: auto; border-radius: 30px; background: radial-gradient(circle at 32% 22%, rgba(0, 212, 255, 0.16), transparent 16rem), radial-gradient(circle at 76% 76%, rgba(35, 240, 208, 0.12), transparent 15rem), linear-gradient(145deg, rgba(8, 37, 65, 0.82), rgba(3, 16, 31, 0.66)); box-shadow: 0 0 90px rgba(0, 212, 255, 0.13), 0 30px 90px rgba(0, 0, 0, 0.28); } .hero-console::before { opacity: 0.62; background: linear-gradient(120deg, rgba(255, 255, 255, 0.07), transparent 34%, rgba(35, 240, 208, 0.07)), repeating-linear-gradient(90deg, transparent 0 38px, rgba(0, 212, 255, 0.038) 39px 40px); } .console-logo { inset: 104px 66px 104px; background: radial-gradient(circle at center, rgba(0, 212, 255, 0.13), transparent 72%), linear-gradient(145deg, rgba(6, 24, 45, 0.8), rgba(2, 11, 22, 0.56)); } .console-logo img { width: min(82%, 390px); max-height: 82%; } .floating-chip { min-height: 40px; height: auto; max-height: 42px; padding: 9px 12px; gap: 8px; font-size: 0.9rem; border-color: rgba(35, 240, 208, 0.22); background: rgba(3, 16, 31, 0.72); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18), 0 0 26px rgba(0, 212, 255, 0.08); } .floating-chip span { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; } .floating-chip i { flex: 0 0 auto; } .chip-1, .chip-2, .chip-3, .chip-4 { inset-block-end: auto; } .chip-5, .chip-6, .chip-7, .chip-8, .chip-9 { inset-block-start: auto; } .chip-1, .chip-3, .chip-5, .chip-7 { inset-inline-end: auto; } .chip-2, .chip-4, .chip-6, .chip-8, .chip-9 { inset-inline-start: auto; } .chip-1 { inset-block-start: 78px; inset-inline-start: 18px; } .chip-2 { inset-block-start: 78px; inset-inline-end: 22px; animation-delay: 0.35s; } .chip-3 { inset-block-start: 116px; inset-inline-start: 28px; animation-delay: 0.7s; } .chip-4 { inset-block-start: 120px; inset-inline-end: 28px; animation-delay: 1.05s; } .chip-5 { inset-block-end: 84px; inset-inline-start: 24px; animation-delay: 1.4s; } .chip-6 { inset-block-end: 84px; inset-inline-end: 24px; animation-delay: 1.75s; } .chip-7 { inset-block-end: 44px; inset-inline-start: 48px; animation-delay: 2.1s; } .chip-8 { inset-block-end: 44px; inset-inline-end: 50px; animation-delay: 2.45s; } .chip-9 { inset-inline-start: 50%; inset-block-end: 6px; transform: translate3d(calc(-50% + var(--px, 0)), var(--py, 0), 0); animation-delay: 2.8s; } [dir="rtl"] .chip-9 { transform: translate3d(calc(50% + var(--px, 0)), var(--py, 0), 0); } [data-theme="light"] .site-header.is-scrolled .navbar > .container { background: linear-gradient(135deg, rgba(238, 248, 253, 0.5), rgba(225, 247, 253, 0.26)); border-color: rgba(0, 166, 210, 0.18); box-shadow: 0 18px 48px rgba(0, 90, 130, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.42); } [data-theme="light"] .hero-console { border-color: rgba(0, 166, 210, 0.22); background: radial-gradient(circle at 30% 20%, rgba(0, 212, 255, 0.18), transparent 17rem), radial-gradient(circle at 76% 76%, rgba(35, 240, 208, 0.14), transparent 15rem), linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(225, 247, 253, 0.72)); box-shadow: 0 32px 90px rgba(0, 166, 210, 0.17), 0 18px 64px rgba(2, 19, 38, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9); } [data-theme="light"] .hero-console::before { opacity: 0.72; background: linear-gradient(120deg, rgba(255, 255, 255, 0.44), transparent 34%, rgba(0, 166, 210, 0.08)), repeating-linear-gradient(90deg, transparent 0 38px, rgba(0, 166, 210, 0.052) 39px 40px); } [data-theme="light"] .console-logo { background: radial-gradient(circle at center, rgba(0, 212, 255, 0.18), transparent 72%), linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(225, 247, 253, 0.78)); border-color: rgba(0, 166, 210, 0.24); } [data-theme="light"] .floating-chip { color: #021326; background: rgba(255, 255, 255, 0.78); border-color: rgba(0, 166, 210, 0.18); box-shadow: 0 16px 38px rgba(0, 166, 210, 0.12); } [data-theme="light"] .btn-outline-tech { background: rgba(255, 255, 255, 0.62); border-color: rgba(0, 166, 210, 0.2); } @media (max-width: 1199px) { .hero-console { width: min(100%, 530px); } .floating-chip { font-size: 0.82rem; } .floating-chip span { max-width: 132px; } } @media (max-width: 991px) { :root { --header-height: 76px; } .site-header .navbar > .container { min-height: 58px; } .hero-section { min-height: auto; padding-top: calc(var(--header-height) + 30px); } .hero-console { width: min(100%, 540px); min-height: 400px; } .navbar-collapse { background: var(--header); backdrop-filter: blur(22px); } } @media (max-width: 767px) { .brand-logo-frame { width: clamp(124px, 36vw, 148px); max-width: clamp(124px, 36vw, 148px); } .site-logo { max-height: 43px; } .hero-title { font-size: clamp(34px, 9vw, 46px); line-height: 1.18; } .hero-text { font-size: 1rem; line-height: 1.85; } .hero-actions { margin-top: 28px; } .hero-actions .btn { min-height: 50px; } .hero-console { width: 100%; min-height: 360px; border-radius: 24px; } .console-logo { inset: 90px 22px 94px; } .console-logo img { width: min(84%, 300px); } .floating-chip { min-height: 34px; padding: 8px 10px; font-size: 0.72rem; } .floating-chip span { max-width: 112px; } .chip-1 { inset-block-start: 72px; inset-inline-start: 12px; } .chip-2 { inset-block-start: 72px; inset-inline-end: 12px; } .chip-3 { inset-block-start: 124px; inset-inline-start: 18px; } .chip-4 { inset-block-start: 124px; inset-inline-end: 18px; } .chip-5 { inset-block-end: 96px; inset-inline-start: 14px; } .chip-6 { inset-block-end: 96px; inset-inline-end: 14px; } .chip-7 { inset-block-end: 48px; inset-inline-start: 20px; } .chip-8 { inset-block-end: 48px; inset-inline-end: 20px; } .chip-9 { inset-block-end: 14px; max-width: 58%; } } @media (max-width: 420px) { .site-header .navbar > .container { padding-inline: 10px; } .brand-logo-frame { width: 128px; max-width: 128px; } .hero-console { min-height: 348px; } .chip-1, .chip-3, .chip-5 { inset-inline-start: 10px; } .chip-2, .chip-4, .chip-6 { inset-inline-end: 10px; } .chip-7, .chip-8, .chip-9 { display: none; } } .site-header { padding: 8px 0; min-height: 78px; } .site-header .navbar > .container { min-height: 68px; padding: 6px 22px; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); border: 1px solid rgba(215, 231, 242, 0.13); border-radius: 22px; background: linear-gradient(135deg, rgba(2, 11, 22, 0.54), rgba(3, 16, 31, 0.34)); box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(22px) saturate(1.2); } .site-header.is-scrolled .navbar > .container { background: linear-gradient(135deg, rgba(2, 11, 22, 0.66), rgba(3, 16, 31, 0.46)); border-color: rgba(35, 240, 208, 0.18); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07); } .navbar-brand { margin: 0; padding: 0; flex: 0 0 auto; } .brand-logo-frame { width: clamp(128px, 9.4vw, 148px); max-width: clamp(128px, 9.4vw, 148px); } .site-logo { width: 100%; max-height: 46px; } .navbar-collapse { align-items: center; min-width: 0; } .navbar-nav { align-items: center; gap: 6px; margin-inline: auto; margin-block: 0; padding: 0; border: 0; border-radius: 0; background: transparent; } .nav-link { min-height: 40px; padding: 9px 14px !important; border-radius: 999px; line-height: 1; } .nav-link::after { inset-block-end: 4px; } .nav-actions { flex: 0 0 auto; align-items: center; gap: 10px; } .navbar-toggler, .icon-btn, .theme-toggle { min-width: 42px; height: 42px; border-radius: 14px; } .language-toggle { min-width: 94px; padding-inline: 14px; } .nav-cta { min-height: 44px; padding: 10px 18px; border-radius: 14px; } [data-theme="light"] .site-header .navbar > .container { background: linear-gradient(135deg, rgba(232, 248, 253, 0.44), rgba(255, 255, 255, 0.22)); border-color: rgba(0, 166, 210, 0.2); box-shadow: 0 18px 54px rgba(0, 90, 130, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.42); backdrop-filter: blur(24px) saturate(1.22); } [data-theme="light"] .site-header.is-scrolled .navbar > .container { background: linear-gradient(135deg, rgba(232, 248, 253, 0.58), rgba(255, 255, 255, 0.3)); border-color: rgba(0, 166, 210, 0.24); } [data-theme="light"] .navbar-nav { background: transparent; border: 0; box-shadow: none; } [data-theme="light"] .nav-link { color: #18384f; } [data-theme="light"] .nav-link:hover, [data-theme="light"] .nav-link.active { color: #021326; background: rgba(0, 212, 255, 0.12); border-color: rgba(0, 166, 210, 0.18); } @media (max-width: 991px) { .site-header { min-height: 74px; } .site-header .navbar > .container { min-height: 58px; padding: 7px 14px; border-radius: 18px; } .navbar-collapse { margin-top: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--header); box-shadow: var(--shadow); backdrop-filter: blur(22px); } .navbar-nav { align-items: stretch; gap: 5px; margin-bottom: 12px; } .nav-link { justify-content: center; min-height: 44px; } } @media (max-width: 767px) { .brand-logo-frame { width: clamp(126px, 37vw, 146px); max-width: clamp(126px, 37vw, 146px); } .site-logo { max-height: 42px; } } .site-header, .site-header.is-scrolled { background: transparent !important; border: 0 !important; box-shadow: none !important; } .site-header::before, .site-header.is-scrolled::before { display: none !important; } .site-header .navbar, .site-header .navbar-collapse, .site-header .navbar-nav, .site-header .nav-actions { background: transparent !important; border: 0 !important; box-shadow: none !important; } .site-header .navbar-collapse { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="light"] .site-header .navbar-collapse, [data-theme="light"] .site-header .navbar-nav { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="light"] .site-header .navbar > .container { background: linear-gradient(135deg, rgba(241, 252, 255, 0.68), rgba(255, 255, 255, 0.36)) !important; border-color: rgba(0, 166, 210, 0.22) !important; box-shadow: 0 18px 50px rgba(0, 90, 130, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important; } [data-theme="light"] .site-header.is-scrolled .navbar > .container { background: linear-gradient(135deg, rgba(238, 250, 254, 0.76), rgba(255, 255, 255, 0.44)) !important; } @media (max-width: 991px) { .site-header .navbar-collapse, [data-theme="light"] .site-header .navbar-collapse { margin-top: 12px; padding: 16px; border: 1px solid var(--border) !important; border-radius: 20px; background: var(--header) !important; box-shadow: var(--shadow) !important; backdrop-filter: blur(22px) saturate(1.16) !important; -webkit-backdrop-filter: blur(22px) saturate(1.16) !important; } } @media (min-width: 992px) { .site-header .navbar > .container { padding-inline: clamp(24px, 3vw, 42px); column-gap: clamp(12px, 1.5vw, 22px); } .site-header .navbar-collapse { display: flex !important; flex: 1 1 auto; align-items: center; justify-content: flex-start; gap: clamp(16px, 2vw, 28px); } .site-header .navbar-nav { flex: 0 1 auto; justify-content: center; gap: clamp(10px, 1.1vw, 18px); margin-inline-start: 0 !important; margin-inline-end: auto !important; } .site-header .nav-actions { flex: 0 0 auto; gap: 12px; margin-inline-start: 0; } .site-header .navbar-brand { margin-inline-end: clamp(8px, 1vw, 14px); } } .about-hero .container { max-width: 1080px; } .about-hero-shell { position: relative; max-width: 920px; margin-inline: auto; } .about-hero-shell::before { content: ""; position: absolute; inset-inline: 12%; inset-block-start: -34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.65), rgba(35, 240, 208, 0.45), transparent); } .about-hero-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(28px, 4vw, 46px); overflow: hidden; border: 1px solid rgba(35, 240, 208, 0.16); border-radius: 24px; background: linear-gradient(135deg, rgba(9, 39, 70, 0.72), rgba(4, 22, 42, 0.6)); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(18px); } .about-hero-metric { min-height: 118px; padding: 24px 20px; display: grid; align-content: center; justify-items: center; gap: 8px; background: rgba(255, 255, 255, 0.018); } .about-hero-metric strong { color: var(--cyan); font-family: "Inter", "Cairo", sans-serif; font-size: clamp(2rem, 3vw, 3.15rem); font-weight: 900; line-height: 1; text-shadow: 0 0 28px rgba(0, 212, 255, 0.26); } .about-hero-metric span { color: var(--text-soft); font-size: 0.92rem; font-weight: 800; text-align: center; } .about-company-card { min-height: 100%; padding: clamp(28px, 4vw, 44px); } .about-company-card h2 { max-width: 620px; margin: 14px 0 18px; color: var(--text); font-size: clamp(1.75rem, 3vw, 2.65rem); font-weight: 900; line-height: 1.25; } .about-company-card p { max-width: 760px; margin: 0; color: var(--text-soft); font-size: 1.05rem; line-height: 2; } .about-direction-card { position: relative; overflow: hidden; padding: 28px; } .about-direction-card::after { content: ""; position: absolute; inset-inline-end: -48px; inset-block-end: -48px; width: 140px; height: 140px; border: 1px solid rgba(0, 212, 255, 0.16); border-radius: 50%; opacity: 0.8; } .about-direction-icon { width: 58px; height: 58px; margin-bottom: 22px; display: grid; place-items: center; border: 1px solid rgba(35, 240, 208, 0.25); border-radius: 18px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 16px 38px rgba(0, 212, 255, 0.16); } .about-direction-icon i { margin: 0; color: inherit; font-size: 1.35rem; } .site-body :is(.about-values-section, .about-method-section) { --about-cyan: 0, 212, 255; --about-depth: 4, 22, 41; position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(48px, 6vw, 84px); background: linear-gradient(180deg, transparent, rgba(var(--about-depth), 0.65) 28%, rgba(var(--about-depth), 0.65) 72%, transparent); } :is(.about-values-section, .about-method-section) > .container { position: relative; z-index: 1; } :is(.about-values-section, .about-method-section)::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, black 16%, black 84%, transparent); mask-image: linear-gradient(180deg, transparent, black 16%, black 84%, transparent); } .about-values-section::before { background: radial-gradient(ellipse at 12% 18%, rgba(var(--about-cyan), 0.13), transparent 55%), radial-gradient(ellipse at 90% 80%, rgba(35, 240, 208, 0.08), transparent 52%), linear-gradient(rgba(var(--about-cyan), 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--about-cyan), 0.035) 1px, transparent 1px); background-size: auto, auto, 44px 44px, 44px 44px; } .about-values-section::after { content: ""; position: absolute; inset-inline-end: -100px; inset-block-start: -130px; width: clamp(280px, 38vw, 520px); aspect-ratio: 1; border: 1px solid rgba(var(--about-cyan), 0.13); border-radius: 50%; pointer-events: none; z-index: 0; } .about-method-section::before { background: linear-gradient(90deg, transparent, rgba(var(--about-cyan), 0.065) 38%, transparent 85%), radial-gradient(ellipse at 85% 48%, rgba(var(--about-cyan), 0.085), transparent 65%), linear-gradient(rgba(var(--about-cyan), 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--about-cyan), 0.035) 1px, transparent 1px); background-size: auto, auto, 72px 36px, 72px 36px; } .site-body .about-values-section .why-trust-panel, .site-body .about-method-section .about-method-panel { position: relative; overflow: visible; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; isolation: auto; } .about-values-section .why-trust-panel::before, .about-values-section .why-trust-panel::after { content: none; } .site-body .about-values-section .why-trust-bottom { margin-top: clamp(24px, 3vw, 36px); padding: 24px 0; border: 0; border-block: 1px solid rgba(var(--about-cyan), 0.16); border-radius: 0; background: linear-gradient(90deg, transparent, rgba(var(--about-cyan), 0.04), transparent); box-shadow: none; } html[data-theme="light"] .site-body :is(.about-values-section, .about-method-section) { --about-cyan: 0, 150, 190; --about-depth: 230, 245, 249; } @media (min-width: 992px) { .about-values-section .why-pillar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .about-method-panel > * { position: relative; z-index: 1; } .about-method-head { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.8fr); align-items: end; gap: clamp(24px, 4vw, 64px); margin-bottom: clamp(28px, 4vw, 46px); } .about-method-head .section-title { max-width: 620px; margin-bottom: 0; } .about-method-head > p { margin: 0; color: var(--text-soft); font-size: 1.02rem; line-height: 1.95; } .about-method-map { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); } .about-method-map::before { content: ""; position: absolute; inset-inline: 6%; inset-block-start: 43px; height: 2px; background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.7), rgba(35, 240, 208, 0.54), transparent); opacity: 0.58; } .about-method-step { position: relative; min-height: 248px; padding: 22px; overflow: hidden; border: 1px solid rgba(35, 240, 208, 0.16); border-radius: 22px; background: linear-gradient(145deg, rgba(8, 37, 65, 0.78), rgba(3, 19, 38, 0.66)); box-shadow: 0 18px 54px rgba(0, 0, 0, 0.16); } .about-method-step::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.18), transparent 65%); transition: opacity 0.25s ease; } .about-method-step:hover::before { opacity: 1; } .about-method-step > * { position: relative; z-index: 1; } .about-method-step-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .about-method-icon { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(35, 240, 208, 0.26); border-radius: 18px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 16px 38px rgba(0, 212, 255, 0.18); } .about-method-icon i { font-size: 1.35rem; } .about-method-number { color: rgba(215, 231, 242, 0.16); font-family: "Inter", "Cairo", sans-serif; font-size: 2rem; font-weight: 900; line-height: 1; } .about-method-step h3 { margin-bottom: 12px; color: var(--text); font-size: 1.08rem; font-weight: 900; line-height: 1.55; } .about-method-step p { margin: 0; color: var(--text-soft); font-size: 0.92rem; line-height: 1.85; } .about-method-note { display: flex; align-items: center; gap: 12px; margin-top: clamp(20px, 3vw, 30px); padding: 18px 0; border-block: 1px solid rgba(var(--about-cyan), 0.16); color: var(--text-soft); background: linear-gradient(90deg, transparent, rgba(var(--about-cyan), 0.035), transparent); } .about-method-note i { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: var(--turquoise); background: rgba(35, 240, 208, 0.08); } [data-theme="light"] .about-hero-metrics { background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(232, 248, 253, 0.74)); border-color: rgba(0, 166, 210, 0.18); box-shadow: 0 24px 74px rgba(0, 90, 130, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7); } [data-theme="light"] .about-hero-metric { background: rgba(255, 255, 255, 0.35); } [data-theme="light"] .about-hero-metric strong { color: #008fbd; text-shadow: none; } [data-theme="light"] .about-company-card p, [data-theme="light"] .about-method-section p, [data-theme="light"] .about-hero-metric span { color: #38536a; } [data-theme="light"] .about-direction-card::after { border-color: rgba(0, 166, 210, 0.14); } [data-theme="light"] .about-method-head > p, [data-theme="light"] .about-method-step p, [data-theme="light"] .about-method-note { color: #38536a; } [data-theme="light"] .about-method-step { background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(232, 248, 253, 0.74)); border-color: rgba(0, 166, 210, 0.17); box-shadow: 0 18px 52px rgba(0, 90, 130, 0.09); } [data-theme="light"] .about-method-number { color: rgba(2, 19, 38, 0.13); } @media (max-width: 991px) { .about-hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-company-card { min-height: auto; } .about-method-head { grid-template-columns: 1fr; align-items: start; } .about-method-map { grid-template-columns: 1fr; } .about-method-map::before { inset-inline-start: 29px; inset-inline-end: auto; inset-block: 20px; width: 2px; height: auto; background: linear-gradient(180deg, transparent, rgba(0, 212, 255, 0.7), rgba(35, 240, 208, 0.54), transparent); } .about-method-step { min-height: auto; } } @media (max-width: 575px) { .about-hero-metrics { grid-template-columns: 1fr; border-radius: 20px; } .about-hero-metric { min-height: 96px; } .about-company-card, .about-direction-card { padding: 24px; } .about-method-step { padding: 20px; border-radius: 20px; } .about-method-note { align-items: flex-start; } } .site-header .navbar-nav .nav-link { color: rgba(215, 231, 242, 0.86) !important; } .site-header .navbar-nav .nav-link:hover, .site-header .navbar-nav .nav-link:focus-visible { color: var(--white) !important; background: rgba(0, 212, 255, 0.08) !important; border-color: rgba(35, 240, 208, 0.18) !important; box-shadow: 0 10px 26px rgba(0, 212, 255, 0.08); text-shadow: 0 0 18px rgba(35, 240, 208, 0.28); } .site-header .navbar-nav .nav-link.active, .site-header .navbar-nav .nav-link[aria-current="page"] { color: var(--white) !important; background: linear-gradient(135deg, rgba(0, 212, 255, 0.16), rgba(35, 240, 208, 0.08)) !important; border-color: rgba(35, 240, 208, 0.32) !important; box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.16), 0 14px 34px rgba(0, 212, 255, 0.14) !important; text-shadow: 0 0 16px rgba(35, 240, 208, 0.34); } .site-header .navbar-nav .nav-link.active::after, .site-header .navbar-nav .nav-link[aria-current="page"]::after { width: calc(100% - 30px); opacity: 1; background: linear-gradient(90deg, var(--cyan), var(--turquoise)); box-shadow: 0 0 14px rgba(35, 240, 208, 0.55); } [data-theme="light"] .site-header .navbar-nav .nav-link { color: #24445e !important; } [data-theme="light"] .site-header .navbar-nav .nav-link:hover, [data-theme="light"] .site-header .navbar-nav .nav-link:focus-visible { color: #021326 !important; background: rgba(0, 166, 210, 0.08) !important; border-color: rgba(0, 166, 210, 0.18) !important; text-shadow: none; } [data-theme="light"] .site-header .navbar-nav .nav-link.active, [data-theme="light"] .site-header .navbar-nav .nav-link[aria-current="page"] { color: #021326 !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(210, 247, 255, 0.46)) !important; border-color: rgba(0, 166, 210, 0.3) !important; box-shadow: inset 0 0 0 1px rgba(0, 166, 210, 0.12), 0 14px 32px rgba(0, 90, 130, 0.12) !important; text-shadow: none; } .admin-body { min-height: 100vh; background: radial-gradient(circle at 14% 8%, rgba(0, 212, 255, 0.13), transparent 28rem), radial-gradient(circle at 86% 78%, rgba(35, 240, 208, 0.1), transparent 30rem), linear-gradient(180deg, #020b16, #03101f); } .admin-shell { min-height: 100vh; display: grid; grid-template-columns: 290px minmax(0, 1fr); } .admin-sidebar { position: sticky; top: 0; height: 100vh; padding: 22px; display: flex; flex-direction: column; gap: 24px; border-left: 1px solid rgba(215, 231, 242, 0.12); background: linear-gradient(180deg, rgba(8, 37, 65, 0.78), rgba(2, 11, 22, 0.88)); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24); } .admin-brand { display: grid; gap: 12px; padding: 16px; border: 1px solid rgba(35, 240, 208, 0.14); border-radius: 22px; background: rgba(255, 255, 255, 0.035); } .admin-brand img { width: 160px; max-width: 100%; } .admin-brand span, .admin-eyebrow, .admin-kicker { color: var(--turquoise); font-size: 0.82rem; font-weight: 900; } .admin-nav { display: grid; gap: 8px; } .admin-nav a, .admin-ghost-link, .admin-primary-button, .admin-secondary-button, .admin-icon-button, .admin-filter-row button, .admin-card-actions button, .admin-review-actions button { transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, color 0.22s ease; } .admin-nav a { min-height: 50px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; border: 1px solid transparent; border-radius: 16px; color: rgba(215, 231, 242, 0.82); font-weight: 900; } .admin-nav a i { color: var(--cyan); font-size: 1.1rem; } .admin-nav a:hover, .admin-nav a.is-active { color: var(--turquoise); border-color: rgba(35, 240, 208, 0.24); background: rgba(0, 212, 255, 0.08); box-shadow: 0 14px 34px rgba(0, 212, 255, 0.08); } .admin-sidebar-note { margin-top: auto; padding: 14px; display: flex; gap: 10px; border: 1px solid rgba(215, 231, 242, 0.12); border-radius: 18px; color: var(--text-soft); background: rgba(255, 255, 255, 0.035); font-size: 0.86rem; } .admin-sidebar-note i { color: var(--turquoise); } .admin-main { min-width: 0; } .admin-topbar { position: sticky; top: 0; z-index: 20; min-height: 86px; padding: 18px clamp(18px, 3vw, 34px); display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(215, 231, 242, 0.1); background: rgba(2, 11, 22, 0.76); backdrop-filter: blur(20px); } .admin-topbar h1 { margin: 4px 0 0; color: var(--white); font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 950; } .admin-topbar-actions { display: flex; align-items: center; gap: 10px; } .admin-menu-toggle { display: none !important; } .admin-icon-button, .admin-ghost-link, .admin-primary-button, .admin-secondary-button { min-height: 44px; border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 14px; color: var(--white); background: rgba(255, 255, 255, 0.045); display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 900; } .admin-icon-button { width: 44px; } .admin-ghost-link, .admin-primary-button, .admin-secondary-button { padding-inline: 16px; } .admin-primary-button { border-color: transparent; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 16px 38px rgba(0, 212, 255, 0.18); } .admin-secondary-button:hover, .admin-ghost-link:hover, .admin-icon-button:hover, .admin-primary-button:hover { transform: translateY(-2px); } .admin-content { padding: clamp(18px, 3vw, 34px); } .admin-hero-panel, .admin-panel, .admin-stat-card { border: 1px solid rgba(215, 231, 242, 0.13); background: linear-gradient(145deg, rgba(8, 37, 65, 0.72), rgba(2, 11, 22, 0.58)); box-shadow: 0 24px 76px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.045); backdrop-filter: blur(18px); } .admin-hero-panel { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(24px, 4vw, 40px); border-radius: 28px; } .admin-hero-panel h2 { max-width: 720px; margin: 10px 0 12px; color: var(--white); font-size: clamp(1.65rem, 3vw, 2.6rem); font-weight: 950; } .admin-hero-panel p { max-width: 820px; margin: 0; } .admin-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; } .admin-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 20px 0; } .admin-stat-card { min-height: 150px; padding: 22px; border-radius: 24px; display: grid; gap: 8px; } .admin-stat-card i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); } .admin-stat-card strong { color: var(--white); font-family: "Inter", "Cairo", sans-serif; font-size: 2.15rem; font-weight: 950; line-height: 1; } .admin-stat-card span { color: var(--text-soft); font-weight: 800; } .admin-grid-2, .admin-workspace { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 20px; } .admin-workspace { align-items: start; } .admin-panel { padding: clamp(20px, 3vw, 28px); border-radius: 26px; } .admin-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .admin-panel-head h2, .admin-panel-head h3 { margin: 6px 0 0; color: var(--white); font-weight: 950; } .admin-panel-head a { color: var(--turquoise); font-weight: 900; } .admin-panel-head p { max-width: 760px; margin: 8px 0 0; color: var(--text-soft); line-height: 1.8; } .admin-page-actions, .admin-projects-toolbar { margin-bottom: 20px; } .admin-page-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .admin-projects-toolbar .admin-panel-head { align-items: center; } .admin-create-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr); gap: 20px; align-items: start; } .admin-create-aside { position: sticky; top: 22px; display: grid; gap: 16px; } .admin-badge, .admin-count, .admin-status { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 900; } .admin-badge, .admin-count { color: var(--turquoise); border: 1px solid rgba(35, 240, 208, 0.2); background: rgba(35, 240, 208, 0.06); } .admin-status { color: var(--cyan); border: 1px solid rgba(0, 212, 255, 0.2); background: rgba(0, 212, 255, 0.06); } .admin-status.is-live { color: var(--turquoise); border-color: rgba(35, 240, 208, 0.22); background: rgba(35, 240, 208, 0.08); } .admin-status.is-draft, .admin-status.is-review { color: #d7e7f2; border-color: rgba(215, 231, 242, 0.16); background: rgba(215, 231, 242, 0.055); } .admin-status.is-rejected { color: #d7e7f2; border-color: rgba(215, 231, 242, 0.12); background: rgba(215, 231, 242, 0.035); } .admin-table-list, .admin-feedback-stack, .admin-project-list, .admin-testimonial-list { display: grid; gap: 12px; } .admin-table-row, .admin-feedback-mini, .admin-project-card, .admin-testimonial-card, .admin-site-preview-card { border: 1px solid rgba(215, 231, 242, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.035); } .admin-table-row { min-height: 72px; padding: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; } .admin-table-row strong, .admin-feedback-mini strong, .admin-project-card h3, .admin-testimonial-head strong, .admin-site-preview-card strong { color: var(--white); font-weight: 950; } .admin-table-row small, .admin-testimonial-head small { color: var(--muted); font-weight: 800; } .admin-row-icon, .admin-avatar, .admin-project-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: var(--turquoise); border: 1px solid rgba(35, 240, 208, 0.2); background: rgba(35, 240, 208, 0.06); } .admin-avatar.is-female { color: var(--cyan); border-color: rgba(0, 212, 255, 0.2); background: rgba(0, 212, 255, 0.06); } .admin-feedback-mini { padding: 14px; display: flex; gap: 12px; } .admin-feedback-mini p, .admin-testimonial-card p, .admin-site-preview-card p { margin: 4px 0 0; color: var(--text-soft); line-height: 1.75; } .admin-form { display: grid; gap: 16px; } .admin-create-main { gap: 20px; } .admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .admin-form label { display: grid; gap: 8px; color: var(--text-soft); font-weight: 900; } .admin-form input, .admin-form select, .admin-form textarea { width: 100%; border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 15px; padding: 13px 14px; color: var(--white); background: rgba(255, 255, 255, 0.045); outline: 0; } .admin-form textarea { resize: vertical; } .admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus { border-color: rgba(35, 240, 208, 0.36); box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.08); } .admin-form-section { display: grid; gap: 16px; padding: 18px; border: 1px solid rgba(215, 231, 242, 0.11); border-radius: 22px; background: radial-gradient(circle at 96% 0%, rgba(0, 212, 255, 0.075), transparent 18rem), rgba(255, 255, 255, 0.024); } .admin-form-section-head { display: flex; align-items: flex-start; gap: 12px; } .admin-form-section-head > i { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 14px 30px rgba(0, 212, 255, 0.12); } .admin-form-section-head h3, .admin-project-preview-card h3, .admin-helper-card h3 { margin: 0; color: var(--white); font-weight: 950; } .admin-form-section-head span { display: block; margin-top: 4px; color: var(--muted); font-weight: 800; line-height: 1.7; } .admin-category-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .admin-category-option { position: relative; cursor: pointer; } .admin-category-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .admin-category-option span { min-height: 56px; padding: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(215, 231, 242, 0.13); border-radius: 16px; color: var(--text-soft); background: rgba(255, 255, 255, 0.035); font-weight: 900; transition: 0.22s ease; } .admin-category-option i { color: var(--cyan); font-size: 1.15rem; } .admin-category-option input:checked + span { color: var(--navy-980); border-color: transparent; background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 16px 34px rgba(0, 212, 255, 0.14); } .admin-category-option input:checked + span i { color: var(--navy-980); } .admin-upload-placeholder { position: relative; padding: 18px; display: flex; align-items: center; gap: 14px; border: 1px dashed rgba(35, 240, 208, 0.26); border-radius: 18px; color: var(--text-soft); background: rgba(0, 212, 255, 0.04); } .admin-form .admin-upload-placeholder { display: flex; } .admin-upload-placeholder i { color: var(--turquoise); font-size: 1.8rem; } .admin-upload-dropzone { cursor: pointer; } .admin-upload-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .admin-fieldset { display: grid; gap: 14px; padding: 16px; border: 1px solid rgba(215, 231, 242, 0.12); border-radius: 20px; background: rgba(255, 255, 255, 0.025); } .admin-fieldset-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .admin-fieldset-head h3 { margin: 4px 0 0; color: var(--white); font-size: 1.05rem; font-weight: 950; } .admin-fieldset-head small { max-width: 260px; color: var(--muted); font-weight: 800; line-height: 1.7; } .admin-tech-checklist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .admin-tech-option { position: relative; cursor: pointer; } .admin-tech-option input { position: absolute; inset-inline-start: 0; inset-block-start: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .admin-tech-option span { min-height: 44px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(215, 231, 242, 0.13); border-radius: 14px; color: var(--text-soft); background: rgba(255, 255, 255, 0.035); font-size: 0.86rem; font-weight: 900; transition: 0.22s ease; } .admin-tech-checklist-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .admin-tech-checklist-logos .admin-tech-option span { min-height: 78px; align-items: flex-start; flex-direction: column; gap: 7px; } .admin-tech-option strong { color: inherit; font-size: 0.88rem; line-height: 1.2; } .admin-tech-option small { color: var(--muted); font-family: "Inter", "Cairo", sans-serif; font-size: 0.68rem; font-weight: 850; letter-spacing: 0; } .admin-tech-logo { width: 28px; height: 28px; object-fit: contain; padding: 4px; border-radius: 9px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); } .admin-tech-option i { color: var(--cyan); } .admin-tech-option input:checked + span { color: var(--navy-980); border-color: transparent; background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 12px 28px rgba(0, 212, 255, 0.14); } .admin-tech-option input:checked + span i { color: var(--navy-980); } .admin-tech-option input:checked + span small { color: rgba(2, 11, 22, 0.72); } .admin-image-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .admin-image-placeholder { min-height: 86px; display: grid; place-items: center; gap: 6px; border: 1px dashed rgba(0, 212, 255, 0.22); border-radius: 16px; color: var(--text-soft); background: rgba(0, 212, 255, 0.035); font-weight: 900; } .admin-image-placeholder i { color: var(--turquoise); font-size: 1.45rem; } .admin-image-placeholder.is-icon-fallback { border-style: solid; background: rgba(35, 240, 208, 0.055); } .admin-form-actions, .admin-filter-row, .admin-card-actions, .admin-review-actions { display: flex; flex-wrap: wrap; gap: 10px; } .admin-filter-row button, .admin-card-actions button, .admin-review-actions button { border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 13px; color: var(--text-soft); background: rgba(255, 255, 255, 0.04); font-weight: 900; } .admin-filter-row button { min-height: 40px; padding-inline: 14px; } .admin-filter-row button.is-active, .admin-filter-row button:hover { color: var(--navy-980); border-color: transparent; background: linear-gradient(135deg, var(--cyan), var(--turquoise)); } .admin-project-card { padding: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; } .admin-project-card span { color: var(--turquoise); font-size: 0.78rem; font-weight: 900; } .admin-project-card p { margin: 6px 0 0; } .admin-project-techs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .admin-project-techs small { padding: 5px 8px; border: 1px solid rgba(35, 240, 208, 0.16); border-radius: 999px; color: var(--text-soft); background: rgba(35, 240, 208, 0.045); font-weight: 800; } .admin-card-actions { align-content: start; justify-content: flex-end; } .admin-card-actions button, .admin-review-actions button { min-height: 36px; padding-inline: 10px; } .admin-testimonial-card { padding: 16px; } .admin-testimonials-page .admin-testimonial-card { display: flex; flex-direction: column; } .admin-testimonials-page .admin-testimonial-card p { flex: 1 1 auto; } .admin-testimonial-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 12px; } .admin-review-actions { margin-top: 14px; } .admin-preview-panel { margin-top: 20px; } .admin-site-preview-card { max-width: 680px; padding: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; } .admin-site-preview-card > i { color: rgba(35, 240, 208, 0.42); font-size: 2rem; } .admin-project-preview-card, .admin-helper-card { overflow: hidden; } .admin-preview-media { min-height: 190px; margin: -6px -6px 18px; display: grid; place-items: center; position: relative; border: 1px solid rgba(0, 212, 255, 0.16); border-radius: 22px; background: linear-gradient(rgba(0, 212, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.055) 1px, transparent 1px), radial-gradient(circle at 50% 100%, rgba(35, 240, 208, 0.24), transparent 16rem), rgba(0, 212, 255, 0.035); background-size: 28px 28px, 28px 28px, auto, auto; } .admin-preview-media span { position: absolute; inset-inline-end: 14px; inset-block-end: 12px; color: var(--muted); font-size: 0.72rem; font-weight: 850; } .admin-preview-icon { width: 86px; height: 86px; display: grid; place-items: center; border-radius: 28px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 26px 70px rgba(0, 212, 255, 0.28); } .admin-preview-icon i { font-size: 2.35rem; } .admin-project-preview-card p, .admin-helper-card li { color: var(--text-soft); line-height: 1.8; } .admin-project-preview-card p { margin: 10px 0 16px; } .admin-preview-meta { display: flex; flex-wrap: wrap; gap: 8px; } .admin-preview-meta span { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 7px 10px; border-radius: 999px; color: var(--text-soft); border: 1px solid rgba(215, 231, 242, 0.13); background: rgba(255, 255, 255, 0.035); font-weight: 850; } .admin-helper-card ol { margin: 12px 0 0; padding-inline-start: 20px; } .admin-alert { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; padding: 14px 16px; border-radius: 18px; font-weight: 850; } .admin-alert.is-success { color: var(--turquoise); border: 1px solid rgba(35, 240, 208, 0.22); background: rgba(35, 240, 208, 0.07); } .admin-alert.is-error { color: #d7e7f2; border: 1px solid rgba(215, 231, 242, 0.16); background: rgba(215, 231, 242, 0.055); } .admin-alert ul { margin: 8px 0 0; padding-inline-start: 18px; } .admin-filter-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.45fr) minmax(160px, 0.35fr) auto; gap: 12px; align-items: end; } .admin-filter-form label { display: grid; gap: 8px; color: var(--text-soft); font-weight: 900; } .admin-filter-form input, .admin-filter-form select { width: 100%; border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 15px; padding: 13px 14px; color: var(--white); background: rgba(255, 255, 255, 0.045); outline: 0; } .admin-filter-form select option, .admin-form select option { color: #eaf8fc; background: #071a2d; } .admin-filter-form input:focus, .admin-filter-form select:focus { border-color: rgba(35, 240, 208, 0.36); box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.08); } .admin-live-filter-actions { min-height: 47px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; } .admin-filter-loading, .admin-clear-filters { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 8px 12px; border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 12px; color: var(--text-soft); background: rgba(255, 255, 255, 0.035); font-size: 0.8rem; font-weight: 900; } .admin-filter-loading[hidden] { display: none; } .admin-filter-loading .spinner-border { color: var(--turquoise); } .admin-clear-filters:hover { color: var(--turquoise); border-color: rgba(35, 240, 208, 0.32); } .admin-filter-form.is-loading input, .admin-filter-form.is-loading select, .admin-filter-form.is-loading .admin-clear-filters { opacity: 0.58; pointer-events: none; } .admin-check-row { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 10px !important; } .admin-check-row input { width: 18px; height: 18px; accent-color: var(--turquoise); } .admin-image-placeholder.has-image { overflow: hidden; padding: 0; position: relative; } .admin-image-placeholder.has-image img, .admin-project-icon img, .admin-preview-media > img { width: 100%; height: 100%; object-fit: cover; } .admin-image-placeholder.has-image span { position: absolute; inset-inline: 8px; inset-block-end: 8px; padding: 5px 8px; border-radius: 999px; color: var(--white); background: rgba(2, 11, 22, 0.72); font-size: 0.72rem; } .admin-image-management-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } .admin-project-image-card { min-width: 0; overflow: hidden; border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 16px; background: rgba(255, 255, 255, 0.035); transition: border-color 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease; } .admin-project-image-card:focus-within { border-color: rgba(35, 240, 208, 0.46); box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1); } .admin-project-image-card.is-marked-for-removal { border-color: rgba(255, 107, 125, 0.42); background: rgba(255, 107, 125, 0.06); } .admin-project-image-card.is-marked-for-removal .admin-project-image-visual img { opacity: 0.38; filter: grayscale(0.8); } .admin-project-image-visual { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(0, 212, 255, 0.04); } .admin-project-image-visual img { width: 100%; height: 100%; display: block; object-fit: cover; transition: opacity 0.22s ease, filter 0.22s ease, transform 0.3s ease; } .admin-image-cover-badge { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 10px 24px rgba(0, 212, 255, 0.22); font-size: 0.72rem; font-weight: 950; opacity: 0; transform: translateY(-5px); transition: opacity 0.2s ease, transform 0.2s ease; } .admin-image-cover-badge.is-visible { opacity: 1; transform: translateY(0); } .admin-project-image-meta { display: grid; gap: 4px; padding: 13px 14px 9px; } .admin-project-image-meta strong { color: var(--text); font-size: 0.9rem; } .admin-project-image-meta span { min-height: 20px; color: var(--muted); font-size: 0.75rem; font-weight: 750; } .admin-project-image-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 10px 12px; } .admin-image-action { position: relative; min-width: 0; cursor: pointer; } .admin-image-action input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .admin-image-action span { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 7px; border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 10px; color: var(--text-soft); background: rgba(255, 255, 255, 0.035); font-size: 0.72rem; font-weight: 900; line-height: 1.35; text-align: center; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .admin-image-action:hover span, .admin-image-action input:focus-visible + span { color: var(--turquoise); border-color: rgba(35, 240, 208, 0.36); } .admin-image-action input[type="radio"]:checked + span { color: var(--navy-980); border-color: transparent; background: linear-gradient(135deg, var(--cyan), var(--turquoise)); } .admin-image-action.is-danger:hover span, .admin-image-action.is-danger input:checked + span { color: #fff; border-color: rgba(255, 107, 125, 0.5); background: rgba(190, 42, 68, 0.82); } .admin-image-action input:disabled + span { opacity: 0.42; cursor: not-allowed; } .admin-image-empty-state { grid-column: 1 / -1; min-height: 180px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 24px; border: 1px dashed rgba(0, 212, 255, 0.24); border-radius: 16px; color: var(--muted); text-align: center; } .admin-image-empty-state i { color: var(--turquoise); font-size: 2rem; } .admin-image-empty-state strong { color: var(--text); } .admin-image-management-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; color: var(--muted); font-size: 0.82rem; } .admin-image-management-note i { color: var(--cyan); margin-top: 4px; } .admin-project-icon { overflow: hidden; } .admin-filter-row a, .admin-card-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding-inline: 14px; border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 13px; color: var(--text-soft); background: rgba(255, 255, 255, 0.04); font-weight: 900; text-decoration: none; transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease; } .admin-filter-row a.is-active, .admin-filter-row a:hover { color: var(--navy-980); border-color: transparent; background: linear-gradient(135deg, var(--cyan), var(--turquoise)); } .admin-card-actions form, .admin-review-actions form { margin: 0; } .admin-card-actions a, .admin-card-actions button, .admin-review-actions button { min-height: 36px; padding-inline: 10px; } .admin-empty-state { min-height: 150px; display: grid; place-items: center; text-align: center; gap: 8px; padding: 24px; border: 1px dashed rgba(35, 240, 208, 0.2); border-radius: 18px; color: var(--text-soft); background: rgba(35, 240, 208, 0.035); } .admin-empty-state i { color: var(--turquoise); font-size: 2rem; } .admin-empty-state strong { color: var(--white); font-weight: 950; } .admin-empty-state p { margin: 0; } .admin-pagination { margin-top: 22px; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; border-top: 1px solid rgba(215, 231, 242, 0.1); } .admin-pagination-summary { margin: 0; color: var(--muted); font-size: 0.86rem; font-weight: 800; } .admin-pagination-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .admin-pagination-links a, .admin-pagination-links span { width: 42px; height: 42px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(215, 231, 242, 0.14); border-radius: 12px; color: var(--text-soft); background: rgba(255, 255, 255, 0.035); font-family: "Inter", "Cairo", sans-serif; font-size: 0.86rem; font-weight: 900; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .admin-pagination-links a:hover, .admin-pagination-links a:focus-visible { color: var(--turquoise); border-color: rgba(35, 240, 208, 0.38); background: rgba(0, 212, 255, 0.09); transform: translateY(-2px); } .admin-pagination-links .is-current { color: var(--navy-980); border-color: transparent; background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 10px 24px rgba(0, 212, 255, 0.18); } .admin-pagination-links .is-disabled, .admin-pagination-links .is-gap { color: rgba(215, 231, 242, 0.38); cursor: default; } .admin-pagination-links .is-gap { width: 28px; border-color: transparent; background: transparent; } [data-theme="light"] .admin-body { background: radial-gradient(circle at 14% 8%, rgba(0, 212, 255, 0.14), transparent 28rem), radial-gradient(circle at 86% 78%, rgba(35, 240, 208, 0.1), transparent 30rem), linear-gradient(180deg, #f5fbff, #eaf8fc); } [data-theme="light"] .admin-sidebar, [data-theme="light"] .admin-topbar, [data-theme="light"] .admin-hero-panel, [data-theme="light"] .admin-panel, [data-theme="light"] .admin-stat-card { background: rgba(255, 255, 255, 0.82); border-color: rgba(6, 24, 45, 0.12); box-shadow: 0 24px 70px rgba(6, 24, 45, 0.09); } [data-theme="light"] .admin-topbar h1, [data-theme="light"] .admin-hero-panel h2, [data-theme="light"] .admin-panel-head h2, [data-theme="light"] .admin-panel-head h3, [data-theme="light"] .admin-form-section-head h3, [data-theme="light"] .admin-project-preview-card h3, [data-theme="light"] .admin-helper-card h3, [data-theme="light"] .admin-stat-card strong, [data-theme="light"] .admin-table-row strong, [data-theme="light"] .admin-feedback-mini strong, [data-theme="light"] .admin-project-card h3, [data-theme="light"] .admin-testimonial-head strong, [data-theme="light"] .admin-site-preview-card strong { color: #06182d; } [data-theme="light"] .admin-nav a, [data-theme="light"] .admin-form label, [data-theme="light"] .admin-panel-head p, [data-theme="light"] .admin-form-section-head span, [data-theme="light"] .admin-project-preview-card p, [data-theme="light"] .admin-helper-card li, [data-theme="light"] .admin-feedback-mini p, [data-theme="light"] .admin-testimonial-card p, [data-theme="light"] .admin-site-preview-card p { color: #385a74; } [data-theme="light"] .admin-nav a:hover, [data-theme="light"] .admin-nav a.is-active { color: #087d8f; border-color: rgba(0, 135, 170, 0.24); background: rgba(0, 212, 255, 0.1); } [data-theme="light"] .admin-form input, [data-theme="light"] .admin-form select, [data-theme="light"] .admin-form textarea, [data-theme="light"] .admin-filter-form input, [data-theme="light"] .admin-filter-form select, [data-theme="light"] .admin-fieldset, [data-theme="light"] .admin-form-section, [data-theme="light"] .admin-category-option span, [data-theme="light"] .admin-table-row, [data-theme="light"] .admin-feedback-mini, [data-theme="light"] .admin-project-card, [data-theme="light"] .admin-testimonial-card, [data-theme="light"] .admin-site-preview-card { color: #06182d; background: rgba(255, 255, 255, 0.78); border-color: rgba(6, 24, 45, 0.12); } [data-theme="light"] .admin-fieldset-head h3 { color: #06182d; } [data-theme="light"] .admin-empty-state strong { color: #06182d; } [data-theme="light"] .admin-tech-option span, [data-theme="light"] .admin-image-placeholder, [data-theme="light"] .admin-preview-meta span, [data-theme="light"] .admin-project-techs small { color: #385a74; background: rgba(255, 255, 255, 0.7); border-color: rgba(6, 24, 45, 0.12); } [data-theme="light"] .admin-preview-media { border-color: rgba(0, 135, 170, 0.18); background: linear-gradient(rgba(0, 135, 170, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 135, 170, 0.07) 1px, transparent 1px), radial-gradient(circle at 50% 100%, rgba(35, 240, 208, 0.2), transparent 16rem), rgba(255, 255, 255, 0.68); background-size: 28px 28px, 28px 28px, auto, auto; } [data-theme="light"] .admin-filter-form select option, [data-theme="light"] .admin-form select option { color: #06182d; background: #ffffff; } [data-theme="light"] .admin-filter-loading, [data-theme="light"] .admin-clear-filters, [data-theme="light"] .admin-pagination-links a, [data-theme="light"] .admin-pagination-links span { color: #385a74; border-color: rgba(6, 24, 45, 0.12); background: rgba(255, 255, 255, 0.82); } [data-theme="light"] .admin-pagination-links .is-current { color: #06182d; border-color: transparent; background: linear-gradient(135deg, var(--cyan), var(--turquoise)); } [data-theme="light"] .admin-pagination-links .is-disabled, [data-theme="light"] .admin-pagination-links .is-gap { color: rgba(56, 90, 116, 0.42); } [data-theme="light"] .admin-pagination-links .is-gap { border-color: transparent; background: transparent; } [data-theme="light"] .admin-project-image-card { border-color: rgba(6, 24, 45, 0.12); background: rgba(255, 255, 255, 0.84); box-shadow: 0 14px 34px rgba(6, 24, 45, 0.07); } [data-theme="light"] .admin-project-image-card.is-marked-for-removal { border-color: rgba(190, 42, 68, 0.3); background: rgba(255, 241, 244, 0.9); } [data-theme="light"] .admin-project-image-meta strong, [data-theme="light"] .admin-image-empty-state strong { color: #06182d; } [data-theme="light"] .admin-image-action span { color: #385a74; border-color: rgba(6, 24, 45, 0.12); background: rgba(245, 251, 255, 0.9); } @media (max-width: 1199px) { .admin-body { overflow-x: hidden; } .admin-shell { grid-template-columns: 1fr; max-width: 100vw; overflow-x: clip; } .admin-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40; width: min(86vw, 310px); transform: translateX(110%); transition: transform 0.25s ease; } [dir="ltr"] .admin-sidebar { transform: translateX(-110%); } .admin-body.admin-menu-open .admin-sidebar { transform: translateX(0); } .admin-menu-toggle { display: inline-flex !important; } } @media (max-width: 991px) { .admin-hero-panel, .admin-grid-2, .admin-create-layout, .admin-filter-form, .admin-workspace { grid-template-columns: 1fr; } .admin-hero-panel { display: grid; } .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-create-aside { position: static; } .admin-tech-checklist-logos, .admin-category-picker, .admin-image-management-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575px) { .admin-topbar { align-items: flex-start; } .admin-topbar h1 { max-width: 180px; font-size: 1.55rem; line-height: 1.15; } .admin-topbar-actions { flex-wrap: wrap; justify-content: flex-end; } .admin-ghost-link span { display: none; } .admin-stat-grid, .admin-form-grid, .admin-category-picker, .admin-tech-checklist, .admin-image-preview-grid, .admin-image-management-grid, .admin-project-card, .admin-testimonial-head, .admin-site-preview-card { grid-template-columns: 1fr; } .admin-page-actions, .admin-projects-toolbar .admin-panel-head { align-items: stretch; flex-direction: column; } .admin-live-filter-actions, .admin-pagination { align-items: stretch; } .admin-live-filter-actions { justify-content: flex-start; } .admin-pagination { flex-direction: column; } .admin-pagination-links { justify-content: center; } .admin-pagination-links a, .admin-pagination-links span { width: 40px; height: 40px; } .admin-tech-checklist-logos .admin-tech-option span { min-height: 64px; flex-direction: row; align-items: center; } .admin-tech-option small { margin-inline-start: auto; } } .testimonials-stage-focused { display: block; } .testimonials-stage-focused .testimonial-slider { gap: 16px; } .testimonials-stage-focused, .testimonials-stage-focused .testimonial-slider, .testimonials-stage-focused .testimonial-slider-viewport, .testimonials-stage-focused .testimonial-slider-track { background: transparent; box-shadow: none; filter: none; } .testimonials-stage-focused .testimonial-slider-toolbar { justify-content: flex-end; gap: 14px; padding-inline: 0; margin-bottom: 2px; } .testimonials-stage-focused .testimonial-slider-count { min-height: 36px; padding: 6px 10px; border: 1px solid rgba(35, 240, 208, 0.14); border-radius: 999px; background: rgba(0, 212, 255, 0.045); color: var(--muted); font-size: 0.68rem; opacity: 0.82; } .testimonials-stage-focused .testimonial-slider-count i { width: 20px; opacity: 0.62; } .testimonials-stage-focused .testimonial-slider-viewport { overflow: hidden; border-radius: 26px; } .testimonials-stage-focused .testimonial-slider-track { gap: 18px; align-items: stretch; padding: 2px 2px 22px; scroll-padding-inline: 2px; } .testimonials-stage-focused .testimonial-card { flex: 0 0 calc((100% - 36px) / 3); min-height: 360px; padding: clamp(24px, 3vw, 32px); border-color: rgba(35, 240, 208, 0.18); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.78); } .testimonials-stage-focused .testimonial-card:first-child { border-color: rgba(35, 240, 208, 0.32); background: radial-gradient(circle at 86% 8%, rgba(0, 212, 255, 0.14), transparent 14rem), linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 36%), var(--card); } .testimonials-stage-focused .testimonial-card-top { margin-bottom: 26px; } .testimonials-stage-focused .testimonial-card-quote { font-size: 2.1rem; } .testimonial-experience-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border: 1px solid rgba(35, 240, 208, 0.2); border-radius: 999px; color: var(--turquoise); background: rgba(35, 240, 208, 0.06); font-size: 0.7rem; font-weight: 900; white-space: nowrap; } .testimonials-stage-focused .testimonial-card blockquote { max-width: none; margin-bottom: 28px; font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .testimonials-stage-focused .testimonial-client { padding-top: 18px; } .testimonials-stage-focused .testimonial-avatar { width: 52px; height: 52px; border-radius: 17px; font-size: 1.55rem; } .testimonials-stage-focused .testimonial-slider-dots { margin-top: 2px; } .testimonial-inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; padding: 16px 18px; border: 1px solid rgba(35, 240, 208, 0.18); border-radius: 22px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 42%), rgba(5, 24, 43, 0.58); box-shadow: 0 18px 54px rgba(0, 0, 0, 0.14); backdrop-filter: blur(16px); } .testimonial-inline-copy { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--text-soft); font-size: 0.94rem; font-weight: 800; line-height: 1.8; } .testimonial-inline-copy i { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); } .testimonial-inline-cta .testimonial-cta { flex: 0 0 auto; min-height: 44px; padding: 10px 16px; } [data-theme="light"] .testimonials-stage-focused .testimonial-card { border-color: rgba(0, 130, 175, 0.16); background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 251, 255, 0.92)); box-shadow: 0 12px 24px -14px rgba(7, 35, 60, 0.28), 0 2px 7px rgba(0, 130, 175, 0.045); } [data-theme="light"] .testimonials-stage-focused .testimonial-card:first-child { border-color: rgba(0, 150, 190, 0.26); background: radial-gradient(circle at 86% 8%, rgba(0, 180, 220, 0.12), transparent 14rem), linear-gradient(145deg, #ffffff, #f1faff); } [data-theme="light"] .testimonial-inline-cta { border-color: rgba(0, 130, 175, 0.16); background: rgba(255, 255, 255, 0.88); box-shadow: 0 16px 42px rgba(7, 35, 60, 0.08); } [data-theme="light"] .testimonial-experience-badge { color: #007d9d; border-color: rgba(0, 145, 190, 0.18); background: rgba(0, 180, 220, 0.08); } @media (max-width: 1199px) { .testimonials-stage-focused .testimonial-card { flex-basis: calc((100% - 18px) / 2); } } @media (max-width: 767px) { .testimonials-stage-focused .testimonial-slider-toolbar { justify-content: space-between; } .testimonials-stage-focused .testimonial-card { flex-basis: 100%; min-height: 390px; padding: 24px; } .testimonials-stage-focused .testimonial-card blockquote { -webkit-line-clamp: 5; line-clamp: 5; } .testimonial-inline-cta { align-items: stretch; flex-direction: column; padding: 16px; } .testimonial-inline-cta .testimonial-cta { width: 100%; } } .about-title-visual { position: relative; width: min(100%, 330px); min-height: 122px; margin-top: 28px; border: 1px solid rgba(35, 240, 208, 0.16); border-radius: 24px; background: radial-gradient(circle at 28% 24%, rgba(0, 212, 255, 0.16), transparent 8rem), linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 44%), rgba(5, 24, 43, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 54px rgba(0, 0, 0, 0.12); overflow: hidden; } .about-title-visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 212, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.06) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(90deg, black, transparent 86%); } .about-title-visual span { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 22px rgba(35, 240, 208, 0.65); animation: aboutPulse 3.6s ease-in-out infinite; } .about-title-visual span:nth-child(1) { inset-block-start: 24px; inset-inline-start: 34px; } .about-title-visual span:nth-child(2) { inset-block-start: 52px; inset-inline-end: 82px; animation-delay: 0.45s; } .about-title-visual span:nth-child(3) { inset-block-end: 28px; inset-inline-start: 96px; animation-delay: 0.9s; } .about-title-visual span:nth-child(4) { inset-block-end: 34px; inset-inline-end: 36px; animation-delay: 1.35s; } .about-title-visual i { position: absolute; inset-inline-end: 34px; inset-block-start: 28px; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(0, 212, 255, 0.24); border-radius: 18px; color: var(--turquoise); background: rgba(3, 16, 31, 0.74); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16); font-size: 1.35rem; } @keyframes aboutPulse { 0%, 100% { opacity: 0.55; transform: scale(0.88); } 50% { opacity: 1; transform: scale(1.12); } } [data-theme="light"] .about-title-visual { border-color: rgba(0, 130, 175, 0.16); background: radial-gradient(circle at 28% 24%, rgba(0, 166, 210, 0.13), transparent 8rem), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(236, 250, 255, 0.76)); box-shadow: 0 18px 44px rgba(7, 35, 60, 0.08); } [data-theme="light"] .about-title-visual i { color: #007d9d; background: rgba(255, 255, 255, 0.92); } .service-card { min-height: 100%; } .service-card h3 { color: var(--text); font-size: clamp(1.16rem, 1.45vw, 1.32rem); line-height: 1.55; } .service-card p { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.86; } [data-theme="light"] .service-card h3 { color: var(--navy-950); } .process-board { border-color: rgba(35, 240, 208, 0.28); } .process-flow::before { opacity: 0.84; } .process-icon { color: var(--turquoise); border-color: rgba(35, 240, 208, 0.34); box-shadow: inset 0 0 30px rgba(0, 212, 255, 0.09), 0 16px 38px rgba(0, 0, 0, 0.2); } .process-content h3 { line-height: 1.5; } .process-content p { line-height: 1.85; } [data-theme="light"] .process-board { border-color: rgba(0, 130, 175, 0.18); } [data-theme="light"] .process-icon { border-color: rgba(0, 166, 210, 0.24); box-shadow: inset 0 0 26px rgba(0, 166, 210, 0.08), 0 14px 30px rgba(7, 35, 60, 0.1); } .testimonials-stage-focused .testimonial-card { min-height: 390px; height: 100%; } .testimonials-stage-focused .testimonial-card-top { margin-bottom: 22px; } .testimonials-stage-focused .testimonial-card-quote { font-size: 1.65rem; opacity: 0.68; } .testimonials-stage-focused .testimonial-card blockquote { margin-bottom: 24px; line-height: 1.88; } .company-metric { gap: 12px; } .company-metric > span { max-width: 18ch; line-height: 1.65; } @media (max-width: 991px) { .about-title-visual { width: min(100%, 420px); min-height: 112px; margin-top: 22px; } } @media (max-width: 767px) { .about-title-visual { min-height: 96px; margin-top: 18px; border-radius: 20px; } .about-title-visual i { width: 46px; height: 46px; border-radius: 15px; font-size: 1.15rem; } .service-card p { -webkit-line-clamp: 3; line-clamp: 3; } .testimonials-stage-focused .testimonial-card { min-height: 370px; } } [data-theme="light"] .testimonials-section { border-block-color: rgba(0, 130, 175, 0.12); background: radial-gradient(circle at 18% 18%, rgba(0, 180, 220, 0.08), transparent 24rem), linear-gradient(130deg, rgba(236, 250, 255, 0.72), transparent 52%), linear-gradient(310deg, rgba(228, 248, 252, 0.54), transparent 56%), #f7fcff; } [data-theme="light"] .testimonials-section::before { background-image: linear-gradient(rgba(0, 130, 175, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 130, 175, 0.022) 1px, transparent 1px); opacity: 0.36; mask-image: radial-gradient(circle at center, black, transparent 74%); } [data-theme="light"] .testimonials-orbit { border-color: rgba(0, 130, 175, 0.07); box-shadow: none; opacity: 0.28; } [data-theme="light"] .testimonials-section .section-title { color: var(--navy-950); } [data-theme="light"] .testimonials-section .section-heading p { color: #35536b; } [data-theme="light"] .testimonials-stage-focused .testimonial-card, [data-theme="light"] .testimonials-stage-focused .testimonial-card:first-child { color: var(--navy-950); border-color: rgba(0, 150, 190, 0.24); background: radial-gradient(circle at 88% 8%, rgba(0, 180, 220, 0.16), transparent 14rem), radial-gradient(circle at 86% 112%, rgba(0, 166, 210, 0.09), transparent 12rem), linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 250, 255, 0.94)); box-shadow: 0 12px 24px -14px rgba(7, 35, 60, 0.28), 0 2px 7px rgba(0, 130, 175, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.94); } [data-theme="light"] .testimonials-stage-focused .testimonial-card::before { border-color: rgba(0, 130, 175, 0.2); box-shadow: 0 0 0 44px rgba(0, 180, 220, 0.055); } [data-theme="light"] .testimonials-stage-focused .testimonial-card::after { content: ""; position: absolute; z-index: 0; inset-inline-end: -72px; inset-block-end: -96px; width: 260px; height: 260px; border: 1px solid rgba(0, 180, 220, 0.16); border-radius: 50%; background: radial-gradient(circle at center, rgba(0, 180, 220, 0.055), transparent 62%); pointer-events: none; } [data-theme="light"] .testimonials-stage-focused .testimonial-card blockquote, [data-theme="light"] .testimonials-stage-focused .testimonial-client-copy strong { color: var(--navy-950); } [data-theme="light"] .testimonials-stage-focused .testimonial-client-copy small { color: #4d6980; } [data-theme="light"] .testimonials-stage-focused .testimonial-client { border-top-color: rgba(0, 130, 175, 0.13); } [data-theme="light"] .testimonials-stage-focused .testimonial-card-quote, [data-theme="light"] .testimonials-stage-focused .testimonial-verified { color: #00a7c7; opacity: 0.96; text-shadow: 0 0 18px rgba(0, 180, 220, 0.2); } [data-theme="light"] .testimonial-experience-badge { color: #05536a; border-color: rgba(0, 150, 190, 0.28); background: linear-gradient(135deg, rgba(0, 212, 255, 0.17), rgba(35, 240, 208, 0.18)), rgba(255, 255, 255, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 24px rgba(0, 166, 210, 0.08); } [data-theme="light"] .testimonials-stage-focused .testimonial-slider-count { color: #31516a; border-color: rgba(0, 130, 175, 0.16); background: rgba(255, 255, 255, 0.68); box-shadow: 0 10px 26px rgba(7, 35, 60, 0.06); } [data-theme="light"] .testimonials-stage-focused .testimonial-slider-count span:first-child { color: #007d9d; } [data-theme="light"] .testimonials-stage-focused .testimonial-slider-dots span { background: rgba(7, 49, 74, 0.16); } [data-theme="light"] .testimonials-stage-focused .testimonial-slider-dots span.is-active { background: linear-gradient(90deg, var(--cyan), var(--turquoise)); } [data-theme="light"] .testimonial-inline-cta { border-color: rgba(0, 130, 175, 0.14); background: rgba(255, 255, 255, 0.74); box-shadow: 0 16px 42px rgba(7, 35, 60, 0.08); } [data-theme="light"] .testimonial-inline-copy { color: #31516a; } [data-theme="light"] { --light-bg: #f4fbfd; --light-bg-soft: #eef9fc; --light-surface: #ffffff; --light-surface-soft: #f7fcfe; --light-text: #061a2e; --light-text-strong: #08213a; --light-muted: #4a6478; --light-border: rgba(23, 216, 255, 0.22); --light-border-soft: rgba(6, 26, 46, 0.1); --light-shadow: 0 22px 55px rgba(6, 26, 46, 0.1); --light-shadow-strong: 0 28px 76px rgba(6, 26, 46, 0.13); --light-accent: #19d8d2; --light-cyan: #17d8ff; --bg: var(--light-bg); --bg-soft: var(--light-bg-soft); --card: rgba(255, 255, 255, 0.94); --text: var(--light-text); --text-soft: var(--light-muted); --muted: #60788c; --border: var(--light-border-soft); --header: rgba(255, 255, 255, 0.9); --shadow: var(--light-shadow); } [data-theme="light"] body { background: radial-gradient(circle at 12% 8%, rgba(23, 216, 255, 0.1), transparent 28rem), radial-gradient(circle at 84% 14%, rgba(25, 216, 210, 0.075), transparent 30rem), linear-gradient(180deg, #ffffff 0%, var(--light-bg) 44%, var(--light-bg-soft) 100%); } [data-theme="light"] .ambient-field { opacity: 0.34; background: linear-gradient(90deg, rgba(6, 26, 46, 0.028) 1px, transparent 1px), linear-gradient(0deg, rgba(23, 216, 255, 0.026) 1px, transparent 1px), radial-gradient(circle at 16% 14%, rgba(23, 216, 255, 0.08), transparent 28rem), radial-gradient(circle at 84% 72%, rgba(25, 216, 210, 0.06), transparent 30rem); } [data-theme="light"] p, [data-theme="light"] .hero-text, [data-theme="light"] .section-heading p, [data-theme="light"] .portfolio-case-body p, [data-theme="light"] .service-card p, [data-theme="light"] .process-content p, [data-theme="light"] .why-copy p, [data-theme="light"] .footer-brand p, [data-theme="light"] .footer-about { color: var(--light-muted); } [data-theme="light"] .section-title, [data-theme="light"] .service-card h3, [data-theme="light"] .project-card h3, [data-theme="light"] .project-card h2, [data-theme="light"] .info-card h3, [data-theme="light"] .contact-card h2, [data-theme="light"] .portfolio-case-body h3, [data-theme="light"] .process-content h3, [data-theme="light"] .why-copy .section-title, [data-theme="light"] .feature-item strong, [data-theme="light"] .cta-panel h2, [data-theme="light"] .footer-brand span { color: var(--light-text-strong); } [data-theme="light"] .section-muted { background: radial-gradient(circle at 16% 16%, rgba(23, 216, 255, 0.075), transparent 26rem), linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(239, 250, 254, 0.72)); border-block-color: rgba(23, 216, 255, 0.14); } [data-theme="light"] .section-muted::before { opacity: 0.42; background-image: linear-gradient(rgba(6, 26, 46, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 216, 255, 0.024) 1px, transparent 1px); } [data-theme="light"] .site-header .navbar > .container, [data-theme="light"] .site-header.is-scrolled .navbar > .container { background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(247, 252, 254, 0.82)); border-color: rgba(23, 216, 255, 0.18); box-shadow: 0 18px 44px rgba(6, 26, 46, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82); backdrop-filter: blur(22px) saturate(1.18); } [data-theme="light"] .site-header.is-scrolled { background: rgba(244, 251, 253, 0.74); box-shadow: 0 18px 54px rgba(6, 26, 46, 0.08); } [data-theme="light"] .nav-link { color: var(--light-text-strong); } [data-theme="light"] .nav-link:hover, [data-theme="light"] .nav-link.active { color: var(--light-text); background: rgba(23, 216, 255, 0.1); border-color: rgba(23, 216, 255, 0.22); } [data-theme="light"] .hero-section, [data-theme="light"] .page-hero { background: radial-gradient(circle at 18% 18%, rgba(23, 216, 255, 0.09), transparent 28rem), radial-gradient(circle at 84% 22%, rgba(25, 216, 210, 0.065), transparent 30rem); } [data-theme="light"] .hero-section::before, [data-theme="light"] .page-hero::before { opacity: 0.38; background-image: linear-gradient(rgba(6, 26, 46, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 216, 255, 0.025) 1px, transparent 1px); } [data-theme="light"] .hero-proof, [data-theme="light"] .floating-chip, [data-theme="light"] .mini-stats span, [data-theme="light"] .why-signal span, [data-theme="light"] .why-proof-list span, [data-theme="light"] .contact-line span { color: var(--light-text-strong); border-color: rgba(23, 216, 255, 0.2); background: rgba(255, 255, 255, 0.78); box-shadow: 0 12px 30px rgba(6, 26, 46, 0.07); } [data-theme="light"] .hero-console, [data-theme="light"] .glass-panel, [data-theme="light"] .service-card, [data-theme="light"] .service-detail, [data-theme="light"] .project-card, [data-theme="light"] .info-card, [data-theme="light"] .contact-card, [data-theme="light"] .contact-form, [data-theme="light"] .cta-panel, [data-theme="light"] .company-metrics, [data-theme="light"] .process-board, [data-theme="light"] .portfolio-case, [data-theme="light"] .why-trust-panel, [data-theme="light"] .why-pillar, [data-theme="light"] .feature-item, [data-theme="light"] .why-trust-bottom, [data-theme="light"] .testimonial-pillar, [data-theme="light"] .testimonial-feature { border-color: var(--light-border); background: radial-gradient(circle at 92% 8%, rgba(23, 216, 255, 0.08), transparent 13rem), linear-gradient(145deg, var(--light-surface) 0%, var(--light-surface-soft) 100%); box-shadow: var(--light-shadow); } [data-theme="light"] .service-card::before, [data-theme="light"] .project-card::before, [data-theme="light"] .info-card::before, [data-theme="light"] .portfolio-case::before, [data-theme="light"] .why-trust-panel::before, [data-theme="light"] .process-board::before { opacity: 0.78; } [data-theme="light"] .about-glass::after, [data-theme="light"] .panel-index, [data-theme="light"] .feature-item small, [data-theme="light"] .portfolio-media-top span, [data-theme="light"] .section-index { color: rgba(6, 26, 46, 0.13); } [data-theme="light"] .card-icon, [data-theme="light"] .feature-icon, [data-theme="light"] .process-live i { box-shadow: 0 14px 32px rgba(23, 216, 255, 0.18); } [data-theme="light"] .process-board { background: radial-gradient(circle at 50% 0%, rgba(23, 216, 255, 0.1), transparent 32rem), linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(242, 251, 254, 0.9)); } [data-theme="light"] .process-flow::before { opacity: 0.86; background: linear-gradient(90deg, #17d8ff, rgba(25, 216, 210, 0.55), #19d8d2); box-shadow: 0 0 18px rgba(23, 216, 255, 0.22); } [data-theme="light"] .process-number { color: #007d9d; border-color: rgba(23, 216, 255, 0.25); background: #ffffff; } [data-theme="light"] .process-icon { color: #007d9d; background: linear-gradient(145deg, #ffffff, #eefbfe); border-color: rgba(23, 216, 255, 0.28); } [data-theme="light"] .portfolio-filter { color: var(--light-text-strong); border-color: rgba(23, 216, 255, 0.2); background: rgba(255, 255, 255, 0.82); box-shadow: 0 10px 26px rgba(6, 26, 46, 0.06); } [data-theme="light"] .portfolio-filter:hover { color: var(--light-text); border-color: rgba(23, 216, 255, 0.3); background: rgba(236, 250, 254, 0.92); } [data-theme="light"] .portfolio-filter.is-active { color: #021326; background: linear-gradient(135deg, var(--light-cyan), var(--light-accent)); box-shadow: 0 16px 38px rgba(0, 166, 210, 0.2); } [data-theme="light"] .portfolio-case-body { background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 254, 0.9)); } [data-theme="light"] .portfolio-category, [data-theme="light"] .portfolio-case-link, [data-theme="light"] .portfolio-details-button { color: #007d9d; } [data-theme="light"] .btn-outline-tech { color: var(--light-text); background: rgba(255, 255, 255, 0.82); border-color: rgba(23, 216, 255, 0.22); box-shadow: 0 12px 30px rgba(6, 26, 46, 0.07); } [data-theme="light"] .btn-outline-tech:hover, [data-theme="light"] .portfolio-details-button:hover, [data-theme="light"] .portfolio-details-button:focus-visible { color: #021326; border-color: rgba(23, 216, 255, 0.32); background: rgba(232, 250, 254, 0.96); box-shadow: 0 18px 42px rgba(0, 166, 210, 0.14); } [data-theme="light"] .btn-cyan, [data-theme="light"] .testimonial-inline-copy i { color: #021326; background: linear-gradient(135deg, var(--light-cyan), var(--light-accent)); box-shadow: 0 18px 42px rgba(0, 166, 210, 0.22); } [data-theme="light"] .testimonials-section { background: radial-gradient(circle at 15% 10%, rgba(23, 216, 255, 0.07), transparent 26rem), linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(242, 251, 254, 0.78)); } [data-theme="light"] .testimonials-stage-focused .testimonial-card, [data-theme="light"] .testimonials-stage-focused .testimonial-card:first-child { border-color: rgba(23, 216, 255, 0.22); background: radial-gradient(circle at 88% 8%, rgba(23, 216, 255, 0.14), transparent 14rem), radial-gradient(circle at 86% 112%, rgba(0, 166, 210, 0.08), transparent 12rem), linear-gradient(145deg, #ffffff 0%, #f6fcfe 100%); box-shadow: 0 12px 24px -14px rgba(7, 35, 60, 0.28), 0 2px 7px rgba(0, 130, 175, 0.045); } [data-theme="light"] .testimonials-stage-focused .testimonial-card blockquote, [data-theme="light"] .testimonials-stage-focused .testimonial-client-copy strong { color: var(--light-text-strong); } [data-theme="light"] .testimonials-stage-focused .testimonial-card-quote, [data-theme="light"] .testimonials-stage-focused .testimonial-verified { color: #00a8c8; } [data-theme="light"] .testimonial-inline-cta { color: var(--light-text-strong); border-color: rgba(23, 216, 255, 0.18); background: rgba(255, 255, 255, 0.78); } [data-theme="light"] .cta-panel { background: radial-gradient(circle at 8% 8%, rgba(23, 216, 255, 0.11), transparent 20rem), linear-gradient(145deg, #ffffff 0%, #f3fbfe 100%); } [data-theme="light"] .site-footer { color: var(--light-text-strong); background: radial-gradient(circle at 12% 0%, rgba(23, 216, 255, 0.08), transparent 24rem), linear-gradient(180deg, #ffffff 0%, #edf9fc 100%); border-color: rgba(23, 216, 255, 0.14); } [data-theme="light"] .footer-links a, [data-theme="light"] .footer-copy, [data-theme="light"] .footer-contact span { color: var(--light-muted); } [data-theme="light"] .footer-links a:hover, [data-theme="light"] .footer-contact i { color: #007d9d; } html[data-theme="light"] body .site-header .navbar > .container, html[data-theme="light"] body .site-header.is-scrolled .navbar > .container { background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(247, 252, 254, 0.82)) !important; border: 1px solid rgba(23, 216, 255, 0.18) !important; border-top-color: rgba(23, 216, 255, 0.18) !important; border-right-color: rgba(23, 216, 255, 0.18) !important; border-bottom-color: rgba(23, 216, 255, 0.18) !important; border-left-color: rgba(23, 216, 255, 0.18) !important; box-shadow: 0 18px 44px rgba(6, 26, 46, 0.08) !important; } html[data-theme="light"] body .hero-console, html[data-theme="light"] body .glass-panel, html[data-theme="light"] body .service-card, html[data-theme="light"] body .service-detail, html[data-theme="light"] body .project-card, html[data-theme="light"] body .info-card, html[data-theme="light"] body .contact-card, html[data-theme="light"] body .contact-form, html[data-theme="light"] body .company-metrics, html[data-theme="light"] body .portfolio-case { border: 1px solid rgba(23, 216, 255, 0.22) !important; border-top-color: rgba(23, 216, 255, 0.22) !important; border-right-color: rgba(23, 216, 255, 0.22) !important; border-bottom-color: rgba(23, 216, 255, 0.22) !important; border-left-color: rgba(23, 216, 255, 0.22) !important; background: radial-gradient(circle at 92% 8%, rgba(23, 216, 255, 0.08), transparent 13rem), linear-gradient(145deg, #ffffff 0%, #f7fcfe 100%) !important; box-shadow: 0 22px 55px rgba(6, 26, 46, 0.1) !important; } html[data-theme="light"] body .hero-console { box-shadow: 0 28px 76px rgba(0, 166, 210, 0.13) !important; } html[data-theme="light"] body .service-card:hover, html[data-theme="light"] body .service-detail:hover, html[data-theme="light"] body .project-card:hover, html[data-theme="light"] body .info-card:hover, html[data-theme="light"] body .portfolio-case:hover { border: 1px solid rgba(23, 216, 255, 0.34) !important; border-top-color: rgba(23, 216, 255, 0.34) !important; border-right-color: rgba(23, 216, 255, 0.34) !important; border-bottom-color: rgba(23, 216, 255, 0.34) !important; border-left-color: rgba(23, 216, 255, 0.34) !important; box-shadow: 0 30px 72px rgba(0, 166, 210, 0.14) !important; } .motion-ready [data-aos] { opacity: 0; will-change: opacity, transform; transition: opacity var(--motion-duration) var(--motion-ease-out) var(--reveal-delay, 0ms), transform var(--motion-duration) var(--motion-ease-out) var(--reveal-delay, 0ms), border-color 260ms var(--motion-ease-out), box-shadow 260ms var(--motion-ease-out), background-color 260ms var(--motion-ease-out), color 220ms ease; } .motion-ready [data-aos="fade-up"] { transform: translate3d(0, 28px, 0); } .motion-ready [data-aos="fade-left"] { transform: translate3d(-30px, 0, 0); } .motion-ready [data-aos="fade-right"] { transform: translate3d(30px, 0, 0); } .motion-ready [data-aos="zoom-in"] { transform: translate3d(0, 10px, 0) scale(0.97); } .motion-ready [data-aos].is-revealed { opacity: 1; transform: translate3d(0, 0, 0) scale(1); will-change: auto; } .motion-ready .hero-section [data-aos], .motion-ready .page-hero [data-aos] { opacity: 1; transform: none; transition-delay: 0ms; will-change: auto; } .btn, .icon-btn, .navbar-toggler, .service-card, .service-detail, .portfolio-case, .testimonial-card, .why-pillar, .process-step, .feature-item, .timeline-item { transition-timing-function: var(--motion-ease-out); } .card-icon, .why-pillar-icon, .process-icon, .portfolio-case-link i { transition: transform 260ms var(--motion-ease-out), box-shadow 260ms var(--motion-ease-out), color 220ms ease; } .hero-note i, .section-kicker i { animation: accentGlowPulse 4.2s ease-in-out infinite; } @media (hover: hover) and (pointer: fine) { .service-card:hover .card-icon, .service-detail:hover .card-icon, .why-pillar:hover .why-pillar-icon, .process-step:hover .process-icon { transform: translate3d(0, -3px, 0) scale(1.035); box-shadow: 0 18px 38px rgba(0, 212, 255, 0.22); } .btn:active, .icon-btn:active, .navbar-toggler:active { transform: translate3d(0, 1px, 0) scale(0.985); transition-duration: 100ms; } } @keyframes accentGlowPulse { 0%, 100% { opacity: 0.82; filter: drop-shadow(0 0 0 rgba(35, 240, 208, 0)); } 50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(35, 240, 208, 0.42)); } } @keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } .admin-heading-actions, .admin-order-summary, .admin-order-categories, .admin-sort-meta, .admin-sort-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .admin-heading-actions .admin-secondary-button, .admin-panel-head .admin-secondary-button { color: var(--white); } .admin-order-intro { margin-bottom: 20px; } .admin-order-summary { padding-top: 18px; border-top: 1px solid rgba(215, 231, 242, 0.1); } .admin-order-summary > div { min-height: 42px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(0, 212, 255, 0.16); border-radius: 12px; color: var(--text-soft); background: rgba(0, 212, 255, 0.045); font-size: 0.86rem; font-weight: 800; } .admin-order-summary i, .admin-order-summary strong { color: var(--turquoise); } .admin-order-summary .is-muted { border-color: rgba(215, 231, 242, 0.1); background: rgba(255, 255, 255, 0.025); } .admin-order-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .admin-order-categories { margin-top: 8px; } .admin-order-categories button { min-height: 40px; padding: 8px 13px; border: 1px solid rgba(215, 231, 242, 0.13); border-radius: 12px; color: var(--text-soft); background: rgba(255, 255, 255, 0.035); display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 900; } .admin-order-categories button:hover, .admin-order-categories button.is-active, .admin-order-categories button:focus-visible { color: var(--navy-980); border-color: transparent; background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 10px 26px rgba(0, 212, 255, 0.14); } .admin-order-save-state { min-width: 190px; min-height: 42px; padding: 8px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(35, 240, 208, 0.18); border-radius: 12px; color: var(--turquoise); background: rgba(35, 240, 208, 0.055); font-size: 0.82rem; font-weight: 900; } .admin-order-save-state.is-dirty { color: #ffd479; border-color: rgba(255, 212, 121, 0.2); background: rgba(255, 212, 121, 0.055); } .admin-order-save-state.is-saving i { animation: adminOrderSpin 0.9s linear infinite; } .admin-order-save-state.is-error { color: #ff9c9c; border-color: rgba(255, 98, 98, 0.22); background: rgba(255, 98, 98, 0.06); } .admin-sort-list { display: grid; gap: 10px; } .admin-sort-item { min-height: 92px; padding: 12px; display: grid; grid-template-columns: 44px 58px 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid rgba(215, 231, 242, 0.12); border-radius: 17px; background: rgba(255, 255, 255, 0.035); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); transition: border-color 180ms ease, background-color 180ms ease, opacity 180ms ease, transform 180ms ease; } .admin-sort-item:hover { border-color: rgba(0, 212, 255, 0.25); background: rgba(0, 212, 255, 0.045); } .admin-sort-item.is-dragging { opacity: 0.42; border-style: dashed; } .admin-sort-item.is-highlighted { border-color: rgba(35, 240, 208, 0.58); background: rgba(35, 240, 208, 0.09); transform: translateY(-1px); } .admin-sort-handle, .admin-sort-actions button { width: 44px; height: 44px; border: 1px solid rgba(215, 231, 242, 0.13); border-radius: 12px; color: var(--text-soft); background: rgba(255, 255, 255, 0.035); display: grid; place-items: center; } .admin-sort-handle { cursor: grab; touch-action: none; font-size: 1.2rem; } .admin-sort-handle:active { cursor: grabbing; } .admin-sort-handle:hover, .admin-sort-actions button:hover, .admin-sort-handle:focus-visible, .admin-sort-actions button:focus-visible { color: var(--turquoise); border-color: rgba(35, 240, 208, 0.3); background: rgba(35, 240, 208, 0.07); } .admin-sort-actions button:disabled { opacity: 0.28; cursor: not-allowed; } .admin-sort-position input { width: 58px; height: 44px; padding: 6px; border: 1px solid rgba(0, 212, 255, 0.18); border-radius: 12px; color: var(--white); background: rgba(0, 212, 255, 0.055); text-align: center; font-family: "Inter", "Cairo", sans-serif; font-weight: 900; outline: 0; } .admin-sort-position input:focus { border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(35, 240, 208, 0.08); } .admin-sort-visual { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(0, 212, 255, 0.17); border-radius: 14px; color: var(--cyan); background: rgba(0, 212, 255, 0.055); font-size: 1.3rem; } .admin-sort-visual img { width: 100%; height: 100%; object-fit: cover; } .admin-sort-content { min-width: 0; } .admin-sort-content h3 { margin: 5px 0 3px; color: var(--white); font-size: 1rem; font-weight: 950; } .admin-sort-content p { margin: 0; overflow: hidden; color: var(--text-soft); font-size: 0.82rem; line-height: 1.65; white-space: nowrap; text-overflow: ellipsis; } .admin-sort-meta span, .admin-sort-meta small { color: var(--cyan); font-size: 0.72rem; font-weight: 900; } .admin-sort-meta small { color: #ffd479; } .admin-sort-actions { flex-wrap: nowrap; } .admin-order-submit-bar { position: sticky; bottom: 12px; z-index: 4; margin-top: 18px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid rgba(0, 212, 255, 0.16); border-radius: 17px; background: rgba(2, 11, 22, 0.9); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24); backdrop-filter: blur(16px); } .admin-order-submit-bar p { margin: 0; color: var(--text-soft); font-size: 0.82rem; font-weight: 800; } .admin-order-submit-bar p i { margin-inline-end: 6px; color: var(--cyan); } .admin-order-submit-bar .admin-primary-button:disabled { opacity: 0.44; box-shadow: none; cursor: not-allowed; } [data-theme="light"] .admin-heading-actions .admin-secondary-button, [data-theme="light"] .admin-panel-head .admin-secondary-button, [data-theme="light"] .admin-sort-content h3 { color: #061a2e; } [data-theme="light"] .admin-order-summary > div, [data-theme="light"] .admin-order-categories button, [data-theme="light"] .admin-sort-item, [data-theme="light"] .admin-sort-handle, [data-theme="light"] .admin-sort-actions button { border-color: rgba(0, 166, 210, 0.17); color: #4a6478; background: rgba(255, 255, 255, 0.82); } [data-theme="light"] .admin-sort-item { box-shadow: 0 12px 32px rgba(6, 26, 46, 0.07); } [data-theme="light"] .admin-sort-item:hover, [data-theme="light"] .admin-sort-item.is-highlighted { border-color: rgba(0, 166, 210, 0.32); background: #f6fcfe; } [data-theme="light"] .admin-sort-position input { color: #061a2e; background: #f2fbfd; } [data-theme="light"] .admin-sort-content p { color: #4a6478; } [data-theme="light"] .admin-order-submit-bar { border-color: rgba(0, 166, 210, 0.2); background: rgba(255, 255, 255, 0.92); box-shadow: 0 18px 48px rgba(6, 26, 46, 0.12); } @keyframes adminOrderSpin { to { transform: rotate(360deg); } } @media (max-width: 767px) { .admin-heading-actions, .admin-order-intro .admin-panel-head, .admin-order-toolbar, .admin-order-submit-bar { align-items: stretch; flex-direction: column; } .admin-heading-actions > *, .admin-order-intro .admin-panel-head .admin-secondary-button, .admin-order-submit-bar .admin-primary-button { width: 100%; } .admin-order-intro, .admin-order-workspace, .admin-order-intro .admin-panel-head > div, .admin-order-toolbar > div, .admin-order-categories { min-width: 0; max-width: 100%; } .admin-order-intro, .admin-order-workspace { padding: 18px; overflow: hidden; } .admin-order-summary > div { max-width: 100%; } .admin-order-save-state { width: 100%; } .admin-sort-item { grid-template-columns: 44px 52px minmax(0, 1fr); gap: 9px; } .admin-sort-position input { width: 52px; } .admin-sort-visual { display: none; } .admin-sort-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: 8px; border-top: 1px solid rgba(215, 231, 242, 0.1); } .admin-sort-content p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } @media (prefers-reduced-motion: reduce) { .admin-order-save-state.is-saving i { animation: none; } .admin-sort-item { transition: none; } } .site-body { color-scheme: dark; overflow-x: hidden; overflow-x: clip; } .site-body .section-heading p { max-width: 760px; } .site-body :where(a, button, input, textarea, select):focus-visible { outline: 3px solid rgba(35, 240, 208, 0.62); outline-offset: 3px; } .site-body .service-card, .site-body .why-pillar, .site-body .portfolio-case, .site-body .testimonial-card { isolation: isolate; } html[data-theme="light"] .site-body { color-scheme: light; --light-bg: #f4fafc; --light-bg-soft: #edf7fa; --light-surface: #ffffff; --light-surface-soft: #f6fbfd; --light-text: #061a2e; --light-text-strong: #08243d; --light-muted: #3f5d72; --light-border: rgba(0, 157, 194, 0.2); --light-border-soft: rgba(6, 26, 46, 0.11); --light-shadow: 0 18px 46px rgba(6, 35, 58, 0.09); --light-shadow-strong: 0 24px 64px rgba(6, 35, 58, 0.12); --bg: var(--light-bg); --bg-soft: var(--light-bg-soft); --card: rgba(255, 255, 255, 0.96); --text: var(--light-text); --text-soft: var(--light-muted); --muted: #526f83; --border: var(--light-border-soft); --header: rgba(255, 255, 255, 0.92); --shadow: var(--light-shadow); background: radial-gradient(circle at 10% 5%, rgba(23, 216, 255, 0.075), transparent 26rem), radial-gradient(circle at 88% 18%, rgba(25, 216, 210, 0.055), transparent 28rem), linear-gradient(180deg, #ffffff 0%, #f5fbfd 48%, #edf7fa 100%); } html[data-theme="light"] .site-body .ambient-field { opacity: 0.22; background: linear-gradient(90deg, rgba(6, 26, 46, 0.025) 1px, transparent 1px), linear-gradient(0deg, rgba(0, 157, 194, 0.022) 1px, transparent 1px), radial-gradient(circle at 18% 12%, rgba(23, 216, 255, 0.07), transparent 28rem); } html[data-theme="light"] .site-body :where(p, .hero-text, .section-heading p, .service-card p, .portfolio-case-body p, .process-content p, .why-pillar p, .why-trust-head p, .why-trust-bottom p, .footer-brand p, .footer-bottom) { color: var(--light-muted); } html[data-theme="light"] .site-body :where(.hero-title, .section-title, .service-card h3, .portfolio-case-body h3, .process-content h3, .why-pillar h3, .cta-panel h2, .testimonial-client-copy strong, .site-footer h3) { color: var(--light-text-strong); } html[data-theme="light"] .site-body .section-muted { border-block: 1px solid rgba(0, 157, 194, 0.11); background: radial-gradient(circle at 14% 12%, rgba(23, 216, 255, 0.055), transparent 25rem), linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(239, 248, 251, 0.82)); } html[data-theme="light"] .site-body .section-muted::before { opacity: 0.24; } html[data-theme="light"] .site-body .site-header .navbar > .container, html[data-theme="light"] .site-body .site-header.is-scrolled .navbar > .container { border-color: rgba(0, 157, 194, 0.17) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 253, 0.91)) !important; box-shadow: 0 14px 38px rgba(6, 35, 58, 0.085) !important; } html[data-theme="light"] .site-body .site-header.is-scrolled { background: rgba(244, 250, 252, 0.76); box-shadow: 0 16px 42px rgba(6, 35, 58, 0.07); } html[data-theme="light"] .site-body .navbar-nav { border-color: rgba(6, 26, 46, 0.07); background: rgba(244, 250, 252, 0.72); } html[data-theme="light"] .site-body .nav-link { color: #17364f; } html[data-theme="light"] .site-body .nav-link:hover, html[data-theme="light"] .site-body .nav-link.active { color: #05243a; border-color: rgba(0, 157, 194, 0.25); background: linear-gradient(135deg, rgba(23, 216, 255, 0.12), rgba(25, 216, 210, 0.075)); box-shadow: inset 0 0 0 1px rgba(0, 157, 194, 0.045); } html[data-theme="light"] .site-body :where(.language-toggle, .theme-toggle, .navbar-toggler) { color: var(--light-text-strong); border-color: rgba(6, 26, 46, 0.12); background: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 22px rgba(6, 35, 58, 0.055); } html[data-theme="light"] .site-body .hero-section, html[data-theme="light"] .site-body .page-hero { background: radial-gradient(circle at 18% 18%, rgba(23, 216, 255, 0.075), transparent 27rem), radial-gradient(circle at 84% 22%, rgba(25, 216, 210, 0.045), transparent 29rem); } html[data-theme="light"] .site-body .hero-title { background: linear-gradient(135deg, #061a2e 8%, #074369 62%, #009fc5 112%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 12px 22px rgba(0, 126, 165, 0.07)); } html[data-theme="light"] .site-body .hero-console { border-color: rgba(0, 157, 194, 0.24); box-shadow: 0 26px 68px rgba(0, 126, 165, 0.12), 0 12px 32px rgba(6, 35, 58, 0.08) !important; } html[data-theme="light"] .site-body .hero-art { opacity: 0.86; filter: saturate(1.04) contrast(1.035); } html[data-theme="light"] .site-body :where(.hero-proof, .floating-chip, .why-proof-list span, .why-signal span) { color: #17364f; border-color: rgba(0, 157, 194, 0.18); background: rgba(255, 255, 255, 0.9); box-shadow: 0 9px 24px rgba(6, 35, 58, 0.065); } html[data-theme="light"] .site-body :where(.glass-panel, .service-card, .process-board, .why-trust-panel, .why-pillar, .why-trust-bottom, .portfolio-case, .testimonial-card, .cta-panel, .company-metrics) { border-color: var(--light-border); background: radial-gradient(circle at 92% 8%, rgba(23, 216, 255, 0.055), transparent 13rem), linear-gradient(145deg, #ffffff 0%, #f6fbfd 100%); box-shadow: 0 18px 46px rgba(6, 35, 58, 0.085), inset 0 1px 0 rgba(255, 255, 255, 0.96); } html[data-theme="light"] .site-body :where(.service-card, .why-pillar, .portfolio-case):hover { border-color: rgba(0, 157, 194, 0.32) !important; box-shadow: 0 24px 58px rgba(0, 126, 165, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.98) !important; } html[data-theme="light"] .site-body .company-metrics { overflow: hidden; background: rgba(255, 255, 255, 0.94); } html[data-theme="light"] .site-body .company-metric::after { background: rgba(0, 157, 194, 0.14); } html[data-theme="light"] .site-body .process-board { background: radial-gradient(circle at 50% 0%, rgba(23, 216, 255, 0.075), transparent 31rem), linear-gradient(145deg, #ffffff, #f4fafc); } html[data-theme="light"] .site-body .process-number { color: #007b98; border-color: rgba(0, 157, 194, 0.23); background: #ffffff; } html[data-theme="light"] .site-body .process-icon { color: #007b98; border-color: rgba(0, 157, 194, 0.25); background: linear-gradient(145deg, #ffffff, #eaf8fb); box-shadow: inset 0 0 22px rgba(23, 216, 255, 0.055), 0 10px 24px rgba(6, 35, 58, 0.08); } html[data-theme="light"] .site-body .portfolio-filter { color: #17364f; border-color: rgba(0, 157, 194, 0.18); background: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 20px rgba(6, 35, 58, 0.05); } html[data-theme="light"] .site-body .portfolio-filter.is-active { color: #032239; border-color: rgba(0, 157, 194, 0.28); background: linear-gradient(135deg, #1bdcf5, #26dfc9); box-shadow: 0 13px 30px rgba(0, 157, 194, 0.18); } html[data-theme="light"] .site-body .portfolio-case-body { background: linear-gradient(145deg, #ffffff, #f8fcfd); } html[data-theme="light"] .site-body .portfolio-case-link { border-top-color: rgba(6, 26, 46, 0.1); color: #007b98; } html[data-theme="light"] .site-body .testimonials-section { border-block: 1px solid rgba(0, 157, 194, 0.095); background: radial-gradient(circle at 15% 10%, rgba(23, 216, 255, 0.045), transparent 25rem), linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(241, 249, 251, 0.9)); } html[data-theme="light"] .site-body .testimonials-stage-focused .testimonial-card, html[data-theme="light"] .site-body .testimonials-stage-focused .testimonial-card:first-child { border-color: rgba(0, 157, 194, 0.2); background: radial-gradient(circle at 88% 8%, rgba(23, 216, 255, 0.105), transparent 14rem), radial-gradient(circle at 86% 112%, rgba(0, 157, 194, 0.06), transparent 12rem), linear-gradient(145deg, #ffffff, #f7fcfd); box-shadow: 0 15px 38px rgba(6, 35, 58, 0.085); } html[data-theme="light"] .site-body .testimonials-stage-focused .testimonial-card blockquote { color: #17364f; } html[data-theme="light"] .site-body .testimonial-client-copy small { color: #567286; } html[data-theme="light"] .site-body .testimonial-inline-cta { color: var(--light-text-strong); border-color: rgba(0, 157, 194, 0.17); background: rgba(255, 255, 255, 0.9); box-shadow: 0 13px 34px rgba(6, 35, 58, 0.07); } html[data-theme="light"] .site-body :where(.form-control, .form-select) { color: var(--light-text); border-color: rgba(6, 26, 46, 0.14); background-color: rgba(255, 255, 255, 0.94); } html[data-theme="light"] .site-body :where(.form-control, .form-select)::placeholder { color: #71889a; } html[data-theme="light"] .site-body :where(.form-control, .form-select):focus { border-color: rgba(0, 157, 194, 0.48); box-shadow: 0 0 0 4px rgba(23, 216, 255, 0.11); } html[data-theme="light"] .site-body .cta-panel { background: radial-gradient(circle at 8% 8%, rgba(23, 216, 255, 0.085), transparent 20rem), linear-gradient(145deg, #ffffff, #f3fafc); } html[data-theme="light"] .site-body .site-footer { color: var(--light-text-strong); border-top-color: rgba(0, 157, 194, 0.15); background: radial-gradient(circle at 12% 0%, rgba(23, 216, 255, 0.055), transparent 24rem), linear-gradient(180deg, #f9fdfe, #eaf5f8); } html[data-theme="light"] .site-body .footer-links a { color: #405f74; } html[data-theme="light"] .site-body .footer-links a:hover { color: #007b98; } html[data-theme="light"] .site-body .footer-bottom { border-top-color: rgba(6, 26, 46, 0.1); } @media (max-width: 991px) { html[data-theme="light"] .site-body .navbar-collapse { border-color: rgba(0, 157, 194, 0.17); background: rgba(255, 255, 255, 0.97); box-shadow: 0 22px 48px rgba(6, 35, 58, 0.12); } } .portfolio-more-wrap:not([hidden]) { display: flex; justify-content: center; margin-top: clamp(24px, 4vw, 40px); } .portfolio-more-button { min-width: min(100%, 240px); justify-content: center; } .faq-list { display: grid; gap: 12px; width: min(100%, 920px); margin-inline: auto; } .faq-item.accordion-item { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); box-shadow: 0 14px 38px rgba(0, 0, 0, 0.12); color: var(--text); } .faq-heading { margin: 0; } .faq-question.accordion-button { display: flex; align-items: center; gap: 18px; min-height: 72px; padding: 20px 26px; border: 0; background: transparent; box-shadow: none; color: var(--text); font: inherit; font-size: clamp(1rem, 1.5vw, 1.14rem); font-weight: 800; line-height: 1.6; text-align: start; transition: color 0.2s ease, background-color 0.2s ease; } .faq-question.accordion-button::after { display: none; } .faq-question:hover, .faq-question:not(.collapsed) { background: rgba(0, 212, 255, 0.055); } .faq-question:focus-visible { outline: 3px solid var(--cyan); outline-offset: -4px; } .faq-number { flex: 0 0 auto; color: var(--turquoise); font-family: "Inter", "Cairo", sans-serif; font-size: 0.85rem; font-weight: 800; } .faq-toggle-icon { flex: 0 0 auto; margin-inline-start: auto; color: var(--cyan); transition: transform 0.25s ease; } .faq-question[aria-expanded="true"] .faq-toggle-icon { transform: rotate(45deg); } .faq-answer.accordion-body { padding: 0 26px 24px; padding-inline-start: 68px; } .faq-answer p { max-width: 72ch; margin: 0; color: var(--text-soft); line-height: 1.9; } html[data-theme="light"] .site-body .faq-item.accordion-item { border-color: rgba(6, 26, 46, 0.13); background: rgba(255, 255, 255, 0.92); box-shadow: 0 14px 38px rgba(6, 35, 58, 0.07); } html[data-theme="light"] .site-body .faq-question:hover, html[data-theme="light"] .site-body .faq-question:not(.collapsed) { background: rgba(0, 157, 194, 0.07); } html[data-theme="light"] .site-body .faq-number, html[data-theme="light"] .site-body .faq-toggle-icon { color: #007e9b; } @media (max-width: 575px) { .faq-list { gap: 10px; } .faq-question.accordion-button { gap: 12px; min-height: 64px; padding: 16px 18px; } .faq-answer.accordion-body { padding: 0 18px 18px; padding-inline-start: 48px; } } @media (prefers-reduced-motion: reduce) { .faq-question.accordion-button, .faq-toggle-icon, .faq-collapse.collapsing { transition: none !important; } } .mobile-header-actions { display: none; } @media (max-width: 991px) { .motion-ready [data-aos="fade-left"], .motion-ready [data-aos="fade-right"] { transform: none; } .site-header .mobile-header-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; } .site-header .nav-actions > .language-toggle, .site-header .nav-actions > .theme-toggle { display: none; } .mobile-header-actions .language-toggle { min-width: 58px; height: 42px; gap: 4px; padding-inline: 5px; font-size: 0.75rem; } .mobile-header-actions .theme-toggle { min-width: 42px; width: 42px; } } @media (max-width: 767px) { .site-header .navbar > .container { gap: 8px; } } @media (max-width: 360px) { .site-header .navbar > .container { gap: 6px; } .site-header .brand-logo-frame { width: 112px; max-width: 112px; } .site-header .mobile-header-actions { gap: 4px; } } @media (min-width: 768px) and (max-width: 991px) { .hero-console .floating-chip { animation: none; } .hero-console .chip-3, .hero-console .chip-4 { inset-block-start: 130px; } .hero-console .chip-5, .hero-console .chip-6 { inset-block-end: 100px; } .hero-console .chip-7, .hero-console .chip-8 { inset-block-end: 50px; } } @media (max-width: 767px) { .hero-section { min-height: 0; } .hero-console { height: clamp(330px, 89vw, 380px); min-height: 0; } .console-logo { inset: 18% 5% 20%; } .dashboard-depth-1 { inset: calc(18% - 6px) calc(5% - 6px) calc(20% - 6px); } .console-logo img { width: min(84%, 260px); } .hero-console .floating-chip { display: inline-flex; max-width: calc(50% - 12px); max-height: none; min-height: 32px; padding: 5px 7px; gap: 5px; font-size: 0.65rem; line-height: 1.2; white-space: normal; animation-name: chipDriftMobile; animation-duration: 4.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; translate: none; } .hero-console .floating-chip span { max-width: none; overflow: visible; text-overflow: clip; } .hero-console .chip-1 { inset-block-start: 17%; inset-inline-start: 10px; } .hero-console .chip-2 { inset-block-start: 17%; inset-inline-end: 10px; } .hero-console .chip-3 { inset-block-start: calc(17% + 34px); inset-inline-start: 10px; } .hero-console .chip-4 { inset-block-start: calc(17% + 34px); inset-inline-end: 10px; } .hero-console .chip-5 { inset-block-end: calc(2% + 68px); inset-inline-start: 10px; } .hero-console .chip-6 { inset-block-end: calc(2% + 68px); inset-inline-end: 10px; } .hero-console .chip-7 { inset-block-end: calc(2% + 34px); inset-inline-start: 10px; } .hero-console .chip-8 { inset-block-end: calc(2% + 34px); inset-inline-end: 10px; } .hero-console .chip-9 { inset-inline: 0; inset-block-end: 2%; width: max-content; max-width: calc(100% - 20px); margin-inline: auto; } } @keyframes chipDriftMobile { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } } .back-to-top { position: fixed; inset-inline-start: 22px; inset-block-end: 22px; z-index: 20; width: 56px; height: 56px; display: grid; place-items: center; border: 0; border-radius: 18px; color: var(--navy-980); background: linear-gradient(135deg, var(--cyan), var(--turquoise)); box-shadow: 0 18px 42px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.34); font-size: 1.7rem; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; } .back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { transform: translateY(-4px); box-shadow: 0 24px 58px rgba(0, 212, 255, 0.28); } .back-to-top:focus-visible, .process-icon:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 4px; } @media (max-width: 767px) { .back-to-top { inset-inline-start: 12px; inset-block-end: 12px; width: 48px; height: 48px; border-radius: 15px; font-size: 1.35rem; } } .process-icon { padding: 0; cursor: pointer; } .process-icon.is-activated { animation: processTap 550ms ease-out; } @keyframes processTap { 0%, 100% { transform: rotate(45deg) scale(1); } 45% { transform: rotate(45deg) scale(1.12); box-shadow: 0 18px 38px rgba(0, 212, 255, 0.3); } } .detail-breadcrumb { margin-block-end: 24px; font-size: .85rem; } .detail-breadcrumb ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; list-style: none; padding: 0; margin: 0; } .detail-breadcrumb li + li::before { content: '/'; margin-inline-end: 16px; color: var(--muted); } .detail-breadcrumb a, .detail-page .service-detail a:not(.btn) { color: var(--turquoise); } .detail-breadcrumb a:hover, .detail-page .service-detail a:not(.btn):hover { text-decoration: underline; } .detail-breadcrumb li { overflow-wrap: anywhere; } .detail-page h2 { font-size: clamp(1.2rem, 2.5vw, 1.7rem); margin-block-end: 18px; } .detail-page h2:not(:first-child) { margin-block-start: 28px; } .detail-page h3 { font-size: 1.2rem; line-height: 1.7; } .detail-gallery { margin-block-start: 40px; } .detail-gallery img { display: block; width: 100%; height: auto; border-radius: 16px; } .detail-gallery figure { margin: 0; } .detail-technologies { display: flex; flex-wrap: wrap; gap: 12px; } .detail-technologies li { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; } .detail-links { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 24px; } .detail-page .service-detail { overflow-wrap: anywhere; } .service-story .service-hero-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; align-items: center; } .service-story .service-hero-layout .detail-hero-copy { min-width: 0; } .service-story .service-visual { position: relative; width: min(100%, 360px); aspect-ratio: 1; justify-self: center; isolation: isolate; border: 1px solid var(--border); border-radius: 28%; background: radial-gradient(circle at center, rgba(0, 212, 255, .09), transparent 68%), var(--card); box-shadow: inset 0 0 0 8px rgba(0, 212, 255, .025), 0 18px 44px rgba(0, 0, 0, .12); color: var(--detail-accent); pointer-events: none; } .service-story .service-visual-grid { position: absolute; inset: 10%; border-radius: 24%; opacity: .3; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 12.5% 12.5%; } .service-story .service-visual-orbit { position: absolute; inset: 15%; border: 1px solid var(--premium-ring); border-radius: 50%; } .service-story .service-visual-orbit::before { content: ''; position: absolute; inset: 10%; border: 1px dashed var(--border); border-radius: inherit; } .service-story .service-visual-core { position: absolute; inset: 30%; display: grid; place-items: center; border: 1px solid var(--premium-ring); border-radius: 24%; background: var(--bg-soft); box-shadow: 0 0 32px rgba(0, 212, 255, .08), inset 0 0 18px rgba(0, 212, 255, .04); } .service-story .service-visual-core i { font-size: clamp(3.2rem, 7vw, 5rem); line-height: 1; } .service-story .service-visual-node { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--detail-accent); box-shadow: 0 0 0 5px rgba(0, 212, 255, .07); } .service-story .service-visual-node--start { top: 21%; left: 24%; } .service-story .service-visual-node--end { bottom: 21%; right: 24%; } .service-story .service-visual-panel { position: absolute; top: 14%; right: 8%; width: 23%; padding: 10px; border: 1px solid var(--premium-ring); border-radius: 10px; background: var(--bg-soft); display: grid; gap: 6px; } .service-story .service-visual-panel span { height: 3px; background: var(--detail-accent); opacity: .4; border-radius: 3px; } .service-story .service-visual-panel span:nth-child(2) { width: 65%; } .service-story .service-visual-panel span:nth-child(3) { width: 82%; } .service-story .service-visual-signal { position: absolute; bottom: 14%; left: 9%; width: 24%; height: 17%; display: flex; align-items: flex-end; justify-content: space-evenly; padding: 9px; border: 1px solid var(--premium-ring); border-radius: 10px; background: var(--bg-soft); } .service-story .service-visual-signal span { width: 12%; height: 45%; background: var(--detail-accent); opacity: .4; border-radius: 2px; } .service-story .service-visual-signal span:nth-child(2) { height: 85%; } .service-story .service-visual-signal span:nth-child(3) { height: 65%; } .service-story .service-visual-signal span:nth-child(4) { height: 100%; } .service-story .service-visual--mobile-app-design-and-development .service-visual-core { inset: 25% 34%; border-radius: 18px; } .service-story .service-visual--artificial-intelligence-solutions .service-visual-orbit { border-radius: 22%; } .service-story .service-visual--cybersecurity-and-data-analysis .service-visual-orbit { border-radius: 30% 30% 48% 48%; } .service-story .service-visual--graphic-design-branding-and-motion-graphics .service-visual-orbit { transform: rotate(-12deg); border-radius: 25%; } .service-story .service-visual--research-and-academic-support .service-visual-panel { width: 26%; } .service-story .service-visual--virtual-reality-3d-platforms-and-game-project-design-and-development .service-visual-orbit { border-radius: 20%; transform: rotate(30deg); } .service-story .service-visual--ready-made-e-commerce-stores-at-a-suitable-cost .service-visual-core { border-radius: 30% 30% 18% 18%; } .service-story .service-visual--ready-made-accounting-systems-at-a-suitable-cost .service-visual-orbit { border-radius: 18%; } html[data-theme="light"] .service-story .service-visual { background: radial-gradient(circle at center, rgba(0, 157, 194, .045), transparent 68%), var(--card); box-shadow: inset 0 0 0 8px rgba(0, 157, 194, .02), 0 12px 30px rgba(6, 24, 45, .06); } @media (min-width: 768px) and (max-width: 991px) { .service-story .service-hero-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; } .service-story .service-visual { max-width: 240px; } .service-story .service-visual-core i { font-size: 3.2rem; } } @media (max-width: 767px) { .service-story .service-hero-layout { display: block; position: relative; } .service-story .service-visual { position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 96px; border-radius: 24px; } .service-story .service-hero-layout .section-kicker { min-height: 96px; padding-inline-end: 112px; display: flex; align-items: center; } .service-story .service-visual-core i { font-size: 1.8rem; } .service-story .service-visual-panel { padding: 3px; gap: 2px; border-radius: 4px; } .service-story .service-visual-panel span { height: 1px; } .service-story .service-visual-signal { padding: 3px; border-radius: 4px; } .service-story .service-visual-node { width: 3px; height: 3px; box-shadow: 0 0 0 2px rgba(0, 212, 255, .07); } .service-story .service-visual--mobile-app-design-and-development .service-visual-core { border-radius: 6px; } } .service-story .service-visual { --visual-float: -3px; width: min(100%, 390px); pointer-events: auto; animation: service-emblem-enter 750ms ease-out backwards; transition: transform 400ms ease; box-shadow: inset 0 0 0 8px rgba(0, 212, 255, .025), inset 0 1px 0 rgba(215, 231, 242, .12), 0 20px 48px rgba(0, 0, 0, .14); } .service-story .service-visual-stage { position: absolute; inset: 0; animation: service-emblem-float 9s ease-in-out 750ms infinite; } .service-story .service-visual-glow { position: absolute; inset: 13%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 212, 255, .18), transparent 70%); opacity: .65; animation: service-emblem-glow 7s ease-in-out infinite; transition: opacity 400ms ease; } .service-story .service-visual-grid { opacity: .22; animation: service-emblem-grid 13s ease-in-out infinite; } .service-story .service-visual-core { inset: 28%; background: linear-gradient(145deg, rgba(0, 212, 255, .045), transparent), var(--bg-soft); transition: transform 400ms ease; } .service-story .service-visual-core i { animation: service-emblem-enter 700ms ease-out 140ms both; } .service-story .service-visual-tracer { position: absolute; inset: 17%; border: 1px solid transparent; border-block-start-color: var(--premium-ring); border-radius: 50%; animation: service-emblem-orbit 28s linear infinite; } .service-story .service-visual-tracer span { position: absolute; top: 14%; left: 14%; width: 5px; height: 5px; background: var(--detail-accent); border-radius: 50%; opacity: .7; } .service-story .service-visual-tracer span + span { top: auto; left: auto; right: 14%; bottom: 14%; opacity: .35; } .service-story .service-visual-node { animation: service-emblem-enter 650ms ease-out 250ms both, service-emblem-pulse 5s ease-in-out 900ms infinite; } .service-story .service-visual-node--end { animation-delay: 380ms, 2s; } .service-story .service-visual-panel, .service-story .service-visual-signal { box-shadow: inset 0 1px 0 rgba(215, 231, 242, .08); } .service-story .service-visual--systems .service-visual-panel span, .service-story .service-visual--accounting .service-visual-panel span { animation: service-emblem-line 6s ease-in-out infinite; transform-origin: left; } .service-story .service-visual--systems .service-visual-panel span:nth-child(2), .service-story .service-visual--accounting .service-visual-panel span:nth-child(2) { animation-delay: 700ms; } .service-story .service-visual--systems .service-visual-panel span:nth-child(3), .service-story .service-visual--accounting .service-visual-panel span:nth-child(3) { animation-delay: 1400ms; } .service-story .service-visual--systems .service-visual-signal span, .service-story .service-visual--accounting .service-visual-signal span { animation: service-emblem-bar 5s ease-in-out infinite; transform-origin: bottom; } .service-story .service-visual--accounting .service-visual-signal span:nth-child(even) { animation-delay: 1s; } .service-story .service-visual--mobile .service-visual-core::after, .service-story .service-visual--ecommerce .service-visual-panel::after { content: ''; position: absolute; top: 9%; right: 14%; width: 5px; height: 5px; border-radius: 50%; background: var(--detail-accent); animation: service-emblem-pulse 4s ease-in-out infinite; } .service-story .service-visual--ai .service-visual-tracer { animation-duration: 22s; } .service-story .service-visual--ai .service-visual-node--end { animation-delay: 380ms, 3.4s; } .service-story .service-visual--cyber .service-visual-core::after, .service-story .service-visual--research .service-visual-panel::after { content: ''; position: absolute; inset: 20% 15% auto; height: 1px; background: var(--detail-accent); animation: service-emblem-scan 8s ease-in-out infinite; } .service-story .service-visual--design .service-visual-orbit::before { animation: service-emblem-orbit 30s linear infinite; } .service-story .service-visual--vr .service-visual-tracer { animation: service-emblem-spatial 26s linear infinite; } .service-story .service-visual--ecommerce .service-visual-panel { animation: service-emblem-float 11s ease-in-out infinite reverse; } html[data-theme="light"] .service-story .service-visual-glow { background: radial-gradient(circle, rgba(0, 157, 194, .10), transparent 70%); } @keyframes service-emblem-enter { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } } @keyframes service-emblem-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--visual-float)); } } @keyframes service-emblem-grid { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } } @keyframes service-emblem-orbit { to { transform: rotate(360deg); } } @keyframes service-emblem-spatial { from { transform: perspective(600px) rotateX(35deg) rotateZ(0); } to { transform: perspective(600px) rotateX(35deg) rotateZ(360deg); } } @keyframes service-emblem-glow { 0%, 100% { opacity: .55; } 50% { opacity: .85; } } @keyframes service-emblem-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } } @keyframes service-emblem-line { 0%, 100% { transform: scaleX(.86); opacity: .35; } 50% { transform: scaleX(1); opacity: .65; } } @keyframes service-emblem-bar { 0%, 100% { transform: scaleY(.82); opacity: .35; } 50% { transform: scaleY(1); opacity: .6; } } @keyframes service-emblem-scan { 0%, 100% { transform: translateY(0); opacity: .12; } 50% { transform: translateY(28px); opacity: .45; } } @media (hover: hover) and (pointer: fine) { .service-story .service-visual:hover { transform: scale(1.015); } .service-story .service-visual:hover .service-visual-glow { opacity: .95; animation: none; } .service-story .service-visual:hover .service-visual-core { transform: translateY(-2px); } } @media (min-width: 768px) and (max-width: 991px) { .service-story .service-visual { max-width: 240px; } } @media (max-width: 767px) { .service-story .service-visual { width: 96px; --visual-float: -2px; } .service-story .service-visual-grid, .service-story .service-visual-panel, .service-story .service-visual-signal, .service-story .service-visual-orbit::before, .service-story .service-visual-node--end { display: none; animation: none; } .service-story .service-visual-orbit { border-radius: 50%; transform: none; } .service-story .service-visual-tracer { border: 0; } .service-story .service-visual-tracer span { width: 3px; height: 3px; } .service-story .service-visual-core { inset: 26%; } .service-story .service-visual-core i { font-size: 2rem; } .service-story .service-visual--mobile .service-visual-core { inset: 23% 32%; } .service-story .service-visual--cyber .service-visual-core::after, .service-story .service-visual--mobile .service-visual-core::after { display: none; animation: none; } } @media (prefers-reduced-motion: reduce) { .service-story .service-visual, .service-story .service-visual *, .service-story .service-visual *::before, .service-story .service-visual *::after { animation: none !important; transition: none !important; } .service-story .service-visual:hover, .service-story .service-visual:hover .service-visual-core { transform: none; } } .service-story .service-micro { color: var(--detail-accent); direction: ltr; } .service-story .service-visual-panel.service-micro { min-height: 41px; } .service-story .service-micro b, .service-story .service-micro em { display: block; position: absolute; font-style: normal; } .service-story .service-micro--diagnostics .micro-marker { right: 9%; top: 12%; width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: service-emblem-pulse 5s ease-in-out infinite; } .service-story .service-micro--diagnostics span { animation: service-emblem-line 6s ease-in-out infinite; transform-origin: left; } .service-story .service-micro--diagnostics span:nth-child(2) { animation-delay: 900ms; } .service-story .service-micro--dashboard .micro-marker { right: 9%; top: 12%; width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: service-emblem-pulse 5s ease-in-out infinite; } .service-story .service-micro--document .micro-marker, .service-story .service-micro--ledger .micro-marker { top: 9%; right: 9%; width: 10%; height: 22%; border: 1px solid currentColor; border-block-end: 0; opacity: .5; } .service-story .service-micro--document { border-radius: 3px 10px 3px 3px; } .service-story .service-micro--ledger span { border-block-end: 1px dotted currentColor; } .service-story .service-micro .micro-point { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; animation: service-emblem-pulse 5s ease-in-out infinite; } .service-story .service-micro .micro-point:nth-of-type(1) { left: 17%; top: 35%; } .service-story .service-micro .micro-point:nth-of-type(2) { left: 47%; top: 58%; animation-delay: 900ms; } .service-story .service-micro .micro-point:nth-of-type(3) { right: 17%; top: 27%; animation-delay: 1800ms; } .service-story .service-micro .micro-link { inset: 35% 19% 35%; border-block-start: 1px solid currentColor; border-block-end: 1px solid currentColor; opacity: .22; transform: skewY(-10deg); } .service-story .service-micro--workflow .micro-point { border-radius: 2px; } .service-story .service-micro--neural .micro-link { transform: skewY(15deg); } .service-story .service-micro--inference .micro-link { border-block-end: 0; animation: service-emblem-line 6s ease-in-out infinite; } .service-story .service-micro--dataflow .micro-link { border-block-start-style: dashed; border-block-end: 0; } .service-story .service-micro--app, .service-story .service-micro--product { padding-inline-start: 32px; } .service-story .service-micro .micro-tile { left: 10%; top: 22%; width: 21%; height: 54%; border: 1px solid currentColor; border-radius: 3px; opacity: .45; } .service-story .service-micro--app .micro-tile { border-radius: 6px; } .service-story .service-micro .micro-status { right: 8%; top: 12%; width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: service-emblem-pulse 4s ease-in-out infinite; } .service-story .service-micro--product::after { display: none; } .service-story .service-micro--security { padding-inline-start: 30px; } .service-story .service-micro .micro-shield { left: 12%; top: 20%; width: 24%; height: 58%; border: 1px solid currentColor; border-radius: 25% 25% 48% 48%; opacity: .55; } .service-story .service-micro--vector, .service-story .service-micro--layers, .service-story .service-micro--wireframe, .service-story .service-micro--axes { display: block; } .service-story .service-micro .micro-curve { inset: 24% 22%; border-block-start: 1px solid currentColor; border-inline-end: 1px solid currentColor; border-radius: 0 80% 0 0; transform: rotate(-15deg); opacity: .6; } .service-story .service-micro .micro-anchor { width: 5px; height: 5px; border: 1px solid currentColor; left: 20%; top: 30%; } .service-story .service-micro .micro-anchor + .micro-anchor { left: auto; top: auto; right: 20%; bottom: 25%; animation: service-emblem-pulse 6s ease-in-out infinite; } .service-story .service-micro .micro-layer { left: 24%; top: 22%; width: 48%; height: 38%; border: 1px solid currentColor; border-radius: 2px; transform: rotate(-12deg); opacity: .55; animation: service-emblem-pulse 6s ease-in-out infinite; } .service-story .service-micro .micro-layer:nth-child(2) { top: 33%; opacity: .4; animation-delay: 1s; } .service-story .service-micro .micro-layer:nth-child(3) { top: 44%; opacity: .25; animation-delay: 2s; } .service-story .service-micro--table { display: grid; align-items: stretch; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3px; } .service-story .service-micro--table b { position: static; border: 1px solid currentColor; opacity: .3; } .service-story .service-micro .micro-face { width: 30%; height: 42%; left: 23%; top: 35%; border: 1px solid currentColor; transform: skewY(20deg); opacity: .6; } .service-story .service-micro .micro-face + .micro-face { left: 43%; top: 16%; opacity: .35; } .service-story .service-micro .micro-edge { left: 24%; top: 24%; width: 47%; border-block-start: 1px solid currentColor; transform: rotate(-26deg); opacity: .4; } .service-story .service-micro--axes em { left: 40%; top: 55%; width: 36%; height: 1px; background: currentColor; transform-origin: left; opacity: .4; } .service-story .service-micro--axes em:nth-child(2) { transform: rotate(-90deg); } .service-story .service-micro--axes em:nth-child(3) { transform: rotate(135deg); } .service-story .service-micro .micro-origin { left: 37%; top: 51%; width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: service-emblem-pulse 5s ease-in-out infinite; } .service-story .service-micro--order { display: grid; padding-inline-start: 30px; } .service-story .service-micro .micro-check { left: 13%; top: 34%; width: 14%; height: 25%; border-inline-end: 1px solid currentColor; border-block-end: 1px solid currentColor; transform: rotate(45deg); opacity: .65; animation: service-emblem-pulse 5s ease-in-out infinite; } .service-story .service-visual .service-micro--order span { width: 100%; height: 2px; animation: service-emblem-line 6s ease-in-out infinite; } .service-story .service-micro--order span + span { width: 65%; } @media (max-width: 767px) { .service-story .service-visual .service-micro { display: none; } .service-story .service-visual .service-visual-panel.service-micro { display: block; width: 20px; height: 16px; min-height: 0; top: 10%; right: 5%; padding: 3px; border-radius: 4px; opacity: .8; animation: none; } .service-story .service-visual .service-visual-panel.service-micro--app, .service-story .service-visual .service-visual-panel.service-micro--product, .service-story .service-visual .service-visual-panel.service-micro--security { padding-inline-start: 7px; } .service-story .service-visual-panel.service-micro span { height: 1px; margin-block: 1px; } .service-story .service-visual-panel.service-micro .micro-point { width: 2px; height: 2px; } .service-story .service-visual-panel.service-micro .micro-anchor { width: 3px; height: 3px; } .service-story .service-visual-panel.service-micro .micro-marker, .service-story .service-visual-panel.service-micro .micro-status { width: 2px; height: 2px; } .service-story .service-visual .service-micro--document::after { display: none; animation: none; } } @media (prefers-reduced-motion: reduce) { .service-story .service-micro *, .service-story .service-micro::after { animation: none !important; } } .home-services .service-card p { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; text-overflow: clip; max-height: none; } .home-services .home-service-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block-start: auto; padding-block-start: 20px; } .home-services .home-service-actions .btn { min-height: 44px; padding: 8px 10px; font-size: .875rem; line-height: 1.45; white-space: normal; } .home-services .home-services-swipe-hint { display: none; } .home-services .home-services-track:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; } .home-services .home-services-callout { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-block-start: 28px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); } .home-services .home-services-callout p { flex: 1 1 320px; margin: 0; } .home-services .home-services-callout .btn { white-space: normal; } @media (max-width: 767px) { .home-services .home-services-swipe-hint { display: flex; align-items: center; gap: 8px; margin-block-end: 14px; font-size: .875rem; } .home-services .home-services-track { flex-wrap: nowrap; align-items: stretch; gap: 14px; margin: 0; padding: 6px 2px 14px; overflow-x: auto; touch-action: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: none; } .home-services .home-services-track::-webkit-scrollbar { display: none; } .home-services .home-services-track > .col-lg-4 { display: flex; flex: 0 0 calc(100% - 26px); width: calc(100% - 26px); margin: 0; padding: 0; scroll-snap-align: start; transform: none; } .home-services .service-card { height: auto !important; flex: 1; min-height: 0; padding: 22px; } .home-services .home-service-actions { padding-block-start: 16px; } .home-services .home-services-callout { padding: 18px; } } .home-services .home-services-pagination { display: none; } .home-services .service-card .home-service-mobile-summary, .home-services .home-service-highlights { display: none; } @media (max-width: 767px) { .home-services .home-services-track > .col-lg-4 { flex-basis: calc(100% - 32px); width: calc(100% - 32px); } .home-services .home-services-track { scroll-behavior: smooth; } .home-services .service-card { padding: 20px; border-radius: 22px; opacity: 1; transition: border-color 250ms ease, box-shadow 250ms ease; box-shadow: inset 0 0 0 1px rgba(0, 212, 255, .035); } .home-services .service-card.is-service-active { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--premium-ring), 0 4px 18px rgba(0, 212, 255, .07); } .home-services .card-topline { align-items: center; margin-block-end: 18px; } .home-services .card-topline .card-icon { width: 48px; height: 48px; margin: 0; border-radius: 15px; font-size: 1.3rem; } .home-services .card-sequence { font-size: .8rem; } .home-services .service-card h3 { min-block-size: 3lh; margin-block-end: 12px; } .home-services .service-card p { line-height: 1.7; margin-block-end: 0; } .home-services .service-card .home-service-desktop-summary { display: none; } .home-services .service-card .home-service-mobile-summary { display: block; color: var(--text-soft); } .home-services .home-service-highlights { display: grid; gap: 10px; list-style: none; padding: 0; margin: 18px 0 0; color: var(--text-soft); font-size: .875rem; line-height: 1.7; } .home-services .home-service-highlights li { display: flex; align-items: baseline; gap: 8px; } .home-services .home-service-highlights i { flex-shrink: 0; color: var(--cyan); } .home-services .home-service-actions { padding-block-start: 18px; } .home-services .home-services-swipe-hint { font-size: .8rem; opacity: .8; } .home-services.has-service-pagination .home-services-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-block-start: 2px; } .home-services .home-services-indicator { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; } .home-services .home-services-indicator::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--muted); opacity: .4; transition: width 250ms ease, opacity 250ms ease, background 250ms ease; } .home-services .home-services-indicator[aria-current="true"]::before { width: 24px; background: var(--cyan); opacity: 1; box-shadow: 0 0 8px rgba(0, 212, 255, .2); } .home-services .home-services-indicator:focus-visible { outline: 3px solid var(--cyan); outline-offset: 1px; } } @supports (grid-template-rows: subgrid) { @media (max-width: 767px) { .home-services .home-services-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% - 32px); grid-template-rows: repeat(5, auto); gap: 0 14px; align-items: stretch; } .home-services .home-services-track > .col-lg-4 { display: grid; grid-row: 1 / span 5; grid-template-rows: subgrid; width: auto; } .home-services .service-card { display: grid; grid-row: 1 / span 5; grid-template-rows: subgrid; height: 100% !important; } .home-services .home-service-actions { align-self: end; } } } @media (max-width: 767px) and (prefers-reduced-motion: reduce) { .home-services .home-services-track { scroll-behavior: auto; } .home-services .service-card, .home-services .home-services-indicator::before { transition: none; } } .services-listing .service-detail { display: flex; flex-direction: column; } .services-listing .service-detail-head { gap: 16px; align-items: flex-start; margin-block-end: 22px; } .services-listing .service-detail-head .card-icon { margin-block-end: 0; } .services-listing .service-detail-head h2 { margin: 0; line-height: 1.65; } .services-listing .service-detail-head .card-sequence { padding-block-start: 4px; } .services-listing .service-list-description { margin-block-end: 0; } .services-listing .service-highlights { margin-block: 22px 0; gap: 14px; } .services-listing .service-highlights li { align-items: baseline; line-height: 1.8; } .services-listing .service-highlights i { flex: 0 0 auto; } .services-listing .service-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block-start: auto; padding-block-start: 28px; } .services-listing .service-actions .btn { width: 100%; min-height: 52px; margin: 0; align-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 16px; white-space: normal; line-height: 1.5; } .services-listing .service-actions .btn > span { text-align: center; } html[dir="ltr"] .services-listing .service-actions .bi-arrow-up-left { transform: scaleX(-1); } @media (max-width: 575px) { .services-listing .service-actions { grid-template-columns: 1fr; } .services-listing .service-detail { padding: 24px; } .services-listing .service-detail-head { gap: 12px; } } .discovery-view { --detail-accent: var(--turquoise); --detail-gap: clamp(36px, 5vw, 64px); } html[data-theme="light"] .discovery-view { --detail-accent: #00758c; } .discovery-view .section-pad { padding-block: var(--detail-gap); } .discovery-view .detail-hero { min-height: 0; padding-block: calc(var(--header-height) + 48px) 32px; text-align: start; perspective: none; } .discovery-view .detail-hero .container { max-width: 1320px; } .discovery-view .detail-hero h1 { max-width: 24ch; margin: 0 0 18px; font-size: clamp(1.85rem, 3.25vw, 3.4rem); line-height: 1.32; text-shadow: none; } .discovery-view .detail-hero p { max-width: 76ch; font-size: 1.05rem; margin: 0; margin-inline: 0; } .discovery-view .section-kicker { color: var(--detail-accent); margin-block-end: 12px; } .discovery-view .detail-breadcrumb { margin-block-end: 28px; color: var(--muted); line-height: 1.7; } .discovery-view .detail-breadcrumb ol { justify-content: flex-start; gap: 6px 12px; } .discovery-view .detail-breadcrumb li + li::before { margin-inline-end: 12px; } .discovery-view .detail-breadcrumb a { color: var(--text-soft); } .discovery-view .detail-breadcrumb a:hover { color: var(--detail-accent); } .discovery-view .detail-breadcrumb [aria-current] { color: var(--text-soft); } .discovery-view h2, .discovery-view .section-title { font-size: clamp(1.35rem, 2vw, 1.9rem); font-weight: 800; line-height: 1.55; margin: 0 0 18px; color: var(--text); } .discovery-view h3 { font-size: 1.12rem; font-weight: 800; line-height: 1.6; color: var(--text); margin: 0 0 12px; } .discovery-view p { line-height: 1.95; } .discovery-view .section-heading { text-align: start; max-width: none; margin: 0 0 28px; } .discovery-view .section-heading p { max-width: 76ch; margin: 0; } .discovery-view .detail-block { margin-block-start: var(--detail-gap); } .discovery-view .detail-block > h2 { margin-block-start: 0; } .discovery-view .detail-prose p { max-width: 76ch; margin: 0; } .discovery-view .detail-label { display: block; color: var(--muted); font-size: .8rem; font-weight: 700; line-height: 1.7; margin: 0 0 12px; } .discovery-view .detail-panel { padding: clamp(22px, 3vw, 34px); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); } .discovery-view .detail-symbol { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border-radius: var(--radius-sm); background: rgba(0, 212, 255, .08); color: var(--detail-accent); font-size: 1.35rem; margin-block-end: 20px; } .discovery-view .detail-badges { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .discovery-view .detail-badges li { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text-soft); font-size: .85rem; line-height: 1.5; } .discovery-view .detail-badges li i { color: var(--detail-accent); flex: 0 0 auto; } .discovery-view .study-stack { margin-block-start: 24px; } .discovery-view .study-visual { padding-block-start: 8px; } .discovery-view .study-image { margin: 0; padding: clamp(8px, 1.4vw, 20px); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); } .discovery-view .study-image img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; border-radius: 10px; margin-inline: auto; } .discovery-view .study-image-primary img { max-height: 680px; } .discovery-view .study-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; padding-block: 20px; } .discovery-view .study-gallery-disclosure { margin-block-start: 20px; border-block-end: 1px solid var(--border); } .discovery-view .study-gallery-disclosure summary { display: flex; align-items: center; gap: 12px; padding: 18px 4px; color: var(--text); font-weight: 700; list-style: none; cursor: pointer; } .discovery-view .study-gallery-disclosure summary::-webkit-details-marker { display: none; } .discovery-view .study-gallery-disclosure summary > i { margin-inline-start: auto; color: var(--detail-accent); transition: transform .2s ease; } .discovery-view .study-gallery-disclosure[open] summary > i { transform: rotate(45deg); } .discovery-view .study-gallery-disclosure summary:focus-visible { outline: 3px solid var(--detail-accent); outline-offset: 3px; border-radius: 8px; } .discovery-view .detail-count { padding: 2px 9px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-soft); font-size: .8rem; } .discovery-view .study-overview-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; } .discovery-view .study-overview-layout > :only-child { grid-column: 1 / -1; } .discovery-view .study-service h2 { font-size: 1.15rem; } .discovery-view .detail-panel h2 { margin-block-start: 0; } .discovery-view .detail-service-links { list-style: none; padding: 0; margin: 0; } .discovery-view .detail-service-links li + li { margin-block-start: 16px; } .discovery-view .detail-service-links a, .discovery-view .detail-text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--detail-accent); font-weight: 700; line-height: 1.8; } .discovery-view .detail-service-links a i, .discovery-view .detail-text-link i { flex: 0 0 auto; } .discovery-view .detail-text-link:hover, .discovery-view .detail-service-links a:hover, .discovery-view .detail-evidence-item a:hover, .discovery-view .solution-service a:hover { text-decoration: underline; text-underline-offset: 4px; } html[dir="rtl"] .discovery-view .bi-arrow-up-right { transform: scaleX(-1); } .discovery-view .detail-feature-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; } .discovery-view .detail-feature-list li { display: flex; align-items: baseline; gap: 12px; padding-block: 16px; border-block-end: 1px solid var(--border); color: var(--text-soft); line-height: 1.9; } .discovery-view .detail-feature-list i { color: var(--detail-accent); flex: 0 0 auto; } .discovery-view .detail-links { margin-block-start: 32px; } .discovery-view .btn { white-space: normal; gap: 10px; } .discovery-view .service-need { display: flex; align-items: start; gap: 24px; } .discovery-view .service-need .detail-symbol { margin: 0; } .discovery-view .detail-intent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; list-style: none; padding: 0; margin: 0; } .discovery-view .detail-intent-list li { display: flex; gap: 16px; align-items: baseline; padding: 22px 0; border-block-start: 1px solid var(--border); line-height: 1.9; color: var(--text-soft); } .discovery-view .detail-step-number { color: var(--detail-accent); font: 700 .85rem/1.5 "Inter", sans-serif; flex: 0 0 auto; } .discovery-view .service-scope-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; } .discovery-view .service-scope-layout > :only-child { grid-column: 1 / -1; } .discovery-view .service-scope-layout .detail-feature-list { grid-template-columns: 1fr; } .discovery-view .service-stack { padding-block: 24px; } .discovery-view .detail-evidence-list { border-block-start: 1px solid var(--border); } .discovery-view .detail-evidence-item { display: flex; align-items: center; gap: 24px; justify-content: space-between; padding-block: 24px; border-block-end: 1px solid var(--border); } .discovery-view .detail-evidence-item p { max-width: 80ch; margin: 0; } .discovery-view .detail-evidence-item h3 { margin-block-end: 6px; } .discovery-view .detail-evidence-item > i { color: var(--detail-accent); flex: 0 0 auto; } .discovery-view .detail-context { display: flex; gap: 16px; color: var(--muted); } .discovery-view .detail-context p { margin: 0; font-size: .95rem; max-width: 90ch; } .discovery-view .detail-context > i { color: var(--detail-accent); flex: 0 0 auto; padding-block-start: 5px; } .discovery-view .detail-hub-callout { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-block-start: 28px; padding-block: 28px; border-block: 1px solid var(--border); } .discovery-view .detail-hub-callout p { max-width: 62ch; margin: 0; } .discovery-view .detail-hub-callout .btn { flex: 0 0 auto; max-width: 100%; } .discovery-view .detail-contact { padding-block-start: 0; } .discovery-view .detail-contact-panel { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(24px, 4vw, 48px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(115deg, rgba(0, 212, 255, .06), transparent), var(--card); } .discovery-view .detail-contact-panel p { max-width: 64ch; margin: 0; } .discovery-view .detail-contact-panel h2 { margin-block-end: 12px; } .discovery-view .detail-contact-panel .btn { flex: 0 0 auto; } .discovery-view .solution-start { display: flex; flex-direction: column; } .discovery-view .solution-start .detail-step-number { margin-block-end: 16px; } .discovery-view .solution-start .detail-text-link { margin-block-start: auto; padding-block-start: 8px; font-size: .85rem; } .discovery-view .solution-journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 0; list-style: none; padding: 0; margin: 0; } .discovery-view .solution-step { position: relative; padding-inline: 0 32px; } .discovery-view .solution-step::before { content: ""; position: absolute; inset-block-start: 21px; inset-inline: 0; border-block-start: 1px solid var(--border); } .discovery-view .solution-step .detail-step-number { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-soft); margin-block-end: 18px; } .discovery-view .solution-step p { margin: 0; max-width: 40ch; font-size: .95rem; } .discovery-view .solution-student { border-inline-start: 3px solid var(--detail-accent); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px 40px; } .discovery-view .solution-student h2 { grid-row: span 2; max-width: 25ch; margin: 0; } .discovery-view .solution-student p { margin: 0; font-size: .95rem; } .discovery-view .solution-student .detail-text-link { grid-column: 2; } .discovery-view .solution-service { border-block-start: 1px solid var(--border); padding-block: 24px 8px; } .discovery-view .solution-service p { margin: 0; font-size: .95rem; } .discovery-view .solution-evidence { display: block; margin-block-end: 28px; } .discovery-view .solution-evidence p + p { margin-block-start: 12px; } .discovery-view .solution-evidence .btn { margin-block-start: 22px; } .discovery-view .detail-faq { border-block-start: 1px solid var(--border); } .discovery-view .detail-faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; } .discovery-view .detail-faq .faq-item { box-shadow: none; } .discovery-view .detail-faq .faq-number, .discovery-view .detail-faq .faq-toggle-icon { color: var(--detail-accent); } .discovery-view .detail-faq .faq-question { font-size: 1rem; gap: 14px; padding: 20px; } .discovery-view .detail-faq .faq-answer { padding: 0 20px 20px; padding-inline-start: 56px; } @media (max-width: 991px) { .discovery-view .study-overview-layout, .discovery-view .service-scope-layout { grid-template-columns: 1fr; gap: 28px; } .discovery-view .detail-faq-layout { grid-template-columns: 1fr; gap: 12px; } .discovery-view .detail-faq .faq-list { width: 100%; } .discovery-view .service-stack { padding-block: 0; } .discovery-view .detail-hub-callout { align-items: start; flex-direction: column; } } @media (max-width: 767px) { .discovery-view .detail-hero { padding-block: calc(var(--header-height) + 28px) 26px; } .discovery-view .detail-hero h1 { font-size: clamp(1.65rem, 5.8vw, 2.5rem); } .discovery-view .detail-hero p { font-size: 1rem; } .discovery-view .study-gallery-grid, .discovery-view .detail-feature-list, .discovery-view .detail-intent-list { grid-template-columns: 1fr; gap: 0; } .discovery-view .study-gallery-grid { gap: 16px; } .discovery-view .study-image-primary img { max-height: 540px; } .discovery-view .detail-contact-panel { align-items: start; flex-direction: column; gap: 22px; } .discovery-view .solution-journey { grid-template-columns: 1fr; gap: 0; } .discovery-view .solution-step { padding-block: 0 28px; padding-inline: 64px 0; } .discovery-view .solution-step::before { inset-block: 22px 0; inset-inline: 21px auto; border-block-start: 0; border-inline-start: 1px solid var(--border); } .discovery-view .solution-step:last-child::before { display: none; } .discovery-view .solution-step .detail-step-number { position: absolute; inset-block-start: 0; inset-inline-start: 0; } .discovery-view .solution-step p { max-width: none; } .discovery-view .solution-student { grid-template-columns: 1fr; gap: 18px; } .discovery-view .solution-student h2 { grid-row: auto; max-width: none; } .discovery-view .solution-student .detail-text-link { grid-column: auto; } .discovery-view .service-need { gap: 16px; } .discovery-view .service-need .detail-symbol { width: 40px; height: 40px; } } @media (prefers-reduced-motion: reduce) { .discovery-view .study-gallery-disclosure summary > i { transition: none; } } .site-body .homepage-why { isolation: isolate; padding-block: clamp(48px, 6vw, 84px); background: linear-gradient(180deg, rgba(4, 22, 41, 0), rgba(4, 22, 41, 0.68) 30%, rgba(4, 22, 41, 0.68) 70%, rgba(4, 22, 41, 0)); } .site-body .homepage-why::before { background: radial-gradient(ellipse at 12% 18%, rgba(0, 212, 255, 0.13), transparent 55%), radial-gradient(ellipse at 90% 80%, rgba(35, 240, 208, 0.09), transparent 52%), linear-gradient(rgba(0, 212, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.035) 1px, transparent 1px); background-size: auto, auto, 44px 44px, 44px 44px; mask-image: linear-gradient(180deg, transparent, black 16%, black 84%, transparent); } .site-body .homepage-why::after { content: ""; position: absolute; inset-inline-end: -100px; inset-block-start: -130px; width: clamp(280px, 38vw, 520px); aspect-ratio: 1; border: 1px solid rgba(35, 240, 208, 0.12); border-radius: 50%; box-shadow: inset 0 0 70px rgba(0, 212, 255, 0.045); pointer-events: none; z-index: 0; } .site-body .homepage-why .why-trust-panel { overflow: visible; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; isolation: auto; } .site-body .homepage-why .why-trust-panel::before, .site-body .homepage-why .why-trust-panel::after { content: none; } .site-body .homepage-why .why-trust-bottom { margin-top: clamp(24px, 3vw, 36px); padding: 24px 0; border: 0; border-block: 1px solid rgba(35, 240, 208, 0.16); border-radius: 0; background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.04), transparent); box-shadow: none; } html[data-theme="light"] .site-body .homepage-why { background: linear-gradient(180deg, transparent, rgba(225, 244, 249, 0.62) 28%, rgba(235, 248, 250, 0.72) 72%, transparent); } html[data-theme="light"] .site-body .homepage-why::before { opacity: 0.65; } html[data-theme="light"] .site-body .homepage-why::after { border-color: rgba(0, 150, 190, 0.14); box-shadow: inset 0 0 70px rgba(0, 150, 190, 0.035); } html[data-theme="light"] .site-body .homepage-why .why-trust-panel { background: none; box-shadow: none; } html[data-theme="light"] .site-body .homepage-why .why-trust-bottom { border-color: rgba(0, 150, 190, 0.18); background: linear-gradient(90deg, transparent, rgba(0, 150, 190, 0.045), transparent); box-shadow: none; } @media (min-width: 992px) { .site-body .homepage-why .why-pillar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-body .homepage-why .why-pillar { min-height: 310px; } } @media (max-width: 767px) { .site-body .homepage-why .why-trust-bottom { padding-block: 20px; } } .site-footer .footer-contact-icon { display: none; } @media (max-width: 767px) { .site-body .site-footer { padding-block: 36px 84px; background: radial-gradient(ellipse at 10% 0%, rgba(0, 212, 255, 0.065), transparent 60%), linear-gradient(180deg, rgba(3, 16, 31, 0.8), rgba(2, 11, 22, 0.92)); } .site-footer .footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; margin: 0; } .site-footer .footer-grid > * { width: auto; min-width: 0; padding: 0; margin-top: 0; } .site-footer .footer-brand-block, .site-footer .footer-contact-block { grid-column: 1 / -1; } .site-footer .footer-brand { width: 200px; max-width: 100%; margin-bottom: 10px; } .site-body .site-footer .footer-logo-frame { width: 180px; max-width: 180px; } .site-body .site-footer .footer-logo-frame .site-logo { max-height: 64px; } .site-footer .footer-brand-block > p { margin: 0 0 8px; color: var(--text-soft); font-size: 0.92rem; line-height: 1.85; } .site-footer .footer-status { margin: 0; font-size: 0.82rem; font-weight: 600; line-height: 1.75; } .site-footer h3 { margin-bottom: 8px; font-size: 1rem; } .site-footer .footer-links { gap: 2px; } .site-footer .footer-links a { min-height: 44px; align-items: center; padding-block: 6px; font-size: 0.88rem; line-height: 1.65; overflow-wrap: break-word; } .site-footer .footer-links a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; } .site-footer .footer-contact-block { padding-top: 18px; border-top: 1px solid var(--border); } .site-footer .footer-contact-block .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .site-footer .footer-contact-block a { display: flex; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(0, 212, 255, 0.035); } .site-footer .footer-contact-icon { display: inline-block; flex-shrink: 0; color: var(--turquoise); font-size: 1rem; } .site-footer .footer-bottom { align-items: center; text-align: center; margin-top: 20px; padding-top: 14px; gap: 4px; font-size: 0.78rem; line-height: 1.7; } html[data-theme="light"] .site-body .site-footer { background: radial-gradient(ellipse at 10% 0%, rgba(0, 157, 194, 0.065), transparent 60%), linear-gradient(180deg, #f9fdfe, #eaf5f8); } html[data-theme="light"] .site-body .footer-contact-block { border-color: rgba(0, 157, 194, 0.16); } html[data-theme="light"] .site-body .footer-contact-block a { border-color: rgba(0, 157, 194, 0.18); background: rgba(255, 255, 255, 0.6); } html[data-theme="light"] .site-body .footer-contact-icon { color: #007b98; } } @media (min-width: 992px) { .home-services-track > .col-lg-4:last-child:nth-child(3n + 1), .solutions-story .solution-service-column:last-child:nth-child(3n + 1) { margin-inline: auto; } }