:root {
     --bg-0: #070a14;
     --bg-1: #0b1020;
     --bg-2: #101731;
     --glass: rgba(255, 255, 255, 0.055);
     --glass-brd: rgba(255, 255, 255, 0.10);
     --glass-brd-hi: rgba(255, 255, 255, 0.20);
     --text-0: #ffffff;
     --text-1: #dfdfdf;
     --text-2: #3a3c46;
     --indigo: #5b5bf5;
     --orange: #ff8a3d;
     --teal: #2dd8c9;
     --grad-a: var(--indigo);
     --grad-b: var(--orange);
     --grad-c: var(--teal);
     --header-bg: rgba(7, 9, 18, 0.72);
     --font-display: 'Space Grotesk', sans-serif;
     --font-body: 'Inter', sans-serif;
     --font-mono: 'JetBrains Mono', monospace;
     color-scheme: dark;
 }

 :root[data-theme="light"] {
     --bg-0: #f7f7fb;
     --bg-1: #eef0f8;
     --bg-2: #e6e8f6;
     --glass: rgba(20, 20, 40, 0.045);
     --glass-brd: rgba(20, 20, 40, 0.10);
     --glass-brd-hi: rgba(20, 20, 40, 0.22);
     --text-0: #12131f;
     --text-1: #4c5066;
     --text-2: #7c8099;
     --indigo: #4338ca;
     --orange: #d9660f;
     --teal: #0e8a83;
     --header-bg: rgba(255, 255, 255, 0.78);
     color-scheme: light;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     background: var(--bg-0);
     color: var(--text-0);
     font-family: var(--font-body);
     overflow-x: hidden;
     min-height: 100vh;
     transition: background .4s ease, color .4s ease;
     position: relative;
 }

 ::selection {
     background: rgba(91, 91, 245, 0.32);
     color: #fff;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 img {
     max-width: 100%;
     display: block;
 }

 ul {
     list-style: none;
 }

 button {
     font: inherit;
 }

 /* ---------- ambient background blobs ---------- */
 .aurora {
     position: fixed;
     inset: 0;
     z-index: 0;
     pointer-events: none;
     overflow: hidden;
 }

 .aurora span {
     position: absolute;
     border-radius: 50%;
     filter: blur(90px);
     opacity: .35;
 }

 .aurora .a1 {
     width: 560px;
     height: 560px;
     background: var(--indigo);
     top: -160px;
     right: -120px;
 }

 .aurora .a2 {
     width: 480px;
     height: 480px;
     background: var(--orange);
     top: 60%;
     left: -160px;
     opacity: .22;
 }

 .aurora .a3 {
     width: 420px;
     height: 420px;
     background: var(--teal);
     bottom: -140px;
     right: 10%;
     opacity: .18;
 }

 :root[data-theme="light"] .aurora span {
     opacity: .16;
 }

 .grain {
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 2;
     opacity: 0.025;
     mix-blend-mode: overlay;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 }

 .glass {
     background: rgb(151 149 149 / 15%);
     border: 1px solid var(--glass-brd);
     backdrop-filter: blur(18px) saturate(140%);
     -webkit-backdrop-filter: blur(18px) saturate(140%);
     border-radius: 20px;
     position: relative;
 }

 .glass:hover {
     border-color: var(--glass-brd-hi);
 }

 .glass,
 .btn,
 input,
 textarea,
 select,
 .chip {
     transition: background .35s ease, border-color .25s ease, color .35s ease, box-shadow .35s ease, transform .25s ease;
 }

 /* ---------- full-width header ---------- */
 header {
     position: fixed !important;
     top: 0;
     left: 0;
     right: 0;
     z-index: 60;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px clamp(30px, 4vw, 20px);
     background: var(--header-bg);
     backdrop-filter: blur(16px) saturate(140%);
     -webkit-backdrop-filter: blur(16px) saturate(140%);
     border-bottom: 1px solid var(--glass-brd);
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .brand img {
     height: 55px;
     width: auto;
     /* background: #fff; */
     border-radius: 10px;
 }


 .logo-light,
 .logo-dark {
     height: 50px;
     width: auto;
 }

 .logo-dark {
     display: none;
 }

 body.dark-theme .logo-light {
     display: none;
 }

 body.dark-theme .logo-dark {
     display: block;
 }


 .nav-links {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .nav-links a {
     font-family: var(--font-body);
     /* font-weight: 500; */
     font-size: 15px;
     letter-spacing: 0.01em;
     color: var(--text-1);
     padding: 10px 20px;
     border-radius: 10px;
     transition: .2s;
 }

 .nav-links a:hover {
     color: var(--text-0);
     background: rgba(255, 255, 255, 0.06);
 }

 .header-right {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .nav-cta {
     font-family: var(--font-body);
     /* font-weight: 600; */
     font-size: 13px;
     padding: 8px 18px;
     text-transform: uppercase;
     border-radius: 20px;
     background: linear-gradient(100deg, var(--indigo), var(--orange));
     color: #fff;
     box-shadow: 0 6px 22px -8px rgba(91, 91, 245, 0.55);
 }

 .nav-cta:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 28px -8px rgba(91, 91, 245, 0.7);
 }

 .theme-toggle {
     width: 34px;
     height: 34px;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     color: var(--text-1);
     cursor: pointer;
     background: rgb(251 209 209 / 23%);
     border: 1px solid var(--glass-brd);
     flex-shrink: 0;
 }

 .theme-toggle:hover {
     color: var(--orange);
     border-color: var(--glass-brd-hi);
 }

 .hamburger {
     display: none;
     width: 35px;
     height: 35px;
     border-radius: 10px;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.04);
     border: 2px solid var(--glass-brd);
     cursor: pointer;
     flex-shrink: 0;
 }

 .hamburger svg {
     width: 24px;
     height: 24px;
     stroke: var(--text-0);
 }

 @media(max-width:1120px) {
     .nav-links {
         display: none;
     }

     .nav-cta {
         display: none;
     }

     .hamburger {
         display: flex;
     }
 }

 /* ---------- mobile drawer ---------- */
 .drawer {
     position: fixed;
     padding-top: 60px;
     inset: 0;
     z-index: 70;
     background: rgb(112 113 120 / 72%);
     backdrop-filter: blur(10px);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: start;
     gap: 6px;
     opacity: 0;
     visibility: hidden;
     transition: opacity .3s ease, visibility .3s ease;
 }

 .drawer.open {
     opacity: 1;
     visibility: visible;
 }

 .drawer a {
     font-family: var(--font-display);
     font-size: 15px;
     /* font-weight: 600; */
     color: #ffffff;
     padding: 10px 20px;
 }

 .drawer a:hover {
     color: var(--orange);
 }

 .drawer-close {
     position: absolute;
     top: 15px;
     right: 20px;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.08);
     border: 2px solid rgba(255, 255, 255, 0.18);
     color: #fff;
     font-size: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
 }

 .drawer .nav-cta {
     margin-top: 10px;
     display: inline-flex;
 }

 #back-to-top {
     position: fixed;
     right: 26px;
     bottom: 26px;
     z-index: 45;
     width: 46px;
     height: 46px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-1);
     cursor: pointer;
     opacity: 0;
     visibility: hidden;
     transform: translateY(12px);
     transition: opacity .3s ease, transform .3s ease, visibility .3s ease, color .25s ease, border-color .25s ease;
 }

 #back-to-top svg {
     width: 18px;
     height: 18px;
     stroke: currentColor;
 }

 #back-to-top.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 #back-to-top:hover {
     color: var(--orange);
     border-color: var(--glass-brd-hi);
     transform: translateY(-3px);
 }

 main {
     position: relative;
     z-index: 1;
 }

 section {
     position: relative;
     padding: 50px 20px 50px;
     max-width: 1200px;
     margin: 0 auto;
     scroll-margin-top: 80px;
 }

 .eyebrow {
     font-family: var(--font-mono);
     font-size: 15px;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     background: linear-gradient(100deg, var(--indigo), var(--orange));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     margin-bottom: 12px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .eyebrow::before {
     content: '';
     width: 22px;
     height: 2px;
     background: linear-gradient(90deg, var(--indigo), var(--orange));
     border-radius: 2px;
 }

 h2.section-title {
     font-family: var(--font-display);
     font-weight: 700;
     font-size: clamp(28px, 3.8vw, 40px);
     letter-spacing: -0.01em;
     margin-bottom: 12px;
 }

 .section-sub {
     color: var(--text-1);
     font-size: 15px;
     line-height: 1.6;
     max-width: 640px;
     margin-bottom: 38px;
 }

 /* ---------- hero ---------- */
 #hero {
     min-height: 100svh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding-top: 110px;
     position: relative;
     max-width: 1300px;
 }

 #canvas-wrap {
     position: absolute;
     top: 30px;
     right: -6%;
     width: min(56vw, 680px);
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     pointer-events: none;
 }

 #hero-canvas {
     width: 100%;
     height: 100%;
 }

 .hero-inner {
     position: relative;
     z-index: 3;
     max-width: 660px;
     top: -20px;
 }

 .hero-kicker {
     font-family: var(--font-mono);
     font-size: 12.5px;
     color: var(--text-1);
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 20px;
 }

 .dot-live {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--orange);
     box-shadow: 0 0 10px var(--orange);
     animation: pulse 2s infinite;
 }

 @keyframes pulse {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: .35;
     }
 }

 h1 {
     font-family: var(--font-display);
     font-weight: 800;
     font-size: clamp(38px, 5.8vw, 62px);
     line-height: 1.05;
     letter-spacing: -0.02em;
     margin-bottom: 20px;
 }

 h1 .grad {
     background: linear-gradient(100deg, var(--indigo), var(--orange) 65%, var(--teal));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .hero-sub {
     font-size: 16.5px;
     line-height: 1.65;
     color: var(--text-1);
     max-width: 480px;
     margin-bottom: 30px;
 }

 .hero-cta {
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
     align-items: center;
     margin-bottom: 38px;
 }

 .btn {
     font-family: var(--font-body);
     /* font-weight: 700; */
     font-size: 14px;
     padding: 10px 24px;
     border-radius: 20px;
     text-transform: uppercase;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     transition: .25s;
     cursor: pointer;
     border: none;
 }

 .btn-primary {
     background: linear-gradient(100deg, var(--indigo), var(--orange));
     color: #fff;
     box-shadow: 0 10px 30px -8px rgba(91, 91, 245, 0.5);
 }

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 16px 36px -8px rgba(91, 91, 245, 0.65);
 }

 .btn-ghost {
     color: var(--text-0);
 }

 .btn-ghost:hover {
     background: rgba(255, 255, 255, 0.06);
 }

 .hero-trustbar {
     display: flex;
     flex-wrap: wrap;
     gap: 10px 26px;
     font-family: var(--font-mono);
     font-size: 11.5px;
     color: var(--text-1);
 }

 .hero-trustbar span {
     display: flex;
     align-items: center;
     gap: 7px;
 }

 .hero-trustbar svg {
     width: 13px;
     height: 13px;
     stroke: var(--orange);
 }

 .scroll-cue {
     position: absolute;
     bottom: 50px;
     left: 24px;
     font-family: var(--font-mono);
     font-size: 11px;
     color: var(--text-1);
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .scroll-cue .line {
     width: 1px;
     height: 34px;
     background: linear-gradient(var(--orange), transparent);
     animation: scrolldown 1.8s infinite;
 }

 @keyframes scrolldown {
     0% {
         opacity: 0;
         transform: translateY(-6px);
     }

     50% {
         opacity: 1;
     }

     100% {
         opacity: 0;
         transform: translateY(10px);
     }
 }

 @media(max-width:1000px) {
     #hero {
         min-height: auto;
         padding-top: 110px;
         padding-bottom: 40px;
     }

     #canvas-wrap {
         position: relative;
         inset: auto;
         top: auto;
         right: auto;
         width: 100%;
         max-width: 320px;
         height: 230px;
         margin: 0 auto 4px;
         order: -1;
         opacity: .9;
     }

     .hero-inner {
         max-width: 100%;
     }
 }

 @media(max-width:480px) {
     header {
         padding: 5px clamp(8px, 4vw, 20px);
     }

     #canvas-wrap {
         height: 190px;
         max-width: 250px;
     }

     #canvas-wrap {
         top: -20px;
     }

     .scroll-cue {
         position: absolute;
         bottom: 0px;
     }

     .brand img {
         height: 45px;
     }

     #hero {
         padding-top: 90px;
         padding-bottom: 20px;
     }

     .hero-kicker {
         font-size: 12px;
         margin-bottom: 10px;
     }

     h1 {
         font-size: clamp(30px, 5.8vw, 62px);
         margin-bottom: 10px;
     }

     .hero-sub {
         font-size: 14px;
         margin-bottom: 12px;
     }

     .hero-cta {
         gap: 10px;
         margin-bottom: 16px;
     }

     .btn {
         font-size: 14px;
         padding: 10px 16px;
     }

     .hero-trustbar {
         gap: 10px 10px;
         font-size: 11px;
     }

     #back-to-top {
         right: 15px;
         bottom: 20px;
         width: 40px;
         height: 40px;
     }

 }

 /* ---------- about ---------- */
 .about-grid {
     display: grid;
     grid-template-columns: 1.05fr .95fr;
     gap: 26px;
     align-items: start;
     margin-bottom: 16px;
 }

 @media(max-width:900px) {
     .about-grid {
         grid-template-columns: 1fr;
     }
 }

 .about-card {
     padding: 40px;
     border-top: 3px solid transparent;
     border-image: linear-gradient(100deg, var(--indigo), var(--orange)) 1;
 }

 .about-card p {
     color: var(--text-1);
     line-height: 1.7;
     font-size: 14.5px;
 }

 .feature-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
 }

 @media(max-width:520px) {
     .feature-grid {
         grid-template-columns: 1fr;
     }

     h2.section-title {
         font-size: clamp(22px, 3.8vw, 40px);
         margin-bottom: 6px;
     }

     .section-sub {
         font-size: 14px;
         line-height: 1.4;
         margin-bottom: 16px;
     }

     .about-card {
         padding: 15px;
     }

     .about-card p {
         line-height: 1.4;
         font-size: 14px;
     }

     .about-grid {
         gap: 15px;
         margin-bottom: 10px;
     }
 }

 .feature-card {
     padding: 20px;
 }

 .feature-card .fc-icon {
     width: 34px;
     height: 34px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, var(--indigo), var(--orange));
     margin-bottom: 12px;
 }

 .feature-card .fc-icon svg {
     width: 17px;
     height: 17px;
     stroke: #fff;
 }

 .feature-card h3 {
     font-family: var(--font-mono);
     font-size: 11.5px;
     letter-spacing: .06em;
     margin-bottom: 6px;
 }

 .feature-card p {
     color: var(--text-1);
     font-size: 12.8px;
     line-height: 1.55;
 }

 .stat-strip {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 14px;
     margin-top: 26px;
 }

 @media(max-width:700px) {
     .stat-strip {
         grid-template-columns: 1fr 1fr;
     }

     .stat-strip {
         gap: 14px;
         margin-top: 16px;
     }

     .feature-card {
         padding: 10px 15px;
     }
 }

 .stat-box {
     padding: 22px 14px;
     text-align: center;
 }

 .stat-box .stat-num {
     font-family: var(--font-display);
     font-size: 32px;
     font-weight: 800;
     background: linear-gradient(100deg, var(--indigo), var(--orange));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .stat-box .stat-label {
     font-family: var(--font-mono);
     font-size: 10.5px;
     color: var(--text-1);
     margin-top: 4px;
     display: block;
 }

 /* ---------- services ---------- */
 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 18px;
 }

 .svc-card {
     padding: 26px 24px;
     perspective: 800px;
     overflow: hidden;
 }

 .svc-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--indigo), var(--orange));
     opacity: 0;
     transition: opacity .3s ease;
 }

 .svc-card:hover::before {
     opacity: 1;
 }

 .svc-card .svc-icon {
     width: 42px;
     height: 42px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(91, 91, 245, 0.12);
     border: 1px solid var(--glass-brd);
     margin-bottom: 18px;
 }

 .svc-card .svc-icon svg {
     width: 20px;
     height: 20px;
     stroke: var(--orange);
 }

 .svc-card h3 {
     font-family: var(--font-display);
     font-size: 17px;
     font-weight: 700;
     margin-bottom: 8px;
 }

 .svc-card p {
     color: var(--text-1);
     font-size: 13.3px;
     line-height: 1.6;
 }

 /* ---------- generic horizontal marquee (technology + industries) ---------- */
 .marquee {
     overflow: hidden;
     position: relative;
     mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
     -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
 }

 .marquee-track {
     display: flex;
     gap: 16px;
     width: max-content;
     animation: marquee 34s linear infinite;
 }

 .marquee-track.rev {
     animation-name: marqueeRev;
     margin-top: 16px;
 }

 @keyframes marquee {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 @keyframes marqueeRev {
     from {
         transform: translateX(-50%);
     }

     to {
         transform: translateX(0);
     }
 }

 .marquee:hover .marquee-track {
     animation-play-state: paused;
 }

 @media (prefers-reduced-motion: reduce) {
     .marquee-track {
         animation: none;
     }
 }

 .tech-chip {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 18px;
     border-radius: 14px;
 }

 .tech-chip img {
     height: 30px;
     width: auto;
     max-width: 70px;
     object-fit: contain;
 }

 .tech-chip span {
     font-family: var(--font-mono);
     font-size: 12px;
     color: var(--text-1);
     white-space: nowrap;
 }

 /* ---------- industries (marquee) ---------- */
 .ind-card {
     flex: 0 0 125px;
     padding: 15px 15px;
     text-align: center;
     perspective: 600px;
 }

 .ind-card .ind-icon {
     width: 90px;
     height: 90px;
     margin: 0 auto 12px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(1deg, rgb(208 208 254 / 71%), rgb(255 229 206 / 90%));
 }

 .ind-card .ind-icon img {
     width: 55px;
     height: 55px;
     object-fit: contain;
 }

 .ind-card span {
     font-family: var(--font-mono);
     font-size: 12px;
     color: var(--text-1);
     white-space: nowrap;
 }

 /* ---------- clients (carousel) ---------- */
 .clients-carousel {
     position: relative;
     padding: 0 50px;
 }

 .clients-track {
     display: flex;
     gap: 16px;
     overflow-x: auto;
     scroll-snap-type: x proximity;
     scroll-behavior: smooth;
     padding: 4px 2px 10px;
     scrollbar-width: none;
 }

 .clients-track::-webkit-scrollbar {
     display: none;
 }

 .client-card {
     flex: 0 0 160px;
     padding: 25px 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100px;
     perspective: 600px;
 }

 .client-card img {
     max-height: 80px;
     max-width: 100%;
     object-fit: contain;
     /* filter: grayscale(1) brightness(1.5) opacity(0.7); */
     transition: filter .3s ease, transform .3s ease;
     border-radius: 10px;
 }

 .client-card:hover img {
     filter: none;
     transform: scale(1.06);
 }

 .carousel-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 38px;
     height: 38px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 2;
     color: var(--text-1);
 }

 .carousel-btn:hover {
     color: var(--orange);
     border-color: var(--glass-brd-hi);
 }

 .carousel-btn.prev {
     left: 0;
 }

 .carousel-btn.next {
     right: 0;
 }

 .carousel-btn svg {
     width: 15px;
     height: 15px;
     stroke: currentColor;
 }

 @media(max-width:560px) {
     .clients-carousel {
         padding: 0 30px;
     }

     .client-card {
         flex: 0 0 120px;
         padding: 5px 5px;
         height: 80px;
     }

     .services-grid {
         gap: 10px;
     }

     .svc-card {
         padding: 12px 15px;
     }

     .svc-card .svc-icon {
         margin-bottom: 8px;
     }

     .marquee-track {
         gap: 10px;
     }

     .ind-card {
         flex: 0 0 125px;
         padding: 10px 8px;
     }

     .ind-card .ind-icon {
         width: 75px;
         height: 75px;
         margin: 0 auto 10px;
     }

     .ind-card .ind-icon img {
         width: 50px;
         height: 50px;
     }

     .ind-card span {
         font-size: 10px;
     }

     .tech-chip {
         padding: 10px 15px;
     }

     .tech-chip img {
         height: 20px;
     }

     .tech-chip span {
         font-size: 10px;
     }

     .clients-track {
         gap: 8px;
         padding: 4px 2px 4px;
     }
 }

 /* ---------- contact ---------- */
 #contact {
     padding-bottom: 70px;
 }

 .contact-wrap {
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     gap: 26px;
 }

 @media(max-width:960px) {
     .contact-wrap {
         grid-template-columns: 1fr;
     }
 }

 form.glass {
     padding: 32px;
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
 }

 @media(max-width:520px) {

     .contact-wrap {
         gap: 16px;
     }

     .form-row {
         grid-template-columns: 1fr;
         gap: 10px;
     }

     form.glass {
         padding: 20px;
         gap: 10px;
     }

     #contact {
         padding-bottom: 20px;
     }

     footer {
         padding: 20px 20px 30px !important;
         font-size: 12px !important;
     }

     footer .footer-links {
         gap: 10px;
     }

 }

 input,
 textarea,
 select {
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid var(--glass-brd);
     border-radius: 11px;
     padding: 13px 15px;
     color: var(--text-0);
     font-family: var(--font-body);
     font-size: 14px;
     outline: none;
     resize: none;
     width: 100%;
 }

 select {
     appearance: none;
     -webkit-appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23a9aec2' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 14px center;
 }

 input:focus,
 textarea:focus,
 select:focus {
     border-color: var(--orange);
     background: rgba(255, 255, 255, 0.06);
 }

 input::placeholder,
 textarea::placeholder {
     color: var(--text-1);
 }

 textarea {
     min-height: 110px;
 }

 .form-note {
     font-family: var(--font-mono);
     font-size: 11.5px;
     color: var(--text-2);
     margin-top: 2px;
 }

 .contact-info {
     padding: 30px;
     display: flex;
     flex-direction: column;
     gap: 22px;
 }

 .ci-block h3 {
     font-family: var(--font-mono);
     font-size: 11px;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: var(--text-1);
     margin-bottom: 10px;
 }

 .ci-row {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 13.5px;
     color: var(--text-1);
     margin-bottom: 8px;
 }

 .ci-row img {
     height: 20px;
     width: auto;
     border-radius: 3px;
 }

 .ci-addr {
     font-size: 12.8px;
     color: var(--text-1);
     line-height: 1.55;
     margin-top: 2px;
 }

 .ci-addr b {
     color: var(--text-0);
     font-weight: 600;
 }

 .follow-row {
     display: flex;
     gap: 10px;
 }

 .follow-row a {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .follow-row a img {
     height: 24px;
     width: 24px;
     object-fit: contain;
 }

 footer {
     text-align: center;
     padding: 30px 24px 60px;
     font-family: var(--font-mono);
     font-size: 11.5px;
     color: var(--text-1);
     position: relative;
     z-index: 1;
 }

 footer .footer-links {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 16px;
     margin-bottom: 14px;
 }

 footer a:hover {
     color: var(--orange);
 }

 .reveal {
     opacity: 0;
     transform: translateY(24px);
     transition: opacity .7s ease, transform .7s ease;
 }

 .reveal.in {
     opacity: 1;
     transform: translateY(0);
 }

 @media (prefers-reduced-motion: reduce) {
     .reveal {
         transition: none;
         opacity: 1;
         transform: none;
     }

     .dot-live,
     .scroll-cue .line {
         animation: none;
     }
 }