@font-face {font-family:"Inter";font-style:normal;font-weight:100 900;font-display:optional;src:url("/assets/fonts/inter-latin.woff2") format("woff2");} @font-face {font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:optional;src:url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");} * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-body, Arial, sans-serif); } .landing-media { width: 70vw; height: 70vh; max-width: 100%; max-height: 100%; object-fit: contain; display: block; margin: 0 auto; background: transparent; } html { scroll-behavior: smooth; } body { background-color: white; color: white; overflow-x: hidden; } html.inner-page-view .navbar-container, body.inner-page-view .navbar-container, html.inner-page-view .sidebar, body.inner-page-view .sidebar { display: none !important; }  html.home-page-view .inner-page-dock, body.home-page-view .inner-page-dock { display: none !important; } header { position: sticky; top: 0; z-index: 1000; background: white; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .navbar { width: 80%; margin: 0 auto; display: flex; justify-content: space-between; } .logo { display: flex; align-items: center; gap: 10px; } .logo svg { width: 40px; height: 40px; } .logo p { color: #000000; font-weight: bold; } .nav-links { display: flex; align-items: center; gap: 25px; } .nav-links a { text-decoration: none; color: #000; font-weight: 500; } .toggle-btn { display: none; font-size: 30px; cursor: pointer; color: #000; } .sidebar { position: fixed; top: 0; right: -100%; width: 250px; height: 100vh; background: #fff; box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); padding: 70px 20px; transition: 0.3s ease; z-index: 999; } .sidebar.active { right: 0; } .sidebar a { display: block; margin: 20px 0; color: #000; text-decoration: none; font-weight: 500; } .inner-page-dock { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%) scale(1); width: fit-content; max-width: min(760px, calc(100% - 24px)); padding: 14px 12px 10px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(7, 18, 36, 0.92), rgba(14, 26, 48, 0.84)); backdrop-filter: blur(14px); border: 1px solid rgba(129, 140, 248, 0.2); border-radius: 20px; box-shadow: 0 18px 48px rgba(2, 8, 23, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05); z-index: 1400; opacity: 1; visibility: visible; pointer-events: auto; overflow: hidden; } .inner-page-dock::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(83, 114, 240, 0.08), rgba(56, 189, 248, 0.07), rgba(83, 114, 240, 0.05)); pointer-events: none; } @media (hover: hover) and (pointer: fine) { .inner-page-dock:hover, .inner-page-dock:focus-within { bottom: 16px; transform: translateX(-50%) translateY(-2px) scale(1); } } .inner-page-dock__label { display: none; } .inner-page-dock__links { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; } .inner-page-dock__links a { display: inline-flex; align-items: center; padding: 9px 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: #eaf2ff; text-decoration: none; font-size: 0.88rem; font-weight: 600; letter-spacing: -0.01em; transition: all 0.25s ease; } .inner-page-dock__links a:hover { background: linear-gradient(135deg, #5372F0, #38bdf8); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(83, 114, 240, 0.22); } .herosection{ background: #06192c; width: 100%; } .herosection .right-section { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; min-height: 600px; } .herosection .ai-visual-container { width: 100%; height: 100%; min-height: 600px; display: flex; align-items: center; justify-content: center; } .herosection .ai-icon { width: 100%; height: 100%; min-height: 600px; display: flex; align-items: center; justify-content: center; position: relative; } .herosection .big-foreground-circle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 85%; height: 70%; border: 6px solid rgba(102, 204, 255, 0.05); z-index: 2; pointer-events: none; overflow: hidden; background: transparent; display: flex; align-items: center; justify-content: center; } .herosection .big-foreground-circle .landing-media { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.2); width: 100%; height: 100%; object-fit: contain; display: block; background: transparent; pointer-events: auto; } .landing { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 95vh; padding: 50px 20px; position: relative; } .scroll-indicator { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); text-align: center; animation: fadeIn 1s ease-in-out; } .scroll-indicator .mouse { width: 24px; height: 40px; border: 2px solid #00bfff; border-radius: 14px; position: relative; margin: 0 auto; } .scroll-indicator .scroll-wheel { width: 8px; height: 8px; background: #00bfff; border-radius: 50%; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); animation: scrollAnim 2s infinite; } .scroll-indicator p { font-size: 14px; color: #00bfff; margin-top: 8px; } @keyframes scrollAnim { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 50% { opacity: 0.5; transform: translateX(-50%) translateY(8px); } 100% { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes fadeIn { from { opacity: 0; bottom: 0; } to { opacity: 1; bottom: 20px; } } .landing-content h1 { font-size: 2.8rem; font-weight: 700; } .landing-content h1 span { color: #4cc8ff; } .landing-content p { margin-top: 20px; max-width: 500px; color: #ccc; } .buttons { margin-top: 30px; display: flex; gap: 15px; } .buttons a { padding: 12px 20px; border-radius: 25px; text-decoration: none; font-weight: 600; transition: 0.3s; } .buttons a:first-child { background: #4cc8ff; color: #000; } .buttons a:last-child { border: 2px solid #4cc8ff; color: #4cc8ff; } .icon-core { width: 160px; height: 160px; animation: float 6s ease-in-out infinite; z-index: 2; } .float-circle { position: absolute; border-radius: 50%; background-color: rgba(102, 204, 255, 0.2); animation: float 6s ease-in-out infinite; z-index: 20; } .top-right { top: 0; right: 0; width: 64px; height: 64px; } .bottom-left { bottom: 40px; left: 0; width: 48px; height: 48px; } .mid-left { top: 80px; left: 40px; width: 32px; height: 32px; }  .top-center { top: 20px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; } .center-right { top: 50%; right: 20px; transform: translateY(-50%); width: 36px; height: 36px; } .center-left { top: 50%; left: 20px; transform: translateY(-50%); width: 28px; height: 28px; } .mid-right { top: 60px; right: 60px; width: 24px; height: 24px; } .bottom-center { bottom: 20px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; } .top-left { top: 40px; left: 20px; width: 20px; height: 20px; } .far-right { top: 30px; right: 10px; width: 16px; height: 16px; } .far-left { bottom: 60px; left: 10px; width: 18px; height: 18px; } .delay-1 { animation-delay: 0.5s; } .delay-2 { animation-delay: 1s; } .delay-3 { animation-delay: 1.5s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .about-section { padding: 60px 20px; background: #fff; } .section-title { color: #000; text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 10px; position: relative; } .section-subtitle.about { color: #000; text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 30px; position: relative; } .section-subtitle { text-align: center; font-size: 14px; margin-bottom: 40px; color: #555; position: relative; } .section-subtitle::after { content: ""; width: 60px; height: 3px; background: #00bfff; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); } .about-content { display: flex; flex-wrap: wrap; gap: 80px; align-items: center; justify-content: center; } .about-image img { width: 300px; height: 300px; background: linear-gradient(to bottom right, #1e3a8a, #00bfff); border-radius: 10px; padding: 20px; } .about-text { max-width: 600px; text-align: start; } .about-text h3 { color: #000; font-size: 18px; font-weight: 700; margin-bottom: 12px; } .about-text p { font-size: 15px; line-height: 1.65; color: #444; margin-bottom: 18px; max-width: 62ch; } .about-intro { font-size: 1rem; line-height: 1.75; color: #334155; margin-bottom: 16px; } .about-value-points { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .about-value-points span { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; background: #eaf4ff; color: #1d4ed8; font-size: 0.88rem; font-weight: 600; } .about-icon { display: flex; align-items: center; border-radius: 50%; justify-content: center; width: 40px; height: 40px; background: rgba(128, 128, 128, 0.143); color: #00bfff; } .about-icontext { display: flex; gap: 6px; align-items: center; } .features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; } .feature-box { background: #f5f5f5; padding: 15px 20px; border-radius: 8px; display: flex; flex-direction: column; gap: 15px; align-items: flex-start; flex: 1 1 250px; } .feature-box .icon { font-size: 24px; color: #00bfff; } .feature-box h4 { color: #000; font-size: 16px; font-weight: 600; margin-bottom: 5px; } .feature-box p { font-size: 14px; color: #666; text-align: start; } .tags { display: flex; flex-wrap: wrap; gap: 10px; } .tags span { background: #e0e0e0; color: #333; padding: 5px 12px; font-size: 14px; border-radius: 20px; } .services-section { padding: 60px 20px; background: #f8f9fb; font-family: var(--font-body, Arial, sans-serif); } .services-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; } .service-box { background: white; padding: 25px 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); border-top: #00bfff solid 8px; transition: 0.3s ease; width: calc((100% - 90px) / 4);  max-width: 100%;  text-align: left; } .service-icon i { font-size: 30px; } .service-box:hover { transform: translateY(-5px); } .service-box h3 { color: #000; font-size: 18px; font-weight: 600; margin-top: 15px; margin-bottom: 10px; } .service-box p { font-size: 14px; color: #666; margin-bottom: 10px; } .service-box ul { list-style: none; padding-left: 0; } .service-box ul li { font-size: 14px; color: #333; padding: 5px 0; } .service-icon { display: flex; align-items: center; border-radius: 8px; justify-content: center; width: 60px; height: 60px; background: rgba(128, 128, 128, 0.143); color: #00bfff; } .placeholder { border: 2px dashed #ccc; background: transparent; text-align: center; color: #888; display: flex; flex-direction: column; align-items: center; justify-content: center; } .placeholder .plus { font-size: 36px; color: #bbb; margin-bottom: 10px; } .contact-container { background: fffff; max-width: 1000px; margin: 0 auto; padding: 40px 20px; } .contact-section { padding: 60px 20px; font-family: var(--font-body, Arial, sans-serif); background-color: #f9f9f9; } .contact-box { display: flex; flex-wrap: wrap; background: white; border-radius: 12px; overflow: hidden; text-align: start; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); }  .contact-info { background: linear-gradient(135deg, #0d1b2a, #1b263b); color: white; padding: 40px; flex: 1; min-width: 300px; } .contact-info h3 { margin-bottom: 25px; font-size: 1.5rem; } .contact-info ul { list-style: none; padding: 0; margin: 0; } .contact-info li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 25px; } .contact-icon { display: flex; justify-content: center; align-items: center; background: rgba(128, 128, 128, 0.305); height: 40px; width: 40px; border-radius: 50%; font-size: 1.3rem; color: #00bfff; } .contact-info small { font-size: 0.75rem; color: #ccc; } .contact-info p { margin: 3px 0 0; font-size: 0.95rem; color: white; } .social-icons { margin-top: 30px; } .social-icons span { display: block; margin-bottom: 10px; } .social-icons .icons a { display: inline-block; background-color: rgba(255, 255, 255, 0.1); color: white; height: 40px; width: 40px; margin-right: 10px; font-size: 1rem; padding: 10px; border-radius: 50%; transition: 0.3s; } .social-icons .icons a:hover { background-color: #00bfff; color: #0d1b2a; }  .contact-form { flex: 1; min-width: 300px; padding: 40px; background: white; } .contact-form h3 { font-size: 1.5rem; margin-bottom: 20px; color: #111; } .contact-form form { display: flex; flex-direction: column; gap: 15px; } .contact-form input, .contact-form textarea { padding: 12px 15px; border-radius: 6px; border: 1px solid #ddd; font-size: 0.95rem; outline: none; } .contact-form button { background-color: #0d1b2a; color: white; font-weight: 600; padding: 12px; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s ease; } .contact-form button:hover { background-color: #00bfff; color: #0d1b2a; } .footer { background-color: #0d1b2a; color: #fff; padding: 40px 20px 20px; font-family: var(--font-body, Arial, sans-serif); } .footer-container { max-width: 1400px; margin: 0 auto; } .footer-left { display: flex; flex-direction: column; align-items: flex-start; } .footer-logo { display: flex; align-items: center; gap: 10px; } .footer-logo svg { width: 40px; height: 40px; } .footer-logo p { color: #ffffff; font-weight: bold; } .footer-subtext { margin-top: 5px; font-size: 14px; color: gray; } .footer-social { margin-top: 20px; display: flex; gap: 15px; } .footer-social a { color: #fff; background-color: #1e2d3d; padding: 8px; border-radius: 50%; font-size: 16px; transition: background 0.3s; } .footer-social a:hover { background-color: #00bfff; color: #0d1b2a; } .footer-top { display: flex; justify-content: space-between; } .footer-bottom { margin-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 15px; display: flex; flex-direction: row; justify-content: space-between; gap: 10px; font-size: 13px; color: #c2c2c2; } .footer-links { display: flex; gap: 20px; flex-wrap: wrap; } .footer-links a { color: #c2c2c2; text-decoration: none; } .footer-links a:hover { text-decoration: underline; }  .social { display: flex; gap: 8px; } .social-icon { display: flex; justify-content: center; align-items: center; color: white; background: rgba(128, 128, 128, 0.309); height: 40px; width: 40px; border-radius: 50%; } .social-icon a { text-decoration: none; color: white; } .container { background: fffff; max-width: 1400px; margin: 0 auto; padding: 40px 20px; } .nav-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; background: #f5f5f5; padding: 6px 12px; border-radius: 12px; width: fit-content; margin-left: auto; margin-right: auto; } .nav-tabs .nav-link { border: none; padding: 8px 20px; font-weight: 600; border-radius: 12px; background: transparent; color: #333; cursor: pointer; transition: 0.3s ease; } .nav-tabs li { list-style: none; } .nav-tabs .nav-link:hover { background: rgba(0, 0, 0, 0.05); } .nav-tabs .nav-link.active { background-color: #111; color: #fff; }   .results-container { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 10px; } .result-metric { background-color: #e6f3ff;  border-radius: 8px; padding: 15px; flex: 1; min-width: 120px; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .metric-value { font-size: 24px; font-weight: 700; color: #1e90ff;  margin-bottom: 5px; } .metric-label { font-size: 14px; color: #333; line-height: 1.2; }  .tech-badge { display: inline-block; background-color: #dbeafe;  color: #1e40af;  font-size: 12px;  font-weight: 500;  padding: 2px 8px;  border-radius: 12px;  margin-right: 8px;  margin-bottom: 4px; } .dark .tech-badge { background-color: #1e3a8a;  color: #93c5fd;  }  .portfolio-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-height: 580px; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: #00bfff transparent; } .portfolio-container::-webkit-scrollbar { width: 6px; } .portfolio-container::-webkit-scrollbar-thumb { background-color: #00bfff; border-radius: 10px; } .portfolio-item { flex: 1 1 calc(25% - 20px); max-width: calc(25% - 20px); min-width: 220px; box-sizing: border-box; } .portfolio-card { background-color: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; height: auto; min-height: 280px; transition: transform 0.3s ease; position: relative; } .portfolio-card:hover { transform: translateY(-5px); } .card-body { height: 170px; display: flex; justify-content: center; align-items: center; position: relative; padding: 12px 12px 6px; background: #f8fbff; flex: 0 0 auto; } .card-image { width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 8px; display: block; } .icon { font-size: 42px; color: white; } .hover-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); color: white; opacity: 0; transition: 0.4s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 10px; padding: 20px; transform: translateY(-15%); z-index: 3; } .portfolio-card:hover .hover-overlay { opacity: 1; } .portfolio-card:hover .card-footer { opacity: 0; } .hover-overlay h5 { font-size: 18px; font-weight: 600; margin-bottom: 10px; } .hover-overlay p { font-size: 14px; margin-bottom: 15px; } .hover-overlay .btn { background-color: #0d6efd; border: none; padding: 6px 14px; border-radius: 6px; color: white; font-size: 14px; text-decoration: none; cursor: pointer; } .hover-overlay .btn:hover { background-color: #004aad; } .card-footer { position: relative; bottom: auto; width: 100%; padding: 12px 16px 16px; background: #fff; z-index: 1; transition: opacity 0.25s ease; } .card-title { font-size: 16px; font-weight: 600; color: #111; margin-bottom: 4px; } .card-subtitle{ font-size: 14px; font-weight: 400; color: #302e2e; margin-bottom: 6px; } .card-text { font-size: 14px; color: #666; margin: 0; }  .gradient-1 { background: linear-gradient(135deg, #1e3c72, #2a5298); } .gradient-2 { background: linear-gradient(135deg, #7b4397, #dc2430); } .gradient-3 { background: linear-gradient(135deg, #00c6ff, #0072ff); } .gradient-4 { background: linear-gradient(135deg, #1d2671, #c33764); } .gradient-5 { background: linear-gradient(135deg, #56ab2f, #a8e063); } .gradient-6 { background: linear-gradient(135deg, #614385, #516395); } .gradient-7 { background: linear-gradient(135deg, #ff4b1f, #1fddff); } .gradient-8 { background: linear-gradient(135deg, #8e2de2, #4a00e0); } .gradient-9 { background: linear-gradient(135deg, #43cea2, #185a9d); }  .modal { visibility: hidden; opacity: 0; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(37, 37, 37, 0.7); transition: all .4s; z-index: 1000; } .modal__content { max-height: 600px; overflow-y: scroll; background: #fff; padding: 2em; max-width: 700px; width: 90%; position: relative; border-radius: 8px; } .modal__content h3 { color: #000; font-size: 20px; margin-bottom: 10px; } .modal__content h4 { color: #000; font-size: 20px; margin-top: 20px; margin-bottom: 10px; } .modal__content p { color: #000; font-size: 14px; margin-bottom: 20px; } .modal__content ul { list-style-type: disc; padding-left: 20px; } .modal__content li { font-size: 14px; color: #333; margin-bottom: 5px; } .modal__footer { text-align: right; margin-top: 20px; } .modelclose{ display: flex; justify-content: space-between; } .close-btn{ height: 100%; padding: 4px 10px; font-size: 20px; font-weight: 200; background: rgba(128, 128, 128, 0.241); border: none; border-radius: 20%; display: flex; align-items: center; justify-content: center; }  .nav-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; list-style: none; padding: 0; } .nav-link { background: #f1f1f1; border: none; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 14px; transition: background 0.3s; } .nav-link.active, .nav-link:hover { background: #0d6efd; color: white; } .section-title { text-align: center; font-size: 32px; font-weight: 700; margin-bottom: 10px; } .section-subtitle { text-align: center; font-size: 16px; color: #666; margin-bottom: 40px; } .swiper-button-next:after, .swiper-button-prev:after{ font-size: 15px !important; background: #b1bcc0; color: black; border-radius: 10px; padding: 15px 15px; } .blog-content{ font-size: 15px; color: black; } @media (max-width: 992px) { .portfolio-item { flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px); } } @media (max-width: 576px) { .portfolio-item { flex: 1 1 100%; max-width: 100%; } .footer-top ,.footer-bottom{ display: flex; gap: 10px; justify-content: center; flex-direction: column; align-items: center; } } @media (max-width: 768px) { .dots { width: 93% !important; } .services-section { padding: 30px 10px; } .ai-visual-container { position: relative; width: 100%; } .contact-container { padding: 40px 0px; } .section-title { font-size: 22px; font-weight: 600; } .section-subtitle { font-size: 12px; } .modal__content { max-height: 500px; overflow: scroll; } .about-section{ padding: 43px 20px; } .nav-tabs { gap: 0px !important; padding: 2px; } .container { padding: 20px 10px !important; } .about-content{ gap: 30px; } .nav-link { padding: 8px !important; } .contact-info,.contact-form{ padding: 20px; } .contact-info h3{ font-size: 20px; } .contact-section{ padding: 15px; } .footer-container { display: flex; flex-direction: column; } .footer-left, .footer-social, .footer-bottom { flex-direction: column; } .footer-links { flex-direction: column !important; font-size: 12px; text-align: center; gap: 10px; } .footer-left { flex: 1; } .footer-social { margin-top: 0; } .navbar { width: 95%; margin: 0 auto; } .nav-links { display: none; } .toggle-btn { display: block; } .landing { padding: 10px 20px; grid-template-columns: 1fr; text-align: start; } .landing-content h1 { font-size: 2rem; } } @media (max-width: 1200px) { .service-box { width: calc((100% - 60px) / 3); } } @media (max-width: 992px) { .service-box { width: calc((100% - 30px) / 2); } } @media (max-width: 768px) { .services-grid { gap: 20px; } .service-box { width: calc((100% - 20px) / 2); padding: 20px 15px; } } @media (max-width: 600px) { .services-grid { gap: 15px; } .service-box { width: 100%; padding: 20px 15px; } .service-box h3 { font-size: 16px; } .service-box p { font-size: 13px; } .service-box ul li { font-size: 13px; } } #testimonial{ background: #f8f9fb; padding: 30px 0; } .testim { width: 100%; max-width: 1100px; margin: auto; position: relative; } .arrow { position: absolute; top: 60%; transform: translateY(-50%); color: gray; font-size: 2rem; cursor: pointer; z-index: 10; } .arrow:hover { color: #ea830e; } .left { left: 10px; } .right { right: 10px; } .dots { text-align: center; position: absolute; bottom: 20px; width: 100%; z-index: 10; } .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #848181; margin: 0 6px; cursor: pointer; } .dot.active, .dot:hover { background: #ea830e; border-color: #ea830e; } .cont { position: relative; overflow: hidden; min-height: 300px; padding: 20px; } .slide { position: absolute; top: 0; left: 0; width: 100%; text-align: center; opacity: 0; transform: translateY(50px); transition: opacity 0.5s, transform 0.5s; padding-bottom: 70px; } .slide.active { position: relative; opacity: 1; transform: translateY(0); } .slide h2 { color: #000; margin-top: 10px; font-size: 1.3rem; } .slide p { color: #333; font-size: 1rem; padding: 0 15px; word-break: break-word; } .img img { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto; display: block; object-fit: cover; } .stars { color: #ea830e; margin: 10px 0; } @media (max-width: 600px) { .testim { padding: 30px 10px; } .arrow { font-size: 1.5rem; padding: 5px; } .slide h2 { font-size: 1.1rem; } .slide p { font-size: 0.95rem; padding: 0 10px; text-align: center; } .img img { width: 80px; height: 80px; } }  .bubble-bottom-right-page { position: fixed; right: 30px; bottom: 30px; width: 60px; height: 60px; border-radius: 50%; background: rgba(102, 204, 255, 0.18); z-index: 20; animation: float 7s ease-in-out infinite; } .bubble-near-box { position: absolute; left: 60%; top: 80%; width: 36px; height: 36px; border-radius: 50%; background: rgba(102, 204, 255, 0.22); z-index: 20; animation: float 5s ease-in-out infinite; }  :root { --bg-deep: #071224; --bg-mid: #0d1f3a; --surface: rgba(255, 255, 255, 0.92); --surface-strong: #ffffff; --accent: #38bdf8; --accent-2: #8b5cf6; --text-main: #0f172a; --text-soft: #5f6f87; --shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.08); --shadow-strong: 0 24px 70px rgba(8, 18, 36, 0.22); } body { color: var(--text-main); background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 0 32%), radial-gradient(circle at top right, rgba(139, 92, 246, 0.10), transparent 0 26%), linear-gradient(180deg, #f8fbff 0%, #eff5ff 100%); } body.menu-open { overflow: hidden; } .navbar-container { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(148, 163, 184, 0.16); transition: all 0.25s ease; } .navbar-container.scrolled { box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08); } header { padding: 14px 20px; box-shadow: none; } .navbar { width: min(1180px, 92%); align-items: center; } .logo p { font-size: 1.02rem; letter-spacing: 0.01em; } .nav-links { gap: 14px; } .nav-links a { padding: 10px 14px; border-radius: 999px; transition: all 0.25s ease; position: relative; } .nav-links a:hover { color: #06192c; background: rgba(56, 189, 248, 0.10); } .nav-links .nav-cta, .sidebar .nav-cta { background: linear-gradient(135deg, var(--accent), #2563eb); color: #fff; box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28); } .nav-links .nav-cta:hover, .sidebar .nav-cta:hover { color: #fff; transform: translateY(-1px); background: linear-gradient(135deg, #0ea5e9, #1d4ed8); } .sidebar { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(14px); } .sidebar a { padding: 12px 14px; border-radius: 12px; } .sidebar a:hover { background: rgba(56, 189, 248, 0.10); } .herosection { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--bg-deep) 0%, #0b2342 55%, #132c54 100%); } .herosection::before { content: ""; position: absolute; left: -5%; bottom: 8%; width: 280px; height: 280px; border-radius: 50%; background: rgba(56, 189, 248, 0.18); filter: blur(30px); } .herosection::after { content: ""; position: absolute; right: 4%; top: 8%; width: 220px; height: 220px; border-radius: 50%; background: rgba(139, 92, 246, 0.16); filter: blur(28px); } .landing { min-height: calc(100vh - 82px); gap: 40px; padding: 54px 20px 72px; } .landing-content { position: relative; z-index: 2; } .hero-eyebrow { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid rgba(125, 211, 252, 0.28); background: rgba(56, 189, 248, 0.12); color: #d8f4ff; border-radius: 999px; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.03em; } .landing-content h1 { font-size: clamp(2.5rem, 4.6vw, 4.35rem); line-height: 1.05; letter-spacing: -0.03em; max-width: 12ch; margin-top: 16px; color: #f8fbff; text-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); } .landing-content h1 span { color: #38bdf8; } .landing-content h1 br + span, .landing-content h1 span[style] { color: #38bdf8 !important; } .landing-content .hero-description { margin-top: 18px; max-width: 620px; font-size: 1.08rem; font-weight: 400; line-height: 1.8; color: rgba(226, 232, 240, 0.92); } .landing-content .hero-description p, .landing-content .hero-description span { color: inherit; } .hero-highlights { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .hero-highlights span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.10); color: #eff6ff; border: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.92rem; } .buttons { margin-top: 28px; flex-wrap: wrap; } .buttons a { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .buttons .btn-primary { background: linear-gradient(135deg, #38bdf8, #2563eb); color: #fff; } .buttons .btn-secondary { border: 1.5px solid rgba(125, 211, 252, 0.42); background: rgba(255, 255, 255, 0.05); color: #fff; } .buttons a:hover { transform: translateY(-2px); } .hero-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; max-width: 760px; } .trust-item { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.10); padding: 14px 15px; border-radius: 16px; backdrop-filter: blur(12px); } .trust-item strong { display: block; color: #fff; font-size: 0.95rem; margin-bottom: 4px; } .trust-item span { color: #d7e6f7; font-size: 0.86rem; line-height: 1.5; } .herosection .right-section, .herosection .ai-visual-container, .herosection .ai-icon { min-height: 540px; } .herosection .big-foreground-circle { width: 90%; height: 76%; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.10); background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(56, 189, 248, 0.05)); box-shadow: var(--shadow-strong); } .herosection .big-foreground-circle .landing-media { transform: translate(-50%, -50%) scale(1.08); } .about-section, .services-section, .contact-section, #testimonial, #blogsection, .portfolio-section { position: relative; } .container, .contact-container { max-width: 1180px; } .about-section { padding: 44px 20px 34px; background: transparent; } .section-title, .section-subtitle.about { color: var(--text-main); font-size: clamp(2rem, 3vw, 2.4rem); letter-spacing: -0.02em; } .section-subtitle { font-size: 1rem; color: var(--text-soft); max-width: 760px; margin: 0 auto 24px; } .section-subtitle::after { bottom: -12px; } .about-panel { background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.96)); border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 30px; padding: 20px; box-shadow: var(--shadow-soft); } .about-content { display: grid; grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); gap: 26px; align-items: center; } .about-image-column { display: flex; align-items: center; justify-content: center; min-height: 100%; } .about-image { display: flex; justify-content: center; align-items: center; width: 100%; } .about-image img { width: 100%; max-width: 460px; height: 390px; object-fit: cover; object-position: 56% center; border-radius: 28px; padding: 8px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(56, 189, 248, 0.18)); border: 1px solid rgba(37, 99, 235, 0.12); box-shadow: 0 20px 55px rgba(15, 23, 42, 0.10); } .about-mini-note { display: none; } .about-text { background: transparent; border: none; border-radius: 0; padding: 4px 4px; box-shadow: none; max-width: none; } .about-kicker { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgba(56, 189, 248, 0.10); color: #1d4ed8; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; } .about-text h3 { font-size: 1.7rem; line-height: 1.18; margin: 12px 0 10px; } .about-text p { font-size: 0.97rem; line-height: 1.7; color: #475569; margin-bottom: 12px; max-width: 56ch; } .about-intro { font-size: 1rem; line-height: 1.72; color: #334155; margin-bottom: 6px; } .about-secondary { color: #526174; margin-bottom: 12px; } .about-value-points { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .about-value-points span { display: inline-flex; align-items: center; padding: 7px 10px; border-radius: 999px; background: #f8fbff; border: 1px solid rgba(59, 130, 246, 0.12); color: #334155; font-size: 0.82rem; font-weight: 600; } .feature-box { border-radius: 18px; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); border: 1px solid rgba(148, 163, 184, 0.16); padding: 12px 14px; gap: 8px; transition: transform 0.25s ease, box-shadow 0.25s ease; } .feature-box:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08); } .feature-box h4 { font-size: 0.95rem; } .feature-box p { font-size: 0.9rem; line-height: 1.55; margin-bottom: 0; } .tags { display: none; } .tags span { background: #e8f4ff; color: #1d4ed8; font-weight: 600; padding: 7px 14px; } .services-section { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(226, 238, 255, 0.38) 100%); } .services-grid { align-items: stretch; } .service-box { position: relative; overflow: hidden; border-top: none; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 20px; box-shadow: var(--shadow-soft); padding: 26px 20px; } .service-box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #38bdf8, #8b5cf6); } .service-box:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(15, 23, 42, 0.10); } .service-icon { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(139, 92, 246, 0.12)); } .nav-tabs { background: rgba(226, 232, 240, 0.66); border: 1px solid rgba(148, 163, 184, 0.18); padding: 8px; border-radius: 999px; } .nav-tabs .nav-link, .nav-link { border-radius: 999px; } .nav-tabs .nav-link.active, .nav-link.active, .nav-link:hover { background: linear-gradient(135deg, #0f172a, #1d4ed8); color: #fff; } .portfolio-section { padding: 56px 20px 90px !important; } .portfolio-card { min-height: 280px; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 22px; box-shadow: var(--shadow-soft); } .portfolio-card:hover { transform: translateY(-8px); box-shadow: 0 22px 50px rgba(15, 23, 42, 0.12); } .card-body { padding: 12px 12px 6px; } .card-footer { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), #ffffff); border-top: 1px solid rgba(148, 163, 184, 0.14); } .hover-overlay { background: linear-gradient(180deg, rgba(7, 18, 36, 0.2), rgba(7, 18, 36, 0.92)); transform: none; } .hover-overlay .btn { background: linear-gradient(135deg, #38bdf8, #2563eb); border-radius: 999px; padding: 10px 16px; } #blogsection { padding: 30px 0 70px; } .card-list .card-item .card-link { border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 20px; box-shadow: var(--shadow-soft); } .card-list .card-item .card-link:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(15, 23, 42, 0.10); border-color: rgba(56, 189, 248, 0.42); } #testimonial { background: linear-gradient(180deg, rgba(226, 238, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%); padding: 60px 0; } .wrap { background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 24px; padding: 18px; box-shadow: var(--shadow-soft); } .cont { min-height: 340px; } .slide { padding: 18px 30px 78px; } .testimonial-role { display: block; color: #64748b; font-size: 0.92rem; margin: 4px 0 12px; } .img img { border: 4px solid #fff; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12); } .contact-section { padding: 90px 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(226, 238, 255, 0.40) 100%); } .contact-box { border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 24px; box-shadow: var(--shadow-soft); } .contact-info { background: linear-gradient(135deg, #071224 0%, #12345f 100%); } .contact-form input, .contact-form textarea { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92)); border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 16px; padding: 14px 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 18px rgba(15, 23, 42, 0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: #94a3b8; } .contact-form input:focus, .contact-form textarea:focus { border-color: rgba(83, 114, 240, 0.42); background: #ffffff; box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.10), 0 14px 28px rgba(83, 114, 240, 0.08); transform: translateY(-1px); } .contact-form button, .contact-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; min-width: 180px; padding: 13px 22px; border: 1px solid rgba(129, 140, 248, 0.18); border-radius: 999px; background: linear-gradient(135deg, #0f172a 0%, #4338ca 55%, #06b6d4 100%); color: #fff; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 14px 34px rgba(79, 70, 229, 0.22); transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; } .contact-submit-btn i { font-size: 0.92rem; transition: transform 0.3s ease; } .contact-form button:hover, .contact-submit-btn:hover { background: linear-gradient(135deg, #1d4ed8, #06b6d4); color: #fff; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(79, 70, 229, 0.28); filter: brightness(1.05); } .contact-submit-btn:hover i { transform: translateX(2px) rotate(-8deg); } .contact-form button:disabled, .contact-submit-btn:disabled, .contact-submit-btn.is-loading { opacity: 0.9; cursor: wait; transform: none; } #toast { box-shadow: var(--shadow-soft); border-radius: 12px !important; } .logoMarqueeSection { background: transparent; padding-top: 0; } .default-content-container { min-height: 0; padding-top: 2rem; padding-bottom: 2rem; } .marqueelogo { max-width: 92px; max-height: 46px; width: auto; filter: grayscale(100%); opacity: 0.7; transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease; } .marqueelogo:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.05); } .footer { background: linear-gradient(135deg, #071224 0%, #0e213d 100%); padding-top: 50px; } .section-title { font-weight: 800; letter-spacing: -0.03em; } .service-box, .portfolio-card, .card-list .card-item .card-link, .contact-box, .wrap, .about-panel { box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07); } .service-box:hover, .portfolio-card:hover, .card-list .card-item .card-link:hover { box-shadow: 0 24px 60px rgba(15, 23, 42, 0.11); } .footer-bottom { margin-top: 24px; } @media (max-width: 991px) { .landing { grid-template-columns: 1fr; padding-top: 36px; } .landing-content h1 { max-width: none; } .hero-trust { grid-template-columns: 1fr; } .about-content { grid-template-columns: 1fr; } .about-image-column { order: -1; } .about-image img { height: 300px; max-width: 100%; } .features { grid-template-columns: 1fr; } .herosection .right-section, .herosection .ai-visual-container, .herosection .ai-icon { min-height: 380px; } .service-box { width: calc((100% - 30px) / 2); } } @media (max-width: 768px) { header { padding: 10px 12px; } .navbar { width: 96%; } .hero-eyebrow { font-size: 0.78rem; } .landing-content .hero-description { font-size: 0.98rem; } .hero-highlights { gap: 8px; } .hero-highlights span { font-size: 0.82rem; } .buttons a { width: 100%; justify-content: center; } .about-text { padding: 20px; } .wrap { padding: 10px; } .slide { padding: 10px 10px 70px; } .portfolio-card { height: auto; min-height: 300px; } }   :root { --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --font-display: "Space Grotesk", "Inter", sans-serif; --bg-void: #060c18; --bg-deep: #0a1628; --bg-page: #f8fafd; --bg-surface: #ffffff; --bg-elevated: #f1f5f9; --bg-subtle: #e8edf5; --accent: #6366f1; --accent-light: #818cf8; --accent-dark: #4f46e5; --accent-2: #06b6d4; --accent-glow: rgba(99, 102, 241, 0.35); --accent-2-glow: rgba(6, 182, 212, 0.25); --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text-inverse: #f1f5f9; --border-subtle: rgba(148, 163, 184, 0.14); --border-strong: rgba(148, 163, 184, 0.28); --glass: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.10); --glass-strong: rgba(255, 255, 255, 0.14); --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-full: 999px; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03); --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.05); --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.07); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.09); --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.12); --shadow-glow: 0 0 60px var(--accent-glow); --shadow-glow-sm: 0 0 30px var(--accent-glow); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); }  * { font-family: var(--font-body); } body { color: var(--text-primary); background: var(--bg-page); } body.menu-open { overflow: hidden; } html.inner-page-view .navbar-container, body.inner-page-view .navbar-container, html.inner-page-view .sidebar, body.inner-page-view .sidebar { display: none !important; }  html.home-page-view .inner-page-dock, body.home-page-view .inner-page-dock { display: none !important; }  body::after { content: ""; position: fixed; inset: 0; opacity: 0.018; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; }  .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .reveal.revealed { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.16s; } .reveal-delay-3 { transition-delay: 0.24s; } .reveal-delay-4 { transition-delay: 0.32s; } .reveal-delay-5 { transition-delay: 0.40s; }  ::-webkit-scrollbar { width: 7px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius: var(--radius-full); }  ::selection { background: rgba(99, 102, 241, 0.18); color: var(--text-primary); }  .navbar-container { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border-bottom: 1px solid var(--border-subtle); transition: all 0.35s var(--ease-out); } .navbar-container.scrolled { background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05); } header { padding: 10px 20px; box-shadow: none; } .navbar { width: min(1200px, 92%); align-items: center; } .logo p { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); } .nav-links { gap: 4px; } .nav-links a { font-family: var(--font-body); font-size: 0.88rem; font-weight: 500; padding: 8px 16px; border-radius: var(--radius-full); transition: all 0.25s var(--ease-out); color: var(--text-secondary); } .nav-links a:hover { color: var(--text-primary); background: rgba(99, 102, 241, 0.07); } .nav-links .nav-cta, .sidebar .nav-cta { background: var(--accent); color: #fff !important; font-weight: 600; padding: 8px 20px; box-shadow: 0 4px 18px var(--accent-glow); transition: all 0.3s var(--ease-out); } .nav-links .nav-cta:hover, .sidebar .nav-cta:hover { background: var(--accent-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 28px var(--accent-glow); } .sidebar { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: -8px 0 40px rgba(0, 0, 0, 0.06); } .sidebar a { font-family: var(--font-body); font-weight: 500; padding: 14px 18px; } .inner-page-dock { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%) scale(1); width: fit-content; max-width: min(760px, calc(100% - 24px)); padding: 14px 12px 10px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(7, 18, 36, 0.92), rgba(14, 26, 48, 0.84)); backdrop-filter: blur(20px) saturate(1.35); -webkit-backdrop-filter: blur(20px) saturate(1.35); border: 1px solid rgba(129, 140, 248, 0.2); border-radius: 20px; box-shadow: 0 18px 48px rgba(2, 8, 23, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05); z-index: 1400; opacity: 1; visibility: visible; pointer-events: auto; overflow: hidden; } .inner-page-dock::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(99, 102, 241, 0.08), rgba(6, 182, 212, 0.07), rgba(99, 102, 241, 0.05)); pointer-events: none; } @media (hover: hover) and (pointer: fine) { .inner-page-dock:hover, .inner-page-dock:focus-within { bottom: 16px; transform: translateX(-50%) translateY(-2px) scale(1); } } .inner-page-dock__label { display: none; } .inner-page-dock__links { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; } .inner-page-dock__links a { display: inline-flex; align-items: center; padding: 9px 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.09); color: #eaf2ff; text-decoration: none; font-size: 0.86rem; font-weight: 600; letter-spacing: -0.01em; transition: all 0.25s var(--ease-out); } .inner-page-dock__links a:hover { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(99, 102, 241, 0.28); } @media (max-width: 768px) { .inner-page-dock { width: calc(100% - 16px); bottom: 12px; border-radius: 16px; padding: 12px 10px 10px; justify-content: center; transform: translateX(-50%) translateY(0) scale(1); } .inner-page-dock__links { gap: 6px; justify-content: center; } .inner-page-dock__links a { padding: 7px 12px; font-size: 0.8rem; } } .sidebar a:hover { background: rgba(99, 102, 241, 0.07); color: var(--accent); }  .herosection { position: relative; overflow: hidden; background: linear-gradient(145deg, var(--bg-void) 0%, #0d1d3a 45%, #101e3a 100%); }  .herosection::before { content: ""; position: absolute; left: -8%; bottom: -15%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow), transparent 65%); filter: blur(100px); animation: orbFloat 10s ease-in-out infinite; z-index: 0; } .herosection::after { content: ""; position: absolute; right: -5%; top: -8%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, var(--accent-2-glow), transparent 65%); filter: blur(80px); animation: orbFloat 8s ease-in-out infinite reverse; z-index: 0; } @keyframes orbFloat { 0%, 100% { opacity: 0.5; transform: scale(1) translate(0, 0); } 33% { opacity: 0.8; transform: scale(1.1) translate(15px, -10px); } 66% { opacity: 0.6; transform: scale(1.05) translate(-10px, 15px); } } .landing { min-height: calc(100vh - 72px); gap: 32px; padding: 50px 20px 80px; } .landing-content { position: relative; z-index: 2; } .hero-eyebrow { display: none; } .hero-role-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .hero-role-tags span { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(129, 140, 248, 0.26); background: linear-gradient(135deg, rgba(15, 23, 42, 0.78), rgba(30, 41, 59, 0.62)); color: #eef2ff; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; backdrop-filter: blur(14px); box-shadow: 0 12px 30px rgba(79, 70, 229, 0.18); } .hero-role-tags span:nth-child(1) { border-color: rgba(56, 189, 248, 0.30); box-shadow: 0 12px 30px rgba(56, 189, 248, 0.14); } .hero-role-tags span:nth-child(2) { border-color: rgba(129, 140, 248, 0.34); box-shadow: 0 12px 30px rgba(129, 140, 248, 0.16); } .hero-role-tags span:nth-child(3) { border-color: rgba(45, 212, 191, 0.30); box-shadow: 0 12px 30px rgba(45, 212, 191, 0.14); } .hero-role-tags span:nth-child(4) { border-color: rgba(167, 139, 250, 0.34); box-shadow: 0 12px 30px rgba(167, 139, 250, 0.16); } .landing-content h1 { font-family: var(--font-display); font-size: clamp(3.1rem, 5.2vw, 5.25rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.055em; max-width: none; margin-top: 4px; color: #f8fbff; text-wrap: balance; text-shadow: 0 12px 34px rgba(15, 23, 42, 0.22); }  .landing-content h1 span, .landing-content h1 br + span, .landing-content h1 span[style] { background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .landing-content .hero-description { margin-top: 16px; max-width: 520px; font-size: 1.02rem; font-weight: 400; line-height: 1.65; color: rgba(203, 213, 225, 0.86); } .landing-content .hero-description p, .landing-content .hero-description span { color: inherit; }  .hero-highlights { display: none; } .hero-trust { display: none; } .buttons { margin-top: 36px; flex-wrap: wrap; } .buttons a { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border-radius: var(--radius-full); font-family: var(--font-body); font-weight: 600; font-size: 0.94rem; letter-spacing: -0.01em; transition: all 0.35s var(--ease-out); box-shadow: none; } .buttons .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 28px var(--accent-glow); } .buttons .btn-primary:hover { background: var(--accent-dark); transform: translateY(-3px); box-shadow: 0 14px 40px var(--accent-glow); } .buttons .btn-secondary { border: 1.5px solid rgba(255, 255, 255, 0.14); background: var(--glass); color: #e2e8f0; backdrop-filter: blur(12px); } .buttons .btn-secondary:hover { border-color: rgba(255, 255, 255, 0.28); background: var(--glass-strong); transform: translateY(-3px); }  .herosection .right-section, .herosection .ai-visual-container, .herosection .ai-icon { min-height: 480px; } .herosection .big-foreground-circle { width: 82%; height: 70%; border-radius: var(--radius-xl); border: 1px solid var(--glass-border); background: linear-gradient(160deg, var(--glass), rgba(99, 102, 241, 0.04)); box-shadow: var(--shadow-xl), 0 0 80px rgba(99, 102, 241, 0.08); } .herosection .big-foreground-circle .landing-media { transform: translate(-50%, -50%) scale(1.1); } .float-circle { background-color: rgba(99, 102, 241, 0.12); } .bubble-bottom-right-page { background: rgba(99, 102, 241, 0.08); } .bubble-near-box { background: rgba(99, 102, 241, 0.10); }  .section-title, .section-subtitle.about { font-family: var(--font-display); color: var(--text-primary); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; } .section-subtitle { font-family: var(--font-body); font-size: 1.02rem; color: var(--text-secondary); max-width: 560px; margin: 0 auto 36px; line-height: 1.7; } .section-subtitle::after { display: none; } .container, .contact-container { max-width: 1200px; }  .about-section { padding: 90px 20px 70px; background: transparent; } .about-panel { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 36px; box-shadow: var(--shadow-md); } .about-content { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 44px; align-items: center; } .about-image-column { display: flex; align-items: center; justify-content: center; } .about-image img { width: 100%; max-width: 400px; height: 400px; object-fit: cover; object-position: 56% center; border-radius: var(--radius-lg); padding: 0; background: none; border: none; box-shadow: var(--shadow-lg); transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); } .about-image img:hover { transform: scale(1.02) rotate(-0.5deg); box-shadow: var(--shadow-xl); } .about-mini-note { display: none; } .about-text { background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; max-width: none; } .about-kicker { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: var(--radius-full); background: rgba(99, 102, 241, 0.07); color: var(--accent); font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .about-text h3 { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; line-height: 1.22; letter-spacing: -0.025em; margin: 14px 0 14px; color: var(--text-primary); } .about-text p { font-size: 0.94rem; line-height: 1.72; color: var(--text-secondary); margin-bottom: 12px; max-width: 52ch; } .about-intro { font-size: 0.98rem; line-height: 1.75; color: #334155; margin-bottom: 6px; } .about-secondary { color: var(--text-secondary); margin-bottom: 14px; } .about-value-points { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .about-value-points span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full); background: rgba(99, 102, 241, 0.06); border: 1px solid rgba(99, 102, 241, 0.12); color: var(--accent); font-size: 0.82rem; font-weight: 600; transition: all 0.25s ease; } .about-value-points span:hover { background: rgba(99, 102, 241, 0.12); transform: translateY(-2px); } .features { gap: 12px; margin-bottom: 0; } .feature-box { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px 16px; gap: 10px; transition: all 0.3s var(--ease-out); } .feature-box:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: rgba(99, 102, 241, 0.18); background: var(--bg-surface); } .feature-box h4 { font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; color: var(--text-primary); } .feature-box p { font-size: 0.85rem; line-height: 1.55; color: var(--text-secondary); margin-bottom: 0; } .about-icon { background: rgba(99, 102, 241, 0.08); color: var(--accent); } .tags { display: none; }  .services-section { padding: 80px 20px; background: transparent; } .services-grid { align-items: stretch; } .service-box { position: relative; overflow: hidden; border-top: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-xs); padding: 28px 22px; transition: all 0.4s var(--ease-out); } .service-box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: 0; transition: opacity 0.35s ease; } .service-box:hover::before { opacity: 1; } .service-box:hover { transform: translateY(-8px); box-shadow: var(--shadow-md), var(--shadow-glow-sm); border-color: rgba(99, 102, 241, 0.12); } .service-icon { width: 52px; height: 52px; border-radius: var(--radius-sm); background: rgba(99, 102, 241, 0.07); color: var(--accent); } .service-box h3 { font-family: var(--font-display); color: var(--text-primary); } .service-box p { color: var(--text-secondary); } .service-box ul li { color: var(--text-secondary); } .service-box ul li i { color: var(--accent-2); }  .lead-faq-section { padding: 80px 20px; background: transparent; } .lead-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1000px; margin: 0 auto; } .lead-faq-item { border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-surface); box-shadow: var(--shadow-xs); overflow: hidden; } .lead-faq-item summary { cursor: pointer; list-style: none; padding: 18px 20px; font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--text-primary); } .lead-faq-item summary::-webkit-details-marker { display: none; } .lead-faq-item summary::after { content: "+"; float: right; margin-left: 16px; color: var(--accent); } .lead-faq-item[open] summary::after { content: "-"; } .lead-faq-item p { margin: 0; padding: 0 20px 20px; color: var(--text-secondary); font-size: 0.94rem; line-height: 1.72; } @media (max-width: 780px) { .lead-faq-grid { grid-template-columns: 1fr; } .lead-faq-item summary { padding: 16px 18px; } }  .portfolio-section { padding: 80px 20px !important; background: transparent !important; } .nav-tabs { background: var(--bg-elevated); border: 1px solid var(--border-subtle); padding: 5px; border-radius: var(--radius-full); } .nav-tabs .nav-link, .nav-link { border-radius: var(--radius-full); font-family: var(--font-body); font-size: 0.86rem; font-weight: 500; color: var(--text-secondary); transition: all 0.25s var(--ease-out); } .nav-tabs .nav-link.active, .nav-link.active, .nav-link:hover { background: var(--accent); color: #fff; } .portfolio-container { scrollbar-color: var(--accent) transparent; } .portfolio-container::-webkit-scrollbar-thumb { background-color: var(--accent); } .portfolio-card { min-height: 280px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-xs); transition: all 0.4s var(--ease-out); } .portfolio-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .card-body { padding: 14px 14px 6px; background: var(--bg-elevated); } .card-image { border-radius: var(--radius-sm); } .card-footer { background: var(--bg-surface); border-top: 1px solid var(--border-subtle); position: relative; z-index: 1; transition: opacity 0.25s ease; } .card-title { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); } .card-text { color: var(--text-secondary); } .hover-overlay { background: linear-gradient(180deg, rgba(6, 12, 24, 0.05) 0%, rgba(6, 12, 24, 0.92) 55%); transform: none; border-radius: var(--radius-lg); z-index: 3; gap: 10px; } .portfolio-card:hover .card-footer { opacity: 0; } .hover-overlay h5 { font-family: var(--font-display); } .hover-overlay .btn { background: var(--accent); border-radius: var(--radius-full); padding: 10px 22px; font-weight: 600; transition: all 0.25s ease; } .hover-overlay .btn:hover { background: var(--accent-dark); transform: scale(1.05); }  #blogsection { padding: 50px 0 80px; } .card-list .card-item .card-link { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-xs); transition: all 0.4s var(--ease-out); } .card-list .card-item .card-link:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(99, 102, 241, 0.2); } .card-list .card-link .badge { background: rgba(99, 102, 241, 0.08); color: var(--accent); font-weight: 600; } .card-list .card-link .card-button { background: var(--accent); border-radius: var(--radius-full); font-weight: 600; } .card-list .card-link .card-image { border-radius: var(--radius-sm); } .swiper-button-next:after, .swiper-button-prev:after { background: var(--bg-elevated); color: var(--text-primary); border-radius: var(--radius-sm); padding: 14px 14px; font-size: 14px !important; } .swiper-pagination-bullet { background: var(--accent); }  #testimonial { background: transparent; padding: 80px 0; } .wrap { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 36px; box-shadow: var(--shadow-md); } .cont { min-height: 320px; } .slide { padding: 20px 40px 80px; } .slide h2 { font-family: var(--font-display); color: var(--text-primary); font-size: 1.2rem; font-weight: 600; } .slide p { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.72; max-width: 600px; margin: 8px auto 0; font-style: italic; } .testimonial-role { display: block; color: var(--text-muted); font-size: 0.88rem; font-weight: 500; margin: 4px 0 10px; } .img img { border: 4px solid var(--bg-surface); box-shadow: var(--shadow-md); } .stars { color: #f59e0b; } .dot { width: 10px; height: 10px; border-color: var(--border-strong); } .dot.active, .dot:hover { background: var(--accent); border-color: var(--accent); } .arrow { color: var(--text-muted); } .arrow:hover { color: var(--accent); }  .logoMarqueeSection { background: transparent; padding: 0; } .default-content-container { min-height: 0; padding: 1.5rem 5rem; } .marqueelogo { max-width: 76px; max-height: 38px; width: auto; filter: grayscale(100%); opacity: 0.4; transition: all 0.35s var(--ease-out); } .marqueelogo:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.08); }  .contact-section { padding: 80px 20px; background: transparent; } .contact-box { border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-md); overflow: hidden; } .contact-info { background: linear-gradient(145deg, var(--bg-void) 0%, #0f2040 100%); position: relative; overflow: hidden; }  .contact-info::before { content: ""; position: absolute; bottom: -60px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 241, 0.25), transparent 70%); filter: blur(50px); pointer-events: none; } .contact-info h3 { font-family: var(--font-display); } .contact-icon { background: var(--glass-strong); color: var(--accent-light); } .social-icon { background: var(--glass); } .social-icon a { color: #e2e8f0; } .social-icons .icons a { background: var(--glass); transition: all 0.25s var(--ease-out); } .social-icons .icons a:hover { background: var(--accent); color: #fff; transform: translateY(-2px); } .contact-form h3 { font-family: var(--font-display); color: var(--text-primary); } .contact-form input, .contact-form textarea { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92)); border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 16px; font-family: var(--font-body); color: var(--text-primary); padding: 14px 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 18px rgba(15, 23, 42, 0.04); transition: all 0.25s var(--ease-out); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: #94a3b8; } .contact-form input:focus, .contact-form textarea:focus { border-color: rgba(99, 102, 241, 0.42); background: #ffffff; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.10), 0 14px 28px rgba(99, 102, 241, 0.08); outline: none; transform: translateY(-1px); } .contact-form button, .contact-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; min-width: 180px; padding: 13px 22px; border: 1px solid rgba(129, 140, 248, 0.18); border-radius: 999px; background: linear-gradient(135deg, #0f172a 0%, #4338ca 55%, #06b6d4 100%); color: #fff; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 14px 34px rgba(79, 70, 229, 0.22); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), filter 0.3s var(--ease-out); } .contact-submit-btn i { font-size: 0.92rem; transition: transform 0.3s var(--ease-out); } .contact-form button:hover, .contact-submit-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(79, 70, 229, 0.28); filter: brightness(1.05); } .contact-submit-btn:hover i { transform: translateX(2px) rotate(-8deg); } .contact-form button:disabled, .contact-submit-btn:disabled, .contact-submit-btn.is-loading { opacity: 0.9; cursor: wait; transform: none; }  .footer { background: linear-gradient(180deg, var(--bg-void) 0%, #040a14 100%); padding: 48px 20px 20px; border-top: 1px solid rgba(255, 255, 255, 0.04); } .footer-logo p { font-family: var(--font-display); color: #fff; } .footer-subtext { color: var(--text-muted); font-size: 0.88rem; } .footer-social a, .footer .social-icon { background: var(--glass); transition: all 0.25s var(--ease-out); } .footer-social a:hover, .footer .social-icon:hover { background: var(--accent); color: #fff; transform: translateY(-2px); } .footer-bottom { border-top-color: rgba(255, 255, 255, 0.05); color: var(--text-muted); margin-top: 28px; } .footer-links a { color: var(--text-muted); transition: color 0.2s ease; } .footer-links a:hover { color: var(--accent-light); text-decoration: none; }  .modal { background: rgba(6, 12, 24, 0.7); backdrop-filter: blur(8px); } .modal__content { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } .modal__content h3, .modal__content h4 { font-family: var(--font-display); } .close-btn { border-radius: var(--radius-xs); transition: all 0.2s ease; } .close-btn:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; } .result-metric { background: rgba(99, 102, 241, 0.06); border: 1px solid rgba(99, 102, 241, 0.12); border-radius: var(--radius-sm); } .metric-value { color: var(--accent); } .tech-badge { background: rgba(99, 102, 241, 0.08); color: var(--accent); border-radius: var(--radius-full); }  .modal-blogs { background: rgba(6, 12, 24, 0.7); backdrop-filter: blur(8px); } .modal-content { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }  .service-box, .portfolio-card, .card-list .card-item .card-link, .contact-box, .wrap, .about-panel { box-shadow: var(--shadow-sm); } .service-box:hover, .portfolio-card:hover, .card-list .card-item .card-link:hover { box-shadow: var(--shadow-lg); }  @media (max-width: 991px) { .landing { grid-template-columns: 1fr; padding: 32px 20px 60px; } .landing-content h1 { max-width: none; font-size: clamp(2.2rem, 5vw, 3.2rem); } .about-content { grid-template-columns: 1fr; } .about-image-column { order: -1; } .about-image img { height: 280px; max-width: 100%; } .features { grid-template-columns: 1fr; } .herosection .right-section, .herosection .ai-visual-container, .herosection .ai-icon { min-height: 340px; } .service-box { width: calc((100% - 30px) / 2); } .about-panel { padding: 20px; } } @media (max-width: 768px) { header { padding: 8px 12px; } .navbar { width: 96%; } .hero-eyebrow { font-size: 0.72rem; padding: 6px 14px; } .landing-content .hero-description { font-size: 0.96rem; } .buttons a { width: 100%; justify-content: center; padding: 14px 24px; } .about-section { padding: 50px 16px; } .about-panel { padding: 14px; } .about-text { padding: 10px; } .about-text h3 { font-size: 1.3rem; } .wrap { padding: 16px; } .slide { padding: 12px 12px 70px; } .slide p { font-size: 0.92rem; padding: 0 8px; } .portfolio-card { min-height: 260px; } .contact-section { padding: 40px 16px; } .services-section { padding: 40px 16px; } #testimonial { padding: 40px 0; } #blogsection { padding: 30px 0 50px; } .section-title, .section-subtitle.about { font-size: 1.6rem; } .default-content-container { padding: 1rem 2rem; } } @media (max-width: 576px) { .about-content { gap: 20px; } .about-image img { height: 240px; } .about-value-points { gap: 6px; } .about-value-points span { font-size: 0.78rem; padding: 5px 10px; } .feature-box { padding: 12px; } .landing { padding: 24px 16px 50px; } }  #toast { border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-md); font-family: var(--font-body); font-weight: 500; }   .skip-link { position: fixed; top: -60px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; text-decoration: none; z-index: 9999; transition: top 0.25s var(--ease-out); } .skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; }  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; border-radius: 6px; }  .scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: transparent; z-index: 2000; pointer-events: none; } .scroll-progress__bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px rgba(99, 102, 241, 0.35); transition: width 0.1s linear; }  .avail-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: var(--radius-full); background: rgba(16, 185, 129, 0.10); border: 1px solid rgba(16, 185, 129, 0.28); color: #059669; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } .avail-pill .dot-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #10b981; flex-shrink: 0; } .avail-pill .dot-pulse::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: #10b981; opacity: 0.4; animation: pulseDot 2s ease-out infinite; } @keyframes pulseDot { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(1.8); opacity: 0; } } .navbar .avail-pill { background: rgba(16, 185, 129, 0.08); } .avail-pill--dark { background: rgba(16, 185, 129, 0.14); border-color: rgba(52, 211, 153, 0.36); color: #6ee7b7; } .avail-pill--dark .dot-pulse { background: #34d399; } .avail-pill--dark .dot-pulse::after { background: #34d399; }  .hero-eyebrow { display: inline-flex !important; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: var(--radius-full); background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(129, 140, 248, 0.28); color: #c7d2fe; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; backdrop-filter: blur(14px); text-transform: uppercase; } .hero-eyebrow .dot-pulse { width: 8px; height: 8px; border-radius: 50%; background: #34d399; position: relative; } .hero-eyebrow .dot-pulse::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: #34d399; opacity: 0.4; animation: pulseDot 2s ease-out infinite; } .hero-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(148, 163, 184, 0.14); max-width: 540px; } .hero-stat { display: flex; flex-direction: column; gap: 2px; } .hero-stat__num { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.03em; color: #f8fbff; line-height: 1; } .hero-stat__num span { background: linear-gradient(135deg, var(--accent-light), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-stat__label { font-size: 0.78rem; color: rgba(203, 213, 225, 0.75); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }  .hero-scroll-hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(203, 213, 225, 0.6); font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; z-index: 2; pointer-events: none; } .hero-scroll-hint__mouse { width: 22px; height: 36px; border: 1.5px solid rgba(203, 213, 225, 0.45); border-radius: 12px; position: relative; } .hero-scroll-hint__mouse::after { content: ""; position: absolute; top: 6px; left: 50%; width: 3px; height: 6px; background: var(--accent-2); border-radius: 2px; transform: translateX(-50%); animation: scrollHint 2.2s ease-in-out infinite; } @keyframes scrollHint { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 12px); } } @media (max-width: 768px) { .hero-scroll-hint { display: none; } }  .section-eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .section-eyebrow::before, .section-eyebrow::after { content: ""; display: block; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.55)); } .section-eyebrow::after { background: linear-gradient(90deg, rgba(99, 102, 241, 0.55), transparent); }  .back-to-top { position: fixed; right: 20px; bottom: 20px; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; box-shadow: 0 10px 28px var(--accent-glow); opacity: 0; transform: translateY(14px); pointer-events: none; transition: all 0.35s var(--ease-out); z-index: 1200; font-size: 16px; } .back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { background: var(--accent-dark); transform: translateY(-3px); box-shadow: 0 14px 36px var(--accent-glow); }  html.inner-page-view .back-to-top, body.inner-page-view .back-to-top { right: 20px; bottom: 90px; }  .trust-bar__heading { text-align: center; font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 16px; }  .contact-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .contact-meta__item { display: flex; flex-direction: column; gap: 4px; } .contact-meta__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(203, 213, 225, 0.55); } .contact-meta__value { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: #eef2ff; }  .service-box { counter-increment: svc; } .services-grid { counter-reset: svc; } .service-box::after { content: counter(svc, decimal-leading-zero); position: absolute; top: 16px; right: 18px; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text-muted); opacity: 0.5; transition: all 0.3s ease; } .service-box:hover::after { color: var(--accent); opacity: 1; }  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }  .footer { background: linear-gradient(180deg, #071224 0%, #050d1c 100%); position: relative; overflow: hidden; } .footer::before { content: ""; position: absolute; top: -140px; left: 50%; width: 480px; height: 280px; transform: translateX(-50%); background: radial-gradient(circle, rgba(99, 102, 241, 0.18), transparent 70%); filter: blur(80px); pointer-events: none; } .footer-container { position: relative; } .footer-top { display: grid; grid-template-columns: minmax(240px, 1.2fr) repeat(2, minmax(160px, 1fr)) minmax(200px, 1.2fr); gap: 36px; align-items: flex-start; padding-bottom: 30px; } .footer-col .footer-heading { font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #e2e8f0; margin: 0 0 14px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col ul a { color: #94a3b8; text-decoration: none; font-size: 0.9rem; transition: color 0.25s ease, padding-left 0.25s ease; } .footer-col ul a:hover { color: #fff; padding-left: 4px; } .footer .footer-subtext { color: #94a3b8; max-width: 260px; font-size: 0.9rem; line-height: 1.6; } .footer .social { margin-top: 14px; gap: 10px; } .footer .social-icon { width: 38px; height: 38px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.25s var(--ease-out); } .footer .social-icon:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 22px var(--accent-glow); } .footer-bottom { color: #64748b; font-size: 0.82rem; } .footer-bottom p { margin: 0; } .footer-bottom a { color: #94a3b8; } .footer-bottom a:hover { color: #fff; } @media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; gap: 22px; } }  .about-panel { position: relative; overflow: hidden; } .about-panel::after { content: ""; position: absolute; top: -160px; right: -160px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 241, 0.08), transparent 70%); pointer-events: none; filter: blur(40px); }  @media (max-width: 768px) { .hero-stats { gap: 16px; padding-top: 20px; margin-top: 24px; } .hero-stat__num { font-size: 1.35rem; } .hero-stat__label { font-size: 0.7rem; letter-spacing: 0.04em; } .hero-eyebrow { font-size: 0.7rem; padding: 5px 10px 5px 8px; } .navbar .avail-pill { display: none; } }  .cta-banner { max-width: 1200px; margin: 40px auto 0; padding: 40px 36px; border-radius: var(--radius-xl); background: linear-gradient(135deg, #0b1a36 0%, #1e1b6b 55%, #0a3a4a 100%); color: #eef2ff; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); } .cta-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 280px at 90% 0%, rgba(6, 182, 212, 0.22), transparent 60%), radial-gradient(500px 260px at 0% 100%, rgba(99, 102, 241, 0.22), transparent 60%); pointer-events: none; } .cta-banner__text { position: relative; z-index: 1; } .cta-banner h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; color: #f8fafc; } .cta-banner p { margin: 0; color: rgba(203, 213, 225, 0.85); font-size: 0.96rem; max-width: 56ch; } .cta-banner__action { position: relative; z-index: 1; } .cta-banner__btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: var(--radius-full); background: #fff; color: #0f172a; text-decoration: none; font-weight: 700; font-size: 0.95rem; transition: all 0.3s var(--ease-out); box-shadow: 0 10px 30px rgba(0,0,0,0.25); } .cta-banner__btn:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); } @media (max-width: 720px) { .cta-banner { grid-template-columns: 1fr; padding: 28px 24px; text-align: left; } }  .section-title { font-size: clamp(2rem, 3.6vw, 2.8rem); } .section-title strong { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: inherit; }  #testimonial .wrap { position: relative; } #testimonial .wrap::before { content: "“"; position: absolute; top: 10px; left: 28px; font-family: Georgia, "Times New Roman", serif; font-size: 6rem; line-height: 1; color: rgba(99, 102, 241, 0.12); pointer-events: none; }  .portfolio-card .hover-overlay p { color: rgba(241, 245, 249, 0.88); }  .nav-tabs { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } .nav-tabs .nav-link.active { box-shadow: 0 8px 20px var(--accent-glow); }  .contact-info ul li p { font-size: 1rem; font-weight: 500; } .contact-info small { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; font-weight: 600; color: rgba(203, 213, 225, 0.6); }  .navbar-container { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.22) 20%, rgba(6, 182, 212, 0.22) 50%, rgba(99, 102, 241, 0.22) 80%, transparent 100%) 1; transition: background 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), padding 0.35s var(--ease-out); } .navbar-container.scrolled { background: rgba(255, 255, 255, 0.86); box-shadow: 0 1px 0 rgba(148, 163, 184, 0.12), 0 10px 30px rgba(15, 23, 42, 0.07); } .navbar-container header, .navbar-container > .navbar, .navbar-container {  } header { padding: 8px 24px; } .navbar { width: min(1240px, 94%); margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 24px; }  .logo { align-items: center; } .logo-link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 6px 8px 6px 6px; border-radius: var(--radius-full); transition: background 0.25s var(--ease-out); } .logo-link:hover { background: rgba(99, 102, 241, 0.06); } .logo-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%); box-shadow: 0 8px 20px rgba(99, 102, 241, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35); overflow: hidden; flex-shrink: 0; } .logo-mark::before { content: ""; position: absolute; inset: 1px; border-radius: 11px; background: linear-gradient(135deg, rgba(15, 23, 42, 0.0) 0%, rgba(15, 23, 42, 0.15) 100%); pointer-events: none; } .logo-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; } .logo-mark__initial { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: #fff; letter-spacing: -0.04em; position: relative; z-index: 1; } .logo-text { display: flex; flex-direction: column; line-height: 1.1; } .logo-text__name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); } .logo-text__role { font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }  .logo p { display: none; }  .nav-links { display: flex; align-items: center; gap: 2px; justify-content: center; padding: 4px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); width: fit-content; justify-self: center; } .nav-links a { position: relative; font-family: var(--font-body); font-size: 0.86rem; font-weight: 500; padding: 8px 14px; border-radius: var(--radius-full); color: var(--text-secondary); text-decoration: none; transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out); } .nav-links a:hover { color: var(--text-primary); background: rgba(99, 102, 241, 0.08); } .nav-links a.is-active { color: var(--text-primary); background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(6, 182, 212, 0.10)); box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.18), 0 6px 14px rgba(99, 102, 241, 0.12); }  .nav-actions { display: inline-flex; align-items: center; gap: 12px; justify-self: end; } .nav-actions .avail-pill { background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.30); } .nav-links .nav-cta, .nav-actions .nav-cta, .sidebar .nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 9px 20px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 60%, #0ea5e9 100%); background-size: 180% 180%; background-position: 0% 50%; color: #fff !important; font-weight: 600; font-size: 0.86rem; letter-spacing: -0.005em; box-shadow: 0 8px 22px rgba(99, 102, 241, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: background-position 0.5s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } .nav-links .nav-cta:hover, .nav-actions .nav-cta:hover, .sidebar .nav-cta:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(99, 102, 241, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .nav-actions .nav-cta i { font-size: 0.72rem; transition: transform 0.3s var(--ease-out); } .nav-actions .nav-cta:hover i { transform: translateX(3px); }  .toggle-btn { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(148, 163, 184, 0.2); color: var(--text-primary); cursor: pointer; transition: all 0.25s var(--ease-out); } .toggle-btn:hover { background: #fff; border-color: rgba(99, 102, 241, 0.24); color: var(--accent); } .toggle-btn .icon-bar { font-size: 22px; line-height: 1; }  @media (max-width: 960px) { .navbar { grid-template-columns: 1fr auto; column-gap: 10px; } .nav-links, .nav-actions { display: none; } .toggle-btn { display: inline-flex; } }  .sidebar { width: 280px; padding: 80px 18px 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 253, 0.98)); border-left: 1px solid rgba(148, 163, 184, 0.18); } .sidebar a { display: block; margin: 4px 0; padding: 12px 16px; border-radius: 12px; color: var(--text-secondary); font-weight: 500; transition: all 0.22s var(--ease-out); } .sidebar a:hover { background: rgba(99, 102, 241, 0.08); color: var(--accent); padding-left: 20px; } .sidebar .nav-cta { margin-top: 16px; justify-content: center; }   body { background-color: var(--bg-page); background-image: radial-gradient(900px 620px at 12% 6%, rgba(99, 102, 241, 0.06), transparent 60%), radial-gradient(840px 560px at 88% 28%, rgba(6, 182, 212, 0.05), transparent 60%), radial-gradient(760px 640px at 50% 100%, rgba(99, 102, 241, 0.045), transparent 62%); background-attachment: fixed; background-repeat: no-repeat; }  section[id] { scroll-margin-top: 88px; }  .section-eyebrow { margin-bottom: 12px; } .section-title { margin-top: 0; margin-bottom: 14px; }  .herosection .landing::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(148, 163, 184, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.055) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(circle at 32% 42%, #000, transparent 72%); mask-image: radial-gradient(circle at 32% 42%, #000, transparent 72%); pointer-events: none; z-index: 0; } .herosection .landing-content, .herosection .right-section { position: relative; z-index: 2; } .hero-role-tags span { transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); } .hero-role-tags span:hover { transform: translateY(-2px); }  .service-box, .portfolio-card, .card-list .card-item .card-link, .feature-box, .about-panel, .contact-box { transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out); } .service-box:hover, .portfolio-card:hover, .card-list .card-item .card-link:hover { border-color: rgba(99, 102, 241, 0.30); box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(99, 102, 241, 0.12), 0 0 36px rgba(99, 102, 241, 0.10); }  .lead-faq-item { transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); } .lead-faq-item[open] { border-color: rgba(99, 102, 241, 0.28); box-shadow: 0 10px 30px rgba(99, 102, 241, 0.08); } .lead-faq-item summary:hover { color: var(--accent); } .lead-faq-item[open] summary { color: var(--accent); } .lead-faq-item summary::after { font-size: 1.35rem; font-weight: 400; line-height: 1; transition: transform 0.3s var(--ease-spring), color 0.25s ease; }  .lead-faq-item[open] summary::after { content: "+"; transform: rotate(45deg); } .lead-faq-item[open] p { animation: faqReveal 0.35s var(--ease-out); } @keyframes faqReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }  .trust-bar__heading { margin-bottom: 10px; }  .buttons a:active, .nav-cta:active, .cta-banner__btn:active, .contact-submit-btn:active { transform: translateY(-1px) scale(0.99); }   .process-section { padding: 84px 20px; background: transparent; } .process-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 10px; }  .process-grid::before { content: ""; position: absolute; top: 60px; left: 13%; right: 13%; height: 2px; background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.40), rgba(6, 182, 212, 0.40), transparent); z-index: 0; } .process-step { position: relative; z-index: 1; text-align: center; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 30px 22px 26px; box-shadow: var(--shadow-sm); transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out); } .process-step:hover { transform: translateY(-6px); border-color: rgba(99, 102, 241, 0.28); box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(99, 102, 241, 0.10); } .process-step__index { position: absolute; top: 14px; right: 16px; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); opacity: 0.5; } .process-step__icon { width: 60px; height: 60px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 16px; font-size: 1.4rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 12px 26px rgba(99, 102, 241, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .process-step__title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 8px; } .process-step__desc { font-size: 0.9rem; line-height: 1.62; color: var(--text-secondary); margin: 0; } @media (max-width: 860px) { .process-section { padding: 52px 16px; } .process-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .process-grid::before { display: none; } } @media (max-width: 520px) { .process-grid { grid-template-columns: 1fr; } }  .service-box .service-icon { transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); } .service-box:hover .service-icon { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(99, 102, 241, 0.28); } .service-box ul li i { color: var(--accent-2); }  .closing-cta { padding: 28px 20px 4px; } .closing-cta .cta-banner { margin: 0 auto; } .cta-banner__btn i { transition: transform 0.3s var(--ease-out); } .cta-banner__btn:hover i { transform: translateX(3px); } @media (max-width: 720px) { .closing-cta { padding: 12px 16px 0; } }  @media (max-width: 768px) { .about-section { padding: 44px 16px; } .portfolio-section { padding: 44px 16px !important; } .section-subtitle { margin-bottom: 26px; } }  #faq.lead-faq-section { display: none; }  .modal { background: rgba(6, 12, 24, 0.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .modal__content { position: relative; width: min(720px, 92vw); max-width: 720px; max-height: none; padding: 0; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 24px; box-shadow: 0 40px 100px rgba(2, 8, 23, 0.55); } .modal.is-open .modal__content { animation: projModalPop 0.42s var(--ease-out); } @keyframes projModalPop { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } } #modalContent { max-height: 86vh; overflow-y: auto; } #modalContent::-webkit-scrollbar { width: 10px; } #modalContent::-webkit-scrollbar-track { background: transparent; } #modalContent::-webkit-scrollbar-thumb { background: linear-gradient(var(--accent), var(--accent-2)); border-radius: 999px; border: 3px solid var(--bg-surface); } .proj-modal__close { position: absolute; top: 14px; right: 14px; z-index: 6; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(15, 23, 42, 0.55); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.25s var(--ease-out), transform 0.35s var(--ease-spring); } .proj-modal__close:hover { background: var(--accent); transform: rotate(90deg); } .proj-modal__hero { position: relative; line-height: 0; } .proj-modal__img { width: 100%; height: 210px; object-fit: cover; display: block; border-bottom: 1px solid var(--border-subtle); } .modal__content .proj-modal__body { padding: 24px 28px 30px; } .modal__content .proj-modal__badge { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; } .modal__content .proj-modal__title { font-family: var(--font-display); color: var(--text-primary); font-size: clamp(1.35rem, 3.4vw, 1.7rem); line-height: 1.2; margin: 0 0 14px; font-weight: 700; letter-spacing: -0.02em; } .modal__content .proj-modal__desc { color: var(--text-secondary); font-size: 0.97rem; line-height: 1.75; margin: 0 0 6px; } .modal__content .proj-modal__heading { font-family: var(--font-display); color: var(--text-primary); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 22px 0 12px; } .modal__content .proj-modal__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .modal__content .proj-modal__list li { position: relative; padding-left: 26px; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin: 0; } .modal__content .proj-modal__list li::before { content: "✓"; position: absolute; left: 2px; top: 1px; color: var(--accent-2); font-weight: 700; } .modal__content .proj-modal__chips { display: flex; flex-wrap: wrap; gap: 8px; } .modal__content .proj-modal__chips .tech-badge { display: inline-flex; align-items: center; margin: 0; padding: 6px 13px; border-radius: 999px; background: rgba(99, 102, 241, 0.08); color: var(--accent); border: 1px solid rgba(99, 102, 241, 0.16); font-size: 0.76rem; font-weight: 600; } .modal__content .proj-modal__results { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .modal__content .proj-modal__results .result-metric { flex: 1; min-width: 130px; text-align: center; padding: 20px 16px; border-radius: 16px; background: linear-gradient(160deg, rgba(99, 102, 241, 0.07), rgba(6, 182, 212, 0.05)); border: 1px solid rgba(99, 102, 241, 0.14); box-shadow: none; } .modal__content .proj-modal__results .metric-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1; margin: 0; background: linear-gradient(135deg, var(--accent-light), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .modal__content .proj-modal__results .metric-label { font-size: 0.8rem; color: var(--text-secondary); margin-top: 6px; line-height: 1.3; } @media (max-width: 768px) { .proj-modal__img { height: 170px; } .modal__content .proj-modal__body { padding: 20px 20px 24px; } }  :root { --lead-ink:#102c36; --lead-green:#0b6659; --lead-mint:#b9efce; } body.home-page-view { background:#f7f9f8; } .lead-shell { width:min(1180px, calc(100% - 80px)); margin:0 auto; } .lead-hero { padding:84px 0 64px; background:#0c202b; color:#fff; position:relative; overflow:hidden; } .lead-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 95% 10%, #17403e66, transparent 55%); pointer-events:none; } .lead-hero-grid { position:relative; display:grid; grid-template-columns:1.08fr 1fr; gap:54px; align-items:center; } .lead-eyebrow { display:flex; align-items:center; gap:9px; color:#b3cecd; font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; line-height:1.7; } .lead-eyebrow > span { width:6px; height:6px; border-radius:50%; background:#b9efce; flex-shrink:0; } .lead-hero h1 { font-family:var(--font-display); font-size:clamp(36px,4.2vw,58px); font-weight:500; line-height:1.1; letter-spacing:-.045em; margin:23px 0; color:#fff; } .lead-hero h1 em { font:inherit; color:#b9efce; } .lead-intro { font-size:16px; line-height:1.8; color:#c1d0d7; max-width:540px; margin:0 0 18px; } .lead-specialisms { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; } .lead-specialisms span { border:1px solid #5f897d66; border-radius:4px; padding:7px 10px; color:#c2dfd3; font-size:10px; line-height:1.5; } .lead-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; } .lead-button { display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:16px 21px; border-radius:6px; color:#0c3028; background:#b9efce; font-size:13px; font-weight:700; text-decoration:none; border:1px solid transparent; cursor:pointer; line-height:1.4; transition:background .2s,transform .2s; } .lead-button:hover { color:#0c3028; background:#d2f6df; transform:translateY(-2px); } .lead-button > span[aria-hidden] { font-size:20px; line-height:1; } .lead-text-link { color:#e4eeee; text-decoration:none; font-size:13px; border-bottom:1px solid #7e9a9c; padding:8px 0; } .lead-text-link:hover { color:#b9efce; } .lead-microcopy { color:#a2b9c3; font-size:11px; margin:14px 0 30px; line-height:1.5; } .lead-byline { display:flex; align-items:center; gap:12px; padding-top:24px; border-top:1px solid #ffffff18; } .lead-monogram { width:64px; height:40px; border:1px solid #71999666; border-radius:6px; flex-shrink:0; } .lead-byline strong,.lead-byline div > span { display:block; } .lead-byline strong { font-size:13px; font-weight:600; color:#eef5f6; } .lead-byline div > span { font-size:11px; color:#9fb7c1; margin-top:5px; line-height:1.6; } .forecast-preview { padding:28px; background:linear-gradient(135deg,#18333d,#102934); border:1px solid #6a999344; border-radius:14px; box-shadow:0 26px 65px #0003; transform:rotate(1deg); } .preview-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:23px; border-bottom:1px solid #ffffff16; } .preview-label { font-size:9px; color:#c4d9de; letter-spacing:.12em; } .preview-status { font-size:9px; color:#aac4be; border:1px solid #71999644; border-radius:20px; padding:5px 8px; white-space:nowrap; } .forecast-preview h2 { font-family:var(--font-display); font-size:21px; letter-spacing:-.025em; font-weight:500; color:#edf6f8; margin:25px 0 9px; } .forecast-preview > p { font-size:12px; color:#a5bdc6; margin:0; line-height:1.6; } .forecast-chart { margin:15px -6px 24px; } .forecast-chart svg { width:100%; height:auto; display:block; } .preview-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .agent-preview > .preview-label { margin-bottom:14px; color:#b9efce; font-size:9px; line-height:1.7; } .preview-steps div { border-top:1px solid #ffffff20; padding-top:13px; } .preview-steps span { display:block; font-size:10px; color:#71dcc5; margin-bottom:10px; } .preview-steps strong { display:block; font-size:12px; color:#e5eeee; font-weight:500; } .preview-steps small { display:block; font-size:9px; line-height:1.6; margin-top:6px; color:#a0b6c1; } .preview-foot { margin-top:25px; padding:13px 0 0; border-top:1px solid #ffffff16; color:#adc6cb; font-size:10px; } .preview-foot > span { color:#71dcc5; padding-right:6px; } .lead-fit-strip { background:#eaf0ec; border-bottom:1px solid #d8e3dd; padding:22px 0; } .lead-fit-strip .lead-shell { display:flex; justify-content:space-between; gap:25px; align-items:center; } .lead-fit-strip span { color:#4b6054; font-size:11px; } .lead-fit-strip strong { font-weight:500; font-size:13px; color:#24453a; } .lead-services { padding:80px 0; } .lead-section-heading { display:grid; grid-template-columns:1.2fr 1fr; gap:100px; align-items:end; margin-bottom:34px; } .home-page-view .section-eyebrow { color:#38665a; font-size:10px; letter-spacing:.14em; } .lead-section-heading h2 { font-family:var(--font-display); font-size:clamp(28px,3vw,40px); line-height:1.2; letter-spacing:-.035em; font-weight:500; margin:14px 0 0; color:var(--lead-ink); } .lead-section-heading > p { font-size:14px; color:#64756f; line-height:1.8; max-width:390px; margin:0; } .lead-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; } .lead-service-card { padding:27px 25px; background:#fff; border:1px solid #dae4df; border-radius:10px; display:flex; flex-direction:column; } .lead-service-card { border-top:3px solid #146d58; padding-top:25px; } .lead-service-card:nth-child(2) { border-top-color:#38718a; } .lead-service-card .lead-service-example { background:#f1f6f3; padding:14px; border-radius:5px; font-size:12px; line-height:1.7; color:#42604e; } .home-page-view .logo-mark { width:64px; height:40px; background:none; box-shadow:none; border-radius:6px; } .home-page-view .logo-mark::before { display:none; } .home-page-view .logo-mark img { border-radius:6px; object-fit:contain; } .footer .brand-mark { width:64px; height:40px; flex-shrink:0; object-fit:contain; } .lead-service-icon { width:42px; height:42px; display:grid; place-items:center; background:#edf5ef; border-radius:8px; color:#2c6855; font-size:18px; margin-bottom:24px; } .lead-service-label { font-size:10px!important; text-transform:uppercase; letter-spacing:.1em; font-weight:600; color:#416456!important; line-height:1.7; margin:0 0 14px; } .lead-service-card h3 { font-family:var(--font-display); font-size:24px; line-height:1.25; font-weight:500; letter-spacing:-.025em; color:var(--lead-ink); margin:0 0 18px; } .lead-service-card p { font-size:13px; color:#63716d; line-height:1.8; margin:0 0 15px; } .lead-service-card .lead-problem { color:#354b42; font-weight:500; } .lead-service-card ul { margin:auto 0 24px; padding:8px 0 0; list-style:none; } .lead-service-card li { display:flex; gap:9px; color:#475e53; font-size:12px; line-height:1.6; padding:6px 0; } .lead-service-card li span { color:#207759; } .lead-service-card > a { padding-top:18px; border-top:1px solid #e5ebe7; font-size:12px; font-weight:600; display:flex; justify-content:space-between; text-decoration:none; color:#145940; } #faq.lead-faq-section { display:block; padding:70px 0; background:#f1f5f2; } #faq .lead-faq-grid { max-width:none; } #faq .lead-faq-item { box-shadow:none; border:1px solid #dce6df; border-radius:8px; } #faq .lead-faq-item summary { color:#1e493a; font-size:14px; } #faq .lead-faq-item p { font-size:13px; color:#53665b; } .home-page-view .section-title { color:var(--lead-ink); font-weight:500; letter-spacing:-.035em; } .home-page-view .section-subtitle { color:#63746e; } .home-page-view .section-title::after { background:#328264; } .home-page-view .reveal { opacity:1; transform:none; } .home-page-view .portfolio-section { padding:70px 20px!important; } .home-page-view .portfolio-container { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; overflow:visible; padding:0; max-height:none; } .home-page-view .portfolio-item { min-width:0; max-width:none; width:auto; flex:unset; } .home-page-view .portfolio-card { height:100%; border:1px solid #dce6df; border-radius:10px; } .home-page-view .portfolio-card .card-body { height:185px; } .home-page-view .portfolio-card .card-footer { padding:22px; } .home-page-view .portfolio-card .card-title { font-size:18px; line-height:1.35; color:#193d32; } .home-page-view .portfolio-card .card-text { font-size:12px; line-height:1.7; color:#61746c; } .home-page-view .portfolio-card:hover .card-footer { opacity:1; } .home-page-view .toggle-btn { border:0; background:transparent; } .lead-project-link { margin-top:14px; border:0; background:transparent; color:#246346; cursor:pointer; font-size:12px; font-weight:600; text-align:left; padding:0; text-decoration:underline; } .lead-projects-more { display:block; margin:28px auto 0; padding:12px 22px; border:1px solid #749485; color:#244d3b; background:transparent; border-radius:6px; font-size:12px; cursor:pointer; } [hidden] { display:none!important; } .lead-contact { padding:80px 0; background:#f7f9f8; } .lead-contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:65px; margin-top:40px; align-items:start; } .lead-contact-aside { padding:25px 0; } .lead-contact-aside h3 { font-family:var(--font-display); font-weight:500; color:var(--lead-ink); font-size:29px; line-height:1.3; letter-spacing:-.02em; margin:12px 0 26px; } .lead-next-steps { list-style:none; padding:0; margin:0; } .lead-next-steps li { display:flex; gap:18px; margin:24px 0; } .lead-next-steps li > span { color:#286046; font-size:12px; padding-top:3px; } .lead-next-steps strong { color:#29473b; font-size:13px; font-weight:600; } .lead-next-steps p { color:#4b6054; font-size:12px; line-height:1.8; margin:5px 0 0; } .lead-direct { padding-top:26px; margin-top:32px; border-top:1px solid #d5e0d9; } .lead-direct strong { display:block; color:#3f574b; font-size:12px; margin-bottom:13px; } .lead-direct a { display:block; width:fit-content; font-size:13px; color:#236249; margin:12px 0; } .lead-direct p { font-size:11px; color:#4b6054; margin-top:26px; } .lead-form-panel { padding:30px; border:1px solid #dce5e0; border-radius:12px; background:#fff; box-shadow:0 10px 30px #13372506; min-width:0; } .lead-local-note { background:#f2f5e8; color:#5b6527; padding:12px; border:1px solid #dce5c0; border-radius:6px; font-size:12px; line-height:1.6; margin-bottom:22px; } .lead-field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .lead-field-row > div { min-width:0; } .lead-form-panel label { display:block; color:#304c3e; font-size:12px; font-weight:600; line-height:1.6; margin:0 0 7px; } .lead-form-panel label small { color:#52665a; font-weight:400; font-size:11px; } .lead-form-panel input:not([type=checkbox]):not([type=hidden]), .lead-form-panel select, .lead-form-panel textarea { width:100%; display:block; box-sizing:border-box; border:1px solid #ccd8d0; border-radius:5px; background:#fcfdfc; color:#244133; font:inherit; font-size:13px; padding:12px; line-height:1.5; margin:0 0 19px; box-shadow:none; } .lead-form-panel textarea { resize:vertical; min-height:120px; } .lead-form-panel input::placeholder,.lead-form-panel textarea::placeholder { color:#52665a; opacity:1; font-size:12px; } .lead-form-panel input:focus,.lead-form-panel select:focus,.lead-form-panel textarea:focus { outline:2px solid #499a75; outline-offset:2px; } .lead-field-hint { color:#52665a; font-size:11px; line-height:1.7; margin:0 0 10px; } .lead-form-panel .lead-intent { display:flex; align-items:flex-start; gap:10px; font-weight:400; font-size:12px; margin:3px 0 15px; } .lead-intent input { width:16px; height:16px; margin:2px 0 0; flex-shrink:0; accent-color:#257150; } .lead-form-privacy { color:#52665a; font-size:10px; line-height:1.8; margin:15px 0; } .lead-form-privacy a { color:#256047; } .lead-form-panel .lead-button { width:100%; background:#14583f; color:#fff; border-radius:5px; } .lead-form-panel .lead-button:hover { background:#0f4833; } .lead-form-panel .lead-button:disabled { opacity:.6; cursor:wait; } .lead-form-panel .lead-button + p { margin-top:12px; } .lead-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; } .lead-form-status { margin-top:18px; padding:17px; background:#e9f4ed; border:1px solid #98c8a9; color:#205337; border-radius:6px; font-size:13px; line-height:1.8; } .lead-form-status[data-kind=error] { background:#fff1ef; border-color:#ebc0b9; color:#9a3024; } .lead-form-status[data-kind=preview] { background:#f4f6e9; border-color:#d9dfb4; color:#56612c; } .home-page-view .nav-cta { background:#165a43; box-shadow:none; color:#fff; border-radius:6px; } .home-page-view .nav-cta:hover { background:#0e4532; box-shadow:none; } .home-page-view .nav-links { background:transparent; border:0; box-shadow:none; } .home-page-view .nav-links a.is-active { color:#195c43; background:#e5f0e9; } .home-page-view .avail-pill { display:none; } .home-page-view .logo-text__role { color:#4d7768; } .lead-button:focus-visible,.lead-project-link:focus-visible,.lead-projects-more:focus-visible,a:focus-visible { outline:3px solid #429876; outline-offset:4px; } @media (max-width:1100px) { .lead-shell { width:calc(100% - 48px); } .lead-hero-grid { gap:30px; } .lead-hero h1 { font-size:43px; } .lead-hero .lead-actions { gap:12px; } .forecast-preview { padding:22px; } .preview-status { display:none; } .lead-service-card { padding:24px 18px; } .lead-contact-grid { gap:35px; } } @media (max-width:800px) { .lead-hero { padding:50px 0; } .lead-hero-grid { grid-template-columns:1fr; gap:35px; } .lead-hero h1 { font-size:clamp(36px,7.3vw,53px); } .forecast-preview { transform:none; max-width:550px; } .lead-fit-strip .lead-shell { flex-wrap:wrap; gap:16px 22px; } .lead-fit-strip span { width:100%; } .lead-fit-strip strong { font-size:11px; } .lead-section-heading { gap:25px; grid-template-columns:1fr; } .lead-section-heading > p { max-width:none; } .lead-service-grid { grid-template-columns:1fr; } .lead-service-card { padding:26px; } .lead-service-card:first-child { padding-top:24px; } .lead-service-card h3 { max-width:430px; } .lead-service-card ul { margin-top:0; } .lead-services { padding:55px 0; } .home-page-view .portfolio-container { grid-template-columns:repeat(2,minmax(0,1fr)); } .lead-contact-grid { grid-template-columns:1fr; gap:25px; } .lead-contact-aside { padding:0; } .lead-next-steps { display:none; } .lead-direct { margin-top:20px; padding-top:20px; } .lead-direct p { margin-top:18px; } .lead-contact { padding:55px 0; } } @media (max-width:520px) { .lead-shell { width:calc(100% - 36px); } .lead-eyebrow { font-size:9px; letter-spacing:.08em; } .lead-hero h1 { font-size:37px; } .lead-intro { font-size:14px; } .lead-actions { align-items:flex-start; flex-direction:column; } .lead-button { font-size:12px; padding:14px 17px; } .lead-byline div > span { font-size:10px; } .forecast-preview { padding:20px 16px; } .forecast-preview h2 { font-size:20px; } .preview-steps { gap:9px; } .preview-steps small { font-size:8px; } .preview-foot { font-size:9px; } .lead-fit-strip .lead-shell { gap:13px; } .lead-fit-strip strong { font-size:10px; } .home-page-view .portfolio-container { grid-template-columns:1fr; } .home-page-view .portfolio-card .card-body { height:190px; } .lead-form-panel { padding:21px 16px; } .lead-field-row { grid-template-columns:1fr; gap:0; } .lead-form-panel input:not([type=checkbox]):not([type=hidden]), .lead-form-panel select, .lead-form-panel textarea { font-size:16px; } .lead-contact-aside h3 { font-size:25px; } .lead-contact .section-title { font-size:30px; } .home-page-view .logo-text__name { font-size:12px; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto!important; } *,*::before,*::after { animation:none!important; transition:none!important; } }  html.home-page-view { --accent:#1d6b50; --accent-light:#43876d; --accent-dark:#124d39; --accent-2:#3d8a71; --accent-glow:rgba(29,107,80,.15); --accent-2-glow:rgba(61,138,113,.12); --text-primary:#102c36; --text-secondary:#5c7167; --text-muted:#73857d; --bg-page:#f7f9f8; --bg-void:#0c202b; --bg-deep:#102c36; --border-subtle:#dde6e1; --border-strong:#c9d9cf; } .home-page-view body::after, body.home-page-view::after { display:none; } .home-page-view .section-eyebrow { justify-content:flex-start; text-align:left; margin:0 0 14px; font-weight:600; } .home-page-view .section-eyebrow::before, .home-page-view .section-eyebrow::after, .home-page-view .section-title::before, .home-page-view .section-title::after { display:none; } .home-page-view .lead-section-heading { margin-bottom:32px; align-items:end; gap:56px; } .home-page-view .lead-section-heading h2, .home-page-view .section-title { font-family:var(--font-display); font-size:clamp(29px,3.1vw,40px); font-weight:500; line-height:1.2; letter-spacing:-.035em; color:var(--lead-ink); text-align:left; margin:0; padding:0; } .home-page-view .lead-section-heading > p, .home-page-view .section-subtitle { font-size:15px; line-height:1.8; color:#5c7167; font-style:normal; text-align:left; } .home-page-view .section-subtitle { margin:16px 0 32px; max-width:690px; padding:0; } .home-page-view .lead-services, .home-page-view .portfolio-section, .home-page-view .lead-about, .home-page-view .lead-process, .home-page-view .lead-insights, .home-page-view #faq.lead-faq-section, .home-page-view .lead-contact { padding:72px 0!important; border-top:1px solid #e1e9e4; } .home-page-view .lead-services { border-top:0; } .home-page-view .portfolio-section, .home-page-view .lead-process, .home-page-view #faq.lead-faq-section { background:#fff!important; } .home-page-view .lead-about { background:#eef3ef; } .home-page-view .lead-insights { background:#f7f9f8; } .home-page-view .lead-contact { background:#edf3ef; } .lead-service-card p { font-size:14px; } .lead-service-card li { font-size:13px; } .lead-service-card { box-shadow:none; } .lead-specialisms span { font-size:11px; } .preview-steps small { font-size:10px; } .preview-label, .preview-status, .agent-preview > .preview-label { font-size:10px; } .preview-foot { font-size:11px; } .lead-profile { display:grid; grid-template-columns:300px 1fr; gap:52px; align-items:center; } .lead-profile-photo { display:block; width:100%; height:330px; object-fit:cover; object-position:center 30%; border-radius:10px; } .lead-profile-copy h3 { font-family:var(--font-display); color:var(--lead-ink); font-weight:500; font-size:25px; line-height:1.35; letter-spacing:-.025em; margin:0 0 18px; max-width:620px; } .lead-profile-copy p { font-size:15px; line-height:1.8; color:#52695c; margin:0 0 18px; max-width:680px; } .lead-industry-tags { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0; } .lead-industry-tags span { font-size:11px; line-height:1.5; color:#496655; background:#f8faf8; border:1px solid #d2dfd5; border-radius:4px; padding:6px 10px; } .lead-profile-link { color:#1d6548; font-size:13px; font-weight:600; text-underline-offset:4px; } .lead-process-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; margin:0; list-style:none; gap:24px; } .lead-process-step { padding:23px 0 0; border-top:2px solid #aecabc; } .lead-step-number { display:block; font-family:var(--font-display); font-size:14px; color:#327a58; margin-bottom:24px; } .lead-process-step h3 { font-family:var(--font-display); font-size:20px; color:var(--lead-ink); font-weight:500; margin:0 0 14px; line-height:1.3; } .lead-process-step p { font-size:14px; line-height:1.8; color:#5c7167; margin:0; } .home-page-view #portfolioTabs, .lead-filters { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; list-style:none; background:none; border:0; border-radius:0; box-shadow:none; margin:0 0 26px; padding:0; } .home-page-view #portfolioTabs li { margin:0; padding:0; } .home-page-view #portfolioTabs button, .lead-filters button { font-family:var(--font-body); font-size:12px; font-weight:500; color:#52695c; border:1px solid #d5e1d9; background:#fff; border-radius:5px; padding:9px 15px; cursor:pointer; box-shadow:none; transition:background .2s; min-height:38px; } .home-page-view #portfolioTabs button::before, .home-page-view #portfolioTabs button::after { display:none; } .home-page-view #portfolioTabs button[aria-pressed=true], .lead-filters button[aria-pressed=true], .home-page-view #portfolioTabs button:hover, .lead-filters button:hover { color:#fff; background:#1d6548; border-color:#1d6548; box-shadow:none; transform:none; } .home-page-view .portfolio-card, .lead-article { border:1px solid #d9e4dc; border-radius:10px; background:#fff; box-shadow:none; overflow:hidden; display:flex; flex-direction:column; height:100%; } .home-page-view .portfolio-card:hover { box-shadow:0 8px 24px #143c2910; transform:translateY(-3px); } .home-page-view .portfolio-card .card-body { height:190px; padding:0; background:#edf2ef; } .home-page-view .portfolio-card .card-image { width:100%; height:100%; object-fit:cover; border-radius:0; padding:0; } .home-page-view .portfolio-card .card-footer { display:flex; flex-direction:column; flex:1; padding:23px; border:0; background:#fff; } .home-page-view .portfolio-card .card-text { font-size:13px; line-height:1.8; margin:12px 0 20px; } .home-page-view .portfolio-card .card-title { font-weight:500; line-height:1.35; margin:0; } .home-page-view .portfolio-card .lead-project-link { margin-top:auto; width:fit-content; } .lead-project-link { min-height:34px; text-underline-offset:4px; } .lead-article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } .lead-article > img { display:block; width:100%; height:190px; object-fit:cover; background:#edf2ef; } .lead-article-copy { padding:23px; display:flex; flex-direction:column; flex:1; } .lead-article h3 { font-family:var(--font-display); font-size:20px; font-weight:500; line-height:1.35; color:var(--lead-ink); letter-spacing:-.02em; margin:0 0 12px; } .lead-article-copy > p:not(.lead-service-label) { font-size:13px; line-height:1.8; color:#5c7167; margin:0 0 20px; } .lead-article .lead-project-link { width:fit-content; margin-top:auto; } .home-page-view #faq .lead-faq-grid { margin-top:30px; gap:16px; align-items:start; } .home-page-view #faq .lead-faq-item { border-radius:8px; border-color:#d9e4dc; background:#f8faf8; padding:20px; box-shadow:none; } .home-page-view #faq .lead-faq-item[open] { border-color:#8fb39d; } .home-page-view #faq .lead-faq-item summary { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:0; font-weight:500; line-height:1.6; } .home-page-view #faq .lead-faq-item p { padding:0; margin:14px 0 0; font-size:14px; } .home-page-view #faq .lead-faq-item summary::after { float:none; flex:0 0 18px; margin:3px 0 0; text-align:center; color:#347654; background:none; border:0; } .home-page-view .lead-contact-grid { margin-top:0; } .lead-contact-aside { padding:12px 0; } .lead-form-panel label { font-size:13px; } .lead-field-hint { font-size:12px; } .lead-form-privacy { font-size:11px; } .lead-next-steps p { font-size:13px; }  .home-page-view .navbar-container { padding:8px 0; background:#fbfdfb; border-bottom:1px solid #dce6df; border-image:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } .home-page-view .navbar-container::before, .home-page-view .navbar-container::after { display:none; } .home-page-view .navbar { max-width:1180px; width:calc(100% - 80px); margin:auto; padding:12px 0; } .home-page-view .logo-link { padding:0; } .home-page-view .logo-link:hover { background:none; } .home-page-view .nav-links { gap:4px; padding:0; } .home-page-view .nav-links a { font-size:12px; border-radius:5px; padding:9px 11px; box-shadow:none; } .home-page-view .nav-links a::before, .home-page-view .nav-links a::after { display:none; } .home-page-view .nav-links a:hover { color:#1d6548; background:#edf4ef; } .home-page-view .nav-cta { text-decoration:none; font-size:12px; padding:11px 15px; border:0; } .home-page-view .scroll-progress { height:2px; } .home-page-view .scroll-progress__bar { background:#387959; box-shadow:none; } .home-page-view .back-to-top { width:42px; height:42px; border-radius:8px; background:#1d6548; box-shadow:0 4px 12px #163f2522; } .home-page-view .sidebar { background:#fbfdfb; border:1px solid #dce6df; border-radius:8px; box-shadow:0 12px 24px #18382414; } .home-page-view .sidebar a { color:#284c3c; } .home-page-view .sidebar .nav-cta { color:#fff; } .home-page-view .footer { background:#0c202b; padding:48px 0 24px; border-top:0; } .home-page-view .footer-container { width:min(1180px,calc(100% - 80px)); margin:auto; padding:0; max-width:none; } .home-page-view .footer-top { gap:35px; } .home-page-view .footer-logo p { font-size:15px; } .home-page-view .footer-subtext, .home-page-view .footer li a, .home-page-view .footer-bottom, .home-page-view .footer-links a { color:#b2c6c7; font-size:12px; line-height:1.8; } .home-page-view .footer .footer-heading { color:#e6efec; font-size:11px; font-weight:500; letter-spacing:.1em; margin:0 0 15px; } .home-page-view .footer-bottom { margin-top:32px; border-top:1px solid #ffffff18; padding-top:20px; } .home-page-view .footer::before, .home-page-view .footer::after, .home-page-view .footer-top::before { display:none; } .home-page-view .footer .social-icon { background:#ffffff0c; border:1px solid #ffffff1a; box-shadow:none; border-radius:7px; } .home-page-view .footer .social-icon:hover { background:#205743; }  dialog.lead-dialog { position:fixed; inset:0; width:min(760px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:0; margin:auto; border:1px solid #cddbd2; border-radius:12px; background:#fff; color:var(--lead-ink); box-shadow:0 25px 70px #0b28233b; overflow:auto; } dialog.lead-dialog:not([open]) { display:none; } dialog.lead-dialog::backdrop { background:#0b202bc4; backdrop-filter:blur(4px); } .lead-dialog-close, .lead-dialog .proj-modal__close { position:sticky; float:right; top:14px; right:auto; margin:14px 14px -54px 0; z-index:3; width:40px; height:40px; display:grid; place-items:center; border:1px solid #d4e2d9; border-radius:8px; background:#fff; color:#244f3a; font-size:25px; box-shadow:0 2px 10px #0001; cursor:pointer; } .lead-dialog-close:hover, .lead-dialog .proj-modal__close:hover { background:#edf4ef; color:#174b32; transform:none; } .lead-dialog .modal__content { width:100%; max-width:none; border:0; border-radius:0; padding:0; box-shadow:none; background:#fff; transform:none; max-height:none; overflow:visible; } .lead-dialog #modalContent, .lead-dialog #modalBody { max-height:none; padding:0; overflow:visible; } .lead-dialog #modalBody { min-height:120px; } .lead-dialog .lead-detail-prose { white-space:pre-line; } .lead-dialog .lead-dialog-status { display:block; padding:60px 28px 28px; font-size:14px; line-height:1.8; } .lead-dialog .proj-modal__img, .lead-dialog .blog-modal__img { display:block; width:100%; height:210px; object-fit:cover; } .lead-dialog .proj-modal__body, .lead-dialog .blog-modal__body { padding:28px; } .lead-dialog .proj-modal__title, .lead-dialog .blog-modal__title { font-family:var(--font-display); font-size:27px; line-height:1.3; font-weight:500; color:var(--lead-ink); margin:0 0 20px; } .lead-dialog p, .lead-dialog li, .lead-dialog .proj-modal__desc { color:#52695c; font-size:14px; line-height:1.8; } .lead-dialog .proj-modal__heading, .lead-dialog .blog-modal__heading { font-size:18px; color:var(--lead-ink); margin:26px 0 12px; } .lead-dialog .proj-modal__badge, .lead-dialog .blog-modal__badge { display:inline-block; background:#eaf2ed; color:#286446; border:1px solid #cadfcf; padding:5px 9px; border-radius:4px; font-size:11px; margin-bottom:16px; } .lead-dialog .tech-badge, .lead-dialog .tech-chip { display:inline-block; background:#eff5f1!important; color:#39694e!important; border:1px solid #d2e2d7!important; border-radius:4px!important; padding:6px 9px; font-size:11px; } .lead-dialog .blog-modal__chips { display:flex; flex-wrap:wrap; gap:8px; } .lead-dialog .result-metric, .lead-dialog .blog-result { background:#eff5f1!important; border:1px solid #d2e2d7!important; border-radius:6px!important; padding:18px; } .lead-dialog .metric-value, .lead-dialog .blog-result__value { background:none!important; -webkit-text-fill-color:#286446!important; color:#286446!important; font-size:24px; } .lead-dialog .blog-modal__results { display:flex; flex-wrap:wrap; gap:12px; } .lead-dialog .blog-result { flex:1; } .lead-dialog .blog-result__label { font-size:12px; color:#52695c; margin-top:5px; } .lead-dialog .blog-modal__cta { display:inline-flex; gap:10px; margin-top:22px; background:#1d6548; color:#fff; padding:12px 18px; font-size:13px; text-decoration:none; border-radius:5px; } @media (max-width:1100px) { .home-page-view .navbar, .home-page-view .footer-container { width:calc(100% - 48px); } .home-page-view .lead-section-heading { gap:30px; } .lead-process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; } } @media (max-width:800px) { .home-page-view .lead-services, .home-page-view .portfolio-section, .home-page-view .lead-about, .home-page-view .lead-process, .home-page-view .lead-insights, .home-page-view #faq.lead-faq-section, .home-page-view .lead-contact { padding:48px 0!important; } .home-page-view .lead-section-heading { gap:18px; } .home-page-view .lead-section-heading > p { max-width:620px; } .lead-profile { grid-template-columns:220px 1fr; gap:26px; } .lead-profile-photo { height:280px; } .lead-profile-copy h3 { font-size:22px; } .lead-article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .home-page-view #faq .lead-faq-grid { grid-template-columns:1fr; } .lead-next-steps { display:block; margin-top:20px; } .lead-next-steps li { margin:16px 0; } .home-page-view .lead-contact-grid { gap:30px; } .home-page-view .footer-top { grid-template-columns:1fr 1fr; gap:30px; } } @media (max-width:520px) { .home-page-view .navbar, .home-page-view .footer-container { width:calc(100% - 36px); } .lead-profile { grid-template-columns:1fr; gap:24px; } .lead-profile-photo { width:100%; max-width:330px; height:290px; } .lead-profile-copy h3 { font-size:23px; } .lead-process-grid, .lead-article-grid { grid-template-columns:1fr; } .lead-process-grid { gap:23px; } .lead-process-step { padding:18px 0 0; } .lead-step-number { margin-bottom:14px; } .home-page-view .footer-top { grid-template-columns:1fr 1fr; } .home-page-view .footer-left { grid-column:1/-1; } .home-page-view .footer-bottom { display:flex; flex-direction:column; align-items:flex-start; gap:12px; } .lead-dialog .proj-modal__body, .lead-dialog .blog-modal__body { padding:22px; } .lead-dialog .proj-modal__title, .lead-dialog .blog-modal__title { font-size:23px; } } html.home-page-view { scroll-behavior:smooth; scroll-padding-top:0; } .home-page-view main > section[id], .home-page-view #main { scroll-margin-top:90px; }  .lead-service-links { display:flex; flex-wrap:wrap; gap:16px 24px; padding-top:18px; border-top:1px solid #e5ebe7; } .lead-service-links a { color:#145940; font-size:12px; font-weight:600; text-underline-offset:4px; } .consulting-page { background:#fff; } .consulting-main h1 { font-family:var(--font-display); font-size:clamp(32px,4.5vw,56px); font-weight:500; line-height:1.15; letter-spacing:-.035em; margin:16px 0 24px; } .consulting-main h2 { font-family:var(--font-display); font-size:clamp(26px,3vw,36px); font-weight:500; line-height:1.25; letter-spacing:-.025em; color:#102c36; margin:0 0 24px; } .consulting-main h3 { font-family:var(--font-display); font-size:21px; font-weight:500; line-height:1.35; color:#102c36; margin:0 0 16px; } .consulting-main p, .consulting-list li { font-size:15px; color:#52695c; line-height:1.85; } .consulting-main a { text-underline-offset:4px; } .consulting-hero { background:#0c202b; padding:36px 0 64px; } .consulting-hero h1 { color:#fff; max-width:890px; } .consulting-hero .lead-eyebrow { color:#b9efce; margin-top:38px; font-size:11px; } .consulting-hero .consulting-intro { color:#c1d0d7; font-size:17px; max-width:820px; margin:0 0 28px; } .consulting-hero .consulting-location { color:#a6c4b9; font-size:12px; margin-top:20px; } .consulting-breadcrumb { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; font-size:12px; line-height:1.7; color:#597064; } .consulting-breadcrumb a { color:inherit; } .consulting-hero .consulting-breadcrumb { color:#aecac2; } .consulting-section { padding:64px 0; border-bottom:1px solid #e1e9e4; } .consulting-tint { background:#eef3ef; } .consulting-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; } .consulting-grid article { border-top:2px solid #aecabc; padding-top:24px; } .consulting-columns, .consulting-cta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; } .consulting-columns p { margin:0 0 28px; } .consulting-list { padding-left:20px; margin:0; } .consulting-list li { padding:0 0 14px 6px; } .consulting-list li::marker { color:#1d6548; } .consulting-work-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; } .consulting-work-links a { display:flex; flex-direction:column; gap:12px; border:1px solid #d5e1d9; border-radius:8px; padding:24px; text-decoration:none; color:#1d6548; } .consulting-work-links a:hover { background:#f1f6f3; } .consulting-work-links span { font-size:12px; line-height:1.6; } .consulting-work-links strong { font-family:var(--font-display); font-weight:500; font-size:23px; line-height:1.4; } .consulting-faqs { max-width:850px; } .consulting-faqs details { border-bottom:1px solid #c9d9cf; padding:18px 0; } .consulting-faqs summary { display:flex; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; color:#153e30; font-size:16px; line-height:1.6; } .consulting-faqs summary::-webkit-details-marker { display:none; } .consulting-faqs summary::after { content:"+"; flex-shrink:0; } .consulting-faqs details[open] summary::after { content:"−"; } .consulting-faqs p { margin:14px 0 0; } .consulting-cta .lead-button, .consulting-project-cta .lead-button { background:#1d6548; color:#fff; margin-top:12px; } .consulting-link { color:#1d6548; font-weight:600; font-size:14px; } .consulting-project { padding-top:32px; padding-bottom:64px; } .consulting-project > .section-eyebrow { margin-top:36px; } .consulting-project .consulting-author { font-size:13px; margin-bottom:32px; } .consulting-project-image { width:100%; max-width:900px; height:clamp(210px,40vw,420px); object-fit:cover; display:block; border-radius:10px; margin-bottom:40px; } .consulting-prose { max-width:800px; } .consulting-prose > p { white-space:pre-line; margin:0 0 32px; } .consulting-prose h2 { font-size:26px; margin-top:32px; margin-bottom:16px; } .consulting-tech { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none; } .consulting-tech li { padding:7px 11px; color:#39694e; background:#eff5f1; border:1px solid #d2e2d7; border-radius:4px; font-size:12px; } .consulting-project-cta { margin:40px 0 28px; padding:28px; background:#eef3ef; border-radius:8px; } .consulting-project-cta h2 { margin-top:0; } .consulting-project-cta p a { color:#1d6548; } @media(max-width:800px) { .consulting-section { padding:44px 0; } .consulting-grid, .consulting-columns, .consulting-cta { grid-template-columns:1fr; gap:28px; } .consulting-hero { padding-bottom:44px; } .consulting-hero .consulting-intro { font-size:16px; } } @media(max-width:520px) { .consulting-work-links { grid-template-columns:1fr; } .consulting-hero .lead-eyebrow { font-size:10px; } .consulting-project-cta { padding:22px; } }  .site-icon { display:inline-block; width:1em; height:1em; vertical-align:-.125em; flex-shrink:0; } .insight-title-link { color:inherit; text-decoration:none; } .insight-title-link:hover { color:#14583f; text-decoration:underline; } .insight-index-link { margin:28px 0 0; text-align:center; } .insight-summary { color:#52695c; font-size:20px; line-height:1.7; max-width:800px; margin:20px 0; } .insight-page { max-width:1000px; } .insight-page h1 { max-width:920px; } .insight-page .consulting-author a { color:inherit; text-decoration:underline; } .insight-page .consulting-project-image { aspect-ratio:1200/630; height:auto; object-fit:cover; margin:30px 0 38px; } .insight-prose { max-width:740px; margin:auto; } .insight-prose p { white-space:normal; font-size:16px; line-height:1.9; } .insight-prose h2 { font-size:27px; line-height:1.35; margin:38px 0 16px; } .insight-prose h3 { margin:28px 0 12px; } .insight-prose ul { padding-left:22px; margin:18px 0 26px; } .insight-prose li { color:#52695c; font-size:16px; line-height:1.8; margin:10px 0; } .insight-prose a { color:#14583f; text-underline-offset:3px; } .insight-prose .lead-button { color:#0c3028; text-decoration:none; } .insight-takeaway { padding:24px; border-left:3px solid #2b7658; border-radius:6px; background:#edf4ef; margin:36px 0; } .insight-takeaway h2 { margin-top:0; font-size:21px; } .insight-takeaway p { margin-bottom:0; } .insight-external-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:26px; } .insight-external-list > a { display:flex; flex-direction:column; gap:14px; padding:25px; background:#fff; border:1px solid #d6e2da; border-radius:8px; text-decoration:none; } .insight-external-list strong { font-family:var(--font-display); font-size:20px; line-height:1.4; color:#102c36; } .insight-external-list span { color:#52695c; font-size:14px; line-height:1.7; } .insight-external-list span:last-child { color:#14583f; font-weight:600; margin-top:auto; } .consulting-page .lead-article-grid { margin-top:28px; } .consulting-reading { margin-top:28px; } .consulting-reading a { color:#14583f; line-height:1.7; } @media(max-width:800px) { .insight-external-list { grid-template-columns:1fr; } .insight-summary { font-size:17px; } .insight-prose h2 { font-size:24px; } .insight-prose p,.insight-prose li { font-size:16px; } }  .lead-assessment { display:grid; grid-template-columns:1fr 1.15fr; gap:40px; margin-top:24px; padding:32px; background:#eef3ef; border:1px solid #d4e1d8; border-radius:10px; scroll-margin-top:100px; } .lead-assessment h3 { font-family:var(--font-display); color:var(--lead-ink); font-size:27px; line-height:1.2; letter-spacing:-.025em; font-weight:500; margin:12px 0 16px; } .lead-assessment p,.lead-assessment li { color:#465f52; font-size:13px; line-height:1.8; } .lead-assessment-intro > p:not(.section-eyebrow) { margin:0 0 22px; } .lead-assessment .lead-button { background:#14583f; color:#fff; } .lead-assessment .lead-button:hover { background:#0f4833; } .lead-assessment h4 { font-size:14px; color:#244737; margin:0 0 14px; } .lead-assessment ul { margin:0; padding-left:18px; } .lead-assessment li { padding:0 0 12px 4px; } .lead-assessment .lead-assessment-terms { border-top:1px solid #c9d9ce; margin:8px 0 12px; padding-top:16px; font-size:12px; } .lead-assessment .lead-assessment-route { margin:0; font-size:12px; } .lead-assessment-route a { color:#14583f; text-underline-offset:3px; } .lead-case-summary { margin:14px 0 0; } .lead-case-summary dt { color:#2d5140; font-size:11px; font-weight:600; margin:14px 0 5px; } .lead-case-summary dd { color:#52675d; font-size:12px; line-height:1.75; margin:0; } .lead-optional-details { margin:0 0 20px; border-top:1px solid #e0e8e2; border-bottom:1px solid #e0e8e2; } .lead-optional-details summary { padding:14px 0; color:#304c3e; font-size:12px; font-weight:600; cursor:pointer; } .lead-optional-details summary span { font-weight:400; } .lead-optional-details[open] > .lead-field-row { margin-top:6px; } .lead-optional-details summary:focus-visible { outline:2px solid #499a75; outline-offset:3px; } @media (max-width:800px) { .lead-assessment { grid-template-columns:1fr; gap:28px; padding:26px; } } @media (max-width:520px) { .lead-assessment { padding:22px 18px; } .lead-assessment h3 { font-size:24px; } .lead-assessment .lead-button { width:100%; gap:10px; } }